اللغة
دليل المتابعة
من الفكرة إلى موقع ويب:
البرمجة بالذكاء الاصطناعي للمبتدئين
أعدّ OpenCode وNeuralwatt وGitHub وVercel قبل أن نبدأ البناء. أضف هذه الصفحة إلى المفضّلة للوصول السريع.
تثبيت OpenCode (سطح المكتب)
نستخدم OpenCode — وكيل برمجة بالذكاء الاصطناعي مفتوح المصدر يعمل في الطرفية وتطبيق سطح المكتب وإضافات بيئات التطوير. لهذه الورشة، ثبّت تطبيق سطح المكتب (إصدار تجريبي).
macOS
- افتح opencode.ai/download
- نزّل الإصدار المناسب لمعالجك (Apple Silicon أو Intel)
- افتح المثبّت واسحب OpenCode إلى مجلد التطبيقات
- عند أول تشغيل، اسمح للتطبيق إذا طلب macOS ذلك
Windows
- من صفحة التنزيل، احصل على Windows (x64)
- شغّل المثبّت وأكمل الإعداد
- شغّل OpenCode من قائمة ابدأ
Linux
- نزّل .deb أو .rpm من صفحة التنزيل
- ثبّته بمدير الحزم لديك، ثم افتح OpenCode
اختياري: يتوفر OpenCode أيضاً كتطبيق طرفية (curl -fsSL https://opencode.ai/install | bash). تطبيق سطح المكتب يكفي لليوم.
الحصول على مفتاح Neuralwatt API
Neuralwatt Cloud يوفّر واجهة برمجة تطبيقات متوافقة مع OpenAI لنماذج البرمجة. التسجيل مجاني — الحسابات الجديدة تحصل على رصيد تجريبي بقيمة 5 دولارات، صالح لمدة 30 يوماً.
إنشاء مفتاح API
- اذهب إلى portal.neuralwatt.com/auth/register وأنشئ حسابك
- سجّل الدخول إلى البوابة وافتح Dashboard → API Keys
- انقر Create Key، وسمّه (مثلاً
workshop)
- انسخ المفتاح واحفظه في مكان آمن — لن ترى المفتاح كاملاً مرة أخرى
الرصيد التجريبي للورشة
رصيدك التجريبي البالغ 5 دولارات يستمر 30 يوماً من تاريخ التسجيل — يكفي لتمارين اليوم والممارسة اللاحقة. يستخدم Neuralwatt تسعيراً يعتمد على الطاقة؛ راجع استخدامك في لوحة تحكم البوابة إذا أردت معرفة ما تبقّى.
أبقِ مفتاحك سرياً. لا تلصقه في الدردشة أو الشرائح أو GitHub. عامله ككلمة مرور.
ربط OpenCode بـ Neuralwatt
بعد تثبيت OpenCode والحصول على مفتاح Neuralwatt API، اربطهما في تطبيق سطح المكتب — لا حاجة لملفات إعداد أو متغيرات بيئة.
في OpenCode Desktop
- افتح OpenCode وانقر أيقونة الإعدادات (الترس) في الشريط الجانبي
- تحت Server، انقر Providers
- ابحث عن Neuralwatt وانقر + بجانبه
- الصق مفتاح API وانقر Continue
- انقر اسم النموذج أسفل مربع الدردشة (بجانب Build)، وابحث تحت Neuralwatt، واختر Kimi K2.6 — هذا النموذج الذي سنستخدمه في ورشة اليوم
استخدم Kimi K2.6 لجميع التمارين اليوم حتى يتبع الجميع نفس الإعداد. يمكنك تجربة نماذج Neuralwatt الأخرى لاحقاً من منتقي النماذج.
المزيد من التفاصيل: دليل Neuralwatt × OpenCode وتوثيق مزوّدي OpenCode.
إنشاء حساب GitHub
GitHub هو المكان الذي سنخزّن فيه الموقع الذي تبنيه اليوم. حساب مجاني يكفي — سنرفع مشروعك هناك أثناء الورشة حتى تحتفظ به وتشاركه.
التسجيل
- اذهب إلى github.com/signup
- أدخل بريدك الإلكتروني، وأنشئ كلمة مرور، واختر اسم مستخدم (يصبح جزءاً من رابط ملفك العام)
- أكمل لغز التحقق أو الرمز الذي يرسله GitHub إلى بريدك
- أجب على أسئلة الإعداد القصيرة (يمكنك تخطي الخطوات الاختيارية مثل اختيار الخطة — المجاني يكفي)
- تحقق من بريدك الإلكتروني إذا طلب GitHub التأكيد من صندوق الوارد
لماذا نحتاج GitHub اليوم
مشروعك النهائي سيعيش في مستودع GitHub (مجلد مشروع في السحابة). هذا يتيح لك حفظ عملك وفتحه على جهاز آخر ونشره على Vercel.
لديك حساب بالفعل؟ سجّل الدخول على github.com/login وتأكد أنك تعرف اسم المستخدم وكلمة المرور (أو طريقة الدخول عبر Google/Apple).
إنشاء حساب Vercel
Vercel ينشر موقعك على الإنترنت ويعطيك رابطاً قابلاً للمشاركة (مثلاً your-site.vercel.app).
الخطة المجانية Hobby تكفي لموقع اليوم ذي الصفحة الواحدة.
التسجيل (موصى به: استخدم GitHub)
- اذهب إلى vercel.com/signup
- انقر Continue with GitHub — هذا أسهل مسار لأنك أنشأت حساب GitHub في القسم 4
- اسمح لـ Vercel عندما يطلب GitHub ذلك (يحتاج Vercel إذناً لقراءة مستودعاتك والنشر منها)
- أكمل إعداد Vercel القصير (اسم الفريق يمكن أن يكون اسمك؛ الخطة المجانية محددة افتراضياً)
- يجب أن تصل إلى لوحة تحكم Vercel — أنت جاهز؛ سننشر موقعك معاً أثناء الورشة
ما يحدث أثناء الورشة
بعد بناء موقعك بـ OpenCode، سنضعه على GitHub ونستورد ذلك المستودع إلى Vercel. سيبني Vercel الموقع ويستضيفه — ستحصل على رابط مباشر لفتحه على هاتفك ومشاركته مع الآخرين.
لا تلصق الأسرار. مفتاح Neuralwatt API يبقى في OpenCode فقط — لا ترفع مفاتيح API إلى GitHub ولا تضفها إلى ملفات موقعك.
كتابة الموجّهات
يعمل الذكاء الاصطناعي بأفضل حال عندما تكتب كأنك تشرح لزميل مساعد: هدف واضح، سياق كافٍ، وطلب واحد في كل مرة.
ما الذي يجعل الموجّه جيداً
- قل ما تريد — مثلاً «موقع معرض أعمال بصفحة واحدة في
index.html» أو «موقع مطعم مع قائمة وساعات العمل». - حدّد القيود — «استخدم HTML وCSS فقط، بدون أطر عمل» أو «ملف واحد فقط».
- أعطِ تفاصيلك الحقيقية — استبدل
[الأقواس]باسمك وعناصر القائمة والألوان والنصوص. - اطلب خطوات صغيرة — مسودة أولاً، ثم المحتوى، ثم التصميم، ثم إصلاحات الجوال.
- شارك ما تراه — إذا حدث خطأ، الصق رسالة الخطأ أو صف ما يبدو خاطئاً على شاشتك.
عبارات يمكنك إعادة استخدامها
- «اسألني أسئلة قبل أن تكتب أي كود.»
- «أعطني خطة أولاً، ثم انتظر موافقتي.»
- «أجرِ أصغر تغيير مطلوب — لا تعيد كتابة الصفحة كاملة.»
- «اشرح ما غيّرته بعبارات بسيطة.»
- «هذا هو الخطأ. حدّد السبب قبل الإصلاح.»
ضعيف: «حسّن موقعي.»
قوي: «حسّن قسم البطل في index.html: عنوان أكبر، مسافات أكثر، أبقِ نصي الحالي، مناسب للجوال.»
نصيحة: للميزات الأكبر، انتقل إلى وضع التخطيط (مفتاح Tab)، راجع الخطة، ثم عد إلى وضع Build وقل «تابع». أنت تبقى مسيطراً — اقرأ الإجابة، اختبر في المتصفح، ثم أرسل الموجّه التالي.
أمثلة على الموجّهات
اختر مساراً واحداً أدناه. انسخ كل موجّه إلى OpenCode بالترتيب.
استبدل أي شيء بين [أقواس] بتفاصيلك الخاصة قبل الإرسال.
المسار أ — معرض أعمال شخصي
الأفضل للطلاب والمستقلين ومن يغيّرون مسارهم المهني لعرض أعمالهم.
الخطوة 1 — المسودة الأولى
أنشئ موقع معرض أعمال بصفحة واحدة في ملف واحد: index.html. استخدم HTML وCSS فقط (بدون أطر عمل). أضف هذه الأقسام: - قسم بطل باسمي [اسمك]، وشعار قصير [مثلاً "مطوّر ويب طموح"]، وصورة شخصية ودية كعنصر نائب - عني (3–4 جمل باستخدام هذه المعلومات: [الصق سيرة قصيرة]) - المهارات (6–8 مهارات كوسوم أو قائمة بسيطة: [مثلاً التواصل، خدمة العملاء، Canva]) - المشاريع (2–3 بطاقات مشروع بعنوان ووصف بجملة واحدة ورابط "عرض" كعنصر نائب) - التواصل (البريد [your@email.com] وروابط [LinkedIn / GitHub / اختياري]) الأسلوب: نظيف وعصري، مساحات بيضاء كثيرة، خطوط سهلة القراءة، مناسب للجوال. لوحة ألوان هادئة بلون تمييز واحد.
الخطوة 2 — اجعله خاصاً بك
حدّث index.html بمحتواي الحقيقي: - الاسم: [اسمك] - الشعار: [شعارك] - عني: [فقرة سيرتك] - المهارات: [اذكر مهاراتك] - المشاريع: [عنوان المشروع 1 + وصفه]، [عنوان المشروع 2 + وصفه] - البريد: [your@email.com] أبقِ نفس التخطيط. حسّن الطباعة بحيث تبرز العناوين ويسهل قراءة النص.
الخطوة 3 — صقل التصميم
حسّن التصميم البصري لـ index.html دون تغيير نصي: - أضف تأثيرات hover خفيفة على الأزرار وبطاقات المشاريع - استخدم نظام مسافات متسق (padding/margins) - أضف شريط تنقل بسيطاً في الأعلى يربط بكل قسم (عني، المهارات، المشاريع، التواصل) - اجعل قسم البطل مريحاً وليس مزدحماً أخبرني بما غيّرته بلغة بسيطة.
الخطوة 4 — فحص الجوال
اجعل index.html يبدو رائعاً على الهواتف: - رتّب الأقسام عمودياً مع padding مريح - تأكد أن النص 16px على الأقل على الجوال - اجعل أهداف اللمس (الروابط والأزرار) سهلة الضغط - تأكد أن لا شيء يتجاوز العرض أفقياً اشرح أي CSS أضفته للجوال.
الخطوة 5 — إصلاح وتكرار (في أي وقت)
قسم [اسم القسم] لا يبدو صحيحاً على شاشتي. [صف ما تراه، مثلاً "النص صغير جداً" أو "البطاقات تتداخل"]. أجرِ أصغر تغيير مطلوب لإصلاحه. لا تعيد كتابة الصفحة كاملة.
المسار ب — صفحة هبوط لعمل تجاري
الأفضل لأصحاب الأعمال الصغيرة الذين يريدون أن يجد العملاء الساعات والقائمة وكيفية الزيارة أو الطلب.
لست مطعماً؟ أبقِ نفس الخطوات — استبدل القائمة بالخدمات/المنتجات والساعات بطريقة وصول العملاء إليك.
الخطوة 1 — المسودة الأولى
أنشئ موقع مطعم بصفحة واحدة في ملف واحد: index.html. استخدم HTML وCSS فقط (بدون أطر عمل). تفاصيل المطعم: - الاسم: [اسم المطعم] - الشعار: [مثلاً "معكرونة طازجة وبيتزا على الحطب في وسط المدينة"] - المطبخ: [مثلاً إيطالي، فلبيني، مقهى] - العنوان: [الشارع، المدينة] - الهاتف: [رقم الهاتف] - الساعات: [مثلاً الإثنين–السبت 11ص–9م، الأحد 12م–8م] أضف هذه الأقسام: 1. بطل باسم المطعم والشعار وزرين: "عرض القائمة" و"اتصال / حجز" 2. عن المطعم (2–3 جمل دافئة عن المطعم) 3. أبرز القائمة (4–6 أطباق شائعة بأوصاف قصيرة وأسعار بـ [العملة]) 4. الساعات والموقع (العنوان، الساعات، عنصر نائب لخريطة أو رابط "الاتجاهات" إلى Google Maps) 5. التواصل ووسائل التواصل (الهاتف، البريد اختياري، عناصر نائبة لإنستغرام/فيسبوك) الأسلوب: شهي وموثوق — صور طعام جيدة كعناصر نائبة، طباعة واضحة، يعمل على الجوال.
الخطوة 2 — القائمة والتفاصيل الحقيقية
حدّث index.html بمعلوماتنا الفعلية: المطعم: [اسم المطعم] عن المطعم: [2–3 جمل عن قصتك أو الشيف أو التخصص] عناصر القائمة (استخدمها كما هي): 1. [الطبق] — [السعر] — [وصف بسطر واحد] 2. [الطبق] — [السعر] — [الوصف] 3. [الطبق] — [السعر] — [الوصف] 4. [الطبق] — [السعر] — [الوصف] 5. [الطبق] — [السعر] — [الوصف] 6. [الطبق] — [السعر] — [الوصف] الساعات: [ساعاتك] العنوان: [العنوان الكامل] الهاتف: [الهاتف] ملاحظة الحجز: [مثلاً "نرحب بالزوار بدون حجز" أو "احجز بالهاتف"] أبقِ صفحة واحدة. اجعل الأسعار سهلة المسح.
الخطوة 3 — ساعد العملاء على اتخاذ إجراء
حسّن index.html حتى يعرف العملاء ما يفعلونه بعد ذلك: - "عرض القائمة" يتمرّر بسلاسة إلى قسم القائمة - "اتصال / حجز" يستخدم tel:[الهاتف] حتى يضغط مستخدمو الجوال للاتصال - أضف تنقلاً علوياً أو ثابتاً: القائمة، الساعات، الموقع، التواصل - أضف سطراً قصيراً عن [التوصيل / الاستلام / تناول الطعام في المكان إن وُجد] لا تغيّر نص القائمة. ركّز على الوضوح ودعوات الإجراء.
الخطوة 4 — مظهر احترافي
اجعل موقع المطعم يبدو أكثر تميزاً ومحلية: - اختر لوحة ألوان تناسب [نوع المطبخ] (دافئة للمخبز، خضراء منعشة للصحي، إلخ) - استخدم صور عناصر نائبة عالية الجودة للبطل و2–3 أطباق (عبر روابط عناصر نائبة يكفي) - أضف تذييلاً بسيطاً بحقوق النشر والعنوان وتكرار الساعات أبقِ كل المحتوى في ملف index.html واحد.
الخطوة 5 — إصلاح وتكرار (في أي وقت)
على الجوال، [صف المشكلة — مثلاً "أسعار القائمة تلتف بشكل سيئ" أو "زر الاتصال صعب الضغط"]. أصلح هذه المشكلة فقط في index.html. أرني CSS الذي غيّرته بالضبط.
موجّهات إضافية — كلا المسارين
استخدمها في أي وقت مع أي مسار.
إضافة صورة
أضف صورة إلى [اسم القسم]. سأستخدم رابط الصورة هذا: [الصق الرابط] أو عنصراً نائباً. أبقِها متجاوبة وأضف نص alt لإمكانية الوصول.
شرح الكود
اشرح index.html بعبارات بسيطة لمبتدئ. ماذا يفعل كل قسم رئيسي؟ ماذا أعدّل إذا أردت تغيير رقم هاتفي أو سعر في القائمة؟
تغيير صغير آمن
غيّر لون التمييز فقط إلى [اسم اللون أو hex] وأسلوب خط العنوان الرئيسي. لا تغيّر التخطيط ولا تعيد كتابة الأقسام.
أثناء الورشة
كيف سنعمل مع الذكاء الاصطناعي
- صف الهدف بوضوح (ماذا يجب أن تفعل الصفحة)
- راجع ما يقترحه الذكاء الاصطناعي قبل قبول تغييرات كبيرة
- شغّل أو افتح الموقع في المتصفح كثيراً
- إذا حدث خطأ، الصق رسالة الخطأ مرة أخرى للذكاء الاصطناعي
- كرّر بخطوات صغيرة — أنت تبقى مسيطراً
أوامر OpenCode المفيدة
- Settings → Providers — أضف أو غيّر مزوّد الذكاء الاصطناعي (مثلاً Neuralwatt)
- منتقي النموذج (أسفل مربع الدردشة) — يجب أن يظهر Kimi K2.6 تحت Neuralwatt لليوم
- /init — ساعد OpenCode على فهم مشروعك (شغّله مرة واحدة لكل مجلد)
- /undo — التراجع عن آخر تغيير
إذا حدث خطأ ما
- أخطاء المصادقة — افتح Settings → Providers → Neuralwatt وأعد لصق مفتاح API
- نفاد الرصيد (Neuralwatt) — راجع رصيدك في لوحة تحكم البوابة؛ الرصيد التجريبي يستمر 30 يوماً
- النموذج غير موجود — انقر اسم النموذج أسفل مربع الدردشة، وابحث عن Kimi K2.6 تحت Neuralwatt، واختره من القائمة (لا تكتب معرّفات النماذج يدوياً)
- اسأل الميسّر — نحن هنا للمساعدة