عماد شيخ العشرة

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

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

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

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

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

أولا فلنشرح الدوال: Promise.all() هي دالة تأخذ مصفوفة من الوعود (Promises) وتنتظر أن تكتمل كلها. ثم ترجع مصفوفة تحتوي على نتائجها بنفس الترتيب. Object.assign() هو دالة لدمج الكائنات في كائن واحد. results = [ { smartphones: [...] }, { laptops: [...] }, ... ] بعد استخدام Object.assign() سوف يكون كالتالي: { smartphones: [...], laptops: [...], ... } لاحظ انه تم دمج جميع الكائنات. فلنشرح الشيفرة: أولا لدينا معلومات أولية تحتوي على المعلومات الخاصة بانواع المنتجات categoryData وهي مصفوفة. ثم لدينا حالة product state وهو الكائن التي سيحتوي على البيانات التي سوف نأخذها من الواجهة البرمجية API وقيمته الاولية كائن فارغ. عملنا useEffect ولهذا لانه نريد أن نجلب البيانات وعادة عند جلب البيانات نستخدمها وهي تستخدم لانها سوف تنفذ مرة واحدة فقط عند جلب البيانات وهكذا نستعمل useEffect . لدينا دالة fetchPrduct مهمتها اخذ البيانات من ال API وتم استخدام map مع Promise.all لأنه لدينا اكثر من منتج وكل منتج نريد ان نأخذ معلوماته يتطلب طلب API خاص فيه. فلذلك اخذنا أسماء المنتجات وعملنا عليها mapping مما اخذنا اسم كل منتج منفصلا وعملنا عليه طلب API ووظيفة all هنا انها سوف ترجع المعلومات لنا واحدة تلو الأخرى. ومن ثم في Object.assign() دمجنا كل الكائنات المحتوية على المعلومات المرادة في كائن واحد ومن ثم: setProduct(productsData); عينا قيمة الكائن الذي سيحتوي على البيانات بالكائن الذي دمجناه أي يعني المعلومات المرادة. ومن ثم طبعنا الناتج.

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

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

في الواقع لا فالمشاريع الصغيرة جدا ان المنطقي هو استخدام الDOM وذلك لعدة اسباب: ان كانت صفحتي هي عبارة عن صفحة هبوط فقط مثلا أي يعني انها تحتوي على بعض المعلومات فقط فلا تحتاج الى تعقيدات رياكت. في الصفحات التي لا تتطلب Backend ايضا فلا يوجد في صفحتنا الى عبارة عن HTML و CSS والقليل من جافاسكريبت. قد يختصر علينا الوقت بدل من تنصيب React. قد يكون ارخص في الاستضافة فيمكنك استضافة ملفات ال JS حتى في github pages ولا داعي للتعاقيد الزائدة. فالأمر يعتمد على الموقع وعلى ما تخطط أن تفعله وعلى اساس موقعك نختار ما نريد. خاصية الاختيار لا تنطبق على اختيار رياكت من DOM فقط بل في عالم تطوير البرمجيات تستخدم بكثة مثل إختيار اي لغة لل Backend. فقد تكون بعض اللغات مناسبة اكثر من بعض اللغات على حسب نوعية المشروع وعلى ما نريد تحقيقه فغالبا بعض اللغات تحتوي على مكتبات جاهزة تساعدنا على التطوير اسرع بينما بعضها تكون امنة اكثر وعليها يستخدم على حسب نوع مشروعنا. مثال بسيط: في الصفحات البسيطة جدا في ال Frontend يتم استخدام Wordpress ولذلك لتقليل العمل والجهد.

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

قبل أن نشرح الفرق بينهم يجب علينا معرفة أن كلاهما يستخدم للمر على عناصر المصفوفة وارجاع مصفوفة جديدة يتم تطبيق عليها دالة معينة. map ترجع المصفوفة على ما هي ولا تغير شيء مثال: const arr = [1, 2, 3]; const result = arr.map(x => [x * 2]); console.log(result); // [[2], [4], [6]] لاحظ ان لدينا الان مصفوفة ثنائية الابعاد اي مصفوفة داخل مصفوفة لاننا خزنا القيم الجديدة داخل مصفوفات متفرقة. بينما flatmap فعملها ان تجعل المصفوفة ذو بعد واحد اي انه لا تحتوي مصفوفات داخل مصفوفة بل هي مصفوفة واحدة مثل: const arr = [1, 2, 3]; const result = arr.flatMap(x => [x * 2]); console.log(result); // [2, 4, 6] لاحظ هنا انه تكونت مصفوفة واحد فقط.

يمكنك الوصول اليها عن طريق التالي: <link rel="icon" type="image/jpg" href="./src/assets/your-img.jpg" /> لكن يجب عليك تعديل شيئين اولا: your-img.jpg وسيكون حسب اسم الصورة لديك. ثانيا: type="image/jpg" يجب عليك استبدال jpg بنوع الصورة التي لديك.

هل جربت ان تعمل التصميم لوحدك بدون مساعدة احد؟ الرجاء محاولة عمل المشروع بدون مساعدة لكي يتطور عندك المنطق لحل المشكلات كما انه في حال واجهت مشكلة في الواقع يجب عليك ان تفهم كيفية حل المشكلة واصلاحها من نفسك.

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

في الواقع هذه شيفرة تحتوي على العديد من الأخطاء. أولا: في رياكت نحن عندما نريد تحديث اي معلومات على الواجهة نستخدم ما يسمى الربط ثنائي الاتجاه Two Way binding وتم شرحها لك مسبقا. وهو عندما نريد نحدث البيانات في تطبيق لا نحدثها مباشرة بل نحدثها عن طريق هذه الخاصية. ويتم تحقيق هذه الخاصية برياكت باستخدام useState وما فعلته انت خاطئ تماما فالمعلومات التي سوف تتحدث لا يتم تخزينها بمتغير عادي بل داخل المتغير الخاص بالخطاف useState. ثانيا انت عندما عملت خاصية الحذف يجب عليك تحديد اي عنصر سوف تحذفه وانت لم تحدد اي شيء فكتابتك للجملة خاطئة. {maytastlist} <button onClick={deleteClick}>clear</button> فكيف يمكن لتطبيقك التعرف اي من الادوات تريد مسحها فيجب ان يكون الزر مرتبط بالاداة ايضا. ثالثا في دالة الحذف انت لم ترجع شيئا والذي كان يجب ان يتم تحديثة باستخدام الخطاف useState. ساكتب لك الشيفرة واشرح لك خطوة بخطوة لكن ارجو التركيز. import React, { useState } from "react"; function App() { const [test, setTest] = useState([ "item1", "item2", "item3", "item4", ]); const deleteClick = (index) => { const newDelete = [...test]; newDelete.splice(index, 1); setTest(newDelete); }; return ( <div> <ul> {test.map((item, index) => ( <li key={item}> {item} <button onClick={() => deleteClick(index)}>Delete</button> </li> ))} </ul> </div> ); } export default App; في useState حددنا الحالة البدائية لمصفوفتنا والتي ستتغير باستمرار على حسب الضغط على الزر. const [test, setTest] = useState([ "item1", "item2", "item3", "item4", ]); ثانيا في الدالة الخاصة بالحذف ناخذ المكان بالمصفوفة كمعامل ولاحظ عندما نجدد المصفوفة بحذف عنصر منها استخدمنا setTest الخاص بالخطاف ولم نحدث مباشرة وهذا ما يسمى بالربط ثنائي الاتجاه اي عندما نحدث بالدالة الخاصة بالخطاف useState فرياكت سوف تفهم انه نريد تحديث هذا العنصر وليس مثل ال DOM حيث اننا ناخذ العنصر كما هو ونحدثه فهنا التحديث يجب علينا ان نخبر رياكت ان هذا العنصر سوف يتم تحديثه. const deleteClick = (index) => { const newDelete = [...test]; newDelete.splice(index, 1); setTest(newDelete); }; ثالثا عندما عملنا mapping للمصفوفة لاحظ اننا اظهرنا العناصر واحدا واحدا ومعه الزر الخاص به لنحدد اي العناصر نريد الحذف. {test.map((item, index) => ( <li key={item}> {item} <button onClick={() => deleteClick(index)}>Delete</button> </li> ))} لاحظ في الزر عملنا دالة سهمية لان رياكت لا تقبل الدوال العادية التي تاخذ معاملات داخل الاحداث هنا فلذلك نعمل دالة سهمية تستدعي الدالة التي عملناها ومررنا لها المعامل.

