구글글래스 mirrorAPI로 개발하기

STEP PERSONAL SMART JOURNAL 2014 © WePlanet Co., Ltd.
서버 개발자 혼자 진행하는
간단한 글래스웨어 개발
2014. 05. 31
@GDG DevFest2014

STEP PERSONAL SMART JOURNAL 2014 © WePlanet Co., Ltd.1
어떤 것을 만들까 ?
“ 스카우터를 생각한 당신은 정상인
!”

구글 says,
STEP PERSONAL SMART JOURNAL 2014 WePlanet Co., Ltd.
Glass works best with information that is simple,
relevant, and current.
Don’t try to replace a smartphone, tablet, or laptop
by transferring features designed for these devices
to Glass. Instead, focus on how Glass and your
services complement each other, and deliver an
experience that is unique.
2
“ 당신이 생각하시는 서비스는 글래스와 어울리나요 ?”

STEP PERSONAL SMART JOURNAL 2014 © WePlanet Co., Ltd.3
혹시 서비스가 글래스와 어울리지 않아도
당황하지 않고 ,
1)-- 글래스의 UI 요소를 간단히 보고 ,
2) -- 입력 방식을 살펴 보면서 ,
3) -- STEP Journal for Glass 개발 스토리를
공유하며
끝 !

1) UI elements: Timeline
• 640*360 크기의 카드로 구성된 Timeline 이
기본적인 유저 인터페이스
• Type of Timeline Section
• Home
• Past
• Present/Future
• Settings
4

1) UI elements: Card (Static /
Live)
• Static card 는 글 , 이미지 , 또는 비디오를 보여주기에
적합 .
• Live card 는 풍부한 정보와 함께 실시간을 다루기에 적
합 .
5

1) UI elements: Immersion
• Immersions 은 완전히 새로운 경험을 제공하기에 적
합 .
6

2) Invocation method
: Voice command & Touchpad
STEP PERSONAL SMART JOURNAL 2014 WePlanet Co., Ltd.7
https://developers.google.com/glass/distribute/voice-checklist

* Pattern & Mirror API
Pattern
•Periodic notifications (Static card)*
•Ongoing task (Live card)
•Immersion
•Hybrid
구글 says,
The Google Mirror API allows you to build web-
based services that interact with Google Glass. It
provides this functionality over a cloud-based API
and does not require running code on Glass.

* Mirror API : Resources
• Timeline *
• Timeline.attachments *
• Subscriptions *
• Locations *
• Contacts
• Accounts
• Settings

3-0) Mirror API : Prerequisites
• Google APIs Project 설정
• Google APIs Client library
• 혹은 Java, PHP, Python 기반의
Quick start project 를 이용
• Start project 를 위해 sqllite db 생성
• (subscription 방식을 이용하실 경우 )
Mirror API 와 연동할 웹서버

STEP Journal – the Automatic Journal - helps
you manage your scattered life records in one
place
11

STEP PERSONAL SMART JOURNAL 2014 © WePlanet Co., Ltd.STEP PERSONAL SMART JOURNAL 2014 WePlanet Co., Ltd.12
STEP Journal for Glass

3-1) 개발 순서 정리
• Glass 로 부터 사진찍은 사실 전달받기
-> Subscription
• Glass 에서 찍은 사진에 접근하기
-> Timeline, Timeline.attachements
• Glass 가 사진을 찍은 위치알기
-> Timeline, Location
• Glass 로 카드 보내기
-> Timeline

3-2) Subscription
POST https://www.googleapis.com/mirror/v1/subscriptions
(https://www.googleapis.com/auth/glass.timeline 의 scope 가 필요 )
POST /mirror/v1/subscriptions HTTP/1.1
Authorization: Bearer auth token
Content-Type: application/json
Content-Length: length
{
"collection": "timeline"
"userToken": "harold_penguin",
"operation": ["UPDATE"],
"callbackUrl": "https://example.com/notify/callback"
}

3-3) Notification
• file_get_contents(‘php://input’);
• json_decode
• UserActions 의 type 에서 어떤 액션인지 확인
• itemId 를 통해서 Timeline 의 어떤 카드에서 온건지 확인
collection, //{timeline, locations}
itemId,
opertaion, //{insert, update, delete}
verifyToken,
userToken,
userActions(type, payload)
//type = {share, reply, reply_all, custom,
delete, pin, unpin, launch}

3-4) Fetching resources
• timelineId 를 통해 timeline resource 에 접근 .
사진과 위치 정보를 획득 .
• itemId 를 통해서 Timeline 의 어떤 카드에서 온건지 확인
GET https://www.googleapis.com/mirror/v1/timeline/{id}
GET https://www.googleapis.com/mirror/v1/timeline/{itemId}/attachments/
{attachmentId}
GET https://www.googleapis.com/mirror/v1/locations/{id}

3-5) Timeline resource
sourceItemId,
bundleId,
isBundleCover,
isPinned,
pinScore,
title,
text,
html,
speakableType,
speakableText,
attachments,
location,
menuItems
// action={reply, reply_all, delete, read_aloud, get_media_input,
voice_call, navigate, toggle_pinned, open_uri, play_video,
send_message}

3-6) Location, Attachment
resource
kind, //{“mirror#location”}
id,
timestamp,
latitude,
longitude,
accuracy,
displayName,
address
id
contentType,
contentUrl,
isProcessingContent

3-7) Processing on STEP engine

3-8) Designing a card
https://developers.google.com/glass/tools-downloads/playground

*card example(1)
{
"text": "Hello Explorers,nnWelcome to
Glass!nn+Project Glassn",
"creator": {
"displayName": "Project Glass",
"imageUrls": [
"https://lh3.googleusercontent.com/-
quy9Ox8dQJI/T3xUHhub6PI/AAAAAAAAHAQ/Yvj
qA3Pw1sM/glass_photos.jpg?sz=360"
]
},
"menuItems": [
{
"action": "REPLY"
}
],
"notification": {
"level": "DEFAULT"
}
}

*card example(2)
{
"html": "<article>n <figure>n <img
src="https://mirror-api-
playground.appspot.com/links/movie.jpg">n
</figure>n <section>n <h1 class="text-
large">Movie</h1>n <p class="text-x-
small">n <img class="icon-small"
src="https://mirror-api-
playground.appspot.com/links/rated_r.png">
n 120 min / Draman </p>n <hr>n
<p class="text-normal">n 1:15 2:10
4:15<br>n Movie Theatren </p>n
</section>n</article>n",
"notification": {
"level": "DEFAULT"
}
}

3-9) Inserting a card
POST https://www.googleapis.com/mirror/v1/timeline/
POST https://www.googleapis.com/mirror/v1/upload/mirror/v1/timeline
PATCH https://www.googleapis.com/mirror/v1/timeline/{id}
“html 과 notification 속성을 이용하여
Simple, Relevant, Current 한
카드를 생성 :D”

Thank You
Jintae Jung
기발자 ( 기획자 + 개발자 ) I
jt.jung@wepla.net
http://www.step.pe

구글글래스 mirrorAPI로 개발하기

Recommended

Recommended

More Related Content

Similar to 구글글래스 mirrorAPI로 개발하기

Similar to 구글글래스 mirrorAPI로 개발하기 (20)

Recently uploaded

Recently uploaded (20)

구글글래스 mirrorAPI로 개발하기

Editor's Notes