Terug

JavaScript IFTTT – Server Connectie

  1. Download het volgende template, pak de map uit op een goede plek. In Visual Studio Code Open (“Open Folder” in Windows) de map genaamd IFTTT_JS_opdracht1.zip. Bekijk de code.
    Let op: Je krijgt dit template om de opdracht te oefenen. Voor je eigen uitwerking van de opdracht verwachten we dat je zelf een ontwerp maakt.
    Let op de id’s die gebruikt zijn in de HTML pagina en CSS code.
  2. Maak een nieuw script.js bestand en link je HTML bestand er aan.

Getallen ontvangen

  1. Maak in je JavaScript code een functie genaamd serverGet.
  2. Plak de volgende code in je functie:
    function showResponse () {
        console.log(this.responseText);
    }
    
    var server = new XMLHttpRequest();
    server.onload = showResponse;
    server.open("GET", "http://www.example.org/example.txt");
    server.send();
    

    Klik hier als je meer wilt weten over XMLHttpRequest.

  3. Verander de URL in de code naar “http://cmd.camp:12345/get/xxxxx” (vervang xxxxx door één van de keys die je hebt ontvangen).
  4. Plak deze code onderaan je scriptbestand (dus buiten de functie). Wat deze regel doet is elke 2 seconden (2000 milliseconden) de functie starten. Open je website in Chrome.
    var timer = setInterval(serverGet, 2000);
    
  5. 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(this.responseText);
    

    console.log() betekent: laat zien in de console. Developers gebruiken de console vaak om even iets te testen.
    this.responseText is de data die van de server komt, als dat een getal is kunnen we dat dus meteen gebruiken om onze HTML te beïnvloeden. Dat gaan we in de volgende stap dan ook doen.

  6. Om de koppeling met style te oefenen doen we even een snel experiment: Voeg deze code toe aan de functie showResponse.

    var SLIDER = document.querySelector("#SLIDER");
    SLIDER.style.width = this.responseText + "px";
    

    Je ziet hier dat we het getal dat uit this.responseText komt, rechtstreeks wordt gekoppeld aan de width van de SLIDER. We zetten er nog "px" achter om aan te geven dat het om pixels gaat.
    Tip: Is de waarde die van de server komt te groot voor het element? Dan kun je die waarde bijvoorbeeld delen door twee: vervang this.responseText in die zin door (this.responseText/2).

  7. Je kunt met het getal ook een if-statement gebruiken om de opmaak van de div aan te passen:

    if (this.responseText > 500) {
        SLIDER.style.backgroundColor = "red";
    } else {
        SLIDER.style.backgroundColor = "green";
    }
    
  8. Ga in een ander browservenster naar http://cmd.camp:12345/send/xxxxx/nnn (vervang xxxxx door de key die je hierboven gebruikt hebt en nnn door een willekeurig getal). Als het goed is zie je nu in je app de lengte van het balkje vanzelf veranderen na een paar seconden.

  9. Als je transition: 1s; toevoegt aan de CSS van het SLIDER element, komt er na elke verandering een transitie van 1 seconde, zodat hij vloeiend van de ene naar de andere opmaak gaat.

Getallen verzenden

  1. Maak een nieuwe functie onderaan je JS bestand genaamd serverSend.
    Geef ook aan dat die functie gestart moet worden als je op jouw knop klikt, in les 1 heb je geleerd hoe dat moet.
  2. Zet in de functie console.log("Klik!"); Controleer of je Klik! in de console ziet als je op de knop klikt.
  3. 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", "http://www.example.org/example.txt");
    server.send();
    
  4. Verander de url van de server naar “http://cmd.camp:12345/send/yyyyy/54321” (vervang yyyyy door de andere key die je hebt ontvangen).
  5. Sla het bovenstaande op, open in Chrome en druk op de knop.
    Ga in een ander tabblad naar http://cmd.camp:12345/get/yyyyy en controleer of je 54321 in de browser ziet. Zo ja, dan werkt alles.
  6. Je kan nu een kopie maken van bovenstaande functie, uiteraard verander je wel de naam van de functie.
    Verbind KNOP2 aan deze functie en pas de functie aan zodat je een andere waarde dan 54321 naar dezelfde key stuurt.
    Je hebt nu dus twee knoppen die twee verschillende waarden naar dezelfde key kunnen sturen.
  7. Als dit allemaal werkt dan ben je succesvol data naar de servo aan het versturen waarmee je, als je Arduino Les 6 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

CSS

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

JavaScript

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

function serverGet() {
    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";
        }       
    }

    var server = new XMLHttpRequest();
    server.onload = showResponse;
    server.open("GET", "http://cmd.camp:12345/get/xxxxx");
    server.send();
}

var timer = setInterval(serverGet, 2000);

Voorbeeld 2: 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", "http://cmd.camp:12345/send/yyyyy/1"); // stuur 1
    server.send();
}

function uit() {
    var server = new XMLHttpRequest();
    server.open("GET", "http://cmd.camp:12345/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", "http://cmd.camp:12345/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", "http://cmd.camp:12345/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

HTML

<input type="range" min="1" max="20" 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", "http://cmd.camp:12345/send/yyyyy/" + RANGE.value); // verstuur de RANGE waarde naar de server
    server.send();    
}

Extra

Als je meer inspiratie wilt over het verbinden van je JavaScript aan deze en andere servers, kijk dan deze video: