Membangun Aplikasi Seluler Multi-Platform Real-Time: Contoh Menggunakan Kerangka Ionic dan Firebase

Salah satu masalah utama yang dihadapi perusahaan saat membuat aplikasi smartphone adalah biaya yang berlipat ganda untuk membangun aplikasi asli di berbagai platform. Sementara pengembang front-end yang cerdas telah menyesuaikan diri dengan pengembangan beberapa platform hybrid yang menjanjikan untuk membantu mengatasi masalah ini, Ionic Framework dan Firebase adalah duo dinamis yang bersama-sama benar-benar memberi kami fleksibilitas luar biasa dalam membangun aplikasi ponsel cerdas waktu nyata menggunakan JavaScript dan HTML5 .

Tutorial ini memperkenalkan kemampuan alat pengembangan seluler multi-platform ini dan bahkan memberikan beberapa contoh Ionic dan Firebase.

(Catatan: Artikel ini mengasumsikan beberapa keakraban dengan dasar-dasar kerangka kerja AngularJS. Inilah pos pengantar yang bagus tentang AngularJS bagi mereka yang tidak memiliki latar belakang itu.)

Memperkenalkan Kerangka Ionik

Kerangka Ionic terdiri dari tiga komponen utama:

1. Kerangka kerja UI berbasis SASS yang dirancang dan dioptimalkan untuk UI seluler.
2. Kerangka kerja JavaScript front-end AngularJS yang digunakan untuk membangun aplikasi yang skalabel dan cepat dengan cepat.
3. Kompiler (Cordova atau PhoneGap) untuk aplikasi seluler asli dengan CSS, HTML, dan JavaScript.

Kerangka kerja Ionic juga dikemas dengan banyak komponen CSS yang berguna di luar kotak.

Kudos to Ionic untuk menyediakan dokumentasi ekstensif, contoh, dan video pemula untuk membantu menyederhanakan kurva pembelajaran dan membuat pengembang siap dan berjalan dengan cepat.

Memperkenalkan Firebase

Firebase adalah sistem data tanpa skema backend-as-a-service yang menyediakan sinkronisasi data waktu nyata tanpa memerlukan kode khusus apa pun untuk ditulis. Firebase membuat sebagian besar pengembangan back-end Anda menjadi usang, sehingga secara signifikan mengurangi waktu pengembangan multi-platform.

Fitur dan manfaat utama meliputi:

1. Perubahan data tanpa perubahan kode. Semua perubahan data segera dipublikasikan ke klien, tanpa perlu modifikasi kode backend.
2. Banyak adapter. Ada adaptor, dengan dukungan dan dokumentasi yang baik, untuk semua kerangka kerja JavaScript populer, dan SDK platform seluler. (Kami menggunakan AngularFire, yang merupakan pengikatan AngularJS untuk Firebase, dalam artikel ini.)
3. Kemudahan otentikasi. Otentikasi di Firebase semudah panggilan metode tunggal, terlepas dari metode otentikasi. Mendukung email dan kata sandi sederhana, Google, Facebook, Twitter, atau login berbasis Github.
4. Offline diaktifkan. Semua data Firebase diaktifkan secara offline, sehingga aplikasi dapat sepenuhnya (atau hampir sepenuhnya) berfungsi dalam mode terputus. Aplikasi secara otomatis disinkronkan ketika koneksi dipulihkan.
5. Dasbor konfigurasi. Sebagian besar Firebase (misalnya, aturan keamanan) dapat dengan mudah dikonfigurasi melalui antarmuka dasbor intuitif Firebase.
6. JSON-sentris. Di Firebase, semua data disimpan dan diambil dalam bentuk objek JSON.

Firebase juga menawarkan layanan cloud untuk menghosting kode front-end yang dapat menghemat waktu yang signifikan dalam penerapan dan pemeliharaan.

Perlu juga dicatat bahwa Firebase diakuisisi oleh Google Oktober lalu yang telah memberikan perhatian dan visibilitas yang lebih signifikan.

Contoh Kasus Penggunaan Sederhana: Pelacakan Biaya

Teman sekamar sering berbagi pengeluaran dan saling mengandalkan pada saat dibutuhkan. Jadi, mari bantu teman sekamar melacak pengeluaran mereka, dan bantu mereka berdamai di akhir bulan.

Untuk membuat segalanya lebih menarik, mari kita buat aplikasi seluler multi-platform yang akan memberikan pembaruan waktu nyata, sehingga mereka dapat memantau pengeluaran saat terjadi.

Sekarang kita telah memutuskan apa yang ingin kita buat dan kita telah diperkenalkan dengan alat-alatnya, mari kita mulai!

Memulai dengan Ionic dan Firebase

Hal pertama yang perlu kita lakukan adalah menginstal Ionic. Ikuti petunjuk penginstalan yang tersedia di halaman Memulai Ionic. (Perhatikan bahwa Ionic memiliki ketergantungan pada NodeJS, jadi instruksinya akan mengharuskan Anda untuk menginstalnya juga jika Anda belum memilikinya di mesin Anda).

Tutorial AngularFire 5 menit adalah tempat yang bagus untuk mulai mengenal Firebase. Dan jika Anda seorang "pengacau" atau pembelajar taktil seperti saya, Anda mungkin ingin menarik implementasi saya dari GitHub dan mulai bermain dengan kodenya.

Mengkodekan Aplikasi Multi-Platform Kami

Untuk tutorial ini, kita akan menggunakan contoh aplikasi tabs yang disediakan sebagai bagian dari instalasi Ionic sebagai dasar untuk aplikasi kita. (Anda dapat menjalankan aplikasi sampel dengan perintah ionic start myApp tabs .)

Buka aplikasi tabs sampel di IDE favorit Anda (saya menggunakan Webstorm) dan mari kita mulai memodifikasinya untuk membangun aplikasi teman sekamar kita.

Untuk contoh aplikasi Ionic dan Firebase, kita memerlukan tiga layar berikut:

Sebelum membuat layar ini, mari hapus "Layar detail teman" yang disediakan secara default dengan aplikasi contoh sebagai berikut:

1. Hapus file www/templates/friend-detail.html .
2. Di www/js/app.js , hapus (atau beri komentar) status untuk friend-detail.html .
3. Di www/js/controllers.js , hapus pengontrol FriendDetailCtrl yang direferensikan dalam status yang kami hapus.

Sekarang mari kita ubah ikon dan teks penyeleksi tab di bagian bawah layar kita menjadi sebagai berikut:

Ini cukup dilakukan dengan membuat perubahan berikut di www/templates/tabs.html :

 <ion-tabs class="tabs-icon-top"> <!-- My Tab --> <ion-tab title="My Expense" icon="icon ion-log-in" href="#/tab/dash"> <ion-nav-view name="tab-dash"></ion-nav-view> </ion-tab> <!-- Friends Tab --> <ion-tab title="Roomie's" icon="icon ion-log-out" href="#/tab/friends"> <ion-nav-view name="tab-friends"></ion-nav-view> </ion-tab> <!-- Account --> <ion-tab title="Account" icon="icon ion-ios7-gear" href="#/tab/account"> <ion-nav-view name="tab-account"></ion-nav-view> </ion-tab> </ion-tabs>

Sebelum kita menghubungkan data kita ke Firebase, mari buat daftar dan ikat ke array yang disebut expenses dengan menambahkan kode berikut ke www/templates/tab-dash.html :

 <ion-view title="My Expenses"> <ion-content> <ion-list> <ion-item ng-repeat="expense in expenses|filter:user.password.email" type="item-text-wrap"> {{expense.label}} <span class="badge badge-balanced">{{expense.cost}}</span> </ion-item> </ion-list> <div class="card assertive"> <div class="item item-text-wrap"> Total Spent <span class="badge badge-positive">{{getTotal()}}</span> </div> </div> </ion-content> <ion-footer-bar> <input ng-model='label' type='text' placeholder='Type a new expense...' /> <input ng-model='cost' type="number" placeholder='$' /> <button class="button icon-left ion-plus" ng-click="addExpense($event)">Add</button> </ion-footer-bar> </ion-view>

Kita juga perlu memperluas DashCtrl di www/js/controllers.js untuk menyertakan larik expenses , serta metode addExpense dan metode getTotal , sebagai berikut:

 .controller('DashCtrl', function($scope) { $scope.expenses = [{ by: 'email', label: 'test', cost: 10 }]; $scope.addExpense = function(e) { $scope.expenses.push({ by: < some email > label: $scope.label, cost: $scope.cost }); $scope.label = ""; $scope.cost = 0; }; $scope.getTotal = function() { var rtnTotal = 0; for (var i = 0; i < $scope.expenses.length; i++) { rtnTotal += $scope.expenses[i].cost; } return rtnTotal; }; })

Larik expenses adalah yang menyimpan item dalam daftar pengeluaran, metode addExpense() menambahkan nilai baru ke larik expenses , dan metode getTotal() memberi kita total semua item dalam larik.

Serangkaian perubahan serupa sekarang perlu dilakukan pada tab-friends.html . Coba lakukan ini sendiri, tetapi jika Anda mengalami masalah, atau ingin memverifikasi bahwa Anda telah melakukannya dengan benar, Anda dapat merujuk ke implementasi saya di GitHub.

Mengait di Firebase

Anda akan memerlukan akun Firebase. Anda dapat mendaftar di sini untuk mendapatkan "Paket Peretas" Firebase gratis.

Setelah Anda mendaftar, Anda akan menerima url root Anda, yang akan terlihat seperti https://<yourfirebase>.firebaseio.com .

Mengaktifkan Firebase di aplikasi kami memerlukan dua mod kecil untuk aplikasi kami.

Pertama, kita perlu menyertakan skrip Firebase dalam file www/index.html aplikasi sebagai berikut:

 <script src='https://cdn.firebase.com/js/client/1.1.1/firebase.js'></script> <script src='https://cdn.firebase.com/libs/angularfire/0.8.0/angularfire.min.js'></script> <script src="js/app.js"></script>

Selanjutnya, kita perlu menambahkan modul Firebase ke aplikasi kita dengan menambahkan 'firebase' ke daftar di modul 'starter' AngularJS kita:

 angular.module('starter', ['ionic', 'starter.controllers', 'starter.services', 'firebase'])

Firebase sekarang diaktifkan, sama seperti modul AngularJS lainnya.

Tutorial 5 menit AngularFire akan mengajarkan Anda untuk membuat referensi data di pengontrol. Namun, untuk aplikasi demo kami, saya memutuskan untuk menyimpan referensi ini di layanan terpisah (karena ini mempermudah pemeliharaan dan pembaruan jika url root diubah). Untuk membuat layanan ini, tambahkan berikut ini ke www/js/services.js :

 .factory('fireBaseData', function($firebase) { var ref = new Firebase("https://luminous-fire-3429.firebaseio.com/"), refExpenses = new Firebase("https://luminous-fire-3429.firebaseio.com/expenses"), refRoomMates = new Firebase("https://luminous-fire-3429.firebaseio.com/room-mates"); return { ref: function() { return ref; }, refExpenses: function() { return refExpenses; }, refRoomMates: function() { return refRoomMates; } } });

Kode di atas menambahkan tiga url referensi. Satu untuk akar dan dua untuk koleksi yang kami beri nama expenses dan room-mates .

Menambahkan koleksi baru ke Firebase cukup dilakukan dengan menambahkan namanya di akhir url root Anda. Jadi untuk membuat koleksi expenses yang kita perlukan, yang kita perlukan hanyalah sebagai berikut:

https://<yourfirebase>.firebaseio.com/expenses

Ini akan membuat koleksi expenses , dan kemudian kita dapat mulai menambahkan objek ke dalamnya.

Oke, sekarang kita bisa menghubungkan koleksi pengeluaran dari Firebase untuk menggantikan array pengeluaran "dummy" yang kita buat sebelumnya. Ini dilakukan dengan memodifikasi DashCtrl di www/js/controllers.js sebagai berikut:

 .controller('DashCtrl', function($scope, fireBaseData, $firebase) { $scope.expenses = $firebase(fireBaseData.refExpenses()).$asArray(); $scope.addExpense = function(e) { $scope.expenses.$add({ by: < someemail > , label: $scope.label, cost: $scope.cost }); $scope.label = ""; $scope.cost = 0; }; $scope.getTotal = function() { var rtnTotal = 0; for (var i = 0; i < $scope.expenses.length; i++) { rtnTotal += $scope.expenses[i].cost; } return rtnTotal; }; })

Serangkaian perubahan serupa perlu dilakukan pada FriendsCtrl . Saya sekali lagi menyarankan Anda untuk mencoba melakukan ini sendiri, tetapi jika Anda mengalami masalah, atau ingin memverifikasi bahwa Anda telah melakukannya dengan benar, Anda dapat merujuk ke implementasi saya di GitHub.

Untuk memverifikasi bahwa itu berfungsi, saat menjalankan aplikasi pada dua klien yang berbeda, tambahkan pengeluaran baru, dan lihat apakah itu muncul di daftar pada kedua klien. Jika berhasil ... woo-hoo! Sekarang Anda telah berhasil menghubungkan aplikasi Ionic Anda dengan Firebase!

Anda dapat menguji aplikasi multi-platform Anda pada perangkat yang berbeda dengan menghubungkan perangkat ke sistem Anda dan menjalankan ionic run android atau ionic emulate ios . Lihat dokumentasi Ionic untuk informasi selengkapnya tentang pengujian aplikasi Anda.

Manajemen dan Keamanan Akun dengan Firebase

Meskipun fungsi dasarnya sekarang berfungsi, satu masalah serius adalah aplikasi kami saat ini benar-benar tidak aman. Seluruh dunia dapat melihat pengeluaran Anda, tanpa izin atau login apa pun yang diperlukan. Ini jelas perlu disikapi.

Firebase menyediakan kerangka kerja otentikasi yang kuat namun sederhana menggunakan "aturan". Ada banyak hal yang dapat dilakukan dengan menggunakan Bahasa Aturan Firebase. (Lihat dokumentasi keamanan Firebase untuk detail lebih lanjut.)

Dalam kasus kami, kami akan menulis aturan yang sangat sederhana untuk memblokir pengguna yang tidak sah mengakses data kami. Untuk melakukan ini, buka url root Anda, klik "Keamanan & Aturan" di bilah tindakan kiri Anda, tempel kode di bawah ini di aturan Anda, dan klik Simpan.

 { "rules": { ".read": "auth != null", ".write": "auth != null" } }

Jika Anda menjalankan aplikasi Anda sekarang, Anda akan melihat bahwa tidak ada data. Anda bahkan dapat mencoba untuk memeriksa permintaan Anda dengan menggunakan alat browser dan Anda akan melihat pesan di konsol Anda yang menyatakan bahwa Anda tidak berwenang untuk melihat data.

Membuat Akun Pengguna dan Mengaktifkan Login

Anda dapat mengautentikasi pengguna Anda dengan membiarkan mereka membuat kombinasi email/kata sandi mereka sendiri, atau menggunakan kredensial masuk Google, Facebook, Twitter, atau Github mereka yang sudah ada. Untuk autentikasi email/kata sandi, Firebase menawarkan set lengkap metode API untuk mengubah kata sandi, mengatur ulang, dll. Informasi lebih lanjut tentang autentikasi menggunakan Firebase dapat ditemukan di panduan Firebase.

Untuk aplikasi demo kami, kami akan membuat dua akun pengguna melalui antarmuka Firebase. Ini dapat dilakukan dengan membuka url root Firebase Anda dan melakukan hal berikut:

1. Klik Login & Auth di bilah tindakan sebelah kiri.
2. Pilih kotak centang untuk Aktifkan Otentikasi Email & Kata Sandi.
3. Gulir ke bawah untuk menemukan "Formulir Tambahkan Akun Baru"
4. Tambahkan akun Anda menggunakan "Tambah Pengguna Baru".

Untuk mengaktifkan antarmuka login untuk pengguna Anda, pertama-tama tambahkan kode berikut ke www/templates/tab-account.html :

 <ion-view title="Account"> <ion-content> <div class="list" ng-show="showLoginForm"> <label class="item item-input"> <span class="input-label">Email</span><input type="text" ng-model="em"/> </label> <label class="item item-input"> <span class="input-label">Password</span><input type="password" ng-model="pwd"/> </label> <button class="button button-block button-positive" ng-click="login(em, pwd)">Login</button> </div> <div class="card" ng-hide="showLoginForm"> <div class="item item-text-wrap">You are logged in as {{user.password.email}}</div> </div> <button class="button button-stable" ng-click="logout()" ng-hide="showLoginForm">Logout</button> </ion-content> </ion-view>

Kemudian tambahkan berikut ini ke AccountCtrl di www/controller.js :

 .controller('AccountCtrl', function($scope, fireBaseData) { $scope.showLoginForm = false; //Checking if user is logged in $scope.user = fireBaseData.ref().getAuth(); if (!$scope.user) { $scope.showLoginForm = true; } //Login method $scope.login = function (em, pwd) { fireBaseData.ref().authWithPassword({ email : em, password : pwd },function(error, authData) { if (error === null) { console.log("User ID: " + authData.uid + ", Provider: " + authData.provider); $scope.user = fireBaseData.ref().getAuth(); $scope.showLoginForm = false; $scope.$apply(); } else { console.log("Error authenticating user:", error); } }); }; // Logout method $scope.logout = function () { fireBaseData.ref().unauth(); $scope.showLoginForm = true; }; });

Satu hal penting yang harus diperhatikan dari sudut pandang keamanan adalah bahwa login Firebase persisten secara default . Oleh karena itu, jika Anda ingin pengguna Anda harus login setiap kali aplikasi dimulai, Anda perlu memodifikasi konfigurasi Firebase yang sesuai. Untuk melakukan ini, hanya satu kali setelah login berhasil, jalankan kode berikut:

 var r = $firebase(fireBaseData.refRoomMates()).$asArray(); // NOTE: Substitute the email addresses of your two user accounts in the line below r.$add(["[email protected]","[email protected]"]);

Anda dapat menambahkan ini di pengontrol akun setelah login berhasil, atau menempatkan break point setelah login berhasil dan menjalankannya di inspektur konsol Anda.

Penyaringan Berdasarkan Pengguna

Aplikasi seluler multi-platform masih kehilangan satu fitur penting. Kami ingin membedakan pengeluaran Anda dari pengeluaran teman sekamar Anda. Sekarang kita telah membuat dua akun, kita hanya perlu memfilter data pada tampilan kita.

Pertama-tama kita perlu memodifikasi dashCtrl di www/js/controllers.js untuk (a) mendapatkan data untuk pengguna saat ini ke dalam $scope dan (b) menghemat biaya tambahan untuk pengguna saat ini:

 .controller('DashCtrl', function($scope, fireBaseData, $firebase) { $scope.expenses = $firebase(fireBaseData.refExpenses()).$asArray(); $scope.user = fireBaseData.ref().getAuth(); // ADD MESSAGE METHOD $scope.addExpense = function(e) { $scope.expenses.$add({ by: $scope.user.password.email, label: $scope.label, cost: $scope.cost }); $scope.label = ""; $scope.cost = 0; }; $scope.getTotal = function () { var rtnTotal = 0; for (var i = 0; i < $scope.expenses.length; i++) { rtnTotal += $scope.expenses[i].cost; } return rtnTotal; }; })

Selanjutnya kita perlu menambahkan filter di www/templates/tab-dash.html untuk hanya menampilkan pengeluaran pengguna saat ini:

 <ion-item ng-repeat="expense in expenses|filter:user.password.email" type="item-text-wrap">

Oke, layar Beranda sekarang sempurna. Seorang pengguna hanya dapat melihat dan menambahkan pengeluarannya sendiri.

Langkah terakhir dan terakhir adalah mengaktifkan berbagi daftar pengeluaran lengkap antara teman sekamar. Untuk melakukannya, ubah www/templates/tab-friends.html untuk menambahkan filter ini:

 <ion-item ng-repeat="expense in expenses|filter:roomiesEmail" type="item-text-wrap">

Kemudian modifikasi FriendsCtrl di www/controllers.js sebagai berikut:

 .controller('FriendsCtrl', function($scope, fireBaseData, $firebase) { $scope.user = fireBaseData.ref().getAuth(); $scope.expenses = $firebase(fireBaseData.refExpenses()).$asArray(); $scope.roomies = $firebase(fireBaseData.refRoomMates()).$asArray(); $scope.roomies.$loaded().then(function(array) { //array = [[set1_rm1_email, set1_rm2_email], [set2_rm1_email, set2_rm2_email] ...] for (var i = 0; i < array.length; i++) { if (array[i][0] === $scope.user.password.email) { $scope.roomiesEmail = array[i][1]; } else if (array[i][1] === $scope.user.password.email) { $scope.roomiesEmail = array[i][0]; } } $scope.$apply(); // NOTE: For simplicity, this demo only supports the 2-roommate use case }); $scope.addExpense = function(e) { $scope.expenses.$add({ by: $scope.roomiesEmail, label: $scope.label, cost: $scope.cost }); $scope.label = ""; $scope.cost = 0; }; $scope.getTotal = function () { var rtnTotal = 0; for (var i = 0; i < $scope.expenses.length; i++) { rtnTotal += $scope.expenses[i].cost; } return rtnTotal; }; })

Itu dia! Instal / perbarui aplikasi di perangkat Anda dan perangkat teman sekamar Anda dan Anda harus siap!

Bungkus

Contoh sederhana kami hanya mulai menggores permukaan dari apa yang dapat dicapai – dan betapa mudahnya hal itu dapat dicapai – menggunakan Ionic dan Firebase. Mereka benar-benar duo yang kuat untuk membangun aplikasi smartphone multi-platform real-time menggunakan JavaScript dan HTML5.