Un tutorial pentru dezvoltatorii aspiranți ai Google Glass: construiți prima dvs. aplicație Glass

Publicat: 2022-03-11

Google Glass este o tehnologie futuristă care promite să revoluționeze modul în care ne folosim dispozitivele pentru a interacționa cu lumea. Dar din punctul de vedere al dezvoltatorului, ce este atât de special în dezvoltarea pentru sticlă? Răspunsul este „Nimic!” De fapt, din perspectiva unui dezvoltator Android cu experiență, Google Glass este doar un alt dispozitiv Android cu un ecran foarte mic și funcții limitate!

Dezvoltarea Google Glass este foarte asemănătoare cu toată dezvoltarea Android care se întinde pe diferite dispozitive.

Faptul că oricine are cunoștințe de dezvoltare Android poate deveni membru al acestei comunități „de elită” a evangheliștilor futuriști ai tehnologiei purtabile face parte din ceea ce face ca Google Glass să fie atât de minunat. Sigur, va trebui să înveți câteva lucruri noi, cum ar fi diferența dintre „Immersion” și „Active Card”, dar după cum vei vedea, curba de învățare nu este abruptă.

Scopul acestui tutorial Google Glass este de a pune bazele dezvoltării oricărei aplicații Glass, prin crearea unei aplicații simple care să cuprindă toți pașii comuni. Scopul meu este să vă economisesc timp în cercetare și încercări și erori și să vă permit să rulați prima aplicație Glass cât mai curând posibil.

În acest tutorial, vom discuta mai întâi despre cum să configurați mediul de dezvoltare și să vă conectați Google Glass la computer. Apoi vom crea o aplicație simplă „Hello World” Glass, care va include comenzi vocale personalizate și integrare cu meniul de pornire Glass. Odată ce ați dezvoltat prima aplicație și rulează pe Glass, veți învăța elementele de bază ale navigării în aplicațiile Glass, meniurile activate prin voce și crearea de conținut dinamic.

Cum să intri la bord

Sticla este încă într-un fel de fază de „testare beta”, pentru care Google a inventat termenul „Program Explorer”. Oricum ai spune, Glass nu este încă ceva pe care să-l poți obține în magazin ca un smartphone. Din păcate, instrumentele de dezvoltare Android încă nu au un emulator pe care să-l puteți folosi pentru a vă dezvolta aplicația fără hardware real.

Astfel, pentru a rula și a depana aplicația dvs., va trebui să puneți mâna pe un Google Glass real prin programul Explorer. Pentru a vă alătura programului, vizitați pagina de înscriere și înscrieți-vă pentru acces. Odată aprobat, pregătiți-vă cardul de credit și așteptați ca paharul să fie livrat. Versiunea Explorer de Glass costă în prezent 1.500 USD, dar prețul este de așteptat să scadă semnificativ înainte ca dispozitivul să ajungă în magazine.

Pentru cei fără sticlă

Din cauza lipsei oricărui emulator, este necesar să aveți hardware Google Glass real pentru a dezvolta aplicația în acest tutorial (sau orice aplicație Glass), dar dacă obținerea unuia este în afara bugetului dvs., nu vă simțiți descurajat - este va fi demn de urmat oricum. Ceea ce va deveni evident în tutorial este că dezvoltarea pentru Glass este aproape aceeași cu dezvoltarea pentru orice altă platformă Android!

Dacă încă nu ați folosit Google Glass, dar sunteți la fel de entuziasmat ca și mine, aruncați o privire la aceste două videoclipuri, deoarece ar trebui să vă ofere suficientă contribuție pentru a înțelege elementele de bază ale interfeței cu utilizatorul.

  • Introducere în Google Glass
  • Instrucțiuni Google Glass: Noțiuni introductive

Există și mai multe videoclipuri utile pentru configurare și navigare aici și multe mai multe detalii despre interfața cu utilizatorul aici.

Reguli de implicare

Acest tutorial pentru dezvoltatori Google Glass face următoarele presupuneri:

  • Presupun că înțelegeți elementele de bază ale navigării și setării Glass. Dacă nu ați folosit niciodată Glass, aruncați o privire la videoclipurile de mai sus.
  • Presupun că înțelegeți elementele de bază ale dezvoltării Android: structura fișierelor de proiect, configurarea aplicațiilor Android etc.
  • Voi folosi Android Studio, dar instrucțiunile ar trebui să se traducă în aproape orice mediu de dezvoltare Android. Android Studio este încă în „beta”, dar și Glass. Nu vă speriați să începeți să îl utilizați - este într-adevăr un produs grozav. Android Studio este disponibil pentru descărcare aici.

Configurarea Google Glass

Bine, să începem!

Primul lucru pe care trebuie să-l faceți este să activați modul de depanare pe Glass. Trebuie să faceți așa ceva pe fiecare dispozitiv Android pe care îl utilizați pentru dezvoltarea aplicațiilor dvs., astfel încât acest lucru ar putea fi familiar. Pentru a activa depanarea, glisați la „ Setări ” -> „ Informații despre dispozitiv ” și apoi atingeți pentru a deschide meniul dispozitivului. Selectați „ Activați depanarea ” și va fi activat.

În continuare, trebuie să vă pregătiți mediul de dezvoltare. Versiunea actuală de Google Glass necesită să utilizați versiunea API 19, așa că asigurați-vă că este instalată. De asemenea, trebuie să aveți instalat kit-ul de dezvoltare de sticlă. Utilizați Managerul SDK Android pentru a instala aceste două pachete dacă nu ați făcut-o deja.

Utilizați Android SDK Manager pentru a vă asigura că setul de dezvoltare Glass este instalat.

Salut Lume!

Deci, să facem prima noastră bucată de „Sticlărie”. (Da, Google a inventat un alt termen! „Glassware” este numele oricărei aplicații care rulează pe Google Glass). Vom începe prin a dezvolta un vechi „Hello World!” aplicarea. La fel ca majoritatea mediilor de dezvoltare Android majore, Android Studio populează automat noile aplicații cu un șablon pentru a afișa această frază celebră. Drept urmare, obțineți „Hello World!” funcționarea este doar un exercițiu de implementare fundamentală a aplicației.

În Android Studio, faceți clic pe „ Proiect nou ” și completați formularul de proiect. Puteți folosi ceva similar cu acesta:

Aceștia sunt pașii inițiali de configurare pentru dezvoltarea Google Glass.

Când selectați factorii de formă și API, asigurați-vă că selectați „ Sticlă ” și API 19

Acestea sunt câteva setări suplimentare ale aplicației Glass.

Selectați „ Activitate de imersie ” ca activitate de pornire.

Activitatea de imersie este activitatea de pornire preferată pentru dezvoltarea aplicației Glass.

Îți amintești că am menționat că va trebui să înveți diferența dintre Immersion și Live Card? Articolul Google User Interface explică diferitele tipuri de ecrane din sticlă. Iată un rezumat rapid:

  • Cardurile live sunt adăugate la cronologia Glass și afișează informații în timp real despre ceva prin actualizări de înaltă frecvență. Acestea rulează în mod constant în fundal chiar și atunci când utilizatorii interacționează cu diferite carduri. Acest lucru permite utilizatorilor să efectueze mai multe sarcini cu acces constant la diferite tipuri de informații în timp real.

  • Imersiunile sunt ecrane complet personalizabile care rulează în afara experienței cronologice. Acestea vă permit să vă proiectați propria interfață de utilizare și să procesați intrarea utilizatorului așa cum credeți de cuviință. Acesta este ceea ce vom folosi!

În următorul ecran al expertului, lăsați valorile implicite pentru „ Nume ” și „ Titlu ” și faceți clic pe „ Terminare ”.

După ce Gradle se ocupă de dependențele dvs. și vă pregătește proiectul, este timpul să îl conectați la Glass. Acum, aceasta este o dezvoltare futuristă!

Presupunând că toate driverele Android ADB sunt la locul lor și că Glass este recunoscut de sistemul dvs., ar trebui să includeți Glass în lista de dispozitive.

Lista de dispozitive ar trebui să arate Google Glass ca dispozitiv Android.

Dacă este prima dată când vă conectați dispozitivul la un computer, Glass va solicita stabilirea aprobării/încrederii. Doar atingeți sticla pentru a permite conectarea și ar trebui să fiți gata.

Faceți clic pe „ Executare ” și implementați „APK-ul implicit” cu „MainActivity” ca activitate de pornire pentru lansare pe dispozitivul „USB”.

După câteva secunde, ar trebui să vedeți ceva de genul acesta pe ecranul Glass:

Acesta este un exemplu de ceea ce ați putea vedea prin Google Glass dacă urmați îndeaproape acest tutorial.

Ura! Aplicația dvs. rulează pe Glass! Și tot ce trebuia să faceți este să completați câteva valori implicite când ați creat aplicația!

Deoarece nu am specificat altfel, Glass va afișa aplicația dvs. sub numele „Afișați demonstrația”. Dacă glisați înapoi la ecranul de pornire și apoi atingeți pentru a deschide meniul aplicației, îl veți vedea afișat astfel:

Acesta este un exemplu de element de meniu „Afișare demonstrație” al lui Glass.

Puțin polonez

Ok, l-ai pornit, dar aceasta nu arată ca o aplicație Glass reală și nu vrei ca aplicația să fie pornită de „Afișează demo”.

În acest tutorial, îl vom modifica puțin pentru a obține sentimentul real.

Setarea temei

În primul rând, nu doriți să ocupați niciunul din micul ecran de sticlă cu acest antet urât „Hello World Immersion” bara de titlu a activității și cu siguranță nu doriți ca ecranul dvs. să fie gri cu font negru. Pentru a remedia acest lucru, trebuie doar să comutăm tema pe Android-ul nostru și să lăsăm Glass OS să se ocupe de aceasta.

Deschide res/values/styles.xml pentru editare. Ar trebui să aibă următorul conținut:

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

Doar schimbați android:Theme.Holo.Light în android:Theme.DeviceDefault . Acest lucru ar trebui să aibă grijă de aspectul aplicației și de culorile automat, folosind tema implicită Glass.

Definirea aspectului meniului

Ok, următorul lucru pe care vrem să-l facem în acest tutorial de dezvoltare Glass este configurarea aplicației noastre pentru a avea un nume propriu și o pornire plăcută controlată prin voce. Deschideți Manifestul Android ( AndroidManifest.xml ) și adăugați eticheta <application… de mai sus:

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

Motivul pentru care doriți să utilizați permisiunile DEVELOPMENT este pentru a vă putea juca cu comenzi vocale personalizate. Google este destul de strict în ceea ce privește comenzile vocale permise în aplicațiile Glass aprobate și toate comenzile noi trebuie să fie aprobate. Deoarece acest tutorial este în scop de învățare și nu veți trimite această aplicație la magazinul oficial de sticlărie, nu ar trebui să vă faceți griji. Doar activați permisiunile DEVELOPMENT și veți avea acces la „comenzi vocale nelistate”. Pentru mai multe informații despre aceasta, vă rugăm să citiți această pagină GDK.

Deschideți voice_trigger.xml pentru editare. Aici este definită comanda vocală pentru pornirea aplicației. Ar trebui să fie localizat în folderul res/xml/ . Ar trebui să obțineți conținut similar cu acesta:

 <trigger command="SHOW_ME_A_DEMO" />

În loc să spuneți „Afișați-mi o demonstrație” pentru a porni aplicația noastră, să spunem doar numele aplicației. Schimbați conținutul fișierului în:

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

Dacă reveniți la fișierul manifest, este posibil să observați că android:label="@string/app_name" a fost actualizat automat pentru a utiliza și șirul de resurse @string/app_name în loc de valoarea Hello Glass codificată ca înainte. . Dacă această setare nu a fost actualizată, asigurați-vă că setați valoarea la android:label="@string/app_name" .

Și care este numele aplicației tale, exact? Dacă deschideți res/values/strings.xml , numele app_name dvs. ar trebui să fie afișat ca:

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

Acest lucru ar trebui să încheie lucrurile pentru prima ta aplicație Hello Glass. Să vedem cum funcționează acum!

Din ecranul Start, puteți spune „ok sticla” pentru a afișa meniul vocal. Aplicația dvs. se află acum în lista comenzilor activate vocal.

Cu acest tutorial pentru a vă ghida, așa arată acum ecranul de pornire al aplicației Glass.

Dacă spuneți „ Bună sticlă ”, aplicația dvs. ar trebui să înceapă și ar trebui să obțineți o experiență standardizată cu Glass:

Comenzile vocale produc acest răspuns Google Glass.

Dacă nu doriți să vă folosiți vocea pentru a activa aplicația, puteți doar să atingeți ecranul Start și veți vedea că aplicația dvs. este disponibilă în meniu:

Aplicația Google Glass pe care ați dezvoltat-o ​​este acum disponibilă.

Voce sau atingere? Folosiți ambele!

Este foarte important să acordați o atenție deosebită interfeței aplicației dvs. și interacțiunii utilizatorilor dvs. cu aceasta. Amintiți-vă că utilizatorii dvs. nu sunt întotdeauna în măsură să-și folosească vocea - de exemplu, în timp ce urmăresc o prelegere sau o prezentare. Ca alternativă, ei pot avea mâinile pline și nu pot folosi atingerea. Vă sugerez să oferiți atât interacțiunea meniului tactil, cât și vocal ori de câte ori este posibil, permițând utilizatorilor să navigheze prin aplicația dvs. folosind vocea și touchpadul în paralel.

O aplicație reală - Toptal Finder

Un exemplu de dezvoltare Google Glass pe care îl vom prezenta în acest tutorial este „Toptal Finder”.

Acum că vă simțiți confortabil cu dezvoltarea Glass și ați creat Hello Glass, este timpul să creați o aplicație reală care va pune în funcțiune noile funcții Glass. Să construim o aplicație care vă permite să răsfoiți profilurile dezvoltatorilor Toptal de top pe baza platformei de dezvoltare.

Structura exemplului nostru de aplicație Glass va fi simplă:

  1. Dorim ca ecranul nostru de pornire să aibă logo-ul Toptal cu o voce și să atingem meniul activat care ne permite să selectăm platforma de dezvoltare pentru care avem nevoie de un dezvoltator.
  2. După selectarea unei platforme, dorim să obținem o listă de dezvoltatori cu poza și numele lor. Profilurile de dezvoltator vor fi prezentate sub forma unei liste care pot fi derulate cu carduri personale.
  3. Când vizualizam un profil de dezvoltator, dorim să-l putem adăuga la favorite sau să trimitem o cerere de închiriere.

Cele elementare

Să recapitulăm rapid ceea ce ai adăugat deja pe lângă cunoștințele tale Android:

  1. Cum să vă configurați mediul de dezvoltare pentru a construi Glassware.
  2. Cum să vă configurați aplicația pentru a utiliza tema standard Glassware GUI.
  3. Cum să porniți aplicația folosind comenzi vocale personalizate și nume de meniu.

Folosind aceste cunoștințe, puneți-vă noua aplicație în funcțiune. Puteți fie să actualizați aplicația Hello Glass de sus, fie să porniți o nouă aplicație urmând aceiași pași. Denumiți această aplicație „ Top Finder ” și faceți ca fișierul voice_trigger.xml să arate astfel.

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

Constrângerea network="true" îi spune sticlei să verifice conectivitatea la rețea la pornirea acestei aplicații, pe care va trebui să o conectăm la listele de dezvoltatori Toptal. Dacă nu există nicio conexiune, Glass va afișa un mesaj de avertizare.

Ecranul de start

Să facem ca ecranul de pornire al aplicației noastre să arate cam așa:

Acesta este designul pe care l-am ales pentru exemplul nostru de ecran de pornire al aplicației Glass.

Când vedeți mesajul „ok sticla” pe ecran înseamnă că aplicația are meniu activat vocal în acel loc. Rostirea expresiei „ok sticla” aici activează meniul vocal pentru această locație. Această expresie este predefinită de Glass și nu o puteți schimba.

Vă puteți gândi la „ok glass” ca la un „meniu de aplicații”, la fel cum ați folosit în dezvoltarea smartphone-ului/tabletei și are exact același rol. Deoarece ați „atinge” „pictograma meniului de aplicație” de pe ecran (de multe ori 3 puncte sau linii) pentru a deschide un meniu de aplicație Android, trebuie să spuneți „ok sticla” pentru a deschide meniul activat vocal în aplicația Glassware.

Pentru a activa meniul „ok glass” , trebuie să solicitați FEATURE_VOICE_COMMANDS din API. Pentru a face acest lucru, adăugați următoarea linie în handler-ul onCreate din MainActivity :

 getWindow().requestFeature(WindowUtils.FEATURE_VOICE_COMMANDS);

Fiecare activitate care are această caracteristică inclusă va fi redată cu text „ok sticla” în partea de jos în centru.

Următorul lucru pe care trebuie să-l faceți este să creați un meniu pentru ecranul principal. În folderul res/menu , creați o nouă definiție de meniu XML numită main.xml . Pentru a simplifica lucrurile, vom activa doar trei platforme pentru dezvoltatori Toptal, dar nu ezitați să faceți modificările după cum doriți.

Ar trebui să aibă următorul conținut:

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

S-ar putea să vă întrebați de ce am ales titluri de meniu destul de lungi în loc de pur și simplu Android, JavaScript și iOS. Ei bine, motivul este foarte simplu. Băieții din echipa de dezvoltare Glass încă îmbunătățesc recunoașterea vocii. Este recomandat să folosiți două sau trei cuvinte în meniuri, astfel încât Glass să le recunoască mai ușor.

Am menționat deja că meniul „ok glass” nu este diferit de meniul standard al aplicației Android. Atașarea unui meniu unei activități este practic la fel. Doar suprascrieți handlerul onCreatePanelMenu din MainActivity și umflați meniul principal pe care tocmai l-ați creat:

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

Acum trebuie să adăugăm un handler de meniu. Înainte de a face asta, creați o metodă goală numită findDevelopers . Vom reveni la asta mai târziu pentru a începe o căutare și a arăta rezultatele. După aceea, puteți suprascrie gestionarea meniului.

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

Acum este timpul să facem frumos ecranul de pornire al aplicației Google Glass. Importați o siglă Toptal în aplicația dvs. ca res/drawable/logo.png . Am folosit aceasta imagine:

Sigla Toptal pentru utilizare în aplicația noastră Glass.

În clasa MainActivity , faceți următoarele modificări.

Asigurați-vă că următoarele variabile private sunt declarate la începutul clasei:

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

Schimbați metoda buildView pentru a personaliza aspectul cardului:

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

Și schimbați-vă handlerul onCreate pentru a fi astfel:

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

După cum am spus mai devreme, vrem să includem meniul activat prin atingere împreună cu „ok sticla” , așa că doar activați gesturile așa cum ați face în aplicația dvs. Android. Adăugați următoarele metode în clasa 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; }

Asta ar trebui să fie! Acum puteți porni aplicația și încerca ambele metode de activare a meniului. Dacă spuneți „ok sticla”, veți primi trei elemente de meniu afișate pe ecran, iar dacă atingeți sticla, se va deschide un meniu care poate fi derulat. Pentru a naviga prin elementele din meniu, puteți glisa înapoi și înainte.

Iată cum arată meniul vocal:

Iată comenzi vocale pentru a atrage dezvoltatorii de top pe ecranul Glass.

Și iată meniul de gesturi:

Iată comenzi vocale pentru a atrage dezvoltatorii de top pe ecranul Glass.

Dacă selectați un element de meniu, nu se va întâmpla nimic, deoarece metoda dvs. findDevelopers nu a fost încă implementată.

Ecrane pentru dezvoltatori

Vom continua să folosim aspectul implicit al Glass Card, cu o imagine în partea stângă, text în dreapta și câteva informații de subsol. Pentru mai multe informații despre cele mai bune practici pentru proiectarea cardurilor, consultați ghidul de stil Google Glass.

Profilul nostru de dezvoltator este definit de proprietăți simple:

  1. Nume
  2. Imagine
  3. Platforma de dezvoltare

Deci, să ne asigurăm că avem structura adecvată a claselor în aplicația noastră. Creați o nouă clasă numită DeveloperModel.java în folderul dvs. java/models . Dorim ca această clasă să fie serializabilă, deoarece va conține profiluri care se află într-o listă.

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

Dorim ca cardurile noastre să fie strâns legate de datele noastre de profil de dezvoltator. Deoarece CardScrollAdapter implicit este puțin generic în ceea ce privește modelul său de date, trebuie să-l extindem și să-l facem al nostru. Creați DeveloperAdapter.java în folderul dvs. 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); } }

Nu dorim ca rezultatele căutării noastre să fie adăugate pe ecranul de start al aplicației, așa că vom crea o activitate nouă care va face căutarea și va afișa rezultatele. Creați o activitate nouă, ResultsActivity , lângă MainActivity (probabil în java/com.helloglass ).

Asigurați-vă că extends Activity .

Apoi, trebuie să specificăm un meniu pentru cardurile noastre de profil de dezvoltator. Creați un meniu nou, developer.xml , cu următorul conținut:

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

Pentru a activa trecerea parametrilor între ResultsActivity și MainActivity adăugați următoarele linii la începutul clasei ResultsActivity :

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

Asigurați-vă că adăugați noua activitate în fișierul 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>

Configurarea ecranului inițial al ResultsActivity și configurarea cardurilor este foarte asemănătoare cu ceea ce am făcut pe MainActivity . Mai întâi verificați dacă aveți cărțile și scrollerul definite la început:

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

Creați o metodă de căutare temporară la care vom reveni mai târziu pentru a o implementa. Adăugarea de carduri noi la lista de profil este la fel de simplă ca și adăugarea de elemente într-o matrice. Vom numi și această metodă findDevelopers , dar aceasta aparține 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); }

Acum reveniți la MainActivity și actualizați findDevelopers acolo pentru a începe ResultsActivity și treceți în proprietatea platform :

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

Atașați meniul de dezvoltator la ResultsActivity . Veți putea deschide meniul la orice card de profil.

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

La fel ca mai devreme, activați gesturile pentru a gestiona touchpad-ul de pe Glass atunci când este afișată ResultsActivity . Pentru a face asta, trebuie doar să apelați openOptionsMenu() în metoda dvs. onGesture(Gesture gesture) :

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

De asemenea, adăugați un handler de meniu la acțiunile legate de dezvoltator. Vom lăsa mesaje simple Toast pentru moment.

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

Fiecare aplicație ar trebui să folosească niște elemente vizuale frumoase, pictograme etc. Echipa Google Glass a oferit un set foarte mare de pictograme standardizate comune care sunt gratuite pentru dezvoltatorii Glass pentru a le utiliza în aplicațiile lor. Puteți găsi un set complet de pictograme standard Glass, precum și fonturi în biblioteca lor

Pentru moment, aveți nevoie doar de o pictogramă ic_person_50.png , așa că continuați și descărcați-o în folderul res\drawable . Vom folosi această pictogramă în loc să descarcăm o imagine a dezvoltatorului.

Ultimul lucru care a rămas în tutorialul nostru de dezvoltare a aplicației Glass pentru moment este să suprascriem handler-ul nostru onCreate pe ResultsActivity , unde vom verifica ce platformă de dezvoltare a fost redirecționată de la MainActivity și vom popula lista noastră.

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

Puteți lăsa metodele onResume și onPause la fel ca în MainActivity .

Dacă începeți aplicația acum, puteți verifica modul în care profilurile dvs. de dezvoltator sunt create din mers pe baza meniului selectat în MainActivity . Din nou, aveți opțiunea de a vă afișa meniul folosind „ok sticla” sau atingând touchpad-ul sau utilizând activarea vocală. Iată cum arată profilul „al 10-lea dezvoltator Android” în acest moment:

În exemplul nostru de aplicație Glass, al 10-lea ecran pentru dezvoltatori Android arată astfel.

Atingerea afișează meniul tactil:

Atingând ecranul Google Glass, apare „Adăugați la favorite”.

Și rostind „ok pahar” va apărea meniul vocal:

Comanda vocală „OK Glass” aduce acest lucru.

Glisați în jos din listă pentru a reveni la ecranul de pornire al aplicației dvs.

Obținerea de profiluri de pe Internet

Pentru a încheia lucrurile, haideți să umplem meniul cu informații reale pentru primii 10 dezvoltatori Toptal pentru JavaScript, Android și iOS.

Va trebui să descărcați fotografiile lor de profil și să le faceți disponibile prin HTTP, sau doar să utilizați adrese URL direct de pe toptal.com.

Deoarece construirea unui crawler web doar pentru a obține numele dezvoltatorilor de top în Toptal ar putea fi o ocolire prea mare pentru acest articol, am creat fișiere JSON pe care să le utilizați pentru Android, JavaScript și iOS.

În aplicația dvs., primul lucru pe care trebuie să-l faceți este să solicitați acces la internet de la sistemul de operare Android. Adăugați următoarea linie în fișierul dvs. Manifest

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

Rețineți că Glass nu vă va permite să blocați firul principal utilizând direct solicitări HTTP. Va trebui să gestionați descărcările JSON și imaginile individuale într-un mod asincron. Puteți utiliza o sarcină asincronă, vă puteți crea propriul serviciu sau intenție de descărcare sau orice doriți în munca de zi cu zi.

Crearea acestei funcționalități nu este specifică Google Glass, așa că voi sări peste fragmente de cod. Dacă mergeți mai departe și obțineți acest ultim bit de funcționalitate să funcționeze, cardurile dvs. de profil ar trebui să arate astfel:

Acesta este CV-ul Google Glass al dezvoltatorului Toptal, Anna Chiara Bellini.

Acesta este CV-ul Google Glass al dezvoltatorului Toptal Samuel Edwards.

Încheierea tutorialului

Sper că v-ați distrat urmând acest tutorial de dezvoltare Google Glass și construind prima dvs. aplicație Glassware. Până acum, ar trebui să vă simțiți confortabil cu ideea că scrierea de aplicații pentru Glass nu este cu mult diferită de orice altă platformă Android.

În acest moment, ați învățat cum să extindeți ecranul de pornire activat prin voce Google Glass, cum să vă creați propriile meniuri activate prin voce și cum să combinați comenzile vocale cu gesturi tactile. De asemenea, ar trebui să înțelegeți conceptele și blocurile de bază pentru interfața de utilizare Glass, cum ar fi cardurile, machetele și elementele. Ați văzut cum să creați dinamic carduri și cum să navigați între diferite activități.

Pentru a explora mai profund, accesați resursele pentru dezvoltatori Google la developers.google.com/glass. Când începeți să construiți aplicații mai complexe, se va dovedi a fi o resursă foarte utilă.

Vă rugăm să rețineți că Glass este încă în faza de dezvoltare și probabil că sunt multe îmbunătățiri care urmează să fie implementate înainte de a ajunge pe piața de consum. Având în vedere acest lucru, am o notă importantă pentru tine:

Mai este destul de mult de lucru în ceea ce privește recunoașterea vocii și s-ar putea să te surprinzi strigând la prietenul tău imaginar în timp ce încerci să-ți începi activitatea sau să completezi unele informații. Nu vă faceți griji acolo - toți cei care încearcă dezvoltarea Google Glass simt la fel, așa că nu sunteți singuri.

Tehnologia se va îmbunătăți, iar sticla va fi gata de vânzare cu amănuntul în cel mai scurt timp. Cu siguranță va face valuri mari odată ce va ajunge în magazine, așa că sper că sunteți la fel de încântați ca și mine de a fi unul dintre primii care sunt în fruntea acestei tehnologii interesante!


Strigați : Capturile de ecran din acest articol sunt realizate folosind Droid@Screen.