Command line interface for building LIFF app on Firebase. This module will help you handle API to add, update, delete, get LIFF apps and set LIFF IDs in Firebase Functions configuration which can be retrieved in your Functions project.
NOTE: If you do not need to work with Firebase, we recommend our latest package line-api-cli
Firebase tools must be installed
npm i -g firebase-tools
Firebase project must be initiated with Functions (for Messaging API) and Hosting (for LIFF)
firebase init
Firebase project must be defined
firebase use --add
Install FireLIFF CLI
npm i -g @intocode-io/fireliff-cli
There are two approaches to set LINE channel access token
This approach is quick and easy but less secure because the token we are using here is long-lived access token. You can manually issue this token using LINE Developers Console.
fliff config --token <accessToken>
This approach is recommended. First setup your channel id and secret. They can be found in LINE Developers Console.
fliff config --id <channelId> --secret <channelSecret>
After channel ID and secret are configured. Issue a channel access token and save it.
fliff token --issue --save
In case you want to revoke an access token, you can run with --revoke option.
fliff token --revoke <accessToken>
Short-lived access token is valid for 30 days. You should have a process to replace the access token periodically.
firebase functions:config:set hosting.url=<hostingUrl>
This command should be run first time under Firebase project root folder which containing firebase.json.
fliff init
After run successfully, you will get a web-views LIFF project folder. This sub-project is a boilerplate with Parcel Bundler. You can change directory into web-views and run npm run dev to start LIFF App development. See Develop LIFF Web Views
Add LIFF using view --name and --url options. We make --type option as optional in FireLIFF CLI to shorten the command line. So you can omit --type, it will be full by default.
fliff add --name <viewName> --url <viewUrl>
If you prefer to specify type, run with --type option. It can be full, tall or compact.
fliff add --name <viewName> --url <viewUrl> --type <viewType>
Update using LIFF ID
fliff update --id <liffId> --type <viewType> --url <viewUrl>
Update using view name
fliff update --name <viewName> --type <viewType> --url <viewUrl>
To update Bluetooth® Low Energy (BLE) flag, use --ble option
fliff update --id <liffId> --ble <true|false>
The Name column in LIFF tab in LINE developers Console is not related to fliff update --name option here. According to LINE LIFF API specification, this Name of the LIFF app column is actually description in its request body. So If you would like to change this value you can run fliff update --id <viewId> --description <descripton>
Update using LIFF ID
fliff delete --id <liffId>
Update using view name
fliff delete --name <viewName>
List LIFF apps
fliff get
List LIFF apps with description and Bluetooth® Low Energy (BLE) flag
fliff get --detail
To add a new RichMenu
richmenu add --name <richMenuName> --data <dataFile> --image <imageFile>
The richmenu naming cannot be uppercase due to Firebase Functions Configuration specification. It's recommended to use rich-menu-name pattern.
LINE Rich Menu API currently not support PUT method which means you cannot update the rich menu. The workaround is add new menu and delete the old one.
Update using RichMenu ID
richmenu delete --id <richMenuId>
Update using RichMenu name
richmenu delete --name <richMenuName>
To display existing rich menus, run the following command. This will display existing rich menus in table.
richmenu get
Or if you need more detail, such as areas property, run with --detail option. This will display as object.
richmenu get --detail
Set RichMenu for all users using RichMenu ID
richmenu default --id <richMenuId>
Set RichMenu for all users using RichMenu name
richmenu default --name <richMenuName>
Link RichMenu to an individual user using RichMenu ID
richmenu link --id <richMenuId> --user <userId>
Link RichMenu to an individual user using RichMenu name
richmenu link --name <richMenuName> --user <userId>
Unlink RichMenu from an individual user
richmenu unlink --user <userId>
The RichMenu name is the name when you add the RichMenu with --name option which will be saved in Firebase Functions Configuration. It is not the same as a name property in data file. You can run richmenu get to see RichMenu name in the first column.
Each web view will be loaded inside LINE app when LINE user open a line://app/{view}. So to load each web view faster, it's recommended to avoid using single-page app approach but create a set of files for each page using the following pattern instead.
web-views/src/some-view.html
web-views/src/some-view.js
web-views/src/some-view.css
It's recommended to load only neccessary library in the html file; for example, the LIFF SDK. And use Parcel Bundler to import other libraries as needed. Parcel Bundler will help to several things; including Tree-shaking which will reduce JavaScript payloads.
The boilerplate has two environments; production and staging. But you can create more if needed. Environment file uses the following format
web-views/.env.{process.NODE_ENV}
Environment must be aligned with Firebase project alias. Run firebase use to see all aliases. If you don't have staging and production aliases, you can add them by run the following command.
firebase use --add
In the environment file, we have two default variables; FIREBASE_API_KEY and FIREBASE_API_PROJECT_ID, which needed during firebase app initialization.
import firebase from 'firebase/app';
firebase.initializeApp({
apiKey: process.env.FIREBASE_API_KEY,
projectId: process.env.FIREBASE_API_PROJECT_ID
});
You can access liff variable in any JavaScript file as long as the JavaScript file is loaded in an HTML page which include LIFF SDK script.
liff.init(
data => console.log(data.context),
error => console.log(error)
);
cd web-views
npm run deploy:staging
This command will clean web-views/dist, re-build and deploy to Firebase Hosting.
After complete, you can add LIFF view. The command will add LIFF view to LINE and configure Firebase Functions for you.
You can get LIFF view IDs programmatically, in your Firebase Functions project using the following code.
import * as functions from 'firebase-functions';
const views = functions.config().views;
const richMenus = functions.config().richmenus;
Let's say you previously add a view named some_view, you can create URL using LIFF ID in views like this.
const signUpUrl = `line://app/${views.some_view}`;
When LINE user access this view line://app/${views.some_view}, the user will see web-views/src/some-view.html hosted on Firebase Hosting.
To enable LINE Things, read LINE Things Starter, Enable LINE Things section
NOTE: things CLIs send requests and console.log back the response data. It will not save any information.
things create:trial --liff <liffId> --name <productName>
things get:trial
things delete:trial --product <productId>
things get:product --device <deviceId>
things get:device --device <deviceId> --user <userId>
things get:device --product <productId> --user <userId>
MIT License
Copyright (c) 2018-2019 intocode Co., Ltd.
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.