# 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

- Node JS version 18.20.4
- Angular 18.2.4 (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. Install Dependencies: 
```
npm install
```
4. 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.
    - `guards/`: Contains guards for managing access some routes in application
    - `interceptors`: Contains handling error 
    - `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.