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

คู่มือนี้แสดงวิธีใช้App Prototyping agent เพื่อ พัฒนาและเผยแพร่แอปแบบฟูลสแตกอย่างรวดเร็วด้วยความช่วยเหลือจาก 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 จะแจ้งให้คุณแก้ไขข้อผิดพลาดที่เกิดขึ้น คลิกแก้ไขข้อผิดพลาดเพื่ออนุญาตให้ ระบบลองแก้ไข

    หากได้รับข้อผิดพลาดที่ระบบไม่ได้แจ้งให้แก้ไขโดยอัตโนมัติ ให้คัดลอกข้อผิดพลาดและบริบทที่เกี่ยวข้อง (เช่น "คุณช่วยแก้ไขข้อผิดพลาดนี้ ในโค้ดการเริ่มต้น 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 ระบบจะเขียน และใช้กฎฐานข้อมูล Cloud Firestore ให้คุณ ตรวจสอบกฎในFirebaseคอนโซล

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

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

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

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

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

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

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

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

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

    วิธีโหลดโฟลว์ Genkit ใน Genkit Developer UI และเริ่ม ทดสอบ

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

       npm run genkit:watch

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

    ดูข้อมูลเพิ่มเติมเกี่ยวกับ Genkit Developer UI ได้ที่ เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ 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 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ตัวอย่าง: เปิดคอนโซลนักพัฒนาซอฟต์แวร์ของเบราว์เซอร์ แล้วค้นหาข้อความแสดงข้อผิดพลาด 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 โดยใช้กฎการใช้งานจริง คุณสามารถระบุ สถานะการตรวจสอบสิทธิ์ของผู้ใช้ เส้นทางไปยังข้อมูล และประเภท การดำเนินการเพื่อดูว่ากฎอนุญาตหรือปฏิเสธการเข้าถึงตามที่ต้องการหรือไม่

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