O projeto Github Explorer(app) é um aplicativo que consome a API do GitHub e exibe informações de qualquer repositório público a partir da busca pelo usuario/nome-do-repositorio, exemplo: facebook/react e usa animações suaves e didáticas com React Native Reanimated para melhorar a experiência do usuário. Além disso, podemos navegar entre as issues de cada repositórios e acessá-las apertando no card da issue que será aberto o navedor com a url da issue.
Sobre | Motivo | Design | Requisitos | Tecnologias | Baixar e Executar
- O github é uma plataforma de repositórios remotos, podemos subir nossos projetos, nossas branchs, detalhar nossos projetos, criar uma descrição e facilitar o trabalho em equipe de determinados projetos e/ou divulgar nossos projetos para outros desenvolvedores.
- Assim, o GitHub Explorer simplesmente é um app que conseguimos pesquisar sobre repositórios públicos e ver alguns detalhes deles como favoritos, forks, issues, descrições e acessar as issues desses repositórios.
- É o penultimo desafio da trilha de React Native do bootcamp Ignite.
- Para a alimentação dos dados foi usado o GithubAPI, API do Github que disponibiliza informações sobre repositórios públicos e também é usada para o ensinamento de API REST, livre para usar e popular, segue o link:
- GithubAPI: https://docs.github.com/pt/rest
- Vale ressaltar que essa API possui limitações para a quantidade de requisições que pode receber por hora de um mesmo usuário, no caso seriam 60/hora.
- Para criação das interfaces foi usado React Native em conjunto com TypeScript e diversas bibliotecas disponíveis para React Native como:
- React Navigation: https://reactnavigation.org/
- Styled Components: https://www.styled-components.com/
- Além disso foi usado o EXPO para melhor produtividade: https://docs.expo.dev/
- dentre outras, abaixo, na sessão de Tecnologias estará mais detalhado.
Com esse projeto foi posto em prática os conceitos aprendidos sobre animações no React-Native, uso do React-Native-Reanimated, passando dados via navegação e houve o primeiro contato com o componente de Linking do React-Native que realiza navegações seja para url de sites comuns abrindo navegador, navegando para outros apps ou até mesmo para deep links.
- Home
-
Funcionalidades:
-
Listagem dos repositórios pesquisados.
- Perfomática, por meio da Flatlist.
-
Pesquisa de qualquer repositório público.
- É feita pelo nome do usuário em conjunto com o respositóio(Exemplo: facebook/react facebook/react-native).
-
Animação de deslizamento(Swipeable) em horizontal para esquerda de cada card de repositórios da tela Home provocando assim a ação de remoção daquele repositório.
- É perguntando ao usuário com um Alert se ele realmente deseja exluir aquele reposiório que ele provocou o deslizamento/swipeable
- Usuário pode cancelar a ação de remoção ou confirmar.
- É perguntando ao usuário com um Alert se ele realmente deseja exluir aquele reposiório que ele provocou o deslizamento/swipeable
-
- Página de detalhes sobre o Repositório
-
Funcionalidades:
-
Exibição do nome completo do repositório animado e parte da descrição do mesmo
-
Número total de Stars/Favorites daquele repositório.
-
Número total de Forks daquele repositório.
-
Número total de Issues abertas daquele repositório.
-
Listagem de todas issues daquele repositório de forma otimizada.
-
Navegação para cada repositório no Github por meio do navegador padrão do celular
- É usado o Linking do React-Native para isso
- Navegando para o Github web e app
- Código:
- É tentando manter o padrão que é ensinado na Rocketseat para o código mais limpo, organizado de facil entendimento com sua estrutura de pastas também.
- Em geral foi todo código foi feito com TypeScript de forma a manter sempre uma tipagem/interface para cada elemento que foi usado tanto para facilitar o desenvolvimento e entendimento do código tanto para o dev quanto para o VsCode/IDE, quanto para manter a consistência do código e a IDE possa sugerir correções e recomendações de forma mais efetiva.
- Estilização:
- Toda estilização foi realizada com styled-components, que é uma biblioteca de css que tem como objetivo facilitar a criação de estilos e componentes de forma mais eficiente e similar a web com ReactJS, assim podemos manter o mesmo padrão para web e mobile facilitando o desenvolvimento.
- Foi criado um tema global com as fontes e cores do projeto que são passadas no Figma.
- A fonte usada foi a Roboto, que é uma fonte popular e livre para uso, está na biblioteca do Google Fonts. Foi instalada no projeto como fonte externa tanto para o android quanto para o IOS.
- Para lidar com SVG, JSON, PNG foi necessário realizar uma configuração para que o TypeScript reconheça tais arquivos.
- React Native
- A estrutura dos componentes foi feita por meio de funções, que são funções que retornam um componente React.
- A pasta de um componente é composta por um arquivo chamado index.tsx e um arquivo de estilização styles.ts.
- Foi usado o yarn como gerenciador de pacotes.
- É utilizado a react-native-gesture-handler para criar os botões da aplicação mantendo assim a consistência do dos efeitos de reação do componente entre as platformas IOS e Android, além disso, também é usado presseables e outros tipos de botões para realização das animações evitando conflitos com os botões do gesture handler
- Expo
- É usado o EXPO para garantir uma melhor produtividade e configuração das libs para seus usos e inicialização do app.
- Android Studio
- Celular(Opcional)
- Expo
- Node.js
- React
- React-Native
- TypeScript
- Yarn(ou NPM)
O projeto foi desenvolvido utilizando as seguintes tecnologias
- Android Studio
- Axios
- Javascript
- NodeJS
- React
- React Native
- React Navigation
- Expo Vector Icons
- React Native Gesture Handler
- React Native Iphone X Helper
- React Native Reanimated
- React Native Responsive Fontsize
- React Native SVG
- Styled Components
- TypeScript
- Yarn
- Clonar o projeto:
git clone https://github.com/Aszurar/github-explorer-app.git
- É necessário a instalação do yarn de acordo com seu sistema operacional, para isso veja como no site do Yarn
- Instalação das dependências:
- Execute o comando abaixo dentro da pasta do projeto
yarn
- É necessário a instalação do emulador Android Studios e das tecnologias requesitadas acima no:seedling: Requisitos
- Também é necessário a instalação/configuração de outras tecnologias, para isso siga os passos indicados nessa página de acordo com seu sistema operacional: Executando uma Aplicação React-Native emulando Windows/Linux/MacOS ou direto no dispositivo mobile Android/IOS Execução - Abra a pasta do projeto com alguma IDE(Vscode) ou simplesmente abra o terminal na pasta do projeto e execute o comando abaixo:
expo start
Abra o emulador ou conecte o celular(É necessário a instalação do Expo Go) e execute:
a
Lembrando que, caso seja executado pelo emulador, o ideal é sempre deixa-lo aberto antes de aplicar os comandos acima.
Desenvolvido por 🌟 Lucas de Lima Martins de Souza.