Un didacticiel pour les futurs développeurs Google Glass: créer votre première application Glass

La raison pour laquelle vous souhaitez utiliser voice_trigger.xml les autorisations vous permettent de 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 tutoriel est à des fins d'apprentissage et que vous ne soumettrez pas cette application à la boutique officielle de verrerie, vous ne devriez pas vous en soucier. Allumez simplement res/xml/ autorisations et vous aurez accès aux «commandes vocales non répertoriées». Pour plus d'informations à ce sujet, veuillez lire cette page GDK .

Ouvrir android:label='@string/app_name' pour l'édition. C'est là que la commande vocale pour démarrer votre application est définie. Il doit être situé dans @string/app_name dossier. Vous devriez obtenir un contenu similaire à celui-ci:

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:

Si vous revenez à votre fichier manifeste, vous remarquerez peut-être que votre res/values/strings.xml a été automatiquement mis à jour pour utiliser également la chaîne de ressources app_name au lieu du codé en dur Hello Glass valeur comme avant. Si ce paramètre n'a pas été mis à jour, assurez-vous de définir la valeur sur voice_trigger.xml.

Et quel est le nom de votre application, exactement? Si vous ouvrez network='true', votre FEATURE_VOICE_COMMANDS devrait être répertorié comme:

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

Depuis votre écran d'accueil, 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 l'écran de démarrage de votre application Glass.

Si tu le dis ' Bonjour verre «Votre application doit démarrer et vous devez bénéficier d'une expérience Glass standardisée:

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

Voix ou tactile? 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 vous suggère de fournir à la fois une interaction tactile et vocale dans le menu chaque fois que possible, permettant à vos utilisateurs de naviguer dans votre application en utilisant la voix et le pavé tactile en parallèle.

Une vraie application - ApeeScape 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. Créons une application qui vous permet de parcourir les profils des meilleurs développeurs ApeeScape en fonction de 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 ApeeScape logo avec une voix et appuyez sur le menu activé 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 voulons obtenir une liste des développeurs avec leur image et leur nom. Les profils des 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 voulons pouvoir les 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 sur Android:

1. Comment configurer votre environnement de développement pour créer de la verrerie.
2. Comment configurer votre application pour utiliser le thème GUI standard 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 et exécutez-la. Vous pouvez soit mettre à jour l'application Hello Glass ci-dessus, soit démarrer une nouvelle application en suivant les mêmes étapes. Nommez cette application ' Top Finder ”, Et faites votre MainActivity fichier ressemble à ceci.

Le res/menu La contrainte indique à glass de vérifier la connectivité réseau lors du démarrage de cette application, que nous devrons connecter aux listes de développeurs ApeeScape. 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:

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

Vous pouvez penser à 'Ok verre' 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 le feriez 'appuyez' sur 'l'icône du menu de l'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 à commande vocale dans votre application Verrerie.

Afin d'activer le 'Ok verre' menu que vous devez demander main.xml de l'API. Pour ce faire, ajoutez la ligne suivante dans votre onCreatePanelMenu gestionnaire dans votre MainActivity:

Chaque activité qui comprend cette fonctionnalité sera rendue avec 'Ok verre' texte en bas au centre.

La prochaine chose que vous devez faire est de créer un menu pour l'écran principal. Dans votre findDevelopers dossier crée une nouvelle définition de menu XML nommée 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); } . Pour simplifier les choses, nous n'activerons que trois plates-formes de développement ApeeScape, mais n'hésitez pas à apporter les modifications à votre guise.

Il doit avoir le contenu suivant:

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 membres de l'équipe de développement de Glass continuent d'améliorer 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 'Ok verre' Le menu n'est pas différent de votre menu d'application Android standard. Joindre un menu à une activité est pratiquement la même chose. Remplacez simplement le MainActivity handler dans votre private CardScrollView mCardScroller; private View mView; private GestureDetector mGestureDetector; , et gonflez le menu principal que vous venez de créer:

Nous devons maintenant ajouter un gestionnaire de menu. Avant de faire cela, créez une méthode vide nommée 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(); } . Nous y reviendrons plus tard pour lancer une recherche et afficher les résultats. Après cela, vous pouvez remplacer votre gestionnaire de menu.

Il est maintenant temps de rendre joli l'écran d'accueil de notre exemple d'application Google Glass. Importez un logo ApeeScape dans votre application en tant que 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); } . J'ai utilisé cette image:

Dans votre MainActivity classe, apportez les modifications suivantes.

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

Modifiez le findDevelopers méthode pour personnaliser la disposition de la carte:

Et changez votre java/models handler pour être comme ceci:

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

Ça devrait être ça! Vous pouvez maintenant démarrer votre application et essayer les deux méthodes d'activation du menu. Si tu le dis 'Ok verre' vous obtenez trois éléments de menu affichés à l'écran, et si vous appuyez sur la vitre, un menu déroulant sera ouvert. Pour parcourir les éléments du menu, vous pouvez faire glisser votre doigt vers l'arrière et vers l'avant.

