UBB Generator Part 1: De Architectuur

Door Webgnome op vrijdag 25 december 2015 01:00
Categorie: UBB Generator, Views: 1.813

Dit is het eerste deel in mijn reeks om uitleg te geven over hoe de UBB Generator is ontstaan en hoe deze in elkaar zit. Het is vooral voor een showcase om te laten zien wat mogelijk is.

De applicatie bestaat functioneel gezien uit aantal onderdelen namelijk:
  • Een zoekbalk waarmee naar films / series gezocht kan worden op titel of IMDB ID
  • Een lijst van gemaakte reviews
  • Een scherm waarmee het mogelijk is een review te schrijven met support voor veelgebruikte UBB Codes
  • Een scherm waar de gegenereerde UBB Code vanaf kan worden gekopieerd met één druk op de knop
Technisch gezien is het een stukje ingewikkelder:

Het is een zogenaamde one-page AngularJS app. Dat wil zeggen dat door middel van dom manipulatie een applicatie ontwikkeld is die, vanuit een browser standpunt, vanaf 1 enkele pagina draait. Heel veel zaken gebeuren client side .Dit heeft als belangrijke voordelen dat er minder requests naar de server moeten. De requests die gedaan worden zijn alleen om data op te halen of om data op te slaan.

de AngularApp bestaat uit de volgende onderdelen

Directives

Toolbar
UbbCard
MovieCard
ReviewList

Deze losse directives hebben allemaal hun eigen controller. De uitzondering op deze regel is de toolbar. Deze wordt aangestuurd door de AppCtrl controller. De AppCtrl controller is verantwoordelijk voor de overkoepelende acties. Zoals het switchen van movie naar ubbcard en terug. Of het in gang zetten van de search en het tonen van de juiste directive.


Services

De applicatie kent een aantal services die allemaal gebruikt worden voor het aanroepen / gebruiken van de API laag.

ReviewService

Dit is de belangrijkste service. Deze bevat namelijk de functionaliteit om van de ingetypte review ubbcode te kunnen maken. Maar wordt ook gebruikt door de ReviewList directive om bij te houden welke reviews er geschreven zijn in de huidige sessie en het manipuleren van deze lijst.

MovieService
De movieservice , zoals de naam al zegt, wordt gebruikt daadwerkelijk film informatie op te halen vanuit de api. De enige twee calls die er nu beschikbaar zijn , zijn het zoeken naar en het kunnen ophalen van detail informatie.

SeriesService
Een kopie van de MovieService waarbij de endpoints anders zijn. De reden om deze los te trekken is omdat ik verwacht in de toekomst wat serie specifieke zaken toe te voegen.

PosterService
Om de Gallery pagina te kunnen tonen heb ik een aparte service in het leven geroepen die van alle opgeslagen filmposters een mooie JSON terug geeft met het imdbID en de filename. Hierdoor kan ik een mooie grid tonen van alle posters die ooit zijn opgevraagd.

StylingService
De naam is een beetje verwarrend maar deze service wordt gebruikt om de UBB tags toe te voegen aan de review.

Api

De movieservice, seriesservice en posterservice maken allemaal gebruik van de zelf ontwikkelde api. Deze is geschreven in PHP en maakt gebruik van het slim framework. Dit framework geeft je de mogelijkheid om snel een simpele rest api op te zetten. De API die opgezet is is eigenlijk een wrapper rondom de OMDB Api. De reden dat ik de OMDB API gebruik is vrij simpel. Het scrappen van de IMDB site is zo foutgevoellig dat ik het liever overlaat aan een onofficieuze JSON api die wel altijd werkt.

De Api zorgt er tevens voor dat posters niet elke keer opnieuw worden opgehaald uit OMDB maar dat ze gecached worden en getoond vanuit cache als dat mogelijk is.

Tot zover de uitleg over de structuur. In een volgende aflevering zal ik wat meer ingaan op de code van de angular kant van het verhaal.

Volgende: UBB Generator Part 2: De UI, Angular 12-'15 UBB Generator Part 2: De UI, Angular
Volgende: UBB Generator 12-'15 UBB Generator

Reacties

Reageren is niet meer mogelijk