NS vertrektijden app

Het is alleen mogelijk om eigen apps, zoals de NS vertrektijden app uit dit voorbeeld, te maken als je het Bizplay Pro abonnement hebt omdat gebruik gemaakt wordt van de Eigen Apps functionaliteit die alleen in dat abonnement beschikbaar is .

Inleiding

Het is, zeker als je nog niet met de Eigen Apps hebt gewerkt, handig om eerst de pagina's over deze functionaliteit door te lezen:

• Eigen Apps Maken
• Eigen Apps Gebruiken
• Transformatielogica Gids

Daarna zal het voorbeeld zoals dat op deze pagina beschreven is, beter begrijpbaar zijn.

Achtergrond

In dit voorbeeld maken we een app die een tabel toont met de vertrektijden van NS treinen vanaf een bepaald station. De gebruiker van de app kan kiezen uit een lijst van relevante stations en kiezen hoeveel treinen in de tabel getoond worden.

De NS verstrekt de vertrektijden die in de app gebruikt zullen worden via een Application Program Interface (API). Het gebruik van deze API is gratis, maar de NS verlangt wel dat je een gebruikersaccount aanmaakt om toegang te krijgen tot deze API.

Aanmaken van een NS API account

Om een gebruikersaccount aan te maken voor de NS API kun je naar deze pagina gaan.

Doel van de app

Het doel van deze app is het tonen van vertrektijden van NS-treinen van een specifiek station. Je kunt apps als deze maken in het Eigen apps gedeelte van de Instellingen pagina. Je kunt bij het maken van de app vrij kiezen welke informatie die de NS verstrekt je wilt tonen en hoe je deze informatie wilt vertonen.

Het ophalen en verversen van de gegevens wordt automatisch door Bizplay gedaan. Jij moet zelf bepalen en beschrijven welke informatie je wilt gebruiken en hoe je deze wilt tonen. Dit doe je voor een deel met de eigenschappen die de Eigen app je biedt en deels in JavaScript code.

In dit voorbeeld is een app uitgewerkt die informatie over vertrektijden toont in een tabel. Dit voorbeeld is met kleine aanpassingen direct te gebruiken. Je kunt er hopelijk ook veel inspiratie uit halen om ook andere apps te zelf te maken die andere informatie van het internet ophalen en op jouw schermen tonen.

Als je vragen hebt over dit voorbeeld of de Eigen apps in het algemeen dan kun je ons mailen.

Creëren van de NS app

Hier volgt stap voor stap hoe je, met minimale aanpassingen, een Eigen app kunt maken die vertrektijden van treinen op voor jou relevante stations zal tonen.

Instellingen

Bij het kiezen van de naam van de app onthoudt dat deze wordt getoond in de lijst met Eigen Apps dus probeer een duidelijke naam te kiezen die niet te lang is, in dit geval bijvoorbeeld "NS Vertrektijden".

De volgende Eigenschappen kun je het beste, voor je de transformatielogica invoert, in de instellingen van de nieuwe app invoeren:

We maken voor deze app gebruik van twee Geavanceerde opties. Deze opties zijn nodig om toegang te krijgen tot de NS servers die de informatie over de vertrektijden verstrekken.

We maken voor deze app gebruik van tweeApp-specifieke eigenschappen. Dat zijn velden die bij het gebruik van de app op een pagina ingesteld kunnen worden om zo de App een specifieke uiterlijk en toepassing te geven. Om de App-specifieke eigenschappen te kunnen instellen klik je op Tonen en dan op de App-specifieke eigenschap toevoegen knop. Voor de precieze betenenis van de inhoud van de Selecteerbare opties, Standaard en Test kolommen zie de Transformatielogica Gids

De transformatielogica

De onderstaande JavaScript code voert de transformatie van de gegevens, die terugkomen van de servers van de NS, naar een tabel, die op een TV scherm getoond kan worden, uit. Het commentaar in de code licht de transformatie stap voor stap toe.

// De blauwe kleur van de NS
var nsBlauw = "#00387b";
// Een article is nodig om alle tekst die die getoond gaat wordem in onder te brengen
var uitvoer = app.createArticle();

// De titel boven de tabel met vertrektijden
var titel = "Vertrektijden treinen station " + app.props.station;
var geformateerdeTitel = app.format.alignCenter(app.format.relativeTextSize(app.format.bold(titel),1.5));
uitvoer.add(app.createParagraph(geformateerdeTitel));

// Controleer het resultaat van de request aam de NS servers op de aanwezigheid van errors
if ((app.input.error || null) === null || app.input.error.length === 0) {
  // Maak een tabel met kopregel
  var kopregel = ["Vertrektijd", "Spoor", "Vertraging", "Type", "Bestemming", "Route"];
  var geformateerdeKopregel = app.format.alignCenter(app.format.textColor(kopregel, nsBlauw));
  var kolomBreedtes = [2,1,2,2,2,2];
  var tabel = app.createTable(kolomBreedtes, geformateerdeKopregel);
  // Maak de lijnen van de tabel 2 pixels breed , NS blauw en zorg dat de tekst niet tegen de lijnen komt
  tabel.borderColor(nsBlauw).borderWidth(2).padding(5);

  // Bepaal het aantal regels dat getoond gaat worden
  var aantalRegels = app.props.aantalRegels;
  if (app.input.ActueleVertrekTijden.VertrekkendeTrein.length < aantalRegels) {
    aantalRegels = app.input.ActueleVertrekTijden.VertrekkendeTrein.length;
  }

  // Vul de regels van de tabel
  for (var i = 0; i < aantalRegels; i++) {
    var trein = app.input.ActueleVertrekTijden.VertrekkendeTrein[i];
    var tijd = trein.VertrekTijd.split('T')[1].substr(0,5);
    tabel.addRow([
      app.format.alignCenter(app.format.relativeTextSize(app.format.textColor(tijd, nsBlauw), 0.9)),
      app.format.alignCenter(app.format.relativeTextSize(app.format.textColor(trein.VertrekSpoor["#"], nsBlauw), 0.9)),
      app.format.relativeTextSize(app.format.textColor(trein.VertrekVertragingTekst || '', nsBlauw), 0.9),
      app.format.relativeTextSize(app.format.textColor(trein.TreinSoort, nsBlauw), 0.9),
      app.format.relativeTextSize(app.format.textColor(trein.EindBestemming, nsBlauw), 0.9),
      app.format.relativeTextSize(app.format.textColor(trein.RouteTekst, nsBlauw), 0.9)
    ]);
  }
  // Voeg de tabel toe aan de uitvoer
  uitvoer.add(app.createTable(tabel));
} else {
  // De request is niet goed gegaan, toon de fout
  uitvoer.add(app.createLine(app.input.error.message));
}

// Als laatste stap voegen we de uitvoer toe aan de output van de app
app.output.addArticle(uitvoer);

Vormgeving

Het is niet mogelijk een achtergrondkleur in te stellen voor een Eigen app. Het is voor deze app wel toepasselijk om de achtergrond op de pagina in te stellen op NS geel: #f7d417, je kunt deze kleur instellen als Voorbeeld achtergrondkleur om een zo goed mogelijk beeld te krijgen van he één en ander er uit komt te zien op de pagina.

Voorbeeld

Nadat alle eigenschappen en de transformatielogica ingevuld zijn is het verstandig om alles op te slaan met behulp van de Opslaan knop vooordat je de app test. Je kunt de app testen door op het knopje met de ronde pijl, naast het invoerveld Webadres van de gegevensbron, te drukken. In het vak Voorbeeld zal nu het resultaat van de app getoond worden.

Gebruik van de app

Nadat je de app hebt gemaakt en getest is deze beschikbaar onder de "Eigen Apps" in de linker kolom van de Designer.

Plaats the app op het canvas waarna je de eigenschappen van de app kunt instellen:

• kies een station uit de lijst die bij de Selecteerbare optie Station is ingevoerd.
• stel het aantal treinen ofwel regels van de tabel in.

Daarnaast zijn een aantal algemene app-eigenschappen in te stellen zoals je dat ook bij andere apps kunt doen.