เขียนโค้ดไม่เป็นก็สร้างแอปใช้เองได้: สอน Vibe Coding ด้วย Gemini Canvas ทีละขั้น

Vibe Coding คืออะไร

แต่ก่อนถ้าเราอยากได้แอปสักตัว ทางเลือกมีไม่มากครับ ไม่จ้างคนเขียนให้ ก็ต้องไปเรียนเขียนโค้ดเอง ซึ่งทั้งเสียเงินและเสียเวลา

Vibe Coding ทำให้เรื่องนี้ง่ายขึ้นเยอะเลยครับ ให้นึกภาพว่าเราเป็น เจ้าของบ้าน ส่วน AI เป็น ช่าง เราไม่ต้องก่ออิฐเอง แค่บอกว่าอยากได้บ้านแบบไหน มีกี่ห้อง ใครอยู่ห้องไหน แล้วให้ช่างลงมือทำ

วนอยู่ 3 จังหวะ

วิธีทำงานแบบ Vibe Coding วนอยู่แค่ 3 จังหวะครับ

1. บอก ว่าเราอยากได้อะไร
2. ลองใช้ ของที่ได้ กดดูจริงทุกหน้า
3. สั่งแก้ จุดที่ยังไม่ใช่

จากนั้นก็วนซ้ำไปเรื่อย ๆ จนได้ของที่พอใจ แอปจะดีขึ้นทุกรอบ เหมือนบ้านที่ค่อย ๆ เสร็จทีละส่วน

สิ่งที่ต้องมี ไม่ใช่ความรู้เรื่องโค้ด

เพราะฉะนั้นสิ่งที่เราต้องมีก่อนเริ่ม ไม่ใช่ความรู้เรื่องโค้ดครับ แต่คือคำตอบของ 3 คำถามนี้

• อยากได้อะไร แอปนี้ช่วยเรื่องอะไร
• ใครจะใช้ เราคนเดียว หรือทีมเล็ก ๆ
• ใช้ตอนไหน ใช้บนมือถือระหว่างเดินทาง หรือบนคอมตอนทำงาน

ถ้ายังตอบ 3 ข้อนี้ไม่ชัด ลองเอา Prompt ด้านล่างไปวางใน AI ตัวไหนก็ได้ ให้ช่วยสัมภาษณ์เราก่อนครับ AI จะถามทีละข้อ แล้วสรุปเป็น Prompt พร้อมวางใน Gemini Canvas ให้ แต่สุดท้ายแอปจะมีอะไรบ้าง เราเป็นคนตัดสินใจเองนะครับ ก่อนคัดลอก Prompt ไปวาง อ่านหมายเหตุที่ AI เขียนไว้ใต้ Prompt ด้วยนะครับ ว่าเพิ่มอะไรหรือสมมติอะไรไว้บ้าง

ฉันอยากสร้างแอปเล็ก ๆ ไว้ใช้เอง ด้วย Gemini Canvas แต่ฉันเขียนโค้ดไม่เป็น
เรื่องที่อยากให้แอปช่วยคือ {เรื่องที่อยากให้ช่วย เช่น จดค่าใช้จ่ายเบิกบริษัท หรือ ตามลูกค้าที่ต้องโทรกลับ}
ตอนนี้ฉันจัดการเรื่องนี้โดย {ทำยังไงอยู่และติดตรงไหน เช่น จดใน Excel แล้วลืมตามบ่อย}

