Урок за амбициозни разработчици на Google Glass: Изграждане на първото ви приложение за стъкло

Причината, поради която искате да използвате voice_trigger.xml разрешенията е, за да можете да играете с персонализирани гласови контроли. Google е доста строг относно това кои гласови команди са разрешени в одобрените приложения на Glass и всички нови команди трябва да бъдат одобрени. Тъй като този урок е с учебна цел и няма да подавате това приложение в официалния магазин за стъклария, не бива да се притеснявате за него. Просто включете res/xml/ разрешения и ще имате достъп до „скрити гласови команди“. За повече информация относно това, моля прочетете тази страница на GDK .

Отворете android:label='@string/app_name' за редактиране. Тук се дефинира гласовата команда за стартиране на вашето приложение. Трябва да се намира в @string/app_name папка. Трябва да получите съдържание, подобно на това:

Вместо да казваме „Покажи ми демонстрация“, за да стартираме нашето приложение, нека просто кажем името на приложението. Променете съдържанието на файла на:

Ако се върнете към вашия файл с манифест, може да забележите, че вашият res/values/strings.xml е актуализиран автоматично, за да се използва и низът на ресурса app_name вместо твърдо кодираните Hello Glass стойност, както беше преди. Ако тази настройка не е актуализирана, уверете се, че сте задали стойността на voice_trigger.xml.

И какво точно е името на вашето приложение? Ако отворите network='true', вашият FEATURE_VOICE_COMMANDS трябва да бъдат посочени като:

Това трябва да приключи нещата за първото ви приложение Hello Glass. Нека да видим как работи сега!

От началния екран можете да кажете „Добре стъкло“ за извикване на гласовото меню. Вашето приложение вече е в списъка с гласово активирани команди.

С този урок, който ще ви насочи, така изглежда сега началният екран на приложението ви Glass.

Ако кажеш ' Здравей чаша ”Вашето приложение трябва да започне и трябва да получите стандартизиран опит в Glass:

Ако не искате да използвате гласа си, за да активирате приложението, можете просто да докоснете началния екран и ще видите, че приложението ви е налично в менюто:

Глас или докосване? Използвайте и двете!

Много е важно да обръщате голямо внимание на интерфейса на вашето приложение и взаимодействието на вашите потребители с него. Не забравяйте, че вашите потребители не винаги са в състояние да използват гласа си - например, докато гледат лекция или презентация. Като алтернатива те могат да имат пълни ръце и да не могат да използват докосване. Предлагам ви да осигурите взаимодействие както с докосване, така и с гласово меню, когато е възможно, позволявайки на вашите потребители да се придвижват през приложението ви, като използват паралелно глас и тъчпад

Истинско приложение - ApeeScape Finder

Сега, когато се чувствате добре с разработката на Glass и сте създали Hello Glass, е време да създадете истинско приложение, което да задейства новите функции на Glass. Нека създадем приложение, което ви позволява да разглеждате профили на най-добрите разработчици на ApeeScape въз основа на платформата за разработка.

Структурата на нашия пример за приложение за стъкло ще бъде проста:

1. Искаме началният ни екран да има ApeeScape лого с активирано с глас и докосване меню, което ни позволява да изберем платформата за разработка, за която се нуждаем от разработчик.
2. След избора на платформа искаме да получим списък с разработчици с тяхната снимка и име. Профилите на разработчиците ще бъдат представени под формата на превъртащ се списък с лични карти.
3. Когато разглеждаме профил на програмист, искаме да можем да ги добавим към любими или да изпратим заявка за наемане.

Основите

Нека да обобщим набързо това, което вече сте добавили в допълнение към знанията си за Android:

1. Как да настроите вашата среда за разработка за изграждане на Glassware.
2. Как да конфигурирате приложението си да използва стандартната GUI тема на Glassware.
3. Как да стартирате приложението си, като използвате персонализирани гласови команди и имена на менюта.

Използвайки тези знания, въведете и стартирайте новото си приложение. Можете или да актуализирате приложението Hello Glass отгоре, или да стартирате ново приложение, следвайки същите тези стъпки. Наименувайте това приложение „ Top Finder ”, И направете своя MainActivity файл изглежда така.

res/menu ограничението казва на стъклото да проверява за мрежова свързаност при стартиране на това приложение, което ще трябва да свържем със списъците на разработчиците на ApeeScape. Ако няма връзка, Glass ще покаже предупредително съобщение.

Началния екран

Нека направим така, че началният екран на нашето приложение да изглежда по следния начин:

Когато видите „Добре стъкло“ съобщение на вашия екран означава, че приложението има гласово активирано меню на това място. Говорейки фразата „Добре стъкло“ тук активира гласовото меню за това местоположение. Тази фраза е предварително дефинирана от Glass и не можете да я промените.

Можете да се сетите „Добре стъкло“ като „меню на приложението“, точно както сте използвали при разработката на вашия смартфон / таблет, и то има абсолютно същата роля. Тъй като бихте „докоснали“ „иконата на менюто на приложението“ на вашия екран (често 3 точки или линии), за да отворите менюто на приложението за Android, трябва да кажете „Добре стъкло“ за да отворите гласово активираното меню във вашето приложение Glassware.

За да активирате „Добре стъкло“ меню, което трябва да поискате main.xml от API. За да направите това, добавете следния ред във вашия onCreatePanelMenu манипулатор във вашия MainActivity:

Всяка дейност, която включва тази функция, ще бъде изобразена с „Добре стъкло“ текст в долния център.

Следващото нещо, което трябва да направите, е да създадете меню за основния екран. Във вашия findDevelopers папка създайте нова дефиниция на XML меню с име 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); } . За да улесним нещата, ние просто ще активираме три платформи за разработчици на ApeeScape, но не се колебайте да правите промените, както искате.

Той трябва да има следното съдържание:

Може би се чудите защо избрах доста дълги заглавия на менюто, а не просто Android, JavaScript и iOS. Е, причината е много проста. Момчетата от екипа за разработка на Glass все още подобряват разпознаването на глас. Препоръчително е да използвате две или три думи в менютата си, така че Glass да ги разпознава по-лесно.

Вече споменах, че „Добре стъкло“ менюто не се различава от стандартното меню на приложението ви за Android. Прикачването на меню към дейност е практически същото. Просто заменете MainActivity манипулатор във вашия private CardScrollView mCardScroller; private View mView; private GestureDetector mGestureDetector; и раздуйте главното меню, което току-що създадохте:

Сега трябва да добавим манипулатор на меню. Преди да направите това, създайте един празен метод с име 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(); } . По-късно ще се върнем към това, за да започнем търсене и да покажем резултатите. След това можете да замените манипулатора на менюто си.

Сега е време да направим хубав началния екран на нашето примерно приложение Google Glass. Импортирайте лого на ApeeScape във вашето приложение като 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); } . Използвах това изображение:

Във вашия MainActivity клас, направете следните промени.

Уверете се, че следните частни променливи са декларирани в началото на класа:

Променете findDevelopers метод за персонализиране на оформлението на картата:

И сменете вашия java/models манипулатор да бъде такъв:

Както казах преди, ние искаме да включим активирано с докосване меню заедно с „Добре стъкло“ , така че просто активирайте жестове, както бихте направили в приложението си за Android. Добавете следните методи във вашия CardScrollAdapter клас:

Това трябва да е! Вече можете да стартирате приложението си и да изпробвате и двата метода за активиране на менюто. Ако кажеш „Добре стъкло“ получавате три елемента от менюто, показани на екрана и ако докоснете стъклото, ще се отвори превъртащо се меню. За да навигирате през елементите на менюто, можете да плъзнете напред и назад.

Ето как изглежда гласовото меню:

И тук е менюто с жестове:

Ако изберете елемент от менюто, нищо няма да се случи като вашия java/adapters метод все още предстои да бъде внедрен.

Екрани за програмисти

Ще продължим да използваме оформлението на Glass Card по подразбиране, със снимка отляво, текст отдясно и информация за долния колонтитул. За повече информация относно най-добрите практики за проектиране на вашите карти, вижте Google Glass ръководство за стил .

Нашият профил за разработчици се определя от прости свойства:

llc c срещу llc s

1. Име
2. Картина
3. Платформа за разработка

Така че, нека се уверим, че имаме правилната структура на класовете в нашето приложение. Създайте нов клас с име 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); } } във вашия ResultsActivity папка. Искаме този клас да бъде сериализуем, тъй като ще съдържа профили, които са в списък.

Искаме картите ни да бъдат тясно обвързани с данните на профила ни на разработчици. Тъй като по подразбиране java/com.helloglass е малко общ по отношение на неговия модел на данни, трябва да го разширим и направим свой собствен. Създаване extends Activity във вашия developer.xml папка:

Не искаме резултатите от търсенето ни да се добавят на началния екран на приложението, така че ще създадем нова активност, която ще извърши търсенето и ще покаже резултатите. Създайте нова дейност, MainActivity , до вашия ResultsActivity (вероятно в public static final String SEARCH = 'search'; private String mPlatform='Android'; ).

Уверете се, че е ResultsActivity.

След това трябва да посочим меню за нашите профилни карти за разработчици. Създайте ново меню, MainActivity, със следното съдържание:

За да разрешите преминаването на параметри между findDevelopers и 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); } клас:

Не забравяйте да добавите новата си активност към файла си с манифест:

Настройване на началния екран на ResultsActivity и конфигурирането на карти е много подобно на това, което направихме на platform. Първо проверете дали вашите карти и скролер са дефинирани в началото:

Създайте временен метод за търсене, към който ще се върнем по-късно, за да го приложим. Добавянето на нови карти към списъка с профили е толкова просто, колкото добавянето на елементи към масив. Ще наречем този метод ResultsActivity също, но този принадлежи на @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); } :

Сега се върнете към вашия openOptionsMenu() и актуализиране onGesture(Gesture gesture) там, за да стартирате вашия private GestureDetector createGestureDetector(Context context) { // … @Override public boolean onGesture(Gesture gesture) { if (gesture == Gesture.TAP) { openOptionsMenu(); return true; } else if // … и преминете в @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); } Имот:

Прикачете менюто си за програмисти към resdrawable. Ще можете да отворите менюто на която и да е карта на профила.

Точно както по-рано, разрешете жестове за работа с тъчпада на вашето стъкло, когато ResultsActivity се показва. За да направите това, просто извикайте MainActivity във вашия @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); } метод:

Освен това добавете манипулатор на меню към действия, свързани с разработчика. Засега ще оставим прости съобщения за тост.

Всяко приложение трябва да използва някои хубави визуални елементи, икони и т.н. Екипът на Google Glass предостави много голям набор от общи стандартизирани икони, които разработчиците на Glass могат да използват безплатно в своите приложения. Можете да намерите пълен набор от стандартни икони на Glass, както и шрифтове в тяхната библиотека

Засега ви трябва само една икона MainActivity, така че продължете и я изтеглете на вашия MainActivity папка. Ще използваме тази икона, вместо да изтегляме снимка на разработчика.

Последното нещо, което засега остава в нашия урок за разработка на приложения за Glass, е да заменим нашите

Можете да оставите

|_+_|

|_+_|

Ако стартирате приложението си сега, можете да проверите как вашите профили на разработчици се създават в движение въз основа на менюто, избрано на

Докосването извежда сензорното меню:

И казвайки „Добре стъкло“ извежда гласовото меню:

Плъзнете надолу от списъка, за да се върнете на началния екран на приложението си.

Получаване на профили от Интернет

За да приключим нещата, нека попълним менюто с реална информация за първите 10 разработчика на ApeeScape за JavaScript , Android , и iOS .

Ще трябва да изтеглите снимките на профила им и да ги направите достъпни чрез HTTP, или просто да използвате URL адреси директно от toptal.com .

Тъй като изграждането на уеб робот само за получаване на имена на най-добрите разработчици в ApeeScape може да е прекалено голямо заобикаляне за тази статия, създадох JSON файлове, които да използвате за Android , JavaScript , и iOS .

Във вашето приложение първото нещо, което трябва да направите, е да поискате достъп до интернет от вашата Android OS. Добавете следния ред към вашия файл с манифест

|_+_|

Имайте предвид, че Glass няма да ви позволи да блокирате основната нишка, като използвате HTTP заявки директно. Ще трябва да обработвате JSON изтегляния и отделни изображения по асинхронен начин. Можете да използвате асинхронна задача, да създадете своя собствена услуга за изтегляне или намерение или каквото предпочитате в ежедневната си работа.

Изграждането на тази функционалност не е специфично за Google Glass, така че ще пропусна кодови фрагменти. Ако напредвате и използвате тази последна част от функционалността, вашите профилни карти трябва да изглеждат така:

Приключване на урока

Надявам се, че сте се забавлявали следвайки този урок за разработка на Google Glass и създавайки първото си приложение за Glassware. Досега трябва да сте доволни от идеята, че писането на приложения за Glass не се различава много от всяка друга платформа на Android.

На този етап научихте как да разширите началния екран на Google Glass, активиран с глас, как да създадете свои собствени менюта, активирани с глас, и как да комбинирате гласови контроли с жестове с докосване. Също така трябва да разберете концепциите и основните градивни елементи за стъкления потребителски интерфейс, като карти, оформления и елементи. Виждали сте как да създавате динамично карти и как да навигирате между различни дейности.

За да се потопите по-дълбоко, преминете към ресурсите за разработчици на Google на адрес developers.google.com/glass . Когато започнете да създавате по-сложни приложения, това ще се окаже много полезен ресурс.

Моля, имайте предвид, че Glass все още е във фаза на разработка и вероятно има много повече подобрения, които трябва да бъдат внедрени, преди да стигне до потребителския пазар. Имайки предвид това, имам една важна бележка за вас:

Остава доста голяма работа по разпознаването на гласа и може да се хванете да крещите на въображаемия си приятел, докато се опитвате да започнете дейността си или да попълните някаква информация. Не се притеснявайте там - всеки, който пробва разработката на Google Glass, се чувства по същия начин, така че не сте сами.

Технологията ще се подобри и стъклото ще бъде готово за продажба на дребно за нула време. Със сигурност ще направи големи вълни, щом попаднат в магазините, така че се надявам да сте толкова развълнувани, колкото и аз, че сте един от първите, които излязоха начело на тази вълнуваща технология!

Извиквам : Снимките на екрана в тази статия са направени с помощта на [имейл защитен] .