M I R R O R - A P ID E V E L O P I N G F O R G O O G L E G L A S S

S O , W H AT I S G L A S S ?

Google Glass has a timeline, and you can scroll forward and backward through it by using the

touchpad on the side.

N O . T H E S E T T I N G S A R E W H AT TA K E S L O N G .

Ok, cool, but is Mirror API difficult to develop for?

I ’ M C O N F U S E D ! W H AT ’ S T H E

D I F F E R E N C E B E T W E E N M I R R O R A P I A N D

G D K ?

M I R R O R A P I I T ’ S A L L A B O U T T H E C L O U D .

G D K I S A L L A B O U T I N S TA L L I N G S O F T W A R E O N Y O U R D E V I C E .

T H E P H O N E I S N ’ T D E A D . G O O G L E G L A S S I S N O T H E R E T O R E P L A C E Y O U R P H O N E .

PLAN FOR MICRO INTERACTIONS

DON’T ANNOY THE USER,

Playground

H T T P S : / / D E V E L O P E R S . G O O G L E . C O M / G L A S S / T O O L S - D O W N L O A D S / P L A Y G R O U N D

There is no emulator for glass, just the playground:

The card

The body

P R E - R E Q U I S I T E S :

• A Macintosh or PC

• A Gmail account

• Internet Serviceand most importantly:

• Positive attitude!but…

C U R I O U S FA C T:

Y O U D O N ’ T N E E D G O O G L E G L A S S T O START D E V E L O P I N G F O R M I R R O R A P I , B U T I T I S R E C O M M E N D E D T O T E S T O N A D E V I C E W H E N Y O U ’ R E R E A D Y T O S H O W T H E U S E R .

S E T T I N G T H E E N V I R O N M E N T F O R

D O W N L O A D J D K F R O M S T E P 1

http://www.oracle.com/technetwork/java/javase/downloads/index.html

**If you get a versioning problem, try JDK 7.

D O W N L O A D B I N A R Y M AV E N F R O MS T E P 2

http://maven.apache.org/download.cgi

Maven will gladly compile the project for us and also download all the external libraries your project

will use.

D O W N L O A D G O O G L E A P P E N G I N E F I L E S F O R J AVA F R O M

S T E P 3

https://developers.google.com/appengine/downloads

CLICK FIRST

You need the SDK to upload the project to Google App Engine.

E N V I R O N M E N T VA R I A B L E S W I N D O W S

S T E P 4

JAVA_HOME C:\<path to java>\jdk1.8.0_11

JAVA %JAVA_HOME%\bin

M2_HOME C:\<path to mvn>\apache-maven-3.2.2-bin\apache-maven-3.2.2

M2 %M2_HOME%\bin

GAE_HOME C:\<path to gae>\appengine-java-sdk-1.9.8\appengine-java-sdk-1.9.8

GAE %GAE_HOME%\bin

PATH %Path%;%JAVA%;%M2%;%GAE%

Open PC info, Advanced System Settings, Environment Variables and add the following variables (locally, top part). Modify the paths to where you have stored your folders. These are the recommended paths:

E N V I R O N M E N T VA R I A B L E S M A C I N T O S H

/*Modify the paths to where your folders are stored. These are the recommended settings. */

//Open terminal

vim ~/.bash_profile

//press “i” to insert:

export M2_HOME=/Users/<path to mvn>/apache-maven-3.2.2 export M2=$M2_HOME/bin export GAE_HOME=/Users/<path to gae>/appengine-java-sdk-1.9.10 export GAE=$GAE_HOME/bin export PATH=$PATH:$M2:$GAE !//Press Esc, “:w” to write and “:q” to quit editor !//It’s not necessary to add JDK here but you need to have it installed.

G O T O T H E C O N S O L E A N D C L I C K N E W P R O J E C T

S T E P 5

https://console.developers.google.com/

This will be the URL of your site!

Keep it handy!

1

Look for the word “Mirror” and turn on Google Mirror API

2

3

Check terms and click “Accept”

4

1

Add Email

Add Name

This is fairly new, Google asks for a name and email to run a project. Save changes.

1

2

Write those URLs but change

the project ID for the one you created!

3

4

D O W N L O A D T H E J AVA Q U I C K S TA R T P R O J E C T F R O M

S T E P 6

https://github.com/googleglass/mirror-quickstart-java

Download Zip

U N Z I P T H E F I L E A N D I M P O R T I N E C L I P S E

1

2

1

Browse to the root where the pom.xml file is, and click finish.

2

Spread the folder tree, and search for the

src/main/resourcesoauth.properties

Copy the client id and secret from the OAuth page in the google developers console to the oauth file,

and save.

2

Create an “appengine-web.xml” file in the WEB-INF folder

1

2

Add the following text and in the <application> tag change the application id to the project you created!

In the pom.xml file, add the <packaging> line after the <version> tag.

1

2

O P E N A T E R M I N A L O R C O M M A N D P R O M P T A N D C D T O W H E R E T H E P O M . X M L F I L E I S L O C AT E D A N D R U N :

mvn clean install !

mvn war:war !

mvn jetty:run !

open a browser and visit -> http://localhost:8080

R U N O N L O C A L H O S T:

M A K E S U R E E V E R Y T H I N G R U N S W E L L O N L O C A L H O S T B E F O R E U P L O A D I N G T O G O O G L E A P P E N G I N E .

T O S T O P T H E J E T T Y S E R V E R , J U S T C O N T R O L + C T H E T E R M I N A L /C O M M A N D P R O M P T

Mac/Windows

Free server to upload your project to:

B E F O R E U P L O A D I N G F R O M W I N D O W S … F I N D T H E “ A P P C F G . C M D ” F I L E I N T H E G O O G L E A P P E N G I N E S D K /B I N F O L D E R

change the word “java” for the location of your JDK so it doesn’t use the JRE. Use quotations.

W I N D O W SR U N N I N G O N G O O G L E A P P E N G I N E

Open a cmd window and CD to where the pom.xml file is.

!

mvn clean install !

mvn war:war !

Modify the path to where your project is stored: !

appcfg.cmd update C:\<path to glass-java-starter>\target\ glass-java-starter-0.1-SNAPSHOT

M A C I N T O S HR U N N I N G O N G O O G L E A P P E N G I N E

Open a terminal window and CD to where the pom.xml file is

!

mvn clean install !

mvn war:war !

Modify the path to where your project is stored: !

appcfg.sh update /Users/<path to glass-java-starter>/target/glass-java-starter-0.1-SNAPSHOT

If everything goes well… head over to your browser and go to:

your_project_id.appspot.com!

1Y O U C A N A LW AY S C H E C K T H E L O G S I N T H E C O N S O L E . D E V E L O P E R S . G O O G L E . C O M T O I N V E S T I G AT E T H E I S S U E S .

I F S O M E T H I N G I S W R O N G W I T H Y O U R G O O G L E A P P E N G I N E A P P L I C A T I O N ,

Sometimes Google App Engine is not the best solution for your application…

Mirror API applications can run on both Google Compute Engine and Amazon Web Services.

Google works with a Debian image and amazon works with multiple vm images. The server comes empty and you must install

everything from scratch.

T H E S T R U C T U R E O F T H E P R O J E C T

The only classes/files you need to modify:

I F Y O U N E E D T O A D D J A R S …

Search for the name of the jar file in the maven repository in Google and copy the code to the pom.xml file under the <dependencies> tag.

1

2

E X E R C I S E T I M E !

D E S I G N Y O U R O W N C A R D

Get the “ex1.html” file from the zip file you downloaded and modify HTML to your taste.

When done, put all your HTML in one line.

Use Playground to see how it will look. We will insert that card into our Google Glass Timelines.

https://developers.google.com/glass/tools-downloads/playground

S A M P L E H T M L F O R C A R D

Open the index.jsp file and find the following lines:

Just underneath, you should find one of this blocks of code: (next slide)

1

Copy paste this block and change the underlined text

In the MainServlet.java file, go to line number

117 to the else if statement

Your HTML string has to be in one long line!

Copy paste that if else statement right below

and replace the if for this text:

This is the “value” in the input tag we did before

in the index.jsp file!

S AV E A L L T H E F I L E S !

O P E N A T E R M I N A L O R C O M M A N D P R O M P T A N D C D T O W H E R E T H E P O M . X M L F I L E I S L O C AT E D A N D R U N :

mvn clean install !

mvn war:war !

mvn jetty:run !

open a browser and visit -> http://localhost:8080

R U N O N L O C A L H O S T:

M A K E S U R E E V E R Y T H I N G R U N S W E L L O N L O C A L H O S T B E F O R E U P L O A D I N G T O G O O G L E A P P E N G I N E .

CREATED BUTTON

Click it.

T H E C A R D W I L L G O F R O M Y O U R A P P L I C AT I O N T O G O O G L E S E R V E R S T O T H E G L A S S D E V I C E R E G I S T E R E D W I T H T H E E M A I L U S E D T O L O G I N T O T H E A P P L I C AT I O N .

If you see this, it means the card was sent successfully and it was added to your timeline (even if you

don’t own a pair of Google Glasses)

O K , W H AT N O W ?

T O G I V E T H E A P P L I C AT I O N T O Y O U R U S E R S

You simply have to give them the URL of your project, and have them login with their credentials and configure the settings on the browser, not glass!

It’s that easy!

U S E F U L L I N K S / B O O K S• https://developers.google.com/glass/design/ui

• https://developers.google.com/glass/develop/overview

DESIGN

CODE

And so we’ve come to the end of the presentation!

My contact information: Diana Melara

dm22510n@pace.edu