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

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

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

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

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

  2. בשדה Prototype an app with AI (יצירת אב טיפוס של אפליקציה באמצעות 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 להשתמש בה. התמונות חייבות להיות קטנות מ-3MiB.

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

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

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

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

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

  6. לוחצים על יצירת אב טיפוס של האפליקציה הזו.

  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 תבצע.

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

    אופציונלי: אפשר ללחוץ על קישור סמל Share preview link (שיתוף קישור לתצוגה מקדימה) כדי לשתף את האפליקציה באופן ציבורי וזמני באמצעות Firebase Studio תצוגות מקדימות ציבוריות.

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

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

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

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

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

       npm run genkit:watch

    2. לוחצים על הקישור לממשק המשתמש למפתחים של Genkit. ממשק המשתמש למפתחים של Genkit ייפתח בחלון חדש עם התהליכים, ההנחיות, רכיבי ה-Embedder ומבחר של מודלים שונים שזמינים.

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

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

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

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

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

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

  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 או כשנכנסתם אל פרסום.

    App Hosting

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

  6. לוחצים על פרסום עכשיו. ‫Firebase Studio מגדיר שירותי Firebase . התהליך עשוי להימשך כמה דקות. מידע נוסף על מה שקורה מאחורי הקלעים זמין במאמר בנושא תהליך הבנייה של 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. מאשרים את מפתח סוג האפליקציה Web שמוגדר כברירת מחדל.

  6. לוחצים על הוספת דומיין ומוסיפים דומיין. כדאי להוסיף את הדומיין App Hosting (לדוגמה, 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. לוחצים על Get started (תחילת העבודה) ואז על Register (הרשמה) לצד האפליקציה.

  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 (הגדרות הפרויקט) ומאתרים את המזהה בקטע שמתאים לאפליקציה.

    • מתוך תצוגת הטרמינל ב-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. כדי לוודא שמגיעות בקשות אל App Check במסוף, פותחים את Build (גרסה) > App Check (בדיקת אפליקציה).Firebase

  7. לוחצים כדי לבדוק את שירותי Firebase. אחרי שמוודאים שהבקשות מגיעות, לוחצים על החלה כדי להחיל את 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. מאתרים את העורף של האפליקציה, לוחצים על תצוגה ואז על השקות.

    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. לוחצים בתוך הטרמינל ומתקינים את הפלאגין של Firebase באמצעות הגרסה שמתאימה לקובץ package.json. לדוגמה, אם חבילות Genkit ב-package.json הן בגרסה 1.0.4, צריך להריץ את הפקודה הבאה כדי להתקין את הפלאגין:

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

  5. בכלי הניתוח, מרחיבים את 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, בוחרים את הפרויקט ומקצים את התפקידים הבאים לחשבון השירות של App Hosting:

    • כתיבה של מדדי מעקב (roles/monitoring.metricWriter)
    • ‫Cloud Trace Agent‏ (roles/cloudtrace.agent)
    • Logs Writer (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.

השלבים הבאים