# Research Documentation

## Introduction
This document serves as a central repository for all the research that has been conducted to support the development of a new website for XYZ Corporation. It includes a comprehensive overview of the research process and findings and explanations for why particular decisions were made.

The document is organized into four main sections: (1) Frontend, (2) Backend, (3) API, and (4) Sensor. Each section provides a detailed account of the research process and findings.

This document is an essential resource for the development team, as it provides a comprehensive overview of the research conducted and the insights gained. It will inform the website's design and development, ensuring that it is user-friendly, engaging, and aligned with the needs and preferences of the client."

## Frontend
### Research graphing libraries
Due to the large number of existing libraries for displaying charts, it is crucial to determine what features are required and what limitations are acceptable. Initial research consisted of discovering what libraries exist for Javascript and their respective features. From this, it was possible to narrow the potential list to a few favorites per the features discussed in the project plan. This narrowed-down list consists of Chart.js, Nivo, Apexcharts.js, and Google Charts.

However, Google Charts was quickly ruled out as its styling didn't match the overall website's design and would have clashed in a rather unpleasant manner. Chart.js, Nivo, and Apexcharts.js all matched rather well.

Nivo was deemed unsuitable due to a lack of external resources. While there was plenty of documentation directly from Nivo it wasn't easy to find tutorials or other third-party resources. This is detrimental as none of the team members have any experience with this library, so it significantly increases the difficulty of using it in the project in an effective manner.

The two remaining libraries are Chart.js and Apexcharts.js. These two are both excellent libraries that are widely used, Open source, free to use, and generally meet all requirements. The decision was made for Apexcharts as it is more plug-and-go while offering slightly more features that aren't required but might be nice to have, such as live charts and possibly the best out-of-the-box design.

### Research Frontend Frameworks
At the beginning of the project, a choice must be made about which framework would be used for the Frontend. Initially, there were two frameworks, React js and Angular js, which emerged as a good framework that is appropriate for the project.

The choice ultimately fell on React js, because React has all the functions needed to make the Frontend of the project meet the requirements. It is also easy to add libraries, such as the library for the graphs and for creating a responsive web app.

Angular can also do all of this, but is much more extensive and therefore also more work to find out how everything works. While the requirements for the Frontend do not have to be so extensive. Another reason for choosing React js is that there is a clear documentation for all functionalities.

### Research Responsive Web-apps
There are several possibilities to get a responsive web app. For example, there are different Frameworks and different libraries to make this possible.

A responsive web app means that an app can be properly aligned and used smoothly and that it is possible on different devices. So if there is a graph in the web app, it must fit within the framework of the screen. Or if there are several graphs or buttons next to each other on the desktop version, but this does not fit within the framework of a smartphone, this will automatically be placed under each other, for example.

That is why react js was chosen with the libraries material.ui and apexcharts, making it easy to put functions in the React app. In the React js it is easy to have this automatically aligned, so that it fits within the frames of the screen.

### Research libraries to ease web-dev process
This section mainly existed to categorize any further research that wasn't mentioned before that might have to be done the assist in designing and developing the final website and simplifying this process as much as possible. This included learning about Figma and how to use it to sketch and design an initial version of the website.

Another tool to be used to simplify this process is Material UI. Material UI is a popular user interface (UI) library for React. It is developed and maintained by Google and can provide a consistent look and feel across all platforms, including web, mobile, and desktop. The library includes many components, including buttons, forms, grids, and more, that are designed to be customizable and easy to use. It provides a fast and easy way to build user interfaces consistent with Material Design principles. It is also highly customizable, so developers can create unique and engaging user experiences that reflect their brand and style.

## Backend
### Initial research
#### Deciding on framework
In the initial start of the project, the team had to decide on a framework which will be the backbone of the project. After carefull consideration we decided on ASP.Net Core. The decission have been made due to the fact tha the framework is easy to use and scale with the project, it is well documented and the team was able to easily find resources related to it and some of the developers were already familiar with the framework and some of the functionality in provides.
#### Research realted to the framework
The team began exploring the framework using the initial project that was provided by Microsoft in order to acquire deeper understanding on how the components work and how to make the relations between them in the premade design. Following, the initial set up of the working environment and stating the project, the group decided to substitude the entities provided in the design with object that can be used in the final design in the future.

