Mengenal LINE Frontend Framework ( LIFF ) Part 4

Di part 4 ini sekaligus part terakhir kita akan membahas tentang penjelasan fungsi dari kode atau script dari liff-starter.js atau script dari implementasi LIFF. Di part ini juga kita akan melakukan deploy aplikasi todo liff app yang sudah kita buat di part sebelumnya ke Heroku. Bagi kalian yang belum membaca part-part sebelumnya, bisa mengklik pada link dibawah ini:

Penjelasan Script atau Kode

window.onload = function() {
    const useNodeJS = false;   // if you are not using a node server, set this value to false
    const defaultLiffId = "";   // Masukkan kode liff id kesini

    // DO NOT CHANGE THIS
    let myLiffId = "";

    // if node is used, fetch the environment variable and pass it to the LIFF method
    // otherwise, pass defaultLiffId
    if (useNodeJS) {
        fetch('/send-id')
            .then(function(reqResponse) {
                return reqResponse.json();
            })
            .then(function(jsonResponse) {
                myLiffId = jsonResponse.id;
                initializeLiffOrDie(myLiffId);
            })
            .catch(function(error) {
                document.getElementById("liffAppContent").classList.add('hidden');
                document.getElementById("nodeLiffIdErrorMessage").classList.remove('hidden');
            });
    } else {
        myLiffId = defaultLiffId;
        initializeLiffOrDie(myLiffId);
    }
};

Kode diatas adalah tentang environment dari aplikasi LIFF yang kita buat, apakah kita menggunakan Node JS atau tidak. Jika kalian menggunakan Node JS, pastikan ubah nilai dari variabel useNodeJs menjadi true dan variabel defaultLiffId tidak perlu diisi. Tetapi kalau kalian tidak menggunakan Node JS, ubah nilai dari variabel useNodeJs menjadi false dan isi variabel defaultLiffId dengan menggunakan LIFF ID yang sudah kita dapatkan saat melakukan konfigurasi LIFF ID di part sebelumnya.

function initializeLiffOrDie(myLiffId) {
    if (!myLiffId) {
        document.getElementById("liffAppContent").classList.add('hidden');
        document.getElementById("liffIdErrorMessage").classList.remove('hidden');
    } else {
        initializeLiff(myLiffId);
    }
}

Fungsi diatas atau script diatas berfungsi untuk mengecek apakah variabel myLiffId kita bernilai null atau tidak. Variabel myLiffId ini isinya adalah variabel defaultLiffId atau LIFF ID dari aplikasi kita. Jadi kalau variabel tersebut tidak diisi atau bernilai null, maka LIFF tidak akan diinisialisasi dan akan menampilkan pesan error.

function initializeLiff(myLiffId) {
    liff
        .init({
            liffId: myLiffId
        })
        .then(() => {
            // start to use LIFF's api
            initializeApp();
        })
        .catch((err) => {
            document.getElementById("liffAppContent").classList.add('hidden');
            document.getElementById("liffInitErrorMessage").classList.remove('hidden');
        });
}

Nah jika variabel dari myLiffId tidak bernilai null, maka script diatas akan dijalankan. Script diatas berfungsi untuk menginisialisasi aplikasi LIFF kita dan memanggil atau menggunakan dari LIFF API. Apabila inisialisasi LIFF kita gagal, maka sistem akan menampilkan pesan error.

function initializeApp() {
    displayIsInClientInfo();
    registerButtonHandlers();

    // check if the user is logged in/out, and disable inappropriate button
    if (liff.isLoggedIn()) {
        document.getElementById('liffLoginButton').disabled = true; 
    } else {
        document.getElementById('liffLogoutButton').classList.toggle('hidden');
    }
}

Fungsi dari script diatas adalah untuk memanggil dari LIFF API, seperti mengecek apakah pengguna sudah login atau belum, mengecek apakah pengguna membuka aplikasi di dalam LINE atau membuka di browser eksternal. Kalau pengguna sudah melakukan login, maka tombol login tidak akan berfungsi atau dimatikan. Tapi kalau pengguna belum melakukan login, maka tombol logout tidak akan ditampilkan jadi hanya tombol login saja yang ditampilkan.

function displayIsInClientInfo() {
    if (liff.isInClient()) {
        document.getElementById('liffLoginButton').classList.toggle('hidden');
        document.getElementById('liffLogoutButton').classList.toggle('hidden');
        document.getElementById('isInClientMessage').textContent = 'Membuka aplikasi di dalam aplikasi LINE';
    } else {
        document.getElementById('isInClientMessage').textContent = 'Membuka aplikasi di browser eksternal';
        document.getElementById('openWindowButton').classList.toggle('hidden');
        document.getElementById('closeWindowButton').classList.toggle('hidden');
        document.getElementById('sendMessageButton').classList.toggle('hidden');
    }
}

