พัฒนา เผยแพร่ และตรวจสอบเว็บแอปแบบ Full Stack ด้วยตัวแทนการสร้างต้นแบบแอป

คู่มือนี้จะแสดงวิธีใช้ App Prototyping agent เพื่อ พัฒนาและเผยแพร่แอปแบบ Full-Stack ได้อย่างรวดเร็วด้วยความช่วยเหลือจาก Gemini โดยคุณจะใช้พรอมต์ภาษาธรรมชาติเพื่อสร้างแอป Next.js ที่ระบุรายการอาหารจากรูปภาพหรือกล้องในเบราว์เซอร์ที่ผู้ใช้ที่เข้าสู่ระบบเป็นผู้ระบุ และสร้างสูตรอาหารที่มีส่วนผสมที่ระบุ จากนั้นผู้ใช้สามารถเลือกจัดเก็บสูตรอาหารในฐานข้อมูลที่ค้นหาได้

จากนั้นคุณจะปรับแต่งและปรับปรุงแอปก่อนที่จะเผยแพร่ไปยัง Firebase App Hosting ในที่สุด

เทคโนโลยีอื่นๆ ที่คุณจะใช้เมื่อทำตามคู่มือนี้ ได้แก่

ขั้นตอนที่ 1: สร้างแอป

  1. เข้าสู่ระบบบัญชี Google แล้วเปิด Firebase Studio

  2. ในช่องสร้างต้นแบบแอปด้วย AI ให้ป้อนพรอมต์ต่อไปนี้ ซึ่งจะสร้างแอปสูตรอาหารแบบรูปภาพที่ใช้กล้องในเบราว์เซอร์และ Generative AI

    ตัวอย่างเช่น คุณป้อนพรอมต์ต่อไปนี้เพื่อสร้างแอปสร้างสูตรอาหารได้

    Use secure coding practices to create an error-free web app that lets
users upload a photo or take a picture with their browser
camera. The app identifies the food in the picture and generates a
recipe and accompanying image that includes that food.

If no food product is identified, generate a random dessert recipe.

  3. อัปโหลดรูปภาพเพื่อประกอบพรอมต์ (ไม่บังคับ) เช่น คุณสามารถอัปโหลดรูปภาพที่มีรูปแบบสีที่ต้องการให้แอปใช้และบอกให้ Firebase Studio ใช้รูปแบบสีดังกล่าว รูปภาพต้องมีขนาดไม่เกิน 3 MiB

  4. คลิกสร้างต้นแบบด้วย AI

    App Prototyping agentสร้างพิมพ์เขียวของแอปตาม พรอมต์ โดยแสดงชื่อแอปที่แนะนำ ฟีเจอร์ที่จำเป็น และหลักเกณฑ์ด้านสไตล์

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

    • คลิก กำหนดเอง แล้วแก้ไข พิมพ์เขียวโดยตรง ทำการเปลี่ยนแปลง แล้วคลิกบันทึก

    • ในช่องอธิบาย... ในบานหน้าต่างแชท ให้เพิ่มคำถามและบริบทที่ช่วยให้เข้าใจได้ชัดเจนยิ่งขึ้น นอกจากนี้ คุณยังอัปโหลดรูปภาพเพิ่มเติมได้ด้วย

  6. คลิกสร้างต้นแบบแอปนี้

  7. App Prototyping agent จะเริ่มเขียนโค้ดแอป

    • เนื่องจากแอปใช้ AI ระบบจึงแจ้งให้คุณเพิ่มหรือสร้างคีย์ Gemini API หากคลิกสร้างอัตโนมัติ App Prototyping agent จะจัดเตรียมโปรเจ็กต์ Firebase และคีย์ Gemini API ให้คุณ

ขั้นตอนที่ 2: ทดสอบ ปรับแต่ง แก้ไขข้อบกพร่อง และทำซ้ำ

หลังจากสร้างแอปเริ่มต้นแล้ว คุณสามารถทดสอบ ปรับแต่ง แก้ไขข้อบกพร่อง และทำซ้ำได้

  • ตรวจสอบและโต้ตอบกับแอป: หลังจากสร้างโค้ดเสร็จแล้ว ตัวอย่างแอปจะปรากฏขึ้น คุณสามารถโต้ตอบกับตัวอย่างโดยตรงเพื่อทดสอบ ดูข้อมูลเพิ่มเติมได้ที่ดูตัวอย่างแอป

  • เพิ่ม Cloud Firestore และ Firebase Authentication: ในระหว่างขั้นตอนการทำซ้ำ คุณสามารถขอให้ App Prototyping agent เพิ่มการตรวจสอบสิทธิ์ผู้ใช้และ ฐานข้อมูลโดยใช้ Cloud Firestore และ Firebase Authentication ตัวอย่างเช่น ให้ผู้ใช้บันทึกและดาวน์โหลดสูตรอาหารได้ด้วยพรอมต์ต่อไปนี้

    Add user authentication to the app. Authenticated users can:

  - Download the recipe and its generated image as a PDF (Print).

  - Save the recipe as public or private and make accessible to a search
    feature. For now, just save the text, not the image, to the database.