namespace LorafyAPI.Entities
{
    public class EndDevice
    {
        public string EUI { get; set; }
        public string Name { get; set; }
        public string Address { get; set; }
        public DateTime DateCreated { get; set; }
        public DateTime DateUpdated { get; set; }
    }
}

### API
At the start of the project, the team had to get a grasp of how API work and essentially what APIs are. This was done using resources on the internet(which will be mentioned in the rubric below). During that process the team came across an application named "Postman" which would be the main testing ground for the API. The developers created some testing endpoints and tried them using "Postman". After the tests were positive and the group managed to grasp the concepts of APIs.

using LorafyAPI.Entities;
using Microsoft.AspNetCore.Mvc;

namespace LorafyAPI.Controllers
{
    [ApiController]
    [Route("api/end-device")]
    public class EndDeviceController : ControllerBase
    {
        // In The end, this should return a Model instead of an Entity. But this is fine for testing purposes.
        [HttpGet]
        public EndDevice Get()
        {
            return new EndDevice
            {
               EUI = "A84041C1818350AD",
               Address = "260B6BA6",
               Name = "lht-gronau",
               DateCreated = DateTime.Now,
               DateUpdated = DateTime.Now,
            };
        }
    }
}

### Database
The team came up with the inital design of the database using the information provided by the clients. The decisions made with realtion to the entities in the database, are not final.The design of the final product is in discussion at the moment.... The initial implementation of the database was created on a coud provider known as "Digital Ocean".

# List of References
## Introduction
This list of references includes all the sources that were consulted during the research process. The sources are organized by section and then alphabetically by author.

The list of references is an essential part of the document, as it provides a record of the sources used and allows the reader to access them for further information. The references are presented in standard APA format and include all the necessary information, such as the author, title, and publication date or year. The list will be updated as necessary to reflect any new sources that are consulted or cited in the document.
## Frontend

**15 Best JavaScript Chart Libraries in 2022.** (2021). Retrieved 8 December 2022, from https://www.atatus.com/blog/javascript-chart-libraries/

**ApexCharts.js.** (2020, March 7). Retrieved December 8, 2022, from https://apexcharts.com/

**Chart.js | Open source HTML5 Charts for your website.** (2022). Retrieved 8 December 2022, from https://www.chartjs.org/

**Home | nivo.** (2022). Retrieved 8 December 2022, from https://nivo.rocks/

**Charts | Google Developers.** (2022). Retrieved 8 December 2022, from https://developers.google.com/chart

**Overview - Material UI.** (2022). Retrieved 8 December 2022, from https://mui.com/material-ui/getting-started/overview/

**Create a New React App – React.** (2022). Retrieved 8 December 2022, from https://reactjs.org/docs/create-a-new-react-app.html

**MUI: The React component library you always wanted.** (2022). Retrieved 8 December 2022, from https://mui.com/

**Singhal, G., & React, P. (2022). Process an API Response in React** | Pluralsight. Retrieved 8 December 2022, from https://www.pluralsight.com/guides/process-an-api-response-in-react

## Backend

**ASP.Net Core documentation** (2022). Retrieved 8 December 2022, from https://learn.microsoft.com/en-us/aspnet/core/?view=aspnetcore-7.0

**DigitalOcean documentation.** (2022). Retrieved 8 December 2022, from https://docs.digitalocean.com/products/

**Postman documentation.** (2022). Retrieved 8 December 2022, from https://learning.postman.com/docs/getting-started/introduction/

**What is an API.** (2015). Retrieved 8 December 2022, from
https://www.youtube.com/watch?v=s7wmiS2mSXY&ab_channel=MuleSoftVideos

**Build, Deploy, and Scale Your First Web App Using DigitalOcean App Platform.** (2020). Retrieved 8 December 2022, from
https://www.youtube.com/watch?v=8ScLbnjbRnw&ab_channel=DigitalOcean

## Other
**Extended Syntax | Markdown Guide.** (2022). Retrieved 8 December 2022, from https://www.markdownguide.org/extended-syntax