ionic react mobile app self balancing robot

Ionic-react-Mobile-App-Self-Balance-Robot

Este é um projeto no qual criamos um aplicativo móvel para controlar um robô de auto-equilíbrio personalizado através de uma interface Bluetooth HC-08. O projeto permite o envio de comandos ao Micro Controlador Arduino para executar tarefas como:

1. Movimento nas 4 direções: para frente, para trás, direita e esquerda através de uma interface do joystick.
2. Obtendo todas as medidas dos sensores de robô para representar o status do robô em tabelas e gráficos.
3. Altere as constantes dos controladores PID e as velocidades máximas dos robôs.
4. Desenhe o mapa do robô em uma tela, dadas as medidas.

Pilha selecionada

A estrutura selecionada foi a estrutura iônica, essa é uma ferramenta muito boa para criar aplicativos móveis Android e iOS usando JavaScript, HTML e CSS. Mas, para este em particular, selecionei o ReactJS como uma biblioteca JavaScript com o Modelo do TypeScript. Para o gerenciamento de estado, o Redux com o plugging for React foi selecionado.

Modelos estaduais e arquitetura

 ////////////////////////// INTERFACES ////////////////////////
export interface IRobotState {
  linearVelocity : number ;
  angularVelocity : number ;
  incliAngle : number ;
  posX : number ;
  posY : number ;
  robotOrien : number ;
  battery ?: number ;
  startSampling ?: boolean ;
  sampleTime ?: number ;
  persistData ?: boolean ;
  records ?: Array < {
    linearVelocity : number ;
    angularVelocity : number ;
    incliAngle : number ;
    posX : number ;
    posY : number ;
    robotOrien : number ;
    battery : number ;
  } > ;
}
/////////////////////////////////////////////////////////////////

////////////////////////TYPES////////////////////////////////

export const SET_ROBOT_DYNAMIC_STATE = 'SET_ROBOT_DYNAMIC_STATE' ;
export const RESET_ROBOT_DYNAMIC_STATE = 'RESET_ROBOT_DYNAMIC_STATE' ;
export const PERSIST_ROBOT_DYNAMIC_STATE = 'PERSIST_ROBOT_DYNAMIC_STATE' ;

///////////////////////////////////////////////////////////

const initialState : IRobotState = {
  linearVelocity : 0.0 ,
  angularVelocity : 0.0 ,
  incliAngle : 0.0 ,
  posX : 0 ,
  posY : 0 ,
  robotOrien : 0.0 ,
  battery : 50 ,
  startSampling : false ,
  sampleTime : 150 ,
  persistData : false ,
  records : [ ] ,
} ; 

Composições de guias da interface do usuário

O aplicativo é composto por guias e vários componentes para renderizar as diferentes UIs.

1. Motorista
2. Automático
3. Ajuste os controladores
4. Métricas

Trabalhe com este projeto

Para colaborar ou simplesmente usar este projeto, você deve ter o ambiente Android pronto.

1. Baixe e instale o Android Studio e instale o SDK

[https://developer.android.com/studio]

2. Configure a variável Android_sdk_root

Se você é o usuário do Linux, basta executar isso ou adicioná-lo ao arquivo de configuração específico do shell apropriado. Exemplo: Bash_profile, Bashrc etc.

 export ANDROID_SDK_ROOT= $HOME /Library/Android/sdk
export PATH= $PATH : $ANDROID_SDK_ROOT /emulator
export PATH= $PATH : $ANDROID_SDK_ROOT /platform-tools

3. Vá para o gerente AVD no Android Studio e crie um simulador

4. Instale o nó

[https://nodejs.org/en/]

5. Instale a CLI iônica

[https://ionicframework.com/docs/intro/cli]

Depois que o repo for baixado, execute os seguintes comandos

npm install

ionic serve

Isso executa o projeto no seu navegador da Web, mas os Pluggins nativos não funcionarão.

6. Crie o projeto Android

ionic cap add android

Para gerar o projeto iOS

ionic cap add ios

Abra o estúdio Android na pasta Android e execute o aplicativo no simulador.

Para funções ao vivo e para trabalhar diretamente no aplicativo montado no simulador, execute isso.

npm run dev

Veja o repositório de robôs

[https://github.com/josealejandro2928/self-balancing-ardoino-robot-controller]

Demonstração do aplicativo

Na raiz do projeto, você tem uma demonstração do aplicativo ".apk"

SB_Controller.apk

vídeos