Google Glass Tutorial Sends Email Visually


Posted on

I have been spending a lot of quality time with Google Glass and Android lately. I’ve already shared a few of those experiences, like sending trackable email on Google Glass using its Mirror API and my Android email tutorial. Most recently I have been working on a native “Glassware” app, which I’d like to share here.

Android/GDK Glassware

Using the Google Glass GDK I’ll show you how to:

  • Create native Glassware (Glassware is the name Google has given to apps running on Glass)
  • Activate and interact with your Glassware by voice
  • Use menus to edit your Glassware’s data
  • Manipulate Cards in an Immersion
  • Send email using the SendGrid Java library

If you experience any issues with the source code or this tutorial, don’t hesitate to contact me, I’m happy to help.

Now, Let’s Get Hackin’

Let's Get Hackin'

You’re probably ready to jump in, but before we start, you’ll need to follow prerequisites to get the most out of the tutorial:

Quickstart: Try the App Out on Your Device in Minutes

I recommend you start here so that you can see the finished project in action; otherwise, you can watch the following video.

  1. Complete the GDK Quick Start.
  2. Clone the example code into your project.
  3. Get a SendGrid account.
  4. Rename UtilsDEFAULT.java to Utils.java.
  5. Update the username, password and from_address variables in Utils.java.
  6. After compiling and launching the app, say “OK Glass, send an email”.
  7. Follow the prompts and send your first email using SendGrid through Glass.

Go Deep and Immerse Thyself

Creating an Immersion based App for Glass using the GDK.

Using the GDK, you can create 3 types of Cards. A Card is what you see on the screen when looking through Glass (as demonstrated in the above video). I chose to use an Immersion type of Card for this Glassware example because there is high user interaction. You can find a great description of Immersions along with a Hello World tutorial at AndroidZeitgeist.

Designing The User Experience

The first order of business is to create a sketch of the Glassware’s workflow. I started with paper and pen, using that sketch to create the Glassware. I then created this diagram to avoid revealing my horrible drawing abilities in this post.

SendGrid Google Glass SDK UX diagram

Setup

The full source code for this tutorial can be found at GitHub.

Let’s begin by creating a new Android application. I am using the Android Developer Tools with the Eclipse IDE for this tutorial.

  1. Navigate to File->New->Project
  2. Choose “Android Application Project”
  3. Click Nextglass-newapp
  4. Click Nextglass-newapp2
  5. Click Nextglass-newapp3
  6. Click Nextglass-newapp4
  7. Click Nextglass-newapp5
  8. Click Finish

Update the App Manifest

First, we need to give our app permission to access the Internet. This is needed so we can make the SendGrid Web API calls. Add the following before the application tag:

<uses-permission android:name="android.permission.INTERNET"></uses-permission>

Next, implement the default Glass theme by replacing the android:theme attribute with:

android:theme="@android:style/Theme.DeviceDefault"

Let’s add an icon for our app by adding the icon attribute (you can generate your own icon with this tool):

android:icon="@drawable/world_icon"

Create a folder under the res folder named drawable and add the icon.

Replace the generated code in the intent-filter element with the following:

<action android:name="com.google.android.glass.action.VOICE_TRIGGER" />

This will allow our app to be launched with a voice trigger. Now we have to define how to handle that voice trigger. Add the following after the intent-filter element:

<action android:name="com.google.android.glass.action.VOICE_TRIGGER" />
<meta-data android:name="com.google.android.glass.VoiceTrigger" android:resource="@xml/voice_trigger" />

Your completed App Manifest should look similar to the following:

You can find complete documentation for the App Manifest file here.

Define the Launch Voice Trigger

Your Glassware’s resources are under the res folder. There are a few that we need to define and update.

To define the voice trigger for our Glassware, we need to create a folder named xml under the res directory. In that folder, create a file named voice_trigger.xml with the following contents:

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

Now we will define the string for the voice trigger by modifying strings.xml which is located in res/values:

<string name="send_email">send an email</string>

Now, when we say “OK Glass, send an email”, our Glassware will launch.

Initiate Our Code in Glass – MainActivity.java

Now we will implement the Glassware’s functionality, starting with the MainActivity.java file under the src directory.

There is a lot of code in that file, but I’ll go on to explain the sections below.

onCreate

This is the function that is invoked when the application begins. In this first interaction with our Glassware we want to find out who we need to email. Because the GDK does not yet support contacts, I implemented an AddressBook class which contains an array of first names and emails.

Why not just store the emails? Well, I could not get Glass to understand email addresses verbally. When I said @, Glass transcribed at.

On this first Card we remind the user what contacts are available to email. When the GDK implements contact support we would acquire the names from that list.

setCard

This is a utility function to create the Cards that the user will see. If you want to add some bling, check out the Glass theme and UI widgets.

generatePreview

Before we send an email, we want to show a preview to the user, allowing for a chance to make any necessary edits. This utility function generates the content that is displayed on preview Card.

onKeyDown

This function intercepts two interactions with the Glass trackpad, tap and a downward swipe. Capturing the downward swipe causes us to exit the Glassware.

If the user taps the trackpad there are 5 differenct cases to capture:

  1. InitializeCapture the email we are sending to.
  2. Subject is not definedOnce the to field is defined initially, we next enter this state.
  3. Text is not definedThis state is entered after we have defined the to and subject fields.
  4. Edit modeWhen all the fields are defined, it means that we want to give the user an option to edit. In this Glassware we achieve this using a menu.
  5. DoneCatch any taps that happen after the email was sent. In our case we exit the Glassware, but you may want to allow for sending additional emails.

In states where we need to capture verbal input we must create an Intent which is captured by the onActivityResult function as described below.

onCreateOptionsMenu

This function creates a menu, which is defined in the email.xml file. Go ahead and create the xml file in your project now using these contents.

onActivityResult

Here is where we capture verbal input. We have to account for two different workflows here. The first considers the initial time through the app when the to, subject, and text fields are captured in sequence. The second workflow captures any edits after the user arrives at the preview stage.

onOptionsItemSelected

Here is where we handle the menu actions, such as editing any of the fields. Also, we make our call to SendGrid’s Web API using our Java library to do the heavy lifting of getting our email delivered. You will want to edit the error message, as I wont respond to your errors … maybe.

Now Send the Email

Now we implement the magic that sends our email. Your code should look like this:

The only thing that needs modification in this file is your package definition. This is a very basic example of how to use our Java library, you learn more at our docs.

Address Book Hack

This is a temporary solution until we get access to contacts in Glass via the GDK. You will need to update the emails HashMap with your own list. If you bring this Glassware to production, implement proper error handling in the getEmail function.

Note that by adding the OmniFocus email option here, I can send tasks from Glass to import into Omnifocus, which is currently a Apple only app.

Store Your Credentials

Here we store our credentials. You need change the filename and class name from UtilsDEFAULT to Utils, then you will add your SendGrid credentials and the email you want to appear as the from address.

Complete the Menu

We now need to create the string values for the menu items we created in the email.xml file. This is done in the strings.xml file, which should look similar to the following when complete:

Compile and Run

Click the magical green triangle in your Eclipse IDE and there should be a result similar to what I demonstrated in this video.

Here are some resources that I found helpful when creating this Glassware and tutorial:

What will you create?

I can’t wait to see what kind of Glassware you create with this code. Once you do, be sure to promote your Glassware at our SendGrid Developer Community and at the Google Glass Developer Community on Google Plus.

Happy Hacking!


Elmer Thomas is SendGrid's Hacker in Residence. His mission is to help SendGrid live up to its slogan: "Email Delivery. Simplified" by improving the lives of developers, both internally and externally. Via all sorts of hackery, of course. Follow his exploits on Twitter and GitHub.

2 thoughts on “Google Glass Tutorial Sends Email Visually

  1. Pingback: Glass Daily Headlines: February 5, 2014 - Glass Almanac

  2. Pingback: Answering Questions on Glass using APIs | Social Health Insights

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>