النشر التلقائي لتطبيق الويب Node.js Genkit للذكاء الاصطناعي التوليدي من "التحكُّم في الإصدار" إلى "التشغيل في السحابة الإلكترونية"

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. فتح محرِّر 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 CLI
    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 مرة أخرى.

إضافة 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. ثبِّت حزمة تطوير البرامج (SDK) لـ Google Auth في Node.js:
    npm install google-auth-library
  6. إعادة فتح index.js في محرِّر Cloud Shell
    cloudshell edit ~/codelab-genai/index.js
  7. استبدِل الرمز في ملف index.js بما يلي:
    import express from 'express';
const app = express();

import { generate } from '@genkit-ai/ai';
import { gemini15Flash, vertexAI } from '@genkit-ai/vertexai';

import { GoogleAuth } from 'google-auth-library';
const auth = new GoogleAuth();

app.get('/', async (req, res) => {
    const project = await auth.getProjectId();

    const animal = req.query.animal || 'dog';
    const prompt = `Give me 10 fun facts about ${animal}. Return this as html without backticks.`
    const result = await generate({
        plugins: [
            vertexAI({ projectId: project, location: 'us-central1' }),
        ],
        model: gemini15Flash,
        prompt,
    });
    const html = result.text;
    res.send(html);
});

const port = process.env.PORT || 8080;
app.listen(port, () => {
    console.log(`codelab-genai: listening on port ${port}`);
});

12. إعادة النشر

  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. (اختياري) تدقيق استخدامك لخدمة Vertex AI

كما هو الحال مع خدمات Google Cloud الأخرى، يمكنك تدقيق عمليات Vertex AI. تساعدك سجلات التدقيق في الإجابة عن الأسئلة التالية: "من فعل ماذا وأين ومتى؟". يتم تفعيل سجلات التدقيق الإدارية في Vertex AI تلقائيًا. للتدقيق في طلبات إنشاء المحتوى، عليك تفعيل سجلّات تدقيق الوصول إلى البيانات:

  1. في وحدة تحكّم Google Cloud، انتقِل إلى صفحة سجلّات التدقيق:

    إذا كنت تستخدم شريط البحث للعثور على هذه الصفحة، اختَر النتيجة التي يكون العنوان الفرعي لها هو إدارة الهوية وإمكانية الوصول والمشرف.
  2. تأكَّد من أنّ مشروع Google Cloud الحالي هو المشروع الذي أنشأت فيه تطبيقك على Cloud Run.
  3. في جدول إعداد سجلات التدقيق في الوصول إلى البيانات، ابحث عن Vertex AI API من عمود "الخدمة".
  4. في علامة التبويب أنواع السجلّ، اختَر نوعَي سجلّ تدقيق الوصول إلى البيانات Admin read وData read.
  5. انقر على حفظ.

بعد تفعيلها، ستتمكّن من الاطّلاع على سجلّات التدقيق لكلّ عملية تشغيل للتطبيق. للاطّلاع على سجلّات التدقيق التي تتضمّن تفاصيل الاستدعاء، اتّبِع الخطوات التالية:

  1. ارجع إلى تطبيقك المنشور وأعِد تحميل الصفحة لبدء السجلّ.
  2. في وحدة تحكّم Google Cloud، انتقِل إلى صفحة مستكشف السجلّات:

  3. في نافذة طلب البحث، اكتب:
    LOG_ID("cloudaudit.googleapis.com%2Fdata_access")
protoPayload.serviceName="aiplatform.googleapis.com"
  4. انقر على Run query (تنفيذ طلب البحث).

تسجِّل سجلات التدقيق استخدام واجهة برمجة التطبيقات Vertex AI API، ولكنها لا تسمح لك بمراقبة البيانات المتعلّقة بحمولة العمل، مثل الطلبات أو تفاصيل الردود.

14. (اختياري) زيادة إمكانية مراقبة عبء عمل الذكاء الاصطناعي

لا تُسجِّل سجلّات التدقيق المعلومات المتعلّقة بحمولة العمل. لزيادة إمكانية مراقبة أعباء العمل، عليك تسجيل هذه المعلومات صراحةً. يمكنك استخدام إطار عمل التسجيل المفضّل لديك لإجراء ذلك. توضّح الخطوات التالية كيفية إجراء ذلك باستخدام آلية تسجيل Node.js الأصلية.

  1. إعادة فتح index.js في محرِّر Cloud Shell
    cloudshell edit ~/codelab-genai/index.js
  2. بعد طلب await generativeModel.generateContent(prompt) (السطر 19)، أضِف السطر التالي:
        console.log(JSON.stringify({
        severity: 'DEBUG',
        message: 'Content is generated',
        prompt: prompt,
        response: resp.response,
    }));
    تُسجِّل هذه التعليمات البرمجية في stdout معلومات عن المحتوى الذي تم إنشاؤه باستخدام تنسيق التسجيل المُنظَّم. يُسجِّل وكيل التسجيل في Cloud Run الإخراج المطبوع على stdout ويُسجِّل هذا التنسيق في Cloud Logging.
  3. أعِد فتح Cloud Shell واكتب الأمر التالي للتأكّد من أنّك في الدليل الصحيح:
    cd ~/codelab-genai
  4. تأكيد التغييرات:
    git commit -am "observe generated content"
  5. ادفع التغييرات إلى GitHub لبدء إعادة نشر الإصدار المعدَّل:
    git push

بعد نشر الإصدار الجديد، يمكنك مراقبة معلومات تصحيح الأخطاء حول طلبات البيانات إلى Vertex AI.

للاطّلاع على سجلّات تطبيقك، اتّبِع الخطوات التالية:

  1. في وحدة تحكّم Google Cloud، انتقِل إلى صفحة مستكشف السجلّات:

  2. في نافذة طلب البحث، اكتب:
    LOG_ID("run.googleapis.com%2Fstdout")
severity=DEBUG
  3. انقر على Run query (تنفيذ طلب البحث).

تعرِض نتيجة طلب البحث سجلّات تتضمّن الطلب وردّ Vertex AI، بما في ذلك "تقييمات السلامة" التي يمكن استخدامها لرصد ممارسات السلامة.

15. (اختياري) التنظيف

على الرغم من أنّ Cloud Run لا تحصّل رسومًا عندما تكون الخدمة غير مستخدَمة، قد يستمر تحصيل رسوم منك مقابل تخزين صورة الحاوية في Artifact Registry. يمكنك حذف مشروعك على Cloud لتجنُّب تحمُّل رسوم. يؤدي حذف مشروعك على Cloud إلى إيقاف الفوترة لجميع الموارد المستخدَمة في ذلك المشروع.

إذا أردت حذف المشروع، اتّبِع الخطوات التالية:

gcloud projects delete $GOOGLE_CLOUD_PROJECT

يمكنك أيضًا حذف الموارد غير الضرورية من قرص Cloudshell. يمكنك إجراء ما يلي:

  1. احذف دليل مشروع Codelab: 
    rm -rf ~/codelab-genai
  2. تحذير! لا يمكن التراجع عن هذا الإجراء. إذا أردت حذف كل المحتوى على Cloud Shell لإخلاء بعض المساحة، يمكنك حذف الدليل الرئيسي كاملاً. يُرجى التأكّد من حفظ كل المحتوى الذي تريد الاحتفاظ به في مكان آخر. 
    sudo rm -rf $HOME

16. تهانينا

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

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

إذا كنت مهتمًا بالمشاركة في دراسة بحثية حول تجربة المستخدم لتحسين المنتجات التي استخدمتها اليوم، يُرجى التسجيل هنا.

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