En veiledning for aspirerende Google Glass-utviklere: Bygg din første Glass-app

Årsaken til at du vil bruke voice_trigger.xml tillatelser er slik at du kan spille med tilpassede talekontroller. Google er ganske streng på hvilke talekommandoer som er tillatt i godkjente Glass-apper, og alle nye kommandoer må godkjennes. Siden denne veiledningen er for læringsformål, og du ikke vil sende inn denne applikasjonen til den offisielle Glassvarebutikken, bør du ikke bekymre deg for det. Bare slå på res/xml/ tillatelser, og du vil ha tilgang til “unoterte talekommandoer”. For mer informasjon om dette, vennligst les denne GDK-siden .

Åpne android:label='@string/app_name' for redigering. Dette er hvor talekommandoen for å starte applikasjonen din er definert. Den skal være i @string/app_name mappe. Du bør få innhold som ligner på dette:

I stedet for å si 'Vis meg en demo' for å starte appen vår, la oss bare si navnet på appen. Endre innholdet i filen til:

Hvis du går tilbake til manifestfilen din, kan du legge merke til at res/values/strings.xml har blitt automatisk oppdatert for å også bruke ressursstrengen app_name i stedet for den hardkodede Hello Glass verdi som det var før. Hvis denne innstillingen ikke ble oppdatert, må du sette verdien til voice_trigger.xml.

Og hva er appnavnet ditt, akkurat? Hvis du åpner network='true', blir din FEATURE_VOICE_COMMANDS bør oppføres som:

Dette bør pakke opp ting for din første Hello Glass-applikasjon. La oss se hvordan det fungerer nå!

Fra startskjermen kan du si “Ok glass” for å få frem stemmemenyen. Søknaden din er nå i listen over stemmeaktiverte kommandoer.

Med denne opplæringen for å veilede deg, ser dette ut som startskjermen for Glass-appen din nå.

Hvis du sier ' Hei glass ”Søknaden din skal starte, og du bør få en standardisert Glass-opplevelse:

Hvis du ikke vil bruke stemmen din til å aktivere applikasjonen, kan du bare trykke på Start-skjermen og du vil se at applikasjonen din er tilgjengelig i menyen:

Stemme eller berøring? Bruk begge deler!

Det er veldig viktig at du følger nøye med på grensesnittet til applikasjonen din og brukernes samhandling med den. Husk at brukerne ikke alltid er i stand til å bruke stemmen sin - for eksempel mens de ser på en forelesning eller presentasjon. Alternativt kan de ha hendene fulle og ikke kunne bruke berøring. Jeg foreslår at du gir både berørings- og stemmemenyinteraksjon når det er mulig, slik at brukerne dine kan navigere gjennom applikasjonen din ved hjelp av tale og berøringsplate parallelt.

En virkelig applikasjon - ApeeScape Finder

Nå som du er komfortabel med Glass-utvikling, og du har opprettet Hello Glass, er det på tide å lage et reelt program som vil sette nye Glass-funksjoner i bruk. La oss bygge en app som lar deg bla gjennom profiler fra topp ApeeScape-utviklere basert på utviklingsplattform.

Strukturen til vårt eksempel på Glassapplikasjon vil være enkel:

1. Vi vil at startskjermen skal ha ApeeScape logo med en stemme- og trykkaktivert meny som lar oss velge utviklingsplattformen vi trenger en utvikler for.
2. Etter å ha valgt en plattform, ønsker vi å få en liste over utviklere med deres bilde og navn. Utviklerprofiler vil bli presentert i form av en rullbar liste over personlige kort.
3. Når du ser på en utviklerprofil, ønsker vi å kunne legge dem til i favoritter eller sende en forespørsel om leie.

Det grunnleggende

La oss raskt oppsummere det du allerede har lagt til på toppen av din Android-kunnskap:

1. Hvordan sette opp utviklingsmiljøet ditt for å bygge Glassware.
2. Hvordan konfigurere applikasjonen din til å bruke standard Glassware GUI-tema.
3. Slik starter du applikasjonen ved hjelp av egendefinerte talekommandoer og menynavn.

Bruk denne kunnskapen til å få den nye appen din i gang. Du kan enten oppdatere Hello Glass-appen ovenfra, eller starte en ny app ved å følge de samme trinnene. Gi denne applikasjonen navnet “ Toppfinner ”, Og lag din MainActivity filen ser slik ut.

res/menu begrensning forteller glasset å se etter nettverkstilkobling når du starter denne appen, som vi trenger for å koble til ApeeScape-utviklerlistene. Hvis det ikke er noen forbindelse, vil Glass vise en advarsel.

Startskjermen

La oss få applikasjonens startskjerm til å se slik ut:

Når du ser “Ok glass” melding på skjermen betyr det at applikasjonen har stemmeaktiverte menyer på det stedet. Snakker frasen “Ok glass” her aktiverer du stemmemenyen for denne plasseringen. Denne setningen er forhåndsdefinert av Glass, og du kan ikke endre den.

Du kan tenke deg “Ok glass” som en “applikasjonsmeny”, akkurat som du har brukt i utviklingen av smarttelefonen / nettbrettet, og den har nøyaktig samme rolle. Når du “trykker” på “Programmenyikonet” på skjermen (ofte tre prikker eller linjer) for å åpne en Android-applikasjonsmeny, må du si “Ok glass” for å åpne den stemmeaktiverte menyen i Glassware-appen.

For å aktivere “Ok glass” menyen du trenger å be om main.xml fra API. For å gjøre dette, legg til følgende linje i onCreatePanelMenu behandler i MainActivity:

Hver aktivitet som har denne funksjonen inkludert blir gjengitt med “Ok glass” tekst nederst i midten.

Den neste tingen du trenger å gjøre er å lage en meny for hovedskjermen. I din findDevelopers mappe opprette en ny XML-menydefinisjon med navnet 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); } . For å gjøre ting enkle vil vi bare aktivere tre ApeeScape-utviklerplattformer, men gjør gjerne endringene som du vil.

Den skal ha følgende innhold:

Du lurer kanskje på hvorfor jeg valgte ganske lange menytitler i stedet for bare Android, JavaScript og iOS. Årsaken er veldig enkel. Gutta fra Glass utviklingsteam forbedrer fremdeles stemmegjenkjenning. Det anbefales å bruke to eller tre ord i menyene, slik at Glass gjenkjenner dem lettere.

Jeg har allerede nevnt at “Ok glass” menyen er ikke forskjellig fra din standard Android-applikasjonsmeny. Å knytte en meny til en aktivitet er praktisk talt den samme. Bare overstyr MainActivity behandler i private CardScrollView mCardScroller; private View mView; private GestureDetector mGestureDetector; , og blåse opp hovedmenyen du nettopp opprettet:

Nå må vi legge til en menybehandler. Før du gjør det, opprett en tom metode som heter 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(); } . Vi kommer tilbake til dette senere for å starte et søk og vise resultatene. Etter det kan du overstyre menybehandleren.

Det er nå på tide å gjøre vårt eksempler på Google Glass-applikasjonens startside pen. Importer en ApeeScape-logo til applikasjonen din som 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); } . Jeg brukte dette bildet:

I din MainActivity klasse, gjør følgende endringer.

Forsikre deg om at følgende private variabler blir erklært i begynnelsen av klassen:

Endre findDevelopers metode for å tilpasse kortoppsettet:

Og endre din java/models handler å være slik:

Som jeg sa før, vil vi inkludere trykkaktivert meny sammen med “Ok glass” , så bare aktiver bevegelser som du ville gjort i Android-appen din. Legg til følgende metoder i CardScrollAdapter klasse:

Det burde være det! Du kan nå starte appen din og prøve begge metodene for menyaktivering. Hvis du sier “Ok glass” du får tre menyelementer vist på skjermen, og hvis du trykker på glasset, åpnes en rullbar meny. For å navigere gjennom menyelementene kan du sveipe frem og tilbake.

Slik ser stemmemenyen ut:

Og her er gestmenyen:

Hvis du velger et menyelement, vil ingenting skje som din java/adapters metoden er ennå ikke implementert.

Utviklerskjermbilder

Vi vil fortsette å bruke standard Glass Card-layout, med et bilde på venstre side, tekst til høyre og litt bunntekstinformasjon. For mer informasjon om beste fremgangsmåter for utforming av kortene dine, se Google Glass stilguide .

Vår utviklerprofil er definert av enkle egenskaper:

1. Navn
2. Bilde
3. Utviklingsplattform

Så, la oss sørge for å ha riktig struktur for klasser i appen vår. Opprett en ny klasse med navnet 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); } } i ResultsActivity mappe. Vi vil at denne klassen skal være serierbar, da den vil inneholde profiler som er på en liste.

Vi vil at kortene våre skal være tett bundet til utviklerprofildataene våre. Fordi standard java/com.helloglass er litt generisk med hensyn til datamodellen, vi trenger å utvide den og gjøre den til vår egen. Opprett extends Activity i developer.xml mappe:

Vi ønsker ikke at søkeresultatene våre skal legges til på startskjermen for applikasjonen, så vi oppretter ny aktivitet som gjør søkeresultatene. Opprett en ny aktivitet, MainActivity , ved siden av ResultsActivity (sannsynligvis i public static final String SEARCH = 'search'; private String mPlatform='Android'; ).

Forsikre deg om at den ResultsActivity.

Deretter må vi spesifisere en meny for våre utviklerprofilkort. Opprett en ny meny, MainActivity, med følgende innhold:

For å aktivere passerende parametere mellom findDevelopers og ResultsActivity legg til følgende linjer i begynnelsen av 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); } klasse:

Sørg for å legge til den nye aktiviteten din i manifestfilen:

Sette opp startskjermbildet for ResultsActivity og konfigurering av kort er veldig likt det vi gjorde på platform. Kontroller først at du har kortene og rulleboksen definert i begynnelsen:

Lag en midlertidig søkemetode som vi kommer tilbake til senere for å implementere. Å legge til nye kort i profillisten er like enkelt som å legge til elementer i en matrise. Vi vil kalle denne metoden ResultsActivity også, men denne tilhører @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); } :

Gå tilbake til openOptionsMenu() og oppdater onGesture(Gesture gesture) der for å starte private GestureDetector createGestureDetector(Context context) { // … @Override public boolean onGesture(Gesture gesture) { if (gesture == Gesture.TAP) { openOptionsMenu(); return true; } else if // … og pass i @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); } eiendom:

Fest utviklermenyen til resdrawable. Du vil kunne åpne menyen på hvilket som helst profilkort.

Akkurat som tidligere, aktiver bevegelser for å håndtere pekeplaten på Glasset når ResultsActivity er vist. For å gjøre det er det bare å ringe MainActivity i @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); } metode:

Legg også til en menybehandler til utviklerrelaterte handlinger. Vi legger igjen enkle Toast-meldinger for nå.

Hver applikasjon skal bruke noen fine visuelle elementer, ikoner osv. Google Glass-teamet har levert et veldig stort sett med vanlige standardiserte ikoner som er gratis for Glass-utviklere å bruke i applikasjonene sine. Du kan finne et komplett sett med standard Glass-ikoner samt skrifttyper i biblioteket deres

Foreløpig trenger du bare ett ikon MainActivity, så fortsett og last det ned til MainActivity mappe. Vi bruker dette ikonet i stedet for å laste ned et bilde av utvikleren.

Det siste som er igjen i utviklingsveiledningen vår for Glass-apper for øyeblikket, er å overstyre

Du kan dra

|_+_|

|_+_|

Hvis du starter søknaden din nå, kan du sjekke hvordan utviklerprofilene dine opprettes på grunnlag av menyen valgt på

Ved å trykke vises berøringsmenyen:

Og si “Ok glass” henter frem stemmemenyen:

Sveip ned fra listen for å gå tilbake til startskjermen til appen din.

Få profiler fra Internett

For å pakke inn ting, la oss fylle ut menyen med reell informasjon for de 10 beste ApeeScape-utviklerne JavaScript , Android , og iOS .

Du må laste ned profilbildene deres og gjøre dem tilgjengelige via HTTP, eller bare bruke nettadresser direkte fra toptal.com .

Siden det å bygge en web-crawler bare for å få navn på topputviklere i ApeeScape kan være for mye av en omvei for denne artikkelen, har jeg laget JSON-filer som du kan bruke til Android , JavaScript , og ios .

I appen din er det første du trenger å be om tilgang til internett fra Android OS. Legg til følgende linje i manifestfilen din

|_+_|

Vær oppmerksom på at Glass ikke vil tillate deg å blokkere hovedtråden ved å bruke HTTP-forespørsler direkte. Du må håndtere JSON-nedlastinger og individuelle bilder på en asynkron måte. Du kan bruke en asynkroniseringsoppgave, opprette din egen nedlastningstjeneste eller intensjon, eller hva du foretrekker i ditt daglige arbeid.

Å bygge denne funksjonaliteten er ikke spesifikk for Google Glass, så jeg hopper over kodebiter. Hvis du går videre og får denne siste funksjonaliteten til å fungere, bør profilkortene dine se slik ut:

Opplæring Wrap Up

Jeg håper at du hadde det gøy å følge denne utviklingsveiledningen for Google Glass og bygge din første Glassware-applikasjon. Nå skal du være komfortabel med ideen om at skriveapplikasjoner for Glass ikke er mye annerledes enn noen annen Android-plattform.

På dette tidspunktet har du lært hvordan du utvider Google Glass stemmeaktiverte startskjerm, hvordan du lager dine egne stemmeaktiverte menyer, og hvordan du kombinerer stemmekontroller med berøringsbevegelser. Du bør også forstå konseptene og grunnleggende byggesteiner for Glass UI, for eksempel kort, oppsett og elementer. Du har sett hvordan du dynamisk lager kort og hvordan du navigerer mellom forskjellige aktiviteter.

For å dykke dypere, gå til Googles utviklerressurser på developers.google.com/glass . Når du begynner å bygge mer komplekse applikasjoner, vil det vise seg å være en veldig nyttig ressurs.

Vær oppmerksom på at Glass fremdeles er i utviklingsfasen, og det er sannsynligvis mange flere forbedringer som skal implementeres før det kommer til forbrukermarkedet. Med dette i bakhodet har jeg en viktig merknad til deg:

Det er ganske mye arbeid igjen med stemmegjenkjenning, og du kan ta deg selv til å rope til din imaginære venn mens du prøver å starte aktiviteten din eller fylle ut litt informasjon. Ingen bekymringer der - alle som prøver Google Glass-utvikling føler det samme, så du er ikke alene.

Teknologien vil bli bedre, og glass vil være klart for detaljhandel på kort tid. Det kommer sikkert til å lage store bølger når den kommer i butikkene, så jeg håper du er like spent som jeg er på å være en av de første som er ute i forkant av denne spennende teknologien!

Rop ut : Skjermbilder i denne artikkelen er laget med [e-postbeskyttet] .