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

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

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

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

שלב 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.

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

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

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

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

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

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

    • מכיוון שהאפליקציה שלך משתמשת ב-AI, מוצגת לך בקשה להוסיף או ליצור מפתח Gemini API. אם לוחצים על 'יצירה אוטומטית', המערכת 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.
    Firebase Authentication

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

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

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

    בזמן שהייה בPrototyper view, you can also use the following features:

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

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

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

  • יצירת פרויקט Firebase: סוכן יצירת אב טיפוס לאפליקציות מספק פרויקט 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 mode at any time.

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

    • Firebase Studio's built-in debugging and reporting features to inspect, debug, and audit your app.

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

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

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

      2. גוללים אל Backend ports ומרחיבים אותו.

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

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

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

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

       npm run genkit:watch

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

    מידע נוסף על ממשק המשתמש למפתחים של 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 שמשויך למרחב העבודה. אם פרויקט 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 או כשלוחצים על פרסום.

    App Hosting

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

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

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

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

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

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

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

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

יכול להיות שהשגיאה הזו תופיע בהודעות שגיאה או בDeveloper Console בדפדפן.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • בדיקות יחידה: כדי לבצע בדיקות מקיפות יותר, אפשר לכתוב בדיקות יחידה לכללי האבטחה. התכונה Firebase Studio preview backend powered by the Firebase Local Emulator Suite מאפשרת להריץ את הבדיקות האלה באופן מקומי, ולדמות את ההתנהגות של כללי הייצור. זו דרך אמינה לאמת לוגיקה מורכבת של כללים ולאשר את הכיסוי לתרחישים שונים. אחרי הפריסה, כדאי לבדוק שוב שהבדיקות היחידות באמצעות האמולטור פועלות כמצופה ומכסות את כל התרחישים.