LINE LIFF and MINI App Development is a hands-on course in building web apps that run inside LINE with the LIFF SDK and React or Next.js, covering login, messaging, ID token verification on the backend, the Messaging API and moving on to LINE MINI App. It suits web developers and teams running a LINE Official Account, and you leave with a booking and member card prototype.
LINE is the app many people in Thailand use to contact shops and services, so businesses want customers to book appointments, sign up as members, collect points or fill in forms in the same chat they already use with the business, without installing another app. LIFF (LINE Front-end Framework) answers this need by letting a web app run inside LINE, know who the user is and send messages back into the chat. Building one that works in production, however, involves details that are easy to miss, from channel settings and verifying users securely on the server to connecting with a LINE Official Account.
This course takes learners through building web apps that run inside LINE with the LIFF SDK and React or Next.js. It starts with creating a channel and a LIFF app in the LINE Developers Console, then covers login and user profiles, sending messages, sharing and scanning QR codes. It goes on to verifying ID tokens on the backend, building a membership system and connecting to the Messaging API to notify users. From there it moves on to LINE MINI App, including its channel structure, the difference between verified and unverified MINI Apps and the review process. It closes with deployment and a capstone booking app with a digital member card. (2 days, 6 hours per day, 12 hours in total, Intermediate level.)
Course Details
This course runs for 2 days, 6 hours per day (12 hours in total, 09:00-16:00), as lectures with labs that grow one real app throughout and test it on the learner's own phone. Intermediate level. It uses the LIFF SDK with React or Next.js and a Node.js backend, and learners create their provider and channels with their own LINE account. The course covers LIFF apps, ID token verification on the backend, a membership system, the Messaging API and extending the app into an unverified LINE MINI App, with an explanation of the review process for verified MINI Apps, whose outcome is decided by LINE. Learners take home a lab guide, sample code for every lab and a capstone booking and member card project.
Section 1: Introducing LIFF and LINE MINI App
What LIFF is, and how running inside LINE differs from an external browser
Typical use cases: bookings, member cards, loyalty points and forms
The overall architecture: LIFF app, backend, Messaging API and LINE Official Account
The planned merger of LIFF into LINE MINI App and what it means for new projects
Section 2: Lab: Creating a Provider, Channel and LIFF App
Providers and channels in the LINE Developers Console
Choosing between a LINE Login channel and a LINE MINI App channel
LIFF app settings: Full, Tall and Compact sizes, an HTTPS endpoint URL and scopes
Lab: create a first LIFF app and open it through its LIFF URL on a phone
Section 3: Lab: Setting Up a React or Next.js Project
Install @line/liff and call liff.init() once per page load
Start from Create LIFF App and manage the LIFF ID through environment variables
Test on a phone through an HTTPS tunnel and debug with LIFF Inspector
Lab: a React app skeleton that shows its LIFF connection status
Section 4: Login and User Information
isInClient(), isLoggedIn(), login() and logout() in each environment
getProfile(), getContext() and getOS() for adapting app behaviour
How access tokens differ from ID tokens, and why the openid scope is needed
Lab: a profile page that works both inside LINE and in a browser
Section 5: Lab: Sending Messages, Sharing and Opening Windows
sendMessages(), its usage conditions and the chat_message.write scope
shareTargetPicker() for letting users share with friends or groups
Send custom Flex Messages and use openWindow() and closeWindow()
Lab: a button that shares a coupon as a Flex Message with friends
Section 6: Lab: Scanning QR Codes and Designing UX for LINE
scanCodeV2() for scanning QR codes, and its limits in each environment
Design screens that suit LIFF sizes and mobile use
Reduce SDK size with the pluggable SDK and test with LIFF Mock
Lab: an in-store check-in page that scans a QR code
Section 7: Lab: Verifying ID Tokens on the Backend
Why a user ID or profile sent from the web page must never be trusted directly
Send the ID token to the server and verify it through the LINE Login API
Check the channel ID and expiry, then create the app's own session
Lab: a Node.js API that authenticates LIFF users securely
Section 8: Lab: Membership System and Database
Design a member table linked to the LINE user ID
First-time sign-up, recording consent and collecting only the data needed under the PDPA
A digital member card with a QR code and a points system
Lab: sign-up and member card pages that read data from the API
Section 9: Connecting LIFF with the Messaging API
Link a LINE Official Account to the LINE Login channel and invite users to add it as a friend
Push messages from the backend after a user completes an action in LIFF
Open the LIFF app from a rich menu and from links in messages
Lab: send a booking confirmation to the chat with a button that opens the details in LIFF
Section 10: Moving On to LINE MINI App
What LINE MINI App is and how it differs from a LIFF app on a LINE Login channel
The channel structure for Developing, Review and Published
Verified versus unverified MINI Apps, their feature differences and the conditions in Thailand
An overview of the review process, policies and performance guidelines
Section 11: Lab: Deploying and Preparing for Production
Deploy the frontend and backend on services that support HTTPS
Keep separate LIFF apps for development and production
Security: CORS, storing secrets and handling tokens
Lab: put the app live and test it on the learners' own phones
Section 12: Workshop: Booking and Member Card Capstone
Design the flow from opening the rich menu to receiving a confirmation message
Build the booking page, member card page and an API that verifies ID tokens
Send notifications through the Messaging API and test both in LINE and in a browser
Present the work, review it together and wrap up with a pre-launch checklist
No public rounds are open right now. Join the waiting list and we will contact you first when the next round opens, or ask us on LINE. Or call 02-570-8449 or 088-807-9770
LIFF (LINE Front-end Framework) is a platform for running web apps inside the LINE app. With the LIFF SDK you can read the user's profile, send messages to the chat, share with friends or scan QR codes. It is popular for booking pages, member cards, loyalty points and forms, because users need no extra app and can open them straight from a LINE Official Account chat.
A user ID or profile sent from the web page can be forged, so the backend should never trust those values directly. Instead, have the LIFF app send its ID token to the server and verify it with the LINE Login API, checking that it is valid, was issued for your channel ID and has not expired. Only then use the user ID inside the token to create the app session. Requesting an ID token requires the openid scope.
A LINE MINI App uses the same technology as LIFF but is built on a LINE MINI App channel instead of a LINE Login channel, with separate channels for developing, review and published stages. Verified MINI Apps must pass LINE's review and get more features, while unverified ones can be released without review but with more limits. The choice depends on the features you need and whether you can wait for review.
It suits frontend and full-stack developers building services on LINE, developers who run a LINE Official Account and want member or booking pages, and people who have built LINE chatbots and want to move on to web apps inside LINE. You should write working JavaScript, understand HTML, CSS and the Fetch API, and know React or another modern web framework; some Node.js helps.
You will be able to create and configure LIFF apps in the LINE Developers Console, build them with the LIFF SDK and React or Next.js, use login, messaging, sharing and QR scanning, verify ID tokens on the backend and link users to a membership system, send messages through the Messaging API and deploy to production. Participants who complete the training receive a Certificate of Completion with its own number, which can be verified online.
Bring a laptop that can run Node.js, Git and VS Code, and a smartphone with LINE installed, because the labs are tested on your own phone and you create the provider and channels with your own LINE account. You take home sample code for every lab and the booking and member card project.
LINE is the main channel Thai customers use to contact businesses, so a chatbot on a LINE Official Account can answer repeated questions, collect details and hand work on at any time. Google's Dialogflow helps a bot understand Thai messages written in many…
Almost every Thai organisation uses LINE as its main communication channel, from team group chats to LINE Official Accounts, yet that communication is still almost entirely manual: posting announcements, summarising meetings from group chats, chasing tasks…
