สแกน QR Code ด้วย LINE Front-end Framework (LIFF) ใช้งานจาก Rich menu

จากบทความก่อนหน้านี้ เราได้เปิดใช้งาน LIFF แล้ว วันนี้เราจะให้ความสามารถของ LIFF SDK ในการเรียกใช้งานตัว scan QR code บนเว็บแอปกัน

LIFF SDK คือะไร

LIFF SDK เป็น JavaScript Library ที่ช่วยให้นักพัฒนาสามารถเรียกใช้ความสามารถของ LIFF API มาใช้งาน developers.line.biz

มาสร้างแอป Scan QR code ด้วย LIFF SDK

ถ้ายังไม่เปิดการใช้งาน LIFF ดู การใช้งาน LINE Front-end Framework (LIFF) ให้กับ Line chat bot ของเรา

1. เข้าไปที่ LINE Login channel ตัวที่เราเปิด LIFF แล้วคัดลอก LIFF ID เพื่อนำไปใส่ใน html

2. สร้างไฟล์ index.html ในโฟลเดอร์ public ขี้นมา เขียนโค๊ดตามนี้ เอา LIFF ID ไปแทนที่ LIFF_ID นะครับ

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LIFF Starter</title>
    <link rel="stylesheet" href="style.css">

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

    <style>
      body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; }
      #message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px; border-radius: 3px; text-align: center;}
      #message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; }
      #message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px; }
      #message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; }
      #message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; }
      #message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
      #load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; }
      @media (max-width: 600px) {
        body, #message { margin-top: 0; background: white; box-shadow: none; }
        body { border-top: 16px solid #ffa100; }
      }
    </style>
  </head>
  <body>

    <div id="message">
      <h2 id="head"></h2>
      <h1 id="show"></h1>    
    </div>

    <script>
      document.getElementById('head').textContent = "QR code scanner opening ..."

      liff.init({ liffId: 'LIFF_ID' }, () => {
          // const idToken = liff.getDecodedIDToken();
          // console.log(idToken) // print decoded idToken object
          // displayLiffData()
          scanQrCodeButton()
      });

      /**
      * Display data generated by invoking LIFF methods
      */
      function displayLiffData() {
          let info = ""
          info += liff.getLanguage() + '\r\n';
          info += liff.getVersion() + '\r\n';
          info +=  liff.isInClient() + '\r\n';
          info +=  liff.isLoggedIn() + '\r\n';
          info +=  liff.getOS() + '\r\n';
          info +=  liff.getLineVersion() + '\r\n';
          document.getElementById('show').textContent = info
      }

      // scanCode call
      function scanQrCodeButton() {
        if (!liff.isInClient()) {
          sendAlertIfNotInClient();
        } else {
          if (liff.scanCode) {
              liff.scanCode().then(result => {
                  // e.g. result = { value: "Hello LIFF app!" }
                  const stringifiedResult = JSON.stringify(result);
                  document.getElementById('show').textContent = stringifiedResult
                  if(!result.value) return alert(result)
                  toggleQrCodeReader(result.value);
              }).catch(err => {
                  document.getElementById('show').textContent = "scanCode failed! " + err;
              });
          }
        }
      }

      function sendAlertIfNotInClient() {
        alert('!liff.isInClient()')
      }

      function toggleQrCodeReader(qrText) {
        liff.sendMessages([{
            'type': 'text',
            'text': qrText
        }]).then(function() {
            // window.alert('Message sent');
            document.getElementById('head').textContent = "Message sended"
            setTimeout(function(){ liff.closeWindow(); }, 1000);
        }).catch(function(error) {
            window.alert('Error sending message: ' + error);
        });
      }


    </script>

  </body>
</html>

อธิบายการทำงานของโค๊ด LIFF QR Code

เรียกใช้งาน LIFF SDK

liff.init({ liffId: 'LIFF_ID' }, () => {

การตั้งต้น liff กรอก LIFF ID

if (!liff.isInClient()) {

ตรวจสอบว่าเปิดด้วยมือถือไหม

liff.scanCode().then(result => {

เปิอการสแกน QR code

unction toggleQrCodeReader(qrText) {

ส่งค่า QR code ที่อ่านได้ไปยังห้องเชต

3. โยนไฟล์ขึ้น Hosting ที่นี้ผมใช้ Netlify นะครับ ง่ายและฟรี ไปสมัครใช้งานก่อนเลย ที่นี่ จากนั้น ลากโฟล์เดอร์ public เข้าไปเพื่อ upload

Netlify คืออะไร
Netlify เป็นแพลตฟอร์มสำหรับนักพัฒนาเว็บ หรือผู้ให้บริการ Hosting ที่ทัสมัยมากๆ ใช้งานง่าย และมีแบบฟรีให้ใช้งานด้วย รองรับทั้ง static HTML website และ ด้าน back end เช่น Nodejs, Python, Ruby ได้เช่นกัน netlify.com