Hoe begin ik met het maken van een eigen webapp?

Om een webapp te maken en beheren kun je natuurlijk gebruik maken van de standaard webapps en de eigen ingerichte webapps die via de Web Appbuilder kunnen worden opgebouwd.

Echter, voor de creatieve gebruikers die tegen de grenzen van de aangeboden online software aanlopen zijn er meer wegen die naar Rome leiden, waarbij meer mogelijkheden beschikbaar zijn dan de aangeboden widgets van de online Web Appbuilder. Voor deze gebruiker is het ook mogelijk om zelf een webapp in te richten. Deze webapps dienen wel te worden gehost op een eigen server.

In dit artikel wordt uitgelegd hoe een basis kan worden gelegd om de webapp klaar te zetten, waarna de webapp naar wens geconfigureerd kan worden. De webapp kun je vervolgens voor algemeen of intern gebruik aanbieden via de eigen server. Het configureren van de server, zodat de webapp beschikbaar is voor gebruikers wordt in dit artikel niet behandeld.

Er kan gebruik worden gemaakt van veel verschillende webservers. Voor dit artikel is gekozen om gebruik te maken van de webserver IIS. Deze webserver wordt standaard mee geïnstalleerd met Windows, maar staat ‘default’ niet aan. Natuurlijk kunnen er ook andere webservers worden gebruikt, maar die maken veelal gebruik van een andere mappenstructuur.

Aftrap
Zorg dat binnen de machine de webserver IIS is ingeschakeld. Wanneer IIS nog nooit ingeschakeld is geweest, zal er geen inetpub-folder op de machine te vinden zijn. Wanneer IIS de eerste keer wordt ingeschakeld, dan zullen deze webserver-folders worden aangemaakt.

Hoe activeer je IIS

Installeer IIS:

1. Ga naar het Control Panel (Configuratiescherm) in Windows en klik op Add or Remove Programs
2. Klik vervolgens op Add/Remove Windows Components
3. Selecteer Internet Information Services (IIS), klik op Next en vervolgens Finish

Check of de map C:\inetpub is aangemaakt. Zo ja, vervolg dit artikel. Zo nee, neem dan contact op met de afdeling systeembeheer om IIS succesvol werkend te krijgen.

Downloaden bestanden van de webapp
De volgende stap is het downloaden van de bestanden van de default-webapp.

Ga naar www.arcgis.com en log in met je account. Wanneer je geen beschikking hebt over een ArcGIS-Online-account, dan kun je een account aanmaken op: https://developers.arcgis.com/

NB! Dit developer-account is een permanent account, je kunt hiervandaan dus je data/webmaps/feature layers hosten. Dit account heeft echter geen beschikking over users.

Na het inloggen ga je naar ‘My Content’. Voor de gebruikers die ArcGIS Online hebben ingesteld op de Nederlandse Taal zal dit zijn vertaald naar ‘Mijn Content’.

In ‘My content’ ga je naar ‘Create’.

Binnen ‘Create’ ga je naar ‘App’ en vervolgens ‘Using A Template’.

Je komt dan in het volgende scherm met templates.

Klik naar de webapp die je wilt creeeren. Voor dit artikel wordt gebruik gemaakt van de Basic Viewer. Ga naar ‘Collect/Edit Data’ en kies voor ‘Basic Viewer’. Een nieuw scherm zal openen. Klik hier op ’Download’.

Je wordt nu doorgelinkt naar https://github.com. GitHub is een Sociale Ontwikkelsite waar veel code gedeeld wordt die je kunt gebruiken in eigen code. Op de site die opent (https://github.com/Esri/Viewer) zie je de verschillende onderdelen van de webapp staan. Deze onderdelen ga je in 1 bestand downloaden via de knop ‘Clone or Download’.

En te klikken op: ‘Download Zip’

Bovenstaande actie slaat het bestand ‘Viewer-master.zip’ in de download-folder’ op je computer.

Kopieer dit zip-bestand in de folder: c:\inetpub\wwwroot en pak deze uit. De map c:\inetpub\wwwroot kan vragen om administrator-rechten. Wanneer dit zo is, dan kun je bij systeembeheer informeren hoe je toegang tot deze map kunt krijgen.

NB! Zorg ervoor dat de map eruit ziet als in onderstaande afbeelding.

De webapp staat nu op de juiste locatie klaar voor gebruik. Echter, deze moet nu nog benaderd worden via de webserver IIS. Om de webapp werkend te krijgen wordt het bestand ‘index.html’ via de webserver aangeroepen via de url:

http://localhost/Viewer-master/index.html

localhost = eigen machine (kan worden vervangen door de computernaam)
viewer-master = de folder waar de webapp in opgeslagen is. 
index.html = hoofdpagina van de webapp

De webapp zal er als volgt uit moeten zien:

Tot slot
Je kunt nu naar wens de webapp aanpassen door middel van verschillende editor-software als notepad++ of visual studio code. Open index.html en de uitdaging kan beginnen.

Voor het toevoegen van verschillende onderdelen aan de webapp kun je gebruik maken van de dijits van ArcGIS via de ArcGIS API for Javascript. Deze zijn te vinden onder de volgende link.

Wanneer je een leuke webapp hebt gemaakt kun je de code van jouw webapp ook zelf delen via https://github.com.

Wanneer je enthousiast bent geraakt, maar nog niet helemaal je weg kunt vinden binnen JavaScript ben je van harte welkom om over dit onderwerp een cursus te volgen bij Esri Nederland. De cursus is te vinden in de link: Webapplicaties maken met de ArcGIS API for JavaScript

NB! Configuratie-issues die optreden binnen eigengemaakte webapps kunnen niet voor ondersteuning bij Esri Nederland Support worden aangemeld.