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

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

לאחר מכן, תשפרו את האפליקציה ותפרסמו אותה ב-Firebase App Hosting.

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

שלב 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 להשתמש בה. גודל התמונות צריך להיות פחות מ-3MiB.

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

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

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

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

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

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

  7. ה-App Prototyping agent מתחיל לתכנת את האפליקציה.

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

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

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

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

  • הוספת Cloud Firestore ו-Firebase Authentication: בשלב האיטרציה, אתם יכולים לבקש מ-App Prototyping agent להוסיף אימות משתמשים ומסד נתונים באמצעות Cloud Firestore ו-Firebase Authentication. לדוגמה, אפשר לתת למשתמשים את היכולת לשמור ולהוריד מתכונים באמצעות הנחיה כמו:

    Add user authentication to the app. Authenticated users can:

  - Download the recipe and its generated image as a PDF (Print).

  - Save the recipe as public or private and make accessible to a search
    feature. For now, just save the text, not the image, to the database.

Important: Only authenticated users can download the PDF.

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

    אם מופיעות שגיאות שלא מוצגת לגביהן בקשה לתיקון אוטומטי, העתיקו את השגיאה ואת ההקשר הרלוונטי (לדוגמה, "Can you fix this error in my Firebase initialization code?‎") לחלון הצ'אט ושלחו אותם אל Gemini.

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

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

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

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

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

  • יצירת פרויקט Firebase: App Prototyping agent מקצה פרויקט Firebase בשבילכם כשאתם:

    • יצירה אוטומטית של מפתח Gemini API
    • בקשה לקשר את האפליקציה לפרויקט ב-Firebase
    • לבקש עזרה בקישור האפליקציה לשירותי Firebase, כמו Cloud Firestore או Firebase Authentication
    • לוחצים על הכפתור פרסום ומגדירים את Firebase App Hosting

    כדי לשנות את הפרויקט ב-Firebase שמקושר לסביבת העבודה, צריך להזין ב-App Prototyping agent את מזהה הפרויקט שרוצים להשתמש בו במקום זאת. לדוגמה, "מעבר לפרויקט ב-Firebase עם המזהה <your-project-id>".

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

    נכנסים כמשתמשים שונים ויוצרים מתכונים: מוודאים שמשתמשים מאומתים יכולים לראות את המתכונים הפרטיים שלהם, ושכל המשתמשים יכולים לראות מתכונים שגלויים לכולם.

    כשמבקשים מ-App Prototyping agent להוסיף את Cloud Firestore, הוא כותב ופורס את כללי מסד הנתונים של Cloud Firestore בשבילכם. בודקים את הכללים במסוף Firebase.

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

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

    • תכונות מובנות לניפוי באגים ולדיווח ב-Firebase Studio כדי לבדוק, לנפות באגים ולבצע ביקורת באפליקציה.

    • כלים מבוססי-AI באמצעות Gemini בתוך הקוד או באמצעות צ'אט אינטראקטיבי של Gemini (שתי האפשרויות זמינות כברירת מחדל). הצ'אט האינטראקטיבי יכול לאבחן בעיות, להציע פתרונות ולהפעיל כלים שיעזרו לכם לתקן את האפליקציה מהר יותר. כדי לגשת לצ'אט, לוחצים על הניצוץGemini בתחתית סביבת העבודה.

    • נכנסים אל Firebase Local Emulator Suite כדי לראות את נתוני מסד הנתונים והאימות. כדי לפתוח את האמולטור בסביבת העבודה:

      1. לוחצים על סמל החלפת קוד Switch to Code ופותחים את התוסף Firebase Studio (Ctrl+',Ctrl+', או Cmd+',Cmd+' ב-MacOS).

      2. גוללים אל Backend ports ומרחיבים את הקטע.

      3. בעמודה Actions, בשורה של Port 4000, לוחצים על Open in new window.

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

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

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

       npm run genkit:watch

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

    מידע נוסף על Genkit Developer UI זמין במאמר כלים למפתחים של 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 שמשויך לסביבת העבודה. אם אין פרויקט ב-Firebase, App Prototyping agent יוצר פרויקט חדש בשבילכם. כדי להמשיך, לוחצים על הבא.

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

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

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

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

  5. לוחצים על הגדרת שירותים. App Prototyping agent מתחיל להקצות את שירותי Firebase.

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

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

למידע נוסף על App Hosting, קראו את המאמר הסבר על App Hosting ואיך הוא פועל.

(מומלץ) שלב 4: בודקים את האפליקציה שפורסמה

כשהפרסום יושלם והאפליקציה תיפרס ב-Firebase, אפשר יהיה לבדוק את Cloud Firestore ו-Firebase Authentication בסביבת הייצור.

יצירת אינדקסים למסד הנתונים ב-Cloud Firestore

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

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

כדי ליצור אינדקסים אחרי הפרסום:

  1. מאפליקציה שפורסמה: בחלונית App overview (אם היא לא מוצגת, לוחצים על Publish), מאתרים את הקישור Visit your app ולוחצים עליו.

    מהתצוגה המקדימה של Firebase Studio: פותחים את מסוף המפתחים בדפדפן ומחפשים את הודעת השגיאה 200 שנוצרה על ידי Cloud Firestore.

  2. בודקים את כל התהליכים באפליקציה. יכול להיות שתופיע הודעת שגיאה כמו "שגיאה בטעינת המתכונים. השאילתה דורשת אינדקס. אפשר ליצור אותו כאן:" עם קישור למסוף Firebase.

  3. לוחצים על הקישור כדי לעבור למסוף Firebase, ומופיע אינדקס מומלץ.

  4. לוחצים על שמירה כדי לאשר את האינדקס המומלץ.

  5. חוזרים לאפליקציה וטוענים מחדש את הדף.

  6. ממשיכים לבדוק את כל התהליכים באפליקציה כדי להוסיף אינדקסים במקומות שבהם הם נדרשים.

מידע נוסף זמין במאמר ניהול אינדקסים ב-Cloud Firestore.

הצגת נתונים של Cloud Firestore ו-Firebase Authentication במסוף Firebase

אחרי הפרסום, אפשר לראות נתונים בזמן אמת מהאפליקציה במסוף Firebase.

  • כדי לראות את מסד הנתונים של Cloud Firestore, פותחים את מסוף Firebase ובוחרים באפשרות Build‏ > Firestore Database מתפריט הניווט.

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

  • כדי לראות את נתוני Firebase Authentication בזמן אמת, פותחים את מסוף Firebase ובוחרים באפשרות Build (פיתוח) > Authentication (אימות) בתפריט הניווט.

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

בדיקת כללי Cloud Firestore בסביבת הייצור

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

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

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

  • ‫Rules Playground: לבדיקות ממוקדות, משתמשים ב-Rules Playground במסוף Firebase. הכלי הזה מאפשר לדמות בקשות (קריאה, כתיבה, מחיקה) למסד הנתונים של Cloud Firestore באמצעות כללי הייצור. אתם יכולים לציין את מצב אימות המשתמש, את הנתיב לנתונים ואת סוג הפעולה כדי לבדוק אם הכללים שלכם מאשרים או דוחים את הגישה כפי שרציתם.

  • בדיקות יחידה (unit testing): כדי לבצע בדיקות מקיפות יותר, אתם יכולים לכתוב בדיקות יחידה לכללי האבטחה. ה-backend של גרסת טרום-ההשקה (Preview) של Firebase Studio, שמופעל על ידי Firebase Local Emulator Suite, מאפשר להריץ את הבדיקות האלה באופן מקומי, ולדמות את ההתנהגות של הכללים בסביבת הייצור. זו דרך יעילה לאמת לוגיקה מורכבת של כללים ולוודא שהם מכסים תרחישים שונים. אחרי הפריסה, כדאי לוודא שבדיקות היחידה שמשתמשות באמולטור פועלות כמו שצריך ומכסות את כל התרחישים.