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

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

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

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

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

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

    לדוגמה, כדי ליצור אפליקציה ליצירת מתכונים, אפשר להזין הנחיה כמו זו:

    Use secure coding practices to create an error-free web app that lets
    users upload a photo or take a picture with their browser
    camera. The app identifies the food in the picture and generates a
    recipe and accompanying image that includes that food.
    
    If no food product is identified, generate a random dessert recipe.
    
  3. אם רוצים, אפשר להעלות תמונה שתלווה את ההנחיה. לדוגמה, אפשר להעלות תמונה שמכילה את ערכת הצבעים שבה רוצים להשתמש באפליקציה, ולהורות ל-Firebase Studio להשתמש בה. התמונות חייבות להיות קטנות מ-3MB.

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

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

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

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

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

  6. לוחצים על Prototype this app (יצירת אב טיפוס לאפליקציה הזו).

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

    • מכיוון שהאפליקציה שלכם משתמשת ב-AI, תתבקשו להוסיף או ליצור מפתח Gemini API. אם לוחצים על 'יצירה אוטומטית', ה-App Prototyping agent יוצר בשבילכם פרויקט Firebase ומפתח Gemini API.

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

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

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

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

    אם מופיעות שגיאות שלא מופיעה עבורן בקשה לפתרון אוטומטי, מעתיקים את השגיאה ואת כל ההקשר הרלוונטי (לדוגמה, "האם אפשר לתקן את השגיאה הזו בקוד ההפעלה של Firebase?") לחלון הצ'אט ושולחים אותו אל Gemini.

  • בדיקה וחזרה על תהליך היצירה באמצעות שפה טבעית: בודקים את האפליקציה ביסודיות ומשתמשים ב-App Prototyping agent כדי לבצע שינויים בקוד ובתוכנית עד שמגיעים לתוצאה הרצויה.

    בזמן שמטיילים בPrototyper mode, you can also use the following features:

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

    • לוחצים על בוחרים סמל Select כדי לבחור רכיב ספציפי ולהזין הוראות ל-App Prototyping agent. כך תוכלו לטרגט במהירות סמל, לחצן, קטע טקסט או רכיב אחר. כשלוחצים על תמונה, אפשר גם לחפש תמונה סטוק ב-Unsplash ולבחור אותה.

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

  • ניפוי באגים וחזרה על פעולות ישירות בקוד: לוחצים על סמל של מעבר בין קודים מעבר לקוד כדי לפתוח את התצוגה Code, שבה אפשר לראות את כל הקבצים של האפליקציה ולשנות את הקוד ישירות. אפשר לחזור ל-Prototyper mode at any time.

    בתצוגה Code אפשר גם להשתמש בתכונות המועילות הבאות:

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

    כדי לטעון את תהליכי העבודה של Genkit בממשק המשתמש של Genkit למפתחים ולהתחיל לבדוק אותם:

    1. בטרמינל בסביבת העבודה Firebase Studio, מריצים את הפקודה הבאה כדי לאתר את מפתח Gemini API ולהפעיל את שרת Genkit:

       npm run genkit:watch
      
    2. לוחצים על הקישור של ממשק המשתמש למפתחים של Genkit. ממשק המשתמש של Genkit למפתחים נפתח בחלון חדש עם התהליכים, ההנחיות, התוספים להטמעה (embedders) וסל של מודלים שונים שזמינים.

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

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

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

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

כדי לפרסם את האפליקציה:

  1. לוחצים על Publish (פרסום) כדי להגדיר את פרויקט Firebase ולפרסם את האפליקציה. הקטע Publish your app (פרסום האפליקציה) יופיע.

  2. בשלב פרויקט Firebase, ב-App Prototyping agent מוצג חשבון Firebase שמשויך למרחב העבודה. אם לא נוצר פרויקט במהלך יצירת המפתח Gemini API, המערכת תיצור בשבילכם פרויקט חדש. לוחצים על הבא כדי להמשיך.

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

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

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

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

  5. לוחצים על הגדרת שירותים. הסוכן ליצירת אב טיפוס של אפליקציות מתחיל להקצות את שירותי Firebase.

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

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

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

(מומלץ) שלב 6: מוסיפים את Firebase App Check לאפליקציה

אם שילבתם את Firebase או שירותי Google Cloud באפליקציה שלכם, Firebase App Check עוזר להגן על הקצוות העורפיים של האפליקציה מפני ניצול לרעה על ידי מניעת הגישה של לקוחות לא מורשים למשאבי Firebase. הוא פועל עם שירותי Google (כולל Firebase ושירותי Google Cloud) ועם קצוות עורפיים מותאמים אישית משלכם, כדי לשמור על בטיחות המשאבים.

מומלץ להוסיף את App Check לכל אפליקציה שאתם מפרסמים באופן ציבורי כדי להגן על משאבי הקצה העורפי מפני ניצול לרעה.

בקטע הזה מוסבר איך מגדירים את App Check ב-Firebase Studio באמצעות reCAPTCHA Enterprise לאפליקציית אינטרנט שנוצרה על ידי App Prototyping agent, אבל אפשר להגדיר את App Check בכל אפליקציה שמטמיעה שירותי Firebase ויכולה להטמיע ספקים מותאמים אישית. מידע נוסף זמין בכתובת Firebase App Check.

