Site icon Geeknizer

HowTo: Develop Your First Google Glass App [Glassware]

Google has raised curtains off it’s Glass revealing detailed Tech Specs. Along with the specs came the much awaited Mirror API – The API for Glass apps.

So you had that killer app idea for Google Glass? Now its time for you to put those ideas into code!

What’s Inside Google Glass

Google Glass runs custom Android OS (based on rumors) abstracted from developers and users with a new Navigation friendly hands-free card interface. The device essentially has specs of a low-end smartphone: 16GB storage (12GB usable), 5MP camera, 720p video, Audio through bone conduction, 1 day battery life, connects to Bluetooth, 802.11b/g Wifi. Google Glass pairs with your Android smartphone and uses its data and GPS for all capabilities.

The heart of Google glass, the display appears to be like a 25″ HD screen when viewed from 8-feets. It has resolution of 640×360.

How to Develop your First Google Glass App

Google Glass Platform

Even though it runs Android, Google decided not to let normal android apps run on it. There is a clear cut reason for that. This is no smartphone or touch device. Apps for Google Glass, better known as Glassware, are designed to be easy to navigate for total voice-activated hands-free operation.

Update: Install, Run Native Android apps APK on Google Glass [Root guide]

Glass apps (Glassware) are written in web languages web languages: HTML, CSS, Javascript or native languages Java, Python, etc. based on your preference.

Glassware is not a mobile app or website, so you must understand how it works before you can start coding for it. Glass needs a ICS+ android phone for all data and GPS needs using MyGlass companion app. So essentially, Google Glass tethers data and GPS from an Android Phone/Tablet.

Glass Fundamentals / FAQ

Card Interface

Glass Frontend is all presented to users in Cards. A card is a piece of content that appears on Glass home, when woken-up from standby by saying hotwords “ok glass” or via touch panel. You can then flip through cards by sliding on touch panel or use voice commands to select a card directly.

These cards are very different from regular mobile apps on smartphone. They contain limited information: Text, image, video, or Rich HTML. Users can interact with cards using “Actions” or “Menu items”. If you’re familiar with Android, cards are more like Rich notifications/Google Now cards you can interact with on Jellybean+ devices.

However, its different from push notifications. Developers push, update and delete cards from their servers as many times they want in order to keep card always up-to-date. However, it’s highly likely that card that is being pushed and pulled was never seen by user. If user finds a card important, he can pin it so that it always appears first in the default sorting of new to old. It’s okay for user to totally miss it.

Multilevel cards

Cards can be grouped into groups just like any folder. Group opens with a curl animation. In Card group, developer can insert, update, or deleted cards individually.

Interaction with Cards: Menu items

Users can interact with a card using menu items. Typical actions inherited from system are: Share, reply, read aloud, pin and delete. All these pre-defined system menu item actions have a system-defined behavior. As a developer you can add your own custom menu items. e.g. “Post to Twitter” action item that triggers HTTP request to server with card meta data and user posted message.

A typical spoken message will be transcripted to text using Google voice backend automatically and resultant text is available to your server.

Developing Card Frontend: HTML5

Cards UI is easy to design. It can be as simple as:

Following embeds a Native Map for the specified latitude, longitude.

<img src="glass://map?w=240&h=360&marker=0;21.124620,-19.315215&marker=1;25.64,-31.08726" height="360" width="240"/>

Quick Cards UI tips: Do’s & Dont’s
– Don’t use any specific javascript, html input fields that require interaction.
– Design for the screen size: 640×360 wuth proper margines and font sizes mentioned on guidlines page.
– Don’t scroll text.
– Don’t use fancy animations. Static text is perfect.
– Must not use Javascript unless it’s really needed for something otherwise unachievable in static UI. Google recommends not using it at all.

You can find complete Glass Card UI guidelines here.

Sharing and Subscriptions

Glass can notify the developer’s server for the following:

Subscriptions:

Contacts:

Google Glass Emulator

We understand that you need to test your apps but there is no real Google Glass emulator. Your best bet is Glass Playground. Playground offers a WYIWYG editor for Cards UI. It’s more of a simulator and should help you while designing Cards UI layouts.


click for full image

Within the Playground you can connect with OAuth, and use HTML5 templates, just like the real Glass device.

Developing your App server

Like we mentioned earlier, Mirror API is available in Java, Pythong, PHP, Go, .NET, Ruby and Dart. Starter projects are available for Java & Python which run directly on GAE (Google App engine), other servers will have to be self-hosted or using some other Cloud service.

Using these servers you push HTML: text, images, videos in Cards to the Glass device. That’s all you can do for now.
Checkout Offiical documentation, API and starter projects, Java starter demo, Google Glass demo interface setup.

Glassware starter Project on GAE

Happy Coding!

We write latest and greatest in Tech GuidesAppleiPhoneTabletsAndroid,  Open Source, Latest in Tech, subscribe to us @geeknizer OR on Facebook FanpageGoogle+.

Exit mobile version