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

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

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

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

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

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

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

  7. เอเจนต์การสร้างต้นแบบแอปจะเริ่มเขียนโค้ดแอป

    • เนื่องจากแอปของคุณใช้ 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 view, you can also use the following features:

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

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

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

  • สร้างโปรเจ็กต์ Firebase: เอเจนต์การสร้างต้นแบบแอปจะจัดสรรโปรเจ็กต์ 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 mode at any time. ได้

    ขณะอยู่ในมุมมอง 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: คุณสามารถใช้ 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 อยู่ 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. คลิกตั้งค่าบริการ เอเจนต์การสร้างต้นแบบแอปจะเริ่มจัดสรรบริการ 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 และ Firebase Authentication ในคอนโซล Firebase

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

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

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

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

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

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

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

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

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

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

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