Mirror API Eğitimi: Web Geliştiricileri için Google Glass
Yayınlanan: 2022-03-11Android cihazlar kesinlikle dünyayı ele geçiriyor. Binlerce akıllı telefon, tablet, akıllı televizyon ve bir sürü başka cihaz, Google'ın açık kaynak platformu tarafından desteklenmektedir. Bunun da ötesinde, Google'ın giyilebilir bilgi işlem teşviki, dünyayı yepyeni zirvelere taşıyor. Google Glass, teknolojiyle etkileşim biçimimizi değiştirmeye çok yakın bir cihazdır. Çok uzun bir süredir, küçük telefon ekranlarımıza bakarak başımızı eğip yürüyoruz. Google Glass, giyilebilir teknolojimizle etkileşim kurarken başımızı kaldırmamıza ve gururla yürümemize yardımcı oluyor.
İlk başta, Android geliştirme yalnızca Java bilgisine sahip geliştiricilerle sınırlıydı. Büyük bir geliştirici topluluğu, diğer platformları kullanarak harika web uygulamaları oluşturuyordu ve Android geliştirmeyi benimseme konusunda büyük zorluklar yaşıyordu. Daha sonra gelişen ve bir tür platformlar arası geliştirme sağlayan, bilgili web geliştiricilerinin Java ve Android SDK bilgisi olmadan Android için uygulamalar oluşturmaya başlamalarını sağlayan birkaç yaklaşım vardır. Ancak, yeni bir programlama dili öğrenmeden ve hatta yalnızca web geliştiricilerinin ortak bilgilerini kullanarak Google Glass için geliştirme yapmak harika olmaz mıydı? Evet mümkün!
Google, web geliştiricilerinin yalnızca Google tarafından barındırılan ve yönetilen web hizmetleriyle etkileşim kurarak Glassware oluşturmasına olanak tanıyan bulut tabanlı RESTful hizmetleri sağladı. Bu hizmetler Mirror API olarak adlandırılır ve geliştirme platformlarından bağımsızdır. Glass'ın Mirror API'sini kullanmaya başlamak için, bir Google Glass cihazına sahip olmanız bile gerekmez, ancak bazı gelişmiş özellikler bir tane olmasını gerektirebilir.
Bilmeniz gereken sadece iki şey var:
- OAuth 2.0 isteğini yürütün ve Kimlik Doğrulama Simgesini alın
- Önceden tanımlanmış bitiş noktasına HTTP isteğini yürütün
Bu Google Glass geliştirme öğreticisi, Glass için uygulamalar oluşturmak için kullanabileceğiniz teknikleri size tanıtacaktır.
Google Glass'ı hâlâ kullanmadıysanız, kullanıcı arayüzünün temellerini anlamanız için size yeterli bilgiyi vermeleri gerektiği için bu iki videoya bir göz atın.
Google Glass'a Giriş
Google Glass Nasıl Yapılır: Başlarken
Kurulum ve gezinme için daha da faydalı videolar burada ve burada kullanıcı arayüzü hakkında daha birçok ayrıntı var.
Mirror API ve yerel Google Glass geliştirme arasında birçok fark vardır. Bu öğreticinin amacı, bu farklılıkları tartışmak değil, web geliştiricilerine Google Glass'ın nasıl çalıştığı ve mümkün olan en kısa sürede nasıl katılabilecekleri konusunda fikir vermektir.
Bir Ayna API'si Nasıl Çalışır?
İlk ve en önemli şey, standart bir web uygulaması oluşturmanızdır. Uygulamanız bir web sunucusunda çalışacak ve hiçbir zaman bir Google Glass cihazıyla doğrudan etkileşime girmeyecektir. Bunun yerine, uygulamanız Mirror API hizmetleriyle etkileşime girecektir. Mirror API tabanlı uygulamalar, Glass'ın kendisinde herhangi bir kurulum gerektirmez ve tüm hizmetler zaten Glass OS'nin bir parçasıdır.
Google Glass cihazı, Mirror API aracılığıyla içeriği uygulamanıza geri göndermek veya geri çekmek için kendi senkronizasyon hizmetlerini çalıştıracaktır.
Google Glass'ın Mirror API'deki güncellemeleri kontrol etme sıklığını etkileyemezsiniz ve "aracı adama" sahip olmanın bir maliyeti vardır. Bu mimarinin doğrudan sonucu, Glass kullanıcılarıyla gerçek zamanlı bir etkileşime sahip olamamanızdır. Bir eylem talebiniz ile Glass cihazında yürütülen fiili olay arasında her zaman bir gecikme beklemelisiniz.
Kurulum ve Kimlik Doğrulama
Mirror API'yi web geliştirme için kullanmak için Google Developers Console'da bir uygulama kimliği tanımlamanız gerekir. Google API konsolunu açın ve Google hesabınızla oturum açın.
Yeni projenizi oluşturun; Adını “Mirror API Demo” koyalım
Yapmanız gereken bir sonraki şey, Glass web uygulamanız için Mirror API'yi etkinleştirmek. Bunu yapmak için, projeye genel bakış sayfasındaki "Bir API'yi Etkinleştir" düğmesini tıklayın, listeden Mirror API'yi bulun ve AÇIN.
Ardından, Glass web uygulamaları için İstemci Kimliği oluşturun. Bunu yapmak için, Kimlik Bilgileri ekranında "Yeni Müşteri Kimliği Oluştur" düğmesini tıklamanız yeterlidir.
Not : "Onay ekranı" ayrıntılarını doldurmanız istenebilir. Bu formdaki veriler, uygulamanıza erişim izni verildiğinde bir kullanıcıya sunulur.
Google Glass Playground'u kullanarak Mirror API'yi test edeceğiz. Playground'u etkinleştirmek için https://mirror-api-playground.appspot.com adresini HTTP istekleri için geçerli bir kaynak olarak yetkilendirmeniz gerekir. Bu demoda OAuth yeniden yönlendirmesini kullanmayacağız, bu nedenle "Yönlendirme URI'leri" alanında herhangi bir şey bırakabilirsiniz.
"Create Client ID"ye tıkladığınızda ilk Mirror API isteğinizi yapmaya hazırsınız.
Mirror API uygulamasının kimliğini doğrulama
Önemli : Mirror API Developer hesabınızı Google Glass sahibi hesabınızla karıştırmayın. Bu alıştırmayı geliştirici ve Glass sahibi olan yalnızca bir hesapla yapabilirsiniz, ancak bu iki hesabın birbirinden ayrıldığının farkında olmak önemlidir.
Glass web uygulamanızdan Mirror API'ye gönderilen her HTTP isteğinin yetkilendirilmesi gerekir. Mirror API, standart "Bearer Authentication" kullanıyor; bu, her istekle bir jeton sağlamanız gerektiği anlamına geliyor. Belirteç, standart OAuth 2.0 protokolü kullanılarak Google API tarafından verilir.
- Kullanıcı (Glass Owner) web uygulamanızda bir sayfa açacak ve “Giriş”e tıklayacaktır.
- Başvurunuz Google API'ye bir istek gönderecek ve kullanıcıya Google API tarafından oluşturulan bir izin ekranı sunulacaktır (genellikle yeni bir açılır ekranda)
- Uygulamanıza erişim izinleri verilirse, Google API, Mirror API'yi çağırmak için kullanacağınız bir belirteç yayınlayacaktır.
Ayna API Oyun Alanı
Google Glass Playground, içeriğin bir Glass'da nasıl görüntülendiğini denemenize olanak tanır. İçeriği Glass'ınıza göndermek için kullanabilirsiniz, ancak bir cihazınız olmasa bile Glass ekranda nasıl görüneceğini görebilirsiniz.
Mirror API Playground bu URL'de bulunabilir.
Geçerli bir HTTP istek kaynağı olarak Mirror API Playground uç noktasına zaten izin verdik. Playground'u kullanmak için, Müşteri Kimliğinizi sağlayarak Mirror API Playground'u uygulamanız olarak tanımlamanız gerekir. Uygulamanızın Müşteri Kimliğini Google Developers Console'da bulabilirsiniz.
"Yetkilendir"i tıkladığınızda, aşağıdaki resme benzer bir OAuth 2.0 izin ekranı ile karşılaşacaksınız. Lütfen, "Cam Sahibi" hesabınızı kullanarak oturum açmanız gerektiğini unutmayın, çünkü bunlar, uygulamanın Glass ile etkileşim kurmak için kullanacağı kimlik bilgileridir.
“Kabul Et”i tıkladıktan sonra Mirror API Playground, kendi uygulamanız olarak tanımlanacaktır; Kullanıcının Glass Zaman Çizelgesi'ne erişim elde edecek ve Playground'dan Google Glass cihazıyla etkileşime girebileceksiniz.
Merhaba Cam Kaşifleri!
Mirror API Playground, API'yi denemek için kullanabileceğiniz önceden tanımlanmış şablonlarla doludur. Listede gezinin ve en sevdiğiniz örneği bulun. Bu demo için “Merhaba Kaşifler” kartını seçtim.
Seçilen öğe, düzenini oluşturmak için kullanılan HTTP İstek Gövdesi içeriğiyle birlikte Oyun Alanında görüntülenecektir.
{ "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" } }İsteği değiştirmekten çekinmeyin ve tasarımdan memnun olduğunuzda "Öğe Ekle" düğmesini tıklayın. Talep işlendikten sonra “Zaman Çizelgesi” güncellenecektir. Bir Glass cihazınız varsa, öğe zaman çizelgesine de eklenecektir.
Kendi Mirror API Web Uygulamanızı Yazma
Tebrikler! İlk Mirror API isteğinizi gerçekleştirdiniz ve herhangi bir kod yazmadan Google Glass'ınıza bir mesaj gönderdiniz.
İşleri biraz daha ilginç hale getirelim. Mirror API Playground'u kaldırıp yerine kendi uygulamamızı koymak istiyoruz.
Öncelikle, Google API'nin uygulamamızdan gelen istekleri kabul edeceğinden emin olmamız gerekiyor. Google Developers Console'a dönün ve uygulamanızın URL'sini yetkili JavaScript Origins listesine ekleyin. Ben http://localhost:3000 kullanacağım ama bunu kendi kurulumunuza göre değiştirebilirsiniz.
Yetkilendirme Simgesini Alma
OAuth 2.0 isteğini yürütmek ve Google API'den yetkilendirme belirteci almak için Google API JavaScript İstemci Kitaplığını kullanacağız.
Aşağıdaki içeriğe sahip basit bir HTML sayfası oluşturun, CLIENT ID'yi uygulama ID'nizle değiştirdiğinizden emin olun:
<!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>Google Glass uygulamasını başlattığınızda (Google Developers Console'da yetkili JavaScript kaynağı olarak belirttiğiniz URL'de çalıştığından emin olun) ve "Yetkilendir"i tıkladığınızda, OAuth 2.0 akışını başlatırsınız. Google hesabınızla giriş yapın ve jetonunuz tarayıcı konsolunda görüntülenecektir.
Şimdi, jetonunuzla donanmış olarak, Mirror API'ye göndermeye başlamaya hazırsınız! Simgenizin süresi 60 dakika içinde sona erecek, ancak bu, demoyu bitirmek için fazlasıyla yeterli bir süre olmalıdır. Tekrar "Yetkilendir"i tıklayarak her zaman başka bir jeton alabilirsiniz.
RESTful hizmetleri ve HTTP istekleri, hangi geliştirme platformunu veya programlama dilini kullanırlarsa kullansınlar tüm web geliştiricileri arasında ortak terimlerdir. Bu Demoyu denemek için Mirror API uç noktalarına yönelik standart HTTP isteklerini yürütmeniz gerekir. Bunun için Postacıyı kullanmayı seçiyorum. İstek ayrıntılarını almaktan ve Demo'yu favori programlama dilinizde uygulamaktan çekinmeyin. Postacıyı veya başka bir HTTP istemci aracını kullanın.
Zaman Çizelgesi Öğelerini Alma
https://www.googleapis.com/mirror/v1/timeline için HTTP GET'i yürüterek Glass'a aktardığınız öğelerin listesini istediğiniz zaman alabilirsiniz.
Mirror API'ye yönelik her isteğin yetkilendirilmesi gerekir. Yetkilendirme belirteci, "Taşıyıcı" kelimesinin ön eki olan Yetkilendirme HTTP Başlığında bir değer olarak gönderilir.
Postman'da şöyle görünürdü:
İsteği yürütürseniz, yanıt şuna benzer olmalıdır:
{ "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" } } ] }Yanıtın içeriğine bakarsanız, Oyun Alanından yayınladığınız öğeyi içerdiğini fark edeceksiniz.
Yeni Öğe Oluşturma
Yeni bir öğe oluşturmak için https://www.googleapis.com/mirror/v1/timeline POST yürütmeniz gerekir. Ayrıca Content-Type öğesinin application/json olduğunu belirtmeniz ve önceki örnekte olduğu gibi Authorization başlığını sağlamanız gerekir.
Diyelim ki büyük bir spor hayranıyız ve favori takımımız Aliens Predators oynuyor. Sonuçları tüm hayranlara göndermek için Mirror API kullanmak istiyoruz.
İstek gövdesi böyle görünmelidir.
{ "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" } }Ve Postacı ekranı buna benzer olmalıdır.
İsteği yürüttüğünüzde, Mirror API buna benzer bir yanıt vermelidir.
{ 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" } }Google Glass'ınız olmasa bile Mirror API Playground'a geri dönebilir ve “Zaman Çizelgesi Öğelerini Yeniden Yükle” düğmesini tıklayabilirsiniz. Tam olarak Glass ekranda görüntülenecekleri gibi iki öğe görmelisiniz. İlk örneği çalıştırırsanız ve öğeleri GET yaparsanız her iki öğe de listelenecektir.
Bir önceki örnekteki yanıtın içeriğine bakarsanız, buna benzer bir satır bulabilirsiniz.
id: "e15883ed-6ca4-4324-83bb-d79958258603"Mirror API, eklendiğinde her öğeye global olarak benzersiz bir kimlik atayacaktır. Bu kimlik, POST yürütüldükten sonra yanıta dahil edilecek ve zaman çizelgesi öğelerini listelemek için GET'i yürüttüğünüzde öğe ayrıntılarına dahil edilecektir.
Diyelim ki Predators öne geçti ve gol attı. Skoru güncellemek için, https://www.googleapis.com/mirror/v1/timeline PUT ve ardından ID'yi çalıştırmanız gerekir. Benzer
https://www.googleapis.com/mirror/v1/timeline/e15883ed-6ca4-4324-83bb-d79958258603Öğe içeriğini, değişikliğinizi yansıtacak şekilde değiştirin.
{ "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" } }Postacı yapılandırması buna benzer görünmelidir.
İsteği yürüttükten ve zaman çizelgenizin içeriğini kontrol ettikten sonra, Predators'ın 1:0 önde olduğunu fark etmelisiniz.
Menüler ve Kullanıcı ile Etkileşim
Şimdiye kadar, kullanıcıdan herhangi bir etkileşim veya geri bildirim almadan yalnızca içeriği Glass'a aktarıyorduk. Ne yazık ki, kullanıcı etkileşimini simüle edemezsiniz ve bu örneği denemek için gerçek bir Glass cihazı kullanmanız gerekecektir.
Böylece oyun devam eder ve Uzaylılar 1:1 skoru alır. Kullanıcıların bir zaman çizelgesi öğesine bakarken basit eylemleri gerçekleştirebilecekleri bir tür "Seviyorum" işlevini etkinleştirmek istiyoruz.
Öncelikle skoru gösteren menüyü kartımıza eklememiz gerekiyor. Önceki örnekteki adımları izleyerek zaman çizelgesi öğesini aşağıdaki içerikle güncelleyin:
{ "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!" } ] } ] }Bu isteği gerçekleştirdiğinizde, kullanıcınız puanın şimdi 1:1 olarak güncellendiğini görecektir. Ancak kullanıcı Cam'a dokunduğunda bir menü sunulacak.
Şimdi “Seviyorum”a dokunursanız hiçbir şey olmayacak!
Uygulamanız ile Glass cihazı arasında her zaman bir “aracı” olduğundan daha önce bahsetmiştim. “Beğendim”i seçtiğinizde, Glass cihazı bilgileri Mirror API'ye gönderir, ancak Mirror API'nin bu bilgiyi nereye ileteceğini belirtmemişsiniz.
Abonelikler burada devreye girer. Kullanıcınız bir işlem gerçekleştirdiğinde Mirror API'den bildirim almak için abone olmanız gerekir.
Bir abonelik oluşturmak için https://www.googleapis.com/mirror/v1/subscriptions bir POST yürütmeniz gerekir.
İstek gövdesi şöyle olmalıdır:
{ "collection":"timeline", "userToken":"toptal_test", "operation": ["INSERT","UPDATE","DELETE"], "callbackUrl": "https://mirrornotifications.appspot.com/forward?url=<YOUR URL>" } callbackUrl , yönlendirme URL'nizi içerir.
Not : Mirror API, olay verilerinin iletildiği URL için SSL şifrelemesi gerektirir. Ancak, test amacıyla Google, https://mirrornotifications.appspot.com/forward bir proxy sağlamıştır.
Mirror API, bir abonelikte belirttiğiniz URL'ye POST yürütür. Bu URL için bir işleyici oluşturmak için tercih ettiğiniz geliştirme ortamını kullanmanız gerekecektir. Yalnızca istek içeriğini çıkaracak basit JavaScript (NodeJS/ExpressJS) örneğini sağladım.
router.get('/notify', function(req, res) { console.log(req); res.send("OK"); });kapatma
Google Glass Mirror API birçok yönden benzersizdir. Web geliştiricilerinin herhangi bir ön koşul olmaksızın Glass geliştirmesine erişmelerini sağlamak üzere tasarlanmış olup, Glass OS'nin çekirdeğine dahildir ve üçüncü taraf geliştirme araçlarına dayanmaz. Mirror API, tamamen Google tarafından yönetilir ve bakımı yapılır ve sizi kararlılık ve ölçeklenebilirlikle ilgili tüm endişelerinizi gideren Google API platformunun bir parçasıdır.
Google Glass'ı hiç kullanmamış bir web geliştiricisiyseniz, muhtemelen bir Glass cihazına ihtiyacınız olduğunu düşündüğünüz için Mirror API'yi öğrenmekten kaçındınız veya Google Glass'ı geliştirmek için çok zaman harcamanız gerektiğini düşündünüz. Umarım bu Mirror API öğreticisi, bu engeli aşmanıza yardımcı olmuştur ve bu tür geliştirmelere birkaç dakika ayırmanız için sizi teşvik etmiştir.
Giyilebilir teknoloji burada, Google Glass sınırlarında ve her geliştiricinin bunun bir parçası olma şansı olmalı. Mirror API size tam olarak bunu verir.
Bu makale size Mirror API uygulamanızın kimliğini doğrulamak, Google Glass'dan veri okumak, Google Glass'a veri göndermek ve bir kullanıcıdan geri bildirim almak için araçlar ve talimatlar sunar. Mirror API ve özellikleri hakkında daha fazla bilgi edinmek için lütfen Mirror API Kılavuzlarını ziyaret edin.