Recap after building a mobile app with Ionic + Cordova + AngularJS + Mailgun + Parse + Phonegap Build

Thoughts after building a mobile app with Ionic Framework + Cordova + AngularJS + Mailgun + Parse + Phonegap Build

So I have been using a task management workflow to help collect my thoughts digitally and act on them (or not) at a later time. It is kinda like GTD (David Allen's "Getting Things Done") but not nearly as OCD. The first piece to all of this is to be able to collect something very quickly which then gets sent to my email and I put it in a folder or schedule it to come back to my inbox at a specific time (e.g. 5pm tomorrow, a week, a month). I have been using an app called Captio which I have been using for a few years and works very very well. Over time I have somewhat different needs/metadata that I want to tag when I take a note. Unfortunately the app hasn't really changed much since it's inception (which i saw on lifehacker) from it's core function: to capture text and email it to a single addres. So I decided to build my own app to replace it and add the features that I want!

For a more detailed version of my workflow, read this from last year which is very relevant: https://www.facebook.com/notes/patrick-shuff/my-task-management-workflow-captio-mailbox-boomerang/10200690531855451

Here are the functional requirements for the mobile app that I wanted to replace: 1. It needed to be able to accept some text and email it to some email address, ideally dynamically set by the user

That's pretty much it. Some of the other nice things to have: - Ideally write once, run anywhere I don't have time to learn java, Objective-C/Swift, .NET, etc, let alone the crazy UI frameworks/methodologies/terminology to build what I want. I carry an Android and iPhone so being able to run the exact same

  • Ideally requires little infrastructure to keep it up and running I'm a sys admin. I love linux. I have a VPS. But I don't really want to maintain apache and lose my application (especially if I put it on the app store) each time I decide to switch VPS providers, etc. I don't want to configure postfix and have to worry about getting blacklisted for spam. I don't want to setup and maintain MySQL. This is all stuff I did with my original iterations of this project. It worked just fine but it was definitely fragile.

  • Ideally use technologies I'm familiar with Again, I don't want to relearn something completely new to make a cross-platform application. I've done enough css/javascript frameworks (mostly jquery, bootstrap) to be dangerous and build some simple stuff to make my life easier.

  • Ideally I want to be able to use 100% linux to develop on I don't want to use a mac to build an iOS app.

With that, here are the frameworks that I eventually settled on, how I'm using them, and some background into how I reached this point:

  • Apache Cordova (http://cordova.apache.org/) I decided that I didn't want to write native code for iOS and Android. I actually did get this working on both Android and iOS using a python http server (flask) on my VPS with postfix sending out the emails but they took me a very long time to create, and looked felt like shit. It was definitely interesting to see the differences in xcode and adb (xcode was way sexier), but I decided that I should build this app in a language that I write once and deploy to multiple devices. Virtually all of my google searches brought me to Cordova or other projects built on top of it (Phonegap, Trigger.io).

Cordova provides the glue of writing html+javascript once, and it allows you to build native apps on all major mobile platforms.

  • Ionic Framework + Cordova + AngularJS (http://ionicframework.com) I have attempted this project in the last few months a few times, trying out different css/javascript frameworks, etc, trying to find a combination that I liked. The previous iteration of this that I have been using for a few months before the rewrite was written entirely in Bootstrap with a Parse backend. Ionic allows you to really easily create a new project, which bundles Cordova and some flavor of css framework into a very nicely packaged project that is immediately usable. It uses AngularJS to do all of the dynamic DOM manipulations and for the routing around the app with different URLS. When you use an Ionic app on your phone it is actually really snappy and smooth.

In my opinion the biggest strength about this framework is that it's is crazy easy to create a cordove boilerplate project with all of the proper AngularJS routing in place, and a basic demo set with some of the templating, etc. I tried several times to get into and undrestand backbone.js with cordova but I really couldn't wrap my mind around how it all worked and how to build things from scratch. I think the lack of understanding was my biggest hurdle throughout this entire project and once I got an ionic project up and running this made a lot more sense as most of the pieces were in place and I was able

  • Parse (http://parse.com) I am using Parse for the backend storage for all of the messages that I "send" that are then emailed to my inbox. The only thing I'm actually doing with Parse at this point is created a new Parse.Object.extend('Message') which has a cloud code trigger attached to it Parse.Cloud.afterSave("Messages", function(request) so it runs my javascript cloud code function that integrates with Mailgun (i'll explain more in a bit) to send the actual email. I was really really impressed with Parse Cloud code as a way for executing RPC calls that you don't trust to happen in a client context (because you have secret API keys, etc).

The biggest struggle here is integrating the Parse queries with AngularJS due to the fact that they both do some crazy asynchronous functions and you can't set any $scope variables from a Parse callback. I have no idea why this is and would love for some javascript guru to explain that to me. For my "archive" function (i.e. to see all of my previously sent messages) I had to use the Parse REST api to go back and get all of my messages. This is a real bummer.

I still need to integrate the Parse/FB login (possibly anonymous?) and some RBAC to make sure all of the messages are secured to a particular user or device.

  • Mailgun (http://mailgun.com) Mailgun is, as may be able to guess, what I'm using for sending out emails. Since I'm the only person using this right now I easily fit within the free mail tier. Their API was ridiculously simple to setup and I think the only thing that sucked was adding the proper DNS records/getting verified to prove that I own the domain (mailboxcapture.com) that the emails are coming from. This saves me from having to send out emails from my own server which i was doing when I first started this project.

  • Phonegap Build (http://build.phonegap.com) Now that I have an html5 application built, I need a way to get it on my devices. By default the ionic framework uses cordova which as I mentioned provides the cross-platform glue to run your html+js code on all platform. With that said you have to have a Mac with the xcode development environment to build iOS app. Phonegap Build comes in and drops the mic.

Phonegap build (Pb) is fucking amazing. Pb allows you to upload your Apple signing keys, Android keys, etc, and takes a .zip archive of your cordova project and churns out an .apk (Android Binary), .ipa (iOS binary), or any platform that you have proper keys for, and compiles them within a few seconds (less than 20 in most of my runs) and gives you a QR code to download them on your phone. This means that you never have to own an Apple Product (well, except to export your signing keys) and yet you can still build really nice html-based applications from the operating system of your choice and get them on your device really really easily. It is amazing.

And the best this is that it is free for 1 personal (private) project per login, but for open source projects you can have as many projects as you want. Even if you do want more than one private project it is only $9.99.


In summary, this has been an extremely fun project to work on and I plan to continue to make it better over time. Javascript still baffles me from time-to-time with being able to tell what is in scope and how similar callback situations don't work in consistent ways.

And lastly, it is truly amazing the how easy it is to build full-blown applications with all of the backend infrastructure in the "cloud". I love seeing new projects like the Ionic framework that tie together several individual awesome technologies, bundle them together in an easy interface, and make building something extremely approachable for folks that don't live and breath javascript every day. I also applaud Adobe for building Phonegap Build as they obviously found an awesome way to provide a lot of value by putting the build cross-platform build process. I'm excited to see where things are going :)

social