PHP Ionic Angular HTML5 AJAX Javascript CSS MySQL jQuery Forum


การใช้งาน LIFF app เบื้องต้น ผ่าน LINE Messaging API ตอนที่ 11

09 April 2019 By Ninenik Narkdee
line messaging api liff line front-end framework line bot sdk bot

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ line messaging api liff line front-end framework line bot sdk bot



ต่อเนื่องเนื้อหาเกี่ยวกับ LINE กันต่อ ในบทความนี้เราจะพูดถึง LINE LIFF
    LINE Front-end Framework (LIFF) เป็นรูปแบบของ Web app ที่ทำงาน
อยู่ในโปรแกรม Line    โดยหน้าต่างที่แสดง LIFF app จะคล้ายกันกับหน้า
ต่างที่แสดงหน้าเพจทั่วไป ที่เมื่อเรากดลิ้งค์ใน Line แล้วจะเปิดหน้าเว็บเพจ
ในโปรแกรม Line หรือก็คือการเปิดบราวเซอร์ในโปรแกรม Line นั่นเอง
    แต่หน้าต่างของ LIFF app จะเป็นหน้าเฉพาะที่รองรับการใช้งานคำสั่ง ของ
LIFF SDK ซึ่งเป็นชุดคำสั่ง JavaScript ที่เราสามารถใช้ประโยชน์ ในการดึงข้อมูลผู้ใช้จาก Line
หรือใช้ส่งข้อความรูปแบบต่างๆ เข้าไปในห้องสนทนา หรือแม้แต่ ทำคำสั่งต่างๆ เพิ่มเติม
ตามรูปแบบที่เรากำหนดใน LIFF app ได้ตามต้องการ อย่างสมมติเช่น แสดงรายละเอียด
ของสินค้าหรือบริการเพิ่มเติม แสดงรูปภาพเพิ่มเติม แสดงหน้าสำหรับจองตั๋วบริการต่างๆ
เหล่านี้ ก็คือการประยุกต์ที่เราสามารถทำได้ผ่าน LIFF app
    การลิ้งค์ไปมาของเนื้อหาใน LIFF app view นั้นจะสามารถทำได้ เฉพาะ url ที่ใช้เป็น 
https เท่านั้น หากมีลิ้งค์ที่กำหนดด้วย http จะเป็นการเปิดหน้าบราวเซอร์ใน Line แทน
 
 

ขนาดหน้าต่าง LIFF app view

   LIFF app รองรับการกำหนดขนาดการแสดง ของหน้าต่าง app ได้กัน 3 แบบ คือ 
แบบ Compact (50%) Tall (80%) และ Full (100%) โดยจะไม่รองรับการแสดงแบบมีหน้าต่าง
หลายๆขนาดได้ ต้องเป็นขนาดอย่างใด อย่างหนึ่งเท่านั้น  แต่เราสามารถแก้ไขขนาดของหน้่าต่าง
หากจำเป็นในภายหลังได้
 
 

ขั้นตอนการใช้งาน LIFF

ในการใช้งาน LIFF ต้องทำลำดับขั้นตอนดังต่อไปนี้
    1. สร้าง channel สำหรับใช้งาน LIFF app ในหน้าจัดการ https://developers.line.biz/console/
หากเรามีการสร้าง channel สำหรับ bot ที่ใช้ Messaging API ก็สามารถใช้ channel นั้นได้เลย หรือจะ
สร้างใหม่ก็ได้ โดยใน 1 channel สามารถมี LIFF app ได้ไม่เกิน 30  
    ในที่นี้ผู้เขียนจะใช้ตัวเดียวกันกับ bot ที่ใช้ Messaging API 
    หรือสามารถดูแนวทางการสร้าง channel ได้ที่ http://niik.in/834
 
    2. พัฒนา LIFF app หรือก็คือสร้างหน้าเพจ หรือ web app ที่เราต้องการใช้งาน อาจจะใช้รูปแบบ