Fungsi script diatas adalah untuk mengecek apakah pengguna membuka aplikasi kita di dalam LINE atau dengan browser eksternal ( di luar LINE ). Kalau pengguna membuka aplikasi di dalam LINE, maka akan muncul keterangan bahwa kita membuka aplikasi di dalam LINE dan tombol seperti login dan logout tidak akan dimunculkan atau disembunyikan. Tapi kalau pengguna membuka aplikasinya melalui browser eksternal ( di luar LINE ) akan muncul keterangan bahwa kita membuka aplikasi di browser eksternal dan tombol seperti kirim pesan, open window , dan close window akan disembunyikan atau tidak ditampilkan di layar.

function registerButtonHandlers() {
    document.getElementById('openWindowButton').addEventListener('click', function() {
        liff.openWindow({
            url: 'https://todoliffapp.herokuapp.com/', // Isi dengan Endpoint URL aplikasi web Anda
            external: true
        });
    });

Fungsi kode diatas adalah untuk membuka aplikasi kita di browser eksternal ( di luar LINE ). Ketika kita menekan atau mengklik tombol Open Eksternal Browser, maka method dari openWindow() akan dijalankan. Fungsi dari method ini adalah membuka aplikasi kita sesuai dengan parameter URL yang kita tetapkan, jadi pastikan untuk mengganti parameter URL tersebut dengan URL aplikasi kita yang sudah di deploy.

function registerButtonHandlers() {
    .  .  .

    document.getElementById('closeWindowButton').addEventListener('click', function() {
        if (!liff.isInClient()) {
            sendAlertIfNotInClient();
        } else {
            liff.closeWindow();
        }
    });

Fungsi kode diatas adalah untuk menutup aplikasi kita. Pada saat kita menekan atau mengklik tombol Close LIFF APP, fungsi tersebut akan mengecek apakah kita menjalankan aplikasi di dalam LINE atau di browser eksternal ( di luar LINE ). Kalau kita membuka aplikasi di browser eksternal ( di luar LINE ) maka akan muncul Notification Alert, dan kalau kita membuka aplikasi di dalam LINE, maka aplikasi kita akan otomatis tertutup.

function registerButtonHandlers() {
    .  .  .  .  .


    .  .  .  .  .

    document.getElementById('liffLoginButton').addEventListener('click', function() {
        if (!liff.isLoggedIn()) {
            liff.login();
        }
    });

    document.getElementById('liffLogoutButton').addEventListener('click', function() {
        if (liff.isLoggedIn()) {
            liff.logout();
            window.location.reload();
        }
    });

Fungsi script diatas adalah untuk melakukan login dan logout. Kalau kita menekan atau mengklik tombol login, maka method login() akan dijalankan dan kita akan diarahkan pada login LINE. Kalau kita menekan atau mengklik tombol logout, fungsi diatas akan mengecek apakah kita sudah melakukan login sebelumnya, jika sudah maka method logout() akan dijalankan, dan otomatis kita logout dari aplikasi.

function registerButtonHandlers() {
    .  .  .  .  .

    .  .  .  .  .

    .  .  .  .  .

    .  .  .  .  .

    document.getElementById('sendMessageButton').addEventListener('click', function() {
        if (!liff.isInClient()) {
            sendAlertIfNotInClient();
        } else {
            let todosList = [];

            // Get todo from local storage
            let todos = JSON.parse(localStorage.getItem("todos"));

            todos.forEach((todo) => {
                todosList.push(todo);
            })

            if(todosList.length == 0) {
                window.alert("Todo list anda masih kosong!");
            } else {
                liff.sendMessages([{
                    'type': 'text',
                    'text': `Todo list hari ini adalah \n\n- ${todosList.join('\n- ')}`
                }]).then(function() {
                    window.alert('Pesan berhasil dikirim!');
                    window.location.reload();
                }).catch(function(error) {
                    window.alert('Pesan gagal dikirim: ' + error);
                    window.location.reload();
                });
            }   
        }
    });
}

Fungsi script diatas adalah untuk mengirim pesan LINE. Ketika kita menekan atau mengklik tombol Kirim Pesan atau Send Message, maka kita ambil terlebih dahulu todo list yang ada di local storage browser lalu kita tambahkan ke array yang kita buat yaitu todosList. Kalau array masih kosong, maka aplikasi akan menampilkan notifikasi berupa alert dengan pesan bahwa Todo list masih kosong, tapi kalau array tidak kosong maka method sendMessages() akan dijalankan dan aplikasi otomatis akan mengirimkan pesan sesuai dengan parameter text yang kita buat. Jika pesan berhasil dikirim maka aplikasi akan otomatis menampilkan notifikasi berhasil dan jika pesan gagal dikirim maka aplikasi akan otomatis menampilkan pesan gagal.

function sendAlertIfNotInClient() {
    alert('This button is unavailable as LIFF is currently being opened in an external browser.');
}

Fungsi script diatas adalah untuk notifikasi alert di layar ketika suatu tombol atau aplikasi LIFF tidak mendukung di browser eksternal ( di luar LINE ).

Deploy Aplikasi ke Heroku

Sebelum kita melakukan deploy aplikasi kita ke Heroku, pastikan kita sudah mempunyai akun Heroku. Kalau belum punya, kalian bisa langsung mengunjungi situs resmi Heroku lalu lakukan pendaftaran akun terlebih dahulu.

Untuk melakukan deploy aplikasi ke Heroku, caranya adalah seperti dibawah ini

Lakukan login dengan menggunakan akun Heroku yang sudah terdaftar untuk masuk ke halaman dashboard Heroku.
Buat repositori Heroku dengan cara klik pada Add lalu klik bagian Create new app
Isi kolom App name untuk nama aplikasi atau repositori kita dan untuk bagian region kita pilih yang opsi United States. Jika sudah klik Create app
Setelah project atau repositori berhasil dibuat, kalian akan diarahkan ke halaman dashboard projek. Sampai langkah ini kita sudah berhasil membuat projek atau repostori kosong di Heroku, untuk dapat menambahkan file aplikasi kita ke Heroku, kita akan menggunakan perintah Git, karena pada dasarnya projek di Heroku itu berbentuk repository. Nah untuk segala pengelolaan aplikasi baik menambahkan file, mengedit file kita akan menggunakan command line atau shell. Oleh karena itu kita membutuhkan Heroku CLI.
Install Heroku CLI di komputer anda. Apa itu Heroku CLI ? Heroku CLI itu adalah sebuah alat yang memudahkan kita untuk membuat dan mengelola aplikasi kita langsung melalui terminal atau cmd. Kalian bisa unduh Heroku CLI pada halaman Devcenter Heroku
Setelah melakukan proses instalasi Heroku CLI, buka terminal untuk Linux atau command prompt ( cmd ) untuk Windows dan pastikan sudah masuk ke direktori atau folder projek kita. Contohnya seperti
```
D:\belajar\belajar-liff
```
Lalu masukkan perintah seperti dibawah ini ( tanpa tanda $ )
```
$ heroku login
```
Setelah itu klik sembarang tombol di keyboard untuk melakukan login. Setelah itu, kalian akan diarahkan menuju web browser untuk melakukan proses login. Klik tombol Login.
Setelah melakukan login maka tampilan pada web browser kalian akan seperti ini
Proses login pada Heroku CLI sudah berhasil, selanjutnya kita akan deploy aplikasi kita ke Heroku repositori yang sudah dibuat sebelumnya.
Tambahkan file index.php ke dalam direktori atau folder dari projek kita dan tempatkan di root direktori projek kita ( sejajar dengan file index.html ). Lalu, masukkan kode dibawah ini ke dalamnya.
```
<?php
include_once("index.html");
```
Setelah itu, kita buka kembali terminal atau command promt ( cmd ) kita, lanjutkan dengan perintah git dibawah ini (tanpa tanda $ )
```
$ git init
$ heroku git:remote -a namaprojectdiheroku
```
Nama projek sesuaikan dengan yang sudah dibuat di Heroku sebelumnya.
Kita tambahkan file-file yang ada di projek kita ke dalam repositori Heroku dengan perintah git dibawah ini ( tanpa tanda $ )
```
$ git add . 
$ git commit -am "first commit"
$ git push heroku master
```
Untuk pesan pada git commit bisa disesuaikan dengan perubahan apa saja yang terjadi pada file di projek kalian.

Hooray! Selamat kita sudah berhasil melakukan deploy aplikasi kita ke Heroku, selanjutnya adalah langkah terakhir yaitu menambahkan link aplikasi kita ke LIFF. Caranya adalah:

Pada dashboard projek di Heroku, kita masuk ke bagian Settings.
Di menu Settings, dan cari bagian Domains. Disitu kita dapat melihat URL aplikasi kita, salin atau copy URL tersebut.
Pergi ke halaman LINE Developers dan masuk ke channel, lalu masuk pada bagian LIFF, setelah itu pada bagian Endpoint URL kita ganti dengan URL yang sudah di salin tadi.
Klik update jika sudah beres.
Setelah itu, kita ubah status channel kita dari Developing menjadi Published. Di bagian channel, kita klik pada bagian status.
Klik Publish untuk mengubah status dari Developing ke Published
Kita coba jalankan aplikasi kita di dalam LINE. Caranya salin LIFF URL yang ada pada pengaturan LIFF.
Letakkan LIFF URL tersebut ke dalam ruang obrolan di LINE
Kita buka URL atau tautan tersebut dan aplikasi LIFF kita sudah bisa digunakan. Untuk membuka aplikasi di luar LINE atau di browser eksternal, caranya cukup dengan membuka URL aplikasi kita di internet browser seperti Chrome, Mozilla dan lainnya.

Hooray! Selamat kita sudah berhasil membuat aplikasi LIFF dan mendeploy ke Heroku. Untuk lebih lanjutnya kalian bisa mengeksplor lebih lanjut fitur-fitur yang ada pada LINE LIFF. Terima Kasih sudah membaca dan mengikuti semua part, jangan lupa untuk share ke teman-teman kalian dan jika ada pertanyaan atau saran maupun masukkan, kalian bisa sampaikan melalu koemntar di bawah. See You Next Time!