My Project : Battery System Monitoring Frontend - Karena Belajar

 

   Proyek ini berfokus pada pengembangan aplikasi frontend untuk monitoring sistem baterai secara real-time. Aplikasi ini menampilkan data baterai yang terintegrasi dengan backend monitoring, memungkinkan pengguna untuk melihat tampilan dashboard, spesifik rack, spesifik frame, dan melakukan pengaturan sistem. Data yang ditampilkan berasal dari backend yang mengumpulkan dan mengelola data melalui protokol Modbus TCP/IP atau serial port.

Peran:

   Frontend Developer 

Fitur:

• Visualisasi data baterai secara real-time di dashboard
• Menampilkan data spesifik dari rack dan frame
• Pengaturan sistem melalui antarmuka pengguna yang intuitif
• Integrasi penuh dengan backend monitoring sistem baterai

Teknologi:

• React.js
• Redux
• Axios (untuk komunikasi API)
• Chart.js (untuk visualisasi data)

Penggunaan:

1. Clone repositori ini.
2. Install dependensi dengan menjalankan perintah:

   npm install

3. Jalankan aplikasi frontend dengan perintah:

   npm start

4. Akses aplikasi melalui browser di http://localhost:3000.

API Endpoints:

Dashboard:

• GET /api/dashboard - Mendapatkan data untuk tampilan dashboard

Spesifik Rack:

• GET /api/specificRack?talis_id="id talis" - Mendapatkan data spesifik rack

Spesifik Frame:

• GET /api/specificFrame?pcb_barcode="pcb id" - Mendapatkan data spesifik frame

Kesimpulan:

Proyek ini memperlihatkan kemampuan dalam menampilkan dan mengelola data sistem baterai dengan antarmuka pengguna yang intuitif dan real-time. Aplikasi ini mendukung integrasi penuh dengan backend monitoring, memberikan solusi komprehensif untuk visualisasi dan pengaturan data baterai.

Media :

Contoh Dashboard

Contoh Spesik Rack

Contoh Spesipik Frame

Contoh Setting

Source Code :

• Github

Untuk informasi lebih lanjut tentang proyek ini atau untuk berdiskusi tentang kolaborasi proyek, silakan hubungi saya atau kunjungi website saya.