برنامج تعليمي لمطوري Google Glass الطموحين: إنشاء أول تطبيق Glass لديك

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

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

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

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

كيفية الانضمام

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

وبالتالي ، من أجل تشغيل تطبيقك وتصحيحه ، ستحتاج إلى الحصول على Google Glass فعليًا من خلال برنامج Explorer. للانضمام إلى البرنامج ، قم بزيارة صفحة التسجيل والاشتراك للوصول. بمجرد الموافقة ، قم بإعداد بطاقتك الائتمانية وانتظر حتى يتم تسليم الزجاج الخاص بك. تبلغ تكلفة إصدار Explorer من Glass حاليًا 1500 دولار أمريكي ، ولكن من المتوقع أن ينخفض ​​السعر بشكل كبير قبل وصول الجهاز إلى المتاجر.

من أجل عديم الزجاج

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

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

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

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

قواعد الاشتباك

يقدم البرنامج التعليمي لمطور Google Glass الافتراضات التالية:

• أفترض أنك تفهم أساسيات التنقل وإعداد النظارة. إذا لم تستخدم Glass مطلقًا ، فألق نظرة على مقاطع الفيديو المرتبطة أعلاه.
• أفترض أنك تفهم أساسيات تطوير Android: هيكل ملفات المشروع ، وتكوين تطبيقات Android ، وما إلى ذلك.
• سأستخدم Android Studio ، لكن التعليمات يجب أن تترجم إلى أي بيئة تطوير Android تقريبًا. لا يزال Android Studio "تجريبيًا" ، وكذلك Glass. لا تخف من البدء في استخدامه - إنه حقًا منتج رائع. Android Studio متاح للتنزيل هنا.

إعداد نظارة Google الخاصة بك

حسنًا ، لنبدأ!

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

بعد ذلك ، تحتاج إلى إعداد بيئة التطوير الخاصة بك. يتطلب الإصدار الحالي من Google Glass استخدام الإصدار 19 من API ، لذا تأكد من تثبيته. تحتاج أيضًا إلى تثبيت مجموعة أدوات تطوير الزجاج. استخدم Android SDK Manager لتثبيت هاتين الحزمتين إذا لم تكن قد قمت بذلك بالفعل.

مرحبا بالعالم!

لذلك دعونا نصنع أول قطعة لدينا من "الأواني الزجاجية". (نعم ، لقد ابتكرت Google مصطلحًا آخر! "Glassware" هو اسم أي تطبيق يعمل على Google Glass). سنبدأ بتطوير أداة قديمة جيدة "Hello World!" تطبيق. مثل معظم بيئات تطوير Android الرئيسية ، يقوم Android Studio تلقائيًا بتعبئة التطبيقات الجديدة بقالب لعرض هذه العبارة الشهيرة. نتيجة لذلك ، تحصل على "Hello World!" يعد التشغيل والتشغيل مجرد تمرين في نشر التطبيق الأساسي.

في Android Studio ، انقر فوق " مشروع جديد " واملأ نموذج المشروع. يمكنك استخدام شيء مشابه لهذا:

عند تحديد عوامل الشكل وواجهة برمجة التطبيقات ، تأكد من تحديد " Glass " و API 19

حدد " نشاط الغمر " كنشاط بدء التشغيل الخاص بك.

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

• تتم إضافة البطاقات الحية إلى المخطط الزمني لـ Glass وتعرض معلومات في الوقت الفعلي حول شيء ما من خلال تحديثات عالية التردد. يتم تشغيلها باستمرار في الخلفية حتى عندما يتفاعل المستخدمون مع بطاقات مختلفة. يتيح ذلك للمستخدمين القيام بمهام متعددة مع الوصول المستمر إلى أنواع مختلفة من المعلومات في الوقت الفعلي.

• الغمر عبارة عن شاشات قابلة للتخصيص بالكامل تعمل خارج تجربة المخطط الزمني. تسمح لك هذه بتصميم واجهة المستخدم الخاصة بك ومعالجة إدخال المستخدم بالطريقة التي تراها مناسبة. هذا ما سنستخدمه!

في الشاشة التالية من المعالج ، اترك القيم الافتراضية لـ " الاسم " و " العنوان " وانقر على " إنهاء ".

بعد أن يعتني Gradle بتبعيّاتك ويجهز مشروعك ، حان الوقت لتركيبه على Glass. الآن هذا تطور مستقبلي!

بافتراض أن جميع برامج تشغيل Android ADB الخاصة بك في مكانها وأن نظامك يتعرف على Glass الخاص بك ، يجب أن تحصل على Glass في قائمة جهازك.

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

انقر على " تشغيل " وانشر "APK الافتراضي" مع "MainActivity" كنشاط بدء التشغيل للتشغيل على جهاز "USB".

بعد بضع ثوانٍ ، من المفترض أن ترى شيئًا كهذا على شاشتك الزجاجية:

يا هلا! تطبيقك يعمل على 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 . يجب أن يعتني هذا بتخطيط التطبيق والألوان تلقائيًا ، باستخدام سمة Glass الافتراضية.

تحديد مظهر القائمة

حسنًا ، الشيء التالي الذي نريد القيام به في هذا البرنامج التعليمي لتطوير Glass هو إعداد تطبيقنا للحصول على اسم مناسب وبدء تشغيل صوتي لطيف. افتح Android Manifest ( AndroidManifest.xml ) وأضف علامة <application… tag التالية أعلاه:

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

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

افتح voice_trigger.xml للتحرير. هذا هو المكان الذي يتم فيه تحديد الأمر الصوتي لبدء تطبيقك. يجب أن يكون موجودًا في res/xml/ folder. يجب أن تحصل على محتوى مشابه لهذا:

 <trigger command="SHOW_ME_A_DEMO" />

بدلاً من قول "Show me a demo" لبدء تطبيقنا ، دعنا نقول فقط اسم التطبيق. قم بتغيير محتويات الملف إلى:

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

إذا عدت إلى ملف البيان الخاص بك ، فقد تلاحظ أنه تم تحديث android:label="@string/app_name" تلقائيًا لاستخدام سلسلة الموارد @string/app_name بدلاً من قيمة Hello Glass المشفرة كما كانت من قبل . إذا لم يتم تحديث هذا الإعداد ، فتأكد من تعيين القيمة على 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. كيفية إعداد بيئة التطوير الخاصة بك لبناء الأواني الزجاجية.
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" على أنها "قائمة تطبيق" ، تمامًا كما استخدمتها في تطوير هاتفك الذكي / جهازك اللوحي ، ولها نفس الدور تمامًا. نظرًا لأنك "تنقر" على "رمز قائمة التطبيق" على شاشتك (غالبًا 3 نقاط أو خطوط) لفتح قائمة تطبيقات Android ، فأنت بحاجة إلى قول "ok glass" لفتح قائمة تنشيط الصوت في تطبيق Glassware الخاص بك.

لتمكين قائمة "ok glass" ، يلزمك طلب FEATURE_VOICE_COMMANDS من واجهة برمجة التطبيقات. للقيام بذلك ، أضف السطر التالي في معالج onCreate في MainActivity الخاص بك:

 getWindow().requestFeature(WindowUtils.FEATURE_VOICE_COMMANDS);

سيتم عرض كل نشاط يتضمن هذه الميزة بنص "زجاج موافق" في المنتصف السفلي.

الشيء التالي الذي عليك القيام به هو إنشاء قائمة للشاشة الرئيسية. في مجلد res/menu الخاص بك ، قم بإنشاء تعريف قائمة XML جديد باسم main.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" لا تختلف عن قائمة تطبيقات Android القياسية. إن إرفاق قائمة بالنشاط هو نفسه عمليًا. ما عليك سوى تجاوز معالج onCreatePanelMenu في MainActivity الخاص بك ، وتضخيم القائمة الرئيسية التي أنشأتها للتو:

 @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. منصة التطوير

لذلك ، دعونا نتأكد من وجود الهيكل المناسب للفصول في تطبيقنا. قم بإنشاء فئة جديدة باسم DeveloperModel.java في مجلد java/models . نريد أن تكون هذه الفئة قابلة للتسلسل ، لأنها ستحتوي على ملفات تعريف موجودة في قائمة.

 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 الافتراضي عام قليلاً فيما يتعلق بنموذج البيانات الخاص به ، فنحن بحاجة إلى توسيعه وجعله خاصًا بنا. أنشئ DeveloperAdapter.java في مجلد java/adapters الخاص بك:

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

