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

Membuat YouTube Client di Android

by
Read Time:10 minsLanguages:

Indonesian (Bahasa Indonesia) translation by Amri Shodiq (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

Ada banyak aplikasi YouTube pihak ketiga yang populer di Google Play, misalnya Viral Popup dan PlayTube, yang menawarkan beberapa fungsi unik dan tambahan yang tidak diberikan aplikasi resmi YouTube. Jika Anda ingin membuat aplikasi semacam itu, maka ini tutorial untuk Anda.

Dalam tutorial ini, kita akan membuat YouTube client yang tidak hanya berguna untuk mencari video di YouTube, tapi juga memainkannya. Dengan begitu, kita akan belajar bagaimana menggunakan library YouTube Android Player API dan YouTube Data API untuk Java.

Kebutuhan

Pastikan Anda memiliki Eclipse ADT Bundle versi terakhir. Anda bisa mendownloadnya di website Android Developer.

Anda juga harus punya developer key untuk menggunakan YouTube API. Ikuti langkah-langkah di website Google's YouTube Developer untuk mendapatkannya.

1. Buat Project Baru

Nyalakan Eclipse dan buat aplikasi Android baru. Namakan aplikasi tersebut, SimplePlayer. Pilih nama package yang unik, dan set minimum required SDK ke Android 2.2 dan target SDK ke Android 4.X (L Preview).

Kita akan membuat Activity sendiri, maka buang contreng pada Create Activity, kemudian klik Finish.

2. Menambahkan Library

Langkah 1: Download Library-library

Anda akan membutuhkan library-library berikut untuk proyek ini:

  • YouTube Android Player API: Library ini akan membantu Anda menempelkan video YouTube dan mengontrolnya dengan mudah. Pada saat tutorial ini ditulis, versi terakhir library ini adalah 1.0.0. Anda bisa mendownloadnya dari website Google Developers.
  • YouTube Data API v3 Client Library for Java: Library ini memudahkan aplikasi kita untuk meng-query informasi dari YouTube. Kita akan menggunakan library ini untuk membuat aplikasi kita bisa mencari video di YouTube. Library ini juga tersedia di website Google Developers.
  • Picasso: Library ini memudahkan kita untuk mendownload dan menampilkan gambar dari internet. Kita akan menggunakannya untuk mengambil thumbnail video YouTube. Versi terakhir saat tutorial ini di tulis adalah 2.4.0 dan Anda bisa mendownloadnya langsung dari Maven repository.

Langkah 2: Menambahkan Library

Untuk menambahkan YouTube Android Player API, unzip YouTubeAndroidPlayerApi-1.0.0.zip dan copy file YouTubeAndroidPlayerApi.jar ke dalam direktori libs di proyek Anda.

Untuk menambahkan library YouTube Data API v3 berikut dependency-nya, ekstrak google-api-service-youtube-v3-rev124-java-1.19.0.zip dan copy file-file berikut ke direktori libs di proyek Anda.

  • google-api-services-youtube-v3-rev124-1.19.0.jar
  • google-api-client-1.19.0.jar
  • google-oauth-client-1.19.0.jar
  • google-http-client-1.19.0.jar
  • jsr305-1.3.9.jar
  • google-http-client-jackson2-1.19.0.jar
  • jackson-core-2.1.3.jar
  • google-api-client-android-1.19.0.jar
  • google-http-client-android-1.19.0.jar

Terakhir, untuk menambahkan Picasso, copy picasso-2.4.0.jar ke direktori libs dalam proyek Anda.

3. Edit Manifest

Permission yang dibutuhkan aplikasi kita hanya android.permission.INTERNET, untuk mengakses server YouTube. Tambahkan baris berikut ke AndroidManifest.xml:

Aplikasi kita punya dua activity, satu untuk mencari video dan satu lagi untuk memainkannya. Untuk menghindari kita harus repot menangani perubahan orientasi perangkat Android, dalam tutorial ini kita akan memaksa kedua activity kita untuk hanya menggunakan mode landscape. Deklarasikan activity-activity di manifest dengan menambahkan kode berikut:

4. Edit strings.xml

File res/values/strings.xml mengandung string-string yang digunakan aplikasi kita. Update isinya menjadi seperti berikut:

5. Buat Layout untuk SearchActivity.

Langkah 1: Buat Layout

SearchActivity membutuhkan view-view berikut:

  • EditText: sebagai tempat user mengetikkan keyword
  • ListView: untuk menampilkan hasil pencarian
  • LinearLayout: view ini menjadi parent view dari kedua view di atas

Buat file baru bernama layout/activity_search.xml kemudian tambahkan code berikut di dalamnya:

Langkah 2: Buat Layout Search Results

Tiap hasil pencarian akan merujuk ke satu video di YouTube dan kita perli layout untuk menampilkan informasi tentang video tersebut. Oleh karenanya, tiap item di ListView perlu mengandung view-view berikut:

  • ImageView: untuk menampilkan thumbnail video
  • TextView: untuk menampilkan judul video
  • TextView: untuk menampilkan deskripsi video
  • RelativeLayout: view ini berfungsi sebagai parent dari ketiga view di atas

Buat sebuah file bernama layout/video_item.xml dan tambahkan kode berikut ke dalamnya:

6. Buat layout untuk PlayerActivity

Langkah 1: Buat layout

PlayerActivity membutuhkan view-view berikut:

  • YouTubePlayerView: untuk memainkan video YouTube
  • LinearLayout: view ini adalah parent dari YouTubePlayerView

Buat file baru bernama layout/activity_player.xml dan tambahkan kode program berikut:

7. Buat VideoItem

Buat sebuah class Java baru bernama VideoItem.java. Kita gunakan class tersebut untuk menyimpan informasi-informasi berikut tentang video YouTube:

  • ID YouTube
  • judul
  • deskripsi
  • URL thumbnail

Semua info di atas disimpan sebagai string. Setelah menambahkan getter dan setter untuk tiap properti, file VideoItem.java harus berisi seperti berikut:

8. Buat sebuah class Helper

untuk menghindari harus bekerja dengan YouTubeData API langsung dari Activity, buat sebuah class Java dan namakan YoutubeConnector.java. Class ini memiliki variabel member berikut:

  • sebuah instance dari class YouTube yang akan digunakan untuk berkomunikasi dengan YouTube API
  • sebuah instance dari YouTube.Search.List untuk merepresentasikan query pencarian
  • API key YoutTube sebagai static String

Kita akan menginisiasi variabel-variabel di atas di constructor. Untuk menginisiasi instance YouTube, gunakan class YouTube.Builder. Class-class yang akan bertanggung jawab mengenai koneksi jaringan dan pemrosesan JSON di lempar ke builder.

Setelah diinisiasi, kita akan gunakan method search untuk mengirim query pencarian. Method list kemudian digunakan untuk menyebutkan detil data yang ingin kita dapatkan di dalam hasil pencariannya. Untuk tutorial ini, kita akan membutuhkan sebuah id dan snippet untuk setiap hasil pencarian. Dari sana, kita ekstrak field-field berikut:

  • id/videoId
  • snippet/title
  • snippet/description
  • snippet/thumbnails/default/url

API key developer perlu dikirimkan bersama setiap permintaan pencarian. Untuk itu, kita gunakan method setKey. Kita juga gunakan method setType untuk membatasi pencarian hanya pada video saja. Sampai sini, class-nya seharusnya kurang lebih seperti ini:

Berikutnya, kita buat method bernama search untuk melakukan pencarian berdasarkan keyword dari user. Method ini menerima keyword sebagai parameter bertipe String. Variabel query dari method setQ digunakan untuk menentukan keyword.

Kita kemudian jalankan query menggunakan method execute. Hasilnya dikembalikan dalam bentuk instance dari SearchListResponse. Kita iterasi ke dalam setiap item hasil pencarian dan kita buat sebuah List dari objek VideoItem, yang akan menjadi nilai kembalian dari method ini. Setelah menambahkan penanganan error yang tepat, method search seharusnya tampak seperti berikut:

9. Buat SearchActivity

Buat sebuah class bernama SearchActivity.java. Class ini memiliki field-field yang merepresentasikan view-view yang kita sebutkan di activity_search.xml. Class ini juga punya sebuah Handler untuk mengupdate user interface dari thread.

Di dalam method onCreate, kita inisiasi view-view dan tambahkan OnEditorActionListener ke EditText untuk mengetahui jika user telah selesai mengetikkan keyword.

Anda tentu sadar adanya pemanggilan method searchOnYoutube. Mari kita definisikan methode-nya sekarang. Dalam method ini, kita buat sebuah Thread untuk menginisiasi instance YoutubeConnector dan menjalankan methode search-nya. Sebuah thread baru dibutuhkan, sebab operasi jaringan tidak boleh dilakukan di thread user interface. Jika Anda lupa melakukannya seperti ini, Anda akan mengalami runtime exception. Ketika hasilnya sudah tersedia, handler nya akan digunakan untuk meng-update tampilan.

Di dalam method updateVideosFound, kita buat sebuah ArrayAdapter dan lemparkan ke dalam ListView untuk menampilkan hasil pencarian. Di dalam method getView milik adapter, kita inflate layout video_item.xml dan update view-view nya untuk menampilkan informasi mengenai hasil pencariannya.

Method load milik Picasso kita gunakan untuk mengambil gambar thumbnail video, kemudian method into digunakan untuk memasukkan gambar tersebut ke ImageView.

Akhirnya, kita membutuhkan sebuah method untuk menentukan OnItemClickListener dari ListView sehingga user dapat mengklik pada hasil pencarian dan menonton video tersebut. Kita namakan method ini addClickListener dan panggil method ini pada akhir method onCreate.

Ketika satu item di list ditekan, kita buat sebuah Intent ke PlayerActivity dan lemparkan ID video-nya. Ketika Intent sudah jadi, gunakan method startActivity untuk menampilkan PlayerActivity.

10. Buat PlayerActivity

Buat sebuah class Java baru dengan nama PlayerActivity.java, turunan dari YouTubeBaseActivity. Ini penting, karena hanya subclass dari YouTubeBaseActivity yang bisa menggunakan YouTubePlayerView.

Class ini punya sebuah variabel member yang merepresentasikan YouTubePlayerView yang kita sebutkan di layout activity_player.xml. Ini diinisiasi di onCreate dengan memanggil method inisiasi class YouTubePlayerView, dan melempar API key developer.

Berikutnya, class kita perlu mengimplementasikan interface OnInitializedListener untuk mengetahui jika inisiasi telah selesai. Interface ini punya dua method, onInitializationFailure dan onInitializationSuccess.

Jika sukses, method cueVideo digunakan untuk menampilkan video YouTube. Jika gagal, kita tampilkan Toast yang memberitahu user bahwa inisiasi gagal.

Beginilah class PlayerActivity seharusnya:

11. Compile dan Jalankan

Aplikasi YouTube client kita sekarang sudah siap di-deploy di perangkat Android. Hampur semua perangkat Android populer punya YouTube, tapi pastikan bahwa aplikasi YouTube sudah terinstann - dan up to date - di perangkat, sebab aplikasi kita tergantung aplikasi ini.

Setelah ter-deploy, Anda mestinya bisa mengetikkan kata kunci untuk mencari video YouTube dan kemudian klik salah satu hasilnya untuk memainkannya.

Kesimpulan

Anda sekarang tahu bagaimana menempelkan video YouTube di aplikasi Android buatan Anda. Anda juga telah belajar bagaimana menggunakan library Google API dan berinteraksi dengan YouTube. Android Player API menyediakan banyak method untuk mengendalikan video dan Anda bisa gunakan ketika Anda menemukan ide kreatif lainnya. Silakan gunakan referensi lengkapnya untuk belajar lebih lanjut tentang API 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.