Создание Firebase Powered сквозного ионного приложения

Для разработки нашего приложения мы собираемся использовать две пары компонента ion-tabs . Первый набор вкладок будет использоваться для отображения экранов входа в систему и регистрации, а второй набор вкладок будет использоваться для отображения экранов неполных списков ведра и завершенных элементов списков ведра.

Мы собираемся обернуть наши вкладки в другую абстрактную вкладку, чтобы получить больше контроля. Это доведет общее количество наших маршрутов до шести. Внутри метода run мы $rootScope пару переменных и методов в переменную $rootScope . Это будет включать в себя URL-адрес экземпляра Firebase, checkSession , logout и загрузчики для лучшего UX. Окончательный app.js будет

 angular.module('bucketList', ['ionic', 'firebase', 'bucketList.controllers']) .run(function($ionicPlatform, $rootScope, $firebaseAuth, $firebase, $window, $ionicLoading) { $ionicPlatform.ready(function() { // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard // for form inputs) if (window.cordova && window.cordova.plugins.Keyboard) { cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); } if (window.StatusBar) { StatusBar.styleDefault(); } $rootScope.userEmail = null; $rootScope.baseUrl = 'https://bucketlist-app.firebaseio.com/'; var authRef = new Firebase($rootScope.baseUrl); $rootScope.auth = $firebaseAuth(authRef); $rootScope.show = function(text) { $rootScope.loading = $ionicLoading.show({ content: text ? text : 'Loading..', animation: 'fade-in', showBackdrop: true, maxWidth: 200, showDelay: 0 }); }; $rootScope.hide = function() { $ionicLoading.hide(); }; $rootScope.notify = function(text) { $rootScope.show(text); $window.setTimeout(function() { $rootScope.hide(); }, 1999); }; $rootScope.logout = function() { $rootScope.auth.$logout(); $rootScope.checkSession(); }; $rootScope.checkSession = function() { var auth = new FirebaseSimpleLogin(authRef, function(error, user) { if (error) { // no action yet.. redirect to default route $rootScope.userEmail = null; $window.location.href = '#/auth/signin'; } else if (user) { // user authenticated with Firebase $rootScope.userEmail = user.email; $window.location.href = ('#/bucket/list'); } else { // user is logged out $rootScope.userEmail = null; $window.location.href = '#/auth/signin'; } }); } }); }) .config(function($stateProvider, $urlRouterProvider) { $stateProvider .state('auth', { url: "/auth", abstract: true, templateUrl: "templates/auth.html" }) .state('auth.signin', { url: '/signin', views: { 'auth-signin': { templateUrl: 'templates/auth-signin.html', controller: 'SignInCtrl' } } }) .state('auth.signup', { url: '/signup', views: { 'auth-signup': { templateUrl: 'templates/auth-signup.html', controller: 'SignUpCtrl' } } }) .state('bucket', { url: "/bucket", abstract: true, templateUrl: "templates/bucket.html" }) .state('bucket.list', { url: '/list', views: { 'bucket-list': { templateUrl: 'templates/bucket-list.html', controller: 'myListCtrl' } } }) .state('bucket.completed', { url: '/completed', views: { 'bucket-completed': { templateUrl: 'templates/bucket-completed.html', controller: 'completedCtrl' } } }) $urlRouterProvider.otherwise('/auth/signin'); }); из angular.module('bucketList', ['ionic', 'firebase', 'bucketList.controllers']) .run(function($ionicPlatform, $rootScope, $firebaseAuth, $firebase, $window, $ionicLoading) { $ionicPlatform.ready(function() { // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard // for form inputs) if (window.cordova && window.cordova.plugins.Keyboard) { cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); } if (window.StatusBar) { StatusBar.styleDefault(); } $rootScope.userEmail = null; $rootScope.baseUrl = 'https://bucketlist-app.firebaseio.com/'; var authRef = new Firebase($rootScope.baseUrl); $rootScope.auth = $firebaseAuth(authRef); $rootScope.show = function(text) { $rootScope.loading = $ionicLoading.show({ content: text ? text : 'Loading..', animation: 'fade-in', showBackdrop: true, maxWidth: 200, showDelay: 0 }); }; $rootScope.hide = function() { $ionicLoading.hide(); }; $rootScope.notify = function(text) { $rootScope.show(text); $window.setTimeout(function() { $rootScope.hide(); }, 1999); }; $rootScope.logout = function() { $rootScope.auth.$logout(); $rootScope.checkSession(); }; $rootScope.checkSession = function() { var auth = new FirebaseSimpleLogin(authRef, function(error, user) { if (error) { // no action yet.. redirect to default route $rootScope.userEmail = null; $window.location.href = '#/auth/signin'; } else if (user) { // user authenticated with Firebase $rootScope.userEmail = user.email; $window.location.href = ('#/bucket/list'); } else { // user is logged out $rootScope.userEmail = null; $window.location.href = '#/auth/signin'; } }); } }); }) .config(function($stateProvider, $urlRouterProvider) { $stateProvider .state('auth', { url: "/auth", abstract: true, templateUrl: "templates/auth.html" }) .state('auth.signin', { url: '/signin', views: { 'auth-signin': { templateUrl: 'templates/auth-signin.html', controller: 'SignInCtrl' } } }) .state('auth.signup', { url: '/signup', views: { 'auth-signup': { templateUrl: 'templates/auth-signup.html', controller: 'SignUpCtrl' } } }) .state('bucket', { url: "/bucket", abstract: true, templateUrl: "templates/bucket.html" }) .state('bucket.list', { url: '/list', views: { 'bucket-list': { templateUrl: 'templates/bucket-list.html', controller: 'myListCtrl' } } }) .state('bucket.completed', { url: '/completed', views: { 'bucket-completed': { templateUrl: 'templates/bucket-completed.html', controller: 'completedCtrl' } } }) $urlRouterProvider.otherwise('/auth/signin'); }); 

Обратите внимание, что мы инициализируем сервис Firebase Auth, используя этот код:

 $rootScope.baseUrl = 'https://bucketlist-app.firebaseio.com/'; var authRef = new Firebase($rootScope.baseUrl); $rootScope.auth = $firebaseAuth(authRef); 

Не забудьте заменить baseURL своим экземпляром Firebase

Теперь давайте создадим controllers.js . Создайте новый файл на www/js и назовите его controllers.js . Как следует из названия, этот файл будет содержать все контроллеры. Затем создайте новую папку с именем templates . Мы будем заполнять каждый шаблон по мере продвижения.

Во-первых, у нас есть контроллер регистрации. Давайте сначала создадим необходимые шаблоны. Создайте новый файл с именем auth.html в папке templates . Это будет абстрактная вкладка для вкладок Вход и Регистрация. Заполните его следующим кодом:

 <ion-tabs class="tabs-icon-top"> <ion-tab title="Sign In" icon-on="ion-ios7-locked" icon-off="ion-ios7-locked-outline" href="#/auth/signin"> <ion-nav-view name="auth-signin"></ion-nav-view> </ion-tab> <ion-tab title="Sign Up" icon-on="ion-ios7-personadd" icon-off="ion-ios7-personadd-outline" href="#/auth/signup"> <ion-nav-view name="auth-signup"></ion-nav-view> </ion-tab> </ion-tabs> 

Далее давайте добавим шаблон регистрации. Создайте новый файл с именем auth-signup.html внутри папки templates и добавьте следующий код:

 <ion-header-bar class="bar-positive"> <h1 class="title">Sign Up</h1> </ion-header-bar> <ion-content class="has-header padding"> <div class="list"> <label class="item item-input"> <span class="input-label">Email</span> <input type="text" ng-model="user.email"> </label> <label class="item item-input"> <span class="input-label">Password</span> <input type="password" ng-model="user.password"> </label> <label class="item item-input"> <button class="button button-block button-positive" ng-click="createUser()"> Sign Up </button> </label> </div> </ion-content> 

Когда пользователь нажимает кнопку отправки, мы вызываем createuser() . Контроллер выглядит так:

 angular.module('bucketList.controllers', []) .controller('SignUpCtrl', [ '$scope', '$rootScope', '$firebaseAuth', '$window', function ($scope, $rootScope, $firebaseAuth, $window) { $scope.user = { email: "", password: "" }; $scope.createUser = function () { var email = this.user.email; var password = this.user.password; if (!email || !password) { $rootScope.notify("Please enter valid credentials"); return false; } $rootScope.show('Please wait.. Registering'); $rootScope.auth.$createUser(email, password, function (error, user) { if (!error) { $rootScope.hide(); $rootScope.userEmail = user.email; $window.location.href = ('#/bucket/list'); } else { $rootScope.hide(); if (error.code == 'INVALID_EMAIL') { $rootScope.notify('Invalid Email Address'); } else if (error.code == 'EMAIL_TAKEN') { $rootScope.notify('Email Address already taken'); } else { $rootScope.notify('Oops something went wrong. Please try again later'); } } }); } } ]) 

На что обратить внимание:

1. $rootScope.show() , $rootScope.hide() и $rootScope.notify() определены в app.js для отображения наложения загрузки.
2. $rootScope.auth.$createUser() отвечает за взаимодействие с Firebase и создание нового пользователя.
3. Обратите внимание на различные сообщения об ошибках, возвращаемые Firebase. Вы можете найти весь список здесь .
4. При успешной регистрации мы перенаправим пользователя к нашему основному виду.

Далее идет контроллер Signin. Создайте новый файл с именем auth-signin.html в папке templates и добавьте следующую разметку:

 <ion-header-bar class="bar-positive"> <h1 class="title">Sign In</h1> </ion-header-bar> <ion-content class="has-header padding"> <div class="list"> <label class="item item-input"> <span class="input-label">Email</span> <input type="text" ng-model="user.email"> </label> <label class="item item-input"> <span class="input-label">Password</span> <input type="password" ng-model="user.password"> </label> <label class="item item-input"> <button class="button button-block button-positive" ng-click="validateUser()">Sign In</button> </label> </div> </ion-content> 

Когда пользователь нажимает кнопку отправки, мы вызываем validateUser() . Контроллер будет ( продолжение сверху ):

 .controller('SignInCtrl', [ '$scope', '$rootScope', '$firebaseAuth', '$window', function ($scope, $rootScope, $firebaseAuth, $window) { // check session $rootScope.checkSession(); $scope.user = { email: "", password: "" }; $scope.validateUser = function () { $rootScope.show('Please wait.. Authenticating'); var email = this.user.email; var password = this.user.password; if (!email || !password) { $rootScope.notify("Please enter valid credentials"); return false; } $rootScope.auth.$login('password', { email: email, password: password }) .then(function (user) { $rootScope.hide(); $rootScope.userEmail = user.email; $window.location.href = ('#/bucket/list'); }, function (error) { $rootScope.hide(); if (error.code == 'INVALID_EMAIL') { $rootScope.notify('Invalid Email Address'); } else if (error.code == 'INVALID_PASSWORD') { $rootScope.notify('Invalid Password'); } else if (error.code == 'INVALID_USER') { $rootScope.notify('Invalid User'); } else { $rootScope.notify('Oops something went wrong. Please try again later'); } }); } } ]) 

На что обратить внимание:

1. $rootScope.auth.$login() отвечает за аутентификацию Firebase.
2. $rootScope.auth.$login() возвращает обещание, которое будет выполнено после завершения запроса.
3. При успешной аутентификации мы будем перенаправлять на наш основной вид.

Далее, давайте создадим основной вид приложения. Создайте новый файл с именем bucket.html внутри папки templates и добавьте следующий код:

 <ion-tabs class="tabs-icon-top"> <ion-tab title="My List" icon-on="ion-ios7-browsers" icon-off="ion-ios7-browsers-outline" href="#/bucket/list"> <ion-nav-view name="bucket-list"></ion-nav-view> </ion-tab> <ion-tab title="Completed" icon-on="ion-ios7-checkmark" icon-off="ion-ios7-checkmark-outline" href="#/bucket/completed"> <ion-nav-view name="bucket-completed"></ion-nav-view> </ion-tab> </ion-tabs> 

 <ion-header-bar class="bar-positive"> <button class="button button-clear" ng-click="newTask()">New</button> <h1 class="title">My Bucket List</h1> <button class="button button-clear" ng-click="logout()">Logout</button> </ion-header-bar> <ion-content class="has-header padding" has-tabs="true" on-refresh="onRefresh()"> <div class="card" ng-repeat="item in list" id="{{item.key}}" > <div class="item item-text-wrap"> <span>{{ item.item }}</span> <br/> <br/> <p class="actions padding"> <i class="ion-checkmark-circled icon-actions margin" ng-click="markCompleted('{{item.key}}')"></i> <i class="ion-trash-b icon-actions margin" ng-click="deleteItem('{{item.key}}')"></i> </p> </div> </div> <div class="card" > <div class="item item-text-wrap" ng-show="noData"> <span> No Items in your bucket List. Click <a href="javascript:" ng-click="newTask()">Here</a> and create one </span> </div> </div> </ion-content> 

 .controller('myListCtrl', function($rootScope, $scope, $window, $ionicModal, $firebase) { $rootScope.show("Please wait... Processing"); $scope.list = []; var bucketListRef = new Firebase($rootScope.baseUrl + escapeEmailAddress($rootScope.userEmail)); bucketListRef.on('value', function(snapshot) { var data = snapshot.val(); $scope.list = []; for (var key in data) { if (data.hasOwnProperty(key)) { if (data[key].isCompleted == false) { data[key].key = key; $scope.list.push(data[key]); } } } if ($scope.list.length == 0) { $scope.noData = true; } else { $scope.noData = false; } $rootScope.hide(); }); $ionicModal.fromTemplateUrl('templates/newItem.html', function(modal) { $scope.newTemplate = modal; }); $scope.newTask = function() { $scope.newTemplate.show(); }; $scope.markCompleted = function(key) { $rootScope.show("Please wait... Updating List"); var itemRef = new Firebase($rootScope.baseUrl + escapeEmailAddress($rootScope.userEmail) + '/' + key); itemRef.update({ isCompleted: true }, function(error) { if (error) { $rootScope.hide(); $rootScope.notify('Oops! something went wrong. Try again later'); } else { $rootScope.hide(); $rootScope.notify('Successfully updated'); } }); }; $scope.deleteItem = function(key) { $rootScope.show("Please wait... Deleting from List"); var itemRef = new Firebase($rootScope.baseUrl + escapeEmailAddress($rootScope.userEmail)); bucketListRef.child(key).remove(function(error) { if (error) { $rootScope.hide(); $rootScope.notify('Oops! something went wrong. Try again later'); } else { $rootScope.hide(); $rootScope.notify('Successfully deleted'); } }); }; }) 

 var bucketListRef = new Firebase($rootScope.baseUrl + escapeEmailAddress($rootScope.userEmail)); 

 function escapeEmailAddress(email) { if (!email) return false // Replace '.' (not allowed in a Firebase key) with ',' email = email.toLowerCase(); email = email.replace(/\./g, ','); return email.trim(); } 

 <div class="modal slide-in-up" ng-controller="newCtrl"> <header class="bar bar-header bar-secondary"> <button class="button button-clear button-primary" ng-click="close()">Cancel</button> <h1 class="title">New Item</h1> <button class="button button-positive" ng-click="createNew()">Done</button> </header> <ion-content class="padding has-header"> <input type="text" placeholder="I need to do..." ng-model="data.item"> </ion-content> </div> 

 .controller('newCtrl', function($rootScope, $scope, $window, $firebase) { $scope.data = { item: "" }; $scope.close = function() { $scope.modal.hide(); }; $scope.createNew = function() { var item = this.data.item; if (!item) return; $scope.modal.hide(); $rootScope.show(); $rootScope.show("Please wait... Creating new"); var form = { item: item, isCompleted: false, created: Date.now(), updated: Date.now() }; var bucketListRef = new Firebase($rootScope.baseUrl + escapeEmailAddress($rootScope.userEmail)); $firebase(bucketListRef).$add(form); $rootScope.hide(); }; }) 

 <ion-header-bar class="bar-positive"> <h1 class="title">Completed Items</h1> <button class="button button-clear" ng-click="logout()">Logout</button> </ion-header-bar> <ion-content class="has-header padding" has-tabs="true" on-refresh="onRefresh()"> <div class="card" ng-repeat="item in list" > <div class="item item-text-wrap"> <span>{{ item.item }}</span> <br/> <br/> <p class="actions padding"> <i class="ion-trash-b icon-actions margin" ng-click="deleteItem('{{item.key}}')"></i> </p> </div> </div> <div class="card" > <div class="item item-text-wrap" ng-show="noData || incomplete"> <span ng-show="incomplete"> You can have not completed any of your Bucket List items yet. Try harder!! </span> <span ng-show="noData"> No Items in your bucket List. </span> </div> </div> </ion-content> 

 .controller('completedCtrl', function($rootScope, $scope, $window, $firebase) { $rootScope.show("Please wait... Processing"); $scope.list = []; var bucketListRef = new Firebase($rootScope.baseUrl + escapeEmailAddress($rootScope.userEmail)); bucketListRef.on('value', function(snapshot) { $scope.list = []; var data = snapshot.val(); for (var key in data) { if (data.hasOwnProperty(key)) { if (data[key].isCompleted == true) { data[key].key = key; $scope.list.push(data[key]); } } } if ($scope.list.length == 0) { $scope.noData = true; } else { $scope.noData = false; } $rootScope.hide(); }); $scope.deleteItem = function(key) { $rootScope.show("Please wait... Deleting from List"); var itemRef = new Firebase($rootScope.baseUrl + escapeEmailAddress($rootScope.userEmail)); bucketListRef.child(key).remove(function(error) { if (error) { $rootScope.hide(); $rootScope.notify('Oops! something went wrong. Try again later'); } else { $rootScope.hide(); $rootScope.notify('Successfully deleted'); } }); }; }); 

 .margin { margin-left: 9px; margin-right: 9px; } .icon-actions { font-size: 23px; } .checkbox { vertical-align: middle; } .actions { float: right; } .item-text-wrap { overflow: auto; } .ion-checkmark-circled.icon-actions.margin{ margin-right: 35px; } 

 gulp serve 

 $ git init $ git add -A $ git commit -am "Initial Commit" $ git remote add origin [email protected]:sitepoint/IonicFirePGInstaller.git 

 $ git push origin master