نشر تطبيق ويب Genkit لتكنولوجيات الذكاء الاصطناعي التوليدي (AI) المستندة إلى Node.js من نظام التحكم في الإصدارات إلى Cloud Run تلقائيًا

1. نظرة عامة

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

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

ما ستتعرّف عليه

  • كتابة تطبيق ويب باستخدام محرِّر Cloud Shell
  • تخزين رمز تطبيقك في GitHub
  • نشر تطبيقك تلقائيًا على Cloud Run
  • إضافة الذكاء الاصطناعي التوليدي إلى تطبيقك باستخدام Genkit
  • إدارة طلبات LLM باستخدام مكتبة dotprompt

2. المتطلبات الأساسية

  1. إذا لم يكن لديك حساب على Google، عليك إنشاء حساب على Google.
    • استخدام حساب شخصي بدلاً من حساب عمل أو حساب تديره مؤسسة تعليمية قد تفرض حسابات العمل والحسابات التي تديرها المؤسسات التعليمية قيودًا تمنعك من تفعيل واجهات برمجة التطبيقات اللازمة لهذا الدرس التطبيقي.
  2. إذا لم يكن لديك حساب على GitHub، عليك إنشاء حساب على GitHub

3- إعداد المشروع

  1. سجِّل الدخول إلى Google Cloud Console.
  2. فعِّل الفوترة في Cloud Console.
  3. أنشئ مشروعًا جديدًا أو اختَر إعادة استخدام مشروع حالي.
  4. تأكَّد من تفعيل الفوترة في مشاريعي في "الفوترة في السحابة الإلكترونية"
    • إذا كان مشروعك الجديد يعرض الرمز Billing is disabled في عمود Billing account:
      1. انقر على النقاط الثلاث في عمود Actions.
      2. انقر على تغيير الفوترة.
      3. اختَر حساب الفوترة الذي تريد استخدامه.
    • إذا كنت تشارك في حدث "الذكاء الاصطناعي العام للمطوّرين"، من المرجّح أن يكون اسم الحساب حساب فوترة الفترة التجريبية في Google Cloud Platform.

4. فتح محرِّر Cloud Shell

  1. انتقِل إلى محرر Cloud Shell.
  2. إذا لم تظهر المحطة الطرفية في أسفل الشاشة، افتح المحطة باتّباع الخطوات التالية:
    • انقر على قائمة الخطوط الثلاثة رمز قائمة الهمبرغر.
    • انقر على Terminal (الوحدة الطرفية).
    • انقر على وحدة تحكّم جديدةفتح وحدة طرفية جديدة في محرِّر Cloud Shell.
  3. في الوحدة الطرفية، اضبط مشروعك باستخدام الأمر التالي:
    • طبيعة الحضور:
      gcloud config set project [PROJECT_ID]
    • مثال:
      gcloud config set project lab-project-id-example
    • إذا لم تتذكر رقم تعريف المشروع:
      • يمكنك إدراج جميع أرقام تعريف مشاريعك باستخدام:
        gcloud projects list | awk '/PROJECT_ID/{print $2}'
      ضبط رقم تعريف المشروع في محطة محرِّر Cloud Shell
  4. إذا طُلب منك تفويض، انقر على تفويض للمتابعة. انقر على تفويض Cloud Shell.
  5. من المفترض أن تظهر لك هذه الرسالة:
    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

  1. اضبط البريد الإلكتروني لمستخدم git العام:
    git config --global user.email "you@example.com"
  2. اضبط اسم مستخدم git العام:
    git config --global user.name "Your Name"
  3. اضبط الفرع التلقائي العام في git على main:
    git config --global init.defaultBranch main

7- كتابة الرمز

لكتابة تطبيق في Node.js:

  1. انتقِل إلى الدليل الرئيسي:
    cd ~
  2. أنشئ الدليل codelab-genai:
    mkdir codelab-genai
  3. انتقِل إلى دليل codelab-genai:
    cd codelab-genai
  4. أنشئ ملف index.js:
    touch index.js
  5. أنشئ ملف package.json:
    npm init es6 -y
  6. إضافة express كعنصر تابع
    npm install express
  7. إضافة ملف .gitignore لمنع مشاركة node_modules
    echo node_modules/ >> .gitignore
  8. افتح ملف index.js في محرِّر Cloud Shell:
    cloudshell edit index.js
    من المفترض أن يظهر الآن ملف فارغ في الجزء العلوي من الشاشة. يمكنك هنا تعديل ملف index.js هذا. يُرجى إظهار أنّ الرمز يظهر في أعلى الشاشة.
  9. انسخ الرمز التالي والصقه في ملف index.js الذي تم فتحه:
    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}`);
});
    بعد بضع ثوانٍ، سيحفظ محرِّر Cloud Shell الرمز تلقائيًا. يستجيب هذا الرمز لطلبات http باستخدام رسالة الترحيب "مرحبًا بالجميع".

اكتمل الرمز البرمجي الأوّلي لتطبيقك وأصبح جاهزًا للتخزين في نظام التحكّم في الإصدارات.

8. إنشاء مستودع

  1. ارجع إلى وحدة تحكّم Cloud Shell في أسفل الشاشة.
  2. تأكَّد من أنّك لا تزال في الدليل الصحيح:
    cd ~/codelab-genai
  3. بدء مستودع git
    git init -b main
  4. تسجيل الدخول إلى واجهة برمجة التطبيقات في GitHub
    gh auth login
    اضغط على Enter لقبول الخيارات التلقائية واتّبِع التعليمات الواردة في أداة GitHub CLI، بما في ذلك:
    1. ما هو الحساب الذي تريد تسجيل الدخول إليه؟ GitHub.com
    2. ما هو البروتوكول المفضّل لعمليات Git على هذا المضيف؟ HTTPS
    3. هل تريد مصادقة Git باستخدام بيانات اعتماد GitHub؟ Y (تخطّ هذه الخطوة إذا لم يظهر هذا الخيار.)
    4. كيف تريد مصادقة GitHub CLI؟ Login with a web browser
    5. نسخ الرمز المُستخدَم لمرة واحدة
    6. افتح https://github.com/login/device.
    7. الصِق الرمز المخصّص لمرة واحدة.
    8. انقر على تفويض GitHub.
    9. إكمال عملية تسجيل الدخول
  5. تأكَّد من تسجيل الدخول:
    gh api user -q ".login"
    في حال تسجيل الدخول بنجاح، من المفترض أن يعرض هذا الإجراء اسم المستخدم الخاص بك على GitHub.
  6. إنشاء متغيّر GITHUB_USERNAME
    GITHUB_USERNAME=$(gh api user -q ".login")
  7. تأكَّد من أنّك أنشأت متغيّر البيئة:
    echo ${GITHUB_USERNAME}
    إذا نجحت في إنشاء المتغيّر، من المفترض أن يعرض هذا الإجراء اسم المستخدم الخاص بك على GitHub.
  8. أنشئ مستودع GitHub فارغًا باسم codelab-genai:
    gh repo create codelab-genai --private
    إذا ظهرت لك رسالة الخطأ التالية:
    GraphQL: Name already exists on this account (createRepository)
    هذا يعني أنّ لديك مستودعًا باسم codelab-genai. لديك خياران لمواصلة اتّباع هذا الدليل التعليمي:
  9. أضِف مستودع codelab-genai كـ origin عن بُعد:
    git remote add origin https://github.com/${GITHUB_USERNAME}/codelab-genai

9. مشاركة الرمز

  1. تأكَّد من أنّك في الدليل الصحيح:
    cd ~/codelab-genai
  2. أضِف جميع الملفات في الدليل الحالي إلى هذا الإصدار:
    git add .
  3. أنشئ أول عملية إرسال:
    git commit -m "add http server"
  4. ادفع عملية الإضافة إلى فرع 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. إعداد عمليات النشر التلقائية

  1. اترك علامة التبويب "محرِّر Cloud Shell" مفتوحة. سنعود إلى علامة التبويب هذه لاحقًا.
  2. في علامة تبويب جديدة، انتقِل إلى صفحة Cloud Run.
  3. اختَر مشروع Google Cloud الصحيح في وحدة التحكّم القائمة المنسدلة لمشاريع Google Cloud Console.
  4. انقر على ربط المستودع.
  5. انقر على الإعداد باستخدام Cloud Build
      .
    1. اختَر GitHub كموفِّر المستودع
        .
      • إذا لم تكن مسجِّلاً الدخول إلى حسابك على GitHub في المتصفّح، سجِّل الدخول باستخدام بيانات الاعتماد.
    2. انقر على مصادقة، ثم انقر على متابعة.
    3. بعد تسجيل الدخول، ستظهر لك رسالة في صفحة Cloud Run تفيد بأنّ لم يتم تثبيت تطبيق GitHub على أي من مستودعاتك.
    4. انقر على الزر INSTALL GOOGLE CLOUD BUILD (تثبيت Google Cloud Build).
      • في صفحة "إعداد عملية التثبيت"، اختَر اختيار مستودعات محدّدة فقط واختَر مستودع codelab-genai الذي أنشأته من خلال وحدة تحكّم سطر الأوامر.
      • انقر على تثبيت.
      • ملاحظة: إذا كان لديك الكثير من مستودعات GitHub، قد يستغرق تحميلها بضع دقائق.
    5. اختَر your-user-name/codelab-genai كـ المستودع
        .
      • إذا لم يكن المستودع متوفّرًا، انقر على الرابط إدارة المستودعات المرتبطة.
    6. ترك Branch على القيمة ^main$
    7. انقر على Go أو Node.js أو Python أو Java أو ‎.NET Core أو Ruby أو PHP من خلال حِزم الإنشاء في Google Cloud
        .
      • اترك الحقول الأخرى (Build context directory وEntrypoint وFunction target) كما هي.
    8. انقر على حفظ.
  6. انتقِل للأسفل إلى المصادقة.
  7. انقر على السماح بطلبات البيانات غير المعتمَدة.
  8. انقر على إنشاء.

بعد اكتمال عملية الإنشاء (التي ستستغرق عدة دقائق)، نفِّذ هذا الأمر وانتقِل إلى عنوان 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 لا يزال مفتوحًا، يمكنك تخطّي هذه الخطوات.

  1. انتقِل إلى محرر Cloud Shell.
  2. إذا لم تظهر المحطة الطرفية في أسفل الشاشة، افتح المحطة باتّباع الخطوات التالية:
    • انقر على قائمة الخطوط الثلاثة رمز قائمة الهمبرغر.
    • انقر على Terminal (الوحدة الطرفية).
    • انقر على وحدة تحكّم جديدةفتح وحدة طرفية جديدة في محرِّر Cloud Shell.
  3. في الوحدة الطرفية، اضبط مشروعك باستخدام الأمر التالي:
    • طبيعة الحضور:
      gcloud config set project [PROJECT_ID]
    • مثال:
      gcloud config set project lab-project-id-example
    • إذا لم تتذكر رقم تعريف المشروع:
      • يمكنك إدراج جميع أرقام تعريف مشاريعك باستخدام:
        gcloud projects list | awk '/PROJECT_ID/{print $2}'
      ضبط رقم تعريف المشروع في محطة محرِّر Cloud Shell
  4. إذا طُلب منك تفويض، انقر على تفويض للمتابعة. انقر على تفويض Cloud Shell.
  5. من المفترض أن تظهر لك هذه الرسالة:
    Updated property [core/project].
    إذا ظهر لك رمز WARNING وتلقّيت رسالة Do you want to continue (Y/N)?، هذا يعني على الأرجح أنّك أدخلت رقم تعريف المشروع بشكل غير صحيح. اضغط على N، ثم اضغط على Enter، وحاول تنفيذ الأمر gcloud config set project مرة أخرى.

إضافة Genkit وVertex AI إلى تطبيقك

  1. ارجع إلى وحدة تحكّم Cloud Shell في أسفل الشاشة.
  2. تأكَّد من أنّك لا تزال في الدليل الصحيح:
    cd ~/codelab-genai
  3. ثبِّت حزمة تطوير البرامج (SDK) لـ Node.js Genkit:
    npm install @genkit-ai/ai
  4. ثبِّت حزمة تطوير البرامج (SDK) لـ Node.js Genkit في Vertex AI:
    npm install @genkit-ai/vertexai
  5. إعادة فتح index.js في محرِّر Cloud Shell
    cloudshell edit ~/codelab-genai/index.js
  6. استبدِل الرمز في ملف 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}`);
});
  1. تأكَّد من أنّك لا تزال في الدليل الصحيح في Cloud Shell:
    cd ~/codelab-genai
  2. شغِّل هذه الأوامر لإرسال إصدار جديد من تطبيقك إلى مستودع git المحلي:
    git add .