Important: Only authenticated users can download the PDF.

  • แก้ไขข้อผิดพลาดที่เกิดขึ้น: ในกรณีส่วนใหญ่ App Prototyping agent จะแจ้งให้คุณแก้ไขข้อผิดพลาดที่เกิดขึ้น คลิกแก้ไขข้อผิดพลาด เพื่ออนุญาตให้ Agent พยายามแก้ไข

    หากได้รับข้อผิดพลาดที่ระบบไม่ได้แจ้งให้คุณแก้ไขโดยอัตโนมัติ ให้คัดลอกข้อผิดพลาดและบริบทที่เกี่ยวข้อง (เช่น "คุณช่วยแก้ไขข้อผิดพลาดนี้ใน โค้ดการเริ่มต้น Firebase ของฉันได้ไหม") ลงในหน้าต่างแชทแล้ว ส่งให้ Gemini

  • ทดสอบและทำซ้ำโดยใช้ภาษาธรรมชาติ: ทดสอบแอปอย่างละเอียดและ ทำงานร่วมกับ App Prototyping agent เพื่อทำซ้ำโค้ดและพิมพ์เขียว จนกว่าคุณจะพอใจ

    ขณะอยู่ในมุมมอง Prototyper คุณยังใช้ ฟีเจอร์ต่อไปนี้ได้ด้วย

    • คลิก ไอคอนคำอธิบายประกอบ ใส่คำอธิบายประกอบ เพื่อวาดลงในหน้าต่างตัวอย่างโดยตรง ใช้เครื่องมือรูปร่าง รูปภาพ และข้อความที่มีอยู่ พร้อมกับพรอมต์ข้อความ (ไม่บังคับ) เพื่อ อธิบายด้วยภาพว่าคุณต้องการให้ App Prototyping agent เปลี่ยนแปลงอะไร

    • คลิก เลือกไอคอน เลือก เพื่อเลือกองค์ประกอบที่เฉพาะเจาะจงและป้อนคำแนะนำสำหรับ App Prototyping agent ซึ่งจะช่วยให้คุณกำหนดเป้าหมายไอคอน ปุ่ม ข้อความ หรือองค์ประกอบอื่นๆ ที่เฉพาะเจาะจงได้อย่างรวดเร็ว เมื่อคลิกรูปภาพ คุณจะมีตัวเลือกในการค้นหาและเลือกรูปภาพสต็อกจาก Unsplash ด้วย

    หรือคุณจะคลิก ลิงก์ ไอคอน แชร์ลิงก์ดูตัวอย่าง เพื่อแชร์แอปแบบสาธารณะและชั่วคราวโดยใช้ Firebase Studio เวอร์ชันตัวอย่างแบบสาธารณะ ก็ได้

  • สร้างโปรเจ็กต์ Firebase: App Prototyping agent จะจัดเตรียม โปรเจ็กต์ Firebase ในนามของคุณเมื่อคุณดำเนินการต่อไปนี้

    • สร้างคีย์ Gemini API โดยอัตโนมัติ
    • ขอเชื่อมต่อแอปกับโปรเจ็กต์ Firebase
    • ขอความช่วยเหลือในการเชื่อมต่อแอปกับบริการของ Firebase เช่น Cloud Firestore หรือ Firebase Authentication
    • คลิกปุ่มเผยแพร่ แล้วตั้งค่า Firebase App Hosting

    หากต้องการเปลี่ยนโปรเจ็กต์ Firebase ที่เชื่อมต่อกับพื้นที่ทำงาน ให้แจ้ง App Prototyping agentด้วยรหัสโปรเจ็กต์ที่ต้องการใช้แทน เช่น "เปลี่ยนไปใช้โปรเจ็กต์ Firebase ที่มีรหัส <your-project-id>"

  • ทดสอบแอปและยืนยันกฎฐานข้อมูลCloud Firestoreในบานหน้าต่างตัวอย่างแอป ให้อัปโหลดรูปภาพที่แสดงอาหารต่างๆ เพื่อทดสอบความสามารถของแอป ในการระบุส่วนผสม รวมถึงสร้างและบันทึกสูตรอาหาร

    ลงชื่อเข้าใช้ในฐานะผู้ใช้รายอื่นและสร้างสูตรอาหาร: ตรวจสอบว่าผู้ใช้ที่ได้รับการตรวจสอบสิทธิ์สามารถดูสูตรอาหารส่วนตัวและสูตรอาหารของตนเองได้ และผู้ใช้ทุกคนจะเห็นสูตรอาหารสาธารณะ

    เมื่อคุณขอให้ App Prototyping agent เพิ่ม Cloud Firestore Agent จะเขียน และใช้กฎฐานข้อมูล Cloud Firestore ให้คุณ ตรวจสอบกฎใน Firebaseคอนโซล

  • แก้ไขข้อบกพร่องและทำซ้ำในโค้ดโดยตรง: คลิก เปลี่ยนโค้ด ไอคอน เปลี่ยนไปใช้โค้ด เพื่อเปิด Code มุมมอง ซึ่งคุณจะเห็น ไฟล์ทั้งหมดของแอปและแก้ไขโค้ดได้โดยตรง คุณสามารถเปลี่ยนกลับไปใช้ โหมด Prototyper ได้ทุกเมื่อ

    ขณะอยู่ในมุมมอง Code คุณยังใช้ฟีเจอร์ที่เป็นประโยชน์ต่อไปนี้ได้ด้วย

    • ฟีเจอร์การรายงานและการแก้ไขข้อบกพร่องในตัวของFirebase Studio's เพื่อ ตรวจสอบ แก้ไขข้อบกพร่อง และตรวจสอบแอป

    • ความช่วยเหลือจาก AI โดยใช้ Gemini ทั้งแบบอินไลน์ภายในโค้ดหรือใช้แชทแบบโต้ตอบGemini (ทั้ง 2 แบบพร้อมใช้งานโดยค่าเริ่มต้น) แชทแบบโต้ตอบสามารถวินิจฉัยปัญหา ให้โซลูชัน และเรียกใช้เครื่องมือเพื่อช่วยแก้ไขแอปได้เร็วขึ้น หากต้องการเข้าถึงแชท ให้คลิก ประกายไฟGemini ที่ด้านล่างของพื้นที่ทำงาน

    • เข้าถึง Firebase Local Emulator Suite เพื่อดูฐานข้อมูลและ ข้อมูลการตรวจสอบสิทธิ์ วิธีเปิดโปรแกรมจำลองในพื้นที่ทำงาน

      1. คลิก เปลี่ยนโค้ด ไอคอน เปลี่ยนไปใช้โค้ด แล้วเปิดส่วนขยาย Firebase Studio (Ctrl+',Ctrl+' หรือ Cmd+',Cmd+' ใน MacOS)

      2. เลื่อนไปที่พอร์ตแบ็กเอนด์ แล้วขยาย

      3. ในคอลัมน์การดำเนินการ ที่สอดคล้องกับพอร์ต 4000 ให้คลิก เปิดในหน้าต่างใหม่

  • ทดสอบและวัดประสิทธิภาพฟีเจอร์ Generative AI: คุณสามารถใช้ UI สำหรับนักพัฒนาแอป Genkit เพื่อเรียกใช้โฟลว์ AI ของ Genkit, ทดสอบ, แก้ไขข้อบกพร่อง, โต้ตอบกับโมเดลต่างๆ, ปรับแต่งพรอมต์ และอื่นๆ

    วิธีโหลดโฟลว์ Genkit ใน UI สำหรับนักพัฒนาแอป Genkit และเริ่มทดสอบ

    1. จากเทอร์มินัลในพื้นที่ทำงาน Firebase Studio ให้เรียกใช้คำสั่งต่อไปนี้เพื่อจัดหาคีย์ Gemini API และเริ่มเซิร์ฟเวอร์ Genkit

       npm run genkit:watch

    2. คลิกลิงก์ UI สำหรับนักพัฒนาแอป Genkit UI สำหรับนักพัฒนาแอป Genkit จะเปิดขึ้นในหน้าต่างใหม่พร้อมโฟลว์ พรอมต์ ตัวฝัง และโมเดลต่างๆ ที่มีให้เลือก

    ดูข้อมูลเพิ่มเติมเกี่ยวกับ UI สำหรับนักพัฒนาแอป Genkit ได้ที่ เครื่องมือสำหรับนักพัฒนาแอป Genkit

