Mustafa Suleiman

عليك بالإنتباه إلى بعض الأمور الهامة بالحماية وهي: 1- لا يجب أبدًا تخزين الـ token في مكان عام مثل عنوان URL أو في ملفات JavaScript قابلة للعرض في المتصفح. 2- يُفضل تخزين الـ token في مكان آمن مثل مساحة تخزين محلية (مثل Local Storage) أو ملفات تعريف الارتباط (Cookies)، ولكن يجب الانتباه إلى النقاط التالية: في حالة استخدام Local Storage: انتبهي إلى أنها قابلة للوصول عن طريق البرمجة النصية في الجانب العميل وقد تتعرض للهجمات مثل Cross-Site Scripting (XSS)، لذلك ينبغي التأكد من تأمين التطبيق بشكل جيد وتجنب الثغرات الأمنية المعروفة. في حالة استخدام ملفات تعريف الارتباط (Cookies): يفضل استخدام الكوكيز مع خاصية HttpOnly التي تمنع الوصول إليها من خلال البرمجة النصية في الجانب العميل، مما يقلل من خطر الاختراق الناتج عن هجمات XSS، كما يجب تشفير الـ token وتوقيعه بشكل صحيح لتجنب الاستيلاء عليه. 3- يُنصح باستخدام أدوات التخزين الموجودة في إطار العمل الذي تستخدميه، حيث قد توفر خيارات أمان أكثر لتخزين الـ token. 4- من الجيد تنفيذ إجراءات أمان إضافية مثل تحقق الهوية المزدوج (Two-Factor Authentication) وفحص الـ token بانتظام وتجديده بشكل دوري. وأسهل طريقة لتخزين الـ token بشكل آمن هي استخدام ملفات تعريف الارتباط (Cookies) مع خاصية HttpOnly. فعند تعيين الـ token كقيمة لملف تعريف الارتباط، يتم تأمينها من الوصول الغير المصرح به عن طريق البرمجة النصية في الجانب العميل، مما يعني أن الـ token لن يكون متاحًا للعميل من خلال JavaScript، وبالتالي يقلل من فرص استغلاله من قبل هجمات Cross-Site Scripting (XSS). بالإضافة إلى ذلك، يمكن تشفير الـ token وتوقيعه باستخدام أدوات تشفير وتوقيع الملفات التعريفية لزيادة الأمان. ومع ذلك، يجب عليك أيضًا مراعاة بعض النقاط الأخرى لضمان أمان عملية تسجيل الدخول بشكل عام، مثل تطبيق إجراءات متقدمة للمصادقة مثل التحقق الثنائي للهوية، وتجديد الـ token بشكل دوري، وتنفيذ إجراءات حماية إضافية لمنع الوصول غير المصرح به إلى البيانات الحساسة.

الأفضل إتاحة المجال للمبرمج والسماح له بالدخول على السيرفر لكي يتم تنفيذ العمل بشكل دقيق وبدون أخطاء وأيضًا ستريح بالك أنت. وهناك إمكانية لرفع التطبيق بعدة طرق، ولا يشترط بالضرورة أن يقوم المبرمج بالدخول من كمبيوتر الشركة لرفع ملفات التطبيق، لكن ذلك يعني تصعيب عملية رفع المشروع على السيرفر. وإليك بعض الخيارات المتاحة: 1- الوصول عن بُعد (Remote Access) (أفضل حل) تستطيع منح المبرمج الوصول عن بُعد إلى السيرفر الداخلي باستخدام بروتوكولات الوصول عن بُعد مثل SSH أو RDP، أي من خلال برامج مثل TeamViewer أو غيرها. وسيكون المبرمج قادرًا على الاتصال بالسيرفر من بلده ورفع ملفات التطبيق إلى السيرفر بشكل مباشر، وستكون أنت حاضر وتستطيع رؤية ما يفعله على الشاشة. 2- نقل الملفات يمكن إرسال ملفات المشروع إليك، ويخبرك هو بطريقة تشغيل المشروع على السيرفر، عن طريق مثلاً مشاركة الشاشة في إجتماع Google meet ويخبرك بالطريقة. 3- تصوير فيديو لشرح طريقة تشغيل المشروع إن أمكن قم بطلب تصوير فيديو يوضح لك كيف تقوم بتشغيل المشروع على السيرفر لديك. 4- إنشاء حاوية Docker لتطبيق الويب هناك حل جيد وهو إنشاء حاوية Docker لتطبيق الويب الخاص بك. حيث أن Docker هو منصة افتراضية تسمح لك بتعبئة التطبيقات وجميع مكوناتها (الأكواد والإعدادات والتبعيات) داخل حاويات مستقلة وقابلة للنقل. ثم تشغيل حاوية Docker على أي نظام يدعم Docker، بما في ذلك السيرفر الداخلي للشركة الذي تمتلكه. ويعتبر Docker من الأدوات الشائعة والمفيدة لنشر وإدارة تطبيقات الويب، حيث يوفر إمكانية عزل التطبيق وتوفير بيئة موحدة وقابلة للتكرار في أي مكان ترغب به لتشغيل التطبيق. 5- استضافة خارجية (External Hosting) بدلاً من رفع التطبيق على السيرفر الداخلي، لما لا تستخدم خدمات الاستضافة الخارجية إن أمكن مثل Amazon Web Services (AWS) أو Microsoft Azure أو غيرها من الاستضافات حسب حجم المشروع. وفي تلك الحالة، يستطيع المبرمج رفع التطبيق مباشرة على السيرفر الخارجي ومن ثم يكون التطبيق متاحًا عبر الإنترنت.

