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

Membuat Aplikasi Streaming Musik Sederhana dengan Ruby on Rails

by
Read Time:22 minsLanguages:

Indonesian (Bahasa Indonesia) translation by Johari Triana (you can also view the original English article)

Amazon S3 adalah cara yang bagus untuk menyimpan file, tetapi mempelajari cara mengintegrasikannya ke situs web Anda bisa menjadi tantangan. Pada artikel ini, Anda akan belajar cara mengintegrasikan Amazon S3 dan Ruby on Rails melalui pembangunan aplikasi streaming musik sederhana.


Apa itu ini bagaimana cara kerjanya?

Amazon S3 adalah "penyimpanan untuk Internet"

Seperti yang dikatakan situs web Amazon, Amazon S3 adalah "penyimpanan untuk Internet". Tidak hanya murah, tetapi juga cepat dan dapat diandalkan. Ini cara yang bagus untuk menyajikan konten di situs web Anda, termasuk gambar, video, atau apa pun yang Anda inginkan. Amazon S3 tidak berfungsi persis seperti penyimpanan di komputer Anda, jadi inilah beberapa hal yang harus Anda ketahui:

  • Dengan Amazon S3, folder disebut "bucket" dan file disebut "objek".
  • Bucket di tingkat atas digunakan untuk menentukan URL untuk mengakses data Anda, jadi Anda hanya dapat menggunakan nama yang belum diambil. Misalnya, jika seseorang sudah membuat Bucket tingkat atas dengan nama "video", Anda tidak dapat menggunakan nama itu.
  • Merupakan ide bagus untuk memiliki satu bucket tingkat atas dengan nama situs web Anda, dan menggunakan sub-level bucket untuk memisahkan file menjadi beberapa bagian yang berbeda, seperti gambar, video, atau musik.

Sebelum kita mulai...

Sebelum Anda melanjutkan dengan tutorial ini, ada beberapa hal penting yang harus ada:

  • Interpreter Ruby dan RubyGems diinstal di komputer Anda, bersama dengan gem Rails
  • Pengetahuan tentang (atau setidaknya memiliki akses ke) ID Kunci Akses dan Kunci Akses Rahasia Anda untuk Amazon S3
  • Pemahaman dasar tentang Ruby on Rails

Apa yang akan kita bangun

Produk akhir dari tutorial ini adalah aplikasi streaming dan pengunduhan musik sederhana. Dalam aplikasi ini, pengguna akan dapat melakukan hal berikut:

  • Lihat daftar semua musik yang diunggah dan unggah musik sendiri
  • Unduh musik dengan berbagai cara, termasuk streaming dengan audio HTML5, unduh melalui HTTP, atau unduh melalui file .torrent

Pada saat aplikasi ini selesai, Anda telah mempelajari semua topik utama yang perlu Anda ketahui tentang penggunaan Amazon S3 di aplikasi Ruby on Rails Anda.


Mari kita mulai!

Gem aws-s3 memungkinkan Anda untuk berinteraksi dengan layanan Amazon S3 di aplikasi Anda.

Hal pertama yang harus dilakukan adalah menginstal gem ruby ​​aws-s3. Gem memungkinkan Anda untuk berinteraksi dengan layanan Amazon S3 di aplikasi Anda. Untuk melakukan ini, jika Anda menggunakan Windows, cukup jalankan perintah:

Setelah itu diinstal, hasilkan aplikasi Rails kami dengan perintah berikut:

Langkah terakhir untuk memulai aplikasi Anda adalah masuk ke direktori mp3app/public dan menghapus file yang disebut "index.html". Setelah selesai, aplikasi Anda siap untuk mulai berinteraksi dengan Amazon S3!


Login ke Amazon S3

ID Kunci Akses dan Kunci Akses Rahasia Anda memungkinkan Anda terhubung ke Amazon S3.

Agar kami dapat berinteraksi dengan Amazon S3, kami perlu memberi tahu aplikasi kami cara masuk ke Amazon S3. Di sinilah ID Kunci Akses dan Kunci Akses Rahasia Anda berguna. ID Kunci Akses dan Kunci Akses Rahasia Anda memungkinkan Anda terhubung ke Amazon S3. Tetapi pertama-tama, kita perlu memberi tahu aplikasi kita bahwa kita menggunakan gem aws-s3. Kami melakukan ini di Gemfile:

Untuk benar-benar membiarkan aplikasi kami menggunakan gem itu, Anda harus mengetikkan command bundle install. Sekarang sudah berfungsi, kita perlu memberi tahu aplikasi kita cara masuk ke Amazon S3. Kami juga melakukannya di file config/application.rb, pada baris baru di dalam kelas Application

Kode ini memberi tahu aplikasi kita untuk membuat koneksi ke Amazon S3 segera setelah aplikasi dimulai (file application.rb dimuat saat aplikasi Anda memulai). Satu hal terakhir yang perlu ditambahkan ke file application adalah konstan dengan nilai bucket yang akan kita gunakan. Alasan untuk melakukan ini adalah bahwa jika kita perlu mengubah bucket mana yang kita gunakan, itu hanya perlu diperbarui di lokasi yang satu ini. Seharusnya terlihat seperti ini:

Untuk tutorial ini, saya memutuskan untuk memberi nama bucket s3tutorialmusic, tetapi Anda harus menggantinya dengan bucket apa pun yang Anda miliki di akun Anda. Pada akhirnya, file Anda akan terlihat seperti ini (tetapi dengan informasi login Anda sendiri):


Menghasilkan Controller

Sekarang kita akhirnya dapat mulai bekerja untuk membuat aplikasi kita benar-benar menampilkan sesuatu di browser. Untuk memulai, mari hasilkan controller dan view yang kita perlukan. Secara total, kami akan menghasilkan tiga tindakan untuk controller kami (yang akan kami sebut lagu): index, upload dan delete.

  • Tindakan index akan menjadi halaman utama kami.
  • Tindakan upload adalah untuk mengunggah musik baru ke Amazon S3, sehingga tidak perlu view.
  • Akhirnya, tindakan delete tidak akan memiliki view, dan akan bertanggung jawab untuk menghapus musik.

Pada akhirnya, satu-satunya view yang kita perlukan untuk aplikasi ini adalah view index, karena itu akan bertindak sebagai panel kontrol pusat untuk setiap tindakan yang dapat Anda lakukan. Sekarang, kita akan menggabungkan semua itu menjadi satu pernyataan baris perintah yang bagus:

Setelah selesai, lanjutkan dan hapus view yang dihasilkan untuk upload dan delete, karena itu tidak akan digunakan. Mari kita lanjutkan menulis kode untuk tindakan index!


Bekerja pada Aksi Index

Dalam tindakan index, produk jadi akan memungkinkan pengguna untuk mengunggah musik baru dan menghapus musik yang ada. Tidak ada apa pun yang perlu dilakukan dalam file action controller ini untuk mengunggah musik baru, tetapi kami memang membutuhkan daftar lagu saat ini untuk memungkinkan pengguna menghapusnya.

Pertama, kita perlu mendapatkan objek yang merujuk ke bucket  musik kita (ingat bahwa nama ember itu disimpan dalam BUCKET konstan). Inilah cara kami melakukannya:

Agar kita dapat menggunakan metode yang tersedia di gem aws-s3, kita perlu memberi tahu Ruby interpreter bahwa kita ingin mencari fungsi-fungsi di AWS::S3 namespace, itulah sebabnya itu adalah bagian dari pemanggilan metode. Kelas Bucket berisi semua metode yang terkait dengan memanipulasi bucket. Akhirnya, metode find menerima satu parameter, nama bucket, dan mengembalikan objek yang merujuk ke bucket itu. Sekarang kita memiliki bucket, mari kita dapatkan semua objeknya dengan melakukan ini:

Metode objects mengembalikan hash dengan nama-nama semua objek dalam bucket itu. Akhirnya, kita perlu menyimpan hasil pemanggilan metode itu ke variabel instan sehingga kita bisa menggunakannya dalam view kita. Pada akhirnya, inilah yang akan terlihat seperti apa tindakan index:


Melanjutkan dengan Index View

Sekarang kita perlu membuat tampilan bagi pengguna untuk mengunggah dan menghapus musik. Mari kita mulai dengan yang belakangan dan membuat daftar yang tidak berurutan dari semua objek yang saat ini diunggah, dengan tautan untuk menghapus objek itu. Kita bisa melakukan itu seperti ini:

  • Pertama, kami membuat daftar tidak terurut.
  • Kemudian, kita loop semua lagu dalam variabel @songs dengan menggunakan masing-masing metode.
  • Untuk setiap lagu, kami membuat item daftar, dan membuat teks yang akan muncul untuk setiap item. Bagian pertama adalah kunci lagu, karena setiap lagu adalah hash, dan kunci untuk hash itu adalah nama lagu tersebut.
  • Lalu, kami menaruh tautan ke tindakan delete, tempat lagu itu dapat dihapus. Untuk url, kami menggunakan string kueri di bagian akhir untuk memberi tahu tindakan delete lagu mana yang perlu dihapus.
  • Akhirnya, kami memiliki pesan konfirmasi untuk memperingatkan pengguna sebelum mereka benar-benar menghapus lagu.
  • Pertama, kami memeriksa untuk memastikan bahwa paramter lagu telah ditentukan.
  • Jika ya, maka kita menggunakan metode find untuk mendapatkan objek yang mewakili lagu itu.
  • Akhirnya, kami menggunakan metode delete untuk menghapusnya dari Amazon S3.
  • Setelah itu, kita perlu mengarahkan pengguna ke halaman baru karena tindakan delete tidak memiliki view. Namun, jika parameter lagu tidak pernah ditentukan, kami hanya merender teks "No song was found to delete!".

Membiarkan Pengguna Mengunggah Musik

Sekarang, kita harus benar-benar membiarkan pengguna mengunggah musik, karena itu adalah salah satu bagian inti dari fungsionalitas untuk aplikasi ini. Pertama, kami membuat formulir sederhana yang memungkinkan pengguna memilih file untuk diunggah. Kita bisa melakukan itu seperti ini:

Kami membuat formulir yang mengirimkan ke tindakan upload, yang merupakan tindakan yang benar-benar melakukan unggahan ke Amazon S3. Kami menggunakan post dan multipart karena kami mengirimkan file. Selain itu, formulir ini sangat sederhana dan mudah dipahami, jadi sekarang kita dapat beralih ke implementasi bagian controller aksi ini.


Mengirimkan File ke Amazon S3

Kami perlu mengambil file yang dikirimkan dan membuat objek S3 baru untuknya, yang akan dilakukan dalam tindakan upload. Kita dapat melakukannya dengan baris kode ini:

Ada banyak hal yang terjadi dalam satu baris kode ini, jadi saya akan menjelaskan setiap bagian secara individual.

Seperti biasa, kita mengakses AWS::S3::S3Object untuk berinteraksi dengan objek di Amazon S3.

Kami menggunakan perintah store untuk benar-benar mengunggah file ke S3. Parameter pertama menentukan apa yang harus dipanggil file. Kami menggunakan parameter original_filename dari file yang diunggah untuk ini sehingga namanya tetap sama. Adapun metode sanitize_filename, yang akan dijelaskan pada paragraf berikutnya. Parameter kedua adalah data file aktual, yang diperoleh dari memanggil metode read pada file yang diunggah. Parameter ketiga menentukan bucket yang akan digunakan, dan yang keempat menentukan siapa yang dapat mengakses file. Karena kami ingin semua orang dapat membaca file (yang termasuk mengunduh), kami menetapkan akses sebagai: public_read.

Metode sanitize_filename adalah metode yang telah digunakan oleh banyak orang dan plugin, seperti attachment_fu, dan digunakan untuk memecahkan masalah dengan Internet Explorer (mengejutkan, bukan?). Daripada hanya memberi kami nama file ketika kami memanggil metode original_filename, IE mengembalikan seluruh path ke file; misalnya, jika file yang ingin kita unggah disebut mysong.mp3, alih-alih itu akan memberi kita C:\rails\mp3app\mysong.mp3 ketika kita memanggil original_filename. Kami dapat memperbaikinya dengan menambahkan kode berikut ke ujung controller:

Langkah terakhir kami dalam menyelesaikan tindakan upload adalah menambahkan beberapa pengecekan kesalahan dan rute. Cara Anda melakukan kesalahan saat memeriksa ruby ​​adalah dengan statement begin...rescue...end. Banyak hal yang bisa salah ketika mengunggah file, sehingga memiliki pengecekan kesalahan akan mencegah pengguna melihat pesan kesalahan yang akan dihasilkan Rails secara otomatis. Ini adalah versi modifikasi dari tindakan upload:

Jika terjadi kesalahan, kami hanya menyajikan beberapa teks yang memberitahukan hal itu kepada pengguna. Meskipun pengguna masih melihat pesan kesalahan, itu lebih baik daripada daftar besar kode yang akan muncul dalam pesan kesalahan yang dihasilkan oleh Rails.


Routing Aplikasi Kami

Anda mungkin telah memperhatikan bahwa di seluruh kode yang telah kami tulis sejauh ini, ada banyak waktu di mana sesuatu seperti upload_path telah digunakan untuk menentukan controller dan tindakan. Kita dapat melakukan ini karena file yang memanggil routes.rb. Ini memberi tahu aplikasi kita URL apa yang dapat diakses di aplikasi kita. Kami juga memberikan nama ke path tertentu untuk mempermudah memperbarui kode kami. Inilah cara Anda memberi nama path yang akan digunakan Mp3app kami:

Metode match menentukan path, seperti songs/upload, dan berikan nama, upload_path. Nama itu ditentukan menggunakan :as => "name" sebagai parameter kedua untuk metode match. Akhirnya, metode root menentukan tindakan apa yang akan menjadi tindakan root, yang bertindak mirip dengan index.html di situs web berbasis HTML statis.


Tindakan Upload yang Selesai

Sekarang, kita selesai mengimplementasikan fungsionalitas tindakan upload . Berikut ini adalah kode terakhir untuk file songs_controller.rb:

Dan inilah tampilan aplikasi sejauh ini jika dilihat di browser.


Men-download musik

Sejauh ini, aplikasi kita sudah jauh. Pengguna sekarang dapat mengunggah musik, melihat daftar musik yang diunggah saat ini, dan menghapus musik apa pun yang ada. Sekarang, kami memiliki satu fungsi inti untuk diimplementasikan. Yaitu membiarkan pengguna mengunduh musik ini. Seperti yang ditentukan di awal tutorial ini, pengguna dapat melakukannya dengan tiga cara:

  • streaming dengan Audio HTML5,
  • men-download melalui HTTP, dan
  • unduh menggunakan file torrent.

Saat ini, daftar musik hanya ditampilkan menggunakan daftar yang tidak berurut. Namun, karena pada akhirnya kami akan menambahkan tiga tautan tambahan ke akhir setiap baris (satu untuk setiap metode unduhan), lebih layak menggunakan tabel untuk mengatur daftar. Mari kita modifikasi tampilan index untuk mencerminkan perubahan ini:

  • Pertama, kami memperbarui header untuk mencerminkan bahwa kami juga dapat mengunduh musik.
  • mereka sendiri.

Sekarang kami siap menambahkan kode untuk membiarkan pengguna mengunduh musik. Mari kita mulai dengan mengunduh melalui HTTP, karena ini adalah yang termudah untuk diterapkan.


Men-download melalui HTTP

Untuk mengunduh melalui HTTP, kita hanya perlu menambahkan <td> baru ke tabel kita dengan tautan ke file .mp3. gem aws-s3 telah membangun metode yang memungkinkan kami membuat url untuk sebuah file. Namun, praktik terbaik adalah dengan meletakkan "metode bantuan" seperti ini di file helper untuk controller itu. Karena kami menggunakan metode ini di seluruh aplikasi (terutama jika Anda memutuskan untuk memperpanjang aplikasi ini sendiri), metode helper akan ditempatkan di file application_helper.rb. Inilah cara Anda mendapatkan URL:

Metode ini hanya menerima satu parameter, yaitu nama lagu. Untuk membantu kami mengingat bahwa nama lagu diakses oleh song.key, kami memanggil parameter song_key. Seperti biasa, kita mengakses kelas AWS::S3::S3Object untuk berinteraksi dengan objek Amazon S3. Metode url_for mengambil dua parameter, dengan yang ketiga opsional.

  • Yang pertama adalah nama file yang Anda cari.
  • Yang kedua adalah nama bucket tempat file itu berada.
  • Terakhir, parameter ketiga digunakan untuk memberi kami URL yang tidak akan kedaluwarsa. Jika kami tidak menentukan: authenticated => false, URL-nya semua akan kedaluwarsa dalam 5 menit (secara default).

