Samouczek Mirror API: Google Glass dla programistów internetowych

Urządzenia z Androidem z pewnością podbijają świat. Tysiące smartfonów, tabletów, telewizorów smart i cała masa innych urządzeń jest obsługiwana przez platformę Google typu open source. Co więcej, zachęta Google do korzystania z urządzeń do noszenia na ciele pcha świat na zupełnie nowe wyżyny. Google Glass to urządzenie, które jest bardzo bliskie zmiany sposobu, w jaki wchodzimy w interakcję z technologią. Przez bardzo długi czas chodziliśmy ze spuszczonymi głowami, wpatrując się w nasze małe ekrany telefonów. Google Glass pomaga nam podnosić głowy i chodzić dumnie podczas interakcji z naszą technologią do noszenia.

Początkowo rozwój Androida był ograniczony tylko do programistów, którzy znali Javę. Duża społeczność programistów tworzyła świetne aplikacje internetowe przy użyciu innych platform i miała duże trudności z przyjęciem rozwoju Androida. Istnieje kilka podejść, które ewoluowały później i zapewniały pewien rodzaj rozwoju międzyplatformowego, umożliwiając doświadczonym programistom internetowym rozpoczęcie tworzenia aplikacji na Androida bez znajomości języka Java i Android SDK. Ale czy nie byłoby wspaniale rozwijać się dla Google Glass bez nauki nowego języka programowania, a nawet korzystając z wiedzy wspólnej dla twórców stron internetowych? Tak to mozliwe!

Firma Google dostarczyła usługi RESTful oparte na chmurze, które umożliwiają programistom internetowym tworzenie Glassware, po prostu poprzez interakcję z usługami internetowymi hostowanymi i zarządzanymi przez Google. Usługi te noszą nazwę Mirror API i są niezależne od platform programistycznych. Aby zacząć korzystać z Mirror API Glass, nie musisz nawet posiadać urządzenia Google Glass, chociaż niektóre zaawansowane funkcje wymagają jego posiadania.

Są tylko dwie rzeczy, które musisz wiedzieć:

• Wykonaj żądanie OAuth 2.0 i uzyskaj token uwierzytelniania
• Wykonaj żądanie HTTP do predefiniowanego punktu końcowego

Ten samouczek programistyczny Google Glass przedstawi techniki, których możesz użyć do tworzenia aplikacji dla Glass.

Jeśli nadal nie korzystasz z Google Glass, obejrzyj te dwa filmy, ponieważ powinny one dostarczyć wystarczających informacji, aby zrozumieć podstawy interfejsu użytkownika.

• Wprowadzenie do Google Glass

• Instrukcje dotyczące Google Glass: Pierwsze kroki

Tutaj znajdziesz jeszcze więcej przydatnych filmów dotyczących konfiguracji i nawigacji, a także wiele innych szczegółów dotyczących interfejsu użytkownika.

Istnieje wiele różnic między Mirror API a natywnym rozwojem Google Glass. Celem tego samouczka nie jest dyskusja na temat tych różnic, ale zapewnienie programistom internetowym wglądu w to, jak działa Google Glass i w jaki sposób mogą oni jak najszybciej do niego dołączyć.

Jak działa Mirror API?

Pierwszą i najważniejszą rzeczą jest to, że budujesz standardową aplikację internetową. Twoja aplikacja będzie działać na serwerze internetowym i nigdy nie będzie wchodzić w bezpośrednią interakcję z urządzeniem Google Glass. Zamiast tego Twoja aplikacja będzie współdziałać z usługami Mirror API. Aplikacje oparte na Mirror API nie wymagają żadnej instalacji na samym Glass, a wszystkie usługi są już częścią Glass OS.

Urządzenie Google Glass będzie uruchamiać własne usługi synchronizacji, aby wypychać lub pobierać zawartość z powrotem do Twojej aplikacji za pośrednictwem interfejsu Mirror API.

Nie ma wpływu na częstotliwość sprawdzania przez Google Glass dostępności aktualizacji w interfejsie Mirror API, a posiadanie „pośrednika” wiąże się z pewnymi kosztami. Bezpośrednią konsekwencją tej architektury jest brak interakcji z użytkownikami Glass w czasie rzeczywistym. Zawsze należy spodziewać się opóźnienia między żądaniem wykonania działania a faktycznym wykonaniem zdarzenia na urządzeniu Glass.

Konfiguracja i uwierzytelnianie

Aby używać Mirror API do tworzenia stron internetowych, musisz zdefiniować tożsamość aplikacji w Google Developers Console. Otwórz konsolę interfejsów API Google i zaloguj się na swoje konto Google.

Stwórz swój nowy projekt; nazwijmy to „Mirror API Demo”

Następną rzeczą, którą musisz zrobić, to włączyć Mirror API dla swojej aplikacji internetowej Glass. Aby to zrobić, kliknij przycisk „Włącz API” na stronie przeglądu projektu, znajdź na liście Mirror API i włącz go.

Następnie utwórz Client ID dla aplikacji webowych Glass. Aby to zrobić, po prostu kliknij przycisk "Utwórz nowy identyfikator klienta" na ekranie Poświadczenia.

Uwaga : Możesz zostać poproszony o wypełnienie szczegółów „Ekranu zgody”. Dane w tym formularzu są prezentowane użytkownikowi podczas przyznawania dostępu do Twojej aplikacji.

Przetestujemy Mirror API za pomocą Google Glass Playground. Aby włączyć Plac zabaw, musisz autoryzować https://mirror-api-playground.appspot.com jako prawidłowe źródło dla żądań HTTP. W tym demo nie będziemy używać przekierowania OAuth, więc możesz zostawić wszystko w polu „Redirect URIs”.

Kliknij „Utwórz identyfikator klienta” i możesz wykonać pierwsze żądanie Mirror API.

Uwierzytelnianie aplikacji Mirror API

Ważne : nie pomyl swojego konta Mirror API Developer z kontem właściciela Google Glass. Możesz wykonać to ćwiczenie z tylko jednym kontem, które jest deweloperem i właścicielem Glass, ale ważne jest, aby mieć świadomość rozdzielenia tych dwóch kont.

Każde żądanie HTTP wysyłane z Twojej aplikacji internetowej Glass do Mirror API musi zostać autoryzowane. Mirror API korzysta ze standardowego „Bearer Authentication”, co oznacza, że ​​przy każdym żądaniu musisz podać token. Token jest wystawiany przez Google API przy użyciu standardowego protokołu OAuth 2.0.

1. Użytkownik (Właściciel szkła) otworzy stronę w Twojej aplikacji internetowej i kliknie „Zaloguj się”
2. Twoja aplikacja wyśle ​​żądanie do Google API, a użytkownikowi zostanie wyświetlony ekran akceptacji wygenerowany przez Google API (zwykle w nowym oknie popup)
3. Jeśli uprawnienia dostępu zostaną przyznane Twojej aplikacji, interfejs Google API wystawi token, którego będziesz używać do wywoływania interfejsu Mirror API

Plac zabaw z lustrzanym interfejsem API

Google Glass Playground pozwala eksperymentować z wyświetlaniem treści na szkle. Możesz go używać do przesyłania treści do Glass, ale nawet jeśli nie masz urządzenia, możesz zobaczyć, jak będzie wyglądało na wyświetlaczu Glass.

Mirror API Playground można znaleźć pod tym adresem URL.

Zezwoliliśmy już na punkt końcowy Mirror API Playground jako prawidłowe źródło żądania HTTP. Aby korzystać z Playground, musisz „zidentyfikować Mirror API Playground jako swoją aplikację”, podając swój identyfikator klienta. Identyfikator klienta aplikacji znajdziesz w Google Developers Console.

Po kliknięciu „Autoryzuj” zostanie wyświetlony ekran akceptacji OAuth 2.0, podobny do poniższego obrazu. Należy pamiętać, że należy zalogować się przy użyciu konta „Właściciel szkła”, ponieważ są to dane uwierzytelniające, których aplikacja będzie używać do interakcji z urządzeniem Glass.

Po kliknięciu „Akceptuj” Mirror API Playground zostanie zidentyfikowany jako Twoja własna aplikacja; uzyska dostęp do Osi czasu użytkownika Glass, a Ty będziesz mógł wchodzić w interakcję z urządzeniem Google Glass z poziomu Placu Zabaw.

Witajcie odkrywcy szkła!

Plac zabaw Mirror API jest wypełniony wstępnie zdefiniowanymi szablonami, których możesz użyć do wypróbowania interfejsu API. Przewiń listę i znajdź przykład, który najbardziej Ci się podoba. Do tego demo wybrałem kartę „Hello Explorers”.

Wybrany element zostanie wyświetlony w Playground wraz z treścią treści żądania HTTP użytą do skonstruowania jego układu.

 { "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" } }

Możesz modyfikować prośbę, a gdy jesteś zadowolony z projektu, kliknij przycisk „Wstaw element”. Po przetworzeniu wniosku Twoja „Oś czasu” zostanie zaktualizowana. Jeśli masz urządzenie Glass, element zostanie również wstawiony na osi czasu.

Pisanie własnej aplikacji internetowej Mirror API

Gratulacje! Wykonałeś swoje pierwsze żądanie Mirror API i wysłałeś wiadomość do Google Glass, nawet nie pisząc żadnego kodu.

Sprawmy, by sprawy były trochę ciekawsze. Chcemy usunąć Mirror API Playground i umieścić w jego miejscu własną aplikację.

Po pierwsze, musimy upewnić się, że Google API będzie akceptować żądania z naszej aplikacji. Wróć do Google Developers Console i dodaj adres URL swojej aplikacji do listy autoryzowanych źródeł JavaScript. Użyję http://localhost:3000 , ale możesz to zmodyfikować do swojej własnej konfiguracji.

Uzyskanie tokena autoryzacyjnego

Aby wykonać żądanie OAuth 2.0 i uzyskać token autoryzacyjny z Google API, użyjemy biblioteki klienta Google API JavaScript Client Library.

Utwórz prostą stronę HTML o następującej treści, pamiętaj o zastąpieniu identyfikatora CLIENT ID identyfikatorem aplikacji:

 <!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>

Po uruchomieniu aplikacji Google Glass (upewnij się, że działa ona pod adresem URL określonym jako autoryzowane źródło JavaScript w Google Developers Console) i kliknięciu „Autoryzuj”, uruchomisz przepływ OAuth 2.0. Zaloguj się na swoje konto Google, a Twój token zostanie wyświetlony w konsoli przeglądarki.

Teraz, uzbrojony w swój token, możesz zacząć publikować w Mirror API! Twój token wygaśnie za 60 minut, ale to powinno wystarczyć na ukończenie demo. Zawsze możesz otrzymać kolejny token, ponownie klikając „Autoryzuj”.

Usługi RESTful i żądania HTTP są wspólnymi terminami wśród wszystkich programistów stron internetowych, bez względu na używaną platformę programistyczną lub język programowania. Aby wypróbować tę wersję demonstracyjną, musisz wykonać standardowe żądania HTTP w kierunku punktów końcowych Mirror API. Zdecydowałem się użyć do tego Listonosza. Zachęcamy do zapoznania się ze szczegółami żądania i zaimplementowania wersji demonstracyjnej w swoim ulubionym języku programowania. Użyj Postmana lub dowolnego innego narzędzia klienta HTTP.

Uzyskiwanie elementów osi czasu

Zawsze możesz pobrać listę elementów przesłanych do Glass, wykonując HTTP GET na https://www.googleapis.com/mirror/v1/timeline .

Każde żądanie skierowane do Mirror API musi zostać autoryzowane. Token autoryzacyjny jest wysyłany jako wartość w nagłówku HTTP autoryzacji, poprzedzona słowem „Bearer”.

W Postmanie wyglądałoby to mniej więcej tak:

Jeśli wykonasz żądanie, odpowiedź powinna być podobna do tej:

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

Jeśli spojrzysz na treść odpowiedzi, zauważysz, że zawiera ona element, który wysłałeś z Placu zabaw.

Tworzenie nowego przedmiotu

Aby utworzyć nowy element, musisz wykonać POST na https://www.googleapis.com/mirror/v1/timeline . Musisz również określić, że Content-Type to application/json i podać nagłówek Authorization , tak jak w poprzednim przykładzie.

Załóżmy, że jesteśmy wielkimi fanami sportu, a naszą ulubioną drużyną Aliens grają Predators. Chcemy użyć Mirror API do wysyłania wyników do wszystkich fanów.

Treść żądania powinna wyglądać tak.

 { "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" } }

A ekran Listonosza powinien być podobny do tego.

Po wykonaniu żądania Mirror API powinien dostarczyć odpowiedź podobną do tej.

 { 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" } }

Nawet jeśli nie masz Google Glass, możesz wrócić do Mirror API Playground i kliknąć przycisk „Reload Timeline Items”. Powinieneś zobaczyć dwa przedmioty, dokładnie tak, jak byłyby wyświetlane na szklanym wyświetlaczu. Oba elementy zostaną wyświetlone, jeśli wykonasz pierwszy przykład i pobierzesz elementy.

Jeśli spojrzysz na treść odpowiedzi z poprzedniego przykładu, możesz znaleźć linię podobną do

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

Mirror API przypisze globalnie unikalny identyfikator do każdego elementu po jego wstawieniu. Ten identyfikator zostanie uwzględniony w odpowiedzi po wykonaniu testu POST i zostanie uwzględniony w szczegółach elementu podczas wykonywania polecenia GET w celu wyświetlenia elementów na osi czasu.

Powiedzmy, że Predators objęli prowadzenie i strzelili bramki. Aby zaktualizować wynik, musisz wykonać PUT na https://www.googleapis.com/mirror/v1/timeline , a następnie ID. Podobny do

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

Zmodyfikuj zawartość elementu, aby odzwierciedlić swoją zmianę.

 { "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" } }

Konfiguracja listonosza powinna wyglądać podobnie.

Po wykonaniu żądania i sprawdzeniu zawartości osi czasu, powinieneś zauważyć, że Predators prowadzą 1:0.

Menu i interakcja z użytkownikiem

Do tej pory po prostu przesyłaliśmy zawartość do Glass, bez jakiejkolwiek interakcji lub informacji zwrotnej od użytkownika. Niestety, nie można symulować interakcji użytkownika i aby wypróbować ten przykład, trzeba będzie użyć prawdziwego urządzenia Glass.

Tak więc gra toczy się dalej, a Obcy zdobywają punkty 1:1. Chcemy włączyć pewnego rodzaju funkcję „Lubię”, dzięki której użytkownicy będą mogli wykonywać proste czynności, patrząc na element osi czasu.

Najpierw musimy dodać menu do naszej karty pokazującej wynik. Wykonując kroki z poprzedniego przykładu, zaktualizuj element osi czasu o następującą zawartość:

 { "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!" } ] } ] }

Po wykonaniu tego żądania użytkownik zobaczy, że wynik został zaktualizowany do 1:1. Ale kiedy użytkownik dotknie Glassa, wyświetli się menu.

Jeśli teraz dotkniesz „Lubię”, nic się nie stanie!

Wspomniałem już, że pomiędzy Twoją aplikacją a urządzeniem Glass zawsze jest „człowiek pośredni”. Gdy wybierzesz „Lubię”, urządzenie Glass wyśle ​​informacje do Mirror API, ale nie określiłeś, gdzie Mirror API ma przekazywać te informacje.

W tym miejscu pojawiają się subskrypcje . Musisz zasubskrybować, aby otrzymywać powiadomienia z Mirror API, gdy użytkownik wykona jakąś akcję.

Aby utworzyć subskrypcję, musisz wykonać POST na https://www.googleapis.com/mirror/v1/subscriptions .

Treść żądania powinna wyglądać tak:

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

callbackUrl zawiera adres URL przekierowania.

Uwaga : Mirror API wymaga szyfrowania SSL dla adresu URL, na który przekazywane są dane zdarzeń. Jednak do celów testowych firma Google udostępniła serwer proxy pod https://mirrornotifications.appspot.com/forward .

Mirror API wykona POST do adresu URL określonego w subskrypcji. Będziesz musiał użyć preferowanego środowiska programistycznego, aby utworzyć procedurę obsługi dla tego adresu URL. Dostarczyłem prosty przykład JavaScript (NodeJS/ExpressJS), który po prostu wyświetli zawartość żądania.

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

Zamknięcie

Interfejs API Google Glass Mirror jest wyjątkowy pod wieloma względami. Zaprojektowany, aby dać twórcom stron internetowych dostęp do rozwoju Glass bez żadnych wymagań wstępnych, jest zawarty w rdzeniu Glass OS i nie opiera się na narzędziach programistycznych innych firm. Mirror API jest w pełni zarządzany i utrzymywany przez Google i jest częścią platformy Google API, co uwalnia Cię od wszelkich obaw dotyczących stabilności i skalowalności.

Jeśli jesteś programistą internetowym, który nigdy nie korzystał z Google Glass, prawdopodobnie unikałeś nauki o Mirror API, ponieważ myślałeś, że potrzebujesz urządzenia Glass, lub myślałeś, że będziesz musiał poświęcić dużo czasu na naukę programowania Google Glass. Mam nadzieję, że ten samouczek Mirror API pomógł ci przełamać tę barierę i zachęcił cię do spędzenia kilku minut na przyglądaniu się tego typu programowaniu.

Technologia do noszenia jest tutaj, Google Glass jest na granicy, a każdy programista powinien mieć szansę być jej częścią. Mirror API dokładnie to daje.

Ten artykuł zawiera narzędzia i instrukcje dotyczące uwierzytelniania aplikacji Mirror API, odczytywania danych z Google Glass, wysyłania danych do Google Glass i otrzymywania opinii od użytkownika. Aby dowiedzieć się więcej o Mirror API i jego funkcjach, odwiedź Przewodniki Mirror API.