Kamiliff
Kamiliff make LIFF easy to use.
Feature
- register LIFF once and reuse to your all path.
- liff_submit event: a hook when LIFF form submit, with form data in js object format.
- liff_send_text_message: quick send message and close LIFF.
Installation & Usage
Create a new rails repository:
# create rails repository
rails new kamiliff_demo
# change directory
cd kamiliff_demo
# install gem
bundle add kamiliff
bundle add dotenv-rails
Add LIFF Endpoint URL
Login to LINE Developers, and create 3 LIFF for 3 different size.
-
For compact
- LIFF app name: Compact
- Size: Compact
- Endpoint URL: https://yourwebsite/liff_entry
-
For tall
- LIFF app name: Tall
- Size: Tall
- Endpoint URL: https://yourwebsite/liff_entry
-
For full
- LIFF app name: Full
- Size: Full
- Endpoint URL: https://yourwebsite/liff_entry
Since the compact size is default. You could only create the compact one.
NOTICE: As LINE announcement, due to a function enhancement with LIFF v2, you should add LIFF apps to LINE Login channel. The LIFF apps added to Messaging API channels are still allowed to use.
For the Behaviors from accessing the LIFF URL to opening the LIFF app setting, please use the Concatenate mode. That's the default value in the Kamiliff. If you want to use the Replace mode(will be removed on March 1, 2021), you can add an enviroment variable LIFF_MODE
and set the value to replace
.
Set environment variables
Create a file .env
with the following content under the root directory. Kamiliff provides two setting ways, you can choose the one based on the position where LIFF apps added.
LINE_LOGIN_CHANNEL_ID={LINE_LOGIN_CHANNEL_ID}
LINE_LOGIN_CHANNEL_SECRET={LINE_LOGIN_CHANNEL_SECRET}
LIFF_COMPACT=https://liff.line.me/{FOR_COMPACT_LIFF_ID}
LIFF_TALL=https://liff.line.me/{FOR_TALL_LIFF_ID}
LIFF_FULL=https://liff.line.me/{FOR_FULL_LIFF_ID}
Generate simple todo resource
Create todo resource:
rails g scaffold todo name desc
rails db:migrate
Create LIFF view
Create liff view for new action at app/views/todos/new.liff.erb
.
<%= render "todos/form.html", todo: @todo %>
<script>
document.title = "new todo";
window.addEventListener("liff_submit", function(event){
var json = JSON.stringify(event.detail.data);
var url = event.detail.url;
var method = event.detail.method;
var request_text = method + " " + url + "\n" + json;
liff_send_text_message(request_text);
});
</script>
The javascript listen to submit button click, and build the message from form data, and send to current LINE chatroom, and then close the LIFF webview.
You could modify those javascript to change the format.
Test LIFF view
Add following content into app/views/todos/index.html.erb
.
<%= liff_path(path: new_todo_path) %>
Copy this url and paste to any LINE chatroom.
Click this url in LINE app.
The correct usage is put this url into Rich Manu or Flex Message or Template Message with url action.
How to change LIFF size
You can change the size of LIFF by adding a parameter to the helper method, like this:
<%= liff_path(path: new_todo_path, liff_size: :compact) %>
<%= liff_path(path: new_todo_path, liff_size: :tall) %>
<%= liff_path(path: new_todo_path, liff_size: :full) %>
Apps use Kamiliff
See my kamiliff demo: https://github.com/etrex/kamiliff_demo
Author
Create by etrex
License
The gem is available as open source under the terms of the MIT License.
How to test this gem
rails t