Eigen apps maken

In de instellingensectie kies je in de rechterkolom Eigen apps om de lijst van eigen apps te openen die je gecreëerd hebt. Je kunt eigen apps toevoegen, bewerken en bestaande eigen apps verwijderen, voorop gesteld dat ze niet in gebruik zijn.

Hoe het werkt is dat je je eigen Javascript code schrijft om gegevens uit de online bron te transformeren naar één of meerdere "artikelen". Een "artikel" komt overeen met een nieuwsartikel en kan ofwel één voor één bij elke paginaverversing worden weergeveven of als een lichtkrant van meerdere opeenvolgende artikelen.

Basiseigenschappen

Je begint met het configureren van een aantal basiseigenschappen. Sommige hiervan vormen de kern van de app, hetgeen betekent dat ze niet kunnen worden aangepast door de eindgebruiker. Andere basiseigenschappen kunnen wel worden aangepast door de eindgebruiker en de waarden die je hier configureert zullen de standaard waarden zijn in de paginaontwerper.

Geavanceerde Opties

De geavanceerde opties sectie geeft je een aantal specifieke parameters die je nodig kan hebben op je app correct te laten werken.

Transformatielogica

Transformatielogica wordt geschreven in de programmeertaal Javascript. Er zijn een aantal basisobjecten en functies beschikbaar die het mogelijk maken om de gegevens uit de gegevensbron op te maken. Hoe je correcte transformatielogica schrijft lees je in de transformatielogica gids.

App-specifieke Eigenschappen

Naast de basiseigenschappen kun je ook je eigen app-specifieke eigenschappen maken die je kunt gebruiken in het webadres van de gegevensbron, alsmede je transformatielogica. Hierdoor kan de eindgebruiker het gedrag van de app aanpassen wanneer deze op een specifieke pagina wordt gebruikt.

App-specifieke Eigenschappen Maken

Elke app-specifieke eigenschap wordt gedefinieerd door:

1. Type: definieert primair de manier waarop de eindgebruiker de eigenschap in de paginaontwerper kan configureren:
   1. boolean: staat voor een waar/onwaar waarde (true/false) die kan worden geconfigureerd met een selectievakje dat aan of uit kan worden gezet
   2. enumeration: vertegenwoordigt een lijst met selecteerbare opties. Het formaat van de selecteerbare opties is [waarde1,label1],[waarde2,label2],...(etc.), waarbij de waarden de enige dingen zijn die je gebruikt in het webadres en de transformatielogica. De labels worden alleen getoond aan de eindgebruiker wanneer hij de app configureert. Over het algemeen wil je dat waarden en labels uit letters (en mogelijk cijfers) bestaan. In dat geval moet je ze tussen aanhalingstekens plaatsen. Bijvoorbeeld ["NY","New York"],["LA","Los Angeles"], ["SF","San Francisco"] toont de eindgebruiker een lijst met drie namen van steden. De code van de geselecteerde stad is beschikbaar in je app. De standaard en test waarden moeten niet binnen aanhalingstekens worden geplaatst, dus je kunt gewoon (b.v.) NY invullen.
      Je kunt de gebruiker ook meerdere opties laten kiezen. In dat geval zijn de default en test waarden gewoon een door komma's gescheiden lijst, bijvoorbeeld NY,LA.
   3. integer: staat voor een getal tussen een minimum en een maximum dat kan worden geconfigureerd met zowel een schuifregelaar als een invoerveld
   4. string: staat voor een reeks letters en/of cijfers dat kan worden geconfigureerd met een invoerveld
2. Naam: het exacte label dat in de paginaontwerper wordt weergegeven wanneer de eindgebruiker de app configureert
3. Standaard: de standaardwaarde die de eigenschap heeft wanneer deze niet expliciet is geconfigureerd
4. Test: dit wordt alleen gebruikt voor het testen van je transformatielogica op de pagina voor het maken van je eigen app.

App-specifieke Eigenschappen Gebruiken

Je kunt aan app-specifieke eigenschappen refereren door hun "camelized" naam. Dit betekent dat de naam als volgt wordt getransformeerd:

1. de eerste letter wordt een kleine letter
2. als de naam uit meerdere woorden bestaat (gescheiden door spaties, streepje of underscore), dan worden ze samengevoegd waarbij elk woord beginnent met een hoofdletter

Bijvoorbeeld:

"Locatienaam" => "locatieNaam"
"CODE" => "cODE"
"App-specifieke eigenschap" => "appSpecifiekeEigenschap"

In Het Webadres

