ionic react mobile app self balancing robot

ionic-react-mobile-app-self-wrobot

Este es un proyecto en el que creamos una aplicación móvil para controlar un robot personalizado de autoealimentación a través de una interfaz Bluetooth HC-08. El proyecto permite enviar comandos al micro controlador Arduino para realizar tareas como:

1. Movimiento en las 4 direcciones: hacia adelante, hacia atrás, derecha e izquierda a través de una interfaz de joystick.
2. Obtener todas las mediciones de los sensores de robot para representar el estado del robot en tablas y gráficos.
3. Cambie las constantes de los controladores PID, y las velocidades máximas de robots.
4. Dibuja el mapa del robot en un lienzo dadas las mediciones.

Pila seleccionada

El marco seleccionado fue el marco iónico, esta es una herramienta muy poderosa para construir aplicaciones móviles de Android e iOS que usan JavaScript, HTML y CSS. Pero para este particular seleccioné ReactJS como una biblioteca JavaScript con plantilla de mecanografiado. Para la administración estatal se seleccionó el Redux con el enchufe para React.

Modelos estatales y arquitectura

 ////////////////////////// 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 : [ ] ,
} ; 

Composiciones de pestañas de interfaz de usuario

La aplicación está compuesta por pestañas y varios componentes para representar las diferentes UI.

1. Conductor
2. Automático
3. Ajustar controladores
4. Métrica

Trabajar con este proyecto

Para colaborar o simplemente usar este proyecto, debe tener el entorno Android listo.

1. Descargue e instale Android Studio e instale el SDK

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

2. Configure la variable de entorno android_sdk_root

Si es usuario de Linux, simplemente ejecuta esto o lo agregue al archivo de configuración específico de shell apropiado. Ejemplo: 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. Vaya al Administrador de AVD en Android Studio y cree un simulador

4. Instalar nodo

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

5. Instale la CLI iónica

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

Una vez que se haya descargado el repositorio, ejecute los siguientes comandos

npm install

ionic serve

Esto ejecuta el proyecto en su navegador web, pero los Pluggines nativos no funcionarán.

6. Crea el proyecto Android

ionic cap add android

para generar el proyecto iOS

ionic cap add ios

Abra el estudio de Android en la carpeta Android y ejecute la aplicación en el simulador.

Para funciones en vivo y para trabajar directamente en la aplicación montada en el simulador, ejecute esto.

npm run dev

Ver el repositorio de robots

[https://github.com/joseAlejandro2928/self-balancing-arduino-robot-controller]

Demostración de la aplicación

En la raíz del proyecto, tienes una demostración de la aplicación ".apk"

SB_Controller.apk

videos