Movies App

Idee

Dit is een educatief project waarin we een RESTful API moesten consumeren, de inhoud in een app tonen en wat extra functionaliteit toevoegen om onze app te onderscheiden van andere apps.

Ik heb een app gebouwd om al deze info te tonen. Eén tab toont een overzicht van beschikbare films in de API, één tab toont een overzicht van personen (acteurs, regisseurs en producers). Elke film en persoon heeft een eigen detailpagina met gekoppelde films of personen. De extra functionaliteit die ik heb toegevoegd is een filter voor het filmoverzicht en de mogelijkheid om in te loggen in de app. Wanneer ingelogd, kan een gebruiker films markeren als favoriet. Deze functionaliteit wordt afgehandeld door een RESTful API die ik in Node heb geschreven. Deze API gebruikt de API van traileraddict.com om de trailer van elke film in de andere API op te halen.

Technologieën

Ionic logo
Ionic logo

Ionic

Ionic is een hybride app-ontwikkelkit, gebouwd op Phonegap en Angular. Dit framework wordt gebruikt om de hybride app te maken die is ontwikkeld en getest op Android (door gebrek aan een iOS-ontwikkelaarssleutel). Theoretisch zou de app gewoon moeten werken op iOS. Deze app gebruikt de standaard Ionic-layout.

Node logo
Node logo

Node

Node.js is een op JavaScript gebaseerde runtime-omgeving. Door het gebruik van bepaalde packages (express, restify) kan dit worden gebruikt om een webserver op te zetten. Ik heb restify gebruikt om een RESTful API te maken. Deze API wordt gebruikt voor gebruikersbeheer en het opslaan van favorieten voor elke gebruiker. Ook stuurt deze API een verzoek naar de API van traileraddict.com met de titel van de film (die door de app is opgevraagd), die vervolgens antwoordt met een URL waar de trailer kan worden gestreamd. Deze URL wordt doorgegeven aan de app en geplaatst in een iframe-element, waarna de trailer kan worden bekeken.

Resultaat

De volgende afbeeldingen zijn allemaal screenshots van de app

Het overzicht van films
Het overzicht van films
Het overzicht van films
Het overzicht van films
Het overzicht van films
Het overzicht van films

Filmdetailpagina
Filmdetailpagina
Filmdetailpagina
Filmdetailpagina
Filmdetailpagina
Filmdetailpagina

Personenoverzichtspagina
Personenoverzichtspagina

Persoon detailpagina
Persoon detailpagina
Persoon detailpagina
Persoon detailpagina

Loginpagina met validatie
Loginpagina met validatie

Favorietenoverzicht
Favorietenoverzicht

Favorieten selecteren
Favorieten selecteren
Favorieten selecteren
Favorieten selecteren

Films filteren op genre in zijmenu
Films filteren op genre in zijmenu

Conclusie

Zonder veel gedoe is het mogelijk om een basis-app te maken met Ionic. Ik ben fan!