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

במדריך הזה תלמדו איך להשתמש ב-App Prototyping agent כדי לפתח ולפרסם במהירות אפליקציה של סטאק מלא בעזרת Gemini ב-Firebase. נשתמש בהנחיה בשפה טבעית כדי ליצור אפליקציית Next.js שמזהה פריטים של מזון מתמונה או ממצלמה בדפדפן, ומספקת מתכון שמכיל את המרכיבים שזוהו. לאחר מכן תוכלו לשפר את האפליקציה ולפרסם אותה ב-Firebase App Hosting.

.

טכנולוגיות נוספות שבהן תשתמשו במהלך המדריך הזה כוללות:

• סביבת עבודה ב-Firebase Studio
• פרויקט Firebase
• Firebase App Hosting

שלב 1: יצירת האפליקציה

1. מתחברים לחשבון Google ופותחים את Firebase Studio.

2. בשדה Prototype an app with AI, מזינים תיאור של האפליקציה שרוצים ליצור. לפתרון הזה, שבו אתם יוצרים אפליקציה של מתכונים שמבוססת על תמונות, תוכלו להשתמש בהנחיה כמו זו כדי ליצור אב טיפוס של אפליקציה שמשתמשת במצלמה וב-AI גנרטיבי:

   Build a web app that can identify food products from an uploaded picture or
   in-browser camera. The app should provide a recipe that contains the
   identified ingredients.
   

3. לוחצים על אב טיפוס באמצעות AI.

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

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

   • לוחצים על editCustomize ועורכים את תוכנית האב ישירות. מבצעים את השינויים הרצויים ולוחצים על שמירה.

   • בשדה תיאור… בחלונית הצ'אט, מוסיפים שאלות להבהרה והקשר. אפשר גם להעלות תמונות נוספות.

5. לוחצים על Prototype this app. Gemini מתחיל לכתוב את הקוד של האפליקציה. מאחר שבתיאור האפליקציה מתוארות תכונות שדורשות בינה מלאכותית גנרטיבית, Gemini יבקש מכם להזין מפתח Gemini API.

6. מוסיפים מפתח Gemini API משלכם או לוחצים על Auto-generate כדי ליצור מפתח Gemini API.

שלב 2: בדיקה, שיפור, ניפוי באגים וחזרה על התהליך

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

1. בודקים את האפליקציה ומקיימים איתה אינטראקציה: אחרי יצירת הקוד, תוצג תצוגה מקדימה של האפליקציה. אתם יכולים לבצע פעולות בתצוגה המקדימה ישירות כדי לבדוק אותה.

2. שיפורים באפליקציה: אפשר להמשיך להשתמש בממשק הצ'אט כדי לבקש מ-Gemini להוסיף תכונות ולשפר את האפליקציה. לחלופין, אפשר ללחוץ על מעבר לקוד כדי לפתוח את התצוגה Code, שבה אפשר לערוך את הקוד ישירות במרחב העבודה Firebase Studio.

3. בדיקת האפליקציה: בחלונית התצוגה המקדימה של האפליקציה, מעלים תמונה שמוצגים בה מאכלים שונים כדי לבדוק את היכולת של האפליקציה לזהות את המרכיבים ולספק מתכון. אפשר גם להשתמש בתצוגה Code כדי לשתף את האפליקציה באופן זמני וציבורי באמצעות Firebase Studio תצוגות מקדימות ציבוריות.

4. ניפוי באגים באפליקציה: פותחים את Code בלחיצה על מעבר לקוד כדי לפתוח את התצוגה Code, שבה אפשר להשתמש בתכונות הניפוי והדיווח המובנות של Firebase Studio כדי לבדוק, לנפות באגים ולבצע ביקורת על האפליקציה. אפשר לחזור לתצוגה App Prototyping agent בכל שלב.

5. חזרה על התהליך: אם האפליקציה לא פועלת כצפוי, תוכלו לשפר את ההנחיה, להשתמש בחלונית הצ'אט כדי לבקש מ-Gemini לשפר את האפליקציה או לערוך את הקוד ישירות Code.

(אופציונלי) שלב 3: מפרסמים את האפליקציה באמצעות App Hosting

אחרי שבודקים את האפליקציה ומרוצים ממנה, אפשר לפרסם אותה באינטרנט באמצעות Firebase App Hosting.

כדי להשתמש ב-

כשמגדירים את App Hosting, המערכת של Firebase Studio יוצרת בשבילכם פרויקט Firebase ומדריכה אתכם בקישור של חשבון Cloud Billing.

כדי לפרסם את האפליקציה ב-Firebase App Hosting:

1. לוחצים על Publish כדי ליצור פרויקט Firebase חדש ולהתחיל את App Hosting ההגדרה. החלונית פרסום האפליקציה תופיע.

2. בשלב פרויקט Firebase, מציינים את השם של פרויקט Firebase שנוצר בשבילכם ולוחצים על הבא.

3. בשלב קישור חשבון Cloud Billing, בוחרים באחת מהאפשרויות הבאות:

   • בוחרים את חשבון Cloud Billing שרוצים לקשר לפרויקט ב-Firebase.

   • אם אין לכם חשבון Cloud Billing או שאתם רוצים ליצור חשבון חדש, לוחצים על יצירת חשבון Cloud Billing. המסוף Google Cloud ייפתח, שבו תוכלו ליצור חשבון Cloud Billing חדש בניהול עצמי. אחרי שיוצרים את החשבון, חוזרים אל Firebase Studio ובוחרים את החשבון מהרשימה Link Cloud Billing.

4. לוחצים על הבא. המפתח Firebase Studio מקשר את החשבון לחיוב לפרויקט שמשויך למרחב העבודה שלכם. המפתח נוצר כשיצרתם מפתח Gemini API באופן אוטומטי או כשלחצתם על פרסום. לאחר מכן, App Hosting מגדיר סביבה מנוהלת לאפליקציה ב-Google Cloud.

5. לוחצים על יצירת ההשקה הראשונה. Firebase Studio מתחיל את ההשקה של App Hosting. התהליך עשוי להימשך עד 10 דקות. מידע נוסף על מה שקורה מאחורי הקלעים זמין במאמר תהליך ה-build של App Hosting.

6. בסיום ההשקה, תופיע סקירה כללית של האפליקציה עם כתובת URL ותובנות על האפליקציה שמבוססות על יכולת התצפית של App Hosting. כדי להשתמש בדומיין מותאם אישית (כמו example.com או app.example.com) במקום בדומיין שנוצר על ידי Firebase, אפשר להוסיף דומיין מותאם אישית במסוף Firebase.

למידע נוסף על App Hosting, ראו הסבר על App Hosting ועל אופן הפעולה שלו.

(אופציונלי) שלב 4: מעקב אחרי האפליקציה

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

• לוחצים על Create rollout (יצירת השקה) כדי להשיק גרסה חדשה של האפליקציה.
• משתפים את הקישור לאפליקציה או פותחים אותה ישירות בקטע כניסה לאפליקציה.
• בודקים סיכום של ביצועי האפליקציה ב-7 הימים האחרונים, כולל המספר הכולל של הבקשות והסטטוס של ההשקה האחרונה. לוחצים על הצגת פרטים כדי לגשת למידע נוסף במסוף Firebase.
• הצגת תרשים של מספר הבקשות שהאפליקציה קיבלה ב-24 השעות האחרונות, לפי קוד סטטוס HTTP.

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

מידע נוסף על ניהול השקות של App Hosting ועל מעקב אחריהן זמין במאמר ניהול השקות ופרסומים.

(אופציונלי) שלב 5: החזרה לאחור של הפריסה

אם פרסתם גרסאות עוקבות של האפליקציה ב-App Hosting, תוכלו לחזור לאחת מהגרסאות הקודמות. אפשר גם להסיר אותו.

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

  1. פותחים את App Hosting במסוף Firebase.

  2. מאתרים את הקצה העורפי של האפליקציה, לוחצים על View (תצוגה) ואז על Rollouts (השקות).

  3. לצד הפריסה שאליה רוצים לחזור, לוחצים על עוד more_vert, בוחרים באפשרות חזרה לגרסה הזו ומאשרים.

  מידע נוסף זמין במאמר ניהול השקות ופרסומים.

• כדי להסיר את הדומיין App Hosting מהאינטרנט:

  1. במסוף Firebase, פותחים את App Hosting ולוחצים על View בקטע של האפליקציה Firebase Studio.

  2. בקטע פרטי הקצה העורפי, לוחצים על ניהול. הדף Domains נטען.

  3. לצד הדומיין, לוחצים על סמל האפשרויות הנוספות more_vert, בוחרים באפשרות השבתה של הדומיין ומאשרים.

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