لا نريد إضافة نتائج البحث الخاصة بنا على الشاشة الرئيسية للتطبيق ، لذلك سننشئ نشاطًا جديدًا يقوم بالبحث وعرض النتائج. قم بإنشاء نشاط جديد ، ResultsActivity ، بجوار MainActivity الخاص بك (ربما في 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 . تأكد أولاً من تحديد البطاقات الخاصة بك و Scroller في البداية:

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

تمامًا كما في السابق ، قم بتمكين الإيماءات للتعامل مع لوحة اللمس على Glass عند عرض ResultsActivity . للقيام بذلك ، فقط اتصل openOptionsMenu() في onGesture(Gesture gesture) :

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

أضف أيضًا معالج قائمة إلى الإجراءات ذات الصلة بالمطور. سنترك رسائل توست بسيطة في الوقت الحالي.

 @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 لدينا في الوقت الحالي هو تجاوز معالج onCreate بنا في ResultsActivity ، حيث سنتحقق من النظام الأساسي للتطوير الذي تمت إعادة توجيهه من 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" أو عن طريق النقر على لوحة اللمس أو باستخدام التنشيط الصوتي. هذا ما يبدو عليه الملف الشخصي "العاشر لمطور برامج Android" في الوقت الحالي:

يؤدي النقر إلى إظهار قائمة اللمس:

ويؤدي قول "ok glass" إلى إظهار قائمة الصوت:

اسحب لأسفل من القائمة للعودة إلى الشاشة الرئيسية لتطبيقك.

الحصول على ملفات التعريف من الإنترنت

لإنهاء الأمور ، دعنا نملأ القائمة بمعلومات حقيقية لأفضل 10 مطوري Toptal لـ JavaScript و Android و iOS.

ستحتاج إلى تنزيل صور ملفاتهم الشخصية وإتاحتها عبر HTTP ، أو مجرد استخدام عناوين URL مباشرة من toptal.com.

نظرًا لأن إنشاء متتبع ارتباطات ويب فقط للحصول على أسماء أفضل المطورين في Toptal قد يكون بمثابة منعطف شديد لهذه المقالة ، فقد قمت بإنشاء ملفات JSON لتستخدمها في Android و JavaScript و iOS.

في التطبيق الخاص بك ، فإن أول شيء عليك القيام به هو طلب الوصول إلى الإنترنت من نظام التشغيل Android الخاص بك. أضف السطر التالي إلى ملف البيان الخاص بك

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

اعلم أن Glass لن يسمح لك بحظر سلسلة المحادثات الرئيسية باستخدام طلبات HTTP مباشرة. ستحتاج إلى التعامل مع تنزيلات JSON والصور الفردية بطريقة غير متزامنة. يمكنك استخدام مهمة غير متزامنة ، أو إنشاء خدمة أو نية تنزيل خاصة بك ، أو أي شيء تفضله في عملك اليومي.

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

ملخص البرنامج التعليمي

آمل أن تكون قد استمتعت باتباع هذا البرنامج التعليمي لتطوير Google Glass وبناء أول تطبيق Glassware. الآن ، يجب أن تكون مرتاحًا لفكرة أن كتابة تطبيقات لـ Glass لا تختلف كثيرًا عن أي نظام أساسي آخر يعمل بنظام Android.

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

للتعمق أكثر ، توجه إلى موارد مطوري Google على developer.google.com/glass. عندما تبدأ في إنشاء تطبيقات أكثر تعقيدًا ، سيثبت أنها مورد مفيد للغاية.

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

هناك قدر كبير من العمل المتبقي في التعرف على الصوت وقد تجد نفسك تصرخ في وجه صديقك الوهمي أثناء محاولتك بدء نشاطك أو ملء بعض المعلومات. لا تقلق هناك - يشعر كل من يحاول تطوير Google Glass بنفس الشعور ، لذا فأنت لست وحدك.

سوف تتحسن التكنولوجيا ، وسيكون الزجاج جاهزًا للبيع بالتجزئة في أي وقت من الأوقات. من المؤكد أنها ستحدث موجات كبيرة بمجرد وصولها إلى المتاجر ، لذلك آمل أن تكون متحمسًا بقدر حماستي لكوني من أوائل من يتصدرون هذه التكنولوجيا المثيرة!

صراخ خارج : لقطات الشاشة في هذه المقالة مصنوعة باستخدام Droid @ Screen.