O projeto imHere é um aplicativo mobile que lista os participantes de um evento e detalhes desse evento como nome e data.
- O aplicativo foi enviando para produção com todo seu ciclo de CI/CD automatizado para o Android:
- Também é possível baixar e testar o App pelo Expo Go, ele foi publicado na plataforma do Expo:
Sobre | Motivo | Design | Requisitos | Tecnologias | CI/CD | Baixar e Executar
____
- A ideia desse aplicativo é poder listar todos os participaentes de um evento, além de poder adicioná-los, removê-los e também cadastrar o nome e a data do evento. Ou seja, é basicamente uma aplicação CRUD básica, onde temos uma listagem, cadastro, remoção e edição de dados.
- É o 1º projeto do bootcamp Ignite da trilha React Native 2021 da Rocketseat
- Originalmente o projeto não tinha funcionalidade de persistência de dados, mas foi adicionado o AsyncStorage para que os dados não sejam perdidos ao fechar o aplicativo.
- Para a construção da interface desse projeto foi usado React Native com TypeScript.
- Usamos o AsyncStorage para armazenar os dados localmente.
- Usamos as libs react-native-svg e react-native-svg-transformer para a utilização de SVGs no projeto.
- Usamos o Expo para auxiliar no desenvolvimento do projeto.
- A estilização é feita com StyleSheet já que a ideia é entender o básico do React Native.
- Na sessão de tecnologias temos linkado as referências para cada uma Tecnologias estará mais detalhado.
- Funcionalidadedes:
- Adicionar um novo participante.
- Remover participante.
- Lista todos participantes cadastrados.
- Cadastrar Nome e data do evento
- Deletar Nome e data do evento
- Remover todos dados cadastrados
- Persistência de dados com AsyncStorage.
- Funcionalidadedes:
-
Cadastro do nome e data do evento
- Validação do formulário de cadastro do evento
-
Remoção do nome e data do evento
- Esse projeto tem o objetivo de praticar os conceitos básicos do React Native e seus componentes, além de praticar o uso de TypeScript e também de algumas libs como o AsyncStorage.
- É um projeto simples, mas que trata da base de um aplicativo mobile, onde temos uma listagem, cadastro, remoção e edição de dados. Além disso é um projeto que tem sua base desenvolvida no primeiro módulo do bootcamp Ignite de React Native da Rocketseat.
- É o 1º projeto do bootcamp Ignite da trilha React Native 2021 da Rocketseat
- Nesse primeiro módulo focamos na interface e nos conceitos básicos do React Native. Com isso, toda essa parte de persistência de dados com Async-Storage, modificação do nome do evento, data do evento, formatação de datas, tudo isso foram melhorados e adicionados por mim.
-
Cadastro de um novo participante
- Validação do campo de participante
-
Remoção de participante
- Remoção de todos os dados cadastrados
- Android Studio
- Celular(Opcional)
- Node.js
- React
- React-Native
- Expo
- TypeScript
- Yarn(ou NPM)
O projeto foi desenvolvido utilizando as seguintes tecnologias
- Android Studio
- Async Storage
- Javascript
- NodeJS
- Expo
- React
- React Native
- React Native SVG
- React Native SVG Transformer
- TypeScript
- Yarn
-
Para a publicação do aplicativo, primeiro foi gerada a build manualmente com o comando
./gradlew bundleRelease, utilizando o build.gradle dentro da pasta android, que foi configurado com enableProguardInReleaseBuilds e enableHermes como true. -
Essa build foi enviada para o Google Play Console, onde todas as configurações do projeto Android foram personalizadas, incluindo a descrição, nome e imagens do aplicativo.
-
Em seguida, foi integrado o repositório remoto do projeto, que está no GitHub, com a plataforma App Center da Microsoft para realizar o CI/CD.
- O App Center observa a branch main, que é a de produção, e toda vez que houver algum push nessa branch, ele automaticamente gera uma nova build do aplicativo e envia para a Google Play Store.
-
Antes de usar o App Center, foi realizada toda a configuração necessária para que a plataforma possa realizar esse processo de forma automática e também foi necessário configurações no Google Cloud Platform e no Google Play Console.
-
Segue o link das plataformas usadas:
- Clonar o projeto:
git clone https://github.com/Aszurar/imHere.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
- É possível executar o projeto em um dispositivo físico caso não queira usar o emulador. Caso queira usar o emulador, faça instalação sua instalação por aqui: Android Studio 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
- Com o emulador android aberto ou o dispositivo móvel físico conecatdo via USB:
- Abra a pasta do projeto com alguma IDE(Vscode) ou simplesmente abra o terminal na pasta do projeto e execute o comando abaixo:
yarn android
- Caso o metro-bundle não funcione, execute como abaixo:
- Executando o metro-bundle:
yarn start
- Executando no android:
yarn android
- Executando o metro-bundle:
- Caso esteja no IOS, após as configurações faladas anteriormente até no link mencionado acima, então execute o comando abaixo:
yarn ios
- 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.