ionic react mobile app self balancing robot

이온-반응-모바일-애플-밸런싱-로봇

이 프로젝트는 Bluetooth HC-08 인터페이스를 통해 맞춤형 자체 밸런싱 로봇을 제어하기 위해 모바일 애플리케이션을 구축 한 프로젝트입니다. 이 프로젝트는 Arduino 마이크로 컨트롤러에 명령을 보내 도와 같은 작업을 수행 할 수 있습니다.

1. 4 방향으로의 움직임 : 조이스틱 인터페이스를 통해 앞으로, 뒤로, 오른쪽 및 왼쪽.
2. 로봇 센서에서 모든 측정 값을 얻으려면 테이블과 그래프의 로봇 상태를 나타냅니다.
3. PID 컨트롤러 상수를 변경하고 최대 로봇 속도를 변경하십시오.
4. 측정 값이 주어진 캔버스에 로봇의지도를 그립니다.

스택 선택

선택된 프레임 워크는 이온 성 프레임 워크였습니다. 이것은 JavaScript, HTML 및 CSS를 사용하여 Android 및 iOS 모바일 앱을 빌드하는 강력한 도구입니다. 그러나이 특정에 대해 나는 TypeScript 템플릿이있는 JavaScript 라이브러리로 ReactJ를 선택했습니다. 주 경영진을 위해 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 사용자 인 경우이를 실행하거나 적절한 쉘 특정 구성 파일에 추가하십시오. 예 : 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 관리자로 이동하여 시뮬레이터를 만듭니다.

4. 노드를 설치하십시오

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

5. 이온 CLI를 설치하십시오

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

Repo가 다운로드되면 다음 명령을 실행하십시오.

npm install

ionic serve

이것은 웹 브라우저에서 프로젝트를 실행하지만 기본 Pluggins는 작동하지 않습니다.

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

비디오