Getting Started with PhoneGap on Google Glass

Until last December your only option as a non-Google employee for developing Glass applications was to use the Mirror API. While the Mirror API is relatively easy to use, especially as a Rubyist, it has limited functionality. Now that the GDK has been released we have the ability to do a lot more, including using Phonegap to develop Glass applications.

Getting Started

If your new to Android development your going to need to set up a development environment. The easiest way to do this is via the Andriod Developer Tools kit from here. If you are more familiar with Intellij tools Android Studio may be more appealing. At the time of this writing they are not ready for prime time and you will find yourself spending more time fighting with the tools and less developing awesome apps. Hopefully that will change in the future because I really prefer Intellij over Eclipse.

Once you have the ADT tools installed, go to the Eclipse directory and start up the Eclipse application. On a Mac you can do this from the file manager. Now go to Window and select Android SDK manager. Next go to the latest version of the Android API and install the Glass Development Kit Preview.

If this is your first time installing PhoneGap you will also want to install it. We won’t be using it directly in this example but you will want to have it when you move beyond what we have here. You can find instructions here. If your on OSX and don’t regularly do Java development you will also need to install Ant which you can get via brew

brew install ant

Right now there is are not any Glass emulators, so you will need to have a Glass device to test your code. If this is your first time doing any Glass development you are going to need to side load your app by putting your device into debugging mode. To do that swipe over to settings, tap to select it, swipe over to device info, tap, swipe to debugging and then tap to enable it.

Now connect your glass device to your computer with a USB cable. Glass should give you a prompt asking if you can trust this computer. Tap and select “Always Allow” or “Allow Once”. If everything is working correctly you should be able to use adb or the built in DDMS and see your device. To bring up DDMS, in ADT go to Window, Open Perspective, Other and choose DDMS. you should see your device in the left hand side.

Now clone the repo Google Glass PhoneGap Example and follow the directions under the “Directions” heading in the README to get your project working in Eclipse and installed on your Glass device.

If things installed correctly you should be able to select your main menu at the “OK Glass” prompt and see a menu option called “PhoneGap App”.

Changing The Menu Name

The name of the app in the glass menu is controlled by a metadata field associated with the app in the AndroidManifest.xm file IE:

<application android:icon="@drawable/icon" android:label="@string/app_name"
        android:hardwareAccelerated="true">
        <activity android:name="example" android:label="@string/app_name"
                android:theme="@android:style/Theme.Black.NoTitleBar">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
                <action android:name=
                    "com.google.android.glass.action.VOICE_TRIGGER" />
            </intent-filter>
            <meta-data android:name="com.google.android.glass.VoiceTrigger"
            android:resource="@xml/example_phonegap_app_trigger" />
        </activity>
    </application>

in our case the android:resource is associated with a file in res/xml called example_phonegap_app_trigger.xml. You can call this file whatever you want to as long as this metadata field matches the file name.

The trigger.xml file sets up the menu name value as follows.

<?xml version="1.0" encoding="utf-8"?>
<trigger keyword="@string/example_app_voice_trigger" />

Under the trigger directive we specify the phrase to use for the app name and voice command. It is done via another reference to the res/values/strings.xml file

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">example</string>
    <string name="example_app_voice_trigger">PhoneGap App</string>    
</resources>

You can change this string to whatever you want to and that will be what the voice command and menu option will be. When you develop your own apps you will probably want to change the trigger.xml file name and the name of this string to be a more descriptive variable name. The assets/www directory has all of the html, css and javascript assets for creating your app just like you would any other Phonegap app.

Useful adb Commands

As you are creating new versions of your app and need to test them you will need to remove the current version of the app from your device. The adb command is the easiest way to do this. To set up adb you will need to put it in your path. It comes as part of the SDK that comes with the ATD package. It is under the sdk/platform-tools director of the ADT tools. To add it to your path you can do something like this from a command prompt.

export PATH=$PATH:/Users/lgleason/adt-bundle-mac-x86_64-20140321/sdk/platform-tools

To list the packages you have on your device use the following command

adb shell pm list package

To remove a package

adb uninstall org.apache.cordova.example

Our example is called org.apache.cordova.example. When doing anything more than playing with these samples you should name your package to be something unique so that your app doesn’t end up sharing it’s package name with someone else’s. PhoneGap support with Google Glass is a new thing, but we are looking forward to playing with this to see how it will work as part of our Glass development strategy.