สร้าง Web App (LIFF) ส่งข้อความอวยพรปีใหม่ใน LINE ด้วย GEMINI

สวัสดีปีใหม่! สร้าง LIFF App อวยพรสุดล้ำ ด้วย GEMINI AI 🎁

สวัสดีปีใหม่ครับทุกคน! 🎉 เทศกาลแห่งความสุขแบบนี้ ใครๆ ก็อยากส่งความปรารถนาดีให้แก่กัน แต่จะส่งแค่ข้อความธรรมดาๆ ก็คงจะน่าเบื่อไปหน่อย ปีที่แล้ว ผมเลยลอง สร้าง Web App เพื่อส่งข้อความอวยพรปีใหม่แบบ Flex Message ใน LINE ให้เพื่อนๆ ปรากฏว่าได้รับเสียงตอบรับดีมาก! หลายคนประทับใจในลูกเล่นและความแปลกใหม่ จนอยากให้ผมช่วย Custom Flex Message ให้บ้าง

ปีนี้ผมเลยเกิดไอเดีย อยากพัฒนา Web App ส่งคำอวยพรปีใหม่ใน LINE ให้ทุกคนได้ใช้กัน แถมคราวนี้จะพิเศษกว่าเดิม เพราะผมจะใช้ GEMINI AI เป็นผู้ช่วยเขียนโค้ดทั้งหมด!

หลายคนอาจจะสงสัยว่า GEMINI มันเจ๋งแค่ไหน? บอกเลยว่า GEMINI คือ AI สุดล้ำจาก Google ที่ช่วยให้การ สร้าง Web App เป็นเรื่องง่าย แม้ไม่มีพื้นฐานการเขียนโค้ดก็ทำได้! เหมือนมีผู้ช่วยส่วนตัวคอยเขียนโค้ดให้ สบายสุดๆ

ผมเลยอยากแชร์ประสบการณ์การ สร้าง Web App ด้วย GEMINI แบบ 100% ให้นักการตลาดทุกคนได้ลองทำตามกัน รับรองว่าง่าย ประหยัดเวลา และสนุก แน่นอน 😉

สำหรับให้ใครที่อยากลองใช้ LIFF App ที่ GEMINI ช่วยเขียนโค้ด สามารถลองเข้าไปเล่นได้ที่ลิงก์นี้นะ https://liff.line.me/2006674119-0JVBpKzJ

สร้าง LIFF App ง่ายๆ ใครๆ ก็ทำได้ !

เคยคิดไหมว่า อยากสร้างแอปพลิเคชันเจ๋งๆ บน LINE ไว้ใช้เอง หรือเอาไว้โปรโมทธุรกิจ แต่ติดตรงที่ไม่รู้เรื่องเขียนโค้ดเลย ไม่ต้องกังวลไป! เพราะ GEMINI AI จะมาช่วยให้การสร้าง LIFF App เป็นเรื่องง่าย เหมือนปลอกกล้วยเข้าปาก ผมจะพาคุณไปดูขั้นตอนการสร้าง LIFF App ด้วย GEMINI แบบละเอียด รับรองว่าง่าย จนคุณเองก็ต้องทึ่ง!

1. กำหนดวัตถุประสงค์ของ Web App

เปรียบเสมือนการวางแผนสร้างบ้าน ก่อนลงมือ เราต้องรู้ก่อนว่าอยากได้บ้านแบบไหน? มีกี่ห้อง? มีฟังก์ชันอะไรบ้าง? เช่นเดียวกับการ สร้าง Web App เราต้องกำหนดเป้าหมายให้ชัดเจนก่อนว่า เราต้องการ สร้าง Web App นี้ขึ้นมาเพื่ออะไร? ในเคสนี้ ผมต้องการ สร้าง Web App สำหรับส่งคำอวยพรปีใหม่ให้เพื่อนๆ ใน LINE โดยมีฟีเจอร์หลักๆ ดังนี้

พิมพ์ชื่อผู้รับ และ คำอวยพร: เหมือนกับการเขียนการ์ดอวยพร แต่เราจะพิมพ์ผ่าน Web App แทน

