Flexkub Documentation v3.0

คู่มือการใช้งาน Flexkub — แพลตฟอร์มสร้าง LINE Flex Message ด้วย Visual Editor และ Data Pipeline แบบ Drag & Drop

สร้างบัญชี

Flexkub รองรับการสมัครสมาชิก 2 วิธี: อีเมล + รหัสผ่าน หรือ Google Account (Single Sign-On)

สร้างโปรเจกต์แรก

โปรเจกต์คือที่รวม Flex Messages และ Pipelines ทั้งหมดของคุณ เหมาะสำหรับแยกตาม LINE OA แต่ละบัญชี หรือแยกตามแคมเปญ

Quick Start Guide

สร้าง Flex Message แรกของคุณภายใน 2 นาที:

Interactive Tutorial Guide

ผู้ใช้ใหม่จะเห็น Interactive Guide แนะนำการใช้งานระบบแบบ Step-by-Step ไกด์จะ Highlight ส่วนต่าง ๆ ของหน้าจอพร้อมคำอธิบาย ครอบคลุม 14 ขั้นตอน ตั้งแต่ Dashboard ไปจนถึง Pipeline Editor

• Dashboard — รู้จักปุ่มสร้างโปรเจกต์, การ์ด, สถิติ
• Flex Editor — เรียนรู้ Palette, Canvas, Properties, Tree View
• Pipeline — รู้จัก Node Palette, Graph, Config Panel

แดชบอร์ด — ภาพรวมโปรเจกต์

Dashboard แสดงโปรเจกต์ทั้งหมดของคุณเป็น Card พร้อมสถิติจำนวน Flex Messages และ Pipelines ในแต่ละโปรเจกต์

Dashboard — ภาพรวมโปรเจกต์ทั้งหมด

จัดการโปรเจกต์

หน้าโปรเจกต์ — จัดการ Flex Messages และ Pipelines

Flex Message Editor — ภาพรวม

Flex Message Editor เป็นเครื่องมือ Visual แบบ Drag & Drop สำหรับสร้าง LINE Flex Message โดยไม่ต้องเขียน JSON ด้วยมือ

Editor Layout: Component Palette (ซ้าย) → Canvas (กลาง) → Properties Panel (ขวา)

Editor ประกอบด้วย 4 ส่วนหลัก:

Component Palette

Components ที่ลากวางได้มี 3 หมวดหมู่:

Layout 2 components

Content 5 components

Action 1 component

Canvas Controls

Canvas มีเครื่องมือช่วยจัดวางและนำทาง:

Properties Panel

คลิก Component ใดก็ได้บน Canvas หรือ Tree View เพื่อแก้ไข Properties ที่ Panel ด้านขวา Properties ที่แสดงจะต่างกันตาม Component ที่เลือก

Tree View

Tree View แสดงโครงสร้าง Component เป็น Hierarchy ด้านล่างของ Sidebar คลิก Component ใน Tree เพื่อเลือก ลากเพื่อจัดลำดับภายใน Parent เดียวกัน

• คลิก เพื่อเลือก Component
• ลาก เพื่อจัดลำดับ ย้ายตำแหน่งภายใน Parent
• คลิกขวา ที่ Box เพื่อเพิ่ม Child Component (Box, Text, Image, Video, Button, Icon, Separator)
• กดลูกศร ▶ เพื่อ Expand/Collapse

Templates Library

เลือก Template สำเร็จรูปจาก 7 หมวดหมู่ เพื่อเริ่มต้นอย่างรวดเร็ว:

AI Generator

ให้ AI สร้าง Flex Message ให้อัตโนมัติจากคำอธิบาย:

AI Component Editor

แก้ไข Component ด้วย AI — เลือก Component แล้วกดปุ่ม ✨ ที่ Properties Panel จะมีช่องพิมพ์คำสั่งและ Quick Action Chips

Quick Action Chips แบ่ง 3 หมวด: Text Style Layout

Import / Export JSON

Variable System

ใช้ตัวแปรในข้อความเพื่อเชื่อมกับข้อมูลจาก Pipeline:

templateสวัสดีคุณ {{customerName}} 🎉
สินค้า: {{productName}}
ราคา: {{price}} บาท

• ใช้ syntax {{variableName}} ในช่อง Text หรือ URL
• Variables จะ highlight สีเขียวในช่อง input
• กด dropdown ที่ช่อง input เพื่อเลือก Variable จากรายการ
• ดู Preview ที่ Variable Preview Panel เพื่อเห็นผลลัพธ์จริง

Pipeline Editor — ภาพรวม

Pipeline Editor คือเครื่องมือสร้าง Data Flow แบบ Visual ด้วย Node Graph เชื่อมต่อแหล่งข้อมูล → แปลงข้อมูล → ใส่ลงใน Flex Template → ส่งออก

