1. סקירה כללית
ב-codelab הזה תתאמנו בשימוש בסוכן ליצירת אב טיפוס של אפליקציה ב-Firebase Studio כדי ליצור אפליקציה שתעזור לכם ללמוד שפה חדשה. לאחר מכן תוכלו לשפר את האפליקציה ולפרסם אותה באירוח אפליקציות ב-Firebase (אם תרצו).
מה תלמדו
- שיטות מומלצות ליצירת הנחיות ב-Firebase Studio
- איטרציה באפליקציה כדי להוסיף פונקציונליות ולתקן באגים
- פרסום אפליקציה ב-Firebase App Hosting ושיתוף שלה עם אחרים
- מעקב אחר מדדי מפתח דרך חלונית הסקירה הכללית של אפליקציית אירוח האפליקציות
מה צריך להכין
- דפדפן לבחירתכם, כמו Google Chrome
- חשבון Google ליצירה ולניהול של פרויקט Firebase
2. יצירת האפליקציה באמצעות סוכן ליצירת אב טיפוס של אפליקציות
הסוכן ליצירת אב טיפוס של אפליקציה משתמש ב-Gemini ב-Firebase כדי לבנות את האפליקציה. גם אם משתמשים בהנחיות זהות, יכול להיות שהתוצאה לא תיראה או תפעל בדיוק כמו התוצאה שמוצגת ב-codelab הזה. אם נתקעתם, סיפקנו קבוצה של קבצים שאפשר להוסיף לסביבת העבודה כדי להמשיך את ה-codelab בכמה נקודות ביקורת לאורך הדרך.
- מתחברים לחשבון Google ופותחים את Firebase Studio.
- בשדה Prototype an app with AI (יצירת אב טיפוס של אפליקציה באמצעות AI), מזינים תיאור של האפליקציה שרוצים ליצור. בשיעור הזה תלמדו איך ליצור אפליקציה שתעזור לכם ללמוד שפה חדשה באמצעות סיפורים, כרטיסיות וירטואליות ומורה פרטי מבוסס-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 כדי להמשיך להשתמש בסוכן ליצירת אב טיפוס של אפליקציות.
יעד 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 ולהתחיל בהגדרת אירוח האפליקציה. מופיעה החלונית פרסום האפליקציה.
- בשלב פרויקט 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.
- לוחצים על יצירת ההשקה הראשונה. השקת הפריסה של אירוח אפליקציות ב-Firebase Studio. התהליך עשוי להימשך עד עשר דקות. מידע נוסף על מה שקורה מאחורי הקלעים זמין במאמר תהליך הבנייה של אירוח אפליקציות.
- בסיום ההשקה, יופיע App overview עם כתובת URL ותובנות לגבי האפליקציה שמבוססות על יכולת הצפייה בנתונים של App Hosting. כדי להשתמש בדומיין מותאם אישית (כמו example.com או app.example.com) במקום בדומיין שנוצר על ידי Firebase, אפשר להוסיף דומיין מותאם אישית בטקסט של Firebase.
מידע נוסף על אירוח אפליקציות זמין במאמר הסבר על אירוח אפליקציות.
7. (אופציונלי) מעקב אחרי האפליקציה
בחלונית App overview (סקירה כללית של האפליקציה) ב-App Hosting מוצגים מדדים חשובים ומידע על האפליקציה, כך שתוכלו לעקוב אחר הביצועים של אפליקציית האינטרנט באמצעות כלי הניטור המובנים של App Hosting. אחרי שהאתר יושק, תוכלו לגשת לסקירה הכללית בלחיצה על פרסום. מהחלונית הזו אפשר:
- לוחצים על יצירת השקה כדי להשיק גרסה חדשה של האפליקציה.
- משתפים את הקישור לאפליקציה או פותחים את האפליקציה ישירות באמצעות האפשרות מעבר לאפליקציה.
- סיכום הביצועים של האפליקציה ב-7 הימים האחרונים, כולל המספר הכולל של הבקשות והסטטוס של ההשקה האחרונה. כדי לגשת למידע נוסף בטקסט של Firebase, לוחצים על הצגת פרטים.
- אפשר לראות תרשים של מספר הבקשות שהאפליקציה קיבלה ב-24 השעות האחרונות, עם פירוט לפי קוד סטטוס HTTP.
אם סוגרים את חלונית סקירת האפליקציה, אפשר לפתוח אותה מחדש בכל שלב בלחיצה על פרסום.
מידע נוסף על ניהול והשקה של אפליקציות ב-App Hosting זמין במאמר ניהול השקות ופריסות.
8. סיכום
כל הכבוד! יצרתם אפליקציה באמצעות Firebase Studio. אפשר להוסיף לאפליקציה עוד הרבה דברים, כמו מילון מורחב, שפות נוספות, אודיו, אנימציות או בחירת רמת קושי. אתם יכולים להמשיך לשחק עם האפליקציה או ליצור משהו חדש.