No artigo anterior, criamos um simples arquivo JSON para simular nosso banco de dados. Neste artigo, vamos ver como podemos gerar uma massa de dados e interagir com uma interface.
Instalando as ferramentas necessárias
Abra seu Terminal/Shell e digite:
npm install faker underscore
Vamos utilizar o faker para gerar nossos dados e o underscore em nossa função. Você encontra mais informações sobre o faker aqui. Com ele, você pode gerar todo tipo de dado – endereços, imagens, datas, entre outras coisas.
Criando o arquivo gerador da API
Continuando com a mesma pasta do exemplo anterior, vamos criar o arquivo que vai gerar nossa API.
Dentro dessa pasta, crie um arquivo chamado fakerdb.json e insira o seguinte código:
module.exports = function() {
var faker = require('faker');
var _ = require('underscore');
return {
band: _.times(10, function (number) {
return {
id: number,
name: faker.random.arrayElement(["Ozzy", "Metallica", "Rush", "Marillion"]),
description: faker.lorem.paragraph(),
active: true,
picture: faker.image.imageUrl('g','350','150')
}
})
}
}
Note que a função times() determina a quantidade de registro que vamos gerar – nesse exemplo 10, mas você pode passar o quanto quiser.
Iniciando o servidor
Agora, vamos iniciar o servidor e ver o resultado.
Abra seu Terminal/Shell e digite:
json-server fakerdb.json
Abra seu navegador e acesse a url localhost:3000/band.
Você vai ver o resultado abaixo:
[{
"id": 0,
"name": "Marillion",
"description": "Non voluptas quam voluptas voluptate.\nSit expedita dolores voluptas voluptas harum minus.\nEaque magnam rerum cum.\nId aspernatur et.\nEius quo voluptas.",
"active": true,
"picture": "http://lorempixel.com/g/350/150"
}, {
"id": 1,
"name": "Ozzy",
"description": "Commodi eaque nulla molestiae dolore omnis dicta.\nSunt nihil doloribus quo dolor et.\nOmnis voluptatum unde porro officia nobis.",
"active": true,
"picture": "http://lorempixel.com/g/350/150"
}, {
"id": 2,
"name": "Marillion",
"description": "Ut consectetur mollitia.\nVelit laboriosam aut mollitia quidem voluptas.\nQuam voluptatem earum harum ea qui veniam eum aut.\nAsperiores non reprehenderit ut.\nConsequatur ut impedit sit harum.\nPossimus et corporis necessitatibus dolor eveniet odio quia.",
"active": true,
"picture": "http://lorempixel.com/g/350/150"
}, {
"id": 3,
"name": "Ozzy",
"description": "Quia voluptatum et esse.\nDolorum quia a est voluptatem.\nOptio consequatur eos excepturi fugiat.\nEst rem qui iste nesciunt eius quis omnis explicabo.\nConsequatur nemo culpa placeat.\nFuga minus fugiat et animi dolores magnam temporibus delectus aperiam.",
"active": true,
"picture": "http://lorempixel.com/g/350/150"
}, {
"id": 4,
"name": "Ozzy",
"description": "Eligendi quo at.\nOmnis nobis perspiciatis a eum accusantium qui.\nDolorum optio nostrum.",
"active": true,
"picture": "http://lorempixel.com/g/350/150"
}, {
"id": 5,
"name": "Marillion",
"description": "Deserunt aut voluptatibus ex fuga placeat inventore veniam sint.\nSunt voluptate voluptas nobis sapiente et.\nDolores quia ab officiis ut molestias.\nEaque quis quibusdam vel qui.",
"active": true,
"picture": "http://lorempixel.com/g/350/150"
}, {
"id": 6,
"name": "Metallica",
"description": "Molestiae autem assumenda ut sit doloremque eligendi voluptas dolorum consequatur.\nCorrupti impedit numquam ut eum rerum placeat.\nMollitia possimus consequatur quod ab dolores excepturi corporis numquam.\nNecessitatibus ullam aut eum.",
"active": true,
"picture": "http://lorempixel.com/g/350/150"
}, {
"id": 7,
"name": "Rush",
"description": "Necessitatibus ut et culpa corporis quam.\nAdipisci earum est nam veritatis sed dolore.\nFuga assumenda dolor commodi enim repellendus enim doloremque.",
"active": true,
"picture": "http://lorempixel.com/g/350/150"
}, {
"id": 8,
"name": "Rush",
"description": "Assumenda impedit aut accusantium rerum sit possimus.\nVoluptatem inventore et.\nIusto tempora est distinctio sit nostrum vitae omnis quibusdam.\nIn quisquam velit commodi quae sed.\nId fuga et fugiat est tenetur quasi.",
"active": true,
"picture": "http://lorempixel.com/g/350/150"
}, {
"id": 9,
"name": "Metallica",
"description": "Sed omnis enim cum illo laboriosam enim laborum sit facilis.\nLibero quidem culpa inventore.\nVoluptatum necessitatibus iste temporibus modi est.\nEaque totam quibusdam.\nEarum et sit doloremque dolores vel similique aliquam.",
"active": true,
"picture": "http://lorempixel.com/g/350/150"
}]
Pronto, agora você pode facilmente interagir com essa API e criar o seu front end.
Utilizando AngularJS para consumir a API
Vamos utilizar AngularJS para criar nossa aplicação, e aproveitar a facilidade do json-server para criar um HTML e consumir os dados da API.
No diretório raiz, crie um arquivo HTML e utilize o código abaixo:
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>AngularJS API</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- cdnjs -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
</head>
<body ng-app="api">
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular-resource.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
Feito isso, vamos criar nosso arquivo JS. Crie um diretório chamado JS e, dentro dele, um arquivo mais.js com o código abaixo:
(function () {
'use strict'
angular
.module('api', ['ngResource'])
.factory('apiService', apiService)
.controller('getBands', getBands);
apiService.$inject = ['$resource'];
function apiService($resource) {
return $resource('./band/:bandId', { bandId: '@bandId' }, {
get: { method: 'GET', isArray: false },
update: { method: 'PUT' }
})
}
getBands.$inject = ['apiService'];
function getBands(apiService) {
var vm = this;
vm.listBands = apiService.query();
}
})();
Note que, por ser um exemplo básico, estou utilizando tudo no mesmo arquivo. Não faça isso em produção.
Agora vamos adicionar o código HTML para renderizar os dados da API. Utilize o código abaixo e insira logo após o comentário do arquivo index.html.
<div class="container" ng-controller="getBands as vm">
<p>Consumindo a API</p>
<div class="card card-block" ng-repeat="item in vm.listBands">
<img class="card-img-top" ng-src="" alt="">
<div class="card-block">
<h4 class="card-title"></h4>
<p class="card-text"></p>
<a href="band/" class="btn btn-primary">Editar</a>
</div>
</div>
</div>
O resultado pode ser visto em http://localhost:3000/, conforme a imagem abaixo:
No próximo artigo, vamos adicionar o ui-router e criar o HTML para editar e adicionar mais dados.
De 0 a 10, o quanto você recomendaria este artigo para um amigo?