‫Google משתמשת בטכנולוגיית AI כדי לתרגם תוכן לשפה המועדפת עליך. בתרגומים כאלו עשויות להיות שגיאות.

פיתוח אפליקציות מבוססות-AI באמצעות הסביבה העסקית של Google

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

פיתוח התוכנה השתנה. המפתחים הכי מצליחים לא רק כותבים קוד, אלא גם משתמשים בכלים ובסוכנים מבוססי-AI כדי ליצור קוד טוב יותר ומהר יותר. מערכת הכלים של Google מספקת חבילה מקיפה לכל מחזור החיים: יצירת ממשק משתמש, יצירת אב טיפוס ופריסה של אפליקציות, פיתוח תכונות מבוססות-AI ושילוב מאובטח וניתן להרחבה של קצה עורפי. ב-Codelab הזה תשתמשו ב-Google Stitch כדי לעצב את ממשק המשתמש, ב-Google AI Studio כדי לכתוב קוד ולפרוס את האפליקציה, וב-Firebase כדי לפתח תכונות מבוססות-AI ולאחסן מידע בבק-אנד מאובטח וניתן להרחבה.

האפליקציה שתבנו ב-Codelab הזה נקראת Decide For Me (תחליט בשבילי) – עוזרת לאנשים שמתקשים לקבל החלטות חשובות בחיים (למשל, מעבר דירה, שינוי קריירה או בחירת תחביב). המשתמש מזין דילמה וסדרי עדיפויות בחיים, והאפליקציה משתמשת ב-AI כדי לעזור למשתמש להחליט על סמך מה שממזער את האכזבה לטווח הארוך. האפליקציה גם מציעה למשתמש שלב ראשון קונקרטי. הגרסה הסופית של האפליקציה אמורה להיראות כך:

צילום מסך של האפליקציה Decide For Me שבו מוצגים ממשק הצ'אט וחלונית העדיפויות

מה תלמדו

עיצוב ממשקי משתמש באמצעות Google Stitch.
תכנות של אפליקציית אינטרנט בשיטת Vibe code באמצעות Google AI Studio.
שימוש ב-Firebase כדי לפתח תכונות AI ולאחסן מידע בענן.
פריסה של אפליקציית אינטרנט לסביבת ייצור באמצעות Google AI Studio (מבוסס על Cloud Run).

2. עיצוב ממשק המשתמש באמצעות Stitch

מורידים את תמונת המוקאפ (DecideForMeScreen.jpeg) ושומרים אותה בתיקייה מקומית שקל למצוא.
עוברים אל Stitch, מאתרים את שדה להזנת קלט ובוחרים באפשרות Web. (בשיעור Codelab הזה נתמקד בחוויית השימוש באינטרנט, אבל אפשר גם להשתמש ב-Stitch כדי ליצור מסכים לנייד).
מעלים את תמונת המוקאפ:
1. לוחצים על + (לחצן ההוספה).
2. לוחצים על העלאת קבצים.
3. מצרפים את התמונה שהורדתם בשלב ההגדרה (DecideForMeScreen.jpeg). המוקאפ הזה שצויר ביד מאפשר לכם לבדוק את היכולות המולטי-מודאליות של Stitch.

מעתיקים את ההנחיה הבאה ומדביקים אותה בשדה להזנת קלט:

# General Guidance
Create a modern, clean, and highly polished UI for a web application called
"Decide For Me" - a hyper-rational decision assistant.

CRITICAL: Replicate the exact layout, structure, and element placement shown in
the hand-drawn mockup file DecideForMeScreen.jpeg. Do not add any extra menus,
sidebars, buttons, or top/bottom navigation bars that are not explicitly drawn
in the file. Stick strictly to the skeleton provided in the mockup.

# Layout & Structure
- Two-Column Split Screen:
  - Left Side (Main Chat Area): Takes up roughly 70-75% of the screen width. It
    should feel like a premium, focused workspace.
  - Right Side (Configuration Panel): A sidebar taking up 25-30% of the screen
    width with a distinct, subtle background color to separate it from the
    chat.

# Right Panel: Configuration Screen
- Header: Title it "My Priorities" with a clean, minimalist typography.
- Content Card: A styled card containing a text box or paragraph area
  showcasing the user's priorities.
- Interactions: Include a clear "Edit Priorities" button. When clicked, this
  area should visually toggle into an editable textarea or input field.

# Left Panel: Chat & Dilemma Decision Screen
- Chat History: A clean vertical flow of message bubbles.
  - The first message bubble must be aligned to the left (system message) and
    say: "Tell me your dilemma". Use a friendly, neutral background color for
    this bubble.
- Bottom Input Area: Instead of a traditional single-line chat bar, create a
  unified, beautiful "Decision Submission" layout positioned at the bottom:
  - Dual Input Fields: Place two horizontal or cleanly stacked input fields.
    - Input 1 label: "Option A"
    - Input 2 label: "Option B"
  - Action Button: A prominent, styled "Go" action button to trigger the
    reasoning loop.

# Theme & Aesthetic
- Vibe: Hyper-rational, clean, trustworthy, and modern. Use a sophisticated
  color palette (e.g., deep slates, clean whites/grays, and a sharp accent
  color like a subtle indigo or teal for active states and buttons).
- Spacing & Typography: Use generous whitespace, soft rounded corners
  (border-radius) for cards and buttons, and a highly legible sans-serif font.

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

ממשק Stitch שבו מוצגים עיצוב ממשק המשתמש ומערכת העיצוב שנוצרו באמצעות התכונה Decide For Me (קבלת החלטות בשבילי)

3. פיתוח האפליקציה באמצעות Google AI Studio

מייצאים את המסך שיצרתם ב-Stitch אל Google AI Studio:
1. לוחצים על העיצוב שנוצר ב-Stitch.
2. לוחצים על ייצוא בפינה השמאלית העליונה של המסך.
3. מוודאים שהאפשרות שנבחרה היא Google AI Studio.
4. גוללים למטה לשדה תיאור.

מעתיקים את ההנחיה הבאה ומדביקים אותה בשדה Description:

# General Guidance
Build the "Decide For Me" app: A hyper-rational decision assistant for
chronically indecisive people facing life choices (moving apartments, changing
careers, picking a hobby). The user enters a dilemma and their top priorities
in life. The app will help with the decision. Follow the instructions below to
build it:

# UI Instructions
Using the design artifacts exported from Stitch (the PNG image and HTML file),
build a fully functional web application that accurately mirrors the design and
layout.

# App Architecture & Initialization Instructions
- Initialize the Firebase JS SDK for client-side services.
- Set up Firebase Authentication using the Google provider. If a user is not
  logged in, show a clean, minimalist sign-in state. If the user is logged in,
  take them directly to the dilemma decision screen.
- Initialize Firebase App Check in debug mode
  (`self.FIREBASE_APPCHECK_DEBUG_TOKEN = true`) without a ReCaptchaV3Provider
  (we will add that later).

# State & Database Management Instructions
- User Priorities:
  - Once authenticated, pull the user's saved priorities from Firebase
    Firestore at the path: `users/{userId}`. Each document should contain one
    string field: 'priorities'.
  - Bind this data to the Right Panel ("My Priorities").
  - When the user clicks the "Edit" button, toggle the view to a textarea, with
    a 'save' button. When saved, write the updated string back to
    `users/{userId}`.
  - Make sure to implement and deploy strong Security Rules for Firestore.

# UI Stream Update & Display Instructions
- Once the user submits option A and option B in the dilemma decision screen,
  display both options as a single message on the user side of the chat. Then,
  display a sleek loading state in the main chat panel. Leave the app in this
  "loading" state and do nothing else, we will process both options and build
  the server-side thinking later.

לוחצים על Build with Google AI Studio (פיתוח באמצעות Google AI Studio). ‫Google AI Studio ייפתח בכרטיסייה חדשה וקובצי העיצוב וההנחיה יועברו:
1. מוודאים שההנחיה הועברה במלואה.
2. אם רואים רק חלק מההנחיה, מדביקים שוב את ההנחיה כולה.
לוחצים על Build. ‫Google AI Studio מתחיל ליצור את האפליקציה Decide For Me בהתאם להנחיה ולעיצוב ממשק המשתמש:
1. במהלך היצירה, המערכת מציעה עיצובים חלופיים לממשק המשתמש (אפשר להתעלם מהעיצובים האלה ב-codelab הזה, אבל בעתיד תוכלו לבחור עיצובים אחרים).
2. כשמופיעה בקשה להפעיל את Firebase, לוחצים על הפעלה.
בודקים ומאמתים את האפליקציה שנוצרה:
1. בודקים את האפליקציה בכרטיסייה תצוגה מקדימה.
2. עוברים לכרטיסייה קוד כדי לבדוק את כל הקבצים והקוד שנוצרו.
3. בנוסף, Google AI Studio יצר פרויקט ב-Firebase, הפעיל את אימות ב-Firebase ואת Firestore והגדיר את Firebase בבסיס הקוד. בשלב הבא של ה-codelab הזה, תהיה לכם גישה לפרויקט Firebase הזה ותוכלו לעבוד איתו.

4. רישום של אסימון ניפוי הבאגים של App Check

כש-Google AI Studio יוצר את האפליקציה, הוא יוצר פרויקט Firebase ומקשר אליו את האפליקציה. צריך לגשת לפרויקט הזה ב-Firebase ולרשום את סביבת הפיתוח בשירות אבטחה חשוב שנקרא Firebase App Check.

גישה לפרויקט Firebase

כדי למצוא את מזהה הפרויקט של פרויקט Firebase שנוצר על ידי Google AI Studio:
1. עוברים לכרטיסייה Code ב-Google AI Studio.
2. פותחים את הקובץ firebase-applet-config.json.
3. מעתיקים את הערך של השדה projectId.
עוברים אל מסוף Firebase ומחפשים את הפרויקט באמצעות המזהה הזה.
הערה: אם זו הפעם הראשונה שאתם יוצרים פרויקט Firebase, יהיה זמין רק פרויקט אחד – הפרויקט שנוצר על ידי Google AI Studio.

רישום טוקן לניפוי באגים

האפליקציה שלכם יכולה להשתמש ב-Firebase App Check כדי להגן על שירותי ה-Backend ומודלים של AI מפני ניצול לרעה. לשם כך, המערכת מוודאת שהתנועה הנכנסת מגיעה רק מאפליקציות לגיטימיות.

האפליקציה פועלת בסביבת התצוגה המקדימה של Google AI Studio, ולכן היא משתמשת בספק אימות לצורכי ניפוי באגים של App Check ‏ (self.FIREBASE_APPCHECK_DEBUG_TOKEN = true). כשאפליקציית האינטרנט נטענת, Firebase מוציא באופן אוטומטי אסימון ניפוי באגים למסוף המפתחים של הדפדפן.

כדי למצוא את טוקן ניפוי הבאגים:
1. ב-Google AI Studio, פותחים את כלי הפיתוח של הדפדפן בזמן הצגת התצוגה המקדימה של האפליקציה:
  - ‫Chrome,‏ Edge או Firefox: מקישים על F12 (או לוחצים לחיצה ימנית במקום כלשהו בתצוגה המקדימה ובוחרים באפשרות בדיקה), ואז בוחרים בכרטיסייה מסוף.
  - ‫macOS: מקישים על Cmd+Option+I ואז בוחרים בכרטיסייה מסוף.
2. ביומני המסוף, מאתרים את הודעת הניפוי באגים של App Check:
```
AppCheck debug token: "123a4567-b89c-12d3-e456-789012345678".
You will need to safelist it in the Firebase console for it to work.
```
3. מעתיקים את מחרוזת הטוקן (ללא המירכאות).
רישום טוקן ניפוי הבאגים:
1. במסוף Firebase, עוברים אל Security (אבטחה) > App Check (בדיקת אפליקציות) > הכרטיסייה Apps (אפליקציות).
2. מוצאים את אפליקציית האינטרנט ברשימה, לוחצים על סמל האפשרויות הנוספות (3 נקודות) ⋮ ובוחרים באפשרות ניהול אסימוני ניפוי באגים.
3. לוחצים על Add debug token (הוספת טוקן לניפוי באגים), מדביקים את הטוקן שהעתקתם, מזינים שם כמו Google AI Studio Preview ולוחצים על Save (שמירה).

5. בדיקת האפליקציה

עכשיו, אחרי שהפרויקט מחובר ואסימון הניפוי באגים רשום ב-App Check, אפשר לבדוק את תכונות הבסיס: אימות ו-Firestore.

