Hikmat Jaafer

للتعرف على الأشكال الهندسية في صورة باستخدام Python، يمكنك استخدام مكتبة معالجة الصور مثل OpenCV ومكتبة التعلم العميق مثل TensorFlow. سأقدم لك نموذجًا بسيطًا يستخدم هذه المكتبتين لتحميل الصورة والتعرف على الأشكال الهندسية فيها. قبل البدء، يجب التأكد من تثبيت المكتبات المطلوبة. يمكنك استخدام الأمر التالي لتثبيتها باستخدام pip: pip install opencv-python tensorflow ثم يمكنك استخدام الكود التالي في Python للتعرف على الأشكال الهندسية في الصورة: import cv2 import tensorflow as tf # تحميل نموذج التعرف على الأشكال الهندسية المدرب مسبقًا model = tf.keras.applications.ResNet50(weights='imagenet') # قم بتحميل الصورة image = cv2.imread('path/to/your/image.jpg') # قم بتغيير حجم الصورة إلى الحجم المتوقع من النموذج resized_image = cv2.resize(image, (224, 224)) # قم بتحويل الصورة إلى تنسيق يتوافق مع النموذج input_image = tf.keras.applications.resnet50.preprocess_input(resized_image) # قم بتوسيع البعد للصورة لتتوافق مع متطلبات النموذج input_image = tf.expand_dims(input_image, axis=0) # قم بتطبيق التنبؤ باستخدام النموذج predictions = model.predict(input_image) # احصل على أسماء الأشكال الهندسية المتوقعة من الخرج predicted_classes = tf.keras.applications.resnet50.decode_predictions(predictions, top=5) # قم بطباعة الأشكال الهندسية المتوقعة for _, name, confidence in predicted_classes[0]: print(f"Shape: {name}, Confidence: {confidence}") بالنسبة لتحويل الصورة والنص والأشكال إلى ملف Word، يمكنك استخدام مكتبة معالجة الصور مثل Pillow لتحرير الصورة ومكتبة python-docx لإنشاء مستند Word وكتابة النص والأشكال فيه. يمكنك استخدام الكود التالي كنقطة انطلاق: from PIL import Image from docx import Document from docx.shared import Inches # تحميل الصورة image = Image.open('path/to/your/image.jpg') # إنشاء مستند Word جديد document = Document() # إضافة الصورة إلى المستند document.add_picture('path/to/your/image.jpg', width=Inches(4)) # إضافة نص إلى المستند document.add_paragraph('Your text goes here.') # إضافة أشكال إلى المستند document.add_paragraph('Shapes:') document.add_paragraph('- Circle') document.add_paragraph('- Square') document.add_paragraph('- Triangle') # حفظ المستند document.save('path/to/your/document.docx') يرجى ملاحظة أن الأكواد المذكورة هي أمثلة بسيطة وقد تحتاج إلى ضبطها وفقًا لاحتياجاتك الخاصةأعتذر عن عدم توفر مقاطع فيديو في الوقت الحالي. ولكن يمكنني توفير تفسيرات وإرشادات كتابية لمساعدتك في تحقيق ما ترغب فيه. إذا كان لديك أي أسئلة أو استفسارات حول الخطوات المذكورة أعلاه، فلا تتردد في طرحها. سأكون سعيداً بمساعدتك.

لإضافة تمرير (scroll) والنزول للأسفل في CSS، يمكنك استخدام خاصية `overflow` وقيمتها `scroll` أو `auto` للعنصر الذي ترغب في إضافة التمرير إليه. هذا سيسمح بإظهار شريط تمرير عندما يتجاوز محتوى العنصر حجمه. على سبيل المثال، إذا كان لديك عنصر `div` ترغب في إضافة التمرير إليه، يمكنك استخدام القاعدة التالية في CSS: div { overflow: scroll; /* أو يمكنك استخدام overflow: auto; */ height: 300px; /* تعيين الارتفاع الذي ترغب به للعنصر */ } في هذا المثال، ستظهر شريط التمرير عندما يكون محتوى العنصر `div` أكبر من ارتفاعه المحدد بقيمة 300 بكسل. يمكنك تعديل الارتفاع حسب احتياجاتك. بعد إضافة التمرير، يمكنك النزول للأسفل عن طريق ضبط قيمة خاصية `scrollTop`. يمكنك استخدام JavaScript لتنفيذ ذلك. var element = document.getElementById("myDiv"); // استبدال "myDiv" بمعرف العنصر الخاص بك element.scrollTop = element.scrollHeight; توضع هذا الكود في الوقت المناسب، مثل عند تحميل الصفحة أو بعد إجراء إجراءات أخرى. بهذه الطريقة، سيتم التمرير تلقائيًا للأسفل في العنصر المحدد عندما يتم تحميل الصفحة أو عند حدوث حدث معين.

