بدء استخدام Firebase Studio

1. نظرة عامة

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

صورة GIF متحركة لتطبيق تعلّم اللغات

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

أفضل الممارسات لتقديم الطلبات في Firebase Studio
تكرار عملية تطوير تطبيق لإضافة وظائف وإصلاح الأخطاء
نشر تطبيق على "استضافة التطبيقات في Firebase" ومشاركته مع الآخرين
تتبُّع المقاييس الرئيسية من خلال لوحة النظرة العامة على تطبيق App Hosting

المتطلبات

متصفّح من اختيارك، مثل Google Chrome
حساب Google لإنشاء مشروع Firebase وإدارته

2. إنشاء تطبيقك باستخدام وكيل "نماذج أولية للتطبيقات"

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

سجِّل الدخول إلى حساب Google وافتح Firebase Studio.
في حقل إنشاء نموذج أولي لتطبيق باستخدام الذكاء الاصطناعي، أدخِل وصفًا للتطبيق الذي تريد إنشاءه. في هذا الدرس العملي، ستنشئ تطبيقًا يساعدك في تعلّم لغة جديدة من خلال القصص والبطاقات التعليمية ومدرّس مستند إلى الذكاء الاصطناعي. أدخِل طلبًا، مثل:
```
An app to help someone learn a new language. The app should include
AI-generated stories in the target language, where users can click vocab
words or the entire story to see it in English. A different section
includes flashcards, where the user is shown a word in the chosen language
and can click it to flip the card and see the word in English. The final
section includes an AI chatbot that allows the user to have simple
conversations in the chosen language or ask questions in English about
what a word means or how to form a sentence in the chosen language. All
content should be beginner-friendly, focusing on basic greetings, common
questions/answers, and vocabulary relevant to the lessons or stories.
To start, the app should teach the user French, although we might add
additional languages in the future.
```
ملاحظة: عند كتابة الطلب، ليس عليك بالضرورة تضمين كل ميزة أو عنصر تصميم سيحتاج إليه تطبيقك النهائي. العمل في Firebase Studio هو عملية تكرارية، حيث ستختبر نموذجًا أوليًا لتطبيقك، ثم ستعمل مع وكيل "نماذج التطبيقات الأولية" لإضافة المزيد من الوظائف أو إعادة تصميم العناصر أو إعادة صياغة الميزات.
انقر على إنشاء نموذج أوّلي باستخدام الذكاء الاصطناعي.
راجِع "مخطط التطبيق" المقترَح. انقر على تخصيص لتعديل المخطط:
1. غيِّر اسم التطبيق إلى Speak Easy.
2. غيِّر الألوان إلى ما يلي:
```
Primary color: Asparagus green (#98BF64) for a calm and friendly feel.
Secondary color: Light parchment (#F5EBCD) to complement the primary color.
Accent: Marigold (#FFB833) for interactive elements and call-to-action buttons.
```
إذا كنت تفضّل إرسال نظام الألوان أو التصميم كتصميم، انقر على خيار المرفق لتحميل صورة أثناء عملية الطلب أو التصميم. يجب أن يكون حجم الصور أقل من 3 ميغابايت.
انقر على حفظ.
عندما ينتهي المخطط من دمج التعديلات، انقر على إنشاء نموذج أولي لهذا التطبيق.
بما أنّ هذا التطبيق يتضمّن عناصر مستندة إلى الذكاء الاصطناعي، يطلب منك الوكيل مفتاح Gemini. أضِف مفتاح Gemini API الخاص بك أو انقر على إنشاء تلقائي لإنشاء مفتاح Gemini API. إذا نقرت على إنشاء تلقائيًا، سينشئ Firebase Studio مشروعًا على Firebase ويُنشئ لك مفتاح Gemini API.
يستخدم وكيل "نماذج التطبيقات الأولية" ميزة "مخطط التطبيق" لإنشاء الإصدار الأول من تطبيقك. وعند الانتهاء، ستظهر معاينة لتطبيقك بجانب واجهة محادثة Gemini. خصِّص بعض الوقت لاختبار تطبيقك. حتى إذا لم يكن شكله مطابقًا لما تخيّلته، يوضّح القسم التالي كيفية إضافة وظائف جديدة وتحسين التصميم.

3- (اختياري) الحصول على الرمز

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

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

4. اختبار وظائف تطبيقك وتكرارها وتصحيح أخطائها

أثناء معاينة التطبيق، قد تلاحظ أخطاءً أو وظائف غير متوقّعة. في الإصدار التجريبي من التطبيق، سنضيف التغييرات والإصلاحات التالية:

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

الهدف 1: إضافة كلمات من المفردات إلى "أداة إنشاء القصص المستندة إلى الذكاء الاصطناعي"

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

في واجهة المحادثة، أدخِل وصفًا للميزة التي تريد إضافتها:

In the AI Story Generator, users should be able to click vocab words or
phrases to get the definition in English. Words or phrases should be
underlined to indicate they can be clicked.

اختبِر التطبيق في نافذة المعاينة. ستعدّل مظهر التطبيق وطابعه لاحقًا، لذا حاوِل التركيز على الوظائف فقط في الوقت الحالي.

إذا لم يعمل تطبيقك على النحو المتوقّع، واصِل الطلب من وكيل "نماذج أوّلية للتطبيقات" إجراء تعديلات. على سبيل المثال:

IMPORTANT: Be sure to underline and provide a definition for most words
and phrases, and ESPECIALLY all nouns and verbs. If a word or phrase in the
story appears multiple times, only underline and define the first instance.

انقر على التبديل إلى "الرمز" لفتح "طريقة عرض الرمز"، حيث يمكنك الاطّلاع على جميع ملفات تطبيقك وتعديل الرمز مباشرةً. إذا كان هناك خطأ لا يمكن لـ Gemini حلّه، قد يكون من الأسهل في بعض الأحيان تعديل الملف يدويًا. عندما تكون جاهزًا، بدِّل إلى وضع Prototyper لمواصلة استخدام وكيل "نماذج أوّلية للتطبيقات".

صورة GIF متحركة لأداة "إنشاء القصص بالذكاء الاصطناعي" وهي تنشئ قصة باللغة الفرنسية مع وضع خط تحت الكلمات

الهدف 2: إضافة ترجمات إلى البطاقات التعليمية السريعة

اتّبِع الخطوات نفسها الموضّحة أعلاه، باستخدام واجهة المحادثة لوصف الميزة، واختبِرها في نافذة المعاينة، ثم استخدِم طلبات إضافية أو "طريقة عرض الرمز" لإضافة ترجمات إلى البطاقات التعليمية السريعة. جرِّب طلبًا، مثل:

 The flash cards should appear in the target language to start, then switch to
 English when clicked.

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

 The flip button for the flash cards isn't working. Can you debug it? All flash
 cards are only showing in English.

صورة GIF متحركة لبطاقات تعليمية يتم التبديل فيها بين الفرنسية والإنجليزية

الهدف 3: إضافة لغة جديدة

جرِّب طلبًا، مثل:

 Add a settings section to the app, where users can swap to a new language
 to learn. Add Japanese to the list of languages the user can pick from. If
 the user selects Japanese, the AI-generated stories, flash cards, and chatbot
 tutor should all use Japanese instead of French.

صورة GIF متحركة تعرض عملية تبديل لغة التطبيق إلى اليابانية

5- تكرار تصميم تطبيقك

بعد أن أصبح تطبيقك يتضمّن جميع الوظائف التي تريدها، حان الوقت للعمل على التصميم.

تغيير الألوان في التطبيق

يمكنك تحديد الألوان التي تريد استخدامها، أو يمكنك السماح لوكيل "نماذج التطبيقات" بتولي زمام المبادرة. في واجهة المحادثة، يمكنك أيضًا النقر على خيار رمز المرفق مرفق لتحميل صورة للألوان أو النمط الذي تريد استخدامه. إذا كنت تفضّل استخدام طلب، جرِّب ما يلي:

 Add color to the design of the app. Use modern, clean colors that adhere
 to accessibility standards and have a calming feel.

تعديل النص المستخدَم في التطبيق

على سبيل المثال، بدلاً من "مدرّب روبوت الدردشة المستند إلى الذكاء الاصطناعي"، قد تريد أن يقول فقط "دردشة":

 Change the text "AI Chatbot Tutor" to "Chat".

تعديل واجهة مستخدم التطبيق لتصبح أكثر سهولة

على سبيل المثال، بدلاً من أن يضطر المستخدم إلى الضغط على زر لإرسال نص، قد تريد السماح له بالضغط على Return على لوحة المفاتيح:

 In the story generator section, allow the user to press the return key on
 the keyboard to submit the text.

إضافة خيار للمستخدم للاختيار بين الوضعَين الفاتح والداكن

قد يفضّل العديد من المستخدمين خيار التبديل بين مظهر فاتح أو داكن للتطبيق. فكِّر في المكان المنطقي الذي يمكن العثور فيه على هذا الخيار:

 Add an icon in the upper right corner to dynamically switch the color theme of
 the app between dark mode and light mode.

نصائح حول كتابة الطلبات وتصحيح الأخطاء

