عمر قره محمد

يمكنك فعل ذلك باستخدام كل من react و nodejs و مكتبة multer و الطرف الثالث لحفظ الصور Cloudinary، وهذه هي الاكواد اللازمة لذلك : كود الخاص بـ react وهو يقوم بإرسال بيانات الصورة إلى السيرفر باستخدام axios ثم يتلقى رابط الصورة ويقوم بعرضها بعد ان يتم التحميل : import axios from 'axios'; import React, { useState } from 'react'; const ImageUpload = () => { // الحالة الخاصة بالصورة const [imageUrl, setImageUrl] = useState(''); // الوظيفة الخاصة بإرسال الطلب وتلقي رابط الصورة بعد الرفع const handleFileUpload = async (event: React.ChangeEvent<HTMLInputElement>) => { // event نحضر الصورة من الـ const file = event.target.files[0]; // نرسلها إلى الوظيفة التي انشأناها (في الاسفل) const imageUrl = await uploadImage(file); // نقوم بحفظ الرابط في الحالة بعد تلقي رابط الصورة بعد الرفع setImageUrl(imageUrl); }; return ( <div> <input type="file" onChange={handleFileUpload} /> {imageUrl && <img src={imageUrl} alt="Uploaded image" />} </div> ); }; const uploadImage = async (file: File) => { const formData = new FormData(); formData.append('image', file); try { const res = await axios.post('/api/upload-image', formData, { headers: { 'Content-Type': 'multipart/form-data', }, }); return res.data.url; } catch (err) { console.error(err); } }; ويجب تحميل الحزمة axios كالتالي : npm install axios كود الـ multer مع Cloudinary يصبح بالشكل : import cloudinary from 'cloudinary'; import multer from 'multer'; import { CloudinaryStorage } from 'multer-storage-cloudinary'; // Cloudinary اعدادات cloudinary.v2.config({ cloud_name: process.env.CLOUDINARY_CLOUD_NAME, api_key: process.env.CLOUDINARY_API_KEY, api_secret: process.env.CLOUDINARY_API_SECRET, }); // Cloudinary وربطها مع multer اعدادات const storage = new CloudinaryStorage({ cloudinary: cloudinary.v2, params: { folder: 'images', allowed_formats: ['jpg', 'png'], }, }); const upload = multer({ storage }); حيث انك يجب ان تضع المعلومات الخاصة بحساب Cloudinary في ملف الـ env بالأسماء التالي : CLOUDINARY_CLOUD_NAME CLOUDINARY_API_KEY CLOUDINARY_API_SECRET وكذلك يجب تحميل كل من الحزم multer و multer-storage-cloudinary و cloudinary كالتالي : npm install multer multer-storage-cloudinary cloudinary ونقوم بإعداد الـ route الخاص بتلقي الصورة كالتالي : app.post('/api/upload-image', upload.single('image'), (req, res) => { res.json({ url: req.file.path }); }); حيث نستخدم المتغير upload الذي اعددناه في الكود السابق، ثم نعيد المسار الذي سيقوم Cloudinary بتقديمه ليتم إرساله إلى العميل. بعد تنفيذ الخطوات السابقة سيكون لديك رابط src خاص بالصورة يمكنك حفظه في قاعدة البيانات مع باقي بيانات الـ post.

نعم يلزم اجتياز الامتحان النهائي، الدروس مشروحة بشكل مبسط جداً ويتم تحديثها باستمرار، وإذا قمت بالدراسة بالشكل الصحيح فستجتاز الامتحان بكل سهولة، وكذلك يمكنك الانسحاب من الدورة في أي وقت ولكن بشروط. وقد يفيدك الاطلاع على النقاش التالي :

نعم ما يزال العرض قائماً، ولكن العرض يشترط أن: تنهي الدورة تقوم باتباع ارشادات المدربين تجتاز الامتحان النهائي لا اعرف بهذا الخصوص، فلم يتم الاشارة لهذا سابقاً في عروض الاكادمية. وإذا اردت المعرفة اكثر عن عرض الـ 6 اشهر أو تقديم شكوى بهذا الخصوص فيمكنك التحدث للدعم من هنا ،

يمكنك فعل ذلك بإضافة transform إلى للعنصر عند حدوث الـ hover وهذا مثال على العملية : <input type="button" value="submit"> <style> input[type="button"] { transition: 0.4s; } input[type="button"]:hover { transform: translateX(-5px); } </style>

one to many هي عندما يكون لعنصر من الجدور الاول ارتباط مع عنصر واحد او اكثر من الجدول الثاني، بينما many to many عندما يكون لعنصر واحد او اكثر من الجدول الاول ارتباط مع عنصر واحد او اكثر من الجدول الثاني. وبحسب المخطط الذي قمت بمشاركته فإني أرى ان العلاقة يجب ان تكون من النوع one to many لأن العنصر من الجدول الخاص بالمفضلة يرتبط بعنصر واحد من العقارات، بينما العنصر الخاص بالعقارات ليس له اي اعتماد على المفضلة. ولكن هذه العلاقة قد تختلف بحسب طبيعة المشروع الذي تعمل عليه.

هنالك العديد من المقالات والفيديوهات تجيب عن هذا السؤال، ولكن الاجابة الابسط هي ابدأ من الاساسيات والتي هي بداية اي مجال من مجالات البرمجة، مثل الخوارزميات و التفكير المنطقي ولغة برمجة مثل بايثون أو جافاسكريبت. قد يفيدك الاطلاع على النقاش التالي : وهذا فيديو مقدم من الاكادمية عن الموضوع :

الـ Cross-platform لا يعني نهاية الـ Native، بل يعتبر بديلًا له، حيث يمكن استخدام الـ Cross-platform لتطوير تطبيق واحد يعمل على أكثر من نظام تشغيل، بينما يتم تطوير التطبيقات الـ Native لكل نظام تشغيل على حدة. ومن الممكن أن يكون الـ Cross-platform أسرع في التطوير وأرخص في التكاليف، ولكن قد يفتقر إلى بعض المزايا التي تأتي مع التطبيقات الـ Native. لا يوجد خيار أفضل للتعلم في الوقت الحالي، فكل منهما له اهميته وإذا كنت تحب ان تتعلم الNative فأنصحك بان تبدأ بتعلمه، ومن ثم يمكنك تعلم الـ Cross-platform في وقت لاحق.

لديك خطأ في اسم الخاصية height حيث يبدو انك كتبتها بالشكل haight جرب اصلاح الخطأ والمحاولة مرة ثانية.

نعم ستستفيد من ناحية معرفة اساسات البرمجة والية عمل مواقع الويب والتطبيقات والية عمل الخوادم وتقنيات الاستيثاق والمصادقة، كما ستستفيد من ناحية تعلم لينوكس والية التعامل مع سطر الاوامر وكذلك الامر تعلم الخوارزميات واساسيات البرمجة. وكذلك فإن دورة علوم الحاسوب اساسية لكافة الاختصاصات البرمجية. بعد قول ذلك فإنه لا يمكن القول بأن الدورات تشرح الـ Cyber security and ethical hacking بل هي تتطرق لأليات الحماية من الاختراق في سياق بناء التطبيقات نفسها وتشرح الاساسيات التي تؤهلك للبدء في الـ Cyber security.

هذه مجموعة الكتب الخاصة بحسوب والتي تتطرق لكل من html و css و js وهي كلها حديثة ومجانية : بعد قول هذا فلا انصحك بأن تبدأ بالكتب، بل الافضل هو ان تبدأ بالفيديوهات البسيطة وتعلم الاساسيات والتطبيق بشكل عملي.

هنالك الكثير من المسارات في طريق البرمجة ولكن كلها يمر من بعض الاساسيات التي يمكنك البدئ منها مثل أساسيات الحاسوب وعلومه والتفكير المنطقي و الخوارزميات، ولكن رغم ذلك فقد يفيدك الاطلاع على المراجع التالية : يمكنك الاطلاع على الفيديو التالي كبداية : ثم يمكنك مشاهدة الفيديو التالي : وإن كنت ممن يحبون القراءة ففي هذه المقالة شرح مفصل لمجالات البرمجة المختلفة وكيفية الاختيار بينها (اختياري) : وإذا كنت من المهتمين بتطوير تطبيقات الويب سواءً كان frontend أو backend فهذا المقال سيكون مفيداً جداً فهو يحتوي على خريطة تعلم شاملة لمجال تطوير الويب : وهنالك العديد من هذه الاسئلة المشابهة قد طرحت سابقاً ، وقد يفيدك الاطلاع عليها مثل :

لا يوجد اولوية في ترتيب الدورات التي تستطيع التسجيل فيها بعد الانتهاء من دروة علوم الحاسوب، فأنت مؤهل للتسجيل في اي واحد منها وتملك الخبرات الكافية للبدء في تعلم اي منها. أما الاختيار بين هذه الدورات فيعتمد على التخصص التي تريده، والشركات التي تود العمل معها في المستقبل، وكذلك يعتمد على اللغة التي تحب ان تتعلمها. فإذا كنت تريد تعلم الـ frontend فسيكون من المناسب تعلم دورة تطوير واجهات المستخدم. وإذا كنت تريد تعلم JavaScript بشكل افضل وان تصبح full stack فيمكنك الاطلاع على دورة تطوير التطبيقات باستخدام JavaScript. ويمكنك الاطلاع على تفاصيل الدورات حتى تعرف ماهي المعلومات التي تقدمها كل دورة قبل اتخاذ قرارك.

المشكلة من ترتيب الملفات الخاصة بك، حيث ان الصور لديك توجد داخل مجلد يسمى IMG موجود داخل الملف المسمى image والموجود داخل المجلد src. ولكن الروابط الخاصة بالصور في كامل المشروع تشير إلى الصور الموجود داخل المجلد IMG الموجود داخل المجلد src. أي انه تم تجاهل المجلد image في الروابط وهذا ما يسبب المشكلة. والحل هو ان تقوم بإخراج المجلد IMG ليصبح ابن مباشر للمجلد src. أو ان تعدل روابط كل الصور في المشروع إلى الشكل الصحيح. @Omar Abdelfattah

نعم، يمكن بيع تطبيق تحت رخصة GPL إذا لم تستخدم مكتبات GPL فيه. وإذا كانت المكتبات المستخدمة في التطبيق تحت رخصة GPL، فإنه يجب أن يتم توزيع البرنامج الناتج تحت نفس رخصة GPL نعم يجب ان تبيعه تحت رخصة GPL. إذا قمت بإنشاء تطبيق في نظام ذو رخصة GPL ولم تستخدم أية مكتبات GPL في تطبيقك، يمكنك بيع التطبيق الخاص بك بأي ترخيص تريده.

تخبرك رسالة الخطأ أن الخاصية overlay المضافة إلى الـ devServer غير صحيحة. جرب تعديل الكود الخاص بالـ dev server و الـ overlay في ملف webpack.config.js كالتالي : devServer: { client: { overlay: { errors: true, warnings: false, }, }, },

قد تكون المشكلة انك لم تقم بربط js مع صفحة الـ htm. هل يمكنك مشاركة ملفات المشروع حتى استطيع الاطلاع عل المشكلة؟

رسالة الخطأ تخبرك بوجود مشكلة في الـ loader الخاص بمعالجة css في wepbakc. وتخبرك بأنه يجب ان تقوم بإعداد الـ loader بشكل صحيح

لا يوجد طريقة لاستخدام قاعدة البيانات locally وستحتاج إلى خادم backend حتى تستطيع التحدث مع قاعدة البيانات. ولكن بعد قول هذا فيمكنك استخدام بعض شركات الطرف الثالث مثل firebase والتي توفر لك كل من الـ backend و الـ database ويمكنك الوصول إليها من الـ client مباشرةً.

تخبرك رسالة الخطأ ان المتغير المسمى myFunction غير معرف. أي انك لم تقم بتعريف المتغير myFunction قبل استخدامه في الكود الخاص بك، وقد يكون الكود الخاص بك بالشكل : myFunction(...) والصحيح هو ان يتم تعريف الوظيفة قبل استخدامها : const myFunction = (...)=>{...} myFunction(...)

إليك بعض النصائح من اجل قبول مدونتك في جوجل ادسنس : يجب أن يكون عمر نطاقك 3 أشهر على الأقل. لا يجب أن يخالف نوع محتواك سياسة الخصوصية لـ Blogger و AdSense، وهذا يعني أنه لا يجب أن تتحدث عن برامج مسروقة أو برامج تم اختراقها، وأيضًا لا يجب أن تتحدث عن أي محتوى إباحي. يجب أن تكون فوق سن 18 عامًا. اكتب ما لا يقل عن 30 إلى 35 منشورًا بطول 1000 كلمة أو أكثر في Blogger . استخدم نطاقات المستوى الأعلى مثل .com و .in و .tech و .org و .net و .gov أو .edu . تأكد من أن مدونتك غير ناقصة . يجب أن يحتوي موقعك على محتوى فريد ومثير للاهتمام . يجب أن يحتوي موقعك على تنقل واضح (بمعنى ان تكون الصفحات مترابطة بشكل جيد) والافضل لك هو ان تطلع على شرح غوغل لكيفية حل المشكلة

تخبرك رسالة الخطأ ان هنالك حرف خاص وهو / موجود في الكود وهو الذي يسبب المشكلة. لا يظهر في رسالة الخطأ مكان وقوع المشكلة، ولكنني قد استطيع مساعدتك إذا قمت بمشاركة ملفات المشروع.

رغم ان كل من Sass و Tailwind هما أدوات لتنسيق وتصميم صفحات الويب ،إلا ان لكل منهما اسلوب مختلف في العمل، ولذلك فتعلمها يعتمد على اسلوبك بشكل اساسي، وأنا شخصياً افضل استخدام sass مع react اكثر من bootstrap أو Tailwind أو styled component. حيث ان Sass يقدم ميزات إضافية مثل المتغيرات والتضمين والمكتبات والتعليقات ، مما يجعلها أكثر قوة ومرونة من CSS. و يتطلب Sass معرفة بالبرمجة وقد يستغرق وقتًا أطول لإنشاء التصميمات. بينما على الصعيد الاخر فإن Tailwind هو إطار عمل CSS يستخدم تقنية "Utility-First" ، وهي تقنية تسمح بإنشاء التصميمات باستخدام فئات CSS المحددة مسبقًا. و يتضمن Tailwind مجموعة كبيرة من الفئات CSS التي يمكن استخدامها لإنشاء التصميمات بسرعة. يتطلب Tailwind بعض الوقت لتعلم فئات CSS المحددة مسبقًا ، ولكنه يسمح بإنشاء التصميمات بسرعة وسهولة. وللتفصيل اكثر : Sass: يسمح للمصممين بإنشاء متغيرات وتضمينات ومكتبات وتعليقات في CSS. يجعل عملية تصميم الصفحات أكثر قوة ومرونة. يساعد على تقليل الكود المكرر وتسهيل عملية الصيانة. يوفر القدرة على إنشاء شبكات مرنة وقابلة للتعديل. يدعم Sass الوظائف البرمجية مثل الشروط والحلقات. Tailwind: يستخدم تقنية "Utility-First"، مما يسهل عملية إنشاء التصميمات. يحتوي على مجموعة كبيرة من الفئات CSS المحددة مسبقًا، مما يسهل عملية التحكم في التصميم. يساعد على تقليل حجم الكود وتحسين أداء الموقع. يتضمن Tailwind أدوات تحكم في الألوان والخطوط والأبعاد والهوامش. يدعم Tailwind إنشاء تصاميم متناسبة مع جميع الأحجام والأجهزة.

First Class Function أي وظائف من الدرجة الأولى وهي تطلق على الوظائف إذا كانت تعامل مثل باقي المتغيرات (Variable) . و هذا يعني أن هذه الوظائف يمكن تمريرها كوسائط إلى وظائف أخرى (Argument)، وإعادتها كقيم من وظائف أخرى ، وتعيينها لمتغيرات أو تخزينها في هياكل البيانات. Higher-Order Function الوظيفة الأعلى مرتبة وهي الوظيفة التي تقوم بتنفيذ واحد على الأقل مما يلي: يأخذ وظيفة أو أكثر كوسائط parameters. إرجاع دالة كنتيجة لها. جميع الوظائف الأخرى هي وظائف من الدرجة الأولى. تُستخدم الدوال من مرتبة عليا عادةً في حالات التحكم في التدفق (Flow Control) والتلاعب بالبيانات (Data Manipulation) والتعامل مع الأحداث (Events) وغيرها، ومن أمثلة الدوال من مرتبة عليا في جافاسكريبت: 1- دوال التحكم في التدفق: forEach() map() filter() reduce() sort() 2- دوال التلاعب بالبيانات: find() every() some() concat() slice() 3- دوال التعامل مع الأحداث: addEventListener() setTimeout() setInterval() يمكن استخدام الدوال من مرتبة عليا لتحسين كفاءة الكود وتقليل حجمه، كما يمكن استخدامها لإنشاء دوال مخصصة تعمل بشكل محدد في حالات معينة. قد يفيدك الاطلاع على هذه المقالة :

يمكنك عرض الـ option باستخدام الـ EJS واعطاء الـ selected للعنصر المحدد : <select id="volume"> <% var options = [ "1", "5", "10", "50", "75", "100" ]; for ( var i = 0; i < options.length; i++ ) { var selected = ( config[0].volume == i ) ? "selected" : ""; %><option value="<%=options[ i ] %>" <%=selected %>><%=i %></option><% } %> </select> لتفاصيل اكثر راجع النقاش التالي HTML select option with EJS

جرب تشغيل المتصفح جوجل كروم في وضع التصفح المختفي والمحاولة مرة ثانية، في حال عمل الكود بشكل صحيح في وضع التصفح المخفي، فهذا يعني أن المشكلة في الاضافات التي قمت بإضافتها للمتصفح ويكون الحل حينها هو تعطي هذه الاضافات. في حال استمرت المشكلة حتى في وضع التصفح المخفي، فيجب ان نتأكد من انك تملك احدث نسخة من جوجل كروم و كذلك قد يفيد تجريب اعادة ضبط اعدادات المتصفح إلى الاعدادات الافتراضية.