يوجد العديد من الأسباب وهي التالي: انها تم تطويرها من شركة ميتا المالكة لفيسبوك وانستقرام مما سببت شعبية كبيرة. يوجد مكتبات مكملة لها مثل Redux او اطار عمل Next المبني على React مما يسهل العمل معها. سهولة فهمها مقارنة ب Angular. امكانية العمل بجافاسكربت فقط ولا حاجة لتعلم التايبسكربت مثل Angular كما يمكنك استخدام تايبسكربت ايضا. امكانية عمل تطبيقات كبيرة او صغيرة فلا يفرق حجم المشروع. استخدامها من شركات كبرى مثل Netflıx, Airbnb. وغيرها الكثير من الأسباب.

يمكنك تنزيلها عن طريق الأمر التالي: npm install react-scroll عادة عندما نتعامل مع مكتبات كهذه نذهب إلى صفحة npm الرسمية ونبحث عن المكتبة. يوجد في المكتبة طريقة التحميل وطريقة التعامل مع المكتبة مما يسهل علينا العمل ما يجب علينا هو قراءة التوثيقات لكنها قد تحتاج اللغة الانجليزية.

نعم هذا ما قصدته كما يجب عليك تغيير الروابط فقد كنت تكتبها يدويا localhost مما سبب الخطأ. يمكنك مراجعة تعليقي السابق.

بالإضافة الى التالي: اولا يجب عليك تحميل المكتبة التالية react-router-dom ويجب عليك تصديرها عند استخدام ال Route: import { Link } from 'react-router-dom'; انت تكتب اسم الرابط يدويا مما يسبب خطأ مثلا في ملف Navbar: <li><Link to="/">Home</Link></li> <li><Link to="/about">About</Link></li> <li><Link to="/services">Services</Link></li> <li><Link to="/contact">Contact</Link></li> ولا يمكنك اسم كتابة الموقع يدويا بل ديناميكيا. واستبدل اماكن الروابط كامل على هذا المنهج.

هذا الخطأ يحصل بسبب عدم تعرف نيتلفاي على ال Route. الحل كالتالي: ادخل مجلد: /public بداخله انشئ ملف باسم: _redirects تأكد انك لا تضيف له اي اضافة مثل .txt داخل الملف اكتب الشيفرة التالية: /* /index.html 200 ومن ثم ضف الى Github. وعندما يبني المشروع من جديد سوف يعمل.

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

ان المكتتين خاصتين في الأيقونات وكل واحدة توفر لنا الوقت والجهد بدل من تصميم ايقونات لانفسنا فهناك ايقونات جاهزة تساعدنا وهي عادة الايقونات المتكررة مثل شعارات تطبيقات التواصل الاجتماعل والخ. react-icon مخصصة لرياكت فقط لكن الثانية يمكنك استعمالها في العديد من المشاريع.

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

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

هل تقصد فيجول ستيديو ام فيجول ستيديو كود؟ هل يمكنك ارفاق صور شاشة للذي يحدث معك وهل نزلت Extention بايثون في فيجول ستيديو كود الذي يدعم بايثون أم لا؟