Forem: Sergio

Aprendendo mais sobre API's

Sergio — Mon, 01 Nov 2021 20:17:01 +0000

Porque aprender mais sobre API's
O que é uma API
APIREST
Controller-Services-Repository
Headers-Verbos
Parâmetros

Porque aprender mais sobre API's

Meu primeiro contato com API's não faz muito tempo mas foi algo meio estranho, sempre me pareceu que era uma coisa muito mais complexa do que parecia ser (e é), mas nunca tive curiosidade o suficiente para ir afundo, afinal, eu dava o fetch na URL, fazia um GET me voltava o json que eu queria e eu manipulava isso a meu bel prazer ou eu conseguia fazer um POST simples voltava o status code 200 e ta pronto o sorvetinho.

Essa semana precisei testar uma API privada do 0 e ver o que era possível fazer com os métodos disponíveis e, não sei se por inexperiência minha, ou se a plataforma que eu estava usando não ajudou (talvez um misto dos dois), eu não consegui testar muita coisa, afinal, tinha um conhecimento extremamente raso sobre API's e com isso, decidi estudar e ir mais afundo, continuo com o conhecimento raso, mas agora entendo um pouco melhor sobre API's, o que são e suas funcionalidades, vou escrever esse artigo para fixar melhor as informações que aprendi essa semana, se isso conseguir ajudar alguém que, por ventura, esbarre em dificuldades semelhantes as que eu tive então sera uma vitoria dupla!

Alguns disclaimers necessários:

Boa parte do que aprendi aqui, aprendi pesquisando em diversas fontes mas a mais rica e que mais me agregou conhecimento foi o Curso de testes de API Rest do Julio de Lima, se esse conteúdo te ajudar de qualquer forma, peço que fortaleça o canal dele se inscrevendo e dando like nos vídeos, a quantidade e qualidade de conteúdo sobre testes que ele faz merece ser reconhecida e retribuída de alguma maneira
Caso encontre algo de errado escrito aqui, desde conceitos ate erros gramaticais, por favor, me avise (seja por comentários, twitter etc)

O que é uma API

Ao pé da letra, API significa "Application Programming Interface", traduzido ficaria, "Interface de Programação de Aplicativos", a principio esse conceito não ficou tão claro pra mim então comecei a pesquisar mais e ler mais sobre como outras pessoas "definiam" uma API.

O próprio Julio em um dos videos dele deu a explicação que eu achei mais didática e clara possível, se temos o UI/UX, que se trata sobre a User Interface (Interface do Usuário) e User Experience (Experiencia do Usuário), podemos pensar na API como uma UI, mas voltada ao software que irá utilizá-la, onde, ao se pensar no UI, se pensa em uma pessoa vendo aquela interface e o quão intuitiva ela é, na API se pensa em, o quão "intuitivo" sera para outros softwares interagirem com o que aquela API oferece!

O software não precisa saber (geralmente) em que linguagem a API foi escrita, ele só precisa saber o tipo de resultado que ela ira gerar, o resto é abstraído, apenas o resultado importa, da mesma forma que você não precisa saber o que acontece embaixo dos panos do dev.to, você veio ler o texto apenas.

APIREST/RESTful

Esse tópico com certeza merece um artigo só para dissecar o tanto de coisa que tem para ser entendida sobre REST, mas fica para a proxima, só de ter a noção do que é uma APIRest já ajuda a entender melhor sobre tudo isso.

O ponto central sobre REST (sigla para Representational State Transfer ou Transferência de Estado Representacional) é ser um modelo/estilo de arquitetura definido pela W3C, um dos seus principais conceitos é utilizar o protocolo HTTP (verbos, accept headers, códigos de estado HTTP etc) de forma explícita e representativa para se comunicar e geralmente utilizar arquivos JSON e XML para a transferencia de dados.

Isso significa que, se você já mexeu com uma APIRestful, APIs que seguem esse estilo de arquitetura, você consegue ter noção sobre como outras API's com essa arquitetura funcionam.

Controller-Services-Repository

Geralmente dentro de uma APIRest nos temos essas três "entidades" fazendo com que ela seja funcional e definindo elas seria mais ou menos assim:

Services

Geralmente é a camada do backend que armazena as regras de negocio

Repositories

Responsável por trafegar as informações entre a regra de negocio e o sistema de armazenamento/banco de dados

Controller

Intermediador entre quem chama (aplicação que vc esta utilizando) e os serviços e repositórios
Disponível via HTTP, geralmente
Controla autenticação/autorizações
Recebe endpoints via anotações
Define os métodos/verbos necessários para acessar as funções

Um fluxo simulando a utilização de uma API seria mais ou menos assim:

- Interface Grafica => Controller => Services => Repository => Database

Seu site/interface grafica faz a requisição a API pelo controller, que envia a requisição ao services que envia o que foi solicitado ao Repository que ai vai consultar/enviar as informações para o banco de dados/database e então:

- Interface Grafica <= Controller <= Services <= Repository <= Database

Fazer o caminho contrario, o Database, envia o resultado da sua requisição para o Repository, que envia para o Services, que envia para o Controller e este te da uma resposta em JSON ou XML!

Headers-Verbos

Cabeçalho e Headers são dois métodos do protocolo HTTP que são utilizados em requisições numa APIRest, detalhando um pouco mais sobre eles teríamos:

Headers

Informações técnicas para ajudar o servidor a entender o que está sendo enviado naquela requisição
Authorization geralmente vai no header da requisição

Verbos

As ações que aquela requisição deseja fazer, geralmente as mais utilizadas são:

POST - Criar uma nova informação no backend, pode ser usado também para enviar informações sensíveis utilizando o protocolo HTTPS para criptografar a informação, por exemplo, para autenticar um usuário.
GET - Buscar uma informação no backend
PUT - Atualizar uma informação no backend
DELETE - Deletar uma informação no backend

Exemplo de requisição via CURL

curl -X POST -is "https://api.github.com/user/repos" -H 'Authorization: token <token>' -H 'Content-Type: application/json' -d '{"name": "teste-api-swagger"}'

onde:

curl é uma ferramenta/biblioteca por linha de comando para transferência de data via URL
-X declara qual verbo/método sera feito, nesse caso POST para autenticação
-i é o método indicando que, queremos ver as informações do cabeçalho que a nossa resposta retorna
-s é o método indicando que, não queremos ver as informações sobre quanto tempo demorou para download e quanto tempo demorou para processar
-H significa que as informações em "" são informações referentes ao header da requisição, nesse caso, a Autorização via token e o content-type indicando que estamos enviando um json
-d é o body da nossa requisição, o conteúdo dela por assim dizer

Parâmetros

Nas requisições, há algumas formas de se passar parâmetros e assim conseguir respostas de acordo com a sua necessidade, podemos passar parametros pelo body da requisição, pelo header, pelo query ou pelo path dela

Body:
Usando o -d dentro do curl ex: -d '{"name": "teste-api-swagger"}
Header:
Usando o -H dentro do curl, com aspas simples -H 'Authorization: chave de autorização da API'
Query:
Depois do endpoint, usando o ? e o & caso tiver mais de um parâmetro, "ex: localhost:3000/users?id=1&name=teste"
Path:
Depois do endpoint, colocando um / antes do nome do parametro, "ex: localhost:3000/users/1"

Github Copilot, useState e useEffects

Sergio — Tue, 20 Jul 2021 13:23:29 +0000

Introdução
useState
useEffect
Github Copilot
Links úteis

Ps:

acabei notando que em todos os trechos de codigo aqui colocados, quando a arrow function é usada => ele esta exibindo os caracteres (=&gt);
Então, toda vez que verem (=&gt); presumam ser => até eu conseguir uma solução para isso.

Introdução

Recentemente, comecei a estudar React no curso do Estardando Devs e acabamos estudando esses dois hooks primordiais, useState e o useEffect, algumas coisas sobre ambos conceitos ficaram um tanto quanto confusas para mim, então, depois de muito apanhar e praticar fui pesquisar e procurar entender mais sobre ambos para complementar o meu conhecimento.

Resolvi escrever esse texto para fixar mais esse aprendizado e talvez até ajudar qualquer pessoa que venha a ter dúvida semelhantes a minha, durante esse meio tempo de aprendizado, o meu acesso ao Github Copilot foi liberado e eu achei interessante narrar como foi "aprender" algo com uma tecnologia de I.A me dando algum auxilio e como ela funciona.

Reforçando que, esse texto se limita as minhas opiniões e experiencias;

Não irei entrar nos conceitos de "O que é hook" ou explicações profundas sobre o React, nem acho que tenho conhecimento para tal ainda, usarei exemplos simples mas funcionais que me ajudaram a entender melhor os conceitos e no final do texto irei deixar links de artigos que eu li/estou lendo para ter uma compreensão mais detalhada sobre tudo o que está sendo escrito aqui.

Criticas e sugestões sobre o conteúdo o texto são sempre bem vindas, por favor, se achou algo errado/mal escrito ou coisa do tipo, me oriente que eu irei arrumar assim que possível!

useState

Pelas minhas pesquisas e por uma leve quantidade de dedução,o useState, é o primeiro hook que geralmente é mostrado quando React é ensinado ou falado, na documentação oficial do React o exemplo que nós é apresentado é em forma de contador, escrito em código ficaria mais ou menos assim:


import React, { useState } from 'react;

function Example() {
    const [count, setCount] = useState(0)

    return (

            <p>You clicked {count} times</p>
            <button> setCount(count + 1)}&gt;
                Click me
            </button>

    );
}

Antes de eu dar minha explicação sobre como consegui entender melhor o que o useState faz, vou postar a forma feito em Javascript puro pra mostrar exatamente o que o count é e o que o setCount são:


let count = 0;

const setCount = (value) =&gt; {
    count = value
}

O useState tem dois valores, o primeiro é uma variável e o segundo é uma função,e o trabalho dessa função é basicamente atualizar a variável!

Exemplificando a variável agora que esse exemplo está claro:

const [count, setCount] = useState(0)

const - declaração de que a variável é uma const.
[count, setCount ] - desestruturação do array, onde count é a variável e setCount - é a função que atualiza o estado dessa variável.
useState(0) - passando o parâmetro inicial para a função e consequentemente para a variável, ou seja, count ira começar em (0)

Reforçando que:

useState é um array, mas seu retorno não está limitado a tal, no exemplo acima foi passado um nú mero, porem poderia ter sido passado uma string " " (vazia ou não), ou um objeto { } (vazio ou não)
Ainda sobre a ideia de ser um array, a desestruturação do mesmo é opcional e facilita muito a leitura, mas poderia ser usado dessa forma:

 const arrayState = useState(0);
 const count = arrayState[0]; 
 const setCount = arrayState[1];

Um ultimo exemplo usando dois useStates para exemplificar:

function App () {
    const [count, setCount] = useState (0)
    const [theme, setTheme] = useState ("")

    function decrementCount () {
        setCount(prevCount =&gt; prevCount -1)
        setTheme('green')
    }

    function incrementCount() {
        setCount(prevCount =&gt; prevCount +1)
        setTheme('blue')
    }

    return (
        &lt;&gt;
        <button> - </button>
        <span>{count}</span>
        <span>{theme}</span>
        <button> + </button> 
        &gt;
    )
}

No código acima, temos dois useState, um para gerenciar a variável count inicialmente declarado como 0, e um para gerenciar a variável theme, inicialmente declarado como " " (uma string vazia), e temos dois botões no fim do código onde, cada um deles tem uma função diferente atribuída, ao se clicar no botão de - a variável count sera subtraída em 1 e a variável theme vai renderizar green na tela, ao clicar no botão de + a variável count sera somada em 1 e a variável theme ira renderizar blue!

useEffect

Confesso que esse eu demorei um pouco mais para entender, o conceito e o que fazia, mas com o exemplo que eu vi, e irei escrever aqui, ficou claro e bem mais compreensível.

Dada a minha própria limitação, não sera tão extenso quanto o useState foi, mas acredito que ficará claro!

Um jeito simples de se entender o useEffect de inicio é, pensar em um bloco de código que você deseja executar toda vez que algum componente for renderizado, isso ficou bem confuso de inicio mas o exemplo abaixo me fez entender melhor:

function App () {
    const [resourceType, setResourceType] = useState ('')

    console.log('render')

    useEffect (() =&gt; {
        console.log("resourceType changed")

    }, [resourceType] )

    return (
        &lt;&gt;

                <button> setResourceType('post')}&gt;Post</button>
                <button> setResourceType('users')}&gt;Users</button>
                <button> setResourceType('comments')}&gt;Comments</button>

            <h1>{resourceType}</h1>
        &gt;
    )
}

De inicio, temos a utilização do useState novamente, como dito na parte de cima, ele é uma hook que ira controlar estados, resourceType é a variável e setResourceType a função que atualiza o valor dessa variável, e de inicio está sendo passado uma string vazia para ela ( ' ' ).

Logo abaixo dessa declaração, temos um console.log que ira renderizar a palavra render, e em seguida temos o uso do useEffect, o mesmo recebe uma função como parâmetro (que pelo o que eu vi, quase sempre será uma arrow function) e essa função irá rodar outro console.log com a frase resourceType changed, e no fim do useEffect, temos um array com um parâmetro, nesse caso o resourceType, a nossa variável lá do inicio.

Na ultima parte, temos a renderização, três botoes, cada botão executando a função setResourceType e em cada um deles um parâmetro diferente é passado, no primeiro botão, o parâmetro é o post, no segundo botão, o parâmetro é users, e no terceiro o parâmetro é comments.

A funcionalidade do useEffect no exemplo acima será a seguinte:

Quando esse componente for renderizado, ele ira exibir no console a palavra render devido aquele primeiro console.log, ao se clicar em qualquer um dos botões, o h1 da página irá renderizar de acordo com o botão (post ou users ou comments) e ira exibir resourceType changed que estava no segundo console.log dentro do useEffect.