ช่วยสัมภาษณ์ฉันเพื่อให้ได้แอปที่ตรงใจ โดย
- ถามครั้งละหนึ่งคำถาม ข้อความหนึ่งมีคำถามเดียว รอฉันตอบก่อนค่อยถามข้อต่อไป
- ถ้าเรื่องไหนมีหลายประเด็น ให้แยกถามทีละประเด็น
- ระหว่างถาม ห้ามเสนอ ห้ามยกตัวอย่างคำตอบ และห้ามใบ้ว่าแอปควรมีอะไร ถ้าฉันถามว่าควรมีอะไร ให้บอกว่าจะตอบตอนท้าย แล้วถามเรื่องเดิมใหม่ด้วยคำที่ง่ายขึ้น
- ถ้าฉันตอบว่าไม่รู้ หรือตอบกว้างเกินไป ให้ถามใหม่ด้วยคำที่ง่ายขึ้น ชวนนึกจากงานจริงของฉัน แทนการยกตัวอย่างให้
- เรื่องที่ต้องถามมี 4 เรื่อง: 1) ใครจะใช้บ้าง 2) ใช้ตอนไหน บนมือถือหรือคอม 3) เปิดแอปมา หน้าแรกอยากเห็นอะไร 4) ต้องเก็บข้อมูลอะไรบ้าง
- ถ้าข้อมูลที่ฉันเล่าไว้ข้างบน หรือคำตอบก่อนหน้า ตอบเรื่องไหนไปแล้ว ไม่ต้องถามเรื่องนั้นซ้ำ
- ถามรวมไม่เกิน 6 ข้อ ข้อที่เหลือใช้ถามเจาะคำตอบที่ยังไม่ชัด

พอถามครบแล้ว
1. สรุปสิ่งที่ฉันตอบเป็นข้อ ๆ สั้น ๆ
2. ชี้เรื่องที่ยังไม่ชัด หรือควรตัดสินใจก่อนสร้าง ไม่เกิน 3 ข้อ รวมถึงสิ่งที่ฉันขอแต่ Gemini Canvas อาจทำไม่ได้หรือทำได้จำกัด เช่น ให้หลายคนเห็นข้อมูลชุดเดียวกันจากคนละเครื่อง หรือส่งแจ้งเตือนเข้ามือถือ ถ้าระหว่างถามฉันเคยถามว่าควรมีอะไร ให้ตอบตรงนี้สั้น ๆ เป็นตัวเลือก ไม่นับรวมใน 3 ข้อ แล้วให้ฉันเลือกเอง รอฉันตอบก่อน ค่อยทำข้อ 3
3. พอฉันเลือกแล้ว เขียน prompt สำหรับวางใน Gemini Canvas เพื่อสร้างแอปเวอร์ชันแรก ใช้เฉพาะสิ่งที่ฉันตอบชัดแล้ว ห้ามเพิ่มฟีเจอร์ สูตรคำนวณ หรือตัวเลขที่ฉันไม่ได้พูดถึง ถ้ามีอะไรที่จำเป็นต่อการใช้งานจริง เช่น ข้อมูลไม่หายเมื่อปิดแอป ใส่ได้ แต่บอกฉันใต้ prompt ว่าเพิ่มอะไรเพราะอะไร และห้ามเขียนว่าแอปทำสิ่งที่ข้อ 2 บอกว่าอาจทำไม่ได้
ถ้าฉันอยากปรับเรื่องไหนอีก ให้เขียน prompt ใหม่ทั้งชุด

สรุปช่วงนี้: Vibe Coding คือการบอก AI ให้สร้าง แล้ววนลองใช้กับสั่งแก้ไปเรื่อย ๆ สิ่งที่ต้องมีคือรู้ว่าอยากได้อะไร ใครใช้ และใช้ตอนไหน

เริ่มใช้ Gemini Canvas

Canvas คือพื้นที่ใน Gemini ที่สร้างแอปให้เราดู และให้เรากดลองใช้ได้ทันทีในหน้าเดียวกัน ในคลิปผมใช้บัญชี Google ส่วนตัวแบบเสียเงิน ถ้าใช้บัญชีฟรีหรือบัญชีบริษัท บางปุ่มหรือผลที่ได้อาจไม่เหมือนกันบ้าง ขั้นตอนเริ่มต้นมีแค่นี้ครับ

