Google Glass 개발자 지망생을 위한 자습서: 첫 번째 Glass 앱 빌드

Google Glass는 우리가 기기를 사용하여 세상과 상호 작용하는 방식에 혁신을 가져올 미래 기술입니다. 그러나 개발자의 관점에서 유리용 개발의 특별한 점은 무엇입니까? 대답은 "아무것도!"입니다. 사실, 경험 많은 Android 개발자의 관점에서 볼 때 Google Glass는 매우 작은 화면과 제한된 기능을 가진 또 다른 Android 기기에 불과합니다!

Android 개발 지식이 있는 사람이라면 누구나 이 미래형 웨어러블 기술 전도자의 "엘리트" 커뮤니티의 구성원이 될 수 있다는 사실이 Google Glass를 멋진 이유 중 하나로 만듭니다. 물론, "몰입"과 "액티브 카드"의 차이점과 같은 몇 가지 새로운 것을 배워야 하지만, 보시다시피 학습 곡선이 가파르지 않습니다.

이 Google Glass 튜토리얼의 목적은 모든 일반적인 단계를 포함하는 간단한 앱을 만들어 Glass 애플리케이션을 개발하기 위한 토대를 마련하는 것입니다. 제 목표는 연구와 시행 착오에 드는 시간을 절약하고 가능한 한 빨리 첫 번째 Glass 응용 프로그램을 실행할 수 있도록 하는 것입니다.

이 튜토리얼에서는 먼저 개발 환경을 설정하고 Google Glass를 컴퓨터에 연결하는 방법을 살펴보겠습니다. 그런 다음 사용자 지정 음성 명령 및 Glass 시작 메뉴와의 통합이 포함된 간단한 "Hello World" Glass 앱을 만듭니다. Glass에서 첫 번째 응용 프로그램을 개발하고 실행하면 Glass 응용 프로그램의 탐색, 음성 활성화 메뉴 및 동적 콘텐츠 생성의 기본 사항을 배우게 됩니다.

탑승 방법

Glass는 아직 일종의 "베타 테스트" 단계에 있으며, 이를 위해 Google이 "탐색기 프로그램"이라는 용어를 발명했습니다. 이름이 어떻든 Glass는 아직 스마트폰처럼 매장에서 구입할 수 있는 제품이 아닙니다. 안타깝게도 Android 개발 도구에는 실제 하드웨어 없이 애플리케이션을 개발하는 데 사용할 수 있는 에뮬레이터가 아직 없습니다.

따라서 애플리케이션을 실행하고 디버그하려면 Explorer 프로그램을 통해 실제 Google Glass를 손에 넣어야 합니다. 프로그램에 참여하려면 등록 페이지를 방문하여 액세스 권한을 등록하십시오. 승인되면 신용 카드를 준비하고 잔이 배달될 때까지 기다립니다. Glass의 Explorer 버전은 현재 $1,500 USD이지만 장치가 매장에 출시되기 전에 가격이 크게 낮아질 것으로 예상됩니다.

무안경을 위해

에뮬레이터가 없기 때문에 이 튜토리얼(또는 모든 Glass 앱)에서 앱을 개발하려면 실제 Google Glass 하드웨어가 있어야 합니다. 어쨌든 따라할 가치가 있습니다. 튜토리얼에서 명백해질 것은 Glass용 개발이 다른 Android 플랫폼용 개발과 거의 동일하다는 것입니다!

아직 Google Glass를 사용하지 않았지만 저처럼 기대가 되는 경우 사용자 인터페이스의 기본 사항을 이해하는 데 충분한 정보를 제공할 수 있으므로 이 두 비디오를 살펴보십시오.

• 구글 글래스 소개
• Google Glass 사용법: 시작하기

여기에는 설정 및 탐색에 대한 훨씬 더 유용한 비디오가 있고 여기에 사용자 인터페이스에 대한 더 많은 세부 정보가 있습니다.

교전 규칙

이 Google Glass 개발자 가이드에서는 다음과 같은 가정을 합니다.

• Glass의 탐색 및 설정에 대한 기본 사항을 이해하고 있다고 가정합니다. Glass를 사용해 본 적이 없다면 위에 링크된 동영상을 살펴보세요.
• Android 개발의 기본 사항인 프로젝트 파일의 구조, Android 애플리케이션의 구성 등을 이해하고 있다고 가정합니다.
• 나는 Android Studio를 사용할 것이지만 지침은 거의 모든 Android 개발 환경으로 번역되어야 합니다. Android Studio는 아직 "베타"이지만 Glass도 마찬가지입니다. 사용을 시작하는 것을 두려워하지 마십시오. 정말 훌륭한 제품입니다. Android Studio는 여기에서 다운로드할 수 있습니다.

Google Glass 설정

좋아, 시작하자!

가장 먼저 해야 할 일은 Glass에서 디버그 모드를 활성화하는 것입니다. 익숙할 수 있도록 앱 개발에 사용하는 모든 Android 기기에서 이와 같은 작업을 수행해야 합니다. 디버그를 활성화하려면 " 설정 " -> " 장치 정보 "로 스와이프한 다음 탭하여 장치 메뉴를 엽니다. " 디버그 켜기 "를 선택하면 활성화됩니다.

다음으로 개발 환경을 준비해야 합니다. 현재 버전의 Google Glass는 API 버전 19를 사용해야 하므로 설치되어 있는지 확인하세요. 또한 Glass Development Kit가 설치되어 있어야 합니다. 아직 설치하지 않은 경우 Android SDK 관리자를 사용하여 이 두 패키지를 설치하세요.

안녕하세요 월드입니다!

이제 "유리 제품"의 첫 번째 조각을 만들어 보겠습니다. (예, Google은 다른 용어를 만들었습니다! "Glassware"는 Google Glass에서 실행되는 모든 응용 프로그램의 이름입니다). 우리는 좋은 오래된 "Hello World!"를 개발하는 것으로 시작할 것입니다. 애플리케이션. 대부분의 주요 Android 개발 환경과 마찬가지로 Android Studio는 이 유명한 문구를 표시하는 템플릿으로 새 앱을 자동으로 채웁니다. 결과적으로 "Hello World!"가 표시됩니다. 가동 및 실행은 기본적인 앱 배포의 연습일 뿐입니다.

Android Studio에서 “ New Project ”를 클릭하고 프로젝트 양식을 작성하십시오. 다음과 유사한 것을 사용할 수 있습니다.

폼 팩터 및 API를 선택할 때 " 유리 " 및 API 19를 선택해야 합니다.

시작 활동으로 " 몰입 활동 "을 선택하십시오.

Immersion과 Live Card의 차이점을 알아야 한다고 말씀드린 것을 기억하십니까? Google의 사용자 인터페이스 문서에서는 다양한 유형의 유리 화면에 대해 설명합니다. 다음은 간단한 요약입니다.

• 라이브 카드 는 Glass 타임라인에 추가되고 고주파 업데이트를 통해 무언가에 대한 실시간 정보를 표시합니다. 사용자가 다른 카드와 상호 작용할 때에도 백그라운드에서 계속 실행됩니다. 이를 통해 사용자는 다양한 실시간 정보에 지속적으로 액세스하여 멀티태스킹을 수행할 수 있습니다.

• 몰입 은 타임라인 환경 외부에서 실행되는 완전히 사용자 정의할 수 있는 화면입니다. 이를 통해 자신의 UI를 디자인하고 적합하다고 생각되는 사용자 입력을 처리할 수 있습니다. 이것이 우리가 사용할 것입니다!

마법사의 다음 화면에서 “ Name ” 및 “ Title ”에 대한 기본값을 그대로 두고 “ 마침 ”을 클릭합니다.

Gradle이 종속성을 처리하고 프로젝트를 준비했으면 Glass에 플러그를 꽂을 차례입니다. 이제 이것은 미래 지향적인 개발입니다!

모든 Android ADB 드라이버가 제자리에 있고 Glass가 시스템에서 인식된다고 가정하면 장치 목록에 Glass가 포함되어야 합니다.

장치를 컴퓨터에 처음 연결하는 경우 Glass에서 승인/신뢰 설정을 요청합니다. 유리를 탭하여 연결을 허용하면 준비가 완료됩니다.

" 실행 "을 클릭하고 "USB" 장치에서 시작하기 위한 시작 활동으로 "MainActivity"를 사용하여 "기본 APK"를 배포합니다.

몇 초 후 Glass 화면에 다음과 같은 내용이 표시됩니다.

만세! 애플리케이션이 Glass에서 실행 중입니다! 그리고 당신이 해야 할 일은 앱을 만들 때 몇 가지 기본값을 채우는 것뿐입니다!

다르게 지정하지 않았기 때문에 Glass는 "데모 표시"라는 이름으로 앱을 표시합니다. 시작 화면으로 다시 스와이프한 다음 탭하여 앱 메뉴를 열면 다음과 같은 목록이 표시됩니다.

약간의 폴란드어

자, 실행은 하고 있지만 이것은 실제 Glass 응용 프로그램처럼 보이지 않으며 "데모 표시"로 응용 프로그램이 시작되는 것을 원하지 않습니다.

이 튜토리얼에서는 실제 느낌을 얻기 위해 약간만 조정할 것입니다.

테마 설정

첫째, 이 못생긴 헤더 "Hello World Immersion" 활동 제목 표시줄로 작은 유리 화면을 차지하는 것을 원하지 않으며 화면이 검은색 글꼴로 회색으로 표시되는 것을 원하지 않습니다. 이 문제를 해결하려면 Android에서 테마를 전환하고 Glass OS에서 처리하도록 하면 됩니다.

편집을 위해 res/values/styles.xml 을 엽니다. 다음 내용이 있어야 합니다.

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

android:Theme.Holo.Light 를 android:Theme.DeviceDefault Theme.DeviceDefault 로 변경하기만 하면 됩니다. Glass 기본 테마를 사용하여 애플리케이션 레이아웃과 색상을 자동으로 처리해야 합니다.

메뉴 모양 정의

자, 이 Glass 개발 튜토리얼에서 하고 싶은 다음 작업은 적절한 이름과 멋진 음성 제어 시작을 갖도록 애플리케이션을 설정하는 것입니다. Android 매니페스트( AndroidManifest.xml )를 열고 <application… 태그 위에 다음을 추가합니다.

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

DEVELOPMENT 권한을 사용하려는 이유는 사용자 지정 음성 컨트롤로 재생할 수 있기 때문입니다. Google은 승인된 Glass 앱에서 허용되는 음성 명령에 대해 매우 엄격하며 모든 새 명령은 승인되어야 합니다. 이 튜토리얼은 학습을 위한 것이며 이 애플리케이션을 공식 Glassware 스토어에 제출하지 않을 것이므로 걱정할 필요가 없습니다. DEVELOPMENT 권한을 켜면 "목록에 없는 음성 명령"에 액세스할 수 있습니다. 이에 대한 자세한 내용은 이 GDK 페이지를 참조하십시오.

편집을 위해 voice_trigger.xml 을 엽니다. 여기에서 애플리케이션을 시작하는 음성 명령이 정의됩니다. res/xml/ 폴더에 있어야 합니다. 다음과 유사한 콘텐츠가 표시되어야 합니다.

 <trigger command="SHOW_ME_A_DEMO" />

앱을 시작하기 위해 "데모 보여줘"라고 말하는 대신 앱의 이름을 말합시다. 파일 내용을 다음과 같이 변경합니다.

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

매니페스트 파일로 돌아가면 이전과 같이 하드 코딩된 Hello Glass 값 대신 리소스 문자열 @string/app_name 도 사용하도록 android:label="@string/app_name" 이 자동으로 업데이트되었음을 ​​알 수 있습니다. . 이 설정이 업데이트되지 않은 경우 값을 android:label="@string/app_name" 으로 설정해야 합니다.

앱 이름이 정확히 무엇인가요? res/values/strings.xml 을 열면 app_name 이 다음과 같이 나열되어야 합니다.

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

이것으로 첫 Hello Glass 애플리케이션을 마무리해야 합니다. 이제 어떻게 작동하는지 봅시다!

시작 화면에서 "ok glass" 라고 말하여 음성 메뉴를 불러올 수 있습니다. 이제 애플리케이션이 음성 인식 명령 목록에 있습니다.

이 튜토리얼을 통해 현재 Glass 앱 시작 화면은 다음과 같습니다.

" Hello glass "라고 말하면 애플리케이션이 시작되고 표준화된 Glass 환경을 얻을 수 있습니다.

음성을 사용하여 애플리케이션을 활성화하고 싶지 않은 경우 시작 화면을 탭하기만 하면 메뉴에서 애플리케이션을 사용할 수 있음을 확인할 수 있습니다.

음성 또는 터치? 둘 다 사용하세요!

애플리케이션의 인터페이스와 애플리케이션과의 사용자 상호작용에 세심한 주의를 기울이는 것이 매우 중요합니다. 예를 들어 강의나 프레젠테이션을 시청하는 동안 사용자가 항상 자신의 음성을 사용할 수 있는 위치에 있는 것은 아니라는 점을 기억하십시오. 또는 손이 꽉 차서 터치를 사용할 수 없을 수도 있습니다. 가능하면 터치 및 음성 메뉴 상호 작용을 모두 제공하여 사용자가 음성 및 터치패드를 병렬로 사용하여 애플리케이션을 탐색할 수 있도록 하는 것이 좋습니다.

실제 응용 프로그램 - Toptal Finder

이제 Glass 개발에 익숙해지고 Hello Glass를 만들었습니다. 이제 새로운 Glass 기능을 사용할 실제 응용 프로그램을 만들 차례입니다. 개발 플랫폼을 기반으로 최고의 Toptal 개발자 프로필을 검색할 수 있는 앱을 빌드해 보겠습니다.

예제 Glass 애플리케이션의 구조는 다음과 같이 간단합니다.

1. 시작 화면에 음성이 포함된 Toptal 로고가 있고 활성화된 메뉴를 탭하여 개발자가 필요한 개발 플랫폼을 선택할 수 있기를 바랍니다.
2. 플랫폼을 선택한 후 사진과 이름이 포함된 개발자 목록을 얻고 싶습니다. 개발자 프로필은 스크롤 가능한 개인 카드 목록 형식으로 표시됩니다.
3. 개발자 프로필을 볼 때 즐겨찾기에 추가하거나 고용 요청을 보낼 수 있기를 원합니다.

기초

Android 지식 위에 이미 추가한 내용을 빠르게 요약해 보겠습니다.

1. Glassware를 빌드하기 위해 개발 환경을 설정하는 방법.
2. 표준 Glassware GUI 테마를 사용하도록 애플리케이션을 구성하는 방법입니다.
3. 사용자 정의 음성 명령 및 메뉴 이름을 사용하여 애플리케이션을 시작하는 방법.

이 지식을 사용하여 새 앱을 시작하고 실행하십시오. 위에서 Hello Glass 앱을 업데이트하거나 동일한 단계에 따라 새 앱을 시작할 수 있습니다. 이 응용 프로그램의 이름을 " Top Finder "로 지정하고 voice_trigger.xml 파일을 다음과 같이 만듭니다.

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

network="true" 제약 조건은 Glass에 이 앱을 시작할 때 네트워크 연결을 확인하도록 지시합니다. 이 앱은 Toptal 개발자 목록에 연결해야 합니다. 연결되어 있지 않으면 Glass에 경고 메시지가 표시됩니다.

홈 화면

애플리케이션의 홈 화면을 다음과 같이 보이도록 합시다.

화면에 "ok glass" 메시지가 표시되면 애플리케이션에 해당 위치에 음성 활성화 메뉴가 있음을 의미합니다. 여기에서 "ok glass" 라는 문구를 말하면 이 위치에 대한 음성 메뉴가 활성화됩니다. 이 문구는 Glass에서 미리 정의한 것으로 변경할 수 없습니다.

"ok glass" 는 스마트폰/태블릿 개발에서 사용한 것처럼 "응용 프로그램 메뉴"로 생각할 수 있으며 정확히 동일한 역할을 합니다. Android 애플리케이션 메뉴를 열려면 화면의 "애플리케이션 메뉴 아이콘"(종종 3개의 점 또는 선)을 "탭"하는 것처럼 Glassware 앱에서 음성 활성화 메뉴를 열려면 "ok glass" 라고 말해야 합니다.

"ok glass" 메뉴를 활성화하려면 API에서 FEATURE_VOICE_COMMANDS 를 요청해야 합니다. 이렇게 하려면 MainActivity 의 onCreate 핸들러에 다음 줄을 추가합니다.

 getWindow().requestFeature(WindowUtils.FEATURE_VOICE_COMMANDS);

이 기능이 포함된 모든 활동은 하단 중앙에 "ok glass" 텍스트로 렌더링됩니다.

다음으로 해야 할 일은 메인 화면의 메뉴를 만드는 것입니다. res/menu 폴더에서 main.xml 이라는 새 XML 메뉴 정의를 만듭니다. 일을 단순하게 하기 위해 세 가지 Toptal 개발자 플랫폼을 활성화하지만 원하는 대로 자유롭게 변경할 수 있습니다.

다음 내용이 있어야 합니다.

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

Android, JavaScript 및 iOS가 아닌 다소 긴 메뉴 제목을 선택한 이유가 궁금할 것입니다. 글쎄요, 이유는 아주 간단합니다. Glass 개발 팀의 사람들은 여전히 ​​음성 인식을 개선하고 있습니다. Glass가 더 쉽게 인식할 수 있도록 메뉴에 두세 단어를 사용하는 것이 좋습니다.

나는 이미 "ok glass" 메뉴가 표준 안드로이드 애플리케이션 메뉴와 다르지 않다고 언급했습니다. 활동에 메뉴를 첨부하는 것은 거의 동일합니다. MainActivity 에서 onCreatePanelMenu 핸들러를 재정의하고 방금 만든 기본 메뉴를 확장합니다.

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

이제 메뉴 핸들러를 추가해야 합니다. 그렇게 하기 전에 findDevelopers 라는 하나의 빈 메서드를 만듭니다. 검색을 시작하고 결과를 표시하기 위해 나중에 다시 이 문제로 돌아오겠습니다. 그런 다음 메뉴 핸들러를 재정의할 수 있습니다.

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

이제 예제 Google Glass 애플리케이션의 홈 화면을 예쁘게 만들 차례입니다. Toptal 로고를 res/drawable/logo.png 로 애플리케이션에 가져옵니다. 나는 이 이미지를 사용했다:

MainActivity 클래스에서 다음과 같이 변경합니다.

클래스 시작 시 다음 개인 변수가 선언되었는지 확인하십시오.

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

카드 레이아웃을 사용자 정의하기 위해 buildView 메소드를 변경하십시오:

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

그리고 onCreate 핸들러를 다음과 같이 변경합니다.

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

전에 말했듯이 "ok glass" 와 함께 탭 활성화 메뉴를 포함하고 싶으므로 Android 앱에서와 같이 제스처를 활성화하십시오. 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; }

그거야! 이제 앱을 시작하고 두 가지 메뉴 활성화 방법을 모두 시도할 수 있습니다. "ok glass" 라고 말하면 화면에 세 가지 메뉴 항목이 표시되고 유리를 탭하면 스크롤 가능한 메뉴가 열립니다. 메뉴 항목을 탐색하려면 앞뒤로 스와이프할 수 있습니다.

음성 메뉴는 다음과 같습니다.

제스처 메뉴는 다음과 같습니다.

메뉴 항목을 선택하면 findDevelopers 메소드가 아직 구현되지 않았기 때문에 아무 일도 일어나지 않습니다.

개발자 화면

왼쪽에 그림, 오른쪽에 텍스트, 일부 바닥글 정보가 있는 기본 Glass Card 레이아웃을 계속 사용할 것입니다. 카드 디자인 모범 사례에 대한 자세한 내용은 Google Glass 스타일 가이드를 참조하세요.

개발자 프로필은 다음과 같은 간단한 속성으로 정의됩니다.

1. 이름
2. 그림
3. 개발 플랫폼

따라서 앱에서 적절한 클래스 구조를 갖도록 합시다. java/models 폴더에 DeveloperModel.java 라는 새 클래스를 만듭니다. 우리는 이 클래스가 목록에 있는 프로필을 포함하므로 직렬화 할 수 있기를 원합니다.

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

우리는 카드가 개발자 프로필 데이터와 밀접하게 연결되기를 원합니다. 기본 CardScrollAdapter 는 데이터 모델과 관련하여 약간 일반적이기 때문에 확장하고 자체적으로 만들어야 합니다. java/adapters 폴더에 DeveloperAdapter.java 를 생성합니다.

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

우리는 검색 결과가 애플리케이션의 홈 화면에 추가되는 것을 원하지 않으므로 검색을 수행하고 결과를 표시할 새 Activity를 만들 것입니다. MainActivity 옆에 새 활동인 ResultsActivity 를 만듭니다(아마도 java/com.helloglass 에 있음).

extends Activity 하는지 확인하십시오.

다음으로 개발자 프로필 카드의 메뉴를 지정해야 합니다. 다음 내용으로 새 메뉴 developer.xml 을 만듭니다.

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

ResultsActivity 와 MainActivity 사이에 매개변수 전달을 활성화하려면 ResultsActivity 클래스 시작 부분에 다음 줄을 추가합니다.

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

매니페스트 파일에 새 활동을 추가해야 합니다.

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

ResultsActivity 의 초기 화면을 설정하고 카드를 구성하는 것은 MainActivity 에서 한 것과 매우 유사합니다. 먼저 처음에 카드와 스크롤러가 정의되어 있는지 확인하십시오.

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

나중에 구현하기 위해 다시 돌아올 임시 검색 방법을 만듭니다. 프로필 목록에 새 카드를 추가하는 것은 배열에 항목을 추가하는 것만큼 간단합니다. 이 메서드의 이름도 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); }

이제 MainActivity 로 돌아가서 거기에서 findDevelopers 를 업데이트하여 ResultsActivity 를 시작하고 platform 속성을 전달하세요.

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

개발자 메뉴를 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); }

이전과 마찬가지로 ResultsActivity 가 표시될 때 Glass의 터치패드를 처리하도록 제스처를 활성화합니다. 그렇게 하려면 onGesture(Gesture gesture) 메서드에서 openOptionsMenu() 를 호출하면 됩니다.

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

또한 개발자 관련 작업에 메뉴 핸들러를 추가합니다. 지금은 간단한 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); }

모든 애플리케이션은 멋진 시각적 요소, 아이콘 등을 사용해야 합니다. Google Glass 팀은 Glass 개발자가 애플리케이션에서 무료로 사용할 수 있는 매우 큰 공통 표준화 아이콘 세트를 제공했습니다. 라이브러리에서 전체 표준 Glass 아이콘과 글꼴을 찾을 수 있습니다.

지금은 하나의 아이콘 ic_person_50.png 만 필요하므로 res\drawable 폴더에 다운로드하세요. 개발자 사진을 다운로드하는 대신 이 아이콘을 사용합니다.

현재 Glass 앱 개발 튜토리얼에 남아 있는 마지막 것은 ResultsActivity 에서 onCreate 핸들러를 재정의하는 것입니다. 여기서 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<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); }

onResume 및 onPause 메소드를 MainActivity 에서와 동일하게 둘 수 있습니다.

지금 애플리케이션을 시작하면 MainActivity 에서 선택한 메뉴를 기반으로 개발자 프로필이 어떻게 생성되는지 즉시 확인할 수 있습니다. 다시 말하지만 "ok glass" 를 사용하거나 터치패드를 탭하거나 음성 활성화를 사용하여 메뉴를 표시할 수 있는 옵션이 있습니다. 현재 "10번째 Android 개발자" 프로필은 다음과 같습니다.

탭하면 터치 메뉴가 나타납니다.

"ok glass" 라고 말하면 음성 메뉴가 나타납니다.

목록에서 아래로 스와이프하여 앱의 홈 화면으로 돌아갑니다.

인터넷에서 프로필 가져오기

마무리를 위해 JavaScript, Android 및 iOS용 Toptal 상위 10개 개발자에 대한 실제 정보로 메뉴를 채우겠습니다.

프로필 사진을 다운로드하여 HTTP를 통해 사용할 수 있도록 하거나 toptal.com에서 직접 URL을 사용해야 합니다.

Toptal에서 최고 개발자의 이름을 얻기 위해 웹 크롤러를 구축하는 것은 이 기사에서 너무 많은 우회 작업일 수 있으므로 Android, JavaScript 및 iOS에서 사용할 JSON 파일을 만들었습니다.

앱에서 가장 먼저 해야 할 일은 Android OS에서 인터넷 액세스를 요청하는 것입니다. 매니페스트 파일에 다음 줄을 추가하십시오.

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

Glass에서는 HTTP 요청을 직접 사용하여 기본 스레드를 차단할 수 없습니다. 비동기 방식으로 JSON 다운로드 및 개별 이미지를 처리해야 합니다. 비동기 작업을 사용하거나, 고유한 다운로드 서비스나 인텐트를 생성하거나, 일상 업무에서 선호하는 모든 것을 사용할 수 있습니다.

이 기능을 구축하는 것은 Google Glass에만 해당되는 것이 아니므로 코드 스니펫을 건너뛰겠습니다. 앞으로 나아가 이 마지막 기능이 작동하도록 하면 프로필 카드가 다음과 같아야 합니다.

튜토리얼 마무리

이 Google Glass 개발 자습서를 따르고 첫 번째 Glassware 애플리케이션을 구축하는 데 재미를 느끼셨기를 바랍니다. 지금쯤이면 Glass용 애플리케이션을 작성하는 것이 다른 Android 플랫폼과 크게 다르지 않다는 생각에 익숙해질 것입니다.

이 시점에서 Google Glass 음성 활성화 홈 화면을 확장하는 방법, 음성 활성화 메뉴를 직접 만드는 방법, 음성 컨트롤을 터치 제스처와 결합하는 방법을 배웠습니다. 또한 카드, 레이아웃 및 요소와 같은 Glass UI의 개념과 기본 빌딩 블록을 이해해야 합니다. 카드를 동적으로 생성하는 방법과 다양한 활동 사이를 탐색하는 방법을 살펴보았습니다.

더 자세히 알아보려면 developer.google.com/glass의 Google 개발자 리소스로 이동하세요. 더 복잡한 애플리케이션을 구축하기 시작하면 매우 유용한 리소스가 될 것입니다.

Glass는 아직 개발 단계에 있으며 소비자 시장에 출시되기 전에 구현해야 할 더 많은 개선 사항이 있을 수 있습니다. 이를 염두에 두고 한 가지 중요한 메모가 있습니다.

음성 인식에 대한 작업이 상당히 많이 남아 있으며 활동을 시작하거나 정보를 입력하려고 하는 동안 가상의 친구에게 소리를 지르는 자신을 발견할 수 있습니다. 걱정하지 마세요. Google Glass 개발을 시도하는 모든 사람이 같은 생각을 하므로 혼자가 아닙니다.

기술이 향상되고 유리가 곧 소매될 준비가 될 것입니다. 출시되면 큰 파장을 일으킬 것이 확실하므로 이 흥미진진한 기술의 최전선에 첫 번째로 선 사람이 되는 것만큼 여러분도 흥분되기를 바랍니다!

Shout Out : 이 기사의 스크린샷은 Droid@Screen을 사용하여 만들어졌습니다.