Crie sua própria API de Graça !
Tags: javascript, node, beginners
Published: 2021-02-25 16:41:20

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.

<img src="https://media.giphy.com/media/l4EpfbRWMHRGhUjRe/giphy.gif">

  ↓  ↓  ↓  ↓


✔️ 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


```json
{
    "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/

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cs3xepkgcr7ndvbt2mgl.png)

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ha5c50rkvyosiluwr93.png)



### Fetch API 

Agora em um novo repositório vou criar um arquivo `index.html` e um `script.js`. Também irei usar `Booststrap`para 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:

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



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

```javascript
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:

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

:rocket:  **Pronto !** :v:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c51v6xi3j67e7q4hxqjo.png)

###Exemplo: ↓ ↓ ↓ ↓
<p align="center" ><a href="https://wend3ll-souza.github.io/fetchProductsApi.io/" target="_blank"><img src="https://img.shields.io/static/v1?label=Deploy&message=Go_To_App&color=rgb(0,255,0)&style=for-the-badge&logo=ghost"></a></p>

<p align="center" ><a href="https://github.com/wend3ll-souza/fetchProductsApi.io" target="_blank"><img src="https://img.shields.io/static/v1?label=GitHub&message=Repositorio&color=rgb(0,555,0)&style=for-the-badge&logo=ghost"></a></p>


<p align="center" ><a href="https://github.com/wend3ll-souza/marketProductsImages/tree/master/img" target="_blank"><img src="https://img.shields.io/static/v1?label=GitHub&message=Imagens-de-Produtos&color=rgb(12,5,0)&style=for-the-badge&logo=ghost"></a></p>

### JSON Placeholder ↓ ↓ ↓ ↓

<p align="center" ><a href="https://jsonplaceholder.typicode.com/guide/" target="_blank"><img src="https://img.shields.io/static/v1?label=JSON_PlaceHolder&message=DOCUMENTAÇAO&color=rgb(12,123,231)&style=for-the-badge&logo=ghost"></a></p>

<p align="center" ><a href="https://github.com/typicode/json-server" target="_blank"><img src="https://img.shields.io/static/v1?label=JSON_PlaceHolder&message=Repositorio&color=rgb(00,111,231)&style=for-the-badge&logo=ghost"></a></p>


<img src="https://media.giphy.com/media/gPBKtKGk00TfD3D6mY/giphy.gif">