Samouczek dla początkujących programistów Google Glass: tworzenie pierwszej aplikacji Glass

Google Glass to futurystyczna technologia, która obiecuje zrewolucjonizować sposób, w jaki używamy naszych urządzeń do interakcji ze światem. Ale z punktu widzenia dewelopera, co jest takiego specjalnego w opracowywaniu dla szkła? Odpowiedź brzmi: „Nic!” W rzeczywistości, z perspektywy doświadczonego programisty Androida, Google Glass to po prostu kolejne urządzenie z Androidem z bardzo małym ekranem i ograniczonymi funkcjami!

Fakt, że każdy, kto zna się na programowaniu Androida, może zostać członkiem tej „elitarnej” społeczności futurystycznych ewangelistów technologii ubieralnych, jest jednym z powodów, dla których Google Glass jest tak niesamowity. Jasne, będziesz musiał nauczyć się kilku nowych rzeczy, takich jak różnica między „zanurzeniem” a „aktywną kartą”, ale jak zobaczysz, krzywa uczenia się nie jest stroma.

Celem tego samouczka Google Glass jest przygotowanie podstaw do opracowania dowolnej aplikacji Glass poprzez stworzenie prostej aplikacji, która obejmuje wszystkie typowe kroki. Moim celem jest zaoszczędzenie Ci trochę czasu na badaniach i próbach i błędach oraz umożliwienie Ci jak najszybszego uruchomienia pierwszej aplikacji Glass.

W tym samouczku najpierw omówimy, jak skonfigurować środowisko programistyczne i podłączyć Google Glass do komputera. Następnie stworzymy prostą aplikację Glass „Hello World”, która będzie zawierać niestandardowe polecenia głosowe i integrację z menu startowym Glass. Po opracowaniu i uruchomieniu pierwszej aplikacji na urządzeniu Glass nauczysz się podstaw nawigacji w aplikacjach Glass, menu aktywowanych głosem i dynamicznego tworzenia treści.

Jak dostać się na pokład

Glass wciąż znajduje się w swego rodzaju fazie „testów beta”, dla której Google wymyślił termin „Program Explorer”. Jakkolwiek nazwiesz, szkło nie jest jeszcze czymś, co można kupić w sklepie jak smartfon. Niestety, narzędzia programistyczne dla systemu Android nadal nie mają emulatora, którego można użyć do tworzenia aplikacji bez rzeczywistego sprzętu.

W związku z tym, aby uruchomić i debugować swoją aplikację, będziesz musiał zdobyć prawdziwy Google Glass za pośrednictwem programu Explorer. Aby dołączyć do programu, odwiedź stronę rejestracji i zarejestruj się, aby uzyskać dostęp. Po zatwierdzeniu przygotuj kartę kredytową i poczekaj na dostarczenie szklanki. Wersja Explorer Glass kosztuje obecnie 1500 USD, ale oczekuje się, że cena znacznie spadnie, zanim urządzenie trafi do sklepów.

Dla bezszklanych

Ze względu na brak emulatora konieczne jest posiadanie rzeczywistego sprzętu Google Glass, aby rozwijać aplikację w tym samouczku (lub dowolną aplikację Glass), ale jeśli zakup takiego wykracza poza twój budżet, nie zniechęcaj się - to i tak będzie warto śledzić. W samouczku stanie się jasne, że programowanie dla Glass jest prawie takie samo, jak programowanie na dowolnej innej platformie Android!

Jeśli nadal nie korzystasz z Google Glass, ale jesteś tak samo podekscytowany jak ja, obejrzyj te dwa filmy, ponieważ powinny one dostarczyć wystarczającej ilości informacji, aby zrozumieć podstawy interfejsu użytkownika.

• Wprowadzenie do Google Glass
• Instrukcje dotyczące Google Glass: Pierwsze kroki

Tutaj znajdziesz jeszcze więcej przydatnych filmów dotyczących konfiguracji i nawigacji, a także wiele innych szczegółów dotyczących interfejsu użytkownika.

Zasady zaangażowania

Ten samouczek programisty Google Glass zawiera następujące założenia:

• Zakładam, że rozumiesz podstawy nawigacji i konfiguracji Glass. Jeśli nigdy nie korzystałeś ze Glass, obejrzyj filmy, do których prowadzą linki powyżej.
• Zakładam, że rozumiesz podstawy programowania na Androida: strukturę plików projektu, konfigurację aplikacji na Androida itp.
• Będę używał Android Studio, ale instrukcje powinny przełożyć się na prawie każde środowisko programistyczne Androida. Android Studio jest nadal w wersji „beta”, ale podobnie jak Glass. Nie bój się go używać – to naprawdę świetny produkt. Android Studio jest dostępne do pobrania tutaj.

Konfigurowanie Google Glass

Dobrze, zaczynajmy!

Pierwszą rzeczą, którą musisz zrobić, to włączyć tryb debugowania na swoim Glass. Musisz zrobić coś takiego na każdym urządzeniu z Androidem, którego używasz do tworzenia aplikacji, więc może to być znajome. Aby włączyć debugowanie, przesuń palcem do „ Ustawienia ” -> „ Informacje o urządzeniu ”, a następnie dotknij, aby otworzyć menu urządzenia. Wybierz „ Włącz debugowanie ” i zostanie włączony.

Następnie musisz przygotować swoje środowisko programistyczne. Obecna wersja Google Glass wymaga korzystania z interfejsu API w wersji 19, więc upewnij się, że jest ona zainstalowana. Musisz także mieć zainstalowany Glass Development Kit. Użyj Android SDK Manager, aby zainstalować te dwa pakiety, jeśli jeszcze tego nie zrobiłeś.

Witaj świecie!

Zróbmy więc nasz pierwszy kawałek „Glassware”. (Tak, Google ukuł inny termin! „Glassware” to nazwa każdej aplikacji działającej na Google Glass). Zaczniemy od opracowania starego dobrego „Hello World!” wniosek. Podobnie jak większość głównych środowisk programistycznych Androida, Android Studio automatycznie wypełnia nowe aplikacje szablonem, aby wyświetlić to słynne zdanie. W rezultacie otrzymujesz „Hello World!” uruchomienie to tylko ćwiczenie w podstawowym wdrażaniu aplikacji.

W Android Studio kliknij „ Nowy projekt ” i wypełnij formularz projektu. Możesz użyć czegoś podobnego do tego:

Wybierając współczynniki kształtu i API, wybierz „ Szkło ” i API 19

Wybierz „ Aktywność zanurzenia ” jako aktywność początkową.

Pamiętasz, jak wspomniałem, że będziesz musiał poznać różnicę między Immersion a Live Card? Artykuł dotyczący interfejsu użytkownika Google wyjaśnia różne typy ekranów szklanych. Oto krótkie podsumowanie:

• Karty na żywo są dodawane do osi czasu Glass i wyświetlają informacje o czymś w czasie rzeczywistym dzięki aktualizacjom o wysokiej częstotliwości. Ciągle działają w tle, nawet gdy użytkownicy korzystają z różnych kart. Pozwala to użytkownikom na wielozadaniowość ze stałym dostępem do różnego rodzaju informacji w czasie rzeczywistym.

• Immersje to w pełni konfigurowalne ekrany, które działają poza osią czasu. Pozwalają one zaprojektować własny interfejs użytkownika i przetwarzać dane wejściowe użytkownika w dowolny sposób. Tego będziemy używać!

Na następnym ekranie kreatora pozostaw wartości domyślne dla „ Nazwa ” i „ Tytuł ” ​​i kliknij „ Zakończ ”.

Po tym, jak Gradle zajmie się Twoimi zależnościami i przygotuje Twój projekt, nadszedł czas, aby podłączyć go do Glass. Teraz jest to futurystyczny rozwój!

Zakładając, że wszystkie sterowniki Android ADB są na swoim miejscu, a Twój Glass jest rozpoznawany przez Twój system, powinieneś umieścić go na liście urządzeń.

Jeśli po raz pierwszy podłączasz urządzenie do komputera, Glass poprosi o zatwierdzenie/ustanowienie zaufania. Wystarczy dotknąć szkła, aby umożliwić połączenie i być gotowym.

Kliknij „ Uruchom ” i wdroż „Domyślny pakiet APK” z „MainActivity” jako działaniem startowym do uruchomienia na urządzeniu „USB”.

Po kilku sekundach na ekranie Glass powinno pojawić się coś takiego:

Hurra! Twoja aplikacja działa na Glass! I wszystko, co musiałeś zrobić, to podać kilka domyślnych wartości podczas tworzenia aplikacji!

Ponieważ nie określiliśmy inaczej, Glass wyświetli Twoją aplikację pod nazwą „Pokaż demo”. Jeśli przesuniesz się z powrotem do ekranu startowego, a następnie dotkniesz, aby otworzyć menu aplikacji, zobaczysz je na liście w następujący sposób:

Trochę Polski

Ok, masz to uruchomione, ale to nie wygląda jak prawdziwa aplikacja Glass i nie chcesz, aby aplikacja była uruchamiana przez „Pokaż demo”.

W tym samouczku po prostu trochę go poprawimy, aby uzyskać prawdziwe wrażenie.

Ustawianie motywu

Po pierwsze, nie chcesz zajmować żadnego małego szklanego ekranu z tym paskudnym nagłówkiem paska tytułu „Hello World Immersion” i zdecydowanie nie chcesz, aby Twój ekran był szary z czarną czcionką. Aby to naprawić, wystarczy przełączyć motyw na naszym Androidzie i pozwolić, aby Glass OS się tym zajął.

Otwórz res/values/styles.xml do edycji. Powinien mieć następującą treść:

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

Po prostu zmień android:Theme.Holo.Light na android:Theme.DeviceDefault . Powinno to automatycznie zadbać o układ i kolory aplikacji przy użyciu domyślnego motywu Glass.

Definiowanie wyglądu menu

Ok, następną rzeczą, którą chcemy zrobić w tym samouczku dotyczącym programowania Glass, jest skonfigurowanie naszej aplikacji tak, aby miała odpowiednią nazwę i ładne uruchamianie sterowane głosem. Otwórz swój Manifest Androida ( AndroidManifest.xml ) i dodaj powyższy tag <application… :

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

Powodem, dla którego chcesz korzystać z uprawnień DEVELOPMENT , jest to, że możesz bawić się niestandardowymi kontrolkami głosowymi. Google dość ściśle określa, które polecenia głosowe są dozwolone w zatwierdzonych aplikacjach Glass, a wszystkie nowe polecenia muszą zostać zatwierdzone. Ponieważ ten samouczek służy do celów edukacyjnych i nie będziesz przesyłać tej aplikacji do oficjalnego sklepu Glassware, nie powinieneś się tym martwić. Po prostu włącz uprawnienia DEVELOPMENT , a będziesz mieć dostęp do „niepublicznych poleceń głosowych”. Więcej informacji na ten temat można znaleźć na tej stronie GDK.

Otwórz voice_trigger.xml do edycji. Tutaj definiuje się polecenie głosowe uruchamiające aplikację. Powinien znajdować się w folderze res/xml/ . Powinieneś otrzymać treść podobną do tej:

 <trigger command="SHOW_ME_A_DEMO" />

Zamiast mówić „Pokaż mi demo”, aby uruchomić naszą aplikację, po prostu powiedz nazwę aplikacji. Zmień zawartość pliku na:

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

Jeśli wrócisz do pliku manifestu, możesz zauważyć, że Twój android:label="@string/app_name" został automatycznie zaktualizowany tak, aby używał również ciągu zasobu @string/app_name zamiast zakodowanej na stałe wartości Hello Glass , jak to było wcześniej . Jeśli to ustawienie nie zostało zaktualizowane, ustaw wartość na android:label="@string/app_name" .

A jaka jest dokładnie nazwa Twojej aplikacji? Jeśli otworzysz res/values/strings.xml , twoja app_name powinna być wymieniona jako:

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

Powinno to zakończyć twoją pierwszą aplikację Hello Glass. Zobaczmy teraz, jak to działa!

Na ekranie startowym możesz powiedzieć „ok szkło” , aby wyświetlić menu głosowe. Twoja aplikacja znajduje się teraz na liście poleceń aktywowanych głosem.

Dzięki temu samouczkowi, tak wygląda teraz ekran startowy Twojej aplikacji Glass.

Jeśli powiesz „ Hello glass ”, Twoja aplikacja powinna się uruchomić i powinieneś uzyskać ustandaryzowane doświadczenie Glass:

Jeśli nie chcesz używać głosu do aktywacji aplikacji, możesz po prostu dotknąć na ekranie Start, a zobaczysz, że Twoja aplikacja jest dostępna w menu:

Głos czy dotyk? Użyj obu!

Bardzo ważne jest, aby zwracać szczególną uwagę na interfejs swojej aplikacji i interakcję z nią użytkowników. Pamiętaj, że Twoi użytkownicy nie zawsze są w stanie użyć swojego głosu - na przykład podczas oglądania wykładu lub prezentacji. Ewentualnie mogą mieć pełne ręce roboty i nie być w stanie używać dotyku. Sugeruję, aby w miarę możliwości zapewnić zarówno interakcję z menu dotykowym, jak i głosowym, umożliwiając użytkownikom poruszanie się po aplikacji jednocześnie za pomocą głosu i touchpada.

Prawdziwa aplikacja - Toptal Finder

Teraz, gdy już znasz się na programowaniu Glass i utworzyłeś Hello Glass, nadszedł czas, aby stworzyć prawdziwą aplikację, która uruchomi nowe funkcje Glass. Zbudujmy aplikację, która pozwoli przeglądać profile najlepszych programistów Toptal w oparciu o platformę programistyczną.

Struktura naszej przykładowej aplikacji Glass będzie prosta:

1. Chcemy, aby nasz ekran startowy miał logo Toptal z menu aktywowanym głosem i dotknięciem, co pozwoli nam wybrać platformę programistyczną, dla której potrzebujemy programisty.
2. Po wybraniu platformy chcemy uzyskać listę deweloperów wraz z ich zdjęciem i nazwą. Profile programistów zostaną przedstawione w postaci przewijanej listy kart osobistych.
3. Przeglądając profil dewelopera, chcemy mieć możliwość dodania ich do ulubionych lub wysłania prośby o zatrudnienie.

Podstawy

Podsumujmy szybko to, co już dodałeś, oprócz znajomości Androida:

1. Jak skonfigurować środowisko programistyczne do tworzenia Glassware.
2. Jak skonfigurować aplikację do korzystania ze standardowego motywu GUI Glassware.
3. Jak uruchomić aplikację za pomocą niestandardowych poleceń głosowych i nazw menu.

Korzystając z tej wiedzy, przygotuj i uruchom nową aplikację. Możesz zaktualizować aplikację Hello Glass od góry lub uruchomić nową aplikację, wykonując te same czynności. Nazwij tę aplikację „ Top Finder ” i spraw, aby Twój plik voice_trigger.xml wyglądał tak.

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

Ograniczenie network="true" mówi Glass, aby sprawdził łączność sieciową podczas uruchamiania tej aplikacji, którą będziemy musieli połączyć z listami programistów Toptal. W przypadku braku połączenia Glass wyświetli komunikat ostrzegawczy.

Pulpit

Sprawmy, aby ekran główny naszej aplikacji wyglądał mniej więcej tak:

Gdy zobaczysz na ekranie komunikat „ok glass” , oznacza to, że aplikacja ma w tym miejscu menu aktywowane głosem. Wypowiedzenie tutaj frazy „ok szkło” aktywuje menu głosowe dla tej lokalizacji. To zdanie jest predefiniowane przez Glass i nie można go zmienić.

Możesz myśleć o „szkło ok” jako o „menu aplikacji”, tak jak przy tworzeniu smartfonów/tabletów, i pełni ono dokładnie tę samą rolę. Podobnie jak w przypadku „dotknięcia” „Ikony menu aplikacji” na ekranie (często 3 kropki lub linie), aby otworzyć menu aplikacji Android, należy powiedzieć „ok glass” , aby otworzyć menu aktywowane głosem w aplikacji Glassware.

Aby włączyć menu „ok szkło” , musisz zażądać FEATURE_VOICE_COMMANDS z interfejsu API. Aby to zrobić, dodaj następujący wiersz do procedury obsługi onCreate w swojej MainActivity :

 getWindow().requestFeature(WindowUtils.FEATURE_VOICE_COMMANDS);

Każda aktywność, która zawiera tę funkcję, będzie renderowana z tekstem „ok szkło” na dole pośrodku.

Następną rzeczą, którą musisz zrobić, to stworzyć menu dla ekranu głównego. W folderze res/menu utwórz nową definicję menu XML o nazwie main.xml . Aby uprościć sprawę, udostępnimy tylko trzy platformy programistyczne Toptal, ale możesz wprowadzać zmiany, jak chcesz.

Powinien mieć następującą treść:

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

Możesz się zastanawiać, dlaczego wybrałem raczej długie tytuły menu zamiast po prostu Androida, JavaScript i iOS. Cóż, powód jest bardzo prosty. Faceci z zespołu programistów Glass wciąż ulepszają rozpoznawanie głosu. Zaleca się stosowanie w menu dwóch lub trzech słów, aby Glass łatwiej je rozpoznał.

Wspomniałem już, że menu „ok szkło” nie różni się od standardowego menu aplikacji na Androida. Dołączenie menu do czynności jest praktycznie takie samo. Po prostu zastąp procedurę obsługi onCreatePanelMenu w swojej MainActivity i napełnij menu główne, które właśnie utworzyłeś:

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

Teraz musimy dodać obsługę menu. Zanim to zrobisz, utwórz jedną pustą metodę o nazwie findDevelopers . Wrócimy do tego później, aby rozpocząć wyszukiwanie i wyświetlić wyniki. Następnie możesz nadpisać swoją obsługę 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); }

Nadszedł czas, aby upiększyć ekran główny naszej przykładowej aplikacji Google Glass. Zaimportuj logo Toptal do swojej aplikacji jako res/drawable/logo.png . Użyłem tego obrazu:

W klasie MainActivity wprowadź następujące zmiany.

Upewnij się, że na początku klasy zadeklarowane są następujące zmienne prywatne:

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

Zmień metodę buildView , aby dostosować układ karty:

 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 zmień swój program obsługi onCreate na taki:

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

Jak powiedziałem wcześniej, chcemy dołączyć menu aktywowane dotykiem wraz z „ok szkło” , więc po prostu włącz gesty, tak jak w aplikacji na Androida. Dodaj następujące metody w swojej klasie 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; }

To powinno być to! Możesz teraz uruchomić swoją aplikację i wypróbować obie metody aktywacji menu. Jeśli powiesz „ok szkło” , na ekranie wyświetlą się trzy pozycje menu, a jeśli dotkniesz szkła, otworzy się przewijane menu. Aby poruszać się po pozycjach menu, możesz przesuwać palcem wstecz i do przodu.

Oto jak wygląda menu głosowe:

A oto menu gestów:

Jeśli wybierzesz element menu, nic się nie stanie, ponieważ metoda findDevelopers nie została jeszcze zaimplementowana.

Ekrany programisty

Nadal będziemy używać domyślnego układu Szklanej Karty, z obrazem po lewej stronie, tekstem po prawej i kilkoma informacjami w stopce. Więcej informacji na temat sprawdzonych metod projektowania kart znajdziesz w przewodniku po stylu Google Glass.

Nasz profil programisty określają proste właściwości:

1. Imię
2. Zdjęcie
3. Platforma programistyczna

Zadbajmy więc o odpowiednią strukturę klas w naszej aplikacji. Utwórz nową klasę o nazwie DeveloperModel.java w folderze java/models . Chcemy, aby ta klasa była możliwa do serializacji, ponieważ będzie zawierać profile znajdujące się na liście.

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

Chcemy, aby nasze karty były ściśle powiązane z danymi profilu programisty. Ponieważ domyślny CardScrollAdapter jest nieco ogólny w odniesieniu do jego modelu danych, musimy go rozszerzyć i uczynić go własnym. Utwórz DeveloperAdapter.java w folderze 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); } }

Nie chcemy, aby nasze wyniki wyszukiwania były dodawane na ekranie głównym aplikacji, dlatego utworzymy nową Aktywność, która wykona wyszukiwanie i wyświetlenie wyników. Utwórz nową aktywność, ResultsActivity , obok swojej MainActivity (prawdopodobnie w java/com.helloglass ).

Upewnij się, że extends Activity .

Następnie musimy określić menu dla naszych kart profilu programisty. Utwórz nowe menu, developer.xml , z następującą zawartością:

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

Aby umożliwić przekazywanie parametrów między ResultsActivity i MainActivity , dodaj następujące wiersze na początku klasy ResultsActivity :

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

Pamiętaj, aby dodać nową aktywność do pliku manifestu:

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

Konfigurowanie początkowego ekranu ResultsActivity i konfigurowanie kart jest bardzo podobne do tego, co zrobiliśmy w MainActivity . Najpierw sprawdź, czy masz zdefiniowane karty i scroller na początku:

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

Utwórz tymczasową metodę wyszukiwania, do której później wrócimy. Dodawanie nowych kart do listy profili jest tak proste, jak dodawanie elementów do tablicy. Nazwiemy tę metodę również findDevelopers , ale ta należy do 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); }

Teraz wróć do swojej MainActivity i zaktualizuj tam findDevelopers , aby rozpocząć swoją ResultsActivity i przekazać właściwość platform :

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

Dołącz swoje menu programisty do ResultsActivity . Będziesz mógł otworzyć menu na dowolnej karcie profilu.

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

Tak jak wcześniej, włącz gesty do obsługi touchpada na Glass, gdy wyświetla się ResultsActivity . Aby to zrobić, po prostu wywołaj openOptionsMenu() w onGesture(Gesture gesture) :

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

Dodaj również obsługę menu do działań związanych z programistą. Na razie zostawimy proste wiadomości 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); }

Każda aplikacja powinna używać ładnych elementów wizualnych, ikon itp. Zespół Google Glass dostarczył bardzo duży zestaw typowych standardowych ikon, które programiści Glass mogą bezpłatnie używać w swoich aplikacjach. W ich bibliotece można znaleźć pełny zestaw standardowych ikon Glass, a także czcionek

Na razie potrzebujesz tylko jednej ikony ic_person_50.png , więc śmiało pobierz ją do folderu res\drawable . Użyjemy tej ikony zamiast pobierać zdjęcie dewelopera.

Ostatnią rzeczą, jaka pozostała na razie w naszym samouczku dotyczącym tworzenia aplikacji Glass, jest zastąpienie naszego modułu obsługi onCreate w ResultsActivity , gdzie sprawdzimy, która platforma programistyczna została przekazana z MainActivity i wypełnimy naszą listę.

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

Możesz pozostawić metody onResume i onPause tak samo jak w swojej MainActivity .

Jeśli teraz uruchomisz aplikację, możesz sprawdzić, jak tworzone są profile dewelopera w locie na podstawie menu wybranego w MainActivity . Ponownie masz możliwość wyświetlenia menu za pomocą „ok szkła” lub dotknięcia panelu dotykowego lub aktywacji głosowej. Oto jak wygląda obecnie profil „10. programisty Androida”:

Dotknięcie powoduje wyświetlenie menu dotykowego:

A powiedzenie „ok szkło” wywołuje menu głosowe:

Przesuń palcem w dół z listy, aby wrócić do ekranu głównego aplikacji.

Pobieranie profili z Internetu

Podsumowując, wypełnijmy menu prawdziwymi informacjami dla 10 najlepszych programistów Toptal dla JavaScript, Androida i iOS.

Będziesz musiał pobrać ich zdjęcia profilowe i udostępnić je przez HTTP lub po prostu użyć adresów URL bezpośrednio z toptal.com.

Ponieważ budowanie robota indeksującego tylko po to, aby uzyskać nazwiska najlepszych programistów w Toptal, może być zbyt dużym objazdem dla tego artykułu, stworzyłem pliki JSON, których możesz używać dla Androida, JavaScript i iOS.

W swojej aplikacji pierwszą rzeczą, którą musisz zrobić, to poprosić o dostęp do Internetu z systemu operacyjnego Android. Dodaj następujący wiersz do pliku manifestu

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

Należy pamiętać, że Glass nie pozwoli na zablokowanie głównego wątku bezpośrednio przy użyciu żądań HTTP. Będziesz musiał obsługiwać pobieranie plików JSON i poszczególne obrazy w sposób asynchroniczny. Możesz użyć zadania asynchronicznego, stworzyć własną usługę pobierania lub zamiar, lub cokolwiek wolisz w swojej codziennej pracy.

Budowanie tej funkcjonalności nie jest specyficzne dla Google Glass, więc pominę fragmenty kodu. Jeśli posuwasz się naprzód i uruchomisz tę ostatnią część funkcji, twoje karty profilu powinny wyglądać tak:

Podsumowanie samouczka

Mam nadzieję, że dobrze się bawiłeś po zapoznaniu się z tym samouczkiem dotyczącym programowania Google Glass i tworzeniu swojej pierwszej aplikacji Glassware. Do tej pory powinieneś czuć się komfortowo z myślą, że pisanie aplikacji na Glass nie różni się zbytnio od jakiejkolwiek innej platformy Androida.

W tym momencie dowiedziałeś się, jak rozszerzyć ekran główny Google Glass aktywowany głosem, jak tworzyć własne menu aktywowane głosem i jak łączyć sterowanie głosowe z gestami dotykowymi. Powinieneś również rozumieć koncepcje i podstawowe elementy konstrukcyjne interfejsu użytkownika Glass, takie jak karty, układy i elementy. Widziałeś, jak dynamicznie tworzyć karty i jak poruszać się między różnymi czynnościami.

Aby zanurzyć się głębiej, przejdź do zasobów dla programistów Google na developers.google.com/glass. Kiedy zaczniesz budować bardziej złożone aplikacje, okaże się to bardzo pomocnym źródłem.

Przypominamy, że Glass jest wciąż w fazie rozwoju i prawdopodobnie istnieje wiele innych ulepszeń, które należy wprowadzić, zanim trafi na rynek konsumencki. Mając to na uwadze, mam dla Ciebie jedną ważną uwagę:

Pozostało sporo pracy nad rozpoznawaniem głosu i możesz przyłapać się na tym, że krzyczysz na swojego wyimaginowanego przyjaciela, próbując rozpocząć swoją aktywność lub podać jakieś informacje. Bez obaw – każdy, kto spróbuje rozwoju Google Glass, czuje to samo, więc nie jesteś sam.

Technologia ulegnie poprawie, a szkło będzie gotowe do sprzedaży w krótkim czasie. Z pewnością wywoła wielkie fale, gdy trafi do sklepów, więc mam nadzieję, że jesteś tak samo podekscytowany, jak ja, że ​​jesteś jednym z pierwszych, którzy staną na czele tej ekscytującej technologii!

Krzyknij : Zrzuty ekranu w tym artykule są tworzone przy użyciu Droid@Screen.