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: A powerful JavaScript library used for creating dynamic, interactive charts in the application.
Bootstrap: 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: Supports template-driven forms, enabling form handling and user input in the application.

Installation Guide

Clone the repository:

git clone https://gitlab.com/profile-image/kedaireka/smartfarming/frontend-smartfarming.git

Navigate to the project directory:

cd agrilink_vocpro

Install Dependencies:

npm install

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.

2.4 KiB Raw Blame History