1. เปิด gemini.google.com แล้วเริ่มแชทใหม่
2. กดปุ่ม + ใต้ช่องพิมพ์ แล้วเลือก Canvas (บางเครื่องอยู่ในเมนูเครื่องมือเพิ่มเติม)
3. พิมพ์ Prompt บอกว่าอยากได้แอปแบบไหน แล้วกดส่ง
4. รอสักครู่ แอปจะขึ้นในแผง Canvas ด้านขวา กด แสดงตัวอย่าง (บางหน้าจอเขียนว่า พรีวิว) เพื่อลองใช้ ส่วนแท็บ โค้ด ไม่ต้องสนใจก็ได้
5. อยากแก้ตรงไหน พิมพ์ในช่องแชทต่อได้เลย หรือกดปุ่ม ถาม Gemini มุมขวาล่างของ Canvas แล้วลากคลุมส่วนที่อยากแก้ ก่อนพิมพ์สั่ง

สรุปช่วงนี้: เปิด Gemini เลือก Canvas พิมพ์บอกว่าอยากได้อะไร แล้วลองใช้แอปที่ขึ้นมาทางขวาได้ทันที

ชื่อปุ่มอาจต่างไปตามหน้าจอและบัญชี ตรวจวิธีเริ่ม Canvas และการแก้เฉพาะจุดได้จาก คู่มือ Gemini Canvas ของ Google

เดโม 1: สร้างแอปวางแผนเที่ยวโอซาก้า

ตัวอย่างแรกในคลิป ผมสร้างแอปวางแผนเที่ยวโอซาก้า 5 วัน 4 คืน (ทริปสมมติ) เริ่มจากแชทเปล่า ๆ พิมพ์ทั้งหมด 4 รอบ

รอบ 1: สั่งแกนหลักก่อน

รอบแรกผมไม่ใส่ทุกอย่างที่อยากได้ครับ เอาแค่แกนหลักก่อน คือแผนเที่ยวรายวันกับงบประมาณ

สร้างแอปวางแผนเที่ยวโอซาก้า 5 วัน 4 คืน ใช้บนมือถือเป็นหลัก
- แสดงแผนรายวัน แต่ละวันมีสถานที่ เวลา และหมายเหตุสั้น ๆ
- มีหน้างบประมาณ แยกที่พัก อาหาร เดินทาง ช้อปปิ้ง เป็นเงินเยน
- ใส่แผนตัวอย่างให้ครบทุกวัน
- ดีไซน์สดใส อ่านง่าย ใช้ภาษาไทย

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

รอบ 2: ลองใช้ แล้วสั่งแก้จุดที่ยังไม่ใช่

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

ตัวหนังสือเล็กเกินไปบนมือถือ ขอให้ใหญ่ขึ้นหรือปรับขนาดฟอนต์ได้ และแผนรายวันยาวต้องเลื่อนไกล ขอเป็นแท็บย่อยแยกช่วงเช้า บ่าย ค่ำในแต่ละวัน

ตรงนี้คือหัวใจของ Vibe Coding เลยครับ เราไม่ต้องรู้ว่าต้องแก้โค้ดยังไง แค่บอกอาการที่เจอตอนใช้จริง แล้วบอกว่าอยากได้แบบไหน

ส่วนเรื่องเงิน ของผมรอบแรก Gemini แปลงเป็นเงินบาทให้เองเลย ทั้งที่ใน Prompt ขอเป็นเยน แต่ Gemini สร้างแอปไม่เหมือนกันทุกครั้งนะครับ ถ้าของคุณออกมามีแต่เงินเยน ดูแล้วไม่รู้ว่าแพงหรือถูก ลองสั่งแก้แบบนี้

ให้แสดงเป็นเงินบาทคู่กับเยน
โดยให้ฉันกรอกอัตราแลกเปลี่ยนเองได้

ที่ให้กรอกเรทเอง เพราะค่าเงินเปลี่ยนทุกวัน วันไหนจะไปจริงก็ใส่เรทวันนั้น

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

รอบ 3: แกนหลักใช้ได้แล้ว ค่อยเติมของ

เพิ่มหน้าเช็กลิสต์ของที่ต้องเตรียมก่อนเดินทาง ติ๊กได้
และเพิ่มปุ่มเปิด Google Maps ให้ทุกสถานที่ในแผน

เช็กก่อนไปรอบถัดไป

ทุกครั้งที่ได้แอปเวอร์ชันใหม่ ลองติ๊กเช็กลิสต์นี้ก่อนสั่งแก้รอบต่อไปครับ

สรุปเดโมแอปเที่ยว: เริ่มจากแกนหลัก แล้วค่อย ๆ ลองใช้ เจอจุดไหนไม่ใช่ก็บอกอาการให้ AI แก้ทีละเรื่อง

ส่งขึ้น Google Sites เพื่อเปิดบนมือถือ

สร้างเสร็จแล้ว จะเอาไปใช้จริงต้องมีลิงก์ไว้เปิดบนมือถือครับ Canvas เองก็มีปุ่มแชร์ลิงก์ ส่วนบัญชีบริษัทจะขึ้นกับการอนุญาตแชร์ของผู้ดูแล ในคลิปผมเลยใช้วิธีส่งขึ้น Google Sites ซึ่งกดไม่กี่ครั้งก็เสร็จ

1. ที่แผง Canvas กดปุ่ม ส่งออก มุมขวาบน แล้วเลือก Google Sites
2. Google Sites จะเปิดขึ้นมาพร้อมร่างเว็บที่มีแอปของเราอยู่ข้างใน ใช้งานได้เหมือนเดิม
3. กด เผยแพร่ มุมขวาบน แล้วตั้งชื่อที่อยู่เว็บ ถ้ามีกล่องชวนใช้โดเมนของตัวเองหรือ Google Workspace ขึ้นมา ข้ามได้เลย ไม่ต้องซื้ออะไร
4. กด เผยแพร่ อีกครั้ง ได้ลิงก์มาแล้ว เปิดบนมือถือหรือส่งให้คนที่ต้องใช้ได้เลย

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

พอมีลิงก์แล้ว แนะนำให้เพิ่มไว้ที่หน้าจอโฮมของมือถือ จะได้มีไอคอนกดเปิดได้เร็วเหมือนแอป (iPhone: เปิดใน Safari กดปุ่มแชร์ แล้วเลือก เพิ่มไปยังหน้าจอโฮม / Android: เปิดใน Chrome กดจุดสามจุด แล้วเลือก เพิ่มลงในหน้าจอหลัก) ตอนใช้ต้องต่อเน็ตด้วยครับ

สรุปช่วงนี้: กดส่งออกไป Google Sites แล้วเผยแพร่ ก็ได้ลิงก์ไว้เปิดแอปบนมือถือ

Google ระบุว่าการแชร์ของบัญชีองค์กรขึ้นกับผู้ดูแล จึงไม่ใช่ทุกบัญชีบริษัทที่แชร์ Canvas ตรง ๆ ไม่ได้ หากเปิดการแชร์ไว้ อาจมีตัวเลือกแชร์ลิงก์หรือผ่าน Drive ให้ใช้

เดโม 1 (ต่อ) รอบ 4: ใส่ AI ให้แอปเที่ยวแนะนำร้าน

ยังไม่จบนะครับ อีกอย่างที่ผมชอบเป็นพิเศษ คือเราใส่ความสามารถของ Gemini เข้าไปในแอปที่เราสร้างได้ด้วย แค่พิมพ์ในช่องแชทปกติ

เพิ่มฟีเจอร์ AI ให้แอปแนะนำร้านอาหารหรือกิจกรรมใกล้ ๆ สถานที่ในแต่ละวัน

ในคลิป แอปมีปุ่มให้ AI แนะนำร้านหรือกิจกรรมใกล้ ๆ แต่ละสถานที่ กดแล้วได้รายการขึ้นมาให้เลือก แอปที่เราสร้างเองก็ช่วยคิดต่อให้เราได้ด้วย

