פיתוח אפליקציות אינטרנט מבוססות-AI באמצעות תוספים של Firebase ל-Gemini API

1. לפני שמתחילים

תוספים ל-Firebase מאפשרים להוסיף לאפליקציות פונקציונליות מוכנה מראש עם מינימום קוד – כולל פונקציונליות מבוססת-AI. ב-Codelab הזה מוסבר איך לשלב שני תוספים ל-Firebase באפליקציית אינטרנט כדי להשתמש ב-Gemini API ליצירת תיאורי תמונות, סיכומים ואפילו המלצות בהתאמה אישית על סמך הקשר וקלט של משתמשי קצה.

ב-Codelab הזה תלמדו איך ליצור אפליקציית אינטרנט מבוססת-AI שמספקת חוויות משתמש מרתקות באמצעות תוספים ל-Firebase.

דרישות מוקדמות

• ידע ב-Node.js, ב-Next.js וב-TypeScript.

מה תלמדו

• איך משתמשים בתוספים ל-Firebase ל-Gemini API כדי לעבד שפה.
• איך משתמשים ב-Cloud Functions for Firebase כדי ליצור הקשר מורחב למודל השפה.
• איך משתמשים ב-JavaScript כדי לגשת לפלט שנוצר על ידי תוספים ל-Firebase.

מה צריך להכין

• דפדפן לבחירתכם, כמו Google Chrome
• סביבת פיתוח עם עורך קוד וטרמינל
• חשבון Google ליצירה ולניהול של פרויקט Firebase

הערה: ב-codelab הזה נעשה שימוש ב-Firebase ובשירותי Google שנדרש עבורם חשבון לחיוב ב-Cloud. אם אתם חדשים ב-Firebase וב-Google Cloud, כדאי לבדוק אם אתם זכאים לקרדיט בשווי 300$ ולתקופת ניסיון בחינם בחשבון לחיוב ב-Cloud כדי להתנסות בשירותים שלנו. אחרת, תצטרכו לספק אמצעי תשלום (למשל כרטיס אשראי) כדי להגדיר חשבון לחיוב ב-Cloud (פרטים על אמצעי התשלום זמינים במשאבי העזרה בנושא חיוב ב-Cloud).

2. בדיקת אפליקציית האינטרנט, שירותי Firebase והתוספים

בקטע הזה נסקור את אפליקציית האינטרנט שנבנה באמצעות ה-Codelab הזה, וגם נלמד על שירותי Firebase ותוספים ל-Firebase שבהם נשתמש.

אפליקציית אינטרנט

ב-codelab הזה תיצרו אפליקציית אינטרנט בשם Friendly Conf.

צוות Friendly Conference החליט להשתמש ב-AI כדי ליצור חוויית משתמש מהנה ומותאמת אישית למשתתפים. אפליקציית הכנס המוגמרת מספקת למשתתפים צ'אט בוט מבוסס-AI לשיחה, שמופעל על ידי מודל AI גנרטיבי רב-אופנים (שנקרא גם מודל שפה גדול או LLM), ויכול לענות על שאלות בנושאים כלליים, בהתאם ללוח הזמנים ולנושאים של הכנס. לצ'אט בוט יש הקשר היסטורי וידע לגבי התאריך והשעה הנוכחיים, וגם לגבי הנושאים והלוח זמנים של Friendly Conf, כך שהתשובות שלו יכולות להתבסס על כל ההקשר הזה.

הערה: מדובר ב-codelab גדול עם הרבה שלבים. כדי להפיק את המרב מה-Codelab הזה:

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

שירותי Firebase

ב-Codelab הזה תשתמשו בהרבה שירותים ותכונות של Firebase, ורוב קוד לתחילת הדרך שלהם מסופק לכם. בטבלה הבאה מפורטים השירותים שבהם תשתמשו והסיבות לשימוש בהם.

Service	הסיבה לשימוש
אימות ב-Firebase	אתם משתמשים בפונקציונליות של כניסה באמצעות חשבון Google באפליקציית האינטרנט.
Cloud Firestore	אתם מאחסנים נתוני טקסט ב-Cloud Firestore, ואז הם עוברים עיבוד על ידי תוספים ל-Firebase.
Cloud Storage for Firebase	אתם קוראים וכותבים מ-Cloud Storage כדי להציג גלריות תמונות באפליקציית האינטרנט.
כללי אבטחה של Firebase	אתם פורסים כללי אבטחה כדי להגביר את האבטחה של הגישה לשירותי Firebase.
תוספים ל-Firebase	אתם מגדירים ומתקינים תוספים ל-Firebase שקשורים ל-AI ומציגים את התוצאות באפליקציית האינטרנט.
בונוס: אירוח ב-Firebase	אפשר גם להשתמש באירוח ב-Firebase כדי להפעיל את אפליקציית האינטרנט (בלי מאגר GitHub).
בונוס: Firebase App Hosting	אפשר גם להשתמש באירוח החדש והיעיל של אפליקציות ב-Firebase כדי להציג את אפליקציית האינטרנט הדינמית שלכם ב-Next.js (שמקושרת למאגר GitHub).

תוספים ל-Firebase

תוספים ל-Firebase שבהם תשתמשו ב-Codelab הזה כוללים את התוספים הבאים:

• פיתוח צ'אט בוט באמצעות Gemini API
• משימות מולטימודאליות באמצעות Gemini API

התוספים שימושיים כי הם מגיבים לאירועים שקורים בפרויקט Firebase. שני התוספים שבהם נעשה שימוש ב-codelab הזה מגיבים כשיוצרים מסמכים חדשים באוספים שהוגדרו מראש ב-Cloud Firestore.

3. הגדרת סביבת הפיתוח

אימות הגרסה של Node.js

1. במסוף, מוודאים שמותקנת גרסה 20.0.0 ואילך של Node.js:

   node -v
   

2. אם לא מותקנת אצלכם גרסה 20.0.0 של Node.js או גרסה מתקדמת יותר, מורידים את גרסת ה-LTS האחרונה ומתקינים אותה.

קבלת קוד המקור של ה-Codelab

אם יש לכם חשבון ב-GitHub:

1. יוצרים מאגר חדש באמצעות התבנית שלנו מכתובת github.com/FirebaseExtended/codelab-gemini-api-extensions
2. משכפלים את מאגר הנתונים של GitHub שנוצר במהלך הסדנה:

   git clone https://github.com/<your-github-handle>/codelab-gemini-api-extensions
   

אם לא מותקן אצלכם git או שאתם מעדיפים לא ליצור מאגר חדש:

מורידים את מאגר GitHub כקובץ ZIP.

בדיקת מבנה התיקיות

תיקיית הבסיס כוללת קובץ README.md שמציע הוראות פשוטות להתחלה מהירה של הפעלת אפליקציית האינטרנט. עם זאת, אם אתם לומדים בפעם הראשונה, כדאי לכם להשלים את ה-Codelab הזה (במקום את המדריך למתחילים), כי הוא מכיל את מערך ההוראות המקיף ביותר.

אם אתם לא בטוחים שהטמעתם את הקוד בצורה נכונה כמו שמוסבר ב-codelab הזה, תוכלו למצוא את קוד הפתרון ב-end git branch.

התקנת Firebase CLI

1. מוודאים ש-Firebase CLI מותקן ושהגרסה שלו היא 13.6 ואילך:

   firebase --version
   

2. אם ה-CLI של Firebase מותקן אצלכם, אבל הוא לא בגרסה 13.6 ואילך, צריך לעדכן אותו:

   npm update -g firebase-tools
   

3. אם Firebase CLI לא מותקן, מתקינים אותו:

   npm install -g firebase-tools
   

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

מתחברים ל-Firebase

1. בטרמינל, עוברים לתיקייה codelab-gemini-api-extensions ונכנסים ל-Firebase:
   ‫

   cd codelab-gemini-api-extensions
   firebase login
   

   אם במסוף מופיע שאתם כבר מחוברים ל-Firebase, אתם יכולים לדלג לקטע הגדרת פרויקט Firebase ב-codelab הזה.
2. בטרמינל, בהתאם לרצון שלכם ש-Firebase יאסוף נתונים, מזינים Y או N. (כל אחת מהאפשרויות מתאימה ל-Codelab הזה)
3. בדפדפן, בוחרים את חשבון Google ולוחצים על אישור.

4. הגדרת פרויקט Firebase

בקטע הזה נגדיר פרויקט Firebase ונרשום בו אפליקציית אינטרנט של Firebase. בהמשך ה-codelab הזה תפעילו גם כמה שירותים של Firebase שבהם נעשה שימוש באפליקציית האינטרנט לדוגמה.

כל השלבים בקטע הזה מתבצעים במסוף Firebase.

יצירת פרויקט Firebase

1. נכנסים למסוף Firebase באמצעות אותו חשבון Google שבו השתמשתם בשלב הקודם.
2. לוחצים על הלחצן כדי ליצור פרויקט חדש, ואז מזינים שם לפרויקט (לדוגמה, AI Extensions Codelab).
   

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

   חשוב לזכור את מזהה הפרויקט, כי תצטרכו אותו בהמשך כדי לזהות את פרויקט Firebase ב-Firebase CLI. אם שכחתם את המזהה, תמיד תוכלו למצוא אותו בהמשך בהגדרות הפרויקט.

