Idea

This is an educational project where we had to consume a RESTfull API, display the content in an app and add some extra functionality to distinct your app from other apps.

I've built an app to display all this info. One tab displays an overview of available movies in the api, one tab displays an overview of people (actors, directors and producers). Each movie and person has it's own detail page with it's linked movies or people. The extra functionality I've added is a filter for the movies overview and the possibility to sign in on the app. When signed in, a user can mark movies as it's favourites. This functionality is handled by an RESTfull API I've written in Node. This API uses traileraddict.com's API to get the trailer of each movie available in the other API.

Technologies

Ionic

Ionic is a hybrid app development kit, built on Phonegap and Angular. This framework is used to create the hybrid app which is developed and tested using Android (by lack of an iOS developer key). Theoretically the app should work just fine on iOS. This app uses the default ionic layout.

Node

Node.js is a javascript driven runtime environment. By using certain packages (express, restify) this can be used to setup a webserver. I used restify to create a RESTfull api. This api is used for user management and saving favorites for each user. Also this API sends a request to traileraddict.com's API containing the title of the movie (which has been requested by the app) which then responds with an url wherefrom the trailer can be streamed. This url is passed to the app and placed in an iframe element, whence the trailer can be viewed.

Result

The following images are all screenshots of the app

The overview of movies

Movie detail page

People overview page

Person detail page

Login page with validation added

Favorites overview

Selecting favorites

Filtering movies by genre in side menu

Conclusion

Without much hassle it is possible to create a basic app with Ionic. I'm a fan!