แล้วเราจะเปลี่ยน idea นี้ เป็นแอพที่ใช้งานบน production ได้หลักนาที ได้ยังไง?
อยากทำ photo wall ให้คนในงานมาร่วมเล่นกัน คนในงานจะได้สนุก
แล้วเราจะเปลี่ยน idea นี้ เป็นแอพที่ใช้งานบน production ได้หลักนาที ได้ยังไง?
.
สรุปจาก session "Turn your ideas into real apps with Google AI Studio and Firebase" จากพี่ตี๋ Jirawat Karanwittayakarn, Google Developer Expert in Firebase
ใน session นี้ focus ในการ integrate แอพที่ได้จาก Google AI Studio เข้ากับ Firebase
.
Vibe Coding เป็นการสร้างแอพง่าย ๆ โดยการพูดก ับ AI ทำแอพอะไรให้เรา เช่น ทำแอพ tracking แคลอรี่ให้หน่อย ใช้เวลาในการทำ 5- 15 นาทีได้ prototype ออกมา และใน session นี้แนะนำ tool ที่เหมาะกับทุกคน
.
🛠️ Tool ที่ใช้ในการ vibe coding
- Google AI Studio: ใช้งานบน browser ได้ ส่ง prompt แล้วได้ของพร้อมเลย
- Google Anitigravity IDE: เหมาะกับสายเดฟ เอามาเขียนโค้ดต่อได้ มีการใช้ environment ในเครื่อง
- Google Antigravity CLI: ชื่อเดิมคือ Gemini CLI นั่นแหละ
Google AI Studio เป็น web base สามารถทำต่อเนื่องได้เลย สั่งงานบนคอม ไปข้างนอกก็สั่งงานต่อผ่านมือถือได้ เพราะอยู่บน cloud ให้ AI เสกของได้เร็ว ๆ และขึ้น production ได้เร็ว ๆ ได้เลย
🪜 3 ขั้นตอน ในการทำแอพสู่ production
1. Think: คิดว่าเราจะทำอะไร pain point อะไรที่เราอยากแก้ ใส่ 1-shot prompt ถาม Gemini ช่วยได้
2. Build: โยน prompt และ build เห็นของได้แบบ real-time แล้ว vibe ซํ้าไปเรื่อย ๆ จนกว่าจะพอใจ
3. Publish: deploy ขึ้นไปบน cloud ได้เลย
เราสามารถจะ build อะไรได้เลย เช่น ทำเว็บ 3D ด้วย Three.js เป็น interactive หรือทำพวก portfolio ก็ได้
AI feature เหมือนพิมพ์บอกเพื่อนว่าอยากได้ feature อะไร เช่น ทำรูปให้หน่อย ด้วย Gemini Nano Banana
การ vibe code ได้ front-end สวย แต่ยังไม่ full-stack มีระบบหลังบ้านให้ Firebase เข้ามา integrate ใน Google AI Studio สิ่งที่หาดูใน document ได้จะมี Firebase Authentication และ Cloud Firestore ส่วน Cloud Storage จะยังไม่ได้ list ใน document
มาดูพี่ตี๋โชว์ของจริงกันดีกว่า เราสามารถเอา source code จากใน Github ได้ด้วยโดยตรง อีกทั้งเราสามารถเอาภาพ UI มาใส่ได้ หรือนำ requirement หรือ PRD ทำให้ได้ prototype ให้ลูกค้าได้ลองเล่น
ตัวอย่าง สร้างเว็บให้ generate รูป โดยให้ sign-in with Google แล้วให้เก็บ email ลงใน database ด้วย เราสามารถบอกใน prompt ว่าให้ใช้ Firebase หรือใช้ smart feature ที่อยู่ข้างล่างได้ เลือกอัน “Add database and auth”
หรือสร้าง LINE Mini App ได้เลยโดยไม่ต้องลงโปรแกรมเพิ่ม แล้วมันเข้าใจ context ด้วย
ถึงแม้ว่ามันจะมีให้เราเลือก 5 design แต่เดฟแบบเรา ๆ ไม่ค่อยถนัดทำ design ลองใช้ Google Stitch เป็น tool ที่เอาไว้ vibe design ในที่นี้เอามาทำ photo wall มันสร้างสามารถ design system ให้เลย เอา design.md ไปใช้ได้ถ้าอยากคุมโทน แล้วเอาไปใช้ต่อที่ Google AI Studio ได้โดยเลือกหน้า UI ที่เราต้องการ กด Export แล้วเลือก AI Studio
ตอนที่อัพโหลดรูปเข้า Cloud Firestore มันจะเป็น base64 ให้มันแก้เพิ่มจาก base64 เป็น upload file บน storage มันจะแปลงโค้ดให้เราเอง และเราสามารถกด restore เพื่อย้อนกลับได้ เมื่อพอใจแล้ว กด pulish ได้เลย
ตัวอย่างที่ทุกคนลองเล่นกัน คือ photo wall ให้ทุกคนเข้าเว็บแล้วอัพโหลดรูป เป็นการดึงภาพแบบ real-time
ข่าวดี คือ สามารถ custom domain ของตัวเองได้ จะลงท้ายด้วย .ai.studio นะ
#Lemon8ฮาวทู #รวมเรื่องไอที #googleai #programmer #developer
จากประสบการณ์ตรง การพัฒนาแอพที่ใช้งานได้จริงๆ บน production ภายในหลักนาทีนั้น เป็นเรื่องที่ดูเหมือนจะยาก แต่ด้วยเครื่องมือใหม่อย่าง Google AI Studio ที่ทำงานร่วมกับ Firebase ทำให้กระบวนการนี้ง่ายและรวดเร็วมากขึ้น ผมเคยลองใช้ Google AI Studio สั่งทำแอพผ่าน prompt โดยพูดเหมือนคุยกับเพื่อนว่าต้องการอะไร เช่น ทำแอพ photo wall ที่ทุกคนในงานสามารถอัปโหลดรูปแล้วแสดงผลแบบ real-time ซึ่งต้นทางนี้ผมแค่คิดภาพในใจ และใช้เวลาไม่ถึง 15 นาที สร้าง prototype ที่ใช้งานได้จริงขึ้นมาได้เลย สิ่งที่ทำให้ผมติดใจคือการที่ Google AI Studio เป็นเว็บแอพที่รันบน cloud เราสามารถสร้างและปรับแก้แอพระหว่างเดินทางผ่านมือถือได้โดยไม่ต้อง setup สภาพแวดล้อมในเครื่องให้ยุ่งยาก ช่วยให้กระบวนการสร้างแอพรวดเร็วยิ่งขึ้น นอกจากนี้ Firebase ยังช่วยเสริมความเป็น full-stack ได้ โดยเฉพาะการทำงานร่วมกับ Authentication และ Cloud Firestore ในการเก็บข้อมูลผู้ใช้และข้อมูลรูปภาพในการ photo wall ที่สำคัญคือ Firebase Storage ช่วยจัดการการอัปโหลดภาพจริงโดยแปลงจาก base64 เป็นการจัดเก็บไฟล์อย่างเหมาะสม ประสบการณ์การใช้ Google Stitch เพื่อออกแบบ UI ก่อนส่งต่อไปยัง AI Studio ช่วยลดเวลาการทำดีไซน์ โดยเฉพาะสำหรับคนที่ไม่ถนัดสร้างหน้าจอแอพใหม่จากศูนย์ และทำให้สามารถควบคุมโทนสีและสไตล์ของแอพให้ออกมาตรงตามต้องการ สุดท้ายการที่ระบบรองรับการ deploy ขึ้น cloud ได้โดยตรง รวมถึงสามารถใช้ custom domain .ai.studio ได้ ทำให้แอพที่สร้างเสร็จดูเป็นมืออาชีพและพร้อมเปิดใช้งานจริงทันที สำหรับใครที่สนใจการสร้างแอพแบบนี้ แนะนำให้ลองเริ่มจาก Think–Build–Publish ตามขั้นตอนที่ผมได้แชร์ไป พร้อมทั้งใช้ prompt แบบ 1-shot เพื่อให้ AI เข้าใจสิ่งที่ต้องการชัดเจนที่สุด จะช่วยประหยัดเวลาพัฒนาและเปิดตัวแอพได้เร็วเหมือนผมแน่นอน