Tutorial Mirror API: Google Glass untuk Pengembang Web

Perangkat Android tentu saja mengambil alih dunia. Ribuan smartphone, tablet, smart-tvs, dan banyak perangkat lainnya didukung oleh platform open source Google. Selain itu, insentif komputasi Google yang dapat dipakai mendorong dunia ke tingkat yang sama sekali baru. Google Glass adalah perangkat yang sangat dekat dengan perubahan cara kita berinteraksi dengan teknologi. Untuk waktu yang sangat lama, kami berjalan dengan kepala tertunduk, menatap layar ponsel kecil kami. Google Glass membantu kami mengangkat kepala dan berjalan dengan bangga saat berinteraksi dengan teknologi perangkat kami yang dapat dikenakan.

Pada awalnya, pengembangan Android hanya terbatas pada pengembang yang memiliki pengetahuan Java. Komunitas besar pengembang sedang membangun aplikasi web yang hebat menggunakan platform lain, dan mengalami kesulitan yang luas dalam mengadopsi pengembangan Android. Ada beberapa pendekatan yang berkembang kemudian dan menyediakan semacam pengembangan lintas platform, memberdayakan pengembang web yang cerdas untuk mulai membangun aplikasi untuk Android tanpa pengetahuan Java dan Android SDK. Namun, bukankah bagus untuk mengembangkan Google Glass tanpa mempelajari bahasa pemrograman baru, dan bahkan hanya dengan menggunakan pengetahuan umum untuk pengembang web? Ya, itu mungkin!

Google menyediakan layanan RESTful berbasis cloud yang memungkinkan pengembang web membangun Glassware, hanya dengan berinteraksi dengan layanan web yang dihosting dan dikelola oleh Google. Layanan ini diberi nama Mirror API, dan independen pada platform pengembangan. Untuk mulai menggunakan Glass's Mirror API, Anda bahkan tidak harus memiliki perangkat Google Glass, meskipun beberapa fitur lanjutan mengharuskan Anda memilikinya.

Hanya ada dua hal yang perlu Anda ketahui:

• Jalankan permintaan OAuth 2.0 dan dapatkan Token Otentikasi
• Jalankan permintaan HTTP ke titik akhir yang telah ditentukan

Tutorial pengembangan Google Glass ini akan memperkenalkan Anda pada teknik yang dapat Anda gunakan untuk membangun aplikasi untuk Glass.

Jika Anda masih belum menggunakan Google Glass, lihat dua video ini, karena keduanya akan memberi Anda informasi 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.

Ada banyak perbedaan antara Mirror API dan pengembangan Google Glass asli. Tujuan dari tutorial ini bukan untuk memperdebatkan perbedaan ini, tetapi untuk memberikan wawasan kepada pengembang web tentang cara kerja Google Glass, dan bagaimana mereka bisa bergabung sesegera mungkin.

Bagaimana Cara Kerja Mirror API?

Hal pertama dan terpenting adalah Anda sedang membangun aplikasi web standar. Aplikasi Anda akan berjalan di server web dan tidak akan pernah berinteraksi langsung dengan perangkat Google Glass. Sebagai gantinya, aplikasi Anda akan berinteraksi dengan layanan Mirror API. Aplikasi berbasis Mirror API tidak memerlukan instalasi apa pun di Glass itu sendiri, dan semua layanan sudah menjadi bagian dari Glass OS.

Perangkat Google Glass akan menjalankan layanan sinkronisasinya sendiri untuk mendorong atau menarik konten kembali ke aplikasi Anda melalui Mirror API.

Anda tidak dapat memengaruhi frekuensi saat Google Glass memeriksa pembaruan di Mirror API, dan memiliki "orang tengah" memiliki biaya. Konsekuensi langsung dari arsitektur ini adalah Anda tidak dapat berinteraksi secara real-time dengan pengguna Glass. Anda harus selalu mengharapkan penundaan antara permintaan Anda untuk suatu tindakan, dan peristiwa sebenarnya yang sedang dieksekusi pada perangkat Glass.

