Pendahuluan

Mengembangkan aplikasi mobile dengan menggunakan Bluemix memungkinkan anda untuk mengintegrasikan berbagai layanan yang ada dalam Bluemix. Salah satu yang menarik adalah Watson Cognitive, layananan ini merupakan layanan yang dapat menambahkan kemampuan kognitif pada aplikasi yang akan kita buat. 

Untuk project kali ini kita akan mencoba membuat aplikasi dengan memanfaatkan salah satu Watson Cognitive Service yaitu Text-to-Speech. 

Kebutuhan

1. Android Studio
2. Smartphone Android atau Android Virtual
3. IBM Watson Java SDK
4. IBM Watson Android SDK

Langkah-langkah

Langkah 1 : Membuat Bluemix Watson Service

1. Login ke akun Bluemix Anda
2. Klik “Create Service”, kemudian pilih “Watson > Text to Speech”
   
3. Beri nama TTS Service, contoh: “Text to Speech - Android”. Kemudian klik tombol “Create”
   
   
4. Pilih “Service Credentials” kemudian salin dan catat informasi credentials yang telah didapat
   

Langkah 2 : Membuat Aplikasi Android

1. Buka Android Studio, kemudian klik “Start new Android Studio project”
   
2. Beri nama aplikasi dan company domain, kemudian klik next
   
   
   
3. Pilih “Target Android Device” Anda, kemudian klik next
   
   
   
4. Pilih template “Empty Activity”, kemudian klik next
   
5. Biarkan activity name tetap default, kemudian klik finish

Langkah 3 : Menambahkan Pustaka Watson: Watson-Developer-Cloud SDK for Java

1. Buka file build.gradle (Module: app) dari project Anda
2. Tambahkan kode berikut ke depedencies:
   compile 'com.ibm.watson.developer_cloud:text-to-speech:3.5.1'
3. Klik  “Sync Now” pada bagian pojok kanan atas
   
   
   

Langkah 4 : Menambahkan Pustaka Watson: Watson-Developer-Cloud Android SDK

1. Unduh file .aar dari url: https://github.com/watson-developer-cloud/Android-sdk#aar
2. Klik kanan project, kemudian pilih “Open Module Settings”
3. Klik icon plus pada bagian pojok atas untuk menambahkan modul baru
   
   
   
4. Pilih “Import .jar/.aar package” kemudian klik next
   
   
   
5. Pilih file .aar yang telah diunduh, kemudian klik finish
   
   
   
6. Kembali ke Module Settings, klik tab Depedencies dan kemudian klik icon plus pada bagian kanan
   
   
7. Pilih modul .aar yang telah ditambahkan tadi, kemudian klik OK
   
8. Tunggu sampai gradle sync selesai

Langkah 5 : Mendesain User Interface

1. Buka layout activity_main.xml dari project Anda
2. Masukkan kode berikut pada file xml Anda
   
3. Pastikan layout Anda terlihat seperti berikut:
   

Langkah 6 : Coding Aplikasi

1. Buka MainActivity.java dari project Anda
2. Kopi-kan kode berikut ke file MainActivity.java (sesuaikan package sesuai project Anda) https://gist.github.com/hbcafe/e6d53488acfdf6ae0fdf81caea0d2dfe#file-gistfile1-txt
   
   
3. Jika Anda mengatur target Minimum SDK pada API 19 (Android Kitkat) atau versi dibawahnya, lakukan modifikasi kode berikut:
   
   
4. Modifikasi kode berikut sesuai dengan credentials Anda
   
   
5. Anda dapat memilih suara dan bahasa voicer dengan mengubah kode berikut:
   
   
6. Buka AndroidManifest.xml dari project Anda
   
7. Tambahkan permission untuk mengakses Internet dan Network State
   

Langkah 7 : Menjalankan Aplikasi

1. Hubungkan smartphone Android Anda ke komputer dengan mode developer
2. Build dan jalankan aplikasi
3. Klik Watson TTS, Anda akan mendengar ucapan dari kata yang terdapat pada kolom teks

Pendahuluan

Layanan Bluemix selanjutnya yang akan kita pelajari adalah Push Notification. 

IBM Push Notifications adalah layanan yang dapat Anda gunakan untuk mengirim pemberitahuan / notifikasi ke perangkat mobile iOS dan Android, untuk web browser Google Chrome dan Mozilla Firefox dan juga untuk Google Chrome Apps and Extension. 

Pemberitahuan dapat ditargetkan untuk semua pengguna aplikasi atau untuk satu set tertentu dari pengguna dan perangkat yang menggunakan tag tertentu. Anda dapat mengelola perangkat, tag, dan langganan. Anda juga dapat menggunakan SDK (Software Development Kit) dan Representational State Transfer (REST) antarmuka program aplikasi (API) untuk lebih mengembangkan aplikasi klien Anda.

Cara Kerja Push Notification

Perangkat Mobile, Web Browser dan Google Chrome Apps and Extension dapat berlangganan dan mendaftar untuk layanan Push Pemberitahuan. Pada saat startup, aplikasi klien akan mendaftar dan berlangganan diri ke layanan Push Notifications. Pemberitahuan kemudian dikirim ke Apple Push Notification Service (APN) atau Firebase Cloud Messaging (FCM) / Google Cloud Messaging (GCM) server dan kemudian dikirim ke terdaftar ponsel atau browser klien.

Tipe Notifikasi

Broadcast

Pesan notifikasi ditargetkan untuk semua aplikasi di perangkat mobile, browser atau aplikasi Chrome yang telah mengimplementasikan Push Notification didalamnya.

Tag-based notifications

Pesan notifikasi ditargetkan untuk semua perangkat yang berlangganan tag tertentu. Hal ini memungkinkan melakukan segmentasi pemberitahuan berdasarkan subjek atau topik tertentu.

Unicast notifications

Pesan notifikasi ditargetkan untuk perangkat atau pengguna tertentu. Perangkat yang menerima unicast notifications tidak memerlukan konfigurasi tambahan dan aktifasi dilakukkan secara default saat aplikasi diaktifkan untuk Push Notification.

Platform-based notifications

Pemberitahuan dapat ditargetkan pada platform atau perangkat tertentu. Misalnya, pemberitahuan dapat dikirim ke semua pengguna Android atau pengguna Google Chrome saja.

Membuat IBM Push Notification

1. Buka kembali project mobile Anda sebelumnya. Klik add pada kotak Push Notifications.
   
   
   
2. Beri nama layanan Push Notifications, contoh: “Push Notification - Wisata Jogja App”.
   Kemudian klik tombol “Create”
   
   

Mendapatkan Push Credentials

Untuk mendapatkan push credentials, Anda bisa mendaftar pada Apple Push Notifications (APNs) untuk platform IOS dan pada Google Cloud Messaging (GCM) / Firebase Cloud Messaging (FCM) untuk platform Android.

Berikut ini adalah cara mendapatkan FCM Credentials:

1. Buka alamat https://firebase.google.com lalu klik Go to console
   
2. Klik create new project
   
3. Isi kolom project name dan region lalu klik create project
   
4. Buka Project Settings kemudian klik tab Cloud Messaging
   
5. Nah, berikut credentials yang kita perlukan
   

Mengintegrasikan Push Notification

1. Klik Configure Now pada menu Push Notification
   
   
2. Masukkan credentials APNs untuk platform IOS atau credentials GCM/FCM untuk platform Android
   
3. Build kembali aplikasi Anda seperti pada modul sebelumnya, kemudian pasang dan jalankan aplikasi tersebut pada smartphone Anda.
   
4. Pilih menu Send Notification untuk mengirimkan notifikasi. 
   1. Pilih target perangkat yang dikirimi
   2. Masukkan pesan
   3. Klik tombol Send

Konfigurasi lebih lanjut pengiriman notifikasi ada di bagian Optional Settings

5. Jika notifikasi berhasil dikirim akan ada pesan Success di bagian atas.
   

6. Berikut tampilan notifkasi yang dikirimkan ke smartphone
   

7. Simpan APK dan screenshot (di device real) yang dihasilkan pada modul ini untuk dikumpulkan pada modul berikutnya.

Pendahuluan

Bluemix Mobile Builder adalah salah satu layanan IBM Bluemix yang memudahkan developers dalam mengembangkan aplikasi mobile dengan mudah, cepat, dan tanpa koding (memprogram). Cukup dengan drag-n-drop dan sedikit pengaturan, aplikasi mobile yang Anda inginkan dapat segera diwujudkan.

Fitur Bluemix Mobile Platform

• Hybrid Application

Sekali membuat aplikasi, Anda akan mendapatkan aplikasi dengan 2 platform sekaligus, yaitu Android dan IOS.

• Native Application

Aplikasi yang dibuat di Mobile Platform ini tetap aplikasi native sesuai dengan platform yang tersedia (Java Android, Obj-C IOS, Swift IOS ), bukan aplikasi berbasis web atau aplikasi emulasi lainnya.

• Generate Application Online

Anda dapat meng-generate aplikasi yang Anda buat menjadi file .apk atau .ipa langsung secara online.

• Download Native Source Code

Kode sumber aplikasi yang telah dibuat dapat diunduh untuk dikembangkan lebih lanjut menggunakan Native IDE masing-masing platform (Android Studio / Xcode).

UI Starter & Code Starter

Dengan memanfaatkan mobile dashboard pada IBM Bluemix, Anda bisa membuat project dengan menggunakan UI Starter atau Code Starter. UI Starter bisa digunakan untuk membuat aplikasi yang berbasis UI Builder, sehingga aplikasi yang dirancang bisa menggunakan editor visual. Code Starter menyediakan beberapa contoh kode template yang dapat mempercepat programmer dalam membuat aplikasi.

UI Starter

Code Starter

Membuat Aplikasi dengan Template

Setelah mengetahui beberapa jenis sumber data yang dapat digunakan, kali ini kita akan mencoba membuat aplikasi sederhana berupa store catalog.

Langkah 1 : Membuat Aplikasi

1. Masuk ke dashboard Bluemix Anda
2. Klik side menu yang berada di samping kiri dashboard, kemudian pilih Mobile
   
   
3. Klik Create Project
   
   
4. Pilih UI Starters > Store Catalog, kemudian klik Create Project
5. Beri nama project Anda, misalnya “Katalog Baju”, kemudian klik Create

Langkah 2 : Merancang User Interface

1. Dari side menu project, pilih UI Builder.
   
   
2. Pilih menu Screen. Screen digunakan untuk mengatur halaman-halaman dari aplikasi.
   Beberapa bagian dari menu Screen adalah sebagai berikut:
   
   
3. Menambahkan Screen
   Klik Create Screen untuk menambahkan screen baru.Akan muncul pop-up, Beberapa tipe screen yang tersedia sebagai berikut:
   • Menu: Menampilkan data secara grid (kotak-kotak)
   • List: Menampilkan data secara vertikal
   • Map: Menampilkan data peta lokasi
   • Chart: Menampilkan data berupa grafik (chart)
   • Custom: Membuat gaya tampilan data sendiri

4. Mengubah ItemKlik item yang ingin diubah, kemudian isikan data pada kolom “Data to Display”
   
5. Menghapus ItemKlik icon tong sampah di pojok item untuk menghapus item yang tidak diperlukan
   
   

6. Menambah Item
   Dibagian bawah layout, terdapat gambar berikut:
   • Add Text : Untuk menambahkan text
   • Add Image : Untuk menambahkan gambar

7. Hasil Akhir aplikasi yang anda buat menggunakan template “Catalog” akan seperti berikut:

Langkah 3 : Mengatur Navigasi

Beberapa item pada navigation pattern :

	Berfungsi untuk membungkus dan me-navigasikan screens pada aplikasi Anda. Ada dua pilihan layout yang tersedia : Menu icon title : menampilkan nama dan icon tiap screen yang ada di aplikasi Anda. Menu title : hanya menampilkan nama pada setiap screen.
	Penggunaan tabbed navigation adalah agar pengguna dapat beralih screen dengan lebih cepat. Tabbed navigation tidak menyediakan pilihan layout, jadi Anda hanya dapat menggunakan layout default yang disediakan oleh bluemix.
	Dari semua screen yang ada, Anda dapat menentukan screen utama melalui pattern Main screen. Screen utama inilah yang akan ditampilkan pertama kali saat aplikasi Anda dibuka.

1. Menambahkan Navigation
   
2. Mengedit Item
   

On Tap Event : 

Untuk menentukan event yang akan dilakukan saat pengguna klik menu screen.

Target Screen : 

untuk memilih screen yang akan menjadi target navigasi

Item Name : 

Untuk menentukan nama screen yang akan ditampilkan sebagai menu navigation.

Item Image : 

Untuk mengganti icon screen yang akan ditampilkan sebagai menu navigation

Langkah 4 : Meng-generate APK Online

1. Pindah ke menu Setting, atur logo, deskripsi aplikasi, dan bundle identifier sesuai dengan preferensi Anda.
   
   
   

2. Klik icon back untuk keluar dari menu UI Builder 
3. Pilih menu Code kemudian pilih platform yang tersedia, misal Android.Tunggu proses “Generating Code” selesai.
   
4. Klik Download APK untuk mengunduh APK yang telah di-generate
   
   
   
   
5. Pasang APK yang telah diunduh ke emulator/smartphone Android Anda.
6. Simpan APK dan screenshot (di device real) yang dihasilkan pada modul ini untuk dikumpulkan dalam beberapa modul kedepan.