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

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

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

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

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

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

מה תלמדו

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

מה צריך להכין

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

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

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

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

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

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

שירותי Firebase

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

תוספים ל-Firebase

התוספים של Firebase שבהם תשתמשו בסדנת הקוד הזו כוללים את התוספים הבאים:

• פיתוח צ'אטבוט באמצעות 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 שנוצר במהלך ה-codelab:

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

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

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

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

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

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

התקנת Firebase CLI

1. מוודאים שה-CLI של Firebase מותקן ושהגרסה שלו היא 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. ב-Terminal, עוברים לתיקייה 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. בהמשך תפעילו גם כמה שירותים של Firebase שמשמשים את אפליקציית האינטרנט לדוגמה.

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

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

1. נכנסים למסוף Firebase באמצעות אותו חשבון Google שבו השתמשתם בשלב הקודם.
2. לוחצים על הלחצן כדי ליצור פרויקט חדש, ואז מזינים שם לפרויקט (לדוגמה, AI Extensions Codelab).
   
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 עם תקופת ניסיון בחינם.
• אם אתם משתתפים בסדנת קוד כחלק מאירוע, כדאי לשאול את מארגן האירוע אם יש קרדיטים ל-Cloud.

חשוב גם לדעת שאם החיוב מופעל בפרויקט Firebase, תחויבו על הקריאות שהתוסף מבצע ל-Gemini API (לא משנה באיזה ספק תבחרו, Google AI או Vertex AI). מידע נוסף על התמחור של AI מבית Google ושל 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 (רישום האפליקציה > הבא > הבא > המשך אל המסוף).
   אתם יכולים לדלג על כל השלבים שקשורים ל'אירוח' בתהליך של אפליקציית האינטרנט, כי בהמשך תהיה לכם אפשרות להגדיר שירות אירוח ב-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) בשדה מזהה מסד הנתונים.
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, תוסיפו כללי אבטחה כדי לאבטח את הנתונים. אל תפיצו או תחשפו אפליקציה לציבור בלי להוסיף כללי אבטחה לדלי שלכם ב-Storage.
5. לוחצים על יצירה.

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

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

התקנת התוסף 'יצירת צ'אטבוט באמצעות 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}/messages.
      בשלבים הבאים של ה-codelab הזה, הוספת מסמכים לאוסף הזה תפעיל את התוסף לקריאה ל-Gemini API.
   3. בתפריט Cloud Functions location, בוחרים את המיקום המועדף (למשל Iowa (us-central1) או המיקום שצוין קודם למסד הנתונים של Firestore).
   4. משאירים את כל שאר הערכים בברירת המחדל.
7. לוחצים על התקנת התוסף ומחכים שהתוסף יותקן.

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

היעד של ה-codelab הזה הוא אינטראקציה עם התוסף Build Chatbot with the Gemini API (יצירת צ'אטבוט באמצעות 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

פריסת כללי אבטחה ל-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/‎ או כתובת דומה.

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

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. בתיבת הטקסט הקלדת הודעה, שואלים שאלת המשך שקשורה לשאלה הקודמת: Give me a few more details about the last one.

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

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 ולהוסיף אותה למסמך חדש ב-Cloud Firestore – וכך להפעיל את התוסף ליצירת הנחיה מולטימודלית ולקרוא ל-Gemini API. בקוד המקור של ה-Codelab הזה, כבר סיפקנו את הקוד להעלאת תמונה ולכתיבת כתובת ה-URL למסמך Firestore.

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

1. עוברים אל התוסף 'משימות מולטימודאליות באמצעות 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. בתיבת הטקסט 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 הזה הוא אינטראקציה עם התוסף Multimodal Tasks with the 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 בבסיס הקוד של אפליקציית האינטרנט.

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

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

• אפשרות 1: Firebase Hosting – משתמשים באפשרות הזו אם מחליטים לא ליצור מאגר משלכם ב-GitHub (ויש לכם רק קוד מקור שמאוחסן באופן מקומי במחשב).
• אפשרות 2: Firebase App Hosting – משתמשים באפשרות הזו אם רוצים פריסה אוטומטית בכל פעם שדוחפים שינויים למאגר 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?, בוחרים את מיקום ברירת המחדל או את המיקום שבו השתמשתם קודם ב-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 Hosting יבנה ויפרוס מחדש את האפליקציה.

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

משתמשים באפשרות הזו אם רוצים פריסה אוטומטית בכל פעם שמעלים שינויים למאגר 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 נוח כי לא צריך ללמוד ולכתוב הרבה קוד סטנדרטי כדי לטפל באימות לשירותי 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)
• אפשר לנסות סדנת קוד בקצב אישי שמראה איך להוסיף צ'אטבוט לאפליקציית Firebase קיימת באמצעות Genkit (שירות חדש של מסגרת AI).
• מידע נוסף על יכולות חיפוש דמיון ב-Firestore וב-Cloud SQL ל-PostgreSQL
• אפשר ללמד את הצ'אטבוט להתקשר לאפליקציה הקיימת באמצעות קריאה לפונקציה.