เลือกรูปแบบ Template ของการ์ดอวยพรได้: เพิ่มความพิเศษ ด้วยการเลือกรูปแบบการ์ดอวยพรที่หลากหลาย

ส่งคำอวยพรในรูปแบบ Flex Message ผ่าน LINE: Flex Message จะช่วยให้การ์ดอวยพรของเราดูสวยงาม น่าสนใจ และโดดเด่นกว่าข้อความธรรมดา

2. ร่าง Mockup

หลังจากกำหนดวัตถุประสงค์แล้ว ก็เหมือนกับเรามีแบบแปลนบ้านในมือ ขั้นตอนนี้เราจะมา “ร่าง Mockup” ซึ่งเปรียบเสมือนการ “วาดภาพร่าง” ของบ้าน เราจะออกแบบหน้าตา และ องค์ประกอบต่างๆ ของ Web App แบบคร่าว ๆ ว่าอยากให้มีปุ่มอะไรบ้าง? อยากให้มีช่องกรอกข้อมูลตรงไหน? อยากให้รูปภาพ ข้อความ แสดงผลอย่างไร? ไม่จำเป็นต้องสวยงาม หรือ สมบูรณ์แบบ แค่ให้เห็นภาพรวม ก็พอ

วิธีการร่าง Mockup

แบบง่ายๆ: วาดลงบนกระดาษ iPad หรือ Keynote ก็ได้

แบบเป็นทางการ: ใช้เครื่องมือออกแบบ เช่น Figma ก็ได้

ในเคสนี้ ผมวาดง่ายโดยใช้ Keynote ในการออกแบบหน้าตา Web App คร่าวๆ โดยแบ่งเป็น 3 ส่วนหลักๆ ดังนี้

ส่วนหัว: แสดงข้อความ “New Year Greeting Card”

ส่วนกรอกข้อมูล: มีช่องให้กรอก “ชื่อผู้รับ” และ “คำอวยพร”

ส่วนแสดง ปุ่ม: มีปุ่ม “ส่ง” การ์ดอวยพร

นอกจากนี้ ผมยังได้ Mock up Flex Message ขึ้นมาด้วย เพื่อกำหนดหน้าตาของการ์ดอวยพรที่จะส่งไปใน LINE ให้ดูสวยงาม น่าสนใจ และสื่อถึงเทศกาลปีใหม่ 🎉

3. กำหนด Process Flow

เมื่อเรามีภาพร่างของบ้านแล้ว ขั้นตอนนี้เราจะมา “กำหนด Process Flow” ซึ่งเปรียบเสมือนการ “เดินสายไฟ” ภายในบ้าน เราจะกำหนดขั้นตอนการทำงานของระบบ ว่าเมื่อผู้ใช้กดปุ่มนี้ จะเกิดอะไรขึ้น? เมื่อกรอกข้อมูลตรงนี้ ระบบจะประมวลผลอย่างไร? เปรียบเหมือนการเขียนแผนผัง เพื่อให้ระบบทำงานได้อย่างราบรื่น ไม่มีสะดุด

ในเคสนี้ ผมกำหนด Flow การทำงานของระบบ ดังนี้

เริ่มต้นการทำงาน: เมื่อเปิด Web App ขึ้นมา LIFF SDK จะเริ่มทำงานทันที
ตรวจสอบสถานะการ Login:
- ถ้าผู้ใช้ Login LINE อยู่แล้ว: ระบบจะดึงข้อมูล Profile ของผู้ใช้ด้วย liff.getProfile()
- ถ้าผู้ใช้ยังไม่ได้ Login: ระบบจะแสดงปุ่มให้ผู้ใช้กด Login ผ่าน liff.login()

รับข้อมูล: เมื่อผู้ใช้กรอกข้อมูลในช่อง “หัวข้อคำอวยพร”, “คำอธิบายคำอวยพร” และเลือกรูปภาพ ระบบจะนำข้อมูลเหล่านั้นมาเก็บไว้ในตัวแปร

สร้าง Flex Message: เมื่อผู้ใช้กดปุ่ม “ส่งข้อความ” ระบบจะนำข้อมูลจากตัวแปรในขั้นตอนที่ 2 ไปใส่ในโค้ด Flex Message

