Como você está lidando com esse processo de transição?

Aprender a aprender pode ser muito doloroso, mas eu te garanto uma coisa: é libertador! 🚀

• Vamos começar com um momento só nosso ❤️ 20min
• Depois vamos revisar alguns dos conceitos estudados nas últimas semanas: consumo de API 30min
• Intervalo 10min
• Teremos bastante treino!1h20min
• Intervalo 10min
• E de quebra um projetinho guiado massa pra chamar de seu! 1h30min

Essa revisão vai te ajudar a relembrar conceitos e modelos para estabelecer o seu mapa mental de aprendizado! 😃

É o protocolo de transferência de hipertexto.

O principal protocolo de comunicação entre computadores utilizados na internet.

Ele cria as regras para enviar e receber informações na internet.

Ele é responsável pelo o que acontece por debaixo dos panos quando usamos a internet.

Interface entre aplicativos e programação.

Se uma interface de um sistema é criado para o usuário final, a API é desenvolvida para que um sistema possa usar as funcionalidades de outro sistema.

Interface ideal para que um sistema se comunique com outro sistema.

Rest é uma abstração(forma de usar as regras) do protocolo HTTP para simplificar a construção de um web service, ou seja quem cria uma API com as restrições e regras do modelo Rest está criando na verdade uma API Restful.

O grande objetivo desse modelo é fazer com que os recursos estejam disponíveis através de URLs.

Para além de GET e POST, temos também no nosso leque de principais métodos o PUT, DELETE e PATCH.

É simples de entender:

• GET: para consultas
• POST: para criação de recursos
• DELETE: para remoção de recursos
• PUT e PATCH: para atualização de recursos

Respostas de requisições para ficarmos atentas:

• 1XX informativo
  
• 2XX sucesso
  
• 4XX erro de requisição
  
• 5XX erro de servidor
  

É a árvore de elementos dentro do nosso código HTML.

É tudo o que o Javascript pode manipular.

Exemplos:

• Capturar um botão e escutar o click para executar uma ação
• Capturar div e inserir elementos e/ou atributos
• Capturar elemento e remover o elemento ou os filhos dele
• Capturar elementos para alterar estilo

Como?

Capturar elementos:

document : variável glogal para referenciar a árvore de elementos getElementById: retorna elemento a partir do id
getElementsByTagName: retorna um vetor/HTMLCollection
getElementsByClassName: retorna um vetor
querySelector: retorna um único elemento
querySelectorAll: retorna uma nodeList

Criar elementos:

createElement: cria elemento setAttribute: insere propriedades createTextNode: Insere conteúdo appendChild: identifica elemento pai para o elemento que criamos

Remover elementos:

remove()
removeChild()

Alterar estilos de elementos:

elemento.style.propriedade = "valor"

Você precisa aprender 7 conceitos fundamentais: variáveis, tipos, desestruturação de dados, recuperação de dados (principalmente objetos, arrays e arrays like), funcões, operadores, condicionais, fetch api(promises) e eventos.

Agora, você precisa aprender a sintaxe(como escrever cada coisa), depois você precisa trazer seu modo de pensar para execuções dentro do seu projeto, dê um passo de cada vez e de repente você tem uma aplicação inteirinha pra chamar de sua. Esse passo não vai ser rápido

Exemplo: Você vai num restaurante, escolhe a comida e escolhe uma bebida. O garçon traz a bebida antes enquanto a comida ainda não está pronta. Esse é um processo assíncrono, a segunda requisição não depende da primeira ser executada antes pra obter uma resposta.

A API Fetch fornece o método global fetch() para termos de uma maneira lógica e fácil para buscar recursos de forma assíncrona.

São promessas que não vão incluenciar na linha de tempo do nosso código.

Elas são funções que devolvem resultados de sucesso ou erro, depois de um tempo.

.then > resolve
.catch > reject

A partir do ES8 e surgiu para resolver o problema de aninhamento de thens.

É simples: primeiro definimos uma função que precisa ser async e dentro do bloco de execução devemos colocar o await.

Biblioteca AJAX baseada em promises que facilita nossas requisições de forma assíncrona.

sempre importar o axios antes do script principal

Exemplos:

Desafio:

Vamos consumir as APIs do Github e do Giphy para determinar um humor.

Esse é o funcionamento esperado, olha que fofo:

Criamos uma interface onde um input determina um parâmetro para ser filtrado e retorna um usuário do recurso users da API do github.

Além disso, estamos também listando o recurso gifs da Api do Giphy, filtrando os 50 trending e mostrando um gif na tela de forma randômica.

Criamos uma visualização para os dados retornados

Uma árvore DOM beeeem simples para o input, o botão e também para renderizar os dados que serão retornados do algoritmo

APIs:

• https://api.github.com/users/${userGithubValue}

• http://api.giphy.com/v1/gifs/trending?api_key=b46MWywKt5JwuSCnpEa7q9KNRDtPUc02

Algoritmo:

1. capturar elementos do HTML
2. assistir o evento de clique do botão
3. quando houver clique
   a) previne o comportamento padrão do navegador
   b) pega o valor do input
   c) passa para a chamada de API do Github e do objeto recebido, pegar somente o nome
   d) inserir esse nome junto com ", seu humor hoje é: " no resultado
   e) fazer chamada e API do giphy
   f) receber a array
   g) reduzir os indices a um indice aleatório da array
   h) pegar a url da imagem do item sorteado
   i) criar imagem e inserir a url da imagem no
   

• instagram
• linkedin
• github
• spotify
• quero ser dev
• email: [email protected]