แต่มีข้อควรรู้ครับ ในเดโมผมทดสอบฟีเจอร์ AI ในหน้า Gemini และพบว่าพอใส่ AI แล้ว ปุ่มส่งออกไป Google Sites กดไม่ได้ นี่เป็นผลที่พบกับแอปและบัญชีในคลิป ไม่ใช่ข้อจำกัดว่าทุกแอป AI แชร์ไม่ได้ ปัจจุบัน คู่มือ Google ระบุว่า Canvas แชร์แอปที่มี Gemini-powered features ได้ แต่ต้องตรวจเงื่อนไขบัญชีและสิทธิ์ข้อมูลก่อน

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

สรุปช่วงนี้: ในเดโมผมส่งออกเวอร์ชันที่ยังไม่ใส่ AI ไป Google Sites ก่อน แล้วค่อยเติม AI และลองใน Canvas ส่วนการแชร์แอปที่มี AI ให้เช็กตัวเลือกและเงื่อนไขที่บัญชีของคุณรองรับอีกครั้ง

เดโม 2: mini-CRM แอปติดตามลูกค้า

ตัวอย่างที่สองเอาหลักการเดียวกันมาใช้กับงานครับ สมมติว่าเราเป็นพนักงานขายแพ็กเกจองค์กรของ ABC Wellness (บริษัทสมมติ) อยากมีเครื่องมือเล็ก ๆ ไว้ติดตามลูกค้าของตัวเอง

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

แอปนี้ผมสร้างไว้ก่อนด้วยวิธีเดียวกับแอปเที่ยว เริ่มจาก Prompt หลัก แล้วค่อย ๆ สั่งแก้เพิ่มครับ

สร้างแอปบันทึกงานขายส่วนตัว (mini-CRM) ใช้ได้ทั้งมือถือและคอม
- เก็บลูกค้า: บริษัท ชื่อผู้ติดต่อ ตำแหน่ง เบอร์โทร มูลค่าดีลโดยประมาณ
- สถานะ: ลูกค้าใหม่ / คุยแล้ว / เสนอราคา / ปิดการขาย / ไม่ไปต่อ
- บันทึกการติดต่อแต่ละครั้ง (โทร เข้าพบ ส่งใบเสนอราคา) พร้อมวันที่และโน้ต
- ตั้งวันนัดติดตาม และให้หน้าแรกเป็น "วันนี้ต้องตามใคร"
- มีหน้าสรุปจำนวนลูกค้าและมูลค่าดีลในแต่ละสถานะ
- บันทึกข้อมูลไว้ใช้ต่อ ปิดแล้วเปิดใหม่ข้อมูลยังอยู่
- ใช้ภาษาไทย ฟอนต์ Sarabun โทนน้ำเงิน #2B78B5 เน้นด้วยส้ม #FF751F

ถ้าจะใช้กับงานของคุณ เปลี่ยนสถานะให้ตรงกับขั้นตอนขายของคุณ และเปลี่ยนสีเป็นสีที่ชอบหรือสีบริษัทได้เลยครับ

ต่อจากนั้นผมใส่ข้อมูลลูกค้าสมมติ 12 รายให้ลองใช้ โดยเขียนข้อมูลแต่ละรายตามรูปแบบนี้

ใส่ข้อมูลลูกค้าตัวอย่างลงในแอป แทนข้อมูลตัวอย่างเดิมทั้งหมด
- วันที่ที่เขียนแบบ "x วันก่อน" "วันนี้" "พรุ่งนี้" ให้แปลงเป็นวันที่จริง นับจากวันนี้
1. {ชื่อบริษัทสมมติ} · {ชื่อผู้ติดต่อ} · สถานะ: {สถานะ} · มูลค่าดีล {จำนวนเงิน} บาท
   - {5 วันก่อน} · {ส่งใบเสนอราคา} · {โน้ตสั้น ๆ}
   - นัดตาม: {วันนี้} ({จะตามเรื่องอะไร})
2. {รายต่อไป ใช้รูปแบบเดียวกัน}

