Crie sua própria API de Graça !

O GitHub é uma ferramenta muita versátil. 다른 버전의 코드는 Git Pages에서 테스트할 수 있는 테스트 사이트입니다.

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

JSON 플레이스홀더에서 API를 사용하면 모든 작업을 완료할 수 있고 무료로 작업을 수행할 수 있습니다.



↓ ↓ ↓ ↓

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

✔️ Crie um arquivo com nome db.js .

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

예 - 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.

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



→ 예: 배열 제품http://my-json-server.typicode.com/wend3ll-souza/productsApi/products

가져오기 API

Agora em um novo repositório vou criar um arquivoindex.html e umscript.js . Também irei usar Booststrap para montar o estilo dos elementos.

이 프로젝트는 JSON 자리 표시자와 함께 GitPages를 사용하고 API 크리에이터를 사용하는 데 사용됩니다.

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

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

자바 스크립트
Função que criará os 카드:

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();

🚀 빨리! ✌️

예: ↓ ↓ ↓ ↓

JSON 자리 표시자 ↓ ↓ ↓ ↓