<td> Ini berada di antara nama lagu dan tautan hapus (tetapi itu adalah preferensi pribadi, sehingga Anda dapat memiliki tautan dalam urutan apa pun yang Anda pilih).


Men-download melalui Bit Torrent

Mengunduh file dari Amazon S3 melalui Bit Torrent sangat mirip dengan mengunduh melalui HTTP. Faktanya, satu-satunya perbedaan antara kedua URL unduhan adalah bahwa torrent memiliki ?torrent di akhirnya. Oleh karena itu, metode helper kami untuk menghasilkan url torrent hanya akan menambahkan?torrent ke akhir url HTTP. Inilah cara Anda melakukannya:

xcv


Streaming dengan Audio HTML5

Streaming lagu melalui audio HTML5 sedikit lebih sulit daripada hanya mengunduh lagu, jadi mari kita mulai dengan bagian yang mudah: <td> untuk itu. Namun, akan ada beberapa perbedaan dari tautan yang kami tambahkan untuk HTTP dan Bit Torrent.

  • Pertama, kita perlu memiliki cara untuk mengidentifikasi link ini untuk menambahkan <audio>tag untuk halaman, sehingga kami akan memberikan kelas html5.</audio>
  • Kedua, kita perlu cara untuk mengetahui sumber mp3 yang akan digunakan untuk tag <source>, jadi kita hanya akan memberikan url yang sama dengan unduhan HTTP. Ini juga akan berfungsi sebagai cadangan untuk browser dengan javascript dinonaktifkan, karena kami akan menggunakan javascript untuk menambahkan tag <audio> ke halaman.

Berikut adalah kode untuk menghasilkan link:

Sekarang kita perlu bekerja pada javascript untuk menambahkan tag audio ke halaman ketika tautan ini diklik. Untuk melakukan ini, kita akan menggunakan teknik yang mirip dengan teknik yang digunakan Jeffrey Way dalam tutorialnya, The HTML 5 Audio Element. Langkah pertama adalah menambahkan beberapa hal ke file tampilan kami. Dalam file layout/application.html.erb kita, kita perlu memasukkan versi terbaru dari jQuery, karena itu adalah pustaka javascript yang akan kita gunakan. Berikut adalah kode yang harus ditambahkan tepat sebelum javascript pertama termasuk baris:

Kemudian, ubah parameter pertama untuk tag sertakan asli dari :default ke application.js, karena di situlah kami akan menyimpan kode javascript kami, dan file JavaScript default lainnya tidak diperlukan. Selanjutnya, kita perlu menambahkan bagian ke tampilan index.html.erb untuk memasukkan tag audio. Di bagian atas tampilan itu, kita perlu memasukkan kode berikut:

Mengikuti dengan tema HTML5, kami menggunakan tag section daripada div untuk membuat bagian audio kami.

Kami mendapatkan referensi ke bagian audio dan menyimpannya dalam variabel, yang dianggap sebagai praktik terbaik. Selanjutnya, kita perlu menambahkan event handler klik ke tautan kita dengan kelas html 5. Ketika event handler dijalankan, kita perlu melakukan beberapa hal:

  • Pertama, kita perlu membuat tag audio baru dan memberinya beberapa atribut seperti kontrol.
  • Kemudian, kita perlu menambahkan tag sumber ke sana sehingga benar-benar tahu apa yang harus diputar.
  • Akhirnya, kita perlu mengganti HTML di bagian audio dengan tag audio baru, dan mengembalikan false sehingga tindakan normal tautan tidak berjalan, yang akan mengunduh lagu. Inilah cara Anda bisa menggabungkan semuanya:

Karena tutorial ini tentang Ruby on Rails, dan bukan JavaScript, saya tidak akan menjelaskan secara terperinci bagaimana kode ini bekerja. Namun, kodenya cukup sederhana, sehingga mudah bagi Anda untuk mencari tahu. Satu hal yang harus Anda perhatikan adalah ini hanya akan berfungsi di browser yang mendukung HTML5 dan mendukung mp3 sebagai sumber yang valid untuk tag audio. Untuk sebagian besar browser, versi terbaru akan mendukung kode HTML 5 ini, tetapi browser yang lebih lama tidak mendukung ini.


Tampilan View Index

Kami akhirnya menyelesaikan semua fungsionalitas inti untuk aplikasi ini. Pengguna dapat mengunggah, mengunduh, dan menghapus mp3 dengan berbagai cara, termasuk Audio HTML5, Unduhan HTTP, dan Bit Torrent. Beginilah tampilan index seharusnya pada saat ini:

Jika Anda belum melakukannya, Anda harus mencoba menjalankan kode ini dan mencobanya sendiri. Anda dapat melakukan ini dengan menjalankan perintah: rails s. Meskipun kami telah menyelesaikan fungsionalitas inti untuk aplikasi ini, masih ada hal-hal yang perlu dilakukan, seperti menata halaman. Ayo lakukan sekarang.


Menata Aplikasi

Hal pertama yang harus dilakukan adalah membungkus halaman dalam wadah sehingga kita bisa memusatkannya. Yang perlu kita lakukan adalah meletakkan div dengan id container di sekitar pernyataan yield dalam file tata letak sehingga terlihat seperti ini:

Selanjutnya, kita akan menggunakan styling dari gem Ryan Bates, nifty_generators, untuk memberi aplikasi kita beberapa styling dasar. Berikut adalah CSS yang akan kami gunakan dari gem itu:

Sekarang kita akan mengerjakan view index. Hal pertama yang perlu kita lakukan adalah membagi halaman menjadi tiga bagian. Bagian-bagian itu akan menjadi header, bagian utama, dan sidebar. Di bagian atas halaman, mari tambahkan header sederhana:

Selanjutnya, mari kita bagi halaman menjadi wilayah utama dan wilayah sidebar. Wilayah utama kami akan terdiri dari daftar lagu, sedangkan sidebar akan berisi audio HTML5 dan formulir unggahan. Inilah cara kami akan memodifikasi kodenya:

Karena kita akan menggunakan float untuk mendesain halaman ini, kita perlu menghapus float sebelum dan sesudah untuk memastikan bahwa tata letak tidak menjadi kacau. Sekarang mari kita tambahkan CSS untuk menyesuaikan tata letak bagian-bagian itu:

Sidebar adalah 30% dari halaman, dan bagian utama adalah 70% dari halaman. Selain itu, ada CSS untuk menghapus menggarisbawahi dari link kecuali mouse melayang di atas itu, dan ada juga padding ditambahkan ke<td>Tag sehingga tidak terlihat begitu sempit.</td> Pada akhirnya, itu adalah satu-satunya CSS yang kita butuhkan untuk memberikan halaman tata letak dasar. Jangan ragu untuk menambahkan sebanyak mungkin gaya pada aplikasi ini seperti yang Anda inginkan sendiri, karena pasti ada cara untuk membuat aplikasi ini terlihat lebih bagus.


Kesimpulan

Semoga Anda sekarang memiliki pemahaman yang baik tentang bagaimana berinteraksi dengan Amazon S3 dari aplikasi Ruby on Rails Anda. Dengan gem aws-s3, melakukan ini sangat mudah, jadi menambahkannya ke aplikasi yang sudah ada akan memakan waktu sangat sedikit. Jangan ragu untuk memodifikasi aplikasi ini dengan cara apa pun yang Anda sukai untuk melihat apakah Anda dapat meningkatkannya dengan cara apa pun. Ingatlah untuk menambahkan informasi login Amazon S3 Anda sendiri dan bucket konstan ke file application.rb, jika tidak aplikasi tidak akan berjalan!

Bagi Anda yang adalah pakar Ruby on Rails, saya yakin Anda dapat menemukan cara untuk mengoptimalkan aplikasi ini lebih banyak lagi. Selain itu, akan sangat bagus untuk membagikan optimasi yang Anda buat di bagian komentar sehingga pembaca dapat memperoleh lebih banyak dari tutorial ini.

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.