# 07 Platform specific API calls

[toc]

# Theory subject
* Platform specific API calls using a .NET Standard project and DependencyService

# Lab subjects
* Make **platform specific API calls** using an **existing plugin** that does the platform specifics for you

# Assignments

Assignment repository to clone:
[https://classroom.github.com/a/5n3kb497](https://classroom.github.com/a/5n3kb497)

How? See <i class="fa fa-book"></i>note: [Join the classroom](https://hackmd.io/@frewaeyaert/deviceprogramming/%2FrDOTGvcaTm6RYC05z2TdHw#Join-the-classroom)

# Ex01 – Camera usage

The goal of this exercise is that the user can use the device’s camera to take a picture. Even though this is specific device behavior and would be ideal to make platform specific API calls, there is a fine plugin available that does all that just for you, called **Xamarin.Essentials**.

**We will set up a new blank project** to test this behavior until it works as it should, and document it. _The final goal could be to extend the garbage app you created earlier (lab 6) using Azure BLOB storage, however due to time constraints we will not handle this in the lab._


Create a new project in the above repository, called ‘**Ex01**.

* Manage the NuGet packages for the entire solution, and install **Xamarin.Essentials**.
* After installing this plugin, a file appears explaining what to do to make everything work.
* Use the documentation to:
* Launch the camera when the user hits the ‘take a picture’ button
* Show the picture in an Image control when he doesn’t. Your app shouldn’t crash if the user hits cancel.

# Ex02 - Quality of life

## Algemeen

We ontwikkelen een applicatie die data van bepaalde gebieden kan weergeven, en de bijhorende scores van levenskwaliteit op verschillende topics.

* Voor een aantal klassen en GUI’s wordt **start code** **gegeven**. Zie [bronmateriaal](https://leho-howest.instructure.com/courses/16798/files/2732942?module_item_id=570159)

* Gegeven klassen en GUI’s **mogen aangepast worden**.


## API Calls

_Zorg dat al je methode namen en klasse namen overeen komen met wat in de opgave beschreven wordt, daar de werking hiervan via automatische unit tests gecontroleerd zal worden!_

* Neem de gegeven klassen op in je project.
* Je bent volledig vrij om waar nodig zaken toe te voegen in de klassen, maar **wijzig de namen van bestaande properties niet**.
* Volgende end points zijn beschikbaar in de web service API:
* List of areas:
* **Class:** Area
* **Endpoint (GET):** [https://mct-qualityoflife.azurewebsites.net/api/areas](https://mct-qualityoflife.azurewebsites.net/api/areas)
* Area details:
* **Class:** AreaData
* **Endpoint (GET):** [https://mct-qualityoflife.azurewebsites.net/api/areas/{areaId}](https://mct-qualityoflife.azurewebsites.net/api/areas/%7bareaId%7d)
* The above class is **not given**. Create it so it can hold all information of the response.
* Score of an area:
* **Class:** QualityScore
* **Endpoint (GET):** [https://mct-qualityoflife.azurewebsites.net/api/areas/{areaId}/QualityScores](https://mct-qualityoflife.azurewebsites.net/api/areas/%7bareaId%7d/QualityScores)
* Update area score:
* **Class:** QualityScore
* **Endpoint (PUT):**
[https://mct-qualityoflife.azurewebsites.net/api/QualityScore/{scoreId}](https://mct-qualityoflife.azurewebsites.net/api/QualityScore/%7bscoreId%7d) * Enkel scores tussen 0 en 10 (grenzen inbegrepen) worden aanvaard.

* Maak een repository klasse aan met de naam **QualityRepository**, en voorzie volgende methodes:
**_(zorg dat ook deze exact dezelfde namen hebben als vermeld in de opgave!)_**
* GetAreasAsync()
* Geeft een lijst van alle areas (type Area) terug.
* GetAreaDataAsync(Guid areaId)
* Geeft de details (type AreaData) van een specifieke area terug.
* GetQualityScoresAsync(Guid areaId)
* Geeft een lijst van quality of life scores (type: QualityScore) terug.
* UpdateQualityScoreAsync(QualityScore score)
* Wijzigt de score van een QualityScore object
* We raden ten sterkste aan om test code te schrijven die bovenstaande test.

## MAINPAGE.XAML

We beginnen met de startpagina. Deze toont een lijst van gebieden in een listview (enkel de naam; geen datatemplate nodig). Zie [bronmateriaal](https://leho-howest.instructure.com/courses/16798/files/2732942?module_item_id=570159) voor de start xaml code.

* Wordt een gebied gekozen uit de listview, dan wordt dit doorgegeven naar een DetailPage pagina. _Volg de regels van navigatie zoals benadrukt tijdens de labo’s!_
* Verberg de navigation bar op deze pagina.

## DETAILPAGE.XAML

Deze pagina toont de details van het gegeven gebied. Zie bronmateriaal voor de start xaml code.

* Verberg de navigation bar.
* Toon alle details in de gegeven Image (kies de mobile image) en labels.
* Een klik op “Go back” brengt de gebruiker terug naar de vorige pagina.
* Een klik op “Quality of life” brengt de gebruiker naar een ScorePage, waar alle quality of life scores van het huidig gebied getoond zullen worden.

## SCOREPAGE.XAML

Deze pagina toont de quality scores van een gegeven gebied. De start xaml vind je bij bronmateriaal.

* Verberg de navigation bar.
* Voeg in je gegeven klasse QualityScore een **berekende property** **ScorePercentage** (type int) toe, die de score op tien vermenigvuldigt met 10.
* Het resultaat met de gegeven xaml dient er als volgt uit te zien:
* Een klik op “Back to details” brengt de gebruiker terug naar de vorige pagina.
* Een klik op “Back to area list” brengt de gebruiker terug naar de hoofdpagina (= de eerste pagina, met de lijst van areas).
* Pas de listview nu aan zodat de quality scores weergegeven worden zoals te zien is in de screenshot / screencast:
* 
* Tip: maak 4 kolommen aan; een eerste die de overige ruimte inneemt, een tweede die exact 100 units breed is, en nog twee die exact 35 units innemen.
* In de eerste kolom wordt de naam van het topic **links** weergegeven.
* In diezelfde kolom wordt **rechts** het percentage getoond, gevolgd door het teken ‘%’. (tip: stacklayout)
* In de tweede kolom worden twee boxviews getoond, beide 10 units hoog.
* De eerste boxview is 100 units breed en heeft als achtergrondkleur #eeeeee.
* De tweede boxview is zo breed als het scorepercentage (zie berekende property) en krijgt de kleur die in het qualityscore object meegegeven wordt.
* In de laatste twee kolommen komt een button van 35 units hoog, met als opschriften “-” en “+”. Bij een klik op de knoppen wordt de ScoreOutOf10 gewijzigd met +1 of -1.
* Gebruik hiervoor de UpdateQualityScoreAsync methode die je eerder maakte.
* Na het updaten wordt de lijst van scores op de pagina opnieuw ingeladen, zodat de wijziging direct zichtbaar wordt.

# What did we learn?

* It’s clear to you **where & how** you can **find / use existing plugins** to make platform specific API calls. You can **analyse** documentation on the subject to learn how to use them.
* You know how to create the layout of your choice using **Forms**, which is **automatically adapted** to the screen sizes.
* Based on the required layout, you can analyse whether you should **choose** either a **Grid** or a **StackLayout**, and how you can force all controls to take up the required amount of space.
* It’s clear to you how you can use your **self-made REST web service** to **GET, POST and PUT** data using **JSON**.

# Commit your work (GitHub)

Please commit your final working project to GitHub before your next lab starts.

:::success
**You can always ask the teachers for feedback on the exercises if you’re not sure of the result! Just add an ‘Issue’ to your repository and mention your teacher’s name (@teachername).**
:::

* Finish your assignment in time and commit:
* open a command window
* browse to your solution folder
* execute these commands, using the comment “**finished lab**”: