במדריך הזה נסביר איך להשתמש ב-App Prototyping agent כדי לפתח ולפרסם במהירות אפליקציה של סטאק מלא בעזרת Gemini ב-Firebase. נשתמש בהנחיה בשפה טבעית כדי ליצור אפליקציית Next.js שמזהה פריטים של מזון מתמונה או ממצלמה בדפדפן, ויוצרת מתכון שמכיל את המרכיבים שזוהו.
טכנולוגיות נוספות שבהן תשתמשו במהלך המדריך הזה כוללות:
שלב 1: יצירת האפליקציה
מתחברים לחשבון Google ופותחים את Firebase Studio.
בשדה 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.
אם רוצים, אפשר להעלות תמונה שתלווה את ההנחיה. לדוגמה, אפשר להעלות תמונה שמכילה את ערכת הצבעים שבה רוצים להשתמש באפליקציה, ולהורות ל-Firebase Studio להשתמש בה. התמונות חייבות להיות קטנות מ-3MB.
לוחצים על אב טיפוס באמצעות AI.
Gemini יוצר תוכנית לאפליקציה על סמך ההנחיה שלכם, ומציע שם לאפליקציה, את התכונות הנדרשות והנחיות לסגנון.
בודקים את תוכנית העבודה. אם צריך, מבצעים כמה שינויים. לדוגמה, תוכלו לשנות את שם האפליקציה או את ערכת הצבעים המוצעת באמצעות אחת מהאפשרויות הבאות:
לוחצים על
Customize ועורכים את תוכנית האב ישירות. מבצעים את השינויים הרצויים ולוחצים על שמירה.בשדה Describe… בחלונית הצ'אט, מוסיפים שאלות להבהרה והקשר. אפשר גם להעלות תמונות נוספות.
לוחצים על Prototype this app (יצירת אב טיפוס לאפליקציה הזו).
הסוכן ליצירת אב טיפוס של אפליקציה מתחיל לתכנת את האפליקציה.
- מכיוון שהאפליקציה שלכם משתמשת ב-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 אפשר גם להשתמש בתכונות המועילות הבאות:
תכונות ניפוי הבאגים והדיווח המובנות של Firebase Studio כדי לבדוק, לנפות באגים ולבצע ביקורת על האפליקציה.
עזרה מבוססת-AI באמצעות Gemini ב-Firebase, בין שבתוך הקוד ובין שבצ'אט אינטראקטיבי (שניהם זמינים כברירת מחדל). בצ'אט אינטראקטיבי אפשר לאבחן בעיות, לספק פתרונות ולהפעיל כלים שיעזרו לכם לתקן את האפליקציה מהר יותר. כדי לגשת לצ'אט, לוחצים על הלהבהGemini בתחתית סביבת העבודה.
גישה ל-Firebase Local Emulator Suite כדי להציג את נתוני מסד הנתונים ואת נתוני האימות כדי לפתוח את הסימולטור בסביבת העבודה:
לוחצים על
מעבר לקוד ופותחים את התוסף Firebase Studio (
Ctrl+',Ctrl+'
אוCmd+',Cmd+'
ב-MacOS).גוללים אל יציאות לקצה העורפי ומרחיבים אותה.
בעמודה Actions (פעולות) שתואמת ל-Port 4000 (יציאה 4000), לוחצים על Open in new window (פתיחה בחלון חדש).
בדיקה ומדידה של ביצועי התכונה של ה-AI הגנרטיבי: אתם יכולים להשתמש בממשק המשתמש למפתחים של Genkit כדי להריץ את תהליכי ה-AI של Genkit, לבדוק אותם, לנפות באגים, לקיים אינטראקציה עם מודלים שונים, לשפר את ההנחיות ועוד.
כדי לטעון את תהליכי העבודה של Genkit בממשק המשתמש של Genkit למפתחים ולהתחיל לבדוק אותם:
בטרמינל בסביבת העבודה Firebase Studio, מריצים את הפקודה הבאה כדי לאתר את מפתח Gemini API ולהפעיל את שרת Genkit:
npm run genkit:watch
לוחצים על הקישור של ממשק המשתמש למפתחים של Genkit. ממשק המשתמש של Genkit למפתחים נפתח בחלון חדש עם התהליכים, ההנחיות, התוספים להטמעה (embedders) וסל של מודלים שונים שזמינים.
מידע נוסף על ממשק המשתמש למפתחים של Genkit זמין במאמר כלים למפתחים של Genkit.
(אופציונלי) שלב 3: מפרסמים את האפליקציה באמצעות App Hosting
אחרי שבודקים את האפליקציה ומרוצים ממנה בסביבת העבודה, אפשר לפרסם אותה באינטרנט באמצעות Firebase App Hosting.
כשמגדירים את App Hosting, הספרייה Firebase Studio יוצרת בשבילכם פרויקט Firebase (אם עדיין לא נוצר פרויקט באמצעות יצירת מפתח Gemini API באופן אוטומטי) ומנחה אתכם בקישור של חשבון Cloud Billing.
כדי לפרסם את האפליקציה:
לוחצים על Publish (פרסום) כדי להגדיר את פרויקט Firebase ולפרסם את האפליקציה. הקטע Publish your app (פרסום האפליקציה) יופיע.
בשלב פרויקט Firebase, ב-App Prototyping agent מוצג חשבון Firebase שמשויך למרחב העבודה. אם לא נוצר פרויקט במהלך יצירת המפתח Gemini API, המערכת תיצור בשבילכם פרויקט חדש. לוחצים על הבא כדי להמשיך.
בשלב קישור חשבון Cloud Billing, בוחרים באחת מהאפשרויות הבאות:
בוחרים את חשבון Cloud Billing שרוצים לקשר לפרויקט ב-Firebase.
אם אין לכם חשבון Cloud Billing או שאתם רוצים ליצור חשבון חדש, לוחצים על יצירת חשבון Cloud Billing. המסוף Google Cloud ייפתח, שבו תוכלו ליצור חשבון Cloud Billing חדש בניהול עצמי. אחרי שיוצרים את החשבון, חוזרים אל Firebase Studio ובוחרים את החשבון מהרשימה Link Cloud Billing.
לוחצים על הבא. המפתח Firebase Studio מקשר את החשבון לחיוב לפרויקט שמשויך למרחב העבודה שלכם. המפתח נוצר כשיצרתם מפתח Gemini API באופן אוטומטי או כשלחצתם על פרסום.
לוחצים על הגדרת שירותים. הסוכן ליצירת אב טיפוס של אפליקציות מתחיל להקצות את שירותי Firebase.
לוחצים על פרסום. Firebase Studio מגדיר את שירותי Firebase. התהליך עשוי להימשך כמה דקות. מידע נוסף על מה שקורה מאחורי הקלעים זמין במאמר תהליך ה-build של App Hosting.
בסיום שלב הפרסום, תופיע סקירה כללית של האפליקציה עם כתובת 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 לאפליקציה
פותחים את הקטע reCAPTCHA Enterprise במסוף Google Cloud.
בוחרים את שם הפרויקט ב-Firebase מבורר הפרויקטים במסוף Google Cloud.
אם מופיעה בקשה להפעיל את reCAPTCHA Enterprise API, מבצעים זאת.
לוחצים על תחילת העבודה ומוסיפים שם לתצוגה למפתח האתר של reCAPTCHA.
מאשרים את המפתח Application type (סוג אפליקציה) שמוגדר כברירת מחדל ל-Web (אינטרנט).
לוחצים על הוספת דומיין ומוסיפים דומיין. מומלץ להוסיף את הדומיין App Hosting (לדוגמה,
studio--PROJECT_ID.REGION.hosted.app
) ואת כל הדומיינים המותאמים אישית שבהם אתם משתמשים באפליקציה או מתכננים להשתמש בהם.לוחצים על השלב הבא.
משאירים את התיבה האם תשתמשו באתגרים? ללא סימון.
לוחצים על Create key.
מעתיקים את מזהה המפתח ושומרים אותו, וממשיכים אל הגדרת App Check.
שלב 2: מגדירים את App Check
פותחים את מסוף Firebase ולוחצים על Build > App Check בתפריט הניווט.
לוחצים על שנתחיל? ואז על רישום לצד האפליקציה.
לוחצים כדי להרחיב את ReCAPTCHA ומדביקים את מזהה המפתח שיצרתם ל-reCAPTCHA Enterprise.
לוחצים על שמירה.
שלב 3: מוסיפים את App Check לקוד
חוזרים אל Firebase Studio ובתצוגה Code מוסיפים את מפתח האתר שיצרתם לקובץ
.env
:NEXT_PUBLIC_RECAPTCHA_SITE_KEY=RECAPTCHA_SITE_KEY
אם עדיין לא שמרתם את ההגדרות של Firebase ב-
.env
, תוכלו לקבל אותן:במסוף Firebase, פותחים את Project settings ומאתרים אותו בקטע שמתאים לאפליקציה.
ב-Terminal בתצוגה Code:
- מתחברים ל-Firebase:
firebase auth login
- בוחרים את הפרויקט:
firebase use FIREBASE_PROJECT_ID
- מקבלים את קובץ התצורה של Firebase:
firebase apps:sdkconfig
- מתחברים ל-Firebase:
מוסיפים את ההגדרות לקובץ
.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
מוסיפים את App Check לקוד האפליקציה. אתם יכולים לבקש מ-Gemini להוסיף את App Check עם reCAPTCHA Enterprise לאפליקציה (חשוב לציין 'reCAPTCHA Enterprise' ולבדוק שוב!), או לפעול לפי השלבים שמפורטים בקטע הפעלת App Check.
מפרסמים מחדש את האתר ב-App Hosting. נסו לבדוק את התכונות של Firebase כדי ליצור נתונים.
פותחים את Build > App Check במסוף Firebase כדי לוודא ש-App Check מקבל בקשות.
לוחצים כדי לבדוק את שירותי Firebase. אחרי שמוודאים שהבקשות מגיעות, לוחצים על Enforce (אכיפה) כדי לאכוף את App Check.
חוזרים על תהליך האימות והאכיפה עבור 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, תוכלו לחזור לאחת מהגרסאות הקודמות. אפשר גם להסיר אותו.
כדי לבטל את הפרסום של אתר:
פותחים את App Hosting במסוף Firebase.
מאתרים את הקצה העורפי של האפליקציה, לוחצים על View (תצוגה) ואז על Rollouts (השקות).
לצד הפריסה שאליה רוצים לחזור, לוחצים על עוד
, בוחרים באפשרות חזרה לגרסה הזו ומאשרים.
מידע נוסף זמין במאמר ניהול השקות ופרסומים.
כדי להסיר את הדומיין App Hosting מהאינטרנט:
במסוף Firebase, פותחים את App Hosting ולוחצים על View בקטע של האפליקציה Firebase Studio.
בקטע Backend information, לוחצים על Manage. הדף Domains נטען.
לצד הדומיין, לוחצים על סמל האפשרויות הנוספות
, בוחרים באפשרות השבתה של הדומיין ומאשרים.
הפעולה הזו מסירה את הדומיין מהאינטרנט. כדי להסיר את הקצה העורפי של App Hosting באופן מלא, פועלים לפי ההוראות במאמר מחיקת קצה עורפי.
(אופציונלי) שלב 9: שימוש ב-Genkit Monitoring לתכונות שנפרסו
כדי לעקוב אחר השלבים, הקלט והפלט של התכונה Genkit, צריך להפעיל טלמטריה בקוד של תהליך ה-AI. התכונה 'טלמטריה' ב-Genkit מאפשרת לכם לעקוב אחרי הביצועים והשימוש בתהליכי ה-AI שלכם. הנתונים האלה יכולים לעזור לכם לזהות תחומים לשיפור, לפתור בעיות, לבצע אופטימיזציה של ההנחיות והתהליכים כדי לשפר את הביצועים ואת היעילות מבחינת עלות, ולעקוב אחרי השימוש בתהליכים לאורך זמן.
כדי להגדיר מעקב ב-Genkit, מוסיפים טלמטריה לתהליכי ה-AI של Genkit ומעיינים בתוצאות במסוף Firebase.
שלב 1: מוסיפים טלמטריה לקוד של תהליך Genkit ב-Firebase Studio
כדי להגדיר מעקב בקוד:
אם עדיין לא נמצאים בתצוגה Code, לוחצים על
Switch to Code כדי לפתוח אותה.
בודקים את
package.json
כדי לוודא איזו גרסה של Genkit מותקנת.פותחים את הטרמינל (
Ctrl-Shift-C
אוCmd-Shift-C
ב-MacOS).לוחצים בתוך מסוף ה-CLI ומתקינים את הפלאגין של Firebase באמצעות הגרסה שתואמת לקובץ
package.json
. לדוגמה, אם הגרסה של החבילות Genkit ב-package.json
היא 1.0.4, צריך להריץ את הפקודה הבאה כדי להתקין את הפלאגין:npm i --save @genkit-ai/firebase@1.0.4
ב-Explorer, מרחיבים את
src > ai > flows
. קובץ TypeScript אחד או יותר שמכיל את תהליכי Genkit מופיע בתיקייהflows
.לוחצים על אחד מהתהליכים כדי לפתוח אותו.
בתחתית הקטע imports בקובץ, מוסיפים את הקטע הבא לייבוא ומפעילים את
FirebaseTelemetry
:import { enableFirebaseTelemetry } from '@genkit-ai/firebase'; enableFirebaseTelemetry();
שלב 2: מגדירים הרשאות
Firebase Studio הפעיל בשבילכם את ממשקי ה-API הנדרשים כשהגדיר את פרויקט Firebase, אבל אתם צריכים גם לספק הרשאות לחשבון השירות App Hosting.
כדי להגדיר הרשאות:
פותחים את מסוף IAM Google Cloud, בוחרים את הפרויקט ומקצים את התפקידים הבאים לחשבון השירות של אירוח האפליקציות:
- כתיבה של מדדי מעקב (
roles/monitoring.metricWriter
) - Cloud Trace Agent (
roles/cloudtrace.agent
) - כתיבה ביומן (
roles/logging.logWriter
)
- כתיבה של מדדי מעקב (
מפרסמים מחדש את האפליקציה ב-App Hosting.
בסיום הפרסום, אפשר לטעון את האפליקציה ולהתחיל להשתמש בה. אחרי חמש דקות, האפליקציה אמורה להתחיל לתעד נתוני טלמטריה.
שלב 3: מעקב אחרי התכונות של ה-AI הגנרטיבי במסוף Firebase
כשמגדירים טלמטריה, Genkit מתעד את מספר הבקשות, ההצלחות והזמן האחזור של כל התהליכים. לכל תהליך ספציפי, Genkit אוסף מדדי יציבות, מציג תרשימים מפורטים ומתעדה את הטרייסים שצולמו.
כדי לעקוב אחרי התכונות מבוססות-ה-AI שהופעלו באמצעות Genkit:
אחרי חמש דקות, פותחים את Genkit במסוף Firebase ובודקים את ההנחיות והתשובות של Genkit.
Genkit אוסף את מדדי היציבות הבאים:
- סה"כ בקשות: המספר הכולל של הבקשות שהתקבלו בתהליך.
- שיעור ההצלחה: אחוז הבקשות שטופלו בהצלחה.
- זמן אחזור של המאיון ה-95: זמן האחזור של המאיון ה-95 בתהליך, שהוא הזמן שלוקח לעבד 95% מהבקשות.
שימוש בטוקנים:
- אסימוני קלט: מספר האסימונים שנשלחים למודל בהנחיה.
- אסימוני פלט: מספר האסימונים שהמודל יוצר בתגובה.
שימוש בתמונות:
- תמונות קלט: מספר התמונות שנשלחות למודל בהנחיה.
- תמונות פלט: מספר התמונות שהמודל יצר בתגובה.
אם מרחיבים את מדדי היציבות, מוצגים תרשימים מפורטים:
- נפח הבקשות לאורך זמן.
- שיעור ההצלחה לאורך זמן.
- טוקני קלט ופלט לאורך זמן.
- זמן האחזור (אחוזון 95 ואחוזון 50) לאורך זמן.
מידע נוסף על Genkit זמין בכתובת Genkit.