لتوصيل مشروع React الخاص بك بقاعدة بيانات MongoDB على الإنترنت عند استضافته على Vercel، يجب اتباع الخطوات التالية: تأكد من أن ملفات الاعدادات الخاصة بقاعدة البيانات مثل اسم المستخدم وكلمة المرور وعنوان الخادم صحيحة. يمكنك إنشاء ملف .env في مشروعك وتعيين القيم الخاصة بقاعدة البيانات بالتالي: DB_USERNAME=اسم_المستخدم DB_PASSWORD=كلمة_المرور DB_HOST=عنوان_الخادم DB_NAME=اسم_قاعدة_البيانات قم بتثبيت مكتبة MongoDB للاتصال بقاعدة البيانات من خلال الأمر التالي في مجلد المشروع: npm install mongodb في ملف الكود الخاص باتصال قاعدة البيانات، قم بتعيين متغيرات البيئة من ملف .env. على سبيل المثال، يمكنك استخدام الكود التالي: javascript const MongoClient = require('mongodb').MongoClient; require('dotenv').config(); const uri = `mongodb+srv://${process.env.DB_USERNAME}:${process.env.DB_PASSWORD}@${process.env.DB_HOST}/${process.env.DB_NAME}?retryWrites=true&w=majority`; const client = new MongoClient(uri, { useNewUrlParser: true, useUnifiedTopology: true }); client.connect((err) => { if (err) { console.error('حدث خطأ أثناء الاتصال بقاعدة البيانات:', err); } else { console.log('تم الاتصال بقاعدة البيانات بنجاح'); // استمر في تنفيذ العمليات المطلوبة على قاعدة البيانات هنا } }); بعد اتصالك بقاعدة البيانات بنجاح، يمكنك القيام بالعمليات المطلوبة مثل الاستعلامات والإدخال والتحديث والحذف. قم برفع مشروع React الخاص بك على Vercel باستخدام أداة Vercel CLI أو من خلال الواجهة الرسومية لـ Vercel. بعد رفع المشروع على Vercel وتكوين اتصالك بقاعدة البيانات MongoDB، يجب أن يكون التطبيق قادرًا على الاتصال بقاعدة البيانات بنجاح عند الوصول إلى الموقع المستضاف على Vercel. إن كان هناك شيء غير واضح او تحتاج الى تفاصيل أكثر , يرجى الاشارة إلي في التعليق .

يبدو أن تواجه مشكلة بخصوص طريقة ارسال البيانات وكيف استخدام بارامترات axios. يرجى الاطلاع على هذه المعلومات , سوف تساعدك كثيرا في استخدام axios وكيف تتعامل مع ارسال البيانات عبر الapi . بارامترات إرسال البيانات عبر Axios تستخدم لتعيين المعلومات التي ترسلها في جسم الطلب (Request Body) عند إجراء طلب HTTP. توفر Axios عدة طرق لتعيين هذه البيانات باستخدام بارامترات مختلفة. هنا بعض البارامترات الشائعة التي يمكن استخدامها: data: يستخدم لتعيين بيانات الطلب ككائن JavaScript. عندما تستخدم هذا البارامتر، يتم تسلسل الكائن إلى سلسلة نصية JSON تُرسل في جسم الطلب. مثال: axios.post('/api/endpoint', { name: 'John', age: 30 }) params: يستخدم لتعيين معلمات الاستعلام (Query Parameters) في الطلب. عند استخدام هذا البارامتر، ستتم إضافة المعلمات إلى رابط الطلب. مثال: axios.get('/api/endpoint', { params: { id: 1, category: 'books' } }) سيؤدي الكود أعلاه إلى إرسال طلب GET إلى /api/endpoint?id=1&category=books. headers: يستخدم لتعيين رؤوس الطلب (Request Headers). يمكن استخدام هذا البارامتر لتعيين رؤوس مخصصة مثل Content-Type أو Authorization. مثال: axios.post('/api/endpoint', data, { headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer token123' } }) paramsSerializer: يستخدم لتخصيص طريقة تسلسل معلمات الاستعلام. يمكن استخدام هذا البارامتر لتعيين دالة مخصصة لتسلسل المعلمات بدلاً من السلوك الافتراضي. مثال: axios.get('/api/endpoint', { params: { id: 1, category: 'books' }, paramsSerializer: function (params) { return Qs.stringify(params, { arrayFormat: 'brackets' }); } }) في المثال أعلاه، تم استخدام مكتبة qs لتسلسل معلمات الاستعلام بتنسيق [key=value] بدلاً من التسلسل الافتراضي. هذه بعض البارامترات الشائعة التي يمكن استخدامها لتعيين بيانات الطلب عند استخدام Axios. يجب عليك استخدام البارامتر المناسب حسب نوع الطلب ومتطلبات الخادم المستهدف.

الكود الذي قمت بتقديمه لتشغيل الصوت والفيديو في صفحة HTML يعمل بشكل صحيح ويقوم بالمهمة بشكل أساسي. ولكن هناك بعض الإضافات التي يمكنك النظر فيها لتحسين تجربة المستخدم وتعزيز الوظائف. هنا بعض الاقتراحات: إضافة أزرار تشغيل/إيقاف مخصصة: يمكنك إضافة أزرار تشغيل وإيقاف خاصة بك بدلاً من الاعتماد على واجهة التحكم الافتراضية. يمكنك استخدام صورة أو رمز للأزرار وربطها بوظائف تشغيل/إيقاف الصوت والفيديو. إضافة الخيارات الإضافية للتحكم: يمكنك تحسين واجهة التحكم بإضافة خيارات إضافية مثل التقديم للأمام والترجيع وتعديل مستوى الصوت. يمكنك استخدام مكتبات JavaScript مثل "plyr" أو "video.js" لتوفير واجهة تحكم متقدمة ومخصصة. تحسين توافق المتصفح: قد يكون هناك اختلافات في توافق تشغيل الصوت والفيديو بين المتصفحات المختلفة. يمكنك استخدام مكتبات مثل "Modernizr" للاحتياط والتحقق من دعم المتصفح لتنسيقات الصوت والفيديو المحددة قبل عرض العناصر. تحسين تجربة الجوال: قم بتحسين تجربة المستخدم على الأجهزة المحمولة من خلال ضبط حجم الفيديو والتحكم في التنقل وزيادة الاستجابة للمس. إضافة رسائل الخطأ: يمكنك إضافة رسائل الخطأ المناسبة للمستخدم عندما لا يتمكن المتصفح من تحميل أو تشغيل الصوت أو الفيديو. يمكنك استخدام عنصر <p> لعرض رسالة الخطأ وتنسيقها بشكل مناسب. التحكم في التشغيل التلقائي: قد يكون من الضروري تعطيل تشغيل الصوت أو الفيديو تلقائيًا عند تحميل الصفحة، وذلك لتوفير تجربة مريحة للمستخدم وتقليل تحميل البيانات. التوافق مع متطلبات الإمكانيات الخاصة: قد يكون هناك حاجة للتوافق مع متطلبات الإمكانيات الخاصة، مثل التوجيه الصوتي أو المساعدات القرائية. تأكد من توفير تجربة يسهل الوصول إليها لجميع المستخدمين. هذه بعض الإضافات التي يمكنك النظر فيها لتحسينالكود الذي قدمته لتشغيل الصوت والفيديو في صفحة HTML جيد بشكل عام. ومع ذلك، هناك بعض الإضافات والتحسينات التي يمكنك النظر فيها لتحسين تجربة المستخدم وتعزيز الوظائف. هنا بعض الاقتراحات: تحسين توافق المتصفح: قد يكون هناك اختلافات في توافق تشغيل الصوت والفيديو بين المتصفحات المختلفة. يمكنك استخدام مكتبات مثل "plyr" أو "video.js" لتحسين تجربة التشغيل عبر المتصفحات المختلفة. استخدام تنسيقات فيديو متعددة: قد تواجه بعض المتصفحات صعوبة في تشغيل بعض تنسيقات الفيديو. يمكنك زيادة التوافقية عن طريق توفير ملفات الفيديو بتنسيقات متعددة، مثل MP4 وWebM وOgg، وذلك باستخدام عناصر <source> متعددة داخل عنصر <video>. إضافة صورة مصغرة للفيديو: يمكنك إضافة صورة مصغرة للفيديو باستخدام الخاصية poster في عنصر <video>، والتي ستعرض قبل تشغيل الفيديو. هذا يوفر تجربة أفضل للمستخدمين ويساعد على جذب انتباههم للفيديو. التحكم في التشغيل التلقائي: قد يكون من الضروري تعطيل تشغيل الصوت أو الفيديو تلقائيًا عند تحميل الصفحة، وذلك لتوفير تجربة مريحة للمستخدم وتقليل تحميل البيانات. إضافة العنوان والوصف: قم بإضافة عنوان ووصف للصوت والفيديو باستخدام العناص

عندما تظهر رسالة "Compare & pull request" على صفحة مستودع الريبوزيتوري الخاص بك، فهذا يعني أن هناك تغييرات جديدة تم رفعها إلى الفرع الرئيسي (master) من قبلك أو من أحد الأعضاء الآخرين في الفريق. لتفعيل هذه التعديلات ودمجها في الفرع الرئيسي، يمكنك اتباع الخطوات التالية: قم بالنقر على الزر "Compare & pull request" على صفحة المستودع الخاص بك. ستتم توجيهك إلى صفحة جديدة لإنشاء طلب سحب (Pull Request)، والتي تعرض التغييرات التي تم رفعها إلى الفرع الرئيسي. قم بمراجعة التغييرات والتأكد من أنها تعكس التعديلات التي قمت بها وأنها صحيحة. إذا كنت راضيًا عن التغييرات وترغب في دمجها في الفرع الرئيسي، قم بالنقر على الزر "Create pull request" أو "Open pull request" (قد تختلف التسمية اعتمادًا على واجهة المستخدم المستخدمة). في صفحة طلب السحب، يمكنك إضافة تعليقات إضافية أو ملاحظات حول التغييرات التي تم رفعها. بعد تأكيد المراجعة والتعليقات، قم بالنقر على زر "Merge pull request" لدمج التغييرات في الفرع الرئيسي. بعد الدمج، ستصبح التغييرات متاحة ومدمجة في الفرع الرئيسي (master). يمكنك الآن استكمال العمل على المشروع وتحديث أي تغييرات أخرى ورفعها إلى الريبوزيتوري عند الحاجة. يرجى ملاحظة أنه قد يكون لديك اختلافات في واجهة المستخدم بناءً على خيارات الريبوزيتوري التي تم استخدامها. ومع ذلك، يجب أن تكون الخطوات العامة المذكورة أعلاه مشابهة وتساعدك في تفعيل التعديلات ودمجها في الفرع الرئيسي.

يبدو أن الخطأ الذي تواجهه أثناء عملية النشر في Digital Ocean يتعلق بقالب الموقع الخاص بك. تشير رسالة الخطأ إلى عدم وجود ملف القالب المناسب للصفحة الرئيسية والمشكلة محددة في السطر 5 والعمود 7 من ملف index.html. الخطأ الذي يظهر هو لحل هذه المشكلة، يُنصح بالتحقق من وجود الملفات اللازمة للقوالب في مشروعك. تأكد من وجود ملفات القوالب الضرورية للصفحة الرئيسية والأقسام والتصنيفات في المسارات الصحيحة داخل مشروعك. قد يتطلب الأمر إنشاء ملفات قوالب جديدة أو تعديل الملفات الحالية لتلبية متطلبات المشروع الخاص بك. قد تحتاج أيضًا إلى التحقق من إصدار Hugo المستخدم في Digital Ocean. يتم استخدام إصدار Hugo 0.118.2 بشكل افتراضي ويمكنك تعيين إصدار مختلف باستخدام متغير البيئة "HUGO_VERSION". تحقق من توافق إصدار Hugo الذي تستخدمه في مشروعك مع الإصدار المستخدم في Digital Ocean. أخيرًا، يُنصح بالاطلاع على الوثائق والمقالات التي يوفرها Digital Ocean حول استخدام Hugo في منصتهم. يمكنك زيارة الرابط التالي للحصول على مزيد من المعلومات والتوجيه: https://do.co/apps-buildpack-hugo. من المهم أن تتحقق من جميع هذه العوامل وتقوم بإصلاح أي مشكلة محتملة في قوالب مشروعك أو إصدار Hugo لحل مشكلة النشر في Digital Ocean.

الله يسلمك , أفضل تمنياتي لك . -- بالنسبة للسؤال : لتحقيق ذلك، يمكنك إضافة شرط داخل حدث النقر (click) على عناصر الإدخال (input) للبحث. هذا الشرط يتحقق إذا كان القائمة غير مرئية (غير مضافة لها الصنف "active")، في هذه الحالة، لا تقم بإزالة الصنف "active" من القائمة. هنا هو الكود المعدل: // show menue const inputs = document.querySelectorAll(".input"); const menus = document.querySelectorAll(".menu"); inputs.forEach((input, index) => { input.addEventListener("click", function() { if (!menus[index].classList.contains("active")) { menus[index].classList.add("active"); } }); }); // hide menue inputs.forEach((input, index) => { input.addEventListener("focusout", function() { menus[index].classList.remove("active"); }); }); بهذا التعديل، عند النقر على عنصر الإدخال الموجود داخل القائمة، لن يتم إزالة صنف "active" من القائمة عند حدوث حدث focusout.

وعليكم السلام. وجود تأخير أو تعليق في التمرير (scroll) قد يكون ناتجًا عن عدة عوامل. هذه جميع الاسباب المحتملة التي قد تساعد في تحسين أداء التمرير في صفحتك ( متضمنة اجوبة الاستاذ عمر و الاستاذ مصطفى ليكون جواب شامل ) : تحسين الأداء العام للصفحة: التأكد من أن الصفحة بشكل عام مُحسّنة جيدًا. قد تحتاج إلى تحسين أداء العناصر الكبيرة أو العمليات الثقيلة الأخرى في الصفحة. تقليل العناصر المتحركة والتأثيرات الزائدة: العناصر المتحركة والتأثيرات الزائدة قد تؤدي إلى تأخير في التمرير. يمكنك محاولة تقليل استخدام التأثيرات الزائدة أو تحسينها لتحقيق أداء أفضل. تحميل المحتوى بشكل تدريجي: إذا كان لديك محتوى كبير مثل الصور أو الفيديوهات، يمكنك استخدام تقنيات تحميل المحتوى بشكل تدريجي (lazy loading) بحيث يتم تحميل المحتوى فقط عندما يكون مرئيًا في مجال العرض. استخدام التمرير الناعم: بعض المكتبات والإضافات توفر خيارات لتمكين التمرير الناعم (smooth scrolling) الذي يعطي تجربة تمرير أكثر سلاسة. يمكنك استخدام مكتبات مثل react-scroll إذا كنت تستخدم React، أو استخدام خاصية scroll-behavior في CSS. تجنب العمليات الثقيلة أثناء التمرير: قد يؤدي تنفيذ عمليات ثقيلة مثل الطلبات الشبكية (network requests) أو العمليات الحسابية المعقدة أثناء التمرير إلى تأخير في الاستجابة. حاول تجنب العمليات الثقيلة أو تنفيذها بعد انتهاء التمرير. مراجعة الأكواد والتحسينات: قم بمراجعة الأكواد الخاصة بك وتحليل المناطق التي تسبب تأخيرًا في التمرير. قد تحتاج إلى تحسين الأكواد أو إجراء تحسينات على العمليات المكلفة. يجب أن تأخذ في الاعتبار أن الأسباب المحتملة للتأخير في التمرير يمكن أن تكون متعددة وتعتمد على تفاصيل مشروعك الخاص. قد تحتاج إلى تحليل وفحص الصفحة الخاصة بك بشكل أكثر تفصيلاً لتحديد الأسباب الدقيقة للتأخير وتطبيق التحسينات المناسبة.من الممكن أن يكون لديك بعض العمليات الثقيلة أو العمليات التي تتطلب وقتًا طويلاً في كل صفحة، مما يؤدي إلى تأخير في التمرير. قد يكون هناك أسباب أخرى محتملة للتأخير في التمرير، مثل: حجم البيانات: إذا كان لديك كمية كبيرة من البيانات التي يجب تحميلها في كل صفحة، فقد يستغرق ذلك وقتًا طويلاً ويؤدي إلى تأخير في التمرير. في هذه الحالة، يمكنك استخدام تقنيات تحميل البيانات بشكل تدريجي أو تجزئتها لتحسين أداء التمرير. العمليات الحسابية المعقدة: إذا كان لديك العديد من العمليات الحسابية المعقدة التي تتم في كل تحديث للصفحة، فقد يستغرق ذلك وقتًا طويلاً ويؤثر على أداء التمرير. في هذه الحالة، يمكنك مراجعة العمليات ومحاولة تحسينها أو تحسين أداء الخوارزميات الخاصة بك. القواميس الكبيرة أو البيانات المخزنة: إذا كان لديك قواميس كبيرة أو بيانات مخزنة تحتفظ بها في الذاكرة أو في الحالة الخاصة بالتطبيق، فقد يستغرق تحميلها أو الوصول إليها وقتًا طويلاً ويسبب تأخيرًا في التمرير. في هذه الحالة، يمكنك مراجعة كيفية إدارة البيانات وتحسين الوصول إليها. الأداء العام للجهاز: قد يكون أداء الجهاز الذي تستخدمه هو السبب في التأخير في التمرير. إذا كان لديك جهاز قديم أو مواصفات ضعيفة، فقد يكون من الصعب على الجهاز تشغيل التطبيق بسلاسة. في هذه الحالة، يمكنك مراجعة متطلبات التشغيل الخاصة بتطبيقك وتحسين الأداء لتوفير تجربة أفضل على مجموعة متنوعة من الأجهزة. للتأكد من السبب الدقيق للتأخير، يمكنك استخدام أدوات مراقبة الأداء وتحليل الأداء مثل Flutter Performance أو Android Profiler لتحليل أداء التطبيق وتحديد العمليات أو العناصر التي تسبب تأخيرًا في التمرير. بالتالي، يمكنك اتخاذ إجراءات لتحسين الأداء بناءً على النتائج المستخرجة من

إذا كنت تستخدم Webpack وترغب في استخدام jQuery في مشروعك، يجب التأكد من تضمين jQuery في ملف الـ JavaScript الخاص بك وتكوين Webpack بشكل صحيح لدمج jQuery في حزمة الإخراج. لتثبيت jQuery باستخدام npm، يمكنك استخدام الأمر التالي في مجلد المشروع الخاص بك: npm install jquery ثم يمكنك استيراد jQuery في ملف الـ JavaScript الخاص بك بواسطة السطر التالي: import $ from 'jquery'; أو يمكنك استخدام الاستيراد التقليدي: const $ = require('jquery'); بالنسبة للخطأ الذي تحدث بسبب removeClass، يمكن أن يكون السبب هو عدم تحميل jQuery بشكل صحيح أو عدم وجود العنصر الذي يحمل #navBar في صفحتك. تأكد من تضمين jQuery والتأكد من أن العنصر #navBar موجود في صفحتك بشكل صحيح وبنفس الهيكل كما هو موجود في الكود الذي قدمته.

وجزاك الله الخير سيد احمد . يمكنك فعل ذلك بوضع حدث click لnewInput قبل إضافته الى الinputs , أي سوف يكون ملف javascript كالتالي : const inputs = document.querySelectorAll(".input"); const menus = document.querySelectorAll(".menu"); inputs.forEach((input, index) => { input.addEventListener("click", function() { menus[index].classList.toggle("active"); }); }); const addRowButton = document.querySelector("#add-row"); addRowButton.addEventListener("click", function() { const newRow = document.createElement("tr"); const newCell = document.createElement("td"); const newDropdown = document.createElement("div"); const newSearchInput = document.createElement("div"); const newInput = document.createElement("input"); const newMenu = document.createElement("div"); newDropdown.className = "dropdown"; newSearchInput.className = "search_input"; newInput.className = "input"; newInput.type = "text"; newInput.placeholder = "search"; newMenu.className = "menu"; newMenu.innerHTML = ` <p>html</p> <p>CSS</p> <p>js</p> `; newDropdown.appendChild(newSearchInput); newSearchInput.appendChild(newInput); newDropdown.appendChild(newMenu); newCell.appendChild(newDropdown); newRow.appendChild(newCell); newInput.addEventListener("click", function() { newMenu.classList.toggle("active"); }); const tbody = document.querySelector("tbody"); tbody.appendChild(newRow); inputs.push(newInput); menus.push(newMenu); });

كلا Context API و Redux هما أدوات لإدارة حالة التطبيق (state management) في تطبيقات React. ولكنهما يختلفان في العديد من الجوانب. تعقيد الاستخدام: Context API: هي ميزة مدمجة في React ويمكن استخدامها بدون تثبيت حزمة إضافية. يتضمن استخدامها إنشاء مزود (Provider) ومستهلك (Consumer) للحصول على البيانات وتحديثها . Redux: يتطلب تثبيت حزمة Redux وإعداد مجموعة من المفاهيم والكائنات مثل المتجر (store) والأعمال (actions) والمخزن (reducers) والموصل (connect). هذا يعني أنه يمكن أن يكون أكثر تعقيدًا في البداية. توزيع الحالة: Context API: يوفر حاويات (containers) متعددة للحالة ويمكن استخدامها لتحديد الجزء المحدد من التطبيق الذي يحتاج إلى الوصول إلى الحالة. يمكن توزيع الحالة بشكل أفضل على مستوى المكونات العمودية (vertical components). Redux: يتم توزيع الحالة في متجر واحد مركزي (centralized store) يمكن الوصول إليه من أي مكان في التطبيق. يعني ذلك أنه يمكن استخدام الحالة بسهولة في مكونات مختلفة وفي أماكن متعددة دون الحاجة إلى تمريرها بشكل صريح. أداء: Context API: في الإصدارات القديمة من React (قبل 16.3)، كانت Context API تعاني من أداء أسوأ بالمقارنة مع Redux. ومع ذلك، في الإصدارات الحديثة، تم تحسين أداء Context API بشكل كبير، ولا يوجد فرق كبير في الأداء بينها وبين Redux. Redux: Redux يعتبر أداءه ممتازًا، حيث يستخدم خوارزميات فعالة لتحديث الحالة وتنبيه المكونات المشتركة بالتغييرات. يتمتع بأداء جيد حتى عند التعامل مع حالات كبيرة وتعقيد عالي. إدارة الحالة المتقدمة: Context API: توفر Context API بعض الميزات المتقدمة مثل استخدام السمات (hooks) واستخدام عناصر JSX كمستهلكين. يمكن تخصيصها بسهولة لتلبية احتياجات التطبيق الخاصة. Redux: Redux يوفر أدوات متقدمة لإدارة الحالة مثل وجود الوقت المسبق والتأريخ (time travel)، والقابلية للتوصيل بأدوات التصحيح (debugging tools) مثل Redux DevTools. في النهاية،يمكن استخدام كل من Context API و Redux لإدارة حالة التطبيق في React، والاختيار بينهما يعتمد على عدة عوامل مثل تعقيد التطبيق، حجم الحالة، ومتطلبات التوزيع والأداء. إذا كانت تطبيقاتك بسيطة وغير معقدة، فقد يكون استخدام Context API أمراً مناسباً. وإذا كانت تطبيقاتك أكثر تعقيدًا وتحتاج إلى إدارة حالة مركزية وأدوات متقدمة، فقد يكون Redux خيارًا أفضل. في بعض المشاريع الكبيرة , يتم استخدام كلا من Redux و Context API ضمن المشروع . حيث تبقى Redux للحالات العامة والتي نصل إليها من عدة components ونقوم بالتحكم فيها . ويكون Context API خاص بكل feature ضمن المشروع والتي لا تحتاج مشاركة بياناتها مع عدد كبير من الcomponents .

أهلاً مصطفى , هل يمكنك تزويدنا بالكود لنتمكن من مساعدتك .

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

حضور الدورات يعطيك مبادئ اللغة وكافة ما تحتاجه تعلمه من لغة البرمجة , وهذا ما يضعك على بداية الطريق . لكن ما يجعلك متمكن منها هو إنشاء مشاريع حقيقية على أرض الواقع . بالنسبة لمسار Frontend يمكنك إتباع الخطوات التالية : تعلم HTML و CSS تعلم JS تعلم React js بالإضافة لتعلم مكتبة تصميم ( bootstrap 5 أو material ui ) قم ببناء مشاريع صغيرة مثل : صفحات تعريفية لشركات أو Notes , ومن ثم مشاريع أكثر تعقيد مثل مشاريع e-commerce . بناء مشروع حقيقي . يمكنك تصفح موقع مستقل وتقديم عرض لمشروع frontend . كما يجب عليك تعلم مكاتب مهمة مثل Axios و React Query أثناء بناء المشاريع التدريبية في حال تعاملت مع API . في مرحلة متقدمة أكثر , سوف تحتاج إلى تعلم state management مثل Redux و Redux toolkit .

* أحد أهم النقاط التي تساعد المبرمجين في أي اختصاص هي فهم كيف البرمجة تعمل . فهي بالحقيقة محاكاة لطريقة تفكير الانسان. فإن ما نفعله في البرمجة , هو محاكاة لدماغ الانسان , أو بكلمة أخرة , لطريقة تفكير الانسان في حل مشاكله. فإذا دققت في طريقة تفكيرك لحل مشكلة وحاولت فهم نفسك كيف تفكر , ومن ثم حولت هذا التفكير لخوارزمية برمجية , فسوف تتمكن من حل المشكلة . * مثال بسيط عما أقصده : لشخص مبتدأ في البرمجة ( يعلم مفاهيم الاساسية للبرمجة من شروط وحلقات تكرار ) . تخيل أن لدينا الارقام التالية وطلب من هذا الشخص فرزها ( كتفكير أو كتابة وليس كود أو برمجة ) : ستجد أن ذلك لن يأخد منه إلا بضع ثواني لترتيبها . حسناً , إذا طلبنا من هذا الشخص كتابة خوارزمية الفرز لهذه العناصر , فستجد أنه سوف يكون من الصعب عليه في البداية معرفة خوارزمية فرز هذه العناصر ككود أو كتابة خوارزمية الكود على الرغم من أنه يعلم جميع التعليمات التي سوف يستخدمها من شروط وحلقات تكرار وتعريف متغيرات . لكن إن دقق هذا الشخص في طريقة تفكيره , فسوف يجد أنه يأخد أصغر عدد من العناصر ويضعه في البداية , وثم الأصغر ومن ثم الأصغر . فإذا حول هذا التفكير إلى خوارزمية ,ستكون كالتالي : يقوم بالتحقق من العناصر أيها أصغر . يأخذ أصغر عدد ويضيفه الى سطر النتيجة ( المصفوفة الجديدة ). يكرر هذه العملية حتى يحصل على جميع الارقام . وبالتالي , ستجد أنه يكتب خوارزمية الفرز selection sort الشهيرة . فإن حل أي مشكلة في الحقيقة يكون هو محاكاة لطريقة تفكير الانسان , يمكنك تجريب ذلك في عدة أمثلة أخرى .

مرحباً , هل يمكنك إرفاق ملفات الكود لمساعدتك في حل المشكلة ؟

يمكنك فعل ذلك مثل ما قال استاذ سمير , لكن يجب عليك اضافة ذلك عند اضافة سطر جديد , الكود التالي يوضح ذلك : ملف HTML : <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> <style> .dropdown { width: 180px; position: relative; margin: 5px; } .menu { position: absolute; width: 100%; display: none; border: blue; background-color: lightgray; z-index: 1; } .active { display: block; } </style> </head> <body> <table> <thead></thead> <tbody> <tr> <td> <div class="dropdown"> <div class="search_input"> <input class="input" type="text" placeholder="search"> </div> <div class="menu"> <p>html</p> <p>CSS</p> <p>js</p> </div> </div> </td> </tr> <tr> <td> <div class="dropdown"> <div class="search_input"> <input class="input" type="text" placeholder="search"> </div> <div class="menu"> <p>html</p> <p>CSS</p> <p>js</p> </div> </div> </td> </tr> </tbody> <tfoot></tfoot> </table> <button id="add-row">add new row</button> <script src="main.js"></script> </body> </html> ملف main.js : // main.js const inputs = document.querySelectorAll(".input"); const menus = document.querySelectorAll(".menu"); inputs.forEach((input, index) => { input.addEventListener("click", function() { menus[index].classList.toggle("active"); }); }); const addRowButton = document.querySelector("#add-row"); addRowButton.addEventListener("click", function() { const newRow = document.createElement("tr"); const newCell = document.createElement("td"); const newDropdown = document.createElement("div"); const newSearchInput = document.createElement("div"); const newInput = document.createElement("input"); const newMenu = document.createElement("div"); newDropdown.className = "dropdown"; newSearchInput.className = "search_input"; newInput.className = "input"; newInput.type = "text"; newInput.placeholder = "search"; newMenu.className = "menu"; newMenu.innerHTML = ` <p>html</p> <p>CSS</p> <p>js</p> `; newDropdown.appendChild(newSearchInput); newSearchInput.appendChild(newInput); newDropdown.appendChild(newMenu); newCell.appendChild(newDropdown); newRow.appendChild(newCell); const tbody = document.querySelector("tbody"); tbody.appendChild(newRow); inputs.push(newInput); menus.push(newMenu); newInput.addEventListener("click", function() { newMenu.classList.toggle("active"); }); }); تمت إضافة زر "add new row" لإضافة صف جديد إلى الجدول، وعند النقر على الزر، سيتم إنشاء عناصر HTML جديدة وإضافتها إلى الجدول، مع تعيين استماع الحدث على المدخل الجديد المنشئ لتبديل الفئة النشطة على القائمة الجديدة.

لتمرير القائمة المحدثة للغرف من مكون AddRoom إلى مكون ListRoom، يمكنك استخدام React Navigation للانتقال إلى شاشة ListRoom وتمرير القائمة المحدثة كمعلمة. فيما يلي نسخة محدثة من التعليمات البرمجية الخاصة بك تتضمن التغييرات الضرورية: في AddRoom Component : 1. قم باستيراد useNavigation من React Navigation. import { useNavigation } from '@react-navigation/native'; 2. قم بتحديث السطر الذي تنتقل فيه إلى شاشة ListRoom لتمرير القائمة المحدثة كمعلمة. const navigation = useNavigation(); // ... navigation.navigate('ListRoom', { updatedList: updateList }); في ListRoom Component : 1. قم بالوصول إلى القائمة المحدثة من معلمات التنقل. import { useRoute } from '@react-navigation/native'; // ... const route = useRoute(); const { updatedList } = route.params; 2. استخدم القائمة المحدثة في المكون الخاص بك لعرض الغرف المحدثة. <View style={styles.container}> {updatedList.map(room => ( <TouchableOpacity key={room.id}> <List text={room.NameOfroom} date={room.date} number={room.Numberofroom} /> </TouchableOpacity> ))} </View> مع هذه التغييرات، سيتلقى مكون ListRoom القائمة المحدثة للغرف من مكون AddRoom ويعرضها وفقًا لذلك. ملاحظة: تأكد من إعداد React Navigation بشكل صحيح في مشروعك حتى يعمل هذا الحل.