The Mobile App Hackathon Quickstart Guide


Posted on

Ever been to a hackathon wanting to come out with something published on one of the mobile markets? With this tutorial, I hope to provide you with some tools that can help you get up and running in just a few minutes. Using PhoneGap and Angular, I’ll get you started with a cross-platform mobile app that you can use to apply your own ideas.

For a completely native iOS app, see Kunal’s Hackathon Guide to Building Your First iPhone App.

If this is your first introduction to Angular, the great front-end MVC framework for JavaScript, you might check out this basic Angular tutorial first. Angular contains tools for animations, routing, templating, and other kick-ass features. In this tutorial, we will touch a little on routing and services as a way of gearing up for a full sample app in the next post in this series.

The Tools

Set Up

Let’s get started! You will want to have either iOS or Android emulators ready, because PhoneGap creates native apps that can run on the platform you choose. The easiest way to get your development environment set up is to install npm, the Node Package Manager. After that, run the following command:

$ sudo npm install -g ionic phonegap

This will install both PhoneGap and Ionic CLI tools. Afterwards, we can run the following commands:

$ ionic start tutorial
$ cd tutorial
$ phonegap run ios --emulator

You should see a sample application pop up in the emulator. If you browse the source in the www directory, you will find extensive documentation on how it works.

Notice that the Ionic generator generated everything you needed to deploy a mobile app. For now, just worry about the www directory. My recommendation for fast development is
to either set up a reverse proxy to that folder or use Python’s SimpleHTTPServer module. In my personal setup, I have the following alias:

$ alias serve='python -m SimpleHTTPServer 3000'

Basic app in an emulator

Then just visit the address and voilà. Same application, running on your browser.

Angular Basics

$routeProvider is Angular’s router. It’s a third party module that doesn’t come in the Angular core but Ionic already included it for us.

$routeProvider.when('/home', {
templateUrl: 'templates/app.html',
controller: 'AppCtrl'
});

Whenever a request is performed to ‘/home’, Angular will render the app.html template. It will also bind AppCtrl to the DOM of the template. This is pretty cool since it gives us the ability to have multiple controllers per page–each controlling a single part of the view. Talk about modular code.

Now, where would this template be rendered? Easy. Adding the following line in your body will tell Angular where you want to see that view.

<ng-view></ng-view>

Angular also has the concept of Services. These can be custom and easily injected into different modules thanks to Angular’s Dependency Injection.

Next Steps

Here’s a preview of the Service we will be using on the next part of the tutorial.

service('Playlist', ['$http', '$q', function ($http, $q) {
return {get: function (params) {
var deferred = $q.defer();
$http.get('http://hypem.com/playlist/' + params.playlist + '/all/json/' + params.pagenum + '/data.json')
.success(function (data) {
deferred.resolve(data);
})
.error(function(data) {
deferred.reject(data);
});
return deferred.promise;
}};
}]);

Breaking it down, this Service is called Playlist. Using Angular’s DI we imported $http and $q services. Service Inception. With them, we get a Hype Machines’s playlist data and return it in a callback. The Playlist service is now ready to be injected into any other module.

At this point you should have at least the following files:

In the next part of this series, we will build a music player that pulls songs from Hype Machine’s Popular Playlist for Android and iOS. The end result will hopefully look like this:

Music player using PhoneGap and Angular

Stay tuned for the second part of this series, where I show how to build the music player above. In the meantime, please reach out on Twitter with questions or comments about this tutorial. Also, quick shout-out to Cesar Andreu for being so awesome and helping me out with this first part!


Puerto Rican and hackNY '13 fellow. Always looking to hack/experiment something new. You can follow me @elbuo8

One thought on “The Mobile App Hackathon Quickstart Guide

  1. Pingback: Hack a Mobile Music Application With Angular

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>