Um tutorial para desenvolvedores aspirantes ao Google Glass: criando seu primeiro aplicativo Glass

O motivo pelo qual deseja usar voice_trigger.xml permissões são para que você possa jogar com controles de voz personalizados. O Google é bastante rígido sobre quais comandos de voz são permitidos em aplicativos do 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 do Glassware, não se preocupe com isso. Basta ligar res/xml/ permissões e você terá acesso a “comandos de voz não listados”. Para obter mais informações sobre isso, leia esta página GDK .

Aberto android:label='@string/app_name' para edição. É aqui que o comando de voz para iniciar seu aplicativo é definido. Deve estar localizado em @string/app_name pasta. Você deve obter conteúdo semelhante a este:

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

Se você voltar ao seu arquivo de manifesto, poderá notar que o res/values/strings.xml foi atualizado automaticamente para usar também a string de recurso app_name em vez do codificado Hello Glass valor como era antes. Se esta configuração não foi atualizada, certifique-se de definir o valor para voice_trigger.xml.

E qual é o nome do seu aplicativo, exatamente? Se você abrir network='true', seu FEATURE_VOICE_COMMANDS deve ser listado como:

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

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

Com este tutorial para guiá-lo, esta é a aparência da tela inicial do seu aplicativo Glass agora.

Se você diz ' Olá copo ”Seu aplicativo deve iniciar e você deve obter uma experiência padronizada do Glass:

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

Voz ou toque? Use ambos!

É muito importante que você preste muita atenção à interface de seu aplicativo e à 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. Como alternativa, eles podem estar com as mãos ocupadas e não conseguir usar o toque. Eu sugiro que você forneça interação de menu de toque e voz sempre que possível, permitindo que seus usuários naveguem por seu aplicativo usando voz e touchpad em paralelo.

Um aplicativo real - ApeeScape 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 para funcionar. Vamos construir um aplicativo que permite navegar pelos perfis dos principais desenvolvedores do ApeeScape com base na plataforma de desenvolvimento.

A estrutura de nosso aplicativo de exemplo do Glass será simples:

1. Queremos que nossa tela inicial tenha o ApeeScape logotipo com um menu ativado por voz e toque, permitindo-nos 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 do desenvolvedor serão apresentados na forma de uma lista rolável de cartões pessoais.
3. Ao visualizar o perfil de um 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 as mesmas etapas. Nomeie este aplicativo “ Top Finder ”E faça o seu MainActivity arquivo tem esta aparência.

O res/menu restrição diz ao vidro para verificar a conectividade de rede ao iniciar este aplicativo, que precisaremos conectar às listas de desenvolvedores do ApeeScape. Se não houver conexão, o Glass exibirá uma mensagem de aviso.

Tela inicial

Vamos deixar a tela inicial do nosso aplicativo mais ou menos assim:

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

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

A fim de habilitar o “Ok copo” menu que você precisa solicitar main.xml da API. Para fazer isso, adicione a seguinte linha em onCreatePanelMenu manipulador em seu MainActivity:

Cada atividade que tem esse recurso incluído será renderizada com “Ok copo” texto na parte inferior central.

A próxima coisa que você precisa fazer é criar um menu para a tela principal. Em seu findDevelopers pasta cria uma nova definição de menu XML chamada 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); } . Para simplificar, habilitaremos apenas três plataformas de desenvolvedor ApeeScape, mas sinta-se à vontade para fazer as alterações conforme desejar.

Deve ter o seguinte conteúdo:

Você deve 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. É prática recomendada usar duas ou três palavras em seus menus para que o Glass as reconheça mais facilmente.

Eu já mencionei que o “Ok copo” O menu não é diferente do menu padrão do aplicativo Android. Anexar um menu a uma atividade é praticamente o mesmo. Basta substituir o MainActivity manipulador em seu private CardScrollView mCardScroller; private View mView; private GestureDetector mGestureDetector; e aumente o menu principal que você acabou de criar:

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

Agora é hora de tornar a tela inicial de nosso aplicativo de exemplo do Google Glass bonita. Importe um logotipo do ApeeScape em seu aplicativo como 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); } . Usei esta imagem:

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

usar raspberry pi como servidor

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

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

E mude o seu java/models manipulador para ser assim:

Como eu disse antes, queremos incluir o menu ativado por toque junto com “Ok copo” , então apenas habilite os gestos como faria em seu aplicativo Android. Adicione os seguintes métodos em CardScrollAdapter classe:

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

Esta é a aparência do menu de voz:

E aqui está o menu de gestos:

Se você selecionar um item de menu, nada acontecerá, pois java/adapters método 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 projetar seus cartões, consulte o Google Glass Guia de estilo .

Nosso perfil de desenvolvedor é definido por propriedades simples:

1. Nome
2. Cenário
3. Plataforma de desenvolvimento

Então, vamos ter certeza de ter a estrutura adequada de classes em nosso aplicativo. Crie uma nova classe chamada 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); } } em seu ResultsActivity pasta. Queremos que esta classe seja serializável, pois conterá perfis que estão em uma lista.

Queremos que nossos cartões sejam fortemente vinculados aos dados de nosso perfil de desenvolvedor. Porque o padrão java/com.helloglass é um pouco genérico em relação ao seu modelo de dados, precisamos estendê-lo e torná-lo nosso. Criar extends Activity em seu developer.xml pasta:

Não queremos que nossos resultados de pesquisa sejam adicionados à tela inicial do aplicativo, portanto, criaremos uma nova Activity que fará a pesquisa e exibirá os resultados. Crie uma nova atividade, MainActivity , ao lado de ResultsActivity (provavelmente em public static final String SEARCH = 'search'; private String mPlatform='Android'; ).

Certifique-se de que ResultsActivity.

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

Para habilitar a passagem de parâmetros entre findDevelopers e ResultsActivity adicione as seguintes linhas no início 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:

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

Configurando a tela inicial de ResultsActivity e configurar os cartões é muito semelhante ao que fizemos em platform. Primeiro, verifique se você tem seus cartões e rolagem definidos no início:

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

Agora volte para o seu openOptionsMenu() e atualizar onGesture(Gesture gesture) lá para começar o seu private GestureDetector createGestureDetector(Context context) { // … @Override public boolean onGesture(Gesture gesture) { if (gesture == Gesture.TAP) { openOptionsMenu(); return true; } else if // … e passe no @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); } propriedade:

Anexe o menu do desenvolvedor a resdrawable. Você poderá abrir o menu em qualquer cartão de perfil.

Assim como antes, ative os gestos para lidar com o touchpad no Glass quando ResultsActivity é exibido. Para fazer isso, basta chamar MainActivity em seu @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étodo:

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

Cada aplicativo deve usar alguns bons elementos visuais, í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 na biblioteca deles

Por enquanto, você só precisa de um ícone MainActivity, então vá em frente e baixe-o para o seu MainActivity pasta. Usaremos este ícone em vez de baixar uma foto do desenvolvedor.

A última coisa que resta em nosso tutorial de desenvolvimento de aplicativo Glass por enquanto é substituir nosso

Você pode sair de

|_+_|

|_+_|

Se você iniciar seu aplicativo agora, poderá verificar como seus perfis de desenvolvedor são criados dinamicamente com base no menu selecionado em

Tocar traz o menu de toque:

E dizendo “Ok copo” abre 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 do ApeeScape para JavaScript , Android e iOS .

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

Como construir um rastreador da web apenas para obter os nomes dos principais desenvolvedores do ApeeScape pode ser um desvio muito grande para este artigo, criei arquivos JSON para você usar no 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

|_+_|

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

A construção dessa funcionalidade não é específica do Google Glass, então vou pular os trechos de código. Se você seguir em frente e conseguir que esta última funcionalidade funcione, seus cartões de perfil devem ter a seguinte aparência:

Resumo do tutorial

Espero que você tenha se divertido acompanhando este tutorial de desenvolvimento do Google Glass e construindo seu primeiro aplicativo Glassware. 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 compreender os conceitos e os blocos de construção básicos da IU do Glass, como cartões, layouts e elementos. Você viu como criar cartões dinamicamente e como navegar entre diferentes atividades.

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

Lembre-se de que o Glass ainda está em fase de desenvolvimento e provavelmente haverá muitos outros aprimoramentos a serem implementados antes de chegar ao mercado consumidor. Com isso em mente, tenho uma observação importante para você:

Ainda há muito trabalho a fazer sobre 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 vai melhorar e o vidro estará pronto para o varejo em nenhum momento. Com certeza causará uma grande onda assim que chegar às lojas, então espero que você esteja tão animado quanto eu por ser um dos primeiros a estar na vanguarda dessa tecnologia incrível!

Gritar : As capturas de tela neste artigo são feitas usando [email protegido] .