QUESTIONS?

Updates & insights on all things CDN

Using Ionic and Node.js to Develop a MaxCDN Mobile App

ioniclogo

This is a guest blog post by Juho Vepsäläinen, an expert in node.js. 

I was tasked to develop a little mobile prototype based on Ionic Framework. The idea was to fetch a couple of values from a MaxCDN account and then display them through a mobile interface. As usual the specification grew a bit from the initial and I had my hands full of work for a while.

To get an idea of what the final prototype looks like, please have a look at the online version. It will ask you to authenticate and after that you should see some figures if everything goes right. If it doesn’t work, remember it’s a prototype. In case you want to poke it locally, have a look at the source code.

ionicapp

Ionic Frontend

Ionic is a framework that builds on PhoneGap/Cordova and AngularJS. It wasn’t terribly difficult to learn to use. Documentation is very nice considering the framework is still in alpha stage.

A good way to start is to clone ionic-angular-cordova-seed and then start poking around. You can for instance serve www/ and then begin modifying things to your liking. If you want to be more thorough, go through official Ionic guide.

Ionic provides a powerful set of components implemented using Angular directives. In this case I didn’t have to implement anything custom. Integrating with the backend and formatting the data took most effort.

Controller and Service Design

I kept my controllers simple on purpose. To give you some idea, consider the following:

The controller showing most popular files is pretty much the same and I’m sure they could be refactored even further. As you can see above most of the logic is actually within services. This made it easy to share functionality between my controllers and keep things nice and tidy.

Auth

On service level I needed to take auth flow into count. The first time you start the app there obviously won’t be any data available. We’ll need to force the user to auth somehow.

In this case we need to support both mobile and desktop flows a bit unconventionally. This lead to two different ways to auth. On PhoneGap we open a InAppBrowser, then try to detect when the auth flow has completed and close the auth window. Once that’s done we’ll have old fashioned cookie based auth in place to give access to resources. Given it is not very secure, you should not use this method in production.

I also had problems with InAppBrowser. For some reason it fails to detect when the flow has ended. There’s no nice way to do this and the way I’m using (loadstart event) seems bugged for an unknown reason. The desktop flow seems to work better but we cannot use it on PhoneGap as it relies on redirection.

As nobody likes popups we did something different on desktop. On desktop we open the auth page, pass current url to it, go through the flow and redirect back to the original url with auth credentials. After that the frontend will pass these credentials to the server as a part of header information when requesting for information. To make this more secure it would be a good idea to perform this over SSL.

The nice thing about the desktop implementation is that you can put the app anywhere and serve it as a static site. That makes it somewhat easy to deploy. Obviously you will lose all the benefits of a truly mobile app if you end up doing this.

Experiences

Building the actual user interface and implementing the logic was very easy using Ionic. Unfortunately at least in the time of writing auth is still glitchy. I can also consistently crash the app if I use it enough. A true PhoneGap master might fix the former one. The latter one might have something to do with Ionic though I have not investigated that fully. No doubt the framework will mature a lot still.

If you are interested in mobile prototyping, it might be a good idea to give Ionic at least a go. You can get something visible done fairly fast especially if you are familiar with Angular already. If not, then there’s more learning curve ahead of you.

Node.js Backend

In order to connect the frontend built using Ionic to the data itself I had to implement a backend. MaxCDN API implements authentication scheme known as OAuth 1.0a. In this case we needed to implement the three legged variant. Pro tip: don’t try to implement it from scratch.

As I like to use Node.js these days on backend side, it felt like a natural fit for this purpose. I ended up implementing an adapter for authom.

Once that was done I realized the official MaxCDN client available for Node.js doesn’t support three legged auth. Again I needed something more custom and I implemented a small subset of the API for this particular purpose. request, one of my favorite modules, happens to support OAuth so it was very easy to build the API on top of that.

Apart from authing and providing resources through which to access data the backend doesn’t really do much. There is some extra logic due to the fact that we actually have two auth flows in place but apart from that it’s simple.

Conclusion

I’m not much of a mobile developer myself and I feel more comfortable on web and graphics programming. The project had its challenges and its far from perfect. As a result we got semi-functional prototype and some experience. Ionic is still a bit young and it shows. No doubt it will mature a lot in the remainder of the year.

In case you don’t need MaxCDN Auth and just want to support some of the common providers, you could try to use services like oauth.io and Auth0. Both provide PhoneGap plugins to use and this might be a good idea at least in prototyping phase so you can focus on the hard parts.

I also recommend checking out PhoneGap Build service. It simplifies life somewhat and supports features such as hydration. That means rather than having your testers reinstall the application they need to just restart it to get the newest changes in.

I hope you enjoyed this brief overview. I’ll be available to respond your questions in the comments section below.

  • http://blog.justindorfman.com jdorfman

    Awesome job Juho. This was really fun to play around with.

    • bebraw

      Thanks. :)

  • Sindy

    Thanks for sharing your experience! We also provide mobile app development services, but our company doesn’t use ionic and node.js.

Categories

Recent Posts

  • Now Serving: Hong Kong China
  • 5 Things you can do with our Raw Logs API
  • Happy 2nd Birthday BootstrapCDN
  • Now Shipping: MaxCLI > maxcurl
  • Now Serving: Tokyo Japan

Compare the speed of two websites in 5 seconds.

100% Free

Start Testing
TRUSTED BY