الحصول على مساعدة في الطلبات: إذا واجهت صعوبة في شرح ما تريده لـ "وكيل إنشاء النماذج الأولية للتطبيقات"، يمكنك طلب المساعدة من Gemini من Google لتحسين الطلب. مزيد من المعلومات حول كتابة طلبات فعّالة
الاختبار على أجهزة أخرى: في "وضع النموذج الأولي"، انقر على مشاركة رابط المعاينة لاختبار تطبيقك على أجهزة أخرى.
استخدام الأدوات المضمّنة: في "طريقة عرض الرمز"، استخدِم ميزات تصحيح الأخطاء وإعداد التقارير المضمّنة في Firebase Studio لفحص تطبيقك وتصحيح أخطائه وتدقيقه.
البدء بميزة بسيطة: اعمل على ميزة واحدة في كل مرة. ننصحك بالبدء بمجموعة أساسية من الميزات في النموذج الأوّلي، ثم توسيع نطاقها بعد أن تعمل على النحو المتوقّع.
وصف الأخطاء: إذا كان هناك خطأ ما، يمكنك وصف السلوك الحالي للوكيل "نماذج أولية للتطبيقات"، ثم وصف السلوك المطلوب.
الرجوع إلى الإصدار السابق عند الحاجة: عندما يسيء وكيل "نماذج التطبيقات الأولية" فهم طلب أو يطرح مشكلة يصعب حلّها، انقر على زر استعادة للرجوع إلى إصدار سابق من التطبيق والمحاولة مجددًا باستخدام طلب مختلف.

6. (اختياري) نشر تطبيقك

بعد اختبار التطبيق والتأكّد من أنّه يلبي احتياجاتك، يمكنك نشره على الويب باستخدام استضافة التطبيقات من Firebase.

انقر على نشر لإنشاء مشروع Firebase جديد وبدء عملية إعداد App Hosting. يظهر جزء نشر تطبيقك.
في خطوة مشروع Firebase، دوِّن اسم مشروع Firebase الذي تم إنشاؤه لك، ثم انقر على التالي.
في خطوة ربط حساب فوترة Cloud، اختَر أحد الخيارَين التاليَين:
1. اختَر حساب الفوترة على Cloud الذي تريد ربطه بمشروعك على Firebase.
2. إذا لم يكن لديك حساب فوترة في Cloud أو أردت إنشاء حساب جديد، انقر على إنشاء حساب فوترة في Cloud. سيؤدي ذلك إلى فتح نص Google Cloud، حيث يمكنك إنشاء حساب فوترة جديد للخدمة الذاتية على Cloud. بعد إنشاء الحساب، ارجع إلى Firebase Studio واختَر الحساب من قائمة "ربط حساب الفوترة على السحابة الإلكترونية".
انقر على التالي. يربط Firebase Studio حساب الفوترة بالمشروع المرتبط بمساحة عملك، والذي تم إنشاؤه إما عند إنشاء مفتاح Gemini API تلقائيًا أو عند النقر على نشر. بعد ذلك، تعمل خدمة "استضافة التطبيقات" على إعداد بيئة مُدارة بالكامل لتطبيقك في Google Cloud.
انقر على إنشاء أول طرح. إطلاق عملية طرح App Hosting في Firebase Studio قد يستغرق إكمال هذا الإجراء مدة تصل إلى عشر دقائق. لمزيد من المعلومات حول ما يحدث وراء الكواليس، اطّلِع على عملية التصميم في App Hosting.
عند اكتمال عملية الطرح، ستظهر نظرة عامة على التطبيق مع عنوان URL وإحصاءات التطبيق المستندة إلى إمكانية تتبّع بيانات App Hosting. لاستخدام نطاق مخصّص (مثل example.com أو app.example.com) بدلاً من النطاق الذي تم إنشاؤه في Firebase، يمكنك إضافة نطاق مخصّص في نص Firebase.

لمزيد من المعلومات عن ميزة "استضافة التطبيقات"، يُرجى الاطّلاع على مقالة التعرّف على ميزة "استضافة التطبيقات" وطريقة عملها.

7. (اختياري) مراقبة تطبيقك

تقدّم لوحة نظرة عامة على التطبيق في App Hosting مقاييس ومعلومات أساسية عن تطبيقك، ما يتيح لك مراقبة أداء تطبيق الويب باستخدام أدوات إمكانية تتبّع البيانات المضمّنة في App Hosting. بعد طرح موقعك الإلكتروني، يمكنك الوصول إلى النظرة العامة من خلال النقر على نشر. من هذه اللوحة، يمكنك تنفيذ ما يلي:

انقر على إنشاء طرح لإصدار نسخة جديدة من تطبيقك.
شارِك رابط تطبيقك أو افتحه مباشرةً في زيارة تطبيقك.
راجِع ملخّصًا لمستوى أداء تطبيقك خلال آخر 7 أيام، بما في ذلك إجمالي عدد الطلبات وحالة آخر طرح. انقر على عرض التفاصيل للوصول إلى المزيد من المعلومات في نص Firebase.
اطّلِع على رسم بياني لعدد الطلبات التي تلقّاها تطبيقك خلال آخر 24 ساعة، مقسَّمة حسب رمز حالة HTTP.

إذا أغلقت لوحة "نظرة عامة على التطبيق"، يمكنك إعادة فتحها في أي وقت من خلال النقر على نشر.

يمكنك الاطّلاع على مزيد من المعلومات حول إدارة عمليات طرح ميزة "استضافة التطبيقات" ومراقبتها في إدارة عمليات الطرح والإصدارات.

8. الخاتمة

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