Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Pebble
Code

 كيفية بناء تطبيق بيبل 

by
Difficulty:BeginnerLength:LongLanguages:

Arabic (العربية/عربي) translation by Saadkhaled (you can also view the original English article)

Final product image
What You'll Be Creating

لقد كانت ساعة Pebble الذكية متوفرة منذ حملة Kickstarter الناجحة للغاية في عام 2012 وهي خيار شائع بين مستخدمي smartwatch. يرجع ذلك إلى عمر البطارية الممتاز والسعر المنخفض والموديلات المتنوعة للاختيار من بينها والتوافق مع كل من iOS و Android. 

لدى Pebble مطوّر SDK منذ اليوم الأول ، حيث تشجع المطورين على إنشاء تطبيقات مثيرة ومبتكرة لمنصة Pebble. لقد تم تحديث SDK دائمًا ، مع إضافة ميزات جديدة بمرور الوقت. 

تم ترميز تطبيقات Pebble تقليديًا في لغة C ، ولكن ، في الآونة الأخيرة ، اتخذت Pebble جافا سكريبت وفتحت عالم تطوير التطبيقات على نظامها الأساسي إلى المزيد من المطورين. في هذه المقدمة لتطوير Pebble ، أطلعك على بعض أساسيات البدء في تطوير Pebble باستخدام SDK ومكتبة Pebble.js عن طريق إنشاء تطبيق وإرساله إلى متجر التطبيقات Pebble. 

ليس مطلوبا امتلاك حصاة أو أي معرفة سابقة للغة C لهذا البرنامج التعليمي. 

1. إعداد المشروع 

توجد حاليًا بيئتان يمكنك من خلالها إنشاء تطبيقات Pebble. CloudPebble من الممكن لتطوير تطبيقات Pebble في المتصفح من خلاله. هذا أمر رائع إذا كنت تستخدم نظام التشغيل Windows أو تستخدم جهازًا أقل قوة. 

الخيار الآخر ، والخيار الذي سيتبعه هذا البرنامج التعليمي ، هو الحصول على سير عمل التطوير محليًا. يتيح لك ذلك العمل دون اتصال واستخدام محرر من اختيارك. دعونا أولا الحصول على أداة Pebble و SDK المثبتة. 

في الوقت الحالي ، لا يوجد دعم رسمي لأداة Pebble و SDK على Windows ، حيث يرشدك القسم التالي إلى خطوات تثبيت أداة Pebble و SDK على OS X و Linux.توصي Pebble باستخدام CloudPebble للتطوير على Windows ، ولكن يمكنك أيضًا استخدام جهاز ظاهري Linux. 

أسهل طريقة لتثبيت أداة Pebble على OS X هي من خلال Homebrew . إذا لم تقم بتثبيت برنامج Homebrew ، فيمكنك الحصول على إرشادات التثبيت على موقع Homebrew .  مع تثبيت Homebrew ، يمكنك تثبيت أداة Pebble باستخدام الأمر التالي: 

هناك بعض الخطوات الإضافية التي يجب اتخاذها لتثبيت أداة Pebble و SDK على نظام التشغيل Linux. لدى Pebble دليل تفصيلي متاح يمكنك متابعته.  b

و حصاة تتضمن واجهة سطر الأوامر العديد من الأوامر مريحة. يمكنك سرد هذه الأوامر عن طريق تشغيل pebble - المساعدة أو pebble - h .  أحد الأوامر بإعداد مشروع جديد مع بعض التعليمات البرمجية الأساسية. قم بإنشاء دليل جديد وقم بتشغيل الأمر التالي في جذر الدليل الجديد: 

إذا كانت هذه هي المرة الأولى التي تقوم فيها بإنشاء تطبيق Pebble ، فستتم مطالبتك بقبول شروط الاستخدام ورخصة المطور Pebble. بمجرد قبولك ، يتم تنزيل أحدث إصدار من Pebble SDK (3.11.1 وقت كتابة هذا التقرير). 

بعد تثبيت Pebble SDK ، يتم إعداد مشروع Pebble الأساسي في الدليل الحالي.لإنشاء التطبيق وتثبيته وتشغيله ، يلزمك إجراء ما يلي.  أولا ، تأكد من أنك في جذر مشروع Pebble الخاص بك. في هذه الحالة ، نحن في جذر دليل hello-pebble . 

بعد ذلك ، قم بتشغيل الأمر build pebble . عندما يتم ترجمة التعليمات البرمجية ، يجب أن ترى الرسالة "إنشاء" انتهت بنجاح وعدد من الملفات الجديدة في دليل الإنشاء.  الملف الوحيد الذي تحتاج إلى القلق بشأنه الآن هو hello-pebble.pbw . هذا هو تطبيقك الذي سيتم تثبيته على الساعة. 

لتشغيل التطبيق ، نستخدم المحاكي Pebble الذي يأتي مع Pebble SDK. يستخدم Pebble المحاكي QEMU مفتوح المصدر . حاليا ، هناك ثلاثة أجيال من بيبل المتاحة لتطوير.  Pebble and Pebble Steel هي الجيل الأصلي من Pebble. يدعم Pebble Time 64 لونًا ويستخدم الإصدار 3.x الأحدث قليلاً من نظام التشغيل. 

إن Pebble Time Round مطابقة تقريبًا لوقت Pebble Time باستثناء العرض الدائري والأكبر. يستخدم Pebble أسماء منصة للتمييز بين الأجيال الثلاثة من Smartwatches Pebble. 

  • Aplite هو اسم المنصة المستخدم في Pebble and Pebble Steel. 
  • البازلت هو اسم المنصة للوقت بيبل. 
  • و Chalk هو اسم النظام الأساسي لـ Pebble Time Round. 

يمكننا إطلاق أي من هذه المحاكيات باستخدام علامة --emulator بعد الأمرpebble install ، وذلك بتمرير النظام الأساسي الذي نريد استهدافه. على سبيل المثال ، إذا أردنا تشغيل تطبيقنا على النظام الأساسي لـ Pebble Time ، فسنقوم بتشغيل الأمر التالي في الدليل الجذر لمشروع Pebble:   

يقوم هذا الأمر بتشغيل المحاكي ، ويبدأ النظام الأساسي المحدد ، ويقوم بتثبيت ملف .pbwالمخزّن في دليل الإنشاء . هذا ما يجب أن تراه في المحاكي: 

Hello Pebble Basic App

ليس لدى ساعة بيبل شاشة تعمل باللمس وتأتي مع أربعة أزرار، أعلى ، أسفل ، تحديد ، و العودة .  ومحاكاتها هذه مع ما أعلى ، أسفل، حق ، و ترك مفاتيح على لوحة المفاتيح على التوالي. بالضغط على هذه المفاتيح ، يمكنك تصفح التطبيق الذي قمت بإنشائه. 

إذا فتحنا شفرة المصدر الخاصة بالمشروع ، سترى أنه مكتوب بلغة C. من أجل استخدام Pebble.js للمشروع ، سنستخدم نموذجًا يمكن أن يبدأ بنا بشكل أسرع. لا يزال Pebble.js في مرحلة الإصدار التجريبي في وقت كتابة هذا الكتاب ، لذا لا يزال بالإمكان تغيير بعض الأمور في المستقبل. 

اترك دليل المشروع ، وأنشئ دليلًا جديدًا ، واستنساخ ريبو GitHub كما هو موضح  أدناه.

وبمجرد الانتهاء من استنساخ الريبو ، افتحه في محرر نصوص ، وانظر حولك. مصدر التطبيق يمكن العثور على التعليمات البرمجيةفي دليل src . داخل هذا الدليل، لديك ثلاثة أدلة أخرى، شبيبة ، ببساطة ، UTIL ، و main.c الملف. 

ل شبيبة الدليل حيث وضعنا رمز التطبيق. و ببساطة الدليل حيث التعليمات البرمجية الأصلية هو أن وظائف جافا سكريبت الوصول و UTIL الدليل على الرمز الأصلي أننا لسنا في حاجة للمس.  نقطة الدخول للتطبيق هو الذهاب للعيش فيشبيبة / app.js . إذا قمنا بإنشاء هذا التطبيق وتشغيله ، يجب أن تشاهد النتيجة التالية في المحاكي: 

Hello Pebblejs Boilerplate App

افتح js / app.js ، قم بإلقاء نظرة ، ثم قم بحذف هذا الملف. سنبدأ من الصفر. 

2. دعونا نبني التطبيق 

أول شيء نحتاج إلى تعلمه هو كيفية عرض النص على الشاشة. يحتوي Pebble.js على إطار عمل لواجهة المستخدم من أجل إنشاء العناصر .  باستخدام هذا الإطار ، يمكنك إنشاء عناصر ، مثل النص والمستطيلات والصور. أضف السطر التالي إلى app.js لطلب إطار العمل. 

العنصر الأول الذي سنستخدمه في هذا البرنامج التعليمي هو Window . ويندوز هي اللبنات الرئيسية لتطبيقات Pebble. هناك ثلاثة أنواع من النوافذ. 

  • بطاقة يمكن استخدامها لعرض النص بطريقة المنسقة مسبقا، مثل العنوان في الأعلى، عنوان فرعي تحته، ومنطقة الجسم لبعض النصوص. 
  •  A القائمة يستخدم لعرض قائمة من الخيارات.
  • النافذة هي الأكثر مرونة ويسمح لك لإضافة عناصر مختلفة لذلك. 

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

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

بناء المشروع وتثبيت التطبيق لرؤية النتيجة. بدلاً من القيام بالخطوتين على حدة ، أفضل أن أقوم بربط الأوامر معًا وتشغيل الأمر التالي: 

إذا كنت تريد اختبار كل الأنظمة الأساسية الثلاثة في وقت واحد ، فيمكنك إضافة أوامر التثبيت لكل محاكي: 

ستلاحظ أن aplite و البازلت تبدو متطابقة تقريبا في حين الطباشير لا تبدو جيدة جدا. هذا بسبب الشاشة المستديرة وأبعاد الشاشة.  سنناقش كشف المنصة في لحظة. في الوقت الحالي ، نمضي قدمًا ببعض الوظائف الأساسية. 

في مقتطف الشفرة الموضح أعلاه ، نقوم بإنشاء عنصر Text باستخدام طريقة Text (). يأخذ إنشاء مثيل النص () كائن كمعلمة لتكوين عنصر النص .  و حجم يحدد مفتاح حجم مستطيل (التي يحددها Vector2 سبيل المثال) الذي عنصر النص يتم رسمه.  تحتوي قيمة مفتاح النص على السلسلة التي نريد عرضها. ثم نضيف عنصر النص إلى النافذة قبل أن نطلق على show () على النافذة لعرضه. 

Stripped Down Pebblejs App

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

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

وأنا أعلم أنني أريد أن أنشأ بلدي رئيسية النافذة عندما يبدأ التطبيق، وحساب عدد الأيام المتبقية حتى 15 ديسمبر 2017، ثم قم بإضافة هذا العدد إلى شاشتي في المركز. لا شيء يتولع جدا. 

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

يمنحك تشغيل التطبيق الناتج الموضح أدناه. 

Creating a Window and Showing Text

كما شرحت سابقا ، هناك عدد من خطوط النظام المتاحة. في هذا البرنامج التعليمي ، سنلتزم بأحد خطوط النظام ، Bitham 42 Bold ، ونضعه أقرب قليلاً إلى مركز الشاشة ، أفقياً وعمودياً.  على الخط يأخذ الخيار سلسلة من الخط الذي تريد استخدامه ك المشار إليها في الوثائق . يتم تحديد الموضع بواسطة مثيلVector2 آخر ، والذي يحدد الموضع الأفقي والرأسي للنص . 

تغيير تكوين النص مثل هذا: 

يجب أن يكون لديك الآن شيء يشبه ما يلي: 

Font Changed and Centered

دعنا نستبدل القيمة المشفرة بالعدد الصحيح من الأيام. عندما استنسخنا المشروع من GitHub ، حصلنا على جميع الملفات اللازمة للوصول إلى واجهات برمجة التطبيقات للجهاز والعديد من الأدوات المساعدة الأخرى لإنشاء تطبيق Pebble باستخدام JavaScript.  واحدة من هذه المرافق هيمكتبة moment.js ، والتي يمكنك العثور عليها في دليل البائع . هذا سيجعل الحساب أسهل. 

يتطلب moment.js في التطبيق وتعيين daysRemaining متغير لوظيفة مع التنفيذ التالي: 

بعد ذلك ، غيّر المرجع إلى daysRemaining إلى استدعاء دالة مثل هذا: 

إذا قمت بتجميع وتشغيل التطبيق ، يجب أن تشاهد العدد الصحيح من الأيام حتى يتم إصدار Star Wars ، الحلقة الثامنة. يمكننا ترك هذا هنا ولديك تطبيق يعرض عدد الأيام حتى الحدث الذي نريد تتبعه ، ولكن لماذا لا ننتهز الفرصة لإضافة بعض الميزات إلى التطبيق. 

أولاً ، دعنا نغير لون خلفية النافذة ولون النص بحيث تكون الخلفية بيضاء والنص أظلم. 

ودعونا نضيف عنصر نص آخر للإشارة إلى ما يمثله الرقم. نقوم بإنشاء عنصر نص جديد ونقوم بتمرير خيارات الحجم والحجم والخط ، إلخ. 

بعد ذلك ، نضيف عنصر النص إلى النافذة الرئيسية بعد إضافة كائن النص . 

وأخيرًا ، لنقم بإضافة عنصر نص ثالث للإشارة إلى أن العد التنازلي يكون بالأيام. 

Show 633 Days Until Countdown Ends

للتنقل ، يستخدم Pebble أزرار الأجهزة بدلاً من شاشة اللمس ، الموجودة في معظم الساعات الذكية الأخرى. يمكننا إضافة القدرة على السماح للمستخدم بالتعمق في تطبيقنا باستخدام هذه المدخلات.  لنفترض ، على سبيل المثال ، أننا أردنا أيضًا عرض تاريخ إصدار الأفلام القادمة الأخرى في امتياز Star Wars. تم إصدار Rogue One هذا العام ويوجد بالفعل تاريخ إصدار لـ Episode IX . 

يؤدي التفاعل مع الأزرار إلى تشغيل الأحداث التي يمكننا الاشتراك فيها. عند اكتشاف حدث ما ، يمكننا تحديد الإجراء الذي يجب اتخاذه.  إذا قام المستخدم بالنقر فوق ، يمكننا إنشاء إطار جديدلاحتواء تاريخ إصدار Rogue One وعرض عدد الأيام حتى إصدار هذا الفيلم. 

دعونا الاشتراك في أسفل الزر وبناء نافذة جديدة . و على () طريقة تأخذ المعلمات الثلاث، العمل، الزر، ومعالج.  كما ذكر من قبل ، فإن القيم المحتملة للمعلمة الثانية هي أعلىأو أسفل أو حدد أو ظهر . عادة ما يتم النقر فوق الإجراء ، ولكن لديك أيضًا خيار استخدام longClick . 

تشغيل التطبيق وستلاحظ أنك تحصل على شاشة سوداء عند النقر فوق. قد تسأل نفسك كيف يمكنك الوصول إلى وحدة التحكم لمشاهدة سجلات Pebble. 

عندما يكون التطبيق قيد التشغيل ، يمكننا إرفاق وحدة تحكم أخرى به والحصول على السجلات عن طريق تشغيل سجلات pebble - البازلت المُحاكي .  استبدل اسم محاكي إذا كنت تستخدم أحد المحاكيات الأخرى. يمكنك الآن رؤية أن وحدة التحكم تسجل للأسفل عند النقر فوق الزر لأسفل. 

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

إذا كنت ترغب في ذلك ، يمكنك إضافة شاشة لـ Episode IX أيضًا. سأترك ذلك كتحدي لتجرب نفسك. 

New Screen Added for Two Additional Countdowns

يجب أن نصلح مشكلة العرض للمستخدمين مع جولة Pebble Time. من أجل القيام بذلك ، نحتاج إلى اكتشاف المنصة التي يعملون عليها وتحديث واجهة المستخدم وفقًا لذلك. 

في تطبيقك ، يمكنك الوصول إلى كائن عام ، Pebble . يحتوي هذا الكائن على بعض الوظائف التي يمكننا استخدامها ، أحدها يجري getActiveWatchInfo () ، والذي يقوم بإرجاع كائن يحتوي على معلومات وقت تشغيل النظام الأساسي. 

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

في الجزء العلوي من app.js ، نحضر معلومات مراقبة الحركة وتحقق مما إذا كان اسم النظام الأساسي الحالي مساوياً للطباشير . 

إذا قمت بتشغيل التطبيق الخاص بك على النظام الأساسي Chalk ، يجب أن تشاهد التالي: 

Viewing the App In the Pebble Round

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

يحتوي Pebble Time Round على شاشة عرض 180px x 180px. هذا يعني أننا بحاجة إلى تعديل إحداثيات X للكائنات Vector . نخلق ثلاثة متغيرات لمساعدتنا في ذلك. 

سيبدو الرمز النهائي على النحو التالي: 

أنا متأكد من أنك توافق على وجود مجال واسع للتحسين. نحن نكرر الشفرة في أماكن مختلفة ، وهي ليست ممارسة جيدة.   ومع ذلك ، آمل أن يكون لديك الآن فهم أساسي حول كيفية إنشاء تطبيقات لـ Pebble باستخدام JavaScript و Pebble SDK. 

في القسم الأخير من هذا البرنامج التعليمي ، أود أن أريك كيفية تحميل تطبيقنا على متجر  تطبيقات Pebble.

App Corrected for Pebble Time Round

3. تحميل إلى متجر التطبيقات بيبل 

قبل تحميل التطبيق ، هناك شيء واحد نحتاجه للاهتمام. نظرًا لأننا بدأنا هذا التطبيق من نموذج ، فهناك بعض التفاصيل في appinfo.json ، وهو البيان الخاص بتطبيقنا ، والتي نحتاج إلى تغييرها.  يمكنك العثور على هذا الملف في جذر المشروع. مفتوحةappinfo.json وتغيير COMPANYNAME ، SHORTNAME ، و longnameالقيم. 

آخر شيء نحتاجه هو UUID (معرف فريد عالميًا). يحتوي الملف الظاهر على واحد بالفعل ، ولكن عند محاولة تحميل ملف .pbw إلى متجر التطبيقات ، ستحصل على خطأ لأن UUID قيد الاستخدام بالفعل. 

 أسهل طريقة للحصول على واحدة هي أخذها من تطبيق hello-pebble الأصلي الذي أنشأناه في بداية هذا البرنامج التعليمي ، لأننا لن نقوم بتحميل هذا التطبيق إلى متجر التطبيقات.  إذا قمت بحذف المشروع ، قم بإنشاء مشروع جديد وانسخ UUID من هذا المشروع. بمجرد الانتهاء من ذلك ، قم بإنشاء بنية جديدة. 

لدينا الآن تطبيق جاهز للتحميل إلى متجر تطبيقات Pebble.  توجه إلى مدخل مطور Pebble وسجل للحصول على حساب أو تسجيل الدخول إذا كان لديك بالفعل. بمجرد تسجيل الدخول ، انقر فوق الارتباط الذي يشير إلىنشر تطبيق  Pebble .

Publish a Pebble App

في الصفحة التالية ، اختر Create a Watchapp في الأسفل. 

Create a Watchapp

شكل الصفحة التالية يبدو شاقاً بعض الشيء ، لكن الحقول تشرح نفسها بنفسها. لإكمال التقديم ، يلزمك تحميل مادتين على الأقل ، كلاهما رموز لتطبيقك. 

Create a Pebble Wachapp Profile

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

وبمجرد الانتهاء من ذلك ، ستعود إلى شاشة النظرة العامة ويتم التحقق من الملف .pbw . هذا عادة ما يستغرق سوى بضع ثوان. بمجرد التحقق ، يكون التطبيق جاهزًا للنشر.   إذا واجهتك أي مشاكل هنا وفشل التحقق ، فسيتم تقديمك برسالة مفيدة تشرح سبب فشل عملية التحقق. 

Release Uploaded and Ready to Publish

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

تحتوي أداة Pebble CLI على طريقة رائعة وسهلة لأخذ لقطات الشاشة. تشغيل لقطة شاشة PIL. FILENAME لقطة شاشة من المحاكي الجاري قيد التشغيل وحفظها في الدليل الحالي. 

بعد تحميل لقطات الشاشة وملء وصف مختلف المنصات ، تكون مستعدًا لنشر أول تطبيق Pebble الخاص بك. 

استنتاج 

تعلمت في هذه المقالة كيفية تثبيت Pebble SDK وإعداده ، وكيفية استخدام بعض أوامر Pebble CLI الأساسية ، وكيفية إنشاء تطبيق أساسي باستخدام JavaScript.  وغني عن القول أننا فقط خدشنا السطح في هذا البرنامج التعليمي. هناك الكثير لتعلمه ، ليس فقط حول كتابة تطبيقات Pebble مع JavaScript ، ولكن أيضًا حول تطوير Pebble بشكل عام والأدوات المتاحة لك. 

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.