البرنامج التعليمي لـ Mirror API: Google Glass لمطوري الويب

من المؤكد أن أجهزة Android تسيطر على العالم. يتم تشغيل الآلاف من الهواتف الذكية والأجهزة اللوحية وأجهزة التلفزيون الذكية ومجموعة كاملة من الأجهزة الأخرى بواسطة النظام الأساسي مفتوح المصدر من Google. علاوة على ذلك ، يدفع حافز الحوسبة القابلة للارتداء من Google العالم إلى آفاق جديدة تمامًا. Google Glass هو جهاز قريب جدًا من تغيير طريقة تفاعلنا مع التكنولوجيا. لفترة طويلة ، كنا نسير ورؤوسنا لأسفل ، ونحدق في شاشات هواتفنا الصغيرة. تساعدنا Google Glass في رفع رؤوسنا والسير بفخر أثناء التفاعل مع تقنيتنا القابلة للارتداء.

في البداية ، اقتصر تطوير Android على المطورين الذين لديهم معرفة بجافا. كان مجتمع كبير من المطورين ينشئون تطبيقات ويب رائعة باستخدام منصات أخرى ، وواجهوا صعوبات كبيرة في تبني تطوير Android. هناك بعض الأساليب التي تطورت لاحقًا وقدمت نوعًا من التطوير عبر الأنظمة الأساسية ، مما مكن مطوري الويب الأذكياء من بدء إنشاء تطبيقات لنظام Android دون معرفة Java و Android SDK. ولكن ، أليس من الرائع تطوير Google Glass دون تعلم لغة برمجة جديدة ، وحتى باستخدام المعرفة الشائعة لمطوري الويب؟ نعم هذا ممكن!

قدمت Google خدمات REST المستندة إلى السحابة والتي تمكن مطوري الويب من بناء Glassware ، فقط من خلال التفاعل مع خدمات الويب التي تستضيفها وتديرها Google. تسمى هذه الخدمات Mirror API ، وهي مستقلة عن منصات التطوير. لبدء استخدام Glass's Mirror API ، لا يتعين عليك حتى امتلاك جهاز Google Glass ، على الرغم من أن بعض الميزات المتقدمة تتطلب أن يكون لديك واحدًا.

هناك شيئان فقط تحتاج إلى معرفتهما:

• نفِّذ طلب OAuth 2.0 واحصل على رمز المصادقة
• نفِّذ طلب HTTP لنقطة النهاية المحددة مسبقًا

سيقدم لك هذا البرنامج التعليمي لتطوير نظارات Google التقنيات التي يمكنك استخدامها لإنشاء تطبيقات لـ Glass.

إذا كنت لا تزال لم تستخدم Google Glass ، فألق نظرة على مقطعي الفيديو هذين ، حيث يجب أن يمنحك معلومات كافية لفهم أساسيات واجهة المستخدم.

• مقدمة إلى Google Glass

• دليل نظارة Google Glass: الشروع في العمل

هناك المزيد من مقاطع الفيديو المفيدة للإعداد والتنقل هنا والعديد من التفاصيل حول واجهة المستخدم هنا.

هناك الكثير من الاختلافات بين Mirror API وتطوير Google Glass الأصلي. الغرض من هذا البرنامج التعليمي ليس مناقشة هذه الاختلافات ، ولكن لتزويد مطوري الويب برؤية ثاقبة حول كيفية عمل Google Glass ، وكيف يمكنهم الانضمام في أسرع وقت ممكن.

كيف تعمل Mirror API؟

الشيء الأول والأهم هو أنك تقوم بإنشاء تطبيق ويب قياسي. سيتم تشغيل تطبيقك على خادم ويب ولن يتفاعل أبدًا بشكل مباشر مع جهاز Google Glass. بدلاً من ذلك ، سيتفاعل تطبيقك مع خدمات Mirror API. لا تتطلب تطبيقات Mirror API أي تثبيت على Glass نفسه ، وجميع الخدمات هي بالفعل جزء من Glass OS.

سيقوم جهاز Google Glass بتشغيل خدمات المزامنة الخاصة به لدفع أو سحب المحتوى مرة أخرى إلى تطبيقك من خلال Mirror API.

لا يمكنك التأثير على وتيرة البحث عندما يبحث Google Glass عن تحديثات على Mirror API ، ووجود "الوسيط" له تكلفة. تتمثل النتيجة المباشرة لهذه البنية في أنه لا يمكنك التفاعل في الوقت الفعلي مع مستخدمي Glass. يجب أن تتوقع دائمًا تأخيرًا بين طلبك لإجراء ما والحدث الفعلي الذي يتم تنفيذه على جهاز Glass.

الإعداد والمصادقة

من أجل استخدام Mirror API لتطوير الويب ، تحتاج إلى تحديد هوية التطبيق على Google Developers Console. افتح وحدة تحكم Google APIs وقم بتسجيل الدخول باستخدام حساب Google الخاص بك.

أنشئ مشروعك الجديد ؛ دعنا نسميها "عرض واجهة برمجة تطبيقات المرآة"

الشيء التالي الذي عليك القيام به هو تمكين Mirror API لتطبيق الويب Glass الخاص بك. للقيام بذلك ، انقر فوق الزر "تمكين API" في صفحة نظرة عامة على المشروع ، وابحث عن Mirror API في القائمة وقم بتشغيلها.

بعد ذلك ، أنشئ معرّف العميل لتطبيقات الويب Glass. للقيام بذلك ، ما عليك سوى النقر فوق الزر "إنشاء معرف عميل جديد" في شاشة بيانات الاعتماد.

ملاحظة : قد يُطلب منك ملء تفاصيل "شاشة الموافقة". يتم تقديم البيانات الواردة في هذا النموذج إلى المستخدم عند منحه حق الوصول إلى التطبيق الخاص بك.

سنختبر Mirror API باستخدام Google Glass Playground. لتمكين Playground ، ستحتاج إلى ترخيص https://mirror-api-playground.appspot.com كأصل صالح لطلبات HTTP. لن نستخدم إعادة توجيه OAuth في هذا العرض التوضيحي ، لذا يمكنك ترك أي شيء في حقل "إعادة توجيه URIs".

انقر فوق "إنشاء معرف العميل" وستكون جاهزًا لتقديم طلب Mirror API الأول الخاص بك.

مصادقة تطبيق Mirror API

هام : لا تخطئ بين حساب Mirror API Developer الخاص بك وحساب مالك Google Glass الخاص بك. يمكنك القيام بهذا التمرين بحساب واحد فقط هو مطور ومالك Glass ، ولكن من المهم أن تكون على دراية بالفصل بين هذين الحسابين.

يحتاج كل طلب HTTP يتم إرساله من تطبيق الويب Glass الخاص بك إلى Mirror API إلى الحصول على تصريح. تستخدم Mirror API "مصادقة الحامل" القياسية ، مما يعني أنك بحاجة إلى توفير رمز مميز مع كل طلب. يتم إصدار الرمز بواسطة Google API باستخدام بروتوكول OAuth 2.0 القياسي.

1. سيفتح المستخدم (مالك الزجاج) صفحة على تطبيق الويب الخاص بك وينقر على "تسجيل الدخول"
2. سيصدر تطبيقك طلبًا إلى Google API ، وسيُعرض على المستخدم شاشة موافقة تم إنشاؤها بواسطة Google API (عادةً في شاشة منبثقة جديدة)
3. إذا تم منح أذونات الوصول لتطبيقك ، فستصدر Google API رمزًا ستستخدمه للاتصال بـ Mirror API

ملعب مرآة API

يتيح لك Google Glass Playground تجربة كيفية عرض المحتوى على الزجاج. يمكنك استخدامه لدفع المحتوى إلى Glass الخاص بك ، ولكن حتى إذا لم يكن لديك جهاز ، يمكنك رؤية كيف سيبدو على شاشة Glass.

يمكن العثور على Mirror API Playground على عنوان URL هذا.

لقد سمحنا بالفعل بنقطة نهاية Mirror API Playground كأصل طلب HTTP صالح. من أجل استخدام Playground ، ستحتاج إلى "تحديد Mirror API Playground كتطبيقك" من خلال توفير معرف العميل الخاص بك. يمكنك العثور على معرّف العميل للتطبيق الخاص بك على Google Developers Console.

عند النقر على "تفويض" ، ستظهر لك شاشة موافقة OAuth 2.0 ، على غرار الصورة أدناه. يرجى ملاحظة أنه يجب عليك تسجيل الدخول باستخدام حساب "Glass Owner" ، فهذه هي بيانات الاعتماد التي سيستخدمها التطبيق للتفاعل مع Glass.

بعد النقر فوق "قبول" ، سيتم تحديد Mirror API Playground على أنه تطبيقك الخاص ؛ سيحصل على حق الوصول إلى مخطط Glass الزمني للمستخدم وستتمكن من التفاعل مع جهاز Google Glass من Playground.

مرحبًا مستكشفي الزجاج!

تمتلئ ساحة لعب Mirror API بقوالب محددة مسبقًا يمكنك استخدامها لتجربة واجهة برمجة التطبيقات. قم بالتمرير خلال القائمة وابحث عن المثال الذي يعجبك أكثر. بالنسبة لهذا العرض التوضيحي ، اخترت بطاقة "Hello Explorers".

سيتم عرض العنصر المحدد في ساحة اللعب ، جنبًا إلى جنب مع محتوى نص طلب HTTP المستخدم لبناء تخطيطه.

 { "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" } }

لا تتردد في تعديل الطلب ، وعندما تكون راضيًا عن التصميم ، انقر فوق الزر "إدراج عنصر". بعد معالجة الطلب ، سيتم تحديث "الجدول الزمني" الخاص بك. إذا كان لديك جهاز Glass ، فسيتم إدراج العنصر في المخطط الزمني أيضًا.

كتابة تطبيق الويب الخاص بـ Mirror API الخاص بك

تهانينا! لقد نفذت أول طلب لـ Mirror API وأرسلت رسالة إلى Google Glass ، دون كتابة أي رمز.

لنجعل الأمور أكثر إثارة للاهتمام. نريد إزالة Mirror API Playground ووضع تطبيقنا الخاص في مكانه.

أولاً ، نحتاج إلى التأكد من أن Google API ستقبل الطلبات من تطبيقنا. ارجع إلى Google Developers Console وأضف عنوان URL للتطبيق الخاص بك إلى قائمة أصول JavaScript الأصلية. سأستخدم http://localhost:3000 ولكن يمكنك تعديل هذا إلى الإعداد الخاص بك.

الحصول على رمز التفويض

لتنفيذ طلب OAuth 2.0 والحصول على رمز التفويض من Google API ، سنستخدم مكتبة Google API JavaScript Client Library.

قم بإنشاء صفحة HTML بسيطة بالمحتوى التالي ، وتأكد من استبدال معرف العميل بمعرف التطبيق الخاص بك:

 <!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 (تأكد من أنه يعمل على عنوان URL الذي حددته كأصل جافا سكريبت معتمد في Google Developers Console) وانقر على "تفويض" ، ستبدأ تدفق OAuth 2.0. قم بتسجيل الدخول باستخدام حساب Google الخاص بك وسيتم عرض رمزك المميز في وحدة تحكم المتصفح.

الآن ، مسلحًا برمزك المميز ، فأنت جاهز لبدء الإرسال إلى Mirror API! ستنتهي صلاحية الرمز المميز الخاص بك في غضون 60 دقيقة ، ولكن يجب أن يكون ذلك أكثر من وقت كافٍ لإنهاء العرض التوضيحي. يمكنك دائمًا الحصول على رمز مميز آخر بالنقر فوق "تفويض" مرة أخرى.

خدمات RESTful وطلبات HTTP هي مصطلحات شائعة بين جميع مطوري الويب ، بغض النظر عن منصة التطوير أو لغة البرمجة التي يستخدمونها. لتجربة هذا العرض التوضيحي ، ستحتاج إلى تنفيذ طلبات HTTP القياسية تجاه نقاط نهاية واجهة برمجة تطبيقات المرآة. اخترت استخدام ساعي البريد لهذا الغرض. لا تتردد في أخذ تفاصيل الطلب وتنفيذ العرض التوضيحي بلغتك البرمجية المفضلة. استخدم Postman ، أو أي أداة عميل HTTP أخرى.

الحصول على عناصر الجدول الزمني

يمكنك دائمًا استرداد قائمة العناصر التي دفعتها إلى Glass عن طريق تنفيذ HTTP GET إلى https://www.googleapis.com/mirror/v1/timeline .

يحتاج كل طلب نحو Mirror API إلى الحصول على تصريح. يتم إرسال رمز التفويض كقيمة في رأس HTTP التفويض ، مسبوقة بكلمة "Bearer".

في Postman ، سيبدو شيئًا كالتالي:

إذا قمت بتنفيذ الطلب ، فيجب أن تكون الاستجابة مماثلة لما يلي:

 { "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" } } ] }

إذا ألقيت نظرة على محتوى الرد ، ستلاحظ أنه يحتوي على العنصر الذي نشرته من Playground.

إنشاء عنصر جديد

لإنشاء عنصر جديد ، تحتاج إلى تنفيذ POST على https://www.googleapis.com/mirror/v1/timeline . ستحتاج أيضًا إلى تحديد أن Content-Type هو application/json ، وتوفير رأس Authorization ، تمامًا كما في المثال السابق.

لنفترض أننا معجبون بالرياضة ، وفريقنا المفضل ، الأجانب ، يلعبون المفترسات. نريد استخدام Mirror API لإرسال النتائج إلى جميع المعجبين.

يجب أن تبدو هيئة الطلب مثل هذا.

 { "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" } }

وينبغي أن تكون شاشة ساعي البريد مماثلة لهذا.

عند تنفيذ الطلب ، يجب أن توفر Mirror API استجابة مماثلة لهذا.

 { 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 ، يمكنك العودة إلى Mirror API Playground والنقر فوق الزر "إعادة تحميل عناصر المخطط الزمني". يجب أن ترى عنصرين ، تمامًا كما سيتم عرضهما على الشاشة الزجاجية. سيتم سرد كلا العنصرين إذا قمت بتنفيذ المثال الأول والحصول على العناصر.

إذا ألقيت نظرة على محتوى الرد من المثال السابق ، يمكنك العثور على سطر مشابه لـ

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

ستقوم Mirror API بتعيين معرف فريد عالميًا لكل عنصر عند إدراجه. سيتم تضمين هذا المعرف في الاستجابة بعد تنفيذ POST ، وسيتم تضمينه في تفاصيل العنصر عند تنفيذ GET لسرد عناصر المخطط الزمني.

لنفترض أن المفترسين أخذوا زمام المبادرة وسجلوا. لتحديث النتيجة ، ستحتاج إلى تنفيذ PUT على https://www.googleapis.com/mirror/v1/timeline متبوعًا بالمعرف. مشابه ل

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

قم بتعديل محتوى العنصر ليعكس التغيير الخاص بك.

 { "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" } }

يجب أن يبدو تكوين ساعي البريد مشابهًا لهذا.

بعد تنفيذ الطلب ، والتحقق من محتوى الجدول الزمني الخاص بك ، يجب أن تلاحظ أن المفترسين يتقدمون بنسبة 1: 0.

القوائم والتفاعل مع المستخدم

حتى الآن ، كنا نرسل المحتوى إلى Glass ، دون أي تفاعل أو تعليقات من المستخدم. لسوء الحظ ، لا يمكنك محاكاة تفاعل المستخدم ، وستحتاج إلى استخدام جهاز Glass حقيقي لتجربة هذا المثال.

لذلك ، تستمر اللعبة ويسجل Aliens 1: 1. نريد تمكين نوع من وظائف "أنا أحب" ، حيث سيتمكن المستخدمون من تنفيذ إجراء بسيط أثناء النظر في عنصر المخطط الزمني.

أولاً ، نحتاج إلى إضافة القائمة إلى بطاقتنا التي تظهر النتيجة. باتباع الخطوات من المثال السابق ، قم بتحديث عنصر المخطط الزمني بالمحتوى التالي:

 { "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!" } ] } ] }

عند تنفيذ هذا الطلب ، سيرى المستخدم أنه تم تحديث النتيجة الآن إلى 1: 1. ولكن عندما ينقر المستخدم على الزجاج ، ستظهر قائمة.

إذا نقرت الآن على "أحب" ، فلن يحدث شيء!

لقد ذكرت بالفعل أنه يوجد دائمًا "وسيط" بين تطبيقك وجهاز Glass. عند تحديد "أنا أحب" ، سيرسل جهاز Glass المعلومات إلى Mirror API ، لكنك لم تحدد المكان الذي يجب أن تقوم Mirror API فيه بإعادة توجيه هذه المعلومات.

هذا هو المكان الذي تأتي فيه الاشتراكات . تحتاج إلى الاشتراك لتلقي إشعارات من Mirror API عندما يقوم المستخدم بإجراء ما.

لإنشاء اشتراك ، تحتاج إلى تنفيذ POST على https://www.googleapis.com/mirror/v1/subscriptions .

يجب أن يكون نص الطلب مثل هذا:

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

يحتوي callbackUrl على عنوان URL الخاص بإعادة التوجيه.

ملاحظة : تتطلب Mirror API تشفير SSL لعنوان URL حيث يتم إعادة توجيه بيانات الحدث. ومع ذلك ، لأغراض الاختبار ، قدمت Google وكيلًا على https://mirrornotifications.appspot.com/forward .

ستقوم Mirror API بتنفيذ POST على عنوان URL الذي حددته في الاشتراك. ستحتاج إلى استخدام بيئة التطوير المفضلة لديك لإنشاء معالج لعنوان URL هذا. لقد قدمت نموذج JavaScript بسيطًا (NodeJS / ExpressJS) والذي سينتج محتوى الطلب.

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

إنهاء

واجهة برمجة تطبيقات Google Glass Mirror فريدة من نوعها من نواحٍ عديدة. تم تصميمه لمنح مطوري الويب إمكانية الوصول إلى تطوير Glass دون أي متطلبات مسبقة ، وهو مدرج في جوهر نظام التشغيل Glass OS ، ولا يعتمد على أدوات التطوير الخاصة بطرف ثالث. تُدار واجهة برمجة تطبيقات Mirror API وصيانتها بالكامل بواسطة Google ، وهي جزء من نظام Google API الأساسي ، مما يريحك من أي مخاوف تتعلق بالاستقرار وقابلية التوسع.

إذا كنت مطور ويب لم تستخدم Google Glass مطلقًا ، فمن المحتمل أنك تجنبت التعرف على Mirror API لأنك اعتقدت أنك بحاجة إلى جهاز Glass ، أو كنت تعتقد أنك ستحتاج إلى قضاء الكثير من الوقت في التعرف على تطوير Google Glass. آمل أن يساعدك هذا البرنامج التعليمي لـ Mirror API في كسر هذا الحاجز ، وأعطيك دفعة لقضاء بضع دقائق في النظر في هذا النوع من التطوير.

التكنولوجيا القابلة للارتداء هنا ، Google Glass في طليعتها ، ويجب أن يحصل كل مطور على فرصة ليكون جزءًا منه. مرآة API تمنحك ذلك بالضبط.

تمنحك هذه المقالة أدوات وإرشادات لمصادقة تطبيق Mirror API الخاص بك ، وقراءة البيانات من Google Glass ، وإرسال البيانات إلى Google Glass ، وتلقي التعليقات من المستخدم. لمعرفة المزيد حول Mirror API وميزاتها ، يرجى زيارة دليل Mirror API.