Trumpulse: My First Hybrid Mobile App

Creating apps with web technologies has never been easier.

So what is Trumpulse, anyways?

Simply put, Trumpulse is an Android app that pulls news from various data sources and presents it in a clean and user-friendly package.

The idea started at the Union Square Barnes and Nobles when, while with my friend Divina Li, we had both wondered if there were any Trump-related headlines we had missed and immediately recognized the need for a standalone app that does just that. After playfully discussing the idea, it became clear that this was something worth a second thought. Pretty soon, I was hard at work on building it.

So how’d I build it?

I knew from the start that I wanted to use web technologies. I’ve already written native apps before, for both Android and iOS, so I wanted this time to be different. I wanted to write the code once and target multiple platforms. After concluding that I wanted to use Cordova for the project, the only thing left was deciding if I was going to code this in plain JavaScript, jQuery, or something fancier like Angular, React or (insert your favorite front-end library here).

I chose Angularpre-2.0 Angular.

For a single-page application, it does the job well.

Now here me out. Despite now being outdated, I don’t think that decision in 2017 was insane. I wanted my library to handle as much as possible, so I can focus on just building the app. For an app like this, that just meant it needed to handle routing between views, have a built-in templating engine, and perform clean AJAX calls. Angular 1.X fit the bill and so I stuck with it. Having very little experience with component-based development at the time, using Angular 2.0 would have resulted in a much steeper learning curve and a longer development time. Angular 1.X made creating a single-page application easy.

Talk is cheap. Show me the code.

The magic in the app is really ultimate in a single line, and not even Angular-specific.

<script src="http://alanmorel.com/trumpulse/data.php"></script>

If you go directly to that url, you should see a JavaScript variable containing all the data the app needs, all in one place. This means that navigating around the app is buttery-smooth and also means the server isn’t bombarded with requests that otherwise could have just been merged into a single one.

So you got all the data, now what?

This is where Angular comes into play. Using Angular controllers and scope, it became trivially easy to build out the app. Here is all the code it took to render the main menu, news source view, all-sources view, Twitter view, and Facebook view.

Since I already had the data pre-loaded, each controller only amounted to 2–3 lines of code each. All I was doing was assigning data to the scope, so that Angular can iterate over it and build out the structure. How cool is that? That’s all I needed to do and Angular, with it’s nifty templates, took care of the rest.

Deployment

Okay so, by now, I had a fully-functional web app written using Angular, and styled with custom-written CSS. Now what?

That’s where Cordova comes into play. If you ever wondered how complicated turning a web app into an Android (or iOS app), wonder no more. It was as simple as a drag and drop.

You should try it.

All you need to do is drop your working web app into the “www” folder, and run the build command after you’ve edited the configurations to your liking. That’s literally it.

Conclusion

The journey from idea to app for Trumpulse was a valuable one to me as a front-end engineer. I was new to both Angular and Cordova, after all. But after launching the app on the Google Play store, I can definitely say it has made me a better developer as a whole.

With phone hardware getting better and better, the focus on pure performance at the cost of development time and maintainability is no longer as needed, especially for apps this simple(there are exceptions, of course).

Turning web apps into phone apps is getting increasingly more popular, and I saw first-hand why. It was straight-forward to build. You aren’t locked down at all with respect to what library or framework you want to use. If you get get it to work in your browser, it was good enough to be turned into a phone app.

If you’re somewhat already familiar with HTML, CSS and JS, and dream of making your own phone app, well, dream no longer.

Make those dreams come true.

If you’ve enjoyed this post, make sure to clap like you’re happy and you know it. Additionally, if you’d like to see more in the future, make sure to follow me!