Wednesday, April 8, 2015

Getting Going with PhoneGap

PhoneGap is Adobe's free cross-platform hybrid mobile app framework. It allows you to use the web technologies that you know and love to build mobile apps. Like many open source projects PhoneGap can be a bit of a pain to get started since it also relies on other open source frameworks. If you only want to play with Ionic in the browser and you are not interested in deploying to a device, only install the mandatory components. If you would like to deploy to either Android, iOS or both, then install the listed optional components. Here is what you will need to install:
  1. Mandatory Components
    1. Git
    2. Node (includes npm)
    3. PhoneGap (npm module)
  2. Optional Android Components
    1. Java SDK 7
    2. Android Studio + the latest SDK
    3. VirtualBox 
    4. Genymotion Android Emulator
  3. Optional iOS Components
    1. XCode
Most of PhoneGap will work perfectly fine from a web browser. If that browser is Google's Chrome, you can use its built-in mobile emulator and be able to play around with PhoneGap without having to install all of the device components.

PhoneGap is delivered as an NPM module. NPM is the Node Package Manager, which is installed with Node. NPM has become a very popular way to deliver cross-platform open-source tools. This is why we need to have Node installed. None of these is difficult to install, but you will need a few hours if you plan to install everything. 

Prerequisites


You should have around 10 GB of hard disk free. Quite a bit of space will be eaten up by the Android SDK components. You should also have Google Chrome installed. Chrome is by far the best browser for mobile development. It supports remote debugging which is essential when debugging Cordova apps.


Installation Instructions


Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency. The Cordova CLI uses git internally to download assets.


Install Git
  1. Download the installation package
  2. Launch it
  3. Follow on screen instructions
  4. Complete the installation


NodeJS


Install NodeJS
  1. Download the installation program
  2. Launch the installation program
  3. Follow on screen instructions
  4. Restart machine so changes will be activated
  5. Verify that Node JS is installed: node -v
  6. (should respond with the version number)




Install Cordova
  1. Instal PhoneGap globally with the following command: npm install -g phonegap

    You may need to use the sudo command to give their root password at this point. This is expected since you are need to permit an application to be installed globally.
  2. Verify installation of PhoneGap from the command line: phonegap -v

At this point you can play with PhoneGap in your browser. If you wish to deploy apps to devices please continue with the instructions below.
Android uses Oracle's Java as its programming language and to run many of its tools. As of Android 5.0, the official version of Java used is Java 7. Be careful, lots of installation instructions will mention to only use Java 6, this is no longer true. And even though Java 8 is the current version, don't use it either, Google's instructions call for JDK 7. Also be careful not to download the Java Runtime Environment or JRE. We need the JDK, which includes the JRE. Don't bother to download the sample apps or demos, they aren't necessary.


Install JDK 7
  1. Download the installation package
  2. Launch it
  3. Follow on screen instructions
  4. Add JAVA_HOME
  5. Add Java to path


Android Studio is the official IDE for Android application development, based on IntelliJ IDEA. It has been in beta release since 2013's Google I/O. The 1.0 version was released early December 2014 and with that Google is no longer supporting the former IDE, Eclipse.


Install Android Studio
  1. Download the installation package
  2. Launch it


In addition to an IDE, Android development requires a set of tools, known as the Android Developer Tools or ADT and a software development kit or SDK. A new SDK comes out every few months. As of April 2015, the current SDK is Android 22, which supports Android devices up to version 5.1, aka Lollipop. Android 22 is installed automatically by the installation program. Currently Cordova requires Android 19 so it must be install in addition to Android 22. If you are prompted, be sure to check the box to install it. Otherwise install Android 19 after Android Studio completes its installation. Don't skip this step.

Install Android 19
  1. Launch Android Studio
  2. Click Configure
  3. Click SDK Manager
  4. Once the Android SDK Manager installs, scroll down until you see the "Android 4.4.2 (API 19)"
  5. Check the following:
    1. SDK Platform
    2. ARM EABI v7a System Image
  6. Click the install packages button
  7. Accept the license agreement
  8. Click Install


Be patient, it can take an hour or so to install the SDKs.


Genymotion Emulator
https://www.genymotion.com

Genymotion is an Android emulator which comprises a complete set of sensors and features in order to interact with a virtual Android environment. It is significantly faster than the included Android emulator. It is built on top of Oracle's VirtualBox, so you can't run it from a virtual machine. If you decided to use it, you will need to install the VirtualBox first.




VirtualBox is a powerful x86 and AMD64/Intel64 virtualization product for enterprise as well as home use. Genymotion is built on top of VirtualBox and its devices are emulated x86 Android machines.

Xcode
https://itunes.apple.com/us/app/xcode/id497799835?ls=1&mt=12

Xcode is available for free from the Mac App Store. It is the Apple tool for building iOS, Safari, and Mac apps.

Install Xcode
  1. Download the installation package
  2. Launch it

Ionic Framework Mac/Linux Install

Just in case you've been off the planet for a while and don't know what the Ionic Framework is, you are in for a treat. Imagine combining Google's JavaScript MVC framework, AngularJS with Apache's cross-platform hybrid app framework Cordova and throwing in a lot of custom-tuned CSS3 and JavaScript in order to make fast and beautiful apps for smartphones and tablets. You would have the Ionic Framework, which you can seem cooler by simply calling it Ionic. 

