วิธีสร้างแอปควิซด้วย AI

ก่อนจะเขียนพรอมต์ ให้กำหนดเวอร์ชันที่เล็กที่สุดซึ่งคุ้มค่าต่อการสร้าง

สำหรับแอปควิซส่วนใหญ่ นั่นหมายถึง:

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

จากนั้นตัดสินใจเรื่องพื้นฐานบางอย่าง:

• แพลตฟอร์ม: เว็บไซต์ใน React + Tailwind หรือแอปมือถือใน React Native กับ Expo
• ประเภทคำถาม: แบบปรนัยเป็นจุดเริ่มต้นที่ง่ายที่สุด
• การให้คะแนน: 1 คะแนนต่อคำตอบที่ถูก, ตอบผิดติดลบ, หรือคะแนนแบบถ่วงน้ำหนัก
• แหล่งข้อมูล: ใส่ตัวอย่างคำถามแบบ hardcode ก่อน หรือเก็บในฐานข้อมูลภายหลัง
• บัญชีผู้ใช้: จำเป็นเฉพาะถ้าคุณต้องการบันทึกความคืบหน้า ประวัติ หรือผลลัพธ์เฉพาะผู้ใช้
• การชำระเงิน: จำเป็นเฉพาะถ้าการเข้าถึงควิซ แพ็กคำถาม หรือฟีเจอร์พรีเมียมมีค่าใช้จ่าย

ให้เวอร์ชันแรกแคบไว้ก่อน แอปสอบแบบจับเวลา ที่มีบัญชีผู้ใช้ กระดานผู้นำ การชำระเงิน การวิเคราะห์ และคำถามที่สร้างด้วย AI จริง ๆ แล้วคือหลายโปรเจกต์รวมกัน เริ่มจากควิซที่ทำจบได้ครบก่อน

ใน Moremade คุณอธิบายแอปด้วยภาษาธรรมดา แล้วเอเจนต์ AI จะเขียนซอร์สโค้ดให้ จากนั้นคุณจะได้พรีวิวแบบสดและสามารถปรับโปรเจกต์ต่อด้วยการคุยได้

พรอมต์แรกควรครอบคลุม:

• แพลตฟอร์ม
• หน้าจอ
• รูปแบบคำถาม
• วิธีให้คะแนน
• สไตล์ภาพรวม
• จะใช้ข้อมูลตัวอย่างหรือไม่

พรอมต์แรกที่ดีควรเฉพาะเจาะจงพอที่จะลดการเดา แต่ไม่ละเอียดเกินไปจนคุณเสียเวลาเขียนพรอมต์มากกว่าสร้างจริง

Build a mobile quiz app in React Native with Expo for general knowledge practice. Include a home screen, a quiz screen, and a results screen. Use 10 multiple-choice questions with four answers each and show one question at a time. Keep score by adding 1 point for each correct answer. After the last question, show the total score, the correct answers, and a button to restart the quiz. Use simple clean styling, large tap targets, and sample question data hardcoded in the app.

ถ้าคุณต้องการเว็บไซต์แทน ให้บอกตรง ๆ Moremade สร้างเว็บไซต์เป็นโค้ด React + Tailwind และสร้างแอปมือถือเป็น React Native (Expo)

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

มองหาปัญหาเช่น:

• คะแนนอัปเดตไม่ถูกต้อง
• สถานะคำตอบไม่รีเซ็ตระหว่างแต่ละข้อ
• ปุ่มเล็กเกินไปบนมือถือ
• ไม่มีตัวบอกความคืบหน้า
• หน้าผลลัพธ์รกเกินไป

จากนั้นให้ขอแก้แบบเล็กและตรงจุด ตัวอย่างที่มีประโยชน์ 3 แบบ:

• "Add a progress indicator that shows question number out of 10 at the top of the quiz screen."
• "After the user selects an answer, highlight the selected option and disable the other options until they tap Next."
• "Update the results screen to show each question, the user's answer, the correct answer, and whether it was correct."

วิธีนี้มักเร็วกว่าเขียนพรอมต์ใหม่ทั้งชุด Moremade ยังมี visual inspector ให้คุณชี้ไปที่องค์ประกอบแล้วเปลี่ยนได้ และมี code view หากคุณต้องการตรวจหรือแก้โค้ดที่สร้างขึ้นโดยตรง

ถ้า AI สร้างเกินความจำเป็น ให้สั่งลดทอน เช่น ลบแอนิเมชัน หมวดหมู่ หรือหน้าบัญชีที่คุณไม่ได้ขอ

แอปควิซพื้นฐานไม่จำเป็นต้องมีแบ็กเอนด์ คำถามตัวอย่างแบบ hardcode ก็พอสำหรับเวอร์ชันใช้งานได้แรกเริ่ม

เพิ่ม Supabase ก็ต่อเมื่อคุณต้องการสิ่งต่าง ๆ เช่น:

• เก็บชุดคำถามในฐานข้อมูล
• การเข้าสู่ระบบผู้ใช้
• บันทึกคะแนนหรือประวัติควิซ
• อัปโหลดแอสเซ็ตหรือไฟล์

ใน Moremade, Supabase สามารถจัดการฐานข้อมูล การเข้าสู่ระบบ และการเก็บไฟล์ได้ ขั้นตอนถัดไปที่ใช้งานได้จริงอาจเป็น:

• สร้างตาราง quizzes
• สร้างตาราง questions ที่เชื่อมกับควิซ
• สร้างตาราง results ที่เชื่อมกับผู้ใช้

จากนั้นสั่งเปลี่ยนแปลงด้วยภาษาธรรมดา เช่น: "Connect this app to Supabase. Store quizzes and questions in the database, add email sign-in, and save each completed score to a results table."

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

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

ตรวจจุดเหล่านี้:

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

ทดสอบเนื้อหาที่ชวนสะดุดด้วย:

• คำถามสั้นมาก
• คำตอบยาวมาก
• ตอบผิดทุกข้อ
• ตอบถูกทุกข้อ
• ข้อมูลคำถามว่างหรือหายไป ถ้าใช้ฐานข้อมูล

ถ้ามีอะไรพัง ให้ขอแก้แบบเฉพาะเจาะจง เช่น: "On small screens, make answer cards full width and keep the Next button pinned near the bottom with safe spacing."

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

เมื่อโฟลว์หลักใช้งานได้แล้ว ให้เผยแพร่ Moremade สามารถเผยแพร่ได้ในคลิกเดียวไปยังซับโดเมนฟรี yourname.moremade.ai ซึ่งเพียงพอสำหรับรีวิวภายใน ทดสอบกับผู้ใช้ หรือแชร์โปรโตไทป์

ถ้าคุณอยู่ในแผนแบบเสียเงิน คุณสามารถเชื่อมโดเมนของคุณเองได้ และยังซื้อโดเมนได้ภายใน Moremade ด้วย

ก่อนเผยแพร่ ให้ทำเช็กลิสต์สั้น ๆ:

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

คุณสามารถส่งออกซอร์สโค้ดทั้งหมดเป็น ZIP ได้ทุกเมื่อ หรือ push ไปที่ GitHub ซึ่งสำคัญถ้าคุณต้องการพัฒนาต่อภายนอกแพลตฟอร์มในอนาคต ให้ทีมช่วยรีวิวโค้ด หรือส่งโปรเจกต์ต่อให้ดีเวลอปเปอร์คนอื่น

มีบางแพตเทิร์นที่ทำให้ต้องแก้งานเพิ่มโดยไม่จำเป็น

• เริ่มด้วยฟีเจอร์มากเกินไป ควรทำให้โฟลว์ควิซหนึ่งชุดใช้งานได้ก่อนค่อยเพิ่มบัญชี การสมัครสมาชิก หรือการวิเคราะห์
• พรอมต์กว้างเกินไป "Make me a quiz app" ยังเปิดช่องว่างมากเกินไป ระบุหน้าจอ การให้คะแนน และแพลตฟอร์ม
• เปลี่ยนทุกอย่างพร้อมกัน พรอมต์ติดตามแบบสั้น ๆ ควบคุมและทดสอบได้ง่ายกว่า
• ใส่ฐานข้อมูลเร็วเกินไป คำถามตัวอย่างแบบสถิติมักพอสำหรับเวอร์ชันแรก
• ละเลยเลย์เอาต์บนมือถือ อินเทอร์เฟซควิซต้องโต้ตอบสูง และหน้าจอเล็กจะเผยจุดอ่อนของ UI ได้เร็ว
• ไม่เช็กเคสขอบเขต ลอจิกจบควิซ พฤติกรรมตอนเริ่มใหม่ และข้อความคำตอบยาว ๆ มักพังเป็นอันดับแรก
• มองพรีวิวว่าเสร็จแล้ว การสร้างครั้งแรกคือร่าง ควรคาดหวังว่าต้องปรับอีกหลายรอบ

กฎที่ดีคือมุ่งให้ได้วงจรที่ครบแต่เรียบง่าย: เริ่มควิซ ตอบคำถาม ดูคะแนน เริ่มใหม่ เผยแพร่ เมื่อทำได้แล้ว ค่อยเพิ่มการเก็บข้อมูล การเข้าสู่ระบบ หรือการเข้าถึงแบบเสียเงินเมื่อมีความจำเป็นจริง