انتقل إلى المحتوى الرئيسي

Vibe coding: أنشئ تطبيقًا صغيرًا بنفسك

في Vibe coding (البرمجة بالوصف) تصف بكلمات عادية ما تريد إنشاءه. يكتب المساعد الشيفرة ويعرض النتيجة ويعدّلها بناءً على ملاحظاتك. لا تحتاج إلى إتقان البرمجة. يمكنك مثلًا إنشاء اختبار لدورة تدريبية أو لعبة صغيرة أو أداة مفيدة لزملائك.

كل ما تحتاجه هو تطبيق سطح المكتب. لا داعي لتثبيت Node.js وgit، فالتطبيق يتضمنهما بالفعل.

1. اختر مجلد عمل​

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

2. صِف ما تريده​

اذكر بأكبر قدر ممكن من الدقة ما تريد إنشاءه. مثلًا:

أنشئ اختبارًا لورشة عمل حول أمن المعلومات في صفحة HTML واحدة. عشرة أسئلة متعددة الخيارات، مع أزرار كبيرة ونتيجة في النهاية وزر للبدء من جديد.

يعرض المساعد صفحة بسيطة كهذه باستخدام خادم الويب المدمج في التطبيق. تظهر النتيجة في المتصفح المدمج: الزر المتصفح (أيقونة الكرة الأرضية) في طرف الشريط العلوي. لمزيد من التفاصيل راجع الخوادم المحلية والمتصفح المدمج.

لست راضيًا؟ قل ببساطة ما الذي يجب تغييره:

اجعل الأزرار خضراء، واعرض الإجابة الصحيحة عند الإجابة الخاطئة.

صورك الخاصة واطلاع المساعد على الصفحة​

أرفق صورة برسالتك واطلب:

ضع هذه الصورة على صفحة الويب.

يحفظ المساعد الصورة في مجلد المشروع، مثلًا في img/، ويضعها على الصفحة. ويعمل ذلك أيضًا مع صورة أنشأها المساعد لك للتو.

هل في الصفحة المفتوحة في المتصفح المدمج خطأ ما؟ اطلب:

انظر ما الخطأ في الصفحة.

يطّلع المساعد عندئذٍ على نص الصفحة ولقطة شاشة لها ورسائل الخطأ فيها. راجع السماح للمساعد بالاطلاع على الصفحة.

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

3. تطبيقات أكبر​

إذا أردت شيئًا أكبر، مثل تطبيق بعدة شاشات، فيمكن للمساعد إنشاء مشروع باستخدام Vite وReact مثلًا:

أنشئ في هذا المجلد تطبيق React باستخدام Vite يتيح للزملاء حجز قاعة اجتماعات. ثبّت كل شيء، وشغّل التطبيق، واعرض النتيجة.

توافق على بدء مشروع كهذا (مثلًا باستخدام npm create vite@latest) في بطاقة الأمر. بعد ذلك يثبّت المساعد الحزم. وتوافق على ذلك أيضًا، أو تفعّل السماح بتثبيت الحزم دون سؤال. راجع تثبيت الحزم. لا تريد بطاقة لكل أمر؟ اختر الوثوق بهذا المشروع في البطاقة الأولى.

4. احفظ الإصدارات​

الإصدار لقطة من مشروعك. إذا لم يعجبك تغيير ما، يمكنك العودة إلى إصدار سابق. اطلب من المساعد في الوقت المناسب:

احفظ إصدارًا.

في المرة الأولى يبدأ المساعد سجل إصدارات للمجلد. الملفات التي تبدو كأسرار، مثل كلمات المرور أو المفاتيح (ومنها مفاتيح Google API)، لا تدخل أبدًا في أي إصدار. ويُبلغك المساعد إذا تخطّى شيئًا.

5. انشر مشروعك على GitHub​

على GitHub تحفظ مشروعك على الإنترنت. بذلك تحصل على نسخة احتياطية ويمكنك متابعة العمل عليه من جهاز آخر.

ربط GitHub​

يربط كل شخص حسابه الخاص على GitHub. ليس لديك حساب بعد؟ أنشئ أولًا حسابًا مجانيًا على github.com/signup.

  1. انتقل إلى الإعدادات وابحث ضمن حالة سطح المكتب عن لوحة GitHub.
  2. انقر على ربط GitHub. يعرض التطبيق رمزًا ويفتح github.com/login/device في متصفحك.
  3. أدخل الرمز على GitHub (يمكنك نسخه باستخدام نسخ الرمز) وامنح الإذن. إذا لم تُفتح الصفحة، فانقر على فتح GitHub.
  4. تعرض اللوحة الآن متصل باسم @اسمك.

