เริ่มต้นใช้งาน Firebase Studio

1. ภาพรวม

ในโค้ดแล็บนี้ คุณจะได้ฝึกใช้เอเจนต์การสร้างต้นแบบแอปใน Firebase Studio เพื่อสร้างแอปที่ออกแบบมาเพื่อช่วยคุณเรียนรู้ภาษาใหม่ จากนั้นคุณจะปรับแต่งและปรับปรุงแอป รวมถึงเผยแพร่ไปยัง Firebase App Hosting (ไม่บังคับ)

สิ่งที่คุณจะได้เรียนรู้

• แนวทางปฏิบัติแนะนำสำหรับการแจ้งใน Firebase Studio
• ทำซ้ำแอปเพื่อเพิ่มฟังก์ชันการทำงานและแก้ไขข้อบกพร่อง
• เผยแพร่แอปไปยัง Firebase App Hosting และแชร์กับผู้อื่น
• ติดตามเมตริกที่สำคัญผ่านแผงภาพรวมแอปการโฮสต์แอป

สิ่งที่ต้องมี

• เบราว์เซอร์ที่คุณเลือก เช่น Google Chrome
• บัญชี Google สำหรับการสร้างและการจัดการโปรเจ็กต์ Firebase

2. สร้างแอปโดยใช้เอเจนต์การสร้างต้นแบบแอป

เอเจนต์การสร้างต้นแบบแอปใช้ Gemini ใน Firebase เพื่อสร้างแอปของคุณ แม้จะใช้พรอมต์ที่เหมือนกัน แต่ผลลัพธ์อาจไม่เหมือนกับผลลัพธ์ที่แสดงในโค้ดแล็บนี้ หากติดขัด เราได้จัดเตรียมชุดไฟล์ที่คุณสามารถเพิ่มลงในพื้นที่ทำงานเพื่อดำเนินการต่อในแล็บที่จุดตรวจต่างๆ ตลอดทั้งโค้ดแล็บนี้

1. เข้าสู่ระบบบัญชี Google แล้วเปิด Firebase Studio
2. ในช่องสร้างต้นแบบแอปด้วย AI ให้ป้อนรายละเอียดของแอปที่ต้องการสร้าง สำหรับโค้ดแล็บนี้ คุณจะได้สร้างแอปที่จะช่วยให้คุณเรียนรู้ภาษาใหม่ผ่านเรื่องราว บัตรคำศัพท์ และติวเตอร์ 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. คลิกสร้างต้นแบบด้วย 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 MiB
5. คลิกบันทึก
6. เมื่อพิมพ์เขียวรวมการอัปเดตของคุณเสร็จแล้ว ให้คลิกสร้างต้นแบบแอปนี้
7. เนื่องจากแอปนี้มีองค์ประกอบ AI ตัวแทนจึงแจ้งให้คุณขอคีย์ Gemini เพิ่มคีย์ Gemini API ของคุณเอง หรือคลิกสร้างอัตโนมัติเพื่อสร้างคีย์ Gemini API หากคลิกสร้างอัตโนมัติ Firebase Studio จะสร้างโปรเจ็กต์ Firebase และสร้างคีย์ API ของ Gemini ให้คุณ
8. เอเจนต์การสร้างต้นแบบแอปจะใช้พิมพ์เขียวของแอปเพื่อสร้างแอปเวอร์ชันแรก เมื่อเสร็จแล้ว ตัวอย่างแอปจะปรากฏข้างอินเทอร์เฟซแชทของ Gemini โปรดสละเวลาสักครู่เพื่อทดสอบแอป แม้ว่าแอปจะไม่ได้มีลักษณะตรงตามที่คุณจินตนาการไว้ทุกประการ แต่ส่วนถัดไปจะอธิบายวิธีเพิ่มฟังก์ชันการทำงานใหม่และปรับแต่งการออกแบบ

3. (ไม่บังคับ) รับรหัส

หากติดขัดหรือต้องการทำตามแอปตัวอย่างอย่างใกล้ชิดยิ่งขึ้น ให้ใช้ไฟล์ตัวอย่างที่ระบุไว้ในจุดตรวจสอบต่างๆ ตลอดทั้งโค้ดแล็บ

1. ดาวน์โหลดไฟล์ในโฟลเดอร์
2. ใน Firebase Studio ให้คลิก Switch to Code เพื่อเปิดมุมมองโค้ด
3. ลากไฟล์ที่ดาวน์โหลดไปยังแผง Explorer ของ Firebase Studio อนุญาตให้ไฟล์แทนที่ไฟล์ที่มีอยู่
4. คลิกเปลี่ยนไปใช้ Prototyper เพื่อทำ Codelab ต่อโดยใช้แอปเวอร์ชันตัวอย่าง

4. ทดสอบ ทำซ้ำ และแก้ไขข้อบกพร่องของฟังก์ชันการทำงานของแอป

ขณะแสดงตัวอย่างแอป คุณอาจพบข้อบกพร่องหรือฟังก์ชันการทำงานที่ไม่คาดคิด ในแอปเวอร์ชันตัวอย่าง เราจะเพิ่มการเปลี่ยนแปลงและการแก้ไขต่อไปนี้

• ในโปรแกรมสร้างเรื่องราว AI ผู้ใช้ควรคลิกคำศัพท์เพื่อดูคำจำกัดความเป็นภาษาอังกฤษได้
• บัตรคำศัพท์ควรปรากฏเป็นภาษาฝรั่งเศส แล้วเปลี่ยนเป็นภาษาอังกฤษเมื่อคลิก
• ผู้ใช้ควรไปที่หน้าการตั้งค่าและเปลี่ยนไปเรียนภาษาญี่ปุ่นแทนภาษาฝรั่งเศสได้

เป้าหมายที่ 1: เพิ่มคำศัพท์ลงในโปรแกรมสร้างเรื่องราว AI

ไม่บังคับ: หากต้องการใช้แอปเวอร์ชันตัวอย่างจากจุดนี้ ให้ดาวน์โหลดและลากไฟล์เหล่านี้ลงในบานหน้าต่าง Explorer ของ Firebase Studio ในมุมมองโค้ด

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. หากแอปไม่ทำงานตามที่คาดไว้ ให้แจ้งเอเจนต์การสร้างต้นแบบแอปต่อไปเพื่อทำการปรับเปลี่ยน เช่น

   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 แก้ไขไม่ได้ บางครั้งการแก้ไขไฟล์ด้วยตนเองก็ง่ายกว่า เมื่อพร้อมแล้ว ให้เปลี่ยนไปใช้โหมด Prototyper เพื่อใช้เอเจนต์การสร้างต้นแบบแอปต่อไป

เป้าหมายที่ 2: เพิ่มคำแปลลงในการ์ดคำศัพท์

ไม่บังคับ: หากต้องการใช้แอปเวอร์ชันตัวอย่างจากจุดนี้ ให้ดาวน์โหลดและลากไฟล์เหล่านี้ลงในบานหน้าต่าง Explorer ของ Firebase Studio ในมุมมองโค้ด

ทำตามกระบวนการเดียวกันกับด้านบน โดยใช้อินเทอร์เฟซแชทเพื่ออธิบายฟีเจอร์ ทดสอบในหน้าต่างแสดงตัวอย่าง แล้วใช้พรอมต์เพิ่มเติมหรือมุมมองโค้ดเพื่อเพิ่มคำแปลลงในบัตรคำศัพท์ ลองใช้พรอมต์ เช่น

 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: เพิ่มภาษาใหม่

ไม่บังคับ: หากต้องการใช้แอปเวอร์ชันตัวอย่างจากจุดนี้ ให้ดาวน์โหลดและลากไฟล์เหล่านี้ลงในบานหน้าต่าง Explorer ของ Firebase Studio ในมุมมองโค้ด

ลองใช้พรอมต์ เช่น

 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 ในมุมมองโค้ด

ตอนนี้แอปของคุณมีฟังก์ชันการทำงานทั้งหมดที่คุณต้องการแล้ว ก็ถึงเวลาปรับแต่งสไตล์

เปลี่ยนรูปแบบสีของแอป

คุณสามารถระบุสีที่ต้องการใช้ หรือจะให้ตัวแทนการสร้างต้นแบบแอปเป็นผู้เลือกก็ได้ ในอินเทอร์เฟซแชท คุณยังคลิกตัวเลือก ไฟล์แนบเพื่ออัปโหลดรูปภาพสีหรือสไตล์ที่ต้องการใช้ได้ด้วย หากต้องการใช้พรอมต์ ให้ลองใช้พรอมต์ต่อไปนี้

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

อัปเดตข้อความที่ใช้ในแอป

เช่น แทนที่จะใช้ "ติวเตอร์แชทบอท AI" คุณอาจต้องการให้พูดแค่ว่า "แชท"

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

ปรับ UI ของแอปให้ใช้งานง่ายขึ้น

เช่น แทนที่จะให้ผู้ใช้กดปุ่มเพื่อส่งข้อความ คุณอาจต้องการอนุญาตให้ผู้ใช้กด 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. (ไม่บังคับ) เผยแพร่แอป

ไม่บังคับ: หากต้องการใช้แอปเวอร์ชันตัวอย่างจากจุดนี้ ให้ดาวน์โหลดและลากไฟล์เหล่านี้ลงในบานหน้าต่าง Explorer ของ Firebase Studio ในมุมมองโค้ด

หลังจากทดสอบแอปและพอใจกับผลลัพธ์แล้ว คุณสามารถเผยแพร่แอปไปยังเว็บด้วย Firebase App Hosting

1. คลิกเผยแพร่เพื่อสร้างโปรเจ็กต์ Firebase ใหม่และเริ่มการตั้งค่า App Hosting แผงเผยแพร่แอปจะปรากฏขึ้น
2. ในขั้นตอนโปรเจ็กต์ Firebase ให้จดชื่อโปรเจ็กต์ Firebase ที่สร้างให้คุณ แล้วคลิกถัดไป
3. ในขั้นตอนลิงก์บัญชีสำหรับการเรียกเก็บเงินใน Cloud ให้เลือกตัวเลือกใดตัวเลือกหนึ่งต่อไปนี้
   1. เลือกบัญชีสำหรับการเรียกเก็บเงินของ Cloud ที่ต้องการลิงก์กับโปรเจ็กต์ Firebase
   2. หากไม่มีบัญชีสำหรับการเรียกเก็บเงินของ Cloud หรือต้องการสร้างบัญชีใหม่ ให้คลิกสร้างบัญชีสำหรับการเรียกเก็บเงินของ Cloud ซึ่งจะเปิดข้อความ Google Cloud ที่คุณสามารถสร้างบัญชีสำหรับการเรียกเก็บเงินใน Cloud แบบบริการตนเองใหม่ได้ หลังจากสร้างบัญชีแล้ว ให้กลับไปที่ Firebase Studio แล้วเลือกบัญชีจากรายการลิงก์การเรียกเก็บเงินใน Cloud
4. คลิกถัดไป Firebase Studio จะลิงก์บัญชีสำหรับการเรียกเก็บเงินกับโปรเจ็กต์ที่เชื่อมโยงกับพื้นที่ทํางานของคุณ ซึ่งสร้างขึ้นเมื่อคุณสร้างคีย์ Gemini API โดยอัตโนมัติหรือเมื่อคลิกเผยแพร่ จากนั้น App Hosting จะตั้งค่าสภาพแวดล้อมที่มีการจัดการเต็มรูปแบบสำหรับแอปของคุณใน Google Cloud
5. คลิกสร้างการเปิดตัวครั้งแรก Firebase Studio เปิดตัวการเปิดตัว App Hosting การดำเนินการนี้อาจใช้เวลาสูงสุด 10 นาที ดูข้อมูลเพิ่มเติมเกี่ยวกับสิ่งที่เกิดขึ้นเบื้องหลังได้ที่กระบวนการสร้างการโฮสต์แอป
6. เมื่อการเปิดตัวเสร็จสมบูรณ์ ภาพรวมของแอปจะปรากฏพร้อม URL และข้อมูลเชิงลึกของแอปที่ขับเคลื่อนโดยการสังเกตการณ์ App Hosting หากต้องการใช้โดเมนที่กำหนดเอง (เช่น example.com หรือ app.example.com) แทนโดเมนที่ Firebase สร้างขึ้น คุณสามารถเพิ่มโดเมนที่กำหนดเองในข้อความ Firebase ได้

ดูข้อมูลเพิ่มเติมเกี่ยวกับ App Hosting ได้ที่ทำความเข้าใจ App Hosting และวิธีการทำงาน

7. (ไม่บังคับ) ตรวจสอบแอป

แผงภาพรวมแอปของ App Hosting จะแสดงเมตริกและข้อมูลสำคัญเกี่ยวกับแอป ซึ่งช่วยให้คุณตรวจสอบประสิทธิภาพของเว็บแอปได้โดยใช้เครื่องมือการสังเกตการณ์ในตัวของ App Hosting หลังจากเปิดตัวเว็บไซต์แล้ว คุณจะเข้าถึงภาพรวมได้โดยคลิกเผยแพร่ คุณทำสิ่งต่อไปนี้ได้จากแผงนี้

• คลิกสร้างการเปิดตัวเพื่อเผยแพร่แอปเวอร์ชันใหม่
• แชร์ลิงก์ไปยังแอปหรือเปิดแอปโดยตรงในไปที่แอป
• ดูข้อมูลสรุปเกี่ยวกับประสิทธิภาพของแอปในช่วง 7 วันที่ผ่านมา ซึ่งรวมถึงจำนวนคำขอทั้งหมดและสถานะการเปิดตัวล่าสุด คลิกดูรายละเอียดเพื่อเข้าถึงข้อมูลเพิ่มเติมในข้อความ Firebase
• ดูกราฟจำนวนคำขอที่แอปได้รับในช่วง 24 ชั่วโมงที่ผ่านมา โดยแบ่งตามรหัสสถานะ HTTP

หากปิดแผงภาพรวมแอป คุณจะเปิดอีกครั้งได้ทุกเมื่อโดยคลิกเผยแพร่

ดูข้อมูลเพิ่มเติมเกี่ยวกับการจัดการและการตรวจสอบการเปิดตัว App Hosting ได้ที่จัดการการเปิดตัวและรุ่น

8. บทสรุป

ยินดีด้วย คุณสร้างแอปโดยใช้ Firebase Studio เรียบร้อยแล้ว คุณยังเพิ่มสิ่งอื่นๆ ลงในแอปได้อีกมากมาย เช่น พจนานุกรมแบบขยาย ภาษาเพิ่มเติม เสียง ภาพเคลื่อนไหว หรือการเลือกระดับความยาก คุณสามารถเล่นแอปต่อหรือสร้างสรรค์สิ่งใหม่ๆ ได้ตามต้องการ

ดูข้อมูลเพิ่มเติม

• พัฒนา เผยแพร่ และตรวจสอบเว็บแอปแบบฟูลสแต็กด้วยเอเจนต์การสร้างต้นแบบแอป
• เริ่มสร้างต้นแบบแอปใหม่ด้วย Firebase Studio
• ดูข้อมูลเพิ่มเติมเกี่ยวกับพื้นที่ทำงาน Firebase Studio