مشروع: تطبيق مهام (To-Do) بالحفظ بالمتصفح
أسبوع لأسبوعين من الشغل بجافاسكريبت خالص — بلا مكتبات وبلا نسخ. هي القطعة اللي بتنقلك بعين العميل (وبعين نفسك) من «شب بيرتب صفحات» لـ«مبرمج بيبني تطبيقات».
لأنه سؤال المقابلات الكلاسيكي — وفيه كل عضلات JavaScript
تطبيق المهام مو صدفة إنه أشهر مشروع مبتدئين بالعالم: بقطعة صغيرة وحدة بيجمع كل مفاهيم JavaScript الأساسية وهي شغالة سوا — التعامل مع الصفحة (DOM)، الأحداث، المصفوفات والكائنات، والتخزين بالمتصفح. إذا بنيته بإيدك وفهمته سطراً سطراً، فأنت عملياً اجتزت امتحان المرحلة الأصعب بالمسار كله.
وللعميل أو الشركة، هالمشروع بيثبت شي مختلف تماماً عن صفحة الهبوط: إنك بتعرف تبني منطقاً — بيانات بتتغير، وواجهة بتتحدث لحالها، وحالة بتنحفظ وبترجع. أي شغلة برمجة حقيقية رح تشتغلها لاحقاً (سلة مشتريات، نموذج حجز، لوحة تحكم) هي بجوهرها نفس العضلات: أضف، عدّل، احذف، خزّن.
والأهم من كل هاد: هالمشروع بيكشفك لنفسك. إذا قدرت تبنيه بلا نسخ حلول، فتعلمك حقيقي. وإذا علقت بكل خطوة، فهاد مو فشل — هاد تشخيص دقيق إنك كنت «تتفرج» على دروس JavaScript بدل ما تكتبها، والعلاج معروف: ارجع خطوة واكتب بإيدك.
الخطوات التنفيذية الكاملة — 8 خطوات بأسبوع لأسبوعين
القاعدة الذهبية بكل خطوة: اكتب، كسّر، صلّح. ممنوع نسخ حل جاهز — العلقة نفسها هي التمرين.
- الخطوة 1 — حدد المواصفات على ورقة (ساعة): اكتب بالضبط شو بيعمل التطبيق: المستخدم بيكتب مهمة وبيضيفها، بيعلّمها منجزة فبينشطب النص، بيحذفها، وكل شي بيضل محفوظاً بعد إغلاق المتصفح. أضف عدّاداً بسيطاً «X مهام متبقية». هاي «وثيقة المتطلبات» تبعك — وكل شغل حقيقي مع عميل بيبلّش بوثيقة مثلها.
- الخطوة 2 — ابنِ الواجهة الثابتة (نص يوم): HTML وCSS بسيطان: حقل إدخال، زر إضافة، وقائمة فاضية. لا تضيّع يومين على الشكل — التصميم هون خادم للوظيفة. حط مثالين مهام «وهميين» بالـHTML مؤقتاً لتنسق شكلهما، وبعدين احذفهما: من هلق وطالع، القائمة بيبنيها الكود.
- الخطوة 3 — مثّل المهام بمصفوفة كائنات (نص يوم): قبل أي زر، قرر شكل البيانات: مصفوفة، كل عنصر فيها كائن بمعرّف ونص وحالة إنجاز. هاد أهم قرار بالمشروع كله: البيانات أولاً والواجهة بتتبعها — مبدأ «مصدر الحقيقة الواحد» اللي رح تلاقيه لاحقاً بقلب React نفسها.
- الخطوة 4 — اكتب دالة العرض المركزية (يوم): دالة وحدة بتاخد المصفوفة وبتعيد بناء القائمة بالصفحة من الصفر: بتفضي القائمة، بتلف على العناصر، وبتنشئ لكل مهمة عنصراً بنصها وزرّي «منجز» و«حذف». جرّبها بتعبئة المصفوفة يدوياً من الـConsole قبل ما يكون في أي زر — إذا العرض مظبوط، الباقي بيصير سهلاً بشكل مفاجئ.
- الخطوة 5 — فعّل الإضافة والتعليم والحذف (يومان–ثلاثة): اربط الأحداث: زر الإضافة بيدفع كائناً جديداً بالمصفوفة وبينادي دالة العرض؛ «منجز» بيقلب حالة العنصر بالمصفوفة وبينادي العرض؛ «حذف» بيشيل العنصر من المصفوفة وبينادي العرض. لاحظ النمط الثابت: عدّل البيانات ثم أعد العرض — ما في ولا حالة بتعدل فيها الصفحة مباشرة. هالانضباط هو الفرق بين كود بيكبر بسلام وكود بيتحول لعقدة.
- الخطوة 6 — أضف الحفظ بـlocalStorage (يوم): بعد كل تعديل عالمصفوفة خزّنها بالمتصفح (بعد تحويلها لنص JSON)، وعند فتح الصفحة استرجعها إذا موجودة وانادِ دالة العرض. سكّر المتصفح كلياً وافتحه — إذا مهامك رجعت مكانها، فهمت دورة حياة البيانات كاملة: ذاكرة ← تخزين ← ذاكرة.
- الخطوة 7 — عالج الحالات الشاذة (نص يوم): شو بيصير لو ضغط المستخدم «إضافة» والحقل فاضي؟ لو كتب مسافات بس؟ لو كانت بيانات التخزين تالفة؟ التطبيق لازم يرفض بأدب وما ينهار — افتح الـConsole وتأكد إنها نظيفة من الأخطاء بكل السيناريوهات. الفرق بين تمرين ومنتج هو بالضبط معالجة هالحالات.
- الخطوة 8 — انشر، وثّق، وأعد البناء (يوم): ارفعه على GitHub بـREADME فيه لقطة شاشة ورابط GitHub Pages حياً. وبعدين التمرين الأقسى والأفيد: سكّر الكود كلياً وأعد بناء المشروع من الصفر بورقة بيضاء. المرة الأولى بتاخد أسبوعاً، الإعادة بتاخد ساعات — وهالفرق هو الدليل القاطع إن المعرفة صارت بإيدك مو بذاكرتك القصيرة.
معايير التقييم الذاتي — 7 بنود قبل ما تعتبره منجزاً
- العمليات الثلاث شغالة بلا أخطاء. إضافة وتعليم «منجز» وحذف — جرّب كل وحدة عشر مرات متتالية وبترتيبات مختلفة، والـConsole نظيفة تماماً من الأخطاء الحمراء.
- المهام بتضل محفوظة بعد إغلاق المتصفح. مو تحديث الصفحة بس — إغلاق كامل وإعادة فتح. حالة «منجز» نفسها لازم تنحفظ، مو بس نص المهمة.
- التطبيق بيرفض الإدخال الفاضي بأدب. حقل فاضي أو مسافات ما بيضيفوا مهمة وما بيكسروا شي — والأفضل: رسالة صغيرة بتوضح للمستخدم شو صار.
- البيانات مصدر الحقيقة الوحيد. كل تعديل بيمر عالمصفوفة أولاً وبعدها إعادة عرض — إذا لقيت مكاناً بتعدل فيه الصفحة مباشرة بلا تحديث المصفوفة، فهالبند ساقط.
- بتقدر تشرح كل دالة بجملة وحدة. «هي بتعمل كذا» — بلا تلعثم. الشرح بصوت عالٍ أصدق كاشف للفهم الوهمي.
- أعدت بناءه من الصفر بلا رجوع للكود القديم. هاد المعيار الفاصل: إذا الإعادة أخدت أقل من ثلث وقت المرة الأولى، انتقل للمشروع الثالث وأنت مرتاح.
- منشور برابط حي مع README. رابط GitHub Pages بيشتغل من أي جهاز، والمستودع فيه وصف ولقطة شاشة — جاهز يندرج بمعرض أعمالك من هلق.
كيف تعرضه بمعرض أعمالك؟
الصياغة: «تطبيق ويب لإدارة المهام بجافاسكريبت خالص: إضافة وإنجاز وحذف مع حفظ تلقائي بالمتصفح — مبني بلا أي مكتبة خارجية». عبارة «بلا أي مكتبة» مو تواضع، هي نقطة بيع: بتقول للعميل والشركة إن الأساس عندك متين، مو مستعار.
اللقطات: صورة للتطبيق فيه 4–5 مهام حقيقية متنوعة (منها منجزة ومنها لا) — ما تصوّره فاضياً. وإذا بتقدر، سجّل مقطع شاشة 20 ثانية: إضافة مهمة، تعليمها، إغلاق الصفحة وفتحها والمهام راجعة — هالثواني بتشرح القيمة أكثر من فقرة كاملة.
قصة القطعة: احكِ قرار البيانات: «خزّنت المهام بمصفوفة كائنات وخليت الواجهة تنبني منها بالكامل — فصار التعديل والحذف والحفظ نفس النمط المتكرر». جملة مثل هاي بتفرقك فوراً عن ألف مبتدئ نسخوا نفس التطبيق من يوتيوب. طريقة ترتيب هالقطع كلها بمعرض واحد مشروحة بدليل بورتفوليو بلا خبرة.
الأخطاء القاتلة بهالمشروع
النسخ من يوتيوب أو من أداة ذكاء اصطناعي
في مليون فيديو «ابنِ To-Do بنص ساعة». إذا تابعت واحداً وأنت عم تكتب وراه، ما بنيت شي — رتّبت. استخدم الدروس لفهم مفهوم علقت فيه، وارجع اكتب حلّك بإيدك.
الواجهة قبل المنطق
ثلاثة أيام على ألوان الأزرار وظلالها قبل ما تنكتب أول دالة. عكس الترتيب الصحيح تماماً: منطق شغال بواجهة بسيطة بيتباع، وواجهة حلوة بلا منطق بتتفرج.
التعامل مع الصفحة مباشرة بلا مصفوفة
ممكن تخلّص المشروع بإضافة وحذف عناصر HTML مباشرة — وبيشتغل! بس بتكون خسرت الدرس الأهم (البيانات أولاً)، والحفظ بـlocalStorage رح يصير عذاباً بدل سطرين.
الاستسلام عند أول علقة والقفز لـReact
«يمكن بالمكتبات أسهل» — لأ. React بتفترض إنك متقن هالمفاهيم بالضبط. العلقة بهالمشروع استثمار، والهروب منها تأجيل بفائدة مركّبة.
سؤالان قبل ما تبلّش
قديش لازم ياخد وقت فعلياً؟
بمعدل 2–3 ساعات يومياً: أسبوع إذا مرحلة JavaScript عندك متينة، وأسبوعان إذا لسا طرية — والاثنان طبيعيان تماماً. الإشارة الوحيدة المقلقة هي إذا مرّت ثلاثة أسابيع وأنت واقف بنفس المكان: عندها المشكلة مو بالمشروع، بل بفجوة بالأساسيات — ارجع لتمارين المرحلة الثانية بخارطة المسار أسبوعاً وبعدين عاود الكرّة.
في داعي أضيف ميزات زيادة (تعديل المهمة، فلاتر، وضع ليلي)؟
بعد ما تخلص الأساس وتنجح بكل المعايير — إضافة ميزة وحدة زيادة تمرين ممتاز (تعديل نص المهمة هي الأفيد). بس انتبه للفخ: «رح ضيف بس هالميزة» ممكن تمتد شهراً. الأولوية بعد الأساس هي المشروع الثالث اللي بيجمع شغلك كله بمعرض حي، مو تضخيم هالقطعة بلا نهاية.
خلصته؟ هي خطوتك الجاية
صار عندك قطعتان: صفحة الهبوط اللي بتثبت إنك بتبني واجهات، وتطبيق المهام اللي بيثبت إنك بتبرمج. ضل ناقصك البيت اللي بيجمعهم: موقعك الشخصي — معرض أعمالك الحي. وبالتوازي، خذ فكرة عن سوق الشغل من دليل أول عميل فريلانس لتعرف لوين ماشي.