Mirror API 튜토리얼: 웹 개발자를 위한 Google Glass

Android 기기는 확실히 전 세계를 장악하고 있습니다. 수천 대의 스마트폰, 태블릿, 스마트 TV 및 기타 여러 장치가 Google의 오픈 소스 플랫폼을 기반으로 합니다. 게다가 Google의 웨어러블 컴퓨팅 인센티브는 세상을 완전히 새로운 차원으로 끌어올리고 있습니다. Google Glass는 우리가 기술과 상호 작용하는 방식을 변화시키는 데 매우 가까운 장치입니다. 아주 오랜 시간 동안 우리는 고개를 숙인 채 작은 전화기 화면을 바라보며 걸어왔습니다. Google Glass는 웨어러블 기술과 상호 작용하면서 고개를 들고 자랑스럽게 걸을 수 있도록 도와줍니다.

처음에 Android 개발은 Java 지식이 있는 개발자에게만 국한되었습니다. 대규모 개발자 커뮤니티는 다른 플랫폼을 사용하여 훌륭한 웹 애플리케이션을 구축하고 있었고 Android 개발을 채택하는 데 큰 어려움을 겪었습니다. 나중에 발전하고 일종의 교차 플랫폼 개발을 제공하는 몇 가지 접근 방식이 있어 정통한 웹 개발자가 Java 및 Android SDK 지식 없이도 Android용 앱 빌드를 시작할 수 있습니다. 그러나 새로운 프로그래밍 언어를 배우지 않고 웹 개발자에게 공통적인 지식만 사용하여 Google Glass용으로 개발하는 것은 좋지 않을까요? 예, 가능합니다!

Google은 웹 개발자가 Google에서 호스팅하고 관리하는 웹 서비스와 상호 작용하는 것만으로 Glassware를 구축할 수 있도록 하는 클라우드 기반 RESTful 서비스를 제공했습니다. 이러한 서비스의 이름은 Mirror API이며 개발 플랫폼에 독립적입니다. Glass의 Mirror API 사용을 시작하기 위해 Google Glass 장치가 없어도 되지만 일부 고급 기능을 사용하려면 장치가 있어야 합니다.

다음 두 가지만 알아야 합니다.

• OAuth 2.0 요청 실행 및 인증 토큰 획득
• 미리 정의된 끝점에 대한 HTTP 요청 실행

이 Google Glass 개발 튜토리얼에서는 Glass용 애플리케이션을 구축하는 데 사용할 수 있는 기술을 소개합니다.

아직 Google Glass를 사용하지 않았다면 사용자 인터페이스의 기본 사항을 이해하는 데 충분한 정보를 제공하므로 이 두 동영상을 살펴보세요.

• 구글 글래스 소개

• Google Glass 사용법: 시작하기

여기에는 설정 및 탐색에 대한 훨씬 더 유용한 비디오가 있고 여기에 사용자 인터페이스에 대한 더 많은 세부 정보가 있습니다.

Mirror API와 기본 Google Glass 개발에는 많은 차이점이 있습니다. 이 튜토리얼의 목적은 이러한 차이점에 대해 토론하는 것이 아니라 웹 개발자에게 Google Glass의 작동 방식과 가능한 한 빨리 참여하는 방법에 대한 통찰력을 제공하는 것입니다.

미러 API는 어떻게 작동합니까?

첫 번째이자 가장 중요한 것은 표준 웹 애플리케이션을 구축하고 있다는 것입니다. 애플리케이션은 웹 서버에서 실행되며 Google Glass 장치와 직접 상호 작용하지 않습니다. 대신 애플리케이션이 Mirror API 서비스와 상호 작용합니다. Mirror API 기반 애플리케이션은 Glass 자체에 설치할 필요가 없으며 모든 서비스는 이미 Glass OS의 일부입니다.

Google Glass 장치는 자체 동기화 서비스를 실행하여 Mirror API를 통해 콘텐츠를 애플리케이션으로 다시 푸시하거나 가져옵니다.

