실시간 다중 플랫폼 모바일 애플리케이션 구축: Ionic Framework 및 Firebase를 사용한 예

기업이 스마트폰 애플리케이션을 만들 때 직면하는 주요 문제 중 하나는 여러 플랫폼에 걸쳐 네이티브 애플리케이션을 구축하는 데 드는 비용이 증가한다는 것입니다. 정통한 프론트엔드 개발자는 이 문제를 해결하는 데 도움이 될 여러 하이브리드 플랫폼의 개발에 관심을 기울이고 있지만 Ionic Framework와 Firebase는 함께 JavaScript와 HTML5를 사용하여 실시간 스마트폰 애플리케이션을 구축하는 데 놀라운 유연성을 제공하는 동적 듀오입니다. .

이 자습서에서는 이러한 다중 플랫폼 모바일 개발 도구의 기능을 소개하고 일부 Ionic 및 Firebase 예제도 제공합니다.

(참고: 이 기사는 AngularJS 프레임워크의 기본 사항에 어느 정도 익숙하다고 가정합니다. 여기에 배경 지식이 없는 사람들을 위한 AngularJS에 대한 훌륭한 소개 게시물이 있습니다.)

Ionic 프레임워크 소개

Ionic Framework는 세 가지 주요 구성 요소로 구성됩니다.

1. 모바일 UI용으로 설계 및 최적화된 SASS 기반 UI 프레임워크입니다.
2. 확장 가능하고 빠른 애플리케이션을 빠르게 구축하는 데 사용되는 AngularJS 프런트 엔드 JavaScript 프레임워크입니다.
3. CSS, HTML 및 JavaScript를 사용하는 기본 모바일 애플리케이션용 컴파일러(Cordova 또는 PhoneGap).

Ionic 프레임워크에는 즉시 사용할 수 있는 유용한 CSS 구성 요소가 많이 포함되어 있습니다.

학습 곡선을 단순화하고 개발자가 신속하게 시작 및 실행할 수 있도록 광범위한 문서, 예제 및 시작 동영상을 제공한 Ionic에 감사드립니다.

Firebase 소개

Firebase는 사용자 정의 코드를 작성할 필요 없이 실시간 데이터 동기화를 제공하는 서비스로서의 백엔드(backend-as-a-service) 스키마 없는 데이터 시스템입니다. Firebase는 백엔드 개발의 많은 부분을 구식으로 만들어 다중 플랫폼 개발 시간을 크게 단축합니다.

주요 기능 및 이점은 다음과 같습니다.

1. 코드 변경 없이 데이터가 변경됩니다. 모든 데이터 변경 사항은 백엔드 코드 수정 없이 즉시 클라이언트에 게시됩니다.
2. 어댑터가 많습니다. 모든 인기 있는 JavaScript 프레임워크 및 모바일 플랫폼 SDK에 대한 좋은 지원 및 문서와 함께 어댑터가 있습니다. (이 기사에서는 Firebase용 AngularJS 바인딩인 AngularFire를 사용했습니다.)
3. 간편한 인증. Firebase 인증은 인증 방법에 관계없이 단일 메서드 호출만큼 간단합니다. 간단한 이메일 및 비밀번호, Google, Facebook, Twitter 또는 Github 기반 로그인을 지원합니다.
4. 오프라인이 활성화되었습니다. 모든 Firebase 데이터는 오프라인 사용이 가능하므로 애플리케이션은 연결 해제 모드에서 완전히(또는 거의 완전히) 작동할 수 있습니다. 연결이 복원되면 응용 프로그램이 자동으로 동기화됩니다.
5. 구성 대시보드. Firebase의 직관적인 대시보드 인터페이스를 통해 대부분의 Firebase(예: 보안 규칙)를 쉽게 구성할 수 있습니다.
6. JSON 중심. Firebase에서 모든 데이터는 JSON 객체 형태로 저장 및 검색됩니다.

Firebase는 또한 배포 및 유지 관리에 상당한 시간을 절약할 수 있는 프런트 엔드 코드를 호스팅하기 위한 클라우드 서비스를 제공합니다.

또한 Firebase는 지난 10월 Google에 인수되어 훨씬 더 많은 관심과 가시성을 확보했습니다.

간단한 사용 사례: 비용 추적

룸메이트는 종종 비용을 분담하고 필요할 때 서로에게 의존합니다. 따라서 룸메이트가 지출을 추적하고 월말에 화해할 수 있도록 합시다.

상황을 더욱 흥미롭게 만들기 위해 실시간 업데이트를 제공하는 다중 플랫폼 모바일 응용 프로그램을 구축해 보겠습니다. 그러면 비용이 발생할 때마다 각각의 비용을 모니터링할 수 있습니다.

우리가 무엇을 만들고 싶은지 결정하고 도구를 소개했으니 이제 시작해 봅시다!

Ionic 및 Firebase 시작하기

가장 먼저 해야 할 일은 Ionic을 설치하는 것입니다. Ionic 시작하기 페이지에 제공된 설치 지침을 따르십시오. (Ionic에는 NodeJS에 대한 종속성이 있으므로 컴퓨터에 아직 설치하지 않은 경우 지침에 따라 설치해야 합니다.)

AngularFire 5분 자습서는 Firebase에 익숙해지기 시작하기에 좋은 곳입니다. 그리고 당신이 "땜장이"이거나 저와 같은 촉각 학습자라면 GitHub에서 제 구현을 가져와서 코드를 가지고 놀기 시작할 수 있습니다.

다중 플랫폼 앱 코딩

이 자습서에서는 Ionic 설치의 일부로 제공된 샘플 tabs 앱을 앱의 기초로 사용할 것입니다. ( ionic start myApp tabs 명령으로 샘플 앱을 실행할 수 있습니다.)

좋아하는 IDE에서 샘플 tabs 앱을 열고(저는 Webstorm을 사용하고 있습니다) 룸메이트 앱을 빌드하기 위해 수정을 시작하겠습니다.

Ionic 및 Firebase 앱 예제의 경우 다음 세 가지 화면이 필요합니다.

이러한 화면을 만들기 전에 다음과 같이 샘플 앱과 함께 기본적으로 제공되는 "친구 세부 정보 화면"을 제거합시다.

1. www/templates/friend-detail.html 파일을 삭제합니다.
2. www/js/app.js 에서 friend-detail.html 의 상태를 제거(또는 주석 처리)합니다.
3. www/js/controllers.js 에서 우리가 삭제한 상태에서 참조되는 FriendDetailCtrl 컨트롤러를 제거합니다.

이제 화면 하단에 있는 탭 선택기의 아이콘과 텍스트를 다음과 같이 변경해 보겠습니다.

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>

Firebase에 데이터를 연결하기 전에 www/templates/tab-dash.html 에 다음 코드를 추가하여 목록을 만들고 expenses 이라는 배열에 바인딩해 보겠습니다.

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

또한 다음과 같이 expenses 배열과 addExpense 메서드 및 getTotal 메서드를 포함하도록 www/js/controllers.js 의 DashCtrl 을 확장해야 합니다.

 .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 배열은 비용 목록에 항목을 저장하고 addExpense() 메서드는 expenses 배열에 새 값을 추가하며 getTotal() 메서드는 배열에 있는 모든 항목의 합계를 제공합니다.

이제 tab-friends.html 에도 비슷한 일련의 변경이 필요합니다. 직접 해보십시오. 문제가 발생하거나 올바르게 수행했는지 확인하려는 경우 GitHub에서 제 구현을 참조할 수 있습니다.

Firebase에서 후킹

Firebase 계정이 필요합니다. 여기에서 무료 Firebase "Hacker Plan"에 가입할 수 있습니다.

가입하면 https://<yourfirebase>.firebaseio.com 과 같은 루트 URL 을 받게 됩니다.

앱에서 Firebase를 활성화하려면 앱에 두 가지 작은 모드가 필요합니다.

먼저 다음과 같이 앱의 www/index.html 파일에 Firebase 스크립트를 포함해야 합니다.

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

다음으로 AngularJS 'starter' 모듈의 목록에 'firebase' 를 추가하여 Firebase 모듈을 애플리케이션에 추가해야 합니다.

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

이제 다른 AngularJS 모듈과 마찬가지로 Firebase가 활성화되었습니다.

AngularFire 5분 자습서는 컨트롤러에서 데이터 참조를 생성하는 방법을 알려줍니다. 그러나 데모 앱의 경우 이러한 참조를 별도의 서비스에 유지하기로 결정했습니다(이렇게 하면 루트 URL이 변경된 경우 유지 관리 및 업데이트가 훨씬 쉬워지기 때문). 이 서비스를 만들려면 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; } } });

위의 코드는 3개의 참조 URL을 추가합니다. 하나는 루트용이고 두 개는 우리가 expenses 및 room-mates 라고 명명한 컬렉션용입니다.

Firebase에 새 컬렉션을 추가하려면 루트 URL 끝에 컬렉션 이름을 추가하기만 하면 됩니다. 따라서 필요한 expenses 징수를 생성하려면 다음만 있으면 됩니다.

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

이렇게 하면 expenses 컬렉션이 생성되고 여기에 개체 추가를 시작할 수 있습니다.

자, 이제 Firebase의 비용 수집을 연결하여 앞에서 만든 "더미" 비용 배열을 대체할 수 있습니다. 이는 www/js/controllers.js 에서 DashCtrl 을 다음과 같이 수정하여 수행됩니다.

 .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 에 대해서도 유사한 일련의 변경이 필요합니다. 다시 한 번 이 작업을 직접 시도해 볼 것을 권장하지만 문제가 발생하거나 올바르게 수행했는지 확인하려면 GitHub에서 제 구현을 참조할 수 있습니다.

작동하는지 확인하려면 두 개의 다른 클라이언트에서 앱을 실행하는 동안 새 비용을 추가하고 두 클라이언트의 목록에 표시되는지 확인합니다. 그것이 작동한다면… woo-hoo! 이제 Ionic 앱을 Firebase에 성공적으로 연결했습니다!

기기를 시스템에 연결하고 ionic run android 또는 ionic emulate ios 를 실행하여 다양한 기기에서 다중 플랫폼 앱을 테스트할 수 있습니다. 앱 테스트에 대한 자세한 내용은 Ionic 설명서를 참조하세요.

Firebase를 통한 계정 관리 및 보안

기본 기능은 이제 작동하지만 한 가지 심각한 문제는 앱이 현재 완전히 안전하지 않다는 것입니다. 권한이나 로그인이 필요하지 않고 전 세계에서 비용을 볼 수 있습니다. 이것은 분명히 해결되어야 합니다.

Firebase는 "규칙"을 사용하여 강력하면서도 간단한 인증 프레임워크를 제공합니다. Firebase의 규칙 언어를 사용하여 수행할 수 있는 작업이 많이 있습니다. (자세한 내용은 Firebase 보안 문서를 참조하세요.)

우리의 경우 권한이 없는 사용자가 데이터에 액세스하지 못하도록 차단하는 매우 간단한 규칙을 작성합니다. 이렇게 하려면 루트 URL을 열고 왼쪽 작업 표시줄에서 "보안 및 규칙"을 클릭하고 규칙에 아래 코드를 붙여넣고 저장을 클릭합니다.

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

지금 응용 프로그램을 실행하면 데이터가 없음을 알 수 있습니다. 브라우저 도구를 사용하여 요청을 검사할 수도 있으며 콘솔에 데이터를 볼 권한이 없다는 메시지가 표시되어야 합니다.

사용자 계정 생성 및 로그인 활성화

사용자가 고유한 이메일/비밀번호 조합을 만들거나 기존 Google, Facebook, Twitter 또는 Github 로그인 자격 증명을 사용하여 사용자를 인증할 수 있습니다. 이메일/비밀번호 인증을 위해 Firebase는 비밀번호 변경, 재설정 등을 위한 전체 API 방법을 제공합니다. Firebase를 사용한 인증에 대한 자세한 내용은 Firebase 가이드에서 확인할 수 있습니다.

데모 앱의 경우 Firebase 인터페이스를 통해 두 개의 사용자 계정을 만듭니다. Firebase 루트 URL로 이동하여 다음을 수행하면 됩니다.

1. 왼쪽 작업 표시줄에서 로그인 및 인증을 클릭합니다.
2. 이메일 및 비밀번호 인증 활성화 확인란을 선택합니다.
3. 아래로 스크롤하여 "새 계정 추가 양식"을 찾습니다.
4. "새 사용자 추가"를 사용하여 계정을 추가하십시오.

사용자의 로그인 인터페이스를 활성화하려면 먼저 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>

그런 다음 www/controller.js 의 AccountCtrl 에 다음을 추가합니다.

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

보안 관점에서 알아야 할 한 가지 중요한 사항은 Firebase 로그인이 기본적으로 영구적 이라는 것입니다. 따라서 애플리케이션이 시작될 때마다 사용자가 로그인해야 하도록 하려면 그에 따라 Firebase 구성을 수정해야 합니다. 이렇게 하려면 로그인에 성공한 후 한 번만 다음 코드를 실행합니다.

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

로그인 성공 후 계정 컨트롤러에 추가하거나 로그인 성공 후 중단점을 넣고 콘솔 검사기에서 실행할 수 있습니다.

사용자 기반 필터링

다중 플랫폼 모바일 앱에는 여전히 중요한 기능이 하나 빠져 있습니다. 룸메이트의 비용과 귀하의 비용을 구분하고 싶습니다. 이제 두 개의 계정을 만들었으므로 보기에서 데이터를 필터링하기만 하면 됩니다.

(a) 현재 사용자에 대한 데이터를 $scope로 가져오고 (b) 현재 사용자에 대한 추가 비용을 저장하려면 먼저 www/js/controllers.js 에서 dashCtrl 을 수정해야 합니다.

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

다음으로 www/templates/tab-dash.html 에 필터를 추가하여 현재 사용자의 비용만 표시해야 합니다.

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

이제 홈 화면이 완벽해졌습니다. 사용자는 자신의 비용만 보고 추가할 수 있습니다.

마지막이자 마지막 단계는 룸메이트 간에 전체 비용 목록을 공유할 수 있도록 하는 것입니다. 그렇게 하려면 www/templates/tab-friends.html 을 변경하여 이 필터를 추가하십시오.

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

그런 다음 www/controllers.js 에서 다음과 같이 FriendsCtrl 을 수정합니다.

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

그게 다야! 귀하의 기기와 룸메이트의 기기 모두에 앱을 설치/업데이트하면 모든 준비가 완료됩니다!

마무리

우리의 간단한 예는 Ionic과 Firebase를 사용하여 달성할 수 있는 것과 얼마나 쉽게 달성할 수 있는지에 대한 표면적인 부분만 긁기 시작합니다. 그들은 JavaScript와 HTML5를 사용하여 실시간 다중 플랫폼 스마트폰 애플리케이션을 구축하기 위한 진정으로 강력한 듀오입니다.