Tutoriel de l'API miroir : Google Glass pour les développeurs Web

Les appareils Android sont certainement en train de conquérir le monde. Des milliers de smartphones, tablettes, téléviseurs intelligents et tout un tas d'autres appareils sont alimentés par la plate-forme open source de Google. En plus de cela, l'incitation informatique portable de Google pousse le monde vers de nouveaux sommets. Google Glass est un appareil qui est sur le point de changer la façon dont nous interagissons avec la technologie. Pendant très longtemps, nous avons marché la tête baissée, les yeux rivés sur nos petits écrans de téléphone. Google Glass nous aide à lever la tête et à marcher fièrement tout en interagissant avec notre technologie portable.

Au début, le développement d'Android était limité aux seuls développeurs connaissant Java. Une grande communauté de développeurs construisait d'excellentes applications Web à l'aide d'autres plates-formes et rencontrait de grandes difficultés pour adopter le développement Android. Il existe quelques approches qui ont évolué plus tard et ont fourni une sorte de développement multiplateforme, permettant aux développeurs Web avertis de commencer à créer des applications pour Android sans connaissance de Java et du SDK Android. Mais ne serait-il pas formidable de développer pour Google Glass sans apprendre un nouveau langage de programmation, et même en utilisant simplement les connaissances communes aux développeurs Web ? Oui c'est possible!

Google a fourni des services RESTful basés sur le cloud qui permettent aux développeurs Web de créer Glassware, simplement en interagissant avec les services Web hébergés et gérés par Google. Ces services sont nommés Mirror API, et sont indépendants des plateformes de développement. Pour commencer à utiliser l'API Glass's Mirror, vous n'avez même pas besoin de posséder un appareil Google Glass, bien que certaines fonctionnalités avancées nécessitent que vous en ayez un.

Il n'y a que deux choses que vous devez savoir :

• Exécuter la requête OAuth 2.0 et obtenir le jeton d'authentification
• Exécuter la requête HTTP vers un point de terminaison prédéfini

Ce didacticiel de développement Google Glass vous présentera des techniques que vous pouvez utiliser pour créer des applications pour Glass.

Si vous n'avez toujours pas utilisé Google Glass, jetez un œil à ces deux vidéos, car elles devraient vous donner suffisamment d'informations pour comprendre les bases de l'interface utilisateur.

• Présentation de Google Glass

• Guide pratique Google Glass : Premiers pas

Il y a encore plus de vidéos utiles pour la configuration et la navigation ici, et beaucoup plus de détails sur l'interface utilisateur ici.

Il existe de nombreuses différences entre l'API Mirror et le développement natif de Google Glass. Le but de ce didacticiel n'est pas de débattre de ces différences, mais de fournir aux développeurs Web un aperçu du fonctionnement de Google Glass et de la manière dont ils peuvent s'y mettre le plus rapidement possible.

Comment fonctionne une API miroir ?

La première chose, et la plus importante, est que vous construisez une application Web standard. Votre application s'exécutera sur un serveur Web et n'interagira jamais directement avec un appareil Google Glass. Au lieu de cela, votre application interagira avec les services de l'API miroir. Les applications basées sur l'API miroir ne nécessitent aucune installation sur le Glass lui-même, et tous les services font déjà partie du système d'exploitation Glass.

L'appareil Google Glass exécutera ses propres services de synchronisation pour envoyer ou retirer du contenu vers votre application via l'API Mirror.

Vous ne pouvez pas influer sur la fréquence à laquelle Google Glass vérifie les mises à jour sur l'API Mirror, et le fait d'avoir «l'intermédiaire» a un coût. La conséquence directe de cette architecture est que vous ne pouvez pas avoir d'interaction en temps réel avec les utilisateurs de Glass. Vous devez toujours vous attendre à un délai entre votre demande d'action et l'événement réel en cours d'exécution sur l'appareil Glass.

Configuration et authentification

Afin d'utiliser l'API Mirror pour le développement Web, vous devez définir une identité d'application sur la Google Developers Console. Ouvrez la console des API Google et connectez-vous avec votre compte Google.

Créez votre nouveau projet; appelons-le "Mirror API Demo"

