83 lines
3.3 KiB
Markdown
83 lines
3.3 KiB
Markdown
# Agrilink Vocpro (Smart Farming Web Application)
|
|
|
|
|
|
A Website application that using Angular 18 for monitoring greenhouse conditions with IoT device that have 2 NPK, DHT, and BH1750 sensors
|
|
|
|
|
|
## Overview
|
|
|
|
This application enables user to monitor greenhouse conditions by IoT device that include 2 NPK, DHT, and BH1750 sensors.
|
|
The data that will display on the graph is 24 hour trend data and there will be last 1 hour data on the card interface
|
|
|
|
|
|
|
|
## Features
|
|
|
|
- Monitor sensor data
|
|
- User authentication
|
|
|
|
|
|
|
|
## Technology Stack
|
|
|
|
- Angular 18 (Front-end Web Framework)
|
|
- REST API (Backend communication)
|
|
- GitLab for version control
|
|
|
|
|
|
|
|
## Angular Dependency Stack
|
|
This project uses several packages to support various functionalities. Here is a list of the key dependencies:
|
|
- **[Chart.js](https://www.chartjs.org/)**: A powerful JavaScript library used for creating dynamic, interactive charts in the application.
|
|
- **[Bootstrap](https://getbootstrap.com/)**: A front-end framework for building responsive and mobile-first web designs, providing pre-designed components and utilities.
|
|
- **Event Listener**: Used to manage events like resizing the window, allowing the chart to adjust automatically to screen size changes.
|
|
- **[Angular FormsModule](https://angular.io/api/forms/FormsModule)**: Supports template-driven forms, enabling form handling and user input in the application.
|
|
|
|
|
|
|
|
## Installation Guide
|
|
|
|
1. Clone the repository:
|
|
```
|
|
git clone https://gitlab.com/profile-image/kedaireka/smartfarming/frontend-smartfarming.git
|
|
```
|
|
2. Navigate to the project directory:
|
|
```
|
|
cd agrilink_vocpro
|
|
```
|
|
3. Run the project:
|
|
```
|
|
ng serve
|
|
```
|
|
|
|
|
|
|
|
## Project Structure (Angular)
|
|
|
|
- `src/app/`: Contains the Angular application source code.
|
|
- `cores/`: Contains all constants, interfaces, and services needed for the project.
|
|
- `interfaces/`: Contains TypeScript interfaces for data models and types used throughout the application.
|
|
- `services/`: Contains service files for managing API requests.
|
|
- `pages/`: Contains Angular components and views representing different pages of the application.
|
|
|
|
- `angular.json`: Angular project configuration file.
|
|
- `package.json`: Contains project dependencies and scripts for building and running the project.
|
|
|
|
|
|
## Progress Report
|
|
|
|
| Date | Type | Description |
|
|
|------------|-------|-----------------------------------------------------------------------------------------------------|
|
|
| 2024-10-11 | feat | Completed the integration for sensor data by using REST API on graphic and card at dashboard. |
|
|
| 2024-10-08 | fix | Adding lazy load and fixing responsive UI for data sensor at card section |
|
|
| 2024-09-30 | fix | Fixing responsive UI for data sensor in graph |
|
|
| 2024-09-27 | fix | Fix default data on graphic if change into other sensor, adding different color for each parameters on sensor, adding information about data units for parameters on the graph |
|
|
| 2024-09-20 | fix | Fix slicing interface at dashboard |
|
|
| 2024-09-20 | feat | Initial commit for slicing dashboard and login interface |
|
|
|
|
|
|
|
|
|
|
## License
|
|
For open source projects, say how it is licensed.
|