git commit -m "add latest changes"
  3. ادفع التغييرات إلى GitHub:
    git push
  4. بعد انتهاء عملية الإنشاء، شغِّل الأمر التالي وانتقِل إلى تطبيقك المنشور:
    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

  1. ارجع إلى وحدة تحكّم Cloud Shell في أسفل الشاشة.
  2. تأكَّد من أنّك لا تزال في الدليل الصحيح:
    cd ~/codelab-genai
  3. أنشئ مجلدًا prompts لتخزين طلباتك:
    mkdir prompts
  4. أنشئ ملفًا بتنسيق animal-facts.prompt لإنشاء الطلب الأول:
    touch prompts/animal-facts.prompt
  5. افتح ملف animal-facts.prompt في محرِّر Cloud Shell:
    cloudshell edit ~/codelab-genai/prompts/animal-facts.prompt
  6. عدِّل 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.
  7. افتح ملف index.js في محرِّر Cloud Shell:
    cloudshell edit ~/codelab-genai/index.js
  8. استبدِل الرمز في ملف 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}`);
});
  1. تأكَّد من أنّك لا تزال في الدليل الصحيح في Cloud Shell:
    cd ~/codelab-genai
  2. شغِّل هذه الأوامر لإرسال إصدار جديد من تطبيقك إلى مستودع git المحلي:
    git add .
git commit -m "add latest changes"
  3. ادفع التغييرات إلى GitHub:
    git push
  4. بعد انتهاء عملية الإنشاء، شغِّل الأمر التالي وانتقِل إلى تطبيقك المنشور:
    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 ملفًا في الخطوة السابقة.

  1. ارجع إلى وحدة تحكّم Cloud Shell في أسفل الشاشة.
  2. تأكَّد من أنّك لا تزال في الدليل الصحيح:
    cd ~/codelab-genai
  3. افتح ملف animal-facts.prompt في محرِّر Cloud Shell:
    cloudshell edit ~/codelab-genai/prompts/animal-facts.prompt
  4. عدِّل 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}}
  1. تأكَّد من أنّك لا تزال في الدليل الصحيح في Cloud Shell:
    cd ~/codelab-genai
  2. شغِّل هذه الأوامر لإرسال إصدار جديد من تطبيقك إلى مستودع git المحلي:
    git add .
git commit -m "add latest changes"
  3. ادفع التغييرات إلى GitHub:
    git push
  4. بعد انتهاء عملية الإنشاء، شغِّل الأمر التالي وانتقِل إلى تطبيقك المنشور:
    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 لنشر تطبيقك تلقائيًا عند إجراء تغيير على الرمز المصدر لتطبيقك. بعد ذلك، عدّلت طلبك ونشرته مرة أخرى.

إذا استمتعت بهذه التجربة، يمكنك تجربتها مرة أخرى بلغة ترميز أو إطار عمل آخرَين:

في ما يلي بعض الخيارات لمواصلة التعلّم: