# 11th July Report

## Progress

Time: **08:55**
Events: Entering the lab

---

### Continuing write comment on Dispenser API service

Time: **09:08**
Events:
- The job that from yesterday now must be finished.
- Giving comment to service so the functions have description when developer wants to implement them.
- Here I just documenting the rest of code which not writen in [previous report](https://hackmd.io/@muhamadaldy/By9wDhfZB#Giving-comment-to-documented).

  /**
   * This function is to get raw data of the target dispenser from
   * the API. It might be the same function as get detail but added
   * with last upload time and temperature of each tank. It returns
   * the json format.
   * 
   * @param     device_id   The device ID of target dispenser
   * 
   * @returns   value       The json object of data
   * 
   * @example
   *
   * {
   *    "Device_ID": "EE_06_01",
   *    "UploadTime": "2019-05-06 11:14:05",
   *    "Status": 1,
   *    "HotTemp": 99,
   *    "WarmTemp": 40,
   *    "ColdTemp": 13
   * }
   */
  async getDispenserRawData (device_id) {
    let url = this.urlDispenserRawData + device_id;
    let myJson;

    await this.http.get(url).toPromise().then((success) => {
      console.log("Success");
      myJson = success['Data'];
    }).catch((failed) => {
      myJson = {
        "Device_ID": device_id,
        "UploadTime": "No Data",
        "Status": 0,
        "HotTemp": 0,
        "WarmTemp": 0,
        "ColdTemp": 0
      }
    });

    return myJson;
  }

  /**
   * This function is to get the repair condition of the target
   * dispenser from the API. It contains the problem that still
   * under maintenance until it being complete. It returns
   * the json format.
   * 
   * @param     device_id   The device ID of target dispenser
   * 
   * @returns   value       The json object of data
   * 
   * @example
   *
   * {
   *    "Device_ID": "EE_06_01",
   *    "UploadTime": "2019-03-08 16:32:00",
   *    "Status": 4,
   *    "ErrorType": 5,
   *    "Description": "Coldd water button is broken"
   * }
   */
  async getDispenserRepairCondition (device_id) {
    let url = this.urlDispenserRepairCondition + device_id;
    let value = await this.http.get(url).toPromise();
    return value['Data'];
  }

  /**
   * This function is for sending a report about problem founded
   * on target dispenser. It require files that uploaded, stored in
   * array, the dispenser ID, email address of the reporter, error
   * type number, and description if needed. It returns boolean value
   * where true if success and false if failed.
   * 
   * @param     file            Files uploaded in array
   * @param     device_id       Dispenser ID
   * @param     email           Reporter's email address
   * @param     errorType       Problem error type number
   * @param     description     Description if error equals to "Other"
   * 
   * @returns   boolean         true = success, false = failed/error
   */
  async reportProblem (file: any, device_id: string, email: string, errorType: number, description: string) {
    
    let url = this.urlReportDispenserProblem;

    let reportProblems = new FormData();
    for (let i = 0; i < file.length; i++) {
      reportProblems.append('File', file[i]);
    }
    reportProblems.append('Device_ID', device_id);
    reportProblems.append('Email', email);
    reportProblems.append('ErrorType', String(errorType));
    reportProblems.append('Description', description);

    return await this.http.post<any>(url, reportProblems).toPromise()
      .then((result) => {
        if (result['code'] === 200) {
          return true;
        } else {
          console.error("Error while sending report: " + result['msg']);
          return false;
        }
      }, () => {
        console.error("Promise rejected: unable to sending report!");
        return false;
      })
      .catch((e) => {
        console.error("Function error: on getDispenserRepairCondition => " + e);
        return false;
      });
    
  }

  /**
   * This function is for gives the user an option to track the
   * dispenser update activity and subscribe to his email address.
   * If the function is success it will return true value, otherwise
   * it will return false. It also return false if fails in doing
   * Promise.
   * 
   * @param     device_id     The ID of target dispenser
   * @param     email         The user or subscriber email address
   * @param     status        Option of user: 1 is agree, 0 is disagree
   * 
   * @returns   boolean       Return true if success do action, false if
   *                          failed or something wrong with Promise
   */
  async wantUpdateTrack (device_id, email, status) {
    let url = this.urlUpdateTrack;

    const postBody = {
      "Email": email,
      "Device_ID": device_id,
      "Status": status
    }

    return await this.http.post(url, postBody).toPromise()
      .then((result) => {
        if (result === 200)
          return true;
        else
          return false;
      })
      .catch(() => {
        return false;
      });
  }

  /**
   * This function is to check whether the target dispenser is
   * being tracked, or subscribed, by the following email or not
   * yet. It require the device id and email address to get the
   * tracking status. It returns the json format.
   * 
   * @param     device_id   The device ID of target dispenser
   * @param     email       The email address of the subscriber
   * 
   * @returns   value       The json object of data
   * 
   * @example
   *
   * {
   *    "Email": "[e-mail]",
   *    "Device_ID": "EE_07_01",
   *    "Status": 1
   * }
   */
  async checkTrackStatus (device_id, email) {
    let url = this.urlCheckTrackStatus + "?Device_ID=" + device_id + "&Email=" + email;
    let value = await this.http.get(url).toPromise();
    return value['Data'];
  }
  
  /**
   * This function is to get list of dispenser maintenance info 
   * from the current status from the API. For every dispenser with
   * the same status, e.g. 1 or 2, will returned as list. It
   * returns the json format.
   * 
   * @param     status      The current status of maintained dispenser
   * 
   * @returns   value       The json array of data
   * 
   * @example
   * 
   * [
   *  {
   *    "Device_ID": "MA_05_01",
   *    "Email": "[e-mail]",
   *    "ErrorType": 5,
   *    "Description": "Broken",
   *    "Status": 4,
   *    "UploadTime": "2019-01-02 09:36:00",
   *    "NotifyTime": "2019-01-02 09:36:00",
   *    "Maintainer": "Mr.Pang",
   *    "Result": "Someone push powersaving button",
   *    "CompleteTime": "2019-01-02 24:00:00",
   *    "Index": 0,
   *    "Source": null,
   *    "Source2": null,
   *    "Source3": null
   *  },
   *  {
   *    "Device_ID": "T4_04_01",
   *    "Email": "[e-mail]",
   *    "ErrorType": 3,
   *    "Description": "Leaking water",
   *    "Status": 4,
   *    "UploadTime": "2019-01-02 20:16:00",
   *    "NotifyTime": "2019-01-02 20:16:00",
   *    "Maintainer": "Mr.Pang",
   *    "Result": "Fan and Compressor are broken",
   *    "CompleteTime": "2019-01-02 24:00:00",
   *    "Index": 0,
   *    "Source": null,
   *    "Source2": null,
   *    "Source3": null
   *  },
   *  ...
   * ]
   */
  async getRepairThingworx (status: number) {
    let url = this.urlRepairConditionThingworx + status;
    let value = await this.http.get(url).toPromise();
    return value['Data'];
  }

Time: **13:38**
- Done commenting and fix some code inside the functions.
- It can be seen full version [here](https://github.com/aru1702/NTUST_myWork/blob/master/app/services/dispenser-api.service.ts).
- Tomorrow start to test the Dispenser API service and when it done, start to gives documentation with comment to other services.

---

### Learning material about manifest for PWA

Time: **15:10**
In this part, one of the main points that a website called as **Progressive Web Apps** is manifest. As we want to build a PWA, manifest should be included inside the project and work properly. Below this I will explain into some parts from basic understanding to how we use it real.

**Source of learn**:
- Developer Google, web app manifest (https://developers.google.com/web/fundamentals/web-app-manifest/)
- Developer Google, custom splash screen (https://developers.google.com/web/tools/lighthouse/audits/custom-splash-screen)
- Manifest PWA (https://www.youtube.com/watch?v=AlEdGOLhuM8)
- Hosting PWA to Netlify (https://www.youtube.com/watch?v=n_cYHVAFROA)

#### 1. What is manifest for PWA

- Based on [developer Google](https://developers.google.com/web/fundamentals/web-app-manifest/) manifest is a simple JSON file that contains identity of the web app. It describe the name of web app, description about type, default background color, etc., and the uses of icons.
- In natve app, like Android or iOS app, manifest functionally to identify the app by giving information about name, icons, depedency, imports library, etc.
- Manifest gives icons on the browser tab screen also with the name, and giving all the information defined when the web app is installed/added into homescreen on phone device with browser.
- Manifest will tell the browser that the web app has such identity from JSON format, different from described in HTML page in `<head>`, that contains:
- **Basic information**: name, short name, short url
- **System use**: display, background color, theme color
- **Icons**: list of icons from the smallest to largest size.
- Even though manifest tells the browser the web app identity, `manifest.json` should be described inside the main page of web app, e.g. index.html, with:

    <link rel="manifest" href="/manifest.json">

- The `/manifest.json` can be changed if `manifest.json` itself is on other directory, besides of main or root.

#### 2. How is it affecting the web app

The good news for creating Progressive Web Apps, manifest is very affect when it wants to be installed into phone device, or added into homescreen. Manifest will shows that the web app has support in giving the details (name, icons, etc.) to make the shortcut morelike native app.

##### 2.1. Icons

Icons in manifest should be made in many size, e.g. from 72px to 512 px (px means pixel). If the web app will be installed in many types of phone with different sizes of display, many option of icons will make the browser will choose which is suits best for the phone. For example on phone with 4.5 inch height screen display will using 128px icon where on tablet with wider and taller screen will using the larger one.

Besides of the icon file itself, in manifest should be declare one by one. If we have 72px, 96px, and 128px icons in our web app then in manifest should be like this:

"icons": [
  {
    "src": "/images/icons-72.png",
    "type": "image/png",
    "sizes": "72x72"
  },
  {
    "src": "/images/icons-96.png",
    "type": "image/png",
    "sizes": "96x96"
  },
  {
    "src": "/images/icons-128.png",
    "type": "image/png",
    "sizes": "128x128"
  }
]

##### 2.2. Splash screen

Splash screen is an intro page when the user open the app. When we open a native app on smartphone there will be white screen before it goes to the main screen. This white screen called splash screen of an app.

In PWA, splash screen can play good role to enhance the design and increase acknowledge of the app by the user. On splash screen it will display the icon of the app and the background color.

If we talking about Facebook or Twitter then our images color about them is **blue**, one is regular blue while the other is sky blue. We can use splash screen background color to make user recognize our main theme color and play as easy-to-remember-thing.

To get the splash screen works properly, `manifest.json` should has:
- The **name** property, has to be set the name of our PWA,
- The **background_color** property, has to be set to a valid CSS color value,
- The **icons array** (see 2.1), specifies an icon that is at least 512px by 512px, and
- The **icon files** is exists and should be in PNG format

#### 3. How the user will recognize

Once the user open the web app, it will suggest the user to install or add into homescreen. Noted that this will discarded after the user do so. When installed it will appear in the homescreen or on the list of application menu. Open the application will brings the user to get the splash screen, with icon and background color, and go to the `start_url` or the main page. The rest of user experience will use the web app just like using native app with lighter size.

Even the user not install or add it into his smartphone, on browser we can check with **Inspect Element**, usually with shortcut `CTRL + Shift + I`. Go to application tab and you will see if the manifest is present or not. Noted that make sure always using the latest version of browser, very old version of browser like Chrome 11 not supporting this feature, even PWA itself.

It will be displayed like this:
<center>
<img src="https://raw.githubusercontent.com/aru1702/images/master/ntust-documentation/24-01.JPG" style="max-height:600px" />
</center>
<br>

#### 4. Build and testing

First we need an Ionic project and a server to deploy the project to internet. Here I'm using Netlify to deploy the project because it's easy to import the code from Github. Moreover it can automatically build inside instead build locally using:

`ionic build --prod`

Below is the step to step how to deploy the project to Netlify:

1. Install the latest Ionic for dev with `npm install --save-dev ionic` and build your Ionic project for the first time using `ionic build --prod`, also commit and push to your Github repository.
2. Use Github to create Netlify free account [here](https://app.netlify.com/signup), it will prompt you to authorize your account and follow the instruction.
3. On create new site, import from Github, you can choose just one that you want or all repository, then continue with some configuration like this.

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

4. After this, Netlify will generate the site for your Ionic project, if it fails then try to do update and build again in Step 1 then commit and push to Github.
5. If success then your site will some kind like this, notify that building your site is success.

<center>
<img src="https://raw.githubusercontent.com/aru1702/images/master/ntust-documentation/24-03.JPG" style="max-height:600px" />
</center>
<br>

6. Then we can try to open the URL given.
7. After this, you don't need to build again and deploy to Netlify, instead just commit and push to Github and Netlify will subscribe to generate new changes to your site.

Time: **17:50**
Now after we can use our site by Netlify, we must configure our `manifest.json` to get our main goal. This is my example for manifest.

{
    "short_name": "My App",
    "name": "My Very First Application",
    "theme_color": "#1976d2",
    "background_color": "#fafafa",
    "display": "standalone",
    "scope": "/",
    "start_url": "/",
    "icons": [
        {
            "src": "/assets/icons/icons-61.png",
            "type": "image/png",
            "sizes": "61x61"
        },
        {
            "src": "/assets/icons/icons-122.png",
            "type": "image/png",
            "sizes": "122x122"
        },
        {
            "src": "/assets/icons/icons-183.png",
            "type": "image/png",
            "sizes": "183x183"
        }
    ]
}

Unfortunately the respond when I open it on browser looks like not working well. It returns **Unexpected Token** which I still find out what is the problem. On the internet, much of people get this error too. This will be fixed on tomorrow.

<center>
<img src="https://raw.githubusercontent.com/aru1702/images/master/ntust-documentation/24-04.JPG" style="max-height:600px" />
</center>
<br>

---

## Conclusion

- Documenting on dispenser API service is done
- Has push the files to master project, in tested by Ian and Thariq
- Some of the functions has been fixes by integrating from others project
- Searching learning material of manifest for PWA
- Discuss with Mr. Johnny for the use of API, some function has been changed
- Discuss with Ms. Annie to invited into mock up UI project

---

Time: **18:00**
Events: Leaving the lab

###### tags: `on-intern`