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 شخصيًا لهذا المختبر إن أمكن. قد تفرض حسابات المجموعة أو حسابات المؤسسات أو الحسابات التعليمية سياسات Workspace التي توقف الميزات التجريبية أو عمليات التكامل مع السحابة الإلكترونية.
- راجِع تفاصيل الفوترة لعمليات النشر:
- طبقة Google Cloud Starter: تتيح نشر ما يصل إلى تطبيقَين كاملَي المكدس في منطقة محدّدة بدون أي تكلفة، بدون إنشاء حساب فوترة كامل على 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.
- إذا كانت هذه هي المرة الأولى التي تنشر فيها وكنت تستخدم مَعلمات 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 تلقائيًا شهادة مُدارة لطبقة المقابس الآمنة/بروتوكول أمان طبقة النقل لاتصالك الآمن.
- تكتمل هذه العملية عادةً خلال 15 دقيقة تقريبًا، ولكن يمكن أن تستغرق ما يصل إلى 24 ساعة حسب نشر نظام أسماء النطاقات.
- بعد اكتمال العملية، سيتم توجيه نطاقك الخاص بأمان إلى موقع الويب الخاص بمحفظتك.
7. تنظيف
لتجنُّب أي رسوم فوترة غير متوقّعة أو لتنظيف موارد مساحة العمل:
- في Google AI Studio، انتقِل إلى صفحة "التطبيقات".
- ابحث عن تطبيقك في الشبكة أو القائمة.
- انقر على رمز المهملات لحذف حالة التطبيق وإلغاء نشر الخدمة من Cloud Run.
- إذا نشرت باستخدام مشروع عادي وأردت إيقاف جميع الموارد بالكامل، انتقِل إلى إعدادات المشروع في Google Cloud Console واحذف المشروع الأساسي.
8. الخاتمة
تهانينا! لقد صمّمت موقع ويب خاصًا بمحفظة وطوّرته ونشرته مباشرةً من Google AI Studio.
مزيد من المعلومات
انتقِل إلى هذا الرابط للحصول على شارة رحلة المطوّر المكتملة.
لمتابعة رحلتك، انتقِل إلى goo.gle/builders للاطّلاع على المختبر التالي.