Extend Functionality to your LIFF app by LIFF Plugin

LIFF หรือ LINE Front-end Framework คืออะไร?

LIFF เกิดขึ้นมาเพื่อเติมเต็มการใช้งาน LINE Chatbot ในเรื่องของการแสดงผล ที่บางอย่าง LINE Chatbot ไม่สามารถทำได้ เช่น การสร้างฟอร์มลงทะเบียนที่ซับซ้อน หรือการแสดงสินค้าจำนวนมากๆในห้องแชท โดย LIFF มาพร้อมกับเทคโนโลยีของเว็บ หรือเรียกให้เข้าใจง่ายๆว่า เป็นการสร้างเว็บในห้องแชทนั่นเอง

LIFF Plugin คือ

ฟีเจอร์ที่มีใน LIFF SDK ตั้งแต่ v2.19.0 เป็นต้นมา ที่ให้นักพัฒนาต่อยอดความสามารถให้ LIFF SDK ทำอะไรได้เพิ่มเติมมากกว่าฟังก์ชันพื้นฐานที่ทีม LIFF เตรียมมาให้ เช่นสร้าง plugin กับฟังก์ชันที่เราต้องเขียนประจำ หรือ สร้างและแชร์ plugin ที่ใช้ร่วมกันภายในทีม

สิ่งที่คุณจะได้ลงมือทำ

ใน Codelab นี้คุณจะได้เรียนรู้และเข้าใจการพัฒนา LIFF Plugin สำหรับการคำนวนค่าดัชนีมวลกาย หรือ BMI แล้วติดตั้งเข้าไปใน LIFF SDK เพื่อเรียกใช้งานผ่าน LIFF Object แบบง่ายๆกัน

สิ่งที่คุณจะได้เรียนรู้

การสร้าง LIFF app
การสร้าง LIFF Plugin
การเรียกใช้งาน LIFF Plugin ในรูปแบบตัวแปร
การเรียกใช้งาน LIFF Plugin ในรูปแบบฟังก์ชัน

สิ่งที่คุณต้องเตรียมพร้อมก่อนเริ่ม Codelab

แอปพลิเคชัน LINE(สมาร์ทโฟน) ที่ sign in พร้อมใช้งาน
Browser(Desktop หรือ Mobile)
โปรเจคต้นแบบสำหรับ Codelab นี้ ซึ่งจะอธิบายในขั้นตอนถัดไป

StackBlitz

ใน Codelab นี้เราจะพัฒนา LIFF app ด้วย StackBlitz ซึ่งเป็น Editor แบบออนไลน์ที่ไม่ต้องติดตั้งโปรแกรมใดๆ และเราสามารถแชร์ URL ของโปรเจคให้กับผู้อื่นได้ โดยโปรเจคที่แชร์ จะอนุญาตให้ผู้อื่นเข้าถึงโค้ดทั้งหมด แต่จะไม่สามารถแก้ไขโปรเจคของเราได้

เริ่มต้นให้ไปที่ โปรเจคต้นแบบ
แล้วให้ไปกด Folk โปรเจคที่บริเวณด้านบนของหน้า

เมื่อคุณ Folk โปรเจคเรียบร้อยแล้ว คุณจะได้ชื่อโปรเจคและ URL สำหรับการใช้งานของคุณ ซึ่งการแก้ไขใดๆก็ตามจากนี้ไปจะถูกบันทึกเก็บไว้ใน StackBlitz

สมัครเป็น LINE Developer

จุดเริ่มขบวนสำหรับการพัฒนาแอปพลิเคชันต่างๆบนแพลทฟอร์มของ LINE คือคุณจะต้องสมัครเป็น LINE Developer ก่อน

เข้าไปที่ https://developers.line.biz/console/ แล้วเลือก Log in with LINE account(สีเขียว) เพื่อเข้าสู่ระบบ

เข้าสู่ระบบด้วยบัญชี LINE ของคุณให้เรียบร้อย
กรอกชื่อและอีเมล พร้อมกดยอมรับ Agreement จากนั้นกดปุ่ม Create my account เป็นอันเสร็จสิ้นขั้นตอนการสมัครเป็น LINE Developer

สร้าง Provider

Provider คือ superset ของแอปทั้งหลายที่เราจะพัฒนาขึ้นรวมถึง LIFF app ด้วย โดยการสร้างเพียงให้ระบุชื่อของ Provider ลงไป ซึ่งอาจจะตั้งเป็นชื่อตัวเอง, ชื่อบริษัท, ชื่อทีม หรือชื่อกลุ่มก็ได้

สร้าง Channel

Channel คือ subset ของ Provider โดยมีอยู่ 3 รูปแบบ คือ LINE Login, Messaging API และ Clova Skill

สำหรับการพัฒนา LIFF เราจะต้องเลือก Create a LINE Login channel

