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

بناء AudioPlayer مع PhoneGap: إعداد التطبيق

by
Difficulty:BeginnerLength:LongLanguages:

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

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


نظرة عامة


ميزات المشروع

وسيكون التطبيق سنبدأ النامية في لحظات قليلة مشغل صوت أساسي تسمى "مشغل الصوت أوديرو". ستكون لها فائدة تذكر المتطلبات. سيقوم هذا التطبيق بالبحث من خلال نظام الملفات وجمع أي ملفات صوتية ، والتي يمكن للمستخدم بعد ذلك الاستماع إليها. سيقوم التطبيق بجمع الملفات مع أي من الملحقات التالية:.mp3,.wav,.m4a. ضع في اعتبارك أن التنسيقات المدعومة تعتمد بشكل كبير على النظام الأساسي الذي تقوم بتشغيل التطبيق عليه ، لذلك اختر التنسيقات التي تعمل في العديد من الأنظمة الأساسية.

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

يمكنك رؤية الصفحة الموضحة من خلال الاطلاع على لقطة الشاشة أدناه:

Audio files list

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

يمكنك رؤية شكل ومظهر اللاعب في الصورة أدناه:

The Application player interface

التكنولوجيات المعنية

ستمنحك القائمة التالية فهمًا مفصلاً لما سنستخدمه:

  • HTML: سيتم استخدامه لإنشاء ترميز الصفحات. عندما يكون ذلك مناسباً، وسوف تستخدم بعض العلامات HTML5 الجديدة.
  • CSS: سيتم تنفيذ معظم التحسينات CSS بواسطة jQuery Mobile ، لذلك سأستخدم فقط بضعة أسطر من شفرة CSS المخصصة. هي تستخدم أساسا للاعب نفسه.
  • جافا سكريبت: هذه هي اللغة التي سوف تستخدم لتطوير منطق الأعمال.
  • مسج: سأستخدم jQuery بشكل أساسي لتحديد العناصر وإرفاق معالجات الأحداث.
  • مسج موبايل: أنها ستستخدم لتحسين واجهة التطبيق وأنه الأمثل للأجهزة النقالة. تشتمل بعض الأدوات المستخدمة على Listview و Dialog و Slider. سأضع أيضًا بعض الأزرار داخل رأس الصفحة وتذييلها لإنشاء شريط أدوات بسيط. الإصدار المستخدم هو 1.3.0.
  • Cordova (PhoneGap): سيتم استخدام Cordova لفك الملفات حتى تتمكن من تجميعها كما لو كنت قد بنيت تطبيقًا أصليًا. لإنشاء برنامج Audero Audio Player ، سنستفيد من العديد من واجهات برمجة التطبيقات التي يوفرها إطار العمل ، مثل Storage و InAppBrowser و Notification و File و Media. الإصدار المستخدم هو 2.3.0.

بالإضافة إلى القائمة أعلاه ، سأستخدم أيضًا واجهات برمجة تطبيقات Cordova هذه

  • ملف API: API القراءة والكتابة والتنقل الهرمية نظام الملف، فإنه يوفر مجموعة من الكائنات للعمل مع الملفات والدلائل. على سبيل المثال ، سنستخدم كائن DirectoryReader للتنقل في نظام الملفات ، باستخدام أسلوبه readEntries () ، والبحث في الأصوات. سنقوم أيضا استخدام كائن لوكالفيليسيستيم للحصول على الجذر أنظمة الملفات من الجهاز باستخدام أسلوب requestFileSystem(). يمكنك العثور على مزيد من المعلومات في الوثيقة الرسمية ملف API.
  • InAppBrowser API: إنه متصفح ويب يظهر في تطبيقك عند استخدام مكالمة window.open. أنها ليست أكثر من ذلك بكثير، لكن كما ستكتشف لاحقاً في هذا المقال، إدارة الارتباطات الخارجية بشكل صحيح مع API هذا يتسم بأهمية حيوية. إذا كنت ترغب في قراءة المزيد عن الأساليب التي تقدمها هذه API ، يمكنك إلقاء نظرة على المستند الرسمي InAppBrowser.
  • تخزين API: يوفر هذا API الوصول إلى خيارات التخزين الخاصة بالجهاز. سنقوم على وجه التحديد باستخدام تطبيق قرطبة لواجهة برمجة تطبيقات تخزين الويب وطرق تخزين وتخزين ملفات الصوت. في حال كنت تحتاج شرحاً متعمقا، الرجوع إلى الوثيقة API التخزين المحلية.
  • واجهة برمجة تطبيقات الوسائط: يوفر كائن الوسائط القدرة على تسجيل وتشغيل الملفات الصوتية على الجهاز. هذا مفتاح API للاعب وسنقوم باستخدام جميع الأساليب تقريبا. على سبيل المثال، سوف نستخدم طريقة play () لتشغيل الأصوات والأسلوب stop () لإيقاف تشغيل الصوت والأسلوب getDuration() لاسترداد مدة معالجة الملف الحالي. أكثر حول هذا الموضوع يمكن العثور على في مستندات "المعهد وسائل الإعلام".
  • واجهة برمجة التطبيقات للإشعار: تسمح لك بإشعار المستخدم بإشعارات مرئية ومسموعة. سوف نستخدم أسلوب alert () لإعلام المستخدم في حالة حدوث أخطاء. للحصول على نظرة عامة أكثر تفصيلاً على واجهة برمجة التطبيقات هذه ، اقرأ مستندات واجهة برمجة تطبيقات الإعلام.

قبل مواصلة برنامجنا التعليمي، أريد أن أؤكد أن كوردوفا يستخدم ملف JavaScript مختلف لكل نظام تشغيل. لذلك ، إذا كنت ترغب في ترجمة التطبيق بنفسك ، فستحتاج إلى استخدام حزمة IDE-SDK محددة. على سبيل المثال، إذا كنت ترغب في إنشاء إصدار الروبوت لاعب (وبالتالي خلق.apk النسبي)، يجب عليك استخدام Eclipse و Android SDK. استخدام حزم مختلفة لكل منصة يمكن أن يكون مشكلة، حيث سيتم وضع "مشغل الصوت أوديرو" مع الافتراض بأنه سوف يتم التجميع باستخدام أدوبي سحابة الخدمة، ودعا أدوبي PhoneGap بناء. سوف تتضمن هذه الخدمة مكتبة Cordova الصحيحة لكل نظام أساسي في وقت التحويل البرمجي.


هيكل المشروع

سيكون هيكل المشروع واضحًا تمامًا. للبدء ببناء اللاعب، قم بإنشاء مجلد وتسميته "أوديرو-الصوت-لاعب". الآن، بإنشاء ثلاثة مجلدات داخل هذا المجلد مع الأسماء التالية: المغلق، والصور، وشبيبة. بمجرد القيام بذلك ، قم بتنزيل jQuery (سأستخدم الإصدار 1.8.3) و jQuery Mobile (الإصدار 1.3.0) المكتبات. قم بتحريك jQuery وملف جافا سكريبت jQuery Mobile داخل المجلد "js" ، ثم قم بوضع ملف jQuery Mobile CSS في المجلد "css". وأخيراً، المجمعة مكان الهاتف النقال مسج الصور في مجلد "الصور". نظرًا لأننا غيّرنا قليلاً البنية الأصلية لـ jQuery Mobile ، نحتاج إلى ضبط المسارات التي تشير إلى الصور داخل ملف CSS الخاص بها. على وجه التحديد، نحن بحاجة إلى استبدال "الصور/" الجزء مع هذه السلسلة "... /الصور/". إذا كنت تستخدم ميزة الآلي الخاص بك محرر الذي تم اختياره، تحقق من أن استبدال السلسلة خمس مرات.

الآن بعد أن قمت بإعداد الإطار ، يمكنك المتابعة إلى الخطوة التالية. في جذر مجلد المشروع، سنقوم إنشاء ملفات HTML، ووضع الرمز الافتراضي للتطبيق وملف Adobe PhoneGap بناء التكوين، وشاشة البداية الافتراضية. سنقوم أيضًا في هذا البرنامج التعليمي بإنشاء الملفات التالية:

  • index.html: هذه هي نقطة الدخول للتطبيق وسوف نضع فيها الروابط للمكتبات المستخدمة، من الداخل<head>القسم.</head>
  • ملفات-list.html: هذه هي الصفحة حيث سيكون لديك قائمة بالأصوات المخزنة على جهازك ، مجمعة كما شرحت مرة أخرى في مقدمة هذه المقالة. وكما سترى لاحقاً، عليك أيضا شريط أدوات قليل الذي يسمح لك بالعودة إلى الصفحة الرئيسية (الزر في الزاوية اليسرى العليا) وتحديث قائمة الأصوات (الزر في الزاوية اليسرى العليا).
  • player.html: هذا يحتوي ببساطة على ترميز لاعب الصوت.
  • aurelio.html: هذه هي صفحة أرصدة التطبيقات ؛ أنه يحتوي على معلومات حول مؤلف التطبيق.
  • style.css: يحتوي هذا الملف على بضعة أسطر مخصص من CSS المستخدمة من قبل التطبيق، التي تستخدم أساسا نمط أزرار لاعب.
  • jquery.mobile.config.js: وسيتضمن هذا لدينا تكوين مخصص لإطار الجوال مسج.
  • appFile.js: يحتوي هذا الملف على الفئة التي تسمى AppFile والتي سنستخدمها لإدارة الأصوات. أنها بمثابة واجهة لملفات الجدول من قاعدة البيانات الخاصة بنا. يسمح لنا هذا الفصل أيضًا باسترداد وتحرير المعلومات الصوتية بالإضافة إلى السماح لنا بإضافة الملفات وحذفها من القائمة المخزنة.
  • player.js: الملف بما في ذلك الفئة ، ودعا لاعب ، الذي يدير لاعب وإعادة تعيين واجهة لاعب.
  • utility.js: هذا هو مجرد اثنين من وظائف المرافق التي يستخدمها مشروعنا ، والتي سوف أشرح أكثر في المقالة التالية من السلسلة.
  • application.js: هذا يشبه الغراء الذي يدمج كل أجزاء مشروعنا معًا. هذه الفئة مسؤولة عن تهيئة سلوك صفحات وصف قبل ربط الأحداث باستخدام الفئات التي ينظر إليها حتى الآن.
  • config.xml: سيحتوي ملف XML هذا على بيانات وصفية للتطبيق وسيتم استخدامها بواسطة خدمة Adobe cloud لتخزين الإعدادات مثل رقم إصدار التطبيق ووصفه.

وهذا هو الكثير من الأشياء لإنشاء، ولكن اعدكم سوف يكون لديك وقتاً طيبا مع هذا المشروع. كملاحظة أخيرة ، بالإضافة إلى الملفات المدرجة ، سيشمل Audero Audio Player بعض الصور الإضافية - مثل أزرار التشغيل / الإيقاف المؤقت والتوقف - التي سيتم وضعها في مجلد "الصور".


الصفحة الرئيسية

سيقوم jQuery Mobile بتحميل جميع الصفحات باستخدام AJAX ، لذلك ما لم تقم بإنشاء تكوينات مخصصة صريحة ، يجب تحميل كافة الملفات المطلوبة بواسطة Audero Audio Player ، مثل ملفات CSS و JavaScript ، من خلال نقطة الإدخال index.html. هذه الصفحة، فضلا عن كونها العنوان والوصف، التطبيق يحتوي على زر للوصول إلى قائمة الأصوات. كما يتضمن تذييلًا يحتوي على زر للوصول إلى معلومات المؤلف.

ويرد المصدر الكامل للصفحة الرئيسية أدناه:

كما سترى في المقطع التالي، الأزرار داخل <header>و <footer>العلامات، استخدم السمة البيانات--إيكونبوس = "notext".</footer> </header> هذه السمة مهمة جدًا لتحقيق التأثير الذي أريده: تخطيطًا متجاوبًا. السمة المذكورة يقول الجوال مسج لإخفاء نص الارتباط، ومفيدة جداً في توفير المساحة لشاشات أصغر حجماً. في القسم التالي ، سوف أقوم بعرض كيفية إرفاق معالج إلى pagebeforecreate وأحداث orientationchange بحيث يمكننا اختبار حجم الشاشة. إذا كان كبير هو العثور على ما يكفي من الشاشة، ستتم إزالة السمة وسيظهر النص. في هذه الحالة ، يعني "كبير بما فيه الكفاية" أن عرض الشاشة أكبر من 480 بكسل.

خطوط جافا سكريبت ملاحظ أيضا قد لاحظت القراء الاثنين فقط أعلاه<body>.</body> تجاهل هذا في الوقت الراهن؛ ونحن سوف الخوض في معنى في وقت لاحق.

ستعطيك لقطة الشاشة هذه مثالاً عما ستبدو عليه الصفحة:

Audero Audio Player homepage

صفحة القائمة

تحتوي هذه الصفحة الصغيرة ، والمعروفة باسم files-list.html ، على بضع أدوات شيقة مثل autodivider ومربع البحث. يتم إنشاء تلك الحاجيات لك من قبل jQuery Mobile ببساطة عن طريق إضافة اثنين من السمات إلى العلامة : data-autodividers = "true" و data-filter = "true". لك رأينا بالفعل كيف تظهر هذه الصفحة في مقطع سابق، وينبغي أن يكون لاحظت أن يحتوي كل عنصر قائمة كبيرة "X" على الجانب الأيمن. هذا هو الزر الذي يسمح للمستخدم بحذف الملف من القائمة وقاعدة البيانات. هذان العنصران هو تأثير قياسي يتحقق باستخدام jQuery Mobile. يمكنك قراءة المزيد حول لهم بالنظر إلى صفحة الوثائق الرسمية.

آخر قطعة من التعليمات البرمجية الجديرة بالمناقشة<div id="waiting-popup">العنصر.</div> وهذا يظهر عند التعليمة البرمجية تحفر في المجلدات في نظام التشغيل للبحث عن الأصوات. البحث عن الصوت هو عملية ثقيلة وحتى الجهاز (S3 المجرة) عانت، حظر البرنامج كامل. وسيكون أفضل حل لهذه المشكلة استخدام خيوط متعددة. بهذه الطريقة ، بينما يبحث التطبيق عن الملفات ، لا يزال بإمكان المستخدم اللعب. ولسوء الحظ، كما تعلمون، جافا سكريبت لا يملك قدرات خيوط متعددة، ولا يوجد شيء يمكنك القيام به لتغيير ذلك. حل آخر قد يكون عرض المحمل أثناء هذه العملية، ولكن فشل هذا النهج أيضا؛ أنها جمدت تماما. ولهذا السبب، اخترت لمنع تفاعل المستخدم تماما مع حوار الذي يمكن فقط أن تكون مغلقة مع البرمجة.

والآن بعد أن أنكم تدركون تماما من النقاط الرئيسية في هذه الصفحة، أنا يمكن قائمة المصدر الكامل:


الصفحة لاعب

صفحة اللاعب (player.html) لا يملك الكثير من الحقائق المثيرة الإشارة إلى. أنها مجموعة من تسميات والروابط مع الأحداث المرتبطة بإدارة الصوت. العنصر الوحيد الجدير بالذكر هو شريط التمرير المستخدم لنقل الصوت للأمام والخلف ، تم إنشاؤه باستخدام عنصر واجهة المستخدم jQuery Mobile.

يمكنك مشاهدة التعليمات البرمجية للصفحة أدناه:


صفحة القروض

Aurelio.html الصفحة هو التأكيد الأقل أهمية، وأيضا بسيط جداً. ومع ذلك أريد أن أذكر شيئين. الأول هو استخدام اثنين العلامات HTML5 الجديدة، <figure>و <article>.</article> </figure> <figure>يمثل عنصر وحدة محتوى، مع التسمية توضيحية اختياري تكون مكتفية ذاتيا-</figure> تسمية توضيحية ووصف يتم توفيرها باستخدام عنصر <figcaption>.</figcaption> <article>يمثل عنصر مكون صفحة التي تتكون من تركيبة مكتفية ذاتيا في مستند أو صفحة، وتطبيق، أو الموقع.</article>

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

الرمز الكامل aurelio.html موضح أدناه:


الجزء التالي

في الدفعة الثانية من هذه السلسلة، سوف نلقي نظرة متعمقة في منطق التطبيق بالنظر في ملفات JavaScript أن الطاقة لدينا لاعب.

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.