Crie Sua Própria Api de Graça!

O Github é Uma Ferramenta Muita Versátil. Alem de Poder Versionar Códigos, é Officevel Testar сайт Estáticos Com Git страниц.

Alguns Projetos E сайты Acabando tendo как Mesmas Informações emementos como, Imagem de perfil, descrição, ссылки Contatos.

UMA Solução Bacana e Gratuita para compartilhar todos esses dados em comum é criar uma api utilizando o json заполнителя.

↓ ↓ ↓ ↓

✔ Crie um novo Repositório, Público, нет GitHub.

✔ Crie um arquivo com nome db.js Анкет

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

Пример – потребительский Dados da Api:

Em https://github.com/wend3ll-souza/productsapi Criei um arquivo db.json Coma 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.

→ Пример: http://my-json-server.typicode.com/wend3ll-souza/productsApi/

→ Пример: 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 Анкет Тамбем Ирей USAR Bootstrap Para Montar o estilo dos elementos.

Esse projeto irá ao ar fazendo uso do Gitpages E Потребиние API Criada Com Json Placeholder.

Html CRIEI UM раздел com o id = "якорь" Que renderizará OS Карты:

JavaScript Funcáo Que Criou 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);
    })
}

Funcáo assincrona Que faz o Принесите 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();

🚀 Проносится! ✌

Пример: ↓ ↓ ↓ ↓

JSON Placeholder ↓ ↓ ↓ ↓

Оригинал: “https://dev.to/wend3llsouza/crie-sua-propria-api-de-graca-31ec”

Пример – потребительский Dados da Api:

Fetch API

Пример: ↓ ↓ ↓ ↓

JSON Placeholder ↓ ↓ ↓ ↓

Читайте ещё по теме: