Thema: Antwerpen digitaal

De stad Antwerpen biedt reeds enkele jaren heel wat gegevens via publieke internet "services" aan onder de vorm van "datasets". Deze gegevens kan je dus vanuit een toepassing opvragen, ze worden je aangeleverd in JSON formaat en je kan deze gegevens dan gaan verwerken binnen je toepassing.

Via deze link krijg je een overzicht wat er allemaal voorhanden is. Het gaat om gegevens over bevolking, geografie, mobiliteit, toerisme, bestuur, vrije tijd, enz....

http://opendata.antwerpen.be/



Hoe je deze services vanuit de Angular toepassing moet gaan aanroepen en gebruiken zullen we kortelings in de lessen gaan aanleren, zodat je met de echte gegevens aan de slag kan.

Maar kijk ondertussen al eens rond op de site en denk al na over het/de onderwerp(en) waaromtrent je iets wil gaan maken.

Als je de services aanroept vanuit de site kan je ook al zien welke data je ter beschikking gaat hebben om iets mee te gaan doen.



Een voorbeeldje:

Ik wil een toepassing maken om aan een wandelaar de dichtstbijzijnde zitbank te kunnen laten opzoeken.

Via de rubriek 'Vrije tijd' kom ik bij 'zitmeubilair' terecht (http://opendata.antwerpen.be/datasets/zitmeubilair).

Via dit scherm kan ik de data reeds raadplegen als JSON (maar via 'de knop MAP' kan je ook al een kaart zien die dezelfde data grafisch weergeeft)

Je ziet dan dat je de locatie van elke zitbank krijgt, zowel gps coördinaten als straat en gemeente en daarnaast ook nog andere info, zoals het type bank (met leuning, dubbele bank, stoel,...). Je zou dus de gebruiker kunnen laten zoeken naar een type bank en hiervan een lijst weergeven (of ook een kaart) of aan de hand van straat opzoeken, of dichtstbijzijdende locatie,... Je kan hiervoor dan een 2e service gebruiken om afstanden te bepalen, enz..

Laat jullie creativiteit dus gerust de vrije loop. Je zal verrast zijn wat er allemaal mogelijk is !



Je kan eventueel ook al in typescript hiervoor een interface voorzien, de website http://json2ts.com/ helpt je hierbij. Deze maakt vanuit JSON data een typescript interface. Je zou dus hiermee reeds aan de slag kunnen en eventueel wat test data 'hardcoden' zoals we tot hiertoe ook gedaan hebben met de 'weer' gegevens en de 'haltes' van de lijn.



Minimum vereisten voor de toepassing (meer mag dus uiteraard altijd voor een betere score)

Je moet:

een Homescherm hebben ingedeeld in 2 delen.
Op het linkse deel plaats je een foto van jezelf (hoeft geen portret te zijn) of je team.

Op het rechtse deel geef je een intro (uitleg, handleiding,..) over je project.

navigatie (dus routing) gebruiken (met een navigatiebalk)
per teamlid minstens 4 eigen componenten voorzien (het homescherm en de componenten daarop tellen hiervoor niet mee)
minstens per onderwerp gebruik maken van 1 service (van 'opendata' antwerpen), deze maken dus het hoofd onderwerp(en) van je project
minstens gebruik maken van 1 (vrij te kiezen) andere service (bv. weerservice, afstandsbepaling,...)
gebruik maken van alle Angular aspecten tot nu toe gezien (Interpolation, Pipes, Beide directives)
gebruik maken van minstens 1 extra NPM component (mathjs, lodash,...)


De eerstkomende lessen gaan we van Angular zeker nog bekijken: "services", "attribute en Event binding" (bv. klikken op een knop opvangen in code) en "bidirectional binding" (om "input" velden uit te kunnen lezen zodat de gebruiker velden kan invullen om bv. iets op te zoeken).

Dus geen paniek als je hieromtrent nog vele vragen hebt, de komende weken bouwen we nog verder kennis op zodat je gewapend bent om de toepassing af te werken. Maar laat dat je niet tegenhouden om er alvast mee te starten !