.png)
Hoje eu trago uma dica que eu utilizo bastante com a minha equipe que é quando temos ainda uma fonte de dados para fornecer para um front-end, por exemplo, quando estamos construindo um SPA (geralmente essa aplicação precisa consumir dados) e quando não temos uma API pronta, temos uma possibilidade para trabalhar sem depender do back-end.
Nós utilizamos algumas API’s falsas para trazer os dados, porque basicamente se a gente executar uma interface qualquer de um sistema, é possível baixar uma lista de clientes, pedidos etc. Se a aplicação for construída da maneira correta, vai ser só uma questão de trocar a camada que faz esse carregamento para refletir os dados reais da sua aplicação. Esse tipo de coisa é muito bom para acelerar o desenvolvimento e deixar um pouco mais flexível a parte do front-end.
Eu vou mostrar dois exemplos: primeiramente temos o Json Place Holder e também temos o SWAP, eu criei um arquivo index apenas para testarmos, a ideia é que ao invés de consultarmos os dados no nosso servidor que ainda não existe ou não está pronto, nós vamos consultar dados desses sites:
<html>
<body>
<h1> testing API</h1>
<pre id='contents'></pre>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script>
$(function()
{$.get('https://jsonplaceholder.typicode.com/posts', function (data) {
$('#contents').html(JSON.stringfy(data))
})})
</script>
</body>
</html>Com isso ele já retorna todos os posts. Se olharmos em network, ele já foi lá, bateu no servidor deles e retornou a lista de posts. Eu posso trabalhar essa lista de posts por exemplo:
<html>
<body>
<h1> testing API</h1>
<div id='contents'></div>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script>
$(function()
{$.get('https://jsonplaceholder.typicode.com/posts', function (data) {
data.forEach(function (post) {
$('#contents').append('<h1>' + post.title + '</h1>')
})
})})
</script>
</body>
</html>Lembrando que isso não é uma boa prática, mas como é apenas para intuito de aprendizado, então estou fazendo dessa forma. Perceba que ele tem um body também caso queira:
$('#contents').append('<h2>' + post.title + '</h2>')
$('#contents').append('<div>' + post.body + '</div>')Por exemplo, caso você esteja fazendo uma lista de pedidos ou clientes, pode utilizar esses dados para simular como a aplicação vai se comportar com os dados. Deve haver outras opções mas essas são duas que eu utilizo bastante, funciona muito bem e agiliza muito o desenvolvimento no front-end.
Confira o video:
Deixe seu cometário, curta o DevPleno no Facebook, inscreva-se no canal e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!
Mestre em Sistemas de Informação pela USP e criador do DevPleno. Iniciou sua carreira como professor com apenas 18 anos em um curso técnico, foram 11 anos em sala de aula formando desenvolvedores fullstack no sul de Minas Gerais.