Bangun AudioPlayer dengan PhoneGap: Pengaturan Aplikasi

() translation by (you can also view the original English article)

Anda tidak perlu menggunakan teknologi khusus platform untuk mengembangkan aplikasi yang kuat dan menarik. Seri ini akan mengajarkan Anda cara membuat aplikasi hibrida - khususnya pemutar audio - menggunakan teknologi web dan kerangka kerja seperti jQuery Mobile dan Cordova (juga dikenal sebagai PhoneGap). Kerangka pertama akan digunakan untuk membuat antarmuka, sementara beberapa API yang kedua, seperti Media dan File, akan digunakan untuk mengembangkan logika bisnis.

Ikhtisar Seri

Fitur Proyek

Aplikasi yang akan kami mulai dalam beberapa saat akan menjadi pemutar audio dasar yang disebut Audero Audio Player. Ini akan memiliki persyaratan utilitas minimal. Aplikasi ini akan mencari melalui sistem file dan mengumpulkan file audio apa pun, yang kemudian dapat didengarkan oleh pengguna. Aplikasi ini akan mengumpulkan file dengan salah satu ekstensi berikut: .mp3, .wav, .m4a. Perlu diingat bahwa format yang didukung sangat bergantung pada platform tempat Anda menjalankan aplikasi, jadi pilih format yang berfungsi di banyak platform.

Audero Audio Player juga memungkinkan pengguna untuk memperbarui daftar kapan saja untuk memasukkan file lain yang telah mereka unduh setelah menjalankan operasi untuk pertama kalinya. Pengguna juga dapat menghapus audio yang tidak diinginkan dari daftar dengan mengklik ikon di sisi kanan nama audio. Daftar ini disusun berdasarkan abjad dengan pembagi huruf untuk mengatur dan mengelompokkan item daftar. Daftar ini memiliki kotak pencarian untuk menyaring file-file juga.

Anda dapat melihat halaman yang dideskripsikan dengan melihat screenshot di bawah ini:

Setelah pengguna memilih file, controller pemain akan ditampilkan. Kontroler menunjukkan nama file, jalur lokasi, waktu dan durasi pemutaran. Ini termasuk tombol untuk play / pause, stop, dan slider untuk memindahkan audio bolak-balik.

Anda dapat melihat tampilan dan nuansa pemain di foto di bawah ini:

Teknologi Terlibat

Daftar berikut ini akan memberi Anda pemahaman mendetail tentang apa yang akan kami manfaatkan:

HTML: Ini akan digunakan untuk membuat markup halaman. Bila perlu, saya akan menggunakan beberapa tag HTML5 baru.
CSS: Sebagian besar peningkatan CSS akan dilakukan oleh jQuery Mobile, jadi saya hanya akan menggunakan beberapa baris kode CSS khusus. Ini terutama digunakan untuk pemain itu sendiri.
JavaScript: Ini adalah bahasa yang akan saya gunakan untuk mengembangkan logika bisnis.
jQuery: Saya akan menggunakan jQuery terutama untuk memilih elemen dan melampirkan pengendali event.
jQuery Mobile: Ini akan digunakan untuk meningkatkan antarmuka aplikasi dan mengoptimalkannya untuk perangkat seluler. Beberapa widget yang digunakan termasuk ListView, Dialog, dan Slider. Saya juga akan menaruh beberapa tombol di dalam header dan footer halaman untuk membangun toolbar sederhana. Versi yang digunakan adalah 1.3.0.
Cordova (PhoneGap): Cordova akan digunakan untuk membungkus file sehingga Anda dapat mengkompilasi mereka seolah-olah Anda membangun aplikasi asli. Untuk membangun Audero Audio Player kami akan mengambil keuntungan dari beberapa API yang ditawarkan oleh kerangka kerja, seperti Storage, InAppBrowser, Notification, File dan Media. Versi yang digunakan adalah 2.3.0.

Selain daftar di atas, saya juga akan menggunakan API Cordova ini:

API File: API untuk membaca, menulis, dan menavigasi hierarki sistem file, menyediakan sekumpulan objek untuk bekerja dengan file dan direktori. Sebagai contoh, kita akan menggunakan objek DirectoryReader untuk menavigasi sistem file, menggunakan metode readEntries (), dan mencari suara. Kami juga akan menggunakan objek LocalFileSystem untuk mendapatkan sistem file root perangkat menggunakan metode requestFileSystem (). Anda dapat menemukan informasi selengkapnya di dokumen resmi File API.
InAppBrowser API: Ini adalah browser web yang ditampilkan di aplikasi Anda saat Anda menggunakan window.open panggilan. Ini tidak lebih dari itu, tetapi, seperti yang akan Anda temukan nanti di artikel ini, mengelola tautan eksternal dengan benar dengan API ini sangat penting. Jika Anda ingin membaca lebih lanjut tentang metode yang ditawarkan oleh API ini, Anda dapat melihat dokumen resmi InAppBrowser.
Storage API: API ini menyediakan akses ke opsi penyimpanan perangkat. Kami akan secara spesifik menggunakan penerapan Cordova dari Web Storage API dan metodenya untuk menyimpan dan memuat daftar file audio. Jika Anda memerlukan penjelasan mendalam, lihat dokumen API Penyimpanan Lokal.
Media API: Objek Media menyediakan kemampuan untuk merekam dan memutar file audio pada perangkat. Ini adalah kunci API untuk pemain kami dan kami akan menggunakan hampir semua metodenya. Sebagai contoh, kami akan menggunakan metode play() untuk memutar suara, metode stop() untuk menghentikan pemutaran audio, dan metode getDuration() untuk mengambil durasi file yang sedang diproses. Lebih lanjut tentang topik ini dapat ditemukan di dokumentasi API Media.
API Pemberitahuan: Ini memungkinkan Anda memberi tahu pengguna dengan notifikasi visual dan yang dapat didengar. Kami akan menggunakan metode alert() untuk memberi tahu pengguna jika terjadi kesalahan. Untuk gambaran yang lebih mendalam tentang API ini, baca dokumentasi API Pemberitahuan.

Sebelum melanjutkan tutorial kami, saya ingin menekankan bahwa Cordova menggunakan file JavaScript yang berbeda untuk setiap sistem operasi. Oleh karena itu, jika Anda ingin mengompilasi aplikasi sendiri, Anda perlu menggunakan bundel IDE-SDK khusus. Misalnya, jika Anda ingin membuat versi Android dari pemain kami (sehingga menciptakan .apk relatif), Anda harus menggunakan Eclipse dan Android SDK. Menggunakan bundel yang berbeda untuk setiap platform dapat menjadi masalah, sehingga Audero Audio Player akan dikembangkan dengan asumsi bahwa kompilasi akan dilakukan menggunakan layanan cloud Adobe, yang disebut Adobe PhoneGap Build. Layanan ini akan menyertakan pustaka Cordova yang benar untuk setiap platform pada waktu kompilasi.

Struktur Proyek

Struktur proyek akan sangat mudah. Untuk mulai membangun pemain, buat folder dan beri nama "audero-audio-player". Sekarang, buat tiga folder di dalam folder ini dengan nama-nama berikut: css, gambar, dan js. Setelah Anda selesai melakukannya, unduh jQuery (saya akan menggunakan versi 1.8.3) dan jQuery Mobile (versi 1.3.0) perpustakaan Pindahkan jQuery dan file JavaScript dari jQuery Mobile di dalam folder "js", dan kemudian masukkan file jQuery Mobile CSS ke folder "css". Akhirnya, letakkan gambar bundel jQuery Mobile ke folder "images". Karena kami sedikit mengubah struktur asli jQuery Mobile, kami perlu menyesuaikan jalur yang mengarah ke gambar di dalam file CSS-nya. Secara khusus, kita perlu mengganti "images /" bagian dengan string ini "../images/". Jika Anda menggunakan fitur otomatis dari editor pilihan Anda, periksa bahwa itu menggantikan string lima kali.

Sekarang setelah Anda mengatur kerangka kerja, Anda dapat melanjutkan ke langkah berikutnya. Di akar folder proyek, kita akan membuat file HTML, dan menempatkan ikon aplikasi default, file konfigurasi Adobe PhoneGap Build, dan layar splash default. Dalam tutorial ini kami juga akan membuat file-file berikut:

index.html: Ini adalah titik masuk aplikasi dan di mana kami akan menempatkan tautan ke pustaka yang digunakan, di dalam bagian <head> .
files-list.html: Ini adalah halaman di mana Anda akan memiliki daftar suara yang tersimpan di perangkat Anda, dikelompokkan seperti yang saya jelaskan kembali dalam pengenalan artikel ini. Seperti yang akan Anda lihat nanti, Anda juga akan memiliki bilah alat kecil yang memungkinkan Anda kembali ke beranda (tombol di sudut kiri atas) dan untuk menyegarkan daftar bunyi (tombol di sudut kanan atas) .
player.html: Ini hanya berisi markup pemutar audio.
aurelio.html: Ini adalah halaman kredit aplikasi; ini berisi informasi tentang penulis aplikasi.
style.css: File ini berisi beberapa baris khusus CSS yang digunakan oleh aplikasi, yang terutama digunakan untuk memberi gaya tombol pemutar.
jquery.mobile.config.js: Ini akan berisi konfigurasi kustom kami untuk kerangka kerja jQuery Mobile.
appFile.js: File ini berisi kelas yang disebut AppFile yang akan kita gunakan untuk mengelola bunyi. Ini bertindak sebagai antarmuka untuk tabel file dari database kami. Kelas ini juga memungkinkan kami untuk mengambil dan mengedit informasi audio selain memungkinkan kami untuk menambah dan menghapus file dari daftar yang disimpan.
player.js: File termasuk kelas, yang disebut Player, yang mengatur pemutar dan menyetel ulang antarmuka pemutar.
utility.js: Ini hanya beberapa fungsi utilitas yang digunakan oleh proyek kami, yang akan saya jelaskan lebih lanjut dalam artikel berikutnya dari seri ini.
application.js: Ini seperti lem yang menggabungkan semua bagian dari proyek kita bersama. Kelas ini bertanggung jawab untuk menginisialisasi perilaku halaman yang dijelaskan sebelum melampirkan acara menggunakan kelas yang terlihat sejauh ini.
config.xml: File XML ini akan memiliki metadata aplikasi dan akan digunakan oleh layanan cloud Adobe untuk menyimpan pengaturan seperti nomor versi aplikasi dan deskripsinya.

Ini adalah banyak hal yang harus dibuat, tetapi saya berjanji Anda akan bersenang-senang dengan proyek ini. Sebagai catatan terakhir, selain file yang terdaftar, Audero Audio Player akan menyertakan beberapa gambar tambahan - seperti tombol putar / jeda dan berhenti - yang akan ditempatkan di folder "gambar".

Situs Web

jQuery Mobile akan memuat semua halaman menggunakan AJAX, jadi kecuali Anda membangun konfigurasi khusus eksplisit, semua file yang dibutuhkan oleh Audero Audio Player, seperti file CSS dan JavaScript, harus dimuat oleh titik masuk, index.html. Halaman ini, selain sebagai judul dan deskripsi aplikasi, memiliki tombol untuk mengakses daftar bunyi. Ini juga termasuk footer dengan tombol untuk mengakses info penulis.

Sumber lengkap beranda ditampilkan di bawah ini:

<!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>

Seperti yang akan Anda lihat di bagian selanjutnya, tombol di dalam tag <header> dan <footer>, gunakan atribut data-iconpos = "notext". Atribut ini sangat penting untuk mencapai efek yang saya inginkan: tata letak yang responsif. Atribut yang dikutip memberitahu jQuery Mobile untuk menyembunyikan teks tautan, yang sangat berguna dalam menghemat ruang untuk layar yang lebih kecil. Di bagian selanjutnya, saya akan mendemonstrasikan cara melampirkan handler ke pagebeforecreate dan event orientationchange sehingga kita dapat menguji ukuran layar. Jika layar yang cukup besar ditemukan, atribut akan dihapus dan teks akan ditampilkan. Dalam hal ini, "cukup besar" berarti lebar layar lebih besar dari 480 piksel.

Pembaca yang taat mungkin juga telah memperhatikan dua baris JavaScript tepat di atas <body> . Abaikan ini untuk saat ini; kita akan menggali maknanya nanti.

Screenshot ini akan memberi Anda contoh seperti apa tampilan halaman:

Daftar Halaman

Halaman kecil ini, yang disebut file-list.html, memiliki beberapa widget yang menarik seperti autodivider dan kotak pencarian. Widget tersebut dibuat untuk Anda oleh jQuery Mobile hanya dengan menambahkan beberapa atribut ke <ul id="files-list"> tag: data-autodividers = "true" dan data-filter = "true". Anda telah melihat bagaimana halaman ini muncul di bagian sebelumnya, dan Anda seharusnya telah mencatat bahwa setiap item daftar memiliki "X" besar di sisi kanan. Ini adalah tombol yang memungkinkan pengguna untuk menghapus file dari daftar dan database. Kedua item ini adalah efek standar yang dicapai menggunakan jQuery Mobile. Anda dapat membaca lebih banyak tentang mereka dengan melihat halaman dokumentasi resmi.

Bagian terakhir dari kode yang layak dibahas adalah elemen <div id="waiting-popup">. Ini ditunjukkan ketika kode menggali ke dalam folder sistem operasi untuk mencari suara. Pencarian audio cukup berat dan bahkan perangkat saya (Galaxy S3) menderita, memblokir seluruh perangkat lunak. Solusi yang lebih baik untuk masalah ini adalah menggunakan multi-threading. Dengan cara ini, ketika aplikasi mencari file, pengguna masih bisa bermain-main. Sayangnya, seperti yang Anda ketahui, JavaScript tidak memiliki kemampuan multi-threading, dan tidak ada yang dapat Anda lakukan untuk mengubahnya. Solusi lain mungkin menunjukkan loader selama proses ini, tetapi pendekatan ini juga gagal; itu benar-benar membeku. Untuk alasan ini, saya memilih untuk memblokir interaksi pengguna sepenuhnya dengan dialog yang hanya dapat ditutup dengan pemrograman.

Sekarang setelah Anda sepenuhnya menyadari poin-poin utama halaman ini, saya dapat daftar sumber lengkapnya:

<!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>

Halaman Pemain

Halaman pemutar (player.html) tidak memiliki banyak fakta menarik untuk ditunjukkan. Ini adalah serangkaian label dan tautan dengan acara yang dilampirkan untuk mengelola suara. Satu-satunya elemen yang layak disebut adalah slider yang digunakan untuk memindahkan audio maju dan mundur, dibuat menggunakan widget slider Ponsel jQuery.

Anda dapat melihat kode halaman di bawah ini:

<!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>

Halaman Kredit

Halaman aurelio.html pasti yang paling tidak penting, dan itu juga sangat sederhana. Meskipun demikian saya ingin menyebutkan dua hal. Yang pertama adalah penggunaan dua tag HTML5 baru, <figure> dan <article>.. Elemen <figure> mewakili unit konten, dengan keterangan opsional yang berdiri sendiri. Keterangan yang dijelaskan disediakan menggunakan elemen <figcaption>. Elemen <article> mewakili komponen halaman yang terdiri dari komposisi yang lengkap dalam dokumen, halaman, aplikasi, atau situs.

Yang kedua adalah penggunaan atribut target="_blank" yang diterapkan ke semua tautan daftar kontak pada halaman. Atribut ini sangat umum. Namun, di pemutar kami, kami akan menggunakannya untuk melampirkan pawang ke semua tautan eksternal, seperti yang akan Anda pelajari di bagian selanjutnya dari seri ini.

Seluruh kode aurelio.html ditunjukkan di bawah ini:

<!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>

Bagian selanjutnya

Dalam sekuel kedua dari seri ini, kami akan melihat secara mendalam logika bisnis aplikasi dengan melihat file JavaScript yang menggerakkan pemutar kami.