Construindo um blog com AngularJS e Firebase

AngularJS � um framework JavaScript criado pelo time de desenvolvedores da Google, open-source e estende o HTML, possibilitando a cria��o de aplica��es din�micas de forma r�pida e objetiva. Ele usa o padr�o MV*, ou seja, o que for alterado na sua camada de vis�o � refletido no seu model e vice-versa, por conta do padr�o JavaScript que det�m a camada model e o HTML a camada view.

O HTML � �timo para declarar documentos est�ticos, mas deixa a desejar quando tentamos us�-lo para declarar visualiza��es din�micas em aplica��es web. O AngularJS permite estender o vocabul�rio HTML para a sua aplica��o.

O Blog

Para esse artigo desenvolveremos um Blog utilizando duas das tecnologias mais atuais da Google no momento, AngularJS e Firebase, que � um BaaS (backend as a service), ou seja, um banco de dados NoSQL real time que armazena os seus dados na nuvem. O banco de dados utiliza a manipula��o API REST para seus servi�os, facilitando o desenvolvimento de aplica��es no lado do servidor, com integra��es a v�rias plataformas como o pr�prio AngularJS, JavaScript, NodeJS, Android e iOS, deixando o desenvolvedor preocupado apenas com o desenvolvimento front-end de sua aplica��o.

A primeira coisa a fazer � definir a estrutura de pasta do nosso blog, conforme vemos na Listagem 1.


|- css
   |- blog.css
|- js
   |- app.js
   |- controllers.js
   |- directives.js
   |- routes.js
   |- services.js
|- partials
   |- mast-about.html
   |- mast-footer.html
   |- mast-head.html
|- index.html
|- home.html
|- novo.html

Listagem 1. Estrutura de Pastas do Blog

Para o post foi pensando em uma estrutura simples e com melhor did�tica. Contudo, se quiser ir mais a fundo com AngularJS � recomendado utilizar a estrutura de pastas que o pr�prio pessoal da AngularJS disponibiliza em angular-seed (vide se��o Links).

Para facilitar o desenvolvimento visual do nosso projeto Blog ser� utilizado o framework front-end Bootstrap, pois possui uma grande diversidade de temas, � responsivo e f�cil de usar. No seu site (vide se��o Links) baixe o CSS pronto para projetos blog e coloquei na pasta css do projeto.

Na pasta js teremos os arquivos JavaScript que criaremos em Angular e na pasta partials teremos os componentes que faremos em HTML. A index.html ser� nossa p�gina principal, novo.html e home.html ser�o nossos templates.

P�gina Inicial

Assim como qualquer aplica��o web, precisamos criar uma p�gina inicial (index.html) e nela devemos inserir os arquivos js e css que utilizaremos, conforme mostra a Listagem 2.


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="author" content="">
  <link rel="icon" href="favicon.ico">
 
  <title>DevMedia AngularJS</title>
 
  <!-- Bootstrap core CSS -->
  <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" 
  rel="stylesheet">
 
  <!-- Custom styles for this template -->
  <link href="css/blog.css" rel="stylesheet">
 
  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
 
  <link href='http://fonts.googleapis.com/css?family=Maven+Pro' rel='stylesheet' 
  type='text/css'>
</head>
<body ng-app="app" >
 
  <mast-head></mast-head>
 
  <div class="container">
    <div ng-view >
    </div>
  </div>
 
  <mast-footer></mast-footer>
 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
  </script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js">
  </script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js">
  </script>
  <script src="https://cdn.firebase.com/js/client/2.2.1/firebase.js"></script>
  <script src="https://cdn.firebase.com/libs/angularfire/1.0.0/angularfire.min.js">
  </script>
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <script src="js/app.js"></script>
  <script src="js/routes.js"></script>
  <script src="js/services.js"></script>
  <script src="js/controllers.js"></script>
  <script src="js/directives.js"></script>
</body>
</html>

Listagem 2. P�gina Inicial do Blog

Observa-se no c�digo que algumas tags novas foram inseridas no HTML, como ng-app e ng-view.

O atributo ng-app na tag body do HTML informa para o DOM que � um documento AngularJS. Para o AngularJS o atributo ng-app � considerado como a raiz da aplica��o, por esse motivo que geralmente colocamos o atributo no elemento body ou html, dizendo que todos os filhos fazem parte da nossa aplica��o. Por�m, esse atributo pode ser inserido em qualquer tag do HTML, dependendo o escopo que sua aplica��o atingir�.

J� o atributo ng-view diz para o AngularJS que � ali que deve ser inserido seus templates html, conforme a Listagem 3.


|- home.html
|- novo.html

Listagem 3. Templates do Blog

M�dulos (app.js)

Ap�s criarmos a p�gina inicial (index.html) da nossa aplica��o, devemos dizer quais m�dulos ela depender� para funcionar. Para o blog, os m�dulos s�o Firebase, que � respons�vel pela comunica��o com o banco de dados, e ngRoute, que � respons�vel por criar o roteamento de nossa aplica��o, conforme descrito na Listagem 4.


angular.module("app", [
  'firebase',
  'ngRoute'
]);

Listagem 4. M�dulos

Alguns autores separam a aplica��o em v�rios m�dulos, deixando a aplica��o bem modularizada. Cada m�dulo criado na sua aplica��o deve entrar nas depend�ncias da Listagem 4, para pode ser reutilizado em outras aplica��es codificadas com AngularJS.

Rotas (routes.js)

� com o ngRoute que dizemos para o AngularJS injetar determinada p�gina na ng-view e tamb�m qual � o controller dessa p�gina. Toda vez que a rota � alterada, a URL � alterada em nosso navegador.

Na Listagem 5, quando estamos na p�gina principal a rota � http://localhost/devmedia-blog/#/, mas quando alteramos para a p�gina novo, o final da rota muda de http://localhost/devmedia-blog/#/ para http://localhost/devmedia-blog/#/novo. Cada vez que uma rota � alterada, novos templates e controllers s�o alterados: esse processo com AngularJS se torna muito simples de ser feito, diferente de quando n�o utilizamos esse framework.


angular.module("app").config(function($routeProvider) {
 
  $routeProvider.when('/', {
    templateUrl : 'home.html',
    controller : 'HomeController',
    resolve: {
      "syncObject" : function(FirebaseService) {
        return FirebaseService.getPosts();
      }
    }
  }).when('/novo', {
    templateUrl : 'novo.html',
    controller : 'NovoController'
  });
 
});

Listagem 5. Rotas

A fun��o when do ngRoute diz quando ser� injetada essa p�gina na ng-view, por exemplo, quando a aplica��o iniciar, ser� injetado o HTML home.html e ser� chamado o controller HomeController.

Repare tamb�m que temos no c�digo o Resolve, que � uma propriedade na configura��o de roteamento, que significa que pode existir uma depend�ncia de servi�o. No blog do nosso exemplo, ao ser injetada a p�gina home.html, o AngularJS far� a solicita��o para os nossos servi�os (services.js), buscando os posts do blog no Firebase.

Servi�os (services.js)

O servi�o fornece acesso aos dados do nosso banco de dados Firebase, como mostra a Listagem 6.


angular.module("app").service("FirebaseService", function($firebaseArray, $firebaseObject) {
  var vm = this;
 
  vm.ref = new Firebase("https://devmediablog.firebaseio.com/");
  vm.posts = vm.ref.child('posts');
  vm.syncObject = $firebaseObject(vm.ref);
 
  this.add = function(post) {
    vm.posts.push(post);
  };
 
  this.getPosts = function() {
    return vm.syncObject;
  };
 
});

Listagem 6. Servi�os

Quando o home.html for chamado pelo ngRoute (routes.js), a propriedade resolve ir� chamar a fun��o do FirebaseService.getPosts(). Observe que para buscar os posts (getPosts) e inserir um novo post (add) n�o foram necess�rias muitas linhas de c�digo, pois as bibliotecas do Firebase nos ajudam neste ponto.

Controladora (controllers.js)

Agora precisamos dizer para nosso Controller, que cuidar� dos dados retornados do FirebaseService.getPosts() (service.js) e adicionar um novo post FirebaseService.add(post) (service.js), conforme vemos na Listagem 7.


angular.module("app").controller("HomeController", ["$scope", "syncObject", 
function($scope, syncObject) {
  syncObject.$bindTo($scope, "data");
}]);
 
angular.module("app").controller("NovoController", ["$scope", "FirebaseService", "$timeout",
 function($scope, FirebaseService, $timeout) {

   var d   = new Date();
   var dtF = (d.getDate() < 10 ? "0" : "") + d.getDate() + "/" + (d.getMonth() + 
   1 < 10 ? "0" : "") + (d.getMonth() + 1) + "/" + d.getFullYear() + " " + d.getHours() + 
   ":" + d.getMinutes() + ":" + d.getSeconds();

   $scope.msg = "";
   $scope.title = "";
   $scope.body = "";
   $scope.author = "";
   $scope.dt = dtF;

   $scope.addMessage = function() {
     if ($scope.title && $scope.body) {
       FirebaseService.add({ title: $scope.title, body: $scope.body, author: 
       $scope.author, date: $scope.dt });

       $scope.msg = "Salvo com Sucesso!";
       $timeout(function() {
         $scope.msg = "";
       }, 3000);

       $scope.title = "";
       $scope.body = "";
       $scope.author = "";
       $scope.dt = dtF;
     }
   };
 }
]);

Listagem 7. Controladora

Para a controladora HomeControler, quando o home.html for chamado pelo ngRoute (routes.js), a propriedade resolve (que possui o m�todo syncObject) chama a fun��o do FirebaseService.getPosts(). O m�todo syncObject � o mesmo que se encontra no HomeController da Listagem 7, fazendo a liga��o, assim dizendo que nossa fun��o syncObject vincula o nosso $scope (home.html) com o retorno de dados do Firebase.

Para a controladora NovoController, quando o novo.html for chamado pelo ngRoute (routes.js), a mesma chama a controladora NovoController da Listagem 7, fazendo a liga��o: quando o usu�rio clicar em enviar os dados do formul�rio para salvar o post do blog, a fun��o addMessage da Listagem 7 � chamada, passando as informa��es para FirebaseService.add(post) e salvando as informa��es na base de dados do Firebase.

Templates (home.html e novo.html)

Agora devemos apresentar os nossos dados na view que foram passados para nossa controladora, de acordo com o c�digo da Listagem 8. Al�m disso, vamos criar um formul�rio para enviar os dados do novo post, conforme a Listagem 9.


<div class="row" >
 <div class="col-sm-8 blog-main">
   <div class="blog-post" ng-repeat="post in data.posts" >
     <h2 class="blog-post-title">{{ post.title }}</h2>
     {{ post.body }}
     <p class="blog-post-meta">{{ post.date }} por 
     <a href="#">{{ post.author }}</a></p>
   </div>
 </div>
 <div class="col-sm-3 col-sm-offset-1 blog-sidebar">
   <div class="sidebar-module sidebar-module-inset">
     <mast-about></mast-about>
   </div>
   <div class="sidebar-module">
     <h4>Quer Saber Mais?</h4>
     <ol class="list-unstyled">
       <li><a href="//www.devmedia.com.br/space/eduardo-malherbi-martins">
       DevMedia</a></li>
     </ol>
   </div>
 </div>
</div>

Listagem 8. View Home HTML


<div class="row" >

 <div class="col-sm-8">
   <div>
     <form>
       <div class="form-group">
         <label for="title">T�tulo</label>
         <input type="text" class="form-control" id="title" name="title" 
         ng-model="title" placeholder="T�tulo do post.">
       </div>
       <div class="form-group">
         <label for="body">Descri��o</label>
         <textarea id="body" name="body" ng-model="body" class="form-control" 
         rows="7" placeholder="Descri��o do post."></textarea>
       </div>
       <div class="form-group">
         <label for="author">Autor</label>
         <input type="text" class="form-control" id="author" name="author" 
         ng-model="author" placeholder="Autor do post.">
       </div>
       <div class="form-group">
         <label for="dt">Data</label>
         <input id="dt" name="dt" ng-model="dt" class="form-control" 
         placeholder="Data do post." disabled>
       </div>
       <button ng-click="addMessage()"  type="button" 
       class="btn btn-primary">Enviar</button>
     </form>
   </div>

   <div style="margin-top: 10px" >
     <div ng-if="msg">
       <p class="bg-primary" style="padding: 10px" >{{ msg }}</p>
     </div>
   </div>
 </div>

 <div class="col-sm-3 col-sm-offset-1 blog-sidebar">
   <div class="sidebar-module sidebar-module-inset">
     <mast-about></mast-about>
   </div>
   <div class="sidebar-module">
     <h4>Quer Saber Mais?</h4>
     <ol class="list-unstyled">
       <li><a href="//www.devmedia.com.br/space/eduardo-malherbi-martins">
       DevMedia</a></li>
     </ol>
   </div>
 </div>
</div>

Listagem 9. View Novo HTML

Na Listagem 8 a diretiva ngRepeat representa o for das linguagens de programa��o (JavaScript, PHP, Java). � no la�o do loop que conseguimos pegar o objeto post e apresentar o t�tulo e corpo do texto.

Na Listagem 9, as tags ng-model e ng-click nos auxiliam no envio dos dados para nossa controladora. As vari�veis criadas dentro da tag ng-model refletem em nossa controladora o mesmo para tag ng-click.

Com isso j� temos o nosso blog funcionando, e buscando os posts no banco de dados Firebase e passando para nossa controladora, a mesma ligada com o nosso HTML e apresentando os dados de forma din�mica. Tamb�m j� temos a possibilidade de inserir um novo post e enviar para o banco de dados do Firebase.

Diretivas (directives.js)

Uma das coisas mais interessantes do AngularJS � que podemos criar nossos pr�prios componentes, sem precisar rescrever c�digos, tornando o desenvolvimento r�pido.

J� reparou que no index.html temos as tags html �� e ��? Quando rodamos nossa aplica��o, um c�digo HTML � injetado nesses elementos. Veja como isso funciona no arquivo directives.js da Listagem 10.


angular.module("app").directive("mastHead", function() {
 return {
   templateUrl: 'partials/mast-head.html'
 };
});
angular.module("app").directive("mastFooter", function() {
 return {
   templateUrl: 'partials/mast-footer.html'
 };
});
angular.module("app").directive("mastAbout", function() {
 return {
   templateUrl: 'partials/mast-about.html'
 };
});

Listagem 10. Diretivas JS

Segundo o AngularJS, as diretivas s�o marcadores em um elemento DOM que informam ao compilador HTML da AngularJS para anexar um comportamento especificado para esse elemento. Observe como ficou nosso elemento HTML mast-head.html na Listagem 11.


<div class="blog-masthead">
 <div class="container">
   <nav class="blog-nav">
     <a class="blog-nav-item" ng-href="#/">Home</a>
     <a class="blog-nav-item" ng-href="#/novo">Novo Post</a>
   </nav>
 </div>
</div>
 
<div class="container">
 <div class="blog-header">
   <h1 class="blog-title">DevMedia</h1>
   <p class="lead blog-description">Meu Blog.</p>
 </div>
</div>

Listagem 11. Diretivas HTML

Para o nosso blog, as nossas diretivas injetam o c�digo HTML (mast-head.html) no elemento criado, que encontra-se no index.html. Para fazer essa liga��o precisamos de um c�digo em JavaScript, ligando a tag mast-head com o HTML mast-head.html. Para as demais diretivas �� e �� o mesmo processo foi utilizado.

As Figuras 1 e 2 mostram o resultado final do nosso blog.

Refer�ncias:

Tecnologias:

Confira outros conte�dos:

Programador Mobile

Desenvolvimento de aplicativos para...

Conceitos b�sicos para programar para...

Assista grátis a nossa aula inaugural

Perguntas frequentes

Quem somos?

Por que a programação se tornou a profissão mais promissora da atualidade?

Como faço para começar a estudar?

Em quanto tempo de estudo vou me tornar um programador?

Sim, você pode se tornar um programador e não precisa ter diploma de curso superior!

O que eu irei aprender estudando pela DevMedia?

Principais diferenciais da DevMedia

Qual o investimento financeiro que preciso fazer para me tornar um programador?

Como funciona a forma de pagamento da DevMedia?

Por Eduardo Em 2015

Coment�rios nesta publica��o Escrever um coment�rio sobre conte�do

Edno Cardoso

N�vel 5

Prezados,
Boa Tarde.

Estou iniciando estudo com AngularJS e tendo interesse no uso do Firebase estou estudando o c�digo apresentado no tutorial.
Ao roda-lo e enviar um post, apesar de receber uma mensagem de salvo com sucesso, observo que no console do chrome aparece a seguinte mensagem.

firebase.js:40 FIREBASE WARNING: This Firebase project requires import into Google Cloud Platform to resume service. Visit the doc https://firebase.google.com/support/guides/firebase-web#import_your_project_to_the_firebase_console or reach out to Firebase support for help. Without action, this project will be permanently deleted on Tuesday, May 15th, 2018. (https://devmediablog.firebaseio.com)

O que poderia estar gerando esta esta mensagem?

há +1 ano

Ver coment�rio anterior

Fabricio Kawata

N�vel 0

Oi Edno. Essa mensagem ocorre devido ao fato do projeto Firebase estar utilizando algumas defini��es antigas da plataforma. Em suma, o pr�prio Firebase est� emitindo um alerta sobre fazer a atualiza��o para sua nova vers�o, colocando uma data m�xima para que isso aconte�a. Neste caso, como o projeto Firebase foi pr�-fornecido pelo autor, s� ele pode fazer essa altera��o. Mas sugiro que voc� acesse o site do Firebase e tente criar um projeto backend pr�prio, j� seguindo os novos padr�es. Isso ser� de grande valia em sua jornada como dev.

Site do Firebase em portugu�s:
https://firebase.google.com/?hl=pt-br

Um Forte Abra�o!

há +1 ano

Nossos casos de sucesso

Leonardo Carlos

Eu sabia pouqu�ssimas coisas de programa��o antes de come�ar a estudar com voc�s, fui me especializando em v�rias �reas e ferramentas que tinham na plataforma, e com essa bagagem consegui um est�gio logo no in�cio do meu primeiro per�odo na faculdade.

Lucas Rodrigues

Estudo aqui na Dev desde o meio do ano passado! Nesse per�odo a Dev me ajudou a crescer muito aqui no trampo.
Fui o primeiro desenvolvedor contratado pela minha empresa. Hoje eu lidero um time de desenvolvimento!
Minha meta � continuar estudando e praticando para ser um Full-Stack Dev!

Her�clito J�nior

Economizei 3 meses para assinar a plataforma e sendo sincero valeu muito a pena, pois a plataforma � bem intuitiva e muuuuito did�tica a metodologia de ensino. Sinto que estou EVOLUINDO a cada dia. Muito obrigado!

Julio Cablen

Nossa! Plataforma maravilhosa. To amando o curso de desenvolvimento front-end, tinha coisas que eu ainda n�o tinha visto. A did�tica � do jeito que qualquer pessoa consegue aprender. S�rio, to apaixonado, adorando demais.

Joelberth Sena

Adquiri o curso de voc�s e logo percebi que s�o os melhores do Brasil. � um passo a passo incr�vel. S� n�o aprende quem n�o quer. Foi o melhor investimento da minha vida!

Felipe Nunes

Foi um dos melhores investimentos que j� fiz na vida e tenho aprendido bastante com a plataforma. Voc�s est�o fazendo parte da minha jornada nesse mundo da programa��o, irei assinar meu contrato como programador gra�as a plataforma.

Wanderson Oliveira

Comprei a assinatura tem uma semana, aprendi mais do que 4 meses estudando outros cursos. Exerc�cios pr�ticos que n�o tem como n�o aprender, est�o de parab�ns!

Jos� Lucas

Obrigado DevMedia, nunca presenciei uma plataforma de ensino t�o presente na vida acad�mica de seus alunos, parab�ns!

Eduardo Dorneles

Aprendi React na plataforma da DevMedia h� cerca de 1 ano e meio... Hoje estou h� 1 ano empregado trabalhando 100% com React!

Adauto Junior

J� fiz alguns cursos na �rea e nenhum � t�o bom quanto o de voc�s. Estou aprendendo muito, muito obrigado por existirem. Est�o de parab�ns... Espero um dia conseguir um emprego na �rea.

Ver todos os casos de sucesso