Trabalhando com a REST API V2 do WordPress usando Ionic e AngularJS — Parte 2: Listando todos posts

Na semana passada começamos nossa série preparando o terreno, isso é, instalando todo o necessário para iniciarmos a construção.. Agora vamos partir para a programação e consumo dos dados do WordPress.

Hoje vamos criar uma página para exibir todos os posts do WordPress no nosso aplicativo, e por fim, na próxima semana vamos terminar compilando nosso app para rodar no Android.

[zilla_button url=”http://brasa.art.br/2015/dicas-e-truques-wordpress/trabalhando-com-a-rest-api-v2-do-wordpress-usando-ionic-e-angularjs-parte-1-preparando-o-terreno/” style=”blue” size=”medium” type=”round” target=”_self”] Clique para ver a primeira parte do tutorial [/zilla_button]

Hoje vamos criar uma página para exibir todos os posts do WordPress no nosso aplicativo, e por fim, na próxima semana vamos terminar colocando uma página para exibir um unico post, algo como o template single.php.

4 – Iniciando o ambiente de testes pelo navegador

Como hoje vamos trabalhar diretamente com o aplicativo, precisaremos testar tudo o que é feito, certo? O Ionic nos ajuda muito nessa parte, já que ele possui um servidor com auto-reload (logo quando um arquivo é salvo o navegador da refresh na página). Para usarmos precisaremos ir até a pasta do aplicativo (com a linha de comando) e digitar o seguinte comando:

ionic serve

Feito isso ele ira indicar o URL http://localhost:8100 para testarmos em tempo real nosso primeiro app.

5 – Adicionando a rota para a página de posts no AngularJS

Agora que já temos tudo instalado e estamos pronto para trabalhar vamos iniciar adicionando a página inicial que será a nossa página de posts. Para isso, vá até o arquivo /www/js/app.js, dentro dele, vá para a linha 32, nela, você deverá ver a variável $stateProvider, em baixo dela, adicione o seguinte código:

.state('posts', { // nessa linha eu defini o nome da rota a ser adicionada
    url: '/posts', // aqui eu configuro o URL da pagina
    templateUrl: 'templates/posts.html', // aqui é o caminho do template que vamos utilizar
})

Agora que já temos nossa rota adicionada, precisamos coloca-la como sendo a padrão, para isso, você deverá procurar a linha $urlRouterProvider.otherwise(‘/dash’);, troque ela pelo endereço da nossa nova página, ou seja, ficando $urlRouterProvider.otherwise(‘/posts’);

6 – Adicionando o controller e executando o AJAX para consumir os dados

Acabamos de adicionar a rota, agora vamos criar o AJAX que será utilizado para jogar os dados no nosso aplicativo.

Se você está usando uma instalação WordPress remota (ou seja, se não é em localhost) você precisará adicionar um plugin ao WordPress para podermos executar o AJAX sem erros. Faça o download dele através do GitHub.

Para executarmos o AJAX e jogarmos o conteúdo no aplicativo vamos primeiro adicionar um controller, ou seja, uma função que vai controlar toda uma parte do aplicativo, no nosso caso, esse controller irá fornecer as variáveis do recebidas pelo AJAX e jogar no template. Para adicionarmos o controller, abra o arquivo /www/js/controller.js e lá adicione o seguinte código:

.controller('getAllPosts', function($scope, $http) {
  var urlWPAPI = 'http://SEU_SITE/wp-json/wp/v2/posts/?filter[posts_per_page]=-1';
  $http.get( urlWPAPI)
    .then( function( data ){
      $scope.posts = data.data;
  });
});

Nessa parte, vou explicar linha por linha:

.controller('getAllPosts', function($scope, $http) {

Nessa primeira linha nós adicionamos um controller com o nome getAllPosts e adicionamos uma função para gerar ele, nessa função nós puxamos duas variaveis importantes no AngularJS, primeiro chamamos  a $scope, essa variável do tipo objeto é a responsável por guardar todas as outras variáveis e funções (nesse caso, métodos) do nosso controller. Já a variável $http  é a responsável por fazer as chamadas HTTP (AJAX).

  var urlWPAPI = 'http://SEU_SITE/wp-json/wp/v2/posts/?filter[posts_per_page]=-1';

Nessa outra linha eu defino a URL de onde vamos fazer o request HTTP. Perceba o argumento filter[posts_per_page]=-1, ele é o responsável por aplicar filtros (ou parâmetros) iguais aos do WP_Query. Nesse caso estou setando o numero de posts por página para -1, ou seja, iremos exibir tudo o que houver. Mas poderíamos usar outros filtros junto, como por exemplo, filter[category_name]=slug_da_categoria , com isso exibiríamos somente os posts da categoria escolhida.  Para saber mais sobre os filtros disponíveis, indico a documentação oficial da API.

  $http.get( urlWPAPI)

Nessa linha, usamos o método get() do objeto $http , ou seja, faremos uma requisição do tipo GET e passamos a URL setada anteriormente na variavel urlWPAPI .

  .then( function( data ){

Nessa linha usamos o callback then  do nosso request para poder pegar o resultado da mesma e jogamos o resultado na variavel data .

  $scope.posts = data.data;

Como expliquei anteriormente, temos uma variavel $scope  para onde será armazenado tudo o que quisermos do nosso controller para ser usado dentro do mesmo. Então criamos uma nova variável dentro dela chamada posts, onde ficará todo os devolvidos pela API. Usamos data.data porque a API do WordPress retorna algumas informações a mais que não vamos utilizar nesse caso, então só pegamos a variável data dentro do request, que é onde ficam todos posts.

Depois do nosso controller pronto, já podemos trabalhar com o HTML para exibir!

7 – Adicionando o template para os posts

Depois de configurado a rota e o controller, precisamos do template. Para isso, crie um novo arquivo na pasta /www/templates com o nome posts.html. Nele, adicione o seguinte conteúdo (irei explicar o que cada linha está fazendo mais a frente):

<ion-view view-title="Posts" ng-controller="getAllPosts">
  <ion-content class="padding">
    <div class="list card" ng-repeat="post in posts">
      <div class="item item-divider">{{post.title.rendered}}</div>
      <div class="item item-body">
        <div ng-bind-html="post.content.rendered"></div>
      </div>
    </div>
  </ion-content>
</ion-view>

Salve o arquivo e vá até o browser no endereço de testes do Ionic. Nesse momento nosso aplicativo já deverá estar funcionando!

Agora, explicarei linha por linha:

<ion-view view-title="Posts" ng-controller="getAllPosts">

Nessa primeira linha criamos um elemento onde ficará todo o HTML dos nossos posts. No atributo view-title=”Posts” colocamos o nome da página como Posts, isso será exibido no topo do nosso aplicativo, como na imagem a seguir:

Na mesma linha, o atributo ng-controller=”getAllPosts” configura como o controller dessa área o que criamos anteriormente.

As proximas linhas são só HTML, não muito importante, então vou pular para o que de fato importa.

  <div class="list card" ng-repeat="post in posts">

Nessa linha, adicionamos o atributo ng-repeat, que é uma das coisas mais legais no AngularJS. Com ele nós iniciamos um loop do tipo for, na verdade, seria mais parecido ao foreach do PHP. Nesse caso, nós iremos perrcorrer a variavel $scope.posts , criada no nosso controller anteriormente e para isso nós não precisamos chamar $scope.posts , como nós estamos num elemento dentro do nosso controller, só chamaremos como posts  e ele entenderá qual é a variável. Você pode ver mais opções de uso do ng-repeat na documentação oficial do AngularJS clicando aqui.

  <div class="item item-divider">{{post.title.rendered}}</div>

Nessa linha nós imprimimos o titulo do código. No AngularJS, nós podemos imprimir qualquer variavel no HTML usando somente {{variavel}} .

<div ng-bind-html="post.content.rendered"></div>

Nessa linha (6) nós usamos o atributo ng-bind-html  e não {{variavel}} , porque se usassemos {{variavel}} , esse elemento exibiria tags HTML e não as renderizaria, já que a variável possui tags HTML.

Continua na proxima semana! Fiquem ligados!!

Nesse tutorial de hoje nós já temos nosso aplicativo funcionando no ambiente de testes do Ionic. No próximo, iremos compilar e testar num dispositivo Android.