Un tutorial para aspirantes a desarrolladores de Google Glass: creación de su primera aplicación Glass

Google Glass es una tecnología futurista que promete revolucionar la forma en que usamos nuestros dispositivos para interactuar con el mundo. Pero desde el punto de vista de un desarrollador, ¿qué tiene de especial el revelado para vidrio? La respuesta es "¡Nada!" De hecho, desde la perspectiva de un desarrollador de Android experimentado, Google Glass es solo otro dispositivo Android con una pantalla muy pequeña y funciones limitadas.

El hecho de que cualquier persona con conocimientos de desarrollo de Android pueda convertirse en miembro de esta comunidad de "élite" de evangelistas futuristas de tecnología portátil es parte de lo que hace que Google Glass sea tan increíble. Claro, necesitará aprender algunas cosas nuevas, como la diferencia entre "Inmersión" y "Tarjeta activa", pero como verá, la curva de aprendizaje no es pronunciada.

El propósito de este tutorial de Google Glass es sentar las bases para desarrollar cualquier aplicación de Glass, a través de la creación de una aplicación simple que abarque todos los pasos comunes. Mi objetivo es ahorrarle algo de tiempo en la investigación y el ensayo y error, y permitirle ejecutar su primera aplicación Glass lo antes posible.

En este tutorial, primero veremos cómo configurar su entorno de desarrollo y conectar su Google Glass a su computadora. Luego, crearemos una aplicación Glass simple "Hello World" que incluirá comandos de voz personalizados e integración con el menú de inicio de Glass. Una vez que haya desarrollado y ejecutado su primera aplicación en su Glass, aprenderá los conceptos básicos de la navegación en las aplicaciones de Glass, los menús activados por voz y la creación de contenido dinámico.

Cómo subir a bordo

Glass todavía se encuentra en una especie de fase de "prueba beta", para lo cual Google ha inventado el término "Programa Explorer". Como sea que lo llame, Glass aún no es algo que pueda obtener en la tienda como un teléfono inteligente. Desafortunadamente, las herramientas de desarrollo de Android todavía no tienen un emulador que pueda usar para desarrollar su aplicación sin hardware real.

Por lo tanto, para ejecutar y depurar su aplicación, deberá tener en sus manos un Google Glass real a través del programa Explorer. Para unirse al programa, visite la página de registro y regístrese para acceder. Una vez aprobado, prepare su tarjeta de crédito y espere a que le entreguen su vaso. La versión Explorer de Glass actualmente cuesta $ 1,500 USD, pero se espera que el precio baje significativamente antes de que el dispositivo llegue a las tiendas.

para los sin vidrio

Debido a la falta de un emulador, es necesario que tenga el hardware de Google Glass real para desarrollar la aplicación en este tutorial (o cualquier aplicación de Glass), pero si obtener uno está fuera de su presupuesto, no se desanime: valdrá la pena seguirlo de todos modos. Lo que se hará evidente en el tutorial es que desarrollar para Glass es casi lo mismo que desarrollar para cualquier otra plataforma de Android.

Si aún no ha usado Google Glass, pero está tan entusiasmado como yo, eche un vistazo a estos dos videos, ya que deberían brindarle información suficiente para comprender los conceptos básicos de la interfaz de usuario.

• Introducción a Google Glass
• Google Glass Cómo hacerlo: Primeros pasos

Hay videos aún más útiles para la configuración y la navegación aquí, y muchos más detalles sobre la interfaz de usuario aquí.

Reglas del compromiso

Este tutorial para desarrolladores de Google Glass hace las siguientes suposiciones:

• Supongo que comprende los conceptos básicos de navegación y configuración de Glass. Si nunca ha usado Glass, eche un vistazo a los videos vinculados anteriormente.
• Supongo que comprende los conceptos básicos del desarrollo de Android: la estructura de los archivos del proyecto, la configuración de las aplicaciones de Android, etc.
• Usaré Android Studio, pero las instrucciones deberían traducirse a casi cualquier entorno de desarrollo de Android. Android Studio todavía está en “beta”, pero también lo está Glass. No tenga miedo de comenzar a usarlo, es realmente un gran producto. Android Studio está disponible para descargar aquí.

Configuración de su Google Glass

Muy bien, ¡comencemos!

Lo primero que debe hacer es habilitar el modo de depuración en su Glass. Tienes que hacer algo como esto en cada dispositivo Android que uses para el desarrollo de tus aplicaciones para que te resulte familiar. Para habilitar la depuración, deslícese hasta " Configuración " -> " Información del dispositivo " y luego toque para abrir el menú del dispositivo. Seleccione " Activar depuración " y se habilitará.

A continuación, debe preparar su entorno de desarrollo. La versión actual de Google Glass requiere que use la versión 19 de la API, así que asegúrese de que esté instalada. Además, debe tener instalado su kit de desarrollo de vidrio. Use su Android SDK Manager para instalar estos dos paquetes si aún no lo ha hecho.

Hola Mundo!

Así que hagamos nuestra primera pieza de "Cristalería". (Sí, ¡Google ha acuñado otro término! "Cristalería" es el nombre de cualquier aplicación que se ejecuta en Google Glass). Comenzaremos desarrollando un buen y antiguo "¡Hola mundo!" solicitud. Como la mayoría de los principales entornos de desarrollo de Android, Android Studio completa automáticamente las nuevas aplicaciones con una plantilla para mostrar esta famosa frase. Como resultado, obtener "¡Hola mundo!" estar en funcionamiento es simplemente un ejercicio de implementación fundamental de aplicaciones.

En Android Studio, haga clic en " Nuevo proyecto " y complete el formulario del proyecto. Puedes usar algo similar a esto:

Al seleccionar factores de forma y API, asegúrese de seleccionar " Glass " y API 19

Seleccione " Actividad de inmersión " como su actividad de inicio.

¿Recuerdas que mencioné que necesitarás aprender la diferencia entre Inmersión y Live Card? El artículo de la interfaz de usuario de Google explica los diferentes tipos de pantallas Glass. He aquí un resumen rápido:

• Las tarjetas en vivo se agregan a la línea de tiempo de Glass y muestran información en tiempo real sobre algo a través de actualizaciones de alta frecuencia. Se ejecutan constantemente en segundo plano, incluso cuando los usuarios interactúan con diferentes tarjetas. Esto permite a los usuarios realizar múltiples tareas con acceso constante a diferentes tipos de información en tiempo real.

• Las inmersiones son pantallas totalmente personalizables que se ejecutan fuera de la experiencia de la línea de tiempo. Estos le permiten diseñar su propia interfaz de usuario y procesar la entrada del usuario como mejor le parezca. ¡Esto es lo que usaremos!

En la siguiente pantalla del asistente, deje los valores predeterminados para " Nombre " y " Título " y haga clic en " Finalizar ".

Después de que Gradle se ocupe de sus dependencias y prepare su proyecto, es hora de conectarlo a Glass. ¡Ahora esto es un desarrollo futurista!

Suponiendo que todos sus controladores ADB de Android estén en su lugar y su sistema reconozca su Glass, debe incluir su Glass en su lista de dispositivos.

Si esta es la primera vez que conecta su dispositivo a una computadora, su Glass le pedirá aprobación/establecimiento de confianza. Simplemente toque su vaso para permitir la conexión y debería estar listo.

Haga clic en " Ejecutar " e implemente su "APK predeterminado" con "Actividad principal" como la actividad de inicio para iniciar en el dispositivo "USB".

Después de unos segundos, debería ver algo como esto en la pantalla de su Glass:

¡Viva! ¡Su aplicación se está ejecutando en Glass! ¡Y todo lo que tuvo que hacer fue completar algunos valores predeterminados cuando creó la aplicación!

Dado que no especificamos otra cosa, Glass mostrará su aplicación con el nombre "Mostrar demostración". Si vuelves a la pantalla de Inicio y luego tocas para abrir el menú de la aplicación, verás que aparece así:

un poco de polaco

Ok, lo tienes funcionando, pero esto no parece una aplicación Glass real, y no quieres que la aplicación se inicie con "Mostrar demostración".

En este tutorial, solo lo modificaremos un poco para obtener la sensación real.

Configuración del tema

En primer lugar, no desea ocupar ninguna parte de su pequeña pantalla Glass con esta fea barra de título de actividad "Hello World Immersion" de encabezado, y definitivamente no desea que su pantalla sea gris con una fuente negra. Para solucionar esto, solo tenemos que cambiar el tema en nuestro Android y dejar que Glass OS se encargue de ello.

Abra res/values/styles.xml para editar. Debe tener el siguiente contenido:

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

Simplemente cambie android:Theme.Holo.Light a android:Theme.DeviceDefault . Esto debería encargarse del diseño y los colores de la aplicación automáticamente, utilizando el tema predeterminado de Glass.

Definición de la apariencia del menú

Bien, lo siguiente que queremos hacer en este tutorial de desarrollo de Glass es configurar nuestra aplicación para que tenga un nombre propio y un buen inicio controlado por voz. Abra su manifiesto de Android ( AndroidManifest.xml ) y agregue lo siguiente arriba <application… tag:

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

La razón por la que desea utilizar los permisos de DEVELOPMENT es para poder jugar con controles de voz personalizados. Google es bastante estricto con respecto a qué comandos de voz están permitidos en las aplicaciones aprobadas de Glass, y todos los comandos nuevos deben aprobarse. Dado que este tutorial tiene fines de aprendizaje y no enviará esta aplicación a la tienda oficial de Glassware, no debe preocuparse por eso. Simplemente active los permisos de DEVELOPMENT y tendrá acceso a "comandos de voz no listados". Para obtener más información al respecto, lea esta página de GDK.

Abra voice_trigger.xml para editar. Aquí es donde se define el comando de voz para iniciar su aplicación. Debe estar ubicado en la carpeta res/xml/ . Debería obtener contenido similar a este:

 <trigger command="SHOW_ME_A_DEMO" />

En lugar de decir "Muéstrame una demostración" para iniciar nuestra aplicación, digamos simplemente el nombre de la aplicación. Cambie el contenido del archivo a:

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

Si regresa a su archivo de manifiesto, puede notar que su android:label="@string/app_name" se actualizó automáticamente para usar también la cadena de recursos @string/app_name en lugar del valor codificado de Hello Glass como estaba antes . Si esta configuración no se actualizó, asegúrese de establecer el valor en android:label="@string/app_name" .

¿Y cuál es el nombre de tu aplicación, exactamente? Si abre res/values/strings.xml , su app_name debería aparecer como:

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

Esto debería terminar con su primera aplicación Hello Glass. ¡Veamos cómo funciona ahora!

Desde la pantalla de inicio, puede decir "ok glass" para que aparezca el menú de voz. Su aplicación ahora está en la lista de comandos activados por voz.

Con este tutorial para guiarlo, así es como se ve ahora la pantalla de inicio de su aplicación Glass.

Si dices " Hola glass ", tu aplicación debería comenzar y deberías obtener una experiencia Glass estandarizada:

Si no desea usar su voz para activar la aplicación, simplemente toque en su pantalla de Inicio y verá que su aplicación está disponible en el menú:

¿Voz o tacto? ¡Usa ambos!

Es muy importante que prestes mucha atención a la interfaz de tu aplicación y la interacción de tus usuarios con ella. Recuerde que sus usuarios no siempre están en posición de usar su voz, por ejemplo, mientras miran una conferencia o presentación. Alternativamente, pueden tener las manos ocupadas y no poder usar el tacto. Le sugiero que proporcione interacción de menú táctil y de voz siempre que sea posible, lo que permite a sus usuarios navegar a través de su aplicación utilizando la voz y el panel táctil en paralelo.

Una Aplicación Real - Toptal Finder

Ahora que se siente cómodo con el desarrollo de Glass y ha creado Hello Glass, es hora de crear una aplicación real que pondrá a trabajar las nuevas funciones de Glass. Construyamos una aplicación que le permita explorar los perfiles de los mejores desarrolladores de Toptal según la plataforma de desarrollo.

La estructura de nuestra aplicación Glass de ejemplo será simple:

1. Queremos que nuestra pantalla de inicio tenga el logotipo de Toptal con un menú activado por voz y toque que nos permita seleccionar la plataforma de desarrollo para la que necesitamos un desarrollador.
2. Después de seleccionar una plataforma, queremos obtener una lista de desarrolladores con su imagen y nombre. Los perfiles de los desarrolladores se presentarán en forma de una lista desplazable de tarjetas personales.
3. Al ver un perfil de desarrollador, queremos poder agregarlo a favoritos o enviar una solicitud de contratación.

Los basicos

Recapitulemos rápidamente lo que ya agregó además de su conocimiento de Android:

1. Cómo configurar su entorno de desarrollo para construir Glassware.
2. Cómo configurar su aplicación para usar el tema estándar de GUI Glassware.
3. Cómo iniciar su aplicación usando comandos de voz personalizados y nombres de menú.

Usando este conocimiento, ponga en marcha su nueva aplicación. Puede actualizar la aplicación Hello Glass desde arriba o iniciar una aplicación nueva siguiendo esos mismos pasos. Nombra esta aplicación como " Top Finder " y haz que tu archivo voice_trigger.xml se vea así.

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

La restricción network="true" le dice a glass que verifique la conectividad de la red al iniciar esta aplicación, que necesitaremos para conectarnos a las listas de desarrolladores de Toptal. Si no hay conexión, Glass mostrará un mensaje de advertencia.

Pantalla de inicio

Hagamos que la pantalla de inicio de nuestra aplicación se vea así:

Cuando vea el mensaje "ok glass" en su pantalla, significa que la aplicación tiene un menú activado por voz en ese lugar. Decir la frase "ok glass" aquí activa el menú de voz para esta ubicación. Esta frase está predefinida por Glass y no se puede cambiar.

Puede pensar en "ok glass" como un "menú de aplicaciones", tal como lo ha usado en el desarrollo de su teléfono inteligente/tableta, y tiene exactamente la misma función. Como "tocaría" el "icono del menú de aplicaciones" en su pantalla (a menudo 3 puntos o líneas) para abrir un menú de aplicaciones de Android, debe decir "ok glass" para abrir el menú activado por voz en su aplicación Glassware.

Para habilitar el menú "ok glass" , debe solicitar FEATURE_VOICE_COMMANDS de la API. Para hacer esto, agregue la siguiente línea en su controlador onCreate en su MainActivity :

 getWindow().requestFeature(WindowUtils.FEATURE_VOICE_COMMANDS);

Cada actividad que tenga esta función incluida se representará con el texto "ok glass" en la parte inferior central.

Lo siguiente que debe hacer es crear un menú para la pantalla principal. En su carpeta res/menu cree una nueva definición de menú XML llamada main.xml . Para simplificar las cosas, solo habilitaremos tres plataformas de desarrollo de Toptal, pero siéntase libre de hacer los cambios que desee.

Debe tener el siguiente contenido:

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

Quizás se pregunte por qué elegí títulos de menú bastante largos en lugar de simplemente Android, JavaScript e iOS. Bueno, la razón es muy simple. Los chicos del equipo de desarrollo de Glass siguen mejorando el reconocimiento de voz. Se recomienda como práctica usar dos o tres palabras en sus menús para que Glass las reconozca más fácilmente.

Ya mencioné que el menú "ok glass" no es diferente del menú estándar de la aplicación de Android. Adjuntar un menú a una actividad es prácticamente lo mismo. Simplemente anule el controlador onCreatePanelMenu en su MainActivity e infle el menú principal que acaba de crear:

 @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); }

Ahora necesitamos agregar un controlador de menú. Antes de hacer eso, cree un método vacío llamado findDevelopers . Volveremos sobre esto más adelante para iniciar una búsqueda y mostrar los resultados. Después de eso, puede anular su controlador de menú.

 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); }

Ahora es el momento de hacer que la pantalla de inicio de la aplicación Google Glass de ejemplo sea bonita. Importe un logotipo de Toptal en su aplicación como res/drawable/logo.png . Usé esta imagen:

En su clase MainActivity , realice los siguientes cambios.

Asegúrese de que las siguientes variables privadas se declaren al comienzo de la clase:

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

Cambie el método buildView para personalizar el diseño de la tarjeta:

 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(); }

Y cambie su controlador onCreate para que sea así:

 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); }

Como dije antes, queremos incluir el menú activado por toque junto con "ok glass" , así que solo habilite los gestos como lo haría en su aplicación de Android. Agregue los siguientes métodos en su clase 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; }

¡Eso debería ser! Ahora puede iniciar su aplicación y probar ambos métodos de activación del menú. Si dice "ok glass" , aparecerán tres elementos de menú en la pantalla y, si toca el cristal, se abrirá un menú desplazable. Para navegar a través de los elementos del menú, puede deslizar hacia adelante y hacia atrás.

Así es como se ve el menú de voz:

Y aquí está el menú de gestos:

Si selecciona un elemento del menú, no sucederá nada, ya que su método findDevelopers aún no se ha implementado.

Pantallas de desarrollador

Continuaremos usando el diseño predeterminado de la Tarjeta de cristal, con una imagen en el lado izquierdo, texto en el derecho y algo de información en el pie de página. Para obtener más información sobre las prácticas recomendadas para diseñar sus tarjetas, consulte la guía de estilo de Google Glass.

Nuestro perfil de desarrollador está definido por propiedades simples:

1. Nombre
2. Imagen
3. plataforma de desarrollo

Entonces, asegurémonos de tener la estructura adecuada de clases en nuestra aplicación. Cree una nueva clase llamada DeveloperModel.java en su carpeta java/models . Queremos que esta clase sea serializable, ya que contendrá perfiles que están en una lista.

 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; } }

Queremos que nuestras tarjetas estén estrechamente vinculadas a los datos de nuestro perfil de desarrollador. Debido a que el CardScrollAdapter predeterminado es un poco genérico con respecto a su modelo de datos, necesitamos ampliarlo y hacerlo nuestro. Cree DeveloperAdapter.java en su carpeta 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); } }

No queremos que nuestros resultados de búsqueda se agreguen en la pantalla de inicio de la aplicación, por lo que crearemos una nueva Actividad que hará la búsqueda y mostrará los resultados. Cree una nueva actividad, ResultsActivity , junto a su MainActivity (probablemente en java/com.helloglass ).

Asegúrese de que extends Activity .

A continuación, debemos especificar un menú para nuestras tarjetas de perfil de desarrollador. Cree un nuevo menú, developer.xml , con el siguiente contenido:

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

Para habilitar el paso de parámetros entre ResultsActivity y MainActivity agregue las siguientes líneas al comienzo de la clase ResultsActivity :

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

Asegúrate de agregar tu nueva actividad a tu archivo de manifiesto:

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

Configurar la pantalla inicial de ResultsActivity y configurar las tarjetas es muy similar a lo que hicimos en MainActivity . Primero comprueba que tienes tus tarjetas y scroller definidos al principio:

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

Cree un método de búsqueda temporal al que volveremos más adelante para implementarlo. Agregar nuevas tarjetas a la lista de perfiles es tan simple como agregar elementos a una matriz. Llamaremos a este método findDevelopers también, pero este pertenece a 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); }

Ahora regrese a su MainActivity y actualice findDevelopers allí para iniciar su ResultsActivity y pase la propiedad de la platform :

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

Adjunte su menú de desarrollador a ResultsActivity . Podrá abrir el menú en cualquier tarjeta de perfil.

 @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); }

Al igual que antes, habilite los gestos para manejar el panel táctil en su Glass cuando se muestre ResultsActivity . Para hacer eso, simplemente llame a openOptionsMenu() en su onGesture(Gesture gesture) :

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

Además, agregue un controlador de menú a las acciones relacionadas con el desarrollador. Dejaremos mensajes Toast simples por ahora.

 @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); }

Cada aplicación debe usar algunos elementos visuales agradables, íconos, etc. El equipo de Google Glass ha proporcionado un conjunto muy grande de íconos estandarizados comunes que los desarrolladores de Glass pueden usar gratis en sus aplicaciones. Puede encontrar un conjunto completo de íconos estándar de Glass, así como fuentes en su biblioteca

Por ahora, solo necesita un ícono ic_person_50.png , así que continúe y descárguelo a su carpeta res\drawable . Usaremos este ícono en lugar de descargar una imagen del desarrollador.

Lo último que queda en nuestro tutorial de desarrollo de aplicaciones Glass por ahora es anular nuestro controlador onCreate en ResultsActivity , donde verificaremos qué plataforma de desarrollo se reenvió desde MainActivity y completaremos nuestra lista.

 @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); }

Puede dejar los métodos onResume y onPause igual que en su MainActivity .

Si inicia su aplicación ahora, puede verificar cómo se crean sus perfiles de desarrollador sobre la marcha según el menú seleccionado en MainActivity . Nuevamente, tiene la opción de mostrar su menú usando "ok glass" o tocando el panel táctil o usando la activación por voz. Así es como se ve el perfil del "décimo desarrollador de Android" en este momento:

Al tocar aparece el menú táctil:

Y al decir "ok glass" aparece el menú de voz:

Deslícese hacia abajo desde la lista para volver a la pantalla de inicio de su aplicación.

Obtener perfiles de Internet

Para concluir, completemos el menú con información real de los 10 mejores desarrolladores de Toptal para JavaScript, Android e iOS.

Deberá descargar sus imágenes de perfil y ponerlas a disposición a través de HTTP, o simplemente usar las URL directamente desde toptal.com.

Dado que la creación de un rastreador web solo para obtener los nombres de los mejores desarrolladores en Toptal puede ser un desvío demasiado grande para este artículo, he creado archivos JSON para que los use para Android, JavaScript e iOS.

En su aplicación, lo primero que debe hacer es solicitar acceso a Internet desde su sistema operativo Android. Agregue la siguiente línea a su archivo de Manifiesto

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

Tenga en cuenta que Glass no le permitirá bloquear el hilo principal mediante solicitudes HTTP directamente. Deberá gestionar las descargas de JSON y las imágenes individuales de forma asincrónica. Puede usar una tarea asíncrona, crear su propio servicio o intento de descarga, o lo que prefiera en su trabajo diario.

La creación de esta funcionalidad no es específica de Google Glass, por lo que omitiré fragmentos de código. Si sigue adelante y logra que esta última funcionalidad funcione, sus tarjetas de perfil deberían tener este aspecto:

Resumen del tutorial

Espero que se haya divertido siguiendo este tutorial de desarrollo de Google Glass y creando su primera aplicación Glassware. A estas alturas, debería sentirse cómodo con la idea de que escribir aplicaciones para Glass no es muy diferente de cualquier otra plataforma de Android.

En este punto, ha aprendido cómo extender la pantalla de inicio activada por voz de Google Glass, cómo crear sus propios menús activados por voz y cómo combinar controles de voz con gestos táctiles. También debe comprender los conceptos y los componentes básicos de Glass UI, como tarjetas, diseños y elementos. Ha visto cómo crear tarjetas dinámicamente y cómo navegar entre diferentes actividades.

Para profundizar más, diríjase a los recursos para desarrolladores de Google en developer.google.com/glass. Cuando comience a crear aplicaciones más complejas, demostrará ser un recurso muy útil.

Recuerde que Glass aún se encuentra en la fase de desarrollo y es probable que se implementen muchas más mejoras antes de que llegue al mercado de consumo. Con esto en mente, tengo una nota importante para ti:

Queda bastante trabajo por delante en el reconocimiento de voz y es posible que te encuentres gritando a tu amigo imaginario mientras intentas iniciar tu actividad o completar alguna información. No se preocupe, todos los que prueban el desarrollo de Google Glass sienten lo mismo, por lo que no está solo.

La tecnología mejorará y el vidrio estará listo para la venta al por menor en poco tiempo. Es seguro que causará gran revuelo una vez que llegue a las tiendas, así que espero que esté tan emocionado como yo por ser uno de los primeros en estar a la vanguardia de esta emocionante tecnología.

Un saludo : las capturas de pantalla de este artículo se realizaron con Droid@Screen.