Mustafa Suleiman

لا يوجد مشكلة عند الضغط على زر تسجيل الدخول أو زر إنشاء الحساب، قمت بكتابة إيميل وباسورد وتم تسجيل الدخول والتحويل للصفحة الرئيسية. عامًة قم بتغيير الكود للتالي: registerBtn?.addEventListener('click', () => { container.classList.add("active"); }); loginBtn?.addEventListener('click', () => { container.classList.remove("active"); }); لاحظ ? وهو Optional chaining operator فائدته التحقق من وجود قيمة أي يعمل على التحقق من وجود قيمة registerBtn و loginBtn قبل محاولة الوصول إلى خاصية addEventListener. وفي حال registerBtn أو loginBtn تساوي null أو undefined، فإن الكود لن يُنفذ addEventListener وسيتم تجنب حدوث خطأ.

ليس عليك ذلك، المطلوب منك فهم المشكلة من خلال وصف المسابقة ووصف البيانات المتاحة، ثم معالجتها تبعًا لذلك

لو أردت نصيحة واحدة فهي لا تتسرع فمجال البرمجة بحاجة إلى صبر ومجهود ومع الإلتزام يصبح الأمر أسهل فأسهل، ولا تقلق من المشاكل والأخطاء اعتد عليها وتعلم منها. وأيضًا لا تتسرع في دراسة الأساسيات والإنتقال إلى التقنيات وهي المكتبات والإطارات المبنية على جافاسكريبت مثل React أو CSS مثل بوتستراب. تعمق في دراسة HTML, CSS, JS ولا تنتقل من HTML و CSS لغة إلى أخرى قبل التطبيق بشكل جيد وبشكل متدرج أي نماذج بسيطة في البداية ثم انتقل إلى تصميم كامل. وليس من خلال الشرح فقط بل بمفردك أيضًا، أي قم بالبحث عن تصميم بسيط لجزء معين من الصفحة أو تصميم كامل وحاول تنفيذه من خلال HTML, CSS. ستجد على اليوتيوب الكثير من المشاريع للمبتدئين، وأيضًا على مواقع مثل frontend mentor. ستجد تفصيل هنا بخصوص طريقة المذاكرة الجيدة:

ما هو الخطأ الذي ظهر لك؟

العمود يعني أن هناك بعض القيم التي لم يتم جمعها أو لم يتم إجراء الفحص اللازم، وللتعامل مع الأمر أولاً لو لديك معلومات عن سبب عدم الفحص، فقم باستبدال Not done بقيمة تصف السبب (مثل Refused أو Contraindication). وإن لم يكن لديك معلومات عن السبب، فقم باستبدالها بقيمة محددة مثل Missing أو Unknown. أيضًا تستطيع حذف الصفوف التي تحتوي على Not done، لكن سيؤدي ذلك إلى فقدان معلومات مهمة إن كانت نسبة الصفوف التي تحتوي على Not done كبيرة، بجانب تحيزات في تحليل البيانات لو هناك علاقة بين عدم الفحص والعوامل الأخرى.

الصور لتظهر بشكلها فقط أي الحذاء بدون الخلفية، يجب أن تكون بصيغة png ويجب التأكد من عدم وجود خلفية بها، فصيغة png هي التي تدعم الخلفية الشفافة. بخصوص تموضع الصورة في الخلف أو الأمام، فذلك يتم من خلال قيمة z-index عليك إعطائها رقم أكبر لتظهر في الأمام، ولكن يجب تحديد قيمة لخاصية position للصورة أي كالتالي: img { position: absolute; z-index: 10; }

يمكن استخدامه في عمود يحتوي على أكثر من متغير، فالهدف منه هو تحويل القيم النصية إلى قيم رقمية يمكن للنماذج الإحصائية التعامل معها. مثلاً لو لديك عمود يحتوي على قيم مثل مدينة، ريف، ساحل، فاستخدمه لتحويل القيم إلى قيم رقمية مثل 0، 1، 2. ولكن يجب أن تكون حذرًا عند استخدامه في عمود يحتوي على قيم متعددة، حيث يمكن أن يؤدي ذلك إلى مشاكل مثل التمثيل غير الصحيح في حال القيم في العمود ليست متسلسلة أو لا تتبع ترتيبًا معينًا، أو الارتباط الخاطئ لو كانت القيم في العمود غير مرتبطة ببعضها البعض. عامًة لا أنصحك باستخدام ترميز التسمية في الأعمدة التي تحتوي على ترتيب طبيعي بين القيم، أي لو لديك عمود Age يحتوي على القيم Child, Teen,Adult, فترميز التسمية سيؤدي إلى فهم خاطئ للنموذج، حيث سيعتقد أن Teen أكبر منAdult. واستخدم Label Encoding فقط مع القيم النصية وليس مع القيم الرقمية أو التاريخية، ومن المهم مراجعة البيانات قبل استخدامه للتأكد من أن القيم في العمود ليست متكررة بشكل كبير، وأنها لا تحتوي على قيم غير متوقعة. وفي حال القيم في العمود لا تتبع ترتيبًا معينًا، فهناك تقنيات أخرى مثل One-Hot Encoding أو Hashing أو Dummy Encoding.

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

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

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

