مسار من الصفر إلى البطل · المرحلة 1 من 4

0%

SKIP TO CONTENT

ابنِ تطبيقًا مصغّرًا حقيقيًا: لوحة الأفكار

beginner~15 د0/5 خطوات

من صفحة إلى تطبيق

كل ما بنيته حتى الآن كان صفحة — بدت رائعة، وتفاعلت مع النقرات، لكنها نسيت كل شيء لحظة تحديث الصفحة. اليوم يتغير ذلك. أنت تبني أول تطبيق حقيقي لك: بيانات تدخل، بيانات تُعرض، وبيانات تُتذكَّر.

هذا هو سرّ التطبيقات كله بالمناسبة. ثلاث حركات:

  1. بيانات تدخل — حقل إدخال يكتب فيه المستخدم شيئًا
  2. بيانات تُعرض — قائمة تتحدّث على الشاشة
  3. بيانات تُتذكَّر — تخزين، لتبقى موجودة غدًا

عندما تمارس الـ vibe coding، لا تصف الأسلاك — بل تصف التدفق. هذا هو نوع الموجّه الذي يبني مشروع اليوم:

"صندوق أكتب فيه فكرة، وزر يضيفها إلى قائمة بالأسفل، ويجب أن تظل القائمة موجودة عندما أعود غدًا."

تلك الجملة الواحدة تخبر الـ AI بكل شيء: إنه يحتاج إلى حقل إدخال، وزر مع مستمع نقرات، وقائمة يضيف إليها، و localStorage من أجل جزء "الغد". أنت تصف التدفق، والـ AI يتولى الإدخال + القائمة + التخزين.

التطبيق الذي تبنيه هو لوحة أفكار — مكان تلتقط فيه كل لحظة "مهلًا، أستطيع بناء هذا بالـ AI" ستمرّ بك من الآن فصاعدًا. صدّقني، بعد هذه الدورة ستمرّ بك الكثير منها.

التعليمات

1

أضف <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">`

2

أضف <button id="add-btn"> بجانب حقل الإدخال — الزناد الذي يضيف فكرة

3

أضف <ul id="idea-list"> فارغة بالأسفل — هنا تُعرض الأفكار

4

في وسم <script>، أنصت للنقرات على #add-btn: أنشئ <li> بقيمة حقل الإدخال، وألحقه بالقائمة، ثم فرّغ حقل الإدخال

5

اجعله يتذكّر: احفظ مصفوفة الأفكار في localStorage("vca-ideas") مع كل إضافة، وحمّل الأفكار المحفوظة واعرضها عند فتح الصفحة

الكود الخاص بك

html
33 أسطر
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

معاينة مباشرة

معاينة مباشرة