Tel. 02-570-8449 Mobile 088-807-9770 Payment
Mon–Fri 9:00–17:00 @itgenius
IT Genius Institute
IT Genius Institute
CoursesWorkshopSchedule
For business
In-house trainingAI Transformation (TH)Government training (TH)Development servicesTraining room rental
Articles
About us
About IT GeniusInstructorsPortfolioOur clientsPayment methods
Contact usOnline
Theme
Language
THENLA
Ask about a coursePick whichever channel suits you
LINE @itgeniusFastest reply · Mon–Fri 9:00–17:00
Call us
02-570-8449Office088-807-9770Mobile
Email & social
contact@itgenius.co.thFor quotations and documentsFacebookitgeniusonlineYouTubeitgeniusengPlan training for your team
Home / Courses / Others / Detail
Others · OTC-21

LINE LIFF and MINI App Development

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.

Updated
LINE LIFF and MINI App Development
From 5,850 THB / person 6,500 −10% excl. VAT 7% · group rates available
Corporate training quote Join the waiting list
PDFDownload the course outline
  • Duration12 hours · 2 days
  • FormatOnsite / live online
  • Next roundOn request
  • LevelIntermediate

Course overview

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.)

What you’ll gain

  • Create a provider, channel and LIFF app in the LINE Developers Console and configure them correctly
  • Build LIFF apps with the LIFF SDK and React or Next.js
  • Use LIFF for login, user profiles, sending messages, sharing and scanning QR codes
  • Verify ID tokens on the backend and link LINE users to a membership system securely
  • Connect a LIFF app to a LINE Official Account through the Messaging API and rich menus
  • Understand LINE MINI App, how it differs from LIFF and how the review process works
  • Deploy a LIFF app to production following security and performance good practice

Who this course is for

  • Frontend and full-stack developers building LINE-based services for their organisation's customers
  • Developers who run a LINE Official Account and want to add membership, booking or form screens
  • Development teams in retail, clinics, beauty and other services that rely on LINE as a main channel
  • Developers who have built a LINE chatbot and want to extend it into a web app inside LINE
  • Tech leads deciding between LIFF and LINE MINI App for a project

Prerequisites

  • Working knowledge of JavaScript, plus HTML, CSS and the Fetch API
  • A basic grounding in React or another modern web framework
  • An understanding of REST APIs; some Node.js experience is a plus
  • A laptop that can run Node.js, Git and VS Code, and a smartphone with LINE installed for testing

Curriculum

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.

Day 1 Building LIFF Apps with the LIFF SDK

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

Day 2 Backend, Messaging API and LINE MINI App

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

Schedule & training options

For individuals — public rounds

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

Join the waiting list Ask about rounds

For organisations — in-house / private

  • Tailor the content to your team’s tools and projects
  • Your dates, at your office or live online
  • Quotation with tax ID for procurement
Corporate training quote

Instructors

Frequently asked questions

Who is LINE LIFF and MINI App Development for, and what background is needed?

Built for Frontend and full-stack developers building LINE-based services for their organisation's customers · Developers who run a LINE Official Account and want to add membership, booking or form screens · Development teams in retail, clinics, beauty and other services that rely on LINE as a main channel Background you should have: Working knowledge of JavaScript, plus HTML, CSS and the Fetch API · A basic grounding in React or another modern web framework Not sure the fit is right? Talk to our team on LINE @itgenius or call 02-570-8449.

How much does LINE LIFF and MINI App Development cost and how long does it run?

THB 6,500 (currently THB 5,850 on promotion). The course runs 12 hours. The price excludes 7% VAT (for payment in a company's name). Pay by bank transfer to the company account, confirm it on our payment page, and we can issue the receipt or tax invoice in your company's name.

Do I get a certificate?

Yes. Everyone who completes the course receives a Certificate of Completion from IT Genius Institute. Each certificate carries its own number, and anyone holding that number can verify it online on our certificate page, so you can add it to your portfolio or pass it to HR as evidence of training.

Where does the training take place, and is there an online option?

You can attend onsite at IT Genius Institute or arrange to join online, and we also run it as a private in-house session for your team. Ask about dates and venues on LINE @itgenius or call 02-570-8449.

What if I fall behind or miss a session — can I retake it?

Yes. You may retake the same course free of charge in a later round, under the institute's conditions. Tell our team which course and round you attended, and we will check it and offer you the rounds that still have seats. Ask us on LINE @itgenius or call 02-570-8449.

How do I enrol, or request a quotation for my company?

Enrol online with the registration form on this page. You can register several attendees at once and enter your tax ID and billing address for the tax invoice. Or request a company quotation straight from the quote button. For anything else call 02-570-8449 or reach us on LINE @itgenius.