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

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

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

نظرة عامة

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

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

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

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

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

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

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

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

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. هذه الصفحة، فضلا عن كونها العنوان والوصف، التطبيق يحتوي على زر للوصول إلى قائمة الأصوات. كما يتضمن تذييلًا يحتوي على زر للوصول إلى معلومات المؤلف.

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

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Audero Audio Player</title>
      <link rel="stylesheet" href="css/jquery.mobile-1.3.0.min.css" type="text/css" media="all" />
      <link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
      <script src="js/jquery-1.8.3.min.js"></script>
      <script src="js/jquery.mobile.config.js"></script>
      <script src="js/jquery.mobile-1.3.0.min.js"></script>
      <script src="cordova.js"></script>
      <script src="js/appFile.js"></script>
      <script src="js/application.js"></script>
      <script src="js/utility.js"></script>
      <script src="js/player.js"></script>
      <script>
         $(document).on('pagebeforecreate orientationchange', Application.updateIcons);
         $(document).one('deviceready', Application.initApplication);
      </script>
   </head>
   <body>
      <div id="home-page" data-role="page">
         <header data-role="header">
            <h1>Audero Audio Player</h1>
         </header>
         <div data-role="content">
            <p id="app-description">
               Audero Audio Player is a basic audio player that searches the file system of a device, collects the audio files found and then allows the user to listen them. This app also
               enables the user to update the list at any time to include files that might have been downloaded after
               running the operation for the first time. You can also remove any unwanted audio - for example, sounds used as notifications in other applications - by clicking an icon on the right side of the song name. The sound list is ordered alphabetically with letter
               dividers to organize and group list items, and it has a search box to filter files.
               You can see the described page by looking at the screenshot below.
            </p>
            <a href="files-list.html" data-role="button">File List</a>
         </div>
         <footer data-role="footer">
            <h3 id="copyright-title">Created by Aurelio De Rosa</h3>
            <a id="credits-button" href="aurelio.html" data-icon="info" data-iconpos="notext" class="ui-btn-right">Credits</a>
         </footer>
      </div>
   </body>
</html>

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

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

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

صفحة القائمة

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

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

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

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1">
   </head>
   <body>
      <div id="files-list-page" data-role="page">
         <header data-role="header">
            <a href="#" data-icon="back" data-iconpos="notext" data-rel="back" title="Go back">Back</a>
            <h1>Media List</h1>
            <a href="#" id="update-button" data-icon="refresh" data-iconpos="notext">Update List</a>
         </header>
         <div data-role="content">
            <ul id="files-list" data-role="listview" data-autodividers="true" data-filter="true" data-split-icon="delete">
            </ul>
         </div>
         <footer data-role="footer">
            <h3 id="copyright-title">Created by Aurelio De Rosa</h3>
            <a id="credits-button" href="aurelio.html" data-icon="info" data-iconpos="notext" class="ui-btn-right">Credits</a>
         </footer>
      <div id="waiting-popup" data-role="popup" data-position-to="window" data-dismissible="false">
         <header data-role="header">
            <h1>Updating</h1>
         </header>
         <div data-role="content">
            <p>Searching audio files, please wait...</p>
         </div>
      </div>
      </div>
   </body>
</html>

الصفحة لاعب

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

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

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1">
   </head>
   <body>
      <div id="player-page" data-role="page">
         <header data-role="header">
            <a href="#" data-icon="back" data-iconpos="notext" data-rel="back" title="Go back">Back</a>
            <h1>Player</h1>
         </header>
         <div data-role="content">
            <div id="player">
               <div id="media-info">
                  <p>You're listening to: <span id="media-name"></span></p>
                  <p>Located at: <span id="media-path"></span></p>
                  <div>
                     Played: <label id="media-played">-</label> of <label id="media-duration">-</label>
                     <input type="range" name="time-slider" id="time-slider" value="0" min="0" max="100" data-highlight="true" />
                  </div>
               </div>
               <a href="#" id="player-play" title="Play / Pause"></a>
               <a href="#" id="player-stop" title="Stop"></a>
            </div>
         </div>
         <footer data-role="footer">
            <h3 id="copyright-title">Created by Aurelio De Rosa</h3>
            <a id="credits-button" href="aurelio.html" data-icon="info" data-iconpos="notext" class="ui-btn-right">Credits</a>
         </footer>
      </div>
   </body>
</html>

صفحة القروض

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

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

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

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Aurelio De Rosa</title>
   </head>
   <body>
      <div id="aurelio-page" data-role="page">
         <header data-role="header">
            <a href="#" data-icon="back" data-iconpos="notext" data-rel="back" title="Go back">Back</a>
            <h1>Aurelio De Rosa</h1>
         </header>
         <div id="content" data-role="content">
            <div class="person">
               <figure class="photo">
                  <img src="images/aurelio-de-rosa.png" alt="Photo of Aurelio De Rosa" />
                  <figcaption>Aurelio De Rosa</figcaption>
               </figure>
               <article>
                  <p>
                     I am an Italian web and app developer with a Bachelor's degree in Computer Sciences and more than
                     5 years' programming experience using HTML5, CSS3, JavaScript and PHP. I mainly use the
                     LAMP stack and frameworks like jQuery, jQuery Mobile, Cordova (PhoneGap) and Zend Framework.
                     My interests include web security, web accessibility, SEO and WordPress.
                  </p>
                  <p>
                     I'm currently self-employed, working with the cited technologies, and I'm also a contributor to the
                     SitePoint and Tuts+ network where I write articles pertaining to the topics I work with.
                  </p>
               </article>
               <article>
                  <h2>Contacts</h2>
                  <ul data-role="listview" data-inset="true">
                     <li>
                        <a href="http://www.audero.it" target="_blank">
                           <img src="images/website-icon.png" alt="Website icon" />
                           Visit my website: www.audero.it
                        </a>
                     </li>
                     <li>
                        <a href="mailto:aurelioderosa@gmail.com" target="_blank">
                           <img src="images/email-icon.png" alt="Email icon" />
                           Drop me an e-mail: aurelioderosa@gmail.com
                        </a>
                     </li>
                     <li>
                        <a href="mailto:a.derosa@audero.it" target="_blank">
                           <img src="images/email-icon.png" alt="Email icon" />
                           Drop me an e-mail (alternative address): a.derosa@audero.it
                        </a>
                     </li>
                     <li>
                        <a href="https://twitter.com/AurelioDeRosa" target="_blank">
                           <img src="images/twitter-icon.png" alt="Twitter icon" />
                           Follow me on Twitter (@AurelioDeRosa)
                        </a>
                     </li>
                     <li>
                        <a href="http://it.linkedin.com/in/aurelioderosa/en" target="_blank">
                           <img src="images/linkedin-icon.png" alt="LinkedIn icon" />
                           View my profile on LinkedIn
                        </a>
                     </li>
                     <li>
                        <a href="https://bitbucket.org/AurelioDeRosa" target="_blank">
                           <img src="images/bitbucket-icon.png" alt="BitBucket icon" />
                           Visit my repository on BitBucket (AurelioDeRosa)
                        </a>
                     </li>
                  </ul>
               </article>
            </div>
         </div>
      </div>
   </body>
</html>

الجزء التالي

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