frontend-smartfarming/README.md

# 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.