פריסה אוטומטית של אפליקציית אינטרנט של AI גנרטיבי ב-Node.js Genkit ממערכת בקרת הגרסאות ל-Cloud Run

1. סקירה כללית

פריסת אפליקציית אינטרנט בפעם הראשונה יכולה להיות משימה מאיימת. גם אחרי הפריסה הראשונה, אם התהליך מסובך מדי, יכול להיות שתמנעו מפריסה של גרסאות חדשות של האפליקציה. בעזרת פריסה רציפה, אתם יכולים לפרוס שינויים באפליקציה שלכם בקלות ובאופן אוטומטי.

במעבדה הזו תכתבו אפליקציית אינטרנט ותגדירו את Cloud Run כך שהאפליקציה תיפרס אוטומטית כשמתבצע שינוי בקוד המקור שלה. לאחר מכן משנים את הבקשה ומפרסמים אותה מחדש.

מה תלמדו

כתיבת אפליקציית אינטרנט באמצעות Cloud Shell Editor
שמירת קוד האפליקציה ב-GitHub
פריסה אוטומטית של האפליקציה ב-Cloud Run

הוספת AI גנרטיבי לאפליקציה באמצעות Genkit
ניהול הנחיות ל-LLM באמצעות ספריית dotprompt

2. דרישות מוקדמות

אם אין לכם חשבון Google, אתם צריכים ליצור חשבון Google.
- משתמשים בחשבון לשימוש אישי במקום בחשבון לצורכי עבודה או בחשבון בית ספרי. יכול להיות שבחשבונות לצורכי עבודה או בחשבונות בית ספריים יש הגבלות שימנעו מכם להפעיל את ממשקי ה-API שנדרשים למעבדה הזו.
אם אין לכם חשבון ב-GitHub, אתם צריכים ליצור חשבון ב-GitHub
- אם יש לכם חשבון GitHub קיים, אתם יכולים להשתמש בו. יש סיכוי גבוה יותר ש-GitHub יחסום חשבון חדש כספאם.
- כדי להקטין את הסיכוי שהחשבון שלכם יסומן כספאם, מומלץ להגדיר אימות דו-שלבי בחשבון GitHub.

3. הגדרת הפרויקט

נכנסים ל-מסוף Google Cloud.
מפעילים את החיוב במסוף Cloud.
- העלות של השלמת ה-Lab הזה במשאבי Cloud צריכה להיות פחות מ-1$.
- כדי למחוק משאבים ולמנוע חיובים נוספים, אפשר לבצע את השלבים בסוף ה-Lab הזה.
- משתמשים חדשים זכאים לתקופת ניסיון בחינם בשווי 300$.
- מגיעים לאירוע של Gen AI for Devs? יכול להיות שתוכלו לקבל קרדיט בסך 1$.
יוצרים פרויקט חדש או בוחרים להשתמש מחדש בפרויקט קיים.
מוודאים שהחיוב מופעל בדף My projects (הפרויקטים שלי) בחיוב ב-Cloud
- אם הפרויקט החדש מופיע עם הערך Billing is disabled בעמודה Billing account:
  1. לוחצים על סמל האפשרויות הנוספות (3 נקודות) בעמודה Actions.
  2. לוחצים על שינוי פרטי החיוב.
  3. בוחרים את החשבון לחיוב שבו רוצים להשתמש.
- אם אתם משתתפים באירוע Gen AI for Devs, סביר להניח שהשם של החשבון יהיה Google Cloud Platform Trial Billing Account

4. פתיחת Cloud Shell Editor

עוברים אל Cloud Shell Editor.
אם הטרמינל לא מופיע בתחתית המסך, פותחים אותו:
- לוחצים על סמל האפשרויות הנוספות (3 קווים) .
- לוחצים על Terminal (מסוף).
- לוחצים על New 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. הפעלת ממשקי ה-API

בטרמינל, מפעילים את ממשקי ה-API:

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 Editor:
```
cloudshell edit index.js
```
קובץ ריק אמור להופיע בחלק העליון של המסך. כאן אפשר לערוך את הקובץ index.js.

מעתיקים את הקוד הבא ומדביקים אותו בקובץ 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 Editor ישמור את הקוד באופן אוטומטי. הקוד הזה מגיב לבקשות HTTP עם הודעת הפתיחה 'Hello world!‎'.

הקוד הראשוני של האפליקציה מוכן לאחסון בניהול גרסאות.

8. יצירת מאגר

חוזרים לטרמינל של Cloud Shell בתחתית המסך.
מוודאים שאתם עדיין בספרייה הנכונה:
```
cd ~/codelab-genai
```
אתחול מאגר Git
```
git init -b main
```
התחברות אל 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. לוחצים על Authorize github (אישור גישה ל-GitHub).
9. השלמת הכניסה
מוודאים שאתם מחוברים לחשבון:
‫
```
gh api user -q ".login"
```
אם הכניסה הצליחה, הפקודה הזו אמורה להחזיר את שם המשתמש שלכם ב-GitHub.

יצירת משתנה GITHUB_USERNAME

GITHUB_USERNAME=$(gh api user -q ".login")

מוודאים שיצרתם את משתנה הסביבה:
```
echo ${GITHUB_USERNAME}
```
אם יצרתם את המשתנה בהצלחה, שם המשתמש שלכם ב-GitHub אמור להיות מוצג.
יוצרים מאגר ריק ב-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 Editor פתוחה. נחזור לכרטיסייה הזו בהמשך.
בכרטיסייה חדשה, נכנסים אל הדף Cloud Run.
בוחרים את הפרויקט הנכון ב-Google Cloud במסוף
לוחצים על CONNECT REPO (קישור מאגר)
לוחצים על SET UP WITH CLOUD BUILD
1. בוחרים באפשרות GitHub בתור ספק המאגר
  - אם לא נכנסתם לחשבון GitHub בדפדפן, נכנסים באמצעות פרטי הכניסה.
2. לוחצים על אימות ואז על המשך.
3. אחרי שמתחברים, מוצגת הודעה בדף Cloud Run: The GitHub App is not installed on any of your repositories (אפליקציית GitHub לא מותקנת באף אחד מהמאגרים שלך).
4. לוחצים על הלחצן INSTALL GOOGLE CLOUD BUILD (התקנת Google Cloud Build).
  - בדף Installation Setup (הגדרת ההתקנה), בוחרים באפשרות Only select repositories (בחירת מאגרים בלבד) ובוחרים במאגר codelab-genai שיצרתם באמצעות CLI.
  - לוחצים על התקנה.
  - הערה: אם יש לכם הרבה מאגרי GitHub, יכול להיות שיעברו כמה דקות עד שהם ייטענו.
5. בוחרים באפשרות your-user-name/codelab-genai בתור מאגר
  - אם המאגר לא מופיע, לוחצים על הקישור ניהול מאגרי מידע מקושרים.
6. עזיבת Branch בתור ^main$
7. לוחצים על Go, ‏ Node.js, ‏ Python, ‏ Java,‏ ‎.NET Core, ‏ Ruby או PHP באמצעות buildpacks של Google Cloud
  - משאירים את השדות האחרים (Build context directory,‏ Entrypoint ו-Function target) כמו שהם.
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 Editor

אם Cloud Shell Editor עדיין פתוח, אפשר לדלג על השלבים האלה.

עוברים אל Cloud Shell Editor.
אם הטרמינל לא מופיע בתחתית המסך, פותחים אותו:
- לוחצים על סמל האפשרויות הנוספות (3 קווים) .
- לוחצים על Terminal (מסוף).
- לוחצים על New 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
```
מתקינים את Node.js Genkit SDK:
```
npm install @genkit-ai/ai
```
מתקינים את Node.js Genkit SDK ל-Vertex AI:
```
npm install @genkit-ai/vertexai
```
פתיחה מחדש של index.js ב-Cloud Shell Editor
```
cloudshell 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
```

אחרי שה-build מסתיים, מריצים את הפקודה הזו ועוברים לאפליקציה שפרסתם:

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"

יכול להיות שיחלפו כמה דקות עד שה-build יסתיים והשינויים יופיעו.

אפשר לראות את ההיסטוריה של כל השינויים כאן: 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 Editor:
```
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 Editor:
```
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
```

אחרי שה-build מסתיים, מריצים את הפקודה הזו ועוברים לאפליקציה שפרסתם:

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"

יכול להיות שיחלפו כמה דקות עד שה-build יסתיים והשינויים יופיעו.

אפשר לראות את ההיסטוריה של כל השינויים כאן: https://console.cloud.google.com/run/detail/us-central1/codelab-genai/revisions

13. (אופציונלי) שימוש בהנחיות מערכת

בשלב הזה אנחנו מניחים שכבר הוספתם קובצי .prompt בשלב הקודם.

חוזרים לטרמינל של Cloud Shell בתחתית המסך.
מוודאים שאתם עדיין בספרייה הנכונה:
```
cd ~/codelab-genai
```
פותחים את הקובץ animal-facts.prompt ב-Cloud Shell Editor:
```
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
```

אחרי שה-build מסתיים, מריצים את הפקודה הזו ועוברים לאפליקציה שפרסתם:

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"

יכול להיות שיחלפו כמה דקות עד שה-build יסתיים והשינויים יופיעו.

אפשר לראות את ההיסטוריה של כל השינויים כאן: https://console.cloud.google.com/run/detail/us-central1/codelab-genai/revisions

14. מזל טוב

במעבדה הזו כתבתם אפליקציית אינטרנט והגדרתם את Cloud Run כך שהאפליקציה תיפרס אוטומטית כשמתבצע שינוי בקוד המקור שלה. לאחר מכן שיניתם את הבקשה ופרסתם אותה שוב.

אם נהניתם מהמעבדה הזו, אתם יכולים לנסות אותה שוב בשפת תכנות או במסגרת אחרת:

ריכזנו כאן כמה אפשרויות להמשך הלמידה:

מסמכי Genkit: תחילת העבודה
Codelab להוספת יכולות ניטור לאפליקציית Node.js: Practical observability techniques for Generative AI application in Javascript
Codelab להוספת קצה קדמי לאפליקציה באמצעות Next.js: ‏ פריסה אוטומטית של אפליקציית אינטרנט גנרטיבית מבוססת-AI ב-Next.js מתוך ניהול גרסאות אל Cloud Run
Codelab שמראה איך להשתמש בבקשה להפעלת פונקציה: איך משתמשים בבקשה להפעלת פונקציה של Gemini עם Cloud Run
‫Codelab לשימוש ב-AI לעיבוד תוכן וידאו: איך משתמשים ב-Cloud Run Jobs Video Intelligence API כדי לעבד סצנה אחר סצנה בסרטון

פריסה אוטומטית של אפליקציית אינטרנט של AI גנרטיבי ב-Node.js Genkit ממערכת בקרת הגרסאות ל-Cloud Run קל לארגן דפים בעזרת אוספים אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.

1. סקירה כללית

מה תלמדו

2. דרישות מוקדמות

3. הגדרת הפרויקט

4. פתיחת Cloud Shell Editor

5. הפעלת ממשקי ה-API

6. הגדרת Git

7. כתיבת הקוד

8. יצירת מאגר

9. שיתוף הקוד

10. הגדרת פריסות אוטומטיות

11. שינוי הקוד

חזרה ל-Cloud Shell Editor

הוספת Genkit ו-Vertex AI לאפליקציה

12. (אופציונלי) שימוש בקובצי ‎ .prompt עם Genkit

13. (אופציונלי) שימוש בהנחיות מערכת

14. מזל טוב

פריסה אוטומטית של אפליקציית אינטרנט של AI גנרטיבי ב-Node.js Genkit ממערכת בקרת הגרסאות ל-Cloud Run