با Firebase Studio شروع کنید

1. بررسی اجمالی

در این کد لبه، شما با استفاده از عامل App Prototyping در استودیو Firebase تمرین می‌کنید تا برنامه‌ای بسازید که برای کمک به یادگیری یک زبان جدید طراحی شده است. سپس برنامه را اصلاح و بهبود می‌دهید و به صورت اختیاری در میزبانی برنامه Firebase منتشر می‌کنید.

چیزی که یاد خواهید گرفت

• بهترین روش ها برای درخواست در Firebase Studio
• برای افزودن عملکرد و رفع اشکالات، روی یک برنامه تکرار کنید
• یک برنامه را در میزبانی برنامه Firebase منتشر کنید و آن را با دیگران به اشتراک بگذارید
• معیارهای کلیدی را از طریق پانل نمای کلی برنامه میزبانی برنامه پیگیری کنید

آنچه شما نیاز دارید

• مرورگر دلخواه شما، مانند گوگل کروم
• یک حساب Google برای ایجاد و مدیریت پروژه Firebase شما

2. برنامه خود را با استفاده از عامل App Prototyping ایجاد کنید

عامل App Prototyping از Gemini در Firebase برای ساخت برنامه شما استفاده می کند. حتی زمانی که از اعلان‌های یکسان استفاده می‌کنید، ممکن است نتیجه شما دقیقاً مانند آنچه در این کد نشان داده شده است به نظر نرسد یا عمل نکند. اگر گیر کردید، مجموعه‌ای از فایل‌ها را ارائه کرده‌ایم که می‌توانید آن‌ها را به فضای کاری خود اضافه کنید تا آزمایشگاه را از چندین نقطه بازرسی در سراسر این Codelab انتخاب کنید.

1. وارد حساب Google خود شوید و Firebase Studio را باز کنید.
2. در قسمت Prototype an app with AI توضیحی در مورد برنامه ای که می خواهید بسازید وارد کنید. برای این نرم افزار کد، برنامه ای خواهید ساخت که به شما کمک می کند زبان جدیدی را از طریق داستان ها، فلش کارت ها و یک معلم هوش مصنوعی یاد بگیرید. یک اعلان وارد کنید، مانند:

   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.
   

3. روی Prototype with AI کلیک کنید.
4. طرح برنامه پیشنهادی را مرور کنید. کلیک کنید سفارشی کردن برای ویرایش طرح اولیه:
   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 مگابایت باشد.
5. روی ذخیره کلیک کنید.
6. وقتی طرح اولیه شامل به‌روزرسانی‌های شما شد، روی Prototype this App کلیک کنید.
7. از آنجا که این برنامه شامل عناصر هوش مصنوعی است، عامل از شما یک کلید Gemini را می خواهد. کلید Gemini API خود را اضافه کنید یا روی Auto-generate کلیک کنید تا یک کلید API Gemini ایجاد شود. اگر روی Auto-generate کلیک کنید، Firebase Studio یک پروژه Firebase ایجاد می کند و یک کلید API Gemini برای شما ایجاد می کند.
8. عامل App Prototyping از App Blueprint برای ایجاد اولین نسخه از برنامه شما استفاده می کند. وقتی کار تمام شد، پیش نمایش برنامه شما در کنار رابط چت Gemini ظاهر می شود. یک لحظه برای آزمایش برنامه خود وقت بگذارید. حتی اگر دقیقاً آنطور که تصور می‌کردید به نظر نمی‌رسد، بخش بعدی نحوه افزودن قابلیت‌های جدید و اصلاح طراحی را توضیح می‌دهد.

3. (اختیاری) کد را دریافت کنید

اگر گیر کردید یا می‌خواهید برنامه نمونه را با دقت بیشتری دنبال کنید، از فایل‌های نمونه ارائه‌شده در چندین نقطه بازرسی در سراسر برنامه کد استفاده کنید.

1. فایل های موجود در پوشه را دانلود کنید.
2. در Firebase Studio، کلیک کنید برای باز کردن نمای کد، به کد بروید .
3. فایل‌هایی را که دانلود کرده‌اید به پنجره Explorer Firebase Studio بکشید. اجازه دهید فایل‌ها جایگزین فایل‌های موجود شوند.
4. با استفاده از نسخه نمونه برنامه، روی Switch to Prototyper کلیک کنید تا به لبه کد ادامه دهید.

4. عملکرد برنامه خود را آزمایش، تکرار و اشکال زدایی کنید

همانطور که برنامه را پیش‌نمایش می‌کنید، ممکن است متوجه اشکالات یا عملکرد غیرمنتظره شوید. در نسخه نمونه برنامه، تغییرات و اصلاحات زیر را اضافه خواهیم کرد:

• در مولد داستان هوش مصنوعی، کاربران باید بتوانند روی کلمات vocab کلیک کنند تا تعریفی به زبان انگلیسی دریافت کنند.
• فلش کارت ها باید به زبان فرانسوی ظاهر شوند، سپس پس از کلیک کردن، به انگلیسی بروید.
• کاربر باید بتواند به صفحه تنظیمات رفته و به جای زبان فرانسه به یادگیری ژاپنی سوق دهد.