In het webadres van de gegevensbron kun je een eigenschap opnemen door deze in dubbele accolades te plaatsen: {{locatieNaam}}.

Bijvoorbeeld:

https://api.geonames.org/SearchJSON?placename={{locatieNaam}}&username=demo

In het geval van een multi-select enumeration eigenschap is de waarde een door komma's gescheiden lijst van gekozen opties.

In De Transformatielogica

In de transformatielogica kun je naar de eigenschap verwijzen via het app.props-object, op de volgende manier: app.props.locatieNaam.

In De Aanvraagtekst Request Body

Je kunt de app-specifieke eigenschappen in de aanvraagtekst verwerken op eenzelfde manier als in het webadres: door deze in dubbele accolades te plaatsen. Maar dit gaat zelfs een stapje verder: je kunt je aanvraagtekst als een Mustache template schrijven, wat je extra mogelijkheden geeft, zoals conditioneel renderen van tekst.

Dynamische Waarden Met Code

In sommige gevallen is een vooraf ingestelde waarde niet voldoende en moet je een dynamische of berekende waarde meegeven in een verzoek. Hiervoor kun je stukjes Javascript code gebruiken (wat ook de basis is voor transformatielogica) in zowel het webadres als de request body. De code dient geplaatst in een blok dat start met [[= en eindigt met ]]. Bijvoorbeeld:

<StartDate>[[= new Date().toISOString()]]</StartDate>

Ook meerdere regels zijn mogelijk. In dat geval is het resultaat van de laatste regel de waarde die gebruikt wordt. Bijvoorbeeld:

<AuthToken>[[=
  var key = "foobar";
  var secret = "12345678";
  var param = new Date().toISOString();
  MD5(key + secret + param); // Het resultaat hiervan verschijnt in AuthToken
]]
</AuthToken>

Handige Javascript Libraries

Twee handige Javascript libraries die standaard beschikbaar zijn in deze code zijn:

• Momentjs: voor makkelijke datumbewerkingen
• MD5: voor het berekenen van hash waarden, b.v. voor autorisatie

Zo kun je met MomentJS makkelijk geformatteerde datum en tijd strings maken:

<StartDate>[[= moment().format("DD-M-YYYY")]]</StartDate>

App-specifieke Eigenschappen In Code

Je kunt ook de waarden van app-specifieke eigenschappen in je code gebruiken, door in je code deze eigenschappen te gebruiken zoals hierboven beschreven: tussen dubbele accolades, bijvoorbeeld:

<EndDate>[[= moment().add({{dagenVooruit}},'days').format("DD-M-YYYY")]]</EndDate>

Input-/Foutcontrole

De Input-/foutcontrole sectie is standaard is ingeklapt, maar kan worden geopend en weer gesloten door op de titel te klikken. Als deze geopend is dan toont ze de laatste input die is verkregen uit de gegevensbron op een navigeerbare manier. Dit maakt het een stuk makkelijker om de juiste gegevens te vinden die je nodig hebt in je transformatielogica.

De Fouten sectie toont fouten die eventueel optreden bij het ophalen van gegevens of het uitvoeren van de transformatielogica.

Voorbeeld

In een "mini pagina" wordt de gegenereerde output vertoont, zoals deze zal uitzien bij het gebruik van de app. Als je op het Verversicoon klikt dan wordt het volgende geformatteerde bericht vertoont of de lopende lichtkrant met de geformatteerde output.

Standaard heeft de voorbeeldpagina een witte achtergrond, maar als je een app maakt met lichte kleuren om specifiek (standaard) te gebruiken op een donkere achtergrond, dan kun je de Voorbeeld achtergrondkleur kleurenkiezer gebruiken de app tegen een gepaste achtergrond te kunnen zien.

OAuth Providers

Binnen je bedrijf kun je meerdere OAuth providers configureren. Een OAuth provider is een configuratie om toegang te krijgen tot een OAuth2 app die je hebt geconfigureerd op een specifieke website van een gegevensaanbieder. Laten we bijvoorbeeld zeggen dat je toegang wilt tot de LinkedIn-API. Dan moet je een LinkedIn-account hebben waarmee je naar de LinkedIn-ontwikkelaarssectie gaat. Daar maak je een nieuwe "app" aan waarmee je namens jezelf toegang hebt tot de LinkedIn gegevens. Je hebt niet veel nodig om zo'n "app" te configureren; het belangrijkste is dat je de juiste callback URL; deze moet zijn:

https://online.monitorsanywhere.com/auth/oauth2_generic/callback

Aan de Online MonitorsAnyWhere kant moet je de onderstaande instellingen configureren: