Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/aszurar/imhere
O projeto imHere é um aplicativo mobile que lista os participantes de um evento e detalhes desse evento como nome e data. Baixe e instale em seus dispositivo Android pela Google Play Store: https://play.google.com/store/apps/details?id=com.aszurar.imhere
https://github.com/aszurar/imhere
android android-studio async-storage expo ios javascript mobile react react-native typescript
Last synced: 3 days ago
JSON representation
O projeto imHere é um aplicativo mobile que lista os participantes de um evento e detalhes desse evento como nome e data. Baixe e instale em seus dispositivo Android pela Google Play Store: https://play.google.com/store/apps/details?id=com.aszurar.imhere
- Host: GitHub
- URL: https://github.com/aszurar/imhere
- Owner: Aszurar
- Created: 2022-11-07T20:12:22.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-03-30T16:27:35.000Z (almost 2 years ago)
- Last Synced: 2024-12-18T07:13:16.603Z (about 2 months ago)
- Topics: android, android-studio, async-storage, expo, ios, javascript, mobile, react, react-native, typescript
- Language: TypeScript
- Homepage: https://play.google.com/store/apps/details?id=com.aszurar.imhere
- Size: 1.1 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# imHere
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:
Expo:
- Também é possível baixar e testar o App pelo Expo Go, ele foi publicado na plataforma do Expo:
imHere
---
____
- **[Link do vídeo completo sobre o projeto](https://youtu.be/29PYuFlgeW8)**
---
## :information_source: Sobre
- 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](https://www.rocketseat.com.br/)**
- **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](https://reactnative.dev/)** com **[TypeScript](https://www.typescriptlang.org/)**.
- Usamos o **[AsyncStorage](https://react-native-async-storage.github.io/async-storage/docs/install/)** 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.
1. **Cadastro do nome e data do evento**
- **Validação do formulário de cadastro do evento**
2. **Remoção do nome e data do evento**
---
## :interrobang: Motivo
- 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](https://www.rocketseat.com.br/)**
- 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.**
3. **Cadastro de um novo participante**
- **Validação do campo de participante**
4. **Remoção de participante**
5. **Remoção de todos os dados cadastrados**
---
## :art: Design
---
## :seedling: Requisitos Mínimos
- Android Studio
- Celular(Opcional)
- Node.js
- React
- React-Native
- Expo
- TypeScript
- Yarn(ou NPM)
---
## :rocket: Principais Tecnologias Utilizadas
O projeto foi desenvolvido utilizando as seguintes tecnologias
- [Android Studio](https://developer.android.com/studio)
- [Async Storage](https://react-native-async-storage.github.io/async-storage/)
- [Javascript](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript)
- [NodeJS](https://nodejs.org/en/)
- [Expo](https://docs.expo.dev/)
- [React](https://pt-br.reactjs.org/)
- [React Native](https://reactnative.dev/)
- [React Native SVG](https://github.com/react-native-svg/react-native-svg)
- [React Native SVG Transformer](https://github.com/kristerkari/react-native-svg-transformer)
- [TypeScript](https://www.typescriptlang.org/)
- [Yarn](https://classic.yarnpkg.com/blog/2017/05/12/introducing-yarn/)
---
## :truck: Entrega e distribuição continua
- 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](https://appcenter.ms/) 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:
- [App Center](https://appcenter.ms/);
- [Github](https://github.com/);
- [Google Play Console](https://play.google.com/console/about/);
- [Google Cloud Platform](https://console.cloud.google.com/);
---
## :package: Como baixar e executar o projeto
- Clonar o projeto:
```bash
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](https://yarnpkg.com/)
- Instalação das dependências:
- Execute o comando abaixo dentro da pasta do projeto
```bash
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](https://developer.android.com/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](https://react-native.rocketseat.dev/android/linux)
- 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:**
```bash
yarn android
```
- Caso o metro-bundle não funcione, execute como abaixo:
1. Executando o metro-bundle:
```bash
yarn start
```
2. Executando no android:
```bash
yarn android
```
- Caso esteja no IOS, após as configurações faladas anteriormente até no link mencionado acima, então execute o comando abaixo:
```bash
yarn ios
```
- Lembrando que, caso seja executado pelo emulador, o ideal é sempre deixa-lo aberto antes de aplicar os comandos acima.
---
Desenvolvido por :star2: Lucas de Lima Martins de Souza.