هدف 1: کلمات واژگان را به AI Story Generator اضافه کنید

اختیاری: برای استفاده از نسخه نمونه برنامه از این نقطه، این فایل ها را دانلود کرده و به پنجره Explorer Firebase Studio در نمای Code بکشید.

1. در رابط چت، ویژگی مورد نظر برای اضافه کردن را شرح دهید:

   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.
   

2. برنامه را در پنجره پیش نمایش تست کنید. ظاهر و ظاهر برنامه را بعداً به‌روزرسانی خواهید کرد، بنابراین سعی کنید فعلاً فقط روی عملکرد آن تمرکز کنید.
3. اگر برنامه شما آنطور که انتظار داشتید کار نمی کند، همچنان از عامل App Prototyping بخواهید تا تنظیمات را انجام دهد. به عنوان مثال:

   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.
   

4. کلیک کنید برای باز کردن نمای کد به کد بروید ، جایی که می‌توانید همه فایل‌های برنامه خود را ببینید و کد خود را مستقیماً تغییر دهید. اگر اشکالی وجود دارد که Gemini قادر به حل آن نیست، گاهی اوقات ویرایش دستی یک فایل آسان تر است. وقتی آماده شدید، برای ادامه استفاده از عامل نمونه اولیه برنامه، به حالت نمونه اولیه بروید .

هدف 2: اضافه کردن ترجمه به کارت های فلش

اختیاری: برای استفاده از نسخه نمونه برنامه از این نقطه، این فایل ها را دانلود کرده و به پنجره Explorer Firebase Studio در نمای Code بکشید.

همان فرآیند بالا را دنبال کنید، از رابط چت برای توصیف ویژگی استفاده کنید، آن را در پنجره پیش نمایش آزمایش کنید، سپس از دستورات اضافی یا نمای کد برای افزودن ترجمه به کارت های فلش استفاده کنید. درخواستی مانند:

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

گاهی اوقات، عامل App Prototyping تشخیص نمی دهد که یک اشکال وجود دارد. توصیف آنچه می بینید و آنچه باید اصلاح شود می تواند موثرتر باشد، مانند:

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

هدف 3: اضافه کردن یک زبان جدید

اختیاری: برای استفاده از نسخه نمونه برنامه از این نقطه، این فایل ها را دانلود کرده و به پنجره Explorer Firebase Studio در نمای Code بکشید.

درخواستی مانند:

 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. روی طراحی اپلیکیشن خود تکرار کنید

اختیاری: برای استفاده از نسخه نمونه برنامه از این نقطه، این فایل ها را دانلود کرده و به پنجره Explorer Firebase Studio در نمای Code بکشید.

اکنون که برنامه شما تمام عملکردهای مورد نظر شما را دارد، وقت آن است که روی سبک کار کنید.

رنگ بندی برنامه را تغییر دهید

شما می‌توانید در مورد رنگ‌هایی که می‌خواهید استفاده کنید مشخص باشید، یا می‌توانید به عامل نمونه اولیه برنامه اجازه دهید رهبری را به دست بگیرد. در رابط چت، همچنین می توانید روی گزینه پیوست برای آپلود تصویری از رنگ ها یا سبکی که می خواهید استفاده کنید. اگر ترجیح می دهید از یک فرمان استفاده کنید، سعی کنید:

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

متن مورد استفاده در برنامه را به روز کنید

به عنوان مثال، به جای "AI Chatbot Tutor" ممکن است بخواهید فقط "Chat" را بگوید:

 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 بخواهید تا به اصلاح درخواست کمک کند. درباره تحریک موثر بیشتر بیاموزید .
• تست روی دستگاه های دیگر: در حالت نمونه اولیه، کلیک کنید پیوند پیش نمایش را به اشتراک بگذارید تا برنامه خود را در دستگاه های دیگر آزمایش کنید.
• از ابزارهای داخلی استفاده کنید: در نمای کد، از ویژگی های اشکال زدایی و گزارش داخلی Firebase Studio برای بازرسی، اشکال زدایی و ممیزی برنامه خود استفاده کنید.
• ساده شروع کنید: هر بار روی یک ویژگی کار کنید. در نظر بگیرید که با مجموعه‌ای از ویژگی‌های اولیه در نمونه اولیه خود شروع کنید، سپس زمانی که آن‌ها مطابق انتظار عمل کردند، آن‌ها را گسترش دهید.
• تشریح اشکالات: اگر چیزی کار نمی‌کند، رفتار فعلی را برای عامل App Prototyping توضیح دهید و سپس رفتاری را که می‌خواهید بیان کنید.
• در صورت نیاز به عقب برگردید: هنگامی که عامل نمونه سازی برنامه یک درخواست را اشتباه متوجه می شود یا مشکلی را معرفی می کند که حل آن مشکل است، روی دکمه Restore کلیک کنید تا به نسخه قبلی برنامه برگردید و دوباره با یک درخواست دیگر امتحان کنید.

6. (اختیاری) برنامه خود را منتشر کنید

