[mopcon 2014] google glass 開發經驗分享

Google Glass 開發經驗分享Johnny Sung

x2014.10.26 @ MOPCON

https://fb.com/j796160836

Johnny SungMobile devices Developer

https://plus.google.com/+JohnnySung

http://about.me/j796160836

Hiiir Works

世新廣播電臺

Personal Works

Battery Checker

https://glass.google.com/glassware/14294674819446771796

百萬種Google glass爽的⽅方式2014.06.25

Developing Google Glass2014.08.27

2014.10.26

Google Glass 開發經驗分享

HandmadeUSB - 3.5mm phonejack for Glass™

Agenda• Google Glass 介紹

• Mirror API 初探

• 快速上⼿手 Glass Development Kit (GDK) 開發

• Glassware上架審核重點

• Google glass 與 Android wear 的異同之處

你知道嗎？

戴 Glass 的⼈人都有份感恩的⼼心

時間很寶貴。

Muki Wu (吳姿穎)

• Ｗordpress 課程 • RWD課程 • ⽂文具⼿手帳

MUKI space*

台灣知名部落客

（因為出賣朋友只好⼯工商⼀一下...）

Timeline (時間軸)

https://www.youtube.com/watch?v=jK3WLILYhQs

MyGlass 連接 Google Glass

ClockLive Card Static Card

Clock

Static Card

Now Past

Clock

Live Card

Settings

Glass development

• Mirror API • Glass Development Kit (GDK) • Hybrid

Mirror API

• Periodic notifications & Static Card(Push notifications)

• RESTful API • Choose a favorite language you like

Mirror API

Go Java .Net PHP Python Ruby

Mirror API 可以做到

•可⾃自由抽換⾃自⼰己建⽴立的 Static Card

•聯絡⼈人（分享的對象）

•語⾳音指令 （eg: Take a note）

• Location updates

Mirror API - OAuth Settings

• Google Developers Console

•勾選 Mirror API

•設定OAuth Client ID

Tips for Mirror API (PHP)• Edited: $api_simple_key 不需要了

• 沒有 DNS 域名? ⽤用 DNS 反解吧$ nslookup 114.42.21.220 Server: 10.100.83.253 Address: 10.100.83.253#53

Non-authoritative answer: 220.21.42.114.in-addr.arpa name = 114-42-21-220.dynamic.hinet.net.

http://114-42-21-220.dynamic.hinet.net/

Mirror API - OAuth Settings• APPLICATION TYPE

• Web application

• AUTHORIZED JAVASCRIPT ORIGINS

• http://114-42-21-220.dynamic.hinet.net/

• AUTHORIZED REDIRECT URI

• http://114-42-21-220.dynamic.hinet.net/mirrorapi/oauth2callback.php

⼤大家都說 Glass 是 ...

盗撮 神器

拍照三部曲

•⽂文雅版

• Ok glass, Take a picture

Muki Wu

拍照三部曲

•技巧版 •眨眼拍照

拍照三部曲

•⽂文⻘青版 •推眼鏡

You can do this …

Ok glass, Take a picture.

But don’t do this …

Glass Development Kit (GDK)

Glass Development Kit Sneak Peek 4.0.3 (API 15)

Glass Development Kit Preview 4.4.2 (API 19)

Android 4.4.2 KitKat (API 19)

Android 5.0

=..

Glass development• Glass Development Kit (GDK)

• Ongoing task & Live Card (活動卡⽚片，即時卡⽚片)

• Low Frequency Rendering • High Frequency Rendering

• Immersion (沉浸式體驗，獨佔式體驗)

<activity android:name=".MainActivity" android:label=“@string/app_name"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter></activity>

<activity android:name=".MainActivity" android:immersive="true" > <intent-filter> <action android:name="com.google.android.glass.action.VOICE_TRIGGER" /> </intent-filter> <meta-data android:name="com.google.android.glass.VoiceTrigger" android:resource="@xml/voice_trigger_start" /></activity>

public class HelloActivity extends Activity {

private TextView sampleTextview;

@Overrideprotected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);setContentView(R.layout.card_main);

sampleTextview = (TextView) findViewById(R.id.sample_txt);}

}

As same as android :D

Voice triggerok glass, show me a demo

VoiceTriggers.Command• add an event

• calculate

• call me a car

• capture a panorama

• check me in

• check this out

• control my car

• control my home

• explore nearby

• explore the stars

• find a bike

• find a dentist

• find a doctor

• find a hospital

• find a passage

• find a place

• find a place to stay

• find a product

• find a recipe

• find a video

• find a website

• find reviews

• find the exchange rate

• find the price

• flip a coin

• give me feedback

• help me sign in

• keep me awake

• learn an instrument

• learn a songPick one you like !

Layout

Layout

• https://developers.google.com/glass/develop/gdk/ui-widgets • https://developers.google.com/glass/design/style

•Screen Size: 640 x 320 •Padding: 40 x 40 •Bottom Bar: 560 x 40

Layout

Touch input

Keypad

Swipe down translates to KEYCODE_BACK.

A camera button press translates to KEYCODE_CAMERA.

Tap translates to KEYCODE_DPAD_CENTER.

• SWIPE_DOWN

• TWO_SWIPE_DOWN

• SWIPE_LEFT

• TWO_SWIPE_LEFT

• SWIPE_RIGHT

• TWO_SWIPE_RIGHT

• SWIPE_UP

• TWO_SWIPE_UP

Gestures

• TAP

• TWO_TAP

• THREE_TAP

• LONG_PRESS

• TWO_LONG_PRESS

• THREE_LONG_PRESS

http://www.slideshare.net/j796160836/developing-google-glass

Glass 殺⼿手級應⽤用？

舒壓。

Demo

Glassware上架審核重點

• 05.23 收到送件 (BatteryLevel)

• 05.29 語⾳音指令通過( Show the battery level -> Check the battery )

• 06.11 改名叫 Battery checker 更新送審

送審時間表

• 06.27 初步審查通過，開啟 Issue Tracker

• 07.17 追加 Issue

• 07.30 修完全部的 Issue

• 08.11 從MyGlass看到 Developer only

• 08.26 Ready for launch

• 08.29 正式 Release

Product Icon

Before After

Provide logo icons that are white on transparent

640 × 360 tile image

640 × 360 tile image

Before After

640 × 360 tile image

Screenshot & Context picture

2528 × 1856

640 × 360

Layout

BeforeAfter

Layout

Baseline of text

Baseline of text

Layout

Product descriptions

• A simple app that showed the current battery level of glass. Unlike the percentage in settings page, this app will response with voice directly. Hopes you will like it!

Glassware

Glass

Product descriptions

• 區分 Android app vs. the Glassware.

• Use Glass trademark

• Glass™

• Glass is a trademark of Google Inc.

Assets Issue

常⾒見的錯誤

• 不要將 Glass 放⼊入產品名稱的⼀一部份

GlassPresenter Presenter for Glass™

常⾒見的錯誤

• App功能不要照搬

• Horizontal tugging feedback

• 沒有作⽤用的觸控應該發出DISALLOW的聲⾳音 (咚咚...咚咚...

Developer Settings

Show layout bounds

Layout screen overlay

Android Wear

Notification Center

Glass vs Wear• ⼀一個是眼鏡

• Wifi / Bluetooth 4.0

• 相機

• 離線語⾳音辨識

• 可獨⽴立作業

• LiveCard

• ⼀一個是⼿手錶

• Bluetooth only

• ⼼心跳檢測

• 震動

• ⼿手機螢幕的延伸

• Notifications

Q & A

辦公室景⾊色

連結開發者、店家與消費者三方

除了優惠券，還是聯播網

在對的時間、對的地點給對的優惠券

http://fb.com/groups/glassdev.taiwanGoogle glass developer Taiwan

不只聊 Glass 喔

謝謝總召 Mikimoto ⼤大⼤大