Dzakwan Diego
Frontend Developer
Back
Company
Universitas Diponegoro
Year
2022
Stack
Vue, Vuetify
Summary
This website was built as an element of the vanamei shrimp pond water quality monitoring system. This website is my first job as a frontend developer.
Background
Diponegoro University is collaborating with one of the pond farmer groups in the Mororejo region to build a water quality monitoring system for vanamei shrimp ponds against the background of the problem of farmers having to monitor water quality manually.
Design Process
Goals
The expected outcome of this project is a web-based application that can be used to manage and monitor the water quality of pond. The application should be able to:
  • Manage the users
  • Manage the pond
  • Monitor the water quality
System Spesification
The image below is the architecture of the shrimp pond water quality monitoring system
The above diagram is a representation of the overall shrimp pond water quality monitoring system that has been created. In short, this system includes data collection by pH, TDS (density), Turbidity, DO (Oxygen), and Temperature sensors, then this sensor data is collected by the Arduino Uno microcontroller board and then sent to the Gateway point-to-point using the LoRa Shield module. Once it reaches the Gateway, the data is then sent to the database server using the MQTT (Mosquitto) protocol. The database is also integrated with an API, so the data displayed on the application and website can be accessed through the API. This website works by utilizing the API produced by the backend, both in presenting data in graphic form, as well as farm and user management functions
Results
Pond List
Graph Data
Tech Stack
  • VueJS
  • Vuetify
For the result, you could check it here.