Estamos realizando agora em novembro o treinamento “React e React Native para Humanos” e este post será onde incluiremos os projetos “para casa”, e que pontuarão para quem estiver no nosso processo de seleção.

“Quem não é visto, não é lembrado”

Toda e qualquer duvida que você tiver, pode enviar no canal #react no slack DevJf. Valorizamos quem interage.

11 de Novembro – Primeiro encontro

Foi apresentando o básico do React e a manipulação de states, props e componentes. Acesse aqui os sources do projeto. Com estes conhecimentos (e dedicação) é possível desenvolver os dois projetos abaixo; Meu Spotify e Tudo sobre star wars. Nos dois casos você terá que lidar com requisições de serviços externos via API.

Meu Spotify

É um web app que deve ser desenvolvido usando React e que permite ao usuário pesquisar por artistas no Spotify, ver seus discos e as músicas de cada álbum. Mas não será “Spotify”… dê o nome que você quiser pra ele, porque o app é seu! Se fosse meu seria Tiagofy!

Imaginamos o projeto em cinco partes, crescentes, que lhe dará uma boa noção do React e de web components. A cada parte concluída você pode colocar online em algum lugar e nos enviar o link para usarmos, bem como enviar a URL do repositório de códigos. Informe no seu readme que este projeto é para o treinamento da App Masters. Para cada etapa sua, daremos algum feedback, pra você se manter motivado.

Toda informação sobre a API e você encontra no site para desenvolvedores do Spotify, e recomendamos fortemente usar a biblioteca spotify-web-api-js para a interação com a API.

1 – Obter logo na primeira página todos os álbuns do artista “John Williams”. Para cada álbum exibir o título, capa e algo mais que você achar relevante;

2 – Ao clicar em um álbum exibir as músicas deste álbum e outras informações que quiser;

3 – Permitir uma busca para localizar artistas. Deverá ser incluído um input na pagina inicial onde o usuário irá digitar algo e clicar em “buscar”, momento esse que serão listados os artistas encontrados. Clicando em um deles abrirá a lista de discos do artista, tal como no item 1.

4 – Permita ao usuário, quando entrar a primeira vez, autenticar. Salve as credenciais em local storage. Deixe também ele dar play em alguma música, que será tocado em um dispositivo dele.

5 – Utilize o React Router para lidar com a exibição das rotas, colocando cada view em um arquivo e rota diferentes.

  • A autenticação será um problema pra você. O Token dura apenas uma hora e quando chegar no item 4 você precisará lidar com obter um novo token, a partir do refreshtoken. Mas, no três primeiros itens tente ir pelo caminho mais curto, sem permitir ao usuário autenticar. Use o token da sua conta, obtido da maneira mais rápida que conseguir testar seu app;
  • Não precisa criar uma interface perfeita, mas não deixe tão feio também. Siga o estilo do spotify, ou um seu, ou utilize o Material-Ui pra te facilitar.

Tudo sobre star wars

É um app que poder ser desenvolvido usando React ou React Native e permite ao usuário conhecer mais sobre o Star Wars, seus filmes, personagens, planetas e tudo mais! A base de informações deve ser a SWAPI que fornece todo dado necessário.

Imaginamos o projeto em cinco partes, crescentes, que lhe darão uma boa noção do React e dos estados. Você pode fazer apenas a primeira parte, ou encarar mais de uma. A cada parte concluída você pode dar um build e nos enviar, bem como enviar um link para o código no seu repositório.

1 – Listar algum dos dados da API. Escolha filmes, personagens, naves ou qualquer outro dado e faça uma lista exibindo-os. Os dados virão paginados, lide com isso apenas se quiser.

2 – Utilize o React Router para lidar com a exibição das rotas, colocando cada view em um arquivo e rota diferentes.

3 – Permitia ao usuário clicar em um registro para ver seus detalhes. Não é preciso navegar em todos os dados, escolha apenas um ou dois dados que achar interessante para mostrar na sua visualização. Nestes detalhes permitir clicar em um dos dados para visualizar seus detalhes também. Exemplo; ao clicar em personagem exibir todas as informações pertinentes tais como os filmes em que aparece, clicando sobre um dos filmes vemos então os detalhes deste filme.

4 – Permitir realizar uma busca. Para isso crie uma interface apenas para localizar uma das informações que escolher, como personagens ou veículos. O usuário poderá digitar sua busca em um campo e então ver os resultados abaixo. Clicando em um item será exibido seus detalhes.

5 – Incluir filtro na busca. Sendo sua busca em veículos por exemplo, oferecer dois ou três campos de filtros, tal como fabricante, classe ou capacidade de passageiros. Realizando a busca ou filtrando, os registros são exibidos para o usuário.

Impactando ainda mais

Use estas dicas em qualquer um dos projetos, para ficar ainda melhor!

  • Sendo um web app, lembre o usuário de adicionar o atalho no celular, quando ainda não tiver;
  • Adicionar uma notificação quando o usuário abrir a aplicação pela primeira vez, dando boas vindas. Apenas na primeira vez;
  • Dizer no repositório o que você usou de componente e tecnologia no projeto, e porque usou;
  • Publicar o código em repositório público, com documentação dizendo que é o projeto do treinamento da App Masters;
  • Coloque seu projeto online! Use o Netlify, Github Pages ou Firebase Hosting para isso.