Tworzenie wieloplatformowych aplikacji mobilnych w czasie rzeczywistym: przykłady przy użyciu Ionic Framework i Firebase

Jednym z głównych problemów, z jakimi spotykają się firmy podczas tworzenia aplikacji na smartfony, jest zwielokrotniony koszt budowy aplikacji natywnej na różnych platformach. Podczas gdy doświadczeni programiści front-end dostroili się do rozwoju kilku platform hybrydowych, które obiecują pomóc rozwiązać ten problem, Ionic Framework i Firebase to dynamiczny duet, który wspólnie naprawdę daje nam niesamowitą elastyczność w tworzeniu aplikacji na smartfony w czasie rzeczywistym przy użyciu JavaScript i HTML5 .

Ten samouczek przedstawia możliwości tych wieloplatformowych narzędzi programistycznych dla urządzeń mobilnych, a nawet zawiera kilka przykładów Ionic i Firebase.

(Uwaga: ten artykuł zakłada pewną znajomość podstaw frameworka AngularJS. Oto świetny wpis wprowadzający do AngularJS dla osób bez tego tła.)

Przedstawiamy Ionic Framework

Ionic Framework składa się z trzech głównych elementów:

1. Oparta na SASS struktura interfejsu użytkownika zaprojektowana i zoptymalizowana pod kątem mobilnych interfejsów użytkownika.
2. Front-endowy framework JavaScript AngularJS używany do szybkiego tworzenia skalowalnych i szybkich aplikacji.
3. Kompilator (Cordova lub PhoneGap) dla natywnych aplikacji mobilnych z CSS, HTML i JavaScript.

Framework Ionic jest również wyposażony w wiele przydatnych komponentów CSS, które są gotowe do użycia.

Uznanie dla Ionic za dostarczenie obszernej dokumentacji, przykładów i filmów startowych, które pomogą uprościć krzywą uczenia się i szybko uruchomić programistów.

Przedstawiamy Firebase

Firebase to system danych typu backend jako usługa bez schematów, który zapewnia synchronizację danych w czasie rzeczywistym bez konieczności pisania niestandardowego kodu. Firebase sprawia, że ​​większość Twojego zaplecza jest przestarzała, co znacznie skraca czas programowania na wielu platformach.

Najważniejsze cechy i zalety to:

1. Zmiany danych bez zmiany kodu. Wszystkie zmiany danych są natychmiast publikowane dla klientów, bez konieczności modyfikacji kodu zaplecza.
2. Wiele adapterów. Istnieją adaptery, z dobrą obsługą i dokumentacją, dla wszystkich popularnych frameworków JavaScript i SDK platformy mobilnej. (W tym artykule użyliśmy AngularFire, który jest powiązaniem AngularJS dla Firebase).
3. Łatwość uwierzytelniania. Uwierzytelnianie w Firebase jest tak proste, jak wywołanie pojedynczej metody, niezależnie od metody uwierzytelniania. Obsługuje prosty e-mail i hasło, loginy oparte na Google, Facebook, Twitter lub Github.
4. Tryb offline włączony. Wszystkie dane Firebase są dostępne w trybie offline, więc aplikacja może być w pełni (lub prawie w pełni) funkcjonalna w trybie rozłączonym. Aplikacje są automatycznie synchronizowane po przywróceniu połączenia.
5. Pulpit konfiguracyjny. Wiele z Firebase (na przykład reguły bezpieczeństwa) można łatwo skonfigurować za pomocą intuicyjnego interfejsu Firebase.
6. Zorientowany na JSON. W Firebase wszystkie dane są przechowywane i pobierane w postaci obiektów JSON.

Firebase oferuje również usługi w chmurze do hostowania kodu front-endu, co może skrócić czas wdrażania i konserwacji.

Warto również zauważyć, że Firebase zostało przejęte przez Google w październiku ubiegłego roku, co zapewniło mu znacznie większą uwagę i widoczność.

Prosty przykład użycia: śledzenie wydatków

Współlokatorzy często dzielą się wydatkami i polegają na sobie w potrzebie. Pomóżmy więc współlokatorom śledzić ich wydatki i pogodzić ich na koniec miesiąca.

Aby było jeszcze ciekawiej, zbudujmy wieloplatformową aplikację mobilną, która zapewni aktualizacje w czasie rzeczywistym, aby każdy mógł monitorować wydatki na bieżąco.

Teraz, gdy zdecydowaliśmy, co chcemy zbudować i zapoznaliśmy się z narzędziami, zacznijmy!

Pierwsze kroki z Ionic i Firebase

Pierwszą rzeczą, którą musimy zrobić, to zainstalować Ionic. Postępuj zgodnie z instrukcjami instalacji podanymi na stronie Ionic Pierwsze kroki. (Zauważ, że Ionic jest zależny od NodeJS, więc instrukcje będą wymagały zainstalowania go również, jeśli nie masz go jeszcze na swoim komputerze).

5-minutowy samouczek AngularFire to świetne miejsce na rozpoczęcie poznawania Firebase. A jeśli jesteś majsterkowiczem lub uczniem korzystającym z dotyku, jak ja, możesz chcieć pobrać moją implementację z GitHub i zacząć bawić się kodem.

Kodowanie naszej aplikacji wieloplatformowej

W tym samouczku użyjemy przykładowej aplikacji tabs dostarczonej jako część instalacji Ionic jako podstawy naszej aplikacji. (Przykładową aplikację można uruchomić za pomocą polecenia ionic start myApp tabs .)

Otwórz przykładową aplikację tabs w swoim ulubionym IDE (używam Webstorm) i zacznijmy ją modyfikować, aby zbudować naszą aplikację współlokatorów.

W naszej przykładowej aplikacji Ionic i Firebase potrzebujemy następujących trzech ekranów:

Przed utworzeniem tych ekranów usuńmy „Ekran szczegółów znajomych” dostarczany domyślnie z przykładową aplikacją w następujący sposób:

1. Usuń plik www/templates/friend-detail.html .
2. W www/js/app.js usuń (lub skomentuj) stan dla friend-detail.html .
3. W www/js/controllers.js usuń kontroler FriendDetailCtrl , do którego odwołuje się stan, który usunęliśmy.

Teraz zmieńmy ikony i tekst selektorów zakładek na dole naszego ekranu, aby wyglądały następująco:

Można to po prostu zrobić, wprowadzając następujące zmiany w 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>

Zanim podłączymy nasze dane do Firebase, stwórzmy listę i powiążmy ją z tablicą o nazwie expenses , dodając następujący kod do 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>

Musimy również rozszerzyć DashCtrl w www/js/controllers.js o tablicę expenses , a także metodę addExpense i metodę getTotal w następujący sposób:

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

Tablica expenses przechowuje pozycje na liście wydatków, metoda addExpense() dodaje nową wartość do tablicy expenses , a metoda getTotal() podaje sumę wszystkich pozycji w tablicy.

Podobny zestaw zmian należy teraz wprowadzić w tab-friends.html . Spróbuj zrobić to samodzielnie, ale jeśli napotkasz problemy lub chcesz sprawdzić, czy zrobiłeś to poprawnie, możesz zapoznać się z moją implementacją na GitHub.

Podłączanie do Firebase

Będziesz potrzebować konta Firebase. Możesz zarejestrować się tutaj, aby otrzymać bezpłatny „Plan hakerów” Firebase.

Gdy się zarejestrujesz, otrzymasz swój główny adres URL , który będzie wyglądał mniej więcej tak https://<yourfirebase>.firebaseio.com .

Włączenie Firebase w naszej aplikacji wymaga dwóch małych modyfikacji do naszej aplikacji.

Najpierw musimy umieścić skrypty Firebase w pliku www/index.html aplikacji w następujący sposób:

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

Następnie musimy dodać moduł Firebase do naszej aplikacji, dodając 'firebase' do listy w naszym module 'starter' AngularJS:

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

Firebase jest teraz włączony, tak jak każdy inny moduł AngularJS.

5-minutowy samouczek AngularFire nauczy Cię tworzenia odniesień do danych w kontrolerach. Jednak w przypadku naszej aplikacji demonstracyjnej zdecydowałem się zachować te referencje w oddzielnej usłudze (ponieważ znacznie ułatwia to utrzymanie i aktualizację w przypadku zmiany adresu głównego). Aby utworzyć tę usługę, dodaj następujące elementy do 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; } } });

Powyższy kod dodaje trzy referencyjne adresy URL. Jeden dla korzenia i dwa dla kolekcji, które wymieniliśmy jako expenses i room-mates .

Dodanie nowej kolekcji do Firebase polega po prostu na dodaniu jej nazwy na końcu głównego adresu URL . Aby stworzyć zbiór expenses , którego będziemy potrzebować, potrzebujemy tylko:

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

W ten sposób utworzymy kolekcję expenses , a następnie będziemy mogli zacząć do niej dodawać obiekty.

OK, teraz możemy podłączyć zbiórkę wydatków z Firebase, aby zastąpić „fikcyjną” tablicę wydatków, którą stworzyliśmy wcześniej. Odbywa się to poprzez modyfikację DashCtrl w www/js/controllers.js w następujący sposób:

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

Podobny zestaw zmian należy wprowadzić w FriendsCtrl . Ponownie polecam spróbować zrobić to na własną rękę, ale jeśli napotkasz problemy lub chcesz sprawdzić, czy zrobiłeś to poprawnie, możesz zapoznać się z moją implementacją na GitHub.

Aby sprawdzić, czy działa, podczas uruchamiania aplikacji na dwóch różnych klientach, dodaj nowy wydatek i zobacz, czy pojawia się na liście na obu klientach. Jeśli to zadziała… woo-hoo! Udało Ci się połączyć aplikację Ionic z Firebase!

Możesz przetestować swoją wieloplatformową aplikację na różnych urządzeniach, podłączając urządzenie do swojego systemu i uruchamiając ionic run android lub ionic emulate ios . Zapoznaj się z dokumentacją Ionic, aby uzyskać więcej informacji na temat testowania aplikacji.

Zarządzanie kontem i bezpieczeństwo w Firebase

Chociaż podstawowa funkcjonalność już działa, jednym poważnym problemem jest to, że nasza aplikacja jest obecnie całkowicie niepewna. Cały świat może zobaczyć Twoje wydatki, bez żadnych uprawnień ani logowania. Oczywiście należy się tym zająć.

Firebase zapewnia potężne, ale proste środowisko uwierzytelniania przy użyciu „reguł”. Za pomocą języka reguł Firebase można zrobić wiele. (Więcej informacji znajdziesz w dokumentacji zabezpieczeń Firebase).

W naszym przypadku napiszemy bardzo prostą zasadę blokującą dostęp do naszych danych nieuprawnionym użytkownikom. Aby to zrobić, otwórz swój główny adres URL, kliknij „Bezpieczeństwo i reguły” na lewym pasku akcji, wklej poniższy kod w swoich regułach i kliknij Zapisz.

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

Jeśli uruchomisz teraz swoją aplikację, zauważysz, że nie ma danych. Możesz nawet spróbować sprawdzić swoje żądanie za pomocą narzędzi przeglądarki, a w konsoli powinien pojawić się komunikat, że nie masz uprawnień do przeglądania danych.

Tworzenie kont użytkowników i włączanie logowania

Możesz uwierzytelnić swoich użytkowników, pozwalając im tworzyć własne kombinacje adresu e-mail/hasła lub użyć dowolnych z ich istniejących danych logowania do Google, Facebook, Twitter lub Github. W przypadku uwierzytelniania poczty e-mail/hasła Firebase oferuje pełny zestaw metod API do zmiany hasła, resetowania itp. Więcej informacji o uwierzytelnianiu za pomocą Firebase można znaleźć w przewodniku Firebase.

W przypadku naszej aplikacji demonstracyjnej utworzymy dwa konta użytkowników za pośrednictwem interfejsu Firebase. Można to zrobić, przechodząc do głównego adresu URL Firebase i wykonując następujące czynności:

1. Kliknij Logowanie i uwierzytelnianie na pasku akcji po lewej stronie.
2. Zaznacz pole wyboru Włącz uwierzytelnianie e-mailem i hasłem.
3. Przewiń w dół, aby znaleźć „Formularz dodawania nowych kont”
4. Dodaj swoje konta za pomocą „Dodaj nowego użytkownika”.

Aby włączyć interfejs logowania dla swoich użytkowników, najpierw dodaj następujący kod do 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>

Następnie dodaj następujące polecenie do AccountCtrl w 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; }; });

Jedną z ważnych rzeczy, o których należy pamiętać z punktu widzenia bezpieczeństwa, jest to, że logowanie Firebase jest domyślnie trwałe . Dlatego jeśli chcesz, aby użytkownik musiał się logować przy każdym uruchomieniu aplikacji, musisz odpowiednio zmodyfikować konfigurację Firebase. Aby to zrobić, tylko raz po udanym logowaniu, wykonaj następujący kod:

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

Możesz dodać to w kontrolerze konta po pomyślnym zalogowaniu lub umieścić punkt przerwania po pomyślnym zalogowaniu i uruchomić go w inspektorze konsoli.

Filtrowanie na podstawie użytkownika

W wieloplatformowej aplikacji mobilnej wciąż brakuje jednak jednej ważnej funkcji. Chcemy odróżnić Twoje wydatki od wydatków współlokatora. Teraz, gdy utworzyliśmy dwa konta, wystarczy przefiltrować dane w naszych widokach.

Najpierw musimy zmodyfikować dashCtrl w www/js/controllers.js , aby (a) pobrać dane bieżącego użytkownika do $scope i (b) zapisać wszelkie dodatkowe wydatki dla bieżącego użytkownika:

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

Następnie musimy dodać filtr w www/templates/tab-dash.html aby pokazać tylko wydatki bieżącego użytkownika:

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

OK, ekran główny jest teraz doskonały. Użytkownik może tylko zobaczyć i dodać własne wydatki.

Ostatnim i ostatnim krokiem jest umożliwienie współdzielenia pełnej listy wydatków pomiędzy współlokatorami. Aby to zrobić, zmień www/templates/tab-friends.html aby dodać ten filtr:

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

Następnie zmodyfikuj FriendsCtrl w www/controllers.js w następujący sposób:

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

Otóż ​​to! Zainstaluj/zaktualizuj aplikację zarówno na swoim urządzeniu, jak i na urządzeniu współlokatora i wszystko powinno być gotowe!

Zakończyć

Nasz prosty przykład dopiero zaczyna zarysować powierzchnię tego, co można osiągnąć – i jak łatwo można to osiągnąć – używając Ionic i Firebase. To naprawdę potężny duet do tworzenia w czasie rzeczywistym wieloplatformowych aplikacji na smartfony przy użyciu JavaScript i HTML5.