Mustafa Suleiman

في مكون CartContext.jsx هنا: return savedCart ? JSON.parse(savedCart) : [] المشكلة في JSON.parse() حيث تقرأ قيمة ليست بصيغة JSON، وتلك القيمة تبدأ بحرف u، وغالبًا هي كلمة undefined. تفقد القيم التي في localStorage وسبب المشكلة في الحفظ، أو قم بمعالجة الأخطاء الواردة أثناء جلب تلك القيمة بإرجاع مصفوفة فارغة: const [cartItems, setCartItems] = useState(() => { try { const savedCart = localStorage.getItem('cartItems'); return savedCart ? JSON.parse(savedCart) : []; } catch (error) { console.error("Failed to parse cart items from localStorage", error); return []; } });

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

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

في ملف main.js في دالة generateAPIResponse قمت هنا: div.classList.remove("load"); بحذف كلاس load بينما الكلاس الذي يجب حذفه هو loading لكونه يقوم بتطبيق تنسيق display: none أي إخفاء العنصر ولا يتم عرض المحادثة في الصفحة. div.classList.remove("loading");

المسار يحتوي على shoping%20store، والرمز %20 هو الترميز الخاص بالمسافة في الروابط، والعديد من أدوات البناء مثل Rollup لا تتعامل بشكل جيد مع المسافات في مسارات الملفات، لذا عليك إعادة تسمية المجلد لإزالة المسافة وضع مكانها شرطة سفلية _ أيضًا قم بحذف مجلد node_modules وملف package-lock.json ثم إعادة تثبيت الحزم: npm i ثم تحديث الحزم: npm update ولو استمر الخطأ قم بتجربة: npm cache clean --force npm i

يجب توضيح ما الذي تحاول تنفيذه للحصول على إجابة مفيدة، حاليًا ما هو المشروع وما هي المشكلة بالضبط، ولو فرت مجلد المشروع أو الملفات لكان أفضل

Render ومثيلاتها Heroku، Vercel، Fly.io تستخدم Ephemeral Filesystem أي نظام ملفات مؤقت، بالتالي لا يمكن الكتابة على القرص بشكل دائم، الملفات المؤقتة تُحذف في أي وقت وليس لديك صلاحيات الكتابة في بعض المجلدات. أبسط حل هو استخدام Memory Storage في Multer حيث لا يتم إنشاء ملف على القرص إطلاقاً، بل يبقى كل شيء فى الـ RAM، يناسب أغلب الاستضافات المجانية. أو الرفع المباشر على cloudinary عن طريق Signed Upload.

لا حاجة إليها بالنسبة لك، وحتى في الشركات لا يتم استخدامها إلا في حالات محددة فقط بسبب التعقيد في عملية تطوير GraphQL، أي لو لديك واجهة خلفية سيتم استخدامها من قبل تطبيقات مختلفة أي منصات مختلفة Web و Mobile و Smart TV، وبيانات معقدة مع علاقات كثيرة، أيضًا فرق كبيرة تعمل على نفس الـ API، وعند الحاجة لتقليل استهلاك البيانات للموبايل مثلاً. لكن في أغلب الأحوال ما ستقوم به هو مشروع بسيط أو متوسط، وستحتاج إلى عمليات CRUD أساسية فقط.

