Gerçek Zamanlı, Çok Platformlu Mobil Uygulamalar Oluşturma: Ionic Framework ve Firebase Kullanan Örnekler

Şirketlerin bir akıllı telefon uygulaması yaparken karşılaştığı en büyük sorunlardan biri, farklı platformlarda yerel bir uygulama oluşturmanın çarpımsal maliyetidir. Bilgili ön uç geliştiriciler, bu sorunu çözmeye yardımcı olmayı vaat eden çeşitli hibrit platformların geliştirilmesine uyum sağlarken, Ionic Framework ve Firebase, birlikte bize JavaScript ve HTML5 kullanarak gerçek zamanlı akıllı telefon uygulamaları oluşturma konusunda gerçekten inanılmaz esneklik sağlayan dinamik bir ikili. .

Bu öğretici, bu çok platformlu mobil geliştirme araçlarının özelliklerini tanıtır ve hatta bazı Ionic ve Firebase örnekleri sağlar.

(Not: Bu makaleler, AngularJS çerçevesinin temellerine biraz aşinalık olduğunu varsaymaktadır. İşte bu arka plana sahip olmayanlar için AngularJS hakkında harika bir giriş yazısı.)

İyonik Çerçevenin Tanıtımı

İyonik Çerçeve üç ana bileşenden oluşur:

1. Mobil UI'ler için tasarlanmış ve optimize edilmiş bir SASS tabanlı UI çerçevesi.
2. Ölçeklenebilir ve hızlı uygulamaları hızla oluşturmak için kullanılan bir AngularJS ön uç JavaScript çerçevesi.
3. CSS, HTML ve JavaScript ile yerel mobil uygulamalar için bir derleyici (Cordova veya PhoneGap).

İyonik çerçeve ayrıca kullanıma hazır çok sayıda yararlı CSS bileşeniyle doludur.

Öğrenme eğrisini basitleştirmeye ve geliştiricileri hızla çalışır duruma getirmeye yardımcı olacak kapsamlı belgeler, örnekler ve başlangıç ​​videoları sağladığı için Ionic'e teşekkür ederiz.

Firebase ile tanışın

Firebase, herhangi bir özel kod yazılmasına gerek kalmadan gerçek zamanlı veri senkronizasyonu sağlayan, hizmet olarak arka uç şemasız bir veri sistemidir. Firebase, arka uç geliştirmenizin çoğunu eski haline getirir, böylece çok platformlu geliştirme süresini önemli ölçüde azaltır.

Temel özellikler ve avantajlar şunları içerir:

1. Kod değişikliği olmadan veri değişir. Tüm veri değişiklikleri, herhangi bir arka uç kodu değişikliği gerekmeden anında istemcilere yayınlanır.
2. Çok sayıda adaptör. Tüm popüler JavaScript çerçeveleri ve mobil platform SDK'ları için iyi destek ve belgelere sahip adaptörler vardır. (Bu makalede, Firebase için AngularJS bağlaması olan AngularFire'ı kullandık.)
3. Kimlik doğrulama kolaylığı. Firebase'de kimlik doğrulama, kimlik doğrulama yönteminden bağımsız olarak tek bir yöntem çağrısı kadar basittir. Basit e-posta ve şifreyi, Google, Facebook, Twitter veya Github tabanlı oturumları destekler.
4. Çevrimdışı etkinleştirildi. Tüm Firebase verileri çevrimdışı etkindir, bu nedenle bir uygulama bağlantısız modda tamamen (veya tama yakın) işlevsel olabilir. Bağlantı geri yüklendiğinde uygulamalar otomatik olarak senkronize edilir.
5. Yapılandırma panosu. Firebase'in çoğu (örneğin güvenlik kuralları), Firebase'in sezgisel pano arayüzü aracılığıyla kolayca yapılandırılabilir.
6. JSON merkezli. Firebase'de tüm veriler JSON nesneleri biçiminde depolanır ve alınır.

Firebase, dağıtım ve bakımda önemli zaman kazandırabilecek ön uç kodunu barındırmak için bulut hizmetleri de sunar.

Ayrıca, Firebase'in geçtiğimiz Ekim ayında Google tarafından satın alınması, ona önemli ölçüde daha fazla dikkat ve görünürlük kazandırdı.

Basit Bir Kullanım Örneği: Gider Takibi

Oda arkadaşları genellikle masrafları paylaşır ve ihtiyaç zamanlarında birbirlerine güvenirler. Öyleyse, oda arkadaşlarının harcamalarını takip etmelerine ve ay sonunda uzlaşmalarına yardımcı olalım.

İşleri daha da ilginç hale getirmek için, gerçek zamanlı güncellemeler sağlayacak çok platformlu bir mobil uygulama oluşturalım, böylece her biri harcamaları gerçekleştikçe izleyebilir.

Artık ne yapmak istediğimize karar verdiğimize ve araçlarla tanıştığımıza göre başlayalım!

Ionic ve Firebase'e Başlarken

Yapmamız gereken ilk şey Ionic'i kurmak. Ionic Başlarken sayfasında sağlanan kurulum talimatlarını izleyin. (Ionic'in NodeJS'ye bağımlılığı olduğunu unutmayın, bu nedenle talimatlar, makinenizde zaten yoksa, onu da yüklemenizi gerektirecektir).

AngularFire 5 dakikalık öğretici, Firebase'i tanımaya başlamak için harika bir yerdir. Ve benim gibi bir "tamirci" veya dokunsal bir öğreniciyseniz, uygulamamı GitHub'dan alıp kodla oynamaya başlamak isteyebilirsiniz.

Çoklu Platform Uygulamamızı Kodlama

Bu eğitim için, uygulamamızın temeli olarak Ionic kurulumunun bir parçası olarak sağlanan örnek tabs uygulamasını kullanacağız. (Örnek uygulamayı ionic start myApp tabs komutuyla çalıştırabilirsiniz.)

Favori IDE'nizde (Webstorm kullanıyorum) örnek tabs uygulamasını açın ve oda arkadaşı uygulamamızı oluşturmak için değiştirmeye başlayalım.

Örnek Ionic ve Firebase uygulamamız için aşağıdaki üç ekrana ihtiyacımız olacak:

Bu ekranları oluşturmadan önce, örnek uygulama ile varsayılan olarak sağlanan “Arkadaşlar detay ekranını” aşağıdaki gibi kaldıralım:

1. www/templates/friend-detail.html dosyasını silin.
2. www/js/app.js , friend-detail.html durumunu kaldırın (veya yorumlayın).
3. www/js/controllers.js içinde, sildiğimiz durumda başvurulan FriendDetailCtrl denetleyicisini kaldırın.

Şimdi ekranımızın alt kısmında bulunan sekme seçicilerin ikonlarını ve yazılarını aşağıdaki gibi değiştirelim:

Bu, www/templates/tabs.html aşağıdaki değişiklikleri yaparak yapılır:

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

Verilerimizi Firebase'e bağlamadan önce, bir liste oluşturalım ve www/templates/tab-dash.html aşağıdaki kodu ekleyerek bunu expenses adlı bir diziye bağlayalım:

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

Ayrıca, www/js/controllers.js içindeki DashCtrl expenses dizisini, ayrıca bir addExpense yöntemini ve getTotal yöntemini aşağıdaki gibi içerecek şekilde genişletmemiz gerekecek:

 .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; }; })

expenses dizisi, gider listesindeki kalemleri depolayan şeydir, addExpense() yöntemi expenses dizisine yeni bir değer ekler ve getTotal() yöntemi bize dizideki tüm öğelerin toplamını verir.

Şimdi tab-friends.html için benzer bir dizi değişiklik yapılması gerekiyor. Bunu kendi başınıza yapmayı deneyin, ancak sorunla karşılaşırsanız veya bunu doğru yaptığınızı doğrulamak istiyorsanız GitHub'daki uygulamama başvurabilirsiniz.

Firebase'de Bağlama

Bir Firebase hesabına ihtiyacınız olacak. Ücretsiz bir Firebase “Hacker Planı” için buradan kaydolabilirsiniz.

Kaydolduğunuzda, https://<yourfirebase>.firebaseio.com gibi görünecek olan kök url'nizi alacaksınız.

Uygulamamızda Firebase'i etkinleştirmek, uygulamamızda iki küçük mod gerektirir.

İlk olarak, Firebase komut dosyalarını uygulamanın www/index.html dosyasına aşağıdaki gibi eklememiz gerekiyor:

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

Ardından, AngularJS 'starter' modülümüzdeki listeye 'firebase' ekleyerek Firebase modülünü uygulamamıza eklememiz gerekiyor:

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

Firebase, diğer AngularJS modüllerinde olduğu gibi artık etkinleştirilmiştir.

AngularFire 5 dakikalık öğretici, denetleyicilerde veri referansları oluşturmayı öğretecektir. Ancak demo uygulamamız için bu referansları ayrı bir hizmette tutmaya karar verdim (çünkü bu, kök url değiştirilirse bakımı ve güncellemeyi çok daha kolay hale getirir). Bu hizmeti oluşturmak için aşağıdakileri www/js/services.js 'ye ekleyin:

 .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; } } });

Yukarıdaki kod, üç referans URL'si ekler. Biri kök için, ikisi de expenses ve room-mates olarak adlandırdığımız koleksiyonlar için.

Firebase'e yeni bir koleksiyon eklemek, adını kök url'nizin sonuna ekleyerek yapılır. İhtiyacımız olan expenses tahsilatını oluşturmak için tek ihtiyacımız olan şey:

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

Bu, expenses tahsilatını oluşturacak ve daha sonra buna nesneler eklemeye başlayabiliriz.

Tamam, şimdi daha önce oluşturduğumuz "sahte" giderler dizisini değiştirmek için Firebase'den gider tahsilatını bağlayabiliriz. Bu, www/js/controllers.js içindeki DashCtrl aşağıdaki gibi değiştirerek yapılır:

 .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; }; })

FriendsCtrl de benzer bir değişiklik yapılması gerekiyor. Bunu tekrar kendi başınıza yapmayı denemenizi tavsiye ederim, ancak sorunla karşılaşırsanız veya bunu doğru yaptığınızı doğrulamak istiyorsanız GitHub'daki uygulamama başvurabilirsiniz.

Çalıştığını doğrulamak için uygulamayı iki farklı istemcide çalıştırırken yeni bir gider ekleyin ve her iki istemcide de listede görünüp görünmediğini görün. İşe yararsa... woo-hoo! Artık Ionic uygulamanızı Firebase ile başarıyla bağladınız!

Sisteminize bir cihaz ionic run android veya ionic emulate ios çalıştırarak çoklu platform uygulamanızı farklı cihazlarda test edebilirsiniz. Uygulamanızı test etme hakkında daha fazla bilgi için Ionic belgelerine bakın.

Firebase ile Hesap Yönetimi ve Güvenlik

Temel işlevsellik şu anda çalışıyor olsa da, ciddi bir sorun, uygulamamızın şu anda tamamen güvensiz olmasıdır. Tüm dünya, herhangi bir izin veya giriş gerekmeden harcamalarınızı görebilir. Bunun ele alınması gerektiği açıktır.

Firebase, "kurallar" kullanarak güçlü ancak basit bir kimlik doğrulama çerçevesi sağlar. Firebase'in Kural Dili kullanılarak yapılabilecek çok şey var. (Daha fazla ayrıntı için Firebase güvenlik belgelerine bakın.)

Bizim durumumuzda yetkisiz kullanıcıların verilerimize erişmesini engellemek için çok basit bir kural yazacağız. Bunu yapmak için kök url'nizi açın, sol işlem çubuğunuzdaki "Güvenlik ve Kurallar"a tıklayın, aşağıdaki kodu kurallarınıza yapıştırın ve Kaydet'e tıklayın.

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

Uygulamanızı şimdi çalıştırırsanız, veri olmadığını fark edeceksiniz. Tarayıcı araçlarını kullanarak isteğinizi incelemeyi bile deneyebilirsiniz ve konsolunuzda verileri görüntüleme yetkinizin olmadığını belirten bir mesaj görmelisiniz.

Kullanıcı Hesapları Oluşturma ve Oturum Açmayı Etkinleştirme

Kullanıcılarınızın kendi e-posta/parola kombinasyonlarını oluşturmalarına izin vererek veya mevcut Google, Facebook, Twitter veya Github oturum açma kimlik bilgilerini kullanarak kimliklerini doğrulayabilirsiniz. E-posta/parola kimlik doğrulaması için Firebase, parola değiştirme, sıfırlama vb. için eksiksiz API yöntemleri seti sunar. Firebase kullanarak kimlik doğrulama hakkında daha fazla bilgi Firebase kılavuzunda bulunabilir.

Demo uygulamamız için Firebase arayüzü üzerinden iki kullanıcı hesabı oluşturacağız. Bu, Firebase kök url'nize gidip aşağıdakileri yaparak yapılabilir:

1. Sol taraftaki işlem çubuğunda Oturum Açma ve Yetkilendirme'ye tıklayın.
2. E-posta ve Parola Kimlik Doğrulamasını Etkinleştirmek için onay kutusunu seçin.
3. "Yeni Hesap Ekleme Formu"nu bulmak için aşağı kaydırın
4. “Yeni Kullanıcı Ekle”yi kullanarak hesaplarınızı ekleyin.

Kullanıcılarınız için oturum açma arayüzünü etkinleştirmek için önce www/templates/tab-account.html adresine aşağıdaki kodu ekleyin:

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

Ardından, www/controller.js içindeki AccountCtrl ekleyin:

 .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; }; });

Güvenlik açısından dikkat edilmesi gereken önemli bir nokta, Firebase oturum açmalarının varsayılan olarak kalıcı olmasıdır. Bu nedenle, uygulama her başlatıldığında kullanıcınızın oturum açmasını istiyorsanız, Firebase yapılandırmasını buna göre değiştirmeniz gerekecektir. Bunu yapmak için, başarılı bir oturum açma işleminden yalnızca bir kez sonra aşağıdaki kodu yürütün:

 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]"]);

Bunu, başarılı bir giriş yaptıktan sonra hesap denetleyicisine ekleyebilir veya başarılı bir giriş yaptıktan sonra bir kesme noktası koyabilir ve konsol denetçinizde çalıştırabilirsiniz.

Kullanıcıya Göre Filtreleme

Çok platformlu mobil uygulamada yine de önemli bir özellik eksik. Harcamalarınızı oda arkadaşınızın harcamalarından ayırt etmek istiyoruz. Artık iki hesap oluşturduğumuza göre, yalnızca görünümlerimizdeki verileri filtrelememiz gerekiyor.

(a) mevcut kullanıcının verilerini $scope içine almak ve (b) mevcut kullanıcı için herhangi bir ek masraftan tasarruf etmek için önce www/js/controllers.js içindeki dashCtrl değiştirmemiz gerekiyor:

 .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; }; })

Daha sonra www/templates/tab-dash.html içine sadece mevcut kullanıcının harcamalarını gösterecek bir filtre eklememiz gerekiyor:

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

Tamam, Ana ekran artık mükemmel. Bir kullanıcı yalnızca kendi giderlerini görebilir ve ekleyebilir.

Son ve son adım, tüm gider listesinin oda arkadaşları arasında paylaşılmasını sağlamaktır. Bunu yapmak için, bu filtreyi eklemek için www/templates/tab-friends.html değiştirin:

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

Ardından www/controllers.js FriendsCtrl aşağıdaki gibi değiştirin:

 .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; }; })

Bu kadar! Uygulamayı hem kendi cihazınıza hem de oda arkadaşınızın cihazına kurun/güncelleyin ve hazır olmalısınız!

Sarmak

Basit örneğimiz, Ionic ve Firebase kullanarak nelerin gerçekleştirilebileceğinin ve ne kadar kolay gerçekleştirilebileceğinin yalnızca yüzeyini çizmeye başlar. JavaScript ve HTML5 kullanarak gerçek zamanlı, çok platformlu akıllı telefon uygulamaları oluşturmak için gerçekten güçlü bir ikili.