تستخدم Google تكنولوجيا الذكاء الاصطناعي لترجمة المحتوى إلى لغتك المفضّلة، وقد تتضمّن بعض الأخطاء.

إنشاء تطبيقات الذكاء الاصطناعي باستخدام منظومة Google المتكاملة

1. قبل البدء

لقد تطور تطوير البرمجيات. لا يكتفي المطوّرون الأكثر نجاحًا بكتابة الرموز البرمجية، بل ينسّقون أدوات الذكاء الاصطناعي وبرامجه لإنشاء تطبيقات أفضل وأسرع. توفّر منظومة أدوات Google المتكاملة مجموعة شاملة لكامل مراحل التطوير، بدءًا من إنشاء واجهة المستخدم، وإنشاء نماذج أولية للتطبيقات وتفعيلها، وتطوير ميزات الذكاء الاصطناعي، ووصولاً إلى دمج الخلفية الآمنة والقابلة للتوسّع. في هذا الدرس التطبيقي حول الترميز، ستستخدم Google Stitch لتصميم واجهة المستخدم، وGoogle AI Studio لإنشاء الرموز البرمجية ونشر التطبيق، وFirebase لتطوير ميزات الذكاء الاصطناعي وتخزين المعلومات في خلفية آمنة وقابلة للتوسيع.

التطبيق الذي ستنشئه في هذا الدرس التطبيقي حول الترميز يُسمى Decide For Me، وهو مساعد لاتخاذ القرارات للأشخاص الذين يواجهون صعوبة في اتخاذ القرارات بشأن خيارات الحياة (مثل الانتقال إلى شقة جديدة أو تغيير المسار الوظيفي أو اختيار هواية). يدخل المستخدم معضلة وأولوياته في الحياة، ويستخدم التطبيق الذكاء الاصطناعي لمساعدة المستخدم في اتخاذ القرار استنادًا إلى ما يقلّل من الشعور بالإحباط على المدى الطويل. يقدّم التطبيق أيضًا للمستخدم خطوة أولى ملموسة. يجب أن يكون الإصدار النهائي من تطبيقك مشابهًا لما يلي:

لقطة شاشة لتطبيق Decide For Me تعرض واجهة المحادثة ولوحة الأولويات

أهداف الدورة التعليمية

تصميم واجهات المستخدم باستخدام Google Stitch
برمجة تطبيق ويب وصفي باستخدام Google AI Studio
استخدام Firebase لتطوير ميزات الذكاء الاصطناعي وتخزين المعلومات في السحابة الإلكترونية
نشر تطبيق ويب في مرحلة الإنتاج باستخدام Google AI Studio (الذي توفّره Cloud Run)

2. تصميم واجهة المستخدم باستخدام Stitch

