Cara Membuat Aplikasi To-Do List Dengan Polymer dan Cordova

() translation by (you can also view the original English article)

Final product image — What You'll Be Creating

Pengenalan

Kembali di masa awal Android, ketika kerangka kerja antarmuka pengguna yang baik tidak ada dan sebagian besar perangkat Android kurang bertenaga, menciptakan aplikasi hibrid — aplikasi yang dikembangkan menggunakan teknologi web, seperti HTML5, CSS, dan JavaScript — adalah ide yang sangat buruk.

Dibandingkan dengan aplikasi asli, mereka terlihat sangat berbeda dan berkinerja buruk Namun, hari-hari itu sudah lama berlalu. Saat ini, sebagian besar perangkat seluler dapat menjalankan aplikasi hibrida dengan mudah dan ada banyak kerangka kerja yang memungkinkan Anda secara sempurna menjiplak tampilan dan nuansa asli Android. Oleh karena itu, jika Anda menghadapi tenggat waktu singkat atau Anda bekerja dengan anggaran kecil, menggunakan cara hybrid bukan ide yang buruk lagi.

Dalam tutorial ini, saya akan menunjukkan Anda bagaimana untuk menciptakan hibrida sederhana, sebuah to-do list app untuk Android. Antarmuka aplikasi akan sesuai dengan spesifikasi bahan desain Google, tampilan dan nuansa asli Android Lollipop dan Marshmallow. Untuk mencapai hal ini, kita akan menggunakan Polymer, Polymer paper elements, dan Apache Cordova.

Prasyarat

Mengikutinya, Anda akan perlu:

Versi terbaru dari Android SDK
Versi terbaru dari Node.js
perangka tAndroid atau emulator yang menjalankan Android 5.0 atau lebih tinggi
pemahaman dasar tentang HTML5, CSS, dan JavaScript

Jika Anda baru mengenal Cordova, maka luangkan waktu sejenak untuk membaca pengantar ini oleh Wernher-Bel Ancheta. Pengenalan ini akan membantu Anda untuk mempercepat.

1. Mengapa Menggunakan Polimer?

Polimer adalah kerangka kerja yang memungkinkan Anda membuat komponen web khusus dengan cepat, elemen Polimer. Dengan menggunakan elemen Polymer, Anda dapat menjadikan aplikasi web Anda lebih modular dan kode Anda lebih dapat digunakan kembali. Setelah dibuat, elemen dapat digunakan seperti tag HTML lain dalam halaman HTML. Misalnya, jika Anda membuat elemen khusus yang disebut my-elemen, Anda dapat menggunakannya di laman HTML apa pun menggunakan kode berikut:

1	<my-element></my-element>

Terlebih lagi, dengan menggunakan kerangka polimer, Anda dapat memanfaatkan fitur data-binding untuk membuat kode JavaScript Anda lebih sederhana dan tidak rawan kesalahan.

2. Apa Itu Polymer Paper Elements?

Paper elements adalah elemen Polimer yang dibuat dengan mengikuti pedoman material desain. Mereka dapat digunakan sebagai alternatif untuk elemen HTML biasa. Misalnya, jika Anda ingin menambahkan tombol material desain ke halaman Anda, Anda dapat menggunakan elemen paper-button. Kode untuk melakukannya terlihat seperti ini:

1	<paper-button> Click Me! </paper-button>

Demikian pula, jika Anda ingin menambahkan kartu atau tombol aksi mengambang, Anda dapat menggunakan elemen paper-card atau paper-fab. Saya yakin Anda mulai memahami kegunaan dari unsur-unsur polimer dan kertas sekarang.

3. Apa itu Apache Cordova?

Aplikasi yang dibuat menggunakan elemen Polymer dan Polymer pada dasarnya hanya kumpulan file HTML, CSS, dan JavaScript. Ini berarti bahwa ia membutuhkan browser untuk menjalankan. Namun, itu dapat berjalan di dalam tampilan web, elemen antarmuka pengguna asli yang berperilaku seperti browser tanpa Chrome.

Apache Cordova adalah kerangka kerja yang memungkinkan Anda menghasilkan aplikasi asli yang berisi tampilan web dan menentukan halaman HTML yang Anda inginkan untuk ditampilkan. Dalam tutorial ini, kami akan menggunakan Apache Cordova untuk menjalankan aplikasi daftar agenda di perangkat Android.

