First Google Glass App – Part 7 – Bridge to Glass App GDK Development

Before jumping into Glass dev, let’s understand how to create a Hello World project in Android Studio (AS) and run it on our device.

  1. Create New Project
  2. Get to know the guts
  3. Add Imports
  4. Add Code
  5. Tweak guts
  6. Run on Device

Create New Project

When you select New Project from the File Menu, you get this Wizard screen:

Android Studio Beginner App Development by Marcio Valenzuela Santiapps.com
Android Studio Beginner App Development

Fill in the Application Name in a natural language and the Module Name without spaces.  Make sure to select API 15 for Minimum and Target SDK but Glass Development Kit Sneak Peek for Compile with.

Click Next and in the next screen just leave everything as is (the launch icon selector screen).

Android Studio Project Launcher Icon Window by Marcio Valenzuela Santiapps.com
Android Studio Project Launcher Icon Window

After that screen, leave the Blank Activity option selected and again click Next.

Android Studio Project Blank Activity Window by Marcio Valenzuela Santiapps.com
Android Studio Project Blank Activity Window

Finally in the Activity Name, leave MainActivity.  In the Layout Name leave activity_main but also copy that activity_main over to the Fragment Layout Name, replacing fragment_main.

Android Studio Project Layout Window by Marcio Valenzuela Santiapps.com
Android Studio Project Layout Window

Everything else stays as is and Click Finish.  The reason for this last bit is that new in Android is this concept of Fragments.  This just complicates things for us at the moment so we will leave it out for now.  We must also remove the MainActivity.java fragment method later.

Android Guts

Let’s familiarize ourselves with this screen:

Android Studio Layout Google Glass Development by Marcio Valenzuela Santiapps.com
Android Studio Layout Google Glass Development

Let’s review these 10 top pointers:

  1. Your Java Classes or Android Activities
  2. Layout files in xml format
  3. Value files for storing global settings of sorts
  4. AndroidManifest is a sort of Central Registry
  5. Top level build.gradle file
  6. Low level build.gradle file
  7. Tab bar for displayed files
  8. Sync Gradle file button
  9. Run button
  10. Green = A-Ok button!
Take some time to explore these files.  If you have gone through the tutorial at:
 
http://developer.android.com/training/basics/firstapp/index.html
 
You will be familiar with these pointers.  Otherwise, let’s take a closer look.
 
MainActivity is selected and displayed in the editor window.  This contains your default, boilerplate/template created MainActivity Class required for any app.
 
The layout folder contains your activity_main.xml file.  If you look inside that file you will see an xml file with some parameters and a TextView element.  You will also see a graphical representation of it off to the far right.
 
The values folder contains more xml files.  Most importantly, the strings.xml which contains global references to string values.  These are used throughout the app to assign string values where needed.
 
The AndroidManifest.xml file contains some general settings elements for your app such as the package name, launcher icon, activity tags which contain your declared activities and in this case, if the activity has an intent, which is like an action, it must also be specified here.  In our case we will add a Voice Trigger intent filter if there isn’t one already.
 
Build.gradle files are not to be messed around with much.  This is a new M.O. used by Android Studio to organize files in a workspace.  You must keep in mind here that there is a Top level and Low level build.gradle file so make sure you know which one you are being told to put things in.
 
The tabs display whatever files you have double clicked on the File Window on the left.
 
The Sync Gradle button is that green-blue circle with a solid circle inside and a green arrow pointing down.  Go Figure!  Its basically a sort of I’ve-made-some-changes-to-the-AndroidManifest-and/or-other-project-wide-parameters-which-require-project-workspace-reindexing (phew) button!
 
The Run button is of course the one used to build and launch the app in the emulator or device.
 
The Green=AOk button tells you all file and project inconsistencies have been resolved and that the project will build and run.  Sometimes you have resolved coding issues and this box is still red.  Just tap on the Sync Gradle button mentioned before and Just Like That, Its Magic…AOk!
 
Great now let’s look at some code…
 
Imports
 
If you expand the imports “+” sign in the MainActivity window’s left edge, you will get a list of what imports a project comes with.  Let’s just make sure they look like this:
 

import android.app.Activity;
import android.os.Bundle;
import com.google.android.glass.app.Card;

The last import as you can see is what allows us to create a Card instance, which is what Glass apps are based on.  This is what you put your info into in a Glass app.

Code

Next, simply add this method inside your public class MainActivity extends Activity statement:

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

Card card = new Card(this);
card.setText(“你 好 吗”);
card.setFootnote(“santiapps.com”);

setContentView(card.toView());
}

Here we are creating a new card, setting its text and footnote properties and setting its view to the Activity’s ContentView or the main view.

Voila!  Connect your Glass to your USB port, make sure to set it to Debug Mode ON and Run the app.  It will build and install on your Glass.

Tweak

Now let’s tweak it.  In your AndroidManifest, declare this intent by making that file look like this:

<?xml version=”1.0″ encoding=”utf-8″?>
<manifest xmlns:android=”http://schemas.android.com/apk/res/android”
package=”com.santiapps.glassapp” >

<application
android:allowBackup=”true”
android:icon=”@drawable/ic_launcher”
android:label=”@string/app_name” >
<activity
android:name=”com.santiapps.glassapp.MainActivity”
android:label=”@string/app_name” >
<intent-filter>
<action android:name=”com.google.android.glass.action.VOICE_TRIGGER” />
</intent-filter>
<meta-data android:name=”com.google.android.glass.VoiceTrigger”
android:resource=”@xml/voice_trigger” />
</activity>
</application>

</manifest>

I’ve pasted my entire file here so as to clear up as much as I can.  Basically you just need to add the intent-filter and its metadata elements.

Let’s make it more interesting!  As with our First Android App tutorial, let’s add some user interaction in Part 2.

Glass Development Mirror API – Part 4 – Where to start after setting up!

So you have Glass and you want to develop apps for it?

You already have an IDE such as Eclipse or Android Studio to code your apps in, you know all about adb and Droid@Screen to view your Glass screen on your computer screen!

Google Glass GDK vs Mirror API by Marcio Valenzuela Santiapps.com
Google Glass GDK vs Mirror API

Well you do have options, before jumping into your typical Hello World Glass app.

As with other platforms like iOS, you have the option of native apps and web based services apps.  This last option is basically an app that runs on a server(s) and interacts directly with your device (be it Glass or iDevice) by sending it information.

Native – GDK – Apps

These are the ones that you code for in Android and install on your Glass device.  These are covered in the Hello World Tutorials for Glass elsewhere on this site.

Web Based – Mirror API – Glassware

These are web based apps.  They will be the subject of this post for today.

If you don’t know much about web services, you have come to the right blog!  I have some experience with web services, which just means writing applications on a server, usually in php or python.  I barely picked up some php a few years back, so I feel sorta comfortable with it.  So if you go to:

https://developers.google.com/glass/develop/mirror/quickstart/index

You will see this is a Quickstart Project page for Glass Mirror API.  You can download a starter project in any language you feel comfortable with.  I chose php for the reason I mentioned earlier.  What a web service starter project means is, its a folder with some code files inside.  Its not like a normal Hello World project you would download for native apps where you run the project from the IDE.  In the case of software as a service apps (Saas) you usually have to do 2 things with a starter project like this:

  1. Download it to your computer and re-upload it to a server somewhere (yes, you’ll need a server or server hosting online)
  2. Modify a configurable or settings file somewhere to make it work on your server

So download the project that you feel more comfortable with.  If you don’t have a preference then Id suggest taking a free python or php course somewhere, at the most basic level, and then returning to this tutorial.

Ok so this was my first mistake.  Im not a server admin or anything close to it.  I do have a free account on a more or less sophisticated server (MediaTemple) and I thought I’d download the project and upload it to that server and run it there.  Ill make a long story short but basically after failing there, I tried Brinkter and then a free online hosting company but I always ran into trouble.  So here is the scoop:

  • You will download the project contained in a folder called mirror-quickstart-php-master
  • You would upload it to a server
  • You would configure the settings for it & run it by accessing that URL in a browser

Sounds simple huh?  It turns out I chose a php project.  The project also required sqlite which in my case was not preinstalled on my MediaTemple server.  Which meant I had two options, migrate my test account and everybody else in that account to a new server with sqlite already installed.  I was not allowed to do this for fear of extended down times and possible misconfigurations in the new server.  Or I could re-compile PHP on the entire existing server which would also cause issues for sure.  Recompile what?!  No way, that was not for me.

The easiest solution if you just want to work with Glass Mirror API is to simply run it on your local machine and worry about uploading to a production server once you have something real going. Luckily, Im on a mac.  This meant that most of the stuff I needed was already installed and I just had ton configure it to run.  Here is what I needed:

  • Apache Server – comes installed with Mavericks
  • PHP – also comes installed with Mavericks
  • SQLite – also seems to have come installed with Mavericks by virtue of PHP 5.4

Cool so I just had to:

  • Activate Apache:

Open up Terminal and type:

sudo apachectl start

To test if it works, simply point Safari to:

http://localhost

and you should get a white page with black bold letters reading:

It works!

Great!  {You can optionally customize your apache server to store files elsewhere and use virtual directories: http://brianflove.com/2013/10/23/os-x-mavericks-and-apache/}

  • Next PHP must be configured:

Again in terminal type:

sudo nano - c /private/etc/apache2/httpd.conf

This opens up a text editor called nano to use line numbers “-c” as sudo user, and opens the file httpd.conf for editing.

Scroll down to the approximate line 118 and uncomment the following line:

LoadModule php5_module libexec/apache2/libphp5.so

And approximately on line 231 add this line underneath the index.html line:

DirectoryIndex index.html index.php

Finally append this code block at the very end of  that file:

#PHP Settings
<IfModule php5_module>
    AddType application/x-httpd-php .php
    AddType application/x-httpd-php-source .phps
</IfModule>
Now you are ready to save.  Hit Control-O to Write Out the new file, then it confirms if you want to save the httpd.conf file, Hit Enter and then Control-X to Exit.
  • Code! (Quickstart project)
Almost there!  Now you just have to move that downloaded folder to MacIntoshHD/Users/youruser/Sites folder.  If the folder doesn’t exist, just create it.
Once that folder is in place you modify the config.php file with the values you get from creating a ClientID at
cloud.google.com/console
and in APIs Turn ON the Glass Mirror API and finally in Credentials create a New ClientID with these features:
Some Name of your choosing
Type: Web Application
Javascript Origins: http://localhost
Redirect URIs: http://localhost/~youruser/mirror-quickstart-php-master/oauth2callback.php

[NOTE: There may be an omitted step here, depending on your setup.  In my case, Im using the default folder for my webroot as created by Mavericks for Apache.  The original setup is that the webroot as can be seen in the httpd.conf file is “/Library/WebServer/Documents”.  This means that whatever I put in that folder will be loaded and displayed when I browse over to http://localhost.  I created a username.conf file which is placed in the /etc/apache2/users/.  That file has the following content:

<Directory "/Users/youruser/Sites/">
Options Indexes MultiViews
AllowOverride All
Order allow,deny
Allow from all
</Directory>

which basically allows me to now use http://localhost/~youruser and the files it points to are not in your /Users/youruser/Sites folder created earlier.]

Now point your browser to:
http://localhost/~youruser/mirror-quickstart-php-master/
Voila!

Google Glass & Android Series for Developers & Users

Google Glass & Android Series by Marcio Valenzuela Santiapps.com
Google Glass & Android Series

So I’ve gotten a little carried away with the Glass-Android thing.  My posts are as disorganized as my thoughts, so I thought I’d organize my posts a bit.  Here is the set of posts for Android & Glass Development as of Feb 15th, 2014:

  1. Google Glass Review – Part 1 – 什么 (shen me = what = what Glass is & isn’t)
  2. Google Glass Review – Part 2 – Pros & Cons
  3. Develop apps for Google Glass – Part 3 – Setting up!
  4. Glass Development Mirror API – Part 4 – Where to start after setting up
  5. First Android App – Part 5
  6. First Android App – Part 6
  7. First Google Glass App – Part 7 – Bridge to Glass App GDK Development
  8. First Google Glass App – Part 8 – Hello Glass!

The first 2 parts are more of a Curious George couple of articles telling people what to expect from Glass.  Everyone asks me what they are.  I end up telling people “its just a pair of sunglasses” or “its a computer” and of course they are speechless and I walk away quickly before a long discussion ensues.

The next 2 parts are for developing web service apps for Glass.  Glass can work with web based apps which run on a server and interact with Glass |OR| Glass can have native apps installed into it which it can run on.

The last 4 parts starting with First Android App and finishing with First Google Glass App, is a set of posts for learning how to create native apps for Glass.