الفكرة أنّ الروابط لها قواعد صارمة، وبعض الأحرف لها معنى خاص في الروابط، وتسمى الأحرف المحجوزة، ومنها: & : للفصل بين متغيرات متعددة في الرابط name=ali&city=riyadh? ? : لبدء جزء الاستعلام في الرابط. / : للفصل بين أجزاء المسار. # : للإشارة إلى جزء معين في الصفحة. (المسافة): غير مسموح بها في الروابط. +, :, @ وغيرها الكثير ستحدث مشكلة لو أردت إرسال نص يحتوي على أحد تلك الأحرف كقيمة في رابط كالتالي: https://test.com/search?q=C++ & Java المتصفح أو الخادم سيفسر الرابط بشكل خاطئ، وسيعتقد أن المتغير q قيمته C++ وأن Java هو متغير آخر بدون اسم، لأن حرف & يفصل بين المتغيرات. لذا encodeURIComponent تعمل على حل المشكلة عن طريق تحويل أو ترميز كل الأحرف الخاصة والغير آمنة إلى صيغة خاصة تسمى الترميز المئوي وهي تبدأ بعلامة % متبوعة برقمين ست عشريين. فنفس الرابط السابق سيبدوا كالتالي بعد الترميز: https://test.com/search?q=C%2B%2B%20%26%20Java وعندما يستقبل الخادم الرابط، سيعرف كيف يفك ترميز القيمة C%2B%2B%20%26%20Java ليعيدها إلى شكلها الأصلي C++ & Java، وبذلك يتم البحث بشكل صحيح.

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

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

المطلوب هو المشاريع العملية الكاملة، بالإضافة إلى التطبيقات العملية كما في مسار التطبيقات العملية باستخدام بايثون، بينما التمارين البسيطة لشرح الأساسيات كالتي في قسم أساسيات بايثون فهي غير مطلوبة. بينما المشاريع العملية الكاملة مثل تطبيق إدارة المهام يتم رفعه على مستودع GitHub منفرد خاص به، وكذلك المشاريع العملية الخاصة بمسار تحليل البيانات. ومسار تعلم الآلة لا يوجد به مشروع عملي بشكل منفرد، بل تم تضمين ذلك في الشرح، بالتالي أرجو إنشاء مجلد للدورة، ثم بداخله إنشاء مجلد لكل مسار، وبداخل كل مجلد تضعين التطبيقات الخاصة بكل درس، ثم رفع ما بداخل المجلد الرئيسي للدورة بالكامل على مستودع GitHub خاص بك. وبالنسبة للإختبار، فسيتم سؤالك عن الـ 4 مسارات فقط، وإختبارك بهم، وآلية الإختبار كالتالي: إجراء محادثة صوتيّة لمدة 30 دقيقة يطرح المدرّب عليك أسئلة متعلّقة بالدورة والأمور التي نفّذتيها خلالها. يحدد لكِ المدرّب مشروعًا مرتبطًا بما قمتي به أثناء الدورة لتنفيذه خلال فترة محددة تتراوح بين أسبوع إلى أسبوعين. إجراء محادثة صوتيّة أخرى لمدّة 30 دقيقة يناقش بها مشروعك وما نفذتيه وتطرح أسئلة خلالها. إن سارت على جميع الخطوات السابقة بشكل صحيح، تحصلين على الشهادة أو يرشدك المدرّب لأماكن القصور ويطلب منك تداركها ثم التواصل معنا من جديد.

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

الأمر بحاجة إلى تفصيل، لكن الصورة العامة هي عن طريق الـ API فهو حلقة الوصل بين الواجهة الأمامية والخلفية، وبين البرامج عامًة، ويتم إنشائه في الواجهة الخلفية Back-End من خلال لغة برمجة خاصة بالواجهة الخلفية مثل PHP أو C# مثلاً، وللعلم جافاسكريبت يتوفر لها بيئة تشغيل للواجهة الخلفية وهي Node.js ثم يتم استخدام مكتبة أو إطار للمساعدة في عملية التطوير مثل Express.js في حالة Node.js ويتم إنشاء نقاط نهاية أو عناوين API بشكل بسيط، وتحديد نوع الطلب الذي سيتم التعامل معه عند إرسال الطلب للـ API، والأنواع هي GET, POST, PUT, PATCH, DELETE. ثم كتابة منطق لمعالجة الطلب المُرسل من قبل الواجهة الأمامية ويتم إرسال رد للواجهة الأمامية، ستجد تفصيل هنا:

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

تقصد نقل سطر الكود إلى مكان آخر؟ قم بالوقوف عند السطر الذي تريده بالضغط بمؤشر الفأرة أو التنقل بالأسهم، ثم اضغط على ALT + سهم للأعلى أو الأسفل لنقل السطر من مكانه

ستحتاج إلى دراسة المسارات التالية فقط إذا أردت أن تصبح مطور Front-End: أساسيات لغة JavaScript أساسيات React.js تطبيق دردشة يشبه WhatsApp أساسيات TypeScript إنشاء تطبيق أسئلة وأجوبة باستخدام Next.js تطبيق تعلم اللغات باستخدام Next.js وتقنيات الذكاء الاصطناعي تطبيقات الويب التقدمية PWA بجانب دراسة المسار الأول من دورة تطوير واجهات المستخدم، فهو متاح بشكل مجاني لك.

كلاهما سيعمل، الأفضل استخدام async await ومعالجة الأخطاء من خلال try-catch

كلاهما يؤديان نفس الغرض، لكن من خلال خطاف useEffect فستعمل دالة fetch تلقائيًا عند تحميل المكون بسبب مصفوفة الإعتماديات الفارغة [] بالتالي سيتم جلب البيانات في البداية في حال ذلك كان مطلوب، لكن يتم استخدام then وهي طريقة قديمة، الأفضل async-await وأيضًا لا يتم معالجة الأخطاء من خلال try-catch أما دالة async/await فهي مستقلة ولا تعمل إلا عند استدعائها بنفسك مثلاً عند النقر على زر، وتتبع النهج الحديث في التعامل مع العمليات الغير متزامنة وتعتمد على try-catch. وللعلم هناك خطأ في الكود حيث هنا const data = res.json() فـ res.json() هي عملية غير متزامنة وتعيد Promise، يجب أن تنتظرها باستخدام await لتضمن الحصول على البيانات الفعلية وليس الـ Promise نفسه. والحل الأفضل هو الجمع بين الطريقتين كالتالي: const fetchCategories = async () => { try { const res = await fetch('api/categories'); const data = await res.json(); setCategories(data); return data; } catch (error) { console.error('خطأ في جلب التصنيفات:', error); setError(error.message); return null; } finally { setLoading(false); } }; useEffect(() => { setLoading(true); fetchCategories(); }, []);

