Crie sua própria API de Graça !

O GitHub é uma ferramenta muita versátil. Além de poder versionar códigos, é possível testar site estáticos com Git Pages.

Alguns projetos e sites acabando tendo as mesmas informações em elementos como, imagem de perfil, descrição, links contatos.

Uma solução bacana e gratuita para compartilhar todos esses dados em comum é criar uma API utilizando o JSON placeholder.

↓ ↓ ↓ ↓

✔️ Crie um novo repositório, público, no GitHub.

✔️ Crie um arquivo com nome db.js.

✔️ Acesse https://my-json-server.typicode.com/seu-userNameGitHub/nome-do-repositorio

Exemplo - Consumindo Dados da API:

Em https://github.com/wend3ll-souza/productsApi Criei um arquivo db.json com informações que iram alimentar alguns Cards de Produtos

{
    "products": [
        { 
            "id": "product1",
            "name": "Box Roberto Carlos",
            "price": 25,
            "imagePath": "https://github.com/wend3ll-souza/marketProductsImages/blob/master/img/5099751568599.jpg?raw=true"
        },
        { 
            "id": "product2",
            "name": "Micro SD",
            "price": 20,
            "imagePath": "https://github.com/wend3ll-souza/marketProductsImages/blob/master/img/5390800083439.jpg?raw=true"
        },
        { 
            "id": "product3",
            "name": "Waffle",
            "price": 2,
            "imagePath": "https://github.com/wend3ll-souza/marketProductsImages/blob/master/img/5906747172459.jpg?raw=true"
        },
        { 
            "id": "product4",
            "name": "Castania",
            "price": 10,
            "imagePath": "https://github.com/wend3ll-souza/marketProductsImages/blob/master/img/5281009276329.jpg?raw=true"
        }
    ]
}

O link do JSON placeholder irá te direcionar para configurações do seu servidor json.

→ example: http://my-json-server.typicode.com/wend3ll-souza/productsApi/

→ example: Array Products http://my-json-server.typicode.com/wend3ll-souza/productsApi/products

Fetch API

Agora em um novo repositório vou criar um arquivo index.html e um script.js. Também irei usar Booststrappara montar o estilo dos elementos.

Esse projeto irá ao ar fazendo uso do GitPages e Consumindo a API criada com JSON Placeholder.

HTML
Criei um section com o id="anchor" que renderizará os Cards:

<section id="anchor" class="row justify-content-center justify-content-around"></section>

Java Script
Função que criará os Cards:

const createCards = (products) => {
    const anchor = document.getElementById('anchor');
    products.map(item => {
        const card = document.createElement('section');
        const container = document.createElement('div');
        const describe = document.createElement('div');

        const img = document.createElement('img');
        const h3 = document.createElement('h3');
        const p = document.createElement('p');
        const btn = document.createElement('button');

        img.setAttribute('src', item.imagePath);
        img.setAttribute('alt', 'product image')
        h3.innerText = item.name;
        p.innerText = `R$ ${item.price.toFixed(2)}`;
        btn. innerText = "comprar";

        img.className = "card-img-top w-75";
        h3.className = "card-title";
        p.className = "card-text text-danger";
        btn.className = "btn btn-success text-uppercase";
        container.className ="m-auto"

        describe.className = "card-body";
        card.className = "card my-5 text-center shadow";
        card.style = "width: 10rem;";

        container.appendChild(img);
        describe.appendChild(h3);
        describe.appendChild(p);
        describe.appendChild(btn);
        container.appendChild(describe);
        card.appendChild(container);
        anchor.appendChild(card);
    })
}

Função Assincrona que faz o Fetch a API:

const FETCH = async () => {
    await fetch('https://my-json-server.typicode.com/wend3ll-souza/productsApi/products')
   .then((response) => {
      response.json()
                .then(data => {
                    createCards(data);
                })
                .catch((error) => {
                   console.log(error);
                });
    })
   .catch((erro) => {
      console.log(erro);
   });
};

FETCH();

🚀 Pronto ! ✌️

Blog

Crie sua própria API de Graça !

Bob Wendell

Exemplo - Consumindo Dados da API:

Fetch API

Exemplo: ↓ ↓ ↓ ↓

JSON Placeholder ↓ ↓ ↓ ↓

Join Our Newsletter. No Spam, Only the good stuff.

Related