Portfolio — Side Project
🔔

น้องกริ่ง — LINE Bot

LINE Messaging Automation ด้วย Design Thinking

สร้างระบบแจ้งเตือนอัตโนมัติผ่าน LINE Messaging API ตั้งแต่ Empathize ไปจนถึง Deliver — ใช้จริงทุกวัน

Background

"น้องกริ่ง" คือ LINE Bot ที่เกิดจากการสังเกต pain point ในชีวิตประจำวันของคนใกล้ตัว แล้วนำ Design Thinking มาคิด วิเคราะห์ และสร้าง solution ที่ใช้ได้จริง โดยใช้ LINE เป็น delivery channel เพราะคนไทยเปิดใช้งานทุกวัน

Tech Stack Overview

Google Apps Script LINE Messaging API Flex Message (Card UI) LINE App (ผู้รับ)

น้องกริ่ง ทำอะไรได้บ้าง?

4 ฟีเจอร์หลักที่ "น้องกริ่ง" ส่งให้ทุกวันอัตโนมัติ

🎨
สีมงคลประจำวัน
ทุกเช้า 06:30
📅
วันหยุดประจำเดือน
ต้นเดือน
🎰
ผลสลากกินแบ่ง
วันออกรางวัล 16:45
ผลบอล Premier League
หลังจบเกม

1 สีมงคลประจำวัน — Daily Lucky Color

น้องกริ่งส่ง Flex Card สีมงคลทุกเช้า 06:30 อัตโนมัติ พร้อมวันพระ/จันทรคติ

LINE Push API Flex Message GAS Time Trigger Google Calendar API Thai Lunar Calendar
Empathize
สังเกตว่าคนในครอบครัวชอบดูสีมงคลทุกเช้าจากเว็บดูดวง แต่ต้องเปิดหลายแอป เสียเวลาหาข้อมูลเอง บางวันลืมดู
Define
"ผู้ใช้ต้องการรู้สีมงคลประจำวันแบบไม่ต้องค้นหาเอง — ส่งมาเลยทุกเช้าใน LINE"
Ideate
ออกแบบ Flex Card ที่อ่านง่ายในจอมือถือ แสดงสี 5 ด้าน (การงาน, การเงิน, ความรัก, ผู้ใหญ่เมตตา, กาลกิณี) + ข้อมูลวันพระจาก Google Calendar
Prototype & Test
ทำ Flex Message ส่งทดสอบจริงใน LINE → ปรับ layout ให้อ่านง่าย → ใส่ภาพ hero ธีมโหราศาสตร์ → ใช้งานจริงทุกวันมากกว่า 6 เดือน
  • ส่ง push message ทุกเช้า 06:30 อัตโนมัติ (GAS Time-based Trigger)
  • ตารางสีมงคลครบ 7 วัน × 5 ด้าน (static data, ไม่ต้องเรียก API ภายนอก)
  • ดึงข้อมูลวันพระ/จันทรคติจาก Google Calendar (optional)
  • Flex Card UI ธีม galaxy พร้อมรูปจักรราศี อ่านง่ายบนมือถือ
LINE Chat — ตัวอย่างจริงที่ส่งทุกเช้า
🔔
น้องกริ่ง
วันจันทร์ ที่ 02
เป็นวันพระ
การงานสีส้ม / สีน้ำตาล
การเงินสีม่วง / สีดำ
ความรักสีเขียว
ผู้ใหญ่เมต...สีฟ้า / สีน้ำเงิน
กาลกิณีสีแดง
Google Apps Script
// ตารางสีมงคลประจำวัน (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

GAS Trigger (06:30) Build Flex Card Google Calendar (วันพระ) LINE Push API ผู้รับ

2 วันหยุดประจำเดือน — Holiday Calendar

น้องกริ่งส่งสรุปวันหยุดของเดือนนั้นๆ ให้วางแผนลาพักร้อนได้ล่วงหน้า

LINE Push API Flex Message Holiday Data Personal Events
Empathize
ทุกต้นเดือนต้องเปิดปฏิทินดูว่ามีวันหยุดวันไหนบ้าง เพื่อวางแผนลางาน ลาพักร้อน หรือนัดหมาย — บางเดือนมีวันหยุดเยอะแต่ไม่รู้ตัว
Define
"ผู้ใช้ต้องการเห็นภาพรวมวันหยุดของเดือนในที่เดียว เพื่อวางแผนได้ทันท่วงที"
Ideate
ออกแบบ Flex Card สรุปวันหยุดของเดือน แยกประเภท (holiday / personal) พร้อมข้อความแนะนำให้เช็คปฏิทินเพื่อหาวันลาต่อเนื่อง
LINE Chat — สรุปวันหยุดประจำเดือน
🔔
น้องกริ่ง
📆
วันหยุด : Feb 2026
Date14 Feb 2026
Eventวันวาเลนไทน์ (holiday)
Date17 Feb 2026
Eventวันตรุษจีน (holiday)
Date19 Feb 2026
Eventวันเกิดป้าจัน (personal)
  • ส่งสรุปวันหยุดทุกต้นเดือนอัตโนมัติ
  • แยกประเภท: holiday (วันหยุดราชการ) vs personal (วันสำคัญส่วนตัว)
  • ข้อความท้ายการ์ดกระตุ้นให้วางแผนลาต่อเนื่อง
  • ข้อมูลวันหยุดตั้งเป็น config แก้ไขง่ายทุกปี

