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 .
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:
Daarna zal het voorbeeld zoals dat op deze pagina beschreven is, beter begrijpbaar zijn.
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.
Om een gebruikersaccount aan te maken voor de NS API kun je naar deze pagina gaan.
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.
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.
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:
Eigenschap | Waarde |
---|---|
Webadres van de gegevensbron | Gebruik: https://webservices.ns.nl/ns-api-avt?station={{station}} als je de stationselectie wilt gebruiken zoals in dit voorbeeld. Als je de gegevens van één specifiek station wilt vertonen dan kun je ipv {{station}} de naam van het betreffende station invullen. |
Stijl | Single message |
Basis lettertype | Arial of een ander font dat past in stijl van jouw pagina's |
Basis tekstgrootte | 60, afhankelijk van hoe groot je de app op jouw schermen wilt vertonen |
Basis regelafstand | 130, afhankelijk van het lettertype dat je kiest |
Basis tekstkleur | kies een kleur die past bij de stijlvan jouw pagina's |
Uitlijning | Links uitgelijnde tekst |
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.
Geavanceerde opties | Waarde |
---|---|
Basic auth. gebruikersnaam | Vul hier de gebruikersnaam van jouw NS API gebruikersaccount in. |
Basic auth. wachtwoord | Vul hier het wachtwoord van jouw NS API gebruikersaccount in. |
Authorization header | Deze kan leeg blijven |
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
Type | Naam | Selecteerbare opties | Standaard | Test |
---|---|---|---|---|
enumeration | Station | ['Utrecht','Utrecht'],['Amsterdam','Amsterdam'],['Den Haag','Den Haag'],['Den Bosch','Den Bosch'] | Utrecht | Amsterdam |
Type | Naam | Minimum | Maximum | Standaard | Test |
---|---|---|---|---|---|
integer | Aantal regels | 1 | 10 | 5 | 5 |
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);
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.
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.
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:
Daarnaast zijn een aantal algemene app-eigenschappen in te stellen zoals je dat ook bij andere apps kunt doen.