نزِّل صورة النموذج (DecideForMeScreen.jpeg) واحفظها في مجلد محلي يمكنك العثور عليه فيه.
انتقِل إلى Stitch، وحدِّد موقع حقل الإدخال، ثم انقر على الخيار الويب. (في هذا الدرس التطبيقي حول الترميز، ستركز على تجربة الويب، ولكن يمكنك أيضًا استخدام 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 تعرض تصميم واجهة المستخدم ونظام التصميم اللذين تم إنشاؤهما باستخدام الذكاء الاصطناعي

3- إنشاء التطبيق باستخدام Google AI Studio

صدِّر الشاشة التي أنشأتها في Stitch إلى Google AI Studio باتّباع الخطوات التالية:
1. انقر على التصميم الذي تم إنشاؤه في Stitch.
2. انقر على تصدير في أعلى يسار الشاشة.
3. تأكَّد من أنّ الخيار المحدّد هو Google AI Studio.
4. انتقِل إلى حقل الوصف.

انسخ الطلب التالي والصِقه في حقل الوصف:

# 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.

انقر على التصميم باستخدام Google AI Studio. سيؤدي ذلك إلى فتح Google AI Studio في علامة تبويب جديدة ونقل ملفات التصميم والطلب:
1. تأكَّد من نقل الطلب بالكامل.
2. إذا ظهر لك جزء فقط من الطلب، ألصِق الطلب بالكامل مرة أخرى.
انقر إنشاء. يبدأ Google AI Studio بإنشاء تطبيق اتّخاذ القرار نيابةً عني وفقًا لطلبك وتصميم واجهة المستخدم:
1. أثناء إنشاء الرمز، يقترح تصاميم بديلة لواجهة المستخدم (تجاهل هذه التصاميم في هذا الدرس العملي، ولكن يمكنك اختيار تصاميم مختلفة في المستقبل).
2. عندما يُطلب منك تفعيل Firebase، انقر على تفعيل.
فحص التطبيق الذي تم إنشاؤه والتحقّق منه:
1. اختبِر التطبيق في علامة التبويب معاينة.
2. انتقِل إلى علامة التبويب الرمز لمراجعة جميع الملفات والرموز التي تم إنشاؤها.
3. أنشأ Google AI Studio أيضًا مشروعًا على Firebase، وفعّل مصادقة Firebase وFirestore، وأعدّ Firebase في قاعدة الرموز البرمجية. ستتمكّن من الوصول إلى مشروع Firebase هذا والعمل عليه في الخطوة التالية من هذا الدرس العملي.

4. تسجيل رمز تصحيح أخطاء فحص التطبيقات

عندما تنشئ Google AI Studio التطبيق، فإنّها تنشئ مشروع Firebase وتربط تطبيقك به. عليك الوصول إلى مشروع Firebase هذا وتسجيل بيئة التطوير باستخدام خدمة أمان مهمة تُعرف باسم فحص التطبيقات من Firebase.

الوصول إلى مشروع Firebase

ابحث عن رقم تعريف مشروع Firebase الذي تم إنشاؤه بواسطة Google AI Studio:
1. انتقِل إلى علامة التبويب الرمز في Google AI Studio.
2. افتح ملف firebase-applet-config.json.
3. انسخ قيمة الحقل projectId.
انتقِل إلى وحدة تحكُّم Firebase وابحث عن المشروع باستخدام رقم التعريف هذا.
ملاحظة: إذا كانت هذه هي المرة الأولى التي تنشئ فيها مشروعًا على Firebase، سيتوفّر مشروع واحد فقط، وهو المشروع الذي أنشأه Google AI Studio.

تسجيل الرمز المميّز لتصحيح الأخطاء

يمكن لتطبيقك استخدام خدمة App Check من Firebase لحماية خدمات الخلفية ونماذج الذكاء الاصطناعي من إساءة الاستخدام من خلال التأكّد من أنّ الزيارات الواردة مصدرها تطبيقات شرعية فقط.

بما أنّ تطبيقك يعمل في بيئة المعاينة في Google AI Studio، فهو يستخدم مقدّم خدمة تصحيح الأخطاء في فحص التطبيقات (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"، انتقِل إلى الأمان > فحص التطبيقات > علامة التبويب التطبيقات.
2. ابحث عن تطبيق الويب في القائمة، وانقر على قائمة الخيارات الإضافية (⋮)، ثم اختَر إدارة رموز تصحيح الأخطاء.
3. انقر على إضافة رمز تصحيح الأخطاء، والصِق الرمز الذي نسخته، وأدخِل اسمًا مثل Google AI Studio Preview، ثم انقر على حفظ.

5- اختبار التطبيق

بعد ربط مشروعك وتسجيل رمز تصحيح الأخطاء في فحص التطبيقات، اختبِر الميزات الأساسية: المصادقة وFirestore.

اختبر مصادقة المستخدم واحفظ الأولويات:
1. في معاينة تطبيق قرِّر نيابةً عني في Google AI Studio، اختبِر شاشة المصادقة من خلال تسجيل الدخول باستخدام حساب Google.
2. احفظ أولوياتك في الحياة باستخدام اللوحة اليمنى (أولوياتي).
تأكَّد من المصادقة في "وحدة تحكّم Firebase" باتّباع الخطوات التالية:
1. انتقِل إلى "وحدة تحكّم Firebase" وافتح المصادقة.
2. تأكَّد من أنّ حساب Google الذي استخدمته للمصادقة في تطبيق "دعني أقرّر" مُدرَج في القائمة:
التحقّق من مساحة تخزين بيانات Firestore:
1. افتح Firestore في "وحدة تحكّم Firebase".
2. تأكَّد من تخزين أولوياتك في مستند ضمن المسار users/{userId}:

6. إنشاء مسار Decider مستنِد إلى الذكاء الاصطناعي باستخدام Firebase

سيستخدم تطبيقك الذكاء الاصطناعي لتنفيذ إجراءات اتّخاذ القرار نيابةً عني. يمكنك استخدام Firebase لإنشاء مسار Decider المستند إلى الذكاء الاصطناعي.

إعداد Firebase AI Logic

تفعيل Gemini Developer API في Firebase AI Logic:
1. افتح Firebase AI Logic في وحدة تحكم Firebase، ثم انقر فوق ابدأ.
2. اختَر Gemini Developer API واتّبِع التعليمات في وحدة التحكّم لتفعيل واجهة برمجة التطبيقات.
ملاحظة: يتم فرض استخدام ميزة "فحص التطبيقات" تلقائيًا في Firebase AI Logic في هذه المرحلة. لهذا السبب، كان من المهم إعداد مقدّم خدمة تصحيح الأخطاء في فحص التطبيقات وتسجيله في وقت سابق من هذا الدرس التطبيقي حول الترميز، لأنّ ذلك يضمن التحقّق من الطلبات الواردة من بيئة التطوير في Google AI Studio وعدم رفضها من خلال Firebase AI Logic.
ضبط إعدادات Firebase AI Logic:
1. انتقِل إلى علامة التبويب الإعدادات.
2. بدِّل خيار فرض وضع النماذج فقط إلى مفروض.
3. بدِّل الخيار فرض وضع المستخدمين الذين تمت مصادقتهم إلى مفروض.

إنشاء نموذج لطلب من الخادم

في هذا الدرس التطبيقي حول الترميز، ستستخدم نماذج طلبات الخادم للتفاعل مع Gemini API من خلال Firebase AI Logic.

قبل المتابعة باستخدام النموذج، راجِع ما يلي لفهم أهمية تخزين إعدادات النموذج وتعليمات النظام والطلبات من جهة الخادم:

حماية الملكية الفكرية: يتم سحب الطلبات من جهاز العميل والحفاظ على أمانها في الخلفية.
منع هجمات حقن الطلبات: لا يمكن للعميل ملء متغيرات معيّنة إلا من خلال التحقّق من صحة المخطط الخلفي.
التعديل بدون إصدار التطبيق: يمكنك تعديل الطلبات والتعليمات الخاصة بالنظام وإعدادات النماذج في وحدة التحكّم بدون إصدار نسخة جديدة من التطبيق.

إليك كيفية إنشاء نموذج طلب على الخادم واختباره:

أنشئ نموذج طلب الخادم:

انتقِل إلى علامة التبويب نماذج الطلبات.
انقر على إنشاء نموذج.
انقر على نموذج فارغ.

أنشئ نموذجك الأول باستخدام المعلومات التالية:

اسم النموذج: Decider Flow
رقم تعريف النموذج: decider-flow

Configuration (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 تنفيذ إجراء اتّخاذ القرار نيابةً عني:

انسخ الطلب التالي:

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. انتقِل إلى علامة التبويب الرمز وتأكَّد من توفّر مفتاح واجهة برمجة التطبيقات في ملف firebase-applet-config.json. إذا لم يكن مفتاح واجهة برمجة التطبيقات في Firebase مضمّنًا في ملف الإعداد، اطلب من Google AI Studio استيراده.
3. التبديل إلى علامة التبويب معاينة
4. أرسِل الخيارَين (أ) و(ب)، وتأكَّد من أنّ الذكاء الاصطناعي يعرض نتيجة القرار ومبرّراته والخطوة الأولى.

للعلم، يجب أن يبدو الرمز الذي تم إنشاؤه بواسطة 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;

تصحيح الأخطاء في الطلبات ومراقبتها

إذا واجه تطبيقك أخطاء أو تعذّر عليه إنشاء ردّ أو أردت فحص عدد الزيارات إلى واجهة برمجة التطبيقات بالتفصيل، استخدِم أدوات الإحصاء والمراقبة المضمّنة في Firebase AI Logic:

في "وحدة تحكّم Firebase"، انتقِل إلى خدمات الذكاء الاصطناعي > منطق الذكاء الاصطناعي > علامة التبويب مراقبة الذكاء الاصطناعي.
التحقّق من المقاييس الكمية في لوحة البيانات:
- حجم الطلبات وحالتها: تحقَّق مما إذا كانت الطلبات الواردة تصل إلى الخلفية وتعرض 200 OK أو يتعذّر تنفيذها بسبب أخطاء من جهة العميل أو الخادم.
- وقت الاستجابة: افحص الرسم البياني لوقت الاستجابة للتحقّق من وقت الاستجابة التام.
- عدد الرموز المميزة: يمكنك تتبُّع استخدام الرموز المميزة في الطلبات والردود لكل طلب.
فحص عمليات تتبُّع الطلبات الفردية لتصحيح الأخطاء بشكل مفصّل:انقر على عملية تتبُّع طلب معيّن في جدول عمليات التتبُّع لفحص حمولته.
- المدخلات: تأكَّد من تمرير المتغيّرات (priorities وoptionA وoptionB) بشكلٍ صحيح من تطبيق العميل.
- النتائج: يمكنك الاطّلاع على النص الأولي الذي أنشأه النموذج للتحقّق مما إذا كان قد عرض JSON صالحًا مطابقًا للمخطط.
- تفاصيل الخطأ: في حال تعذُّر تنفيذ طلب، راجِع سجلّ أخطاء التتبُّع لمعرفة الأسباب، مثل رموز فحص التطبيقات المميزة غير الصالحة أو رفض المصادقة أو حدود الحصة أو أخطاء التحقّق من صحة الطلب.
تحديد المشاكل في Google AI Studio وحلّها:
- إذا رصدت خطأً في التتبُّع (على سبيل المثال، تحليل استجابة JSON غير صالحة أو مَعلمات غير متوفّرة)، انسخ رسالة الخطأ أو الحمولة.
- ارجع إلى Google AI Studio واطلب من المساعد حلّ المشكلة ذات الصلة في رمز التطبيق.

8. اختياري: نشر التطبيق

بعد أن يعمل تطبيقك في وضع المعاينة، يمكنك نشره في بيئة الإنتاج.

لحماية نقاط نهاية Firebase في مرحلة الإنتاج، عليك إعداد موفّر شهادات اعتماد في مرحلة الإنتاج لاستخدامه مع فحص التطبيقات من Firebase (في هذا الدرس التطبيقي حول الترميز، ستستخدم الإصدار الثالث من خدمة reCAPTCHA).

عليك نشر تطبيقك أولاً للحصول على عنوان URL المباشر الدقيق الخاص به حتى تتمكّن من تسجيل النطاق المحدّد باستخدام reCAPTCHA بدلاً من السماح لجميع تطبيقات ai.studio.

نشر تطبيقك وإعداد reCAPTCHA:

نشر تطبيق الويب باستخدام Google AI Studio:
1. في Google AI Studio، انقر على نشر في شريط التنقّل العلوي.
2. انقر على البدء، وراجِع اسم التطبيق ووصفه أو خصِّصهما، ثم انقر على نشر تطبيقك.
3. انتظِر إلى أن ينتهي Google AI Studio من إنشاء تطبيقك وتفعيله (عادةً ما يستغرق ذلك من دقيقة إلى دقيقتين).
4. انسخ عنوان URL المخصّص للبث المباشر الذي تم إنشاؤه (على سبيل المثال، https://decide-for-me-123.ai.studio) واحتفظ بنطاقه (على سبيل المثال، decide-for-me-123.ai.studio).
إنشاء مفاتيح الإصدار الثالث من خدمة reCAPTCHA في Google reCAPTCHA:
1. انتقِل إلى وحدة تحكّم المشرف في Google reCAPTCHA.
2. أدخِل تصنيفًا (على سبيل المثال، Decide For Me - Production).
3. اختَر نوع reCAPTCHA > الإصدار الثالث من خدمة reCAPTCHA (استنادًا إلى النتيجة).
4. في قسم النطاقات، أضِف النطاق الذي تم نشره بالضبط لتطبيقك (على سبيل المثال، decide-for-me-123.ai.studio، مع حذف https:// وأي مسارات) أو نطاقًا مخصّصًا إذا كنت تخطّط لاستخدامه.
5. اقبَل بنود الخدمة وانقر على إرسال.
6. اترك علامة التبويب هذه مفتوحة، لأنّك ستحتاج إلى كلّ من مفتاح الموقع (مفتاح العميل العام) والمفتاح السري (مفتاح الخادم الخاص).
تسجيل مفتاحك السري في وحدة تحكّم Firebase:
1. انتقِل إلى فحص التطبيقات في وحدة تحكّم Firebase.
2. انتقِل إلى علامة التبويب التطبيقات.
3. ابحث عن تطبيق الويب في القائمة، وانقر عليه (أو انقر على قائمة النقاط الثلاث ⋮)، ثم اختَر الإصدار الثالث من خدمة reCAPTCHA.
4. ألصِق المفتاح السري لخدمة reCAPTCHA في الحقل وانقر على حفظ.
ضبط تطبيق العميل لاستخدام ReCaptchaV3Provider:
1. في Google AI Studio، انتقِل إلى لوحة المحادثة واطلب من المساعد تعديل إعدادات فحص التطبيقات في مرحلة الإنتاج:
```
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. إذا راجعت الرمز مباشرةً في علامة التبويب الرمز، تأكَّد من أنّ عملية تهيئة فحص التطبيقات تتطابق مع هذه البنية:
```
import { initializeAppCheck, ReCaptchaV3Provider } from "firebase/app-check";

const appCheck = initializeAppCheck(app, {
  provider: new ReCaptchaV3Provider("YOUR_RECAPTCHA_SITE_KEY"),
  isTokenAutoRefreshEnabled: true
});
```
3. بعد تعديل الرمز، أعِد نشر تطبيقك في Google AI Studio لنقل إعدادات فحص التطبيقات المعدَّلة إلى موقعك الإلكتروني المباشر.
التحقّق من عدد الزيارات في مرحلة الإصدار العلني وتتبُّع فحص التطبيقات:
1. افتح عنوان URL لتطبيقك المباشر في نافذة تصفّح متخفٍ، وسجِّل الدخول باستخدام Google، وجرِّب إرسال معضلة.
2. ارجع إلى App Check في وحدة تحكّم Firebase، وافحص علامتَي التبويب واجهات برمجة التطبيقات والمراقبة للتأكّد من تسجيل الطلبات بنجاح في Firestore وFirebase AI Logic.

9. الخاتمة

تهانينا! لقد أنشأت تطبيقًا مفيدًا يتضمّن ميزات مستندة إلى الذكاء الاصطناعي من البداية باستخدام أدوات في حزمة Builder Stack من Google. هذه مجرد البداية؛ هناك الكثير مما يمكنك فعله باستخدام أدوات جوجل. أصبح لديك الآن مشروع Firebase + Google Cloud، ويمكنك استكشاف جميع الخدمات المتاحة لك.

انتقِل إلى هذا الرابط للمطالبة بشارة رحلة بناء التطبيقات المكتملة.

لمواصلة رحلتك، انتقِل إلى goo.gle/builders لتجربة المختبر التالي.

إذا كنت تستخدم حاليًا Antigravity 2.0، وهي منصة Google المخصّصة لتنسيق العديد من الوكلاء المستقلين بالتوازي، يمكنك تصدير مشروعك بسرعة من Google AI Studio واستيراده إلى Antigravity لمواصلة العمل عليه محليًا. توفّر Antigravity مهارات وكلاء Firebase التي يمكن تثبيتها بنقرة واحدة. توفّر هذه المهارات أيضًا الدعم لتطوير التطبيقات على الأجهزة الجوّالة، ما يساعدك في تكرار هذا التطبيق في بيئتَي Android وiOS إذا أردت ذلك.