Cloud9 Free + Ionic Compiler + Hot Push + Weinre debuger | Chapter I

Some times you need to focus in developing your hybrid app fast and you do not have time to deal with mechanical processes.

Why this workflow?

My computer sucks. I burn the charger and it explodes.
I use my girlfriend computer since, but it suck as well.

You don’t need to be in the same situation, but I swear you, web tools like Cloud9 will replace yours and everybody rig some day. To have your work machine in the cloud is pretty useless. Not!

Why are you reading this? You are sick of trying to configure your work enviroment to compile your android applications ?
You readed Ionic and Hot push and you smiled ? Maybe the Weinre thing ?.

Let me just explain you what I want you to know for the end of this chapter.

I want you to be able to work with your Ionic / Cordova / Phonegap project and able to compile in less than 1 minute, and just compile your apk when you change some plugin or project configuration. I want you to be most of the time focused on developing the hybrid app with your apk installed on your mobile device an refreshing every time you change your code. I want you to be able to trace your code using weinre so you have all the power of the web inspector on your side.

I just want to speed up your workflow, as I was anxious to speed up mine before.

You don’t need to spend $1k in hardware, you do need to have a fast internet conexion (Cloud9 works well with >512kbs).

Developing hybrid mobile apps should be free, you don’t even need to have a paid Cloud9 account. Yes I know, will be a little tricky, but I want to show that can be done for free.

If you came from Sublime Text and Linux enviroments this will be easy for you. If not you should at least take a quick read.

Brief!! Let’s start!

Create your Cloud9 Account

Its free, since a couple months ago you need to enter your credit card details as part of the registration process. Free VMs are limited to 512mb RAM and 2048mb Storage. Storage will be your enemy here and you need to move like if you were in the nineties. Another limitation of Free VMs is privacy. Anyone can view / interact with your VM. Believe me, nobody cares. At least you have the latest version of your multimillionaire startup project inside, and with the full name in upper case, you are safe to expose. Even if not, if you are reading this and represent the porcentage of pople who use sublime and linux, chances that you are an open source addict are high.

Create a NodeJS VM

After creation, delete everything in workspace. Left just .c9 folder.

Download and place the android sdk

Just fetch the sdk and place it in your workspace.

cd ~/workspace
wget http://dl.google.com/android/android-sdk_r24.2-linux.tgz
tar -xvf android-sdk_r24.2-linux.tgz
rm android-sdk_r24.2-linux.tgz
mv android-sdk-linux/ android

List sdk downloadable components and decide what to download

We need the minimal installation. You are a minimalistic lover? You gonna love.

~/workspace/android/tools/android list sdk — all

A good start platform-tools and build-tools. Remember those numbers.

~/workspace/android/tools/android update sdk -u — all — filter 2,4

Install some dependencies

In order to use appt as part of our compiler stack we gonna install the follow.
These are usually installed in Cloud9 Nodejs VM but maybe you like hardcore and you started from the scratch like me :).

Install Cordova CLI and Ionic Beta CLI

Ionic Beta CLI is for Ionic 2 but works the same for Ionic 1 projects plus commands and behaviour will not be deprecated soon.

npm install -g cordova ionic@beta

Fetch the Ionic project boilerplate and add hot-push

ionic start myApp tabs
cd myApp
cordova plugin add cordova-hot-code-push-plugin
cordova plugin add cordova-hot-code-push-local-dev-addon
npm install -g cordova-hot-code-push-cli

Lets try to build android and see what happen

Edit .profile and add the missing variables

There is a Cloud9 CLI called c9. ‘c9 open [path]’ will open a file using the editor.

c9 open ~/.profile

Put something like this at the end of the file

ANDROID_HOME="/home/ubuntu/workspace/android"
PATH="$PATH:$HOME/workspace/android/tools"
PATH="$PATH:$HOME/workspace/android/platform-tools"
PATH="$PATH:$HOME/workspace/android/build-tools"

Remember to close and open a new terminal.
Lets try again.

cd myApp
ionic build android
sudo apt-get update
sudo apt-get install openjdk-7-jdk

Try again !

I feel optimistic :)
First build can take a while and you are going to see how your tiny VM is about to blow.

I guess you already know it, we forgot, or I forgot, I do not want to blame you, to install the sdk platform. This one is gonna hurt our storage, be prepared.

List the sdk components again and take note of the number we need.

Meh, we are ok :)

Compiling should be faster right now, let see what happen.

ionic build android
Every good tutorial about android compiling should have a lot of BUILD FAILED moments. Optimistically speaking.

At this moment one start losing hope. Oh wait… it says aapt… what if we just paste the dependency commands again ? :)

sudo apt-get install lib32stdc++6
sudo apt-get install lib32z1
crossing fingers

When you encounter this, and you will, you are free to google to know more. We will focus in fix and continue for now.

Execution failed for task ‘:transformClassesWithDexForDebug’.
c9 open ~/workspace/myApp/platforms/android/build.gradle

Add the parameter as is shown in figure.

Try again.

After time you start to get used to it. Let‘s stop crying and google a bit more.
We need to install the support repository.

~/workspace/android/tools/android update sdk -u — all — filter 168

And now the fun part

Let’s remove some things

sudo rm -r /home/ubuntu/.gradle/caches/*
sudo rm -r /var/cache/*
sudo apt-get clean
sudo rm -r ~/workspace/android/temp
sudo rm -r ~/workspace/myApp/node_modules/*
sudo rm -r ~/workspace/android/extras

Useful command at this moment

du -h — max-depth=1 | sort -hr

Will show you the size in mb of each folder in the current directory.

At this point you need to free up as much disk storage as possible.
You can even remove some things inside the sdk folder like.

rm ~/workspace/android/platform-tools/sqlite3

Its your call. At this moment my VMs says and I make a try.

Yahooo!

Erease tip for the future. The support repository installs a bunch of packages that you may not need soon. Check the sizes and delete at discretion.

Enough talking, lets try again !.

ionic build android

Normally, at this point it works smoothly. But this time wasn’t. And I do not lie in my steps!.

Let me think. I will start deleting the android project under platforms/android. And then I build again.

sudo rm -r ~/workspace/myApp/platform/android
Magic ? perseverance!!! :)

At this point we can conclude that the change we did in the bundle.gradle was overwrited when we deleted the folder and is not present in the final version, but I wanted to show it as well because it was part of the process to achieve the whole thing.

For the next chapter, we are going to install weinre in the same VM and test the project. We also are going to code an small toolkit so we can deploy the apk by ftp, that way I going to conclude with the workflow I wanted to show you.

Chapter 2 (in progress)

Thanks and please you are free to share and comment,

Javi.