How to build an Android or iOS mobile app from scratch using just basic web skills

Have you ever tried to build a native iOS or Android app? I have and it’s a bloody nightmare. Or was. Until now. Gone are the days when a developer would need to be able to interpret sdk’s and read thesaurus-sized books in order to get one line of code working.

In order to build a local webapp now all you need is three main things:

1. Basic web skills
2. Learn basic Git and create a github account
3. Adobe phonegap build account

Basic Html Skills

You need to be able to build a basic mobile site using the standard HTML, CSS, jQuery skills you need. If you have more complex needs for a dynamic site however you need to be able to build an API that your device will communicate with using AJAX. I will be talking about building a basic API in my next article.

Add a config.xml file to the root of your web application similar to that found here https://github.com/phonegap/phonegap-start/blob/master/www/config.xml.

Add your application icon as icon.png to the root of your web app and tweak the config.xml file as suitable.

Github Account

It’s free! Sign up on http://github.com for a free account.

If you have never used git before you can learn the basics at this link http://git-scm.com/book/en/v2/Getting-Started-Git-Basics.

Create a repository for your web app.

Add, commit and push all your web files including the config.xml file to your github repository.

Adobe build account

This is also free for your first build so it’s a good platform to test your app building skills before you purchase the ability to build more apps at an affordable $9.99/month. You can sign up here http://build.phonegap.com.

Once you have completed these steps set up your build app on your free account remembering to add in your github account to the webapp page.

Once that’s done just click the ‘update code’ button and watch the magic happen.

For iOS apps you require a developer key before it will even compile the app but for Android and Windows you can get the debug file before signing up for a developer key for testing.

That’s that then! Watch out for my next tutorial on how to build an API to communicate with your app :).