1. סקירה כללית
ב-codelab הזה תתאמנו בשימוש בסוכן ליצירת אב טיפוס של אפליקציה ב-Firebase Studio כדי ליצור אפליקציה שתעזור לכם ללמוד שפה חדשה. לאחר מכן תוכלו לשפר את האפליקציה ולפרסם אותה באירוח אפליקציות ב-Firebase.
מה תלמדו
- שיטות מומלצות לכתיבת הנחיות ב-Firebase Studio
- איטרציה באפליקציה כדי להוסיף פונקציונליות ולתקן באגים
- פרסום אפליקציה ב-Firebase App Hosting ושיתוף שלה עם אחרים
- מעקב אחר מדדי מפתח באמצעות חלונית הסקירה הכללית של App Hosting
מה צריך להכין
- דפדפן לבחירתכם, כמו Google Chrome
- חשבון Google ליצירה ולניהול של פרויקט Firebase
2. יצירת האפליקציה באמצעות סוכן ליצירת אב טיפוס של אפליקציות
הסוכן App Prototyping משתמש ב-Gemini ב-Firebase כדי לבנות את האפליקציה. גם אם משתמשים בהנחיות זהות, יכול להיות שהתוצאה לא תיראה או תתנהג בדיוק כמו התוצאה שמוצגת ב-codelab הזה. אם נתקעתם, סיפקנו קבוצה של קבצים שתוכלו להוסיף לסביבת העבודה כדי להמשיך את הסדנה בכמה נקודות ביקורת לאורך ה-codelab.
- מתחברים לחשבון Google ופותחים את Firebase Studio.
- בשדה Prototype an app with AI (יצירת אב טיפוס של אפליקציה באמצעות AI), מזינים תיאור של האפליקציה שרוצים לפתח. ב-Codelab הזה, תיצרו אפליקציה שתעזור לכם ללמוד שפה חדשה באמצעות סיפורים, כרטיסי תרגול ומורה מבוסס-AI. מזינים הנחיה, למשל:
An app to help someone learn a new language. The app should include AI-generated stories in the target language, where users can click vocab words or the entire story to see it in English. A different section includes flashcards, where the user is shown a word in the chosen language and can click it to flip the card and see the word in English. The final section includes an AI chatbot that allows the user to have simple conversations in the chosen language or ask questions in English about what a word means or how to form a sentence in the chosen language. All content should be beginner-friendly, focusing on basic greetings, common questions/answers, and vocabulary relevant to the lessons or stories. To start, the app should teach the user French, although we might add additional languages in the future. - לוחצים על אב טיפוס עם AI.
- בודקים את תוכנית האפליקציה המוצעת. לוחצים על
התאמה אישית כדי לערוך את תוכנית האב:- משנים את שם האפליקציה לSpeak Easy.
- משנים את ערכת הצבעים לערכה הבאה:
Primary color: Asparagus green (#98BF64) for a calm and friendly feel. Secondary color: Light parchment (#F5EBCD) to complement the primary color. Accent: Marigold (#FFB833) for interactive elements and call-to-action buttons.
קובץ מצורף כדי להעלות תמונה במהלך תהליך ההנחיה או התוכנית. הגודל המקסימלי של התמונות הוא 3MiB. - לוחצים על שמירה.
- אחרי שהתוכנית מסיימת לשלב את העדכונים, לוחצים על יצירת אב טיפוס של האפליקציה הזו.
- מכיוון שהאפליקציה הזו כוללת רכיבי AI, הנציג יבקש מכם מפתח Gemini. מוסיפים מפתח Gemini API משלכם או לוחצים על יצירה אוטומטית כדי ליצור מפתח Gemini API. אם לוחצים על יצירה אוטומטית, מערכת Firebase Studio יוצרת פרויקט Firebase ומפיקה בשבילכם מפתח Gemini API.
- סוכן יצירת אב טיפוס של אפליקציה משתמש בתוכנית האפליקציה כדי ליצור גרסה ראשונה של האפליקציה. בסיום, תצוגה מקדימה של האפליקציה מופיעה לצד ממשק צ'אט של Gemini. כדאי להקדיש רגע לבדיקת האפליקציה. גם אם היא לא נראית בדיוק כמו שדמיינתם, בסעיף הבא מוסבר איך להוסיף פונקציונליות חדשה ולשפר את העיצוב.
3. (אופציונלי) קבלת הקוד
אם נתקעתם או שאתם רוצים לעקוב אחרי האפליקציה לדוגמה בצורה מדויקת יותר, תוכלו להשתמש בקבצים לדוגמה שמופיעים בכמה נקודות לאורך ה-codelab.
- מורידים את הקבצים בתיקייה.
- ב-Firebase Studio, לוחצים על
מעבר לתצוגת קוד כדי לפתוח את תצוגת הקוד. - גוררים את הקבצים שהורדתם לחלונית Explorer (סייר) ב-Firebase Studio. מאפשרים לקבצים להחליף קבצים קיימים.
- כדי להמשיך את ה-codelab באמצעות גרסת הדוגמה של האפליקציה, לוחצים על מעבר ל-Prototyper.
4. בדיקה, שיפור וניפוי באגים בפונקציונליות של האפליקציה
במהלך התצוגה המקדימה של האפליקציה, יכול להיות שתבחינו בבאגים או בפונקציונליות לא צפויה. בגרסה לדוגמה של האפליקציה, נוסיף את השינויים והתיקונים הבאים:
- בכלי ליצירת סיפורים באמצעות AI, המשתמשים צריכים להיות מסוגלים ללחוץ על מילים כדי לקבל הגדרה באנגלית.
- הכרטיסים צריכים להופיע בצרפתית, ואז לעבור לאנגלית כשלוחצים עליהם.
- המשתמש צריך להיות מסוגל לעבור לדף הגדרות ולעבור ללימוד יפנית במקום צרפתית.
יעד 1: הוספת מילים ל-AI Story Generator
אופציונלי: כדי להשתמש בגרסה לדוגמה של האפליקציה מהשלב הזה, מורידים וגוררים את הקבצים האלה לחלונית Explorer ב-Firebase Studio בתצוגת Code.
- בממשק הצ'אט, מתארים את התכונה שרוצים להוסיף:
In the AI Story Generator, users should be able to click vocab words or phrases to get the definition in English. Words or phrases should be underlined to indicate they can be clicked. - בודקים את האפליקציה בחלון התצוגה המקדימה. תעדכנו את המראה והתחושה של האפליקציה בהמשך, אז כדאי להתמקד כרגע רק בפונקציונליות.
- אם האפליקציה לא פועלת כמו שציפיתם, ממשיכים לבקש מסוכן יצירת אב טיפוס של אפליקציות לבצע שינויים. לדוגמה:
IMPORTANT: Be sure to underline and provide a definition for most words and phrases, and ESPECIALLY all nouns and verbs. If a word or phrase in the story appears multiple times, only underline and define the first instance. - לוחצים על מעבר לקוד כדי לפתוח את תצוגת הקוד, שבה אפשר לראות את כל הקבצים של האפליקציה ולשנות את הקוד ישירות. אם יש באג ש-Gemini לא מצליח לפתור, לפעמים יותר קל לערוך את הקובץ באופן ידני. כשמוכנים, לוחצים על מעבר למצב Prototyper כדי להמשיך להשתמש בסוכן App Prototyping.
יעד 2: הוספת תרגומים לכרטיסיות
אופציונלי: כדי להשתמש בגרסה לדוגמה של האפליקציה מהשלב הזה, מורידים וגוררים את הקבצים האלה לחלונית Explorer ב-Firebase Studio בתצוגת Code.
פועלים לפי אותו תהליך שמתואר למעלה, משתמשים בממשק הצ'אט כדי לתאר את התכונה, בודקים אותה בחלון התצוגה המקדימה, ואז משתמשים בהנחיות נוספות או בתצוגת הקוד כדי להוסיף תרגומים לכרטיסיות. אפשר לנסות הנחיה כמו:
The flash cards should appear in the target language to start, then switch to
English when clicked.
לפעמים, סוכן יצירת אב טיפוס לאפליקציה לא מזהה שיש באג. יכול להיות שיהיה יעיל יותר לתאר את מה שאתם רואים ואת מה שצריך לתקן, למשל:
The flip button for the flash cards isn't working. Can you debug it? All flash
cards are only showing in English.
יעד 3: הוספת שפה חדשה
אופציונלי: כדי להשתמש בגרסה לדוגמה של האפליקציה מהשלב הזה, מורידים וגוררים את הקבצים האלה לחלונית Explorer ב-Firebase Studio בתצוגת Code.
אפשר לנסות הנחיה כמו:
Add a settings section to the app, where users can swap to a new language
to learn. Add Japanese to the list of languages the user can pick from. If
the user selects Japanese, the AI-generated stories, flash cards, and chatbot
tutor should all use Japanese instead of French.
5. יצירת איטרציות בעיצוב של האפליקציה
אופציונלי: כדי להשתמש בגרסה לדוגמה של האפליקציה מהשלב הזה, מורידים וגוררים את הקבצים האלה לחלונית Explorer ב-Firebase Studio בתצוגת Code.
עכשיו, אחרי שהוספתם לאפליקציה את כל הפונקציות שרציתם, הגיע הזמן לעבוד על הסגנון.
שינוי ערכת הצבעים של האפליקציה
אתם יכולים לציין אילו צבעים אתם רוצים להשתמש, או לתת לסוכן ליצירת אב טיפוס של אפליקציות להוביל את התהליך. בממשק הצ'אט, אפשר גם ללחוץ על האפשרות צירוף כדי להעלות תמונה של הצבעים או הסגנון שרוצים להשתמש בהם. אם אתם מעדיפים להשתמש בהנחיה, נסו:
Add color to the design of the app. Use modern, clean colors that adhere
to accessibility standards and have a calming feel.
עדכון הטקסט שמופיע באפליקציה
לדוגמה, במקום 'מורה צ'אטבוט מבוסס-AI', יכול להיות שתרצו שההגדרה תהיה פשוט 'צ'אט':
Change the text "AI Chatbot Tutor" to "Chat".
התאמת ממשק המשתמש של האפליקציה כדי שיהיה אינטואיטיבי יותר
לדוגמה, במקום שהמשתמש יצטרך ללחוץ על לחצן כדי לשלוח טקסט, יכול להיות שתרצו לאפשר לו ללחוץ על Return במקלדת:
In the story generator section, allow the user to press the return key on
the keyboard to submit the text.
הוספת אפשרות למשתמש לבחור בין מצב בהיר למצב כהה
משתמשים רבים מעדיפים את האפשרות לבחור בין עיצוב בהיר או כהה יותר לאפליקציה. כדאי לחשוב איפה יהיה המקום ההגיוני למצוא את המתג הזה:
Add an icon in the upper right corner to dynamically switch the color theme of
the app between dark mode and light mode.
טיפים לכתיבת הנחיות ולניפוי באגים
- קבלת עזרה בהנחיות: אם אתם מתקשים להסביר לסוכן ליצירת אב טיפוס של אפליקציה מה אתם רוצים, אתם יכולים לבקש מ-Gemini ל-Google לעזור לכם לשפר את ההנחיה. מידע נוסף על כתיבת הנחיות יעילות
- בדיקה במכשירים אחרים: במצב אב טיפוס, לוחצים על
שיתוף קישור לתצוגה מקדימה כדי לבדוק את האפליקציה במכשירים אחרים. - שימוש בכלים מובנים: בתצוגת הקוד, משתמשים בתכונות המובנות של ניפוי באגים ודיווח ב-Firebase Studio כדי לבדוק, לנפות באגים ולבצע ביקורת באפליקציה.
- מתחילים בפשוט: עובדים על תכונה אחת בכל פעם. מומלץ להתחיל עם קבוצה בסיסית של תכונות באב-טיפוס, ואז להרחיב אותה אחרי שמוודאים שהתכונות פועלות כמו שצריך.
- תיאור באגים: אם משהו לא עובד, מתארים לסוכן ליצירת אב טיפוס של אפליקציות את ההתנהגות הנוכחית ואת ההתנהגות הרצויה.
- חזרה לגרסה קודמת כשצריך: אם סוכן יצירת אב טיפוס לאפליקציות לא מבין את ההנחיה או יוצר בעיה שקשה לפתור, אפשר ללחוץ על הלחצן שחזור כדי לחזור לגרסה קודמת של האפליקציה ולנסות שוב עם הנחיה אחרת.
6. (אופציונלי) פרסום האפליקציה
אופציונלי: כדי להשתמש בגרסה לדוגמה של האפליקציה מהשלב הזה, מורידים וגוררים את הקבצים האלה לחלונית Explorer ב-Firebase Studio בתצוגת Code.
אחרי שבודקים את האפליקציה ומרוצים ממנה, אפשר לפרסם אותה באינטרנט באמצעות אירוח אפליקציות ב-Firebase.
- לוחצים על פרסום כדי ליצור פרויקט חדש ב-Firebase ולהתחיל בהגדרת App Hosting. מופיעה החלונית פרסום האפליקציה.
- בשלב פרויקט Firebase, רושמים את השם של פרויקט Firebase שנוצר עבורכם ולוחצים על הבא.
- בשלב Link Cloud Billing account (קישור חשבון לחיוב ב-Cloud), בוחרים באחת מהאפשרויות הבאות:
- בוחרים את החשבון לחיוב ב-Cloud שרוצים לקשר לפרויקט Firebase.
- אם אין לכם חשבון לחיוב ב-Cloud או שאתם רוצים ליצור חשבון חדש, לוחצים על יצירת חשבון לחיוב ב-Cloud. ייפתח טקסט של Google Cloud, שבו תוכלו ליצור חשבון חדש לחיוב ב-Cloud בניהול עצמי. אחרי שיוצרים את החשבון, חוזרים ל-Firebase Studio ובוחרים את החשבון מהרשימה Link Cloud Billing (קישור לחשבון לחיוב ב-Cloud).
- לוחצים על הבא. הקישור של חשבון החיוב לפרויקט שמשויך לסביבת העבודה שלכם ב-Firebase Studio נוצר אוטומטית כשמפיקים מפתח Gemini API או כשלוחצים על פרסום. לאחר מכן, שירות App Hosting מגדיר סביבה מנוהלת במלואה לאפליקציה שלכם ב-Google Cloud.
- לוחצים על יצירת ההשקה הראשונה. השקת הפריסה של App Hosting ב-Firebase Studio. התהליך עשוי להימשך עד עשר דקות. מידע נוסף על מה שקורה מאחורי הקלעים זמין במאמר תהליך build של App Hosting.
- בסיום ההשקה, יופיע App overview עם כתובת URL ותובנות לגבי האפליקציה שמבוססות על יכולת הצפייה בנתונים של App Hosting. כדי להשתמש בדומיין מותאם אישית (כמו example.com או app.example.com) במקום בדומיין שנוצר על ידי Firebase, אפשר להוסיף דומיין מותאם אישית ב-Firebase text.
מידע נוסף על אירוח אפליקציות זמין במאמר הסבר על אירוח אפליקציות.
7. (אופציונלי) מעקב אחרי האפליקציה
בחלונית App overview (סקירה כללית של האפליקציה) ב-App Hosting מוצגים מדדים חשובים ומידע על האפליקציה, כך שתוכלו לעקוב אחר הביצועים של אפליקציית האינטרנט באמצעות כלי הניטור המובנים של App Hosting. אחרי שהאתר יושק, תוכלו לגשת לסקירה הכללית בלחיצה על פרסום. בחלונית הזו אתם יכולים:
- לוחצים על יצירת השקה כדי להשיק גרסה חדשה של האפליקציה.
- משתפים את הקישור לאפליקציה או פותחים את האפליקציה ישירות באמצעות האפשרות ביקור באפליקציה.
- סיכום הביצועים של האפליקציה ב-7 הימים האחרונים, כולל המספר הכולל של הבקשות והסטטוס של ההשקה האחרונה. כדי לגשת למידע נוסף בטקסט של Firebase, לוחצים על הצגת פרטים.
- בתרשים מוצג מספר הבקשות שהאפליקציה קיבלה ב-24 השעות האחרונות, עם פירוט לפי קוד סטטוס של HTTP.
אם סוגרים את חלונית סקירת האפליקציה, אפשר לפתוח אותה מחדש בכל שלב בלחיצה על פרסום.
מידע נוסף על ניהול והשקה של אפליקציות ב-App Hosting זמין במאמר ניהול השקות והפצות.
8. סיכום
כל הכבוד! יצרתם אפליקציה באמצעות Firebase Studio. אפשר להוסיף לאפליקציה עוד הרבה דברים, כמו מילון מורחב, שפות נוספות, אודיו, אנימציות או בחירת רמת קושי. אתם יכולים להמשיך לשחק עם האפליקציה או ליצור משהו חדש.