La prochaine chose que vous devez faire est d'activer l'API miroir pour votre application Web Glass. Pour ce faire, cliquez sur le bouton "Activer une API" dans la page de présentation du projet, recherchez l'API miroir dans la liste et activez-la.

Ensuite, créez un ID client pour les applications Web Glass. Pour ce faire, cliquez simplement sur le bouton "Créer un nouvel ID client" dans l'écran des informations d'identification.

Remarque : Il se peut que vous soyez invité à renseigner les détails de l'"écran de consentement". Les données de ce formulaire sont présentées à un utilisateur lors de l'octroi de l'accès à votre application.

Nous testerons l'API Mirror à l'aide de Google Glass Playground. Pour activer le Playground, vous devrez autoriser https://mirror-api-playground.appspot.com comme origine valide pour les requêtes HTTP. Nous n'utiliserons pas la redirection OAuth dans cette démo, vous pouvez donc laisser n'importe quoi dans le champ "URI de redirection".

Cliquez sur "Créer un ID client" et vous êtes prêt à faire votre première demande d'API miroir.

Authentification de l'application de l'API miroir

Important : Ne confondez pas votre compte Mirror API Developer avec votre compte propriétaire Google Glass. Vous pouvez faire cet exercice avec un seul compte qui est un développeur et un propriétaire de Glass, mais il est important d'être conscient de la séparation de ces deux comptes.

Chaque requête HTTP envoyée de votre application Web Glass à l'API Mirror doit être autorisée. L'API miroir utilise une "authentification au porteur" standard, ce qui signifie que vous devez fournir un jeton avec chaque demande. Le jeton est émis par l'API Google à l'aide du protocole standard OAuth 2.0.

1. L'utilisateur (Glass Owner) ouvrira une page sur votre application Web et cliquera sur "Connexion"
2. Votre application émettra une demande à l'API Google, et l'utilisateur se verra présenter un écran de consentement généré par l'API Google (généralement dans un nouvel écran contextuel)
3. Si des autorisations d'accès sont accordées à votre application, l'API Google émettra un jeton que vous utiliserez pour appeler l'API Mirror.

Mise en miroir de l'API Playground

Le Google Glass Playground vous permet d'expérimenter la façon dont le contenu est affiché sur un verre. Vous pouvez l'utiliser pour pousser du contenu sur votre verre, mais même si vous n'avez pas d'appareil, vous pouvez voir à quoi il ressemblerait sur l'écran du verre.

Mirror API Playground se trouve à cette URL.

Nous avons déjà autorisé le point de terminaison Mirror API Playground comme origine de requête HTTP valide. Pour utiliser Playground, vous devrez "identifier Mirror API Playground comme votre application" en fournissant votre ID client. Vous pouvez trouver l'ID client de votre application dans Google Developers Console.

Lorsque vous cliquez sur "Autoriser", un écran de consentement OAuth 2.0, similaire à l'image ci-dessous, s'affiche. Veuillez noter que vous devez vous connecter en utilisant votre compte « Glass Owner », car ce sont les informations d'identification que l'application utilisera pour interagir avec le Glass.

Après avoir cliqué sur "Accepter", Mirror API Playground sera identifié comme votre propre application ; il obtiendra l'accès à la chronologie des verres de l'utilisateur et vous pourrez interagir avec l'appareil Google Glass depuis le Playground.

Bonjour les explorateurs de verre !

Le Mirror API Playground est rempli de modèles prédéfinis que vous pouvez utiliser pour essayer l'API. Faites défiler la liste et trouvez un exemple que vous aimez le plus. Pour cette démo j'ai choisi la carte "Hello Explorers".

L'élément sélectionné sera affiché dans le Playground, avec le contenu du corps de la requête HTTP utilisé pour construire sa mise en page.

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

N'hésitez pas à modifier la demande, et lorsque vous êtes satisfait de la conception, cliquez sur le bouton "Insérer un élément". Une fois la demande traitée, votre « Chronologie » sera mise à jour. Si vous avez un appareil Glass, l'élément sera également inséré dans la chronologie.

Écrire votre propre application Web d'API miroir