Pipeline Editor — ลาก Node มาวาง เชื่อมเส้นเพื่อสร้าง Data Flow

ประเภท Node

Pipeline มี 5 หมวด Node ทั้งหมด 16 ประเภท:

Data Source — แหล่งข้อมูล

Transform — แปลงข้อมูล

Logic — ตรรกะ

Template — แม่แบบ

Output — ส่งออก

การเชื่อมต่อ Node

เชื่อมต่อ Node ด้วยการลาก Handle (จุดกลม) จาก Output ของ Node หนึ่งไปยัง Input ของอีก Node:

ตั้งค่า Node

คลิกที่ Node เพื่อเปิด Config Panel ด้านขวา แต่ละ Node มี Config ต่างกัน:

Data Source — ตั้งค่าแหล่งข้อมูล

JSON[
  { "name": "สมชาย", "email": "somchai@mail.com", "age": 28 },
  { "name": "สมหญิง", "email": "somying@mail.com", "age": 25 }
]

Transform — ตั้งค่าแปลงข้อมูล

JavaScript// เพิ่ม field fullName จาก firstName + lastName
return data.map(item => ({
  ...item,
  fullName: item.firstName + ' ' + item.lastName
}))

JavaScript// กรองสินค้าราคา > 100 แล้วเพิ่ม field discountPrice
return data
  .filter(item => item.price > 100)
  .map(item => ({
    ...item,
    discountPrice: Math.round(item.price * 0.9)
  }))

Logic — ตั้งค่าตรรกะ

Template — ตั้งค่า Template

Output — ตั้งค่าส่งออก

Template Binding Mode

Binding Mode คือโหมดเต็มจอสำหรับเชื่อม Data Fields กับ Components ใน Flex Template เปิดโดย Double-click ที่ Flex Template Node

มี 3 ระบบหลัก:

Loop / Repeat — วนซ้ำข้อมูล

ระบบรองรับการวนซ้ำ (Loop) ใน 2 ระดับ — Pipeline Level (Loop Node) และ Template Level (Repeat Rule) ใช้สำหรับสร้าง Component ซ้ำตามจำนวนข้อมูลใน Array

Level 1 — Loop Node (Pipeline Graph)

Loop Node อยู่ในหมวด Logic — ใช้สำหรับวนลูปข้อมูลใน Array ที่ระดับ Pipeline ก่อนส่งต่อให้ Node ถัดไป

Level 2 — Repeat Rule (Template Binding)

Repeat Rule ใช้ภายใน Binding Mode — กำหนดให้ Box component วนซ้ำตาม Array เช่น แสดงรายการสินค้าหลายชิ้นจากข้อมูลที่ส่งมา

ตัวอย่าง — แสดงรายการสินค้า

สมมติมีข้อมูล:

JSON{
  "items": [
    { "name": "กาแฟลาเต้", "price": 75 },
    { "name": "ชาเขียวมัทฉะ", "price": 85 },
    { "name": "โกโก้เย็น", "price": 65 }
  ]
}

ตั้งค่า Repeat Rule:

ผลลัพธ์: Box จะถูกสร้างซ้ำ 3 ครั้ง โดยแต่ละรอบ {{itemName}} และ {{itemPrice}} จะถูกแทนที่ด้วยข้อมูลของ item นั้นๆ

รัน Pipeline

มี 2 วิธีในการรัน Pipeline:

วิธีที่ 1: รันจาก Pipeline Editor

วิธีที่ 2: รันจากการ์ด Pipeline

ในหน้าโปรเจกต์ สามารถรัน Pipeline ได้โดยตรงจากเมนู ⋮ บนการ์ด Pipeline โดยไม่ต้องเข้า Editor — ระบบจะรันและแสดงผลลัพธ์ทันที (Preview, JSON, Code)

เชื่อมต่อ LINE Official Account

เชื่อม LINE OA เพื่อส่ง Flex Message ถึง Followers โดยตรง:

ตั้งค่า Webhook

หลังเชื่อมต่อสำเร็จ ระบบจะสร้าง Webhook URL ให้อัตโนมัติ:

urlhttps://your-domain.com/api/webhook/{projectId}

คัดลอก URL นี้ไปใส่ใน LINE Developers Console → Messaging API → Webhook URL

ส่งข้อความถึง Followers

หลังเชื่อมต่อ LINE OA และมี Followers แล้ว สามารถส่ง Flex Message ได้ 2 ทาง:

• จาก Pipeline — ใช้ LINE Push Node เลือก Followers แล้ว Run Pipeline
• จาก Execution Result — รัน Pipeline เสร็จ กดแท็บ LINE แล้วเลือกคนรับ

Keyboard Shortcuts

Flex Message Editor

Pipeline Editor