จาก Prompt สู่เว็บไซต์จริง:
Google AI Studio + Firebase + Vercel

ปัจจุบันการสร้างเว็บไซต์หรือ Web Application ไม่จำเป็นต้องเริ่มจากการเปิด Code Editor แล้วเขียนโค้ดทุกบรรทัดด้วยตัวเองเสมอไป เพราะเครื่องมืออย่าง Google AI Studio สามารถเปลี่ยน Requirement ที่เราอธิบายด้วยภาษาธรรมดา ให้กลายเป็น Application ที่สามารถทดลองใช้งานได้

จุดที่น่าสนใจคือ AI Studio ไม่ได้จำกัดอยู่เพียงการสร้างหน้าเว็บไซต์ หรือ Prototype สำหรับดูตัวอย่างเท่านั้น แต่สามารถนำมาใช้สร้าง Web Application ที่มี Logic และเชื่อมต่อกับบริการ Backend อย่าง Firebase ได้

เมื่อ Application พร้อมแล้ว เรายังสามารถนำ Source Code ออกจาก AI Studio เป็นไฟล์ ZIP และนำไป Deploy ต่อด้วย Vercel เพื่อให้เว็บไซต์สามารถเปิดใช้งาน ผ่าน URL บนอินเทอร์เน็ตได้จริง

Google AI Studio ใช้สร้างเว็บได้อย่างไร

หลายคนอาจรู้จัก Google AI Studio ในฐานะพื้นที่สำหรับทดลอง Gemini หรือใช้เขียน Prompt แต่เมื่อนำมาใช้ในงานพัฒนา Application เราสามารถอธิบายสิ่งที่ต้องการสร้าง แล้วให้ AI ช่วยสร้างโครงสร้างของ Application ให้ได้

สิ่งสำคัญคือเราไม่จำเป็นต้องเขียน Prompt ขนาดใหญ่ และพยายามคิดทุก Requirement ให้ครบตั้งแต่ครั้งแรก เพราะหลังจาก AI สร้าง Application แล้ว เรายังสามารถดู Preview ทดลองใช้งาน และสั่งให้ AI แก้ไขหรือเพิ่ม Feature ต่อไปได้

ก่อนสร้างเว็บ มาทำความเข้าใจโครงสร้าง Web Application

แม้ AI จะช่วยสร้างระบบให้เราได้มากขึ้น แต่การเข้าใจองค์ประกอบพื้นฐานของ Web Application จะช่วยให้เราเขียน Prompt ได้ชัดเจนขึ้น รวมถึงตรวจสอบได้ว่า Application ที่ AI สร้างขึ้น ทำงานตรงตามที่ต้องการหรือไม่

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

Firebase คืออะไร

Firebase คือแพลตฟอร์มสำหรับพัฒนา Application ของ Google ซึ่งมีบริการหลายส่วนที่ช่วยลดความซับซ้อน ของการสร้างระบบ Backend

ตัวอย่างเช่น หากกำลังสร้าง E-commerce เราอาจต้องมีข้อมูลหลายประเภทที่ไม่ได้ต้องการให้หายไป เมื่อผู้ใช้ Refresh หน้าเว็บไซต์

เมื่อผู้ใช้ Login ระบบ Authentication จะช่วยให้ Application ทราบว่าผู้ใช้คนใดกำลังใช้งานอยู่ ขณะที่ Database ทำหน้าที่เก็บข้อมูลที่ Application ต้องนำกลับมาใช้งานภายหลัง

Google AI Studio ช่วยเชื่อม Firebase ได้อย่างไร

จุดที่ทำให้ Workflow นี้น่าสนใจคือ เราไม่จำเป็นต้องสร้างหน้าเว็บไซต์ให้เสร็จก่อน แล้วจึงค่อยเริ่มคิดเรื่อง Database

เราสามารถใส่ Requirement ของระบบหลังบ้าน ไปตั้งแต่ Prompt แรกได้เลย เช่น บอกว่าเว็บไซต์ต้องมี Feature อะไร ข้อมูลอะไรต้องถูกบันทึก และต้องการให้ระบบเชื่อมกับ Firebase

AI จึงสามารถช่วยสร้างหน้าเว็บไซต์ Logic และ Code ที่เกี่ยวข้องกับการเชื่อมระบบ ให้เป็นส่วนหนึ่งของ Application ตั้งแต่ต้นได้

เริ่มสร้าง Web Application ด้วย Google AI Studio

สมมติว่าเราต้องการสร้างเว็บไซต์ E-commerce สำหรับแบรนด์เครื่องสำอางชื่อ 360 Cosmetics

แทนที่จะเริ่มจากการขอให้ AI สร้างเพียงหน้า Home เราสามารถอธิบายภาพรวมของ Application รวมถึง Requirement ฝั่งระบบหลังบ้านตั้งแต่ Prompt แรกได้

Prompt นี้ไม่ได้สั่งเพียงให้ AI “สร้างหน้าเว็บไซต์” แต่กำหนด Requirement ของระบบในภาพรวม ตั้งแต่ User Interface ไปจนถึงระบบหลังบ้าน

หลังจากส่ง Prompt แล้ว เราสามารถดู Preview และทดลอง Feature ต่าง ๆ จากนั้นจึงค่อยปรับรายละเอียดเพิ่มเติม

ตัวอย่าง Prompt สำหรับปรับเว็บต่อ

ตรวจสอบ Firebase และระบบหลังบ้าน

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

ก่อน Deploy ควรตรวจอะไรบ้าง

เมื่อเว็บไซต์และ Firebase เริ่มทำงานแล้ว ไม่ควรดูเฉพาะว่า Preview แสดงผลได้ แต่ควรตรวจองค์ประกอบที่มีผลต่อการใช้งานจริงด้วย

• Responsive บน Desktop, Tablet และ Mobile
• ระบบ Login และ Logout
• การเพิ่ม แก้ไข และลบข้อมูล
• การอ่านข้อมูลจาก Firestore
• สิทธิ์ระหว่าง User และ Admin
• Firebase Security Rules
• Error Handling ของ Feature สำคัญ
• API Key และ Secret
• Link และ Button ต่าง ๆ
• การ Refresh และเปิดหน้าเว็บไซต์ใหม่

Download Source Code จาก Google AI Studio

เมื่อสร้างและทดสอบ Application จนพร้อมแล้ว เราสามารถนำ Source Code ออกจาก AI Studio เพื่อนำไปใช้งานบน Hosting ภายนอกได้

1

เปิดหน้า Preview ของ Project

ตรวจสอบให้เรียบร้อยว่าเป็น Project และเวอร์ชันที่ต้องการนำไป Deploy

2

เลือกส่วน Code

เลือกตัวเลือกสำหรับนำ Source Code ของ Project ออกจาก AI Studio

3

Export และ Download เป็น ZIP

ดาวน์โหลด Project ออกมาเป็นไฟล์ ZIP เพื่อเตรียมนำไปใช้กับ Hosting ภายนอก

ภายใน ZIP จะเป็นไฟล์ของ Project เช่น Source Code, Configuration และไฟล์ที่เกี่ยวข้องกับ Dependencies ตามโครงสร้างของ Application

Deploy ZIP ขึ้น Vercel

หลังจากได้ Source Code เป็น ZIP แล้ว ขั้นตอนต่อไปคือการนำ Application ไป Deploy เพื่อให้ผู้ใช้อื่นสามารถเปิดเว็บไซต์ผ่านอินเทอร์เน็ตได้

สำหรับ Workflow นี้เราจะใช้ Vercel เป็น Platform สำหรับ Build และ Deploy Application โดยไม่จำเป็นต้องใช้ GitHub เป็นตัวกลางในขั้นตอนเริ่มต้น

1

เข้า Vercel

Login เข้า Account ที่ต้องการใช้สำหรับ Deploy Project

2

สร้าง Project ใหม่

เลือก Add New Project เพื่อเริ่มนำ Application ขึ้น Hosting

3

เลือกหรือลากไฟล์ ZIP

นำ ZIP ที่ Export จาก Google AI Studio เข้าไปใน Vercel โดยไม่จำเป็นต้องแตกไฟล์ก่อน

4

ตั้งชื่อและตรวจ Configuration

ตรวจ Project Name, Framework, Environment Variables และค่าที่เกี่ยวข้อง

5

Deploy

Vercel จะนำ Source Code ไป Build และสร้าง Deployment สำหรับ Application

หลัง Deployment สำเร็จ เราจะได้ Public URL สำหรับเปิดเว็บไซต์ เช่น 360-cosmetics.vercel.app

Firebase อยู่ที่ไหนหลัง Deploy ขึ้น Vercel

จุดหนึ่งที่คนเริ่มต้นอาจสับสนคือ เมื่อ Download Source Code จาก AI Studio แล้วนำ Application ไป Deploy บน Vercel Firebase จะถูกย้ายไปอยู่บน Vercel ด้วยหรือไม่

คำตอบคือ ไม่ เพราะ Firebase และ Vercel ทำหน้าที่คนละส่วนกัน

นี่คือรูปแบบที่พบได้บ่อยใน Modern Web Application ซึ่งแต่ละ Service ไม่จำเป็นต้องอยู่บน Platform เดียวกัน แต่สามารถทำงานร่วมกันผ่าน Application ได้

ถ้ากลับไปแก้เว็บภายหลัง ต้องทำอย่างไร

เนื่องจาก Workflow นี้ไม่ได้ใช้ GitHub การอัปเดตเว็บไซต์จะเป็นแบบ Export และ Deploy เวอร์ชันใหม่อีกครั้ง

ตัวอย่างเช่น หากต้องการเพิ่มระบบ Coupon สามารถกลับไปที่ Google AI Studio แล้ว Prompt ว่า

หลังจาก AI แก้ไข Application แล้ว ให้ทดสอบ Feature ใหม่ใน Preview จากนั้น Download Source Code เป็น ZIP เวอร์ชันใหม่ และนำไป Deploy บน Vercel อีกครั้ง

สำหรับ Project เล็ก การทดลอง หรือเว็บไซต์ที่ไม่ได้อัปเดตบ่อย Workflow แบบ ZIP จะค่อนข้างตรงไปตรงมา แต่ถ้า Project เริ่มมีการแก้ไขหลายเวอร์ชัน มี Developer หลายคน หรือ Deploy บ่อย จึงค่อยพิจารณาใช้ Version Control อย่าง Git ในขั้นตอนต่อไปก็ได้

แล้วทำไมไม่ Deploy จาก Google AI Studio โดยตรง

Vercel ไม่ใช่เส้นทางเดียวสำหรับนำ Application ขึ้นใช้งาน เพราะ Google AI Studio ก็สามารถทำงานร่วมกับบริการใน Google Ecosystem ได้

ดังนั้นการเลือก Workflow ควรขึ้นอยู่กับลักษณะของ Project และบริการที่เราต้องการใช้

แนวทางที่ 1: Google Ecosystem

เหมาะกับ Project ที่ต้องการใช้บริการของ Google เป็นหลักและต้องการให้องค์ประกอบของระบบ อยู่ใน Ecosystem เดียวกัน

แนวทางที่ 2: Export แล้วใช้ Vercel

เหมาะกับคนที่ต้องการนำ Source Code ออกจาก AI Studio และใช้ Vercel เป็น Platform สำหรับ Deploy โดยไม่จำเป็นต้องเริ่มจากการ Setup GitHub หรือ CLI

สรุปหน้าที่ของแต่ละเครื่องมือ

จาก No-code สู่ AI-assisted Development

สิ่งที่น่าสนใจของ Workflow นี้ ไม่ใช่เพียงการที่ AI สามารถ “สร้างเว็บไซต์ให้เรา” แต่คือขั้นตอนที่เดิมต้องใช้ความรู้หลายส่วน เริ่มสามารถควบคุมผ่านภาษาธรรมชาติได้มากขึ้น

จากเดิม Developer อาจต้องเริ่มจากการสร้าง Project, เขียน Frontend, Setup Database, ตั้ง Authentication, เขียน CRUD, เชื่อม Backend และเตรียมระบบ Hosting ทีละขั้นตอน

วันนี้เราสามารถเริ่มจาก Requirement ของทั้งระบบ เช่น

แล้วให้ AI ช่วยสร้างโครงสร้างและ Code เบื้องต้น ก่อนที่เราจะตรวจสอบ ทดสอบ และนำ Application ไป Deploy

อย่างไรก็ตาม การที่ AI เขียน Code ได้ ไม่ได้หมายความว่าความรู้เรื่อง Web Development ไม่มีความสำคัญอีกต่อไป

ตรงกันข้าม ยิ่ง AI สามารถสร้างระบบได้มาก การเข้าใจว่า Frontend, Backend, Database, Authentication, Security, API และ Deployment ทำงานอย่างไร จะยิ่งช่วยให้เราควบคุม และตรวจสอบ Application ได้ดีขึ้น

เมื่อใช้ Google AI Studio + Firebase + Vercel ร่วมกัน เราสามารถเริ่มจาก Prompt แรก ไปจนถึง Web Application ที่มีทั้งหน้าเว็บไซต์ ระบบสมาชิก ฐานข้อมูล ระบบหลังบ้าน และ URL สำหรับเปิดใช้งานจริงได้ โดยไม่จำเป็นต้องเริ่มต้นจากการเขียน Code ทุกอย่างด้วยตัวเอง