ابنِ تطبيقًا مصغّرًا حقيقيًا: لوحة الأفكار
من صفحة إلى تطبيق
كل ما بنيته حتى الآن كان صفحة — بدت رائعة، وتفاعلت مع النقرات، لكنها نسيت كل شيء لحظة تحديث الصفحة. اليوم يتغير ذلك. أنت تبني أول تطبيق حقيقي لك: بيانات تدخل، بيانات تُعرض، وبيانات تُتذكَّر.
هذا هو سرّ التطبيقات كله بالمناسبة. ثلاث حركات:
- بيانات تدخل — حقل إدخال يكتب فيه المستخدم شيئًا
- بيانات تُعرض — قائمة تتحدّث على الشاشة
- بيانات تُتذكَّر — تخزين، لتبقى موجودة غدًا
عندما تمارس الـ vibe coding، لا تصف الأسلاك — بل تصف التدفق. هذا هو نوع الموجّه الذي يبني مشروع اليوم:
"صندوق أكتب فيه فكرة، وزر يضيفها إلى قائمة بالأسفل، ويجب أن تظل القائمة موجودة عندما أعود غدًا."
تلك الجملة الواحدة تخبر الـ AI بكل شيء: إنه يحتاج إلى حقل إدخال، وزر مع مستمع نقرات، وقائمة يضيف إليها، و localStorage من أجل جزء "الغد". أنت تصف التدفق، والـ AI يتولى الإدخال + القائمة + التخزين.
التطبيق الذي تبنيه هو لوحة أفكار — مكان تلتقط فيه كل لحظة "مهلًا، أستطيع بناء هذا بالـ AI" ستمرّ بك من الآن فصاعدًا. صدّقني، بعد هذه الدورة ستمرّ بك الكثير منها.
التعليمات
أضف <input id="idea-input"> مع placeholder — من هنا تدخل الأفكار
تلميح: جرّب: `<input id="idea-input" type="text" placeholder="I could build..." class="flex-1 bg-white/10 border border-white/20 rounded-xl px-4 py-3 text-sm">`
أضف <button id="add-btn"> بجانب حقل الإدخال — الزناد الذي يضيف فكرة
أضف <ul id="idea-list"> فارغة بالأسفل — هنا تُعرض الأفكار
في وسم <script>، أنصت للنقرات على #add-btn: أنشئ <li> بقيمة حقل الإدخال، وألحقه بالقائمة، ثم فرّغ حقل الإدخال
اجعله يتذكّر: احفظ مصفوفة الأفكار في localStorage("vca-ideas") مع كل إضافة، وحمّل الأفكار المحفوظة واعرضها عند فتح الصفحة
الكود الخاص بك
صف ما تريد بناءه في هذه الخطوة وسأكتب الكود — ثم انقر «تطبيق» لإدراجه في محرّرك. هذه الخطوة: أضف <input id="idea-input"> مع placeholder — من هنا تدخل الأفكار