Consultando a API do Blog.
E ai pessoal, vamos voltar para o desenvolvimento da nossa aplicação, devido ao pouco tempo que livre, resolvi que a série dará continuidade e será lançada toda quarta-feira pela manhã, e na parte 2 da nossa série estaremos consultando nossa API e consumindo as postagens do blog.
Para começar iremos editar o nosso arquivo index.html e deixar com a seguinte estrutura
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link rel="manifest" href="manifest.json">
<!-- un-comment this code to enable service worker
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.log('Error', err));
}
</script>-->
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="styles/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="app/app.js"></script>
<script src="app/posts/posts.controller.js"></script>
<script src="app/posts/posts.service.js"></script>
<script src="app/menu/menu.controller.js"></script>
</head>
<body ng-app="appvila">
<ion-nav-view></ion-nav-view>
</body>
</html>
Estaremos importando os scripts de serviços e controladores dentro do index.html e o nome da nossa aplicação vai ser appvila dentro do ng-app.
Feito isso podemos agora criar nosso controlador de Posts e o serviço onde vamos tratar a chamada aos endpoints, assim vamos poder consumir o serviço no nosso controlador. Para o desenvolvimento da nossa aplicação estarei adotando o padrão de projeto proposto por John Papa, para você estudar mais sobre clique aqui, você encontrará tanto sobre angular 1 como angular 2.
Dentro do diretório app/posts iremos criar o arquivo chamado posts.service.js, ele será responsável por consultar nosso endpoints da nossa API do WordPress. Nele iremos escrever o seguinte código:
angular.module('posts.service', [])
.factory('postsService', postsService);
function postsService($http, $q) {
// interface
var service = {
posts: [],
getPosts: getPosts
};
return service;
// implementacao
function getPosts() {
var def = $q.defer();
$http.jsonp("http://localhost/appvila/wp-json/posts?filter[posts_per_page]=3&_embed&_jsonp=JSON_CALLBACK
")
.success(function(data) {
service.posts = data;
def.resolve(data);
})
.error(function() {
def.reject("Falha ao buscar posts");
});
return def.promise;
}
}
Vamos criar uma promise onde iremos retornar o resultado de nossa requisição em formato JSON em caso de sucesso ou falha em caso de erros. Falando um pouco sobre promise. Uma promise é um proxy para um valor não necessariamente conhecido quando a promessa é criada. Ele permite que você associe manipuladores com o valor de sucesso ou o motivo de falha de uma ação assíncrona. Isso permite que métodos assíncronos retornem valores como métodos síncronos: em vez de retornar imediatamente o valor final, o método assíncrono retorna uma promessa de fornecer o valor em algum ponto no futuro.
Uma promise está em um destes estados:
- pendente: estado inicial, não cumprido ou rejeitado.
- Preenchido: o que significa que a operação foi concluída com êxito.
- Rejeitada: significa que a operação falhou.
Com o nosso serviço criado, usaremos ele no controlador que será chamado na visão. Nosso arquivo posts.controller.js ficará assim:
angular.module('posts.controller', [])
.controller('PostsCtrl', PostsCtrl);
function PostsCtrl(postsService) {
var vm = this;
//usando nosso service para consultar as postagens
vm.posts = [];
vm.getPosts = function(){
postsService.getPosts()
.then(
function(posts){
for(var i=0; i < posts.length; i++){
vm.posts.push(posts[i]);
}
vm.posts = posts;
},
function(data) {
console.log('Falha ao consumir API.')
}
);
};
vm.getPosts();
}
No nosso controlador iremos injetar o serviço para podermos usá-lo, dentro da nossa promise estaremos preenchendo um vetor com o resultado das postagens, isso será usado posteriormente para fazer a paginação. Com nosso controlador pronto para pegar as postagens vamos agora implementar a visão, onde serão exibidos todas as postagens.
Agora vamos abrir o posts.html e escrever o seguinte código:
<ion-view view-title="Posts">
<ion-content>
<div ng-repeat="post in postsCtrl.posts" class="list card">
<div class="item item-avatar">
<img ng-src="{{post.author.avatar}}">
<h2 class="cor-texto">{{post.author.name}}</h2>
<p class="cor-texto">{{post.date}}</p>
</div>
<div class="item item-body">
<div>
<h2 ng-bind-html="post.title"></h2>
<img class="full-image" src="{{post.featured_image}}">
</div>
</div>
</div>
</ion-content>
</ion-view>
O código acima irá iterar sobre todas as postagens que foram retornadas e serão exibidas para gente na nossa rota principal, podemos ver o que nossa API retorna, usando a url diretamente no browser ou usando um programa para testar API’s chamado POSTMAN, com ele podemos visualizar o JSON que é retornado da API, que contém a seguinte estrutura:
Vamos deixar o controlador do menu criado, mas sem nenhuma função:
angular.module('menu.controller', [])
.controller('MenuCtrl', MenuCtrl);
function MenuCtrl(){
}
Estamos quase prontos para testar, vamos injetar nossos controladores e serviços no nosso módulo principal o app.js, ele ficará assim:
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
angular.module('appvila', ['ionic', 'menu.controller', 'posts.controller', 'posts.service'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
// Don't remove this line unless you know what you are doing. It stops the viewport
// from snapping when text inputs are focused. Ionic handles this internally for
// a much nicer keyboard experience.
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'app/menu/menu.html',
controller: 'MenuCtrl as menuCtrl'
})
.state('app.posts', {
url: "/posts",
views: {
'menuContent': {
templateUrl: "app/posts/posts.html",
controller: 'PostsCtrl as postsCtrl'
}
}
});
$urlRouterProvider.otherwise('/app/posts');
});
Com todas as telas ajustadas, podemos testar nossa aplicação, acessando o diretório pelo terminal e usando o comando
$ ionic serve -l
O aplicativo terá essa aparência:
Podemos ver que a aplicação está funcionando e já é possível visualizar as postagens, porém só temos uma postagem em nosso blog, vamos criar mais algumas para podermos implementar a paginação com scroll infinito futuramente.
A página onde nos permite criar postagens é essa acima, criei algumas, vocês podem ficar a vontade para criar quantas quiserem. Podemos perceber que foram criadas exibidas apenas 3 postagens no nosso aplicativo, isso ocorreu por conta da url que passamos no nosso serviço, onde foi filtrado para trazer apenas 3 posts por página.
Vocês podem conferir como anda ficando nossa aplicação em https://github.com/viladosilicio/serie-ionic. Para ficar visivelmente melhor, vamos acessar o dashboard do nosso blog e criar uma categoria e um post novo.