3. לוחצים על המשך.
4. אם מוצגת בקשה לעשות זאת, קוראים ומאשרים את התנאים של Firebase, ואז לוחצים על המשך.
5. (אופציונלי) מפעילים את העזרה מבוססת-AI במסוף Firebase (שנקראת Gemini ב-Firebase).
6. ב-codelab הזה לא צריך להשתמש ב-Google Analytics, ולכן משביתים את האפשרות Google Analytics.
7. לוחצים על יצירת פרויקט, מחכים שהפרויקט יוקצה ולוחצים על המשך.

שדרוג תוכנית התשלומים של Firebase

כדי להשתמש בתוספים ל-Firebase (ובשירותי הענן הבסיסיים שלהם) וגם ב-Cloud Storage for Firebase, הפרויקט שלכם ב-Firebase צריך להיות במסגרת תוכנית התמחור 'תשלום לפי שימוש' (Blaze), כלומר הוא צריך להיות מקושר לחשבון לחיוב ב-Cloud.

• בחשבון לחיוב ב-Cloud צריך להגדיר אמצעי תשלום, כמו כרטיס אשראי.
• אם אתם חדשים ב-Firebase וב-Google Cloud, כדאי לבדוק אם אתם עומדים בדרישות לקבלת קרדיט בשווי 300$ותקופת ניסיון בחינם בחשבון לחיוב ב-Cloud.
• אם אתם משתתפים ב-Codelab כחלק מאירוע, כדאי לשאול את מארגן האירוע אם יש קרדיטים ל-Cloud.

חשוב לדעת שאם החיוב מופעל בפרויקט Firebase, תחויבו על הקריאות שהתוסף מבצע ל-Gemini API (לא משנה באיזה ספק תבחרו, Google AI או Vertex AI). מידע נוסף על התמחור של AI מבית Google ושל Vertex AI

כדי לשדרג את הפרויקט לתוכנית Blaze, פועלים לפי השלבים הבאים:

1. במסוף Firebase, בוחרים באפשרות שדרוג התוכנית.
2. בוחרים בתוכנית Blaze. פועלים לפי ההוראות במסך כדי לקשר חשבון לחיוב ב-Cloud לפרויקט.
   אם הייתם צריכים ליצור חשבון לחיוב ב-Cloud כחלק מהשדרוג, יכול להיות שתצטרכו לחזור לתהליך השדרוג במסוף Firebase כדי להשלים את השדרוג.

הערה: אחרי שתסיימו את ה-codelab הזה, תוכלו לשדרג לאחור את הפרויקט לתוכנית התמחור ללא עלות (Spark).

הוספת אפליקציית אינטרנט לפרויקט Firebase

1. עוברים למסך Project Overview בפרויקט Firebase ולוחצים על Web.
2. בתיבת הטקסט כינוי לאפליקציה, מזינים כינוי קליט לאפליקציה, כמו My AI Extensions
3. לוחצים על Register app > Next > Next > Continue to console (רישום האפליקציה > הבא > הבא > המשך אל המסוף).
   אתם יכולים לדלג על כל השלבים שקשורים ל'אירוח' בתהליך של אפליקציית האינטרנט, כי בהמשך של ה-codelab הזה תהיה לכם אפשרות להגדיר שירות אירוח.

מעולה! סיימתם לרשום אפליקציית אינטרנט בפרויקט Firebase החדש.

הגדרה של אימות ב-Firebase

1. בחלונית הניווט הימנית, עוברים אל אימות.
2. לוחצים על שנתחיל?.
3. בעמודה ספקים נוספים, לוחצים על Google > הפעלה.
4. בתיבת הטקסט Public-facing name for project (שם הפרויקט שמוצג לציבור), מזינים שם שימושי, כמו My AI Extensions Codelab.
5. בתפריט Support email for project, בוחרים את כתובת האימייל.
6. לוחצים על שמירה.

הגדרה של Cloud Firestore

1. בחלונית הימנית במסוף Firebase, מרחיבים את Build ובוחרים באפשרות Firestore database.
2. לוחצים על יצירת מסד נתונים.
3. משאירים את הערך (default) בשדה Database ID.
4. בוחרים מיקום למסד הנתונים ולוחצים על הבא.
   באפליקציה אמיתית, כדאי לבחור מיקום שקרוב למשתמשים.
5. לוחצים על התחלת השימוש במצב בדיקה. קוראים את כתב הוויתור בנוגע לכללי האבטחה.
   בהמשך ה-Codelab הזה, תוסיפו כללי אבטחה כדי לאבטח את הנתונים. אל תפיצו או תחשפו אפליקציה באופן ציבורי בלי להוסיף כללי אבטחה למסד הנתונים.
6. לוחצים על יצירה.

הגדרת Cloud Storage for Firebase

1. בחלונית הימנית במסוף Firebase, מרחיבים את האפשרות Build (פיתוח) ובוחרים באפשרות Storage (אחסון).
2. לוחצים על שנתחיל?.
3. בוחרים מיקום לקטגוריית האחסון שמוגדרת כברירת מחדל.
   אפשר להשתמש בקטגוריות במיקומים US-WEST1, US-CENTRAL1 ו-US-EAST1 במסגרת המסלול 'תמיד בחינם' של Google Cloud Storage. התמחור והשימוש בקטגוריות בכל המיקומים האחרים מפורטים במאמר בנושא תמחור ושימוש ב-Google Cloud Storage.
4. לוחצים על התחלת השימוש במצב בדיקה. קוראים את כתב הוויתור לגבי כללי האבטחה.
   בהמשך ה-Codelab, תוסיפו כללי אבטחה כדי לאבטח את הנתונים. אסור להפיץ או לחשוף אפליקציה באופן ציבורי בלי להוסיף כללי אבטחה לדלי האחסון.
5. לוחצים על יצירה.

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

5. הגדרת התוסף 'יצירת צ'אט בוט באמצעות Gemini API'

הערה: יש תיעוד מפורט של התוספים ל-Firebase שבהם נעשה שימוש ב-codelab הזה. מידע נוסף זמין בדפים הרלוונטיים של כל תוסף, במיוחד בדפים תחילת העבודה, פרמטרים שאפשר להגדיר וחיוב.

התקנת התוסף 'יצירת צ'אטבוט באמצעות Gemini API'

1. עוברים אל התוסף "יצירת צ'אט בוט באמצעות Gemini API".
2. לוחצים על התקנה במסוף Firebase.
3. בוחרים את פרויקט Firebase ולוחצים על הבא.
4. בקטע Review APIs enabled and resources created (בדיקת ממשקי API שהופעלו ומשאבים שנוצרו), לוחצים על Enable (הפעלה) לצד כל שירות שמוצע לכם, ואז לוחצים על Next (הבא).
5. אם מוצעות לכם הרשאות, בוחרים באפשרות אישור ולוחצים על הבא.
6. מגדירים את התוסף:
   1. בתפריט Gemini API Provider (ספק Gemini API), בוחרים אם רוצים להשתמש ב-Gemini API מ-Google AI או מ-Vertex AI. למפתחים שמשתמשים ב-Firebase, מומלץ להשתמש ב-Vertex AI.
   2. בתיבת הטקסט Firestore Collection Path (נתיב לאוסף Firestore), מזינים: users/{uid}/discussion/{discussionId}/messages.
      בשלבים הבאים של ה-codelab הזה, הוספת מסמכים לאוסף הזה תגרום לתוסף לקרוא ל-Gemini API.
   3. בתפריט Cloud Functions location, בוחרים את המיקום המועדף (למשל Iowa (us-central1) או המיקום שצוין קודם למסד הנתונים של Firestore).
   4. משאירים את כל שאר הערכים בברירת המחדל.
7. לוחצים על התקנת תוסף ומחכים שהתוסף יותקן.

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

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

כדאי לנסות את התוסף 'יצירת צ'אט בוט באמצעות Gemini API'

היעד של ה-Codelab הזה הוא ליצור אינטראקציה עם התוסף 'יצירת צ'אט בוט באמצעות Gemini API' דרך אפליקציית אינטרנט, אבל כדאי לנסות את התוסף קודם במסוף Firebase כדי להבין איך הוא פועל.

התוסף מופעל בכל פעם שנוצר מסמך Firestore באוסף users/{uid}/discussion/{discussionId}/messages, שאפשר ליצור במסוף Firebase.

1. במסוף Firebase, עוברים אל Firestore ולוחצים על Start collection (התחלת איסוף) בעמודה הראשונה.
2. בתיבת הטקסט מזהה אוסף, מזינים users ולוחצים על הבא.
3. בתיבת הטקסט מזהה מסמך, לוחצים על מזהה אוטומטי ואז על שמירה.
4. באוסף users, לוחצים על התחלת איסוף.
5. בתיבת הטקסט מזהה האוסף, מזינים messages ולוחצים על הבא.
   1. בתיבת הטקסט מזהה מסמך, לוחצים על מזהה אוטומטי.
   2. בתיבת הטקסט Field (שדה) מזינים prompt
   3. בתיבת הטקסט Value (ערך), מזינים Tell me 5 random fruits
6. לוחצים על שמירה ומחכים כמה שניות.

כשמוסיפים את המסמך הזה, התוסף מופעל וקורא ל-Gemini API. המסמך שהוספתם לאוסף messages כולל עכשיו לא רק את prompt שלכם, אלא גם את response של המודל לשאילתה.

מפעילים שוב את התוסף על ידי הוספת מסמך נוסף לאוסף messages:

1. באוסף messages, לוחצים על הוספת מסמך.
2. בתיבת הטקסט מזהה מסמך, לוחצים על מזהה אוטומטי.
3. בתיבת הטקסט Field (שדה) מזינים prompt
4. בתיבת הטקסט Value (ערך), מזינים And now, vegetables
5. לוחצים על שמירה ומחכים כמה שניות. המסמך שזה עתה הוספתם לאוסף messages כולל עכשיו response לשאילתה שלכם.
   
   כשנוצרה התשובה הזו, מודל Gemini הבסיסי השתמש בידע היסטורי מהשאילתה הקודמת שלכם.

6. הגדרת אפליקציית האינטרנט

כדי להריץ את אפליקציית האינטרנט, צריך להריץ פקודות במסוף ולהוסיף קוד בכלי לעריכת קוד.

הגדרת Firebase CLI להפעלה מול פרויקט Firebase

בטרמינל, מריצים את הפקודה הבאה כדי להגדיר את ה-CLI לשימוש בפרויקט Firebase:

firebase use YOUR_PROJECT_ID

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

פריסת כללי אבטחה ל-Firestore ול-Cloud Storage

במאגר הקוד של ה-codelab הזה כבר יש קבוצה של כללי אבטחה של Firestore וכללי אבטחה של Cloud Storage שנכתבו בשבילכם. אחרי שמפעילים את כללי האבטחה האלה, שירותי Firebase בפרויקט Firebase מוגנים טוב יותר מפני שימוש לרעה.

1. כדי לפרוס כללי אבטחה, מריצים את הפקודה הזו בטרמינל:

   firebase deploy --only firestore:rules,storage
   

2. אם תתבקשו להעניק ל-Cloud Storage את תפקיד ה-IAM כדי להשתמש בכללים חוצי-שירותים, הזינו Y או N. (כל אחת מהאפשרויות מתאימה ל-Codelab הזה)

קישור אפליקציית האינטרנט לפרויקט Firebase

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

1. מקבלים את ההגדרה של Firebase:
   1. במסוף Firebase, עוברים אל הגדרות הפרויקט בפרויקט Firebase.
   2. גוללים למטה לקטע האפליקציות שלך ובוחרים את אפליקציית האינטרנט הרשומה.
   3. בחלונית SDK setup and configuration (הגדרה וקביעת הגדרות של SDK), מעתיקים את קוד initializeApp המלא, כולל הקבוע firebaseConfig.
2. מוסיפים את ההגדרה של Firebase לבסיס הקוד של אפליקציית האינטרנט:
   1. פותחים את הקובץ src/lib/firebase/firebase.config.js בכלי לעריכת קוד.
   2. בוחרים את כל התוכן בקובץ ומחליפים אותו בקוד שהעתקתם.
   3. שומרים את הקובץ.

תצוגה מקדימה של אפליקציית האינטרנט בדפדפן

1. בטרמינל, מתקינים את התלות ומריצים את אפליקציית האינטרנט:

   npm install
   npm run dev
   

2. בדפדפן, עוברים לכתובת ה-URL של האירוח שמתארח באופן מקומי כדי להציג את אפליקציית האינטרנט. לדוגמה, ברוב המקרים כתובת ה-URL היא http://localhost:3000/‎ או משהו דומה.

שימוש בצ'אט בוט של אפליקציית האינטרנט

הערה: localhost הוא דומיין מורשה שמוגדר כברירת מחדל לאימות ב-Firebase. אם אתם מעדיפים להשתמש במשהו אחר (כמו 127.0.0.1), אתם צריכים להוסיף את שם המארח לרשימה Authorized domains (דומיינים מורשים).

1. בדפדפן, חוזרים לכרטיסייה עם אפליקציית האינטרנט Friendly Conf שפועלת באופן מקומי.
2. לוחצים על כניסה באמצעות חשבון Google, ואם צריך, בוחרים את חשבון Google.
3. אחרי שתיכנסו לחשבון, יופיע חלון צ'אט ריק.
4. מקלידים ברכה (למשל hi) ולוחצים על שליחה.
5. מחכים כמה שניות עד שהצ'אטבוט יגיב.

הצ'אטבוט באפליקציה משיב בתשובה גנרית.

התאמה אישית של הצ'אט בוט לאפליקציה

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

1. באתר בדפדפן, מוחקים את השיחה בלחיצה על הכפתור האדום 'X' (ליד ההודעה בהיסטוריית הצ'אט).
2. פותחים את הקובץ src/app/page.tsx בכלי לעריכת קוד.
3. גוללים למטה ומחליפים את הקוד בשורה 93 או בסמוך לה, שבו כתוב prompt: userMsg, בקוד הבא:
   prompt: preparePrompt(userMsg, messages),
4. שומרים את הקובץ.
5. חוזרים לאפליקציית האינטרנט שפועלת בדפדפן.
6. מקלידים שוב ברכה (למשל hi) ולוחצים על שליחה.
7. מחכים כמה שניות עד שהצ'אטבוט יגיב.

הצ'אט בוט משיב עם ידע שמבוסס על ההקשר שסופק ב-src/app/lib/context.md. למרות שלא הקלדתם בקשה ספציפית, מודל Gemini הבסיסי יוצר המלצה מותאמת אישית על סמך ההקשר הזה וגם על סמך התאריך והשעה הנוכחיים. עכשיו אפשר לשאול שאלות המשך כדי להתעמק בנושא.

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

1. פותחים את הקובץ src/app/page.tsx בכלי לעריכת קוד.
2. גוללים למטה ומחליפים את הקוד בשורה 56 או בסמוך לה, שבו כתוב ...doc.data(),, בקוד הבא:
   ...prepareMessage(doc.data()),
3. שומרים את הקובץ.
4. חוזרים לאפליקציית האינטרנט שפועלת בדפדפן.
5. יש לטעון מחדש את הדף.

אפשר גם לנסות לנהל שיחה עם הצ'אטבוט עם הקשר היסטורי:

1. בתיבת הטקסט כאן מקלידים הודעה, כותבים שאלה כמו: Any other interesting talks about AI? הצ'אטבוט יחזיר תשובה.
2. בתיבת הטקסט Type a message (הקלדת הודעה), שואלים שאלת המשך שקשורה לשאלה הקודמת: Give me a few more details about the last one.

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

7. הגדרת התוסף 'משימות מולטי-מודאליות באמצעות Gemini API'

הערה: יש תיעוד מפורט של התוספים ל-Firebase שבהם נעשה שימוש ב-codelab הזה. מידע נוסף זמין בדפים הרלוונטיים של כל תוסף, במיוחד בדפים תחילת העבודה, פרמטרים שאפשר להגדיר וחיוב.

התוסף 'משימות מולטימודאליות עם Gemini API' קורא ל-Gemini API עם הנחיות מולטימודאליות שמכילות הנחיית טקסט וגם כתובת URL של קובץ נתמך או כתובת URL של Cloud Storage (שימו לב שגם Google AI Gemini API משתמש בכתובת URL של Cloud Storage כבסיס לכתובת ה-URL של הקובץ). התוסף תומך גם במשתני Handlebars כדי להחליף ערכים ממסמך Cloud Firestore להתאמה אישית של הנחיית הטקסט.

באפליקציה שלכם, בכל פעם שאתם מעלים תמונה לקטגוריית Cloud Storage, אתם יכולים ליצור כתובת URL ולהוסיף אותה למסמך חדש של Cloud Firestore – וכך להפעיל את התוסף ליצירת הנחיה מרובת-אופנים ולקרוא ל-Gemini API. בקוד המקור של ה-codelab הזה, כבר סיפקנו את הקוד להעלאת תמונה ולכתיבת כתובת ה-URL למסמך Firestore.

התקנת התוסף 'משימות מולטי-מודאליות עם Gemini API'

1. עוברים אל התוסף Multimodal Tasks with the Gemini API.
2. לוחצים על התקנה במסוף Firebase.
3. בוחרים את פרויקט Firebase.
4. לוחצים על הבא > הבא > הבא עד שמגיעים לקטע הגדרת התוסף.
   1. בתפריט Gemini API Provider (ספק Gemini API), בוחרים אם רוצים להשתמש ב-Gemini API מ-Google AI או מ-Vertex AI. למפתחים שמשתמשים ב-Firebase, מומלץ להשתמש ב-Vertex AI.
   2. בתיבת הטקסט Firestore Collection Path (נתיב לאוסף Firestore), מזינים: gallery
   3. בתיבת הטקסט הנחיה, מזינים: Please describe the provided image; if there is no image, say "no image"
   4. בתיבת הטקסט Image field (שדה תמונה), מזינים: image
   5. בתפריט Cloud Functions location, בוחרים את המיקום המועדף (למשל Iowa (us-central1) או המיקום שצוין קודם למסד הנתונים של Firestore).
   6. משאירים את כל שאר הערכים בברירת המחדל.
5. לוחצים על התקנת תוסף ומחכים שהתוסף יותקן.

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

כדאי לנסות את התוסף 'משימות מולטימודאליות עם Gemini API'

היעד של ה-codelab הזה הוא אינטראקציה עם התוסף Multimodal Tasks with the Gemini API (משימות מולטימודאליות עם Gemini API) דרך אפליקציית אינטרנט, אבל כדאי לנסות את התוסף במסוף Firebase כדי להבין איך הוא פועל.

התוסף מופעל בכל פעם שנוצר מסמך Firestore באוסף users/{uid}/gallery, שאפשר ליצור במסוף Firebase. התוסף מקבל את כתובת ה-URL של התמונה ב-Cloud Storage במסמך Cloud Firestore ומעביר אותה כחלק מההנחיה המולטי-מודאלית בקריאה ל-Gemini API.

קודם מעלים תמונה לקטגוריה של Cloud Storage:

1. עוברים אל Storage בפרויקט Firebase.
2. לוחצים על יצירת תיקייה.
3. בתיבת הטקסט Folder name (שם התיקייה), מזינים gallery
4. לוחצים על הוספת תיקייה.
5. בתיקייה gallery, לוחצים על העלאת קובץ.
6. בוחרים קובץ תמונה בפורמט JPEG להעלאה.

לאחר מכן, מוסיפים את כתובת ה-URL של התמונה ב-Cloud Storage למסמך Firestore (שהוא הטריגר להפעלת התוסף):

1. עוברים אל Firestore בפרויקט Firebase.
2. לוחצים על התחלת איסוף בעמודה הראשונה.
3. בתיבת הטקסט מזהה האוסף, מזינים: gallery ולוחצים על הבא.
4. כדי להוסיף מסמך לאוסף:
   1. בתיבת הטקסט מזהה מסמך, לוחצים על מזהה אוטומטי.
   2. בתיבת הטקסט Field (שדה) מזינים: image. בתיבה Value (ערך), מזינים את ה-URI של מיקום האחסון של התמונה שהעליתם.
5. לוחצים על הוספת שדה.
6. בתיבת הטקסט Field (שדה) מזינים: published. בתיבה סוג, בוחרים באפשרות boolean. בתיבה ערך, בוחרים באפשרות true.
7. לוחצים על שמירה ומחכים כמה שניות.

אוסף gallery כולל עכשיו מסמך שמכיל תשובה לשאילתה שלכם.

שימוש בגלריית התמונות של אפליקציית האינטרנט

1. בדפדפן, חוזרים לכרטיסייה עם אפליקציית האינטרנט Friendly Conf שפועלת באופן מקומי.
2. לוחצים על כרטיסיית הניווט גלריה.
3. תוצג גלריה של תמונות שהועלו ותיאורים שנוצרו על ידי AI. התמונה שהעליתם קודם לתיקייה gallery בקטגוריית האחסון אמורה להופיע.
4. לוחצים על הלחצן העלאה ובוחרים תמונת JPEG אחרת.
5. ממתינים כמה שניות עד שהתמונה תוצג בגלריה. כמה רגעים לאחר מכן, יוצג גם תיאור שנוצר על ידי AI לתמונה שהועלתה.

אם רוצים להבין את הקוד שבאמצעותו בוצעה ההטמעה, אפשר לעיין ב-src/app/gallery/page.tsx בבסיס הקוד של אפליקציית האינטרנט.

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

8. בונוס: פריסת האפליקציה

יש כמה דרכים לפרוס אפליקציית אינטרנט ב-Firebase. ב-Codelab זה, בוחרים אחת מהאפשרויות הבאות:

• אפשרות 1: אירוח ב-Firebase – משתמשים באפשרות הזו אם מחליטים לא ליצור מאגר משלכם ב-GitHub (ויש לכם רק קוד מקור שמאוחסן באופן מקומי במחשב).
• אפשרות 2: Firebase App Hosting – משתמשים באפשרות הזו אם רוצים פריסה אוטומטית בכל פעם שדוחפים שינויים למאגר GitHub משלכם. שירות Firebase החדש הזה נועד במיוחד להתאים לצרכים של אפליקציות דינמיות ב-Next.js וב-Angular.

אפשרות 1: פריסה באמצעות אירוח ב-Firebase

משתמשים באפשרות הזו אם החלטתם לא ליצור מאגר GitHub משלכם (ויש לכם רק קוד מקור שמאוחסן באופן מקומי במחשב).

1. בטרמינל, מפעילים את אירוח ב-Firebase על ידי הרצת הפקודות הבאות:

   firebase experiments:enable webframeworks
   firebase init hosting
   

2. להנחיה: Detected an existing Next.js codebase in your current directory, should we use this?, מקישים על Y.
3. בהנחיה: In which region would you like to host server-side content, if applicable?, בוחרים את מיקום ברירת המחדל או את המיקום שבו השתמשתם קודם ב-codelab הזה. ואז מקישים על Enter (או על return ב-macOS).
4. להנחיה: Set up automatic builds and deploys with GitHub?, מקישים על N.
5. מריצים את הפקודה הבאה כדי לפרוס את אפליקציית האינטרנט ב-Hosting:

   firebase deploy --only hosting
   

סיימת! אם אתם מעדכנים את האפליקציה ורוצים לפרוס את הגרסה החדשה, פשוט מריצים מחדש את הפקודה firebase deploy --only hosting ושירות אירוח ב-Firebase יבנה ויפרוס מחדש את האפליקציה.

אפשרות 2: פריסה באמצעות Firebase App Hosting

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

1. שומרים את השינויים ב-GitHub.
2. במסוף Firebase, עוברים אל App Hosting בפרויקט Firebase.
3. לוחצים על Get started (שנתחיל?) > Connect to GitHub (קישור ל-GitHub).
4. בוחרים את החשבון ב-GitHub ואת המאגר. לוחצים על הבא.
5. בקטע הגדרת פריסה > תיקיית שורש, מזינים את שם התיקייה עם קוד המקור (אם קובץ ה-package.json לא נמצא בתיקיית השורש של המאגר).
6. בקטע Live branch, בוחרים את הענף main במאגר GitHub. לוחצים על הבא.
7. מזינים מזהה לשרת העורפי (לדוגמה, chatbot).
8. לוחצים על סיום ופריסה.

יחלפו כמה דקות עד שהפריסה החדשה תהיה מוכנה. אפשר לבדוק את סטטוס הפריסה בקטע App Hosting במסוף Firebase.

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

9. סיכום

כל הכבוד! השגת הרבה ב-Codelab הזה!

התקנה והגדרה של תוספים

השתמשתם במסוף Firebase כדי להגדיר ולהתקין תוספים שונים ל-Firebase שמתבססים על AI גנרטיבי. השימוש בתוספים ל-Firebase נוח כי לא צריך ללמוד ולכתוב הרבה קוד שחוזר על עצמו (boilerplate) כדי לטפל באימות לשירותי Google Cloud או בלוגיקה של הבק-אנד של Cloud Functions כדי להאזין ל-Firestore ולממשקי API ולשירותים של Google Cloud ולקיים איתם אינטראקציה.

ניסיון של תוספים באמצעות מסוף Firebase

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

פיתוח אפליקציית אינטרנט מבוססת-AI

יצרתם אפליקציית אינטרנט מבוססת-AI שמשתמשת בתוספים ל-Firebase כדי לגשת רק לכמה יכולות של מודל Gemini.

באפליקציית האינטרנט, משתמשים בתוסף Chatbot with Gemini API כדי לספק למשתמש ממשק צ'אט אינטראקקטיבי, שכולל הקשר ספציפי לאפליקציה והיסטורי בשיחות – שבהן כל הודעה מאוחסנת במסמך Firestore שמוגדר למשתמש מסוים.

בנוסף, Gemini בדפדפן השתמש בתוסף 'משימות מולטימודאליות עם Gemini API' כדי ליצור תיאורי תמונות אוטומטיים לתמונות שהועלו.

השלבים הבאים

• אתם יכולים להתנסות בהנחיות ולנצל את חלון ההקשר הגדול ב-Google AI Studio או ב-Vertex AI Studio.
• מידע על חיפוש בעזרת בינה מלאכותית גנרטיבית עם אחזור מידע (RAG)
• אפשר לנסות את ה-codelab הזה בקצב אישי, שמראה איך להוסיף צ'אטבוט לאפליקציית Firebase קיימת באמצעות Genkit (שירות חדש של מסגרת AI).
• מידע על יכולות חיפוש דמיון ב-Firestore וב-Cloud SQL ל-PostgreSQL
• אפשר ללמד את הצ'אטבוט להתקשר לאפליקציה הקיימת באמצעות קריאה לפונקציה.