Background
"น้องกริ่ง" คือ LINE Bot ที่เกิดจากการสังเกต pain point ในชีวิตประจำวันของคนใกล้ตัว แล้วนำ Design Thinking มาคิด วิเคราะห์ และสร้าง solution ที่ใช้ได้จริง โดยใช้ LINE เป็น delivery channel เพราะคนไทยเปิดใช้งานทุกวัน
Tech Stack Overview
น้องกริ่ง ทำอะไรได้บ้าง?
4 ฟีเจอร์หลักที่ "น้องกริ่ง" ส่งให้ทุกวันอัตโนมัติ
1 สีมงคลประจำวัน — Daily Lucky Color
น้องกริ่งส่ง Flex Card สีมงคลทุกเช้า 06:30 อัตโนมัติ พร้อมวันพระ/จันทรคติ
- ส่ง push message ทุกเช้า 06:30 อัตโนมัติ (GAS Time-based Trigger)
- ตารางสีมงคลครบ 7 วัน × 5 ด้าน (static data, ไม่ต้องเรียก API ภายนอก)
- ดึงข้อมูลวันพระ/จันทรคติจาก Google Calendar (optional)
- Flex Card UI ธีม galaxy พร้อมรูปจักรราศี อ่านง่ายบนมือถือ
// ตารางสีมงคลประจำวัน (static data) const COLOR_MAP_BY_DAY = { "วันจันทร์": { work: "สีส้ม / สีน้ำตาล", money: "สีม่วง / สีดำ", love: "สีเขียว", senior: "สีฟ้า / สีน้ำเงิน", bad: "สีแดง" }, // ... อีก 6 วัน }; // ฟังก์ชันหลัก — น้องกริ่ง Trigger ทุกเช้า 06:30 function sendDailyColorCard() { const token = getProp_("LINE_ACCESS_TOKEN"); // CENSORED const to = getProp_("LINE_TO"); // CENSORED const dayTH = getThaiWeekday_(new Date()); const colors = COLOR_MAP_BY_DAY[dayTH]; const lunar = getLunarFromCalendar_(new Date()); const bubble = buildFlexBubble_({ dateText, colors, lunar }); pushFlex_(token, to, bubble); }
Architecture Flow
2 วันหยุดประจำเดือน — Holiday Calendar
น้องกริ่งส่งสรุปวันหยุดของเดือนนั้นๆ ให้วางแผนลาพักร้อนได้ล่วงหน้า
- ส่งสรุปวันหยุดทุกต้นเดือนอัตโนมัติ
- แยกประเภท: holiday (วันหยุดราชการ) vs personal (วันสำคัญส่วนตัว)
- ข้อความท้ายการ์ดกระตุ้นให้วางแผนลาต่อเนื่อง
- ข้อมูลวันหยุดตั้งเป็น config แก้ไขง่ายทุกปี
3 ผลสลากกินแบ่งรัฐบาล
น้องกริ่งส่งผลหวยอัตโนมัติเข้า LINE Group ทุกวันออกรางวัล พร้อม Flex Card สวยงาม
Creative Highlights
Auto-Year Config: สร้างระบบ config วันออกรางวัลแบบ JSON per year — รองรับวันหยุดที่เลื่อนงวด (เช่น 1 ม.ค. → 2 ม.ค.) และงวดพิเศษ (เช่น 30 ธ.ค.) โดยไม่ต้องแก้โค้ดทุกปี
Deduplication: ใช้ SHA-256 hash ป้องกันส่งซ้ำ แม้ trigger รันหลายรอบในวันเดียวกัน
- ดึงผลสลากจาก API อัตโนมัติ พร้อม retry 3 ครั้งหาก API ล่ม
- ส่งเฉพาะวันออกรางวัลตาม config (รองรับ override/shift/extra)
- ระบบ deduplicate ป้องกันส่งซ้ำด้วย SHA-256 hash
- Flex Card โทนน้ำเงินเข้ม เลขรางวัลที่ 1 ตัวใหญ่เว้นวรรค อ่านง่าย
- ปุ่ม CTA "ไปเช็คเลขเพิ่มเติม" ลิงก์ไปเว็บตรวจผล
// Auto-Year Draw Config — รองรับเลื่อนงวด + งวดพิเศษ const cfg2026 = { overrides: { "2026-01-01": "2026-01-02", // ปีใหม่ → เลื่อน "2026-05-01": "2026-05-02", // วันแรงงาน → เลื่อน }, extra: ["2026-12-30"], // งวดพิเศษสิ้นปี remove: [] }; // Deduplicate ด้วย SHA-256 function isAlreadySent_(data) { const lastKey = getProp_("LOTTO_LAST_SENT_DATEKEY"); const lastHash = getProp_("LOTTO_LAST_SENT_HASH"); return lastKey === data.drawDateKey && lastHash === data.payloadHash; } // น้องกริ่งส่ง Flex ไป LINE Group function runSendLatestLottoToGroup() { const groupId = getProp_("LINE_GROUP_ID"); // CENSORED const data = fetchLatestLotteryWithRetry_(); if (isAlreadySent_(data)) return; const flex = buildLottoFlex_(data); linePushToGroup_([flex]); markSent_(data); }
Architecture Flow
4 ผลบอล Premier League — Football Results
น้องกริ่งส่ง 3 การ์ด: ผลบอลเมื่อคืน + ตารางคะแนน Top 10 + ดาวซัลโว Top 10
Problem Solving — SVG ไม่แสดงบน LINE Mobile
โลโก้ทีมบน Cloudinary เป็น SVG ซึ่ง LINE Flex Message บนมือถือแสดงผลไม่ได้
Solution: เขียน toPngCloudinary_() ที่เติม f_png transformation parameter อัตโนมัติ — ไม่ต้อง re-upload ไฟล์ใหม่
- 3 Flex Cards ใน Carousel เดียว — ปัดซ้ายขวาดูได้บนมือถือ
- Card 1: ผลบอลเมื่อคืน — แสดงคู่แข่ง + สกอร์ + โลโก้ทีม
- Card 2: ตารางคะแนน Top 10 — อันดับ + ทีม + คะแนน
- Card 3: ดาวซัลโว Top 10 — นักเตะ + ประตู + แอสซิสต์
- โลโก้ทีมจาก Cloudinary CDN + auto SVG→PNG transform
// Cloudinary SVG → PNG (fix LINE Mobile) function toPngCloudinary_(url) { if (!url) return url; const isCloudinary = url.includes("res.cloudinary.com"); const looksSvg = url.toLowerCase().includes(".svg"); if (isCloudinary && looksSvg) { return url.replace( "/image/upload/", "/image/upload/f_png/" ); } return url; } // Carousel: 3 Flex Cards ใน message เดียว // Card 1: ผลบอล | Card 2: ตารางคะแนน | Card 3: ดาวซัลโว function buildFootballCarousel_(matchData) { return { type: "flex", altText: "ผลบอล Premier League", contents: { type: "carousel", contents: [ buildResultsBubble_(matchData), buildStandingsBubble_(matchData), buildTopScorersBubble_(matchData), ] } }; }
Architecture Flow
สิ่งที่ได้เรียนรู้
- Design Thinking ใช้ได้จริงกับ side project — แค่สังเกต pain point ของคนใกล้ตัวก็ได้ "น้องกริ่ง" ที่ใช้งานจริงทุกวัน
- LINE เป็น delivery channel ที่ดีสำหรับคนไทย — ไม่ต้องลงแอปใหม่ เปิดอ่านได้ทุกวัน
- Flex Message มีข้อจำกัด — SVG ไม่แสดงบนมือถือ, ขนาด bubble มีจำกัด, ต้อง optimize UI ให้เหมาะกับจอเล็ก
- Resilience สำคัญ — retry mechanism, deduplication, error handling ช่วยให้ระบบทำงานได้เสถียร
- Config-driven design — แยก data (สีมงคล, วันหวย, วันหยุด) ออกจาก logic ทำให้แก้ไขง่ายทุกปี
- Google Apps Script เหมาะกับ automation ขนาดเล็ก — ฟรี, มี trigger, เชื่อมต่อ Google Calendar ได้ง่าย
Tech Stack ที่ "น้องกริ่ง" ใช้
ทุกฟีเจอร์ใช้ Google Apps Script เป็น backend + LINE Messaging API เป็น delivery channel