ส่งข้อความ: ระบบจะส่ง Flex Message ที่สร้างขึ้นไปยัง LINE Chat ของผู้รับที่ผู้ใช้เลือก ผ่านฟังก์ชัน liff.shareTargetPicker()

4. สร้าง HTML Code

มาถึงขั้นตอนสำคัญ คือการ “สร้าง HTML Code” ซึ่งเปรียบเสมือนการ “ก่อสร้างโครงสร้างบ้าน”

แต่ไม่ต้องกังวล! เราไม่ต้องลงมือสร้างเอง เพราะเรามี GEMINI เป็นผู้ช่วยในการเขียนโค้ด

วิธีการใช้ GEMINI สร้าง HTML Code

เข้าไปที่ Google Gemini (https://gemini.google.com/) (เหมือนกับการไปที่ร้านขายวัสดุก่อสร้าง)

สร้าง Chat ใหม่ (เหมือนกับการเปิดใบสั่งซื้อวัสดุ)

เลือก Model เป็น Gemini Pro (เหมือนกับการเลือกช่างก่อสร้างมืออาชีพ)

พิมพ์ Prompt เพื่อสั่งให้ GEMINI สร้าง HTML Code (เหมือนกับการบอกแบบแปลนบ้านให้ช่าง)

ขั้นตอนที่ 1: บอก GEMINI ว่าเราต้องการทำอะไร

ก่อนอื่น เราต้องอธิบายให้ GEMINI เข้าใจก่อนว่า เราต้องการ สร้าง Web App แบบไหน มีฟังก์ชันอะไรบ้าง ซึ่งเปรียบเสมือนการบอก “ความต้องการของลูกค้า” ให้กับสถาปนิก

ยิ่งเราอธิบายได้ละเอียด และ ชัดเจนเท่าไหร่ GEMINI ก็จะยิ่งสร้างโค้ดได้ตรงใจเรามากขึ้นเท่านั้น

ตัวอย่าง

ฉันต้องการ สร้าง Web App สำหรับส่งคำอวยพรปีใหม่ใน LINE

โดยมีฟังก์ชันดังนี้

– ผู้ใช้สามารถพิมพ์ชื่อผู้รับ และ คำอวยพร

– ผู้ใช้สามารถเลือกรูปแบบ Template ของการ์ดอวยพรได้ 4 แบบ

– ผู้ใช้สามารถใส่ URL รูปภาพของตัวเองได้

– เมื่อผู้ใช้กดปุ่ม “ส่ง” Web App จะส่งคำอวยพรในรูปแบบ Flex Message ไปยัง LINE Chat ของผู้รับ

ขั้นตอนที่ 2: กำหนดขั้นตอนในการเขียนโค้ด

หลังจาก GEMINI เข้าใจ “ความต้องการ” ของเราแล้ว เราจะมา “กำหนดขั้นตอนการเขียนโค้ด” เพื่อให้ GEMINI ทำงานได้อย่างเป็นระบบ เปรียบเสมือนการ “แบ่งงานเป็นส่วนๆ” ให้กับทีมช่างก่อสร้าง เพื่อให้การทำงานเป็นไปอย่างราบรื่น และ มีประสิทธิภาพ

ในเคสนี้ เราจะแบ่งขั้นตอนการเขียนโค้ดออกเป็น 4 ส่วน ดังนี้

ติดตั้ง LIFF SDK บน HTML + เช็ค Login

ทำ Input สำหรับ หัวข้อคำอวยพร และคำอวยพรแบบ Free Text ทำ Input สำหรับเลือกรูปภาพ เลือกได้ 1 จาก 4 ภาพ หรือ ใส่ URL Pic มาได้

สร้าง Function นำค่า Text และ URL จากขั้น 2 – 3 มาปรับแต่งใน Code Flex Message

ทำระบบส่งข้อความ Flex Message ด้วย liff.shareTargetPicker()

ขั้นตอนที่ 3: เขียนโค้ดขั้นตอนที่ 1 (ติดตั้ง LIFF SDK + เช็ค Login)

เราจะเริ่มเขียนโค้ดในส่วนแรก คือ “ติดตั้ง LIFF SDK + เช็ค Login” LIFF SDK เปรียบเสมือน “สะพานเชื่อม” ระหว่าง Web App ของเรา กับ LINE ส่วนการเช็ค Login ก็เพื่อให้แน่ใจว่า ผู้ใช้ได้ Login LINE ก่อนใช้งาน Web App ของเรา

เวลานำโค้ดไปใช้จริง อย่าลืมเปลี่ยน LIFF ID กันด้วยนะ

โดยคุณสามารถเข้าไปที่ LINE Developers Console เพื่อดู LIFF ID สำหรับนำมาใช้งานได้

ใน LINE Developers Console ให้ไปที่ ‘LIFF’ > เลือก LIFF App ที่ต้องการ > ดู LIFF ID

ขั้นตอนที่ 4: สร้าง Input สำหรับ หัวข้อคำอวยพร และคำอวยพร และรูปภาพ

ต่อเนื่องจากขั้นตอนที่แล้ว ที่เราติดตั้ง LIFF SDK และ เช็ค Login เรียบร้อยแล้ว ในขั้นตอนนี้ เราจะมาสร้าง “Input” ต่างๆ สำหรับรับข้อมูลจากผู้ใช้ เปรียบเสมือนการ “สร้างประตู หน้าต่าง” ให้กับบ้าน เพื่อให้ผู้ใช้งานสามารถเข้าออก และ มองเห็นวิวทิวทัศน์ภายนอกได้

Input ที่เราจะสร้างในขั้นตอนนี้ มี 3 ส่วนหลักๆ ดังนี้

หัวข้อคำอวยพร: เป็นช่อง Input แบบ Text ให้ผู้ใช้พิมพ์หัวข้อ หรือ ชื่อเรื่อง ของคำอวยพร

คำอวยพรแบบ Free Text: เป็นช่อง Input แบบ Textarea ให้ผู้ใช้พิมพ์คำอวยพรได้อย่างอิสระ

เลือกรูปภาพ: มี 2 ตัวเลือก คือ
- เลือกรูปภาพจาก Template ที่มีให้ 4 แบบ
- ใส่ URL รูปภาพของตัวเอง

ขั้นตอนที่ 5: สร้าง Flex Message และปรับแต่งคำอวยพรตาม Input ลูกค้า

หลังจากที่เราสร้าง Input สำหรับรับข้อมูลจากผู้ใช้ในขั้นตอนที่ 2 เรียบร้อยแล้ว ในขั้นตอนนี้ เราจะมาสร้าง Function สำหรับนำค่า Text และ URL ที่ผู้ใช้กรอก มาปรับแต่งใน Code Flex Message เปรียบเสมือนการ “ติดตั้งระบบประปา” ภายในบ้าน เพื่อนำน้ำจากแหล่งน้ำมาใช้ประโยชน์ภายในบ้าน ในที่นี้คือการนำข้อมูลที่ผู้ใช้กรอกมาสร้างเป็น Flex Message นั่นเอง

Function ที่เราจะสร้างในขั้นตอนนี้ มีหน้าที่ดังนี้

รับค่า Text จาก Input “หัวข้อคำอวยพร” และ “คำอวยพร”

รับค่า URL รูปภาพ จาก Input “เลือกรูปภาพ” หรือ “URL รูปภาพ”

นำค่า Text และ URL ที่ได้ มาประกอบเข้ากับ Code Flex Message

ขั้นตอนที่ 6: ทำฟังก์ชั่น Share Target Picker

มาถึงขั้นตอนสุดท้ายของการสร้าง HTML Code กันแล้ว! ในขั้นตอนนี้ เราจะมาสร้างระบบส่งข้อความ Flex Message ด้วย liff.shareTargetPicker() ซึ่งเป็นฟังก์ชันของ LIFF SDK ที่ช่วยให้เราสามารถแชร์ข้อความไปยังเพื่อน หรือ กลุ่ม ใน LINE ได้ เปรียบเสมือนการ “สร้างถนน” เชื่อมต่อบ้านของเรา (Web App) กับโลกภายนอก (LINE) เพื่อให้ผู้คนสามารถเดินทางมาเยี่ยมชมบ้านของเราได้

ระบบส่งข้อความที่เราจะสร้างในขั้นตอนนี้ มีขั้นตอนการทำงานดังนี้

เมื่อผู้ใช้กดปุ่ม “ส่ง” ระบบจะเรียกใช้ Function liff.shareTargetPicker()

Function liff.shareTargetPicker() จะเปิดหน้าต่าง “เลือกผู้รับ” ใน LINE ให้ผู้ใช้เลือกเพื่อน หรือ กลุ่ม ที่ต้องการส่งข้อความ

เมื่อผู้ใช้เลือกผู้รับแล้ว ระบบจะส่ง Flex Message ที่เราสร้างไว้ ไปยังผู้รับที่เลือก

5. สร้าง CSS

หลังจากได้ HTML Code (โครงสร้างบ้าน) แล้ว เราก็ต้องมา “สร้าง CSS” ซึ่งเปรียบเสมือนการ “ตกแต่งบ้าน” ให้สวยงาม

เราจะใช้ CSS ในการปรับแต่ง สี ตัวอักษร ขนาด และ ตำแหน่งขององค์ประกอบต่างๆ (เหมือนกับการทาสี เลือกเฟอร์นิเจอร์ และ จัดวางของตกแต่ง)

และแน่นอนว่า ขั้นตอนนี้ GEMINI ก็จะช่วยเราสร้าง CSS Code ให้เช่นกัน!

ในการเขียน Prompt เพื่อให้ GEMINI สร้าง CSS ผมได้นำ Code ของ CSS งานอื่นๆ มาเป็นตัวอย่างให้ Gemini ได้อ้างอิง ซึ่งจะช่วยให้ GEMINI เข้าใจสไตล์การออกแบบที่ผมต้องการได้ดียิ่งขึ้น

เพียงเท่านี้ เราก็จะได้ CSS Code สำหรับตกแต่ง Web App ของเราแล้ว! (เหมือนกับมัณฑนากร ตกแต่งบ้านให้เราเสร็จเรียบร้อย)

6. Deployment

ขั้นตอนสุดท้าย คือการ “Deployment” ซึ่งเปรียบเสมือนการ “เปิดบ้านให้คนเข้าชม” เราจะนำโค้ดที่เราสร้างขึ้น ไป Deploy บน GitHub Pages ซึ่งเป็นบริการฟรี ที่ทำให้คนทั่วไปสามารถเข้าถึง และ ใช้งาน Web App ของเราได้

ตัวอย่างการอัพโหลดไฟล์ index.html ใน GitHub:

ตัวอย่างการอัพโหลดไฟล์ style.css ใน GitHub:

วิธีการ Deploy บน GitHub Pages

สร้าง Repository ใหม่บน GitHub (เหมือนกับการจองพื้นที่ สำหรับตั้งบ้าน)

Upload โค้ดทั้งหมดไปยัง Repository (เหมือนกับการขนย้ายบ้าน ไปไว้ในพื้นที่ที่จองไว้)

ไปที่ Settings > Pages (เหมือนกับการติดป้าย บอกตำแหน่งบ้าน)

เลือก Branch ที่ต้องการ Deploy (เหมือนกับการเลือก ประตูทางเข้าบ้าน)

กด Save (เหมือนกับการเปิดประตูบ้าน)

เท่านี้ Web App ของเราก็พร้อมใช้งานแล้ว! (เหมือนกับบ้านที่พร้อมต้อนรับแขก)

สำหรับใครที่อยากเรียนรู้เกี่ยวกับการทำ LIFF ด้วย Github Pages เพิ่มเติม สามารถศึกษาเพิ่มเติมได้ที่นี่ : https://www.skooldio.com/courses/line-frontend-framework 

ผลลัพธ์ Web App อวยพรปีใหม่สุดเจ๋ง!

หลังจากผ่านขั้นตอนการ สร้าง Web App ด้วย GEMINI มาอย่างเข้มข้น ในที่สุดเราก็ได้ Web App ส่งคำอวยพรปีใหม่สุดเจ๋ง พร้อมใช้งานแล้ว !

ฟีเจอร์เด่นของ Web App

ใช้งานง่าย: แค่กรอก คำอวยพร เลือกรูป แล้วกดส่ง ง่ายมากๆ ใครๆ ก็ใช้ได้

สวยงาม: การ์ดอวยพร Flex Message มีดีไซน์สวยงาม สะดุดตา

ปรับแต่งได้: สามารถ Custom ข้อความ และ เลือกรูปภาพได้ตามใจชอบ

ส่งได้ไว: ส่งคำอวยพรถึงเพื่อนๆ ได้อย่างรวดเร็ว ทันใจ

ตัวอย่างการใช้งานจริง

เปิด Web App ใน LINE

กรอกชื่อผู้รับ และ คำอวยพร

เลือกรูปแบบ Template หรือ ใส่ URL รูปภาพ

กดปุ่ม “ส่ง” เพื่อส่งคำอวยพร

เพียงเท่านี้ เพื่อนๆ ของคุณก็จะได้รับการ์ดอวยพรปีใหม่สุดพิเศษ ผ่าน LINE Chat

GEMINI ปฏิวัติวงการสร้าง LIFF App สำหรับนักการตลาด!

หวังว่าบทความนี้จะเป็นประโยชน์ และ จุดประกายไอเดีย ให้นักการตลาด และ ผู้ที่สนใจ สามารถนำ GEMINI ไปประยุกต์ใช้ในการสร้าง LIFF App เพื่อเพิ่มประสิทธิภาพ และ สร้างสรรค์แคมเปญการตลาด บน LINE ได้อย่างมืออาชีพ

GEMINI ไม่ใช่แค่ AI แต่เป็น “ผู้ช่วยนักพัฒนา”

GEMINI ไม่ใช่แค่ AI ธรรมดา แต่เป็นเสมือน “ผู้ช่วยนักพัฒนา” ที่ช่วยลดความยุ่งยาก และ ประหยัดเวลาในการเขียนโค้ด แม้ไม่มีพื้นฐานด้าน Programming ก็สามารถสร้าง LIFF App ได้อย่างง่ายดาย

ตัวอย่าง Script ของไฟล์ HTML

เพื่อให้เห็นภาพรวมของโค้ดที่ใช้สร้าง Web App นี้ ผมขอแชร์ตัวอย่าง Script ของไฟล์ HTML (index.html) แบบย่อๆ ดังนี้ครับ:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0, viewport-fit=cover">
  <title>LIFF For Sending Flex Message</title>
  <link rel="stylesheet" href="../css/style.css">
  <style>
    /* เพิ่ม CSS เพื่อจัดรูปแบบ radio button */
    .image-choice {
      display: inline-block;
      margin-right: 10px;
    }
  </style>
</head>

<body>
  <h2>กำหนดหัวข้อความอวยพร</h2>
  <textarea id="headText" maxlength="50" placeholder="ใส่ข้อความที่นี่ (ไม่เกิน 50 ตัวอักษร)">Happy New Year</textarea> 

  
  <h2>กำหนดข้อความอวยพร</h2>
  <p>ไม่เกิน200 ตัวอักษร</p>
  <textarea id="freeText" maxlength="200" placeholder="ใส่ข้อความที่นี่ (ไม่เกิน 200 ตัวอักษร)">สวัสดีปีใหม่ 2568  ขอให้ปีนี้เป็นปีที่สดใส
เต็มไปด้วยความสุข สมหวังในทุกสิ่ง
และประสบความสำเร็จในทุกๆ ด้าน</textarea> 

  <h2>เลือกรูปภาพ</h2>

  <div>
    <label class="image-choice">
      <input type="radio" id="useDefaultImage" name="imageSource" value="default" checked> ใช้รูปภาพจากเว็บ
    </label>
    <label class="image-choice">
      <input type="radio" id="useCustomURL" name="imageSource" value="custom"> ใส่ URL รูปภาพเอง
    </label>
  </div>

  <div id="defaultImageContainer">
    <div class="image-container">
      <label class="image-choice">
        <input type="radio" id="pic1" name="picture" value="https://via.placeholder.com/150" checked>
        <img src="https://via.placeholder.com/150" alt="Pic 1">
      </label>

      <label class="image-choice">
        <input type="radio" id="pic2" name="picture" value="https://via.placeholder.com/150/0000FF/808080">
        <img src="https://via.placeholder.com/150/0000FF/808080" alt="Pic 2">
      </label>

      <label class="image-choice">
        <input type="radio" id="pic3" name="picture" value="https://via.placeholder.com/150/FF0000/FFFFFF">
        <img src="https://via.placeholder.com/150/FF0000/FFFFFF" alt="Pic 3">
      </label>

      <label class="image-choice">
        <input type="radio" id="pic4" name="picture" value="https://via.placeholder.com/150/FFFF00/000000">
        <img src="https://via.placeholder.com/150/FFFF00/000000" alt="Pic 4">
      </label>
    </div>
  </div>

  <div id="customURLContainer" style="display: none;">
    <h2>ใส่ URL รูปภาพขนาด 1.5:1 เท่านั้น</h2>
    <input type="url" id="urlPic" value="https://example.com/image.jpg">
  </div>

  <button id="shareButton">แชร์</button>
  <pre id="flexMessageJson"></pre>

  <script src="https://static.line-scdn.net/liff/edge/2/sdk.js"></script>

  <script>
    // ฟังก์ชันสำหรับแสดง/ซ่อน input URL ตาม radio button ที่เลือก
    function toggleImageSource() {
      const useDefaultImage = document.getElementById('useDefaultImage').checked;
      document.getElementById('defaultImageContainer').style.display = useDefaultImage ? 'block' : 'none';
      document.getElementById('customURLContainer').style.display = useDefaultImage ? 'none' : 'block';
    }

    // เรียกใช้ฟังก์ชัน toggleImageSource() ตอนเริ่มต้น
    toggleImageSource();

    // เพิ่ม event listener ให้กับ radio button เพื่อเรียกใช้ toggleImageSource()
    const imageSourceRadios = document.querySelectorAll('input[name="imageSource"]');
    imageSourceRadios.forEach(radio => {
      radio.addEventListener('change', toggleImageSource);
    });

    async function shareMsg() {
      // ดึงข้อความจาก textarea
      console.log("shareMsg");
      const freeText = document.getElementById("freeText").value;
      const headText = document.getElementById("headText").value;

      // ดึง URL รูปภาพ
      let imageUrl;
      if (document.getElementById('useDefaultImage').checked) {
        const selectedImage = document.querySelector('#defaultImageContainer input[name="picture"]:checked');
        imageUrl = selectedImage ? selectedImage.value : 'https://via.placeholder.com/150'; // default image URL
      } else {
        imageUrl = document.getElementById("urlPic").value;
      }

      // ดึงข้อมูล profile ของผู้ใช้
      const profile = await liff.getProfile();

      // สร้าง Flex Message
      const flexMessage = {
        type: "flex",
        altText: `สุขสันต์วันปีใหม่ 2025 นะ โดย ${profile.displayName}`,
        contents: {
          "type": "bubble",
          "size": "giga",
          "hero": {
            "type": "image",
            "url": imageUrl, // ใช้ imageUrl ที่ดึงมาจาก input
            "aspectRatio": "1.5:1",
            "aspectMode": "cover",
            "size": "full"
          },
          "body": {
            "type": "box",
            "layout": "vertical",
            "contents": [
              {
                "type": "text",
                "text": headText,
                "weight": "bold",
                "size": "xl",
                "align": "center"
              },
              {
                "type": "box",
                "layout": "baseline",
                "margin": "md",
                "contents": [
                  {
                    "type": "icon",
                    "size": "sm",
                    "url": "https://scdn.line-apps.com/n/channel_devcenter/img/fx/review_gold_star_28.png"
                  },
                  {
                    "type": "text",
                    "text": "2025 ",
                    "size": "sm",
                    "color": "#999999",
                    "margin": "md",
                    "flex": 0,
                    "align": "center"
                  },
                  {
                    "type": "icon",
                    "size": "sm",
                    "url": "https://scdn.line-apps.com/n/channel_devcenter/img/fx/review_gold_star_28.png"
                  }
                ],
                "spacing": "md",
                "justifyContent": "center"
              },
              {
                "type": "box",
                "layout": "vertical",
                "margin": "lg",
                "contents": [
                  {
                    "type": "text",
                    "wrap": true,
                    "color": "#666666",
                    "size": "sm",
                    "flex": 5,
                    "text": freeText, // ใช้ freeText ที่ดึงมาจาก textarea
                    "align": "center"
                  },
                  {
                    "type": "box",
                    "layout": "baseline",
                    "spacing": "sm",
                    "contents": [
                      {
                        "type": "text",
                        "text": "โดย",
                        "color": "#aaaaaa",
                        "size": "sm",
                        "flex": 1
                      },
                      {
                        "type": "text",
                        "text": profile.displayName, // ใช้ displayName จาก profile
                        "wrap": true,
                        "color": "#666666",
                        "size": "sm",
                        "flex": 3
                      }
                    ]
                  },
                  {
                    "type": "box",
                    "layout": "vertical",
                    "contents": [
                      {
                        "type": "image",
                        "url": profile.pictureUrl, // ใช้ pictureUrl จาก profile
                        "animated": false,
                        "size": "lg",
                        "aspectMode": "cover"
                      }
                    ],
                    "cornerRadius": "lg"
                  }
                ]
              }
            ],
            "alignItems": "center"
          },
          "footer": {
            "type": "box",
            "layout": "horizontal",
            "contents": [
              {
                "type": "button",
                "action": {
                  "type": "uri",
                  "label": "ส่งคำอวยพรให้เพื่อน",
                  "uri": "https://liff.line.me/1657677472-OYGa2ZYM"
                },
                "style": "primary",
                "flex": 5
              },
              {
                "type": "button",
                "action": {
                  "type": "uri",
                  "label": "รู้จัก Spark Factor",
                  "uri": "https://sparkth.io"
                },
                "style": "primary",
                "flex": 4
              }
            ],
            "spacing": "sm"
          }
        }
      };

      // แปลง Flex Message เป็น JSON string
      const flexMessageJson = JSON.stringify(flexMessage, null, 2); //  null, 2  ใช้สำหรับ format JSON ให้อ่านง่าย

      // แสดงผล JSON string ใน element ที่มี id="flexMessageJson"
      //document.getElementById("flexMessageJson").textContent = flexMessageJson;
      document.getElementById("flexMessageJson").textContent = "ส่งสำเร็จ";

      // แชร์ Flex Message
      await liff.shareTargetPicker([flexMessage]);
    }

    async function getUserProfile() {
      const profile = await liff.getProfile()
    }


    async function main() {
      await liff.init({
        liffId: "1657677472-OYGa2ZYM" // **อย่าลืมแก้ไข liffId ให้ถูกต้อง**
      })
      if (liff.isLoggedIn()) {
        console.log("Success");
        getUserProfile();
      } else {
        liff.login()
      }
      // enable ปุ่ม
      document.getElementById('shareButton').disabled = false;
    }

    main();

    // เพิ่ม event listener ให้กับปุ่ม
    document.getElementById('shareButton').addEventListener('click', shareMsg);
  </script>
</body>
</html>

อยากเห็น GEMINI ทำงานจริงไหม? ลองดูตัวอย่าง conversation นี้เลย: https://g.co/gemini/share/aa47819d574a

ประโยชน์ของ GEMINI สำหรับนักการตลาด

สร้าง LIFF App ได้รวดเร็ว: ไม่ต้องเสียเวลาเขียนโค้ดเอง GEMINI ช่วยสร้างโค้ดให้ เสร็จไว ทันใจ

เพิ่มโอกาส: สร้าง LIFF App ได้หลากหลาย ตอบโจทย์ทุกแคมเปญการตลาด

เข้าถึงง่าย: ใช้งานง่าย ไม่ซับซ้อน

ก้าวต่อไปของนักการตลาดยุคใหม่

ในยุคที่ AI กำลังเข้ามามีบทบาทสำคัญ นักการตลาดยุคใหม่ จำเป็นต้อง Upskill และ Reskill ตัวเอง อยู่เสมอ การเรียนรู้ และ ประยุกต์ใช้ AI Tools เช่น GEMINI จะช่วยให้คุณก้าว นำหน้า และ สร้างความแตกต่าง ในโลกการตลาด ได้อย่างยั่งยืน

อย่ารอช้า! เริ่มต้น ค้นพบ โลกแห่ง GEMINI และ สร้างสรรค์ LIFF App สุดเจ๋ง ของคุณเอง วันนี้ !