ionic react mobile app self balancing robot

离子反应摩托型自动平衡机器人

这是一个项目，我们在其中构建了一个移动应用程序，以通过蓝牙HC-08接口来控制自定义的自动平衡机器人。该项目允许将命令发送到Arduino Micro Controller执行以下任务：

1. 在四个方向上移动：向前，向后，左右通过操纵杆界面。
2. 从机器人传感器中获取所有测量值，以表示表和图中的机器人状态。
3. 更改PID控制器常数，并最大机器人速度。
4. 给定测量值，在画布中绘制机器人的地图。

选择堆栈

选择的框架是离子框架，这是使用JavaScript，HTML和CSS构建Android和iOS移动应用程序的功能强大的工具。但是对于这个特别的我选择了带有打字稿模板的JavaScript库。对于状态管理，选择了带有React插入的REDUX。

国家模型和体系结构

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

UI选项卡组成

该应用程序由选项卡组成，几个组件用于渲染不同的UI。

1. 司机
2. 自动的
3. 调整控制器
4. 指标

与这个项目一起工作

要合作或简单地使用此项目，您必须准备好Android环境。

1。下载并安装Android Studio并安装SDK

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

2。配置android_sdk_root环境变量

如果您是Linux用户，则只需执行此操作或将其添加到适当的Shell特定配置文件中。示例：bash_profile，bashrc等。

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

3。转到Android Studio上的AVD Manager并创建模拟器

4。安装节点

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

5。安装离子CLI

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

下载存储库后，运行以下命令

npm install

ionic serve

这可以在您的Web浏览器中运行项目，但本机插件将无法使用。

6。创建Android项目

ionic cap add android

用于生成iOS项目

ionic cap add ios

在文件夹Android中打开Android Studio，然后在模拟器中运行应用程序。

对于实时功能并直接在模拟器上安装的应用程序上运行。

npm run dev

查看机器人存储库

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

该应用程序的演示

在项目的根部，您有一个应用程序“ .apk”的演示

SB_Controller.apk

视频