Voici à quoi ressemble le menu vocal:

Et voici le menu gestuel:

Si vous sélectionnez un élément de menu, rien ne se passera car votre java/adapters La méthode n’a pas encore été mise en œuvre.

Écrans de développeur

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

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 public class DeveloperAdapter extends CardScrollAdapter { private List mCards; private List mData; public DeveloperAdapter(List 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); } } dans votre ResultsActivity dossier. Nous voulons que cette classe soit sérialisable, car il contiendra des profils qui sont dans une liste.

Nous voulons que nos cartes soient étroitement liées aux données de notre profil de développeur. Parce que la valeur par défaut java/com.helloglass 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éer extends Activity dans votre developer.xml dossier:

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é, MainActivity , à côté de votre ResultsActivity (probablement dans public static final String SEARCH = 'search'; private String mPlatform='Android'; ).

Assurez-vous que ResultsActivity.

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

Pour activer le passage de paramètres entre findDevelopers et ResultsActivity ajoutez les lignes suivantes au début de 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); } classe:

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

Configuration de l'écran initial de ResultsActivity et la configuration des cartes est très similaire à ce que nous avons fait sur platform. Vérifiez d'abord que vous avez défini vos cartes et votre scroller au début:

Créez une méthode de recherche temporaire sur laquelle nous reviendrons plus tard pour implémenter. L'ajout de nouvelles cartes à la liste de profils est aussi simple que l'ajout d'éléments à un tableau. Nous nommerons cette méthode ResultsActivity aussi, mais celui-ci appartient à @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); } :

Revenez maintenant à votre openOptionsMenu() et mettre à jour onGesture(Gesture gesture) là pour démarrer votre private GestureDetector createGestureDetector(Context context) { // … @Override public boolean onGesture(Gesture gesture) { if (gesture == Gesture.TAP) { openOptionsMenu(); return true; } else if // … et passez dans le @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); } propriété:

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

Comme précédemment, activez les gestes pour gérer le pavé tactile de votre Glass lorsque ResultsActivity est affiché. Pour ce faire, il suffit d'appeler MainActivity dans votre @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(); 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); } méthode:

Ajoutez également un gestionnaire de menu aux actions liées aux développeurs. Nous allons laisser de simples messages Toast pour le moment.

Chaque application doit utiliser de jolis éléments visuels, des icônes, etc. L'équipe de Google Glass a fourni un très grand ensemble 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 de verre standard ainsi que des polices dans leur bibliothèque

Pour l'instant, vous n'avez besoin que d'une icône MainActivity, alors téléchargez-la sur votre MainActivity dossier. Nous utiliserons cette icône au lieu de télécharger une photo du développeur.

La dernière chose qui reste pour l'instant dans notre didacticiel de développement d'applications Glass est de remplacer notre

Vous pouvez partir

|_+_|

|_+_|

Si vous démarrez votre application maintenant, vous pouvez vérifier à la volée comment vos profils de développeur sont créés en fonction du menu sélectionné sur

Appuyer sur fait apparaître le menu tactile:

Et dire 'Ok verre' fait apparaître le menu vocal:

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

Obtention de profils sur Internet

Pour conclure, remplissons le menu avec des informations réelles pour les 10 meilleurs développeurs ApeeScape pour JavaScript , Android , et iOS .

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

Étant donné que la création d'un robot d'exploration Web uniquement pour obtenir les noms des principaux développeurs dans ApeeScape peut être trop compliqué 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 à faire est de demander l'accès à Internet à partir de votre système d'exploitation Android. Ajoutez la ligne suivante à votre fichier Manifest

|_+_|

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 ce que vous préférez dans votre travail quotidien.

La création 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:

Conclusion du didacticiel

J'espère que vous vous êtes amusé à suivre ce tutoriel de développement de 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 à activation vocale de Google Glass, à créer vos propres menus à commande vocale et à combiner les commandes vocales avec des 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 naviguer entre différentes activités.

Pour aller plus loin, accédez aux ressources de développement de Google à l'adresse développeurs.google.com/glass . Lorsque vous commencez à créer des applications plus complexes, cela s'avère être une ressource très utile.

N'oubliez pas que Glass est toujours en phase de développement et que de nombreuses autres améliorations seront probablement mises en œuvre avant d'arriver sur le marché grand public. Dans cet esprit, j'ai une remarque importante pour vous:

Il reste encore beaucoup de travail sur la reconnaissance vocale et vous pourriez vous surprendre à crier après votre ami imaginaire en essayant de démarrer votre activité ou de remplir certaines informations. Ne vous inquiétez pas, 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 ne manquera pas de faire de grandes vagues une fois qu'il arrivera dans les magasins, alors j'espère que vous êtes aussi enthousiaste que moi d'être l'un des premiers à être à la pointe de cette technologie passionnante!

Hurler : Les captures d'écran de cet article sont réalisées à l'aide de [email protected] .