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

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

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

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

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

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

מה תלמדו

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

מה צריך

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

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

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

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

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

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

שירותי Firebase

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

תוספים ל-Firebase

התוספים של Firebase שבהם נשתמש ב-codelab הזה הם:

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

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

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

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

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

   node -v
   

2. אם אין לכם את Node.js בגרסה 20.0.0 ואילך, מורידים את גרסת 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 שמציע הוראות פשוטות להתחלה מהירה של אפליקציית האינטרנט. עם זאת, אם אתם לומדים את הנושא בפעם הראשונה, כדאי לכם להשלים את הקודלהב הזה (במקום המדריך למתחילים) כי הוא מכיל את קבוצת ההוראות המקיפות ביותר.

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

התקנת ה-CLI של Firebase

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

   firebase --version
   

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

   npm update -g firebase-tools
   

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

   npm install -g firebase-tools
   

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

כניסה ל-Firebase

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

   cd codelab-gemini-api-extensions
   firebase login
   

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

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

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

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

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

1. נכנסים למסוף Firebase באמצעות חשבון Google.
2. לוחצים על Create a project (יצירת פרויקט) ומזינים שם פרויקט (לדוגמה, AI Extensions Codelab).
   חשוב לזכור את מזהה הפרויקט שהוקצה באופן אוטומטי לפרויקט ב-Firebase (או ללחוץ על הסמל Edit (עריכה) כדי להגדיר את מזהה הפרויקט המועדף). המזהה הזה יידרש לכם בהמשך כדי לזהות את פרויקט Firebase ב-CLI של Firebase. אם תשכחו את המזהה, תמיד תוכלו למצוא אותו מאוחר יותר בקטע הגדרות הפרויקט.
3. לוחצים על המשך.
4. אם מוצגת בקשה לעשות זאת, קוראים את התנאים של Firebase ומאשרים אותם, ואז לוחצים על המשך.
5. בקודלאב הזה לא צריך Google Analytics, לכן משביתים את האפשרות של Google Analytics.
6. לוחצים על Create project (יצירת פרויקט), ממתינים להקצאת הפרויקט ולוחצים על Continue (המשך).

שדרוג של תוכנית התמחור ב-Firebase

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

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

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

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

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

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

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

מעולה! סיימתם לרשום אפליקציית אינטרנט בפרויקט 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. לוחצים על Create database.
3. משאירים את הערך (default) בשדה Database ID.
4. בוחרים מיקום למסד הנתונים ולוחצים על הבא.
   באפליקציה אמיתית, כדאי לבחור מיקום קרוב למשתמשים.
5. לוחצים על התחלה במצב בדיקה. קוראים את כתב הוויתור לגבי כללי האבטחה.
   בהמשך הסדנה תוסיפו כללי אבטחה כדי לאבטח את הנתונים. אסור להפיץ או לחשוף אפליקציה באופן ציבורי בלי להוסיף כללי אבטחה למסד הנתונים.
6. לוחצים על יצירה.

הגדרת Cloud Storage for Firebase

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

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

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

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

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

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

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

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

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

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

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

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

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

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

הגדרת ה-CLI של Firebase כך שיפעל בפרויקט Firebase

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

firebase use YOUR_PROJECT_ID

פריסת כללי אבטחה ל-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, מעתיקים את הקוד המלא של initializeApp, כולל המשתנה הקבוע firebaseConfig.
2. מוסיפים את הגדרת Firebase למאגר הקוד של אפליקציית האינטרנט:
   1. פותחים את הקובץ src/app/lib/firebase/firebase.config.js בכלי לעריכת קוד.
   2. בוחרים את כל הקובץ ומחליפים אותו בקוד שהעתקתם.
   3. שומרים את הקובץ.

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

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

   npm install
   npm run dev
   

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

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

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

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

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

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

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

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

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

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

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

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

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

בונוס: הפעלת אפליקציית האינטרנט באמצעות Firebase Local Emulator Suite

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

1. במסוף, מוודאים שנמצאים ברמה הבסיסית של אפליקציית האינטרנט.
2. מריצים את הפקודה הבאה כדי להתקין את Firebase Local Emulator Suite ולהפעיל אותו:

   firebase init emulators
   firebase emulators:start
   

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

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

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

התקנת התוסף 'משימות רב-מודאליות באמצעות Gemini API'

1. עוברים אל התוסף 'משימות רב-מודאליות באמצעות Gemini API'.
2. לוחצים על התקנה במסוף Firebase.
3. בוחרים את פרויקט Firebase.
4. לוחצים על הבא > הבא > הבא עד שמגיעים לקטע הגדרת התוסף.
   1. בתפריט Gemini API Provider, בוחרים אם להשתמש ב-Gemini API מ-Google AI או מ-Vertex AI. למפתחים שמשתמשים ב-Firebase, מומלץ להשתמש ב-Vertex AI.
   2. בתיבת הטקסט Firestore Collection Path (נתיב האוסף ב-Firestore), מזינים: gallery
   3. בתיבת הטקסט Prompt מזינים: 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 הזה היא ליצור אינטראקציה עם התוסף 'משימות רב-מודאליות באמצעות Gemini API' דרך אפליקציית אינטרנט, אבל כדאי קודם לנסות את התוסף במסוף Firebase כדי להבין איך הוא עובד.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

   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?, בוחרים את מיקום ברירת המחדל או את המיקום שבו השתמשתם קודם במדריך הזה. לאחר מכן מקישים על 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, עוברים אל אירוח אפליקציות בפרויקט Firebase.
3. לוחצים על שנתחיל? > חיבור ל-GitHub.
4. בוחרים את חשבון GitHub ואת המאגר. לוחצים על הבא.
5. בקטע Deployment setting (הגדרת הפריסה) > Root directory (ספריית השורש), מזינים את שם התיקייה עם קוד המקור (אם package.json לא נמצא בתיקיית השורש של המאגר).
6. בשדה Live branch, בוחרים את ההסתעפות main במאגר ב-GitHub. לוחצים על הבא.
7. מזינים מזהה לקצה העורפי (לדוגמה, chatbot).
8. לוחצים על Finish and Deploy.

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

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

9. סיכום

כל הכבוד! עשיתם הרבה ב-codelab הזה!

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

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

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

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

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

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

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

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

השלבים הבאים

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