ذلك مجرد إختصار alias لاسم المكتبة عند استيرادها بمعنى إعادة تسمية لتسهيل استخدامها خلال الكود الخاص بنا. تخيل الأمر كأنه لقب، مثلاً اسمك علي من الممكن تلقيبك بأسماء أخرى. لكن تجنب أسماء غير مفهومة عند إعادة التسمية مثلاً np لمكتبة numpy فذلك مفهوم أما ma مثلاً فذلك غير مفهوم.

استخدم التالي لإضافة الأيقونة: <link rel="shortcut icon" type="image/x-icon" href="icon.ico?"> بخصوص وسائل التواصل فكل ما تحتاجه هو إضافة التالي فقط: <meta property="og:title" content="Haitham Sharlie's Portfolio"> <meta property="og:description" content="Explore Haitham Sharlie's web development projects and UI/UX skills."> <meta property="og:image" content="https://raw.githubusercontent.com/haitham-sharlie/my-portfolio/refs/heads/main/icon.ico"> لاحظ أضفت رابط الصورة المباشر.

جربت تغيير html و css ولم يحدث الخطأ وأعدت تشغيل المشروع، حاول إغلاق المحرر والمتصفح ثم التجربة من جديد.

متى يحدث الخطأ، قمت بحذف مجلد dist ثم إعادة تشغيل المشروع وتجربته والضغط على الروابط ولم يحدث الخطأ. بعد حذف مجلد dist وتشغيل المشروع، قم بإعادة تحديث الصفحة أيضًا بالضغط على CTRL + F5 لحذف الملفات المؤقتة.

قم بحذف المكتبة التالية: npm un create-react-app -g

من الأفضل الإعتماد على Local Storage وسيتم تخزين البيانات على جهاز المستخدم, وتستطيع الوصول إليها من خلال جافاسكريبت، وستبقى المنتجات موجودة في السلة عند عودة المستخدم مرة أخرى. لكن للإجابة على سؤالك بشكل جيد، تحتاج إلى الإجابة على هل منتجاتك محدودة العدد؟ بمعنى، هل تحتاج إلى حجز منتج لمدة 10 دقائق حتى يتمكن المستخدم من شرائه؟ هل تريد إجراء تحليلات عليها وإرسال رسائل بريد إلكتروني لاحقًا؟ هل تريد تذكرها عبر الأجهزة بحيث تصبح متزامنة على أجهزة المستخدم؟ هل تريد من المستخدمين تسجيل الدخول أم الشراء مباشرًة؟ عملية التخزين على جانب المتصفح تعمل بشكل جيد فقط في حال كان المشروع صغير لديك، ودائمًا من الأفضل حفظ عناصر السلة في جانب الخادم

في حال قمت بتثبيت react بشكل global أي عالمي لتصبح متاحة لكافة المشاريع على جهازك فعليك حذفها من خلال: npm un react-g بعد ذلك قمت بإنشاء مشروع react بشكل محلي أي كل مشروع بشكل منفصل بالحزم الخاصة به. لتفقد الأمر أيضًا قم بعرض نتيجة الأمر التالي لرؤية الحزمة المثبتة بشكل global لديك npm list -g --depth=0

ستحتاج إلى استخدام Django Channels ويوجد مكتبة daphne لتسهيل إضافة ذلك للمشروع لديك. وهي ببساطة خادم ASGI (Asynchronous Server Gateway Interface) تم تطويره بواسطة فريق Django، و ASGI تلك واجهة برمجة تطبيقات API جديدة لـ Python نستخدمها لإنشاء تطبيقات ويب غير متزامنة Async. وتدعم WebSocket أيضًا لتوفير ميزات الاتصال في الوقت الفعلي Real-time. ابحث على اليوتيوب عن chat app using Django وستجد تفصيل عملي لكيفية تنفيذ الأمر.

