AngularJS: Portal de notícias com Wordpress e JSONApi

O AngularJS é um framework de código aberto escrito na linguagem JavaScript e mantido pelo Google.

Ele surge com uma proposta bastante inusitada de desenvolver o lado cliente de aplicações Web seguindo o padrão MVC (model, view controller), onde é possível desacoplar a lógica de negócio, dados e componentes lógicos. Assim como na maioria dos bons frameworks back-end do mercado, os testes são muito mais fáceis de serem realizados.

O mais importante é a interdependência fornecida pelo Angular, devido a sua manipulação de JSONs (objetos em notação ­JavaScript) é possível integrar o lado cliente da aplicação com qualquer outro sistema no lado servidor, sem haver a influência de um sistema sobre o outro. Para isso, basta que, no caso de softwares dinâmicos (sites que utilizem banco de dados, por exemplo), o servidor retorne objetos JSON e estes serão processados pelo Angular.

Organize-se em templates

O Angular proporciona a vantagem de criar esqueletos de página, ou seja, desenhar toda a estrutura física da página, independentemente do conteúdo que virá a preenchê-la. Desta forma, a aplicação ganha muito mais dinamicidade, possibilitando, por exemplo, a criação de templates totalmente independentes do lado back-end da aplicação.

Aplicações escritas em C#.NET, PHP, Python, e inúmeras outras linguagens podem facilmente serem integradas com o framework Angular, como será visto adiante a integração e comunicação entre duas plataformas diferentes. O primeiro sistema, Wordpress (gerenciador de conteúdo escrito em PHP), fornecerá todo o conteúdo dinâmico originário do banco de dados no formato JSON. Enquanto isso, o Angular (framework escrito em JavaScript) será o responsável por receber o conteúdo do Wordpress, processá-lo e enviá-lo às visualizações e posteriormente preencher os placeholders da template definida.

A forma de funcionamento do Angular é simples: é lido o HTML da página e interpretado pelo próprio Angular. Havendo tags especiais, é executada a diretiva (será tratado adiante) equivalente e o modelo é preenchido com o conteúdo dinâmico do template.

Conceitos importantes

Para colocar em prática as teorias explicadas acima, o Angular utiliza alguns conceitos cruciais. Os principais deles são: Interpolação, Módulos, Diretivas, Controladores, Serviços, Filtros e Injeção de Dependências. Nas linhas que se sucedem serão explicados todos eles.

Nota: Com o objetivo de não estender este texto, alguns conceitos mais aprofundados não serão vistos aqui. Para mais informações acesse https://docs.angularjs.org/guide.

• Interpolação (Interpolation): O conceito de interpolação é muito aplicado no desenvolvimento de templates com o Angular; Se o leitor é familiar em linguagens de programação como, por exemplo Ruby, não terá problemas para entender o conceito. Interpolação consiste em alocar espaços (placeholders) na template para depois estes espaços serem preenchidos com o dado propriamente dito.
• Módulos (Modules): Assim como em Java (Packets ou pacotes) e C# (namespaces), o Angular possui o módulo, que é um grande container onde se alocam controladores, diretivas, serviços, etc. Desta forma, é utilizado um grande sistema de hierarquia, onde o Módulo é o “Pai” de todos os outros elementos.
• Diretivas (Directives): Este é o conceito no qual é implementado o sistema de template. Uma diretiva é um trecho da página onde fica localizado um código HTML específico, que poderá ser utilizado em outras páginas. Uma diretiva é restringida em dois tipos: elemento ou atributo; para invocá-la são utilizados elementos DOM (Document Object Model), assim como atributos, nome de elementos ou classe CSS.
• Controladores (Controllers): Os controladores, seguindo a definição do padrão de arquitetura MVC, são os componentes responsáveis por manipular os dados que, posteriormente, serão enviados às visualizações (views) e renderizados na template.
• Serviços (Services): Os serviços são objetos ou funções disponibilizadas pelo Angular. Eles têm o papel de fornecer funcionalidades para uma tarefa específica. O objeto $http, cuja função é fazer a comunicação entre servidores HTTP, é um exemplo de serviço. Serviços personalizados podem ser criados.
• Filtros (Filters): Filtros são estruturas capazes de formatar o valor exibido na visualização (view) para o usuário final. O filtro currency, por exemplo, formata a string para valores financeiros.
• Injeção de Dependencias (Dependency Injection): Assim como em várias outras ferramentas de desenvolvimento, o Angular também aplica o conceito de injeção de dependências em suas aplicações. Este conceito visa, entre outras coisas, à separação completa das responsabilidades de cada componente (single responsibility principles, traduzindo...princípio da responsabilidade única). Com isso, o código programado é completamente desacoplado e obedece aos padrões atuais para o bom desenvolvimento de software.
  Veja algumas vantagens de aplicar este conceito.
  1. A injeção de dependências traz consigo a possibilidade, mesmo que indiretamente, de estar sempre refatorando o seu código, facilitando também o uso dos testes unitários (unit tests).
  2. A camada concreta da aplicação não terá conhecimento sobre o funcionamento da camada abstrata, a primeira apenas invocará o uso da segunda. Isto possibilita mais reusabilidade, testabilidade e melhor manutenção no código desenvolvido.
  3. É possível que dois programadores atuem no desenvolvimento de duas classes independentes, mas que no futuro se comunicarão.

Confira nas Listagens 1 e 2 exemplos de Injeção de Dependências em Módulos e Controladores respectivamente.

Listagem 1. Injeção de Dependência em Módulos.

  angular.module('myModule', [])
  .config(['depProvider', function(depProvider) {
    // ...
  }])
  .run(['depService', function(depService) {
    // ...
  }]);

Listagem 2. Injeção de Dependências em Controladores.

  someModule.controller('MyController', ['$scope', 'dep1', 'dep2', function($scope, dep1, dep2) {
  ...
  $scope.aMethod = function() {
    ...
  }
  ...
  }]);

JSON API plugin

O plugin JSON API, disponível para a plataforma Wordpress, é um utilitário que permite receber e manipular o conteúdo vindo do Wordpress através de requisições HTTP (GET e POST). O conteúdo recebido, como o próprio nome do plugin indica, é entregue no formato JSON.

O JSON API funciona basicamente de duas formas:

1. Modo Implícito – O modo implícito é ativado com a inicialização da variável de comando json em qualquer página Wordpress; este valor será necessário não vazio. Exemplo: http://www.seusite.com.br/?json=1.
2. Modo Explícito – Este modo é ativado de forma análoga ao Implícito, entretanto a variável de comando json é inicializada com uma string não vazia e que faz referência a um método presente no core do plugin. Esta será a forma utilizada neste artigo. Exemplo: http://www.seusite.com.br/?json=get_recent_posts .

Nota: Para mais informações sobre o JSON API Plugin para Wordpress acesse https://wordpress.org/plugins/json-api/other_notes/#1.-General-Concepts

Controladores

Assim como no framework AngularJS, o JSON API oferece controladores os quais manipulam os dados Wordpress antes de responder à requisição HTTP. Por padrão, o plugin oferece três principais controladores: o Core Controller (o controlador principal do utilitário), o Post Controller (responsável por manipular as postagens do Wordpress) e, por último, o Respond Controller (responsável pela resposta enviada ao usuário).

Há ainda a opção de criar controladores personalizados de acordo com a necessidade do desenvolvedor. Acesse https://wordpress.org/plugins/json-api/other_notes/#5.2.-Developing-JSON-API-controllers e confira mais informações.

Métodos

Alguns dos principais métodos, inclusive os que serão utilizados neste artigo, serão explicados abaixo:

1. get_recent_posts – Retorna um array de objetos contendo os posts mais recentes cadastrados. Para invocá-lo basta inicializar a variável json de comando com o valor 1 (modo implícito), ou com o valor get_recent_posts (modo explícito). Este método recebe três parâmetros opcionais: count (quantidade de posts por página), page (retorna o número da página de onde vem os resultados) e post_type (retorna tipos de post personalizados).
2. get_post – Retorna um objeto com o post específico definido no parâmetro post_id ou apenas id.
3. get_author_posts – Retorna um array de objetos contendo as páginas/posts escritos por um autor específico definido no parâmetro author_id, id ou ainda slug (apelido do autor no Wordpress). É possível também invocar este método de forma implícita na página específica do autor, basta inicializar a variável json com o valor 1.
4. get_author_index – Retorna um array de objetos contendo os autores ativos cadastrados no Wordpress.
5. get_sidebar – Retorna todos os widgets presente em uma sidebar específica definida pelo parâmetro sidebar_id.

Aplicação na prática

Neste artigo será utilizado o portal de notícias fictício “Portal News”. Este é um portal onde os repórteres podem cadastrar notícias diariamente.

Instalação do Wordpress

Para instalar o Wordpress é muito simples. Acesse https://br.wordpress.org/ e baixe a última versão do gerenciador de conteúdo. Em seguida, descompacte o arquivo baixado no diretório raiz do seu site. Confira na Figura 1 o arquivo na pasta do servidor Apache.

Figura 1. Arquivo Wordpress gravado no diretório Apache.

Acesse no browser o diretório onde foi gravado os arquivos do Wordpress, neste caso http://localhost/PortalNewsWordpress/. Confira na Figura 2 a página de instalação.

Figura 2.Instalação do Wordpress.

Siga o passo a passo e o Wordpress será instalado com sucesso. Confira na Figura 3 o sucesso da instalação

Figura 3. Wordpress instalado com sucesso.

Instalação do plugin JSON API

A partir das versões atuais do Wordpress é exigido um servidor FTP para realizar a transferência de arquivos, consequentemente, a instalação de plugins.

Para não estender este artigo, mesmo que não recomendada, será feita manualmente a instalação.

Acesse https://wordpress.org/plugins/json-api/ e faça o download do plugin JSON API. Coloque este arquivo dentro de “wp-content/plugins” e descompacte-o. Por último acesse a sessão “plugins instalados” e ative o JSON API.

Acesse http://localhost/PortalNewsWordpress/?json=1 e confira o plugin funcionando corretamente.

Nota: A instalação do AngularJS, como não é o objetivo principal deste artigo será omitida.

Estrutura interna de diretórios.

Confira na Figura 4 a estrutura hierárquica de diretórios.

Figura 4. Diretórios do projeto.

Página Principal

Confira na Listagem 1 o código HTML da página principal do Portal News (arquivo index.html).

Listagem 1. Página principal

  <html ng-app="myApp">
   <head>
              <meta charset="utf-8">
              <title>Portal News – As melhores notícias só aqui!</title>
   </head>
   <body>
              <h1>Portal News – As melhores notícias só aqui!</h1>
              <a href="#/noticia">Clique aqui e veja as notícias!</a>
              <div ng-view></div>
              <script src="js/bower_components/angular/angular.js"></script>
              <script src="js/bower_components/angular-route/angular-route.js"></script>
              <script src="js/app.js"></script>
              <script src="js/noticia/noticia.js"></script>
              <script src="js/components/version/version.js"></script>
              <script src="js/components/version/version-directive.js"></script>
              <script src="js/components/version/interpolate-filter.js"></script>
   </body>
  </html>

Como pode-se perceber o código HTML é bastante intuitivo e sem necessidade de muitos comentários adicionais. Vale ressaltar a presença do conceito de diretiva falado anteriormente.

Na tag é usada a diretiva ng-app, esta diretiva é responsável por comunicar ao angular qual será o módulo principal da aplicação. Há também, na tag

Controlador Noticia

Ao manipular as notícias de forma dinâmica no Angular faz-se necessário o uso de controladores. A seguir será criado o controlador notícias, ele será o responsável por manipular as notícias antes de renderizá-las. Confira na Listagem 2 o código JavaScript do controlador Noticia (arquivo noticia.js, localizado em “js/noticia/”).

Listagem 2. Controlador Noticia.

  'use strict';
   
  angular.module('myApp.noticia', ['ngRoute'])
   
  .config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/noticia', {
      templateUrl: 'noticia.html',
      controller: 'NoticiaCtrl'
    });
  }])
   
  .controller('NoticiaCtrl', ['$scope', '$http', function ($scope, $http) {
              $scope.noticias = {};
              $http({             
                          method: 'GET',
                          url: 'http://localhost/PortalNewsWordpress/?json=get_recent_posts',
              })
              .success(function(data){
                          $scope.noticias = data;
                          console.log($scope.noticias);
              });
  }]);

Primeiramente, é criado o módulo noticia através da função module(). A seguir são feitas algumas opções de roteamento do controlador no método config(), para não perder o foco deste texto, este assunto será visto com mais ênfase em outra oportunidade.

O método controller(), ele é o método que cria o controlador propriamente dito. O primeiro parâmetro passado é o nome do controlador; o segundo são os serviços específicos do Angular que serão usados na manipulação dos dados; o terceiro é uma função anônima a qual define todo o comportamento do controlador.

É utilizado ainda o método $http(), fornecido pelo core do Angular, este método realiza uma requisição HTTP para um determinado servidor. Neste caso, a requisição é do tipo GET e aponta para a URL http://localhost/PortalNewsWordpress/?json=get_recent_posts. Por último, caso haja sucesso na requisição, é armazenada na propriedade noticias do controlador, definida no serviço $scope, o valor advindo da transação.

Atente-se que na variável $scope, é utilizado a injeção de dependência para gravar as propriedades do controlador NoticiaCtrl.

Objeto $http

O objeto $http é um serviço fornecido pelo core do Angular cuja função é facilitar a comunicação entre requisições remotas com servidores HTTP. Estas requisições HTTP são feitas através do objeto XMLHttpRequest ou via JSONP. Confira acima, na Listagem 2, como é realizada requisição HTTP com o objeto $http.

Objeto $scope

O $scope é o objeto responsável por criar propriedades (atributos) nos controladores. Como é sabido, no JavaScript não há o conceito de classe, mas sim o prototype.

O conceito prototype consiste basicamente em objetos os quais se derivam de outros, podendo possuir características(atributos) ou ações (métodos, no JavaScript funções) diferentes do objeto pai de onde ele deriva.

Com isso, ao se criar controladores no Angular, são criados objetos com seus respectivos atributos e funções. Para acessar estas propriedades/funções fora do Controlador, é utilizado o objeto $scope, que nada mais é que utilizar a propriedade prototype (nativa do JavaScript), para realizar a ponte entre as visualizações(views) e as “variáveis do controlador”. Volte à Listagem 2 novamente e confira o uso do objeto $scope no controlador, após isso, veja na Listagem 3 a conexão entre a view e o objeto $scope.

Nota: Acesse https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype e confira mais sobre prototype.

Seguindo o padrão MVC, confira na Listagem 3 a página de exibição de notícias (noticia.html, localizado em “app/”).

Listagem 3. Exibindo Notícias.

  <div ng-controller="NoticiaCtrl">
              <h2>Exibindo {{noticias.count_total}} noticia(s) encontradas.</h2>
              <div ng-repeat="noticia in noticias.posts">
                          <h3>{{noticia.title}}</h3>
                          <p>{{noticia.content}}</p>
                          <small>Publicado por: {{noticia.author.name}} em {{noticia.date}}</small>
              </div>  
  </div>

Na primeira linha do código acima é definido qual controlador será utilizado no escopo da tag

A seguir, é usada a diretiva ng-repeat, responsável por realizar um loop definido através de uma “expressão angular”. Se o leitor está acostumado em linguagens de programação, C# por exemplo, esta diretiva é equivalente ao foreach. No caso do C#, a expressão utilizada é exatamente igual no Angular.

Teste da aplicação

Acesse http://localhost/PortalNewsAngular/app/ e veja a aplicação funcionando. Clique no link para visualizar as notícias, caso tudo tenha ido bem, será vista a página com a lista de notícias. Confira na Figura 5 o resultado.

Figura 5. Aplicação exibindo notícias cadastradas.

Com isso, este texto teve o intuito de introduzir o framework AngularJS no desenvolvimento de aplicações web. Como demonstração da flexibilidade deste framework, foi passado um exemplo prático, juntamente à plataforma Wordpress e o plugin JSONApi, comprovando o quão fácil e produtivo é criar aplicações web utilizando estas duas ferramentas.

Gostou do artigo ? Quer deixar sua opinião ? Até a próxima!