Pengaturan dan Otentikasi

Untuk menggunakan Mirror API untuk pengembangan web, Anda perlu menentukan identitas aplikasi di Google Developers Console. Buka konsol Google API dan masuk dengan akun Google Anda.

Buat proyek baru Anda; beri nama "Mirror API Demo"

Hal berikutnya yang perlu Anda lakukan adalah mengaktifkan Mirror API untuk aplikasi web Glass Anda. Untuk melakukannya, klik tombol "Aktifkan API" di halaman ikhtisar proyek, temukan Mirror API pada daftar dan aktifkan.

Selanjutnya, buat Client ID untuk aplikasi web Glass. Untuk melakukan ini, cukup klik tombol "Buat ID Klien Baru" di layar Kredensial.

Catatan : Anda mungkin diminta untuk mengisi detail "Layar Persetujuan". Data pada formulir ini disajikan kepada pengguna saat memberikan akses ke aplikasi Anda.

Kami akan menguji Mirror API menggunakan Google Glass Playground. Untuk mengaktifkan Playground, Anda harus mengotorisasi https://mirror-api-playground.appspot.com sebagai asal yang valid untuk permintaan HTTP. Kami tidak akan menggunakan pengalihan OAuth dalam demo ini, jadi Anda dapat meninggalkan apa pun di bidang "URI Pengalihan".

Klik "Buat ID Klien" dan Anda siap untuk membuat permintaan Mirror API pertama Anda.

Mengautentikasi aplikasi Mirror API

Penting : Jangan salah mengira akun Mirror API Developer Anda dengan akun pemilik Google Glass Anda. Anda mungkin melakukan latihan ini hanya dengan satu akun yang merupakan pengembang dan pemilik Glass, tetapi penting untuk menyadari pemisahan kedua akun ini.

Setiap permintaan HTTP yang dikirim dari aplikasi web Glass Anda ke Mirror API harus diotorisasi. Mirror API menggunakan “Bearer Authentication” standar, yang berarti Anda harus memberikan token untuk setiap permintaan. Token dikeluarkan oleh Google API menggunakan protokol OAuth 2.0 standar.

1. Pengguna (Pemilik Kaca) akan membuka halaman di aplikasi web Anda dan klik “Login”
2. Aplikasi Anda akan mengeluarkan permintaan ke Google API, dan pengguna akan disajikan dengan layar persetujuan yang dihasilkan oleh Google API (biasanya di layar sembulan baru)
3. Jika izin akses diberikan ke aplikasi Anda, Google API akan mengeluarkan token yang akan Anda gunakan untuk memanggil Mirror API

Taman Bermain Cermin API

Google Glass Playground memungkinkan Anda bereksperimen dengan cara konten ditampilkan di Glass. Anda dapat menggunakannya untuk mendorong konten ke Glass Anda, tetapi meskipun Anda tidak memiliki perangkat, Anda dapat melihat tampilannya di layar Glass.

Mirror API Playground dapat ditemukan di URL ini.

Kami telah mengizinkan titik akhir Mirror API Playground sebagai asal permintaan HTTP yang valid. Untuk menggunakan Playground, Anda perlu "mengidentifikasi Mirror API Playground sebagai aplikasi Anda" dengan memberikan ID Klien Anda. Anda dapat menemukan ID Klien aplikasi Anda di Google Developers Console.

Ketika Anda mengklik "Otorisasi," Anda akan disajikan dengan layar persetujuan OAuth 2.0, mirip dengan gambar di bawah ini. Harap dicatat bahwa Anda harus masuk menggunakan akun "Pemilik Kaca", karena ini adalah kredensial yang akan digunakan aplikasi untuk berinteraksi dengan Kaca.

Setelah Anda mengklik "Terima," Mirror API Playground akan diidentifikasi sebagai aplikasi Anda sendiri; itu akan mendapatkan akses ke Timeline Glass Pengguna dan Anda akan dapat berinteraksi dengan perangkat Google Glass dari Playground.

Halo Penjelajah Kaca!

Mirror API Playground diisi dengan template standar yang dapat Anda gunakan untuk mencoba API. Gulir daftar dan temukan contoh yang paling Anda sukai. Untuk demo ini saya memilih kartu "Hello Explorers".

Item yang dipilih akan ditampilkan di Playground, bersama dengan konten Badan Permintaan HTTP yang digunakan untuk menyusun tata letaknya.

 { "text": "Hello Explorers,\n\nWelcome to Glass!\n\n+Project Glass\n", "creator": { "displayName": "Project Glass", "imageUrls": [ "https://lh3.googleusercontent.com/-quy9Ox8dQJI/T3xUHhub6PI/AAAAAAAAHAQ/YvjqA3Pw1sM/glass_photos.jpg?sz=360" ] }, "menuItems": [ { "action": "REPLY" } ], "notification": { "level": "DEFAULT" } }

Jangan ragu untuk mengubah permintaan, dan ketika Anda puas dengan desainnya, klik tombol "Sisipkan Item". Setelah permintaan diproses, "Garis Waktu" Anda akan diperbarui. Jika Anda memiliki perangkat Glass, item tersebut akan dimasukkan ke dalam timeline juga.

Menulis Aplikasi Web Mirror API Anda Sendiri

Selamat! Anda menjalankan permintaan Mirror API pertama Anda dan mengirim pesan ke Google Glass Anda, bahkan tanpa menulis kode apa pun.

Mari kita membuat hal-hal sedikit lebih menarik. Kami ingin menghapus Mirror API Playground dan menempatkan aplikasi kami sendiri di tempatnya.

Pertama, kita perlu memastikan bahwa Google API akan menerima permintaan dari aplikasi kita. Kembali ke Google Developers Console dan tambahkan URL aplikasi Anda ke daftar Asal JavaScript resmi. Saya akan menggunakan http://localhost:3000 tetapi Anda dapat memodifikasi ini ke pengaturan Anda sendiri.

Mendapatkan Token Otorisasi

Untuk menjalankan permintaan OAuth 2.0 dan mendapatkan token otorisasi dari Google API, kami akan menggunakan Pustaka Klien JavaScript Google API.

Buat halaman HTML sederhana dengan konten berikut, pastikan untuk mengganti ID KLIEN dengan ID aplikasi Anda:

 <!DOCTYPE html> <html> <head> <title>{{ title }}</title> <link rel='stylesheet' href='/stylesheets/style.css' /> <script src="https://apis.google.com/js/client.js"></script> <script> function auth() { var config = { 'client_id': <YOUR APPLICATION CLIENT ID>', 'scope': [ 'https://www.googleapis.com/auth/userinfo.profile', 'https://www.googleapis.com/auth/glass.timeline', 'https://www.googleapis.com/auth/glass.location' ] }; gapi.auth.authorize(config, function () { console.log('login complete'); console.log(gapi.auth.getToken()); }); } </script> </head> <body> <h1>{{ title }}</h1> <button>Authorize</button> </body> </html>

Saat Anda memulai aplikasi Google Glass (pastikan itu berjalan di URL yang Anda tentukan sebagai asal JavaScript resmi di Google Developers Console) dan klik "Otorisasi", Anda akan memulai alur OAuth 2.0. Masuk dengan akun Google Anda dan token Anda akan ditampilkan di konsol browser.

Sekarang, dipersenjatai dengan token Anda, Anda siap untuk mulai memposting ke Mirror API! Token Anda akan kedaluwarsa dalam 60 menit, tetapi itu seharusnya lebih dari cukup waktu untuk menyelesaikan demo. Anda selalu bisa mendapatkan token lain dengan mengklik "Otorisasi" lagi.

Layanan RESTful dan permintaan HTTP adalah istilah umum di antara semua pengembang web, apa pun platform pengembangan atau bahasa pemrograman yang mereka gunakan. Untuk mencoba Demo ini, Anda harus menjalankan permintaan HTTP standar ke titik akhir API Cermin. Saya memilih untuk menggunakan Tukang Pos untuk ini. Jangan ragu untuk mengambil detail permintaan dan mengimplementasikan Demo dalam bahasa pemrograman favorit Anda. Gunakan Tukang Pos, atau alat klien HTTP lainnya.

Mendapatkan Item Linimasa

Anda selalu dapat mengambil daftar item yang telah Anda masukkan ke Glass dengan menjalankan HTTP GET ke https://www.googleapis.com/mirror/v1/timeline .

Setiap permintaan terhadap Mirror API perlu diotorisasi. Token otorisasi dikirim sebagai nilai di Otorisasi HTTP Header, diawali dengan kata “Pembawa”.

Di Postman akan terlihat seperti ini:

Jika Anda menjalankan permintaan, responsnya harus serupa dengan ini:

 { "kind": "mirror#timeline", "nextPageToken": "CsEBCqQBwnSXw3uyIAD__wAA_wG4k56MjNGKjJqN18bHzszIy8rMz8nIy9bRlouaktedxp2dyJrHmtLInsue0suZzZvSncvOxtLIyJnGnJyex57Px8zW_wD-__730HDTmv_7_v5HbGFzcy51c2VyKDk4MTM3NDUzMDY3NCkuaXRlbShiOWJiN2U4ZS03YTRhLTRmMmQtYjQxOS03N2Y5Y2NhOGEwODMpAAEQASG5sX4SXdVLF1AAWgsJsgPYYufX654QASAA8ISVfAE=", "items": [ { "kind": "mirror#timelineItem", "id": "b9bb7e8e-7a4a-4f2d-b419-77f9cca8a083", "selfLink": "https://www.googleapis.com/mirror/v1/timeline/b9bb7e8e-7a4a-4f2d-b419-77f9cca8a083", "created": "2014-11-04T19:11:07.554Z", "updated": "2014-11-04T19:11:07.554Z", "etag": "1415128267554", "creator": { "kind": "mirror#contact", "source": "api:182413127917", "displayName": "Project Glass", "imageUrls": [ "https://lh3.googleusercontent.com/-quy9Ox8dQJI/T3xUHhub6PI/AAAAAAAAHAQ/YvjqA3Pw1sM/glass_photos.jpg?sz=360" ] }, "text": "Hello Explorers,\n\nWelcome to Glass!\n\n+Project Glass\n", "menuItems": [ { "action": "REPLY" } ], "notification": { "level": "DEFAULT" } } ] }

Jika Anda melihat konten tanggapan, Anda akan melihat bahwa itu berisi item yang Anda posting dari Playground.

Membuat Item Baru

Untuk membuat item baru, Anda perlu menjalankan POST ke https://www.googleapis.com/mirror/v1/timeline . Anda juga perlu menentukan bahwa Content-Type adalah application/json , dan memberikan header Authorization , seperti pada contoh sebelumnya.

Mari kita asumsikan bahwa kita adalah penggemar berat olahraga, dan tim favorit kita, Aliens, sedang melawan Predator. Kami ingin menggunakan Mirror API untuk mengirimkan hasil ke semua penggemar.

Badan permintaan akan terlihat seperti ini.

 { "html": "<article>\n <section>\n <div class=\"layout-two-column\">\n <div class=\"align-center\">\n <p>Aliens</p>\n <p class=\"text-x-large\">0</p>\n </div>\n <div class=\"align-center\">\n <p>Predators</p>\n <p class=\"text-x-large\">0</p>\n </div>\n </div>\n </section>\n <footer>\n <p>Final Score</p>\n </footer>\n</article>\n", "notification": { "level": "DEFAULT" } }

Dan layar Postman harus mirip dengan ini.

Saat Anda menjalankan permintaan, Mirror API harus memberikan respons yang serupa dengan ini.

 { kind: "mirror#timelineItem", id: "e15883ed-6ca4-4324-83bb-d79958258603", selfLink: https://www.googleapis.com/mirror/v1/timeline/e15883ed-6ca4-4324-83bb-d79958258603, created: "2014-11-04T19:29:54.152Z", updated: "2014-11-04T19:29:54.152Z", etag: "1415129394152", html: "<article>\ <section>\ <div class=\"layout-two-column\">\ <div class=\"align-center\">\ <p>Aliens</p>\ <p class=\"text-x-large\">0</p>\ </div>\ <div class=\"align-center\">\ <p>Predators</p>\ <p class=\"text-x-large\">0</p>\ </div>\ </div>\ </section>\ <footer>\ <p>Final Score</p>\ </footer>\ </article>\ ", notification: { level: "DEFAULT" } }

Bahkan Jika Anda tidak memiliki Google Glass, Anda dapat kembali ke Mirror API Playground dan klik tombol “Reload Timeline Items”. Anda akan melihat dua item, persis seperti yang akan ditampilkan di layar Kaca. Kedua item akan terdaftar jika Anda menjalankan contoh pertama dan DAPATKAN item.

Jika Anda melihat isi tanggapan dari contoh sebelumnya, Anda dapat menemukan baris yang mirip dengan

 id: "e15883ed-6ca4-4324-83bb-d79958258603"

Mirror API akan menetapkan ID unik global untuk setiap item saat dimasukkan. ID ini akan disertakan dalam respons setelah POST dijalankan, dan akan disertakan dalam detail item saat Anda menjalankan GET untuk mencantumkan item timeline.

Katakanlah Predator memimpin dan mencetak gol. Untuk memperbarui skor, Anda harus menjalankan PUT ke https://www.googleapis.com/mirror/v1/timeline diikuti dengan ID. Mirip dengan

 https://www.googleapis.com/mirror/v1/timeline/e15883ed-6ca4-4324-83bb-d79958258603

Ubah konten item untuk mencerminkan perubahan Anda.

 { "html": "<article>\n <section>\n <div class=\"layout-two-column\">\n <div class=\"align-center\">\n <p>Aliens</p>\n <p class=\"text-x-large\">0</p>\n </div>\n <div class=\"align-center\">\n <p>Predators</p>\n <p class=\"text-x-large\">1</p>\n </div>\n </div>\n </section>\n <footer>\n <p>Final Score</p>\n </footer>\n</article>\n", "notification": { "level": "DEFAULT" } }

Konfigurasi tukang pos akan terlihat seperti ini.

Setelah Anda menjalankan permintaan, dan memeriksa konten timeline Anda, Anda akan melihat bahwa Predator memimpin dengan 1:0.

Menu dan Interaksi Dengan Pengguna

Sejauh ini, kami hanya mendorong konten ke Glass, tanpa interaksi atau umpan balik dari pengguna. Sayangnya, Anda tidak dapat mensimulasikan interaksi pengguna, dan Anda harus menggunakan perangkat Glass asli untuk mencoba contoh ini.

Jadi, permainan berlanjut dan skor Aliens untuk 1:1. Kami ingin mengaktifkan semacam fungsi "Saya Suka", di mana pengguna akan dapat melakukan tindakan sederhana sambil melihat item garis waktu.

Pertama, kita perlu menambahkan menu ke kartu kita yang menunjukkan skor. Mengikuti langkah-langkah dari contoh sebelumnya, perbarui item garis waktu dengan konten berikut:

 { "html": "<article>\n <section>\n <div class=\"layout-two-column\">\n <div class=\"align-center\">\n <p>Aliens</p>\n <p class=\"text-x-large\">1</p>\n </div>\n <div class=\"align-center\">\n <p>Predators</p>\n <p class=\"text-x-large\">1</p>\n </div>\n </div>\n </section>\n <footer>\n <p>Final Score</p>\n </footer>\n</article>\n", "notification": { "level": "DEFAULT" }, "menuItems":[ { "action":"CUSTOM", "id":"i_like", "values":[ { "displayName":"I Like!" } ] } ] }

Saat Anda menjalankan permintaan ini, pengguna Anda akan melihat bahwa skor sekarang diperbarui menjadi 1:1. Tetapi ketika pengguna mengetuk Gelas, sebuah menu akan disajikan.

Jika sekarang Anda mengetuk "Saya Suka", tidak akan terjadi apa-apa!

Saya telah menyebutkan bahwa selalu ada "perantara" antara aplikasi Anda dan perangkat Glass. Saat Anda memilih "I Like", perangkat Glass akan mengirimkan informasi ke Mirror API, tetapi Anda belum menentukan ke mana Mirror API harus meneruskan informasi ini.

Di sinilah Langganan masuk. Anda harus berlangganan untuk menerima pemberitahuan dari Mirror API saat pengguna Anda melakukan suatu tindakan.

Untuk membuat langganan, Anda perlu menjalankan POST ke https://www.googleapis.com/mirror/v1/subscriptions .

Badan permintaan harus seperti ini:

 { "collection":"timeline", "userToken":"toptal_test", "operation": ["INSERT","UPDATE","DELETE"], "callbackUrl": "https://mirrornotifications.appspot.com/forward?url=<YOUR URL>" }

callbackUrl berisi URL pengalihan Anda.

Catatan : Mirror API memerlukan enkripsi SSL untuk URL tempat data peristiwa diteruskan. Namun, untuk tujuan pengujian Google telah menyediakan proxy di https://mirrornotifications.appspot.com/forward .

Mirror API akan mengeksekusi POST ke URL yang Anda tentukan dalam langganan. Anda perlu menggunakan lingkungan pengembangan pilihan Anda untuk membuat penangan untuk URL tersebut. Saya telah menyediakan contoh JavaScript (NodeJS/ExpressJS) sederhana yang hanya akan menampilkan konten permintaan.

 router.get('/notify', function(req, res) { console.log(req); res.send("OK"); });

Penutup

Google Glass Mirror API unik dalam banyak hal. Dirancang untuk memberi pengembang web akses ke pengembangan Glass tanpa prasyarat apa pun, ini termasuk dalam inti Glass OS, dan tidak bergantung pada alat pengembangan pihak ketiga. Mirror API sepenuhnya dikelola dan dipelihara oleh Google, dan merupakan bagian dari platform Google API, yang membebaskan Anda dari segala kekhawatiran terkait stabilitas dan skalabilitas.

Jika Anda adalah pengembang web yang tidak pernah menggunakan Google Glass, Anda mungkin menghindari mempelajari Mirror API karena Anda merasa perlu memiliki perangkat Glass, atau Anda merasa perlu menghabiskan banyak waktu untuk mempelajari pengembangan Google Glass. Saya harap tutorial Mirror API ini membantu Anda memecahkan penghalang itu, dan memberi Anda dorongan untuk meluangkan beberapa menit melihat jenis pengembangan ini.

Teknologi yang dapat dipakai ada di sini, Google Glass ada di depan, dan setiap pengembang harus memiliki kesempatan untuk menjadi bagian darinya. Mirror API memberi Anda hal itu.

Artikel ini memberi Anda alat dan petunjuk untuk mengautentikasi aplikasi Mirror API Anda, membaca data dari Google Glass, mengirim data ke Google Glass, dan menerima umpan balik dari pengguna. Untuk mempelajari lebih lanjut tentang Mirror API dan fitur-fiturnya, silakan kunjungi Panduan Mirror API.