Vadnica za ambiciozne razvijalce Googla Glass: Ustvarjanje prve aplikacije za Glass

Razlog, zaradi katerega želite uporabiti voice_trigger.xml dovoljenj, tako da se lahko igrate z glasovnimi kontrolami po meri. Google je precej strog glede tega, kateri glasovni ukazi so dovoljeni v odobrenih aplikacijah Glass, in vsi novi ukazi morajo biti odobreni. Ker je ta vadnica namenjena učenju in te vloge ne boste oddali v uradno trgovino s steklovino, vas ne bi smelo skrbeti. Samo vklopite res/xml/ in boste imeli dostop do »glasovnih ukazov, ki niso na seznamu«. Za več informacij o tem preberite tej strani GDK .

Odpri android:label='@string/app_name' za urejanje. Tu je definiran glasovni ukaz za zagon aplikacije. Nahajati se mora v @string/app_name mapo. Morali bi dobiti vsebino, podobno tej:

Namesto da bi rekli »Pokaži mi predstavitev«, da zaženemo našo aplikacijo, izgovorimo samo ime aplikacije. Vsebino datoteke spremenite v:

Če se vrnete v datoteko manifesta, boste morda opazili, da je vaš res/values/strings.xml je bil samodejno posodobljen, tako da uporablja tudi niz virov app_name namesto trdo kodirane Hello Glass vrednost, kot je bila prej. Če ta nastavitev ni bila posodobljena, nastavite vrednost na voice_trigger.xml.

In kako točno je ime vaše aplikacije? Če odprete network='true', bo vaš FEATURE_VOICE_COMMANDS je treba navesti kot:

To bi moralo zaokrožiti stvari za vaš prvi program Hello Glass. Poglejmo, kako to deluje zdaj!

Na začetnem zaslonu lahko rečete 'Ok steklo' , da odprete glasovni meni. Vaša aplikacija je zdaj na seznamu glasovno aktiviranih ukazov.

S to vadnico, ki vas vodi, je tako videti zdaj začetni zaslon aplikacije Glass.

Če rečeš ' Pozdravljen kozarec 'Začela bi se vaša aplikacija in dobili bi standardizirano izkušnjo s steklom:

Če ne želite z glasom aktivirati aplikacije, se preprosto dotaknite začetnega zaslona in v meniju boste videli, da je vaša aplikacija na voljo:

Glas ali dotik? Uporabite oboje!

Zelo pomembno je, da ste zelo pozorni na vmesnik vaše aplikacije in interakcijo vaših uporabnikov z njo. Ne pozabite, da vaši uporabniki niso vedno sposobni uporabiti svojega glasu - na primer med gledanjem predavanja ali predstavitve. Lahko pa imajo polne roke dela in ne morejo uporabljati dotika. Predlagam, da omogočite interakcijo z menijem na dotik in z glasom, kadar koli je to mogoče, kar uporabnikom omogoča vzporedno krmarjenje po vaši aplikaciji z uporabo glasu in sledilne ploščice.

Resnična aplikacija - ApeeScape Finder

Zdaj, ko ste zadovoljni z razvojem Glass in ste ustvarili Hello Glass, je čas, da ustvarite resnično aplikacijo, ki bo omogočila delovanje novih funkcij Glass. Zgradimo aplikacijo, ki vam omogoča brskanje po profilih najboljših razvijalcev ApeeScape na podlagi razvojne platforme.

Struktura našega primera aplikacije Glass bo preprosta:

1. Želimo, da ima naš začetni zaslon ApeeScape logotip z menijem z glasom in dotikom, ki nam omogoča, da izberemo razvojno platformo, za katero potrebujemo razvijalca.
2. Po izbiri platforme želimo dobiti seznam razvijalcev z njihovo sliko in imenom. Profili razvijalcev bodo predstavljeni v obliki pomičnega seznama osebnih kartic.
3. Pri ogledu profila razvijalca jih želimo dodati med priljubljene ali poslati prošnjo za najem.

Osnove

Na hitro ponovimo, kaj ste že dodali poleg znanja o Androidu:

1. Kako nastaviti razvojno okolje za izdelavo steklovine.
2. Kako konfigurirati svojo aplikacijo za uporabo standardne teme GUI za Glassware.
3. Kako zagnati aplikacijo z uporabo glasovnih ukazov in imen menijev po meri.

S tem znanjem zaženite in zaženite novo aplikacijo. Aplikacijo Hello Glass lahko posodobite od zgoraj ali pa zaženete novo aplikacijo, ki sledi istim korakom. Poimenujte to aplikacijo “ Top Finder ', In vnesite MainActivity datoteka izgleda takole.

The res/menu omejitev pove steklu, naj pri zagonu te aplikacije preveri omrežno povezljivost, ki jo bomo morali povezati s seznami razvijalcev ApeeScape. Če povezave ni, bo Glass prikazal opozorilno sporočilo.

Domači zaslon

Naj bo domači zaslon naše aplikacije videti nekako takole:

Ko vidite 'Ok steklo' sporočilo na zaslonu pomeni, da ima aplikacija na tem mestu glasovno aktiviran meni. Ko govorim besedno zvezo 'Ok steklo' tukaj aktivira glasovni meni za to lokacijo. Ta stavek je vnaprej določil Glass in ga ne morete spremeniti.

Lahko si omislite 'Ok steklo' kot 'aplikacijski meni', tako kot ste ga uporabljali pri razvoju pametnega telefona / tabličnega računalnika, in ima popolnoma enako vlogo. Ko bi se na zaslonu »pogosto dotaknili« ikone menija z aplikacijami (pogosto 3 pike ali vrstice), morate odpreti meni aplikacije Android, morate 'Ok steklo' , da odprete glasovno aktiviran meni v aplikaciji Glassware.

Da bi omogočili 'Ok steklo' meni, ki ga morate zahtevati main.xml iz API-ja. Če želite to narediti, dodajte naslednjo vrstico v onCreatePanelMenu vodnik v vašem MainActivity:

Vsaka dejavnost, ki vključuje to funkcijo, bo upodobljena z 'Ok steklo' besedilo spodaj na sredini.

Naslednja stvar, ki jo morate storiti, je ustvariti meni za glavni zaslon. V vašem findDevelopers mapa ustvari novo definicijo menija XML z imenom 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); } . Da bomo stvari poenostavili, bomo omogočili samo tri platforme za razvijalce ApeeScape, vendar spremembe lahko vnesete, kot želite.

Vsebovati mora naslednjo vsebino:

Morda se sprašujete, zakaj sem namesto Androidov, JavaScript in iOS izbral precej dolge naslove menijev. No, razlog je zelo preprost. Fantje iz razvojne ekipe za Glass še vedno izboljšujejo prepoznavanje glasu. Priporočljivo je, da v menijih uporabite dve ali tri besede, da jih bo Glass lažje prepoznal.

Sem že omenil, da 'Ok steklo' meni se ne razlikuje od običajnega menija aplikacije Android. Priključitev menija k dejavnosti je praktično enako. Preglasite MainActivity v vašem private CardScrollView mCardScroller; private View mView; private GestureDetector mGestureDetector; in napihnite glavni meni, ki ste ga pravkar ustvarili:

Zdaj moramo dodati upravljalnik menijev. Preden to storite, ustvarite eno prazno metodo z imenom 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(); } . Na to se bomo vrnili kasneje, da začnemo iskati in prikažemo rezultate. Po tem lahko preglasite upravljalnik menijev.

Zdaj je čas, da domači zaslon aplikacije Google Glass naredimo lep. Uvozite logotip ApeeScape v svojo aplikacijo kot 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); } . Uporabil sem to sliko:

V vašem MainActivity razred, naredite naslednje spremembe.

Prepričajte se, da so na začetku razreda navedene naslednje zasebne spremenljivke:

Spremenite findDevelopers način prilagajanja postavitve kartice:

In spremenite svoj java/models vodnik, da bo takšen:

Kot sem že rekel, želimo vključiti tudi meni, ki se aktivira z dotikom 'Ok steklo' , zato samo omogočite poteze, kot bi to storili v svoji aplikaciji za Android. V CardScrollAdapter dodajte naslednje metode razred:

To bi moralo biti to! Zdaj lahko zaženete aplikacijo in preizkusite oba načina aktiviranja menija. Če rečeš 'Ok steklo' na zaslonu se prikažejo trije elementi menija, in če tapnete steklo, se odpre pomični meni. Za krmarjenje po menijskih elementih lahko povlečete naprej in nazaj.

Takole je videti glasovni meni:

In tukaj je meni s kretnjami:

Če izberete element menija, se nič ne bo zgodilo kot java/adapters metoda še ni uvedena.

Zasloni za razvijalce

Še naprej bomo uporabljali privzeto postavitev Glass Card s sliko na levi strani, besedilom na desni in nekaj informacijami o nogi. Za več informacij o najboljših praksah za oblikovanje kartic glejte Google Glass slog vodnik .

Naš profil razvijalca je opredeljen s preprostimi lastnostmi:

1. Ime
2. Slika
3. Razvojna platforma

Torej, poskrbimo za pravilno strukturo razredov v naši aplikaciji. Ustvarite nov razred z imenom 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); } } v vašem ResultsActivity mapo. Želimo si, da bi bil ta razred serializirati, saj bo vseboval profile, ki so na seznamu.

Želimo, da so naše kartice tesno povezane s podatki našega profila razvijalca. Ker privzeto java/com.helloglass je nekoliko splošen glede na svoj podatkovni model, zato ga moramo razširiti in narediti po svoje. Ustvari extends Activity v vašem developer.xml mapa:

Ne želimo, da se naši rezultati iskanja dodajo na začetni zaslon aplikacije, zato bomo ustvarili novo dejavnost, ki bo iskala in prikazovala rezultate. Ustvari novo dejavnost, MainActivity , poleg vašega ResultsActivity (verjetno v public static final String SEARCH = 'search'; private String mPlatform='Android'; ).

Prepričajte se, da je ResultsActivity.

Nato moramo določiti meni za naše kartice profilov razvijalcev. Ustvarite nov meni, MainActivity, z naslednjo vsebino:

Za omogočanje prenosa parametrov med findDevelopers in ResultsActivity dodajte naslednje vrstice na začetek 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); } razred:

Ne pozabite dodati nove dejavnosti v datoteko manifesta:

Nastavitev začetnega zaslona ResultsActivity in konfiguriranje kartic je zelo podobno tistemu, ki smo ga počeli platform Najprej preverite, ali imate na začetku definirane kartice in drsnik:

Ustvarite začasno metodo iskanja, na katero se bomo kasneje vrnili, da jo bomo izvedli. Dodajanje novih kart na seznam profilov je tako preprosto kot dodajanje elementov v polje. To metodo bomo poimenovali ResultsActivity tudi, toda ta pripada @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); } :

Zdaj se vrnite na vaš openOptionsMenu() in posodobitev onGesture(Gesture gesture) tam za začetek private GestureDetector createGestureDetector(Context context) { // … @Override public boolean onGesture(Gesture gesture) { if (gesture == Gesture.TAP) { openOptionsMenu(); return true; } else if // … in podajte v @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); } lastnina:

Priložite svoj meni za razvijalce na resdrawable. Meni boste lahko odprli na kateri koli profilni kartici.

Tako kot prej omogočite poteze za upravljanje sledilne ploščice na steklu, ko ResultsActivity se prikaže. Za to preprosto pokličite MainActivity v vašem @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); } metoda:

Dejanjem, povezanim z razvijalci, dodajte tudi upravljalnik menijev. Zaenkrat bomo pustili preprosta Toast sporočila.

Vsaka aplikacija mora uporabljati nekaj lepih vizualnih elementov, ikon itd. Skupina Google Glass je zagotovila zelo velik nabor običajnih standardiziranih ikon, ki jih lahko razvijalci Glass uporabljajo v svojih aplikacijah. Tu lahko najdete celoten nabor standardnih ikon Glass in pisav v njihovi knjižnici

Za zdaj potrebujete samo eno ikono MainActivity, zato jo prenesite na svoj MainActivity mapo. To ikono bomo uporabili namesto prenosa slike razvijalca.

Zadnja stvar, ki je za zdaj ostala v naši vadnici za razvoj aplikacij Glass, je preglasiti našo

Lahko zapustite

|_+_|

|_+_|

Če svojo aplikacijo zaženete zdaj, lahko preverite, kako se vaši profili razvijalcev ustvarjajo sproti na podlagi menija, izbranega v

S tapkanjem se odpre meni na dotik:

In rekel 'Ok steklo' prikaže glasovni meni:

Povlecite s seznama navzdol, da se vrnete na začetni zaslon aplikacije.

Pridobivanje profilov z interneta

Za konec stvari zapolnimo meni z resničnimi informacijami za 10 najboljših razvijalcev za ApeeScape JavaScript , Android , in ios .

Boste morali prenesti njihove slike profila in jih dati na voljo prek HTTP ali pa preprosto uporabiti URL-je neposredno iz toptal.com .

Ker je gradnja spletnega pajka samo zato, da dobite imena najboljših razvijalcev v ApeeScape, morda preveč ovinek za ta članek, sem ustvaril datoteke JSON, ki jih lahko uporabite za Android , JavaScript , in ios .

V svoji aplikaciji morate najprej zahtevati dostop do interneta iz sistema Android. V datoteko manifesta dodajte naslednjo vrstico

|_+_|

Upoštevajte, da vam Glass ne bo mogel blokirati glavne niti z neposredno uporabo zahtev HTTP. Prenose JSON in posamezne slike boste morali obravnavati asinhrono. Uporabite lahko asinhronizacijsko nalogo, ustvarite lastno storitev za prenos ali namen ali kar koli želite pri svojem vsakdanjem delu.

Izdelava te funkcije ni značilna za Google Glass, zato bom preskočila odrezke kode. Če napredujete in začnete delati še zadnji del funkcije, bi morale biti vaše profilne kartice videti takole:

Zaključek vadnice

Upam, da ste se zabavali, ko ste spremljali to vadnico za razvoj Googla Glass in ustvarili svojo prvo aplikacijo Glassware. Do zdaj bi vas že zanimalo, da se pisanje aplikacij za Glass ne razlikuje veliko od katere koli druge platforme Android.

Na tej točki ste se naučili, kako razširiti začetni zaslon z glasovnim vklopom Google Glass, kako ustvariti lastne glasovno aktivirane menije in kako kombinirati glasovne kontrole z gestami na dotik. Prav tako morate razumeti koncepte in osnovne gradnike za uporabniški vmesnik za Glass, kot so kartice, postavitve in elementi. Videli ste, kako dinamično ustvarjate kartice in kako se premikate med različnimi dejavnostmi.

Če se želite poglobiti, pojdite na Googlove vire za razvijalce na developers.google.com/glass . Ko začnete graditi bolj zapletene aplikacije, se bo izkazal za zelo koristen vir.

Opozarjamo vas, da je Glass še v fazi razvoja in je verjetno še veliko izboljšav, ki jih je treba izvesti, preden pride na potrošniški trg. Glede na to imam za vas eno pomembno opombo:

Na področju prepoznavanja glasu je ostalo še kar nekaj dela in morda se boste ujeli, kako kričite na svojega namišljenega prijatelja, medtem ko poskušate začeti s svojo dejavnostjo ali vnesti nekaj informacij. Brez skrbi - vsi, ki preizkusijo razvoj Google Glass, se počutijo enako, zato niste sami.

Tehnologija se bo izboljšala in steklo bo v kratkem pripravljeno za prodajo. Zagotovo bo naredil velike valove, ko pride v trgovine, zato upam, da ste tako navdušeni kot jaz, da ste med prvimi, ki so v ospredju te razburljive tehnologije!

Zadreti se : Posnetki zaslona v tem članku so narejeni z uporabo [e-pošta zaščitena] .