ما الذي يطلبه GitHub؟ يعرض GitHub التطبيق AI-School Desktop من HandiHow-B-V ويطلب الوصول إلى مستودعاتك (repo): القراءة والكتابة، بما في ذلك المستودعات الخاصة. هذا الوصول ضروري لإنشاء مشروعك وتحديثه. لا توافق إلا إذا كانت الصفحة على github.com.

انتهت صلاحية الرمز؟ الرمز صالح لنحو 15 دقيقة. إذا انتهت صلاحيته، فانقر ربط GitHub مرة أخرى.

مستودعات مؤسسة:

  • إذا كانت المؤسسة تقيّد تطبيقات الجهات الخارجية، فانقر Request (طلب الوصول) بجانب المؤسسة في شاشة الموافقة. ويمكنك ذلك لاحقًا أيضًا عبر github.com/settings/applications > AI-School Desktop.
  • يوافق مالك المؤسسة على ذلك من Settings > Third-party access > OAuth application policy الخاصة بالمؤسسة.
  • بدون هذه الموافقة تعمل مستودعاتك الخاصة، لكن مستودعات المؤسسة لا تعمل.

تريد استخدام حساب آخر؟ انقر قطع الاتصال وسجّل الخروج من github.com في المتصفح (أو استخدم نافذة خاصة) قبل الربط من جديد. وإلا فسيستخدم GitHub الحساب الذي سجّلت الدخول به بالفعل.

ملاحظة

تعرض الإصدارات الأقدم من التطبيق "تسجيل الدخول باستخدام GitHub غير متاح بعد في هذا الإصدار من التطبيق." عندها حدّث التطبيق.

النشر والتحديث​

بعد ذلك اطلب مثلًا:

انشر هذا المشروع على GitHub.

يعرض المساعد بطاقة فيها العنوان الدقيق والوسمان مدمج في التطبيق والشبكة مفعّلة. انقر على تشغيل للمتابعة أو على رفض للإيقاف. يكون المستودع الجديد خاصًا ما لم تطلب مستودعًا عامًا. إذا لم يكن العنوان github.com أو كان المستودع سيصبح عامًا، فستعرض البطاقة تحذيرًا. وعند النشر ترى الملفات التي ستُرسل.

لاحقًا يمكنك أن تكتب مثلًا:

  • "انشر الإصدار الجديد على الإنترنت." يرسل المساعد إصداراتك الجديدة إلى GitHub.
  • "اجلب أحدث إصدار." يجلب المساعد التغييرات من GitHub.
  • "نزّل المشروع https://github.com/naam/project إلى هذا المجلد." ينزّل المساعد مشروعًا موجودًا.

يمكنك تنزيل مشروع عام دون ربط أيضًا. أما النشر على الإنترنت وإنشاء مستودع جديد فيتطلبان الربط.

6. نصائح للأمان​

  • المستودعات الجديدة خاصة. لا تجعل مستودعًا عامًا إلا إذا كان مسموحًا للجميع برؤية الشيفرة.
  • لا تضع أبدًا كلمات مرور أو مفاتيح أو أسرارًا أخرى في تطبيقك.
  • هل تستخدم مفتاح Google API (يبدأ بـ AIza، مثل مفتاح الويب لتطبيق Firebase)؟ ضعه في ملف يُبقيه المساعد خارج الإصدارات، مثل .env. وإذا بقي المفتاح في شيفرتك، فلن يُنشر ذلك الملف على الإنترنت.
  • تحقّق دائمًا من العنوان في البطاقة قبل النقر على تشغيل.
  • يُحفظ الربط مشفّرًا في حساب المستخدم الخاص بك على هذا الجهاز. لا يرى المساعد مفتاح GitHub الخاص بك أبدًا. إذا كنت تعمل على جهاز مشترك، فانقر على قطع الاتصال عند الانتهاء.
  • يزيل قطع الاتصال الربط من هذا الجهاز فقط. إذا أردت إلغاء الوصول بالكامل، فافعل ذلك على GitHub ضمن Settings > Applications.

في هذه الصفحة