(אופציונלי) שלב 6: שימוש ב-Genkit Monitoring לתכונות שנפרסו

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

כדי להגדיר מעקב ב-Genkit, מוסיפים טלמטריה לתהליכי ה-AI של Genkit ומעיינים בתוצאות במסוף Firebase.

שלב 1: מוסיפים טלמטריה לקוד של תהליך Genkit ב-Firebase Studio

כדי להגדיר מעקב בקוד:

1. אם עדיין לא נמצאים בתצוגה Code, לוחצים על Switch to Code כדי לפתוח אותה.

2. בודקים את package.json כדי לוודא איזו גרסה של Genkit מותקנת.

3. פותחים את הטרמינל (Ctrl-Shift-C או Cmd-Shift-C ב-MacOS).

4. לוחצים בתוך מסוף ה-CLI ומתקינים את הפלאגין של Firebase באמצעות הגרסה שתואמת לקובץ package.json. לדוגמה, אם הגרסה של החבילות Genkit ב-package.json היא 1.0.4, צריך להריץ את הפקודה הבאה כדי להתקין את הפלאגין:

   npm i --save @genkit-ai/firebase@1.0.4

5. ב-Explorer, מרחיבים את src > ai > flows. בתיקייה flows מופיע קובץ TypeScript אחד או יותר שמכיל את תהליכי העבודה של Genkit.

6. לוחצים על אחד מהתהליכים כדי לפתוח אותו.

7. בתחתית הקטע imports בקובץ, מוסיפים את הקטע הבא לייבוא ומפעילים את FirebaseTelemetry:

   import { enableFirebaseTelemetry } from '@genkit-ai/firebase';
   
   enableFirebaseTelemetry();
   

שלב 2: הגדרת ההרשאות

Firebase Studio הפעיל בשבילכם את ממשקי ה-API הנדרשים כשהגדיר את פרויקט Firebase, אבל אתם צריכים גם לספק הרשאות לחשבון השירות App Hosting.

כדי להגדיר הרשאות:

1. פותחים את מסוף IAM‏ Google Cloud, בוחרים את הפרויקט ומקצים את התפקידים הבאים לחשבון השירות של אירוח האפליקציות:

   • כתיבה של מדדי מעקב (roles/monitoring.metricWriter)
   • Cloud Trace Agent‏ (roles/cloudtrace.agent)
   • כתיבה ביומן (roles/logging.logWriter)

2. מפרסמים מחדש את האפליקציה ב-App Hosting.

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

שלב 3: מעקב אחר התכונות של ה-AI הגנרטיבי במסוף Firebase

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

כדי לעקוב אחרי התכונות מבוססות-ה-AI שהופעלו באמצעות Genkit:

1. אחרי חמש דקות, פותחים את Genkit במסוף Firebase ובודקים את ההנחיות והתשובות של Genkit.

   Genkit אוסף את מדדי היציבות הבאים:

   • סה"כ בקשות: המספר הכולל של הבקשות שהתקבלו בתהליך.
   • שיעור ההצלחה: אחוז הבקשות שטופלו בהצלחה.
   • זמן אחזור של המאיון ה-95: זמן האחזור של המאיון ה-95 בתהליך, שהוא הזמן שלוקח לעבד 95% מהבקשות.

   • שימוש בטוקנים:

     • אסימוני קלט: מספר האסימונים שנשלחים למודל בהנחיה.
     • אסימוני פלט: מספר האסימונים שנוצרו על ידי המודל בתגובה.

   • שימוש בתמונות:

     • תמונות קלט: מספר התמונות שנשלחות למודל בהנחיה.
     • תמונות פלט: מספר התמונות שהמודל יצר בתגובה.

   אם מרחיבים את מדדי היציבות, מוצגים תרשימים מפורטים:

   • נפח הבקשות לאורך זמן.
   • שיעור ההצלחה לאורך זמן.
   • טוקני קלט ופלט לאורך זמן.
   • זמן האחזור (אחוזון 95 ואחוזון 50) לאורך זמן.

מידע נוסף על Genkit זמין בכתובת Genkit.

השלבים הבאים

• איך מפתחים אפליקציות בסביבת עבודה של Firebase Studio
• מידע נוסף על עזרה מבוססת-AI ב-Firebase Studio