Like many open source projects the Ionic Framework can be a bit of a pain to get started since it also relies on other open source frameworks. But don't worry my friend, we are here to help you out. If you only want to play with Ionic in the browser and you are not interested in deploying to a device, only install the mandatory components. If you would like to deploy to either Android, iOS or both, then install the listed optional components. Here is what you will need to install:

  1. Mandatory Components
    1. Git
    2. Node (includes npm)
    3. Cordova (npm module)
    4. Ionic (npm module)
  2. Optional Android Components
    1. Java SDK 7
    2. Android Studio + the latest SDK
    3. VirtualBox 
    4. Genymotion Android Emulator
  3. Optional iOS Components
    1. XCode
Most of Ionic will work perfectly fine from a web browser. If that browser is Google's Chrome, you can use its built-in mobile emulator then you will have a pretty good way to get a feel for Ionic development without the pain of installing everything.

Ionic and Cordova are delivered as NPM modules. NPM is the Node Package Manager, which is installed with Node. NPM has become a very popular way to deliver cross-platform open-source tools. This is why we need to have Node installed.

None of these is difficult to install, but you will need a few hours if you plan to install everything. These instructions are for Mac OS X, but should work for Linux as well. If you need Windows specific instructions, please go to:



If all you want is to get your toes wet in the Ionic pool, probably the best way for you to go is with the Ionic Box. The box uses a tool called Vagrant to create a linux VM via VirtualBox and  chock it full with all of the tools you will need to build Ionic apps. All you will need to do is install VirtualBox, then install Vagrant, then download the Ionic Box and tell Vagrant to install it.


Prerequisites


You should have around 10 GB of hard disk free. Quite a bit of space will be eaten up by the Android SDK components. You should also have Google Chrome installed. Chrome is by far the best browser for mobile development. It supports remote debugging which is essential when debugging Cordova apps.


Installation Instructions


Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency. The Cordova CLI uses git internally to download assets.


Install Git
  1. Download the installation package
  2. Launch it
  3. Follow on screen instructions
  4. Complete the installation


NodeJS


Install NodeJS
  1. Download the installation program
  2. Launch the installation program
  3. Follow on screen instructions
  4. Restart machine so changes will be activated
  5. Verify that Node JS is installed: node -v
  6. (should respond with the version number)




Install Cordova
  1. Instal Cordova globally with the following command: npm install -g cordova

    You may need to use the sudo command to give their root password at this point. This is expected since you are need to permit an application to be installed globally.
  2. Verify installation of Cordova from the command line: cordova -v




Install Ionic
  1. Install ionic globally with the following command: npm install -g ionic

    Mac OS X and Linux user may need to give their root password at this point. This is expected since you are need to permit an application to be installed globally.
  2. Verify installation of Ionic from the command line: ionic -v
  3. It should respond with the current version number

At this point you can play with Ionic in your browser. If you plan to deploy to a device as an app, you need to continue. If you plan to use Ionic's View app, you don't need to continue.
Android uses Oracle's Java as its programming language and to run many of its tools. As of Android 5.0, the official version of Java used is Java 7. Be careful, lots of installation instructions will mention to only use Java 6, this is no longer true. And even though Java 8 is the current version, don't use it either, Google's instructions call for JDK 7. Also be careful not to download the Java Runtime Environment or JRE. We need the JDK, which includes the JRE. Don't bother to download the sample apps or demos, they aren't necessary.


Install JDK 7
  1. Download the installation package
  2. Launch it
  3. Follow on screen instructions
  4. Add JAVA_HOME
  5. Add Java to path


Android Studio is the official IDE for Android application development, based on IntelliJ IDEA. It has been in beta release since 2013's Google I/O. The 1.0 version was released early December 2014 and with that Google is no longer supporting the former IDE, Eclipse.


Install Android Studio
  1. Download the installation package
  2. Launch it


In addition to an IDE, Android development requires a set of tools, known as the Android Developer Tools or ADT and a software development kit or SDK. A new SDK comes out every few months. As of April 2015, the current SDK is Android 22, which supports Android devices up to version 5.1, aka Lollipop. Android 22 is installed automatically by the installation program. Currently Cordova requires Android 19 so it must be install in addition to Android 22. If you are prompted, be sure to check the box to install it. Otherwise install Android 19 after Android Studio completes its installation. Don't skip this step.

Install Android 19
  1. Launch Android Studio
  2. Click Configure
  3. Click SDK Manager
  4. Once the Android SDK Manager installs, scroll down until you see the "Android 4.4.2 (API 19)"
  5. Check the following:
    1. SDK Platform
    2. ARM EABI v7a System Image
  6. Click the install packages button
  7. Accept the license agreement
  8. Click Install


Be patient, it can take an hour or so to install the SDKs.


Genymotion Emulator
https://www.genymotion.com

Genymotion is an Android emulator which comprises a complete set of sensors and features in order to interact with a virtual Android environment. It is significantly faster than the included Android emulator. It is built on top of Oracle's VirtualBox, so you can't run it from a virtual machine. If you decided to use it, you will need to install the VirtualBox first.





VirtualBox is a powerful x86 and AMD64/Intel64 virtualization product for enterprise as well as home use. Genymotion is built on top of VirtualBox and its devices are emulated x86 Android machines.

Xcode
https://itunes.apple.com/us/app/xcode/id497799835?ls=1&mt=12

Xcode is available for free from the Mac App Store. It is the Apple tool for building iOS, Safari, and Mac apps.

Install Xcode
  1. Download the installation package
  2. Launch it

Sunday, March 8, 2015

Cross Platform Game Programming with Cocos2d-JS

In case you missed my talk at SoCal Code Camp on March 8th, on Cross Platform Game Programming with Cocos2d-JS here are the slides.