Tutorial Membuat Aplikasi Recycletor dengan Watson Visual Recognition

Halo rekan-rekan developer, IBM Indonesia telah membuka kelas Belajar Membuat Aplikasi Kognitif dengan IBM Watson. Lewat kelas ini, rekan-rekan developer dapat belajar tentang cara mengembangkan aplikasi yang memiliki kemampuan kognitif manusia, seperti belajar, berinteraksi, mengenali obyek, menganalisa, dan lain sebagainya. Terdapat beberapa layanan IBM Watson yang dapat digunakan untuk mengembangkan aplikasi kognitif. Termasuk salah satunya adalah Watson Visual Recognition yang akan kita pelajari pada kesempatan ini. Untuk lebih jelasnya, rekan-rekan dapat mengikuti akademi tersebut.

Dalam kesempatan ini, kita tidak akan belajar tentang teori Watson Visual Recognition. Kita akan belajar tentang cara menggunakan layanan Watson Visual Recognition untuk membangun sebuah aplikasi pendeteksi benda-benda yang dapat didaur ulang. Berikut langkah-langkahnya:

Persiapan Tools

Sebelum mulai membangun aplikasi pendeteksi benda-benda yang dapat didaur ulang dengan menggunakan Watson Visual Recognition, rekan-rekan harus mempersiapkan beberapa hal berikut ini:

  1. Cloud Foundry CLI
  2. NodeJS
  3. Code Editor (Notepad++, Sublime Text, dll)
  4. Android Studio

Mempersiapkan Server

Setelah persiapan selesai, langkah selanjutnya adalah mempersiapkan server. Berikut caranya:

  1. Download/Clone sampel aplikasi Node.js IBM Watson Visual Recognition Service di sini.
  2. Pada folder sampel aplikasi yang sudah diunduh, buka file manifest.yml. Ubah <application-name> pada bagian -name dengan nama yang anda inginkan. Nama tersebut harus dibuat unik karena akan menjadi inisial url aplikasi anda, sebagai contoh adalah <application-name>.mybluemix.net.gambar-1-visual-recognition
  3. Pada file app.js, masukan API key anda. Tutorial membuat servis dan cek API key di sini.gambar-2-visual-recognition
  4. Selanjutnya kita akan mencoba terlebih dulu API pada localhost. Buka folder yang diunduh, tekan “Shift+klik kanan->Open command window here” untuk membuka Command Line pada sistem operasi Windows.
  5. Jalankan aplikasi dengan mengetikan $ npm start pada Command Line, jika berhasil tampilan akan menjadi seperti di bawah ini:gambar-3-visual-recognition
  6. Lakukan uji coba API menggunakan aplikasi Postman, dengan url: localhost:3000/api/classifygambar-4-visual-recognition
  7. Untuk mengembangkan aplikasi pemindai benda-benda yang dapat didaur ulang, kita sebenarnya hanya memerlukan nilai “class” yang ada pada objek array classes.gambar-5-visual-recognition
  8. Oleh karena itu, kita hanya perlu mengambil nilai tersebut. Untuk mengambilnya, Buka file app.js. Kemudian tambahkan source code berikut ini pada baris 319:gambar-6-visual-recognition
  9. Kemudian disable dengan menambahkan // pada baris berikut ini:gambar-7-visual-recognition
  10. Mulai kembali aplikasi menggunakan perintah $ npm start pada Command Line. Dan coba kembali aplikasi menggunakan aplikasi Postman. Hasilnya akan terlihat seperti berikut ini: (hanya nilai class yang muncul)gambar-8-visual-recognition
  11. Login menggunakan akun Bluemix menggunakan Command Line dengan perintah seperti berikut:
  12. Masukan email anda pada <your user ID> . Jika anda belum memiliki akun Bluemix, daftar di sini.
  13. Buatlah layanan Visual Recognition pada Bluemix menggunakan command line dengan perintah seperti berikut:
  14. kemudian push aplikasi menggunakan command line dengan perintah berikut:
  15. Jika berhasil, respon yang akan muncul adalah seperti berikut :gambar-12-visual-recognition
  16. Cek API menggunkan aplikasi Postman kembali:gambar-13-visual-recognition

Membuat Aplikasi Android Watson Visual Recognition

Setelah selesai mempersiapkan server, langkah selanjutnya adalah membuat aplikasi Android. Berikut ini cara membuat aplikasinya:

  1. Download sampel aplikasi di sini – (size 66mb).
  2. Buka file pada Android Studio.
  3. Buat Class baru. Dan beri nama “Responsegambar-14-visual-recognitiongambar-15-visual-recognition
  4. Buka http://www.jsonschema2pojo.org/. Paste schema JSON pada API yang tampil pada aplikasi Postman dan konfiguasikan seperti berikut ini:gambar-16-visual-recognition
  5. Klik tombol Preview. Dan salin source code yang muncul ke dalam Class Response yang telah dibuat.gambar-18-visual-recognitiongambar-19-visual-recognition
  6. Masukan base url anda pada class MainActivity pada baris 123.gambar-20-visual-recognition
  7. Kemudian tambahkan source code berikut pada baris 278. gambar-21-visual-recognition
  8. Kode di atas berfungsi untuk menampung data dari hasil pengolahan server, yang berupa Tag. Jika anda ingin menambahkan field lain pada response API, tambahkan variabel sesuai kebutuhan.
  9. Gunakan fungsi finalResult() untuk mengirimkan data ke ActivityResult :gambar-22-visual-recognition
  10. Jika terdapat variabel lain yang ingin anda kirim, Edit fungsi finalResult() sesuai dengan kebutuhan.
  11. Pada Class Result, tambahkan source code berikut pada baris 44:gambar-23-visual-recognitiongambar-24-visual-recognition
  12. Setelah itu, jalankan Aplikasinya. Tampilan dari aplikasi adalah seperti berikut:gambar-25-visual-recognition
  13. Perbanyak pengenalan benda yang dapat didaur ulang pada source code berikut :gambar-26-visual-recognition

 

*Tutorial ini ditulis berdasarkan dokumentasi dari Muhammad Fauzan dan Najib Abdillah.

Belajar mengembangkan aplikasi atau game dengan kurikulum yang telah divalidasi langsung oleh industri dengan Dicoding Academy.

Belajar di Dicoding Sekarang →
Share this:

2 comments, add yours.

Samuel

Bang klo hasil scanya mau diganti ga pake tag, lngsung di desc aja caranya gmn?

Samuel

Terimakasih sebelumnya info yg sangat bermanfaat 🙂

One Trackback

  1. […] sebelumnya kita telah belajar cara membangun aplikasi dengan menggunakan layanan Watson Visual Recognition, kali ini kita akan belajar cara membangun sebuah aplikasi Customer Service dengan menggunakan […]

Leave a comment