اختیاری: برای استفاده از نسخه نمونه برنامه از این نقطه، این فایل ها را دانلود کرده و به پنجره Explorer Firebase Studio در نمای Code بکشید.

بعد از اینکه برنامه را آزمایش کردید و از آن راضی بودید، می‌توانید آن را با میزبانی برنامه Firebase در وب منتشر کنید.

1. برای ایجاد یک پروژه Firebase جدید و شروع راه اندازی میزبانی برنامه، روی انتشار کلیک کنید. صفحه Publish your app ظاهر می شود.
2. در مرحله پروژه Firebase ، نام پروژه Firebase را که برای شما ایجاد شده است، یادداشت کنید، سپس روی Next کلیک کنید.
3. در مرحله Link Cloud Billing حساب ، یکی از موارد زیر را انتخاب کنید:
   1. حساب Cloud Billing را که می‌خواهید به پروژه Firebase خود پیوند دهید، انتخاب کنید.
   2. اگر حساب Cloud Billing ندارید یا می‌خواهید حساب جدیدی ایجاد کنید، روی Create a Cloud Billing کلیک کنید. با این کار متن Google Cloud باز می‌شود، جایی که می‌توانید یک حساب کاربری جدید Cloud Billing ایجاد کنید . پس از ایجاد حساب، به Firebase Studio بازگردید و حساب را از لیست Link Cloud Billing انتخاب کنید.
4. روی Next کلیک کنید. استودیوی Firebase حساب صورت‌حساب را به پروژه مرتبط با فضای کاری شما پیوند می‌دهد، این حساب زمانی ایجاد می‌شود که یک کلید API Gemini را به‌طور خودکار ایجاد کرده‌اید یا زمانی که روی انتشار کلیک کرده‌اید. سپس، میزبانی برنامه یک محیط کاملاً مدیریت شده را برای برنامه شما در Google Cloud تنظیم می کند.
5. روی ایجاد اولین عرضه خود کلیک کنید. Firebase Studio عرضه میزبانی برنامه را راه اندازی کرد. تکمیل این کار ممکن است ده دقیقه طول بکشد. برای کسب اطلاعات بیشتر در مورد آنچه در پشت صحنه اتفاق می افتد، به فرآیند ساخت میزبانی برنامه مراجعه کنید.
6. وقتی عرضه کامل شد، نمای کلی برنامه با نشانی وب و اطلاعات آماری برنامه با قابلیت مشاهده میزبانی برنامه نمایش داده می‌شود. برای استفاده از یک دامنه سفارشی (مانند example.com یا app.example.com) به جای دامنه ایجاد شده توسط Firebase، می توانید یک دامنه سفارشی در متن Firebase اضافه کنید.

برای اطلاعات بیشتر درباره میزبانی برنامه، به درک میزبانی برنامه و نحوه عملکرد آن مراجعه کنید.

7. (اختیاری) برنامه خود را نظارت کنید

پانل نمای کلی برنامه میزبانی برنامه معیارها و اطلاعات کلیدی در مورد برنامه شما را ارائه می دهد و به شما این امکان را می دهد که عملکرد برنامه وب خود را با استفاده از ابزارهای مشاهده داخلی میزبانی برنامه نظارت کنید. پس از انتشار سایت شما، می توانید با کلیک روی انتشار به نمای کلی دسترسی پیدا کنید. از این پنل می توانید:

• برای انتشار نسخه جدیدی از برنامه خود، روی Create rollout کلیک کنید.
• پیوند برنامه خود را به اشتراک بگذارید یا برنامه خود را مستقیماً در Visit your app باز کنید.
• خلاصه‌ای از عملکرد برنامه‌تان در ۷ روز گذشته، شامل تعداد کل درخواست‌ها و وضعیت آخرین عرضه‌تان را مرور کنید. برای دسترسی به اطلاعات بیشتر در متن Firebase، روی مشاهده جزئیات کلیک کنید.
• نموداری از تعداد درخواست‌هایی که برنامه شما در 24 ساعت گذشته دریافت کرده است، به تفکیک کد وضعیت HTTP مشاهده کنید.

اگر پانل نمای کلی برنامه را ببندید، می‌توانید هر زمان که بخواهید با کلیک روی انتشار دوباره آن را باز کنید.

درباره مدیریت و نظارت بر عرضه میزبانی برنامه در مدیریت عرضه و انتشار بیشتر بیاموزید.

8. نتیجه گیری

تبریک می گویم! با استفاده از Firebase Studio با موفقیت یک برنامه ایجاد کردید. چیزهای بیشتری وجود دارد که می‌توانید به برنامه اضافه کنید، مانند فرهنگ لغت گسترده، زبان‌های بیشتر، صدا، انیمیشن‌ها یا انتخاب مشکل. با خیال راحت به بازی با برنامه خود ادامه دهید یا چیزی جدید بسازید.

بیشتر بدانید:

• با عامل App Prototyping یک برنامه وب تمام پشته را توسعه، منتشر و نظارت کنید
• نمونه سازی برنامه جدید خود را با Firebase Studio شروع کنید
• درباره فضاهای کاری Firebase Studio بیشتر بیاموزید