(ไม่บังคับ) ขั้นตอนที่ 3: เผยแพร่แอปด้วย App Hosting

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

เมื่อคุณตั้งค่า App Hosting, Firebase Studio จะสร้าง โปรเจ็กต์ Firebase ให้คุณ (หากยังไม่ได้สร้างโดยการสร้างคีย์ Gemini API หรือบริการแบ็กเอนด์อื่นๆ โดยอัตโนมัติ) และแนะนำขั้นตอนการลิงก์บัญชี Cloud Billing

วิธีเผยแพร่แอป

  1. คลิกเผยแพร่ เพื่อตั้งค่า โปรเจ็กต์ Firebase และเผยแพร่แอป บานหน้าต่างเผยแพร่แอป จะปรากฏขึ้น

  2. ในขั้นตอนโปรเจ็กต์ Firebase App Prototyping agent จะแสดง โปรเจ็กต์ Firebase ที่เชื่อมโยงกับพื้นที่ทำงาน หากยังไม่มีโปรเจ็กต์ Firebase Agent App Prototyping agentจะสร้างโปรเจ็กต์ใหม่ให้ คุณ คลิกถัดไป เพื่อดำเนินการต่อ

  3. ในขั้นตอนลิงก์Cloud Billingบัญชี ให้เลือกตัวเลือกใดตัวเลือกหนึ่งต่อไปนี้

    • เลือกบัญชี Cloud Billing ที่ต้องการลิงก์กับโปรเจ็กต์ Firebase

    • หากไม่มีบัญชี Cloud Billing หรือต้องการสร้างบัญชีใหม่ ให้คลิก สร้างบัญชี Cloud Billing ซึ่งจะเปิดคอนโซล Google Cloud ที่คุณสามารถสร้างบัญชีแบบบริการตนเองใหม่ Cloud Billingได้ หลังจากสร้างบัญชีแล้ว ให้กลับไปที่ Firebase Studio แล้วเลือก บัญชีจากรายการ ลิงก์ Cloud Billing

  4. คลิกถัดไป Firebase Studio จะลิงก์บัญชีสำหรับการเรียกเก็บเงินกับโปรเจ็กต์ ที่เชื่อมโยงกับพื้นที่ทำงาน ซึ่งสร้างขึ้นเมื่อคุณสร้าง Gemini API คีย์โดยอัตโนมัติหรือเมื่อคุณคลิก เผยแพร่

  5. คลิกตั้งค่าบริการ App Prototyping agent จะเริ่ม จัดเตรียมบริการของ Firebase

  6. คลิกเผยแพร่เลย Firebase Studio จะตั้งค่าบริการของ Firebase แล้วเปิดตัว App Hosting ซึ่งอาจใช้เวลาหลายนาทีจึงจะเสร็จสมบูรณ์ ดูข้อมูลเพิ่มเติมเกี่ยวกับสิ่งที่เกิดขึ้นเบื้องหลังได้ที่ กระบวนการบิลด์App Hosting

  7. เมื่อขั้นตอนการเผยแพร่เสร็จสมบูรณ์ ภาพรวมแอป จะปรากฏขึ้นพร้อม URL และข้อมูลเชิงลึกของแอปที่ขับเคลื่อนโดย App Hosting ความสามารถในการสังเกตการณ์ หากต้องการใช้โดเมนที่กำหนดเอง (เช่น example.com หรือ app.example.com) แทนโดเมนที่ Firebase สร้างขึ้น คุณสามารถเพิ่มโดเมนที่กำหนดเองในคอนโซลFirebaseได้

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

(แนะนำ) ขั้นตอนที่ 4: ทดสอบแอปที่เผยแพร่

เมื่อการเผยแพร่เสร็จสมบูรณ์และแอปได้รับการติดตั้งใช้งานใน Firebase แล้ว Cloud Firestore และ Firebase Authentication ก็พร้อมสำหรับการทดสอบในการใช้งานจริง

สร้างดัชนีสำหรับฐานข้อมูล Cloud Firestore

เมื่อคุณติดตั้งใช้งานแอปใน Cloud Firestore ระบบจะไม่สร้างดัชนี โดยอัตโนมัติ ซึ่งหมายความว่าหลังจากเผยแพร่แล้ว คุณอาจต้องสร้างดัชนีสำหรับคำค้นหา

คุณอาจเห็นข้อผิดพลาดนี้ปรากฏในข้อความแสดงข้อผิดพลาดหรือในคอนโซลนักพัฒนาซอฟต์แวร์ของเบราว์เซอร์

วิธีสร้างดัชนีหลังจากเผยแพร่

  1. จากแอปที่เผยแพร่: ในบานหน้าต่างภาพรวมแอป (คลิกเผยแพร่ หากไม่เห็น) ให้ค้นหาและคลิกลิงก์ไปที่แอป

    จากตัวอย่าง Firebase Studio preview: เปิด คอนโซลนักพัฒนาซอฟต์แวร์ของเบราว์เซอร์แล้วค้นหาข้อความแสดงข้อผิดพลาด 200 ที่ Cloud Firestore สร้างขึ้น

  2. ทดสอบโฟลว์ทั้งหมดภายในแอป ข้อผิดพลาดอาจปรากฏขึ้นโดยมีข้อความว่า "เกิดข้อผิดพลาดในการโหลดสูตรอาหาร คำค้นหาต้องใช้ดัชนี คุณสร้างดัชนีได้ที่นี่:" พร้อมลิงก์ไปยังคอนโซล Firebase

  3. คลิกลิงก์เพื่อไปยังคอนโซล Firebase และดัชนีที่แนะนำ จะปรากฏขึ้น

  4. คลิกบันทึก เพื่อยอมรับดัชนีที่แนะนำ

  5. กลับไปที่แอปแล้วโหลดหน้าเว็บซ้ำ

  6. ทดสอบโฟลว์ทั้งหมดในแอปต่อไปเพื่อเพิ่มดัชนีในตำแหน่งที่จำเป็น

ดูข้อมูลเพิ่มเติมได้ที่ จัดการดัชนีใน Cloud Firestore

ดูข้อมูล Cloud Firestore และ Firebase Authentication ในคอนโซล Firebase

คุณสามารถดูข้อมูลแบบเรียลไทม์จากแอปในคอนโซล Firebase หลังจาก เผยแพร่

  • หากต้องการดูฐานข้อมูล Cloud Firestore แบบเรียลไทม์ ให้เปิดคอนโซล Firebase แล้วเลือก สร้าง > ฐานข้อมูล Firestore จากเมนูการนำทาง

    จากที่นี่ คุณสามารถตรวจสอบข้อมูลที่จัดเก็บ ดูและทดสอบกฎความปลอดภัย รวมถึงสร้างดัชนีได้ ดูข้อมูลเพิ่มเติมได้ที่ Cloud Firestore

  • หากต้องการดูข้อมูลFirebase Authenticationแบบเรียลไทม์ ให้เปิดคอนโซล Firebaseแล้วเลือก สร้าง > การตรวจสอบสิทธิ์จากเมนูการนำทาง

    จากที่นี่ คุณสามารถตรวจสอบการกำหนดค่าการตรวจสอบสิทธิ์และผู้ใช้แอปได้ ดูข้อมูลเพิ่มเติมได้ที่ Firebase Authentication

ทดสอบกฎ Cloud Firestore ในการใช้งานจริง

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

คุณสามารถทดสอบกฎได้โดยใช้วิธีต่อไปนี้ทั้งหมด

  • การทดสอบแอปพลิเคชัน: โต้ตอบกับแอปพลิเคชันที่ติดตั้งใช้งาน โดยดำเนินการที่ทริกเกอร์รูปแบบการเข้าถึงข้อมูลต่างๆ (อ่าน เขียน ลบ) สำหรับบทบาทหรือสถานะผู้ใช้ที่แตกต่างกัน การทดสอบในโลกแห่งความเป็นจริงนี้จะช่วยยืนยันว่ามีการบังคับใช้กฎอย่างถูกต้องในทางปฏิบัติ

  • พื้นที่ทดลองกฎ: หากต้องการตรวจสอบที่เจาะจง ให้ใช้พื้นที่ทดลอง กฎในคอนโซลFirebase เครื่องมือนี้ ช่วยให้คุณจำลองคำขอ (อ่าน เขียน ลบ) กับฐานข้อมูล Cloud Firestoreโดยใช้กฎการใช้งานจริง คุณสามารถระบุสถานะการตรวจสอบสิทธิ์ผู้ใช้ เส้นทางไปยังข้อมูล และประเภทการดำเนินการเพื่อดูว่ากฎอนุญาตหรือปฏิเสธการเข้าถึงตามที่ตั้งใจไว้หรือไม่

  • การทดสอบ Unit Test: หากต้องการทดสอบที่ครอบคลุมมากขึ้น คุณสามารถเขียน Unit Test สำหรับกฎความปลอดภัย ได้ แบ็กเอนด์ตัวอย่าง Firebase Studio ที่ขับเคลื่อนโดย Firebase Local Emulator Suite ช่วยให้คุณเรียกใช้การทดสอบเหล่านี้ได้ในเครื่อง โดยจำลองลักษณะการทำงานของกฎการใช้งานจริง ซึ่งเป็นวิธีที่มีประสิทธิภาพในการยืนยันตรรกะของกฎที่ซับซ้อนและยืนยันความครอบคลุมสำหรับสถานการณ์ต่างๆ หลังจากติดตั้งใช้งานแล้ว คุณควรตรวจสอบอีกครั้งว่า Unit Test ที่ใช้โปรแกรมจำลองทำงานตามที่คาดไว้และครอบคลุมทุกสถานการณ์