Criando um Web App do Zero usando AngularJS e Firebase

() translation by (you can also view the original English article)

Nesta série, usaremos AngularJS e Firebase para criar um simples aplicativo web a partir do zero. Será um simples aplicativo de blog onde o usuário pode se cadastrar ou logar e publicar um post.

Este tutorial presume que você tenha conhecimento básico de AngularJS, mas não deverá ser difícil acompanhar os tópicos que se seguem.

Introdução ao AngularJS

O AngularJS é um dos frameworks MVC mais procurados. É um framework estrutural para a criação de aplicativos web dinâmicos, ao estender as capacidades do HTML. Características como data binding e dependency injection o tornam fácil para desenvolver apps com menos código.

Da Documentação do AngularJS:

O HTML é ótimo para criar documentos estáticos, mas é fraco quando queremos usá-lo para criar visões dinâmicas em aplicativos web. O AngularJS permite que você amplie o vocabulário HTML para seu aplicativo. O ambiente resultante é extraordinariamente expressivo, legível e rápido para desenvolver.

Introdução ao Firebase

Imagine criar um aplicativo web sem se preocupar com o lado do back-end. O Firebase torna isto possível ao sincronizar dados em tempo real com nosso aplicativo sem ficar nos incomodando com o back-end. Tudo o que precisamos é somente fazer algumas chamadas de API.

O Firebase é uma poderosa API para armazenar e sincronizar dados em tempo real. Combina o poder do data binding de duas vias do AngularJS com os resultados do Firebase em uma sincronização em três vias que é fantástica.

Iniciando com AngularJS

O projeto angular-seed é um código padrão para se iniciar na criação de aplicativos web usando AngularJS. Baixe ou clone o projeto angular-seed a partir de seu repositório.

1	$ git clone https://github.com/angular/angular-seed.git

Navegue até o diretório do projeto e instale as dependências necessárias.

1	$ cd angular-seed
2	$ npm install ## Install the dependencies

Inicie o servidor node:

1	$ npm start ## Start the server

Aponte seu navegador para https://localhost:8000/app/index.html e você deverá ver o app padrão rodando.

Navegue até o diretório app, dentro do angular-seed. É onde o código do aplicativo se encontra. Dentro da pasta app você irá encontrar o arquivo app.js que é o núcleo do app. Iremos declarar todos os módulos app-level e routes, dentro deste arquivo. Por padrão, o projeto angular-seed tem duas visões: view1 e view2. Exclua as pastas view1 e view2 da pasta app.

Vamos começar do zero. Abra o arquivo app.js e remova o código existente. No arquivo app.js iremos definir as rotas para nosso aplicativo. Por exemplo: como manipular uma requisição para /home. Para definir rotas, precisaremos de um módulo do AngularJS chamado ngRoute. Para usar ngRoute, primeiro nós precisamos injetá-lo, ou adicioná-lo ao nosso aplicativo. Iremos usar angular.module para adicionar o módulo ngRoute ao nosso aplicativo, como mostrado abaixo:

1	angular.module('myApp', [
2	'ngRoute'
3	])

O módulo ngRoute tem um componente chamado $routeProvider que é útil para configurar rotas. Iremos injetar $routeProvider no método config de angular.module e definir nossas rotas em sua função de callback, como mostrado abaixo:

'use strict';

angular.module('myApp', [
  'ngRoute'
]).
config(['$routeProvider', function($routeProvider) {
     // Routes will be here
}]);

A seguir, abra o arquivo index.html e remova as referências aos scripts view1 e view2. Remova tudo, do corpo de index.html, exceto as referências a scripts e a div mostrada abaixo, com a diretiva ngView.

1	<div ng-view></div>

ngView é uma diretiva que ajuda a renderizar a visão anexada com uma rota particular no layout principal, index.html. Então, a cada vez que a rota é modificada, o conteúdo da div acima exibida também é alterada.

Agora vamos criar uma nova visão para o usuário se conectar. Dentro do diretório app, crie uma nova pasta chamada home. Dentro de home, crie dois arquivos: um chamado home.html e outro, home.js. Abra o arquivo home.html e inclua o código HTML a seguir:

<!DOCTYPE html>
<html lang="en" ng-app="myApp">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="icon" href="http://getbootstrap.com/favicon.ico">

    <title>AngularJS & Firebase Web App</title>

    <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="http://getbootstrap.com/examples/signin/signin.css" rel="stylesheet">

    <link href="justified-nav.css" rel="stylesheet">

</head>

<body>

    <div class="container">
        <div class="jumbotron" style="padding-bottom:0px;">
            <h2>AngularJS & Firebase App!</h2>
        </div>
        <form class="form-signin" role="form">
            <input type="email" class="form-control" placeholder="Email address" required="" autofocus="">
            <input type="password" class="form-control" placeholder="Password" required="">
            <label class="checkbox">
                <a href="#"> Sign Up</>
        </label>
        <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
      </form>

    </div>

  

</body></html>

Como visto no código acima, nós usaremos Bootstrap para criar nossas visões do aplicativo.

Dentro do arquivo home.js, iremos declarar as rotas para que o aplicativo acesse a visão home. $routeProvider tem um método chamado when, que usaremos para criar a rota para nossa visão home. Ao definir uma nova rota, iremos definir uma templateUrl que poderia ser renderizada no arquivo index.html. Juntamente com isso, vamos também definir um controller para o recém criado $scope, da visão home. Um controller é uma lógica que controla uma visão particular. Aqui está como ele deveria se parecer:

'use strict';

angular.module('myApp.home', ['ngRoute'])

// Declared route 
.config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/home', {
        templateUrl: 'home/home.html',
        controller: 'HomeCtrl'
    });
}])

// Home controller
.controller('HomeCtrl', [function() {

}]);

Agora abra o arquivo app.js e inclua o módulo home myApp.home no app. Declare também a rota padrão para seu aplicativo usando o método $routeProvider.otherwise na visão home.

'use strict';

angular.module('myApp', [
    'ngRoute',
    'myApp.home'           // Newly added home module
]).
config(['$routeProvider', function($routeProvider) {
    // Set defualt view of our app to home
    
    $routeProvider.otherwise({
        redirectTo: '/home'
    });
}]);

A seguir, para mostrar a homepage, precisamos incluir home.js dentro do arquivo de modelo principal do app. Abra o arquivo index.html e inclua o seguinte:

1	<script src="home/home.js"></script>

Reinicie o servidor e aponte seu navegador para http://localhost:8000/app/index.html e você deve ver a tela de login.

Iniciando com o Firebase

Para iniciar, precisamos registrar uma conta grátis no Firebase. Ao concluir o registro com sucesso, iremos obter uma tela como a seguinte:

Anote a URL do app criado e clique no botão Manage App. Usaremos esta URL do Firebase para interagir com o banco de dados Firebase.

Usaremos o Firebase para autenticar nosso aplicativo usando um e-mail e senha. Para fazer tudo funcionar, precisamos habilitá-lo no Firebase. A partir do painel de controle, clique na aba Login & Auth, no menu lateral à esquerda. Nesta tela, sob a aba Email & Password, marque Enable Email & Password Authentication, como exibido:

Adicione um novo usuário com um e-mail e senha, com o qual iremos efetuar a autenticação depois de implementar a funcionalidade de entrar.

Add a new user with an Email and Password

Implementando a funcionalidade de Autenticação

Para iniciar o uso do Firebase, inclua os seguintes scripts em app/index.html:

<script src="https://cdn.firebase.com/js/client/1.0.18/firebase.js"></script>

<script src="https://cdn.firebase.com/libs/angularfire/0.8.0/angularfire.min.js"></script>

<script src="https://cdn.firebase.com/js/simple-login/1.6.2/firebase-simple-login.js"></script>

A seguir, precisamos injetar o módulo firebase no arquivo home.js. Adicione o módulo firebase no arquivo home.js como mostrado acima:

1	angular.module('myApp.home', ['ngRoute','firebase'])

Agora estamos prontos para interagir com o Firebase. Abra o arquivo home.js e dentro de HomeCtrl, crie uma nova função chamada SignIn para autenticar o usuário. Usaremos $scope para criar a nova função. $scope é um objeto que faz referência ao modelo do aplicativo e também age como uma "cola" entre o controlador e a visão do aplicativo. Por isso injetaremos o objeto $scope na função SignIn, para que o modelo do objeto da visão seja acessível dentro da função SignIn.

$scope.SignIn = function($scope) {
    var username = $scope.user.email;
    var password = $scope.user.password;
    
    // Auth Logic will be here
}

A seguir, dentro de HomeCtrl, crie uma instância do Firebase usando a URL para o Firebase, como mostrada:

1	var firebaseObj = new Firebase("https://blistering-heat-2473.firebaseio.com");

O módulo $firebaseSimpleLogin é usado para autenticação no Firebase usando um e-mail como ID e senha. Para usá-lo, precisamos injetar o módulo $firebaseSimpleLogin em HomeCtrl, como mostrado:

1	.controller('HomeCtrl', ['$scope','$firebaseSimpleLogin',function($scope,$firebaseSimpleLogin) {

Usando firebaseObj crie uma instância de $firebaseSimpleLogin, como mostrado:

1	var loginObj = $firebaseSimpleLogin(firebaseObj);

Agora, usando a API $login, iremos autenticar o ID do e-maill e a senha no Firebase. loginObj.$login carrega o e-mail e a senha como parâmetros. Em uma autenticação bem sucedida, obtemos um callback de sucesso e em uma autenticação mal sucedida, obtemos um callback de erro.

$scope.SignIn = function(event) {
    event.preventDefault();  // To prevent form refresh
    var username = $scope.user.email;
    var password = $scope.user.password;
    
    loginObj.$login('password', {
            email: username,
            password: password
        })
        .then(function(user) {
            // Success callback
            console.log('Authentication successful');
        }, function(error) {
            // Failure callback
            console.log('Authentication failure');
        });
}

Para que todo o código do controle acima funcione, precisamos anexar o controlador à visão. O AngularJS dispõe de uma diretiva chamada ngController para anexar um controlador à uma visão. Abra o arquivo home.html e adicione a diretiva ngController ao elemento body, para anexá-la em HomeCtrl.

Nós precisamos que os valores do e-mail e da senha estejam acessíveis dentro da função controladora SignIn. AngularJS disponibiliza uma diretiva chamada ngModel para vincular seu valor a $scope, para que seja acessível dentro da função SignIn. Inclua a diretiva ngModel aos elementos input para e-mail e senha, como mostrado abaixo:

<body ng-controller="HomeCtrl">

    <div class="container">
        <div class="jumbotron" style="padding-bottom:0px;">
            <h2>AngularJS & Firebase App!</h2>
        </div>
        <form class="form-signin" role="form">
            <input ng-model="user.email" type="email" class="form-control" placeholder="Email address" required="" autofocus="">
            <input ng-model="user.password" type="password" class="form-control" placeholder="Password" required="">
            <label class="checkbox">
                <a href="#"> Sign Up</>
        </label>
        <button type="button" class="btn btn-lg btn-primary btn-block">SignIn</button>
      </form>

    </div>

  

</body>

Finalmente, adicione a diretiva ngClick ao botão de entrada, para chamar a função SignIn:

1	<button type="button" ng-click="SignIn($event)" class="btn btn-lg btn-primary btn-block">SignIn</button>

Salve todas as alterações e reinicie o servidor. Aponte seu navegador para http://localhost:8000/app/index.html#/home e tente entrar usando o e-mail jay3dec@gmail.com como ID e jay como senha. Se o usuário for autenticado com sucesso, você deverá ver a mensagem Authentication successful no console do navegador.

Conclusão

Neste tutorial, nós revisamos como iniciar a criação de um aplicativo web em AngularJS. Implementamos a funcionalidade de autenticação de usuário e o autenticamos com sucesso em um banco de dados Firebase.

Na segunda parte deste tutorial, pularemos para o próximo nível ao implementar validações, funcionalidade de autenticação e outros recursos. O código para o tutorial acima está disponível no GitHub.

Deixe suas considerações nos comentários abaixo.

Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!