Juni 05, 2018

Cara Membuat Aplikasi Radio Streaming untuk Android dengan MIT App Inventor 2

Dalam tulisan ini saya hendak berbagi pengalaman tentang cara membuat aplikasi Radio Streaming untuk Android dengan MIT App Inventor 2. Cara membuat aplikasi untuk mobile phone berbasis Android dengan MIT App Inventor bisa dikatakan relatif mudah, namun bisa pula menjadi agak susah jika dalam tahap pembuatannya tetiba muncul kebutuhan untuk menambah atau memperkaya fiturnya.

MIT App Inventor 2 adalah program open-source di worldwideweb untuk membuat aplikasi mobile phone berbasis Android, ditujukan bagi awam yang tak mengerti bahasa pemograman yang rumit. Jika programer 'asli' ada yang merasa terhina memakainya, namun sangat membantu orang awam. Dengan memakai MIT App Inventor 2, semua orang bisa membuat aplikasi berbasis Android. Lihat pula tulisan Cara Membuat Radio Streaming Yang Murah.

App Inventor semula dikembangkan oleh Google, pemilik sistem operasi Andorid, dan kemudian dikelola oleh Massachusetts Institute of Technology (MIT) namun tetap difasilitasi oleh Google. MIT App Inventor 2 menggunakn sistem blok drag-and-drop untuk membuat aplikasi, yang memudahkan pengguna ketimbang menggunakan bahasa pemograman yang sulit untuk difahami.

cara membuat aplikasi radio streaming untuk android dengan mit app inventor 2
Tulisan ini dibuat berdasar proses pembuatan LKers Radio dengan tampilan project seperti di atas, dengan menggunakan SHOUTcast Server v2. Aplikasi LKers Radio bisa diunduh di PlayStore, dan silahkan dicoba. Ketika dibuka, radio akan diputar secara otomatis. Jika membuat sendiri nanti, Anda bisa membuatnya tidak otomatis diputar.

Membuat Aplikasi Radio Streaming untuk Android dengan MIT App Inventor 2 mencakup beberapa langkah. Pertama adalah membuat blok dasar, yaitu bagaimana memutar radio streaming dan menutup aplikasinya. Anda bisa menambahkan tombol pause, play, dan stop sendiri. Kedua adalah cara menampilkan judul lagu yang sedang diputar dengan menggunakan clock timer MIT App Inventor 2, yang akan ditulis kemudian.

cara membuat aplikasi radio streaming untuk android dengan mit app inventor 2
Aplikasi Streaming dalam contoh ini bisa dikatakan sangat sederhana. Adalah pada tahap kedua, di tulisan berikutnya, yang tak mudah bagi saya untuk membuatnya, dan memerlukan proses coba salah, dan proses pencarian untuk sampai mendapatkan bentuk yang stabil. Anda bisa bergabung menjadi member MIT App Inventor Forum di Google Group Forum untuk membaca tutorial, dan belajar dari kasus yang dihadapi oleh pemakai lain.

Untuk membuat Membuat Aplikasi Radio Streaming untuk Android dengan MIT App Inventor 2, ikuti petunjuk di bawah ini.

Login

Login ke MIT App Inventor dengan menggunakan akun gmail Anda --> create New Project dan beri nama apa sesuai keinginan.

Tampilan Layar

  1. Pada Properties (kolom paling kanan), ubah AlignHorizontal ke 'Center : 3'; AlignVertical ke 'Bottom : 3'; ketik di AppName nama aplikasi Anda.
  2. Klik BackgroundImage --> Upload File --> Choose File (cari file-nya di komputer) --> OK
  3. Klik Icon (ikon di layar hape, baiknya png) --> Upload File --> Choose File --> OK
  4. ScreenOrientation ke 'Portrait'; Sizing ke 'Responsive'; Title ke nama Radio Streaming Anda
  5. Isi VersionCode dan VersionName sesuai selera.
Hasilnya adalah pada foto ke-2 di atas.

Membuat tombol

cara membuat aplikasi radio streaming untuk android dengan mit app inventor 2
  1. Drag HorizontalArrangement (Layout, kiri bawah) ke Screen.
  2. Di Properties : ubah AlignHorizontal ke 'Center : 3'; BackgroundColor ke 'None'; Width ke 'Fill parent'.
  3. User Interface (paling kiri) : Drag 'Button' masuk ke kotak 'HorizontalArrangement1'; klik Rename dan beri nama bn_exit.
  4. Di Properties : BackgroundColor ke 'None'; Height ke '40' pixel; Width ke '40' pixel; klik Image --> Upload File --> Choose File (cari file-nya) --> OK; Text : hapus isi teksnya. Lakukan hal yang sama jika hendak menambahkan button play, pause, dan stop. Drag 'Label' dan letakkan diantara tombol untuk mengatur jarak diantara tombol dengan menentukan width labelnya.
  5. Drag 'Label' ke layar dan letakkan di bawah 'HorizontalArrangement1'. Pada Properties : hapus tulisan di 'Text'; pada 'Height' isi '5' percent, atau sesuai selera.
  6. Klik Media (kiri bawah), drag 'Player' ke tengah layar. Player akan muncul di bawah sebagai 'Non-visible components'

Membuat Blocks

cara membuat aplikasi radio streaming untuk android dengan mit app inventor 2
  1. Klik tombol 'Blocks' di sebelah kanan atas layar (bersebelahan dengan 'Designer').
  2. Klik 'Screen1', drag 'when Screen1 .Initialize' ke tengah layar.
  3. Klik 'Player1', drag 'set Player1 Source to' ke blok yang ada. Klik 'Text', seret blok paling atas ke layar dan tempel ke blok. Ketik alamat stream radio anda, biasanya 'http://nama_server:port/stream'
  4. Klik 'Player1', drag dan drop 'call Player1 .Start'. Dengan blok ini, radio streaming akan langsung berbunyi saat dibuka.
  5. Klik 'bn_exit", drag dan drop 'when bn_exit .Click'. Klik 'Control, dan drag drop 'close application'

Mengunduh dan Memasang Aplikasi

  1. Di handphone, unduh dan install aplikasi 'MIT AI2 Companion', buka.
  2. Kembali ke MIT App Inventor', pada menu paling atas, klik 'Build' --> 'App (provide QR code for .apk)', tunggu sampai barcode muncul.
  3. Di hape (MIT App Inventor 2), klik scan QR code, arahkan kamera ke barcode, tunggu, setelah muncul --> klik 'Install' --> Open.

Ketika dibuka, radio streaming akan otomatis diputar, dan tombol exit akan menutup aplikasi. Pada tulisan Menampilkan Now Playing Pada Aplikasi Radio Streaming untuk Android dengan MIT App Inventor 2 dibahas bagaimana menampilkan lagu yang sedang diputar dengan menggunakan clock timer, serta membuat slider untuk mengatur volume suara.
Label: MIT App Inventor, Radio Streaming, SHOUTcast
Bagikan ke: WhatsApp, Email. Print!.

aroengbinang, seorang penyusur jalan.
Traktir BA secangkir kopi? Scan via 'Bayar' GoPay.