Google Glass가 Mirror API에서 업데이트를 확인하는 빈도에 영향을 줄 수 없으며 "중간 사람"을 갖는 데 비용이 듭니다. 이 아키텍처의 직접적인 결과는 Glass 사용자와 실시간으로 상호 작용할 수 없다는 것입니다. 작업 요청과 Glass 장치에서 실행 중인 실제 이벤트 사이에는 항상 지연이 예상되어야 합니다.

설정 및 인증

웹 개발용 Mirror API를 사용하려면 Google Developers Console에서 애플리케이션 ID를 정의해야 합니다. Google API 콘솔을 열고 Google 계정으로 로그인합니다.

새 프로젝트를 만드십시오. 이름을 "미러 API 데모"로 지정하겠습니다.

다음으로 해야 할 일은 Glass 웹 애플리케이션에 Mirror API를 활성화하는 것입니다. 그렇게 하려면 프로젝트 개요 페이지에서 "API 활성화" 버튼을 클릭하고 목록에서 미러 API를 찾아 켜십시오.

다음으로 Glass 웹 애플리케이션용 클라이언트 ID를 생성합니다. 이렇게 하려면 자격 증명 화면에서 "새 클라이언트 ID 만들기" 버튼을 클릭하기만 하면 됩니다.

참고 : "동의 화면" 세부 정보를 입력하라는 메시지가 표시될 수 있습니다. 이 양식의 데이터는 애플리케이션에 대한 액세스 권한을 부여할 때 사용자에게 제공됩니다.

Google Glass Playground를 사용하여 Mirror API를 테스트합니다. 플레이그라운드를 활성화하려면 https://mirror-api-playground.appspot.com을 HTTP 요청의 유효한 출처로 승인해야 합니다. 이 데모에서는 OAuth 리디렉션을 사용하지 않으므로 "Redirect URI" 필드에 아무 것도 남겨 둘 수 있습니다.

"클라이언트 ID 만들기"를 클릭하면 첫 번째 Mirror API 요청을 할 준비가 된 것입니다.

미러 API 애플리케이션 인증

중요 : Mirror API 개발자 계정과 Google Glass 소유자 계정을 혼동하지 마십시오. 개발자이자 Glass 소유자인 단 하나의 계정으로 이 연습을 수행할 수 있지만 이 두 계정의 분리를 인식하는 것이 중요합니다.

Glass 웹 애플리케이션에서 Mirror API로 전송되는 모든 HTTP 요청은 승인이 필요합니다. 미러 API는 표준 "베어러 인증"을 사용하므로 각 요청에 토큰을 제공해야 합니다. 토큰은 표준 OAuth 2.0 프로토콜을 사용하여 Google API에서 발행합니다.

1. 사용자(Glass Owner)는 웹 애플리케이션에서 페이지를 열고 "로그인"을 클릭합니다.
2. 애플리케이션이 Google API에 대한 요청을 발행하고 사용자에게 Google API에 의해 생성된 동의 화면이 표시됩니다(일반적으로 새 팝업 화면에서).
3. 애플리케이션에 액세스 권한이 부여되면 Google API에서 Mirror API 호출에 사용할 토큰을 발행합니다.

미러 API 플레이그라운드

Google Glass Playground를 사용하면 Glass에 콘텐츠가 표시되는 방식을 실험할 수 있습니다. 이를 사용하여 콘텐츠를 Glass로 푸시할 수 있지만 장치가 없는 경우에도 Glass 디스플레이에서 어떻게 보이는지 확인할 수 있습니다.

Mirror API Playground는 이 URL에서 찾을 수 있습니다.

미러 API 플레이그라운드 엔드포인트를 유효한 HTTP 요청 출처로 이미 허용했습니다. 플레이그라운드를 사용하려면 클라이언트 ID를 제공하여 "미러 API 플레이그라운드를 애플리케이션으로 식별"해야 합니다. Google 개발자 콘솔에서 애플리케이션의 클라이언트 ID를 찾을 수 있습니다.

“Authorize”를 클릭하면 아래 그림과 같은 OAuth 2.0 동의 화면이 나타납니다. "Glass Owner" 계정을 사용하여 로그인해야 합니다. 이 계정은 애플리케이션이 Glass와 상호 작용하는 데 사용할 자격 증명이기 때문입니다.

"수락"을 클릭하면 Mirror API Playground가 귀하의 애플리케이션으로 식별됩니다. 사용자의 Glass 타임라인에 액세스할 수 있으며 Playground에서 Google Glass 장치와 상호 작용할 수 있습니다.

안녕하세요 유리탐험가입니다!

Mirror API Playground는 API를 사용하는 데 사용할 수 있는 사전 정의된 템플릿으로 채워져 있습니다. 목록을 스크롤하여 가장 마음에 드는 예를 찾으십시오. 이 데모에서는 "Hello Explorers" 카드를 선택했습니다.

선택한 항목은 레이아웃을 구성하는 데 사용되는 HTTP 요청 본문 콘텐츠와 함께 플레이그라운드에 표시됩니다.

 { "text": "Hello Explorers,\n\nWelcome to Glass!\n\n+Project Glass\n", "creator": { "displayName": "Project Glass", "imageUrls": [ "https://lh3.googleusercontent.com/-quy9Ox8dQJI/T3xUHhub6PI/AAAAAAAAHAQ/YvjqA3Pw1sM/glass_photos.jpg?sz=360" ] }, "menuItems": [ { "action": "REPLY" } ], "notification": { "level": "DEFAULT" } }

요청을 자유롭게 수정하고 디자인이 마음에 들면 "항목 삽입" 버튼을 클릭하십시오. 요청이 처리되면 "타임라인"이 업데이트됩니다. Glass 장치가 있는 경우 항목도 타임라인에 삽입됩니다.

나만의 미러 API 웹 애플리케이션 작성

축하합니다! 첫 번째 Mirror API 요청을 실행하고 코드를 작성하지 않고도 Google Glass에 메시지를 보냈습니다.

좀 더 흥미롭게 만들어 보겠습니다. Mirror API Playground를 제거하고 그 자리에 자체 애플리케이션을 배치하려고 합니다.

먼저 Google API가 애플리케이션의 요청을 수락하는지 확인해야 합니다. Google Developers Console로 돌아가 승인된 JavaScript 출처 목록에 애플리케이션의 URL을 추가합니다. 나는 http://localhost:3000 을 사용할 것이지만 이것을 자신의 설정으로 수정할 수 있습니다.

인증 토큰 받기

OAuth 2.0 요청을 실행하고 Google API에서 인증 토큰을 얻기 위해 Google API JavaScript 클라이언트 라이브러리를 사용합니다.

다음 콘텐츠로 간단한 HTML 페이지를 만들고 CLIENT ID를 애플리케이션 ID로 바꿔야 합니다.

 <!DOCTYPE html> <html> <head> <title>{{ title }}</title> <link rel='stylesheet' href='/stylesheets/style.css' /> <script src="https://apis.google.com/js/client.js"></script> <script> function auth() { var config = { 'client_id': <YOUR APPLICATION CLIENT ID>', 'scope': [ 'https://www.googleapis.com/auth/userinfo.profile', 'https://www.googleapis.com/auth/glass.timeline', 'https://www.googleapis.com/auth/glass.location' ] }; gapi.auth.authorize(config, function () { console.log('login complete'); console.log(gapi.auth.getToken()); }); } </script> </head> <body> <h1>{{ title }}</h1> <button>Authorize</button> </body> </html>

Google Glass 애플리케이션을 시작하고(Google Developers Console에서 승인된 JavaScript 출처로 지정한 URL에서 실행 중인지 확인) "Authorize"를 클릭하면 OAuth 2.0 흐름이 시작됩니다. Google 계정으로 로그인하면 브라우저 콘솔에 토큰이 표시됩니다.

이제 토큰으로 무장하고 Mirror API에 게시할 준비가 되었습니다! 토큰은 60분 후에 만료되지만 데모를 완료하기에 충분한 시간 이상이어야 합니다. "승인"을 다시 클릭하면 언제든지 다른 토큰을 얻을 수 있습니다.

RESTful 서비스 및 HTTP 요청은 사용하는 개발 플랫폼이나 프로그래밍 언어에 관계없이 모든 웹 개발자가 공통적으로 사용하는 용어입니다. 이 데모를 시도하려면 Mirror API 끝점에 대해 표준 HTTP 요청을 실행해야 합니다. 나는 이것을 위해 Postman을 사용하기로 선택합니다. 자유롭게 요청 세부 정보를 받아 좋아하는 프로그래밍 언어로 데모를 구현하십시오. Postman 또는 기타 HTTP 클라이언트 도구를 사용합니다.

타임라인 항목 가져오기

https://www.googleapis.com/mirror/v1/timeline 으로 HTTP GET을 실행하여 Glass에 푸시한 항목 목록을 언제든지 검색할 수 있습니다.

Mirror API에 대한 모든 요청은 승인이 필요합니다. 인증 토큰은 "Bearer" 단어가 접두사로 붙은 Authorization HTTP 헤더의 값으로 전송됩니다.

Postman에서는 다음과 같이 보일 것입니다.

요청을 실행하면 응답은 다음과 유사해야 합니다.

 { "kind": "mirror#timeline", "nextPageToken": "CsEBCqQBwnSXw3uyIAD__wAA_wG4k56MjNGKjJqN18bHzszIy8rMz8nIy9bRlouaktedxp2dyJrHmtLInsue0suZzZvSncvOxtLIyJnGnJyex57Px8zW_wD-__730HDTmv_7_v5HbGFzcy51c2VyKDk4MTM3NDUzMDY3NCkuaXRlbShiOWJiN2U4ZS03YTRhLTRmMmQtYjQxOS03N2Y5Y2NhOGEwODMpAAEQASG5sX4SXdVLF1AAWgsJsgPYYufX654QASAA8ISVfAE=", "items": [ { "kind": "mirror#timelineItem", "id": "b9bb7e8e-7a4a-4f2d-b419-77f9cca8a083", "selfLink": "https://www.googleapis.com/mirror/v1/timeline/b9bb7e8e-7a4a-4f2d-b419-77f9cca8a083", "created": "2014-11-04T19:11:07.554Z", "updated": "2014-11-04T19:11:07.554Z", "etag": "1415128267554", "creator": { "kind": "mirror#contact", "source": "api:182413127917", "displayName": "Project Glass", "imageUrls": [ "https://lh3.googleusercontent.com/-quy9Ox8dQJI/T3xUHhub6PI/AAAAAAAAHAQ/YvjqA3Pw1sM/glass_photos.jpg?sz=360" ] }, "text": "Hello Explorers,\n\nWelcome to Glass!\n\n+Project Glass\n", "menuItems": [ { "action": "REPLY" } ], "notification": { "level": "DEFAULT" } } ] }

응답 내용을 살펴보면 플레이그라운드에서 게시한 항목이 포함되어 있음을 알 수 있습니다.

새 항목 만들기

새 항목을 만들려면 https://www.googleapis.com/mirror/v1/timeline 으로 POST를 실행해야 합니다. 또한 이전 예에서와 같이 Content-Type 이 application/json 임을 지정하고 Authorization 헤더를 제공해야 합니다.

우리가 스포츠의 열렬한 팬이고 우리가 가장 좋아하는 팀 Aliens가 Predators를 플레이한다고 가정해 보겠습니다. 우리는 Mirror API를 사용하여 모든 팬에게 결과를 보내고 싶습니다.

요청 본문은 다음과 같아야 합니다.

 { "html": "<article>\n <section>\n <div class=\"layout-two-column\">\n <div class=\"align-center\">\n <p>Aliens</p>\n <p class=\"text-x-large\">0</p>\n </div>\n <div class=\"align-center\">\n <p>Predators</p>\n <p class=\"text-x-large\">0</p>\n </div>\n </div>\n </section>\n <footer>\n <p>Final Score</p>\n </footer>\n</article>\n", "notification": { "level": "DEFAULT" } }

그리고 Postman 화면은 이와 유사해야 합니다.

요청을 실행할 때 Mirror API는 이와 유사한 응답을 제공해야 합니다.

 { kind: "mirror#timelineItem", id: "e15883ed-6ca4-4324-83bb-d79958258603", selfLink: https://www.googleapis.com/mirror/v1/timeline/e15883ed-6ca4-4324-83bb-d79958258603, created: "2014-11-04T19:29:54.152Z", updated: "2014-11-04T19:29:54.152Z", etag: "1415129394152", html: "<article>\ <section>\ <div class=\"layout-two-column\">\ <div class=\"align-center\">\ <p>Aliens</p>\ <p class=\"text-x-large\">0</p>\ </div>\ <div class=\"align-center\">\ <p>Predators</p>\ <p class=\"text-x-large\">0</p>\ </div>\ </div>\ </section>\ <footer>\ <p>Final Score</p>\ </footer>\ </article>\ ", notification: { level: "DEFAULT" } }

Google Glass가 없더라도 Mirror API Playground로 돌아가 "타임라인 항목 다시 로드" 버튼을 클릭할 수 있습니다. Glass 디스플레이에 표시되는 것과 똑같은 두 개의 항목이 표시되어야 합니다. 첫 번째 예제를 실행하고 항목을 GET하면 두 항목이 모두 나열됩니다.

이전 예제의 응답 내용을 살펴보면 다음과 유사한 행을 찾을 수 있습니다.

 id: "e15883ed-6ca4-4324-83bb-d79958258603"

Mirror API는 삽입될 때 모든 항목에 전역적으로 고유한 ID를 할당합니다. 이 ID는 POST 실행 후 응답에 포함되며, GET을 실행하여 타임라인 항목을 나열할 때 항목 세부 정보에 포함됩니다.

Predators가 리드를 잡고 득점했다고 가정해 보겠습니다. 점수를 업데이트하려면 https://www.googleapis.com/mirror/v1/timeline 에 PUT을 실행한 다음 ID를 실행해야 합니다. 비슷하다

 https://www.googleapis.com/mirror/v1/timeline/e15883ed-6ca4-4324-83bb-d79958258603

변경 사항을 반영하도록 항목 콘텐츠를 수정합니다.

 { "html": "<article>\n <section>\n <div class=\"layout-two-column\">\n <div class=\"align-center\">\n <p>Aliens</p>\n <p class=\"text-x-large\">0</p>\n </div>\n <div class=\"align-center\">\n <p>Predators</p>\n <p class=\"text-x-large\">1</p>\n </div>\n </div>\n </section>\n <footer>\n <p>Final Score</p>\n </footer>\n</article>\n", "notification": { "level": "DEFAULT" } }

Postman 구성은 이와 유사해야 합니다.

요청을 실행하고 타임라인의 내용을 확인하면 Predators가 1:0으로 앞서는 것을 알 수 있습니다.

메뉴 및 사용자와의 상호 작용

지금까지 사용자의 상호 작용이나 피드백 없이 콘텐츠를 Glass에 푸시했습니다. 유감스럽게도 사용자 상호 작용을 시뮬레이션할 수 없으며 이 예제를 시도하려면 실제 Glass 장치를 사용해야 합니다.

따라서 게임은 계속되고 Aliens는 1:1로 득점합니다. 우리는 사용자가 타임라인 항목을 보면서 간단한 작업을 실행할 수 있는 일종의 "I Like" 기능을 활성화하고자 합니다.

먼저 점수를 표시하는 카드에 메뉴를 추가해야 합니다. 이전 예제의 단계에 따라 타임라인 항목을 다음 콘텐츠로 업데이트합니다.

 { "html": "<article>\n <section>\n <div class=\"layout-two-column\">\n <div class=\"align-center\">\n <p>Aliens</p>\n <p class=\"text-x-large\">1</p>\n </div>\n <div class=\"align-center\">\n <p>Predators</p>\n <p class=\"text-x-large\">1</p>\n </div>\n </div>\n </section>\n <footer>\n <p>Final Score</p>\n </footer>\n</article>\n", "notification": { "level": "DEFAULT" }, "menuItems":[ { "action":"CUSTOM", "id":"i_like", "values":[ { "displayName":"I Like!" } ] } ] }

이 요청을 실행하면 사용자는 점수가 이제 1:1로 업데이트되었음을 ​​알 수 있습니다. 그러나 사용자가 Glass를 탭하면 메뉴가 표시됩니다.

지금 "좋아요"를 탭하면 아무 일도 일어나지 않습니다!

나는 이미 애플리케이션과 Glass 장치 사이에 항상 "중간자"가 있다고 언급했습니다. "I Like"를 선택하면 Glass 장치가 정보를 Mirror API로 보내지만 Mirror API가 이 정보를 전달할 위치를 지정하지 않았습니다.

이것은 구독 이 들어오는 곳입니다. 사용자가 작업을 수행할 때 Mirror API에서 알림을 받으려면 구독해야 합니다.

구독을 만들려면 https://www.googleapis.com/mirror/v1/subscriptions 에 대한 POST를 실행해야 합니다.

요청 본문은 다음과 같아야 합니다.

 { "collection":"timeline", "userToken":"toptal_test", "operation": ["INSERT","UPDATE","DELETE"], "callbackUrl": "https://mirrornotifications.appspot.com/forward?url=<YOUR URL>" }

callbackUrl 에는 리디렉션 URL이 포함되어 있습니다.

참고 : 미러 API는 이벤트 데이터가 전달되는 URL에 대해 SSL 암호화가 필요합니다. 그러나 테스트 목적으로 Google은 https://mirrornotifications.appspot.com/forward 에 프록시를 제공했습니다.

미러 API는 구독에서 지정한 URL에 대해 POST를 실행합니다. 해당 URL에 대한 핸들러를 생성하려면 선호하는 개발 환경을 사용해야 합니다. 요청 내용만 출력하는 간단한 JavaScript(NodeJS/ExpressJS) 샘플을 제공했습니다.

 router.get('/notify', function(req, res) { console.log(req); res.send("OK"); });

폐쇄

Google Glass Mirror API는 여러 면에서 고유합니다. 웹 개발자에게 전제 조건 없이 Glass 개발에 액세스할 수 있도록 설계되었으며 Glass OS의 핵심에 포함되어 있으며 타사 개발 도구에 의존하지 않습니다. Mirror API는 Google에서 완전히 관리 및 유지 관리하며 Google API 플랫폼의 일부이므로 안정성 및 확장성에 대한 우려를 덜어줍니다.

Google Glass를 사용해 본 적이 없는 웹 개발자라면 Glass 기기가 필요하다고 생각하거나 Google Glass 개발에 대해 배우는데 많은 시간을 할애해야 한다고 생각하여 Mirror API에 대한 학습을 ​​기피했을 것입니다. 이 Mirror API 튜토리얼이 그러한 장벽을 깨는 데 도움이 되었기를 바랍니다.

웨어러블 기술이 여기 있고 Google Glass가 최전선에 있으며 모든 개발자는 이 기술의 일부가 될 기회를 가져야 합니다. Mirror API는 정확히 그것을 제공합니다.

이 문서에서는 Mirror API 애플리케이션을 인증하고, Google Glass에서 데이터를 읽고, Google Glass로 데이터를 보내고, 사용자로부터 피드백을 받기 위한 도구와 지침을 제공합니다. Mirror API 및 해당 기능에 대한 자세한 내용은 Mirror API 가이드를 참조하십시오.