Un tutorial per aspiranti sviluppatori di Google Glass: creare la tua prima app Glass

Google Glass è una tecnologia futuristica che promette di rivoluzionare il modo in cui utilizziamo i nostri dispositivi per interagire con il mondo. Ma dal punto di vista di uno sviluppatore, cosa c'è di così speciale nello sviluppo per il vetro? La risposta è "Niente!" In effetti, dal punto di vista di uno sviluppatore Android esperto, Google Glass è solo un altro dispositivo Android con uno schermo molto piccolo e funzionalità limitate!

Il fatto che chiunque abbia una conoscenza dello sviluppo di Android possa diventare un membro di questa comunità "d'élite" di evangelisti futuristici della tecnologia indossabile fa parte di ciò che rende Google Glass così straordinario. Certo, dovrai imparare alcune cose nuove, come la differenza tra "Immersion" e "Active Card", ma come vedrai, la curva di apprendimento non è ripida.

Lo scopo di questo tutorial di Google Glass è quello di gettare le basi per lo sviluppo di qualsiasi applicazione Glass, attraverso la creazione di una semplice app che comprenda tutti i passaggi comuni. Il mio obiettivo è farti risparmiare un po' di tempo in ricerca e tentativi ed errori e consentirti di eseguire la tua prima applicazione Glass il prima possibile.

In questo tutorial esamineremo prima come configurare il tuo ambiente di sviluppo e collegare il tuo Google Glass al tuo computer. Quindi creeremo una semplice app Glass "Hello World" che includerà comandi vocali personalizzati e integrazione con il menu di avvio di Glass. Dopo aver sviluppato e eseguito la prima applicazione sul tuo Glass, imparerai le basi della navigazione nelle applicazioni Glass, i menu ad attivazione vocale e la creazione di contenuti dinamici.

Come salire a bordo

Glass è ancora in una sorta di fase di “beta testing”, per la quale Google ha inventato il termine “Explorer Program”. Comunque lo chiami, Glass non è ancora qualcosa che puoi ottenere in negozio come uno smartphone. Sfortunatamente, gli strumenti di sviluppo Android non hanno ancora un emulatore che puoi utilizzare per sviluppare la tua applicazione senza hardware reale.

Pertanto, per eseguire ed eseguire il debug della tua applicazione, dovrai mettere le mani su un vero Google Glass tramite il programma Explorer. Per aderire al programma visita la pagina di registrazione e registrati per l'accesso. Una volta approvato, prepara la tua carta di credito e attendi la consegna del tuo bicchiere. La versione Explorer di Glass attualmente costa $ 1.500 USD, ma si prevede che il prezzo scenda in modo significativo prima che il dispositivo arrivi nei negozi.

Per i senza vetro

A causa della mancanza di qualsiasi emulatore, è necessario disporre dell'hardware Google Glass effettivo per sviluppare l'app in questo tutorial (o qualsiasi app Glass), ma se ottenerne uno è fuori dal tuo budget, non scoraggiarti: è varrà comunque la pena seguirlo. Ciò che risulterà evidente nel tutorial è che lo sviluppo per Glass è quasi lo stesso dello sviluppo per qualsiasi altra piattaforma Android!

Se non hai ancora utilizzato Google Glass, ma ne sei entusiasta quanto me, dai un'occhiata a questi due video in quanto dovrebbero darti un input sufficiente per comprendere le basi dell'interfaccia utente.

• Introduzione a Google Glass
• Google Glass How-to: per iniziare

Ci sono ancora più video utili per la configurazione e la navigazione qui, e molti altri dettagli sull'interfaccia utente qui.

Regole di ingaggio

Questo tutorial per sviluppatori di Google Glass fa le seguenti ipotesi:

• Presumo che tu abbia compreso le basi della navigazione e della configurazione del Glass. Se non hai mai usato Glass, dai un'occhiata ai video collegati sopra.
• Presumo che tu abbia compreso le basi dello sviluppo Android: la struttura dei file di progetto, la configurazione delle applicazioni Android, ecc.
• Utilizzerò Android Studio, ma le istruzioni dovrebbero essere tradotte in quasi tutti gli ambienti di sviluppo Android. Android Studio è ancora in "beta", ma anche Glass. Non aver paura di iniziare a usarlo: è davvero un ottimo prodotto. Android Studio è disponibile per il download qui.

Configurazione del tuo Google Glass

Bene, iniziamo!

La prima cosa che devi fare è abilitare la modalità di debug sul tuo Glass. Devi fare qualcosa del genere su ogni dispositivo Android che usi per lo sviluppo delle tue app, quindi potrebbe essere familiare. Per abilitare il debug, scorrere su " Impostazioni " -> " Informazioni dispositivo " e quindi toccare per aprire il menu del dispositivo. Seleziona " Attiva debug " e sarà abilitato.

Successivamente, devi preparare il tuo ambiente di sviluppo. La versione corrente di Google Glass richiede l'utilizzo della versione 19 dell'API, quindi assicurati che sia installata. Inoltre, devi avere installato il tuo Glass Development Kit. Usa il tuo Android SDK Manager per installare questi due pacchetti se non l'hai già fatto.

Ciao mondo!

Quindi realizziamo il nostro primo pezzo di "Glassware". (Sì, Google ha coniato un altro termine! "Glassware" è il nome di qualsiasi applicazione in esecuzione su Google Glass). Inizieremo sviluppando un buon vecchio "Hello World!" applicazione. Come la maggior parte dei principali ambienti di sviluppo Android, Android Studio popola automaticamente le nuove app con un modello per visualizzare questa famosa frase. Di conseguenza, ottenendo "Hello World!" attivo e funzionante è semplicemente un esercizio per la distribuzione di app di base.

In Android Studio, fai clic su " Nuovo progetto " e compila il modulo del progetto. Puoi usare qualcosa di simile a questo:

Quando selezioni i fattori di forma e l'API, assicurati di selezionare " Vetro " e API 19

Seleziona " Attività di immersione " come attività di avvio.

Ricordi che ho detto che dovrai imparare la differenza tra Immersion e Live Card? L'articolo sull'interfaccia utente di Google spiega i diversi tipi di schermi in vetro. Ecco un breve riassunto:

• Le schede live vengono aggiunte alla timeline di Glass e visualizzano informazioni in tempo reale su qualcosa tramite aggiornamenti ad alta frequenza. Sono costantemente in esecuzione in background anche quando gli utenti interagiscono con schede diverse. Ciò consente agli utenti di multitasking con accesso costante a diversi tipi di informazioni in tempo reale.

• Le immersioni sono schermate completamente personalizzabili che funzionano al di fuori dell'esperienza della sequenza temporale. Questi ti consentono di progettare la tua interfaccia utente ed elaborare l'input dell'utente come meglio credi. Questo è quello che useremo!

Nella schermata successiva della procedura guidata, lasciare i valori predefiniti per " Nome " e " Titolo " e fare clic su " Fine ".

Dopo che Gradle si prenderà cura delle tue dipendenze e avrà preparato il tuo progetto, è il momento di collegare il tuo Glass plug-in. Ora questo è uno sviluppo futuristico!

Supponendo che tutti i tuoi driver ADB Android siano a posto e che il tuo Glass sia riconosciuto dal tuo sistema, dovresti inserire il tuo Glass nell'elenco dei dispositivi.

Se è la prima volta che colleghi il tuo dispositivo a un computer, il tuo Glass chiederà di stabilire l'approvazione/la fiducia. Basta toccare il vetro per consentire la connessione e dovresti essere pronto.

Fai clic su " Esegui " e distribuisci il tuo "APK predefinito" con "MainActivity" come attività di avvio per l'avvio su dispositivo "USB".

Dopo alcuni secondi, dovresti vedere qualcosa di simile sul tuo schermo Glass:

Evviva! La tua applicazione è in esecuzione su Glass! E tutto ciò che dovevi fare è inserire alcuni valori predefiniti quando hai creato l'app!

Poiché non abbiamo specificato diversamente, Glass mostrerà la tua app sotto il nome "Mostra demo". Se scorri indietro fino alla schermata Start e quindi tocca per aprire il menu dell'app, lo vedrai elencato in questo modo:

Un po' di polacco

Ok, l'hai fatto funzionare, ma non sembra una vera applicazione Glass e non vuoi che l'applicazione venga avviata da "Mostra demo".

In questo tutorial lo modificheremo un po' per ottenere la sensazione reale.

Impostazione del tema

Innanzitutto, non vuoi occupare nessuno dei tuoi piccoli schermi di vetro con questa brutta barra del titolo dell'attività "Hello World Immersion" di intestazione e sicuramente non vuoi che lo schermo sia grigio con caratteri neri. Per risolvere questo problema, dobbiamo solo cambiare il tema sul nostro Android e lasciare che Glass OS se ne occupi.

Apri res/values/styles.xml per la modifica. Dovrebbe avere il seguente contenuto:

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

Basta cambiare android:Theme.Holo.Light in android:Theme.DeviceDefault . Questo dovrebbe occuparsi automaticamente del layout e dei colori dell'applicazione, utilizzando il tema predefinito di Glass.

Definizione dell'aspetto del menu

Ok, la prossima cosa che vogliamo fare in questo tutorial sullo sviluppo di Glass è impostare la nostra applicazione in modo che abbia un nome proprio e un buon avvio controllato dalla voce. Apri il tuo manifest Android ( AndroidManifest.xml ) e aggiungi quanto segue sopra <application… tag:

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

Il motivo per cui desideri utilizzare le autorizzazioni di DEVELOPMENT è che puoi giocare con i controlli vocali personalizzati. Google è piuttosto severo su quali comandi vocali sono consentiti nelle app Glass approvate e tutti i nuovi comandi devono essere approvati. Poiché questo tutorial è a scopo di apprendimento e non invierai questa applicazione al negozio ufficiale di Glassware, non dovresti preoccupartene. Basta attivare le autorizzazioni DEVELOPMENT e avrai accesso a "comandi vocali non elencati". Per ulteriori informazioni a riguardo, leggi questa pagina GDK.

Apri voice_trigger.xml per la modifica. Qui è dove viene definito il comando vocale per avviare l'applicazione. Dovrebbe trovarsi nella cartella res/xml/ . Dovresti ottenere contenuti simili a questo:

 <trigger command="SHOW_ME_A_DEMO" />

Invece di dire "Mostrami una demo" per avviare la nostra app, diciamo semplicemente il nome dell'app. Modifica il contenuto del file in:

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

Se torni al tuo file manifest, potresti notare che il tuo android:label="@string/app_name" è stato aggiornato automaticamente per utilizzare anche la stringa di risorsa @string/app_name invece del valore Hello Glass hardcoded come era prima . Se questa impostazione non è stata aggiornata, assicurati di impostare il valore su android:label="@string/app_name" .

E qual è il nome della tua app, esattamente? Se apri res/values/strings.xml , il tuo app_name dovrebbe essere elencato come:

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

Questo dovrebbe concludere le cose per la tua prima applicazione Hello Glass. Vediamo come funziona ora!

Dalla schermata Start, puoi dire "ok glass" per visualizzare il menu vocale. La tua applicazione è ora nell'elenco dei comandi ad attivazione vocale.

Con questo tutorial come guida, ecco come appare ora la schermata iniziale dell'app Glass.

Se dici " Ciao glass " la tua applicazione dovrebbe iniziare e dovresti ottenere un'esperienza Glass standardizzata:

Se non vuoi usare la tua voce per attivare l'applicazione, puoi semplicemente toccare la tua schermata Start e vedrai che la tua applicazione è disponibile nel menu:

Voce o tocco? Usa entrambi!

È molto importante prestare molta attenzione all'interfaccia della tua applicazione e all'interazione dei tuoi utenti con essa. Ricorda che i tuoi utenti non sono sempre in grado di usare la loro voce, ad esempio mentre guardano una lezione o una presentazione. In alternativa, potrebbero avere le mani occupate e non essere in grado di usare il tocco. Ti suggerisco di fornire sia l'interazione del menu touch che quella vocale quando possibile, consentendo ai tuoi utenti di navigare attraverso l'applicazione utilizzando la voce e il touchpad in parallelo.

Una vera applicazione - Toptal Finder

Ora che sei a tuo agio con lo sviluppo di Glass e hai creato Hello Glass, è il momento di creare una vera applicazione che metterà in funzione le nuove funzionalità di Glass. Creiamo un'app che ti permetta di sfogliare i profili dei migliori sviluppatori Toptal in base alla piattaforma di sviluppo.

La struttura della nostra applicazione Glass di esempio sarà semplice:

1. Vogliamo che la nostra schermata iniziale abbia il logo Toptal con un menu attivato tramite voce e tocco che ci consenta di selezionare la piattaforma di sviluppo per la quale abbiamo bisogno di uno sviluppatore.
2. Dopo aver selezionato una piattaforma, vogliamo ottenere un elenco di sviluppatori con la loro immagine e nome. I profili degli sviluppatori verranno presentati sotto forma di un elenco scorrevole di schede personali.
3. Durante la visualizzazione di un profilo sviluppatore, vogliamo essere in grado di aggiungerlo ai preferiti o inviare una richiesta di assunzione.

Le basi

Ricapitoliamo rapidamente ciò che hai già aggiunto in aggiunta alle tue conoscenze su Android:

1. Come configurare il tuo ambiente di sviluppo per creare Glassware.
2. Come configurare l'applicazione per utilizzare il tema standard della GUI Glassware.
3. Come avviare l'applicazione utilizzando comandi vocali e nomi di menu personalizzati.

Usando questa conoscenza, metti in funzione la tua nuova app. Puoi aggiornare l'app Hello Glass dall'alto o avviare una nuova app seguendo gli stessi passaggi. Assegna a questa applicazione il nome " Top Finder " e rendi il tuo file voice_trigger.xml simile a questo.

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

Il vincolo network="true" indica a Glass di verificare la connettività di rete all'avvio di questa app, che dovremo connettere agli elenchi degli sviluppatori Toptal. Se non c'è connessione, Glass visualizzerà un messaggio di avviso.

Schermo di casa

Facciamo in modo che la schermata iniziale della nostra applicazione assomigli a questa:

Quando vedi il messaggio "ok glass" sullo schermo significa che l'applicazione ha un menu ad attivazione vocale in quel punto. Pronunciando qui la frase "ok glass" si attiva il menu vocale per questa posizione. Questa frase è predefinita da Glass e non puoi cambiarla.

Puoi pensare a "ok glass" come a un "menu dell'applicazione", proprio come hai utilizzato nello sviluppo del tuo smartphone/tablet, e ha esattamente lo stesso ruolo. Poiché dovresti "toccare" l'"icona del menu dell'applicazione" sullo schermo (spesso 3 punti o linee) per aprire il menu di un'applicazione Android, devi dire "ok glass" per aprire il menu ad attivazione vocale nell'app Glassware.

Per abilitare il menu “ok glass” è necessario richiedere FEATURE_VOICE_COMMANDS dall'API. Per fare ciò, aggiungi la seguente riga nel tuo gestore onCreate nel tuo MainActivity :

 getWindow().requestFeature(WindowUtils.FEATURE_VOICE_COMMANDS);

Ogni attività che include questa funzionalità verrà visualizzata con il testo "ok glass" in basso al centro.

La prossima cosa che devi fare è creare un menu per la schermata principale. Nella cartella res/menu crea una nuova definizione di menu XML denominata main.xml . Per semplificare le cose, abiliteremo solo tre piattaforme per sviluppatori Toptal, ma sentiti libero di apportare le modifiche che desideri.

Dovrebbe avere il seguente contenuto:

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

Ti starai chiedendo perché ho scelto titoli di menu piuttosto lunghi anziché semplicemente Android, JavaScript e iOS. Ebbene, il motivo è molto semplice. I ragazzi del team di sviluppo di Glass stanno ancora migliorando il riconoscimento vocale. Si consiglia di utilizzare due o tre parole nei menu in modo che Glass le riconosca più facilmente.

Ho già detto che il menu "ok glass" non è diverso dal menu standard dell'applicazione Android. Allegare un menu a un'attività è praticamente lo stesso. Sostituisci semplicemente il gestore onCreatePanelMenu nel tuo MainActivity e gonfia il menu principale che hai appena creato:

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

Ora dobbiamo aggiungere un gestore di menu. Prima di farlo, crea un metodo vuoto chiamato findDevelopers . Torneremo su questo più tardi per avviare una ricerca e mostrare i risultati. Dopodiché puoi sovrascrivere il tuo gestore di 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); }

È giunto il momento di rendere bella la schermata iniziale della nostra applicazione Google Glass di esempio. Importa un logo Toptal nella tua applicazione come res/drawable/logo.png . Ho usato questa immagine:

Nella tua classe MainActivity , apporta le seguenti modifiche.

Assicurati che le seguenti variabili private siano dichiarate all'inizio della classe:

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

Modifica il metodo buildView per personalizzare il layout della scheda:

 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 cambia il tuo gestore onCreate in questo modo:

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

Come ho detto prima, vogliamo includere il menu attivato tramite tocco insieme a "ok glass" , quindi abilita i gesti come faresti nella tua app Android. Aggiungi i seguenti metodi nella tua 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; }

Dovrebbe essere così! Ora puoi avviare la tua app e provare entrambi i metodi di attivazione del menu. Se dici "bicchiere ok" , sullo schermo vengono visualizzate tre voci di menu e, se tocchi il vetro, si aprirà un menu scorrevole. Per navigare tra le voci di menu puoi scorrere avanti e indietro.

Ecco come appare il menu vocale:

Ed ecco il menu dei gesti:

Se selezioni una voce di menu non accadrà nulla poiché il tuo metodo findDevelopers deve ancora essere implementato.

Schermate per sviluppatori

Continueremo a utilizzare il layout di Glass Card predefinito, con un'immagine sul lato sinistro, testo a destra e alcune informazioni sul piè di pagina. Per ulteriori informazioni sulle best practice per la progettazione delle tue carte, consulta la guida di stile di Google Glass.

Il nostro profilo sviluppatore è definito da semplici proprietà:

1. Nome
2. Foto
3. Piattaforma di sviluppo

Quindi, assicuriamoci di avere la corretta struttura delle classi nella nostra app. Crea una nuova classe denominata DeveloperModel.java nella cartella java/models . Vogliamo che questa classe sia serializzabile, poiché conterrà i profili che sono in un elenco.

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

Vogliamo che le nostre carte siano strettamente legate ai dati del nostro profilo sviluppatore. Poiché il CardScrollAdapter predefinito è un po' generico per quanto riguarda il suo modello di dati, dobbiamo estenderlo e renderlo nostro. Crea DeveloperAdapter.java nella tua cartella 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); } }

Non vogliamo che i nostri risultati di ricerca vengano aggiunti alla schermata iniziale dell'applicazione, quindi creeremo una nuova attività che eseguirà la ricerca e visualizzerà i risultati. Crea una nuova attività, ResultsActivity , accanto alla tua MainActivity (probabilmente in java/com.helloglass ).

Assicurati che extends Activity .

Successivamente, dobbiamo specificare un menu per le nostre schede del profilo sviluppatore. Crea un nuovo menu, developer.xml , con il seguente contenuto:

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

Per abilitare il passaggio di parametri tra ResultsActivity e MainActivity aggiungere le seguenti righe all'inizio della classe ResultsActivity :

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

Assicurati di aggiungere la tua nuova attività al file manifest:

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

L'impostazione della schermata iniziale di ResultsActivity e la configurazione delle schede è molto simile a quanto fatto su MainActivity . Per prima cosa controlla di avere le tue carte e lo scroller definiti all'inizio:

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

Crea un metodo di ricerca temporaneo su cui torneremo in seguito per implementarlo. Aggiungere nuove carte all'elenco dei profili è semplice come aggiungere elementi a un array. Chiameremo anche questo metodo findDevelopers , ma questo appartiene 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); }

Ora torna alla tua MainActivity e aggiorna findDevelopers lì per avviare ResultsActivity e passare nella proprietà della platform :

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

Allega il tuo menu sviluppatore a ResultsActivity . Sarai in grado di aprire il menu in qualsiasi scheda del profilo.

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

Proprio come in precedenza, abilita i gesti per gestire il touchpad sul tuo Glass quando viene visualizzato ResultsActivity . Per farlo basta chiamare openOptionsMenu() nel onGesture(Gesture gesture) :

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

Inoltre, aggiungi un gestore di menu alle azioni relative allo sviluppatore. Per ora lasceremo semplici messaggi di Toast.

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

Ogni applicazione dovrebbe utilizzare alcuni elementi visivi piacevoli, icone, ecc. Il team di Google Glass ha fornito un set molto ampio di icone standardizzate comuni che gli sviluppatori di Glass possono utilizzare gratuitamente nelle loro applicazioni. Puoi trovare un set completo di icone di vetro standard e caratteri nella loro libreria

Per ora, hai solo bisogno di un'icona ic_person_50.png , quindi vai avanti e scaricala nella tua cartella res\drawable . Useremo questa icona invece di scaricare un'immagine dello sviluppatore.

L'ultima cosa che rimane nel nostro tutorial di sviluppo dell'app Glass per ora è sovrascrivere il nostro gestore onCreate su ResultsActivity , dove verificheremo quale piattaforma di sviluppo è stata inoltrata da MainActivity e popoleremo il nostro elenco.

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

Puoi lasciare i metodi onResume e onPause come in MainActivity .

Se avvii ora la tua applicazione, puoi controllare al volo come vengono creati i tuoi profili sviluppatore in base al menu selezionato su MainActivity . Anche in questo caso, hai un'opzione per visualizzare il tuo menu utilizzando "ok glass" o toccando il touchpad o utilizzando l'attivazione vocale. Ecco come appare al momento il profilo del "10° sviluppatore Android":

Toccando si apre il menu touch:

E dicendo "ok bicchiere" viene visualizzato il menu vocale:

Scorri verso il basso dall'elenco per tornare alla schermata iniziale della tua app.

Ottenere profili da Internet

Per concludere, riempiamo il menu con informazioni reali per i primi 10 sviluppatori Toptal per JavaScript, Android e iOS.

Dovrai scaricare le loro immagini del profilo e renderle disponibili su HTTP, o semplicemente utilizzare gli URL direttamente da toptal.com.

Poiché la creazione di un web crawler solo per ottenere i nomi dei migliori sviluppatori in Toptal potrebbe essere una deviazione eccessiva per questo articolo, ho creato file JSON da utilizzare per Android, JavaScript e iOS.

Nella tua app, la prima cosa che devi fare è richiedere l'accesso a Internet dal tuo sistema operativo Android. Aggiungi la seguente riga al tuo file manifest

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

Tieni presente che Glass non ti consentirà di bloccare il thread principale utilizzando direttamente le richieste HTTP. Dovrai gestire i download JSON e le singole immagini in modo asincrono. Puoi utilizzare un'attività asincrona, creare il tuo servizio di download o intento o qualsiasi cosa tu preferisca nel tuo lavoro quotidiano.

La creazione di questa funzionalità non è specifica di Google Glass, quindi salterò i frammenti di codice. Se vai avanti e fai funzionare quest'ultima funzionalità, le tue schede profilo dovrebbero assomigliare a questa:

Conclusione del tutorial

Spero che ti sia divertito a seguire questo tutorial sullo sviluppo di Google Glass e a creare la tua prima applicazione Glassware. A questo punto, dovresti essere a tuo agio con l'idea che scrivere applicazioni per Glass non è molto diverso da qualsiasi altra piattaforma Android.

A questo punto, hai imparato come estendere la schermata iniziale attivata dalla voce di Google Glass, come creare i tuoi menu attivati ​​dalla voce e come combinare i controlli vocali con i gesti tattili. Dovresti anche comprendere i concetti e gli elementi costitutivi di base per l'interfaccia utente di Glass, come schede, layout ed elementi. Hai visto come creare dinamicamente le carte e come navigare tra le diverse attività.

Per approfondire, vai alle risorse per sviluppatori di Google all'indirizzodevelopers.google.com/glass. Quando inizi a creare applicazioni più complesse, si rivelerà una risorsa molto utile.

Tieni presente che Glass è ancora in fase di sviluppo e probabilmente ci sono molti altri miglioramenti da implementare prima che arrivi al mercato consumer. Con questo in mente, ho una nota importante per te:

C'è ancora molto lavoro da fare sul riconoscimento vocale e potresti sorprenderti a urlare contro il tuo amico immaginario mentre cerchi di iniziare la tua attività o di inserire alcune informazioni. Nessun problema: tutti coloro che provano lo sviluppo di Google Glass si sentono allo stesso modo, quindi non sei solo.

La tecnologia migliorerà e il vetro sarà pronto per la vendita al dettaglio in pochissimo tempo. È sicuro che farà grandi ondate una volta che arriverà nei negozi, quindi spero che tu sia entusiasta quanto me di essere uno dei primi ad essere all'avanguardia di questa entusiasmante tecnologia!

Shout Out : le schermate in questo articolo sono state realizzate utilizzando Droid@Screen.