JavaScript deel 3 – API connectie

Bekijk eerst deze video. In de les gaan we aan de slag met de opdracht.

Opdracht

In deze opdracht gaan we weer een getal ophalen van een API. Maar ditmaal gebruiken we onze eigen cmd.camp IOT server. Als je de Arduino les over het verbinden met de IOT server nog niet gedaan hebt, doe die dan nu eerst.

In de video zie je een simpel voorbeeld van hoe je een getal ophaalt van de Random API. Dit getal wordt getoond in een div en gebruikt om de breedte van die div aan te passen. Hier zie je nog een keer de volledige code:

HTML

<div id="blokje"></div>

CSS

#blokje {
  background-color: red;
  height: 50px;
}

function reqListener () {
  var getal = this.responseText.trim();
  var blokje = document.querySelector("#blokje");
  console.log(getal);
  blokje.style.width = getal + "px";
  blokje.innerHTML = getal;
}

var oReq = new XMLHttpRequest();
oReq.addEventListener("load", reqListener);
oReq.open("GET", "https://www.random.org/integers/?num=1&min=50&max=350&col=1&base=10&format=plain&rnd=new");
oReq.send();

Maak, als je dat nog niet hebt, een projectmap met bovenstaande code.

Vervang de url naar die van de cmd.camp IOT server, als volgt. In plaats van XXXXX plak je de key die je gekregen hebt.
```
oReq.open("GET", "https://cmd.camp/iot/get/XXXXX");
```
Als het goed is zou je nu in je site het getal moeten zien dat je er met de Arduino opgeslagen hebt. Of ga in een ander browservenster naar https://cmd.camp/iot/send/xxxxx/nnn (vervang xxxxx door de key die je hierboven gebruikt hebt en nnn door een willekeurig getal).
Als je in Chrome op Ctrl+Shift+J (Windows / Linux) of Cmd+Opt+J (Mac) drukt, opent de Console. Als je hier een getal (of een andere waarde) ziet, heb je een verbinding met de server gemaakt. Als je hier een rode foutmelding ziet, is er wat fout gegaan.

Goed:

Fout:

Het kan zijn dat je soms een getal krijgt, en soms een rode foutmelding. Dit heeft er mee te maken dat er niet altijd een stabiele verbinding met de API is. Dat ligt niet aan je code.

Dat je de waarde die uit de server komt in de console ziet, komt door dit zinnetje in je JavaScript:
```
console.log(getal);
```
console.log() betekent: laat zien in de console. Developers gebruiken de console vaak om even iets te testen.
Natuurlijk is het niet handig dat je steeds moet verversen om de laatste waarde te zien. Daarom gaan we dat nu automatisch doen. In de vorige les heb je geleerd dat we daar setInterval voor kunnen gebruiken.

Maak een functie van de laatste vier regels code in je script:
```
function serverGet() {
    var oReq = new XMLHttpRequest();
    oReq.addEventListener("load", reqListener);
    oReq.open("GET", "https://cmd.camp/iot/get/XXXXX");
    oReq.send();
}
```
Voeg buiten de functie deze code toe om de functie die je zojuist gemaakt hebt elke twee seconden te starten:
```
var timer = setInterval(serverGet, 2000);
```
Als het goed is zie je nu dat, als je Arduino een nieuwe waarde naar de server stuurt, dat getal na 2 seconde automatisch wordt bijgewerkt.
Je kunt met het getal ook een if-statement gebruiken om de opmaak van de div aan te passen.
Plak dit onderaan in je reqListener functie:
```
if (getal > 500) {
    SLIDER.style.backgroundColor = "red";
} else {
    SLIDER.style.backgroundColor = "green";
}
```
Als je transition: 1s; toevoegt aan de CSS van het blokje, komt er na elke verandering een transitie van 1 seconde, zodat hij vloeiend van de ene naar de andere opmaak gaat.

Getallen verzenden

We gaan nu een functie maken waarmee we met één druk op een knop een getal naar de server versturen, zodat de Arduino het kan ontvangen. Later kun je natuurlijk meer knoppen maken, of de knop vervangen door een range slider.

Maak een nieuwe functie onderaan je JS bestand genaamd serverSend.
Maak in HTML en CSS een knop. Geef in JS aan dat serverSend gestart moet worden als je op jouw knop klikt. In les 2 hebben we uitgebreid besproken hoe je een knop maakt.
Zet in de functie console.log("Klik!"); Controleer of je Klik! in de console ziet als je op de knop klikt.
In deze functie gaan we een getal versturen naar de server. Omdat we geen antwoord terug verwachten, hebben we hier maar een deel van de XMLHttpRequest code nodig:
```
var server = new XMLHttpRequest();
server.open("GET", "https://cmd.camp/iot/send/yyyyy/180");
server.send();
```
Vervang yyyyy door de andere key die je hebt gekregen.
Je hebt twee keys gekregen, zodat je er eentje kunt gebruiken voor communicatie van de Arduino naar JS, en eentje voor JS naar Arduino.
Sla het bovenstaande op, open in Chrome en druk op de knop.
Ga in een ander tabblad naar https://cmd.camp/iot/get/yyyyy en controleer of je 180 in de browser ziet. Zo ja, dan werkt alles.
Je kan nu een kopie maken van bovenstaande functie, uiteraard verander je wel de naam van de functie.
Verbind een tweede knop aan deze functie en pas de functie aan zodat je 0 naar dezelfde key stuurt.
Je hebt nu dus twee knoppen die twee verschillende waarden naar dezelfde key kunnen sturen.
Als dit allemaal werkt dan ben je succesvol data naar de Arduino aan het versturen waarmee je, als je de Arduino les hebt gevolgd, een servomotor kunt besturen.
Je kunt nu de kracht van HTML, CSS én JS inzetten om een dynamische, interactieve app te maken. Daag jezelf uit en ga op zoek naar mogelijkheden! Hieronder zie je nog een ‘cheatsheet’ die je wat extra mogelijkheden biedt.

Voorbeeld 1: Getallen ontvangen

In dit voorbeeld wordt elke 2 seconden een getal van de server ontvangen. De hoogte van het getal bepaalt de lengte en de kleur van de div.

CSS

#SLIDER {
    height: 20px;
    transition: 1s;
}

JavaScript

var SLIDER = document.querySelector("#SLIDER");

function showResponse () {
    console.log(this.responseText);
    SLIDER.style.width = this.responseText + "px";
    if (this.responseText > 500) {
        SLIDER.style.backgroundColor = "red";
    } else {
        SLIDER.style.backgroundColor = "green";
    }
}

function serverGet() {
    var server = new XMLHttpRequest();
    server.onload = showResponse;
    server.open("GET", "https://cmd.camp/iot/get/xxxxx");
    server.send();
}

var timer = setInterval(serverGet, 2000);

Voorbeeld 2: Een aan/uit schakelaar

In dit voorbeeld zie je twee knoppen, waarmee je een 0 of een 1 naar de server kunt sturen. Handig voor een aan/uit schakelaar.

var KNOP1 = document.querySelector("#KNOP1");
var KNOP2 = document.querySelector("#KNOP2");

KNOP1.onclick = aan;
KNOP2.onclick = uit;

function aan() {
    var server = new XMLHttpRequest();
    server.open("GET", "https://cmd.camp/iot/send/yyyyy/1"); // stuur 1
    server.send();
}

function uit() {
    var server = new XMLHttpRequest();
    server.open("GET", "https://cmd.camp/iot/send/yyyyy/0"); // stuur 0
    server.send();
}

Voorbeeld 3: Tijdschakelaar

Met één druk op de knop eerst de ene waarde sturen, en 3 seconden later de andere waarde

var KNOP1 = document.querySelector("#KNOP1");

KNOP1.onclick = aan;

function aan() {
    var server = new XMLHttpRequest();
    server.open("GET", "https://cmd.camp/iot/send/yyyyy/1"); // stuur 1
    server.send();

    window.setTimeout(uit, 3000); // 3000 milliseconden wachten en dan uit() starten
}

function uit() {
    var server = new XMLHttpRequest();
    server.open("GET", "https://cmd.camp/iot/send/yyyyy/0"); // stuur 0
    server.send();
}

Voorbeeld 4: Range

In plaats van een schakelaar (1 of 0) kun je ook bijvoorbeeld een range-input gebruiken om andere waarden te versturen. De minimale en maximale waarde van de range kun je zelf bepalen. Bijvoorbeeld om op de Arduino een servomotor van 0 tot 180 graden te laten draaien.

HTML

<input type="range" min="0" max="180" id="RANGE">
<div id="RESULT"></div>

JavaScript

var RANGE = document.querySelector("#RANGE");
var RESULT = document.querySelector("#RESULT");

RANGE.onchange = send;

function send() {
    RESULT.innerHTML = RANGE.value; // laat de RANGE waarde zien in RESULT div

    var server = new XMLHttpRequest();
    server.open("GET", "https://cmd.camp/iot/send/yyyyy/" + RANGE.value); // verstuur de RANGE waarde naar de server
    server.send();
}