Single page application อย่างพัฒนาด้วย Angular, React หรือ Vue หรือ framework อื่นๆ ตามความถนัด
หรือจะใช้เป็นแบบ Server Script พัฒนาด้วย PHP เหมือนเว็บไซต์ทั่วๆ ไปก็ได้ ขึ้นกับว่าเราจะประยุกต์แบบไหน
โดยเมื่อเราพัฒนาเสร็จเรียบร้อยแล้ว เราก็ต้องอัพโหลดขึ้น server ที่รองรับ https  อย่างเช่น อาจจะอัพขึ้น server 
ของตัวเองที่ใช้บริการอยู่แล้ว หรือใช้บริการ Cloud ก็ได้ โดยเราต้องสามารถเรียกใช้งานผ่าน https ไปยัง web app 
ของเราได้  ผู้เขียนจะใช้วิธีอัพขึ้น Server 
 
    3. เพิ่ม web app ที่เราสร้างเข้าไปไว้ใน LIFF ซึ่งก็คือ การนำ url ที่เป็นแบบ https ของ web app 
ที่เราสร้าง ไปพิมพ์เข้าไปใน LIFF โดยอาจจะทำผ่านหน้า console หรือใช้คำสั่ง สำหรับ Server API ใน LIFF SDK
ก็ได้เหมือนกัน 
 
 

แนวทางการพัฒนา LIFF app

- หลีกเลี่ยงการส่งค่า access token และ user ID ไปใน URL ของเพจที่เปิดใช้งานผ่าน LIFF app 
เพราะอาจจะทำให้ข้อมูลดังกล่าว รั่วไหลได้ หากเป็นไฟล์ Server Script เช่น php อาจจะใช้ตัวแปร 
SESSION ในการรับส่งค่าแทนได้
- เมื่อมีการเรียกใช้งานคำสั่งของอุปกร์หรือฟังก์ชั่นของ OS นั้น เช่น เรียกใช้งานกล้อง หรือเปิดไมโครโฟน
จะเป็นการทำงานที่ผู้ใช้เลือกทำคำสั่งนั้นๆ เอง
- หากมีการใช้งาน COOKIES หรือ localStorage หรือการเชื่อมโยงใดๆ กับบัญชีผู้ใช้ LINE ไปยังเว็บไซต์
ภายนอก ต้องแจ้งให้ผู้ใข้ทราบ และควรได้รับการยินยอมก่อน เช่น อาจจะมีหน้าให้ผู้ใช้ตกลง 
เพื่อรับทราบการใช้ข้อมูล กรณีต้องการดำเนินการต่อ เป็นต้น
- ในขณะที่ LIFF app อยู่ในขั้นตอนการพัฒนา หรือกำลังมีการแก้ไข   ควรจำกัดการเข้าถึง App นั้นๆ
เช่น อาจจะกำหนดให้ redirect ไปหน้าแจ้งเตือน เป็นต้น จนกว่าจะแก้ไข หรือพัฒนาเรียบร้อยแล้ว
โดยการกำหนดจะต้องทำในส่วนของ web app ของเรา
- การเก็บข้อมูลหรือใช้ข้อมูลประเภท COOKIES หรือ การใช้งาน localStorage ใน LIFF app อาจจะมี
การจำกัดการใช้งานในอนาคต ดังนั้นให้พิจารณาในเรื่องนี้ด้วย เช่น หารูปแบบการเก็บข้อมูลเป็นวิธีอื่น
หรือหากเป็น Server Script อาจจะใช้ SESSION แทน หรือบันทึกลงฐานข้อมูลหรือแหล่งจัดเก็บอื่นๆ
- Url หรือองค์ประกอบใดๆ ที่ใช้งานใน LIFF app ต้องเรียกผ่าน https เช่น หากมีการกำหนดลิ้งค์ใดๆ เป็น 
http เมื่อคลิกลิ้งค์นั้น จะเป็นการเปิดหน้าบราวเซอร์ใน Line แทนการแสดงใน LIFF app view   
หรือกรณี มีการเรียกใช้ไฟล์ js หรือไฟล์ css ต้องเรียกใช้งานผ่าน https เท่านั้น
 
 
เมื่อเราได้รู้จักขั้นตอน และแนวทางการพัฒนาเบื้องต้นแล้ว เราจะมาเริ่มลงมือทดสอบกัน
โดยจะทำตามแนวทางที่ Line แนะนำไว้ โดยจะขอข้ามขั้นตอนการสร้าง channel ในขั้นตอนที่ 1
ไป และในขั้นตอนที่ 2 เราจะใช้ web app ตัวอย่าง หรือ line-liff-starter 
 

