70 lines
2.4 KiB
Markdown
70 lines
2.4 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
|
|
|
|
- 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.
|