CHAPTER II | Requisitos | Tecnologias | I | II | III | IV | Execução | Desafio | Licença | 🙋♀️
🚀 CHAPTER II - IGNITE Rocketseat
O capítulo II trouxe uma aplicação do início ao fim utilizando o Expo Bare Workflow, adicionando Typescript logo no começo, toda a eficiência de uma das mais utilizadas bibliotecas CSS in JS, a Styled Components, criando interfaces projetadas em um layout do Figma. Também utilizamos armazenamento local, entendemos a diferença entre as navegações mobile, uso de formulários, login social e uso de APIs nativas.
-
Iniciando a aplicação com Expo Bare Workflow. Expo é uma plataforma de código aberto que auxilia na criação de aplicativos nativos que rodam no Android, no iOS e na Web.
-
Typescript adicionado ao projeto logo após a escolha do template Bare Workflow e explorado ao máximo até o fim da aplicação.
-
Criação de interfaces de forma eficiente com a biblioteca Styled Components (CSS in JS).
-
Criação de formulários flexíveis com React Hooks Form.
-
Utilização da biblioteca Yup para construir esquemas de validação de valores em tempo de execução, de uma forma altamente legível até para validações mais complexas.
-
Conceito em torno do funcionamento da navegação por stack e por bottom-tabs.
-
Armazenamento local, o AsyncStorage é um sistema de armazenamento não criptografado, assíncrono, persistente e global para aplicativo no formato chave-valor, semelhante ao LocalStorage da Web.
-
Uso de gráfico de pizza com a instalação da biblioteca VictoryPie, para exibir o percentual por categoria de forma dinâmica e por um menu de navegação mensal.
-
Um pouco sobre a biblioteca React Native Svg, que auxilia na implementação da gráficos em SVG da VictoryPie.
-
Login Social com o OAuth Authentication, estratégia que permite o uso dos dados de usuário de uma conta já existente como, por exemplo, Google, Apple, GitHub e outros. Esse formato permite o usuário ter acesso a sua aplicação sem a necessidade de criar um conta, ferramenta que auxilia na fidelização ao seu app.
-
Implementação da Context API para o compartilhamento dos dados do usuários entre as rotas que exigem autenticação.
-
Criando um Hook customizável para armazenas a lógica de autenticação, uma vez que será compartilhada em alguns locais da aplicação.
🏅 Utilizando o comando ```expo start``` você pederá selecionar o emulador desejado. Também é possível testar sua aplicação por meio do seu dispositivo físico, desde que estejam compartilhando a mesma rede. Para isso instale o Expo Go.
# Clonar repositório
git clone git@github.com:lilianmartinsfritzen/myskills-ignite.git
# Entrar na pasta abaixo
cd myskills-ignite
# Restaurar pacotes
npm install
# Para aproveitar o ecossistema Expo use o comando abaixo e selecione o emulador desejado
expo start
# O template selecionado permite o uso dos comandos abaixo, caso alguma implementação adicional ainda não tenha integração com o Expo
# Executar o projeto Android
npx react-native run-android && npm start
# Executar o projeto IOS
cd ios
pod install
cd ..
npx react-native run-ios && npm start
🎮 Caso queira testar a aplicação em seu ANDROID acesse o link https://expo.dev/@lmartinsfritzen/gofinances. Será necessário baixar o Expo Go no dispositivo.
Nesse desafio foi necessário configurar o ícone que representa o aplicativo no dispositivo após baixado, além dos que serão exibidos nas lojas. Também foi adicionada a Splash Screen e o deploy via Expo.
-
Ícone e adaptiveIcon.
-
Configurar background-color da tela splash.
-
Verificar implementação da Splash Screen.
-
Logar na conta Expo, rodar a build e verificar se publicação do aplicativo ocorreu de forma correta, deixar o link aberto para a leitura do QR code e para que outras pessoas possam baixar e usar via Expo Go.
Esse projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.
