สร้างเว็บแอปด้วย Gemini: จากไอเดียสู่การใช้งานจริงบน Google Sheets😃 โดยจารย์งอก TechEd

😃คำถามที่มีถามกันมาเยอะ!!!!

เราสามารถใช้ Gemini เป็นเครื่องมือหลักในการสร้างเว็บเพจ (Web Page) ที่ให้ผู้ใช้กรอกข้อมูล แล้วสั่งให้บันทึกข้อมูลนั้นลงใน Google Sheets โดยตรง พร้อมส่งอีเมลแจ้งเตือนได้หรือไม่?

ตอบได้เลยว่าทำได้เพราะผมได้ไปลองมาแล้ว ก็เลยมาแชณ์ให้ทุกคนได้ลองทำตามครับ 👏👏 มีวิธีการยังไงไปดูกัน

ขั้นตอนการดำเนินการ (Workflow):

1. เปิด Gemini: เริ่มต้นที่หน้าต่างสนทนาของ Gemini ในที่นี้เลือก"Canvas" ด้วย
2.ป้อนคำสั่ง (Prompt): ใส่คำสั่งที่ชัดเจนและครอบคลุมทุกความต้องการลงไปใน Gemini ตัวอย่างเช่น:"ช่วยสร้างเว็บแอปพลิเคชันสำหรับบันทึกการลางานของพนักงานบริษัท ประกอบด้วย:

Backend: เขียนโค้ด Google Apps Script ที่เมื่อถูกเรียกใช้ จะทำหน้าที่บันทึกข้อมูล (เช่น ชื่อพนักงาน, วันที่ลา, เหตุผล) ลงใน Google Sheets ไฟล์นี้: [ใส่ URL ของ Google Sheets]
การแจ้งเตือน: หลังจากบันทึกข้อมูลสำเร็จ ให้สคริปต์ส่งอีเมลแจ้งเตือนไปที่ผู้บริหาร ([ระบุอีเมลผู้บริหาร]) และส่งสำเนาหาพนักงานที่กรอกฟอร์ม (ดึงอีเมลจากข้อมูลที่กรอก)
Frontend: เขียนโค้ด HTML, CSS, และ JavaScript สำหรับสร้างหน้าเว็บฟอร์ม (UI) ที่สวยงามและใช้งานง่าย สำหรับรับข้อมูลจากผู้ใช้ และส่งข้อมูลไปยัง Google Apps Script ที่สร้างไว้
คำแนะนำ: ช่วยอธิบายขั้นตอนการนำโค้ดทั้งหมดไปติดตั้งและใช้งานจริงอย่างละเอียด"

3.ผลลัพธ์ที่ได้รับจาก Gemini: Gemini จะประมวลผลและสร้างผลลัพธ์ออกมาเป็นส่วนๆ ได้แก่:

โค้ด Google Apps Script (Code.gs) สำหรับจัดการข้อมูลฝั่งเซิร์ฟเวอร์
โค้ด HTML (index.html) สำหรับโครงสร้างหน้าเว็บฟอร์ม
(อาจมี) โค้ด CSS และ JavaScript แยกไฟล์สำหรับตกแต่งและจัดการการทำงานฝั่งผู้ใช้
ขั้นตอนการติดตั้งและใช้งาน ที่อธิบายอย่างเป็นลำดับ

4.การนำไปติดตั้งใช้งาน: ทำตามขั้นตอนที่ Gemini แนะนำ ซึ่งโดยหลักจะมี 3 ขั้นตอนดังนี้:ขั้นตอนที่ 1: ตั้งค่า Backend (Google Apps Script

เข้าไปที่ Google Sheets ที่ต้องการ แล้วเปิดส่วนขยาย (Extensions) > Apps Script

นำโค้ด Code.gs ที่ได้จาก Gemini ไปวางแทนที่โค้ดเดิม
ทำการ Deploy โปรเจกต์ให้เป็น "Web App" ตั้งค่าสิทธิ์การเข้าถึงให้เหมาะสม และคัดลอก URL ของ Web App ที่ได้มาเก็บไว้

ขั้นตอนที่ 2: ตั้งค่า Frontend (หน้าเว็บฟอร์ม)
นำโค้ด HTML (และ CSS/JS ถ้ามี) ไปวางในเครื่องมือสำหรับสร้างเว็บไซต์ เช่น ใช้ฟีเจอร์ฝังโค้ด (Embed code) ใน Google Sites, หรืออัปโหลดไฟล์ขึ้นเว็บโฮสติ้งของคุณ
จุดสำคัญ: แก้ไขโค้ด JavaScript ในส่วน Frontend เล็กน้อย โดยนำ URL ของ Web App ที่คัดลอกมาจากขั้นตอนที่ 1 ไปใส่ให้ถูกต้อง เพื่อให้ฟอร์มรู้ว่าจะต้องส่งข้อมูลไปที่ไหน

ขั้นตอนที่ 3: ทดสอบระบบ
เปิดหน้าเว็บที่สร้างเสร็จแล้ว ลองกรอกข้อมูลการลาและกดส่ง
ตรวจสอบผลลัพธ์: