แสดง Flex Message ใน Website ได้ง่าย ๆ ด้วย flex-render ติดตั้งง่ายผ่าน npm ใช้บนเว็บก็ได้ เซิร์ฟเวอร์ก็ดี

ถ้าใครอยู่ในวงการ LINE Developers Thailand มาสักระยะนึง ก็อาจจะคุ้นเคยกับไลบรารี flex2html ที่พี่กอล์ฟ LINE API Expert ได้ทำไว้ก่อนหน้านี้ ซึ่งมีผู้ใช้งานอย่างล้นหลาม สามารถดาวน์โหลดไฟล์ JS ไปติดตั้งในโปรเจกต์ของตัวเองได้เลย

แสดงผล Flex message ใน HTML เสมือนอยู่บน LINE

แต่สำหรับการใช้งานในโปรเจกต์ที่มีความ Advance ขึ้นมานิดนึง หรือใช้ TypeScript ในการเขียนเป็นหลักก็อาจจะไม่ได้ง่ายขนาดนั้นในการใช้งาน

วันนี้พร็อมท์เลยเขียนไลบรารีขึ้นมาใหม่ทั้งหมด โดยใช้ TypeScript เป็นหลัก ในชื่อว่า flex-render

ไลบรารี flex-render สามารถติดตั้งง่าย ๆ ผ่าน npm ใช้งานได้ง่าย ๆ ด้วยโค้ด 1 บรรทัดเท่านั้น

# NPM
npm install flex-render

# Yarn
yarn add flex-render

# PNPM
pnpm install flex-render

# Bun
bun add flex-render

เมื่อติดตั้งแล้ว สามารถใช้ได้ง่าย ๆ เลย เพียงเรียกฟังก์ชัน render() พร้อมโยน Bubble หรือ Carousel ของ Flex Message เข้าไปด้านใน ตามตัวอย่างด้านล่างนี้

function renderFlexMessage() {
  return render({
    type: 'bubble',
    body: {
      type: 'box',
      layout: 'vertical',
      spacing: 'md',
      contents: [
        ...
      ],
    },
  })
}

และเมื่อต้องการที่จะแสดงในหน้าเว็บไซต์ ให้ทำการติดตั้ง flex-render ในโปรเจคและทำการ import ไฟล์ CSS จากไลบรารี flex-render/css เข้าไปในโปรเจคเช่นกัน

Get Supakarn Laorattanakul’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

นอกจากนี้เพื่อความสะดวกสำหรับคนที่พัฒนาบน Framework ยอดฮิตอย่าง React หรือ Vue พร็อมท์ได้ทำการสร้างไลบรารีที่เป็น Component ของทั้ง 2 Framework ไว้ให้แล้ว ได้แก่ flex-render-react และ flex-render-vue สามารถนำไปใช้ได้ทันทีด้วยโค้ดเพียง 1 บรรทัดเท่านั้น

# React
import 'flex-render-react/css'
import { FlexPreview } from 'flex-render-react'

<FlexPreview 
  json={{
    type: 'bubble',
    body: {
      type: 'box',
      layout: 'vertical',
      spacing: 'md',
      contents: [
        ...
      ],
    },
  }}
/>

# Vue
import 'flex-render-vue/css'
import { FlexPreview } from 'flex-render-vue'

<FlexPreview :json="{
    type: 'bubble',
    body: {
      type: 'box',
      layout: 'vertical',
      spacing: 'md',
      contents: [
        ...
      ],
    },
  }"
/>

Flex Message ที่เรนเดอร์ผ่าน flex-render-react

สามารถดูตัวอย่างการใช้งานได้ที่ https://github.com/iamprompt/flex-render/tree/main/apps

ส่วนใครสนใจสามารถศึกษา Source Code ได้ที่ https://github.com/iamprompt/flex-render หรือหากมี issue หรือเจอบั๊กสามารถ Contribute หรือแจ้งในแท็บ Issue ได้เลย

GitHub - iamprompt/flex-render