Tutorial untuk Calon Pengembang Google Glass: Membangun Aplikasi Glass Pertama Anda

Google Glass adalah teknologi futuristik yang menjanjikan untuk merevolusi cara kita menggunakan perangkat untuk berinteraksi dengan dunia. Tapi dari sudut pandang pengembang, apa yang istimewa dari pengembangan untuk kaca? Jawabannya adalah "Tidak ada!" Faktanya, dari sudut pandang pengembang Android yang berpengalaman, Google Glass hanyalah perangkat Android lain dengan layar yang sangat kecil dan fitur yang terbatas!

Fakta bahwa siapa pun yang memiliki pengetahuan pengembangan Android dapat menjadi anggota komunitas "elit" dari penginjil teknologi wearable futuristik ini adalah bagian dari apa yang membuat Google Glass begitu mengagumkan. Tentu, Anda perlu mempelajari beberapa hal baru, seperti perbedaan antara "Immersion" dan "Active Card", tetapi seperti yang akan Anda lihat, kurva pembelajarannya tidak curam.

Tujuan dari tutorial Google Glass ini adalah untuk meletakkan dasar untuk mengembangkan aplikasi Glass apa pun, melalui pembuatan aplikasi sederhana yang mencakup semua langkah umum. Tujuan saya adalah untuk menghemat waktu Anda dalam penelitian dan trial-and-error, dan memungkinkan Anda untuk menjalankan aplikasi Glass pertama Anda sesegera mungkin.

Dalam tutorial ini pertama-tama kita akan membahas cara menyiapkan lingkungan pengembangan Anda dan menghubungkan Google Glass ke komputer Anda. Kemudian kita akan membuat aplikasi Glass "Hello World" sederhana yang akan menyertakan perintah suara khusus dan integrasi dengan menu mulai Glass. Setelah aplikasi pertama Anda dikembangkan dan dijalankan di Glass, Anda akan mempelajari dasar-dasar navigasi di aplikasi Glass, menu yang diaktifkan dengan suara, dan pembuatan konten dinamis.

Bagaimana cara bergabung?

Glass masih dalam semacam fase "pengujian beta", di mana Google telah menemukan istilah "Program Penjelajah". Apa pun namanya, Glass bukanlah sesuatu yang bisa Anda dapatkan di toko seperti smartphone. Sayangnya, alat pengembangan Android masih belum memiliki emulator yang dapat Anda gunakan untuk mengembangkan aplikasi Anda tanpa perangkat keras yang sebenarnya.

Jadi, untuk menjalankan dan men-debug aplikasi Anda, Anda harus mendapatkan Google Glass yang sebenarnya melalui Program Explorer. Untuk bergabung dengan program, kunjungi halaman pendaftaran dan daftar untuk mendapatkan akses. Setelah disetujui, siapkan kartu kredit Anda dan tunggu gelas Anda dikirim. Versi Explorer dari Glass saat ini berharga $ 1.500 USD, tetapi harganya diperkirakan akan turun secara signifikan sebelum perangkat tersebut masuk ke toko.

Untuk yang Tanpa Kaca

Karena kurangnya emulator, Anda harus memiliki perangkat keras Google Glass yang sebenarnya untuk mengembangkan aplikasi dalam tutorial ini (atau aplikasi Glass apa pun), tetapi jika mendapatkannya di luar anggaran Anda, jangan berkecil hati - itu akan layak untuk diikuti. Apa yang akan menjadi jelas dalam tutorial ini adalah bahwa pengembangan untuk Glass hampir sama dengan pengembangan untuk platform Android lainnya!

Jika Anda masih belum menggunakan Google Glass, tetapi sama bersemangatnya dengan saya, lihat dua video ini karena mereka akan memberi Anda masukan yang cukup untuk memahami dasar-dasar antarmuka pengguna.

• Pengantar Google Glass
• Cara Google Glass: Memulai

Ada video yang lebih berguna untuk pengaturan dan navigasi di sini, dan lebih banyak detail tentang antarmuka pengguna di sini.

Aturan Keterlibatan

Tutorial pengembang Google Glass ini membuat asumsi berikut:

• Saya berasumsi bahwa Anda memahami dasar-dasar navigasi dan pengaturan Glass. Jika Anda belum pernah menggunakan Glass, lihat video yang ditautkan di atas.
• Saya berasumsi bahwa Anda memahami dasar-dasar pengembangan Android: struktur file proyek, konfigurasi aplikasi Android, dll.
• Saya akan menggunakan Android Studio, tetapi instruksinya harus diterjemahkan ke hampir semua lingkungan pengembangan Android. Android Studio masih dalam "beta", tetapi begitu juga Glass. Jangan takut untuk mulai menggunakannya - ini benar-benar produk yang hebat. Android Studio tersedia untuk diunduh di sini.

Menyiapkan Google Glass Anda

Baiklah, mari kita mulai!

Hal pertama yang perlu Anda lakukan adalah mengaktifkan mode debug di Glass Anda. Anda harus melakukan sesuatu seperti ini di setiap perangkat Android yang Anda gunakan untuk mengembangkan aplikasi Anda, jadi ini mungkin sudah biasa. Untuk mengaktifkan debug, geser ke “ Pengaturan ” -> “ Info perangkat ” lalu ketuk untuk membuka menu perangkat. Pilih " Nyalakan debug " dan itu akan diaktifkan.

Selanjutnya, Anda perlu menyiapkan lingkungan pengembangan Anda. Versi Google Glass saat ini mengharuskan Anda menggunakan API versi 19, jadi pastikan itu diinstal. Selain itu, Anda harus memasang Kit Pengembangan Kaca. Gunakan Android SDK Manager Anda untuk menginstal kedua paket ini jika Anda belum melakukannya.

Halo Dunia!

Jadi mari kita buat bagian pertama dari "Glassware". (Ya, Google telah menciptakan istilah lain! "Glassware" adalah nama untuk aplikasi apa pun yang berjalan di Google Glass). Kita akan mulai dengan mengembangkan “Hello World!” lama yang bagus. aplikasi. Seperti kebanyakan lingkungan pengembangan Android utama, Android Studio secara otomatis mengisi aplikasi baru dengan template untuk menampilkan frasa terkenal ini. Akibatnya, mendapatkan "Halo Dunia!" dan menjalankan hanyalah latihan dalam penerapan aplikasi mendasar.

Di Android Studio, klik “ Proyek Baru ” dan isi formulir proyek. Anda dapat menggunakan sesuatu yang mirip dengan ini:

Saat memilih faktor bentuk dan API pastikan untuk memilih " Kaca " dan API 19

Pilih “ Immersion Activity ” sebagai aktivitas startup Anda.

Anda ingat saya menyebutkan bahwa Anda perlu mempelajari perbedaan antara Immersion dan Live Card? Artikel Antarmuka Pengguna Google menjelaskan berbagai jenis layar Kaca. Berikut ringkasan singkatnya:

• Kartu langsung ditambahkan ke garis waktu Glass dan menampilkan informasi waktu nyata tentang sesuatu melalui pembaruan frekuensi tinggi. Mereka terus berjalan di latar belakang bahkan ketika pengguna berinteraksi dengan kartu yang berbeda. Hal ini memungkinkan pengguna untuk melakukan banyak tugas dengan akses konstan ke berbagai jenis informasi real-time.

• Perendaman adalah layar yang sepenuhnya dapat disesuaikan yang berjalan di luar pengalaman linimasa. Ini memungkinkan Anda untuk merancang UI Anda sendiri dan memproses input pengguna sesuai keinginan Anda. Ini yang akan kita gunakan!

Di layar wizard berikutnya, biarkan nilai default untuk " Name " dan " Title " dan klik " Finish ".

Setelah Gradle menangani dependensi Anda dan menyiapkan proyek Anda, saatnya untuk memasangnya di Glass. Sekarang ini adalah pengembangan futuristik!

Dengan asumsi bahwa semua driver ADB Android Anda ada di tempatnya dan Glass Anda dikenali oleh sistem Anda, Anda harus memasukkan Glass ke dalam daftar perangkat Anda.

Jika ini adalah pertama kalinya Anda menghubungkan perangkat Anda ke komputer, Glass Anda akan meminta persetujuan/kepercayaan untuk didirikan. Cukup ketuk gelas Anda untuk memungkinkan koneksi dan Anda harus siap.

Klik " Jalankan " dan gunakan "APK Default" Anda dengan "MainActivity" sebagai aktivitas startup untuk diluncurkan pada perangkat "USB".

Setelah beberapa detik, Anda akan melihat sesuatu seperti ini di layar Kaca Anda:

Hore! Aplikasi Anda berjalan di Glass! Dan yang harus Anda lakukan hanyalah mengisi beberapa nilai default saat Anda membuat aplikasi!

Karena kami tidak menentukan secara berbeda, Glass akan menampilkan aplikasi Anda dengan nama "Tampilkan demo". Jika Anda menggesek kembali ke layar Mulai dan kemudian mengetuk untuk membuka menu aplikasi, Anda akan melihatnya terdaftar seperti ini:

Sedikit Polandia

Oke, Anda menjalankannya, tetapi ini tidak terlihat seperti aplikasi Glass asli, dan Anda tidak ingin aplikasi dimulai dengan "Tampilkan demo".

Dalam tutorial ini kita hanya akan mengubahnya sedikit untuk mendapatkan perasaan yang sebenarnya.

Mengatur Tema

Pertama, Anda tidak ingin mengambil salah satu layar Kaca kecil Anda dengan bilah judul aktivitas "Hello World Immersion" yang jelek ini, dan Anda pasti tidak ingin layar Anda menjadi abu-abu dengan font hitam. Untuk memperbaikinya, kita hanya perlu mengganti tema di Android kita dan membiarkan Glass OS menanganinya.

Buka res/values/styles.xml untuk mengedit. Itu harus memiliki konten berikut:

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

Cukup ubah android:Theme.Holo.Light menjadi android:Theme.DeviceDefault . Ini akan menangani tata letak dan warna aplikasi secara otomatis, menggunakan tema default Kaca.

Menentukan Tampilan Menu

Ok, hal berikutnya yang ingin kita lakukan dalam tutorial pengembangan Glass ini adalah menyiapkan aplikasi kita untuk memiliki nama yang tepat dan startup yang dikontrol suara yang bagus. Buka Android Manifest ( AndroidManifest.xml ) Anda dan tambahkan tag <application… berikut di atas:

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

Alasan Anda ingin menggunakan izin DEVELOPMENT adalah agar Anda dapat bermain dengan kontrol suara khusus. Google cukup ketat tentang perintah suara mana yang diizinkan di aplikasi Glass yang disetujui, dan semua perintah baru harus disetujui. Karena tutorial ini untuk tujuan pembelajaran dan Anda tidak akan mengirimkan aplikasi ini ke toko Glassware resmi, Anda tidak perlu khawatir. Cukup aktifkan izin DEVELOPMENT dan Anda akan memiliki akses ke "perintah suara tidak terdaftar". Untuk informasi lebih lanjut tentang ini, silakan baca halaman SDK ini.

Buka voice_trigger.xml untuk mengedit. Di sinilah perintah suara untuk memulai aplikasi Anda ditentukan. Itu harus terletak di folder res/xml/ . Anda harus mendapatkan konten yang mirip dengan ini:

 <trigger command="SHOW_ME_A_DEMO" />

Alih-alih mengatakan "Tunjukkan demo" untuk memulai aplikasi kita, katakan saja nama aplikasinya. Ubah isi file menjadi:

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

Jika Anda kembali ke file manifes, Anda mungkin memperhatikan bahwa android:label="@string/app_name" Anda telah diperbarui secara otomatis untuk juga menggunakan string sumber daya @string/app_name alih-alih nilai Hello Glass yang dikodekan secara keras seperti sebelumnya . Jika setelan ini tidak diperbarui, pastikan untuk menyetel nilainya ke android:label="@string/app_name" .

Dan apa nama aplikasi Anda, tepatnya? Jika Anda membuka res/values/strings.xml , app_name Anda harus terdaftar sebagai:

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

Ini harus menyelesaikan hal-hal untuk aplikasi Hello Glass pertama Anda. Mari kita lihat cara kerjanya sekarang!

Dari layar Mulai Anda, Anda dapat mengatakan "ok kaca" untuk membuka menu suara. Aplikasi Anda sekarang ada dalam daftar perintah yang diaktifkan dengan suara.

Dengan tutorial ini untuk memandu Anda, seperti inilah tampilan layar mulai aplikasi Glass Anda sekarang.

Jika Anda mengatakan " Halo kaca " aplikasi Anda harus dimulai dan Anda harus mendapatkan pengalaman Kaca standar:

Jika Anda tidak ingin menggunakan suara Anda untuk mengaktifkan aplikasi, Anda cukup mengetuk layar Mulai dan Anda akan melihat bahwa aplikasi Anda tersedia di menu:

Suara atau Sentuhan? Gunakan Keduanya!

Sangat penting bagi Anda untuk memperhatikan antarmuka aplikasi Anda dan interaksi pengguna Anda dengannya. Ingatlah bahwa pengguna Anda tidak selalu dalam posisi untuk menggunakan suara mereka - misalnya, saat menonton kuliah atau presentasi. Atau, mereka mungkin memiliki tangan yang penuh dan tidak dapat menggunakan sentuhan. Saya menyarankan agar Anda menyediakan interaksi menu sentuh dan suara bila memungkinkan, memungkinkan pengguna Anda untuk menavigasi melalui aplikasi Anda menggunakan suara dan touchpad secara paralel.

Aplikasi Nyata - Pencari Toptal

Sekarang setelah Anda merasa nyaman dengan pengembangan Glass, dan Anda telah membuat Hello Glass, sekarang saatnya untuk membuat aplikasi nyata yang akan menjalankan fitur-fitur Glass baru. Mari buat aplikasi yang memungkinkan Anda menelusuri profil pengembang Toptal teratas berdasarkan platform pengembangan.

Struktur contoh aplikasi Glass kami akan sederhana:

1. Kami ingin layar awal kami memiliki logo Toptal dengan menu suara dan ketuk yang diaktifkan yang memungkinkan kami memilih platform pengembangan yang kami butuhkan untuk pengembang.
2. Setelah memilih platform, kami ingin mendapatkan daftar pengembang dengan gambar dan nama mereka. Profil pengembang akan disajikan dalam bentuk daftar kartu pribadi yang dapat digulir.
3. Saat melihat profil pengembang, kami ingin dapat menambahkannya ke favorit atau mengirim permintaan untuk disewa.

Dasar

Mari kita rekap dengan cepat apa yang telah Anda tambahkan selain pengetahuan Android Anda:

1. Cara menyiapkan lingkungan pengembangan Anda untuk membangun Glassware.
2. Cara mengonfigurasi aplikasi Anda untuk menggunakan tema GUI Glassware standar.
3. Cara memulai aplikasi Anda menggunakan perintah suara khusus dan nama menu.

Dengan menggunakan pengetahuan ini, siapkan dan jalankan aplikasi baru Anda. Anda dapat memperbarui aplikasi Hello Glass dari atas, atau memulai aplikasi baru dengan mengikuti langkah-langkah yang sama. Beri nama aplikasi ini " Pencari Teratas ", dan buat file voice_trigger.xml Anda terlihat seperti ini.

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

Batasan network="true" memberi tahu kaca untuk memeriksa konektivitas jaringan saat memulai aplikasi ini, yang perlu kita sambungkan ke daftar pengembang Toptal. Jika tidak ada koneksi, Glass akan menampilkan pesan peringatan.

Tampilan depan

Mari kita buat layar beranda aplikasi kita terlihat seperti ini:

Ketika Anda melihat pesan "kaca ok" di layar Anda, itu berarti aplikasi memiliki menu yang diaktifkan suara di tempat itu. Mengucapkan frasa "ok kaca" di sini mengaktifkan menu suara untuk lokasi ini. Frasa ini telah ditentukan sebelumnya oleh Glass dan Anda tidak dapat mengubahnya.

Anda dapat menganggap "ok kaca" sebagai "menu aplikasi", seperti yang Anda gunakan dalam pengembangan ponsel cerdas/tablet Anda, dan memiliki peran yang persis sama. Saat Anda akan "mengetuk" "ikon menu Aplikasi" di layar Anda (seringkali 3 titik atau garis) untuk membuka menu aplikasi Android, Anda perlu mengatakan "ok kaca" untuk membuka menu yang diaktifkan suara di aplikasi Glassware Anda.

Untuk mengaktifkan menu "kaca ok" Anda perlu meminta FEATURE_VOICE_COMMANDS dari API. Untuk melakukan ini, tambahkan baris berikut di handler onCreate Anda di MainActivity Anda :

 getWindow().requestFeature(WindowUtils.FEATURE_VOICE_COMMANDS);

Setiap aktivitas yang memiliki fitur ini akan dirender dengan teks "ok kaca" di tengah bawah.

Hal berikutnya yang perlu Anda lakukan adalah membuat menu untuk layar utama. Di folder res/menu Anda buat definisi menu XML baru bernama main.xml . Untuk mempermudah, kami hanya akan mengaktifkan tiga platform pengembang Toptal, tetapi jangan ragu untuk membuat perubahan sesuka Anda.

Itu harus memiliki konten berikut:

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

Anda mungkin bertanya-tanya mengapa saya memilih judul menu yang agak panjang daripada hanya Android, JavaScript, dan iOS. Nah, alasannya sangat sederhana. Orang-orang dari tim pengembangan Glass masih meningkatkan pengenalan suara. Disarankan untuk berlatih menggunakan dua atau tiga kata dalam menu Anda sehingga Glass akan lebih mudah mengenalinya.

Saya sudah menyebutkan bahwa menu “ok kaca” tidak berbeda dengan menu aplikasi Android standar Anda. Melampirkan menu ke aktivitas praktis sama. Ganti saja handler onCreatePanelMenu di MainActivity Anda, dan kembangkan menu utama yang baru saja Anda buat:

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

Sekarang kita perlu menambahkan menu handler. Sebelum Anda melakukannya, buat satu metode kosong bernama findDevelopers . Kami akan kembali lagi nanti untuk memulai pencarian dan menunjukkan hasilnya. Setelah itu Anda dapat mengganti penangan menu Anda.

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

Sekarang saatnya membuat contoh layar beranda aplikasi Google Glass kita menjadi cantik. Impor logo Toptal ke dalam aplikasi Anda sebagai res/drawable/logo.png . Saya menggunakan gambar ini:

Di kelas MainActivity Anda, buat perubahan berikut.

Pastikan variabel privat berikut dideklarasikan di awal kelas:

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

Ubah metode buildView untuk menyesuaikan tata letak Kartu:

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

Dan ubah handler onCreate Anda menjadi seperti ini:

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

Seperti yang saya katakan sebelumnya, kami ingin menyertakan menu yang diaktifkan dengan ketukan bersama dengan "kaca ok" , jadi cukup aktifkan gerakan seperti yang Anda lakukan di aplikasi Android Anda. Tambahkan metode berikut di kelas MainActivity Anda:

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

Itu harusnya! Anda sekarang dapat memulai aplikasi Anda dan mencoba kedua metode aktivasi menu. Jika Anda mengatakan "ok kaca" , Anda mendapatkan tiga item menu yang ditampilkan di layar, dan jika Anda mengetuk kaca, menu yang dapat digulir akan dibuka. Untuk menavigasi item menu, Anda dapat menggesek ke belakang dan ke depan.

Berikut tampilan menu suara:

Dan inilah menu gerakan:

Jika Anda memilih item menu, tidak akan terjadi apa-apa karena metode findDevelopers Anda belum diterapkan.

Layar Pengembang

Kami akan terus menggunakan tata letak Kartu Kaca default, dengan gambar di sisi kiri, teks di kanan, dan beberapa informasi footer. Untuk informasi lebih lanjut tentang praktik terbaik untuk mendesain kartu Anda, lihat panduan gaya Google Glass.

Profil pengembang kami ditentukan oleh properti sederhana:

1. Nama
2. Gambar
3. Platform pengembangan

Jadi, mari pastikan untuk memiliki struktur kelas yang tepat di aplikasi kita. Buat kelas baru bernama DeveloperModel.java di folder java/models Anda. Kami ingin kelas ini menjadi serial, karena akan berisi profil yang ada dalam daftar.

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

Kami ingin kartu kami terikat erat dengan data profil pengembang kami. Karena CardScrollAdapter default agak generik dalam hal model datanya, kita perlu memperluasnya dan menjadikannya milik kita sendiri. Buat DeveloperAdapter.java di folder java/adapters Anda:

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

Kami tidak ingin hasil pencarian kami ditambahkan di layar beranda aplikasi, jadi kami akan membuat Aktivitas baru yang akan melakukan pencarian dan menampilkan hasil. Buat aktivitas baru, ResultsActivity , di sebelah MainActivity Anda (mungkin di java/com.helloglass ).

Pastikan itu extends Activity .

Selanjutnya, kita perlu menentukan menu untuk kartu profil pengembang kita. Buat menu baru, developer.xml , dengan konten berikut:

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

Untuk mengaktifkan parameter yang lewat antara ResultsActivity dan MainActivity tambahkan baris berikut di awal kelas ResultsActivity :

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

Pastikan untuk menambahkan aktivitas baru Anda ke file manifes Anda:

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

Menyiapkan layar awal ResultsActivity dan mengonfigurasi kartu sangat mirip dengan yang kami lakukan di MainActivity . Pertama, periksa apakah Anda memiliki kartu dan penggulung yang ditentukan di awal:

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

Buat metode pencarian sementara yang akan kita kembalikan nanti untuk diterapkan. Menambahkan kartu baru ke daftar profil semudah menambahkan item ke Array. Kami akan memberi nama metode ini findDevelopers juga, tetapi yang ini milik 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); }

Sekarang kembali ke MainActivity Anda dan perbarui findDevelopers di sana untuk memulai ResultsActivity Anda dan meneruskan properti platform :

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

Lampirkan menu pengembang Anda ke ResultsActivity . Anda akan dapat membuka menu di kartu profil apa pun.

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

Sama seperti sebelumnya, aktifkan gerakan untuk menangani touchpad di Glass Anda saat ResultsActivity ditampilkan. Untuk melakukannya, panggil saja openOptionsMenu() dalam onGesture(Gesture gesture) Anda:

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

Juga, tambahkan pengendali menu ke tindakan terkait pengembang. Kami akan meninggalkan pesan Toast sederhana untuk saat ini.

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

Setiap aplikasi harus menggunakan beberapa elemen visual yang bagus, ikon, dll. Tim Google Glass telah menyediakan sekumpulan besar ikon standar umum yang gratis untuk digunakan oleh pengembang Glass dalam aplikasi mereka. Anda dapat menemukan set lengkap ikon Kaca standar serta font di perpustakaan mereka

Untuk saat ini, Anda hanya memerlukan satu ikon ic_person_50.png , jadi lanjutkan dan unduh ke folder res\drawable Anda. Kami akan menggunakan ikon ini alih-alih mengunduh gambar pengembang.

Hal terakhir yang tersisa dalam tutorial pengembangan aplikasi Glass kami untuk saat ini adalah mengganti handler onCreate kami di ResultsActivity , di mana kami akan memeriksa platform pengembangan mana yang diteruskan dari MainActivity dan mengisi daftar kami.

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

Anda dapat membiarkan metode onResume dan onPause sama seperti di MainActivity Anda.

Jika Anda memulai aplikasi sekarang, Anda dapat memeriksa bagaimana profil pengembang Anda dibuat dengan cepat berdasarkan menu yang dipilih di MainActivity . Sekali lagi, Anda memiliki opsi untuk menampilkan menu Anda menggunakan "kaca ok" atau dengan mengetuk touchpad atau dengan menggunakan aktivasi suara. Berikut tampilan profil “10th Android developer” saat ini:

Mengetuk menampilkan menu sentuh:

Dan mengatakan "ok kaca" menampilkan menu suara:

Gesek ke bawah dari daftar untuk kembali ke layar beranda aplikasi Anda.

Mendapatkan Profil dari Internet

Untuk menyelesaikannya, mari isi menu dengan informasi nyata untuk 10 pengembang Toptal teratas untuk JavaScript, Android, dan iOS.

Anda perlu mengunduh gambar profil mereka dan membuatnya tersedia melalui HTTP, atau cukup gunakan URL langsung dari toptal.com.

Karena membangun perayap web hanya untuk mendapatkan nama pengembang top di Toptal mungkin terlalu banyak jalan memutar untuk artikel ini, saya telah membuat file JSON untuk Anda gunakan untuk Android, JavaScript, dan iOS.

Di aplikasi Anda, hal pertama yang perlu Anda lakukan adalah meminta akses ke internet dari OS Android Anda. Tambahkan baris berikut ke file Manifest Anda

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

Ketahuilah bahwa Glass tidak akan mengizinkan Anda memblokir utas utama dengan menggunakan permintaan HTTP secara langsung. Anda harus menangani unduhan JSON dan gambar individual dengan cara yang tidak sinkron. Anda dapat menggunakan tugas asinkron, membuat layanan atau maksud unduhan Anda sendiri, atau apa pun yang Anda inginkan dalam pekerjaan sehari-hari.

Membangun fungsi ini tidak khusus untuk Google Glass, jadi saya akan melewatkan cuplikan kode. Jika Anda terus maju dan menjalankan fungsi terakhir ini, kartu profil Anda akan terlihat seperti ini:

Penutup Tutorial

Saya harap Anda bersenang-senang mengikuti tutorial pengembangan Google Glass ini dan membuat aplikasi Glassware pertama Anda. Sekarang, Anda seharusnya sudah nyaman dengan gagasan bahwa menulis aplikasi untuk Glass tidak jauh berbeda dari platform Android lainnya.

Pada titik ini, Anda telah mempelajari cara memperluas Layar Beranda yang diaktifkan suara Google Glass, cara membuat menu yang diaktifkan suara Anda sendiri, dan cara menggabungkan kontrol suara dengan gerakan sentuh. Anda juga harus memahami konsep dan blok penyusun dasar untuk Glass UI, seperti kartu, tata letak, dan elemen. Anda telah melihat cara membuat kartu secara dinamis dan cara menavigasi di antara berbagai aktivitas.

Untuk menyelam lebih dalam, buka sumber daya pengembang Google di developers.google.com/glass. Ketika Anda mulai membangun aplikasi yang lebih kompleks, itu akan terbukti menjadi sumber yang sangat membantu.

Harap diingat bahwa Glass masih dalam tahap pengembangan dan kemungkinan masih banyak penyempurnaan lain yang harus diterapkan sebelum sampai ke pasar konsumen. Dengan mengingat hal ini, saya punya satu catatan penting untuk Anda:

Ada cukup banyak pekerjaan yang tersisa pada pengenalan suara dan Anda mungkin mendapati diri Anda meneriaki teman imajiner Anda ketika mencoba memulai aktivitas Anda atau mengisi beberapa informasi. Jangan khawatir - semua orang yang mencoba pengembangan Google Glass merasakan hal yang sama, jadi Anda tidak sendirian.

Teknologi akan meningkat, dan kaca akan siap untuk ritel dalam waktu singkat. Ini pasti akan membuat gelombang besar begitu tiba di toko, jadi saya harap Anda sama bersemangatnya dengan saya tentang menjadi salah satu yang pertama menjadi yang terdepan dalam teknologi yang menarik ini!

Shout Out : Screenshot dalam artikel ini dibuat menggunakan Droid@Screen.