Sabemos a importância da aplicação se comunicar com APIs externas, muitas delas gratuitas, trazendo benefícios e informação adicional ao projeto.
Usando como referência nossos estudos anteriores com o Weather App (utilizando o WeatherAPI), neste projeto vamos criar uma aplicação que busca por um usuário do github, utilizando o GitHub API, e mostra detalhes sobre o perfil deste usuário.
Precisa mostrar na tela: (url: https://api.github.com/users/<nome_do_usuario>)
- Imagem do avatar (avatar_url)
- Nome de usuário (login)
- Nome (name)
- Link para página do github (html_url)
- Quantidade de seguidores (followers)
- Quantidade de repositórios públicos (public_repos)
- Trazer 4 nome de repositórios (repos_url) utilizando algum critério de busca de sua preferência (mais recentes, mais estrelados, mais forkados)
- Somente utilizar um único componente (app.component.ts)
- Utilizar estilo css próprio e pelo menos um componente do Bootstrap (já está importado o css no index.html)
- Utilizar metodo fetch (asíncrono) para requisições HTTP
- Poder inserir um username do github para pesquisar
- Clicar em um botão de busca (Search) para ter acesso a informação sobre o username
- Ver o avatar, username, nome, quantidade de seguidores e repositórios públicos do username pesquisado
- Ver os 4 repositórios mais recentes
- Receber uma notificação (alerta) se o usuário for inválido / inexistente
-
Mostrar uma lista de usuários pesquisados (ordenação por critério de sua preferência)
-
Incluir link para perfil do usuário e dos repositórios
-
Mudar filtro dos top 4 repositórios (updated_at / stargazers_count / forks_count)
-
Persistir lista de usuários no último acesso (utilizando localstorage por exemplo)
-
Limpar lista de perfis ao clicar no botão clear
-
Não pesquisar usuário já pesquisado e na lista
-
Digitar enter durante busca também busca o perfil por username
-
Recuperar lista de usuários no último acesso do localstorage (se houver)
-
Limpar localstorage quando limpar perfis
To get the data you need to communicate with GitHub API. you can either
- Fetch API
- API Github User Example
- API Github User Repositories Example
- Bootstrap Button Component
- Bootstrap Alert Component
To get data from API you can check in javascript