Getting Ionic framework up and running on Ubuntu 14.04

Ionic is a framework for hybrid or progressive mobile app development. Throw in electron and you can get a desktop app too!

Note that this will only deal with android app development, there are likely many more steps involved with iOS.

We need the following software setup –

  • NodeJS – ionic is build using node.
  • Android SDK – to build the android application.
  • Cordova – provides access to phone APIs regardless of platform.
  • Ionic – the framework
  • Bower – manage javascript libraries within the Ionic application
  • Gulp – build scripts for your angular app.

Installing NodeJS

There are multiple ways to install node, we are going to use nvm as it is the most powerful and flexible. It takes a little longer to set up though. Follow the previous link for the long version, here’s the short of it:

sudo apt-get update
sudo apt-get install build-essential libssl-dev
curl https://raw.githubusercontent.com/creationix/nvm/v0.16.1/install.sh | sh
mkdir ~/.nvm/versions
source ~/.profile
nvm ls-remote
nvm install 0.11.13
nvm use 0.11.13
node -v

Each version of node you install has its own libraries. Some extra nvm commands:

nvm ls
nvm alias default 0.11.13
nvm use default
0    0  * * Sun root     certbot -q renew

Installing the Android SDK

You can install Android studio, but here we will just install the SDK. Firstly get the SDK downloading by going to https://developer.android.com/sdk/index.html#Other and clicking the Linux link – something like android-sdk_r24.3.3-linux.tgz. It’s a pretty big download.

While that’s happening let’s get the latest version of Java provided by Oracle.

sudo apt-get install python-software-properties
sudo add-apt-repository ppa:webupd8team/java
sudo apt-get update
sudo apt-cache search oracle-java
sudo apt-get install oracle-java7-installer

Now back to the Android SDK – I like to install it to /opt so:

sudo tar zxfv android-sdk_r24.3.3-linux.tgz -C /opt
sudo chown sam:sam /opt/android-sdk-linux -R
/opt/android-sdk-linux/tools/android

The Android SDK Manager will open, and a bunch of libs will be selected but not installed. Install them.

Once that is done you will want to create an Android Virtual Device (AVD) which is used as an emulator. In the SDK manager go Tools -> Manage AVDS , then Create. I created a Nexus 5 named nexus-5 using Google APIs – API Level 22 as the target, Google APIs ARM as a CPU/ABI and HVGA as a skin.

Now export the tool paths in .bashrc:

echo "export PATH=\${PATH}:/opt/android-sdk-linux/platform-tools:/opt/android-sdk-linux/tools" | tee -a ~/.bashrc
source ~/.bashrc

You should be able to run adb from anywhere now.

Installing Ionic, Bower, Gulp & Cordova

To install the following we use npm, the NodeJS package manager.

Bower helps organise javascript libraries used by our application and Gulp helps build the application.

npm install -g ionic bower gulp gulp-util cordova

Getting started with Ionic

Head over to http://ionicframework.com/getting-started and follow along:

ionic start myApp tabs 
cd myApp
npm install
bower install
ionic platform add android 
ionic build android 
ionic emulate android 
ionic serve 
ionic run android

Mucking About with Voxel.js

voxel_forest

Installing Voxel.js

I just discovered voxel.js, which is a web-based voxel engine that can be used to build block-based games like Minecraft. It’s written in node.js, so lets get that set up. Voxel.js requires node.js 0.8.0 or better, and Ubuntu’s repositories supply 0.6.19, so we need to set up a PPA to get the latest version.

sudo add-apt-repository ppa:chris-lea/node.js
sudo apt-get update
sudo apt-get install nodejs npm

Under Ubuntu 12.10 the node.js executable is name ‘nodejs’, I believe its ‘node’ on some other systems.

Grab the voxel hello world repo from github:

git clone https://github.com/maxogden/voxel-hello-world.git
cd voxel-hello-world
npm install
npm start

Now you should be able to check out voxel at localhost:8080. You will have be inside a crater with a couple of minecrafty types in front of you. They would be Maxogden and Substack, the voxel.js devs.

“npm install” downloads all the dependencies for voxel-hello-world. ‘npm start’ makes npm run a node js webserver, and rebuild index.js on each request using browservefy.

Note: I can only get this working in Firefox – according to Google Chrome doesn’t support WebGL with my laptop’s Nvidia FX Go5200 🙁

Switch to Perlin Noise Terrain Generation

Instead of using the predefined ‘Valley’ terrain, we can switch out to a module, such as the Perlin Noise Terrain Generator.

npm install voxel-perlin-terrain

Add the following at the top of index.js as below:

var createTree = require('voxel-forest')

Then update createGame:

var chunkSize = 32
var chunkDistance = 2

var generate = perlin({
  chunkDistance: chunkDistance,
  chunkSize: chunkSize,
  scaleFactor: chunkDistance * chunkSize / 4
})

var game = createGame({
  generateVoxelChunk: generate,
  cubeSize: 25, 
  chunkSize: chunkSize,
  chunkDistance: chunkDistance,
  startingPosition: [185, 100, 0], 
  texturePath: texturePath,
  worldOrigin: [0,0,0],
  controlOptions: {jump: 6}
})

You can muck around with the value of scaleFactor to make mountains, hills or relatively flat terrain.

Plant Some Trees

In order to generate some trees we need to include voxel-forest then add a few lines of code..

npm install voxel-forest
var createTree = require('voxel-forest')
....
// Create some trees.
for (var i = 0; i < 25; i++) {
createTree(game, {bark: 2, leaves: 3});
}

From here..

That’s probably enough for one post but jeez there’s a lot more here to play with so watch out for a followup.