3 ผลสลากกินแบ่งรัฐบาล

น้องกริ่งส่งผลหวยอัตโนมัติเข้า LINE Group ทุกวันออกรางวัล พร้อม Flex Card สวยงาม

LINE Push API Flex Message GAS Time Trigger 3rd Party API Auto Schedule SHA-256 Dedup
Empathize
คนในกลุ่ม LINE ถามกันทุกงวดว่า "หวยออกอะไร" ต้องไปเปิดเว็บเช็คเอง บางคนไม่สะดวก ผู้สูงอายุเปิดเว็บยาก
Define
"ผู้ใช้ต้องการรู้ผลสลากทันทีในที่ที่เขาใช้อยู่แล้ว (LINE Group) โดยไม่ต้องเปิดเว็บ"
Ideate
ออกแบบ Flex Card ที่โชว์ผลรางวัลหลักได้ชัดเจน (รางวัลที่ 1 ตัวใหญ่สุด) พร้อม CTA ไปเช็คเพิ่มเติม + ระบบ schedule ส่งเฉพาะวันออกรางวัลเท่านั้น
Prototype & Test
ส่ง mock data ทดสอบ → ปรับ UI ให้อ่านง่าย (Prize 1 เว้นวรรค, สีโทนน้ำเงินเข้ม) → รันจริง ส่งอัตโนมัติทุกงวด

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 "ไปเช็คเลขเพิ่มเติม" ลิงก์ไปเว็บตรวจผล
LINE Chat — ผลสลากกินแบ่งรัฐบาล
🔔
น้องกริ่ง
ผลสลากกินแบ่งรัฐบาล
งวด 1 กุมภาพันธ์ 2569
รางวัลที่ 1
174629
เลขหน้า 3 ตัว
917
195
เลขท้าย 3 ตัว
408
041
เลขท้าย 2 ตัว
48
🔍 ไปเช็คเลขเพิ่มเติม
แจ้งเตือนเพื่อความสะดวก กรุณาตรวจสอบซ้ำกับแหล่งทางการ
Google Apps Script
// 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

GAS Daily Trigger (16:45) Check Draw Config Fetch Lotto API Dedupe Check LINE Push → Group

4 ผลบอล Premier League — Football Results

น้องกริ่งส่ง 3 การ์ด: ผลบอลเมื่อคืน + ตารางคะแนน Top 10 + ดาวซัลโว Top 10

LINE Push API Flex Carousel Cloudinary CDN SVG → PNG Transform Sports Data
Empathize
เพื่อนในกลุ่มเป็นแฟนบอล Premier League ถามกันบ่อยว่า "เมื่อคืนใครชนะ" "ตอนนี้ใครนำ" ต้องเปิดแอปกีฬาหลายตัว
Define
"ผู้ใช้ต้องการรู้ผลบอล + ตารางคะแนน + ดาวซัลโว ในที่เดียว — LINE Group ที่คุยกันอยู่แล้ว"
Ideate
ออกแบบ 3 Flex Cards เป็น Carousel: (1) ผลบอลเมื่อคืน พร้อมสกอร์ (2) ตารางคะแนน Top 10 (3) ดาวซัลโว Top 10 — โชว์โลโก้ทีมจาก Cloudinary CDN
Prototype & Test
พบปัญหา SVG โลโก้ไม่แสดงบน LINE Mobile → แก้ด้วย Cloudinary transform (f_png) → ปรับ 3 การ์ดให้สไลด์ได้ในมือถือ

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
LINE Chat — ผลบอลเมื่อคืน Carousel 3 การ์ด (เลื่อนได้ →)
🔔
น้องกริ่ง
Google Apps Script
// 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

Sports Data API GAS Script Cloudinary (Logo CDN) Flex Carousel × 3 LINE Group

สิ่งที่ได้เรียนรู้

  • 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

Google Apps Script LINE Messaging API LINE Flex Message Google Calendar API Cloudinary CDN REST API SHA-256 Hashing JSON Config
Aw mascot