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

قم ببناء مشغل موسيقى مع PhoneGap: منطق التطبيق

by
Difficulty:BeginnerLength:LongLanguages:

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

وهذا هو الجزء الثاني من السلسلة حول "مشغل صوت أوديرو". في هذه المقالة، نحن ذاهبون لإنشاء منطق الأعمال لمشغلنا. كما سأوضح بعض  تطبيقات cordovaالتي قُدمت في المقالة السابقة.


نظرة عامة


إنشاء المشغل

في هذا القسم، سوف اظهر لك فئة تسمى ( المشغل)، والتي تتيح لنا اللعب، والتوقف، والترجيع والتقديم السريع. الفئة تعتمد اعتماداً كبيرا على الاعلام للتطبيق ؛ دون هذه الأساليب، سيكون مشغلنا عديم الفائدة . بالإضافة إلى طبيعة التطبيق،  هذه الفئة  فيها ميزه ال (( ) alert )  طريقة للإعلان التطبيق . منظر المنبه يختلف بين الأنظمة الأساسية. معظم أنظمة التشغيل المعتمدة تستخدم مربع حوار أصلي  ليس كالآخرين، مثل بادا 2.X، استخدم دالة alert () للمتصفح الكلاسيكية، الذي أقل قابلية للتخصيص. الأسلوب السابق يقبل تعليمات تصل إلى أربعة:

  1. الرسالة: سلسلة تحتوي على الرسالة للعرض
  2. تنبيه إرجاع الاتصال : ارجاع الاتصال لطلب المساعدة عندما مربع حوار التنبيه يتم رفضه
  3. العنوان: عنوان مربع الحوار (القيمة الافتراضية هي "التنبيه")
  4. اسم زر الادراج:نص زر الإدراج في مربع الحوار (القيمة الافتراضية هي "موافق")

نضع في اعتبارنا أن Windows Phone 7 يتجاهل اسم زر الادراج ودائما يستخدم الافتراضي.  Windows Phone 7 و 8  لا يوجد فيهم تنبيه للمتصفح، لذلك إذا كنت تريد استخدام( تنبيه ('messag'؛، يجب عليك تعيين window.alert = navigator.notification.alert.

الآن أن لقد شرحت التطبيقات  المستخدمة من قبل المشغل، يمكننا أن نلقي نظرة على الطريقة التي يصنع بها.لدينا ثلاث خصائص:

  • الإعلام: الرجوع إلى مصدر الصوت الحالي
  • mediaTimer: الذي سوف يحتوي على فاصل معرف تم إنشاؤه باستخدام الدالة setInterval() التي سنقوم بالمرور إلى clearInterval() لتوقيف مؤقت الصوت
  • يشتغل: متغير يحدد إذا كان الصوت الحالي مُشغل أم لا. وبالإضافة إلى الخاصية، الفئة تحتوي أساليب عدة.

أسلوب initMedia()  يهيئ  خاصية الاعلام مع  هدف الmedia الذي يمثل الصوت المختار من قبل المستخدم. هذا الأخير يخطرك باستخدام تطبيق الانذار في حالة حدوث خطأ. هدف  ()playPause, stop، وأساليب seekPosition() يجب ان تكون واضحة، اذا سوف استمر. أساليب resetLayout() و changePlayButton() في غاية البساطة. يتم استخدامها لإعادة تعيين أو تحديث مخطط المشغل وفقا  للإجراءا الذي نفذ بواسطة المستخدم. الأسلوب الأخير المتبقي هو updateSliderPosition()، والذي يشبه  مُمرّر الوقت. الأخير يمتلك القيمة صفر (بداية منزلق) = ك  القيمة الافتراضية للموقع الحالي، باستخدام سمة القيمة="0". يجب تحديث هذا تبعاً لذلك بينما يتم تشغيل الصوت لإعطاء تغذية مرتدة فيما يتعلق بوقت التشغيل المنقضي.

لقد كشفنا جميع التفاصيل المتعلقة بهذه الفئة، حتى هنا  يوجد مصدر التعليمات البرمجية للملف:


إدارة الملفات الصوتية

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

يرجى ملاحظة أن هذا التطبيق فقط قادر على تخزين البيانات الأساسية. ولذلك، لتناسب حاجتنا لتخزين الاهداف، سنستخدم تنسيق JavaScript .JSON لديه فئة للتعامل مع هذا الشكل المسمى JSON. ويستخدم اساليب parse() لتحليل سلسلة وإعادة إنشاء البيانات المناسبة، و stringify() لتحويل الهدف في سلسلة. وكملاحظة أخيرة، أنا لن استخدم المنقط من  التطبيق لأنWindows Phone 7لا يدعمه، حيث سوف نستخدم أساليب setItem() و getItem() لضمان التوافق لكافة الأجهزة.

الآن بعد أن لديك لمحة عامة عن كيف سوف نقوم بتخزين البيانات، دعونا نتحدث عن البيانات التي نحن بحاجة إلى تخزينها . المعلومات الوحيدة التي نحن بحاجتها في كل صوت وجد هي الاسم (اسم الخاصية) ومسارمطلق (الخاصية fullPath). الفئة (ملف التطبيق )أيضا  "ثابت" يسمى(ملحقات ) ،حيث أننا سوف  نضع الملحقات التي سوف تختبر ضد كل ملف. إذا توافقوا ، سيتم تجميع الملف من قبل التطبيق. لدينا طريقة لإضافة ملف (addFile())، أسلوب واحد لحذف ملف (deleteFile())، أسلوب واحد يقوم بحذف قاعدة البيانات بأكملها (deleteFiles())، وأخيراً، اثنين من الأساليب لاسترداد الملف من قاعدة البيانات: getAppFiles() لاسترداد كافة الملفات، و getAppFile() لاسترداد واحد فقط. الفئة لديها أربعة أساليب مقارنة،اثنين ثابتين هما (compare() و compareIgnoreCase()) و اثنين غير ثابتين (compareTo() و compareToIgnoreCase()). الأسلوب الأخير هو الذي يستخدم لاسترداد فهرس ملف معين، getIndex().  فئة (تطبيق ملف ) تمكنك من إجراء جميع العمليات الأساسية التي تحتاجها.

يمكن هنا قراءة التعليمات البرمجية التي تقوم بتنفيذ ما لقد ناقشنا :


فئة الأداة المساعدة

الملف utility.js قصير  جداً ومن السهل فهمه .لا يملك سوى طريقتين. واحد يستخدم لتحويل المللي ثانية  الى سلسلة منسقة سوف تظهر في المشغل، بينما الآخر تنفيذ Java Script  لأسلوب جافا المعروف جيدا من endsWith. 

وإليك المصدر:


بوضع كل ذلك معا

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

التعليمات البرمجية للدالة الموضحة تتضح فيما يلي:


إدارة الروابط الخارجية

ذكرت في الجزء السابق من هذه السلسلة، أن نقطة مثيرة للاهتمام من صفحة الائتمانات كان السمة target = "_blank" المطبقة على الروابط. هذا القسم سوف يشرح لماذا اسلوب openLinksInApp() من فئة التطبيق منطقي.

ذات مرة،  cordova اعتادت لفتح الروابط الخارجية في ويب cotdova نفسه الذي كان يشغل التطبيق. عندما كان رابط مفتوح والمستخدم نقر فوق زر "الخلف"، كانت تعرض الصفحة المعروضة سابقا تماما كما كانت قبل أن يغادر المستخدم. في الإصدار الأحدث، هذا قد تغير. في الوقت الحاضر، يتم فتح الروابط الخارجية، بشكل افتراضي، إذا كان عنوان URL في القائمة البيضاء للتطبيق الخاصة بك ,فسيتم باستخدام WebView cordova.محددات مواقع المعلومات التي ليست في القائمة البيضاء الخاصة بك يتم فتحها باستخدام مستعرض التطبيقAPI . إذا كنت لا تقوم بإدارة الروابط بالطريقة الصحيحة، أو إذا يضغط المستخدم رابط في مستعرض التطبيق أوالنظام وثم يختار العودة، يتم فقدان كافة التحسينات من jQuery للجوال. يحدث هذا السلوك لأنه يتم تحميل ملفات CSS و JavaScript بواسطة الصفحة الرئيسية، وثم يتبعه  تحميلها باستخدام AJAX. قبل الكشف عن الحل، دعونا نلقي نظرة على ماهية متصفح التطبيق

متصفح التطبيق هو مستعرض ويب الذي يظهر في التطبيق الخاص بك عند استخدام استدعاء window.open.

هذا التطبيق يحتوي ثلاث طرق:

  • addEventListener(): يسمح لك بالاستماع للأحداث ثلاثة (تحميل البدء ، تحميل الخروج، والخروج) وإرفاق دالة التي يتم تشغيلها بمجرد أن يتم إطلاق تلك الأحداث
  • removeEventListener(): تزيل وحدة إصغاء مرفقة سابقا.
  • close (): يستخدم لإغلاق صفحة متصفح التطبيق

اذا، ما هو الحل؟ هدف الدالة  openLinksInApp()، مقترناً بالقائمة البيضاء المحددة في ملف التكوين، ويهدف إلى التقاط النقرات على كافة الروابط الخارجية المعترف بها باستخدام سمة target= "_blank"  وفتحهم باستخدام أسلوب window.open (). مع هذا الأسلوب،نحن سوف نتجنب المشكلة الموصوفة، ومشغلنا سوف يواصل البحث والعمل كما هو متوقع.


الجزء التالي

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

Advertisement
Advertisement
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.