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:

Google Play Store:

- Baixe e instale em seu dispositivo Android pela Google Play Store:

MySkills

---

Sobre |  Motivo |  Design |  Requisitos |  Tecnologias |  CI/CD |  Baixar e Executar 

---

____

• Link do vídeo completo sobre o projeto

---

ℹ️ 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
  • 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.
  • 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

---

⁉️ 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
• 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.

---

🎨 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

---

🌱 Requisitos Mínimos

• Android Studio
• Celular(Opcional)
• Node.js
• React
• React-Native
• TypeScript
• Yarn(ou NPM)

---

🚀 Tecnologias Utilizadas

O projeto foi desenvolvido utilizando as seguintes tecnologias

• Android Studio
• Async Storage
• Javascript
• NodeJS
• React
• React Native
• React Native Splash Screen
• TypeScript
• Yarn

---

🚚 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 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;
  • Github;
  • Google Play Console;
  • Google Cloud Platform;

---

📦 Como baixar e executar o projeto

• Clonar o projeto:

   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
• Instalação das dependências:
  • Execute o comando abaixo dentro da pasta do projeto

    yarn

• É necessário a instalação do emulador Android Studio e das tecnologias requesitadas acima no 🌱 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
• 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:

  1. Executando o metro-bundle:

         yarn start

  2. Executando no android:

         yarn android

• Caso esteja no IOS, após as configurações faladas anteriormente até no link mencionado acima, então execute o comando abaixo:

      pod install

      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.