Building a mobile app

Editorial Note: this is an older blog post written back in 2014.

Build a mobile app?  Pssh… easy! I mean how hard could it be? I’m a webmaster after all, and they don’t call us masters for nothing.  “It will be a slam-dunk,” I told myself.

After some much needed convincing that coding the mobile app was in fact doable, I dove head-first into the unknown and started my journey of building an app using Javascript, CSS and HTML.

So, where does the journey begin?  For some, they may find themselves Googling fancy words they think they need to know, like Swift, Xcode, iOS SDK, Objective-C and so on.  For me, all of that fancy stuff can take a seat in the back.  I want to get started as quickly and easily as possible.  After I can tackle easy, maybe then I can move on to fancy. 

So, no Google?  Yes Google! Always use Google even when starting. I just want you to feel excited and comfortable about getting started… not overwhelmed, so start with the basics.  With that said, I must confess that I am a Google freak.  Google is far and away the best resource a programmer has.  Hell, it is the best resource a human has. This brings me to my first tip: Google often. Before a problem presents you with a headache, Google it.  Getting a strange error?  Google it.  Got something funky going on down there? Goog… err or maybe a doc is better for that one.

Okay, back to it!

Where to start?

The starting point for me was to make a list of the skills I already had and a list of the skills I would need to learn. Writing things down always helps me remember and organize things, so tip number two is: write it down. Stay organized and make lists. Plus, if you still use pen and paper you can give your keyboard a little break.  But don’t worry, you’ll have plenty of things to type out later.

What I already had:

  • HTML5 experience – Advanced Skill Level
    •  I consider myself a champ at HTML5 and enjoy making really awesome websites that shimmer and sparkle.  Skill level – nearing expert.
  • CSS3  experience –  Advanced Skill Level
    • SASS is my CSS extension of choice and I have been loading up my sites with animations, and transitions as of late.  Skill level – advanced.
  • JavaScript experience – Beginner Skill Level
    • I’d like to claim I was more skilled, but my overuse of jQuery made me a bit lazy when it came to coding pure JavaScript. Skill level – beginner.
  • Command-line / Terminal experience – Beginner Skill Level
    • Nearly all of my projects involve some command-line work. Knowing your way around command-line is very beneficial for developers. There are tons of great command-line tools that speed up and improve your workflow.  Don’t open VIM though… that’ll be a nightmare. Skill level – beginner.

What I needed:

How are we suppose to know what skills we need before we know where to start? Google, of course.  After searching, your list is likely to look similar to mine.

  • An idea.
    • This isn’t a skill, but it is important to have.  However, I wouldn’t put too much weight on it’s importance.  Have you seen flappy birds?  The idea certainly is not as fascinating (or addicting) as the end result. 
  • Knowledge of programming language(s).
    • While you can get by with some minimal HTML/CSS knowledge, if you also know a server side language, like PHP or ASP, you can drastically improve your app’s functionality. If you do not know any languages, all hope is not lost as there are tools to design apps without knowing a drop of code. 
  • iOS Developer Account
    • Apple requires you to purchase a developer license in order to get access to their developer portal.  The developer portal lets you provision testing devices and certificates.  This step isn’t required if you plan on creating an Android only app.
  • Cordova / PhoneGap
    • This is a required component for our project. Cordova, aka PhoneGap, is useful for developers who wish to write native mobile apps using HTML5, CSS and JavaScript. I’ll cover more on this a bit later.
  • Other stuff I haven’t figured out yet
    • Hey, I’m just getting started too!  It wouldn’t be fair of me to claim a completed list, when I may want to add some things later on.  For now this list is still in development, much like my app. 

Lets start coding!

My first thought was to jump right into coding.  Bang out the index HTML page and add a whole bunch of CSS to get things moving and shaking.  I mean, that’s how you’d make a game right?  It was painfully incorrect.  This ultimately led me back to tip number one: Google. 

How to create a 2D JavaScript game

Proper SEO brought me to an article by IBM titled, Build a simple 2D physics engine for JavaScript games. There wasn’t much useful JavaScript code in the article, but the concepts explained were helpful in understanding what goes into a JavaScript based game.  You can find the article here:


The next article I stumbled upon was written by Matt Hackett of Lost Decade Games. It was an online tutorial that walks you through the basics of creating a simple JavaScript game. I didn’t read much of the tutorial (sorry Matt) only because I jumped straight to View Source right away. But they were über kind to create the sample code, thanks guys!  This code eventually became the starting point for my own JavaScript physics engine.

I got codez…..

After getting a code base I started working on my own additions.  First off, I didn’t want their silly monsters or background (sorry Matt).  I took out all their graphics and replaced some assets with my own.  This process wasn’t to painful and resulted in few errors.  Oh! – The cool thing about JavaScript games is that you can test them (mostly) right from your file browser.  Just open the index file and bam you should be able to play the game.  Actual testing should be done using Cordova and emulation but more on that later.

Cordova build

In 2011, Adobe Inc. bought PhoneGap, a popular software that used web technologies to build native apps. After the purchase they gave the codebase to the Apache Foundation where it was to remain free and open source. Currently, Cordova and PhoneGap are identical pieces of software.

At this point, Cordova was tested and working on my machine. The Cordova docs are very straight forward and they go over the installation process thoroughly.  I only had a few hiccups during setup, mainly when I added the Android platform. Actually, installing the emulators wasn’t fun either.  Finally I was able to run cordova build and open the project in Xcode.


Well no, not really…  BUT! I have something moving; things are happening; this is the beginnings of a game, albeit a glitchy one.

Check out the project and grab all my source code at:

Controlstap to move side to side  – and –  tap and hold to launch upwards

The blue blocks are good for your ship, but stay away from all the other blocks – they do damage and slow you down.

Keep in mind I am still toying with this code and by no means is it finished (or any good).  I would love to make everything run a bit smoother and start adding sound effects and levels.

Stay tuned for more.

tagged under:
web development, javascript, html5, css
A Metalsmith Website UP NEXT Build it, but will they visit?