ionic react mobile app self balancing robot

ionik-react-mobile-app-self-balancing-robot

Ini adalah proyek di mana kami membangun aplikasi seluler untuk mengontrol robot keseimbangan sendiri kustom melalui antarmuka Bluetooth HC-08. Proyek ini memungkinkan pengiriman perintah ke pengontrol mikro Arduino untuk melakukan tugas seperti:

1. Gerakan ke 4 arah: maju, mundur, kanan dan kiri melalui antarmuka joystick.
2. Mendapatkan semua pengukuran dari sensor robot untuk mewakili status robot dalam tabel dan grafik.
3. Ubah konstanta pengontrol PID, dan kecepatan robot maksimum.
4. Gambarlah peta robot di kanvas yang diberikan pengukuran.

Tumpukan dipilih

Kerangka kerja yang dipilih adalah kerangka ionik, ini adalah alat yang sangat bagus untuk membangun aplikasi seluler Android dan iOS menggunakan JavaScript, HTML, dan CSS. Tetapi untuk ini saya memilih reactjs sebagai pustaka JavaScript dengan template naskah. Untuk manajemen negara, redux dengan plugging untuk React dipilih.

Model dan Arsitektur Negara Bagian

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

Komposisi tab UI

Aplikasi ini disusun berdasarkan tab dan beberapa komponen untuk membuat UI yang berbeda.

1. Pengemudi
2. Otomatis
3. Sesuaikan pengontrol
4. Metrik

Bekerja dengan proyek ini

Untuk berkolaborasi atau hanya menggunakan proyek ini, Anda harus menyiapkan lingkungan Android.

1. Unduh dan instal Android Studio dan instal SDK

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

2. Konfigurasikan variabel lingkungan android_sdk_root

Jika Anda adalah pengguna Linux, Anda cukup menjalankan ini atau menambahkannya ke file konfigurasi shell-spesifik yang sesuai. Contoh: Bash_profile, Bashrc dll.

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

3. Pergi ke AVD Manager di Android Studio dan buat simulator

4. Instal Node

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

5. Pasang Ionic Cli

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

Setelah repo diunduh, jalankan perintah berikut

npm install

ionic serve

Ini menjalankan proyek di browser web Anda tetapi pluggin asli tidak akan berfungsi.

6. Buat Proyek Android

ionic cap add android

untuk menghasilkan proyek iOS

ionic cap add ios

Buka Android Studio di folder Android dan jalankan aplikasi di simulator.

Untuk fungsi langsung dan bekerja langsung pada aplikasi yang dipasang pada simulator menjalankan ini.

npm run dev

Lihat Repositori Robot

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

Demo aplikasi

Dalam akar proyek Anda memiliki demo aplikasi ".apk"

SB_Controller.apk

video