# 24th May Report

This is the 13th study report of NTUST Internship program, before going to Taiwan. Last report I have design the UI for nearby dispenser system. In here I plan to build the back end code for the system. More details I put into summary section and documentation section will filled up with how the codes is going to work.

---

## Summary of this week

- Use the API from Smart Dispenser which is retrieve data:
- API for nearby dispenser.
- API for dispenser details (need for position).
- API for dispenser photo.
- The data needed:
- Device/Dispenser ID **(from Get Nearby Dispenser)**.
- Photo of the dispenser **(from Get Dispenser Picture)**.
- Water availability **(from Get Nearby Dispenser)**.
- Position of the dispenser **(from Get Dispenser Details)**, include building and location.
- List of nearby dispenser from dispenser has been scanned/use for API **(this also from Get Nearby Dispenser)**.

---

## Documentation

This work will shows how to get data from the API and use them into HTML in order to make a list. Based on the stated before I will use three API which is to get data about nearby dispenser, the picture, and the details. The data itself will be displayed without any design means that only a list of result. Future work will be how to implement and use the data into our previous UI design.

Before we get further there is some configuration for the Angular system to use HTTP service about GET and POST. If using the Ionic platform, open the **app.module.ts** in `src/app/` path. Then install the

// ...
// some import that I will not show because it will make long post
// ...

import { HttpClientModule } from '@angular/common/http'

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    IonicModule.forRoot(), 
    AppRoutingModule, 
    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),

    HttpClientModule
  ],
  
// ...
// and also the rest of code
// ...

The documentation of Angular HttpClient is here: https://angular.io/guide/http

### 1. Get data from API

API we use are stated in the code below in "url..." field variable. Each of them need parameter of "Device_ID" to get the data and "success" response. Because of pictures that retrieve from the API are too large (around 3000 pixels), in here only show the URL which access the picture.

#### 1.1. nearby.page.ts

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http'
import { Observable } from 'rxjs';

@Component({
  selector: 'app-test-double-json',
  templateUrl: './test-double-json.page.html',
  styleUrls: ['./test-double-json.page.scss'],
})
export class TestDoubleJSONPage implements OnInit {
  
  // API
  urlNearby = 'https://smartcampus.et.ntust.edu.tw:5425/Dispenser/Nearby?Device_ID=';
  urlDetails = 'https://smartcampus.et.ntust.edu.tw:5425/Dispenser/Detail?Device_ID=';
  urlPicture = 'https://smartcampus.et.ntust.edu.tw:5425/Dispenser/Image?Device_ID=';

  // field variables
    
    // this to store the whole data and call into HTML
    result : any = [];
    
    // this to store every data from the API
    device_id : String[] = [];
    status : String[] = [];
    building : String[] = [];
    position : String[] = [];
    picture : String[] = [];
    tempHot : String[] = [];
    tempWarm : String[] = [];
    tempCold : String[] = [];

  // dummy data
  device : String = "MA_B1_01";

  constructor(
    public http: HttpClient
  ) {
    this.getData();
  }

  ngOnInit() {
  }

  async getData () {

    await this.getNearby(this.device).then(() => {
      for (let i = 0 ; i < this.device_id.length ; i++) {

        // store all data into result field
        this.result.push({
          'Device_ID': this.device_id[i],
          'Status': this.status[i],
          'Building': this.building[i],
          'Position': this.position[i],
          'Picture': this.picture[i],
          'HotTemp': this.tempHot[i],
          'WarmTemp': this.tempWarm[i],
          'ColdTemp': this.tempCold[i],
        })
      };
    });

    console.log(this.result);

  }

  async getNearby (device_id) {
    let myUrl = this.urlNearby + device_id;

    let dataNearby = await this.http.get(myUrl).toPromise();
    let nearbyDispenser = dataNearby['Data'];
    
    if (nearbyDispenser != "") {

      for (let i = 0 ; i < nearbyDispenser.length ; i++){
        let myDeviceId = nearbyDispenser[i]['Device_ID'];
        let myStatus = nearbyDispenser[i]['Status'];
        let myTempHot = nearbyDispenser[i]['HotTemp'];
        let myTempWarm = nearbyDispenser[i]['WarmTemp'];
        let myTempCold = nearbyDispenser[i]['ColdTemp'];
        
        // get dispenser details
        await this.getDetails(myDeviceId);

        // get dispenser picture
        await this.getPicture(myDeviceId);

        // save data into field variable
        this.device_id.push(myDeviceId);
        this.status.push(myStatus);
        this.tempHot.push(myTempHot);
        this.tempWarm.push(myTempWarm);
        this.tempCold.push(myTempCold);
      }
    } else {
      console.log("Data not retrieved yet.")
    }
  }

