Учебное пособие по Mirror API: Google Glass для веб-разработчиков

Устройства Android, безусловно, захватывают мир. Тысячи смартфонов, планшетов, смарт-телевизоров и множество других устройств работают на платформе Google с открытым исходным кодом. Вдобавок ко всему, инициатива Google в отношении носимых компьютеров подталкивает мир к совершенно новым высотам. Google Glass — это устройство, которое очень близко к тому, чтобы изменить то, как мы взаимодействуем с технологиями. Очень долгое время мы ходим с опущенными головами, уставившись в экраны наших маленьких телефонов. Google Glass помогают нам поднять голову и гордо ходить, взаимодействуя с нашими носимыми технологиями.

Сначала разработка Android была ограничена только разработчиками, владеющими Java. Большое сообщество разработчиков создавало отличные веб-приложения с использованием других платформ и сталкивалось с большими трудностями при внедрении разработки для Android. Есть несколько подходов, которые развились позже и обеспечили своего рода кросс-платформенную разработку, позволив опытным веб-разработчикам начать создавать приложения для Android без знания Java и Android SDK. Но разве не было бы здорово разрабатывать для Google Glass, не изучая новый язык программирования и даже просто используя знания, общие для веб-разработчиков? Да, это возможно!

Google предоставил облачные службы RESTful, которые позволяют веб-разработчикам создавать Glassware, просто взаимодействуя с веб-службами, размещенными и управляемыми Google. Эти сервисы называются Mirror API и не зависят от платформ разработки. Чтобы начать использовать Mirror API Glass, вам даже не нужно иметь устройство Google Glass, хотя некоторые расширенные функции требуют его наличия.

Есть только две вещи, которые вам нужно знать:

• Выполнить запрос OAuth 2.0 и получить токен аутентификации
• Выполнение HTTP-запроса к предопределенной конечной точке

В этом учебном пособии по разработке Google Glass вы познакомитесь с методами, которые можно использовать для создания приложений для Glass.

Если вы еще не использовали Google Glass, посмотрите эти два видео, так как они должны дать вам достаточно информации для понимания основ пользовательского интерфейса.

• Введение в Google Glass

• Google Glass How-to: начало работы

Еще больше полезных видеороликов по настройке и навигации здесь, а также много других подробностей о пользовательском интерфейсе здесь.

Существует много различий между Mirror API и собственной разработкой Google Glass. Цель этого руководства — не обсуждать эти различия, а предоставить веб-разработчикам представление о том, как работает Google Glass, и как они могут как можно скорее начать работу.

Как работает Mirror API?

Первое и самое важное — вы создаете стандартное веб-приложение. Ваше приложение будет работать на веб-сервере и никогда не будет напрямую взаимодействовать с устройством Google Glass. Вместо этого ваше приложение будет взаимодействовать со службами Mirror API. Приложения на основе Mirror API не требуют установки на самом Glass, и все сервисы уже являются частью операционной системы Glass.

Устройство Google Glass будет запускать собственные службы синхронизации, чтобы отправлять или извлекать контент обратно в ваше приложение через API-интерфейс Mirror.

Вы не можете повлиять на частоту, когда Google Glass проверяет наличие обновлений в Mirror API, а наличие «посредника» требует затрат. Прямым следствием этой архитектуры является то, что вы не можете взаимодействовать с пользователями Glass в реальном времени. Вы всегда должны ожидать задержки между вашим запросом на действие и фактическим выполнением события на устройстве Glass.

Настройка и аутентификация

Чтобы использовать Mirror API для веб-разработки, вам необходимо определить идентификатор приложения в Google Developers Console. Откройте консоль API Google и войдите в свою учетную запись Google.

Создайте свой новый проект; давайте назовем его «Демонстрация Mirror API»

Следующее, что вам нужно сделать, это включить Mirror API для вашего веб-приложения Glass. Для этого нажмите кнопку «Включить API» на странице обзора проекта, найдите в списке Mirror API и включите его.

Затем создайте идентификатор клиента для веб-приложений Glass. Для этого просто нажмите кнопку «Создать новый идентификатор клиента» на экране «Учетные данные».

Примечание . Вас могут попросить заполнить данные «Экран согласия». Данные в этой форме предоставляются пользователю при предоставлении доступа к вашему приложению.

Мы будем тестировать Mirror API, используя Google Glass Playground. Чтобы включить игровую площадку, вам необходимо авторизовать https://mirror-api-playground.appspot.com в качестве действительного источника для HTTP-запросов. В этой демонстрации мы не будем использовать перенаправление OAuth, поэтому вы можете оставить что угодно в поле «URI перенаправления».

Нажмите «Создать идентификатор клиента», и вы готовы сделать свой первый запрос API зеркала.

Аутентификация приложения Mirror API

Важно ! Не путайте свою учетную запись разработчика API Mirror с учетной записью владельца Google Glass. Вы можете выполнить это упражнение только с одной учетной записью, которая является разработчиком и владельцем Glass, но важно помнить о разделении этих двух учетных записей.

Каждый HTTP-запрос, отправленный из вашего веб-приложения Glass в Mirror API, должен быть авторизован. Зеркальный API использует стандартную «Аутентификацию носителя», что означает, что вам необходимо предоставлять токен с каждым запросом. Токен выдается API Google с использованием стандартного протокола OAuth 2.0.

1. Пользователь (владелец Glass) откроет страницу в вашем веб-приложении и нажмет «Войти».
2. Ваше приложение отправит запрос к API Google, и пользователю будет представлен экран согласия, созданный API Google (обычно в новом всплывающем окне).
3. Если вашему приложению предоставлены права доступа, Google API выдаст токен, который вы будете использовать для вызова Mirror API.

Площадка с зеркальным API

Google Glass Playground позволяет вам экспериментировать с тем, как контент отображается на очках. Вы можете использовать его для передачи контента на ваш Glass, но даже если у вас нет устройства, вы можете увидеть, как он будет выглядеть на дисплее Glass.

Площадку Mirror API Playground можно найти по этому URL-адресу.

Мы уже разрешили конечную точку Mirror API Playground в качестве допустимого источника HTTP-запроса. Чтобы использовать игровую площадку, вам необходимо «идентифицировать Mirror API Playground как ваше приложение», указав свой идентификатор клиента. Идентификатор клиента вашего приложения можно найти в Google Developers Console.

Когда вы нажмете «Авторизовать», вам будет представлен экран согласия OAuth 2.0, подобный изображенному ниже. Обратите внимание, что вы должны войти в систему, используя свою учетную запись «Владелец Glass», так как это учетные данные, которые приложение будет использовать для взаимодействия со Glass.

После того, как вы нажмете «Принять», Mirror API Playground будет идентифицирован как ваше собственное приложение; он получит доступ к хронологии пользователя Glass, и вы сможете взаимодействовать с устройством Google Glass с игровой площадки.

Привет исследователям стекла!

Площадка Mirror API заполнена предопределенными шаблонами, которые вы можете использовать для опробования 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, элемент также будет вставлен на временную шкалу.

Написание собственного веб-приложения Mirror API

Поздравляем! Вы выполнили свой первый запрос к Mirror API и отправили сообщение в Google Glass, даже не написав никакого кода.

Давайте сделаем вещи немного интереснее. Мы хотим удалить Mirror API Playground и поставить на его место наше собственное приложение.

Во-первых, нам нужно убедиться, что Google API будет принимать запросы от нашего приложения. Вернитесь в Google Developers Console и добавьте URL вашего приложения в список авторизованных источников JavaScript. Я буду использовать http://localhost:3000 , но вы можете изменить его по своему усмотрению.

Получение токена авторизации

Чтобы выполнить запрос OAuth 2.0 и получить токен авторизации от Google API, мы будем использовать клиентскую библиотеку Google API JavaScript.

Создайте простую HTML-страницу со следующим содержимым, обязательно замените идентификатор клиента идентификатором вашего приложения:

 <!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 (убедитесь, что оно запущено по URL-адресу, который вы указали в качестве авторизованного источника JavaScript в Google Developers Console) и нажимаете «Авторизовать», вы запускаете поток OAuth 2.0. Войдите в свою учетную запись Google, и ваш токен отобразится в консоли браузера.

Теперь, вооружившись своим токеном, вы готовы начать публикацию в Mirror API! Срок действия вашего токена истекает через 60 минут, но этого времени должно быть более чем достаточно для завершения демонстрации. Вы всегда можете получить другой токен, снова нажав «Авторизовать».

Службы RESTful и HTTP-запросы являются общими терминами для всех веб-разработчиков, независимо от того, какую платформу разработки или язык программирования они используют. Чтобы попробовать эту демонстрацию, вам потребуется выполнить стандартные HTTP-запросы к конечным точкам Mirror API. Я предпочитаю использовать для этого Postman. Не стесняйтесь взять детали запроса и реализовать демонстрацию на вашем любимом языке программирования. Используйте Postman или любой другой клиентский инструмент HTTP.

Получение элементов временной шкалы

Вы всегда можете получить список элементов, которые вы отправили на Glass, выполнив HTTP GET для https://www.googleapis.com/mirror/v1/timeline .

Каждый запрос к Mirror API должен быть авторизован. Токен авторизации отправляется как значение в HTTP-заголовке авторизации с префиксом слова «Bearer».

В 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" } } ] }

Если вы посмотрите на содержание ответа, вы заметите, что он содержит элемент, который вы разместили на игровой площадке.

Создание нового элемента

Чтобы создать новый элемент, вам нужно выполнить POST на https://www.googleapis.com/mirror/v1/timeline . Вам также нужно будет указать, что Content-Type — это application/json , и предоставить заголовок Authorization , как и в предыдущем примере.

Предположим, что мы большие любители спорта, и наша любимая команда Чужие играет с Хищниками. Мы хотим использовать 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 и нажать кнопку «Обновить элементы временной шкалы». Вы должны увидеть два элемента точно так же, как они будут отображаться на стеклянном дисплее. Оба элемента будут перечислены, если вы выполните первый пример и ПОЛУЧИТЕ элементы.

Если вы посмотрите на содержание ответа из предыдущего примера, вы можете найти строку, похожую на

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

Mirror API будет назначать глобально уникальный идентификатор каждому элементу при его вставке. Этот идентификатор будет включен в ответ после выполнения POST и будет включен в сведения об элементе, когда вы выполните GET для отображения элементов временной шкалы.

Допустим, «Хищники» повели в счете и забили. Чтобы обновить счет, вам нужно будет выполнить PUT для https://www.googleapis.com/mirror/v1/timeline , а затем 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, чтобы попробовать этот пример.

Итак, игра продолжается и Чужие забивают со счетом 1:1. Мы хотим включить какую-то функцию «Мне нравится», когда пользователи смогут выполнять простые действия, просматривая элемент временной шкалы.

Во-первых, нам нужно добавить на нашу карточку меню, показывающее счет. Следуя шагам из предыдущего примера, обновите элемент временной шкалы со следующим содержимым:

 { "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 отправит информацию в Mirror API, но вы не указали, куда Mirror API должен пересылать эту информацию.

Здесь на помощь приходят подписки . Вам нужно подписаться, чтобы получать уведомления от Mirror API, когда ваш пользователь выполняет какое-либо действие.

Чтобы создать подписку, вам нужно выполнить POST на https://www.googleapis.com/mirror/v1/subscriptions .

Тело запроса должно быть таким:

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

callbackUrl содержит ваш URL-адрес перенаправления.

Примечание . Зеркальный API требует SSL-шифрования для URL-адреса, на который пересылаются данные о событиях. Однако для целей тестирования Google предоставил прокси по адресу https://mirrornotifications.appspot.com/forward .

Зеркальный API выполнит POST для URL-адреса, указанного в подписке. Вам нужно будет использовать предпочтительную среду разработки, чтобы создать обработчик для этого 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, вы, вероятно, избегали изучения Mirror API, потому что думали, что вам нужно иметь устройство Glass, или думали, что вам нужно будет потратить много времени на изучение разработки Google Glass. Я надеюсь, что это руководство по Mirror API помогло вам преодолеть этот барьер и подтолкнуло вас потратить несколько минут на изучение этого типа разработки.

Носимые технологии уже здесь, Google Glass находятся на переднем крае, и у каждого разработчика должен быть шанс стать его частью. Зеркальный API дает вам именно это.

В этой статье приведены инструменты и инструкции для проверки подлинности приложения Mirror API, чтения данных из Google Glass, отправки данных в Google Glass и получения отзывов от пользователя. Чтобы узнать больше о Mirror API и его функциях, посетите Руководства по Mirror API.