1- مقدمة
نظرة عامة
من أين تبدأ عملية إنشاء التطبيقات باستخدام الذكاء الاصطناعي اليوم؟ بالنسبة إلى معظمنا، تبدأ العملية بطلب بحث أو نموذج أولي. توفّر أداة Google AI Studio وضع "الإنشاء" الفعّال (يُشار إليه غالبًا باسم "البرمجة الوصفية") الذي يتيح لك تصميم تطبيقات الويب واختبارها وإنشاءها باستخدام ميزة إنشاء الرموز البرمجية المستندة إلى نماذج Gemini.
في هذا الدرس التطبيقي حول الترميز، ستنشئ موقعًا إلكترونيًا خاصًا بمحفظتك. سيكتب وكيل AI Studio الرمز البرمجي للواجهة الأمامية. بعد الانتهاء من تحسين التطبيق، يمكنك نشره مباشرةً على Cloud Run بنقرة واحدة.

الإجراءات التي ستنفذّها
- اطلب من Google AI Studio إنشاء نموذج أوّلي لموقع إلكتروني يعرض أعمالك الشخصية.
- اختبِر التطبيق في بيئة وضع الحماية الخاصة بالمعاينة التفاعلية.
- انشر التطبيق على Cloud Run مباشرةً من واجهة مستخدم Google AI Studio.
أهداف الدورة التعليمية
- كيفية استخدام "وضع الإنشاء" في Google AI Studio لإنشاء نموذج أوّلي سريع لخدمة الواجهة الأمامية باستخدام اللغة الطبيعية
- كيفية نشر تطبيق AI Studio كحاوية بدون خادم على Cloud Run
2. إعداد المشروع
قبل إطلاق AI Studio، يُرجى التحقّق من حالة حسابك والمتطلبات الأساسية.
معلومات حساب Google ومستوى الاشتراك
- إذا لم يكن لديك حساب Google، يمكنك إنشاء حساب Google.
- ملاحظة: استخدِم حساب Google شخصيًا في هذا المختبر إذا أمكن ذلك. قد تفرض حسابات المجموعات أو الشركات أو المؤسسات التعليمية سياسات Workspace التي توقف الميزات التجريبية أو عمليات الدمج مع الخدمات السحابية.
- راجِع تفاصيل الفوترة الخاصة عمليات النشر:
- Google Cloud Starter Tier: تتيح نشر ما يصل إلى تطبيقَين كاملَين في منطقة محدّدة بدون أي تكلفة، وبدون إنشاء حساب فوترة كامل على Google Cloud.
- عملية النشر العادية: يتم الربط بمشروع حالي مدفوع على Google Cloud وتوسيع حدود مساحة التخزين وموارد وحدة المعالجة المركزية وواجهات برمجة التطبيقات.
3- إنشاء موقع إلكتروني للملف الشخصي في "وضع الإنشاء" في AI Studio
أنشئ هيكل التطبيق واطلب من مساعد الترميز المستند إلى الذكاء الاصطناعي إنشاء تصميم الواجهة الأمامية.
- انتقِل إلى لوحة "تطبيقات Google AI Studio" وانقر على تطبيق جديد.
- في مربّع طلب المحادثة، أدخِل وصفًا لتطبيق محفظتك: سيؤدي النقر على
هذا الرابط إلى ملء مربّع الطلب تلقائيًا.Build a professional personal portfolio website. The site should have a modern, responsive design and sections for my biography, projects showcase, skills, and links to my professional profiles (e.g., GitHub, LinkedIn). - انقر على إنشاء لبدء عملية إنشاء التطبيق.
4. الاختبار والتكرار
قبل إطلاق الخدمة، نفِّذ عمليات التحقّق من الصحة في المعاينة التفاعلية.
- افتح جزء المعاينة داخل Google AI Studio.
- تفاعَل مع أي أزرار تنقّل أو روابط أو تنسيقات في بيئة الاختبار المعزولة الخاصة بالمعاينة للتحقّق من التجربة المرئية.
- ملاحظة حول إصلاح الأخطاء: أثناء إنشاء الرمز أو اختباره، قد تواجه أحيانًا مشاكل في وقت التشغيل أو أخطاء في التجميع. في حال حدوث ذلك، يعرض AI Studio زر إصلاح في المحادثة، ما يتيح لك أن تطلب من الوكيل تشخيص المشكلة وإصلاحها تلقائيًا.

- إذا أردت تغيير الأسلوب أو السلوك، يمكنك توجيه الوكيل من خلال نافذة المحادثة. على سبيل المثال:
"Could you style the interface using Tailwind CSS, and add a dark mode toggle button?""Include a new section to showcase my recent presentations and talks."
- انتظِر إلى أن يحدّث الوكيل قاعدة الرموز البرمجية، ثم اطّلِع على متصفّح المعاينة لرؤية التعديلات.
5- النشر على Cloud Run
بعد أن يصبح النموذج الأوّلي يعمل بكامل طاقته، يمكنك نشره كخدمة عامة على Cloud Run.
- في أعلى يسار صفحة Google AI Studio، انقر على الزر نشر لبدء معالج النشر.

