How to build Android apps online.

Please note: The process described below could be used to develop apps for both iOS and Windows Phone 8, as well as Android, but as I don't use either of those platforms I wouldn't be able to explain the installation process, once the project had been built.  That's the only part that differs though.  The setup described here is totally platform independent.

I recently got myself a Chromebook and, as a developer, immediately found that there were things I couldn't do with it.  I certainly wasn't going to be installing Visual Studio or Eclipse on it.  Sure, I could have installed Linux on it, but I bought it purely to experience Chrome OS so that wasn't going to happen.

I'd used Cordova to create Android applications in the past, as my most relevant development experience is HTML, CSS & Javascript.  It meant that I could build apps immediately, without having to learn the Java framework and the UI aspect of Java apps (which is totally alien to me as a long-time Windows developer).

I'd also come across Adobe Phonegap Build before, which is an online service where you can build apps for the major mobile platforms.  You can point it at your GitHub account and it will allow you to build directly from the source code hosted there, which is very useful indeed!  All I needed to do was use PhoneGap instead of Cordova, and at the moment they're pretty much identical.

The last part of the puzzle was to find an online IDE that allowed me to update GitHub with my changes.  That's where Cloud9 came in.  It's exactly what I needed.

In order to get any of this working, you'll need accounts at GitHub, Cloud9 and Adobe PhoneGap Build.  Thankfully, you can sign in to the latter 2 with a GitHub account, so there's actually only 1 account required.  Go to GitHub and sign up there...

http://www.github.com

Once you have an account, go to the other 2 sites and log in using your GitHub details...

https://c9.io/

https://build.phonegap.com

Now you're ready to start building your first app.

I found a template PhoneGap project on GitHub and forked it to my own repository.  Obviously you can make your own or find something different (Google is your friend), but here's the one I used...

https://github.com/phonegap/phonegap-start

Go to that page, click the "fork" button at the top right and you've got your own copy.  I renamed mine to PhonegapTemplate, but it's up to you what it's called - it's neither her nor there.

Once you've done that, open Cloud9 IDE, go to the dashboard and click the big green button that says "create new workspace".  You'll get a dropdown with 2 options in it - select "Clone from URL".  In there you need to paste the URL of your template repository on GitHub (right-click the repository name and copy the link address).  Select "Custom" from the boxes below.  The first time you do this it will automatically take the repository name as your project name.  For any future projects it won't let you use the same name again and you should then be told to "Change workspace name".

Once the workspace has been created, highlight it and click "Start editing".

At the moment you have a copy of the template, but it is still linked to the original in GitHub.  We need to create a new repository and link the workspace to that.  To create the repository go back to GitHub and click the "Repositories" near the top of the page.  Click the "New" button and enter a name and, if you want to, a description, then click the "Create repository" button.  (I tend to use the same name for the workspace on Cloud9 and the repository on GitHub, purely so I know they're the same thing.)

On the new repository page, near the bottom of the right-hand menu you'll see an input box that says "SSH clone URL" above it.  Click the button to the right of that.  It copies a link to your clipboard that you'll need in a minute.

Go back to Cloud9 and, in the terminal which should be open at the bottom of the screen, enter the following...

git remote set-url origin **Paste the previously copied text here**

So, for example, I would do something like this...

git remote set-url origin git@github.com:johncmolyneux/phonegaptest01

That links your new workspace to your new repository, rather than the template repository that you got it from.

Then all that's left to do is to push your code to GitHub, which you do by entering the following command in the terminal...

git push -u origin master

That's it for Cloud9 and GitHub (for this example, anyway).  Go to Adobe PhoneGap Build next and we can build the application.

If it doesn't take you directly there, go to the apps page and click the "new app" button in the top-right.  Click the box in the right of the input that says "find existing repo / paste .git repo" and select your project from the dropdown.  That will download the source from GitHub to the build server, and add it to your app list.  Once that's finished and it's ready, you should see a button saying "Ready to build".  Click that and the build process will begin.  Once it's complete you can simply click the Android icon under the app to download the apk.  I usually open that page on my phone to make it easier to download and install it, otherwise you need to copy it from your computer to your phone.

And that's it.  You've built an Android application online, without the need of Java, the Android SDK or Eclipse/ADT.  As long as you have an internet connection you can now build apps to your heart's content on any device.



You'll obviously need to make changes to your apps whilst developing them, and will need to reflect these changes on GitHub in order to build them.  When you've finished your changes and want to build, enter these commands in the terminal in order to update your GitHub repository...

git add .git commit -m "Enter a description of what you're committing"
git push -u origin master

Then when you go back to Adobe PhoneGap Build, click the "Update code" button on your project and select "Pull latest".  That will get the latest version of your project and automatically start the build process.  Just install as you did before to see your updates.


A final note, more for myself than anything - you can manually create the new repository on GitHub using the terminal window in Cloud9, using the following command...

curl -u 'username' https://api.github.com/user/repos -d '{"name": "REPO-NAME", "description": "REPO-DESCRIPTION"}'