Building My First Glass App (Under 30 min)

Follow our Google Glass Series to find out what exciting things we are building with Google Glass.

Google Glass has just arrived to our office.  As you can imagine, everyone here at IdeaNotion was trying to get their hands on this hot gadget.  I had to wait for my turn, but my colleagues would only let me have it for about an hour.  Fine, I will just going to hack an app!

There are two ways to build Google glass app (Glassware).  You can go native and uses the GDK or uses the cloud-base the Glass Mirror API.   I went with Glass Mirror API because it is light weight and do not require installing the app to the Glass.   Glass Mirror API will manage “Timeline cards” which can deliver content to the user, and support interaction such as menu items, voice, share, and using GPS location.

I decided to build a good-old “To-Do List” app.  I downloaded the Mirror API quick start project from GitHub as the base: https://github.com/googleglass/mirror-quickstart-dotnet. I went with .NET and used Azure website for quick deployment.  The quick-start project came with the Google.Apis.Mirror.v1.dll which provides everything you need to make Mirror API calls. For example, you can create a Timeline item with the message “Tell me what you had for lunch :)” by doing this:

            TimelineItem item = new TimelineItem()
            {
                Creator = new Contact()
                {
                    DisplayName = "",
                    Id = "",
                },
                Text = "Tell me what you had for lunch :)",
                Notification = new NotificationConfig() { Level = "DEFAULT" } } },
            };
            controller.Service.Timeline.Insert(item).Fetch();

 

Glass Timeline Card

Glass Timeline Card

Here is how the glass and web app works together to create the To-Do List:

1) Insert a Cover Card and Timeline Cards
The web app will first authenticated the user using their Google account.  The web app will insert a cover card to the Glass via the API.  The cover card displays the list of To-Do items.  Each individual To-Do item will be inserted as a timeline card that is grouped under the cover card.

TimelineItem item = new TimelineItem()
            {
                Html = string.Format(CARDHTML, ""),
                Notification = new NotificationConfig() { Level = "DEFAULT" },
                BundleId = "ToDoList",
                IsBundleCover = true,

                },
            };

Glass Cover Timeline Card

Glass Cover Timeline Card

Glass Timeline Card

Glass Timeline Card

Glass Read Aloud

Glass Read Aloud

2) Subscription to Timeline
Next, the web app needs to subscribe to the user’s timeline, so that it would be notified when user adds a new To-Do task directly from the Glass. The key is to provide a callback URL to properly handle the notification via HTTPS. If you don’t have HTTPS, just setup a proxy redirect (see https://developers.google.com/glass/tools-downloads/subscription-proxy)

        private static String InsertSubscription(MainController controller)
        {
            String collection = controller.Request.Form.Get("collection");
            if (String.IsNullOrEmpty(collection))
            {
                collection = "timeline";
            }

            Subscription subscription = new Subscription()
            {
                Collection = collection,
                UserToken = controller.UserId,
                CallbackUrl = "https://mirrornotifications.appspot.com/forward?url=" + controller.Url.Action(
                    "", "Main", null, controller.Request.Url.Scheme)
            };
            controller.Service.Subscriptions.Insert(subscription).Fetch();

            return "Application is now subscribed to updates.";
        }

Our web app will get notified when user adds a To-Do task with the text transcription of the user speech.

Glass Custom Menu

Glass Custom Menu

Glass Speak

Glass Speak

I completed this To-Do list just under half an hour. Although app is simple, it demonstrated many cool features such as manage timeline cards, voice command, read-aloud, and real-time updates to the timeline. Want to test it out? Try the demo here:
http://glasstodo.azurewebsites.net/

I also uploaded the source code to Github here:
https://github.com/tsanglwr/glass-todolist

 

Idea Notion is a consulting firm that develops enterprise web and mobile apps. If you have any questions, would like to learn more, or are interested in developing Google Glass apps, feel free to contact us.

By Raymond Tsang

Tagged with: , , , ,
Posted in Glass, Technical

Leave a Reply