ionic react mobile app self balancing robot

Ионо -реакция-мобиль-ап-салф-баланс-робот

Это проект, в котором мы создали мобильное приложение для управления пользовательским самобалансирующим роботом через интерфейс Bluetooth HC-08. Проект позволяет отправлять команды в микроконтроллер Arduino для выполнения таких задач, как:

1. Движение в 4 направлениях: вперед, назад, вправо и слева через интерфейс джойстика.
2. Получение всех измерений от датчиков робота для представления статуса робота в таблицах и графиках.
3. Измените константы контроллеров PID и максимальные скорости роботов.
4. Нарисуйте карту робота в холсте, учитывая измерения.

Стек выбран

Выбранная структура была Ionic Framework, это очень хороший инструмент для сборки мобильных приложений Android и iOS с использованием JavaScript, HTML и CSS. Но для этого конкретного я выбрал ReactJS в качестве библиотеки JavaScript с шаблоном TypeScript. Для управления государством был выбран Redux с подключением для React.

Государственные модели и архитектура

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

Пользовательские вкладки композиции

Приложение состоит из вкладок и несколькими компонентами для рендеринга различных пользовательских интерфейсов.

1. Водитель
2. Автоматический
3. Отрегулируйте контроллеры
4. Метрики

Работать с этим проектом

Чтобы сотрудничать или просто использовать этот проект, вы должны подготовить среду Android.

1. Загрузите и установите Android Studio и установите SDK

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

2. Настройте переменную среды Android_SDK_ROOT

Если вы являетесь пользователем Linux, вы просто выполните это или добавите его в соответствующий файл конфигурации, специфичный для оболочки. Пример: 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. Перейдите в AVD Manager на Android Studio и создайте симулятор

4. Установите узел

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

5. Установите ионный CLI

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

После загрузки репо, запустите следующие команды

npm install

ionic serve

Это запускает проект в вашем веб -браузере, но нативные плуггинс не будут работать.

6. Создайте проект Android

ionic cap add android

Для создания проекта iOS

ionic cap add ios

Откройте Android Studio в папке Android и запустите приложение в симуляторе.

Для живых функций и работать непосредственно над приложением, установленным на симуляторе, запустите это.

npm run dev

Смотрите репозиторий робота

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

Демонстрация приложения

В корне проекта у вас есть демонстрация приложения ".apk"

SB_Controller.apk

Видео