בודקים את אימות המשתמש ושומרים את העדיפויות:
1. בתצוגה המקדימה של האפליקציה Decide For Me ב-Google AI Studio, נכנסים לחשבון Google כדי לבדוק את מסך האימות.
2. שומרים את סדר העדיפויות בחיים באמצעות החלונית השמאלית (סדר העדיפויות שלי).
מאמתים את האימות במסוף Firebase:
1. עוברים אל מסוף Firebase ופותחים את Authentication (אימות).
2. בודקים שחשבון Google שבו השתמשתם כדי לבצע אימות באפליקציית Decide For Me מופיע שם:
אימות אחסון הנתונים ב-Firestore:
1. פותחים את Firestore במסוף Firebase.
2. מוודאים שהעדיפויות שלכם מאוחסנות במסמך בנתיב users/{userId}:

6. יצירת רצף פעולות לקבלת החלטות מבוסס-AI באמצעות Firebase

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

הגדרה של Firebase AI Logic

מפעילים את Gemini Developer API ב-Firebase AI Logic:
1. פותחים את Firebase AI Logic במסוף Firebase ולוחצים על תחילת העבודה.
2. בוחרים באפשרות Gemini Developer API ופועלים לפי ההוראות במסוף כדי להפעיל את ה-API.
הערה: בשלב הזה, App Check נאכף באופן אוטומטי על Firebase AI Logic. לכן היה חשוב להגדיר ולרשום את ספק אימות לצורכי ניפוי באגים של App Check בשלב מוקדם יותר ב-Codelab הזה – כדי לוודא שהבקשות מסביבת הפיתוח ב-Google AI Studio מאומתות ולא נדחות על ידי Firebase AI Logic.
מגדירים את ההגדרות של Firebase AI Logic:
1. עוברים לכרטיסייה הגדרות.
2. משנים את האפשרות Enforce template-only mode (החלת מצב של תבניות בלבד) למצב Enforced (החלה).
3. מעבירים את האפשרות אכיפת מצב משתמשים מאומתים למצב אכיפה.

יצירת תבנית פרומפט לשרת

בשיעור Codelab הזה נשתמש בתבניות של הנחיות לשרת כדי ליצור אינטראקציות עם Gemini API באמצעות Firebase AI Logic.

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

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

כך יוצרים ובודקים תבנית לפרומפט לשרת:

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

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

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

שם התבנית: Decider Flow
מזהה תבנית: decider-flow

הגדרה (frontmatter)

model: "gemini-3.5-flash-lite"
input:
  schema:
    priorities: "string, user's core priorities"
    optionA: "string, option A under consideration"
    optionB: "string, option B under consideration"
output:
  format: json
  schema:
    verdict: string
    justification: string
    firstStep: string

הנחיה והוראות מערכת (אופציונלי)

{role "system"}
You are the Decider Agent, a multi-stage reasoning engine that
combines the roles of an honest and polite behavioral economist, a
long-term strategic forecaster, and an executive decision coach.
Your job is to take a user's dilemma and their core priorities, run
them through a rigorous, adversarial 3-phase thinking process, and
output a highly analytical, reasoning-backed final verdict. You must be
direct, sharp, and realistic. Do not give generic platitudes or claim
that "both options are great." You must force a clear choice.

{role "user"}
# Context & Inputs
You are analyzing a critical life decision for the user. Base your
entire multi-phase reasoning flow strictly on these three specific
inputs:
- User's Core Priorities: {{priorities}}
- Option A under consideration: {{optionA}}
- Option B under consideration: {{optionB}}

Execute your reasoning flow through the following three phases:

# Phase 1: Cynical Breakdown (Input-Driven Analysis)
Analyze {{optionA}} and {{optionB}} strictly through the lens of the
user's explicit {{priorities}}. Do not evaluate them in a vacuum.
- Identify the hidden flaws, compromises, and psychological costs
  embedded in both choices.
- Pinpoint exactly how {{optionA}} could directly conflict with or
  undermine their {{priorities}}.
- Pinpoint exactly how {{optionB}} could directly conflict with or
  undermine their {{priorities}}.
- Uncover any cognitive biases (like status quo bias or loss aversion)
  the user might be falling for in either option.

# Phase 2: Long-Term Regret Projection
Project the user 5 years into the future. Apply the Regret Minimization
Framework to both paths:
- The {{optionA}} Timeline: Quantify the absolute worst-case, deep,
  structural 5-year regret of choosing this path. Focus heavily on
  failures of courage vs. failures of action based on their
  {{priorities}}.
- The {{optionB}} Timeline: Quantify the matching 5-year regret for
  this path.
- Contrast these two timelines. Which option carries the kind of regret
  that fundamentally breaks the user's {{priorities}}?

# Phase 3: Final Recommendation & Action Step
Synthesize the cynical critiques and long-term regret scores.
Weigh them against the user's {{priorities}} to determine which
choice minimizes long-term disappointment.
- Verdict: You must declare either {{optionA}} or {{optionB}} as the
  definitive winner. No compromise, no "it depends," and no hybrid
  options.
- Justification: Provide a sharp, reasoning-backed explanation showing why
  the losing option was eliminated based on the Phase 1 and Phase 2
  analysis.
- First Step: Give one microscopic, low-friction task the user can
  execute within the next 15 minutes to commit to or move toward the
  chosen verdict.

כדי לכתוב את ההנחיה והוראות המערכת בתחביר הנכון, מוסיפים עוד {} מסביב ל-{role "system"} ול-{role "user"}:

קלט לבדיקה

{
  "priorities": "Be financially stable, have a good work-life balance where I can travel twice a year",
  "optionA": "Buy a house for 615000 British pounds with a mortgage of 2800 per month for the next 35 years",
  "optionB": "Keep renting for 2400 per month for the foreseeable"
}

לוחצים על שמירת התבנית.
בודקים את התבנית:
1. לוחצים על הפעלת בדיקת הנחיה.
2. מאתרים את תגובת הבדיקה ומוודאים שהיא כוללת את כל השדות שציינתם בהנחיה (verdict,‏ justification ו-firstStep).
3. אם הכול תואם לתגובה הצפויה, נועלים את התבנית באמצעות סמל הנעילה בפינה השמאלית העליונה של התבנית כדי להבטיח יציבות של הגרסה ולמנוע שינויים מקריים.

התבנית מוכנה לשימוש באפליקציה.

7. שימוש בתבנית הפרומפט 'עזרה בקבלת החלטה' באפליקציה

כדי להשתמש בתבנית באפליקציית האינטרנט:

חוזרים לאפליקציה ב-Google AI Studio.

מבקשים מהסוכן של Google AI Studio להטמיע את הפעולה Decide For Me:

מעתיקים את הפרומפט הבא:

Now let's implement the "Decide For Me" button action. When clicked, it
should call the Firebase AI Logic SDK using a Template Generative Model.
The prompt is stored in a prompt template with the id "decider-flow". When
calling the API, pass the following variables as the input payload object:
- priorities
- optionA
- optionB

The API will return a JSON object. Handle the response asynchronously and
extract:
- verdict
- justification
- firstStep

Once the data is received, update the UI state to append a new message to
the chat array. Ensure it renders as a system chat bubble positioned on
the left side of the chat screen, mapping these three fields clearly into
the bubble's layout.

Please provide the necessary front-end component state updates and the
Firebase SDK call.

מדביקים את ההנחיה בשדה הקלט של הצ'אט ב-Google AI Studio ולוחצים על שליחה.

אימות ההגדרות ובדיקה של הכלי לעזרה בקבלת החלטות:
1. מחכים עד ש-Google AI Studio יסיים להוסיף את Firebase AI Logic לאפליקציה.
2. עוברים לכרטיסייה Code (קוד) ומוודאים שיש מפתח API בקובץ firebase-applet-config.json. אם מפתח ה-API של Firebase לא נמצא בקובץ ההגדרות, מבקשים מ-Google AI Studio לייבא אותו.
3. עוברים לכרטיסייה תצוגה מקדימה.
4. שולחים את האפשרויות א' וב', ומוודאים שה-AI מחזיר את פסק הדין, ההצדקה והשלב הראשון.

לעיון, קוד שנוצר על ידי Google AI Studio אמור להיראות בערך כך:

const aiInstance = getAI(app);
const templateModel = getTemplateGenerativeModel(aiInstance);

const result = await templateModel.generateContent('decider-flow', {
  priorities: priorities,
  optionA: optA,
  optionB: optB
});

const rawText = result.response.text();

// Parse response text to extract fields
const cleaned = rawText.replace(/```json|```/g, '').trim();
const parsedData: { verdict?: string; justification?: string; firstStep?: string } = JSON.parse(cleaned);

const verdict = parsedData.verdict;
const justification = parsedData.justification;
const firstStep = parsedData.firstStep;

ניפוי באגים ובדיקת בקשות

אם באפליקציה מתרחשות שגיאות, אם לא נוצרת תשובה או אם רוצים לבדוק את תעבורת ה-API בפירוט, אפשר להשתמש בכלים המובנים לניתוח ולמעקב של Firebase AI Logic:

במסוף Firebase, עוברים אל AI Services (שירותי AI) > AI Logic (לוגיקת AI) > הכרטיסייה AI monitoring (מעקב אחרי שימוש בתכונות AI).
בודקים את המדדים הכמותיים בלוח הבקרה:
- נפח הבקשות והסטטוס שלהן: בודקים אם הבקשות הנכנסות מגיעות לקצה העורפי ומחזירות 200 OK או נכשלות עם שגיאות בצד הלקוח או בצד השרת.
- זמן אחזור: בודקים את הגרף של זמן האחזור כדי לראות את זמן התגובה מקצה לקצה.
- מספר האסימונים: מעקב אחרי השימוש באסימוני קלט ופלט לכל בקשה.
בדיקה של עקבות בקשות ספציפיות לצורך ניפוי באגים מעמיק:לוחצים על עקבות בקשה ספציפית בטבלת העקבות כדי לבדוק את מטען הייעודי שלה.
- נתוני קלט: מוודאים שהמשתנים (priorities,‏ optionA ו-optionB) הועברו בצורה נכונה מאפליקציית הלקוח.
- פלט: אפשר לראות את הטקסט הגולמי שנוצר על ידי המודל כדי לוודא שהוא החזיר קובץ JSON תקין שתואם לסכימה.
- פרטי השגיאה: אם בקשה נכשלת, כדאי לבדוק את יומן השגיאות של המעקב כדי לראות אם הסיבות לכך הן טוקנים לא תקינים של App Check, דחיית אימות, הגבלות על מכסות או שגיאות באימות ההנחיה.
פתרון בעיות ב-Google AI Studio:
- אם מזהים שגיאה במעקב (לדוגמה, ניתוח של תגובת JSON עם פורמט שגוי או פרמטרים חסרים), מעתיקים את הודעת השגיאה או את מטען הייעודי (payload).
- חוזרים אל Google AI Studio ומבקשים מהעוזר הדיגיטלי לתקן את הבעיה הרלוונטית בקוד האפליקציה.

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

אחרי שהאפליקציה פועלת במצב תצוגה מקדימה, אפשר לפרוס אותה בסביבת הייצור.

כדי להגן על נקודות הקצה של Firebase בסביבת פרודקשן, צריך להגדיר ספק אימות בסביבת פרודקשן לשימוש ב-Firebase App Check (בשיעור ה-Codelab הזה נשתמש ב-reCAPTCHA v3).

קודם צריך לפרוס את האפליקציה כדי לקבל את כתובת ה-URL הפעילה המדויקת שלה, כדי שתוכלו לרשום את הדומיין הספציפי ב-reCAPTCHA במקום לאפשר את כל האפליקציות של ai.studio.

פורסים את האפליקציה ומגדירים את reCAPTCHA:

פריסת אפליקציית האינטרנט באמצעות Google AI Studio:
1. ב-Google AI Studio, לוחצים על פרסום בסרגל הניווט העליון.
2. לוחצים על מתחילים, בודקים או משנים את השם והתיאור של האפליקציה ולוחצים על פרסום האפליקציה.
3. ממתינים עד ש-Google AI Studio יבנה ויפרוס את האפליקציה (בדרך כלל דקה או שתיים).
4. העתיקו את כתובת האתר עם שם (vanity URL) שנוצרה (לדוגמה, https://decide-for-me-123.ai.studio) וציינו את הדומיין שלה (לדוגמה, decide-for-me-123.ai.studio).
יצירת מפתחות reCAPTCHA גרסה 3 ב-Google reCAPTCHA:
1. עוברים אל מסוף Google reCAPTCHA Admin.
2. מזינים תווית (לדוגמה, Decide For Me - Production).
3. בוחרים באפשרות סוג reCAPTCHA > reCAPTCHA גרסה 3 (מבוסס-ציון).
4. בקטע Domains (דומיינים), מוסיפים את הדומיין המדויק של האפליקציה (לדוגמה, decide-for-me-123.ai.studio, בלי https:// ובלי נתיבים) או דומיין בהתאמה אישית אם מתכננים להשתמש בו.
5. מאשרים את התנאים וההגבלות ולוחצים על שליחה.
6. משאירים את הכרטיסייה הזו פתוחה: תצטרכו את מפתח האתר (מפתח לקוח ציבורי) ואת המפתח הסודי (מפתח שרת פרטי).
רושמים את המפתח הסודי במסוף Firebase:
1. עוברים אל App Check במסוף Firebase.
2. עוברים לכרטיסייה אפליקציות.
3. ברשימה, מאתרים את אפליקציית האינטרנט, לוחצים עליה (או על סמל האפשרויות הנוספות ⋮) ובוחרים באפשרות reCAPTCHA גרסה 3.
4. מדביקים את המפתח הסודי של reCAPTCHA בשדה ולוחצים על שמירה.
מגדירים את אפליקציית הלקוח לשימוש ב-ReCaptchaV3Provider:
1. ב-Google AI Studio, עוברים לחלונית הצ'אט ומנחים את העוזר הדיגיטלי לעדכן את ההגדרה של App Check בסביבת הייצור:
```
Please update our Firebase App Check initialization to use
ReCaptchaV3Provider with the reCAPTCHA site key "YOUR_RECAPTCHA_SITE_KEY",
while retaining support for debug tokens in non-production environments.
```
2. אם בודקים את הקוד ישירות בכרטיסייה Code, צריך לוודא שהאתחול של App Check תואם למבנה הזה:
```
import { initializeAppCheck, ReCaptchaV3Provider } from "firebase/app-check";

const appCheck = initializeAppCheck(app, {
  provider: new ReCaptchaV3Provider("YOUR_RECAPTCHA_SITE_KEY"),
  isTokenAutoRefreshEnabled: true
});
```
3. אחרי עדכון הקוד, צריך לפרסם מחדש את האפליקציה ב-Google AI Studio כדי להעביר את ההגדרה המעודכנת של App Check לאתר הפעיל.
אימות תנועת הגולשים בסביבת הייצור ומעקב אחר App Check:
1. פותחים את כתובת ה-URL של האפליקציה הפעילה בחלון פרטי בדפדפן, נכנסים באמצעות חשבון Google ובודקים את שליחת הדילמה.
2. חוזרים אל App Check במסוף Firebase, ובודקים את הכרטיסיות APIs (ממשקי API) וMonitoring (מעקב) כדי לוודא שהבקשות נרשמות בהצלחה ב-Firestore וב-Firebase AI Logic.

9. סיכום

מעולה! יצרתם אפליקציה שימושית עם תכונות מבוססות-AI מאפס, באמצעות כלים בחבילת הכלים של Google. זו רק ההתחלה, ויש עוד הרבה דברים שאפשר לעשות עם הכלים של Google. עכשיו יש לכם פרויקט Firebase + Google Cloud. כדאי לבדוק את כל השירותים שזמינים לכם!

כדי לקבל את התג Completed Builder Journey, לוחצים על הקישור הזה.

כדי להמשיך בתהליך, כדאי לעבור אל goo.gle/builders ולנסות את ה-Lab הבא.

אם אתם כבר משתמשים ב-Antigravity 2.0, הפלטפורמה הייעודית של Google לניהול של כמה סוכנים אוטונומיים במקביל, אתם יכולים לייצא במהירות את הפרויקט מ-Google AI Studio ולייבא אותו ל-Antigravity כדי להמשיך לעבוד עליו באופן מקומי. ל-Antigravity יש Agent Skills for Firebase שזמין להתקנה בלחיצה אחת. הכישורים האלה תומכים גם בפיתוח לנייד, ועוזרים לכם לשכפל את האפליקציה הזו בסביבות Android ו-iOS אם אתם רוצים.