Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Cordova
Code

Cara Membuat Aplikasi To-Do List Dengan Polymer dan Cordova

by
Difficulty:BeginnerLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Muhammad Gufron (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:

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:

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.

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

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

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:

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.

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:

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:

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:

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.

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.

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.

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.

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.

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:

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.

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

App running in Google Chrome

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:

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:

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.

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.

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

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

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

App running on Android device

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.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.