Toutes nos félicitations! Vous avez exécuté votre première demande d'API Mirror et envoyé un message à vos Google Glass, sans même écrire de code.

Rendons les choses un peu plus intéressantes. Nous voulons supprimer le Mirror API Playground et mettre notre propre application à sa place.

Tout d'abord, nous devons nous assurer que l'API Google acceptera les requêtes de notre application. Revenez à Google Developers Console et ajoutez l'URL de votre application à la liste des origines JavaScript autorisées. J'utiliserai http://localhost:3000 mais vous pouvez le modifier selon votre propre configuration.

Obtenir le jeton d'autorisation

Pour exécuter la demande OAuth 2.0 et obtenir un jeton d'autorisation de l'API Google, nous utiliserons la bibliothèque client JavaScript de l'API Google.

Créez une page HTML simple avec le contenu suivant, assurez-vous de remplacer CLIENT ID par votre ID d'application :

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

Lorsque vous démarrez l'application Google Glass (assurez-vous qu'elle s'exécute sur l'URL que vous avez spécifiée comme origine JavaScript autorisée dans Google Developers Console) et que vous cliquez sur "Autoriser", vous lancerez le flux OAuth 2.0. Connectez-vous avec votre compte Google et votre jeton sera affiché dans la console du navigateur.

Maintenant, armé de votre jeton, vous êtes prêt à commencer à publier sur l'API Mirror ! Votre jeton expirera dans 60 minutes, mais cela devrait être plus que suffisant pour terminer la démo. Vous pouvez toujours obtenir un autre jeton en cliquant à nouveau sur "Autoriser".

Les services RESTful et les requêtes HTTP sont des termes communs à tous les développeurs Web, quelle que soit la plate-forme de développement ou le langage de programmation qu'ils utilisent. Pour essayer cette démo, vous devrez exécuter des requêtes HTTP standard vers les points de terminaison de l'API miroir. J'ai choisi d'utiliser le facteur pour cela. N'hésitez pas à prendre les détails de la demande et à implémenter la démo dans votre langage de programmation préféré. Utilisez Postman ou tout autre outil client HTTP.

Obtenir les éléments de la chronologie

Vous pouvez toujours récupérer la liste des éléments que vous avez transmis à Glass en exécutant HTTP GET sur https://www.googleapis.com/mirror/v1/timeline .

Chaque requête vers l'API Mirror doit être autorisée. Un jeton d'autorisation est envoyé en tant que valeur dans l'en-tête HTTP d'autorisation, préfixé par le mot "Bearer".

Dans Postman, cela ressemblerait à ceci :

Si vous exécutez la requête, la réponse devrait ressembler à ceci :

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

Si vous jetez un coup d'œil au contenu de la réponse, vous remarquerez qu'elle contient l'élément que vous avez publié depuis Playground.

Création d'un nouvel élément

Pour créer un nouvel élément, vous devez exécuter POST sur https://www.googleapis.com/mirror/v1/timeline . Vous devrez également spécifier que Content-Type est application/json et fournir l'en-tête Authorization , comme dans l'exemple précédent.

Supposons que nous soyons de grands fans de sport et que notre équipe préférée, les Aliens, joue contre les Predators. Nous voulons utiliser l'API Mirror pour envoyer les résultats à tous les fans.

Le corps de la requête devrait ressembler à ceci.

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

Et l'écran Postman devrait être similaire à celui-ci.

Lorsque vous exécutez la requête, l'API miroir doit fournir une réponse similaire à celle-ci.

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

Même si vous n'avez pas de Google Glass, vous pouvez revenir au Mirror API Playground et cliquer sur le bouton "Reload Timeline Items". Vous devriez voir deux éléments, exactement tels qu'ils seraient affichés sur l'écran en verre. Les deux éléments seront répertoriés si vous exécutez le premier exemple et obtenez les éléments.

Si vous regardez le contenu de la réponse de l'exemple précédent, vous pouvez trouver une ligne similaire à

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

L'API miroir attribuera un ID unique au monde à chaque élément lors de son insertion. Cet ID sera inclus dans la réponse après l'exécution de POST, et il sera inclus dans les détails de l'élément lorsque vous exécuterez GET pour répertorier les éléments de la chronologie.

Disons que les Predators ont pris les devants et ont marqué. Afin de mettre à jour le score, vous devrez exécuter PUT sur https://www.googleapis.com/mirror/v1/timeline suivi de l'ID. Semblable à

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

Modifiez le contenu de l'élément pour refléter votre changement.

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

La configuration de Postman devrait ressembler à ceci.

Après avoir exécuté la demande et vérifié le contenu de votre chronologie, vous devriez remarquer que les Predators mènent de 1:0.

Menus et interaction avec l'utilisateur

Jusqu'à présent, nous poussions simplement le contenu vers le verre, sans aucune interaction ni rétroaction de l'utilisateur. Malheureusement, vous ne pouvez pas simuler l'interaction de l'utilisateur et vous devrez utiliser un véritable appareil Glass pour essayer cet exemple.

Ainsi, le jeu continue et les Aliens marquent pour 1:1. Nous voulons activer une sorte de fonctionnalité "J'aime", où les utilisateurs pourront exécuter une action simple tout en regardant un élément de la chronologie.

Tout d'abord, nous devons ajouter le menu à notre carte indiquant le score. En suivant les étapes de l'exemple précédent, mettez à jour l'élément de chronologie avec le contenu suivant :

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

Lorsque vous exécutez cette requête, votre utilisateur verra que le score est maintenant mis à jour à 1:1. Mais lorsque l'utilisateur appuie sur le verre, un menu sera présenté.

Si vous appuyez maintenant sur "J'aime", rien ne se passera !

J'ai déjà mentionné qu'il y a toujours un "intermédiaire" entre votre application et un appareil Glass. Lorsque vous sélectionnez "J'aime", l'appareil Glass enverra les informations à l'API Mirror, mais vous n'avez pas spécifié où l'API Mirror doit transmettre ces informations.

C'est là qu'interviennent les abonnements . Vous devez vous abonner pour recevoir des notifications de l'API miroir lorsque votre utilisateur effectue une action.

Pour créer un abonnement, vous devez exécuter un POST sur https://www.googleapis.com/mirror/v1/subscriptions .

Le corps de la requête devrait ressembler à ceci :

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

callbackUrl contient votre URL de redirection.

Remarque : L'API miroir nécessite un cryptage SSL pour l'URL où les données d'événement sont transmises. Cependant, à des fins de test, Google a fourni un proxy sur https://mirrornotifications.appspot.com/forward .

L'API miroir exécutera POST sur l'URL que vous avez spécifiée dans un abonnement. Vous devrez utiliser votre environnement de développement préféré pour créer un gestionnaire pour cette URL. J'ai fourni l'exemple JavaScript simple (NodeJS/ExpressJS) qui affichera simplement le contenu de la requête.

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

Fermeture

L'API Google Glass Mirror est unique à bien des égards. Conçu pour permettre aux développeurs Web d'accéder au développement de Glass sans aucun prérequis, il est inclus dans le cœur de Glass OS et ne repose pas sur des outils de développement tiers. L'API miroir est entièrement gérée et maintenue par Google, et fait partie de la plate-forme d'API Google, ce qui vous soulage de toute préoccupation concernant la stabilité et l'évolutivité.

Si vous êtes un développeur Web qui n'a jamais utilisé Google Glass, vous avez probablement évité de vous renseigner sur l'API Mirror parce que vous pensiez avoir besoin d'un appareil Glass ou que vous auriez besoin de passer beaucoup de temps à apprendre le développement de Google Glass. J'espère que ce tutoriel sur l'API Mirror vous a aidé à briser cette barrière et vous a donné un coup de pouce pour passer quelques minutes à regarder ce type de développement.

La technologie portable est là, Google Glass est à la frontière et chaque développeur devrait avoir la chance d'en faire partie. L'API miroir vous donne exactement cela.

Cet article vous donne des outils et des instructions pour authentifier votre application d'API Mirror, lire les données de Google Glass, envoyer des données à Google Glass et recevoir les commentaires d'un utilisateur. Pour en savoir plus sur l'API miroir et ses fonctionnalités, veuillez consulter les guides de l'API miroir.