one-bit-life_webapp

One Bit Life

Pré-Requisitos.

React.js, React Native, Node.js, JavaScript.

Node.js

• Site: https://nodejs.org/en/

React.js

• Site: https://pt-br.reactjs.org/

React Native

• Site: https://reactnative.dev/

Ferramentas do Programador.

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

• Site: https://developer.android.com/studio

Projeto

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

Criação do projeto

• 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
• 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 pasta src

• Criar a pasta Routes dentro da pasta src

• 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 pasta src
• Baixar as imagens do projeto
  • Imagens: https://drive.google.com/drive/folders/1dfgdiDeqSWsm6OXQKEpeNRHqCvSGGkRl
• Colar as imagens na pasta assets
• Criar a pasta Start dentro da pasta Pages
• Criar o arquivo index.jsx dentro da pasta Start

Rotas

• Criar as rotas
• Criar o arquivo index.jsx dentro da pasta Routes
• Criar o arquivo AllPages.jsx dentro da pasta Routes

Components

• Criar a pasta Components dentro da pasta src
• Criar a pasta Common dentro da pasta Components
• Criar a pasta DefaultButton dentro da pasta Common
• Criar a pasta LifeStatus dentro da pasta Common
• Criar o arquivo index.jsx dentro da pasta DefaultButton
• Criar o arquivo index.jsx dentro da pasta LifeStatus

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 pasta Pages
• Criar o arquivo index.jsx dentro da pasta AppExplanation
• Criar a pasta Explanation dentro da pasta Components
• Criar a pasta ExplanationCard dentro da pasta Explanation
• Criar o arquivo index.jsx dentro da pasta ExplanationCard

• 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/