เมื่อกดเลือก LINE Login channel จะเข้าสู่หน้าที่ให้ระบุรายละเอียดต่างๆลงไป แล้วกดสร้าง

หลังจากที่คุณมี Provider และ Channel เรียบร้อยแล้ว ขั้นตอนต่อไปก็คือการสร้าง LIFF app โดยให้เลือก channel ที่สร้างขึ้นมา แล้วไปยัง tab ที่ชื่อว่า LIFF จากนั้นกด Add

ระบุรายละเอียดต่างๆของ LIFF app

LIFF app name: ชื่อของ LIFF ตัวนี้(จะไม่แสดงให้ผู้ใช้งานเห็น)
Size: ขนาดในการแสดงผลของ LIFF (Full = 100%, Tall = 75%, Compact = 50%)
Endpoint URL: URL ที่รองรับ HTTPS ซึ่งในตอนนี้ให้คุณระบุ URL ของ StackBlitz ที่ได้จากขั้นตอนที่ 2 ลงไป

Scopes: สิทธิ์ในการเข้าถึงข้อมูลต่างๆ ซึ่งในตอนนี้ให้คุณระบุ profile ไปก่อน
Bot link feature: เป็นฟีเจอร์ในการแนะนำแชทบอทของเราให้กับผู้ใช้ ในตอนนี้ให้คุณเลือก Off ไปก่อน
Scan QR: เป็นการขอสิทธ์เปิด QR Code Reader เพื่ออ่านค่า และส่งกลับมายัง LIFF ซึ่งในตอนนี้ยังไม่ต้องเปิด

เมื่อกด Add เสร็จเรียบร้อย คุณก็จะได้ LIFF URL มาแล้ว

Import LIFF SDK

ไปที่ไฟล์ index.html ใน StackBlitz แล้ว Uncomment ตัว LIFF SDK ใน

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

สร้าง BMIPlugin Class

ที่ไฟล์ index.js ให้กำหนดชื่อของ LIFF Plugin ใน constructor() ของคลาส BMIPlugin

constructor() {
  this.name = "bmi";
}

รับค่า context เพื่อดึงค่าภาษาของผู้ใช้ และ option เพื่อดึงค่า date ที่จะส่งมาจากการ activate เพื่อนำไปใช้กับ localDate() และ return "ค่า" ซึ่งก็คือ today ใน install()

install(context, option) {
  return {
    today: this.localDate(context.liff.getLanguage(), option.date)
  };
}

เพิ่มโค้ดเข้าไปในฟังก์ชัน localDate() ซึ่งอยู่ภายในคลาส BMIPlugin สำหรับแปลง date ให้ตรงตามภาษาของผู้ใช้

localDate(lang, date) {
  const locale = (lang === "en")? "en-US": "th-TH";
  return date.toLocaleDateString(locale, {
    year: '2-digit',
    month: 'short',
    day: 'numeric',
  });
}

ที่บรรทัดล่างสุดของ index.js ให้เพิ่มโค้ดด้านล่างนี้เพื่อ activate ตัว LIFF Plugin

// Activate LIFF Plugin
liff.use(new BMIPlugin(), { date: new Date()});

ที่บรรทัดล่างสุดของ index.js ให้เพิ่มโค้ดด้านล่างนี้เพื่อแสดง date ตามภาษาของผู้ใช้

// Display locale date
h5Element.innerHTML = liff.$bmi.today;

ผลลัพธ์

วิธีการเปิด LIFF app ให้เราเอา LIFF URL ที่ได้จากข้อ 4 ซึ่งมีลักษณะแบบนี้ https://liff.line.me/YOUR-LIFF-ID

โพส LIFF URL ลงในห้องแชทบน LINE(สมาร์ทโฟน) จากนั้นก็คลิกลิงค์ได้เลย
จะพบหน้า consent ของ LINE ก็ให้กด Allow ไป

หลังจากที่เราได้สร้าง BMIPlugin และลองเรียกใช้ฟังก์ชันในการแปลง date ให้ตรงตามภาษาของผู้ใช้กันไปแล้ว ขั้นตอนนี้เราจะมาสร้างฟังก์ชันสำหรับคำนวนค่า BMI ใน plugin กันต่อเลย

เพิ่มฟังก์ชัน Calculate และเรียกใช้งาน

ในไฟล์ index.js ให้เราเพิ่มโค้ดสำหรับการคำนวนค่า BMI นี้เข้าไปในฟังก์ชัน calculate() ซึ่งอยู่ภายในคลาส BMIPlugin

calculate(height, weight) {
  const heightInMeter = height / 100;
  const bmi = (weight / (heightInMeter * heightInMeter)).toFixed(2);
  let result = "none";
  if (bmi < 18.5) {
    result = "XS";
  } else if (bmi >= 18.5 && bmi < 23) {
    result = "S";
  } else if (bmi >= 23 && bmi < 25) {
    result = "M";
  } else if (bmi >= 25 && bmi < 30) {
    result = "L";
  } else if (bmi >= 30) {
    result = "XL";
  }
  return result;
}

ใน install() ให้เพิ่มการ return ฟังก์ชัน calculate ในชื่อตัวแปร cal เข้าไป

install(context, option) {
  return {
    today: this.localDate(context.liff.getLanguage(), option.date),
    cal: this.calculate
  };
}

ในไฟล์ index.js ให้เพิ่มโค้ดชุดนี้ลงไปที่บรรทัดล่างสุด

btnElement.onclick = () => {
  h2Element.innerHTML = liff.$bmi.cal(heightElement.value, weightElement.value);
}

ผลลัพธ์

คลิกเปิดลิงค์ LIFF URL เดิมในห้องแชท
ระบุส่วนสูงและน้ำหนักที่ต้องการจากนั้นกดปุ่ม Calculate
ผลลัพธ์ที่ได้ จะแสดงข้อมูล BMI ออกมาในรูปแบบของ Size เช่น S, M หรือ L เป็นต้น

หลังจากที่เราได้ลองเรียกใช้งาน LIFF Plugin ก่อนการ initial ตัว LIFF app ไปแล้ว คราวนี้เราจะมาลองเรียกใช้งาน LIFF Plugin หลังจากการ Initial กันบ้าง

Initial ตัว LIFF app และดึงข้อมูลโปรไฟล์ของผู้ใช้

ที่บรรทัดล่างสุดของไฟล์ index.js ให้เราเพิ่มฟังก์ชัน main() พร้อมเรียกใช้งาน โดยภายในฟังก์ชันจะมีคำสั่ง init ที่ให้เราระบุ LIFF ID ที่ได้จากขั้นตอนที่ 4 ลงไป

const main = async() => {
  await liff.init({liffId: "YOUR-LIFF-ID"});
}
main();

ใน main() หลัง initial ตัว LIFF app แล้ว ให้เราเพิ่มโค้ดเพื่อตรวจสอบสถานะการ Log in โดยกรณี Log in แล้วจะให้ดึงข้อมูลผู้ใช้ออกมา แต่หากยังไม่ Log in จะเรียกคำสั่ง liff.login() เพื่อพาผู้ใช้ไป Log in

const main = async() => {
  await liff.init({liffId: "YOUR-LIFF-ID"});

  // Check login status
  if (liff.isLoggedIn()) {
    // Get user profile
    const profile = await liff.getProfile();
  } else {
    liff.login();
  }
}

เพิ่มฟังก์ชัน Greeting และเรียกใช้งาน

ที่ไฟล์ index.js ให้เพิ่มโค้ดด้านล่างนี้เข้าไปใน greeting() ซึ่งอยู่ภายในคลาส BMIPlugin

greeting(lang, profile) {
  const prefix = (lang === "en")? "Hello": "สวัสดี";
  return `${prefix} ${profile.displayName}!`;
}

ใน install() ให้เพิ่มการ return ฟังก์ชัน greeting ในชื่อตัวแปร greet เข้าไป

install(context, option) {
  return {
    today: this.localDate(context.liff.getLanguage(), option.date),
    cal: this.calculate,
    greet: this.greeting
  };
}

ภายในฟังก์ชัน main() หลังจากที่เราดึงข้อมูลผู้ใช้ให้เราเพิ่มโค้ดด้านล่างนี้ เพื่อเรียกใช้งานฟังก์ชัน greet พร้อมส่งข้อมูลผู้ใช้ไปด้วย

const main = async() => {
  await liff.init({liffId: "YOUR-LIFF-ID"});
  // Check login status
  if (liff.isLoggedIn()) {
    // Get user profile
    const profile = await liff.getProfile();

    h1Element.innerHTML = liff.$bmi.greet(liff.getLanguage(), profile);
  } else {
    liff.login();
  }
}

ผลลัพธ์

ยินดีด้วยครับ ถึงตรงนี้คุณก็มี LIFF app ตัวแรกเป็นของคุณเองแล้ว!!!

สิ่งที่คุณได้เรียนรู้ใน Codelab นี้

✅การสร้าง LIFF app
✅การสร้าง LIFF Plugin
✅การเรียกใช้งาน LIFF Plugin ในรูปแบบตัวแปร
✅การเรียกใช้งาน LIFF Plugin ในรูปแบบฟังก์ชัน

เรียนรู้เพิ่มเติม

คอร์สเรียนออนไลน์ Getting Started with LIFF Development (ฟรี)

บทความเกี่ยวกับ LIFF ใน LINE Developers Thailand

Reference docs

LIFF API Reference

บอกเราหน่อยว่า Codelab ชุดนี้เป็นอย่างไรบ้าง

Feedback form