1. نظرة عامة
في هذا الدرس العملي، ستتدرب على استخدام أداة "إنشاء نماذج أولية للتطبيقات" في Firebase Studio لإنشاء تطبيق مصمّم لمساعدتك في تعلّم لغة جديدة. بعد ذلك، يمكنك تحسين التطبيق وتطويره، ونشره اختياريًا على "استضافة التطبيقات على Firebase".
أهداف الدورة التعليمية
- أفضل الممارسات لتقديم الطلبات في 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. - انقر على إنشاء نموذج أوّلي باستخدام الذكاء الاصطناعي.
- راجِع "مخطط التطبيق" المقترَح. انقر على
تخصيص لتعديل المخطط:- غيِّر اسم التطبيق إلى Speak Easy.
- غيِّر نظام الألوان إلى ما يلي:
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 الخاص بك أو انقر على إنشاء تلقائي لإنشاء مفتاح واجهة برمجة تطبيقات Gemini. إذا نقرت على إنشاء تلقائيًا، سينشئ Firebase Studio مشروعًا على Firebase ويُنشئ لك مفتاح Gemini API.
- يستخدم وكيل "نماذج التطبيقات الأولية" "مخطط التطبيق" لإنشاء الإصدار الأول من تطبيقك. وعند الانتهاء، ستظهر معاينة لتطبيقك إلى جانب واجهة محادثة Gemini. خصِّص بعض الوقت لاختبار تطبيقك، فحتّى إذا لم يكن شكله مطابقًا لما تخيّلته، يوضّح القسم التالي كيفية إضافة وظائف جديدة وتحسين التصميم.
3- (اختياري) الحصول على الرمز
إذا واجهتك مشكلة أو أردت متابعة التطبيق النموذجي عن كثب، استخدِم الملفات النموذجية المتوفّرة في عدة نقاط تحقّق خلال تجربة البرمجة.
- نزِّل الملفات في المجلد.
- في Firebase Studio، انقر على
التبديل إلى "عرض الرمز" لفتح "عرض الرمز". - اسحب الملفات التي نزّلتها إلى جزء "المستكشف" في Firebase Studio. السماح للملفات باستبدال أي ملفات حالية
- انقر على التبديل إلى Prototyper لمتابعة الدرس العملي باستخدام الإصدار التجريبي من التطبيق.
4. اختبار وظائف تطبيقك وتكرارها وتصحيح أخطائها
أثناء معاينة التطبيق، قد تلاحظ أخطاء أو وظائف غير متوقّعة. في الإصدار التجريبي من التطبيق، سنضيف التغييرات والإصلاحات التالية:
- في أداة إنشاء القصص المستنِدة إلى الذكاء الاصطناعي، يجب أن يتمكّن المستخدمون من النقر على كلمات المفردات للحصول على تعريف باللغة الإنجليزية.
- يجب أن تظهر البطاقات التعليمية باللغة الفرنسية، ثم تتحوّل إلى اللغة الإنجليزية عند النقر عليها.
- يجب أن يتمكّن المستخدم من الانتقال إلى صفحة الإعدادات والتبديل إلى تعلُّم اللغة اليابانية بدلاً من الفرنسية.
الهدف 1: إضافة كلمات مفردات إلى "أداة إنشاء القصص المستندة إلى الذكاء الاصطناعي"
اختياري: لاستخدام الإصدار التجريبي من التطبيق من هذه النقطة، نزِّل هذه الملفات واسحبها إلى جزء "المستكشف" في "استوديو Firebase" في "عرض الرمز".
- في واجهة المحادثة، أدخِل وصفًا للميزة التي تريد إضافتها:
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 لمواصلة استخدام وكيل "نماذج أوّلية للتطبيقات".
الهدف 2: إضافة ترجمات إلى البطاقات التعليمية السريعة
اختياري: لاستخدام الإصدار التجريبي من التطبيق من هذه النقطة، نزِّل هذه الملفات واسحبها إلى جزء "المستكشف" في "استوديو Firebase" في "عرض الرمز".
اتّبِع الخطوات نفسها الموضّحة أعلاه، باستخدام واجهة المحادثة لوصف الميزة، واختبِرها في نافذة المعاينة، ثم استخدِم طلبات إضافية أو "عرض الرمز البرمجي" لإضافة ترجمات إلى البطاقات التعليمية السريعة. جرِّب طلبًا، مثل:
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.
الهدف 3: إضافة لغة جديدة
اختياري: لاستخدام الإصدار التجريبي من التطبيق من هذه النقطة، نزِّل هذه الملفات واسحبها إلى جزء "المستكشف" في "استوديو Firebase" في "عرض الرمز".
جرِّب طلبًا، مثل:
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.
5- تكرار تحسين تصميم تطبيقك
اختياري: لاستخدام الإصدار التجريبي من التطبيق من هذه النقطة، نزِّل هذه الملفات واسحبها إلى جزء "المستكشف" في "استوديو Firebase" في "عرض الرمز".
بعد أن أصبح تطبيقك يتضمّن جميع الوظائف التي تريدها، حان الوقت للعمل على التصميم.
تغيير نظام الألوان في التطبيق
يمكنك تحديد الألوان التي تريد استخدامها، أو يمكنك السماح لأداة App Prototyping بتولي زمام المبادرة. في واجهة المحادثة، يمكنك أيضًا النقر على خيار المرفق لتحميل صورة للألوان أو النمط الذي تريد استخدامه. إذا كنت تفضّل استخدام طلب، جرِّب ما يلي:
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.
- انقر على نشر لإنشاء مشروع جديد على Firebase وبدء عملية إعداد "استضافة التطبيقات". يظهر جزء نشر تطبيقك.
- في خطوة مشروع Firebase، دوِّن اسم مشروع Firebase الذي تم إنشاؤه لك، ثم انقر على التالي.
- في خطوة ربط حساب فوترة Cloud، اختَر أحد الخيارَين التاليَين:
- اختَر حساب الفوترة على Cloud الذي تريد ربطه بمشروعك على Firebase.
- إذا لم يكن لديك حساب فوترة في Cloud أو أردت إنشاء حساب جديد، انقر على إنشاء حساب فوترة في Cloud. سيؤدي ذلك إلى فتح نص Google Cloud، حيث يمكنك إنشاء حساب فوترة جديد للخدمة الذاتية على Cloud. بعد إنشاء الحساب، ارجع إلى Firebase Studio واختَر الحساب من قائمة "ربط حساب الفوترة على السحابة الإلكترونية".
- انقر على التالي. يربط Firebase Studio حساب الفوترة بالمشروع المرتبط بمساحة عملك، والذي تم إنشاؤه إما عند إنشاء مفتاح Gemini API تلقائيًا أو عند النقر على نشر. بعد ذلك، تعمل خدمة "استضافة التطبيقات" على إعداد بيئة مُدارة بالكامل لتطبيقك في Google Cloud.
- انقر على إنشاء أول طرح. إطلاق ميزة "استضافة التطبيقات" في Firebase Studio قد يستغرق إكمال هذا الإجراء مدة تصل إلى عشر دقائق. لمزيد من المعلومات حول ما يحدث في الخلفية، اطّلِع على عملية إنشاء "استضافة التطبيقات".
- عند اكتمال عملية الطرح، ستظهر نظرة عامة على التطبيق مع عنوان URL وإحصاءات التطبيق المستندة إلى إمكانية مراقبة ميزة "استضافة التطبيق". لاستخدام نطاق مخصّص (مثل example.com أو app.example.com) بدلاً من النطاق الذي تم إنشاؤه في Firebase، يمكنك إضافة نطاق مخصّص في نص Firebase.
لمزيد من المعلومات عن خدمة "استضافة التطبيقات"، يُرجى الاطّلاع على مقالة التعرّف على خدمة "استضافة التطبيقات" وطريقة عملها.
7. (اختياري) مراقبة تطبيقك
تقدّم لوحة نظرة عامة على التطبيق في App Hosting مقاييس ومعلومات أساسية عن تطبيقك، ما يتيح لك مراقبة أداء تطبيقك على الويب باستخدام أدوات المراقبة المضمّنة في App Hosting. بعد طرح موقعك الإلكتروني، يمكنك الوصول إلى النظرة العامة من خلال النقر على نشر. من هذه اللوحة، يمكنك تنفيذ ما يلي:
- انقر على إنشاء طرح لإصدار نسخة جديدة من تطبيقك.
- شارِك رابط تطبيقك أو افتح تطبيقك مباشرةً في زيارة تطبيقك.
- راجِع ملخّصًا لمستوى أداء تطبيقك خلال آخر 7 أيام، بما في ذلك إجمالي عدد الطلبات وحالة آخر طرح. انقر على عرض التفاصيل للوصول إلى المزيد من المعلومات في نص Firebase.
- اطّلِع على رسم بياني لعدد الطلبات التي تلقّاها تطبيقك خلال آخر 24 ساعة، مقسَّمة حسب رمز حالة HTTP.
إذا أغلقت لوحة "نظرة عامة على التطبيق"، يمكنك إعادة فتحها في أي وقت من خلال النقر على نشر.
يمكنك الاطّلاع على مزيد من المعلومات حول إدارة عمليات طرح "استضافة التطبيقات" ومراقبتها في إدارة عمليات الطرح والإصدارات.
8. الخاتمة
تهانينا! لقد أنشأت تطبيقًا بنجاح باستخدام Firebase Studio. يمكنك إضافة المزيد إلى التطبيق، مثل قاموس موسّع أو المزيد من اللغات أو الصوت أو الصور المتحركة أو خيار تحديد مستوى الصعوبة. يمكنك مواصلة اللعب بتطبيقك أو إنشاء شيء جديد.