פריסה באירוח אפליקציות ב-Firebase באמצעות אפליקציית Next.js

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

ב-codelab הזה תלמדו איך לפרוס אתר ל-Firebase App Hosting באמצעות אפליקציית אינטרנט של Next.js שנקראת Friendly Eats, שהיא אתר לביקורות על מסעדות.

אפליקציית האינטרנט Friendly Eats

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

  • יצירה ופריסה אוטומטיות: בשיעור הזה תלמדו איך להשתמש ב-Firebase App Hosting כדי ליצור ולפרוס אוטומטית את קוד Next.js בכל פעם שאתם דוחפים אותו לענף מוגדר.
  • כניסה ויציאה: אפליקציית האינטרנט המלאה מאפשרת למשתמשים להיכנס ולצאת באמצעות Google. הכניסה של המשתמשים וההתמדה שלהם מנוהלות באופן מלא דרך אימות ב-Firebase.
  • תמונות: אפליקציית האינטרנט שהושלמה מאפשרת למשתמשים מחוברים להעלות תמונות של מסעדות. נכסי התמונות מאוחסנים ב-Cloud Storage for Firebase. ‫Firebase JavaScript SDK מספק כתובת URL ציבורית לתמונות שהועלו. כתובת ה-URL הציבורית הזו מאוחסנת במסמך המסעדה הרלוונטי ב-Cloud Firestore.
  • מסננים: אפליקציית האינטרנט המלאה מאפשרת למשתמשים מחוברים לסנן את רשימת המסעדות לפי קטגוריה, מיקום ומחיר. אפשר גם להתאים אישית את שיטת המיון שבה משתמשים. הגישה לנתונים מתבצעת מ-Cloud Firestore, והשאילתות ב-Firestore מוחלות על סמך המסננים שבהם נעשה שימוש.
  • ביקורות: אפליקציית האינטרנט המלאה מאפשרת למשתמשים מחוברים לפרסם ביקורות על מסעדות. הביקורות כוללות דירוג כוכבים והודעה מבוססת-טקסט. המידע על הביקורות מאוחסן ב-Cloud Firestore.
  • סיכומי ביקורות: אפליקציית האינטרנט המוגמרת מסכמת ביקורות באופן אוטומטי באמצעות מודל Gemini. תקצירים שנוצרו על ידי AI מאוחסנים ב-Cloud Firestore.

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

  • ידע ב-Next.js וב-JavaScript

מה תלמדו

  • איך משתמשים ב-Firebase עם נתב האפליקציות של Next.js ועם עיבוד בצד השרת
  • איך מאשרים קריאות ל-Gemini API באמצעות סודות בצד השרת בלבד

מה צריך להכין

  • דפדפן לבחירתכם, כמו Google Chrome
  • גישה אל IDX.dev (סביבת עבודה מבוססת-אינטרנט)
  • חשבון Google ליצירה ולניהול של פרויקט Firebase
  • חשבון GitHub (לא חייב להיות אותו חשבון אימייל כמו זה שצוין למעלה)

2. הגדרת סביבת הפיתוח ומאגר ב-GitHub

ב-codelab הזה מסופק בסיס הקוד של האפליקציה, והוא מסתמך על Firebase CLI ועל IDX.dev.

יוצרים מאגר חדש ב-GitHub ומייבאים אותו ל-IDX

ב-Firebase App Hosting אפשר להגדיר מאגר ב-GitHub כך שהמערכת תבנה ותפרוס את קוד Next.js בכל פעם שדוחפים קוד להסתעפות שהוגדרה.

  1. יוצרים מאגר חדש ב-GitHub בשביל ה-Codelab הזה: https://github.com/new. נותנים לו שם, למשל MyFriendlyEatsCodelab.
  2. מעתיקים את כתובת ה-URL של המאגר החדש. הוא ייראה כך:
    https://github.com/USER_NAME/REPOSITORY_NAME.git
  3. עוברים לכתובת https://idx.google.com ונכנסים לחשבון.
  4. לוחצים על Import a repo (ייבוא מאגר) ומדביקים את כתובת ה-URL שהעתקתם מ-GitHub.
    מערכת IDX תבקש מכם לקשר ל-GitHub, ואז תשכפל את המאגר (הריק).

הצגת מאגר קוד המקור של ה-Codelab

אפשר לראות את המקור של ה-Codelab בכתובת https://github.com/firebase/friendlyeats-web. מאגר friendlyeats-web מכיל פרויקטים לדוגמה למספר פלטפורמות.

ה-codelab הזה מתמקד רק ב-Firebase App Hosting וב-Gemini API, והוא גרסה מקוצרת של ה-codelab המלא 'שילוב של Firebase עם אפליקציית Next.js'. ב-codelab המקוצר הזה, צריך לעבוד רק עם קוד המקור בענף #io-connect של מאגר friendlyeats-web, ובמיוחד בספרייה nextjs-step10.

שימו לב לספריות הנוספות הבאות במאגר friendlyeats-web. למרות שלא צריך את הספריות האלה בשביל ה-codelab הזה, כדאי לדעת מה הן.

העתקת קוד המקור של ה-codelab למאגר החדש

כך מעתיקים את ספריית nextjs-step10 למאגר משלכם:

  1. ב-IDX, פותחים את הטרמינל באמצעות Menu > Terminal > New Terminal.
  2. משתמשים בחבילת ה-npm‏ giget כדי לאחזר רק את הספרייה nextjs-step10 מהענף io-connect:
    npx giget@latest gh:firebase/friendlyeats-web/nextjs-step10#io-connect . --force
  3. מעקב אחרי שינויים באופן מקומי באמצעות Git:
    git add -A
git commit -m "codelab starting point"
git branch -M main
git push -u origin main

עכשיו אמור להופיע קוד ההתחלה במאגר GitHub.

3. בדיקת בסיס הקוד הראשוני

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

מבנה התיקיות והקבצים

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

תיקיות וקבצים

תיאור

src/components

רכיבי React למסננים, לכותרות, לפרטי מסעדות ולביקורות

src/lib

פונקציות עזר שלא בהכרח קשורות ל-React או ל-Next.js

src/lib/firebase

קוד ספציפי ל-Firebase והגדרת Firebase

public

נכסים סטטיים באפליקציית האינטרנט, כמו סמלים

src/app

ניתוב באמצעות נתב האפליקציות של Next.js

src/app/restaurant

פונקציית handler של נתיב API

package.json וגם package-lock.json

יחסי תלות של פרויקטים ב-npm

next.config.js

הגדרה ספציפית ל-Next.js (פעולות שרת מופעלות)

jsconfig.json

הגדרות של שירות שפה ב-JavaScript

רכיבי שרת ולקוח

האפליקציה היא אפליקציית אינטרנט ב-Next.js שמשתמשת בנתב האפליקציות. הרינדור בצד השרת משמש בכל האפליקציה. לדוגמה, קובץ src/app/page.js הוא רכיב בצד השרת שאחראי על הדף הראשי. הקובץ src/components/RestaurantListings.jsx הוא רכיב לקוח שמסומן על ידי ההנחיה "use client" בתחילת הקובץ.

ייבוא דפי פירוט חשבון

יכול להיות שתבחינו בקבצים מסוימים בהצהרות ייבוא כמו אלה:

import RatingPicker from "@/src/components/RatingPicker.jsx";

האפליקציה משתמשת בסמל @ כדי להימנע מנתיבי ייבוא יחסיים מסורבלים, והיא עושה זאת באמצעות כינויי נתיבים.

ממשקי API ספציפיים ל-Firebase

כל קוד Firebase API עטוף בספרייה src/lib/firebase. לאחר מכן, כל רכיב React מייבא את הפונקציות העטופות מהספרייה src/lib/firebase, במקום לייבא ישירות פונקציות של Firebase.

נתוני דמה

נתוני מסעדות וביקורות לדוגמה מופיעים בקובץ src/lib/randomData.js. הנתונים מהקובץ הזה מורכבים בקוד בקובץ src/lib/fakeRestaurants.js.

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

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

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

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

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

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

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

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

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

5. יצירת קצה עורפי לאירוח אפליקציות

בקטע הזה תגדירו קצה עורפי של App Hosting שיעקוב אחרי ענף במאגר git. תגדירו גם את כל השירותים שהקצה העורפי יתקשר איתם.

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

יצירת קצה עורפי

  1. במסוף Firebase, עוברים אל הדף של אירוח אפליקציות:מצב אפס של מסוף אירוח האפליקציות, עם לחצן 'תחילת העבודה'
  2. לוחצים על Get started (התחלה) כדי להתחיל את תהליך היצירה של ה-Backend.
  3. פועלים לפי ההנחיות כדי לייבא ולחבר את מאגר GitHub שיצרתם קודם.
  4. קובעים את הגדרות הפריסה:
    • השארת ספריית השורש כ/
    • הגדרת הענף הפעיל ל-main
    • הפעלת השקות אוטומטיות
  5. נותנים שם ל-backend friendlyeats-codelab (או שם אחר לבחירתכם). הוא הופך לחלק מהדומיין שמשמש לגישה לחלק האחורי של האתר.
    במהלך תהליך העבודה הזה נוצרת באופן אוטומטי אפליקציית אינטרנט ב-Firebase בפרויקט Firebase שלכם. בהמשך ב-codelab הזה, תשתמשו בערכי ההגדרה של אפליקציית האינטרנט הזו כדי לקשר את בסיס הקוד לפרויקט Firebase.
  6. לוחצים על סיום ופריסה. אחרי רגע, תועברו לדף חדש שבו תוכלו לראות את הסטטוס של העורף החדש של אירוח האפליקציה.
  7. לוחצים על סמל ההעתקה לצד הדומיין החדש בלוח הבקרה של אירוח האפליקציות.
    הדומיין ייראה כך: BACKEND_ID--PROJECT_ID.REGION.hosted.app. תצטרכו את הדומיין הזה כדי להגדיר בהמשך את Firebase Authentication.

יכול להיות שיעברו כמה דקות עד שהדומיין יתחיל לפעול, בגלל הפצת DNS ויצירת אישור SSL. בזמן שהקצה העורפי נוצר, ממשיכים להגדיר את שאר הפרויקט ב-Firebase ולהגדיר את הקצה העורפי (השלבים הבאים ב-codelab הזה).

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

6. הגדרה של שירותי Firebase אחרים

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

הגדרת אימות

  1. במסוף Firebase, עוברים אל אימות.
  2. לוחצים על תחילת העבודה.
  3. בעמודה ספקים נוספים, לוחצים על Google > הפעלה.
    1. בתיבת הטקסט Public-facing name for project, מזינים שם, למשל My FriendlyEatsCodelab app.
    2. בתפריט הנפתח Support email for project, בוחרים את כתובת האימייל.
    3. לוחצים על שמירה.
  4. לוחצים על הכרטיסייה הגדרות בדף אימות.
    1. בתפריט הימני במסך, לוחצים על דומיינים מורשים.
    2. לוחצים על הוספת דומיין, ואז מוסיפים את הדומיין החדש של אירוח האפליקציות (הוא מסתיים ב-.hosted.app).
    3. לוחצים על הוספה כדי לשמור.

הגדרת 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. לוחצים על יצירה.

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

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

כניסה ל-Firebase CLI ב-IDX

ב-IDX כבר מותקנים Node.js ו-Firebase CLI, כך שאפשר לדלג על ההתקנה שלהם ולהתחיל להגדיר את ה-CLI.

  1. בטרמינל ב-IDX, מריצים את הפקודות הבאות כדי להגדיר את ה-CLI לשימוש בפרויקט Firebase שיצרתם קודם:
    firebase login --no-localhost
firebase use --add
    כשמופיעה בקשה להזין כינוי, מזינים codelab.
  2. מזינים Y או N, בהתאם לרצון שלכם ש-Firebase יאסוף נתונים. כל אחת מהאפשרויות האלה מתאימה ל-codelab הזה.
  3. בדפדפן, בוחרים את חשבון Google ולוחצים על אישור.

פריסת כללי אבטחה ואינדקסים