แล้วสั่งแก้หน้าสรุปกับหน้าลูกค้าอีก 2 รอบ

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

ปรับหน้ารายละเอียดลูกค้า
- ประวัติการติดต่อแสดงเป็นไทม์ไลน์ ล่าสุดอยู่บน มีไอคอนตามประเภท (โทร เข้าพบ ส่งใบเสนอราคา)
- สถานะเป็นป้ายสี กดเปลี่ยนสถานะได้ทันที
- มีปุ่ม "เพิ่มบันทึก" ลอยมุมขวาล่าง กดแล้วกรอกได้ในหน้าเดียว
- บนมือถือให้เมนูอยู่ด้านล่างจอ 3 ปุ่ม: วันนี้ / ลูกค้า / สรุป
ส่วนอื่นโอเคแล้ว ไม่ต้องเปลี่ยน

สังเกตว่าทั้ง P3 และ P4 ปิดท้ายด้วย "ส่วนอื่นโอเคแล้ว ไม่ต้องเปลี่ยน" ประโยคนี้ช่วยกันไม่ให้ AI ไปแก้ส่วนที่เราชอบอยู่แล้วครับ

ขอย้ำนิดนึงครับ ระบบเล็ก ๆ แบบนี้ไม่ได้สร้างมาเพื่อแทนระบบหลักของบริษัท แต่ถ้าอยากได้เครื่องมือไว้ติดตามลูกค้าส่วนตัวของตัวเอง แบบนี้ก็พอใช้ได้

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

สรุปเดโม mini-CRM: หลักการเดียวกับแอปเที่ยว เริ่มจาก Prompt หลัก แล้วสั่งแก้ทีละส่วน ได้เครื่องมือติดตามลูกค้าส่วนตัวที่ตรงกับงานเรา

แม่แบบสั่งแอปของคุณเอง

พอเห็นตัวอย่างครบแล้ว ลองสร้างแอปของตัวเองดูครับ เติมส่วนที่อยู่ใน {วงเล็บปีกกา} ให้ครบ แล้วคัดลอกไปวางใน Gemini Canvas

สร้างแอป{ชื่อหรือประเภทแอป เช่น จดค่าใช้จ่ายเบิกบริษัท} สำหรับ{ใครใช้ เช่น ฉันคนเดียว} ใช้บน{มือถือ / คอม / ทั้งสองอย่าง}
เป้าหมายคือ{ช่วยเรื่องอะไร เช่น ไม่ลืมส่งเบิกปลายเดือน}
- หน้าแรกแสดง{สิ่งที่อยากเห็นเป็นอย่างแรก เช่น ยอดที่ยังไม่ได้เบิกเดือนนี้}
- ต้องทำได้: {ฟีเจอร์หลัก 2 ถึง 3 อย่าง}
- ข้อมูลที่ต้องเก็บ: {เช่น วันที่ รายการ จำนวนเงิน สถานะ}
- บันทึกข้อมูลไว้ใช้ต่อ ปิดแล้วเปิดใหม่ข้อมูลยังอยู่
- ใส่ข้อมูลตัวอย่างให้ลองใช้ได้ทันที
- ดีไซน์{สดใส / เรียบ / สีบริษัท} อ่านง่าย ใช้ภาษาไทย
สร้างเวอร์ชันแรกให้ลองใช้ก่อน แล้วบอกฉันว่ามีเรื่องไหนที่ยังไม่ชัด หรือฉันควรตัดสินใจเพิ่ม

ส่วนเวลาสั่งแก้ ใช้แม่แบบนี้ได้ทุกรอบครับ

ตอน{ทำอะไร เช่น เปิดบนมือถือ} เจอปัญหาว่า{อาการที่เจอ เช่น ปุ่มเล็กกดยาก}
ขอให้{ผลที่อยากได้ เช่น ปุ่มใหญ่ขึ้นและอยู่ด้านล่างจอ}
ส่วนอื่นโอเคแล้ว ไม่ต้องเปลี่ยน
ถ้าการแก้นี้กระทบส่วนอื่น บอกฉันก่อน

ไอเดียแอปเล็ก ๆ สำหรับคนทำงาน

สรุปช่วงนี้: ตอบให้ได้ว่าอยากได้อะไร ใครใช้ ใช้ตอนไหน แล้วเติมแม่แบบ ก็เริ่มสร้างแอปแรกของตัวเองได้เลย

ก่อนลองทำ รู้ไว้ 4 ข้อ

ทิปเล็ก ๆ ก่อนลงมือ

1. หน้าตาของ Gemini เปลี่ยนบ่อย ชื่อปุ่มในบทความนี้อ้างอิงจากหน้าจอภาษาไทย ณ เดือนพฤศจิกายน 2569 ถ้าหาปุ่มไม่เจอ ลองพิมพ์ถาม Gemini ตรง ๆ ว่า Canvas อยู่ตรงไหน
2. ผลที่ได้ไม่เหมือนกันทุกครั้ง ใช้ Prompt เดียวกับในคลิป แอปที่ได้อาจหน้าตาต่างไปบ้าง ไม่เป็นไรครับ ใช้วงจรลองใช้กับสั่งแก้ปรับให้ตรงใจได้
3. ต้องเช็กว่าข้อมูลเก็บที่ไหน บางแอปเก็บข้อมูลในเบราว์เซอร์เครื่องนั้น บางแอปเชื่อมที่เก็บข้อมูลออนไลน์ การเขียนใน Prompt ว่าบันทึกข้อมูลยังไม่พอ ต้องทดสอบว่าปิดแล้วเปิดใหม่ยังอยู่จริงไหม และกรอกในมือถือแล้วไปเปิดในคอมเห็นข้อมูลหรือไม่ ส่วนแอปที่ตั้งใจให้หลายคนใช้ร่วมกัน ให้ลองเปิดบนมือถือ 2 เครื่องก่อน ว่าข้อมูลที่อีกคนกรอกขึ้นตรงกันจริงไหม

สรุป Vibe Coding ด้วย Gemini Canvas

• Vibe Coding คือการบอก AI ให้สร้างแอป เราเป็นเจ้าของบ้าน AI เป็นช่าง ไม่ต้องเขียนโค้ดเอง
• วนอยู่ 3 จังหวะ บอก ลองใช้ สั่งแก้ เริ่มจากแกนหลัก แล้วเติมทีละเรื่อง
• บอกอาการที่เจอ กับผลที่อยากได้ ไม่ต้องรู้วิธีแก้โค้ด แล้วปิดท้ายว่า "ส่วนอื่นโอเคแล้ว ไม่ต้องเปลี่ยน"
• ในเดโม ผมส่งออกไป Google Sites ก่อนใส่ AI และตรวจตัวเลือกแชร์ที่บัญชีรองรับ
• เหมาะกับเครื่องมือเล็ก ๆ ใช้เองหรือในทีมเล็ก และต้องลองใช้ให้มั่นใจก่อนใช้จริงเสมอ

รับเอกสาร Vibe Coding 101 ฟรี

อยากใช้ Gemini ให้เป็นระบบทำงาน

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

คำถามที่พบบ่อย

แหล่งข้อมูลและข้อจำกัดของขั้นตอน

บทความและ Prompt อ้างอิงจากคลิปของ NewVeerachai ภาพประกอบเป็นภาพจำลอง ส่วนการแชร์และเมนูขึ้นกับบัญชีและรุ่น ตรวจเอกสารผู้ให้บริการประกอบก่อนใช้กับข้อมูลจริง

• Google — สร้าง แก้ และแชร์แอปด้วย Canvas
• Google Workspace — ผู้ดูแลเปิดหรือปิดการแชร์ Gemini
• Google Sites — เผยแพร่เว็บและกำหนดสิทธิ์ผู้ชม
• Apple — เพิ่มเว็บบนหน้าจอโฮม iPhone
• Google Chrome — ใช้เว็บแอปบน Android