Um tutorial para aspirantes a desenvolvedores do Google Glass: construindo seu primeiro aplicativo Glass

O Google Glass é uma tecnologia futurista que promete revolucionar a forma como usamos nossos dispositivos para interagir com o mundo. Mas do ponto de vista de um desenvolvedor, o que há de tão especial em desenvolver para o vidro? A resposta é “Nada!” Na verdade, do ponto de vista de um desenvolvedor Android experiente, o Google Glass é apenas mais um dispositivo Android com uma tela muito pequena e recursos limitados!

O fato de que qualquer pessoa com conhecimento de desenvolvimento Android possa se tornar um membro dessa comunidade de “elite” de evangelistas futuristas de tecnologia vestível é parte do que torna o Google Glass tão incrível. Claro, você precisará aprender algumas coisas novas, como a diferença entre “Imersão” e “Cartão Ativo”, mas como você verá, a curva de aprendizado não é íngreme.

O objetivo deste tutorial do Google Glass é lançar as bases para o desenvolvimento de qualquer aplicativo Glass, por meio da criação de um aplicativo simples que englobe todas as etapas comuns. Meu objetivo é economizar seu tempo em pesquisa e tentativa e erro, e permitir que você execute seu primeiro aplicativo Glass o mais rápido possível.

Neste tutorial, veremos primeiro como configurar seu ambiente de desenvolvimento e conectar seu Google Glass ao seu computador. Em seguida, criaremos um aplicativo Glass simples “Hello World” que incluirá comandos de voz personalizados e integração com o menu Iniciar do Glass. Depois de desenvolver e executar seu primeiro aplicativo no seu Glass, você aprenderá os conceitos básicos de navegação nos aplicativos do Glass, menus ativados por voz e criação de conteúdo dinâmico.

Como embarcar

O Glass ainda está em uma espécie de fase de “testes beta”, para a qual o Google inventou o termo “Programa Explorer”. Seja qual for o nome, o Glass ainda não é algo que você pode comprar na loja como um smartphone. Infelizmente, as ferramentas de desenvolvimento do Android ainda não possuem um emulador que você possa usar para desenvolver seu aplicativo sem hardware real.

Assim, para executar e depurar seu aplicativo, você precisará colocar as mãos em um Google Glass real por meio do Programa Explorer. Para participar do programa, visite a página de inscrição e inscreva-se para ter acesso. Uma vez aprovado, prepare seu cartão de crédito e aguarde a entrega do seu copo. A versão Explorer do Glass atualmente custa US$ 1.500, mas espera-se que o preço caia significativamente antes que o dispositivo chegue às lojas.

Para quem não tem vidro

Devido à falta de qualquer emulador, é necessário que você tenha o hardware real do Google Glass para desenvolver o aplicativo neste tutorial (ou qualquer aplicativo do Glass), mas se obter um estiver fora do seu orçamento, não se sinta desencorajado - valerá a pena acompanhar de qualquer maneira. O que ficará aparente no tutorial é que desenvolver para Glass é quase o mesmo que desenvolver para qualquer outra plataforma Android!

Se você ainda não usou o Google Glass, mas está tão animado quanto eu, dê uma olhada nesses dois vídeos, pois eles devem fornecer informações suficientes para entender o básico da interface do usuário.

• Introdução ao Google Glass
• Como fazer o Google Glass: primeiros passos

Há vídeos ainda mais úteis para configuração e navegação aqui, e muito mais detalhes sobre a interface do usuário aqui.

Regras de noivado

Este tutorial do desenvolvedor do Google Glass faz as seguintes suposições:

• Presumo que você entenda o básico de navegação e configuração do Glass. Se você nunca usou o Glass, dê uma olhada nos vídeos vinculados acima.
• Presumo que você entenda o básico do desenvolvimento Android: a estrutura dos arquivos do projeto, configuração dos aplicativos Android, etc.
• Estarei usando o Android Studio, mas as instruções devem ser traduzidas para quase qualquer ambiente de desenvolvimento Android. O Android Studio ainda está em “beta”, mas o Glass também. Não tenha medo de começar a usá-lo - é realmente um ótimo produto. O Android Studio está disponível para download aqui.

Configurando seu Google Glass

Tudo bem, vamos começar!

A primeira coisa que você precisa fazer é ativar o modo de depuração no seu Glass. Você precisa fazer algo assim em todos os dispositivos Android que usa para desenvolver seus aplicativos, então isso pode ser familiar. Para ativar a depuração, deslize para “ Configurações ” -> “ Informações do dispositivo ” e toque para abrir o menu do dispositivo. Selecione “ Ativar depuração ” e ele será ativado.

Em seguida, você precisa preparar seu ambiente de desenvolvimento. A versão atual do Google Glass requer o uso da API versão 19, portanto, certifique-se de que ela esteja instalada. Além disso, você precisa ter seu Glass Development Kit instalado. Use seu Android SDK Manager para instalar esses dois pacotes, caso ainda não o tenha feito.

Olá Mundo!

Então vamos fazer nossa primeira peça de “Vidraria”. (Sim, o Google cunhou outro termo! “Glassware” é o nome de qualquer aplicativo executado no Google Glass). Começaremos desenvolvendo um bom e velho “Hello World!” inscrição. Como a maioria dos principais ambientes de desenvolvimento Android, o Android Studio preenche automaticamente novos aplicativos com um modelo para exibir essa famosa frase. Como resultado, obter “Hello World!” instalado e funcionando é apenas um exercício de implantação de aplicativo fundamental.

No Android Studio, clique em “ New Project ” e preencha o formulário do projeto. Você pode usar algo parecido com isso:

Ao selecionar fatores de forma e API, certifique-se de selecionar “ Glass ” e API 19

Selecione “ Atividade de imersão ” como sua atividade de inicialização.

Você lembra que eu mencionei que você vai precisar aprender a diferença entre Imersão e Live Card? O artigo da interface do usuário do Google explica os diferentes tipos de telas de vidro. Aqui está um resumo rápido:

• Os cartões ao vivo são adicionados à linha do tempo do Glass e exibem informações em tempo real sobre algo por meio de atualizações de alta frequência. Eles estão constantemente sendo executados em segundo plano, mesmo quando os usuários estão interagindo com cartões diferentes. Isso permite que os usuários realizem várias tarefas com acesso constante a diferentes tipos de informações em tempo real.

• As imersões são telas totalmente personalizáveis ​​que são executadas fora da experiência da linha do tempo. Eles permitem que você crie sua própria interface do usuário e processe a entrada do usuário da maneira que achar melhor. É isso que vamos usar!

Na próxima tela do assistente, deixe os valores padrão para “ Nome ” e “ Título ” e clique em “ Concluir ”.

Depois que o Gradle cuidar de suas dependências e deixar seu projeto pronto, é hora de colocá-lo no Glass. Agora isso é desenvolvimento futurista!

Supondo que todos os seus drivers Android ADB estejam instalados e seu Glass seja reconhecido pelo seu sistema, você deve colocar seu Glass na sua lista de dispositivos.

Se esta for a primeira vez que você conectou seu dispositivo a um computador, seu Glass solicitará a aprovação/confiança para ser estabelecida. Basta tocar no vidro para permitir a conexão e você estará pronto.

Clique em “ Executar ” e implante seu “APK padrão” com “MainActivity” como a atividade de inicialização para lançamento no dispositivo “USB”.

Após alguns segundos, você deverá ver algo assim na tela do Glass:

Viva! Seu aplicativo está rodando no Glass! E tudo o que você precisava fazer era preencher alguns valores padrão ao criar o aplicativo!

Como não especificamos de maneira diferente, o Glass mostrará seu aplicativo com o nome "Mostrar demonstração". Se você deslizar de volta para a tela inicial e depois tocar para abrir o menu do aplicativo, você o verá listado assim:

Um pouco de polonês

Ok, você conseguiu executá-lo, mas isso não se parece com um aplicativo Glass real e você não deseja que o aplicativo seja iniciado por “Mostrar demonstração”.

Neste tutorial, vamos apenas ajustá-lo um pouco para obter a sensação real.

Configurando o Tema

Primeiro, você não quer ocupar nenhuma de sua pequena tela Glass com esta barra de título de atividade “Hello World Immersion” de cabeçalho feio, e você definitivamente não quer que sua tela fique cinza com fonte preta. Para corrigir isso, basta mudar o tema em nosso Android e deixar o Glass OS cuidar disso.

Abra res/values/styles.xml para edição. Deve ter o seguinte conteúdo:

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

Basta alterar android:Theme.Holo.Light para android:Theme.DeviceDefault . Isso deve cuidar do layout e das cores do aplicativo automaticamente, usando o tema padrão do Glass.

Definindo a aparência do menu

Ok, a próxima coisa que queremos fazer neste tutorial de desenvolvimento do Glass é configurar nosso aplicativo para ter um nome próprio e uma boa inicialização controlada por voz. Abra seu Android Manifest ( AndroidManifest.xml ) e adicione a seguinte tag <application… acima:

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

O motivo pelo qual você deseja usar as permissões de DEVELOPMENT é para poder jogar com controles de voz personalizados. O Google é bastante rigoroso sobre quais comandos de voz são permitidos em aplicativos Glass aprovados, e todos os novos comandos devem ser aprovados. Como este tutorial é para fins de aprendizado e você não enviará este aplicativo para a loja oficial de Glassware, você não deve se preocupar com isso. Basta ativar as permissões de DEVELOPMENT e você terá acesso a “comandos de voz não listados”. Para obter mais informações sobre isso, leia esta página do GDK.

Abra voice_trigger.xml para edição. Aqui é definido o comando de voz para iniciar seu aplicativo. Ele deve estar localizado na pasta res/xml/ . Você deve obter conteúdo semelhante a este:

 <trigger command="SHOW_ME_A_DEMO" />

Em vez de dizer “Mostre-me uma demonstração” para iniciar nosso aplicativo, digamos apenas o nome do aplicativo. Altere o conteúdo do arquivo para:

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

Se você voltar ao seu arquivo de manifesto, poderá notar que seu android:label="@string/app_name" foi atualizado automaticamente para também usar a string de recurso @string/app_name em vez do valor codificado Hello Glass como era antes . Se essa configuração não foi atualizada, certifique-se de definir o valor como android:label="@string/app_name" .

E qual é o nome do seu aplicativo, exatamente? Se você abrir res/values/strings.xml , seu app_name deverá ser listado como:

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

Isso deve encerrar as coisas para o seu primeiro aplicativo Hello Glass. Vamos ver como funciona agora!

Na tela inicial, você pode dizer “ok glass” para abrir o menu de voz. Seu aplicativo agora está na lista de comandos ativados por voz.

Com este tutorial para guiá-lo, é assim que a tela inicial do aplicativo Glass se parece agora.

Se você disser “ Olá, vidro ”, seu aplicativo deve iniciar e você deve obter uma experiência padronizada do Glass:

Se você não quiser usar sua voz para ativar o aplicativo, basta tocar na tela inicial e verá que seu aplicativo está disponível no menu:

Voz ou toque? Use ambos!

É muito importante que você preste muita atenção na interface do seu aplicativo e na interação de seus usuários com ele. Lembre-se de que seus usuários nem sempre estão em condições de usar a voz - por exemplo, enquanto assistem a uma palestra ou apresentação. Alternativamente, eles podem ter as mãos ocupadas e não conseguir usar o toque. Sugiro que você forneça interação de menu de toque e voz sempre que possível, permitindo que seus usuários naveguem pelo seu aplicativo usando voz e touchpad em paralelo.

Uma aplicação real - Toptal Finder

Agora que você está confortável com o desenvolvimento do Glass e criou o Hello Glass, é hora de criar um aplicativo real que colocará os novos recursos do Glass em funcionamento. Vamos construir um aplicativo que permite navegar pelos perfis dos principais desenvolvedores da Toptal com base na plataforma de desenvolvimento.

A estrutura do nosso exemplo de aplicação Glass será simples:

1. Queremos que nossa tela inicial tenha o logotipo da Toptal com voz e toque no menu ativado, permitindo selecionar a plataforma de desenvolvimento para a qual precisamos de um desenvolvedor.
2. Depois de selecionar uma plataforma, queremos obter uma lista de desenvolvedores com sua imagem e nome. Os perfis dos desenvolvedores serão apresentados na forma de uma lista rolável de cartões pessoais.
3. Ao visualizar um perfil de desenvolvedor, queremos adicioná-lo aos favoritos ou enviar uma solicitação de contratação.

O básico

Vamos recapitular rapidamente o que você já adicionou ao seu conhecimento do Android:

1. Como configurar seu ambiente de desenvolvimento para construir Glassware.
2. Como configurar seu aplicativo para usar o tema padrão da GUI do Glassware.
3. Como iniciar seu aplicativo usando comandos de voz personalizados e nomes de menu.

Usando esse conhecimento, coloque seu novo aplicativo em funcionamento. Você pode atualizar o aplicativo Hello Glass acima ou iniciar um novo aplicativo seguindo essas mesmas etapas. Nomeie este aplicativo como " Top Finder " e faça com que seu arquivo voice_trigger.xml assim.

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

A restrição network="true" diz ao Glass para verificar a conectividade de rede ao iniciar este aplicativo, que precisaremos conectar às listas de desenvolvedores da Toptal. Se não houver conexão, o Glass exibirá uma mensagem de aviso.

Tela inicial

Vamos fazer com que a tela inicial do nosso aplicativo fique assim:

Quando você vê a mensagem “ok glass” na tela, significa que o aplicativo possui um menu ativado por voz naquele local. Falar a frase “ok glass” aqui ativa o menu de voz para este local. Esta frase é predefinida pelo Glass e você não pode alterá-la.

Você pode pensar no “ok glass” como um “menu de aplicativos”, assim como você usou no desenvolvimento do seu smartphone/tablet, e tem exatamente a mesma função. Como você “tocaria” no “ícone do menu do aplicativo” na tela (geralmente 3 pontos ou linhas) para abrir um menu de aplicativo Android, você precisa dizer “ok glass” para abrir o menu ativado por voz no seu aplicativo Glassware.

Para habilitar o menu “ok glass” você precisa solicitar FEATURE_VOICE_COMMANDS da API. Para fazer isso, adicione a seguinte linha em seu manipulador onCreate em seu MainActivity :

 getWindow().requestFeature(WindowUtils.FEATURE_VOICE_COMMANDS);

Todas as atividades que incluem esse recurso serão renderizadas com o texto “ok glass” na parte inferior central.

A próxima coisa que você precisa fazer é criar um menu para a tela principal. Em sua pasta res/menu , crie uma nova definição de menu XML chamada main.xml . Para simplificar, apenas habilitaremos três plataformas de desenvolvedor Toptal, mas sinta-se à vontade para fazer as alterações que desejar.

Deve ter o seguinte conteúdo:

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

Você pode estar se perguntando por que escolhi títulos de menu bastante longos em vez de simplesmente Android, JavaScript e iOS. Bem, a razão é muito simples. Os caras da equipe de desenvolvimento do Glass ainda estão melhorando o reconhecimento de voz. É uma prática recomendada usar duas ou três palavras em seus menus para que o Glass as reconheça mais facilmente.

Já mencionei que o menu “ok glass” não é diferente do menu padrão do aplicativo Android. Anexar um menu a uma atividade é praticamente o mesmo. Basta substituir o manipulador onCreatePanelMenu em seu MainActivity e inflar o menu principal que você acabou de criar:

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

Agora precisamos adicionar um manipulador de menu. Antes de fazer isso, crie um método vazio chamado findDevelopers . Voltaremos a isso mais tarde para iniciar uma pesquisa e mostrar os resultados. Depois disso, você pode substituir seu manipulador 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); }

Agora é hora de deixar a tela inicial do nosso exemplo de aplicativo Google Glass bonita. Importe um logotipo da Toptal em seu aplicativo como res/drawable/logo.png . Usei esta imagem:

Em sua classe MainActivity , faça as seguintes alterações.

Certifique-se de que as seguintes variáveis ​​privadas sejam declaradas no início da classe:

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

Altere o método buildView para personalizar o layout do cartão:

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

E mude seu manipulador onCreate para ficar assim:

 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 eu disse antes, queremos incluir o menu ativado por toque junto com “ok glass” , então apenas ative os gestos como você faria no seu aplicativo Android. Adicione os seguintes métodos em sua 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; }

Deve ser isso! Agora você pode iniciar seu aplicativo e experimentar os dois métodos de ativação do menu. Se você disser “ok glass” , você verá três itens de menu exibidos na tela e, se você tocar no vidro, um menu rolável será aberto. Para navegar pelos itens do menu, você pode deslizar para trás e para frente.

Veja como é o menu de voz:

E aqui está o menu de gestos:

Se você selecionar um item de menu, nada acontecerá, pois seu método findDevelopers ainda não foi implementado.

Telas do desenvolvedor

Continuaremos a usar o layout padrão do Glass Card, com uma imagem à esquerda, texto à direita e algumas informações de rodapé. Para obter mais informações sobre as práticas recomendadas para criar seus cartões, consulte o guia de estilo do Google Glass.

Nosso perfil de desenvolvedor é definido por propriedades simples:

1. Nome
2. Foto
3. Plataforma de desenvolvimento

Então, vamos ter certeza de ter a estrutura adequada de classes em nosso aplicativo. Crie uma nova classe chamada DeveloperModel.java em sua pasta java/models . Queremos que essa classe seja serializável, pois conterá perfis que estão em uma 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 nossos cartões sejam fortemente vinculados aos nossos dados de perfil de desenvolvedor. Como o CardScrollAdapter padrão é um pouco genérico em relação ao seu modelo de dados, precisamos estendê-lo e torná-lo nosso. Crie DeveloperAdapter.java em sua pasta 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); } }

Não queremos que nossos resultados de pesquisa sejam adicionados na tela inicial do aplicativo, então criaremos uma nova Activity que fará a pesquisa e exibirá os resultados. Crie uma nova atividade, ResultsActivity , ao lado de sua MainActivity (provavelmente em java/com.helloglass ).

Certifique-se de que ele extends Activity .

Em seguida, precisamos especificar um menu para nossos cartões de perfil de desenvolvedor. Crie um novo menu, developer.xml , com o seguinte conteúdo:

 <?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 a passagem de parâmetros entre ResultsActivity e MainActivity adicione as seguintes linhas no início da classe ResultsActivity :

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

Certifique-se de adicionar sua nova atividade ao seu arquivo de manifesto:

 <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 a tela inicial de ResultsActivity e configurar cartões é muito semelhante ao que fizemos em MainActivity . Primeiro verifique se você tem seus cartões e scroller definidos no início:

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

Crie um método de pesquisa temporário ao qual voltaremos mais tarde para implementar. Adicionar novos cartões à lista de perfis é tão simples quanto adicionar itens a um Array. Chamaremos esse método findDevelopers também, mas este pertence 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); }

Agora volte para sua MainActivity e atualize findDevelopers lá para iniciar sua ResultsActivity e passar a propriedade da platform :

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

Anexe seu menu de desenvolvedor ao ResultsActivity . Você poderá abrir o menu em qualquer cartão 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); }

Assim como anteriormente, ative os gestos para manipular o touchpad no seu Glass quando ResultsActivity for exibido. Para fazer isso, basta chamar openOptionsMenu() em seu onGesture(Gesture gesture) :

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

Além disso, adicione um manipulador de menu às ações relacionadas ao desenvolvedor. Vamos deixar mensagens simples de brinde por enquanto.

 @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 aplicativo deve usar alguns elementos visuais interessantes, ícones etc. A equipe do Google Glass forneceu um conjunto muito grande de ícones padronizados comuns que são gratuitos para os desenvolvedores do Glass usarem em seus aplicativos. Você pode encontrar um conjunto completo de ícones padrão do Glass, bem como fontes em sua biblioteca

Por enquanto, você só precisa de um ícone ic_person_50.png , então vá em frente e faça o download para sua pasta res\drawable . Usaremos este ícone em vez de baixar uma foto do desenvolvedor.

A última coisa que resta em nosso tutorial de desenvolvimento de aplicativos Glass por enquanto é substituir nosso manipulador onCreate em ResultsActivity , onde verificaremos qual plataforma de desenvolvimento foi encaminhada de MainActivity e preencheremos nossa 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); }

Você pode deixar os métodos onResume e onPause da mesma forma que em seu MainActivity .

Se você iniciar seu aplicativo agora, poderá verificar como seus perfis de desenvolvedor são criados em tempo real com base no menu selecionado em MainActivity . Novamente, você tem a opção de exibir seu menu usando “ok glass” ou tocando no touchpad ou usando a ativação por voz. Veja como é o perfil do “10º desenvolvedor Android” no momento:

Tocar abre o menu de toque:

E dizer “ok glass” traz o menu de voz:

Deslize para baixo na lista para voltar à tela inicial do seu aplicativo.

Obtendo Perfis da Internet

Para encerrar, vamos preencher o menu com informações reais para os 10 principais desenvolvedores da Toptal para JavaScript, Android e iOS.

Você precisará baixar suas fotos de perfil e disponibilizá-las via HTTP, ou apenas usar URLs diretamente do toptal.com.

Como criar um rastreador da Web apenas para obter os nomes dos principais desenvolvedores no Toptal pode ser um desvio muito grande para este artigo, criei arquivos JSON para você usar para Android, JavaScript e iOS.

Em seu aplicativo, a primeira coisa que você precisa fazer é solicitar acesso à Internet do seu sistema operacional Android. Adicione a seguinte linha ao seu arquivo de manifesto

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

Esteja ciente de que o Glass não permitirá que você bloqueie o thread principal usando solicitações HTTP diretamente. Você precisará lidar com downloads JSON e imagens individuais de maneira assíncrona. Você pode usar uma tarefa assíncrona, criar seu próprio serviço ou intenção de download ou o que preferir em seu trabalho diário.

Construir essa funcionalidade não é específico do Google Glass, então vou pular trechos de código. Se você seguir em frente e fizer com que essa última funcionalidade funcione, seus cartões de perfil devem ficar assim:

Conclusão do tutorial

Espero que você tenha se divertido seguindo este tutorial de desenvolvimento do Google Glass e construindo seu primeiro aplicativo Glassware. Até agora, você deve estar confortável com a ideia de que escrever aplicativos para o Glass não é muito diferente de qualquer outra plataforma Android.

Neste ponto, você aprendeu como estender a tela inicial ativada por voz do Google Glass, como criar seus próprios menus ativados por voz e como combinar controles de voz com gestos de toque. Você também deve entender os conceitos e blocos de construção básicos da interface do usuário do Glass, como cartões, layouts e elementos. Você viu como criar cartões dinamicamente e como navegar entre diferentes atividades.

Para se aprofundar, acesse os recursos do desenvolvedor do Google em developers.google.com/glass. Quando você começar a construir aplicativos mais complexos, isso se mostrará um recurso muito útil.

Lembre-se de que o Glass ainda está em fase de desenvolvimento e provavelmente há muito mais melhorias a serem implementadas antes de chegar ao mercado consumidor. Com isso em mente, tenho uma observação importante para você:

Ainda há muito trabalho no reconhecimento de voz e você pode se pegar gritando com seu amigo imaginário enquanto tenta iniciar sua atividade ou preencher algumas informações. Não se preocupe - todos que experimentam o desenvolvimento do Google Glass sentem o mesmo, então você não está sozinho.

A tecnologia melhorará e o vidro estará pronto para o varejo em pouco tempo. É certo que causará grandes ondas quando chegar às lojas, então espero que você esteja tão empolgado quanto eu por ser um dos primeiros a estar na vanguarda dessa tecnologia empolgante!

Shout Out : As capturas de tela neste artigo são feitas usando Droid@Screen.