Gist para o projeto IChoveu - Trybe

IChoveu.md

Projeto iChoveu 🌧️

1. O que preciso saber para fazer o projeto?

• Manipulação da DOM
• Trabalhar com funções e HOFs
• Fazer requisições assíncronas para APIs

2. Que conteúdos revisar?

2.1 - Aulas do Course

1. FE 1.1 - Ambiente de desenvolvimento Tribo-A | Tribo-B
2. FE 1.2 - Javascript Assíncrono - Promises e fetch Tribo-A | Tribo-B
3. FE 1.3 - Casa de Câmbio Tribo-A | Tribo-B
4. FE 1.4 - Async, await e testes assíncronos Tribo-A | Tribo-B

2.2 - Mentorias/Materiais complementares

1. Resolução do exercício dia 1.2 com @Saturnino - Tribo-A | Tribo-B
2. Pílula de conhecimento - MAP com @Saturnino - Tribo-A | Tribo-B
3. Pílula de conhecimento - FILTER com @Danilo - Tribo-A | Tribo-B
4. Pílula de conhecimento - SOME e EVERY com @Saturnino - Tribo-A | Tribo-B
5. Pílula de conhecimento - FIND com @Danilo - Tribo-A | Tribo-B

2.3 - Conteúdos de soft skills

• Como está a sua gestão do tempo nesse início do módulo de Front-end? Acesse aqui para refazer o teste e relembrar os conhecimentos sobre a Tríade do Tempo.
• Você faz seu planejamento do dia, levando em conta as tarefas e metas? Confira aqui um modelo de planejamento diário para você se inspirar e se organizar em dias de projeto.
• Que tal registrar e analisar suas emoções durante esse primeiro projeto do módulo? Relembre aqui as emoções universais e uma forma de refletir sobre elas.
• Como exercitar a criatividade no desenvolvimento de um projeto? Confira aqui um conteúdo extra sobre criatividade na vida de pessoas desenvolvedoras.

3. Checklist

3.1 - Planejamento

• Abrir o PR para esse projeto
• Criar seu cronograma de planejamento, use como base a seção 1 de Frontend

3.2 - Requisitos obrigatórios

• 01 - Implemente a função searchCities
• 02 - Implemente a função getWeatherByCity
• 03 - Liste as cidades retornadas pela API
• 04 - Adicione um botão para ver a previsão de 7 dias de uma cidade

4. Comemorar 🍾

Ao final desse projeto, vocês vão ter uma aplicação muito estruturada usando boas práticas de desenvolvimento e que pode (e deve) ser compartilhado com muito orgulho no seu LinkedIn. Portanto, vamos com tudo para esse projeto!

Colinha com uso do then

function exemploFetchComThen() {
  fetch('url-para-requisicao')
    .then(response => response.json())
    .then(data => {
      // Aqui tenho acesso aos dados
      console.log(data);
    }).catch(err => {
      // Aqui trata o erro
      console.error(err);
    }).finally(() => {
      // Aqui executa algo independente de erro ou sucesso
      console.log('Sempre executa');
    });
}

Colinha com uso do async/await

async function exemploAsyncAwait() {
  try {
    const response = await fetch('url-para-requisicao');
    const data = await response.json();
    // Aqui eu acesso os dados
    console.log(data);
  } catch (error) {
    // Aqui eu trato os erros
    console.error(error);
  } finally {
    // Aqui eu faço algo que deve ser feito independente de erro ou não
  }
}