สวัสดีค่ะทุกท่าน,, เมื่อวานนิกมีโอกาสได้สอนหลักสูตร AI/ML and Generative AI Mastery ให้วิทยาลัยนวัตกรรมและการจัดการ #SSRU ซึ่งมีเนื้อหาหนึ่งที่ผู้เข้าเรียนสนใจกันมาก นั่นคือการใช้งาน “Gemini Canvas” สร้าง Interactive Dashboard ของแบบสอบถามความความพึงพอใจ แล้วนำมาแสดงเป็นผลลัพธ์โดยอัตโนมัติค่ะ
พอดี Set เนื้อหาให้เข้ากับบรรยากาศการเลือกตั้งในวันที่ 8 ก.พ. 2569 นี้ค่ะ (●’◡’●) เลยคิดว่าน่าจะเป็นประโยชน์ได้กับงานในหลายรูปแบบ ที่ต้องมีการสร้าง Webapp Website หรือ Application^^
โดยในบทความนี้นิกจะพาทุกท่านไปทำความเข้าใจ และทดลองใช้งานกันแบบเจาะลึก พร้อมตัวอย่างการใช้งานด้านอื่นๆ โดยเฉพาะในด้าน Marketing เพื่อให้เพื่อนๆ ได้ไอเดียว่า Gemini Canvas คืออะไร และเราจะใช้งานสิ่งนี้เพื่อสร้างสิ่งที่เราต้องการไม่ว่าจะเป็นเว็บไซต์ เว็บแอพ หรือหน้า UI ต่างๆ ได้อย่างไรบ้างค่ะ=>> Let’s go (☞ﾟヮﾟ)☞
#0 Gemini Canvas คืออะไร? Gemini Canvas คือแพลตฟอร์ม No-code (ซึ่งแน่นอนว่าเป็น Generative AI) ที่ฝังอยู่ใน Google Gemini ทั้ง Gemini Pro และ Gemini Flash ที่ถูกออกแบบมาเพื่อเป็น Interactive Workspace ที่เป็นเหมือนกับผืนผ้าใบ (Canvas) ให้เรากับ AI มานั่งทำงานร่วมกันบน workspace นี้
VIDEO
โดยที่ฝั่งซ้ายเราพิมพ์คำสั่ง (Prompt) และฝั่งขวา Gemini จะสร้างผลลัพธ์เป็นหน้าตา UI ของ Website/Webapp/Application ออกมาให้เห็นแบบ Realtime และเราสามารถปรับแต่งหน้า UI นั้นใหม่ได้เรื่อยๆ ตามที่เราต้องการผ่านการ Prompt ค่ะ
ซึ่งสิ่งที่เชื่อว่าหลายท่านน่าจะว้าวกันมากๆ เช่นเดียวกับผู้เข้าเรียนในคลาสก็คือ Canvas นี้ไม่ใช่แค่การสร้างรูปภาพ หรือการสร้าง Mocup เว็บไซต์เท่านั้น แต่คือการ Generate Code ที่ใช้งานได้จริงค่ะ ไม่ว่าจะเป็นหน้าเว็บไซต์, แอปพลิเคชัน, เกม หรือแม้แต่สื่อการสอน (E-learning) ค่ะ
#1 Gemini Canvas: Game Changer การสร้าง Website/Webapp/Applicationจากเดิมปกติเวลาเราจะทำโปรเจกต์ดิจิทัลอะไรสักอย่าง เรามักจะมีขั้นตอนการทำตั้งแต่สร้าง Wireframe, ออกแบบ UI, ทำ Prototype แล้วค่อยส่งให้ Dev เขียนโค้ด แต่สำหรับบน Workspace Canvas จะเสมือนว่าเรายุบขั้นตอนทั้งหมดด้วย Features ดังนี้ค่ะ:
Natural Language Editing: บน Canvas นี้เราไม่ต้องไป Debug โค้ดแต่ละบรรทัดเองเองค่ะ ซึ่งสามารถทดแทนการ Debugging ได้จาก Select and Ask คืออยากแก้จุดไหนก็คลิกที่ปุ่มหรือเมนูนั้น แล้วพิมพ์บอก Generative AI ในสิ่งที่เราต้องการแก้ไขได้เลย เช่น “เปลี่ยนสีเป็นโทนพาสเทล” หรือ “ขยายขนาดฟอนต์ให้ใหญ่ขึ้น” โดยระบบจะจัดการแก้โค้ดหลังบ้านให้ทันทีReal-time Visualization: ทุกครั้งที่เรา Prompt ให้ Gen AI ทำอะไรก็ตามเราจะเห็นการเปลี่ยนแปลงที่หน้าต่างฝั่งขวาพร้อมโค้ดประกอบแบบ Realtime ซึ่งทำให้เราสามารถ Verify งานได้ทันทีว่าต้องการปรับปรุงตรงไหนBest Practice ในตัว: สิ่งที่นิกประทับใจคือ บน Canvas workspace นี้ AI ไม่ได้แค่เขียนโค้ดให้เราบนหน้าจอที่แสดงผลอยู่ตอนนี้เท่านั้น แต่สามารถเขียนโค้ดที่เป็น Responsive (รองรับมือถือ/Laptop) และ Accessible หรือเข้าถึงได้สำหรับทุกคนมาให้แต่แรก ซึ่งขอแอบกระซิบค่ะว่าปกติงานส่วนนี้ Designer ต้องใช้พลังงานสูงมากกกกกในการตรวจสอบค่ะ
#2 การสร้าง Digital Product ด้วย Gemini Canvas แบบ Step-by-Step เมื่อเราเห็นความเทพของมันแล้ว,, ก็ได้เวลามาลองสร้างผลงานของตัวเองกันค่ะ ซึ่งทุกท่านสามารถทำตามนิกได้ง่ายๆ ดังนี้เลย
2.1 เริ่มต้นการเข้าใช้งาน ให้ทุกท่านไปที่ gemini.google.com (ปัจจุบันแพ็กเกจฟรีก็รองรับนะคะ) แล้วให้เปลี่ยนโมเดลจาก Default ที่เป็น Fast อยู่มาเป็น “Thinking ”
จากนั้นมองหาไอคอน “Tools” แล้วคลิกเลือก “Canvas” ค่ะ
2.2 Prompt ไอเดียของเรา : หลังจากเปิดอินเตอร์เฟซขึ้นมาแล้ว ให้เราพิมพ์คำอธิบายสิ่งที่เราต้องการลงในช่อง Prompt ได้เลยค่ะ เช่น:
“สร้าง Landing Page สำหรับขายคอร์สเรียนออนไลน์ มีฟอร์มลงทะเบียนและส่วนรีวิวลูกค้า โทนสีน้ำเงิน-ขาว” “ทำ Mobile App Wireframe สำหรับ Dashboard วิเคราะห์ยอดขายที่มีกราฟวงกลมและตาราง โดยใช้ข้อมูลจาก URL: “https://docs.google.com/spreadsheets/d/1MhUxtLkmvuxf358MA5CUsvlSNNDsaC8ke_Zjw4Ag1lA/edit?usp=sharing ” พร้อมให้มีปุ่มสำหรับดาวน์โหลดไฟล์ได้”
ซึ่งในระหว่างนี้ AI จะ Generate Code ออกมาให้เราค่ะโดยเราสามารถ เลือกดูได้ทั้ง Code และ Preview โดยหากเราต้องการแก้ไขหน้า UI ก็สามารถ Prompt เพิ่มเติมได้ (ตราบเท่าที่โควต้ายังไม่หมดนะคะ^^)
และหลังจากที่เราแก้ไขจนหน้า UI ได้ตามที่ต้องการเรียบร้อยแล้ว ก็สามารถกด “Share ” เพื่อส่งให้ส่วนที่เกี่ยวข้องหรือ User ได้เลยค่ะ
ซึ่งหลังจากที่กด “Share ” แล้วจะมี Popup ของ Shareable URL แสดงขึ้นมา => ก็ให้เราคลิก “Copy link ” แล้วเอา Link นี้ไปแชร์ต่อได้เลย
สำหรับ Prompt ด้านบนนิกได้ URL นี้ https://gemini.google.com/share/c0b200f8daf4
(แถมตัวอย่าง Prompt ที่นิกสอนในคลาสของ #SSRU เพื่อสร้าง Interactive Dashboard ที่มีการ Response ตามข้อมูล Input ที่ถูกเก็บเข้ามาโดยอัตโนมัติค่ะ ซึ่งได้ผลลัพธ์ตาม URL นี้ https://gemini.google.com/share/271523c58511 ) “Act as นักศึกษาวิทยาลัยนวัตกรรมและการจัดการ SSRU ที่จัดงานสัมมนาด้าน AI/ML และการใช้งาน Generative AI ผ่านช่องทาง online ช่วยฉันสร้าง Web Application ที่สามารถใช้ได้ทั้งหน้าจอ PC และหน้าจอโทรศัพท์ ที่เป็น Interative Dashboard โดยรายละเอียดของ Web Application แบบสำรวจความพึงพอใจหลังเรียน มีสิ่งที่ต้องกรอกดังนี้
ชื่อ-นามสกุล สถานะ ทำเป็นกล่องให้เลือกระหว่าง นักศึกษา หรือ บุคคลภายนอก ระดับความพึงพอใจโดยเรียงคะแนนจาก 1-5 ความรู้ก่อนอบรม ระดับ 1-5 ความรู้หลังอบรม ระดับ 1-5 พร้อมทำหน้าต่างสรุป”
2.3 ปรับแต่งและเพิ่มความซับซ้อน เมื่อ AI สร้างโครงสร้างพื้นฐานมาให้แล้ว เราสามารถเพิ่มฟังก์ชันที่ยากขึ้นได้ เช่น สั่งว่า “เพิ่มแบบทดสอบ (Quiz) 5 ข้อต่อท้ายหน้าเว็บ โดยให้มีระบบตรวจคะแนนทันทีเมื่อทำเสร็จ” AI จะคำนวณและเขียน Logic หลังบ้านให้เราเสร็จสรรพเลยค่ะ!
2.4 จัดการเวอร์ชันและดาวน์โหลด ความเจ๋งอีกอย่างคือระบบ Version Control ค่ะ ถ้าเราลองแก้ไปแก้มาแล้วรู้สึกว่า “อันเก่าสวยกว่า” เราสามารถกด Revert ย้อนกลับไปเวอร์ชันเดิมได้ทันที ไม่ต้องกลัวงานพัง (☞ﾟヮﾟ)☞
#3 ชวนคิด: เมื่อ AI ทำงานแทนเราได้ ในมุมมองของนิก แม้ Gemini Canvas จะช่วยลดงานที่ต้องใช้ Mental Muscle หรือแรงสมองในการคิดเรื่องเทคนิคจุกจิก เช่น การเช็ก State ของปุ่มหรือการเขียนโค้ดซ้ำๆ แต่สิ่งที่คนทำงานห้ามทิ้งเด็ดขาดคือ Critical Thinking ค่ะ
เราต้องใช้ AI ในฐานะ Co-Pilot หรือผู้ช่วยของเราเท่านั้น แต่คนที่เป็นกัปตันตัดสินใจทิศทางสุดท้ายยังต้องเป็นเราอยู่เสมอ ซึ่ง AI อาจจะสร้าง UI ที่สวยงามและโค้ดที่ถูกต้องมาให้ แต่การปรับแต่งให้ตรงกับ Brand Identity และ Mood&Tone ของ User ยังคงเป็นพื้นที่ที่มนุษย์เราทำได้ดีที่สุด และนิกยังคิดว่าทักษะการ Coding ก็ยังคงจำเป็นสำหรับงานทุกงานเช่นเดิมค่ะ
Last but not least,,
Gemini Canvas คือเครื่องมือที่จะช่วยให้คนที่มี “ไอเดีย” แต่ไม่มี “ทักษะเขียนโค้ด” สามารถมีผลิตภัณฑ์เป็นของตัวเองได้ในเวลาไม่กี่นาทีค่ะ ใครที่กำลังอยากทำ Portfolio สวยๆ หรือสร้างเครื่องมือการสอนแบบโต้ตอบ (Interactive E-learning) นิกแนะนำให้ลองไปเล่นตัวนี้ดูด่วนๆ เลยนะคะ!
หวังว่าบทความนี้จะช่วยเปิดโลกใหม่ให้ทุกท่านเห็นภาพการทำงานยุค AI มากขึ้นนะคะ,, ใครลองใช้แล้วได้ผลลัพธ์เป็นยังไง หรือติดตรงไหน มาคอมเมนต์แชร์ประสบการณ์กันได้เลยค่ะ 😉😊
ป.ล. บทความที่เกี่ยวข้อง => Vibe Coding คืออะไร? แนวคิดการเขียนโค้ดยุค AI ที่ควรรู้ในปี 2026 (ปณยา สุดตา, 2026)