LIFF Starter App

    ให้เราเข้าไปที่ 
        https://github.com/line/line-liff-starter 
 
    จากนั้นดาวน์โหลด LIFF Starter App เราจะใช้ไฟล์ index.php , index.html , liff-starter.js และ style.css
เมื่อได้ไฟล์มาทั้ง 4 ไฟล์แล้ว เราจะทำการอัพโหลดขึ้น Server โดยไม่ต้องแก้ไขอะไร
    สมมติเราไว้ใน path ของ bot โฟลเดอร์ โดยสร้างโฟลเดอร์ชื่อ liff เพิ่มเข้าไปสำหรับเก็บ app โฟลเดอร์
และสร้างโฟลเดอร์ app1 แยก แล้วอัพโหลดไฟล์ทั้ง 4 เข้าไปในโฟลเดอร์นั้น
 
    >bot
        > bot.php
        > bot_action.php
    >bot 
        >liff 
            >app1    
            |---> index.php
            |---> index.html
            |---> liff-starter.js
            |---> style.css
 
เราจะได้ url ของ web app ของเรา ที่จะใช้งานเป็น LIFF app เป็น
    https://www.mywebsite.com/bot/liff/app1
 
หรือเราจะระบุไปที่ไฟล์เลยก็ได้ เช่น 
    https://www.mywebsite.com/bot/liff/app1/index.html
 
เนื่องจากโค้ดตัวอย่างไฟล์ index.php จะเป็นการ redirect ไปที่ไฟล์ index.html อีกที
 
 

การเพิ่ม LIFF app

    เมื่อเราเตรียม web app ตัวอย่างเรียบร้อยแล้ว และได้ URL สำหรับใช้งาน ต่อไปเราก็จะทำการ
เพิ่ม LIFF app ในที่นี้ เราจะทำผ่าน หน้า console ให้ไปที่ 
    https://developers.line.biz/console/
 
    เลือก channel ที่เราจะใช้งาน ให้หน้า channel จะมีแท็บ LIFF ให้คลิกไปที่แท็บ หน้าตา
ก็จะประมาณรูปด้านล่าง
 

 
 
ให้เราคลิกปุ่ม Add กรอกชื่อ กำหนดขนาดของหน้าต่าง LIFF app view และใส่ URL
แนวงทางตามรูปตัวอย่างด้านล่าง สำหรับ BLE feature ให้เราตั้งเป็น OFF ส่วนนี้จะใช้งานร่วมกับ LINE Things
เกี่ยวกับการใช้งาน bluetooth 
 

 
 
    เสร็จแล้วกด Confirm เพื่อยืนยันการเพิ่ม LIFF app เราจะได้รายการ LIFF app ที่เพิ่งสร้างมาดังรูปด้านล่าง
ซึ่งเราสามารถแก้ไข หรือลบได้ตลอดเวลา
 

 
 
    จะเห็นว่าตอนนี้ เราได้ url ของ LIFF app ที่สามารถนำไปกำหนดใน Flex Message , Template Message หรือ
แม้แต่ส่งเข้าไปในห้องสนทนา ให้ผู้ใช้ ได้กดเข้าไปใช้งาน ได้เลย
 
ตัวอย่าง ผลลัพธ์ สมมติเราส่งเป็น url เข้าไปในห้องสนทนา
 



 
พอเรากดเข้าไปใน url ของ LIFF app ก็จะแสดงหน้าต่างของ LIFF app view ดังนี้
* ตัวอย่างด้านล่าง แสดงให้เห็นรูปแบบทั้ง 3 คือ Compact Tall และ Full
 
 
 
 
 
ในตัวอย่างผลลัพธ์ Starter app ของเราข้างต้น เป็นการใช้งาน javascript เรียกใช้งาน Client API 
แสดงข้อมูลของ LIFF Data และมีปุ่มตัวอย่าง สำหรับสาธิตการทำงานที่เรียกใช้คำสั่งต่างของ LIFF SDK
ที่รองรับ เช่น ให้เปิดหน้าไปยังหน้าเว็บบราวเซอร์ใน Line    คำสั่งปิดหน้าต่าง LIFF app   คำสั่งแสดง 
Access Token   คำสั่งแสดงข้อมูลผู้ใช้ที่เปิด LIFF app อยู่ และคำสั่งในการส่งข้อความ เป็นต้น
คำสั่งการทำงานต่างๆ จะอยู่ในไฟล์ liff-starter.js
 

ไค้ดไฟล์ Starter  index.html

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

<body>
    <div class="buttongroup">
        <div class="buttonrow">
            <button id="openwindowbutton">Open Window</button>
            <button id="closewindowbutton">Close Window</button>
        </div>
        <div class="buttonrow">
            <button id="getaccesstoken">Get Access Token</button>
            <button id="getprofilebutton">Get Profile</button>
            <button id="sendmessagebutton">Send Message</button>
        </div>
    </div>

    <div id="accesstokendata">
        <h2>Access Token</h2>
        <a href="#" onclick="toggleAccessToken()">Close Access Token</a>
        <table border="1">
            <tr>
                <th>accessToken</th>
                <td id="accesstokenfield"></td>
            </tr>
        </table>
    </div>

    <div id="profileinfo">
        <h2>Profile</h2>
        <a href="#" onclick="toggleProfileData()">Close Profile</a>
        <div id="profilepicturediv">
        </div>
        <table border="1">
            <tr>
                <th>userId</th>
                <td id="useridprofilefield"></td>
            </tr>
            <tr>
                <th>displayName</th>
                <td id="displaynamefield"></td>
            </tr>
            <tr>
                <th>statusMessage</th>
                <td id="statusmessagefield"></td>
            </tr>
        </table>
    </div>

    <div id="liffdata">
        <h2>LIFF Data</h2>
        <table border="1">
            <tr>
                <th>language</th>
                <td id="languagefield"></td>
            </tr>
            <tr>
                <th>context.viewType</th>
                <td id="viewtypefield"></td>
            </tr>
            <tr>
                <th>context.userId</th>
                <td id="useridfield"></td>
            </tr>
            <tr>
                <th>context.utouId</th>
                <td id="utouidfield"></td>
            </tr>
            <tr>
                <th>context.roomId</th>
                <td id="roomidfield"></td>
            </tr>
            <tr>
                <th>context.groupId</th>
                <td id="groupidfield"></td>
            </tr>
        </table>
    </div>
    
    <script src="https://d.line-scdn.net/liff/1.0/sdk.js"></script>
    <script src="liff-starter.js"></script>
</body>
จะเห็นว่า ก่อนบรรทัดสุดท้าย จะมีการเรียกใช้งาน LIFF SDK ซึ่งเป็น JavaScript และต่อด้วยไฟล์
liff-starter.js ซึ่งเป็นไฟล์รวมคำสั่งการทำงานของ LIFF app 
 

ไฟล์ liff-starter.js

/// event เมื่อโหลดหน้าเพจเรียบร้อยแล้ว ให้ใช้คำสั่ง liff.init() สำหรับเตรียมความพร้อมใช้คำสั่ง LIFF ต่างๆ
window.onload = function (e) {
    liff.init(function (data) { // คำสั่ง init() คืนค่าข้อมูลของ LIFF app 
        initializeApp(data); // เมื่อ liff พร้อมทำงาน เรียกฟังก์ชั่น initializeApp ส่งข้อมูล LIFF ไปแสดง
    });
};

