sexta-feira, 15 de novembro de 2013

REST - Aula Prática - AngularJS e NodeJS

Até o presente momento aprendemos como utilizar um monte de softwares de modo independente e agora começamos a juntar todas às ideias. Porém, gostaria de lembrar que REST é uma Arquitetura e que pode ser aplicada a qualquer software, escolhi JavaScript simplesmente para mostrar que é possível criar um sistema interessante com essa tecnologia.

Considere as postagens passadas como pré-requisitos obrigatórios.

Montando o Ambiente

Inicialmente precisamos baixar o AngularJS, para isso digite:
bower install angular

Veja mais referências sobre o Bower na postagem anterior. Para montarmos a estrutura do nosso sistema digite

express app
cd app
npm install

Crie dentro da pasta "app" a seguinte estrutura de pastas:

/sist
   /css
   /javascript
   /lib

Copie os seguintes arquivos:

  • Para a pasta "css" copie o arquivo "bower_components\bootstrap\docs\assets\css\bootstrap.css"
  • Para a pasta "lib" copie o arquivo "bower_components\angular\angular.min.js"

Pronto, toda a estrutura do nosso projeto já está montada.

AngularJS através do Servidor NodeJS

Começamos nossa aplicação na pasta "app", modifique o arquivo app.js:

var ficheInfo=[
  { id:1, nom:"Paulinho", prenom:"Moska" },
  { id:2, nom:"Maria", prenom:"Gadú" },
  { id:3, nom:"Cássia", prenom:"Eller" }
]

var express = require('express'),
  routes = require('./routes'),
  fs = require('fs');

var app = module.exports = express.createServer();

app.configure(function(){
  app.set('views', __dirname + '/views');
  app.set('view engine', 'jade');
  app.use(express.bodyParser());
  app.use(express.methodOverride());
  app.use(app.router);
  app.use(express.static(__dirname + '/public'));
  app.use('/javascript', express.static(__dirname + '/sist/javascript'));
  app.use('/lib', express.static(__dirname + '/sist/lib'));
});

app.configure('development', function(){
  app.use(express.errorHandler({ dumpExceptions: true, showStack: true }));
});

app.configure('production', function(){
  app.use(express.errorHandler());
});

// Rotas do Sistema

app.get('/', function(req, res) {
  fs.readFile('./sist/hello.html', function(error, content) {
    if (error) {
      res.writeHead(500);
      res.end();
    } else {
      res.writeHead(200, { 'Content-Type': 'text/html' });
      res.end(content, 'utf-8');
    }
  });
});
app.get('/api/affiche', function(req, res) {
 res.json(ficheInfo);
});

app.listen(3000);
console.log("Express server listening on port %d in %s mode", app.address().port, app.settings.env);

Lembramos que este arquivo é o "tiro inicial" do nosso servidor. As modificações neste arquivo foram:

  • A criação de uma lista de artistas com a seguinte estrutura: id, nome e sobrenome.
  • A adição da FS para lermos arquivos.
  • A disponibilização de uso das duas pastas contidas na pasta "sist"
  • A modificação da rota padrão "/" para a execução do arquivo "hello.html".
  • A adição da rota "/api/affiche" que gera uma saída em formato JSON da nossa lista de artistas criada inicialmente.

Uma das características de um sistema REST é a pré-descrição da arquitetura de GET e POST, ou seja, todas as rotas devem existir como identificação no servidor. Na pasta "sist" crie um arquivo chamado "hello.html" e adicione as seguintes linhas:

<!doctype html>
<html>
 <head>
  <meta Charest="UTF-8">
  <title>Teste AngularJS/NodeJS</title>
  <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
  <script src="lib/angular.min.js"></script>
  <script src="javascript/hello.js"></script>
 </head>
 <body ng-app ng-controller="monControl">
  <h3>Listagem dos Cantores</h3>
  <div ng-repeat="a in artistas">
   <p>{{a.id}}. {{a.nom}} {{a.prenom}}</p>
  </div>
 </body>
</html>

Como visto na aula de Listas com o AngularJS, temos a tag "ng-repeat" que interage com coleções. Na pasta "javascript" crie um arquivo chamado "hello.js" e adicione as seguintes linhas:

function monControl($scope,$http){
 $http.get('/api/affiche').success(function(data){
  $scope.artistas = data;
 })
}

No controller "monControl" carregado para a variável de escopo "list o resultado da chamada da pasta "/api/affiche" que será produzida via JSON através do NodeJS. É dessa forma que ocorre a interação entre o NodeJS e o AngularJS, o servidor produz um conteúdo e o cliente obtém através de uma URL. Agora resta apenas executar a aplicação com o comando:

node app.js

Acesse o endereço: http://localhost:3000/, e veja a aplicação funcionando.

Obrigado e até a próxima
Fernando Anselmo

0 comentários:

Postar um comentário