Criando aplicativos móveis multiplataforma em tempo real: exemplos usando Ionic Framework e Firebase

Um dos principais problemas que as empresas encontram ao criar um aplicativo para smartphone é o custo multiplicativo de criar um aplicativo nativo em diferentes plataformas. Enquanto desenvolvedores de front-end experientes estão sintonizados no desenvolvimento de várias plataformas híbridas que prometem ajudar a resolver esse problema, o Ionic Framework e o Firebase são uma dupla dinâmica que, juntos, realmente nos dão uma flexibilidade incrível na criação de aplicativos para smartphones em tempo real usando JavaScript e HTML5 .

Este tutorial apresenta os recursos dessas ferramentas de desenvolvimento móvel multiplataforma e ainda fornece alguns exemplos do Ionic e do Firebase.

(Nota: Este artigo pressupõe alguma familiaridade com os fundamentos da estrutura AngularJS. Aqui está um ótimo post introdutório sobre AngularJS para aqueles sem essa experiência.)

Apresentando a estrutura iônica

O Ionic Framework é composto por três componentes principais:

1. Uma estrutura de interface do usuário baseada em SASS projetada e otimizada para interfaces de usuário móveis.
2. Uma estrutura JavaScript front-end do AngularJS usada para construir rapidamente aplicativos escaláveis ​​e rápidos.
3. Um compilador (Cordova ou PhoneGap) para aplicativos móveis nativos com CSS, HTML e JavaScript.

A estrutura Ionic também vem com muitos componentes CSS úteis prontos para uso.

Parabéns ao Ionic por fornecer extensa documentação, exemplos e vídeos iniciais para ajudar a simplificar a curva de aprendizado e colocar os desenvolvedores em funcionamento rapidamente.

Apresentando o Firebase

O Firebase é um sistema de dados sem esquema de back-end como serviço que fornece sincronização de dados em tempo real sem exigir a gravação de nenhum código personalizado. O Firebase torna muito do seu desenvolvimento de back-end obsoleto, reduzindo significativamente o tempo de desenvolvimento multiplataforma.

Os principais recursos e benefícios incluem:

1. Alterações de dados sem alterações de código. Todas as alterações de dados são publicadas para os clientes imediatamente, sem necessidade de qualquer modificação de código de back-end.
2. Muitos adaptadores. Existem adaptadores, com bom suporte e documentação, para todos os frameworks JavaScript populares e SDKs de plataforma móvel. (Usamos o AngularFire, que é a vinculação do AngularJS para o Firebase, neste artigo.)
3. Facilidade de autenticação. A autenticação no Firebase é tão simples quanto uma única chamada de método, independentemente do método de autenticação. Suporta e-mail e senha simples, logins baseados no Google, Facebook, Twitter ou Github.
4. Off-line ativado. Todos os dados do Firebase são habilitados para off-line, portanto, um aplicativo pode ser totalmente (ou quase totalmente) funcional no modo desconectado. Os aplicativos são sincronizados automaticamente quando a conexão é restaurada.
5. Painel de configuração. Grande parte do Firebase (regras de segurança, por exemplo) pode ser facilmente configurada por meio da interface intuitiva do painel do Firebase.
6. Centrado em JSON. No Firebase, todos os dados são armazenados e recuperados na forma de objetos JSON.

O Firebase também oferece serviços em nuvem para hospedar o código front-end que pode economizar um tempo significativo na implantação e manutenção.

Também vale a pena notar que o Firebase foi adquirido pelo Google em outubro passado, o que lhe deu significativamente mais atenção e visibilidade.

Um exemplo de caso de uso simples: acompanhamento de despesas

Os colegas de quarto geralmente dividem as despesas e confiam uns nos outros em momentos de necessidade. Então, vamos ajudar os colegas de quarto a controlar suas despesas e ajudá-los a se reconciliar no final do mês.

Para tornar as coisas ainda mais interessantes, vamos construir um aplicativo móvel multiplataforma que fornecerá atualizações em tempo real, para que cada um possa monitorar as despesas à medida que ocorrem.

Agora que decidimos o que queremos construir e fomos apresentados às ferramentas, vamos começar!

Primeiros passos com Ionic e Firebase

A primeira coisa que precisamos fazer é instalar o Ionic. Siga as instruções de instalação fornecidas na página Ionic Getting Started. (Observe que o Ionic tem uma dependência do NodeJS, portanto, as instruções exigirão que você o instale também, se ainda não o tiver em sua máquina).

O tutorial de 5 minutos do AngularFire é um ótimo lugar para começar a se familiarizar com o Firebase. E se você é um “funileiro” ou um aprendiz tátil como eu, você pode querer puxar minha implementação do GitHub e começar a brincar com o código.

Codificando nosso aplicativo multiplataforma

Para este tutorial, usaremos o aplicativo de tabs de amostra fornecido como parte da instalação do Ionic como base para nosso aplicativo. (Você pode executar o aplicativo de exemplo com o comando ionic start myApp tabs .)

Abra o aplicativo de tabs de amostra em seu IDE favorito (estou usando o Webstorm) e vamos começar a modificá-lo para criar nosso aplicativo de colegas de quarto.

Para nosso exemplo de aplicativo Ionic e Firebase, precisaremos das três telas a seguir:

Antes de criar essas telas, vamos remover a “tela de detalhes de amigos” fornecida por padrão com o aplicativo de exemplo da seguinte forma:

1. Exclua o arquivo www/templates/friend-detail.html .
2. Em www/js/app.js , remova (ou comente) o estado de friend-detail.html .
3. Em www/js/controllers.js , remova o controlador FriendDetailCtrl que é referenciado no estado que excluímos.

Agora vamos alterar os ícones e o texto dos seletores de guias na parte inferior da tela para serem os seguintes:

Isso é feito simplesmente fazendo as seguintes alterações em 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>

Antes de conectarmos nossos dados ao Firebase, vamos criar uma lista e vinculá-la a uma matriz chamada expenses adicionando o seguinte código a 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>

Também precisaremos estender o DashCtrl em www/js/controllers.js para incluir o array de expenses , bem como um método addExpense e um método getTotal , como segue:

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

O array de expenses é o que armazena os itens na lista de despesas, o método addExpense() adiciona um novo valor ao array de expenses e o método getTotal() nos dá o total de todos os itens no array.

Um conjunto semelhante de alterações agora precisa ser feito em tab-friends.html . Tente fazer isso por conta própria, mas se tiver problemas ou quiser verificar se fez isso corretamente, consulte minha implementação no GitHub.

Conectando no Firebase

Você precisará de uma conta do Firebase. Você pode se inscrever aqui para um Firebase "Hacker Plan" gratuito.

Depois de se inscrever, você receberá sua URL raiz , que será algo como https://<yourfirebase>.firebaseio.com .

A ativação do Firebase em nosso aplicativo requer dois pequenos mods em nosso aplicativo.

Primeiro, precisamos incluir os scripts do Firebase no arquivo www/index.html do aplicativo da seguinte forma:

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

Em seguida, precisamos adicionar o módulo Firebase ao nosso aplicativo adicionando 'firebase' à lista em nosso módulo 'starter' AngularJS:

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

O Firebase agora está habilitado, assim como qualquer outro módulo AngularJS.

O tutorial de 5 minutos do AngularFire ensinará você a criar referências de dados em controladores. No entanto, para nosso aplicativo de demonstração, decidi manter essas referências em um serviço separado (já que isso facilita muito a manutenção e a atualização se a URL raiz for alterada). Para criar este serviço, adicione o seguinte a 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; } } });

O código acima adiciona três URLs de referência. Um para a raiz e dois para as coleções que nomeamos expenses e room-mates .

A adição de uma nova coleção ao Firebase é feita simplesmente adicionando seu nome ao final do seu URL raiz . Então, para criar a coleção de expenses que vamos precisar, tudo o que precisamos é o seguinte:

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

Isso criará a coleção de expenses e podemos começar a adicionar objetos a ela.

OK, agora podemos conectar a coleção de despesas do Firebase para substituir o array de despesas “fictício” que criamos anteriormente. Isso é feito modificando DashCtrl em www/js/controllers.js da seguinte forma:

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

Um conjunto semelhante de alterações precisa ser feito em FriendsCtrl . Mais uma vez, recomendo que você tente fazer isso por conta própria, mas se tiver problemas ou quiser verificar se fez isso corretamente, consulte minha implementação no GitHub.

Para verificar se está funcionando, ao executar o aplicativo em dois clientes diferentes, adicione uma nova despesa e veja se ela aparece na lista em ambos os clientes. Se funcionar… woo-hoo! Agora você conectou com sucesso seu aplicativo Ionic ao Firebase!

Você pode testar seu aplicativo multiplataforma em diferentes dispositivos conectando um dispositivo ao seu sistema e executando ionic run android ou ionic emulate ios . Consulte a documentação do Ionic para obter mais informações sobre como testar seu aplicativo.

Gerenciamento e segurança de contas com Firebase

Embora a funcionalidade básica esteja funcionando agora, um problema sério é que nosso aplicativo está completamente inseguro. O mundo inteiro pode ver suas despesas, sem a necessidade de permissões ou logins. Isso obviamente precisa ser abordado.

O Firebase fornece uma estrutura de autenticação poderosa e simples usando “regras”. Há muito que pode ser feito usando a linguagem de regras do Firebase. (Consulte a documentação de segurança do Firebase para obter mais detalhes.)

No nosso caso, escreveremos uma regra muito simples para impedir que usuários não autorizados acessem nossos dados. Para fazer isso, abra sua URL raiz, clique em “Segurança e Regras” na barra de ação à esquerda, cole o código abaixo em suas regras e clique em Salvar.

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

Se você executar seu aplicativo agora, notará que não há dados. Você pode até tentar inspecionar sua solicitação usando as ferramentas do navegador e deverá ver uma mensagem em seu console informando que não está autorizado a visualizar os dados.

Criando contas de usuário e habilitando o login

Você pode autenticar seus usuários permitindo que eles criem sua própria combinação de e-mail/senha ou use qualquer uma das credenciais de login existentes do Google, Facebook, Twitter ou Github. Para autenticação de e-mail/senha, o Firebase oferece um conjunto completo de métodos de API para alteração, redefinição de senha etc. Mais informações sobre autenticação usando o Firebase podem ser encontradas no guia do Firebase.

Para nosso aplicativo de demonstração, criaremos duas contas de usuário por meio da interface do Firebase. Isso pode ser feito acessando seu URL raiz do Firebase e fazendo o seguinte:

1. Clique em Login e autenticação na barra de ação do lado esquerdo.
2. Marque a caixa de seleção para Ativar autenticação de e-mail e senha.
3. Role para baixo para encontrar o "Formulário para adicionar novas contas"
4. Adicione suas contas usando “Adicionar novo usuário”.

Para habilitar a interface de login para seus usuários, primeiro adicione o seguinte código a 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>

Em seguida, adicione o seguinte a AccountCtrl em 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; }; });

Uma coisa importante a ser observada do ponto de vista da segurança é que os logins do Firebase são persistentes por padrão . Portanto, se você quiser que seu usuário faça login sempre que o aplicativo for iniciado, será necessário modificar a configuração do Firebase de acordo. Para fazer isso, apenas uma vez após um login bem-sucedido, execute o seguinte código:

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

Você pode adicionar isso no controlador de conta após o login bem-sucedido ou colocar um ponto de interrupção após o login bem-sucedido e executá-lo no inspetor do console.

Filtrando com base no usuário

O aplicativo móvel multiplataforma ainda está faltando um recurso importante. Queremos distinguir as suas despesas das do seu colega de quarto. Agora que criamos duas contas, só precisamos filtrar os dados em nossas visualizações.

Primeiro, precisamos modificar o dashCtrl em www/js/controllers.js para (a) obter os dados do usuário atual em $scope e (b) economizar quaisquer despesas adicionais para o usuário atual:

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

Em seguida, precisamos adicionar um filtro em www/templates/tab-dash.html para mostrar apenas as despesas do usuário atual:

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

OK, a tela inicial agora está perfeita. Um usuário só pode ver e adicionar suas próprias despesas.

A última e última etapa é permitir o compartilhamento da lista completa de despesas entre os colegas de quarto. Para isso, altere o www/templates/tab-friends.html para adicionar este filtro:

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

Em seguida, modifique FriendsCtrl em www/controllers.js da seguinte forma:

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

É isso! Instale/atualize o aplicativo no seu dispositivo e no dispositivo do seu colega de quarto e você deve estar pronto!

Embrulhar

Nosso exemplo simples apenas começa a arranhar a superfície do que pode ser feito – e com que facilidade isso pode ser feito – usando Ionic e Firebase. Eles realmente são uma dupla poderosa para criar aplicativos de smartphone multiplataforma em tempo real usando JavaScript e HTML5.