הקוד שהעתקתם למאגר GitHub כבר כולל קבוצות של כללי אבטחה ל-Firestore (ב-firestore.rules) ול-Cloud Storage for Firebase (ב-storage.rules). אחרי שמפעילים את כללי האבטחה, הנתונים במסד הנתונים ובמאגר מוגנים טוב יותר מפני שימוש לרעה.

אפשר גם להשתמש ב-CLI כדי לפרוס קבוצה של אינדקסים ל-Firestore (ב-firestore.indexes.json) כדי להפעיל שאילתות מתקדמות.

  1. בטרמינל ב-IDX, מריצים את הפקודה הבאה כדי לפרוס את כללי האבטחה והאינדקסים האלה:
    firebase deploy --only firestore,storage
  2. אם מוצגת השאלה: "Cloud Storage for Firebase needs an IAM Role to use cross-service rules. Grant the new role?", מקישים על Enter כדי לבחור באפשרות כן.

מוסיפים את ההגדרה של Firebase לקוד של אפליקציית האינטרנט

  1. במסוף Firebase, מבצעים את הפעולות הבאות:
    1. עוברים אל הגדרות הפרויקט.
    2. גוללים למטה לקטע האפליקציות שלך ובוחרים את האפליקציה עם אותו שם כמו ה-backend של אירוח האפליקציה.
    3. בקטע SDK setup and configuration (הגדרה והגדרת תצורה של SDK), בוחרים באפשרות Config (הגדרה), ואז מעתיקים את המאפיינים של המשתנה firebaseConfig ואת הערכים שלהם.
  2. ב-IDX, מבצעים את הפעולות הבאות:
    1. פותחים את הקובץ apphosting.yaml. כאן מגדירים את משתני הסביבה ב-App Hosting, וגם סודות והגדרות זמן ריצה.
    2. ממלאים את הערכים של משתני הסביבה שסופקו בערכי התצורה שהעתקתם ממסוף Firebase.לדוגמה (צריך להחליף בערכים משלכם):
      runConfig:
    minInstances: 0
    maxInstances: 2
env:
    # Get these values from the Firebase console
    - variable: NEXT_PUBLIC_FIREBASE_API_KEY
        value: xxxxxxxxxxxxxxxxxxxxxxxxxxxx-xxxxxxxxxx
    - variable: NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN
        value: project-id.firebaseapp.com
    - variable: NEXT_PUBLIC_FIREBASE_PROJECT_ID
        value: project-id
    - variable: NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET
        value: project-id.firebasestorage.app
    - variable: NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID
        value: 111111111111
    - variable: NEXT_PUBLIC_FIREBASE_APP_ID
        value: 1:111111111111:web:aaaaaaaaaaaaaaaaaaaaaa
    3. שומרים את הקובץ. אחר כך, בטרמינל ב-IDX, מריצים את הפקודות האלה כדי לדחוף את השינויים ל-GitHub:
      git commit -a -m "Setup Firebase Config"

git push
  3. חוזרים אל מסוף Firebase, אל הדף 'אירוח אפליקציות', ומבצעים את הפעולות הבאות:
    1. לוחצים על View Dashboard (צפייה בלוח הבקרה) עבור ה-backend.
    2. שימו לב שהופעלה בנייה חדשה מ-git push. התהליך הזה אמור להימשך כ-3 דקות עד שהבנייה תושלם והפריסה ל-Cloud Run תתבצע. כדי לעקוב אחרי ההתקדמות, לוחצים על הצ'יפ build-ID.
    3. כדי לבדוק אם ההשקה הסתיימה, מרעננים את דף המסוף. אחרי שהפעולה מסתיימת, לוחצים על הקישור לדומיין (שמסתיים ב-.hosted.app) בקטע domains כדי לפתוח אותו ולראות את האפליקציה החדשה שהופעלה.

מזל טוב, פרסת את אפליקציית האינטרנט הראשונה שלך! בואו נתעמק קצת יותר.

8. ניסיון של אפליקציית האינטרנט בדפדפן

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

  1. בדפדפן, מרעננים את הדף שבו מוצגת אפליקציית האינטרנט.
  2. לוחצים על כניסה באמצעות חשבון Google.
  3. יוצאים מהחשבון ונכנסים אליו שוב. הדף מתעדכן בזמן אמת בלי לרענן אותו. אפשר לחזור על השלב הזה עם משתמשים אחרים.
  4. אופציונלי: בדפדפן, מרעננים את אפליקציית האינטרנט. לוחצים לחיצה ימנית על אפליקציית האינטרנט, בוחרים באפשרות הצגת מקור הדף ומחפשים את השם המוצג. הוא מופיע במקור ה-HTML הגולמי שמוחזר מהשרת.

הצגת פרטי המסעדה

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

כדי להוסיף נתוני מסעדות לדוגמה למסד הנתונים של Cloud Firestore, בוחרים באפשרות 2cf67d488d8e6332.png > Add sample restaurants.

מוודאים שהדפים העסקיים של המסעדה נטענים בזמן הריצה של השרת

כשמשתמשים ב-framework‏ Next.js, יכול להיות שלא ברור מתי הנתונים נטענים בזמן הריצה של השרת או בזמן הריצה בצד הלקוח.

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

  1. באפליקציית האינטרנט, פותחים את כלי הפיתוח ומשביתים את JavaScript.השבתת JavaScript בכלי הפיתוח
  2. מרעננים את אפליקציית האינטרנט. רשימות המסעדות עדיין נטענות. פרטי המסעדה מוחזרים בתגובת השרת. כש-JavaScript מופעל, פרטי המסעדה עוברים הידרציה באמצעות קוד JavaScript בצד הלקוח.
  3. בכלי הפיתוח, מפעילים מחדש את JavaScript.
  4. באפליקציית האינטרנט, בוחרים באפשרות 27ca5d1e8ed8adfe.png > הוספת מסעדות לדוגמה. אם פונקציית הצילום שלכם מיושמת בצורה נכונה, המסעדות יופיעו בזמן אמת בלי שתרעננו את הדף.

הוספת ביקורות על מסעדה

כדי להוסיף ביקורת ולוודא שהיא מוכנסת ל-Cloud Firestore, פועלים לפי השלבים הבאים:

  1. מרעננים את אפליקציית האינטרנט ובוחרים מסעדה מדף הבית.
  2. בדף של המסעדה, לוחצים על 3e19beef78bb0d0e.png.
  3. בוחרים דירוג כוכבים.
  4. כתיבת ביקורת.
  5. לוחצים על שליחה. הביקורת שלכם תופיע בראש רשימת הביקורות.

9. סיכום ביקורות על מסעדות באמצעות AI גנרטיבי

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

אחסון מפתח Gemini API ב-Cloud Secret Manager

שירות App Hosting משולב עם Cloud Secret Manager כדי לאפשר לכם לאחסן ערכים רגישים כמו מפתחות API בצורה מאובטחת.

  1. כדי להשתמש ב-Gemini API, תצטרכו מפתח API. יוצרים מפתח ב-Google AI Studio.
    כשמוצגת בקשה, בוחרים את אותו פרויקט שבו השתמשתם ב-codelab הזה (מאחורי הקלעים, פרויקט Firebase הוא פרויקט Google Cloud).
  2. בטרמינל ב-IDX, מריצים את הפקודה הבאה כדי ליצור סוד חדש:
    firebase apphosting:secrets:set gemini-api-key
  3. כשמוצגת בקשה להזנת ערך הסוד, מעתיקים את מפתח Gemini API מ-Google AI Studio ומדביקים אותו.
  4. אם מוצגת השאלה: "To use this secret, your backend's service account must be granted access. Would you like to grant access now?", מקישים על Enter כדי לבחור באפשרות כן.
  5. כשנשאלים אם להוסיף את הסוד החדש ל-apphosting.yaml, מזינים Y כדי לאשר, ואז מקישים על Enter כדי לבחור באפשרות GEMINI_API_KEY כשם משתנה הסביבה.

מפתח Gemini API מאוחסן עכשיו בצורה מאובטחת ב-Cloud Secret Manager, ויש לו גישה לקצה העורפי של App Hosting. אפשר גם לראות את הערך בלוח הבקרה של Secrets Manager במסוף Google Cloud.

  1. פותחים את הקובץ apphosting.yaml ורואים ששם הסוד שלכם תועד, אבל לא הערכים.הקובץ אמור להיראות כך:
    runConfig:
    minInstances: 0
    maxInstances: 2
env:
    # Get these values from the Firebase console
    - variable: NEXT_PUBLIC_FIREBASE_API_KEY
        value: xxxxxxxxxxxxxxxxxxxxxxxxxxxx-xxxxxxxxxx
    - variable: NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN
        value: project-id.firebaseapp.com
    - variable: NEXT_PUBLIC_FIREBASE_PROJECT_ID
        value: project-id
    - variable: NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET
        value: project-id.firebasestorage.app
    - variable: NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID
        value: 111111111111
    - variable: NEXT_PUBLIC_FIREBASE_APP_ID
        value: 1:111111111111:web:aaaaaaaaaaaaaaaaaaaaaa
    - variable: GEMINI_API_KEY
        secret: gemini-api-key

הטמעה של רכיב סיכום הביקורות

  1. ב-IDX, פותחים את src/components/Reviews/ReviewSummary.jsx.
  2. מחליפים את הפונקציה GeminiSummary בקוד הבא:
    export async function GeminiSummary({ restaurantId }) {
    const { firebaseServerApp } = await getAuthenticatedAppForUser();
    const reviews = await getReviewsByRestaurantId(
        getFirestore(firebaseServerApp),
        restaurantId
    );

    const genAI = new GoogleGenerativeAI(process.env.GEMINI_API_KEY);
    const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash",
    safety_settings: [
        {
        category: HarmCategory.HARM_CATEGORY_DANGEROUS_CONTENT,
        threshold: HarmBlockThreshold.BLOCK_NONE,
        },
    ],
    });
    const reviewSeparator = "@";
    const prompt = `
        Based on the following restaurant reviews,
        where each review is separated by a '${reviewSeparator}' character,
        create a one-sentence summary of what people think of the restaurant.

        Here are the reviews: ${reviews.map(review => review.text).join(reviewSeparator)}
    `;

    try {
        const result = await model.generateContent(prompt);
        const response = await result.response;
        const text = response.text();

        return (
            <div className="restaurant__review_summary">
                <p>{text}</p>
                <p>✨ Summarized with Gemini</p>
            </div>
        );
    } catch (e) {
        console.error(e);
        return <p>Error contacting Gemini</p>;
    }
}
  3. בטרמינל ב-IDX, מריצים את הפקודות האלה כדי ליצור קומיט ולדחוף אותו למאגר GitHub.
    git commit -a -m "Use AI to summarize reviews"

git push
  4. במסוף Firebase, פותחים את דף אירוח האפליקציות ומחכים עד שההשקה החדשה תושלם.
  5. בדפדפן, לוחצים על כרטיס של מסעדה. בחלק העליון של המסך אמור להופיע סיכום של כל הביקורות על המסעדה במשפט אחד.
  6. מוסיפים ביקורת חדשה ומרעננים את הדף. סיכום השינוי אמור להופיע.

10. סיכום

כל הכבוד! למדתם איך להשתמש באירוח אפליקציות ב-Firebase כדי לפרוס אפליקציית Next.js ולהשתמש ב-Gemini API כדי לסכם טקסט. באופן ספציפי, השתמשת בכלים הבאים:

  • ‫Firebase App Hosting כדי ליצור ולפרוס אוטומטית את קוד Next.js בכל פעם שדוחפים אותו להסתעפות מוגדרת ב-GitHub.
  • ‫Cloud Secret Manager (משולב עם App Hosting) לאחסון מאובטח של מפתח Gemini API, כדי שתוכלו ליצור תכונות של AI גנרטיבי באפליקציה.

מידע נוסף

כדי ללמוד איך הוספנו לאפליקציה הזו את Firebase Authentication, ‏ Cloud Firestore ו-Cloud Storage for Firebase, אפשר לעיין בסדנת הקוד המלאה בנושא שילוב של Firebase עם אפליקציית Next.js.

כדאי גם לעיין ב-Codelabs נוספים: