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

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

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

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

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

      1. คลิก ไอคอน Code Switch เปลี่ยนเป็นโค้ด แล้วเปิดส่วนขยาย 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 อีกครั้งกับสภาพแวดล้อมฮาร์ดแวร์และซอฟต์แวร์ ซึ่งจะช่วยให้มั่นใจได้ว่าข้อมูลของคุณจะเข้าถึงได้โดยผู้ใช้ที่ได้รับอนุญาตและได้รับการปกป้องจากการเข้าถึงที่ไม่ได้รับอนุญาต

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

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

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

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