CrowlKit - Data bewaren in de Sky

Voor een aantal zaken kan het nuttig zijn om data te kunnen bewaren voor "langere duur". Met CrowlSky bewaar je gegevens op de server, zonder dat je zelf moet achterliggende server-scriptingtalen of backend-systemen aan de slag moet. 

Opgelet: om data online te kunnen bewaren, heb je een API-key nodig.

Libraries toevoegen

Zorg ervoor dat de volgende libraries aanwezig zijn in de head van je pagina/app:

<script src="https://cdn.publihub.media/lib/crowl.datastorage.js"></script>
<script src="https://cdn.publihub.media/lib/app.js"></script>

Een opslag-element toevoegen

Vervolgens kan je één of meerdere app-storage-elementen toevoegen aan je pagina. 

<app-storage id="database" key="mijn api key" prefix="sensors"></app-storage>

Een app-storage-element kent drie attributen:

  • id: een uniek id. Dus als je meerdere app-storage-elementen aan één pagina toevoegt, dan moet je elk een uniek id geven. 
  • key: jouw API-key
  • prefix: een prefix is een naam voor een verzameling van data. Als je op verschillende plaatsen gelijkaardige data verzamelt, dan geef je die hetzelfde "prefix". Bijvoorbeeld: als je sensordata verzamelt, dan kan je die bewaren onder het prefix "sensors". Verzamel je adresgegevens, dan geef je die bijvoorbeeld het prefix "contacts".

Data bewaren

Stel dat je een game maakt en je wil de individuele scores van gebruikers bewaren, dan kan je een app-storage element toevoegen met bijvoorbeeld id "score" en prefix "gamescores". We voegen ook 2 invoervelden toe en een bewaarknop.

<app-storage id="score" key="abc123" prefix="gamescores"></app-storage>
<input-text label="Uw naam" id="name" placeholder="Vul je naam in"></input-text>
<input-text label="E-mailadres" id="email" placeholder="Vul je e-mailadres in"></input-text>
<button id="savescore">Bewaar mijn score</button>

Vervolgens kan je gegevens van een gebruiker bewaren in de databank:

id("savescore").after("click").do(function(){
  var verzendgegevens = { 
      naam: id("name").feature("value"), 
      score: 99, 
      email: id("email").feature("value")
  };
  terminal(verzendgegevens);
  id("score").after("data").send({detail: verzendgegevens})
  id("score").after("result").do(function(data){
      terminal(data.detail);
  });
});

Data opvragen

Je kan met een app-storage-element ook alle data die reeds in de databank aanwezig zijn opvragen, maar ook in de data zoeken en er gegevens uit filteren.

Alle data opvragen

Alle gegevens opvragen zonder filter:

id("score").after("read").send({});
id("score").after("resultread").do(function(data){
     terminal(data.detail);
});

Zoeken op id

Elke rij in de databank heeft een uniek id. Daarmee kan je heel specifieke gegevens opzoeken. Dit kan op 2 manieren:

1. Je geef het app-storage-element het attribuut searchid geven.

<app-storage id="score" key="abc123" searchid="2" prefix="gamescores"></app-storage>

2. Je zoekt op id via KitCode:

id("score").after("read").send({detail: {id:2}});

In beide gevallen kan je de ontvangen data opvragen op deze manier:

id("score").after("resultread").do(function(data){
    terminal(data.detail);
});

Filteren met zoektermen

Dit kan op 2 manieren:

1. Je geeft het app-storage-element het attribuut searchvalues

<app-storage id="score" key="abc123" searchvalues="naam:merckx,email:gmail" prefix="gamescores"></app-storage>

2. Je zoekt via KitCode:

id("score").after("read").send({detail: {naam:"merckx",email:"gmail"}});

In beide gevallen kan je de ontvangen data opvragen op deze manier:

id("score").after("resultread").do(function(data){
    terminal(data.detail);
});

Data visualiseren

Een tabel

Als je een snel overzicht wil van de gevonden data, kan je die weergeven als een tabel in een element naar keuze. 

1. Maak een element waarin je de tabel wil tonen:

<app-part id="result"></app-part>

2. Pas de resultread-code aan:

id("score").after("resultread").do(function(data){
    var html = resulttable(data.detail.resultset);
    id("result").innerHTML = html;
});

Data visualiseren op een kaart

Bekijk CrowlKit - Maps https://www.leerschool.be/readpublication/crowlkit/26

Volgende pagina