وظائف الـ Machine Learning متاحة في المنطقة العربية، ولكن بشكل أكبر في الدول الأجنبية. ولكن المجال ليس سهل، وبحاجة إلى وقت ليس بالقصير لتعلمه وإحترافه، وبخصوص مواقع العمل الحر العربية فالوظائف للمجال غير موجودة تقريبًا. وعن بعد تستطيع العمل مع الشركات في دول مختلفة بالطبع. لذلك ما تبحث عنه هو الشركات المتخصصة في ذلك، أو التي لديها منتج يستفاد من الذكاء الإصطناعي. فعليك بالبحث على LinkedIn عن الوظائف الخاصة بالـ Machine Learning وقراءة الوصف الوظيفي وماهي المهارات المطلوبة واعمل على تعلمها من خلال مسار تعليمي منظم وإلتزم به. والمجال واعد جدًا بالطبع، لكن عليك بإختيار المجال المناسب لظروفك ووقتك ومستواك البرمجي، وتستطيع القراءة والتعلم لفترة لتقرر بشكل سليم.

عليك بتفقد سجل الأخطاء stack trace لرؤية سبب المشكلة بالضبط. والخطأ الذي يظهر لك هو خطأ في نظام التشغيل iOS وليس بالضرورة خطأ مرتبطًا بتطبيق React Native نفسه. وقد يحدث الخطأ عندما يتم استدعاء الدالة dealloc في صفحة التطبيق وتحاول إيقاف توليد إشعارات توجيه الجهاز قبل تدمير الكائن. حاول أن تستدعي الدالة endGeneratingDeviceOrientationNotifications في المكان الصحيح وفي الوقت المناسب. ويُفضل أن تقوم بإيقاف توليد إشعارات توجيه الجهاز في مكان مناسب في دورة حياة التطبيق، مثل viewWillDisappear أو deinit للصفحة التي تحتوي على الكود المشار إليه. وتأكد من أن لديك تحديثات مستقرة لنظام التشغيل iOS على جهازك، فقد يكون الخطأ مرتبطًا بمشكلة في إصدار سابق من نظام التشغيل، وقد تم إصلاحها في التحديثات الحديثة. وإذا لم تستخدم أحدث إصدار من React Native، فقد ترغب في تحديثه إلى الإصدار الأحدث، حيث قد تكون هناك تحسينات وإصلاحات لمشاكل سابقة.

عليك بإعادة التثبيت وتأكد من إختيار الخيار التالي كما في الصورة لإضافة بايثون لمتغيرات البيئة: أو خيار باسم add python to environment variables. وأيضًا تم شرح كيفية التثبيت وتفاصيل أخرى مثل كيفية الإضافة لمتغيرات البيئة بشكل يدوي وأيضًا محرر بايثون على الإنترنت في النقاش التالي: وبعد تنفيذ الشرح عليك بغلق منفذ الأوامر تمامًا وإعادة تشغيله وتنفيذ أمر بايثون، وأيضًا تأكد في متغيرات البيئة أن لديك مثل المتغيرات التالية: وتستطيع الوصول إليها عن طريق البحث عن environment variables في شريط البحث بالأسفل ثم إخيار environment variables والضغط على path وستجد تلك المتغيرات. وإليك شرح وافي أيضًا:

إذا كان السؤال خاص بأحد الدورات، فأرجو منك طرح السؤال أسفل فيديو الدورة الخاص به، وطرح الأسئلة العامة هنا. والسؤال الخاص بك غير واضح، ولكن علي أي حال الخاصية "name" تستخدم في اللغات والتقنيات المختلفة لتعيين اسم لكائن معين أو عنصر في النظام البرمجي. أي استخدامها للإشارة إلى الهوية أو التعرف على الكائن والوصول إليه بسهولة. وفي html تستخدم للتعرف على اسم حقل الاستمارة في جافاسكريبت بعد عمل submit لها، وأيضًا بالنسبة لعناصر أخرى تلك الخاصية متاحة. بالنسبة لعنصر <iframe> تستخدم الخاصية لاستهداف تقديم النموذج. وبالنسبة لعنصر <map>، ترتبط خاصية الاسم بسمة usemap في عنصر <img> وتُنشئ علاقة بين الصورة والخريطة. بالنسبة لعنصر <meta>، تُحدد خاصية الاسم اسمًا لمعلومة/قيمة السمة المحتوى (content). بالنسبة لعنصر <param>، يتم استخدام خاصية الاسم بالتزامن مع سمة القيمة (value) لتحديد المعلمات للوحدة الإضافية المحددة بواسطة علامة العنصر <object>. والخاصية name متاحة للعناصر التالية: <button> <fieldset> <form> <iframe> <input> <map> <meta> <object> <output> <param> <select> <textarea> وأرجو توضيح السؤال لمساعدتك بشكل أفضل.

بالإضافة إلى ما تم ذكره، تستطيع استخدام إشارات Django لتنفيذ العملية الحسابية وعرض الرسالة المناسبة عند وصول تاريخ محدد في حقل التاريخ في نموذج Django. وإليك مثال لكيفية تنفيذ ذلك باستخدام إشارات Django: 1- في ملف models.py الخاص بالمشروع، استورد الإشارات والمكتبة datetime: from django.db import models from django.db.models.signals import post_save from django.dispatch import receiver from datetime import date class YourModel(models.Model): date_field = models.DateField() @receiver(post_save, sender=YourModel) def check_date(sender, instance, **kwargs): if instance.date_field == date.today(): # تنفيذ العملية الحسابية next_day = instance.date_field + timedelta(days=1) # عرض الرسالة print("تاريخ اليوم هو اليوم!") قمت باستيراد الإشارات والمكتبة datetime. ثم تعريف نموذج (YourModel) الذي يحتوي على حقل التاريخ (date_field). ثم تعريف دالة إشارة (signal function) باستخدام الديكورات (decorators) @receiver و @post_save للتأكيد على أن الدالة تستجيب لحدث حفظ النموذج بعد الحفظ. وفي تلك الدالة، يتم التحقق مما إذا كان حقل التاريخ في النموذج يساوي تاريخ اليوم، وإذا كان الأمر كذلك، تنفذ العملية الحسابية المطلوبة (وفي المثال تم طباعة اليوم التالي) وعرض الرسالة. تأكد من تسجيل الإشارة في ملف المشروع (apps.py) للتأكد من استدعائها عند تشغيل المشروع.

أرجو منك نسخ رسالة الخطأ بالكامل ولصقها هنا بشكل نصي حتى أتمكن من قرائتها وأيضًا مشاركة مجلد المشروع الخاص بك بعد التعديل.

عليك بكتابة الصيغة الخاصة بالملف وهي .mp3 وسأشرح لك الكود: System.getProperty("user.home"): يستخدم للحصول على مسار مجلد المستخدم الرئيسي. هذا الجزء يعيد سلسلة النص التي تمثل مسار المجلد الرئيسي للمستخدم. File.separator: هو فاصل الدليل الذي يستخدم لتجنب مشاكل التوافق بين أنظمة التشغيل المختلفة. يتم استخدامه هنا لتحديد فاصل الدليل في المسار. "Desktop": يشير إلى اسم المجلد المستهدف، وهو مجلد سطح المكتب. "al kouds.mp3": اسم الملف الصوتي الذي يتم تحديده في المسار. وما يحدث هو دمج جميع هذه الأجزاء لإنشاء المسار الكامل إلى الملف الصوتي، والمسار النهائي يعتمد على مسار المجلد الرئيسي للمستخدم واسم المجلد المستهدف واسم الملف الصوتي.

يوجد استثناء FileNotFoundException في رسالة الخطأ وهذا يعني أن الملف الذي تحاولي قرائته للتشغيل الصوتي غير موجود في المسار المحدد، ويجب التأكد من أن الملف الصوتي المطلوب موجود في المسار الصحيح. أي تحققي من المسار الذي تم تحديده للملف في الكود التالي، والأفضل تسمية الملف باسم بسيط باللغة الإنجليزية. File file = new File(System.getProperty("user.home") + File.separator + "Desktop" + File.separator + "أغنيه الأرض لنا والقدس لنا بدون موسيقى وبدون ايقاع (256 kbps) (shabakngy.com).mp3"); وإذا كان الملف غير موجود في المسار الصحيح، عليك بتحديد المسار الصحيح للملف الصوتي أو بنقل الملف إلى المسار الحالي المحدد في الكود.

ارفق مجلد المشروع بالكامل، واذكر الملف الذي به المشكلة إن أمكن.

سأشرح لك الخطوات من البداية: عليك بتعديل ملف المشروع الرئيسي وهو لديك index.jsx بحيث تقوم بتعديل الـ Router وتضع بداخله basename له قيمة مماثلة تمامًا لاسم المستودع الخاص بمشروعك كالتالي: بعد ذلك عليك بتثبيت الحزمة التالية: npm i gh-pages والآن قم بإضافة سكريبت predeploy وdeploy إلى ملف package.json أي بجانب سكريبتات start وbuild لديك كالتالي: ولكن لاحظ اسم dist في الكود خاص بالمجلد النهائي الذي يتم عمل build له فإذا كان مختلف لديك فيجب تعديله، ولديك أنت في مشروعك اخترت dist كاسم للمجلد في إعدادات Webpack فلا مشكلة إذًا. والآن قم برفع مشروعك على GitHub كما تفعل ومن الأفضل أن تقوم بإنشاء مستودع جديد وحذف القديم وإليك طريقة حذف المستودع: وبعد رفع المشروع قم بتنفيذ الأمر التالي في مشروعك داخل منفذ الأوامر في محرر الأكواد VScode: npm run deploy والكود سينفذ أمر npm run buld بمفرده وسيتم إنشاء فرع جديد به الملفات الخاصة بمجلد dist لديك باسم فرع gh-pages ونشر مشروعك به وستجد به رابط Github pages كما بالصورة: وإذا استمرت المشكلة لديك استخدم استضافات أخرى مثل render وrailway.app وvercel، وأيضًا لديك Netlify.

الأسئلة الإختبارية لا يتم الإجابة عليها بشكل مباشر، ولكن سأرشدك لطريقة الحل، وإذا واجهتك مشكلة بالكود يمكن المساعدة بذلك. خطوات الحل بشكل عام: 1- قومي بفتح محرر الأكواد لديك مثل (Eclipse أو IntelliJ). 2- إنشاء ملف جديد وتسميته بـ "Main.java" (يجب أن يتطابق اسم الملف مع اسم الكلاس الرئيسي في البرنامج). 3- وسأوضح لك بداية الكود الذي عليك كتابته داخل الملف "Main.java": import java.util.Scanner; public class Main { public static void main(String[] args) { //باقي الكود { وبالنسبة لباقي الكود عليك بالتالي: نقوم بتضمين فئة Scanner من مكتبة Java للسماح لنا بقراءة الإدخال من المستخدم. تعريف دالة main التي هي نقطة البداية لتنفيذ البرنامج. إنشاء كائن Scanner باستخدام new Scanner(System.in) للقراءة من وسيلة الإدخال القياسية (المستخدم). تعريف متغير number لتخزين العدد المدخل من المستخدم. نستخدم حلقة do-while للتأكد من أن المستخدم يدخل عددًا صحيحًا في النطاق المحدد. داخل الحلقة، نطلب من المستخدم إدخال رقم بين 10 و 50 باستخدام System.out.print و input.nextInt() لقراءة الرقم المدخل. إذا كان الرقم خارج النطاق المحدد، سيتم عرض رسالة خطأ باستخدام System.out.println. إذا كان الرقم داخل النطاق المحدد، سيتم طباعة رسالة الترحيب باستخدام System.out.println. 4- بعد الانتهاء من كتابة الكود، قومي بحفظ الملف "Main.java". 5- تشغيل المترجم لتحويل الكود إلى صيغة قابلة للتنفيذ، استخدمي مترجم سطر الأوامر (javac) لذلك، وافتحي نافذة الأوامر أو الطرفية وانتقلي إلى المجلد الذي يحتوي على الملف "Main.java" ثم أدخلي الأمر التالي: javac Main.java وسيقوم الأمر بتحويل الملف "Main.java" إلى ملف تنفيذي بامتداد ".class" يحمل نفس الاسم "Main.class". 6- بعد أن يتم تنفيذ الخطوة السابقة بنجاح، عليك بتشغيل البرنامج بإدخال الأمر التالي في نافذة الأوامر: java Main وستظهر رسالة تطلب من المستخدم إدخال عدد بين 10 و 50. إذا قام المستخدم بإدخال عدد خارج هذا النطاق، ستعرض رسالة الخطأ ويُطلب منه إدخال عدد جديد. وعندما يقوم المستخدم بإدخال عدد في النطاق المحدد (10-50)، ستظهر رسالة الترحيب وينتهي البرنامج. وهناك قسم كامل للدروس والشروحات الخاصة بلغة جافا في أكاديمية حسوب.

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

اعذرني لو بدى لك الأمر قاسيًا بعض الشيء، ولكن لمصلحتك، فتلك الأسئلة تراود أي شخص ليس لديه خبرة في البرمجة أو مبتدأ في البرمجة ويشتت نفسه بتلك الأسئلة بدلاً من تعلم أساسيات البرمجة ثم إختيار المجال الذي يريد التخصص به. وسيجد الإجابة بنفسه، وهي أن تلك الأسئلة تطرح منذ سنوات، بل وبعضها خاص بلغة مثل PHP فكل عام يتم الإشاعة أن لغة PHP في طريقها للإندثار وهو ما لا يحدث، بل يزداد استخدامها بفضل إطار لارافيل. وبالنسبة لمجال الويب حاليًا، الأمر أصبح أسهل وأصعب في نفس الوقت عن ذي قبل. فهو أسهل من حيث إزدياد سهولة إنشاء وواجهة مستخدم بسيطة أو إعتيادية في وقت قصير، من خلال المكتبات ومنصات الـ Low code أو بدون كود عن طريق السحب والإفلات. وهو أمر جيد وله استخداماته، لكن أصعب من حيث إنشاء واجهة مستخدم مخصصة ومعقدة، حيث سيتطلب منك الأمر تعلم استخدام العديد من المكتبات لتنفيذ المشروع، فمثلاً عند استخدام React ستقوم بتعلم مكتبات أخرى مثل Redux وReact Router لإدارة حالة التطبيق وتوجيه المسارات، أيضًا تعلم CSS frameworks مثل Bootstrap أو Material-UI لتنسيق وتصميم العناصر الواجهة، أو استخدام مكتبة styled-components لكتابة تنسيقاتك بنفسك في مشروع React. وأيضًا استخدام مكتبة AXios لإدارة طلبات Ajax والتعامل مع الـ APIs، إلخ.. من المكتبات الأخرى، وناهيك أن بعض المشاريع تحتاج إلى استخدام إطار عمل Next.js. لذلك الأمر يصبح أسهل من ناحية لكن أكثر تعقيدًا من ناحية أخرى، وعليك باستخدام كافة الأدوات التي تسهل عليك المهمة وإنجاز مهامك بشكل أسرع، لكن اختر الأدوات بعناية وكلما كانت أقل كان أفضل لك حتى لا تتشتت.

الأسئلة الإختبارية لا يتم الإجابة عليها بشكل مباشر، وسأرشدك لطريقة الحل لتستفيد: أولاً قبل البدء في تصميم النماذج المختلفة، يجب عليك فهم المتطلبات والاحتياجات المحددة للنظام الذي تعمل على تصميمه، مما سيساعدك في تحديد الكائنات والعلاقات التي يجب تمثيلها في النماذج. بعد ذلك البدء بتصميم Class Diagram باستخدام أدوات رسم الـ Class Diagram مثل UML تطبيقات تحرير النماذج مثل: drawio smartdraw Visual Paradigm Lucidchart excalidraw أو أدوات برمجة متكاملة مثل Eclipse واستخدام الإضافات المتوفرة لرسم النماذج. بعدها عليك رسم Usecase Diagram باستخدام نفس الأدوات التي استخدمتها في الخطوة السابقة لرسم Use Case Diagram، وقم بتحديد الحالات الاستخدام الرئيسية للنظام وتمثيلها في النموذج. الآن لنرسم Sequence Diagram و Activity Diagram بواسطة نفس الأدوات لرسم هذه النماذج أيضًا، وعليك بتحديد الثلاثة حالات استخدام الرئيسية التي اخترتها ورسم Sequence Diagram و Activity Diagram لكل حالة استخدام. أخيرًا ارسم State Diagram بالأداة التي اخترتها وقم باختيار كائن رئيسي داخل النظام ورسم State Diagram الخاص به. وقبل كل ذلك عليك بفهم الـ UML والـ Class Diagram وإليك مصادر ستفيدك:

بحثت عن البرنامج وكل ما وجدته هو النسخة التالية: https://proton-ide.software.informer.com/2.0/ وتكلفته 19 دولار. وهناك برنامج آخر باسم Amicus18 Compiler وهو مجاني وقد يفيدك. وأيضًا هناك موقع عبارة عن محرر أكواد باسم protonide تفقديه وهو مجاني أيضًا. وهناك بعض البدائل ولا أدري إذا كانت ستفيدك أم لا: MPLAB X IDE: يعتبر MPLAB X IDE منتجًا قويًا وشهيرًا في عالم برمجة الميكروكنترولر. Arduino IDE: يستخدم Arduino IDE في برمجة الأجهزة المبنية على منصة Arduino، وسهل الاستخدام ويحتوي على محرر برمجة مبسط ومكتبة واسعة من الأمثلة والموردين. PlatformIO: بيئة تطوير مفتوحة المصدر ومتعددة الأغرا، و يدعم العديد من منصات الميكروكنترولر والأجهزة واللغات المختلفة مثل Arduino وESP8266 وESP32 وRaspberry Pi وغيرها. Code::Blocks: بيئة تطوير متعددة الأغراض وقابلة للتوسعة، ويدعم العديد من لغات البرمجة مثل C وC++ ويوفر واجهة سهلة الاستخدام ومجموعة من الميزات.

ما المقصود ببرنامج proton plus هل المقصود هو برنامج الـ VPN؟

في في العرض (views) في Django تستطيع كتابة عبارة if statement بواسطة الشروط والتحقق منها في العرض نفسه، ومن ثم تمرير النتيجة إلى القالب (template) لعرض المحتوى المناسب بناءً على الشرط، وإليك مثالًا بسيطًا: في views.py: from django.shortcuts import render def my_view(request): is_authenticated = request.user.is_authenticated return render(request, 'my_template.html', {'is_authenticated': is_authenticated}) في القالب (my_template.html): {% if is_authenticated %} <p>مرحبًا بك، {{ request.user.username }}!</p> {% else %} <p>قم بتسجيل الدخول من فضلك.</p> {% endif %} قمت باستخدام request.user.is_authenticated للتحقق مما إذا كان المستخدم قد سجل الدخول أم لا في العرض. ثم تمرير قيمة is_authenticated إلى القالب عن طريق الدمج مع السياق (context) عند استدعاء دالة render. في القالب، واستخدام البنية if...else لعرض المحتوى المناسب بناءً على قيمة is_authenticated. ولاحظ أنه يجب عليك تعريف المسار المناسب في urls.py وربطه بالعرض (view) الخاص بك في Django.

المشكلة تتعلق بنوع البيانات المتوقع في السطر الذي يحتوي على الخطأ، ويتعذر تحويل القيمة من نوع "int" إلى نوع "String" في سلسلة الحروف (String). وربما السبب هو محاولة استخدام القيمة المسترجعة من SharedPreferences على أنها سلسلة حروف (String) في السطر 27 في ملف "paniercontroller.dart"، ولكن القيمة المسترجعة عبارة عن رقم صحيح (int) وليس سلسلة حروف (String). حاول تجربة تحويل القيمة المسترجعة إلى سلسلة حروف (String) باستخدام دالة toString()، وذلك باستخدام الدالة toString() على القيمة المسترجعة من SharedPreferences قبل استخدامها في عملية التحويل. مثال: String? userId = sharedPreferences.getString('user_id').toString(); قم بتطبيق هذا التغيير في المكان المناسب وحاول تشغيل التطبيق مرة أخرى للتحقق مما إذا كان يزال الخطأ موجودًا أم لا. وذلك مجرد إقتراح ولم أقم بتجربة الكود، وأخبرني بالنتيجة.

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

1- لنبدأ بحل كل رسالة تحذير وخطأ على حدى، ورسالة التحذير الأولى هي: wrning: You are importing createRoot from "react-dom" which is not supported. You should instead import it from "react-dom/client". p وهي تعني أنك تستخدم createRoot من react-dom وهو غير مدعوم في الإصدار الحالي من React وهو الإصدار 18و بدلاً من ذلك، يجب عليك استيراده من react-dom/client. 2- والتحذير الثاني لديك هو: warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot p ويعني أن استخدام ReactDOM.render لم يعد مدعومًا في React 18 ويجب استخدام createRoot بدلاً من ذلك، ويوضح أنه حتى تقوم بالتبديل إلى الواجهة البرمجية الجديدة، سيتصرف تطبيقك كما لو كان يعمل بناءً على React 17. حيث في React 18، تم إدخال تغييرات في طريقة تجهيز وتقديم التطبيق، وبدلاً من استخدام ReactDOM.render لتقديم التطبيق في نقطة الدخول الرئيسية، يجب استخدام createRoot لإنشاء نقطة جذرية وتقديم التطبيق من خلالها. 3- وأيضًا لديك مشكلة أخرى وهي تستخدم الكود التالي في ملفي App.jsx وindex.jsx: App.jsx createRoot(document.getElementById('root')).render(<App />); في ملف index.jsx ReactDOM.render( <BrowserRouter> <App /> </BrowserRouter>, document.getElementById('root') ); وهو يقوم بإنشاء نقطة جذرية باستخدام createRoot من react-dom ويقوم بتقديم مكون التطبيق <App /> من خلالها. أي يجب وضعه في مكان واحد فقط وهو index.jsx فهو نقطة الدخول لتطبيقك في webpack. 4- المشكلة الأخيرة هي أنك تقوم بتضمين المكون App داخل أكثر من Router حيث أنك في الملف App.jsx تضعه داخل Router والتي هي BrowserRouter وفي index.jsx تضعه داخل BrowserRouter أخرى. وذلك غير مسموح بالطبع وسيسبب لديك مشكلة في التطبيق. 5- لماذا قمت بإنشاء ملفي App.jsx وindex.jsx فكل ما تحتاجه هو index.jsx كملف رئيسي للمشروع. 6- كمعلومة جانبية أنت لست بحاجة إلى استيراد React في بداية أي مكون في إصدار React 18. وبناءًا على ما سبق عليك تعديل الكود في ملف index.jsx كما يلي: // react-dom/client الاستيراد من import { createRoot } from 'react-dom/client'; import './App.css'; import './index.css'; import reportWebVitals from './reportWebVitals'; import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; import Home from './pages/home'; import 'bootstrap/dist/css/bootstrap.css'; import 'bootstrap/dist/js/bootstrap.min.js'; import '@fortawesome/fontawesome-free/css/all.css'; createRoot(document.getElementById('root')).render( // استخدم createRoot بدلاً من ReactDOM.render <Router> <Routes> <Route path='/' element={<Home />} /> </Routes> </Router> ); reportWebVitals(); أي قم بحذف ملف App.jsx واستخدم الكود السابق فقط في index.jsx

سأوضح لك المصطلحات بالتفصيل وأمثلة لتوضيح الأفكار. الفرق بين الـ Parameters والـ Arguments Parameters: المتغيرات التي يتم تعريفها في تعريف الدالة وتستخدم لتمرير القيم إلى الدالة، وشير إلى المتغيرات التي يتعامل معها الدالة في داخلها. Arguments: القيم الفعلية التي يتم تمريرها إلى الدالة عند استدعائها، وتشير إلى القيم التي تمررها عند استخدام الدالة. مثال: لنفترض أن لدينا دالة بسيطة تسمى "add" تقوم بإجراء عملية جمع بين اثنين من الأرقام، حيث a و b هما parameters، أما الأرقام المحددة مثل 3 و 5 فهي arguments. function add(a, b) { // a و b هما parameters return a + b; } const result = add(3, 5); // 3 و 5 هما arguments console.log(result); // الناتج سيكون 8 الفرق بين الـ Declaration والـ Initialization Declaration: يتعلق بتعريف متغير أو دالة أو كائن بشكل عام، حيث يتم إعلان وجوده وتحديد نوعه واسمه، ولكن لا يتم تعيين قيمة محددة له في هذه المرحلة. Initialization: يتعلق بتعيين قيمة محددة لمتغير بعد تعريفه، أي تخصيص قيمة بداية للمتغير. مثال: في JavaScript، تستطيع إعلان المتغير باستخدام الكلمة الرئيسية var أو let أو const، ويمكنك تعيين القيمة باستخدام عامل التعيين =. let x; // هنا نقوم بالإعلان عن المتغير x x = 5; // هنا نقوم بتعيين قيمة 5 للمتغير x الـ Execution Context يشير إلى البيئة التي تتم فيها تنفيذ الكود، وتحتوي على المتغيرات المحلية والمعلومات الأخرى المتعلقة بالتنفيذ. يحتوي السياق على سجلات تتبع ترتيب تنفيذ الأوامر والمتغيرات المعرفة والقيم المحددة لها. مثال: عند استدعاء الدالة، يتم إنشاء Execution Context جديد يحتوي على المتغيرات المحلية والمعلومات اللازمة لتنفيذ الدالة. وعند انتهاء التنفيذ، يتم إزالة Execution Context ويعود التنفيذ إلى السياق السابق. function outer() { const x = 5; function inner() { console.log(x); } inner(); } outer(); // سيتم طباعة قيمة 5 في المثال السابق، الدالة الداخلية inner يمكنها الوصول إلى المتغير x المعرف في البيئة الخارجية (outer)، لأن Execution Context يحتفظ بالارتباط بين الدوال والقيم المرتبطة بها في نطاق الكود. الـ Lexical Environment يشير إلى المكان الذي يتم فيه تحديد القيم المرتبطة بالمتغيرات في الكود. يحتوي البيئة اللغوية على إعلانات المتغيرات والدوال والكائنات الأخرى، وتحدد كيفية الوصول إليها وكيفية تفاعلها مع بعضها البعض. مثال: في JavaScript، يتم تشكيل الـ Lexical Environment عند تحديد النطاقات اللغوية. أي عند البحث عن قيمة متغير، يتم البحث في Lexical Environment الحالي وفي البيئات الأبوية حتى يتم العثور على القيمة. function outer() { const x = 5; function inner() { console.log(x); } inner(); } outer(); // سيتم طباعة قيمة 5 هنا الدالة الداخلية inner يمكنها الوصول إلى المتغير x المعرف في البيئة اللغوية الخارجية (outer)، لأن Lexical Environment يحتفظ بالارتباط بين الدوال والقيم المرتبطة بها في نطاق الكود. شرح الدوال في JavaScript من موسوعة حسوب

حاول تغيير ترتيب الدوال في ملف login.jsx: import { login } from "../../redux/actions/authActions.js"; const handleChange = (e) => { const { name, value } = e.target; setUserData({ ...userData, [name]: value }); }; const handlevalid = async (res) => { if (res.token) { setIsCorrect(true); } else { setIsCorrect(false); } }; const handleLogin = async (e) => { e.preventDefault(); setUserData({ email, password }); try { const res = await dispatch(login(userData)); // انتظر حتى انتهاء العملية console.log(res); // استخدم الاستجابة المتاحة هنا handlevalid(res); // قم بتمرير الاستجابة كمعامل للدالة console.log(auth); } catch (error) { // إدارة الأخطاء هنا } }; قمت بنقل الاستدعاء للدالة handlevalid() بعد استلام الاستجابة من login()، وتمرير الاستجابة كمعامل للدالة handlevalid() لكي تتمكن من استخدامها فيها. وبالتالي، يجب أن تحصل على طباعة صحيحة لـ auth من الضغطة الأولى على زر login. وإذا استمرت المشكلة، أرجو منك رفع مجلد المشروع بعد ضغطه لتفقد المشكلة.

في CSS، تعتبر ":before" عنصر زائف وتستخدم لإضافة محتوى قبل عنصر محدد، بينما ":after" تستخدم لإضافة محتوى بعد عنصر محدد، وغالبًا تستخدم هاتين الخاصيتين لإضافة عناصر مرئية إلى عناصر HTML الموجودة. لكن في حالة عنصر الإدخال "input"، يعتبر استخدام ":before" غير صحيح ولا يعمل على نحو صحيح.، ذلك لأنه عنصر الإدخال "input" يعتبر عنصراً فارغاً لا يحتوي على محتوى داخلي. مما يعني أنه لا يمكنك استخدام ":before" لإضافة محتوى قبل عنصر "input" نفسه. وإذا كنت ترغب في إنشاء رمز البحث داخل عنصر الإدخال "input"، تستطيع استخدام العديد من الطرق لتحقيق ذلك. واحدة من هذه الطرق هي وضع عنصر فرعي مستقل للعنصر "input" واستخدام الخاصية "position: absolute" لتحديد موقع الرمز بالنسبة لعنصر الإدخال، كتعيين أيقونة لرمز البحث كخلفية للعنصر الفرعي وتنسيقه بواسطة CSS ليتناسب مع المظهر المطلوب. وسأوضح لك الكود اللازم لإنشاء رمز البحث داخل عنصر الإدخال "input" باستخدام خاصية "position: absolute": HTML: <div class="search-container"> <input type="text" class="search-input"> <span class="search-icon"></span> </div> CSS: .search-container { position: relative; } .search-icon { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); width: 20px; height: 20px; background-image: url('path/to/search-icon.png'); background-size: cover; } .search-input { padding-right: 30px; } حيث قمت بإنشاء عنصر <div> لتكون حاوية لعنصر الإدخال "input" وعنصر الرمز "span". ثم بتعيين الخاصية "position: relative" للعنصر الحاوي .search-container ليمكن تحديد موقع العناصر الفرعية بالنسبة له. وتحديد الخاصية "position: absolute" للعنصر الفرعي .search-icon ليمكن تحديد موقعه بالنسبة للحاوية. ثم استخدمت الخاصيات top, right, transform لتحديد موقع الرمز في الزاوية العلوية اليمنى ووسط العنصر، قمت أيضًا بتعيين خلفية للرمز باستخدام خاصية "background-image" وتحديد حجمها باستخدام "background-size". أخيرًا، تعديل حجم عنصر الإدخال "input" بإضافة الحشو على الجانب الأيمن ليسمح بوجود مساحة كافية لعرض الرمز داخل العنصر. ولا تنسى استبدال 'path/to/search-icon.png' بمسار الصورة الخاصة بأيقونة البحث، أو تستطيع استخدام أيقونة من Font Awesome. وإليك مثال إذا أردت استخدام Font Awesome: HTML: <!DOCTYPE html> <html> <head> <!-- استيراد Font Awesome --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" /> </head> <body> <div class="search-container"> <input type="text" class="search-input"> <span class="search-icon"><i class="fas fa-search"></i></span> </div> </body> </html> قمت بتحديد الأيقونة المستخدمة لرمز البحث باستخدام العنصر <i> ومنحها الفئات المناسبة .fas و .fa-search، حيث .fas تعني استخدام الأيقونات الخطية (Solid) و.fa-search تعني استخدام أيقونة البحث. CSS: .search-container { position: relative; } .search-icon { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); width: 20px; height: 20px; color: #999; /* لتغيير لون الأيقونة */ } .search-input { padding-right: 30px; }