المشكلة في العنصر الذي يحمل الكلاس center-div text-center يستحوذ على مساحة أكبر من باقي العناصر ويظهر خارج الـ container. وذلك بسبب وضع margin جهة اليمين له، عليك حذفه ومعالجة الأمر عند مساحة الشاشة التي تظهر بها المشكلة وهي 1200px. من الأفضل تجنب وضع margin للعناصر لتنفيذ التصميم، واستخدام gap الخاصة بـ Flexbox والـ Padding لتنسيق التصميم.

كل ما عليك في البداية هو تنفيذ المشروع على المنصة نفسها لتسهيل الأمر على نفسك، أولاً عليك إختيار مسابقة قائمة بالفعل وستجد ذلك هنا: https://www.kaggle.com/competitions ابدء بمسابقات تحت تصنيف Getting Started فهي للمبتدئين، ولا يوجد بها جوائز مالية. قم بقراءة وصف المسابقة بالكامل ثم اضغط على join competition أعلى اليمين بعد ذلك سيظهر لك زر باسم new Notebook لإنشاء Notebook على منصة Kaggle وبه كود جاهز لاستيراد الملفات الخاصة بالمشروع. بعد الإنتهاء ستجد بالجانب الملفات الناتجة من المشروع الذي تعمل عليه في مجلد kaggle/working قم بتحميلها مثلاً ملفات csv الناتجة من عملية تحليل البيانات، بعد التحميل قم بحفظ ما قمت به بالضغط على save version أعلى اليمين لحفظ العمل الخاص بك. ثم توجه لصفحة المسابقة على kaggle واضغط على submit أعلى اليمين ثم قم برفع الملف الذي قمت بتحميله وسيظهر لك النتيجة.

تلك مدينة افتراضية تم إنشاؤها بواسطة Google AI باستخدام تقنية الذكاء الاصطناعي، وذلك كبيئة اختبار للأنظمة المستقلة، مثل السيارات ذاتية القيادة، والروبوتات، وغيرها من التقنيات المتقدمة. أي مصممة لتكون واقعية قدر الإمكان، مع تضمينها لمعالم المدينة، مثل الطرق، والمباني، والمشاة، والمركبات، وتحتوي على كميات هائلة من البيانات، بما في ذلك بيانات الموقع، والطقس، وحركة المرور، مما يسمح بتدريب نماذج الذكاء الاصطناعي بشكل فعال. وتستطيع التحكم في جميع جوانبها، بما في ذلك الوقت من اليوم، والطقس، وحركة المرور، مما يسمح لهم باختبار سيناريوهات مختلفة. وهي مفتوحة المصدر مفتوح أي الجميع يستطيع استخدامها. https://github.com/vanderschaarlab/synthcity

تسجيل الدخول من خلال جوجل ذلك أمر مختلف تمامًا، ما قصدته هو تسجيل الحساب من خلال الـ Form بكتابة الاسم والإيميل ثم تسجيل الدخول. حيث ستحتاج إلى إنشاء حساب في https://console.cloud.google.com/ وإنشاء مشروع والحصول على API بالضغط على APIs & Services ثم Credentials. ثم استخدام مكتبة laravel/socialite لتسهيل الأمر عليك: composer require laravel/socialite وهناك المزيد من الخطوات بإعداد متغيرات البيئة، ستجد تفصيل هنا: https://laravel.com/docs/11.x/socialite

من الأفضلك لك إنشاء مشروع React من خلال Vite وليس create-react-app عليك تنفيذ الأمر التالي: npm create vite@latest react-basics -- --template react ستظهر لك رسالة اكتب y ثم اضغط على Enter. بعد الإنتهاء توجه للمجلد react-basics الذي تم إنشائه من خلال: cd react-basics ثم تثبيت الحزم: npm i ثم تشغيل المشروع: npm run dev

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

الدورة مقسمة لعدة مسارات وكل مسار بداخله أقسام وكل قسم بداخله دروس. بالنسبة لدورة تطوير واجهات المستخدم، فمثلاً "أساسيات تطوير الويب" هو مسار وبداخله يوجد أقسام مثل أساسيات HTML وأساسيات CSS وهكذا وكل قسم بداخله دروس خاصة به.