https://github.com/aszurar/myskills
O projeto mySkills é um aplicativo mobile para listar habilidades e tecnologias aprendidas. Baixe e instale em seus dispositivo Android pela Google Play Store: https://play.google.com/store/apps/details?id=com.aszurar_myskills
https://github.com/aszurar/myskills
android android-studio async-storage figma ios javascript mobile react react-native typescript
Last synced: 2 months ago
JSON representation
O projeto mySkills é um aplicativo mobile para listar habilidades e tecnologias aprendidas. Baixe e instale em seus dispositivo Android pela Google Play Store: https://play.google.com/store/apps/details?id=com.aszurar_myskills
- Host: GitHub
- URL: https://github.com/aszurar/myskills
- Owner: Aszurar
- Created: 2021-09-23T13:06:06.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2023-09-18T05:01:19.000Z (almost 3 years ago)
- Last Synced: 2025-06-10T07:07:38.631Z (about 1 year ago)
- Topics: android, android-studio, async-storage, figma, ios, javascript, mobile, react, react-native, typescript
- Language: TypeScript
- Homepage: https://play.google.com/store/apps/details?id=com.aszurar_myskills
- Size: 2.94 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# MySkills
O projeto **myskills** é um aplicativo mobile para listar habilidades e tecnologias aprendidas.
- O aplicativo foi enviando para produção com todo seu ciclo de CI/CD automatizado para o Android:
---
---
____
- [**Link do vídeo completo sobre o projeto**](https://youtube.com/shorts/RqFc1VMc_1g?feature=share)
---
## :information_source: Sobre
- A ideia desse aplicativo é poder listar todas suas habilidades e removê-las. Ou seja, é basicamente uma aplicação CRUD básica, onde temos uma listagem, cadastro e remoçã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.
- 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 habilidade.
- Remover habilidade.
- Lista todas habilidades adicionadas.
- Remover uma habilidade por vez ou todas de uma vez.
- Persistência de dados com AsyncStorage.
1. **Cadastro do nome e data do evento**
2. **Remoção de habilidades**
---
## :interrobang: Motivo
- Esse projeto tem o objetivo de praticar os conceitos básicos do React Native e seus componentes e suas propriedades, variável Estado, manipulações de variável Estado, estilização com StyleSheet, componentização e formas de passar dados/funções para componentes criados, 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 e remoção.
- É o 1º projeto do bootcamp **Ignite da trilha React Native 2021 da [Rocketseat](https://www.rocketseat.com.br/)**
- Assim, 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 foram melhorados e adicionados por mim.**
---
## :art: Design
- O Design do projeto é baseado no visual do projeto ensinado no 1 módulo do bootcamp Ignite de React Native da Rockeseat.
- Não é disponibilizado o design do projeto no Figma nesse módulo por ser simples, fazemos baseado no vídeo.
- Com isso, recriei todo design no Figma com as seções de:
- Interface
- Componentes e Variantes
- Guia de Cores
- Ícones e Splash Screen
- Assets para lojas da Google
- Além disso, adicionei navegação/interação demonstrando as ações que o usuário pode fazer com o protótipo do Figma.
[**MySkills**](https://www.figma.com/file/CnSmWyPuHQK2f3yne2pLP5/mySkills?type=design&node-id=0%3A1&t=8OVYpfr4XQghnqiV-1)
[](https://www.figma.com/file/CnSmWyPuHQK2f3yne2pLP5/mySkills?type=design&node-id=0%3A1&t=8OVYpfr4XQghnqiV-1)
---
## :seedling: Requisitos Mínimos
- Android Studio
- Celular(Opcional)
- Node.js
- React
- React-Native
- TypeScript
- Yarn(ou NPM)
---
## :rocket: 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/)
- [React](https://pt-br.reactjs.org/)
- [React Native](https://reactnative.dev/)
- [React Native Splash Screen](https://www.npmjs.com/package/react-native-splash-screen)
- [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á aqui 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/myskills.git
```
- É necessário a instalação do yarn de acordo com seu sistema operacional, para isso veja como no site do [Yarn](https://classic.yarnpkg.com/blog/2017/05/12/introducing-yarn/)
- Instalação das dependências:
- Execute o comando abaixo dentro da pasta do projeto
```bash
yarn
```
- É necessário a instalação do emulador [Android Studio](https://developer.android.com/studio) e das tecnologias requesitadas acima no **:seedling: Requisitos Mínimos**
- 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
pod install
```
```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.
