Criação de aplicativos móveis em tempo real e multiplataforma: exemplos usando Ionic Framework e Firebase

Um dos principais problemas que as empresas encontram ao fazer um aplicativo para smartphone é o custo multiplicativo de construir um aplicativo nativo em diferentes plataformas . Enquanto desenvolvedores front-end experientes sintonizaram o desenvolvimento de várias plataformas híbridas que prometem ajudar a resolver este problema, Estrutura Iônica e Firebase são uma dupla dinâmica que, em conjunto, realmente nos dá uma flexibilidade incrível na construçã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.

(Observação: este artigo pressupõe alguma familiaridade com os conceitos básicos da estrutura AngularJS. Aqui está um ótima postagem introdutória sobre AngularJS para aqueles sem esse histórico.)

Apresentando o Ionic Framework

O Ionic Framework consiste em três componentes principais:

1. Uma estrutura de IU baseada em SASS projetada e otimizada para IUs móveis.
2. A AngularJS Estrutura de front-end JavaScript 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 sai da caixa.

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 a necessidade de escrever qualquer código personalizado. O Firebase torna obsoleto grande parte do seu desenvolvimento de back-end, reduzindo significativamente o tempo de desenvolvimento multiplataforma.

Os principais recursos e benefícios incluem:

1. Mudanças de dados sem mudanças de código. Todas as alterações de dados são publicadas para os clientes imediatamente, sem a necessidade de qualquer modificação no código de backend.
2. Muitos adaptadores. Existem adaptadores, com bom suporte e documentação, para todas as estruturas JavaScript populares e SDKs de plataforma móvel. (Nós costumavamos AngularFire , que é a vinculação AngularJS para 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. Offline ativado. Todos os dados do Firebase são habilitados para offline, então 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. Muito do Firebase (regras de segurança, por exemplo) pode ser facilmente configurado por meio da interface de painel intuitiva 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 de nuvem para hospedar o código de front-end, o que pode permitir um tempo significativo de implantação e manutenção.

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

Um exemplo de caso de uso simples: rastreamento de despesas

Os colegas de quarto costumam dividir as despesas e confiar 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 conforme elas ocorrem.

Agora que decidimos o que queremos construir e conhecemos as 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 no Ionic Começando página. (Observe que Ionic tem uma dependência de NodeJS , então as instruções exigirão que você instale isso 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 'consertador' ou um aprendiz tátil como eu, você pode querer puxar minha implementação do GitHub e comece a brincar com o código.

Codificando nosso aplicativo multiplataforma

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

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

Para nosso aplicativo de exemplo 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 amostra da seguinte forma:

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

Agora vamos mudar o ícones e o texto dos seletores de guia na parte inferior da tela seja o seguinte:

Isso é feito simplesmente fazendo as seguintes alterações em www/templates/tabs.html:

Antes de conectar nossos dados ao Firebase, vamos criar uma lista e vinculá-la a um array chamado www/templates/tab-dash.html adicionando o seguinte código a {{expense.label}} {{expense.cost}} Total Spent {{getTotal()}} Add :

Também precisaremos estender o www/js/controllers.js em expenses para incluir o addExpense , bem como um getTotal método e um .controller('DashCtrl', function($scope) { $scope.expenses = [{ by: ‘email’, label: ’test’, cost: 10 }]; $scope.addExpense = function(e) { $scope.expenses.push({ by: 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; }; }) método, da seguinte forma:

O addExpense() array é o que armazena os itens na lista de despesas, o expenses método adiciona um novo valor a getTotal() matriz e tab-friends.html método nos dá o total de todos os itens na matriz.

Um conjunto semelhante de alterações agora precisa ser feito em https://.firebaseio.com. Tente fazer isso sozinho, mas se tiver problemas ou quiser verificar se fez isso corretamente, consulte minha implementação no GitHub.

Hooking no Firebase

Você precisará de uma conta Firebase. Você pode se inscrever Aqui para um “Plano de Hacker” gratuito do Firebase.

Assim que você se inscrever, você receberá seu url de raiz , que será semelhante a www/index.html.

Habilitar o Firebase em nosso aplicativo requer dois pequenos mods em nosso aplicativo.

Primeiro, precisamos incluir os scripts do Firebase no 'firebase' do aplicativo | arquivo da seguinte forma:

Em seguida, precisamos adicionar o módulo Firebase ao nosso aplicativo adicionando angular.module('starter', ['ionic', 'starter.controllers', 'starter.services', 'firebase']) à lista em nosso AngularJS www/js/services.js módulo:

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

o Tutorial de 5 minutos do AngularFire irá ensiná-lo 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 (pois isso torna muito mais fácil manter e atualizar se o URL raiz for alterado). Para criar este serviço, adicione o seguinte a expenses:

O código acima adiciona três urls de referência. Um para a raiz e dois para as coleções que chamamos de expenses e https://.firebaseio.com/expenses .

Adicionar uma nova coleção ao Firebase é feito simplesmente adicionando seu nome ao final de seu url de raiz . Portanto, para criar o expenses coleção de que precisamos, tudo o que precisamos é o seguinte:

DashCtrl

Isso criará o www/js/controllers.js coleção, e podemos então começar a adicionar objetos a ela.

OK, agora podemos incluir a coleção de despesas do Firebase para substituir a matriz de despesas “fictícia” que criamos anteriormente. Isso é feito modificando .controller('DashCtrl', function($scope, fireBaseData, $firebase) { $scope.expenses = $firebase(fireBaseData.refExpenses()).$asArray(); $scope.addExpense = function(e) { $scope.expenses.$add({ by: , 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 FriendsCtrl do seguinte modo:

Um conjunto semelhante de alterações precisa ser feito em ionic emulate ios. Mais uma vez, recomendo que você tente fazer isso sozinho, 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 de 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 sistema e executando { 'rules': { '.read': 'auth != null', '.write': 'auth != null' } } ou www/templates/tab-account.html. Consulte a documentação do Ionic para obter mais informações sobre testando seu aplicativo .

Gerenciamento de contas e segurança com Firebase

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

O Firebase fornece uma estrutura de autenticação poderosa, porém simples, usando “regras”. Muito pode ser feito usando a linguagem de regras do Firebase. (Consulte o Documentação de segurança do Firebase para mais detalhes.)

Em nosso caso, escreveremos uma regra muito simples para bloquear o acesso de usuários não autorizados aos nossos dados. Para fazer isso, abra seu 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.

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

Criação de contas de usuário e habilitação de login

Você pode autenticar seus usuários permitindo que 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 Firebase pode ser encontrado 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 o URL de 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 ativar a interface de login para seus usuários, primeiro adicione o seguinte código a AccountCtrl:

Em seguida, adicione o seguinte a .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; }; }); em 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] ']); :

Uma coisa importante a ter em conta do ponto de vista da segurança é que Os logins do Firebase são persistentes por padrão . Portanto, se você quiser que o usuário precise fazer login toda vez que o aplicativo for iniciado, você precisará modificar a configuração do Firebase de acordo. Para fazer isso, basta um tempo após um login bem-sucedido, execute o seguinte código:

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 suas despesas das de seu colega de quarto. Agora que criamos duas contas, precisamos apenas filtrar os dados em nossas visualizações.

Primeiro, precisamos modificar o .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 www/templates/tab-dash.html a fim de (a) obter os dados do usuário atual em $ scope e (b) salvar quaisquer despesas adicionais para o usuário atual:

Em seguida, precisamos adicionar um filtro em FriendsCtrl para mostrar apenas as despesas do usuário atual:

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 colegas de quarto. Para fazer isso, altere o .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 para adicionar este filtro:

Em seguida, modifique

|_+_|

|_+_|