4. Pengaturan Proyek Web

Untuk mempercepat pengembangan dan membuat debugging lebih mudah, sebagian besar pengembang mulai membangun aplikasi hibrida mereka sebagai aplikasi web. Kami akan melakukan yang sama. Mari kita mulai dengan membuat to-do app sebagai sebuah proyek web biasa yang dapat berjalan di browser.

Buat sebuah direktori baru untuk proyek dan beri nama todoWebApp.

1	mkdir ~/todoWebApp

Untuk mengelola dependensi proyek, kita akan menggunakan Bower. Jika Anda tidak memiliki Bower terinstal, gunakan npm untuk menginstalnya secara global.

1	sudo npm install -g bower

Setelah Bower terinstal, navigasikan ke direktori proyek dan gunakan perintah bower menginstal polimer paper elemen serta yang dibutuhkan.

1	cd ~/todoWebApp
2	bower install PolymerElements/paper-elements

Ini melengkapi setup proyek web.

5. Membuat Elemen Polimer Kustom

Mari kita membuat kode yang mengandung unsur polimer kustom untuk tata letak dan fungsi to-do daftar web app. Mulailah dengan membuat file baru dan nama itu tasks-list.html.

Langkah 1: Mengimpor Paper Elements

Setiap paper elemen yang digunakan dalam tata letak unsur kustom harus diimpor secara individual. Untuk membangun antarmuka web app, kita akan menggunakan elemen berikut:

paper-toolbar untuk membuat toolbar
paper-button untuk membuat berbagai tombol
paper-fab untuk membuat tombol action mengambang
paper-listbox untuk membuat daftar berisi tugas
paper-item untuk membuat tugas individu di dalam daftar
paper-checkbox untuk membuat checkbox pengguna dapat memeriksa untuk menandai tugas sebagai selesai
paper-icon-button menggambar tombol memiliki ikon
paper-input menggambar kolom teks pengguna dapat digunakan untuk memasukkan nama tugas
paper-dialog untuk menciptakan sebuah modal dialog
iron-icons menggambar ikon

Selain itu, untuk menggunakan fungsi data binding yang disediakan oleh Polymer, kita harus mengimpor kerangka Polymer itu sendiri. Menambahkan kode berikut ke file:

<link rel='import' href='bower_components/polymer/polymer.html'/>

<link rel='import' href='bower_components/paper-toolbar/paper-toolbar.html'/>
<link rel='import' href='bower_components/paper-button/paper-button.html'/>
<link rel='import' href='bower_components/paper-fab/paper-fab.html'/>
<link rel='import' href='bower_components/paper-listbox/paper-listbox.html'/>
<link rel='import' href='bower_components/paper-item/paper-item.html'/>
<link rel='import' href='bower_components/paper-checkbox/paper-checkbox.html'/>
<link rel='import' href='bower_components/paper-icon-button/paper-icon-button.html'/>
<link rel='import' href='bower_components/paper-input/paper-input.html'/>
<link rel='import' href='bower_components/paper-dialog/paper-dialog.html'/>
<link rel='import' href='bower_components/iron-icons/iron-icons.html'/>

Langkah 2: Membuat DOM

Anda dapat berpikir elemen polimer sebagai halaman HTML. Sama seperti halaman HTML, polimer elemen memiliki sendiri DOM tree mereka sendiri yang mengandung berbagai tag untuk elemen antarmuka pengguna, tag style untuk styling dan tag script untuk kode JavaScript.

Untuk membuat DOM, kita harus menggunakan tag dom-modul dan menetapkan atribut id dengan nama elemen. Mari kita sebut kustom elemen tasks-list. Perhatikan bahwa nama harus berisi tanda hubung.

1	<dom-module id='tasks-list'>
2
3	</dom-module>

Langkah 3: Membuat Layout

Membuat sebuah layout yang menggunakan elemen polimer yang sederhana seperti menciptakan satu menggunakan elemen HTML, hanya tag yang berbeda. Namun, Anda harus memastikan bahwa semua detail layout berada di dalam template tag.

Berikut adalah kode yang dapat Anda tambahkan ke dom-modul untuk membuat tata letak to-do list app:

<template>
  	<!-- Create a toolbar/actionbar -->
        <paper-toolbar>
            <div class="title"> My Tasks </div>
        </paper-toolbar>

        <div>
			<!-- Create a list of tasks -->
            <paper-listbox>
                <template is='dom-repeat' items='{{ tasks }}'>
					<!-- Create an individual task -->
                    <paper-item>
                        <paper-checkbox checked='{{ item.isComplete }}' 
                            class='flex-11 taskBox' on-change='toggleTask'>
                                {{ item.taskName }}
                        </paper-checkbox>                            
                        <paper-icon-button
                            icon='delete'
                            class='flex-1'
                            style='color: gray'
                            on-click='deleteTask'>
                        </paper-icon-button>                    
                    </paper-item>
                </template>
            </paper-listbox>

			<!-- Create a floating action button -->
            <paper-fab icon='add'
                       style='position:absolute; bottom: 30px; right:24px'
                       on-click='showAddTaskDialog'>
            </paper-fab>

			<!-- Create a modal dialog -->
            <paper-dialog id='addTaskDialog' modal>
                <paper-input label='What do you have to do?' value='{{ latestTaskName }}'>
				</paper-input>
                <div class='buttons'>
                    <paper-button dialog-dismiss>Cancel</paper-button>
                    <paper-button on-click='addTask'>Add</paper-button>
                </div>
            </paper-dialog>
        </div>
</template>

Yang mungkin tampak seperti banyak kode, tetapi jika Anda sudah familiar dengan HTML dan handlebar ekspresi, Anda akan menemukan bahwa cukup intuitif.

Seperti yang Anda lihat, polimer elemen tag dapat digunakan secara bebas bersama tag HTML dan style inline dapat digunakan untuk menyesuaikan penampilan mereka.

Menambahkan event listner ke polimer elemen tag serupa dengan menambahkan satu ke HTML tag. Pada kode di atas, kami telah menggunakan dua type event listeners, on-click listeners untuk mendeteksi tombol diklik dan on-change listeners untuk mendeteksi perubahan-perubahan di states dari checkboxes.

Anda juga mungkin telah memperhatikan bahwa, selain elemen Polimer dan tag HTML, kami telah menggunakan dom-repeat helper template tag. Jika Anda belum menebaknya, ia berfungsi seperti for pernyataan dan dapat digunakan untuk mengulang melalui semua item array. Dalam layout kami, itu sedang digunakan untuk menggambar tugas individu yang berasal dari serangkaian tugas.

Langkah 4: Mendaftar Elemen

Sebelum kita dapat menggunakan elemen polimer kustom dalam halaman HTML, kita harus mendaftar dengan menggunakan fungsi Polimer. Fungsi ini mengharapkan satu objek JavaScript yang berisi fungsi dan properties dari elemen. Setidaknya, objek harus memiliki is properti menetapkan nama custom element.

Tambahkan script tag setelah template tag dan tambahkan kode berikut untuk itu:

1	Polymer({
2	is: 'tasks-list',
3	// more code goes here
4	});

Langkah 5: Initializing Element

Dalam layout element kami, kami telah menggunakan dua sifat dalam handlerbar ekspresi, tasks dan latestTaskName. Namun, elemen tersebut belum memiliki properti tersebut. Untuk menambah dan menginisialisasinya, kita harus menggunakan metode ready. Untuk sekarang, kita hanya dapat menginisialisasi tasks untuk array kosong dan latestTaskName untuk string kosong.

Tambahkan kode berikut setelah is properti:

1	ready: function() {
2	this.tasks = [];
3	this.latestTaskName = "";
4	},

Langkah 6: Storing, Updating, dan Deleting Data

Untuk secara permanen menyimpan tugas yang menambahkan pengguna ke to-do list, kita akan menggunakan local storage melalui objek localStorage. Mari kita sekarang menulis beberapa kode untuk menambahkan tugas untuk penyimpanan lokal.

Layout sudah berisi sebuah paper-dialog yang memiliki sebuah field input yang di mana pengguna dapat masukkan nama tugas. Dialog ditutup secara default, meskipun, yang bukan yang kita inginkan. Di on-click listener tombol tindakan yang mengambang, memanggil metode open dialog untuk membukanya.

1	showAddTaskDialog: function() {
2	this.$.addTaskDialog.open();
3	},

Berkat data bind dua arah Polymer, apa pun yang dimasukkan pengguna ke dalam paper-input dialog langsung tersedia di properti latestTaskName. Oleh karena itu, dalam on-click listener tombol Add dialog, kita hanya dapat menambahkan latestTaskName ke localStorage menggunakan metode setItem.

localStorage menyimpan data dalam bentuk pasangan key-value. Untuk menyimpan tugas, kita akan menggunakan nama tugas sebagai kunci dan apakah selesai atau tidak sebagai nilai. Karena localStorage hanya bekerja dengan string (Boolean yang saat ini tidak didukung), kita akan dapat menyimpan yes jika tugas telah selesai dan no sebaliknya.

Setelah tugas telah ditambahkan, kami dapat menutup dialog menggunakan metode close.

addTask: function() {
	// Store the new task as not completed
    localStorage.setItem(this.latestTaskName, 'no');

	// Reset latestTaskName
	this.latestTaskName="";

	// Close the dialog
    this.$.addTaskDialog.close();

	// Update the list of tasks
    this.updateTasks();
},

Demikian pula, bila pengguna check atau unchecks kotak centang yang terkait dengan task, kita dapat memperbarui nilai yang disimpan dalam objek localStorage dengan menerapkan metode setItem. Karena kita menggunakan dom-repeat helper template untuk menarik setiap item dari paper-listbox, kita dapat menggunakan objek model present dalam on-change event untuk mendapatkan nama tugas yang terkait dengan checkbox. Selain itu, kita perlu mengkonversi nilai boolean checkbox checked status ke 'yes' atau 'no' sebelum menyimpannya dalam localStorage.

toggleTask: function(e) {
	// Get the name of the task
    var taskName = e.model.item.taskName;

	// Convert true/false to yes/no
    if(e.model.item.isComplete)
        localStorage.setItem(taskName, 'yes');
    else
        localStorage.setItem(taskName, 'no');
},

Jika pengguna memilih untuk menghapus tugas, mereka dapat mengklik paper-icon-button yang terkait dengan tugas. Untuk menghapus tugas secara permanen, panggil metode removeItem dari objek localStorage di on-click listener paper-icon-button.

deleteTask: function(e) {
    var taskName = e.model.item.taskName;
    localStorage.removeItem(taskName);

	// Update the list of tasks
    this.updateTasks();
},

Langkah 7: Menampilkan Tugas

Anda mungkin telah memperhatikan panggilan ke updateTasks di addTask dan deleteTask metode. Dalam metode updateTasks, kami memperbarui array task, yang kita diinisialisasi dalam metode ready, untuk mencerminkan isi objek localStorage. Hal ini diperlukan, karena template dom-repeat helper, digunakan untuk menampilkan daftar tugas, bekerja hanya dengan array.

Dalam array tasks, kami menggunakan JSON objek untuk mewakili tugas-tugas. Setiap objek JSON memiliki dua field, taskName, dan isComplete. taskName adalah string yang berisi nama tugas dan isComplete boolean menunjukkan apakah tugas selesai.

Untuk memungkinkan Polimer untuk mendeteksi perubahan-perubahan dalam array tasks, daripada menggunakan fungsi standar array, kita harus menggunakan metode manipulasi array yang hadir dalam elemen polimer. Untuk sekarang, kita akan menggunakan metode splice untuk menghapus semua elemen dari array sekaligus dan push metode untuk menambahkan elemen array.

Kode berikut menciptakan updateTasks metode, yang loop melalui semua item dalam objek localStorage dan menambahkan mereka ke array tasks.

updateTasks: function() {
	// Empty the array
    this.splice('tasks', 0);

	// Add items from localStorage
    for(var taskName in localStorage) {
        var task = {
            taskName: taskName,
            isComplete: localStorage.getItem(taskName) == 'yes'
        };
        this.push('tasks', task);
    }
},

Sekarang, array tasks akan diperbarui hanya ketika pengguna menambahkan atau menghapus tugas. Untuk menampilkan tugas segera setelah aplikasi dibuka, kita harus menambahkan panggilan ke updateTasks metode dalam metode ready.

Elemen polimer kami kustom siap untuk digunakan.

6. Menggunakan Elemen Kustom Polimer

Mari kita sekarang membuat halaman HTML dan menambahkan elemen kustom untuk itu. Buat sebuah file baru, beri nama index.html dan menambahkan tag HTML head dan body untuk itu.

Sebelum kita menggunakan elemen, kita harus menambahkan sebuah link tag untuk mengimpor tasks-list.html. Selain itu, untuk menghilangkan paddings dan margin, dan menggunakan tata letak flex, tambahkan fullbleed, layout, dan vertikal CSS kelas ke tag body. Karena kelas CSS ini didefinisikan oleh unsur iron-flex-layout, kita harus menambahkan sebuah link tag untuk mengimpor.

Dengan impor di atas, kita dapat menambahkan tasks-list tag di dalam tag body. File sekarang harus terlihat seperti ini:

<html>
    <head>
        <link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html"/> 
        <link rel="import" href="./tasks-list.html"/>
    </head>
    <body class="fullbleed layout vertical">
		
		<!-- Use the custom Polymer element -->
        <tasks-list></tasks-list>

    </body>
</html>

7. Menjalankan App di Browser

Aplikasi web to-do kami sudah siap. Karena kerangka polimer kebutuhan HTTP server untuk menjalankan, mulai satu menggunakan Python's SimpleHTTPServer modul di dalam direktori proyek.

1	python -m SimpleHTTPServer

Anda sekarang dapat mengunjungi http://localhost:8000/ untuk menggunakan aplikasi Anda.

8. Pengaturan Proyek Cordova

Sekarang setelah kami berhasil menjalankan aplikasi di browser, saatnya mengubahnya menjadi aplikasi Android dengan menyematkannya di dalam proyek Cordova.

Ini berarti bahwa pertama kita perlu menginstal Cordova CLI (Command Line Interface) secara global menggunakan npm:

1	sudo npm install -g cordova

Untuk membuat sebuah proyek Cordova yang baru, kita dapat menggunakan perintah cordova create. Sebagai argumennya, ia mengharapkan nama direktori tempat proyek Cordova harus dibuat, pengenal nama domain terbalik dari aplikasi, dan nama aplikasi.

Untuk embed proyek web kami dalam proyek Cordova, kita juga perlu menyertakan copy-from pilihan dan menentukan lokasi proyek web.

Perintah berikut membuat proyek Cordova untuk app disebut To-do di dalam direktori yang disebut todo, dan berisi proyek web yang terletak di todoWebApp:

1	cordova create todo com.tutsplus.code.hathi.todoapp "To-do" --copy-from=/home/me/todoWebApp

Proyek Cordova yang baru saja kami buat belum mendukung platform apa pun. Untuk menambahkan dukungan untuk Android platform, navigasikan ke direktori todo dan menggunakan perintah cordova platform.

1	cd todo
2	cordova platform add android

9. Menjalankan Hybrid App

Tanpa harus menulis satu baris kodepun, proyek Cordova kami sudah siap untuk digunakan. Mari buat menggunakan perintah cordova build. Sebelum Anda melanjutkan, pastikan bahwa nilai variabel lingkungan ANDROID_HOME diatur ke lokasi Android SDK.

1	export ANDROID_HOME=/home/me/Android/Sdk/
2	cordova build android

Jika gagal build mengatakan file bernama web-animations.min.js.gz tidak dapat ditambahkan ke APK, cobalah menghapus file dan build proyek lagi.

1	rm -f ./www/bower_components/web-animations-js/web-animations.min.js.gz
2	cordova build android

Setelah berhasil membangun, menyebarkan aplikasi ke perangkat Android Anda menggunakan perintah cordova run.

1	cordova run android

Anda sekarang harus mampu melihat aplikasi yang berjalan pada perangkat Anda.

Kesimpulan

Dalam tutorial ini, Anda belajar bagaimana menggunakan polimer dan polimer kertas elemen untuk menciptakan sebuah to-do list app web. Anda juga belajar bagaimana meng-embed aplikasi web di dalam sebuah proyek Cordova sehingga berjalan sebagai aplikasi hibrida pada perangkat Android. Meskipun kita berfokus hanya pada Android platform, Anda juga dapat menjalankan aplikasi pada perangkat iOS tanpa perubahan kode. Untuk membuat karya ini, Anda perlu menggunakan perintah cordova platform lagi untuk menambahkan dukungan untuk iOS platform.

Untuk mempelajari cara untuk membangun antarmuka yang lebih kompleks yang menggunakan polimer, saya ingin merujuk Anda ke dokumentasi Polimer.