De Full Stack Hamburger: van prototype naar POC, naar eindoplossing

Als amateur kok die graag iets lekkers maakt viel mijn oog op de analogie tussen full stack development en het maken van een goede hamburger. Beiden moeten solide worden opgebouwd om te zorgen dat deze niet uit elkaar valt. In dit blog wil ik jullie meenemen naar hoe we van een snel prototype naar een proof of concept gaan om vervolgens een volwaardig product op te bouwen. De ‘hamburger’ die we in dit blog gebruiken is een oplossing die ik gebouwd heb om mijn collega’s te ondersteunen in hun dagelijkse werk. Hierbij hebben we de taak om in de gaten te houden of er geen kritieke fouten voorkomen op systemen en als deze wel voorkomen deze te melden in een ticket systeem. Daarnaast willen we tijdens de ontwikkeling en uitrol zo min mogelijk fouten in de gebouwde processen. Dit alles vormt de basis van deze oplossing die ik gebouwd heb om ons werk nauwkeuriger en gemakkelijker te maken.

Platform

Waar ik normaal met een geroosterde onderkant van het hamburgerbroodje begin, beginnen we nu met het platform. Het platform biedt namelijk de basis waarop we verder gaan bouwen en geeft richting voor de technieken die we kunnen gebruiken.

Voor ons prototype willen we snel kunnen ontwikkelen en testen of iets werkt. Daarom kiezen we hier voor lokaal ontwikkelen op Windows en Linux, dit vormt een stabiele basis waardoor het later makkelijker is om het op te pakken op een ander platform. Het proof of concept verbindt vervolgens de oplossingen aan elkaar in een benaderbare oplossing op een Linux omgeving. Waarbij een zekere vorm van stabiliteit verwacht wordt.

Vanzelfsprekend is een lokale machine die met een stekker uit het stopcontact of door een andere fout niet meer bereikbaar is niet geschikt voor productief gebruik. Daarom is de keuze gevallen op Amazon Web Services als platform. De services die zij bieden in combinatie met onze wensen sloot erg goed aan. Daarnaast biedt AWS met hun toolkit de mogelijkheid om meerdere platformen aan elkaar te koppelen waardoor de productie omgeving zich binnen een ander account kan bevinden dan development, test, acceptatie of quality assurance omgevingen.

Backend

Natuurlijk is een platform alleen niet voldoende om iets te draaien. Evenals dat alleen een broodje nog geen hamburger maakt. Daarom voegen we de burger toe, nu begint het geheel al wat duidelijker vorm te krijgen.

Ik heb gekozen voor Python, Docker en MongoDB als initiële backend voor het prototype. Hiermee verzorg ik een goede basis die ik door middel van source control over kan brengen in elke omgeving waarin in ontwikkel. Evenals dat we hiermee kunnen zorgen dat de test omgeving en ontwikkelomgeving genieten van dezelfde basis. Je wilt namelijk niet dat de hamburger droog wordt en gaat brokkelen. In het prototype is de doelstelling het uitproberen en testen van wat we willen. Kunnen we de connectie leggen richting bron systemen en kunnen we handmatig een controle doen op wat gebouwd is. Iets wat bij elke stap van het proces naar productief gebruik gecontroleerd moet worden.

Mijn keuze voor Python komt voort uit mijn ervaringen die ik tijdens mijn laatste studie heb opgedaan. De mogelijkheden om dit makkelijk lokaal te draaien en te testen en om de grote hoeveelheid aan modules die beschikbaar zijn maken het makkelijk om snel te ontwikkelen.

Door het gebruik van MongoDB kies ik ervoor om niet relationeel om te gaan met de data in de database. Ik wil namelijk documenten opslaan die verschillen van inhoud en deze verreiken op basis van complexe berekeningen over de bestandsinhoud waarbij de bestanden in sommige gevallen niet eens bestaan.

Gedurende de ontwikkeling heb ik nog een extra wens erbij gekregen voor de oplossing namelijk een mooie afbeelding van de oplossing die geüpload wordt. Helaas was hiervoor geen geschikte module voor beschikbaar in Python maar wel in Node.js. Zo heb ik dit ook nog toegevoegd in het prototype. Deze heb ik kunnen integreren in Python door middel van console commando’s. Niet de mooiste oplossing, maar het is slechts een prototype.

Wanneer dit initiële prototype klaar is kunnen we voortzetten op een POC. Deze POC bevat feitelijk dezelfde dingen echter moet deze een stuk stabieler zijn, we willen dat collega’s deze POC kunnen gebruiken om wensen te identificeren die zij hebben bij deze oplossing.

Hierbij breiden we onze scope van de backend iets verder uit naar Docker om te zorgen dat we de applicatie kunnen hosten op de lokale machine die ik in platforms beschreven heb.

Uiteindelijk voor het eindproduct moeten we alle bovenstaande vertalen naar de oplossingen die AWS hiervoor aanbiedt. Natuurlijk zijn er binnen AWS verschillende mogelijkheden voor de begrippen die ik hierboven heb genoemd. Een van de mogelijkheden is het gebruiken van de eerder gebouwde Docker container en deze hosten. Echter is uiteindelijk de keuze gevallen op serverless architectuur. Hierbij houd ik in het achterhoofd dat ik graag deze oplossing wil kunnen schalen en is het voor mij ook een goede en leuke oefening om gebruik te maken van verschillende componenten die ik eerder nog niet heb kunnen of hoeven gebruiken.

Databases

Als echte Bourgondiër houd ik natuurlijk van een lekker plak kaas op mijn burger, ook wel de database in onze applicatie. Onze database heb ik bij backend al gedefinieerd. Ik maak gebruik van NoSQL in combinatie met MongoDB voor het prototype en POC. Voor de eindoplossing op het Amazon Web Services platform vertaalt dit zich naar DynamoDB.

Nu is het redelijk kostbaar om grote files te uploaden, downloaden en permanent op te slaan in DynamoDB. Daarom heb ik uiteindelijk gekozen om dat soort opslag te doen op de Amazon Simple Storage Solution, beter bekend als Amazon S3. Hiermee behouden we retentie op oude bestanden en kan ik deze in de toekomst gebruiken voor een ander project. Misschien een lekkere burger saus voor over de burger als volgend project.

Protocollen en API’s

In de basis moet natuurlijk onze backend kunnen communiceren met het frontend. Om de smaken aan elkaar te binden hebben we op onze burger een mooi groen blaadje sla, rode ui en tomaat. Hierbij gebruiken we een scala aan verschillende termen om het mooi technisch te houden. Zo gebruiken we REST protocollen om te zorgen dat we onze API kunnen benaderen. De logica die in de backend leeft kunnen we op deze manier aanroepen wanneer we dat willen.

Sommige informatie over de fouten die gemeld moeten worden wordt gemonitord door de backend. Deze wil je ontvangen zodra het gebeurt, niet pas 5 minuten later wanneer er bijvoorbeeld een refresh gebeurt. Daarvoor gebruiken we Websockets. Websockets staan het toe om direct een connectie te maken tussen de server en de client zodat de client op de hoogte gesteld kan worden van actuele events. Hierdoor kunnen hoge prioriteit interfaces direct gemeld worden wanneer er een fout voordoet. Hierdoor kan de eerste lijn support direct deze fout in behandeling kan nemen zonder dat deze de kans krijgt om verder te escaleren.

Natuurlijk is veiligheid van groot belang, sommige informatie kan gevoelig zijn en daarom wil je zeker zijn dat men zich eerst authentiseert voordat zij iets kunnen zien. Hiervoor gebruiken we OAuth. Open Authorization is een standaard waarmee toegang verschaft kan worden aan gebruikers nadat zij zijn ingelogd. Hiermee kunnen we dus veilig inloggen en gebruik maken van de applicatie.

Frontend

Om de hamburger helemaal af te maken hebben we natuurlijk het bovenste broodje nog nodig. Knapperig van de onderkant, boven bedekt met wat maanzaad of sesamzaad. In ons geval hebben we gebruik gemaakt bij het prototype van wat HTML5, wat ingeladen wordt met wat informatie door middel van templating die dan ingevuld wordt door de backend.

Bij het overgaan op de POC heb ik gebruik gemaakt van wat meer JavaScript, JQuery, bootstrap en CSS. Dit komt heel mooi terug doordat deze technieken gebruikt worden voor gebruikersgemak. Bij prototype was het doel om te kijken of we het technisch mogelijk konden maken met de informatie voorziening, inmiddels bij de POC willen we gebruikersgemakken in gaan bouwen om te zien hoe daar op gereageerd wordt waardoor we nog aanpassingen kunnen maken. Zo geven JavaScript en JQuery de mogelijkheid tot mooie pop-ups, waarmee bijvoorbeeld een bevestiging gedaan kan worden en bepaalde grafische elementen mogelijk gemaakt worden. CSS zorgt er voor dat alles er goed uit ziet in combinatie met Bootstrap zodat er een uniform uiterlijk is.

Uiteindelijk hebben we de elementen die in CSS en Boostrap zitten opgenomen in een Mendix Applicatie die communiceert met de backend. Hierdoor kunnen we nu full-circle gaan met onze technieken en informatie. Doordat alles uiteindelijk samen komt. De Mendix applicatie communiceert via onze API met de database en backend die op het AWS Platform draait. Een perfecte prikker om de gehele hamburger bij elkaar te houden.

Bon appetit! Geniet van onze full-stack hamburger!

Bekijk meer relevante updates