Isso acontece pois, como parâmetro, no useEffect, nos passamos o resourceType dentro daquele array, com isso, o bloco de código dentro do useEffect só sera rodado se o resourceType for modificado!

Se não houvesse parametro no array, e o mesmo estivesse vazio [ ], o bloco do useEffect seria usado apenas uma vez, durante a primeira renderização!

Se clicar no botão do Post uma vez, quando qualquer um dos dois outros parâmetros (users ou comments) estiver renderizado na tela, as duas mensagens serão exibidas, pois ao clicar no botão você chamou a função setResourceType e assim modificou o resourceType fazendo com que o código do bloco useEffect seja executado, mas se após isso, você clicar novamente no mesmo botão, você tera apenas um dos consoles.log, o de render, fora do useEffect, pois o resourceType segue sem ser modificado, era um Post e você clicando no mesmo botão ele continua sendo um Post, segue inalterado.

Esse foi o exemplo mais simples que consegui achar e ver na pratica o useEffect e facilitou demais o entendimento do mesmo para mim, por isso achei interessante escrever ele para reforçar, só que, o useEffect não se limita a isso, há um conceito mais abrangente nele que envolve React class lifecycle methods e componentDidMount, componentDidUpdate, e componentWillUnmount (infelizmente não consegui achar o nome desses conceitos em português e não achei uma boa ideia fazer tradução ao pé da letra).

Não posso falar sobre esses conceitos pois, ainda estou estudando e entendendo tudo isso, talvez num texto futuro eu escreva sobre, irei deixar os links que eu estou acompanhando e se aprofundam mais nesses assuntos na ultima parte!

Github Copilot

Por fim, minha experiencia com a inteligencia artificial de copiloto!

Bom, fiquei bem feliz ao receber no sábado o convite para o acesso antecipado do programa, estava (estou ainda na real) construindo um site para consumir a API do Github e exibir algumas informações e por coincidência recebi o convite no meio desse processo, mesmo sendo um projeto "simples" a primeira aparição do Copilot foi quase que imediata.

Após a extensão ser instalada, você pode começar a utilizar o copiloto, usando a tag de comentário no Javascript (//) e descrevendo o que você tem intenção de fazer geralmente retorna algo, utilizei as palavras fetch github api e em instantes depois de alguns enters o seguinte código me foi retornado:

function App() {
 //fetch data from github API
 const [data, setData] = useState(null);
 useEffect(() =&gt; {
   fetch("https://api.github.com/users/sergjun/repos")
     .then(response =&gt; response.json())
     .then(repos =&gt; setData(repos))
 }, []);

 return (

     <h2>
       Top languages
     </h2>
     {data &amp;&amp; data.map((repo, i) =&gt; (

         <h4>{repo.name}</h4>
         <p>{repo.description}</p>

     ))}

 );
}

export default App;

Um fetch honesto ( ao meu ver de iniciante ) onde ele faz justamente o que se propõe, a única coisa que eu alterei no período em que estava testando foi o retorno do parâmetro do useState (null), por algum motivo esse valor acabava quebrando a aplicação, ao se colocar um retorno de string vazia (" ") ela parava de crashar.

Essa foi a vez que o Copilot mais "deu as caras", no resto do código, não sei se por falha minha, ou dele, ou talvez a "complexidade" da aplicação, ele não palpitou e honestamente, não fez tanta falta, ficou ao meu ver sendo bem parecido com snippets ou trechos de código meio que prontos que as vezes você copia e altera algumas coisas.

Ainda assim, é uma tecnologia muito interessante, que estou curioso para ver como irá evoluir e se comportar nos próximos tempos, é bem interessante ver as soluções propostas por ele, outras pessoas já disseram isso de forma exaustiva mas sempre é bom reforçar, não adianta copiar e colar, em algumas das sugestões, o mesmo fazia a sugestão de utilização de react com classes e de nada adiantaria eu usar um código daquele tipo sendo que nada entenderia.

Links úteis

Como eu falei, sou iniciante nisso tudo, há um mar de informações e diversas referencias pelas quais se pode procurar por ai, estou usando essas e aceito toda e qualquer tipo de contribuição!

Documentação oficial do React

Um texto do Dan Abramov falando sobre Hooks (inglês)

Documentação oficial do React introduzindo hooks

Artigo muito bom falando sobre useEffect que o @ramonrxm me passou, muito obrigado, mais uma vez! (inglês)

Artigo do autor do canal "web dev simplified" falando sobre useEffects, alguns exemplos foram tirados do canal dele, dos vídeos de useState e useEffect, recomendo demais! (inglês)