שימוש ב-Duet AI בכל מחזור החיים של פיתוח התוכנה

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

יום בחייו של מפתח ב-Google Cloud בדרך כלל כולל שימוש במספר מוצרים ושירותים של Google Cloud. המוצרים האלה מאפשרים למפתח לפתח, לבדוק, לפרוס ולנהל אפליקציות בענן. בעזרת Duet AI, מפתחים יכולים לשפר את הפרודוקטיביות שלהם כשהם משתמשים במוצרים של Google Cloud בעזרת הצ'אט האינטראקטיבי, העזרה בקוד והשילובים המוטמעים של Duet AI.

הערה: כטכנולוגיה בשלב מוקדם, Duet AI יכול ליצור פלט שנראה סביר, אבל למעשה הוא שגוי. מומלץ לאמת את כל הפלט מ-Duet AI לפני שמשתמשים בו. אפשר לקרוא מידע נוסף במאמר Duet AI ב-Google Cloud ובינה מלאכותית אחראית.

בשיעור ה-Lab הזה נעשה שימוש בעזרת Duet AI כדי לפרוס את Cymbal Superstore אפליקציית האינטרנט של מכולת. לאחר מכן מפתחים ותפרסו תכונה חדשה ותפתחו את הקצה הקדמי והעורפי של האפליקציה. בנוסף, תקבלו עזרה מ-Duet בכתיבת בדיקות לאפליקציה שלכם ואיך אפשר לשלב את Duet עם כלים אחרים של Google Cloud.

מטרות

נסביר לכם איך:

• שיפור אפליקציית אינטרנט קיימת בעזרת Duet AI.
• פריסת האפליקציה ב-Cloud Run.
• אפשר להנחות את Duet AI להסביר שגיאה באפליקציה ולספק תיקון.
• פיתוח בדיקות לאפליקציה בעזרת Duet AI.
• צפייה ביומני אפליקציות בעזרת Duet AI.

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

• חשבון Google Cloud Platform ופרויקט שהופעלה בו חיוב
• חוויית Linux בסיסית

2. הגדרה

בחלק הזה נסביר את כל מה שצריך לעשות כדי להתחיל את שיעור ה-Lab הזה.

יוצרים פרויקט

כדי שיהיה לך קל יותר לבצע את הניקיון, כדאי ליצור פרויקט חדש ב-Google Cloud.

• עוברים אל https://console.cloud.google.com.
• לוחצים על התפריט הנפתח של בורר הפרויקטים.
• בוחרים באפשרות 'יצירת פרויקט'
• מומלץ לתת לו שם בלתי נשכח, כמו מבוא לקונטיינרים

הפעלת Duet AI בפרויקט ב-Google Cloud

עכשיו נפעיל את Duet AI API בפרויקט שלנו ב-Google Cloud. כך תעשו זאת:

1. נכנסים למרכז הבקרה בכתובת https://console.cloud.google.com ומוודאים שבחרתם את הפרויקט ב-Google Cloud שאיתו אתם מתכננים לעבוד בשיעור ה-Lab הזה. לוחצים על הסמל של Duet AI שמופיע בפינה השמאלית העליונה.

2. חלון הצ'אט של Duet AI ייפתח בצד שמאל של המסוף. לוחצים על הלחצן 'הפעלה' כמו שמוצג למטה. אם הלחצן 'הפעלה' לא מופיע ומופיע ממשק Chat, כנראה שכבר הפעלתם את Duet AI בפרויקט, ואתם יכולים לעבור ישירות לשלב הבא.

3. אחרי שמפעילים את התכונה, אפשר לשאול אותה שאילתה או שתיים כדי לנסות את Duet AI. מוצגות כמה שאילתות לדוגמה, אבל אפשר לנסות לשאול משהו כמו "מה זה Cloud Run?"

Duet AI יענה לך על השאלה שלך. אפשר ללחוץ על הסמל _ בפינה השמאלית העליונה כדי לסגור את חלון הצ'אט של Duet AI.

הפעלת Duet AI ב-Cloud Shell IDE

נשתמש ב-Cloud Shell IDE לשאר ה-Codelab. אנחנו צריכים להפעיל ולהגדיר את Duet AI בסביבת הפיתוח המשולבת של Cloud Shell, לפי השלבים הבאים:

1. מפעילים את Cloud Shell דרך הסמל שמוצג למטה. ההפעלה של המכונה של Cloud Shell עשויה להימשך דקה או שתיים.

2. לוחצים על הלחצן Editor או על Open Editor (בהתאם למצב) ומחכים עד שה-IDE של Cloud Shell יופיע. אתם תשתמשו בלחצן "החדש" עם העורך הישן, ולא בגרסה הקודמת.

3. לוחצים על הלחצן Cloud Code – כניסה בשורת הסטטוס התחתונה, כפי שמוצג. מאשרים את הפלאגין לפי ההוראות. אם מופיעה ההודעה Cloud Code – אין פרויקט בשורת הסטטוס, בוחרים את הפרויקט הספציפי ב-Google Cloud מרשימת הפרויקטים שרוצים לעבוד איתם.

4. לוחצים על הלחצן של Duet AI בפינה השמאלית התחתונה כמו שמוצג ובוחרים את הפרויקט הנכון ב-Google Cloud שבשבילו הפעלנו את Cloud AI Companion API.

5. אחרי שבוחרים את הפרויקט ב-Google Cloud ומאשרים אותו, חשוב לוודא שאפשר לראות זאת בהודעת הסטטוס של Cloud Code בשורת הסטטוס, ושגם Duet AI מופעל בצד שמאל, בשורת הסטטוס שמוצגת כאן:

Duet AI מוכן לשימוש!

3. באמצעות Duet AI

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

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

הערה: כטכנולוגיה בשלב מוקדם, Duet AI יכול ליצור פלט שנראה סביר, אבל למעשה הוא שגוי. מומלץ לאמת את כל הפלט מ-Duet AI לפני שמשתמשים בו. אפשר לקרוא מידע נוסף במאמר Duet AI ב-Google Cloud ובינה מלאכותית אחראית.

4. פיתוח גרסת build של אפליקציית האינטרנט

בשיעור ה-Lab הזה נעשה שימוש ב-Cymbal Superstore אפליקציית האינטרנט של מכולת. במשימות הבאות בשיעור ה-Lab הזה תשתמשו ב-Duet AI כדי לפתח ולפרוס תכונה חדשה באפליקציה הזו. כדי לראות איך Duet AI עוזר להבין את הקוד הקיים, צריך קוד קיים כדי לעבוד איתו, אז בונים את הרכיבים של הקצה העורפי וממשק הקצה של האפליקציה עכשיו.

במהלך העבודה על הפרויקט הזה עוברים בין Cloud Shell ל-Cloud Shell Editor. אפשר לעשות זאת בקלות באמצעות הלחצנים שבחלק העליון של המסך:

הגדרת הסביבה

מריצים את הפקודות ב-Cloud Shell.

1. מגדירים את מזהה הפרויקט:

gcloud config set project <Google Cloud Project ID>

2. כדי להריץ את כלי העזר של פרטי הכניסה ל-Docker, מריצים את הפקודה הבאה:

gcloud auth configure-docker

3. כשמוצגת השאלה אם אתם רוצים להמשיך, מקלידים Y.
4. כדי להוריד את Cymbal Superstore מריצים את הפקודה הבאה מספריית השורש ב-Cloud Shell. הוא יקבל את הקוד של Cymbal Superstore מ-GitHub.

git clone https://github.com/GoogleCloudPlatform/cymbal-superstore

5. יש להפעיל מספר ממשקי API כדי שהקוד יפעל באופן תקין. ב-Cloud Shell, מזינים את הפקודה הבאה:

gcloud services enable cloudresourcemanager.googleapis.com compute.googleapis.com artifactregistry.googleapis.com serviceusage.googleapis.com run.googleapis.com bigquery.googleapis.com 

6. עוברים לספריית Terraform בקוד שהורדתם:

cd cymbal-superstore/terraform

5. מכיוון שבשיעור ה-Lab הזה לא ייעשה שימוש ב-Spanner, נשתמש בגרסה של ההוראות של Terraform שלא מתקינים את Spanner. ב-Cloud Shell, מזינים את הפקודה הבאה:

mv main.tf.nospanner main.tf

8. כדי שלא תצטרכו להזין את השם והמספר של הפרויקט בכל פעם שמריצים פקודות Terraform, אתם צריכים ליצור קובץ בשם terraform.tfvars בספרייה הזו terraform. צריך להוסיף שתי שורות לקובץ הזה עם הפרטים שלמטה ולשמור את הקובץ. תוכלו למצוא את המידע הזה במרכז הבקרה של הפרויקט.

project_id="Your project id"
project_number=Your project number

9. מאתחלים את Terraform באמצעות השורה:

terraform init

10. לבסוף, פורסים את המשאבים של Terraform בפרויקט באמצעות הפקודה הבאה. יכול להיות שתתבקשו להקליד 'כן' במהלך הפריסה הזו. התהליך עשוי להימשך עד 10 דקות, ולכן כדאי להקדיש זמן כדי לבחון את תרשים הארכיטקטורה בכתובת https://github.com/GoogleCloudPlatform/cymbal-superstore/blob/main/assets/architecture.png. אתם יכולים גם לבדוק את הקוד הקיים ולהשתמש ב-Duet כדי לעזור לנו להבין אותו.

terraform apply

אחרי שהפקודה הזו תסתיים בהצלחה, הפלט אמור להיראות כך:

11. צריך לעדכן את הקצה הקדמי כדי לדבר עם הקצה העורפי inventory_cr_endpoint בפלט. כדי לעשות זאת, מעתיקים את הערך של inventory_cr_endpoint, פותחים את cymbal-superstore/frontend/.env.production ומחליפים את הערך של REACT_APP_INVENTORY_URL.
12. מפעילים מחדש את terraform apply. הפעולה תימשך רק דקה, כי אפליקציית React מהחזית תיפרס מחדש ב-Cloud Storage באמצעות כתובת ה-URL המעודכנת לקצה העורפי.
13. פותחים את frontend_ip בדפדפן. אתם אמורים לראות את החזית של Cymbal Superstore. יכול להיות שיעברו כמה דקות עד שהשינויים ייכנסו לתוקף, כך שתצטרכו לבדוק יותר מפעם אחת.

14. לוחצים על 'הגעה חדשה' בצד ימין של דף הבית של Cymbal. אמור להופיע דף חזיתי מדומה עם מוצרים מציינים placeholder. זה צפוי, כי אתם תטמיעו את הקוד של הקצה העורפי של Inventory API כדי להציג את דף המוצרים החדשים במשימה הבאה של שיעור ה-Lab הזה.

אם אינך רואה את האפליקציה בדפדפן, עליך לבדוק כדי לוודא ש-Cloud Run נפרס כראוי. לשם כך:

• עוברים אל Cloud Run מהתפריט הראשי במסוף Cloud.
• בוחרים את השירות inventory מרשימת השירותים.
• בוחרים באפשרות 'תיקונים' בכרטיסיות שבדף המלאי.

• מוודאים שהאפליקציה Cloud Run פרוסה כאשר ציפיתם שהיא תהיה:

אם היא לא פרוסה, אפשר לפרוס אותה על ידי בחירה באפשרות 'עריכה' מחיקת תיקון חדש בחלק העליון של הדף ואישור ערכי ברירת המחדל.

5. שינוי הקצה העורפי של אפליקציית האינטרנט

מעכשיו נשתמש ב-Duet AI כדי להוסיף פונקציונליות לקצה העורפי של אפליקציית האינטרנט שלנו.

במשימה הזאת מבקשים מ-Duet AI להשלים את הקוד כדי להטמיע את נקודת הקצה /newproducts באפליקציה. צריך ליצור נקודת קצה בקצה העורפי כדי לאחזר את המוצרים החדשים מ-Firestore ולבדוק את נקודת הקצה הזו לפני פריסת השינוי.

פיתוח נקודת הקצה /newproducts

1. פותחים את הקובץ cymbal-superstore/backend/index.ts בעורך Cloud Shell.
2. בקובץ index.ts, גוללים לתגובה של DEMO TASK START, בסביבות שורה 95, שבה מוצגת קבוצה של שורות שנוספו לתגובה למשימה הזו. מסירים את כל השורות עם התגובות ומחליפים אותן בהנחיה הבאה של Duet AI:

// Get new products from Firestore (added < 7 days ago) and quantity > 0 (in stock)

3. כדי לבקש מ-Duet AI ליצור את קוד הפונקציה, בוחרים את התגובה כולה ולוחצים על הנורה ( ).
4. בתפריט 'פעולות נוספות' בוחרים באפשרות 'יצירת קוד'.
5. מעבירים את העכבר מעל הקוד שנוצר, ולוחצים על 'אישור' בסרגל הכלים של Duet AI. Duet AI מאכלס את קוד הפונקציה של נקודת הקצה /newproducts.

הערה: יכול להיות ש-Duet AI ייצור כמה גרסאות של הקוד להנחיה שלכם. כדי לבחור גרסה ספציפית, גוללים ברשימה שבסרגל הכלים.

6. הקוד שנוצר אמור להיות דומה לקוד הבא:

app.get("/newproducts", async (req: Request, res: Response) => {
  const products = await firestore
    .collection("inventory")
    .where("timestamp", ">", new Date(Date.now() - 604800000))
    .where("quantity", ">", 0)
    .get();
  const productsArray: any[] = [];
  products.forEach((product) => {
    const p: Product = {
      id: product.id,
      name: product.data().name,
      price: product.data().price,
      quantity: product.data().quantity,
      imgfile: product.data().imgfile,
      timestamp: product.data().timestamp,
      actualdateadded: product.data().actualdateadded,
    };
    productsArray.push(p);
  });
  res.send(productsArray);
});

יכול להיות ששורות רבות יסומנו בקו תחתון כדי להזהיר מפני בעיות אפשריות ברישוי. בשיעור ה-Lab הזה ניתן להשתמש ב'תיקון מהיר', אבל בעתיד כדאי לבדוק את האזהרות האלה.

7. אם הקוד שנוצר לא דומה לקוד בשלב הקודם, כדאי להחליף אותו עכשיו או לראות איך Duet יכול לעזור בניפוי הבאגים מאוחר יותר. קיימת גם גרסה של הקוד עם השגיאה הצפויה בקובץ scripts/solutioncode-with-bug.ts .
8. שומרים את קובץ ה-index.ts.

בדיקה וניפוי באגים של נקודת הקצה ב-/``newproducts

1. ב-Cloud Shell, עוברים לספרייה cymbal-superstore/backend. מזינים את הפקודה:

npm run start

הפעולה הזו תתחיל את נקודת הקצה.

2. כדי לראות את התוצאות של נקודת הקצה, פותחים טרמינל אחר באמצעות הסימן + בסרגל התפריטים ב-Cloud Shell ומריצים את הפקודה:

curl localhost:8000/newproducts

השגיאה curl: (52) Empty reply from server עשויה להופיע בטרמינל החדש והודעת שגיאה ארוכה עם הפרטים 'Cannot have inequality filters on multiple properties: [quantity, timestamp]' בטרמינל שמפעיל את נקודת הקצה.

3. בואו נתקן את השגיאה. אבל קודם כל אנחנו צריכים להבין מה המשמעות של הודעת השגיאה. כדי לעשות זאת, נשאל את Duet. פותחים את Duet AI Chat בתפריט שבצד ימין של Cloud Shell Editor ושואלים את השאלות הבאות:

I'm querying Cloud Firestore and getting this error: 'Cannot have inequality filters on multiple properties: [quantity, timestamp]' What does it mean?

Duet אמור לספק לך כמה אפשרויות לפתרון הבעיה, כולל הסרה של אחד מהמסננים של אי השוויון. כדי לפתור את הבעיה, צריך למחוק את השורה .where("quantity", ">", 0) מתוך index.ts כדי שיהיה לנו רק מסנן אחד בשאילתה.

4. חוזרים על שני השלבים הראשונים שלמעלה כדי להפעיל מחדש את השרת ולראות את רשימת המוצרים. הוא אמור להצליח עכשיו, אבל אם לא, אפשר להשתמש ב-Duet כדי לפתור את הבעיה (או להשתמש בפתרון המתוקן ב-scripts/solutioncode-bug-fixed.ts כדי להמשיך).

פריסת השינוי

כדי לפרוס את האפליקציה ששונתה, מריצים מחדש את הפקודה terraform apply מהספרייה terraform ב-Cloud Shell. לאחר מכן אפשר להציג את האפליקציה בכתובת ה-IP שסופקה ב-Terraform.

6. מבחנים בכתיבה

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

עכשיו ניצור בדיקות של הקוד newproducts שיצרנו.

1. פתיחת backend/index.test.ts. משתמשים בצ'אט של Duet AI כדי ליצור בדיקה של הפונקציה newproducts() לפי ההנחיה:

Help me write an Express.js test using Jest, in typescript, for the GET /newproducts handler in index.ts. Should check if the response code is 200 and the list of new products is length 8.

הוא יופיע בקובץ עם import שורות שכבר נמצאות בקובץ. מעתיקים רק את הבדיקה describe() לקובץ בשורות שצוינו. שומרים את הקובץ.

לחלופין, אפשר לשפר את ההנחיה ולהורות ל-Duet לא לכלול הצהרות ייבוא, כדי לקבל רק את הקוד שדרוש לך.

2. כדי לראות את תוצאות הבדיקה, נכנסים ל-Cloud Shell, משנים את הספרייה לתיקייה backend ומריצים את הפקודה:

npm run test

7. רישום ביומן

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

חוזרים למסוף Cloud ומוודאים ש-Duet פועל. לשאול את Duet איפה למצוא יומנים. אתם יכולים לנסות הנחיה משלכם, אבל אם התשובה לא מספקת תשובה מתאימה, ההנחיה הבאה אמורה לפעול.

How can I view the Cloud Run logs for the service called 'inventory'?

Duet AI צריך להציע לך לעבור לדף Cloud Run, לבחור את שירות המלאי ולאחר מכן לבחון את היומנים של אותו שירות. אתם אמורים לראות משהו כמו:

בוחרים אחד מהפריטים ומבקשים מ-Duet AI להסביר את זה. אתה אמור לקבל תיאור של הרשומה בשפה טבעית.

אפשר להציג את רשומות היומן גם ב-Logs Explorer. אפשר לפתוח אותו דרך האפשרות Logging בתפריט הראשי. היתרון של הצגת הרשומות ביומן מ-Logs Explorer הוא האפשרות מובנית להסביר את הרשומות, כפי שמוצג בהמשך:

8. מעולה!

מעולה – השתמשת בהצלחה ב-Duet AI כדי לעזור לך להבין קוד שאולי לא ראית בעבר. שיפרתם את הקוד הזה, יצרתם בדיקות עבורו ושימוש ב-Duet כדי להבין את רשומות היומן.

הסרת המשאבים

מחיקת הפרויקט

כדי לנקות, אנחנו פשוט מוחקים את הפרויקט שלנו.

• בתפריט הניווט, בוחרים באפשרות IAM & Admin (אדמין)
• לאחר מכן לוחצים על 'הגדרות' בתפריט המשנה
• לוחצים על סמל פח האשפה עם הטקסט "מחיקת פרויקט"
• פועלים לפי ההנחיות.

בשיעור ה-Lab הזה למדנו איך:

• שיפור אפליקציית אינטרנט קיימת בעזרת Duet AI.
• פריסת האפליקציה ב-Cloud Run.
• אפשר להנחות את Duet AI להסביר שגיאה באפליקציה ולספק תיקון.
• פיתוח בדיקות לאפליקציה בעזרת Duet AI.
• צפייה ביומני אפליקציות בעזרת Duet AI.