1. نظرة عامة
قد يكون نشر تطبيق ويب للمرة الأولى أمرًا مخيفًا. حتى بعد عملية النشر الأولى، إذا كانت العملية تستغرق وقتًا طويلاً، قد تتجنّب نشر إصدارات جديدة من تطبيقك. باستخدام ميزة النشر المستمر، يمكنك نشر التغييرات في تطبيقك تلقائيًا بسهولة.
في هذه التجربة، ستكتب تطبيق ويب وتضبط Cloud Run لنشر تطبيقك تلقائيًا عند إجراء تغيير على الرمز المصدر لتطبيقك. بعد ذلك، يمكنك تعديل تطبيقك ونشره مرة أخرى.
ما ستتعرّف عليه
- كتابة تطبيق ويب باستخدام محرِّر Cloud Shell
- تخزين رمز تطبيقك في GitHub
- نشر تطبيقك تلقائيًا على Cloud Run
- إضافة الذكاء الاصطناعي التوليدي إلى تطبيقك باستخدام Genkit
- إدارة طلبات LLM باستخدام مكتبة dotprompt
2. المتطلبات الأساسية
- إذا لم يكن لديك حساب على Google، عليك إنشاء حساب على Google.
- استخدام حساب شخصي بدلاً من حساب عمل أو حساب تديره مؤسسة تعليمية قد تفرض حسابات العمل والحسابات التي تديرها المؤسسات التعليمية قيودًا تمنعك من تفعيل واجهات برمجة التطبيقات اللازمة لهذا الدرس التطبيقي.
- إذا لم يكن لديك حساب على GitHub، عليك إنشاء حساب على GitHub
- .
- استخدِم حسابًا حاليًا على GitHub إذا كان لديك. من المرجّح أن تحظر GitHub حسابًا جديدًا كمحتوى غير مرغوب فيه.
- إعداد المصادقة الثنائية في حسابك على GitHub للحد من احتمال تصنيف حسابك كغير مرغوب فيه
3- إعداد المشروع
- سجِّل الدخول إلى Google Cloud Console.
- فعِّل الفوترة في Cloud Console.
- من المفترض أن تبلغ تكلفة إكمال هذا البرنامج التدريبي أقل من دولار أمريكي واحد في موارد Cloud.
- يمكنك اتّباع الخطوات الواردة في نهاية هذا البرنامج التدريبي لحذف الموارد لتجنُّب تحصيل المزيد من الرسوم.
- يكون المستخدمون الجدد مؤهّلين للاستفادة من الفترة التجريبية المجانية التي تبلغ قيمتها 300 دولار أمريكي.
- هل ستحضر فعالية "الذكاء الاصطناعي التوليدي للمطوّرين"؟ قد يتوفّر رصيد بقيمة دولار أمريكي واحد.
- أنشئ مشروعًا جديدًا أو اختَر إعادة استخدام مشروع حالي.
- تأكَّد من تفعيل الفوترة في مشاريعي في "الفوترة في السحابة الإلكترونية"
- إذا كان مشروعك الجديد يعرض الرمز
Billing is disabled
في عمودBilling account
:- انقر على النقاط الثلاث في عمود
Actions
. - انقر على تغيير الفوترة.
- اختَر حساب الفوترة الذي تريد استخدامه.
- انقر على النقاط الثلاث في عمود
- إذا كنت تشارك في حدث "الذكاء الاصطناعي العام للمطوّرين"، من المرجّح أن يكون اسم الحساب حساب فوترة الفترة التجريبية في Google Cloud Platform.
- إذا كان مشروعك الجديد يعرض الرمز
4. فتح محرِّر Cloud Shell
- انتقِل إلى محرر Cloud Shell.
- إذا لم تظهر المحطة الطرفية في أسفل الشاشة، افتح المحطة باتّباع الخطوات التالية:
- انقر على قائمة الخطوط الثلاثة
.
- انقر على Terminal (الوحدة الطرفية).
- انقر على وحدة تحكّم جديدة
.
- انقر على قائمة الخطوط الثلاثة
- في الوحدة الطرفية، اضبط مشروعك باستخدام الأمر التالي:
- طبيعة الحضور:
gcloud config set project [PROJECT_ID]
- مثال:
gcloud config set project lab-project-id-example
- إذا لم تتذكر رقم تعريف المشروع:
- يمكنك إدراج جميع أرقام تعريف مشاريعك باستخدام:
gcloud projects list | awk '/PROJECT_ID/{print $2}'
- يمكنك إدراج جميع أرقام تعريف مشاريعك باستخدام:
- طبيعة الحضور:
- إذا طُلب منك تفويض، انقر على تفويض للمتابعة.
- من المفترض أن تظهر لك هذه الرسالة:
إذا ظهر لك رمزUpdated property [core/project].
WARNING
وتلقّيت رسالةDo you want to continue (Y/N)?
، هذا يعني على الأرجح أنّك أدخلت رقم تعريف المشروع بشكل غير صحيح. اضغط علىN
، ثم اضغط علىEnter
، وحاول تنفيذ الأمرgcloud config set project
مرة أخرى.
5- تفعيل واجهات برمجة التطبيقات
في الوحدة الطرفية، فعِّل واجهات برمجة التطبيقات:
gcloud services enable \
run.googleapis.com \
cloudbuild.googleapis.com \
aiplatform.googleapis.com
قد يستغرق تنفيذ هذا الأمر بضع دقائق، ولكن من المفترض أن تظهر في النهاية رسالة تفيد بنجاح العملية، مثل هذه الرسالة:
Operation "operations/acf.p2-73d90d00-47ee-447a-b600" finished successfully.
6- ضبط Git
- اضبط البريد الإلكتروني لمستخدم git العام:
git config --global user.email "you@example.com"
- اضبط اسم مستخدم git العام:
git config --global user.name "Your Name"
- اضبط الفرع التلقائي العام في git على
main
:git config --global init.defaultBranch main
7- كتابة الرمز
لكتابة تطبيق في Node.js:
- انتقِل إلى الدليل الرئيسي:
cd ~
- أنشئ الدليل
codelab-genai
:mkdir codelab-genai
- انتقِل إلى دليل
codelab-genai
:cd codelab-genai
- أنشئ ملف
index.js
:touch index.js
- أنشئ ملف
package.json
:npm init es6 -y
- إضافة
express
كعنصر تابعnpm install express
- إضافة ملف
.gitignore
لمنع مشاركةnode_modules
echo node_modules/ >> .gitignore
- افتح ملف
index.js
في محرِّر Cloud Shell: من المفترض أن يظهر الآن ملف فارغ في الجزء العلوي من الشاشة. يمكنك هنا تعديل ملفcloudshell edit index.js
index.js
هذا. - انسخ الرمز التالي والصقه في ملف
index.js
الذي تم فتحه: بعد بضع ثوانٍ، سيحفظ محرِّر Cloud Shell الرمز تلقائيًا. يستجيب هذا الرمز لطلبات http باستخدام رسالة الترحيب "مرحبًا بالجميع".import express from 'express'; const app = express(); app.get('/', async (req, res) => { res.send('Hello world!'); }); const port = process.env.PORT || 8080; app.listen(port, () => { console.log(`codelab-genai: listening on port ${port}`); });
اكتمل الرمز البرمجي الأوّلي لتطبيقك وأصبح جاهزًا للتخزين في نظام التحكّم في الإصدارات.
8. إنشاء مستودع
- ارجع إلى وحدة تحكّم Cloud Shell في أسفل الشاشة.
- تأكَّد من أنّك لا تزال في الدليل الصحيح:
cd ~/codelab-genai
- بدء مستودع git
git init -b main
- تسجيل الدخول إلى واجهة برمجة التطبيقات في GitHub
اضغط علىgh auth login
Enter
لقبول الخيارات التلقائية واتّبِع التعليمات الواردة في أداة GitHub CLI، بما في ذلك:- ما هو الحساب الذي تريد تسجيل الدخول إليه؟
GitHub.com
- ما هو البروتوكول المفضّل لعمليات Git على هذا المضيف؟
HTTPS
- هل تريد مصادقة Git باستخدام بيانات اعتماد GitHub؟
Y
(تخطّ هذه الخطوة إذا لم يظهر هذا الخيار.) - كيف تريد مصادقة GitHub CLI؟
Login with a web browser
- نسخ الرمز المُستخدَم لمرة واحدة
- افتح https://github.com/login/device.
- الصِق الرمز المخصّص لمرة واحدة.
- انقر على تفويض GitHub.
- إكمال عملية تسجيل الدخول
- ما هو الحساب الذي تريد تسجيل الدخول إليه؟
- تأكَّد من تسجيل الدخول:
في حال تسجيل الدخول بنجاح، من المفترض أن يعرض هذا الإجراء اسم المستخدم الخاص بك على GitHub.gh api user -q ".login"
- إنشاء متغيّر
GITHUB_USERNAME
GITHUB_USERNAME=$(gh api user -q ".login")
- تأكَّد من أنّك أنشأت متغيّر البيئة:
إذا نجحت في إنشاء المتغيّر، من المفترض أن يعرض هذا الإجراء اسم المستخدم الخاص بك على GitHub.echo ${GITHUB_USERNAME}
- أنشئ مستودع GitHub فارغًا باسم
codelab-genai
: إذا ظهرت لك رسالة الخطأ التالية:gh repo create codelab-genai --private
هذا يعني أنّ لديك مستودعًا باسمGraphQL: Name already exists on this account (createRepository)
codelab-genai
. لديك خياران لمواصلة اتّباع هذا الدليل التعليمي:- حذف مستودع GitHub الحالي
- أنشئ مستودعًا باسم مختلف وتذكَّر تغييره في الأوامر التالية.
- أضِف مستودع
codelab-genai
كـorigin
عن بُعد:git remote add origin https://github.com/${GITHUB_USERNAME}/codelab-genai
9. مشاركة الرمز
- تأكَّد من أنّك في الدليل الصحيح:
cd ~/codelab-genai
- أضِف جميع الملفات في الدليل الحالي إلى هذا الإصدار:
git add .
- أنشئ أول عملية إرسال:
git commit -m "add http server"
- ادفع عملية الإضافة إلى فرع
main
في مستودعorigin
:git push -u origin main
يمكنك تنفيذ هذا الأمر والانتقال إلى عنوان URL الناتج لعرض رمز تطبيقك على GitHub:
echo -e "\n\nTo see your code, visit this URL:\n \
https://github.com/${GITHUB_USERNAME}/codelab-genai/blob/main/index.js \n\n"
10. إعداد عمليات النشر التلقائية
- اترك علامة التبويب "محرِّر Cloud Shell" مفتوحة. سنعود إلى علامة التبويب هذه لاحقًا.
- في علامة تبويب جديدة، انتقِل إلى صفحة Cloud Run.
- اختَر مشروع Google Cloud الصحيح في وحدة التحكّم
.
- انقر على ربط المستودع.
- انقر على الإعداد باستخدام Cloud Build
- .
- اختَر GitHub كموفِّر المستودع
- .
- إذا لم تكن مسجِّلاً الدخول إلى حسابك على GitHub في المتصفّح، سجِّل الدخول باستخدام بيانات الاعتماد.
- انقر على مصادقة، ثم انقر على متابعة.
- بعد تسجيل الدخول، ستظهر لك رسالة في صفحة Cloud Run تفيد بأنّ لم يتم تثبيت تطبيق GitHub على أي من مستودعاتك.
- انقر على الزر INSTALL GOOGLE CLOUD BUILD (تثبيت Google Cloud Build).
- في صفحة "إعداد عملية التثبيت"، اختَر اختيار مستودعات محدّدة فقط واختَر مستودع codelab-genai الذي أنشأته من خلال وحدة تحكّم سطر الأوامر.
- انقر على تثبيت.
- ملاحظة: إذا كان لديك الكثير من مستودعات GitHub، قد يستغرق تحميلها بضع دقائق.
- اختَر
your-user-name/codelab-genai
كـ المستودع- .
- إذا لم يكن المستودع متوفّرًا، انقر على الرابط إدارة المستودعات المرتبطة.
- ترك Branch على القيمة
^main$
- انقر على Go أو Node.js أو Python أو Java أو .NET Core أو Ruby أو PHP من خلال حِزم الإنشاء في Google Cloud
- .
- اترك الحقول الأخرى (
Build context directory
وEntrypoint
وFunction target
) كما هي.
- اترك الحقول الأخرى (
- انقر على حفظ.
- اختَر GitHub كموفِّر المستودع
- انتقِل للأسفل إلى المصادقة.
- انقر على السماح بطلبات البيانات غير المعتمَدة.
- انقر على إنشاء.
بعد اكتمال عملية الإنشاء (التي ستستغرق عدة دقائق)، نفِّذ هذا الأمر وانتقِل إلى عنوان URL الناتج لعرض تطبيقك الذي يتم تشغيله:
echo -e "\n\nOnce the build finishes, visit your live application:\n \
"$( \
gcloud run services list | \
grep codelab-genai | \
awk '/URL/{print $2}' | \
head -1 \
)" \n\n"
11. تغيير الرمز
الرجوع إلى محرِّر Cloud Shell
إذا كان محرِّر Cloud Shell لا يزال مفتوحًا، يمكنك تخطّي هذه الخطوات.
- انتقِل إلى محرر Cloud Shell.
- إذا لم تظهر المحطة الطرفية في أسفل الشاشة، افتح المحطة باتّباع الخطوات التالية:
- انقر على قائمة الخطوط الثلاثة
.
- انقر على Terminal (الوحدة الطرفية).
- انقر على وحدة تحكّم جديدة
.
- انقر على قائمة الخطوط الثلاثة
- في الوحدة الطرفية، اضبط مشروعك باستخدام الأمر التالي:
- طبيعة الحضور:
gcloud config set project [PROJECT_ID]
- مثال:
gcloud config set project lab-project-id-example
- إذا لم تتذكر رقم تعريف المشروع:
- يمكنك إدراج جميع أرقام تعريف مشاريعك باستخدام:
gcloud projects list | awk '/PROJECT_ID/{print $2}'
- يمكنك إدراج جميع أرقام تعريف مشاريعك باستخدام:
- طبيعة الحضور:
- إذا طُلب منك تفويض، انقر على تفويض للمتابعة.
- من المفترض أن تظهر لك هذه الرسالة:
إذا ظهر لك رمزUpdated property [core/project].
WARNING
وتلقّيت رسالةDo you want to continue (Y/N)?
، هذا يعني على الأرجح أنّك أدخلت رقم تعريف المشروع بشكل غير صحيح. اضغط علىN
، ثم اضغط علىEnter
، وحاول تنفيذ الأمرgcloud config set project
مرة أخرى.
إضافة Genkit وVertex AI إلى تطبيقك
- ارجع إلى وحدة تحكّم Cloud Shell في أسفل الشاشة.
- تأكَّد من أنّك لا تزال في الدليل الصحيح:
cd ~/codelab-genai
- ثبِّت حزمة تطوير البرامج (SDK) لـ Node.js Genkit:
npm install @genkit-ai/ai
- ثبِّت حزمة تطوير البرامج (SDK) لـ Node.js Genkit في Vertex AI:
npm install @genkit-ai/vertexai
- إعادة فتح
index.js
في محرِّر Cloud Shellcloudshell edit ~/codelab-genai/index.js
- استبدِل الرمز في ملف
index.js
بما يلي:import express from 'express'; const app = express(); import { genkit } from 'genkit'; import { gemini15Flash, vertexAI } from '@genkit-ai/vertexai'; const ai = genkit({ plugins: [ vertexAI({ location: 'us-central1' }), ], }); app.get('/', async (req, res) => { const animal = req.query.animal || 'dog'; const prompt = `Give me 10 fun facts about ${animal}. Return this as html without backticks.` const llmResponse = await ai.generate({ model: gemini15Flash, prompt: prompt, }); const html = llmResponse.text; res.send(html); }); const port = process.env.PORT || 8080; app.listen(port, () => { console.log(`codelab-genai: listening on port ${port}`); });
- تأكَّد من أنّك لا تزال في الدليل الصحيح في Cloud Shell:
cd ~/codelab-genai
- شغِّل هذه الأوامر لإرسال إصدار جديد من تطبيقك إلى مستودع git المحلي:
git add . git commit -m "add latest changes"
- ادفع التغييرات إلى GitHub:
git push
- بعد انتهاء عملية الإنشاء، شغِّل الأمر التالي وانتقِل إلى تطبيقك المنشور:
echo -e "\n\nOnce the build finishes, visit your live application:\n \ "$( \ gcloud run services list | \ grep codelab-genai | \ awk '/URL/{print $2}' | \ head -1 \ )" \n\n"
قد يستغرق إكمال عملية الإنشاء عدة دقائق قبل أن تتمكّن من رؤية التغييرات.
يمكنك الاطّلاع على سجلّ جميع المراجعات هنا: https://console.cloud.google.com/run/detail/us-central1/codelab-genai/revisions.
12. (اختياري) استخدام ملفات .prompt مع Genkit
- ارجع إلى وحدة تحكّم Cloud Shell في أسفل الشاشة.
- تأكَّد من أنّك لا تزال في الدليل الصحيح:
cd ~/codelab-genai
- أنشئ مجلدًا
prompts
لتخزين طلباتك:mkdir prompts
- أنشئ ملفًا بتنسيق
animal-facts.prompt
لإنشاء الطلب الأول:touch prompts/animal-facts.prompt
- افتح ملف
animal-facts.prompt
في محرِّر Cloud Shell:cloudshell edit ~/codelab-genai/prompts/animal-facts.prompt
- عدِّل
animal-facts.prompt
والصِق الرمز التالي فيه:--- model: vertexai/gemini-1.5-flash input: schema: animal: string --- Give me 10 fun facts about {{animal}}. Return the results as HTML without markdown backticks.
- افتح ملف
index.js
في محرِّر Cloud Shell:cloudshell edit ~/codelab-genai/index.js
- استبدِل الرمز في ملف
index.js
بما يلي:import express from 'express'; const app = express(); import { genkit } from 'genkit'; import { vertexAI } from '@genkit-ai/vertexai'; const ai = genkit({ plugins: [ vertexAI({ location: 'us-central1' }), ], }); app.get('/', async (req, res) => { const animal = req.query.animal || 'dog'; const animalPrompt = ai.prompt('animal-facts'); const llmResponse = await animalPrompt({animal}); const html = llmResponse.text; res.send(html); }); const port = process.env.PORT || 8080; app.listen(port, () => { console.log(`codelab-genai: listening on port ${port}`); });
- تأكَّد من أنّك لا تزال في الدليل الصحيح في Cloud Shell:
cd ~/codelab-genai
- شغِّل هذه الأوامر لإرسال إصدار جديد من تطبيقك إلى مستودع git المحلي:
git add . git commit -m "add latest changes"
- ادفع التغييرات إلى GitHub:
git push
- بعد انتهاء عملية الإنشاء، شغِّل الأمر التالي وانتقِل إلى تطبيقك المنشور:
echo -e "\n\nOnce the build finishes, visit your live application:\n \ "$( \ gcloud run services list | \ grep codelab-genai | \ awk '/URL/{print $2}' | \ head -1 \ )" \n\n"
قد يستغرق إكمال عملية الإنشاء عدة دقائق قبل أن تتمكّن من رؤية التغييرات.
يمكنك الاطّلاع على سجلّ جميع المراجعات هنا: https://console.cloud.google.com/run/detail/us-central1/codelab-genai/revisions.
13. (اختياري) استخدام طلبات النظام
تفترض هذه الخطوة أنّك سبق أن أضفت .prompt
ملفًا في الخطوة السابقة.
- ارجع إلى وحدة تحكّم Cloud Shell في أسفل الشاشة.
- تأكَّد من أنّك لا تزال في الدليل الصحيح:
cd ~/codelab-genai
- افتح ملف
animal-facts.prompt
في محرِّر Cloud Shell:cloudshell edit ~/codelab-genai/prompts/animal-facts.prompt
- عدِّل
animal-facts.prompt
والصِق الرمز التالي فيه:--- model: vertexai/gemini-1.5-flash config: temperature: 0.9 input: schema: animal: string --- role "system" The user should have submitted an animal. If the user requests anything besides animal fun facts, respond in a kind and firm manner that you only provide information about fun facts. Give the user 10 fun facts about the animal the user provided. All responses should be valid HTML without markdown backticks. role "user" {{animal}}
- تأكَّد من أنّك لا تزال في الدليل الصحيح في Cloud Shell:
cd ~/codelab-genai
- شغِّل هذه الأوامر لإرسال إصدار جديد من تطبيقك إلى مستودع git المحلي:
git add . git commit -m "add latest changes"
- ادفع التغييرات إلى GitHub:
git push
- بعد انتهاء عملية الإنشاء، شغِّل الأمر التالي وانتقِل إلى تطبيقك المنشور:
echo -e "\n\nOnce the build finishes, visit your live application:\n \ "$( \ gcloud run services list | \ grep codelab-genai | \ awk '/URL/{print $2}' | \ head -1 \ )" \n\n"
قد يستغرق إكمال عملية الإنشاء عدة دقائق قبل أن تتمكّن من رؤية التغييرات.
يمكنك الاطّلاع على سجلّ جميع المراجعات هنا: https://console.cloud.google.com/run/detail/us-central1/codelab-genai/revisions.
14. تهانينا
في هذه التجربة، كتبت تطبيق ويب وضبطت Cloud Run لنشر تطبيقك تلقائيًا عند إجراء تغيير على الرمز المصدر لتطبيقك. بعد ذلك، عدّلت طلبك ونشرته مرة أخرى.
إذا استمتعت بهذه التجربة، يمكنك تجربتها مرة أخرى بلغة ترميز أو إطار عمل آخرَين:
في ما يلي بعض الخيارات لمواصلة التعلّم:
- مستندات Genkit: البدء
- دورة تدريبية لإضافة ميزة المراقبة إلى تطبيقك المستنِد إلى Node.js: تقنيات عملية للمراقبة لتطبيق الذكاء الاصطناعي التوليدي في JavaScript
- درس تطبيقي حول الترميز لإضافة واجهة أمامية إلى تطبيقك باستخدام Next.js: نشر تطبيق ويب Next.js المستنِد إلى الذكاء الاصطناعي التوليدي تلقائيًا من نظام التحكّم في الإصدارات إلى Cloud Run
- Codelab لعرض كيفية استخدام استدعاء الدوال: كيفية استخدام استدعاء دوال Gemini مع Cloud Run
- دورة تدريبية لإنشاء رموز برمجية لاستخدام الذكاء الاصطناعي في معالجة محتوى الفيديو: كيفية استخدام واجهة برمجة التطبيقات Cloud Run Jobs Video Intelligence API لمعالجة الفيديو مشهدًا تلو الآخر