أول كود بالـ AI: من الصفر لأول تطبيق شغال على جهازك في ساعتين

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

الحقيقة البسيطة: الـ Terminal مش لغز. اعتبره مجرد شات دردشة بينك وبين جهازك — بتكتبله أمر محدد بالإنجليزية، والجهاز بيرد عليك بنتيجة أو رسالة تأكيد. والـ AI هنا هو المترجم اللي بيقعد جنبك ويكتبلك الأوامر ويشرحلك كل سطر.

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

الأدوات الـ 3 اللي هتحتاجها على جهازك

قبل ما تبدأ، محتاج 3 حاجات بس — وكلهم مجانيين ومتاحين لكل الأنظمة:

1. Node.js: ده المحرك اللي بيشغل تطبيقات الجافاسكريبت والـ Web على جهازك. بتنزله من الموقع الرسمي (اختر نسخة LTS المستقرة).
2. محرر كود (VS Code أو Cursor): البرنامج اللي بتفتح بيه ملفات المشروع وتشوف الكود منظم.
3. أداة AI للبرمجة ([Claude](/community/models) Code أو Cursor Composer): الشريك الذكي اللي هيقود البناء الفعلي معاك.

الخطوة 1: تجهيز أول مشروع بضغطة واحدة

افتح الـ Terminal واكتب الأمر ده:

npx create-next-app@latest my-first-vibe-app

الـ Terminal هيسألك شوية أسئلة سريعة:

• استخدام TypeScript؟ نعم (بيساعد الـ AI يكتشف الأخطاء قبل ما تشغل الكود).
• استخدام Tailwind CSS؟ نعم (لتصميم سريع وجميل).
• استخدام App Router؟ نعم (المعيار الحديث في Next.js).

بعد دقيقة واحدة، هتلاقي فولدر كامل اتعمل فيه كل أساسيات موقع الويب الحديث.

ادخل جوه المشروع وافتحه:

cd my-first-vibe-app
npm run dev

افتح متصفحك على الرابط: http://localhost:3000. مبروك! عندك دلوقتي موقع كامل شغال محلياً على جهازك.

الخطوة 2: القاعدة الذهبية لتوجيه الـ AI

أكبر غلطة بيقع فيها المبتدئ هي إنه يطلب التطبيق بالكامل في أمر واحد:

• غلط: "اعملي منصة كورسات كاملة باشتراكات ودفع وتسجيل دخول وقاعدة بيانات."
• النتيجة: كود متلخبط فيه 50 خطأ ومش هتعرف مين بيكلم مين.

الطريقة الصح هي البناء بالمكونات الفردية (Component by Component):

• صح: "أنا شغال على صفحة هبوط لتطبيق تنظيم مهام. ساعدني أبني Hero Section نظيف فيه عنوان عريض، فقرة شرح صغيرة، وزرار أخضر بيفتح نافذة تسجيل تجربة مجانية. استخدم Tailwind CSS."

الخطوة 3: التعامل مع رسائل الخطأ الحمرا (من غير رعب)

لما تشوف شاشة حمرا فيها كلمة Error أو Failed to compile، افتكر القاعدة دي:

رسالة الخطأ مش إهانة — دي خريطة كنز بتقولك بالظبط إيه اللي محتاج يتصلح وفي أنهي سطر.

كل اللي عليك تعمله:

1. انسخ أول 3 سطور من رسالة الخطأ.
2. الصقهم في شات الـ AI واكتب: "واجهت الخطأ ده وأنا بشغل الكود، اشرحلي سببه في سطر واحد واديني كود الإصلاح المحدد."
3. راجع التعديل واعمل Save للملف. هتلاقي الصفحة عملت تحديث تلقائي (Hot Reload) والمشكلة اتحلت.

الخطوة 4: التحدي العملي الأسبوع ده

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