  async getDetails (device_id) {
    let myUrl = this.urlDetails + device_id;

    let dataDetails = await this.http.get(myUrl).toPromise();
    let dispenserDetails = dataDetails['Data'];
    
    // get the building and position
    let getBuilding = dispenserDetails['Building'];
    let getPosition = dispenserDetails['Position'];

    // save into field variable
    this.building.push(getBuilding);
    this.position.push(getPosition);
  }

  async getPicture (device_id) {
    let myUrl = this.urlPicture + device_id;

    // here only get the url because the picture itself is so big
    let dataPicture = myUrl;

    // save into field variable
    this.picture.push(dataPicture);
  }

}

**Explanation:**
- The codes consists of three main functions:
- getData() is use to get all data from nearby machine API. Basically this function is use the get the **"Device_ID of nearby dispenser"**, **"the water status of hot temperature"**, **"the warm"**, and **"the cold"**. In here also calls the other two functions because the parameter of Device_ID for them are from the data that retrieved. The workflow should be like this:
- The getData() itself need main "Device_ID" which is retrieved from the user when access the page (parameter being passed from page before this).
- In codes here, the API will give the list of "Device_ID" of nearby dispensers.
- Every of these we need to look after the details and pictures so using loop.
- getPicture() is use to get the **picture** of dispenser. It independent function with "Device_ID" parameter so any state can call it.
- getDetails() is use to get the details about **the building position** and **the position of dispenser inside the building**.
- Each of function also auto saving the data into field array variable.
- This means the function itself is use for the get data about the dispenser.
- It doesn't return any value so it can't be use more than this context.
- **Notes:** I'm still looking for how to make the function very independent, like making Object Class with return value, so no need to state inside the same Class.
- This code still using **dummy value** of main Device_ID so parameter has been set before when the getData() function being called in constructor.
- After all data retrieved and saved into field array variable, it should be saved as an Object into **"result"** field array variable (see code above on `result : any = [];`).
- This variable is use for called into HTML code as one object per information.

#### 1.2. Log result

<center>
<img src="https://raw.githubusercontent.com/aru1702/images/master/ntust-documentation/13-01.JPG" alt="img1" style="max-height: 500px" />
</center>
</br>

- The log result shows us that the data that we retrieved from three different API's URL is as one object.
- This object is represent the data of each nearby dispenser we need to display.

---

### 2. Use the data into HTML

In order to implement and use the data into HTML, Angular has feature how to loop (instead of using PHP code in basic HTML) to make a list.

#### 2.1. nearby.page.html

<ion-content>

<ion-list>
  <ion-item *ngFor="let item of result">
    Device ID = {{item.Device_ID}} <br>
    Status = {{item.Status}} <br>
    Building = {{item.Building}} <br>
    Position = {{item.Position}} <br>
    Picture URL = {{item.Picture}} <br>
    Hot Temperature = {{item.HotTemp}} <br>
    Warm Temperature = {{item.WarmTemp}} <br>
    Cold Temperature = {{item.ColdTemp}}
  </ion-item>
  
</ion-list>

</ion-content>

**Explanation:**
- For every data in the **result** field array variable, displayed the into list.
- Using **\*ngFor** it perform for every item (in here item is as local variable to represent object of data) from result array.

#### 2.2. Screenshot of data

<center>
<img src="https://raw.githubusercontent.com/aru1702/images/master/ntust-documentation/13-02.JPG" alt="img2" style="max-height: 500px" />
</center>
</br>

- The picture above shows us that the data that use is same as the log before.
- As long it can be use in HTML code we can use this for any form of list we need.

---

## Conclusion:

- The back end code will retrieve the data from the API and saved as one object per dispenser in field array variable.
- Each of data will be displayed into HTML code in list form.
- Next work is going to implement or use the data into the UI design I have made in before report.

###### tags: `pre-intern report`