Un tutoriel pour les développeurs Google Glass en herbe : Créer votre première application Glass

Google Glass est une technologie futuriste qui promet de révolutionner la façon dont nous utilisons nos appareils pour interagir avec le monde. Mais du point de vue d'un développeur, qu'y a-t-il de si spécial dans le développement pour le verre ? La réponse est "Rien !" En fait, du point de vue d'un développeur Android expérimenté, Google Glass n'est qu'un autre appareil Android avec un très petit écran et des fonctionnalités limitées !

Le fait que toute personne connaissant le développement d'Android puisse devenir membre de cette communauté "d'élite" d'évangélistes de la technologie portable futuriste fait partie de ce qui rend Google Glass si génial. Bien sûr, vous devrez apprendre quelques nouvelles choses, comme la différence entre "Immersion" et "Active Card", mais comme vous le verrez, la courbe d'apprentissage n'est pas abrupte.

Le but de ce didacticiel Google Glass est de jeter les bases du développement de toute application Glass, grâce à la création d'une application simple qui englobe toutes les étapes courantes. Mon objectif est de vous faire gagner du temps dans la recherche et les essais et erreurs, et de vous permettre d'exécuter votre première application Glass dès que possible.

Dans ce tutoriel, nous verrons d'abord comment configurer votre environnement de développement et connecter vos Google Glass à votre ordinateur. Ensuite, nous créerons une simple application Glass "Hello World" qui inclura des commandes vocales personnalisées et une intégration avec le menu de démarrage de Glass. Une fois que vous aurez développé et exécuté votre première application sur votre Glass, vous apprendrez les bases de la navigation dans les applications Glass, les menus activés par la voix et la création de contenu dynamique.

Comment monter à bord

Glass est encore dans une sorte de phase de "beta testing", pour laquelle Google a inventé le terme "Explorer Program". Quelle que soit la façon dont vous l'appelez, Glass n'est pas encore quelque chose que vous pouvez obtenir en magasin comme un smartphone. Malheureusement, les outils de développement Android n'ont toujours pas d'émulateur que vous pouvez utiliser pour développer votre application sans matériel réel.

Ainsi, pour exécuter et déboguer votre application, vous devrez mettre la main sur une véritable Google Glass via le programme Explorer. Pour rejoindre le programme, visitez la page d'inscription et inscrivez-vous pour y accéder. Une fois approuvé, préparez votre carte de crédit et attendez que votre verre soit livré. La version Explorer de Glass coûte actuellement 1 500 USD, mais le prix devrait baisser considérablement avant que l'appareil n'arrive dans les magasins.

Pour les sans verre

En raison de l'absence d'émulateur, il est nécessaire que vous disposiez d'un matériel Google Glass réel afin de développer l'application dans ce didacticiel (ou toute autre application Glass), mais si en obtenir un dépasse votre budget, ne vous découragez pas - il vaudra la peine d'être suivi de toute façon. Ce qui deviendra évident dans le didacticiel, c'est que développer pour Glass est presque identique à développer pour n'importe quelle autre plate-forme Android !

Si vous n'avez toujours pas utilisé Google Glass, mais que vous êtes aussi excité que moi, 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.

Règles d'engagement

Le didacticiel de ce développeur Google Glass part des hypothèses suivantes :

• Je suppose que vous comprenez les bases de la navigation et de la configuration du verre. Si vous n'avez jamais utilisé Glass, regardez les vidéos liées ci-dessus.
• Je suppose que vous comprenez les bases du développement Android : la structure des fichiers du projet, la configuration des applications Android, etc.
• J'utiliserai Android Studio, mais les instructions devraient être traduites dans presque tous les environnements de développement Android. Android Studio est toujours en "bêta", mais Glass aussi. N'ayez pas peur de commencer à l'utiliser - c'est vraiment un excellent produit. Android Studio est disponible en téléchargement ici.

Configurer votre Google Glass

Bon, commençons !

La première chose que vous devez faire est d'activer le mode débogage sur votre Glass. Vous devez faire quelque chose comme ça sur chaque appareil Android que vous utilisez pour le développement de vos applications, donc cela pourrait être familier. Pour activer le débogage, balayez vers " Paramètres " -> " Informations sur l'appareil ", puis appuyez sur pour ouvrir le menu de l'appareil. Sélectionnez " Activer le débogage " et il sera activé.

Ensuite, vous devez préparer votre environnement de développement. La version actuelle de Google Glass nécessite que vous utilisiez l'API version 19, alors assurez-vous qu'elle est installée. De plus, vous devez avoir installé votre kit de développement Glass. Utilisez votre gestionnaire de SDK Android pour installer ces deux packages si vous ne l'avez pas déjà fait.

Bonjour le monde!

Faisons donc notre première pièce de "Verrerie". (Oui, Google a inventé un autre terme ! "Glassware" est le nom de toute application exécutée sur Google Glass). Nous allons commencer par développer un bon vieux "Hello World!" application. Comme la plupart des principaux environnements de développement Android, Android Studio remplit automatiquement les nouvelles applications avec un modèle pour afficher cette phrase célèbre. En conséquence, obtenir "Hello World!" opérationnel n'est qu'un exercice de déploiement d'application fondamental.

Dans Android Studio, cliquez sur « Nouveau projet » et remplissez le formulaire de projet. Vous pouvez utiliser quelque chose de similaire à ceci :

Lors de la sélection des facteurs de forme et de l'API, assurez-vous de sélectionner « Verre » et API 19

Sélectionnez « Activité d'immersion » comme activité de démarrage.

Vous vous souvenez que j'ai mentionné que vous devrez apprendre la différence entre Immersion et Live Card ? L'article sur l'interface utilisateur de Google explique les différents types d'écrans en verre. Voici un bref résumé :

• Les cartes en direct sont ajoutées à la chronologie de Glass et affichent des informations en temps réel sur quelque chose grâce à des mises à jour à haute fréquence. Ils fonctionnent constamment en arrière-plan même lorsque les utilisateurs interagissent avec différentes cartes. Cela permet aux utilisateurs d'effectuer plusieurs tâches avec un accès constant à différents types d'informations en temps réel.

• Les immersions sont des écrans entièrement personnalisables qui s'exécutent en dehors de l'expérience de la chronologie. Ceux-ci vous permettent de concevoir votre propre interface utilisateur et de traiter les entrées des utilisateurs comme bon vous semble. C'est ce que nous allons utiliser !

Dans l'écran suivant de l'assistant, laissez les valeurs par défaut pour « Nom » et « Titre » et cliquez sur « Terminer ».

Une fois que Gradle s'est occupé de vos dépendances et a préparé votre projet, il est temps d'installer votre plug-in Glass. C'est maintenant un développement futuriste !

En supposant que tous vos pilotes Android ADB sont en place et que votre Glass est reconnu par votre système, vous devriez obtenir votre Glass dans votre liste d'appareils.

Si c'est la première fois que vous connectez votre appareil à un ordinateur, votre Glass demandera l'approbation/la confiance à établir. Appuyez simplement sur votre verre pour permettre la connexion et vous devriez être prêt.

Cliquez sur « Exécuter » et déployez votre « APK par défaut » avec « MainActivity » comme activité de démarrage pour le lancement sur un périphérique « USB ».

Après quelques secondes, vous devriez voir quelque chose comme ceci sur votre écran Glass :

Hourra! Votre application fonctionne sur Glass ! Et tout ce que vous aviez à faire était de remplir quelques valeurs par défaut lors de la création de l'application !

Puisque nous n'avons pas spécifié différemment, Glass affichera votre application sous le nom "Afficher la démo". Si vous revenez à l'écran d'accueil, puis appuyez sur pour ouvrir le menu de l'application, vous le verrez répertorié comme ceci :

Un peu de polonais

Ok, vous l'avez fait fonctionner, mais cela ne ressemble pas à une vraie application Glass, et vous ne voulez pas que l'application soit lancée par "Afficher la démo".

Dans ce tutoriel, nous allons juste le peaufiner un peu pour obtenir le vrai sentiment.

Définition du thème

Tout d'abord, vous ne voulez pas occuper l'un de vos petits écrans en verre avec cette barre de titre d'activité "Hello World Immersion", et vous ne voulez certainement pas que votre écran soit gris avec une police noire. Pour résoudre ce problème, il suffit de changer de thème sur notre Android et de laisser Glass OS s'en occuper.

