หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ซอร์สโค้ดอื่น ๆ
ดาวน์โหลด

Ionic-react-mobile-app-self-balancing-robot

นี่คือโครงการที่เราสร้างแอปพลิเคชันมือถือเพื่อควบคุมหุ่นยนต์ปรับสมดุลตนเองผ่านอินเตอร์เฟส Bluetooth HC-08 โครงการอนุญาตให้ส่งคำสั่งไปยัง Arduino Micro Controller เพื่อทำงานเช่น:

  1. การเคลื่อนไหวใน 4 ทิศทาง: ไปข้างหน้า, ย้อนกลับ, ขวาและซ้ายผ่านอินเทอร์เฟซจอยสติ๊ก
  2. รับการวัดทั้งหมดจากเซ็นเซอร์หุ่นยนต์เพื่อแสดงสถานะหุ่นยนต์ในตารางและกราฟ
  3. เปลี่ยนค่าคงที่ PID คอนโทรลเลอร์และความเร็วสูงสุดของหุ่นยนต์
  4. วาดแผนที่ของหุ่นยนต์ในผืนผ้าใบที่ได้รับการวัด

เลือกสแต็ก

เฟรมเวิร์กที่เลือกคือ Framework Ionic นี่เป็นเครื่องมือที่ทรงพลังมากสำหรับการสร้างแอพมือถือ 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 : [ ] ,
} ;

องค์ประกอบแท็บ UI

แอพประกอบด้วยแท็บและส่วนประกอบหลายอย่างสำหรับการแสดงผล UIs ที่แตกต่างกัน

  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. ติดตั้ง Ionic CLI

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

เมื่อดาวน์โหลด repo แล้วให้เรียกใช้คำสั่งต่อไปนี้ 

npm install
ionic serve

สิ่งนี้เรียกใช้โครงการในเว็บเบราว์เซอร์ของคุณ แต่ปลั๊กอินดั้งเดิมจะไม่ทำงาน

6. สร้างโครงการ Android 

ionic cap add android

สำหรับการสร้างโครงการ iOS 

ionic cap add ios

เปิดสตูดิโอ Android ในโฟลเดอร์ Android และเรียกใช้แอพในตัวจำลอง

สำหรับฟังก์ชั่นสดและทำงานโดยตรงกับแอปพลิเคชันที่ติดตั้งบนเครื่องจำลองเรียกใช้สิ่งนี้ 

npm run dev

ดูที่เก็บหุ่นยนต์

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

การสาธิตแอป

ในรากของโครงการคุณมีตัวอย่างของแอพ ".apk" 

SB_Controller.apk

วิดีโอ

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด