۱. مرور کلی
در این آزمایشگاه کد، شما با استفاده از عامل نمونهسازی برنامه در Firebase Studio تمرین خواهید کرد تا برنامهای بسازید که برای کمک به یادگیری یک زبان جدید طراحی شده باشد. سپس برنامه را اصلاح و بهبود خواهید بخشید و به صورت اختیاری آن را در Firebase App Hosting منتشر خواهید کرد.
آنچه یاد خواهید گرفت
- بهترین شیوهها برای اعلان در Firebase Studio
- برای افزودن قابلیتها و رفع اشکالات، روی یک برنامه تکرار کنید
- انتشار یک برنامه در Firebase App Hosting و اشتراکگذاری آن با دیگران
- معیارهای کلیدی را از طریق پنل نمای کلی برنامه میزبانی برنامه پیگیری کنید
آنچه نیاز دارید
- یک مرورگر دلخواه مانند گوگل کروم
- یک حساب گوگل برای ایجاد و مدیریت پروژه Firebase شما
۲. برنامه خود را با استفاده از عامل نمونهسازی برنامه (App Prototyping agent) تولید کنید
عامل نمونهسازی برنامه از Gemini در Firebase برای ساخت برنامه شما استفاده میکند. حتی هنگام استفاده از دستورات یکسان، ممکن است نتیجه شما دقیقاً مانند آنچه در این آزمایشگاه کد ارائه شده است، به نظر نرسد یا عمل نکند. اگر در جایی گیر کردید، مجموعهای از فایلها را ارائه کردهایم که میتوانید به فضای کاری خود اضافه کنید تا آزمایشگاه را در چندین نقطه بازرسی در سراسر این آزمایشگاه کد انتخاب کنید.
- وارد حساب گوگل خود شوید و 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.
گزینه پیوست برای آپلود تصویر در طول فرآیند درخواست یا طرح اولیه. حجم تصاویر باید کمتر از ۳ مگابایت باشد. - روی ذخیره کلیک کنید.
- وقتی طرح اولیه، بهروزرسانیهای شما را شامل شد، روی «نمونه اولیه این برنامه» کلیک کنید.
- از آنجا که این برنامه شامل عناصر هوش مصنوعی است، عامل از شما یک کلید Gemini میخواهد. کلید API Gemini خود را اضافه کنید یا برای تولید کلید API Gemini روی Auto-generate کلیک کنید. اگر روی Auto-generate کلیک کنید، Firebase Studio یک پروژه Firebase ایجاد میکند و یک کلید API Gemini برای شما تولید میکند.
- عامل نمونهسازی اولیه برنامه از طرح اولیه برنامه برای ایجاد اولین نسخه از برنامه شما استفاده میکند. پس از اتمام کار، پیشنمایش برنامه شما در کنار رابط چت Gemini ظاهر میشود. لحظهای وقت بگذارید و برنامه خود را آزمایش کنید. حتی اگر دقیقاً مطابق تصور شما نباشد، بخش بعدی نحوه افزودن قابلیتهای جدید و اصلاح طراحی را شرح میدهد.
۳. (اختیاری) دریافت کد
اگر در کدنویسی به مشکل برخوردید یا خواستید با دقت بیشتری برنامهی نمونه را دنبال کنید، از فایلهای نمونهای که در چندین نقطهی بررسی در سراسر آزمایشگاه کد ارائه شدهاند، استفاده کنید.
- فایلهای موجود در پوشه را دانلود کنید.
- در فایربیس استودیو، کلیک کنید
برای باز کردن نمای کد ، به بخش کد بروید . - فایلهایی که دانلود کردهاید را به پنل اکسپلورر فایربیس استودیو بکشید و رها کنید. اجازه دهید فایلها جایگزین فایلهای موجود شوند.
- برای ادامهی کدلب، با استفاده از نسخهی نمونهی برنامه، روی «تغییر به نمونهی اولیه» کلیک کنید.
۴. عملکرد برنامه خود را آزمایش، تکرار و اشکالزدایی کنید
هنگام پیشنمایش برنامه، ممکن است متوجه اشکالات یا عملکردهای غیرمنتظرهای شوید. در نسخه آزمایشی برنامه، تغییرات و اصلاحات زیر را اضافه خواهیم کرد:
- در تولیدکنندهی داستان هوش مصنوعی، کاربران باید بتوانند با کلیک بر روی کلمات، تعریف آنها را به انگلیسی دریافت کنند.
- فلش کارتها باید به زبان فرانسوی نمایش داده شوند، سپس با کلیک روی آنها به انگلیسی تغییر میکنند.
- کاربر باید بتواند به صفحه تنظیمات برود و به جای زبان فرانسه، زبان ژاپنی را انتخاب کند.
هدف ۱: اضافه کردن کلمات به مولد داستان هوش مصنوعی
اختیاری: برای استفاده از نسخه نمونه برنامه از این مرحله، این فایلها را دانلود کرده و در قسمت Explorer از Firebase Studio در نمای Code بکشید.
- در رابط چت، ویژگی مورد نظر برای اضافه کردن را شرح دهید:
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. - کلیک برای باز کردن نمای کد ، به Code بروید ، جایی که میتوانید تمام فایلهای برنامه خود را ببینید و کد خود را مستقیماً تغییر دهید. اگر اشکالی وجود دارد که Gemini قادر به حل آن نیست، گاهی اوقات ویرایش دستی یک فایل آسانتر است. وقتی آماده شدید، برای ادامه استفاده از عامل نمونهسازی برنامه، به حالت Prototyper بروید .
هدف ۲: اضافه کردن ترجمهها به فلش کارتها
اختیاری: برای استفاده از نسخه نمونه برنامه از این مرحله، این فایلها را دانلود کرده و در قسمت Explorer از Firebase Studio در نمای Code بکشید.
همان فرآیند بالا را دنبال کنید، از رابط چت برای توصیف ویژگی استفاده کنید، آن را در پنجره پیشنمایش آزمایش کنید، سپس یا از دستورات اضافی یا نمای کد برای اضافه کردن ترجمهها به فلش کارتها استفاده کنید. دستوری مانند زیر را امتحان کنید:
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.
هدف ۳: اضافه کردن یک زبان جدید
اختیاری: برای استفاده از نسخه نمونه برنامه از این مرحله، این فایلها را دانلود کرده و در قسمت 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.
۵. طراحی اپلیکیشن خود را تکرار کنید
اختیاری: برای استفاده از نسخه نمونه برنامه از این مرحله، این فایلها را دانلود کرده و در قسمت 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.
متن استفاده شده در برنامه را بهروزرسانی کنید
برای مثال، به جای «معلم چتبات هوش مصنوعی» میتوانید فقط بنویسید «چت»:
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 برای بازرسی، اشکالزدایی و ممیزی برنامه خود استفاده کنید.
- ساده شروع کنید: روی یک ویژگی در هر زمان کار کنید. در نظر بگیرید که با یک مجموعه اولیه از ویژگیها در نمونه اولیه خود شروع کنید، سپس وقتی که آن ویژگیها مطابق انتظار عمل کردند، آنها را گسترش دهید.
- شرح اشکالات: اگر چیزی کار نمیکند، رفتار فعلی و به دنبال آن رفتار مورد نظر خود را برای عامل نمونهسازی برنامه شرح دهید.
- در صورت نیاز، به عقب برگردید: وقتی عامل نمونهسازی برنامه، پیامی را اشتباه متوجه میشود یا مشکلی پیش میآید که حل آن دشوار است، روی دکمه بازیابی کلیک کنید تا به نسخه قبلی برنامه برگردید و دوباره با یک پیام متفاوت امتحان کنید.
۶. (اختیاری) برنامه خود را منتشر کنید
اختیاری: برای استفاده از نسخه نمونه برنامه از این مرحله، این فایلها را دانلود کرده و در قسمت Explorer از Firebase Studio در نمای Code بکشید.
بعد از اینکه برنامه را آزمایش کردید و از آن راضی بودید، میتوانید آن را با Firebase App Hosting در وب منتشر کنید.
- برای ایجاد یک پروژه جدید Firebase و شروع تنظیمات App Hosting، روی Publish کلیک کنید. پنجره Publish your app ظاهر میشود.
- در مرحله پروژه Firebase ، نام پروژه Firebase که برای شما ایجاد شده است را یادداشت کنید، سپس روی Next کلیک کنید.
- در مرحله حساب Link Cloud Billing ، یکی از موارد زیر را انتخاب کنید:
- حساب Cloud Billing که میخواهید به پروژه Firebase خود پیوند دهید را انتخاب کنید.
- اگر حساب Cloud Billing ندارید یا میخواهید یک حساب جدید ایجاد کنید، روی «ایجاد یک حساب Cloud Billing» کلیک کنید. این کار متن Google Cloud را باز میکند، جایی که میتوانید یک حساب Cloud Billing سلف سرویس جدید ایجاد کنید . پس از ایجاد حساب، به Firebase Studio برگردید و حساب را از فهرست Link Cloud Billing انتخاب کنید.
- روی Next کلیک کنید. Firebase Studio حساب صورتحساب را به پروژه مرتبط با فضای کاری شما پیوند میدهد، که یا هنگام تولید خودکار کلید API Gemini یا هنگام کلیک روی Publish ایجاد شده است. سپس، App Hosting یک محیط کاملاً مدیریتشده برای برنامه شما در Google Cloud راهاندازی میکند.
- روی «ایجاد اولین بخش» کلیک کنید. فایربیس استودیو بخش «میزبانی برنامه» را اجرا میکند. تکمیل این مرحله ممکن است تا ده دقیقه طول بکشد. برای کسب اطلاعات بیشتر در مورد آنچه در پشت صحنه اتفاق میافتد، به فرآیند ساخت «میزبانی برنامه» مراجعه کنید.
- وقتی این بهروزرسانی کامل شد، نمای کلی برنامه با یک URL و اطلاعات برنامه که توسط App Hosting observability ارائه میشود، ظاهر میشود. برای استفاده از یک دامنه سفارشی (مانند example.com یا app.example.com) به جای دامنه تولید شده توسط Firebase، میتوانید یک دامنه سفارشی را در متن Firebase اضافه کنید.
برای اطلاعات بیشتر در مورد میزبانی برنامه، به بخش «درک میزبانی برنامه و نحوه عملکرد آن» مراجعه کنید.
۷. (اختیاری) برنامه خود را رصد کنید
پنل نمای کلی برنامه App Hosting، معیارها و اطلاعات کلیدی در مورد برنامه شما را ارائه میدهد و به شما امکان میدهد عملکرد برنامه وب خود را با استفاده از ابزارهای مشاهده داخلی App Hosting رصد کنید. پس از انتشار سایت، میتوانید با کلیک روی Publish به نمای کلی دسترسی پیدا کنید. از این پنل، میتوانید:
- برای انتشار نسخه جدید برنامه خود، روی گزینه Create rollout کلیک کنید.
- پیوند برنامه خود را به اشتراک بگذارید یا برنامه خود را مستقیماً در «بازدید از برنامه خود» باز کنید.
- خلاصهای از عملکرد برنامه خود را در ۷ روز گذشته، از جمله تعداد کل درخواستها و وضعیت آخرین بهروزرسانی خود، مرور کنید. برای دسترسی به اطلاعات بیشتر در متن Firebase ، روی «مشاهده جزئیات» کلیک کنید.
- نموداری از تعداد درخواستهایی که برنامه شما در ۲۴ ساعت گذشته دریافت کرده است، بر اساس کد وضعیت HTTP، مشاهده کنید.
اگر پنل نمای کلی برنامه را ببندید، میتوانید هر زمان که خواستید با کلیک روی «انتشار» دوباره آن را باز کنید.
برای اطلاعات بیشتر در مورد مدیریت و نظارت بر انتشارهای App Hosting به بخش «مدیریت انتشارها و نسخهها» مراجعه کنید.
۸. نتیجهگیری
تبریک! شما با موفقیت یک برنامه با استفاده از Firebase Studio ایجاد کردید. چیزهای بیشتری میتوانید به برنامه اضافه کنید، مانند یک فرهنگ لغت توسعهیافته، زبانهای بیشتر، صدا، انیمیشنها یا انتخاب درجه سختی. میتوانید با برنامه خود بازی کنید یا چیز جدیدی بسازید.