Google Mirror API.

Today, we're going to show you some code on

building some Glassware.

Before we get into that, let's tell you a

little bit about ourselves.

ALAIN VONGSOUVANH: Hi, everyone.

My name's Alain Vongsouvanh.

I'm a Developer Programs Engineer on

Glass, and this is--

JENNY MURPHY: Hi.

I'm Jenny Murphy.

I'm also a Developer Programs Engineer on Glass.

So here's our menu for today.

We're going to briefly touch on the guidelines so you know

how to build some awesome Glassware.

We're going to cover this really briefly because it's a

lot of the same information that Timothy

covered early in a session.

In fact, we assume a little bit of foreknowledge here.

We assume you're familiar with Glass, either you attended

Timothy's session, or you have Glass on right now, or maybe

you visited some of our partners in the

Glass Sandbox earlier.

But even if you haven't, just hang tight, take some notes,

and make sure to follow up with that information like

seeing Timothy's video.

Once we're done with that, we're going to go through the

components of the Mirror API.

These are the building blocks that you

use to build Glassware.

We're going to go through each one and show you some code of

using them in isolation.

Once we're done with that, we're going to show you a

couple of examples of how you can put them together to build

some interesting Glassware.

We hope that this will give you the context that you can

use to build your own Glassware.

ALAIN VONGSOUVANH: All right.

Thank you, Jenny.

Sounds really interesting.

But before we dive into the code and learn how we can use

the Mirror API to build Glass services, or what we call

Glassware, we'd like to take a few moments to talk about

guidelines.

So keep in mind that the Glassware you write

[INAUDIBLE] user, and with the technology being so close to

the user, it's really important that the experience

we provide is the best possible.

That is why we designed guidelines

around those four points.

I won't go into details into those because Timothy really

did a great job explaining them.

If you managed to attend his sessions--

I bet many of you have--

you should be good to go.

If not, make sure to check his session when it's back online.

And always keep those guidelines in mind when you

are designing in Glassware, [INAUDIBLE] in Glassware, and

testing in Glassware.

Sounds good?

All right.

JENNY MURPHY: Hi.

Let's move on to the Mirror API, those building blocks I

mentioned before.

Before I get into that, how many of you here have built

software using RESTful web services before?

Wow.

Almost everyone.

How about mobile applications like Android apps?

A good number, and quite a bit of overlap.

You're going to find that you can leverage a lot of the

knowledge you already have, a lot of the experience you have

from those two.

But our perspective is a little bit different so please

try to keep an open mind.

And as many technical presentations start, we have

our architecture diagram, and this one is no different.

We have the Mirror API, the 10,000 foot view.

Up at the top, we have a green circle representing the Mirror

API itself, and this is a collection of RESTful web

services, which is really just a bunch of directories of JSON

that you work with over HTTPS.

Over on the right side, we have a box representing Glass

and its connection to the Mirror API with Glass Sync.

This is something you actually don't need to

worry too much about.

This is one of the cool parts of the Mirror API.

We take care of the synchronization for you.

We handle connectivity, we handle power, all

that kind of stuff.

You get to focus on the stuff to the other side, those JSON

messages you send back over HTTPS and your Glassware, the

code that interacts with the Mirror API.

And if you're observant, you may have noticed

I missed one thing.

There were directories of JSON up there, but we currently

have no way to tell the Mirror API what user you're

interacting with and no way to verify that they've given you

access to their data.

This is where OAuth comes in.

We use OAuth to install Glassware and to give the user

the opportunity to provide you access to their data.

OAuth is kind of like the valet keys for the internet.

It gives users the ability to give you access to just some

of their data out there.

Valet keys that kind of dance, and I'm going to walk you

through the dance that we use to do this.

So a new user arrives at your Glassware.

You don't know who they are.

Maybe it's time to install, maybe it's time just to hit a

Settings page.

In either case, what you're going to do is you're going to

redirect then to Google's OS servers, or

maybe open a pop-up.

You're going to send over all the permissions you want.

Typically, this is going to be glass.timeline, but we have

some other permissions like glass.location which I'll be

going into a little bit later.

The user logs into their Google account if they're not

already logged in, and then they see a page where they see

a list of permissions that you've asked for.

Since your Glassware has been prudent on the permissions

you're asking for and you have some really compelling

functionality, of course they're going say yes and

grant you those permissions.

They get redirected back to your service, and along with

that redirection comes a code.

Now it's your turn to complete that three way handshake.

You take that code and you make a back end request, along

with some details of your service, and we send you an

access token.

You use this access token to both identify the user when

you make those requests and to verify that you have those

permissions.

You include it in a header on all those requests.

There are a bunch of steps here.

One cool thing is we have client libraries in our

Resources that care of almost all of this heavy lifting for

you, so you don't need to worry about these details.

But if you want to, you can code at this level, too.

So now we have access tokens and we can start using the

Mirror API.

ALAIN VONGSOUVANH: Thank you, Jenny.

So now that the user has installed your Glassware, it's

time to do stuff with it.

Before we dive into how to write Glassware, let's talk

about the Mirror API and what it's made of.

I'm pretty sure many of you already know, but it's always

good to get a reminder.

So Jenny mentioned that the Mirror API is a RESTful API,

so it means that it's an API composed of connections that

you manipulate through HTTP requests.

So you can update, retrieve, delete, insert new items to

your collections.

The main collection you're going to use when you write

your Glassware is the Timeline collection.

This is how you insert content into the user's Glass, what we

call Timeline Card, and this is how you retrieve Timeline

Card from the user's Glass as well.

Each Glassware has their own Timeline, so you don't get

access to another Glassware Timeline.

For example, the Google+ Glassware doesn't have access

to the Gmail Glassware, and so forth.

Very few exceptions, but that needs user input and we'll get

into that later.

Now, the example you see on screen is the most simple

Timeline Card you can insert.

It's text only.

So this is a JSON representation of a Timeline

item, set the text property to Hello World, and then send an

authorized post request to the Timeline collection, and boom,

it's going to be in the user's Glass.

MALE SPEAKER: Hi everyone.

ALAIN VONGSOUVANH: It's as simple as that.

Thanks for the noise.

All right.

Let's jump to the other example.

So we inserted text, but you can also insert rich media to

the user's Glass.

The Glass client supports images and videos, and you

insert those using HTTP requests as well.

So you can insert media only, or you can also provide

metadata along with the media.

This is an example of a multipart HTTP request, but as

Jenny mentioned, we have client libraries that leverage

all of that for you so you don't have to do

all the heavy lifting.

And we have extensive documentation on how to do

that in our reference documentation.

So now, we have text, we have media, but sometimes, you want

to add your own branding as well.

You want to customize your Timeline Card.

You want to do more stuff, provide a better

experience to the user.

For that, we have HTML support.

So you can set HTML payload into the

Timeline item metadata.

It's as simple as just setting the HTML into the HTML

Property, and we have a list of tags that we support and

tags that we don't, like Script and Link.

All of that is documented in our Reference Guide as well.

And we also have a built-in CSS that we encourage you to

use to provide a consistent experience

across all the Glassware.

Now, let's look at how it looks like to the code.

So in our slide, we decided to use Java, but again, the

Mirror API is a RESTful API, so as long as you have a

language that can communicate over HTTP, you're good to go.

And Google does provide many client libraries in different

languages like Java, Python, PHP, .NET, and so forth.

We have documentation again, and then you can also check

the Client Libraries Project page to

learn more about those.

So for Java, how to insert a Timeline Item, you just create

a new Timeline Item Resource and then set the text or the

metadata properties you want for the Timeline Item.

In this example, we're only saying hello to our Explorers.

And then once you're good with your Timeline Item, use an

authorized Mirror service and send an authorized HTTP

request to the user's Glass.

And that's it.

You're done.

You just sent a Timeline Item to your user's Glass.

It's so simple.

Now, I could talk about this for 20 more minutes, or I can

jump to a demo.

All right.

So we have a tool we built for you called the Playground

where you can experiment with the API.

So the Playground is actually using the Mirror API to send

data to your user's Glass.

So we have a bunch of templates.

Let's start with a much simpler one, text only.

So you can simply edit the text.

Glass Explorers are awesome!

You can see on the right side of the screen, the JSON

representation.

And then when you're good with the Timeline Item, just hit

Insert Item.

It's going to use the API and then send it

to the user's Glass.

Now, let me go to my demo device with a cable.