- انقر على البدء لإعداد مشروعك على Google Cloud.
- تأكَّد من أنّ القائمة المنسدلة مشروع Google Cloud المستهدَف تتطابق مع المشروع الذي ربطته بمساحة عملك.
- ستنشئ أداة AI Studio تلقائيًا معرّف خدمة فريدًا لمثيل Cloud Run.
- يمكنك اختياريًا تحديد
.ai.studioبادئة عنوان URL مخصّصة (مثلyour-portfolio-name.ai.studio) كجزء من إعدادات النشر.
- إذا كانت هذه هي المرة الأولى التي تنشر فيها تطبيقًا وكنت تستخدم مَعلمات Google Cloud العادية، قد يُطلب منك تحديد نوع المؤسسة وتقديم تفاصيل الفوترة.
- انقر على نشر التطبيق.
- تتم خطوات إنشاء الحاوية وتسجيلها ونشر الخدمة في الخلفية. تكتمل هذه العملية عادةً في غضون 2 إلى 4 دقائق.
- عند انتهاء عملية النشر، انسخ عنوان URL داخل التطبيق الذي تم إنشاؤه وانتقِل إلى رابط التطبيق المنشور في علامة تبويب المتصفّح.
- اختبِر تطبيق الويب المباشر في المتصفّح.
6. (اختياري) إضافة نطاق مخصّص
تستضيف Cloud Run خدمتك تلقائيًا على نطاق فرعي run.app تديره Google. إذا كنت تريد استخدام نطاق شخصي (مثل yourname.com أو portfolio.yourname.com)، يمكنك ربط نطاق مخصّص بخدمتك.
الخطوة 1: إضافة عملية ربط نطاق في Cloud Run
- انتقِل إلى صفحة عمليات ربط النطاقات في Cloud Run في Google Cloud Console.
- انقر على إضافة عملية ربط.
- اختَر خدمة Cloud Run التي تريد ربطها من القائمة المنسدلة.
- أدخِل اسم نطاقك المخصّص (مثلاً
yourname.comأوportfolio.yourname.com). - انقر على التالي أو متابعة. سيعرض Cloud Run سجلّات نظام أسماء النطاقات (مثل سجلّات
A/AAAAأوCNAME) التي يجب إنشاؤها لدى جهة تسجيل النطاق.
الخطوة 2: ضبط جهة تسجيل نظام أسماء النطاقات
- سجِّل الدخول إلى لوحة إدارة جهة تسجيل النطاق (مثل Squarespace أو GoDaddy أو Namecheap).
- افتح صفحة إدارة نظام أسماء النطاقات أو صفحة إعدادات نظام أسماء النطاقات لنطاقك.
- أنشئ سجلات نظام أسماء النطاقات التي تتطابق مع القيم المعروضة في معالج الربط في Cloud Run:
- بالنسبة إلى عمليات ربط نطاق المستوى الأعلى (مثل
yourname.com)، أضِف سجلّاتAوAAAAالمُدرَجة. - بالنسبة إلى عمليات ربط النطاقات الفرعية (مثل
portfolio.yourname.com)، أضِف سجلCNAMEالمُدرَج.
- بالنسبة إلى عمليات ربط نطاق المستوى الأعلى (مثل
- احفظ التغييرات التي تم إجراؤها على إعدادات نظام أسماء النطاقات.
الخطوة 3: انتظار إعداد شهادة طبقة المقابس الآمنة
بعد نشر التغييرات في نظام أسماء النطاقات، يحدث ما يلي:
- ستوفّر Google Cloud تلقائيًا شهادة مُدارة لبروتوكول أمان طبقة النقل (TLS) أو طبقة المقابس الآمنة (SSL) من أجل الاتصال الآمن.
- تكتمل هذه العملية عادةً في غضون 15 دقيقة تقريبًا، ولكن يمكن أن تستغرق ما يصل إلى 24 ساعة حسب عملية نشر نظام أسماء النطاقات.
- بعد إكمال هذه الخطوات، ستتم إعادة توجيه نطاقك المخصّص بأمان إلى موقعك الإلكتروني الخاص بمحفظتك.
7. تنظيف
لتجنُّب أي رسوم فوترة غير متوقّعة أو لإزالة موارد مساحة العمل، اتّبِع الخطوات التالية:
- في Google AI Studio، انتقِل إلى صفحة "التطبيقات".
- ابحث عن تطبيقك في الشبكة أو القائمة.
- انقر على رمز المهملات لحذف حالة التطبيق وإلغاء نشر الخدمة من Cloud Run.
- إذا تم النشر باستخدام مشروع عادي وأردت إيقاف جميع الموارد بالكامل، انتقِل إلى إعدادات المشروع في Google Cloud Console واحذف المشروع الأساسي.
8. الخاتمة
تهانينا! لقد صمّمت وطوّرت ونشرت موقعًا إلكترونيًا خاصًا بمحفظتك مباشرةً من Google AI Studio.
مزيد من المعلومات
انتقِل إلى هذا الرابط للمطالبة بشارة رحلة بناء التطبيقات المكتملة.
لمواصلة رحلتك، انتقِل إلى goo.gle/builders لتجربة المختبر التالي.