ذلك خطاف من مكتبة react-router-dom يوفر معلومات كاملة عن الرابط الحالي الذي يتصفحه المستخدم داخل تطبيقك، وفي الواقع العملي ستستخدمه في معرفة الصفحات التي يزورها المستخدمون لإرسال تلك المعلومات إلى خدمات مثل Google Analytics مثلاً. import { useLocation } from 'react-router-dom'; import { useEffect } from 'react'; import { analytics } from './analytics-service'; function AnalyticsTracker() { const location = useLocation(); useEffect(() => { console.log(`المستخدم زار الصفحة: ${location.pathname}`); analytics.trackPageView(location.pathname + location.search); }, [location.pathname]); return null; } أو في حال لديك صفحة لعرض المنتجات، وتريد السماح للمستخدم بفلترة النتائج حسب الفئة والسعر، فستظهر تلك الفلاتر في الرابط، أي كالتالي (/products?category=laptops&sort=price_asc) وبناءًا عليها تقوم بطلب البيانات من قاعدة البيانات عن طريق توظيف location.search مع URLSearchParams المتوفر في المتصفح كـ API. import { useLocation } from 'react-router-dom'; import { useState, useEffect } from 'react'; function ProductListPage() { const location = useLocation(); const [products, setProducts] = useState([]); useEffect(() => { const queryParams = new URLSearchParams(location.search); const category = queryParams.get('category'); const sortBy = queryParams.get('sort'); console.log(`جلب المنتجات من الفئة: ${category}, مرتبة حسب: ${sortBy}`); // هنا تقوم بطلب البيانات من الـ API بناءً على هذه المتغيرات fetchAPI(`/api/products?category=${category}&sort=${sortBy}`) .then(data => setProducts(data)); }, [location.search]); / return ( <div> </div> ); } أو لو لديك صفحة قائمة المنتجات، وعندما يضغط المستخدم على منتج، تريد إرسال بيانات هذا المنتج (الاسم، السعر، الصورة) إلى صفحة تفاصيل المنتج لتظهر فوراً بينما يتم تحميل باقي التفاصيل، فستعتمد على location.state: import { Link } from 'react-router-dom'; function ProductItem({ product }) { return ( // نستخدم الخاصية "state" في مكون Link <Link to={`/products/${product.id}`} state={{ productData: product }}> <div> <h3>{product.name}</h3> <p>{product.price}</p> </div> </Link> ); } ثم استقبال البيانات في صفحة تفاصيل المنتج: import { useLocation, useParams } from 'react-router-dom'; import { useState, useEffect } from 'react'; function ProductDetailPage() { const location = useLocation(); const { id } = useParams(); const initialData = location.state?.productData; const [product, setProduct] = useState(initialData); useEffect(() => { if (!product) { console.log("البيانات غير موجودة في state، جاري طلبها من الـ API..."); fetchAPI(`/api/products/${id}`).then(data => setProduct(data)); } }, [id, product]); if (!product) { return <div>جاري التحميل...</div>; } return ( <div> <h1>{product.name}</h1> <p>السعر: {product.price}</p> </div> ); } كذلك لو لديك صفحة إعدادات بها عدة تبويبات مختلفة Profile, Account, Notifications وتريد أن يكون الرابط هو الذي يحدد أي قسم يتم عرضه، بمعنى أي قسم يجب أن يكون نشطًا بناءًا على الرابط؟ فستحتاج إلى استخدام location.pathname أو location.hash.

دراسة المسارات التي تسبقه وهي: أساسيات لغة JavaScript أساسيات React.js أساسيات Node.js تطوير تطبيق جوال باستخدام React Native ويمكنك تخطي مسار React Native حاليًا وتجاهل الجزء الخاص بتطبيق الهاتف في مسار تطبيق دردشة يشبه WhatsApp، وذلك في حال كان تركيزك الحالي منصب على تعلم جافاسكريبت وReact.

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

ذلك طبيعي جدًا، ففي حال لم تقم بإضافة أية تعليقات على الأجزاء الرئيسية من الكود لتوضيح المنطق الخاص بتلك الأجزاء، لتصبح خريطة لك لاستيعاب ما يحدث عند العودة فيما بعد، أو لم تقم بتنظيم ملفات المشروع من خلال هيكل مجلدات مُنظم، أو طريقة كتابة الكود غير مُنظمة والتسميات غير واضحة، أو قمت بإنشاء المشروع من خلال إتباع شرح دونّ استيعاب ما تقوم به. عامًة كلما طالت المدة، زاد النسيان، لذا عليك بالتعود على كتابة التعليقات: # هذه الدالة تحسب متوسط المبيعات الشهرية function calculateMonthlyAverage() { # نجمع المبيعات من قاعدة البيانات # ثم نقسم على عدد الأشهر } وعند الإنتهاء من المشروع اكتب ملف README مفصل، ووضح القرارات التقنية المهمة واشرح كيفية تشغيل المشروع. والتسميات الواضحة: //بدلاً من function calc(x, y) { return x * y * 0.15; } //اكتب function calculateTaxAmount(price, quantity) { const TAX_RATE = 0.15; return price * quantity * TAX_RATE; }

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

Codewars من المواقع السهلة والتي بها مساءل مناسبة للمبتدئين بسبب نظام المستويات الذي يسمى Katas حيث تبدأ من أسهل مستوى 8 kyu وتتدرج في الصعوبة كلما حللت مسائل أكثر، وبالتالي لن تواجه مشاكل صعبة جدًا في البداية. وذو واجهة بسيطة، فكل ما عليك هو قراءة المشكلة، كتابة الحل في المحرر الموجود بالموقع، ثم الضغط على Test لتجربة حلك و Attempt لتقديمه. وبعد أن تحل أي مشكلة بنجاح، يتيح لك رؤية حلول المبرمجين الآخرين. وستجد مواقع أخرى هنا: