Criar nossa API a partir de um JSON
Para o mundo do desenvolvedor front-end, fazer um banco de dados muitas vezes "não é fácil".
É por isso que neste post apresento de uma forma fácil, como levar um arquivo .json a uma API pública para ser consumida em nosso front-end.
Neste caso particular, tenho um JSON com informação dos cavaleiros do Zodíaco.
Usaremos este arquivo JSON -- Zodiac.json que tem informação de 14 cavaleiros do zodíaco
Ele tem o id, nombre, constelação, classificação, description e avatar de cada cavaleiro
{
"id": "1",
"name": "Saga",
"constellation": "Gêmeos",
"classification": "Ouro",
"description": "Saga de Gêmeos é o irmão gêmeo mais velho de Kanon...",
"avatar": "https://raw.githubusercontent.com/nadiduno/apireset/main/.github/1.png"
},
{....}
]
}
Usaremos os serviços de JSONBIN para converter o arquivo JSON para uma API
Entra em
Cria um conta
Com uma conta criada vamos a fazer-lo junto, passo a paso 😉
Bora lá 💪
Passo 1: Clicar em Bins
Passo 2: Clicar em Create a Bin
Aparece ao lado direito um quadro como este
Passo 3: Clicar no ícone do cadeado para tornar a API pública
Assim deve ficar o ícone
Passo 4: Clicar na área de trabalho
Colar o JSON, neste caso eu vou colar o JSON dos dados dos cavaleiros do zodíaco
Aqui o link do JSON -- Zodiac.json para copiar e colar, porém você pode usar outro JSON se preferir
Passo 4: Clicar em Save Bin
Pronta nossa API para ser compartilhada
Agora no próximo passo te vou ensinar como é o link que deves compartilhar
Passo 5: Esta é a estrutura do link indicada pela documentação
https://api.jsonbin.io/v3/b/<BIN_ID>
Aí, mantemos a URL
https://api.jsonbin.io/v3/b/
E concatenamos o <BIN_ID> (que é o código que aparece na parte superior da imagem)
Neste API o <BIN_ID> é 64ba1bd4b89b1e2299c1dbc0
Resumindo
https://api.jsonbin.io/v3/b/ + 64ba1bd4b89b1e2299c1dbc0
Tendo assim o seguinte URL
Passo 6: Copiar e colar essa ULR no browser e pressionar enter
Ta tam 😎💣
E pronto, já temos uma API pública para ser consumida no front-end.
Consumir a API
Vamos a testar agora nossa API, fazendo a requisição no front-end (com um card)
Vou deixar aqui o link do repositório para que clones e possas mexer.
Se desejas clonar o projeto, faça no terminal
git clone https://github.com/nadiduno/knightsofthezodiac
Vou a passar a grosso modo como consumir a API, porque o intuito deste post não é consumi-la senão criar-la (que já fizemos em linhas anteriores)
Usei o link no fecth da API no arquivo main.js
fetch("https://api.jsonbin.io/v3/b/64ba1bd4b89b1e2299c1dbc0")
Estudarei os dados da API com um console.log
Código do main.js
async function userData() {
await fetch("https://api.jsonbin.io/v3/b/64ba1bd4b89b1e2299c1dbc0")
.then((response) => {
return response.json();
})
.then((data) => {
// Estudando os dados
console.log(data)
})
.catch((error) => {
console.error(error)
})
}
userData()
Bora ver nosso site, e ver o console no inspeccionar (F12)
Para conhecer a estrutura
Fui abrindo o objeto
Abrindo
Abrindo
E usei a estrutura do objeto
data["record"]["Zodic"]["0"]["name"]
Para pegar o nome do elemento 0 (primeiro elemento)
E para pegar a URL do avatar
data["record"]["Zodic"]["0"]["avatar"].
Ficando o código no main.js assim
async function userData() {
await fetch("https://api.jsonbin.io/v3/b/64ba1bd4b89b1e2299c1dbc0")
.then((response) => {
return response.json();
})
.then((data) => {
// Estudando os dados
console.log(data)
let zodicName = document.createElement('p')
let zodicImg = document.createElement('img')
zodicName.textContent = data["record"]["Zodic"]["0"]["name"]
zodicImg.src = data["record"]["Zodic"]["0"]["avatar"]
root.append(zodicName, zodicImg)
})
.catch((error) => {
console.error(error)
})
}
userData()
E apresentei ele em um card
Ver código completo em https://github.com/nadiduno/knightsofthezodiac
Agora é tua vez de consumir toda a Api, e percorrer todos os cavaleiros
------------------------------
Em caso de ter erro quando guardes este projeto no teu github e não consigas fazer um push em teu próprio repositório te recomendo fazer
git remote -v
git remote remove origin
git remote -v
Com git remote -v, apresenta o repositório ao qual está linkado o projeto
Como git remote remove, removes essa conexão e escreva novamente, para ver se deu certo, usar novamente git remote -v e deve sair em branco. Agora sim, podes fazer o teu git push, para subir o código.
------------------------------
Documentação: https://jsonbin.io/app/dashboard
https://api.jsonbin.io/v3/b/<BIN_ID>
https://jsonbin.io/app/bins#!
https://jsonbin.io/api-reference/bins/update#request-headers
https://jsonbin.io/app/dashboard
Criarr uma conta
Seleccionar Bim
https://api.jsonbin.io/v3/b/
64ba1bd4b89b1e2299c1dbc0
https://api.jsonbin.io/v3/b/64ba1bd4b89b1e2299c1dbc0
Ahora podemos usar en nosso fecth
E apresentar nossa api publica
da uma boa olhada nos campos para chamar e usar o que deseja
para isso vamos a dar um console.loge
e no console do inspeccionar inspeccionar
abrimos el arry que nos trae la API
Abrimos hasta el nivel donde deseamos pegar el dado
Esta aqui é a estructura a usar no script
é uma recurso gratuito por isso nos deu muitas gerarquias, porem esta genial para ir bricnando con un frontend
data["record"]["Zodic"]["0"]["name"]
data["record"]["Zodic"]["0"]["avatar"]
Eu peguei o name e avatr para meu frontend
Mais
UPDATE BINS API
You can Update your JSON bins using the Update Bins API, and you can enable the Version Control as well.
Note that you cannot update the Bin Permissions and Name. In-order to change the Bin Permissions, then check out Change Privacy API for more info.
Caso o comando acima apresente erro, tente usar:
Caso o comando acima apresente um erro, verifique se a sua máquina atende às requisições mínimas
