ionic react mobile app self balancing robot

Ionic-React-Mobile-App-Self-Balancing-Robot

Dies ist ein Projekt, bei dem wir eine mobile Anwendung erstellt haben, um einen benutzerdefinierten Selbstausgleichsroboter über eine Bluetooth HC-08-Schnittstelle zu steuern. Das Projekt ermöglicht das Senden von Befehlen an den Arduino Micro Controller, um Aufgaben auszuführen, wie z. B.:

1. Bewegung in den 4 Richtungen: Vorwärts, rückwärts, rechts und links durch eine Joystick -Schnittstelle.
2. Erhalten Sie alle Messungen von den Robotersensoren, um den Roboterstatus in Tabellen und Grafiken darzustellen.
3. Ändern Sie die PID -Controller -Konstanten und die maximalen Robotergeschwindigkeiten.
4. Zeichnen Sie die Karte des Roboters in einer Leinwand angesichts der Messungen.

Stapel ausgewählt

Das ausgewählte Framework war ein ionisches Framework. Dies ist ein sehr schönes Tool für Build -Android- und iOS -Apps mit JavaScript, HTML und CSS. Für diese spezielle habe ich ReactJs jedoch als JavaScript -Bibliothek mit TypeScript -Vorlage ausgewählt. Für die staatliche Verwaltung wurde der Redux mit dem Verstopfung für React ausgewählt.

Staatsmodelle und Architektur

 ////////////////////////// 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 -Registerkarten Kompositionen

Die App besteht aus Registerkarten und mehreren Komponenten, um die unterschiedliche Benutzeroberfläche zu rendern.

1. Treiber
2. Automatisch
3. Controller einstellen
4. Metriken

Arbeiten Sie mit diesem Projekt zusammen

Um zusammenzuarbeiten oder einfach dieses Projekt zu nutzen, müssen Sie die Android -Umgebung bereit haben.

1. Laden Sie Android Studio herunter und installieren Sie das SDK

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

2. Konfigurieren Sie die Umgebungsvariable von android_sdk_root

Wenn Sie Linux-Benutzer sind, führen Sie diese einfach aus oder fügen Sie es der entsprechenden Shell-spezifischen Konfigurationsdatei hinzu. Beispiel: Bash_profile, Bashrc usw.

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

3. Gehen Sie zum AVD -Manager in Android Studio und erstellen Sie einen Simulator

4. Installieren Sie den Knoten

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

5. Ionencli installieren

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

Wenn das Repo heruntergeladen wurde, führen Sie die folgenden Befehle aus

npm install

ionic serve

Dies führt das Projekt in Ihrem Webbrowser aus, aber die nativen Pluggins funktionieren nicht.

6. Erstellen Sie das Android -Projekt

ionic cap add android

zum Erstellen des iOS -Projekts

ionic cap add ios

Öffnen Sie das Android Studio im Ordner Android und führen Sie die App im Simulator aus.

Für Live -Funktionen und um direkt an der auf dem Simulator montierten Anwendung zu arbeiten. Führen Sie dies aus.

npm run dev

Siehe das Roboter -Repository

[https://github.com/joselealejandro2928/self-balancing-herino-robot-controller]

Demo der App

In der Wurzel des Projekts haben Sie eine Demo der App ".APK"

SB_Controller.apk

Videos