ב-reCAPTCHA Enterprise אפשר לבצע עד 10,000 בדיקות ללא עלות.

שלב 1: מגדירים את reCAPTCHA Enterprise לאפליקציה

  1. פותחים את הקטע reCAPTCHA Enterprise במסוף Google Cloud.

  2. בוחרים את שם הפרויקט ב-Firebase מבורר הפרויקטים במסוף Google Cloud.

  3. אם מופיעה בקשה להפעיל את reCAPTCHA Enterprise API, מבצעים זאת.

  4. לוחצים על תחילת העבודה ומוסיפים שם לתצוגה למפתח האתר של reCAPTCHA.

  5. מאשרים את המפתח Application type (סוג אפליקציה) שמוגדר כברירת מחדל ל-Web (אינטרנט).

  6. לוחצים על הוספת דומיין ומוסיפים דומיין. מומלץ להוסיף את הדומיין App Hosting (לדוגמה, studio--PROJECT_ID.REGION.hosted.app) ואת כל הדומיינים המותאמים אישית שבהם אתם משתמשים באפליקציה או מתכננים להשתמש בהם.

  7. לוחצים על השלב הבא.

  8. משאירים את התיבה האם תשתמשו באתגרים? ללא סימון.

  9. לוחצים על Create key.

  10. מעתיקים את מזהה המפתח ושומרים אותו, וממשיכים אל הגדרת App Check.

שלב 2: מגדירים את App Check

  1. פותחים את מסוף Firebase ולוחצים על Build > App Check בתפריט הניווט.

  2. לוחצים על שנתחיל? ואז על רישום לצד האפליקציה.

  3. לוחצים כדי להרחיב את ReCAPTCHA ומדביקים את מזהה המפתח שיצרתם ל-reCAPTCHA Enterprise.

  4. לוחצים על שמירה.

שלב 3: מוסיפים את App Check לקוד

  1. חוזרים אל Firebase Studio ובתצוגה Code מוסיפים את מפתח האתר שיצרתם לקובץ .env:

    NEXT_PUBLIC_RECAPTCHA_SITE_KEY=RECAPTCHA_SITE_KEY
    
  2. אם עדיין לא שמרתם את ההגדרות של Firebase ב-.env, תוכלו לקבל אותן:

    • במסוף Firebase, פותחים את Project settings ומאתרים אותו בקטע שמתאים לאפליקציה.

    • ב-Terminal בתצוגה Code:

      1. מתחברים ל-Firebase: firebase auth login
      2. בוחרים את הפרויקט: firebase use FIREBASE_PROJECT_ID
      3. מקבלים את קובץ התצורה של Firebase: firebase apps:sdkconfig
  3. מוסיפים את ההגדרות לקובץ .env כך שייראה כך:

    NEXT_PUBLIC_FIREBASE_API_KEY=FIREBASE_API_KEY
    NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=FIREBASE_AUTH_DOMAIN
    NEXT_PUBLIC_FIREBASE_PROJECT_ID=FIREBASE_PROJECT_ID
    NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=FIREBASE_STORAGE_BUCKET
    NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=FIREBASE_MESSAGING_SENDER_ID
    NEXT_PUBLIC_FIREBASE_APP_ID=FIREBASE_APP_ID
    NEXT_PUBLIC_RECAPTCHA_SITE_KEY=RECAPTCHA_SITE_KEY
    
  4. מוסיפים את App Check לקוד האפליקציה. אתם יכולים לבקש מ-Gemini להוסיף את App Check עם reCAPTCHA Enterprise לאפליקציה (חשוב לציין 'reCAPTCHA Enterprise' ולבדוק שוב!), או לפעול לפי השלבים שמפורטים בקטע הפעלת App Check.

  5. מפרסמים מחדש את האתר ב-App Hosting. נסו לבדוק את התכונות של Firebase כדי ליצור נתונים.

  6. פותחים את Build > App Check במסוף Firebase כדי לוודא ש-App Check מקבל בקשות.

  7. לוחצים כדי לבדוק את שירותי Firebase. אחרי שמוודאים שהבקשות מגיעות, לוחצים על Enforce (אכיפה) כדי לאכוף את App Check.

  8. חוזרים על תהליך האימות והאכיפה עבור Firebase Authentication.

אם אחרי הרשמת האפליקציה ל-App Check, אתם רוצים להריץ את האפליקציה בסביבה שבדרך כלל App Check לא מסווגת כתקינה, למשל בסביבה המקומית במהלך הפיתוח או מסביבת שילוב רצוף (CI), תוכלו ליצור גרסה לניפוי באגים של האפליקציה שמשתמשת בספק ניפוי הבאגים של App Check במקום בספק אימות אמיתי. מידע נוסף זמין במאמר שימוש ב-App Check עם ספק ניפוי הבאגים באפליקציות אינטרנט.

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

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

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

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

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

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

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

  • כדי לבטל את הפרסום של אתר:

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

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

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

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

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

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

    2. בקטע Backend information, לוחצים על Manage. הדף Domains נטען.

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

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

(אופציונלי) שלב 9: שימוש ב-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. קובץ TypeScript אחד או יותר שמכיל את תהליכי Genkit מופיע בתיקייה flows.

  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.

השלבים הבאים