Ouvrez res/values/styles.xml pour l'édition. Il doit avoir le contenu suivant :

 <?xml version="1.0" encoding="utf-8"?> <resources> <style name="AppTheme" parent="android:Theme.Holo.Light"> </style> </resources>

Changez simplement android:Theme.Holo.Light en android:Theme.DeviceDefault . Cela devrait prendre en charge automatiquement la mise en page et les couleurs de l'application, en utilisant le thème par défaut Glass.

Définir l'apparence du menu

Ok, la prochaine chose que nous voulons faire dans ce tutoriel de développement Glass est de configurer notre application pour avoir un nom propre et un bon démarrage à commande vocale. Ouvrez votre manifeste Android ( AndroidManifest.xml ) et ajoutez la balise <application… suivante ci-dessus :

 <uses-permission android:name="com.google.android.glass.permission.DEVELOPMENT" />

La raison pour laquelle vous souhaitez utiliser les autorisations DEVELOPMENT est que vous pouvez jouer avec des commandes vocales personnalisées. Google est assez strict sur les commandes vocales autorisées dans les applications Glass approuvées, et toutes les nouvelles commandes doivent être approuvées. Étant donné que ce didacticiel est à des fins d'apprentissage et que vous ne soumettrez pas cette application au magasin officiel de verrerie, vous ne devriez pas vous en soucier. Activez simplement les autorisations de DEVELOPMENT et vous aurez accès aux "commandes vocales non répertoriées". Pour plus d'informations à ce sujet, veuillez lire cette page GDK.

Ouvrez voice_trigger.xml pour le modifier. C'est ici que la commande vocale pour démarrer votre application est définie. Il doit être situé dans le dossier res/xml/ . Vous devriez obtenir un contenu similaire à celui-ci :

 <trigger command="SHOW_ME_A_DEMO" />

Au lieu de dire "Montre-moi une démo" pour démarrer notre application, disons simplement le nom de l'application. Modifiez le contenu du fichier en :

 <trigger keyword="@string/app_name" />

Si vous revenez à votre fichier manifeste, vous remarquerez peut-être que votre android:label="@string/app_name" a été automatiquement mis à jour pour utiliser également la chaîne de ressources @string/app_name au lieu de la valeur Hello Glass codée en dur comme c'était le cas auparavant. . Si ce paramètre n'a pas été mis à jour, assurez-vous de définir la valeur sur android:label="@string/app_name" .

Et quel est le nom de votre application, exactement ? Si vous ouvrez res/values/strings.xml , votre app_name doit être répertorié comme :

 <string name="app_name">Hello Glass</string>

Cela devrait conclure les choses pour votre première application Hello Glass. Voyons comment cela fonctionne maintenant !

À partir de votre écran de démarrage, vous pouvez dire « ok verre » pour afficher le menu vocal. Votre application est maintenant dans la liste des commandes vocales.

Avec ce tutoriel pour vous guider, voici à quoi ressemble maintenant l'écran de démarrage de votre application Glass.

Si vous dites « Hello glass », votre application devrait démarrer et vous devriez obtenir une expérience Glass standardisée :

Si vous ne souhaitez pas utiliser votre voix pour activer l'application, il vous suffit d'appuyer sur votre écran d'accueil et vous verrez que votre application est disponible dans le menu :

Voix ou toucher ? Utilise les deux!

Il est très important que vous portiez une attention particulière à l'interface de votre application et à l'interaction de vos utilisateurs avec elle. N'oubliez pas que vos utilisateurs ne sont pas toujours en mesure d'utiliser leur voix, par exemple lorsqu'ils regardent une conférence ou une présentation. Alternativement, ils peuvent avoir les mains pleines et être incapables d'utiliser le toucher. Je suggère que vous fournissiez à la fois une interaction de menu tactile et vocale dans la mesure du possible, permettant à vos utilisateurs de naviguer dans votre application en utilisant la voix et le pavé tactile en parallèle.

Une vraie application - Toptal Finder

Maintenant que vous êtes à l'aise avec le développement de Glass et que vous avez créé Hello Glass, il est temps de créer une véritable application qui mettra en œuvre les nouvelles fonctionnalités de Glass. Construisons une application qui vous permet de parcourir les profils des meilleurs développeurs Toptal basés sur la plate-forme de développement.

La structure de notre exemple d'application Glass sera simple :

1. Nous voulons que notre écran de démarrage ait le logo Toptal avec un menu activé par la voix et le toucher nous permettant de sélectionner la plate-forme de développement pour laquelle nous avons besoin d'un développeur.
2. Après avoir sélectionné une plate-forme, nous souhaitons obtenir une liste de développeurs avec leur photo et leur nom. Les profils de développeurs seront présentés sous la forme d'une liste déroulante de cartes personnelles.
3. Lors de la consultation d'un profil de développeur, nous souhaitons pouvoir l'ajouter aux favoris ou envoyer une demande de location.

Les bases

Récapitulons rapidement ce que vous avez déjà ajouté en plus de vos connaissances Android :

1. Comment configurer votre environnement de développement pour créer Glassware.
2. Comment configurer votre application pour utiliser le thème standard de l'interface graphique Glassware.
3. Comment démarrer votre application à l'aide de commandes vocales et de noms de menu personnalisés.

En utilisant ces connaissances, lancez votre nouvelle application. Vous pouvez soit mettre à jour l'application Hello Glass ci-dessus, soit démarrer une nouvelle application en suivant ces mêmes étapes. Nommez cette application " Top Finder ", et faites en sorte que votre fichier voice_trigger.xml ressemble à ceci.

 <?xml version="1.0" encoding="utf-8"?> <trigger keyword="@string/app_name" > <constraints network="true" /> </trigger>

La contrainte network="true" indique à glass de vérifier la connectivité réseau lors du démarrage de cette application, dont nous aurons besoin pour nous connecter aux listes de développeurs Toptal. S'il n'y a pas de connexion, Glass affichera un message d'avertissement.

Écran d'accueil

Faisons en sorte que l'écran d'accueil de notre application ressemble à ceci :

Lorsque vous voyez le message "ok glass" sur votre écran, cela signifie que l'application a un menu activé par la voix à cet endroit. Prononcer ici la phrase « ok verre » active le menu vocal pour cet emplacement. Cette phrase est prédéfinie par Glass et vous ne pouvez pas la modifier.

Vous pouvez considérer « ok glass » comme un « menu d'application », tout comme vous l'avez utilisé dans le développement de votre smartphone/tablette, et il a exactement le même rôle. Comme vous "appuyez" sur "l'icône du menu d'application" sur votre écran (souvent 3 points ou lignes) pour ouvrir un menu d'application Android, vous devez dire "ok verre" pour ouvrir le menu activé par la voix dans votre application Glassware.

Pour activer le menu "ok glass" , vous devez demander FEATURE_VOICE_COMMANDS à l'API. Pour ce faire, ajoutez la ligne suivante dans votre gestionnaire onCreate dans votre MainActivity :

 getWindow().requestFeature(WindowUtils.FEATURE_VOICE_COMMANDS);

Chaque activité incluant cette fonctionnalité sera rendue avec le texte "ok glass" en bas au centre.

La prochaine chose que vous devez faire est de créer un menu pour l'écran principal. Dans votre dossier res/menu , créez une nouvelle définition de menu XML nommée main.xml . Pour simplifier les choses, nous n'activerons que trois plates-formes de développement Toptal, mais n'hésitez pas à apporter les modifications que vous souhaitez.

Il doit avoir le contenu suivant :

 <?xml version="1.0" encoding="utf-8"?> <menu xmlns:andro> <item android: android:title="Top Android developer" /> <item android: android:title="Top JavaScript developer" /> <item android: android:title="Top iOS developer" /> </menu>

Vous vous demandez peut-être pourquoi j'ai choisi des titres de menu plutôt longs au lieu de simplement Android, JavaScript et iOS. Eh bien, la raison est très simple. Les gars de l'équipe de développement de Glass améliorent encore la reconnaissance vocale. Il est recommandé d'utiliser deux ou trois mots dans vos menus afin que Glass les reconnaisse plus facilement.

J'ai déjà mentionné que le menu "ok glass" n'est pas différent de votre menu d'application Android standard. Attacher un menu à une activité est pratiquement le même. Remplacez simplement le gestionnaire onCreatePanelMenu dans votre MainActivity et gonflez le menu principal que vous venez de créer :

 @Override public boolean onCreatePanelMenu(int featureId, Menu menu){ if (featureId == WindowUtils.FEATURE_VOICE_COMMANDS || featureId == Window.FEATURE_OPTIONS_PANEL) { getMenuInflater().inflate(R.menu.main, menu); return true; } return super.onCreatePanelMenu(featureId, menu); }

Nous devons maintenant ajouter un gestionnaire de menu. Avant de faire cela, créez une méthode vide nommée findDevelopers . Nous y reviendrons plus tard pour lancer une recherche et afficher les résultats. Après cela, vous pouvez remplacer votre gestionnaire de menu.

 public void findDevelopers(String platform){ } @Override public boolean onMenuItemSelected(int featureId, MenuItem item) { if (featureId == WindowUtils.FEATURE_VOICE_COMMANDS || featureId == Window.FEATURE_OPTIONS_PANEL) { switch (item.getItemId()) { case R.id.find_android: findDevelopers("Android"); break; case R.id.find_javascript: findDevelopers("Java Script"); break; case R.id.find_ios: findDevelopers("iOS"); break; } return true; } return super.onMenuItemSelected(featureId, item); }

Il est maintenant temps de rendre joli l'écran d'accueil de notre exemple d'application Google Glass. Importez un logo Toptal dans votre application en tant que res/drawable/logo.png . J'ai utilisé cette image :

Dans votre classe MainActivity , apportez les modifications suivantes.

Assurez-vous que les variables privées suivantes sont déclarées au début de la classe :

 private CardScrollView mCardScroller; private View mView; private GestureDetector mGestureDetector;

Modifiez la méthode buildView pour personnaliser la disposition de la carte :

 private View buildView() { Card card = new Card(this); card.setText(R.string.app_name); card.setImageLayout(Card.ImageLayout.LEFT); card.addImage(R.drawable.logo); return card.getView(); }

Et changez votre gestionnaire onCreate pour qu'il ressemble à ceci :

 protected void onCreate(Bundle bundle) { super.onCreate(bundle); getWindow().addFlags(WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON); getWindow().requestFeature(WindowUtils.FEATURE_VOICE_COMMANDS); mView = buildView(); mCardScroller = new CardScrollView(this); mCardScroller.setAdapter(new CardScrollAdapter() { @Override public int getCount() { return 1; } @Override public Object getItem(int position) { return mView; } @Override public View getView(int position, View convertView, ViewGroup parent) { return mView; } @Override public int getPosition(Object item) { if (mView.equals(item)) { return 0; } return AdapterView.INVALID_POSITION; } }); // Handle the TAP event. mCardScroller.setOnItemClickListener(new AdapterView.OnItemClickListener() { @Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) { openOptionsMenu(); } }); mGestureDetector = createGestureDetector(this); setContentView(mCardScroller); }

Comme je l'ai déjà dit, nous voulons inclure un menu activé par le toucher avec "ok glass" , alors activez simplement les gestes comme vous le feriez dans votre application Android. Ajoutez les méthodes suivantes dans votre classe MainActivity :

 private GestureDetector createGestureDetector(Context context) { GestureDetector gestureDetector = new GestureDetector(context); //Create a base listener for generic gestures gestureDetector.setBaseListener( new GestureDetector.BaseListener() { @Override public boolean onGesture(Gesture gesture) { if (gesture == Gesture.TAP) { openOptionsMenu(); return true; } else if (gesture == Gesture.TWO_TAP) { // do something on two finger tap return true; } else if (gesture == Gesture.SWIPE_RIGHT) { // do something on right (forward) swipe return true; } else if (gesture == Gesture.SWIPE_LEFT) { // do something on left (backwards) swipe return true; } else if (gesture == Gesture.SWIPE_DOWN){ finish(); } return false; } }); gestureDetector.setFingerListener(new GestureDetector.FingerListener() { @Override public void onFingerCountChanged(int previousCount, int currentCount) { // do something on finger count changes } }); gestureDetector.setScrollListener(new GestureDetector.ScrollListener() { @Override public boolean onScroll(float displacement, float delta, float velocity) { // do something on scrolling return true; } }); return gestureDetector; } @Override public boolean onGenericMotionEvent(MotionEvent event) { if (mGestureDetector != null) { return mGestureDetector.onMotionEvent(event); } return false; }

Ça devrait être ça ! Vous pouvez maintenant démarrer votre application et essayer les deux méthodes d'activation du menu. Si vous dites "ok verre", vous obtenez trois éléments de menu affichés à l'écran, et si vous appuyez sur le verre, un menu déroulant s'ouvrira. Pour naviguer dans les éléments du menu, vous pouvez balayer vers l'arrière et vers l'avant.

Voici à quoi ressemble le menu vocal :

Et voici le menu des gestes :

Si vous sélectionnez un élément de menu, rien ne se passera car votre méthode findDevelopers n'a pas encore été implémentée.

Écrans de développeur

Nous continuerons à utiliser la disposition par défaut de la Glass Card, avec une image sur le côté gauche, du texte sur la droite et quelques informations de pied de page. Pour plus d'informations sur les bonnes pratiques de conception de vos cartes, veuillez consulter le guide de style Google Glass.

Notre profil de développeur est défini par des propriétés simples :

1. Nom
2. Image
3. Plateforme de développement

Alors, assurons-nous d'avoir la bonne structure de classes dans notre application. Créez une nouvelle classe nommée DeveloperModel.java dans votre dossier java/models . Nous voulons que cette classe soit sérialisable, car elle contiendra des profils qui se trouvent dans une liste.

 public class DeveloperModel implements Serializable { private String name; public String getName(){ return name; } public void setName(String name){ this.name=name; } private String platform; public String getPlatform(){ return platform; } public void setPlatform(String platform){ this.platform=platform; } private String image; public String getImage(){ return image; } public void setImage(String image){ this.image=image; } }

Nous voulons que nos cartes soient étroitement liées aux données de notre profil de développeur. Parce que le CardScrollAdapter par défaut est un peu générique en ce qui concerne son modèle de données, nous devons l'étendre et le faire nôtre. Créez DeveloperAdapter.java dans votre dossier java/adapters :

 public class DeveloperAdapter extends CardScrollAdapter { private List<Card> mCards; private List<DeveloperModel> mData; public DeveloperAdapter(List<Card> cards){ this.mCards = cards; } @Override public int getCount() { return mCards.size(); } @Override public Object getItem(int i) { return mCards.get(i); } @Override public View getView(int i, View view, ViewGroup viewGroup) { return mCards.get(i).getView(); } @Override public int getPosition(Object o) { return this.mCards.indexOf(o); } }

Nous ne voulons pas que nos résultats de recherche soient ajoutés sur l'écran d'accueil de l'application, nous allons donc créer une nouvelle activité qui effectuera la recherche et affichera les résultats. Créez une nouvelle activité, ResultsActivity , à côté de votre MainActivity (probablement dans java/com.helloglass ).

Assurez-vous qu'il extends Activity .

Ensuite, nous devons spécifier un menu pour nos cartes de profil de développeur. Créez un nouveau menu, developer.xml , avec le contenu suivant :

 <?xml version="1.0" encoding="utf-8"?> <menu xmlns:andro> <item android: android:title="Add to favorites" /> <item android: android:title="Hire" /> <item android: android:title="Go back" /> </menu>

Pour activer le passage des paramètres entre ResultsActivity et MainActivity , ajoutez les lignes suivantes au début de la classe ResultsActivity :

 public static final String SEARCH = "search"; private String mPlatform="Android";

Assurez-vous d'ajouter votre nouvelle activité à votre fichier manifeste :

 <activity android:name=".ResultsActivity" android:immersive="true" android:icon="@drawable/ic_launcher" android:label="@string/title_activityresults" android:parentActivityName=".MainActivity"> <meta-data android:name="android.support.PARENT_ACTIVITY" android:value="com.eloptico.MainActivity" /> </activity>

La configuration de l'écran initial de ResultsActivity et la configuration des cartes sont très similaires à ce que nous avons fait sur MainActivity . Vérifiez d'abord que vos cartes et votre scroller sont définis au début :

 private CardScrollView mCardScroller; private List<Card> mCards; private GestureDetector mGestureDetector;

Créez une méthode de recherche temporaire sur laquelle nous reviendrons plus tard pour la mise en œuvre. L'ajout de nouvelles cartes à la liste des profils est aussi simple que l'ajout d'éléments à un tableau. Nous nommerons également cette méthode findDevelopers , mais celle-ci appartient à ResultsActivity :

 private void findDevelopers(String platform){ for (int i=1; i<=10; i++){ Card card = new Card(this); card.setText(platform+" "+Integer.toString(i)); card.setTimestamp(platform); card.setImageLayout(Card.ImageLayout.LEFT); card.addImage(R.drawable.ic_person_50); mCards.add(card); } mCardScroller.setSelection(0); }

Revenez maintenant à votre MainActivity et mettez à jour findDevelopers pour démarrer votre ResultsActivity et transmettre la propriété platform :

 public void findDevelopers(String platform){ Intent resultsIntent = new Intent(this, ResultsActivity.class); resultsIntent.putExtra(ResultsActivity.SEARCH, platform); startActivity(resultsIntent); }

Attachez votre menu développeur à ResultsActivity . Vous pourrez ouvrir le menu sur n'importe quelle carte de profil.

 @Override public boolean onCreatePanelMenu(int featureId, Menu menu){ if (featureId == WindowUtils.FEATURE_VOICE_COMMANDS || featureId == Window.FEATURE_OPTIONS_PANEL) { getMenuInflater().inflate(R.menu.developer, menu); return true; } return super.onCreatePanelMenu(featureId, menu); }

Comme précédemment, activez les gestes pour gérer le pavé tactile de votre verre lorsque ResultsActivity est affiché. Pour ce faire, appelez simplement openOptionsMenu() dans votre onGesture(Gesture gesture) :

 private GestureDetector createGestureDetector(Context context) { // … @Override public boolean onGesture(Gesture gesture) { if (gesture == Gesture.TAP) { openOptionsMenu(); return true; } else if // …

Ajoutez également un gestionnaire de menu aux actions liées au développeur. Nous laisserons de simples messages Toast pour le moment.

 @Override public boolean onMenuItemSelected(int featureId, MenuItem item) { if (featureId == WindowUtils.FEATURE_VOICE_COMMANDS || featureId == Window.FEATURE_OPTIONS_PANEL) { switch (item.getItemId()) { case R.id.developer_fav: Toast.makeText(getApplicationContext(), "Favorite", Toast.LENGTH_LONG).show(); break; case R.id.developer_hire: Toast.makeText(getApplicationContext(), "Message", Toast.LENGTH_LONG).show(); break; case R.id.go_back: break; } return true; } return super.onMenuItemSelected(featureId, item); }

Chaque application doit utiliser de jolis éléments visuels, des icônes, etc. L'équipe Google Glass a fourni un très grand nombre d'icônes standardisées communes que les développeurs de Glass peuvent utiliser gratuitement dans leurs applications. Vous pouvez trouver un ensemble complet d'icônes Glass standard ainsi que des polices dans leur bibliothèque

Pour l'instant, vous n'avez besoin que d'une icône ic_person_50.png , alors allez-y et téléchargez-la dans votre dossier res\drawable . Nous utiliserons cette icône au lieu de télécharger une image du développeur.

La dernière chose qui reste dans notre tutoriel de développement d'applications Glass pour l'instant est de remplacer notre gestionnaire onCreate sur ResultsActivity , où nous vérifierons quelle plate-forme de développement a été transmise par MainActivity et remplirons notre liste.

 @Override protected void onCreate(Bundle bundle) { super.onCreate(bundle); getWindow().addFlags(WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON); getWindow().requestFeature(WindowUtils.FEATURE_VOICE_COMMANDS); mCardScroller = new CardScrollView(this); mCards = new ArrayList<Card>(); if(getIntent().hasExtra(SEARCH)){ mPlatform = getIntent().getStringExtra(SEARCH); } findDevelopers(mPlatform); mCardScroller.setAdapter(new DeveloperAdapter(mCards)); // Handle the TAP event. mCardScroller.setOnItemClickListener(new AdapterView.OnItemClickListener() { @Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) { openOptionsMenu(); } }); mGestureDetector = createGestureDetector(this); setContentView(mCardScroller); }

Vous pouvez laisser les méthodes onResume et onPause identiques à celles de votre MainActivity .

Si vous démarrez votre application maintenant, vous pouvez vérifier comment vos profils de développeur sont créés à la volée en fonction du menu sélectionné sur MainActivity . Encore une fois, vous avez la possibilité d'afficher votre menu en utilisant "ok glass" ou en appuyant sur le pavé tactile ou en utilisant l'activation vocale. Voici à quoi ressemble le profil « 10e développeur Android » pour le moment :

Tapoter fait apparaître le menu tactile :

Et dire "ok verre" fait apparaître le menu vocal :

Faites glisser la liste vers le bas pour revenir à l'écran d'accueil de votre application.

Obtenir des profils à partir d'Internet

Pour conclure, remplissons le menu avec de vraies informations pour les 10 meilleurs développeurs Toptal pour JavaScript, Android et iOS.

Vous devrez télécharger leurs photos de profil et les rendre disponibles via HTTP, ou simplement utiliser des URL directement à partir de toptal.com.

Étant donné que la création d'un robot d'exploration Web uniquement pour obtenir les noms des meilleurs développeurs de Toptal pourrait être trop détournée pour cet article, j'ai créé des fichiers JSON que vous pouvez utiliser pour Android, JavaScript et iOS.

Dans votre application, la première chose que vous devez faire est de demander l'accès à Internet à partir de votre système d'exploitation Android. Ajoutez la ligne suivante à votre fichier Manifest

 <uses-permission android:name="com.google.android.glass.permission.INTERNET"/>

Sachez que Glass ne vous permettra pas de bloquer le thread principal en utilisant directement les requêtes HTTP. Vous devrez gérer les téléchargements JSON et les images individuelles de manière asynchrone. Vous pouvez utiliser une tâche asynchrone, créer votre propre service ou intention de téléchargement, ou tout ce que vous préférez dans votre travail quotidien.

La construction de cette fonctionnalité n'est pas spécifique à Google Glass, je vais donc ignorer les extraits de code. Si vous allez de l'avant et que cette dernière fonctionnalité fonctionne, vos cartes de profil devraient ressembler à ceci :

Résumé du didacticiel

J'espère que vous vous êtes amusé à suivre ce didacticiel de développement Google Glass et à créer votre première application Glassware. À présent, vous devriez être à l'aise avec l'idée que l'écriture d'applications pour Glass n'est pas très différente de toute autre plate-forme Android.

À ce stade, vous avez appris à étendre l'écran d'accueil activé par la voix de Google Glass, à créer vos propres menus activés par la voix et à combiner les commandes vocales avec les gestes tactiles. Vous devez également comprendre les concepts et les éléments de base de Glass UI, tels que les cartes, les mises en page et les éléments. Vous avez vu comment créer dynamiquement des cartes et comment naviguer entre différentes activités.

Pour approfondir, rendez-vous sur les ressources pour développeurs de Google sur developers.google.com/glass. Lorsque vous commencerez à créer des applications plus complexes, cela s'avérera être une ressource très utile.

N'oubliez pas que Glass est encore en phase de développement et qu'il y a probablement de nombreuses autres améliorations à mettre en œuvre avant qu'il n'arrive sur le marché grand public. Dans cet esprit, j'ai une note importante pour vous :

Il reste beaucoup de travail à faire sur la reconnaissance vocale et vous pourriez vous surprendre à crier sur votre ami imaginaire en essayant de démarrer votre activité ou de remplir certaines informations. Pas de soucis là-bas - tous ceux qui essaient le développement de Google Glass ressentent la même chose, vous n'êtes donc pas seul.

La technologie s'améliorera et le verre sera prêt pour la vente au détail en un rien de temps. Il est sûr de faire de grosses vagues une fois qu'il arrivera dans les magasins, alors j'espère que vous êtes aussi enthousiaste que moi à l'idée d'être l'un des premiers à être à la pointe de cette technologie passionnante !

Shout Out : Les captures d'écran de cet article sont réalisées à l'aide de Droid@Screen.