React.js, React Native, Node.js, JavaScript.
Node.js
- Site: https://nodejs.org/en/
React.js
React Native
- Site: https://reactnative.dev/
Visual Studio Code
- Site: https://code.visualstudio.com/download
- Extenção
Material icon Theme
Image preview
Prettier - Code formatter
Expo
- Site: https://expo.dev/
Expo Go
- Site: https://expo.dev/client
Android Studio
Iniciando o projeto Estrutura Principal
- Primeiros passos com React Native
- Criando um projeto com Expo
- Inserindo navegações entre páginas
- Extilização no React Native
- Utilizando Android Studio e Expo Go (Pré-visualização do APP)
Inserindo as funcionalidades Criando hábito
- Usando SQLite com Expo
- Fazendo renderização condicional
- Criando as operações básicas (Create, Read, Update, Delete) dos hábitos
Finalizando o App Animando o Bit
- Modificação condicional das animações
- Manipulação de notificação
- Manipulação de tempo
- Criação do splash e ícone do aplicativo
- Instalar o Expo
- Expo-Cli
npm install -g expo-cli
- Expo Version
expo --version
- Git Version
git --version
- Instalar o Android Studio para fazer a emulação do dispositivo mobile
- Configurar Emulador
- Android Studio
Create device
- Select Hardware:
Phones/Pixel 4
(Play Store) - Next
- Select Hardware:
More Action/Virtual device menager/Create virtual device/
Criando o projeto com Expo
- Projeto Expo
npx expo init myapp
-
Project - Bare Workflow
- Minimal
-
Rodar o projeto expo
npx expo start
-
Criar a pasta
src
na raiz do projeto -
Criar a pasta
Pages
dentro da pastasrc
-
Criar a pasta
Routes
dentro da pastasrc
-
React-Navigation
npm install @react-navigation/native
- React-Navigation-Stack
npm install @react-navigation/native-stack
npm install @react-navigation/stack
- Criar a pasta
assets
dentro da pastasrc
- Baixar as imagens do projeto
- Colar as imagens na pasta
assets
- Criar a pasta
Start
dentro da pastaPages
- Criar o arquivo
index.jsx
dentro da pastaStart
Rotas
- Criar as rotas
- Criar o arquivo
index.jsx
dentro da pastaRoutes
- Criar o arquivo
AllPages.jsx
dentro da pastaRoutes
Components
- Criar a pasta
Components
dentro da pastasrc
- Criar a pasta
Common
dentro da pastaComponents
- Criar a pasta
DefaultButton
dentro da pastaCommon
- Criar a pasta
LifeStatus
dentro da pastaCommon
- Criar o arquivo
index.jsx
dentro da pastaDefaultButton
- Criar o arquivo
index.jsx
dentro da pastaLifeStatus
Biblioteca
- Lottie-React-Native (Animação)
npm i --save lottie-react-native
- Animação do robô
Status
100 - Máximo
50 - Médio
25 - Baixo
00 - Curto (Acabou o Game)
No robô, nós temos primeiros Felicidade e depois saúde xx-xx
Pages
- Criar a pasta
AppExplanation
dentro da pastaPages
- Criar o arquivo
index.jsx
dentro da pastaAppExplanation
- Criar a pasta
Explanation
dentro da pastaComponents
- Criar a pasta
ExplanationCard
dentro da pastaExplanation
- Criar o arquivo
index.jsx
dentro da pastaExplanationCard
-
By: Daniel Oliveira
Instagram
- https://www.instagram.com/danieloliv3/Facebook
- https://web.facebook.com/danielsapup3/Twitter
- https://twitter.com/danielsapup3/Linkedin
- https://www.linkedin.com/in/danielsapup3/