/kamiliff_demo

a demo for kamiliff

Primary LanguageRuby

How To Use

This is a demo for kamiliff: https://github.com/etrex/kamiliff

Start from rails new

rails new kamiliff_demo
bundle add kamiliff

Add LIFF endpoint

Login to line developers, and create 3 LIFF for 3 different size.

Since the compact size is default. You could only create the compact one.

Set environment variables

Install dotenv-rails gem

bundle add dotenv-rails

Create a file .env with the following content:

LIFF_COMPACT=line://app/for_compact_liff_id
LIFF_TALL=line://app/for_tall_liff_id
LIFF_FULL=line://app/for_full_liff_id

You could choose another setting method.

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 from data, and send to current LINE chatroom, and then close the LIFF webview.

You could modify those javascript to change the format.

Test

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