// ฟังก์ชั่นสำหรับแสดงข้อมูล LIFF app และกำหนด การทำงานให้กับปุ่ม ต่างๆ 
function initializeApp(data) {
    document.getElementById('languagefield').textContent = data.language;
    document.getElementById('viewtypefield').textContent = data.context.viewType;
    document.getElementById('useridfield').textContent = data.context.userId;
    document.getElementById('utouidfield').textContent = data.context.utouId;
    document.getElementById('roomidfield').textContent = data.context.roomId;
    document.getElementById('groupidfield').textContent = data.context.groupId;

    // openWindow call
    document.getElementById('openwindowbutton').addEventListener('click', function () {
        liff.openWindow({
            url: 'https://line.me'
        });
    });

    // closeWindow call
    document.getElementById('closewindowbutton').addEventListener('click', function () {
        liff.closeWindow();
    });

    // sendMessages call
    document.getElementById('sendmessagebutton').addEventListener('click', function () {
        liff.sendMessages([{
            type: 'text',
            text: "You've successfully sent a message! Hooray!"
        }, {
            type: 'sticker',
            packageId: '2',
            stickerId: '144'
        }]).then(function () {
            window.alert("Message sent");
        }).catch(function (error) {
            window.alert("Error sending message: " + error);
        });
    });

    // get access token
    document.getElementById('getaccesstoken').addEventListener('click', function () {
        const accessToken = liff.getAccessToken();
        document.getElementById('accesstokenfield').textContent = accessToken;
        toggleAccessToken();
    });

    // get profile call
    document.getElementById('getprofilebutton').addEventListener('click', function () {
        liff.getProfile().then(function (profile) {
            document.getElementById('useridprofilefield').textContent = profile.userId;
            document.getElementById('displaynamefield').textContent = profile.displayName;

            const profilePictureDiv = document.getElementById('profilepicturediv');
            if (profilePictureDiv.firstElementChild) {
                profilePictureDiv.removeChild(profilePictureDiv.firstElementChild);
            }
            const img = document.createElement('img');
            img.src = profile.pictureUrl;
            img.alt = "Profile Picture";
            profilePictureDiv.appendChild(img);

            document.getElementById('statusmessagefield').textContent = profile.statusMessage;
            toggleProfileData();
        }).catch(function (error) {
            window.alert("Error getting profile: " + error);
        });
    });
}

//ฟังก์ชั่นสำหรับสลับซ่อนหรือแสดงค่า Access Token
function toggleAccessToken() {
    toggleElement('accesstokendata');
}

//ฟังก์ชั่นสำหรับสลับซ่อนหรือแสดงข้อมูลบัญชีผู้ใช้
function toggleProfileData() {
    toggleElement('profileinfo');
}

//ฟังกืชั่นสำหรับ สลับการซ่อนหรือแสดง html element ต่างๆ ตามค่าตัว element ที่ส่งมา
function toggleElement(elementId) {
    const elem = document.getElementById(elementId);
    if (elem.offsetWidth > 0 && elem.offsetHeight > 0) {
        elem.style.display = "none";
    } else {
        elem.style.display = "block";
    }
}

 
เราสามารถพัฒนาหน้านี้ ให้ทำงานต่างๆ และอาศัยข้อมูลของผู้ใช้ Line สำหรับเชื่อมโยงกับระบบสมาชิก
หรือระบบการทำงานของเว็บไซต์เราได้ และสามารถใช้คำสั่งส่งข้อความ ทำการส่งเนื้อหา หรือรายละเอียด
ข้อมูลต่างๆ โต้ดตอบกับผู้ใช้ ตามเงื่อนไขที่กำหนดได้ ตัวอย่างเช่น 
    สมมติหน้า LIFF app เราเป็นหน้าสินค้าหรือบริการ และมีปุ่มสั่งซื้อ เมื่อผู้ใช้กดสั่งซื้อ เราก็สามารถส่ง
สรุปยอด กลับไปยังผู้ใช้ที่อยู่ในห้องสนทนาได้ หรือจะส่งต่อไปยังหน้าชำระเงินออนไลน์ก็ได้ 
 
 
ทั้งหมดนี้คือแนวทางเบื้องต้น การใช้งาน LINE LIFF หรือ LINE Front-end Framework หากมีไอเดียหรือ
การประยุกต์เพิ่ม อาจจะมีเนื้อหาต่อในตอนหน้า รวมถึง การลงลึกไปยังรูปแบบการใช้งาน LIFF SDK
ทั้งในฝั่ง Client API สำหรับโต้ดตอบกับผู้ใช้ และ Server API สำหรับจัดการ LIFF app ผ่าน API เช่น
การลบ การแก้ไข เหล่านี้เป็นต้น รอติดตาม


อย่าลืมกด Like กด Share เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ



อ่านต่อที่บทความ









เนื้อหาที่เกี่ยวข้อง



Tags:: line front-end framework liff line messaging api bot line bot sdk




เนื้อหาพิเศษ เฉพาะสำหรับสมาชิก

กรุณาล็อกอิน เพื่ออ่านเนื้อหาบทความ

ยังไม่เป็นสมาชิก

สมาชิกล็อกอิน



หริอ สมัครสมาชิก และล็อกอิน ด้วย Facebook




URL สำหรับอ้างอิง