Daftar Isi : Modul 1 - Pengenalan HTML5, Mobile Application, dan Intel XDK Modul 2 - Menginstall Intel XDK Modul 3 - Pengenalan Intel XDK Development Tools Modul 4 - Pengembangan Aplikasi Mobile Learning menggunakan Intel XDK Modul 5 - Pengembangan Aplikasi Mobile Learning menggunakan Intel XDK sesi 2 Modul 6 - Preview Aplikasi pada Device Modul 7 - Integrasi aplikasi dengan Facebook API menggunakan Intel XDK Modul 8 - Men-submit Aplikasi ke Store Modul Extra - Creating App Using AppStarter Wizard
Pelatihan Intel XDK Modul 1. Pengenalan HTML5, Mobile Application, dan Intel XDK. Dikembangkan oleh Intel Software.
1
Versi 1.0. September 2013. Hak Cipta (C) 2013 Intel Software. Adobe, Adobe Edge, dan Adobe Edge Animate merupakan merk dagang dan merk dagang terdaftar milik Adobe, Inc. Android, Chrome, dan Google adalah merk dagang dan merk dagang terdaftar milik Google, Inc. Intel, Intel XDK merupakan merk dagang dan merk dagang terdaftar milik Intel Corporation. iOS dan OS X adalah merk dagang dan merk dagang terdaftar milik Apple, Inc. Windows, Windows Phone, Windows Store adalah merk dagang dan merk dagang terdaftar milik Microsoft Corporation. Semua merk dagang terdaftar lainnya yang tercantum pada modul ini merupakan milik pemiliknya masing-masing yang peduli. Modul ini bebas untuk disebarluaskan secara hardcopy ataupun softcopy dengan tanpa menambah atau mengurangi isi dari modul ini termasuk isi halaman ini. Modul ini tidak boleh diperjual belikan atau digunakan untuk tujuan komersial lain.
2
Modul 1. Pengenalan HTML5, Mobile Application, dan Intel XDK.
3
Sekilas mengenai HTML 5 Hypertext Markup Language, atau biasa disingkat HTML, merupakan sebuah bahasa yang digunakan untuk membuat sebuah halaman web yang kemudian akan ditampilkan pada sebuah aplikasi penjelajah web seperti Internet Explorer, Safari, Google Chrome, Mozilla Firefox, dan lain-lain. HTML merupakan sebuah standar untuk menampilkan sebuah halaman web. HTML saat ini merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C). Bahasa HTML berbentuk berupa tag-tag elemen dan atribut yang tersusun secara hirarkial (Markup Language). Berikut ini contoh dari sebuah bahasa HTML: Contoh Hello World Halo Hello World. HTML5 itu sendiri adalah revisi kelima dari bahasa HTML. Pada HTML5 diperkenalkan beberapa atribut dan elemen baru yang mendukung pengembangan website modern seperti penambahan atribut dan elemen untuk mendukung elemen video, canvas, dan masih banyak lagi. HTML5 secara utuh merupakan penggabungan teknologi antara HTML5, CSS3, dan JavaScript. Berikut adalah contoh skrip bahasa HTML yang sudah menggunakan standar HTML5: Contoh Hello World Halo Hello World.
4
Sekilas mengenai Mobile Application Mobile Application atau aplikasi mobile adalah aplikasi yang berjalan pada sebuah perangkat mobile seperti komputer tablet atau smartphone. Aplikasi mobile berjalan di atas platform sistem operasi mobile yang ada pada saat ini yaitu Android, BlackBerry, iOS, dan Windows Phone. Aplikasi mobile dapat dibuat oleh developer pihak ketiga dan disimpan di marketplace milik masing-masing sistem operasi mobile. Play Store untuk Android, App World untuk BlackBerry, App Store untuk iOS, dan Windows Store untuk Windows Phone. Berikut ini contoh aplikasi mobile Twitter untuk iOS, Android, dan Windows Phone.
Gambar 1 Aplikasi Twitter mobile untuk iOS, Android, dan Windows Phone
Membuat aplikasi mobile dapat menggunakan SDK (Software Development Kit) yang sudah disediakan oleh masing-masing platform mobile. Misalkan, XCode untuk iOS dan Microsoft Visual Studio untuk Windows Phone. Dengan begitu, aplikasi yang dirancang untuk iOS hanya berjalan pada sistem operasi iOS dan tidak bisa berjalan pada sistem operasi lainnya, begitu juga yang lainnya.
Mengenai Intel XDK Intel XDK adalah perangkat bagi para pengembang untuk mengembangkan aplikasi HTML5 hybrid untuk berbagai perangkat mobile dan aplikasi HTML5 lainnya seperti ekstensi Google
5
Chrome, aplikasi Facebook, atau sebuah website mobile. Intel XDK dapat diinstall di sistem operasi Windows, OS X, dan Linux. Pada Intel XDK terdapat perangkat untuk melakukan coding, debugging, testing, dan build aplikasi yang telah kita kembangkan menjadi aplikasi web dan aplikasi HTML5 hybrid untuk berbagai platform mobile diantaranya iOS, Android, Windows 8 Store, Windows 8 Phone, dan lain-lain. Intel baru saja merilis Intel XDK New. Yang akan kita gunakan pada pelatihan ini adalah versi Intel XDK New ini. Sampai saat modul ini ditulis, Intel XDK New baru tersedia versi previewnya untuk sistem operasi Windows. Intel menjanjikan akan segera merilis versi untuk sistem operasi OS X dan Linux segera. Berikut ini adalah contoh tampilan dari Intel XDK New:
Gambar 2 Contoh tampilan antarmuka aplikasi Intel XDK
6
Pelatihan Intel XDK Modul 2. Menginstall Intel XDK. Dikembangkan oleh Intel Software.
1
Versi 1.0. September 2013. Hak Cipta (C) 2013 Intel Software. Adobe, Adobe Edge, dan Adobe Edge Animate merupakan merk dagang dan merk dagang terdaftar milik Adobe, Inc. Android, Chrome, dan Google adalah merk dagang dan merk dagang terdaftar milik Google, Inc. Intel, Intel XDK merupakan merk dagang dan merk dagang terdaftar milik Intel Corporation. iOS dan OS X adalah merk dagang dan merk dagang terdaftar milik Apple, Inc. Windows, Windows Phone, Windows Store adalah merk dagang dan merk dagang terdaftar milik Microsoft Corporation. Semua merk dagang terdaftar lainnya yang tercantum pada modul ini merupakan milik pemiliknya masing-masing yang peduli. Modul ini bebas untuk disebarluaskan secara hardcopy ataupun softcopy dengan tanpa menambah atau mengurangi isi dari modul ini termasuk isi halaman ini. Modul ini tidak boleh diperjual belikan atau digunakan untuk tujuan komersial lain.
2
Modul 2. Menginstal Intel XDK.
3
Proses Instalasi Intel XDK Pada sesi ini kita akan menginstal Intel XDK Development Tools. Mari kita ikut langkahlangkah berikut ini secara seksama. Hal pertama yang harus kita lakukan adalah mengunduh installer Intel XDK dari website resmi Intel XDK (http://www.html5dev-software.intel.com). Untuk masuk halaman unduhan klik tombol Preview Intel XDK New. Adapun requirement untuk instalasi dari Intel XDK New ini adalah sebagai berikut: -
Microsoft Windows Operating System Internet Access Etc.
Catatan: Sampai hari pembuatan modul ini, Intel XDK New hanya tersedia untuk OS Widows. Untuk OSX dan Linux masih ‘Coming soon’
Gambar 1 - Intel XDK New
4
Langkah 1 Setelah masuk halaman unduhan seperti di bawah ini, klik tombol Download Intel XDK New. Ukuran file kurang lebih 70 Mb.
Gambar 2 - Download Intel XDK
Langkah 2 Oke, selanjutnya setelah file installer selesai diunduh, mari kita lakukan proses instalasi. Prosesnya cukup simpel dan mirip dengan proses instalasi program lainnya.
5
Jalankan installer!
Gambar 3 - Installer Intel XDK
Langkah 3 Klik installer, maka akan ada langkah-langkah instalasi selanjutnya.
Gambar 4 - Splash Screen Intel XDK
6
Klik Tombol Next
Gambar 5 - Langkah Instalasi
Langkah 4 Selanjutnya pilih destinasi folder untuk instalasi Intel XDK ini, folder default seperti di bawah ini.
Destinasi folder
Klik Tombol Next Gambar 6 - Pengaturan Instalasi
7
Langkah 5
Klik Tombol Install
Gambar 7 - Tombol Install
Gambar 8 - Instalasi Sedang Berjalan
8
Setelah proses instalasi berhasil maka akan tampil pada list programs.
Program Intel XDK New
Gambar 9 - Intel XDK Telah Terpasang
9
Pelatihan Intel XDK Modul 3. Pengenalan Intel XDK Development Tools. Dikembangkan oleh Intel Software.
1
Versi 1.0. September 2013. Hak Cipta (C) 2013 Intel Software. Adobe, Adobe Edge, dan Adobe Edge Animate merupakan merk dagang dan merk dagang terdaftar milik Adobe, Inc. Android, Chrome, dan Google adalah merk dagang dan merk dagang terdaftar milik Google, Inc. Intel, Intel XDK merupakan merk dagang dan merk dagang terdaftar milik Intel Corporation. iOS dan OS X adalah merk dagang dan merk dagang terdaftar milik Apple, Inc. Windows, Windows Phone, Windows Store adalah merk dagang dan merk dagang terdaftar milik Microsoft Corporation. Semua merk dagang terdaftar lainnya yang tercantum pada modul ini merupakan milik pemiliknya masing-masing yang peduli. Modul ini bebas untuk disebarluaskan secara hardcopy ataupun softcopy dengan tanpa menambah atau mengurangi isi dari modul ini termasuk isi halaman ini. Modul ini tidak boleh diperjual belikan atau digunakan untuk tujuan komersial lain.
Muhammad Yusuf
[email protected] @ruangchupa
Gilang Abdul Aziz
[email protected] @Ltheordinary
2
Modul 3. Pengenalan Intel XDK Development Tools.
3
Membuka aplikasi Intel XDK Setelah diinstall, aplikasi Intel XDK dapat dibuka dengan mengklik shortcut yang terdapat pada start menu di komputer Anda dengan nama aplikasi Intel® XDK New. Sebagai contoh berikut adalah shortcut Intel XDK pada start menu Windows 8:
4
Tampilan Awal Intel XDK Pada saat pertama dibuka, maka akan muncul tampilan awal sebagai berikut:
Pada tampilan tersebut disajikan menu untuk membuka proyek-proyek yang telah kita buat sebelumnya dan menu untuk membuat proyek baru. Kali ini kita akan mencoba membuat satu proyek baru. Silakan klik tombol Start a New Project.
5
Sekarang kita akan disuguhkan tampilan menu untuk membuat proyek baru.
Pada bilah di samping kiri, terdapat pilihan tipe metode dari pembuatan proyek yang akan kita buat. Terdapat 4 pilihan yaitu Use App Designer, Import Project, Start with a demo, dan Blank Project: 1. Use App Designer: Dengan menggunakan metode pembuatan proyek ini, kita akan diberikan beberapa library JavaScript UI yang dapat kita pilih untuk membuat tampilan pada aplikasi kita. Kita juga diberikan kemudahan dengan cara drag and drop saat menambahkan dan melakukan layouting elemen pada aplikasi kita. 2. Import Project: Metode pembuatan proyek ini digunakan saat kita ingin mengimport proyek yang telah kita buat sebelumnya menggunakan Intel XDK versi sebelumnya, App Starter Wizard, atau lainnya yang kompatibel dengan Intel XDK. 3. Start with a demo: Metode pembuatan proyek yang menggunakan aplikasiaplikasi demo yang sudah disediakan oleh Intel sebagai contoh. 4. Blank Project: Metode pembuatan proyek ini dipakai jika kita ingin membuat proyek yang benar-benar dari awal dan saat awal dibuat hanya berisi direktori standar Intel XDK dan satu file HTML awal. Namun saat ditengah-tengah pengembangan proyek jika ingin menggunakan App Designer, tetap dapat menggunakannya dengan mengklik pada menu App Designer yang sudah disediakan.
6
Silakan pilih Start with a Demo, lalu pilih salah satu demo aplikasi yang disediakan pada menu sebelah kanan dan klik Next. Pada tampilan berikutnya, silakan beri nama proyek dan pilih lokasi folder penyimpanan proyek dan klik Create.
Sebenarnya ada satu lagi metode pembuatan proyek yang ditawarkan Intel XDK, yaitu metode App Starter Wizard. Dengan metode ini kita dapat membuat sebuah aplikasi sampai jadi dengan beberapa klik saja. Namun saat modul ini ditulis, metode App Starter Wizard belum dimasukkan pada versi Intel XDK New. Intel berjanji akan segera mengembalikan metode pembuatan proyek ini ke versi Intel XDK New. Namun kami telah menyediakan modul yang membahas tentang metode pembuatan proyek menggunakan App Starter Wizard ini pada modul ekstra.
Sekilas Tahapan Pengembangan pada Intel XDK Jika kita melihat bagian sebelah atas dari aplikasi Intel XDK, maka akan terdapat menu seperti pada gambar di bawah ini:
Masing-masing menu tersebut merepresentasikan tahapan pengembangan pada Intel XDK yaitu sebagai berikut:
7
1. Develop Tahapan ini adalah tahap saat aplikasi dibuat dan dikembangkan. Terdapat dua pilihan pengembangan pada tahap ini yaitu Editor dan App Designer. Pada pilihan Editor kita dapat melakukan aktivitas Coding dan pada pilihan App Designer kita dapat melakukan aktivitas layouting.
8
2. Emulate Pada tahap ini aplikasi yang kita buat dites untuk disimulasikan ketika berjalan pada device nanti. Terdapat banyak menu untuk melakukan simulasi seperti Accelerometer, Geolocation, Network, Events, dan lain-lain.
9
3. Test Pada tahapan ini aplikasi yang kita buat akan dicoba untuk dijalankan di device asli. Yang perlu dilakukan untuk melakukan tahap ini adalah kita terlebih dahulu perlu menginstall aplikasi App Lab di device yang akan dijadikan tempat kita mencoba aplikasi kita. Nanti, pada aplikasi App Lab tersebut kita dapat membuka aplikasi yang kita kembangkan yang telah kita push ke server pada saat tahap Test ini. Aplikasi App Lab ini tersedia untuk device dengan platform iOS dan Android.
10
4. Build Tahap ini adalah tahap saat aplikasi kita dibuild menjadi sebuah aplikasi untuk masingmasing platform yang akan kita pilih. Caranya cukup mudah yaitu hanya dengan mengklik salah satu platform pada menu di tahap Build ini maka aplikasi kita akan diunggah ke server dan oleh server akan dikembalikan lagi dalam bentuk paket aplikasi yang siap diinstall atau dipublish di platform yang telah kita pilih.
11
5. Services Tahap ini sebenarnya adalah tahap tambahan yang optional jika kita ingin menggunakan layanan-layanan yang disediakan untuk melakukan hal misalnya menambah iklan di aplikasi kita, men-track performance aplikasi kita, dan lain-lain.
12
Membuat Aplikasi Hello World pada Intel XDK Kali ini, untuk mencoba beberapa fitur dan tool pada Intel XDK mari kita membuat sebuah proyek aplikasi simpel yaitu aplikasi Hello World. Mari membuat sebuah proyek baru menggunakan App Designer.
1. Membuat Proyek Pada tampilan awal Intel XDK, pilih Start a New Project dan pilih Use App Designer sebagai metode pembuatan proyek yang akan kita pakai.
Beri nama proyek yang akan kita buat dengan nama xdkHelloWorld dan silakan tentukan lokasi folder penyimpanan proyek tersebut.
13
Klik tombol Create untuk memulai proses pembuatan proyek.
Setelah proyek kita selesai dibuatkan oleh Intel XDK, maka akan muncul tampilan bahwa proyek kita telah sukses dibuat dan siap untuk dikembangkan lebih lanjut. Silakan tutup pop up Success yang muncul.
14
2. Menambahkan elemen-elemen aplikasi Sekarang, saatnya mulai bekerja. Pada bilah sebelah kiri terlihat hierarki file dari proyek kita. Silakan klik file index.html.
Maka akan terbuka pada bilah Editor tampilan kode program dari file index.html tersebut.
15
Lalu klik pada tombol App Designer di bagian atas bilah sebelah kiri untuk membuka tampilan bilah App Designer.
Maka bilah Editor kita akan berubah menjadi bilah App Designer dan untuk pertama kali, kita akan diminta memilih framework UI yang mana yang akan kita pakai.
16
Pilih framework jQuery Mobile dan klik tombol Select.
Maka tampilan khas App Designer akan muncul beserta kanvas aplikasi kita dan kita bisa dengan bebas melakukan aktivitas drag and drop untuk menambahkan elemen dan melayout elemen pada aplikasi kita.
17
Pada bilah Controls, pada bagian Form, silakan drag ke kanvas sebuah elemen Button.
op d dr n a Drag
18
Sehingga tampilan di kanvas akan menjadi seperti ini:
Dengan button yang baru kita buat yang masih terseleksi, pada bilah Button Settings, isi Label dengan “Hello World Button”, lalu centang Id dan isi dengan “btnHelloWorld”.
19
Pengisian label adalah untuk merubah teks pada tombol tersebut di tampilan layar dan pengisian id adalah untuk mendefinisikan id dari tombol tersebut untuk penggunaan di kode program nanti. Tampilan di kanvas kita sekarang adalah seperti ini:
Pemberian nama Id haruslah unik (berbeda-beda) pada setiap elemen yang kita buat. Sama sekali tidak boleh ada kesamaan. Perlu diingat juga bahwa Id bersifat case-sensitive.
20
Berikutnya kita akan menambahkan sebuah teks di kanvas kita. Pada bilah Controls, bagian Media, drag and drop Text ke sebelah bawah tombol btnHelloWorld yang telah kita buat sebelumnya.
op d dr n a Drag
Sehingga tampilan di kanvas akan seperti berikut ini:
21
Lalu masih dengan teks tersebut yang terseleksi, pada bilah Text Settings, isi Text dengan “Aplikasi Pertamaku di Intel XDK”. Lalu centang Id, dan isi dengan “txtHelloWorld.
Maka tampilan di kanvas kita akan seperti berikut:
22
Penambahan dan layouting elemen pada aplikasi kita sudah cukup, sekarang akan kita lanjutkan pada coding alias meng-kode program. Sebelumnya, mari kita coba tes aplikasi kita dengan mengklik tombol Emulate pada menu tahapan-tahapan pengembangan di bagian atas.
Saat tombol tersebut diklik, kemungkinan akan ada alert permintaan untuk men-save aplikasi kita jika belum kita save dan silakan pilih Yes.
23
Dan berikut adalah tampilan aplikasi kita yang sedang diemulasikan pada device virtual, untuk contoh di bawah ini adalah device iPhone 5 virtual:
Lumayan bukan? Jika kita klik tombol Hello World Button yang telah kita buat maka tidak akan terjadi apa-apa. Mengapa? Jelas karena kita belum memberi perintah aksi apapun pada tombol tersebut. Maka dari itu, mari kita kembali ke tampilan Develop dengan mengklik tombol Develop pada menu tahapan-tahapan pengembangan di bagian atas.
Sekarang, saatnya kita melakukan aktivitas mengetik. Siap untuk mengetik? J
24
3. Menambahkan kode untuk aksi program Pertama-tama, pada bagian sebelah kiri atas, pada menu di sebelah atas bilah hierarki file kita, klik tombol Editor.
Maka kita akan diberikan tampilan editor kode program yang penuh dengan huruf-huruf dan karakter-karakter seperti berikut ini:
25
Pada bilah hierarki file, pastikan file yang terpilih adalah file index.html untuk memastikan bahwa kode program yang sedang terbuka adalah kode program milik index.html.
Selanjutnya, mari fokus ke editor kode program yang terbuka, dan mari mulai aktivitas coding. Bahasa yang akan kita gunakan adalah bahasa HTML, terlihat dari ekstensi file yang sedang kita buka, yaitu .html. Mungkin kebanyakan dari Anda sudah familiar dengan bahasa HTML ini. Bagi yang belum familiar, dapat belajar lebih lanjut tentang bahasa HTML pada modul yang khusus membahas tentang bahasa HTML. Modul tersebut banyak tersedia di HTML, buku yang membahas khusus tentang bahasa HTML pun banyak tersedia di toko buku. Ya, serius, kita akan membuat aplikasi mobile menggunakan bahasa HTML yang lumayan familiar bagi Anda. Benar-benar bahasa HTML. Tambahannya mungkin ada pada kode Javascript yang akan kita tambahkan dan kode dari library-library tambahan. Untuk mengetahui betapa mudahnya, mari kita mulai.
26
Pertama-tama, mari kita lihat hasil pekerjaan kita sebelumnya saat menambahkan elemen pada kanvas. Aktivitas drag and drop tersebut sebenarnya akan otomatis men-generate kode HTML. Silakan scroll kode program Anda sampai Anda temukan kode seperti berikut:
Jika sulit menemukannya, intinya cari baris kode program berikut: Kode program yang kami maksud adalah kode program di dalam elemen tersebut. Jika ada perbedaan sedikit, tidak masalah, mungkin terdapat perbedaan saat Intel XDK menggenerate kode program kita. Pada baris-baris kode program di bawah, coba lihat bagian kode program:
Itu adalah baris dari kode yang digenerate saat kita membuat elemen Button. Pada bagian yang ditunjukkan tanda panah, itu adalah hasil generate kode dari atribut-atribut yang kita isikan saat membuat tombol. Terdapat atribut Id dan Label. Lalu lihat juga pada baris kode program berikut:
Bisa menebak dan menemukan sendiri elemen apakah itu? Ya, itu adalah elemen Text dengan atribut id “txtHelloWorld” dan Text “Aplikasi pertamaku di Intel XDK”.
27
Kesimpulannya, saat kita melakukan layouting dengan App Designer, sebenarnya kita sedang mempersingkat langkah kerja kita dengan membiarkan Intel XDK menggenerate sendiri kode HTML untuk kita. Terdapat satu kesimpulan lain yang didapat: Pada pengembangan aplikasi mobile di Intel XDK atau aplikasi HTML5 lainnya, bahasa yang digunakan untuk layouting adalah bahasa HTML. Sekarang, mari lanjut ke tahap pemberian perintah aksi program. Silakan cari baris kode program berikut ini:
Terlihat pada angka baris kode program pada gambar di atas, terlihat bahwa baris kode program tersebut berada pada baris 25-49. Atau mungkin beda-beda tipis pada baris kode program milik Anda. Itu adalah sebuah kode program dengan bahasa JavaScript. Pada pengembangan aplikasi menggunakan Intel XDK atau aplikasi HTML5 lainnya, kode perintah untuk aksi program mengunakan bahasa JavaScript. Kode di atas adalah kode-kode perintah dasar yang otomatis digenerate oleh Intel XDK.
28
Pada pengembangan aplikasi menggunakan Intel XDK atau aplikasi HTML5 lainnya, kode perintah untuk aksi program mengunakan bahasa JavaScript. Sekarang kita akan menambahkan sebuah kode untuk perintah aksi program yang baru, kita akan simpan kode tersebut di bagian bawah sebelum tag tutup elemen yaitu seperti ditunjukkan oleh panah pada gambar di bawah ini:
Baris kode programnya adalah sebagai berikut, silakan diketikkan pada bagian tersebut: function showHelloWorld(){ $("#txtHelloWorld").text("Hello World Intel XDK"); } Sehingga tampilan pada baris kode program adalah seperti berikut:
Mungkin kebanyakan dari Anda belum familiar dengan maksud dari kode program tersebut. Kode tersebut merupakan bahasa JavaScript dengan tambahan library JQuery Mobile (yang telah kita pilih di awal pengembangan aplikasi). Kode tersebut merupakan sebuah fungsi bernama showHelloWorld() yang saat dipanggil akan mengganti atribut text menjadi “Hello World Intel XDK” dari sebuah elemen pada aplikasi yang memiliki id “txtHelloWorld”. Di mana elemen pada aplikasi kita yang memiliki id tersebut adalah Text yang kita buat sebelumnya. Singkatnya, fungsi tersebut ketika dipanggil akan membuat elemen Text yang kita buat sebelumnya berubah atribut Text atau isi teksnya menjadi “Hello World Intel XDK”. Berikutnya untuk dapat dijalankan, fungsi showHelloWorld tersebut harus dipanggil terlebih dahulu. Kita akan memanggil fungsi tersebut ketika tombol Hello World yang telah kita buat 29
sebelumnya disentuh (menggunakan jari pada smartphone atau diklik jika pada komputer PC). Caranya, pertama-tama temukan baris kode program yang merupakan baris kode program yang telah digenerate Intel XDK untuk tombol yang telah kita buat, yaitu baris kode program berikut yang telah kita bahas di atas saat pertama kita memasuki tampilan Editor kode program:
Tambahkan kode program baru pada elemen sebelum penutup tag elemen berupa tanda kurung siku tutup seperti yang ditunjukkan pada panah pada gambar di atas. Kode programnya adalah sebagai berikut: ontouchstart="showHelloWorld()" Sehingga baris kode program untuk tombol tersebut adalah sebagai berikut:
Terlihat sekarang bahwa selain atribut class, data-uib, data-role, dan id, terdapat satu atribut baru yaitu ontouchstart. Atribut ini berfungsi untuk mendefinisikan bahwa saat pada elemen tersebut mendapatkan input berupa touch pada device nanti (pada komputer PC berupa klik), maka akan memanggil fungsi showHelloWorld() yang telah kita buat dan definisikan sebelumnya.
4. Meng-emulate aplikasi Sekarang mari kita jalankan kembali aplikasi kita, seperti sebelumnya, klik tombol Emulate di menu bagian atas.
30
Maka tampilan akan kembali dialihkan ke tampilan Emulate seperti berikut:
Sekarang, silakan coba klik tombol bertuliskan “Hello World Button” pada aplikasi kita. Seharusnya ketika tombol tersebut diklik akan merubah teks di bawahnya menjadi bertuliskan “Hello World Intel XDK”.
31
Pada menu di bagian atas, terdapat tombol reload aplikasi dan slider untuk zoom in dan zoom out device. Klik tombol reload aplikasi untuk mereload aplikasi yang sedang diemulate untuk kembali ke kondisi awal dan gunakan tombol slider zoom in dan zoom out untuk mengatur pembesaran tampilan device.
Dan pada bilah sebelah kiri dan kanan pada tampilan emulate terdapat beberapa fungsi untuk membantu kita meng-emulate aplikasi kita. Terdapat menu Device untuk mengganti pilihan device yang digunakan untuk meng-emulate aplikasi kita. Terdapat juga menu Accelerometer, Device & Network Settings, dan Geo Location. Itu semua untuk membantu kita dalam meng-emulate aplikasi kita dalam berbagai kemungkinan dan kondisi.
32
Sekarang silakan mencoba mengganti device yang kita gunakan untuk meng-emulate aplikasi Hello World kita. Pada bilah sebelah kiri, bagian menu Device terdapat tombol dropdown yang berisi list device yang dapat digunakan. Silakan diklik dan pilih device yang Anda inginkan.
Berikut ini tampilan aplikasi kita di Nokia Lumia 920:
33
Bahkan di sebuah iPad:
Lumayan bukan? J
34
Pelatihan Intel XDK Modul 4 – Pengembangan Aplikasi Mobile Learning Menggunakan Intel XDK Dikembangkan oleh Intel Software.
1
Versi 1.0. September 2013. Hak Cipta (C) 2013 Intel Software.. Adobe, Adobe Edge, dan Adobe Edge Animate merupakan merk dagang dan merk dagang terdaftar milik Adobe, Inc. Android, Chrome, dan Google adalah merk dagang dan merk dagang terdaftar milik Google, Inc. Intel, Intel XDK merupakan merk dagang dan merk dagang terdaftar milik Intel Corporation. iOS dan OS X adalah merk dagang dan merk dagang terdaftar milik Apple, Inc. Windows, Windows Phone, Windows Store adalah merk dagang dan merk dagang terdaftar milik Microsoft Corporation. Semua merk dagang terdaftar lainnya yang tercantum pada modul ini merupakan milik pemiliknya masing-masing yang peduli. Modul ini bebas untuk disebarluaskan secara hardcopy ataupun softcopy dengan tanpa menambah atau mengurangi isi dari modul ini termasuk isi halaman ini. Modul ini tidak boleh diperjual belikan atau digunakan untuk tujuan komersial lain.
2
Modul 4 – Pengembangan Aplikasi Mobile Learning Menggunakan Intel XDK.
3
Overview Sesi ini merupakan pembuka dari sesi selanjutnya yang berbasis project. Pada sesi ini kita akan membuat sebuah project aplikasi mobile berbasis HTML5 dan JQM menggunakan Intel XDK. Kita akan membuat sebuah aplikai media pembelajaran yang berisi konten dan multimedia serta quiz. Lalu pada sesi hari kedua nanti akan ditambahkan pula fitur untuk posting score hasil quiz kita ke facebook J Mari kita mulai..
Langkah 1: Buat Project Baru Langkah pertama kita akan membuat project Intel XDK baru.
Project Baru
Gambar 1 - Membuat Project Baru
Langkah 2: Setup Project Selanjutnya kita gunakan pengaturan project seperti di bawah ini: 4
Use App Designer xdk-duniawi
Location J
Gambar 2 - Project Setup
Setelah setup project berhasil, package default dari Intel XDK seperti di bawah ini. Selanjutnya kita akan mulai mengolah project ini.
Gambar 3 - Default Package
Langkah 3: Menggunakan JQuery Mobile Oke mari kita mengolah project ini J Project ini menggunakan JQuery Mobile sebagai framework Javascript-nya. Pertama kita seleksi index.html à App Designer
5
App Designer
Gambar 4 - Menggunakan APP DESIGNER
Setelah muncul pilihan Framework, pastikan kita pilih JQuery Mobile J
JQuery Mobile
Gambar 5 - Pilihan Framework
Setelah JQuery Mobile dipilih, Refresh File Tree terlebih dahulu untuk menampilkan list file yang terbaru pada project ini.
6
Refresh
Gambar 6 - File Tree
Setelah File Tree di-refresh, maka list file pada project kita akan up-to-date. Hal ini akan sering dilakukan.
Langkah 4: Membuat Halaman Intro Secara defacto, halaman pertama yang akan diload pada sebuah aplikasi berbasis html adalah index.html, maka kita pastikan bahwa index.html akan menjadi halaman intro project ini J Mari kita JQM Header supaya lebih mantap. JQM = JQuery Mobile Pada Tab Controls, pilih HEADER lalu drag-n-drop ke canvas, tunggu beberapa saat hingga muncul header yang kita buat. Selanjutnya ceklis Title dan isi dengan ‘Selamat Datang’
7
Header
Gambar 7 - Header
Langkah 5: Mengisi Halaman Intro Mari kita isi halaman intro ini dengan beberapa komponen. Pertama-tama kita akan mengisi dengan image. Caranya hampir sama seperti di atas, cukup melakukan drag-n-drop dari tab controls ke canvas. Penjelasannya seperti di bawah ini: Sebelum menambahkan komponen IMG, pertama kita tambahkan image intel.jpg yang sudah tersedia ke dalam folder images pada workspace project xdk-duniawi ini J Selanjutnya seperti biasa kita refresh file tree. Hal ini dilakukan supaya pada saat mengisi img src kita tinggal memilih pada dropdown pada IMG SETTINGS.
8
Img src
IMG
Gambar 8 - IMG
Supaya lebih mantap, kita coba tambahkan Horizontal Line di bawah gambar tersebut. Mari kita coba dengan coding J Masuk ke dalam mode EDITOR, selanjutnya akan muncul tampilan code dari index.html ini, lalu pada bagian bawah kita isi dengan seperti di bawah ini:
EDITOR
Gambar 9 - EDITOR
9
Gambar 10 - Menambahkan
Untuk mencoba preview pada simulator device, klik tab EMULATE J Maka hasilnya akan seperti di bawah ini. EMULATE
10
Selanjutnya kita akan menambahkan komponen tombol untuk memulai. Seperti biasa, dalam mode APP DESIGNER kita drag-n-drop komponen ke dalam canvas. Komponen button ada pada jenis FORM.
Button
Gambar 11 - Button
Untuk menambahkan UX yang lebih mantap kita tambahkan Icon pada tombol tersebut. Caranya: ceklist Icon pada tab properties, lalu pilih Icon yang tersedia.
11
Pilih Icon
Gambar 12 - Button Icon
Setelah Icon dipilih, lalu ubah Icon Posisition jadi RIGHT.. Bingoo! Hasilnya seperti di bawah ini
Gambar 13 - Button dengan Icon
12
Langkah 6: Membuat Pop-Up Form Pengisian Nama Pengguna Saatnya kita menambahkan pop-up form pengisian nama pengguna J Intel XDK juga sudah menyediakan komponen pop-up, tapi kita coba cara yang lebih cepat. Pada sesi ini kita akan full coding.. (Mode EDITOR : ON) Langkah pertam kita harus memodifikasi properties Button yang sudah kita buat tadi. Tambahkan atribut berikut ini (code berwarna orange) Mulai Selanjutnya Pop-up, pada bagian seperti di bawah ini: Code: Pop-up
Gambar 14 - Baris Kode untuk Pop-up
Baris kode yang ditambahkan adalah sebagai berikut: Isi dengan nama anda! Nama: Sign me in! 13
Mari kita test, apakah pop-up keluar atau tidak.. Hasilnya sperti ini:
Gamb ar 15 - Prev iew Ap pli kasi
Gambar 16 - Preview Aplikasi: Button Clicked
Langkah 7: Menambahkan Halaman HOME Pada sesi ini kita akan memberikan aksi pada pop-up yang sudah dibuat sehingga ketika ditekan akan berpindah ke halaman lain. Sebelumnya kita terlebih dahulu buat sebuah halaman home.html dengan isi sebuah text ‘Hi, kamu’ lengkap dengan Headernya. Caranya sebagai berikut:
14
New File
Gambar 17 - New File
home.html
Gambar 18 – Nama File
Langkah 8: Mengisi Halaman Home Setelah file dibuat, kita akan mengisinya dengan text. Pilih file home.html, lalu kita masuk mode APP DESIGNER. Seperti halaman index sebelumnya, kita pilih JQuery Mobile sebagai framework. Berikut langkah detailnya:
15
home.html Gambar 19 - Home.html
Gambar 20 - Pilihan Framework
Lalu tambahkan text menggunakan langkah drag-n-drop seperti sebelumnya. Text tersebut berisi ‘Hi, kamu’ namun sebelumnya kita tambahkan Header dengan title:Home
Gambar 21 - Header Home
Selanjutnya tambahkan text seperti di bawah ini:
16
Text: Hi, Kamu Gambar 22 - Text pada Home
Langkah 9: Membuat Aksi Pop-Up Form Pengisian Nama Pengguna Pada sesi ini kita akan mencoba mengeksplor HTML dan Javascript pada Intel XDK ini. Pertama-tama kita buat file Javascript pada folder js dengan nama default.js berikut langkah2nya:
New File pada Folder js
Gambar 23 - File Javascript Baru
17
default.js
Gambar 24 - Default.js
Lalu kita isi file default.js tersebut dengan baris kode di bawah ini: function actionMasuk(event){ $.mobile.changePage('home.html', {reloadPage : true, changeHash : true, transition: "slide" }); } Setelah file default.js terisi, kita import file tersebut pada index.html sehingga actionMasuk() akan berfungsi. Pastikan import default.js di bawah baris import JQuery Mobile seperti berikut ini: Jika berhasil, berikut preview nya J
18
Gambar 25 - Preview Aplikasi
Horay J kita sudah berhasil membuat aplikasi html5 menggunakan Intel XDK. Masih banyak komponen yang bisa digunakan pada Intel XDK maupun menggunakan widget dari JqueryMobile lainnya. Materi selanjutnya kita akan mencoba menambahkan beberapa komponen yang sering digunakan pada sebuah aplikasi mobile.
Langkah 10: Menambahkan Common Component JqueryMobile pada Intel XDK Oke mari kita menambahkan beberapa komponen yang sering digunakan pada aplikasi mobile. Berikut list yang akan kita coba yang tersedia pada Intel XDK: -
Collapsible ButtonGroup Footer ListView Select 19
Referensi: http://view.jquerymobile.com/1.3.2/demos/ Selanjutnya mari kita coba satu persatu, namun sebelumnya kita harus mengetahui letak penambahan kode yang tepat J Hal itu bisa kita lakukan setelah mengenal lebih dekat HTML5, JQM dan Intel XDK.
Collapsible
Gambar 26 - Collapsible
Untuk mengambahkan komponen ini kita tinggal melakukan drag-n-drop J lalu selanjutnya tambahkan konten yang ada di dalam collabsible berupa text, gambar dan lain sebagainya. -
Label: Text yang tampil pada layar Theme: Tema JQM yang akan digunakan Current Theme: Tema yang sekarang digunakan Mini: Ukuran komponen menjadi mini Inset: Komponen dalam satu set Rounded Corner: Ujung komponen yang berbentuk rounded Closed Icon: Icon pada saat konten tertutup Open Icon: Icon pada saat konten terbuka Icon Position: Poisi ikon pada option yang tersedia Id: digunakan untuk CSS dan JS 20
ButtonGroup
Gambar 27 - Button Group
Komponen ini memiliki terdiri dari beberapa Button yang digabung menjadi satu kelompok. Namun karakteristik tiap Button unique dan bisa dimanipulasi sesuai kebutuhan. Misal kita bisa membuat grup tombol untuk pengaturan Media seperti di atas. Seperti halnya komponen button, untuk menambahkan group Button ini kita tinggal melakukan Drag-n-drop kemudia mengatur properties tiap Button sesuai kebutuhan J -
Vertical: Orientasi button vertikal Id: digunakan untuk CSS dan JS
21
Footer
Gambar 28 - Footer
Sama halnya dengan Header, komponen Footer ini biasa digunakan untuk menampilkan informasi yang biasanya akan dibawa pada tiap halaman, bisa berupa navigasi atau text biasa. Layout Footer sudah dirancang ‘fixed’ berbeda dengan header yang ada pilihan untuk ‘fixed’ atau tidak. Untuk menambahkannya: Just drag-n-drop J -
Title: Judul yang tampil pada footer Theme: Tema JQM yang akan digunakan Id: digunakan untuk CSS dan JS
22
ListView ListView merupkan salah satu komponen penting yang sering digunakan untuk menampilkan data dinamis maupun statis.
List Item
LISTVIEW
Gambar 29 - ListView
23
Cara menambahkan ListView cukup mudah, seperti yang lainnya tinggal drag-n-drop ke canvas lalu atur properties nya melalui APP DESIGNER atau EDITOR. -
Theme: Tema JQM yang akan digunakan Inset: Rounded Ordered: List tergabung Filter: Menampilkan filter untuk List Auto Devider: Menampilkan pemisah list secara otomatis Mini: Ukuran komponen menjadi mini Id: digunakan untuk CSS dan JS
Select Komponen ini sering digunakan untuk menampilkan data yang disesuaikan dengan aturan yang dibuat. Misal list data provinsi, kota, dll. Berikut cara pembuatannya:
Label
Options
LISTVIEW
Gambar 30 - Select
24
Untuk menambahkan komponen Select, lakukan drag-n-drop seperti komponen lainnya, lalu isi properties yang dibutuhkan. -
Label: Text yang tampil pada layar Label Position: Posisi label pada layar Options: Berisi pilihan yang tersedia Theme: Tema JQM yang akan digunakan Mini: Ukuran komponen menjadi mini Icon Position: Poisi ikon pada option yang tersedia Id: digunakan untuk CSS dan JS
Langkah 11: Project Mobile Learning Menggunakan Intel XDK (lanjutan) Oke, setelah mengenal beberapa komponen dan sekaligus mencobanya, kita akan melanjutkan project ini. Sebelumnya kita sortir dulu komponen yang akan dipakai sebagai berikut: HEADER TEXT
COLLAPSIBLE
BUTTON GROUP FOOTER
Gambar 31 - Project (lanjutan) Tampilah home.html
25
Setelah melakukan penyortiran dari hasil latihan pengenalan komponen sebelumnya, sisakan yang terlihat seperti di atas. Selanjutnya kita akan memberi aksi pada Button Materi 1 sehingga akan membuka halaman Materi 1. Pada tab properties kita tambahakan id: materi1
Selanjutnya kita tambahkan atribut onClick pada tombol materi1, berikut baris kode yang ditambahkan (berwarna orange): Materi 1 Lalu kita tambahkan method materi1() pada default.js seperti berikut: function materi1(event){ $.mobile.changePage( 'materi1.html', { dataUrl : "materi1.html?parameter=123", data : { 'paremeter' : '123' }, reloadPage : true, changeHash : true, transition: "pop" }); } Lalu jangan lupa kita import default.js pada home.html ini J
Langkah 12: Membuat Halaman Materi 1 Proses selanjutnya adalah membuat halaman materi1.html yang berisi materi bab 1 pengenalan planet bumi (sesuai nama project: xdk-duniawi J )
26
Gambar 32 - Materi1.html
Langkah 13: Mengisi Halaman Materi 1 Setelah materi1.html dibuat, selanjutnya kita masuk APP DESIGN tentunya dengan framework JQM. Lalu kita isi dengan komponen sebagai berikut: -
Header : Materi 1: Tentang Dunia o BackButton : Tombol kembali ke halaman sebelumnya Text : Berisi overview materi 1 Footer : (c) {nama}, 2013 Accordion : Berisi text deskripsi planet bumi. o Planet Bumi : sekilas tentang plante bumi o Bentuk : sekilas tentang bentuk planet bumi o Komposisi Kimia : sekilas komposisi kimia dari planet bumi o Sumber : sumber : wikipedia
27
HEADER
FOOTER
Gambar 33 - Design materi1.html
Catatan: Header (Back Button) Untuk menambahkan BackButton pada header, kita cukup menambahkan attribut pada elemen header tersebut. Attribut yang ditambahkan seperti di bawah ini: Attribut di atas akan secara otomatis menambahkan BackButton sekaligus memberikan aksinya sehingga saat ditekan akan otomatis kembali ke halaman sebelumnya.
28
Accordion (Content) Setelah accordion ditambahkan dengan cara drag-n-drop, selanjutnya untuk mengisi konten dalam masing bagian caranya harus via EDITOR. Kita harus menambahkan paragraf yang berisi teks di dalam masing-masing bagian. Berikut contoh baris kode yang ditambahkan untuk menambahkan konten pada accordion: Planet Bumi Konten di sini! Pada dasarnya kita bisa menambahkan konten lain selain teks pada masing-masing bagian accordion tersebut, caranya kita bisa menambahkan tag lain yang dibutuhkan. Selanjutnya kita isi masing-masing bagian pada accordion dengan konten yang diambil dari wikipedia J seperti di bawah ini:
Gambar 34 - Konten Accordion
29
Berikut baris kode yang ditambahkan untuk bagian accordion Planet Bumi: Planet Bumi Bumi adalah planet ketiga dari delapan planet dalam Tata Surya. Diperkirakan usianya mencapai 4,6 miliar tahun Selanjutnya berikut baris kode yang ditambahkan untuk accordion Bentuk: Bentuk Bentuk planet Bumi sangat mirip dengan bulat pepat (oblate spheroid), sebuah bulatan yang tertekan ceper pada orientasi kutub-kutub yang menyebabkan buncitan pada bagian khatulistiwa Baris kode yang ditambahkan untuk konten accordion Komposisi Kimia: Komposisi Kimia Massa Bumi kira-kira adalah 5,98×1024 kg. Kandungan utamanya adalah besi (32,1%), oksigen (30,1%), silikon (15,1%), magnesium (13,9%), sulfur (2,9%), nikel (1,8%), kalsium (1,5%), and
30
aluminium (1,4%); dan 1,2% selebihnya terdiri dari berbagai unsur-unsur langka. Selanjutnya yang terakhir adalah baris kode yang ditambahkan untuk konten accordion Sumber adalah sebagai berikut: Sumber Wikipedia Setelah masing-masing konten dimasukan, lakukan preview pada aplikasi.
31
Langkah 14: Mempersiapkan Gambar untuk Materi 2 Setelah materi 1 sudah selesai kita buat dan diisi dengan konten berbasis text, pada bagian ini kita akan membuat materi 2 dan mengisinya dengan konten gambar. Konten gambar yang akan diisi adalah illustrasi planet bumi. Adapun gambar yang akan dimasukan ada 3 buah sebagai berikut :
Gambar 35 - Gambar Earth (Sumber: Google)
Langkah 15: Membuat Halaman Materi 2 Pada file tree, Klik Kanan à New File à materi2.html
Gambar 36 - New File materi2.html
Langkah 16: Mengisi Halaman Materi 2 Halaman Materi 2 terdiri dari komponen sebagai berikut: 32
-
Header : Materi 1: Tentang Dunia o BackButton : Tombol kembali ke halaman sebelumnya Footer : (c) {nama}, 2013 IMG: Gambar planet bumi Tab Navbar: Navigasi Tab yang akan menampilkan dan memunculkan gambar.
Berikut penjelasannya: HEADER NAVBAR
IMG with Caption
FOOTER
Gambar 37 - Layout Materi 2
Proses pembuatan header dan footer mengacu pada langkah pada pengisian materi 1. Adapun untuk pembuatan IMG dan Navbar penjelasannya sebagai berikut:
NAVBAR Untuk menambahkan Navbar, kita harus coding J adapun baris kode yang ditambahkan sebagai berikut: Gambar 1 33
Gambar 2 Gambar 3 Kode di atas di tambahkan di atas IMG atau tepatnya seperti di bawah ini:
Gambar 38 - Letak Kode Navbar
IMG (Properties) Cara menambahkan IMG sudah dijelaskan pada langkah sebelumnya, adapun catatan untuk pengaturan propertiesnya sebagai berikut: Img Src
Caption
Gambar 39 - Properties IMG
34
Langkah 17: Menambah Halaman Materi Lanjutan yang Digunakan Navbar Setelah kita menambahkan navbar, ada bebeapa halaman yang belum dibuat, hal ini menyebabkan ketika navbar ditekan akan keluar pesan ERROR.
Gambar 40 - Error Loading Page
Mari kita tambahkan halaman yang belum tersedia tersebut. Adapun file yang ditambahkan adalah materi2-lanjutan1.html dan materi2-lanjutan2.html.
Gambar 41 - New File materi2-lanjutan1.html
35
Gambar 42 - materi2-lanjutan2.html
Langkah 18: Mengisi Halaman Materi Lanjutan yang Digunakan Navbar Halaman materi lanjutan berisi konten yang mirip dengan materi 2 karena memang lanjutan dari materi tersebut. Adapun konten dan layout nya sebagi berikut: Materi2-lanjutan1 Posisi active nav pada Gambar 2
IMG mengacu gambar lain
Gambar 43 - Layout Materi2-lanjutan1
36
Pada navbar, untuk menambahkan status navbar yang sedang aktif atau tidak, ditambahkan atribut seperti berikut: Gambar 2 Pastikan yang aktif hanya satu navbar button saja J Materi2-lanjutan2 Untuk mengisi halaman ini, lakukan hal yang sama pada materi2-lanjutan1. Berikut hasilnya:
Posisi active nav pada Gambar 3
Gambar 44 - Halaman Materi2-lanjutan2
Baiklah, Modul 4 ini telah kita selesaikan, adapun untuk melihat hasil yang sudah kita buat ada baiknya kita lakukan preview satu per satu halaman. Berikut halaman yang sudah kita selesaikan:
37
Gambar 45 - Halaman Intro
Gambar 46 - Pop Form Nama
38
Gambar 47 - Halaman Home
Gambar 48 - Halaman Materi 1
39
Gambar 49 - Halaman Materi 2
Sekian pembahasan pada modul ini. Materi 3 dan quiz akan dilanjutkan pada modul berikutnya.
40
Common Senses J Beberapa hal yang harus kita biasakan pada saat menggunakan Intel XDK antara lain: -
Sering melakukan refresh terhadap File Tree Pada saat menambahkan komponen biasanya Intel XDK melakukan prosesing beberapa saat, bersabarlah J Sering mengakses resources HTML5 di: http://www.w3schools.com/html/html5_intro.asp Dianjurkan sering mengakses resources CSS di: http://www.w3schools.com/css/ Resources JavaScript lengkap di: http://www.w3schools.com/js/ Resources JQM lengkap di: http://view.jquerymobile.com/1.3.2/demos/ Keep Smile J
41
Pelatihan Intel XDK Modul 5 – Pengembangan Aplikasi Mobile Learning Menggunakan Intel XDK Sesi 2 Dikembangkan oleh Intel Software.
1
Versi 1.0. September 2013. Hak Cipta (C) 2013 Intel Software.. Adobe, Adobe Edge, dan Adobe Edge Animate merupakan merk dagang dan merk dagang terdaftar milik Adobe, Inc. Android, Chrome, dan Google adalah merk dagang dan merk dagang terdaftar milik Google, Inc. Intel, Intel XDK merupakan merk dagang dan merk dagang terdaftar milik Intel Corporation. iOS dan OS X adalah merk dagang dan merk dagang terdaftar milik Apple, Inc. Windows, Windows Phone, Windows Store adalah merk dagang dan merk dagang terdaftar milik Microsoft Corporation. Semua merk dagang terdaftar lainnya yang tercantum pada modul ini merupakan milik pemiliknya masing-masing yang peduli. Modul ini bebas untuk disebarluaskan secara hardcopy ataupun softcopy dengan tanpa menambah atau mengurangi isi dari modul ini termasuk isi halaman ini. Modul ini tidak boleh diperjual belikan atau digunakan untuk tujuan komersial lain.
2
Modul 5 – Pengembangan Aplikasi Mobile Learning Menggunakan Intel XDK Sesi 2.
3
Well, mari kita lanjut proyek kita. Terakhir kita sudah membuat dua halaman materi dan sekarang mari kita lanjutkan dua halaman berikutnya pada proyek kita yaitu halaman materi 3 dan kuis. Pada halaman-halaman tersebut akan berisi tampilan materi secara multimedia dan tampilan kuis. Sudah tidak sabar? Mari kita lanjutkan proyek kita.
Langkah 19: Membuat halaman materi3.html Pasti masih ingat cara menambahkan halaman. Pada file tree, silakan klik kanan New File materi3.html sehingga tampilan pada file tree akan seperti berikut:
Gambar 1 materi3.html sudah berhasil dibuat
Pilih framework JQuery Mobile pada App Designer dari halaman materi3.html tersebut.
Langkah 20: Mengisi Halaman Materi 3 Halaman Materi 3 terdiri dari komponen dasar sebagai berikut: -
Header : Materi 3: Animasi Petir o BackButton : Tombol kembali ke halaman sebelumnya Footer : (c) {nama}, 2013 4
-
Button: Berlabelkan “Start Animasi” dengan Id “btnStartAnimasi” IMG: Berupa gambar petir dengan path folder “images/petir.png” dengan Id “gbrPetir” (silakan salin dulu file petir.png tersebut ke dalam folder images di proyek kita).
Sehingga tampilan pada halaman materi3.html akan seperti berikut:
Gambar 2 Tampilan awal materi3.html
Langkah 21: Menambahkan Suara / Sound Langkah berikutnya, kita akan menambahkan sebuah elemen multimedia yaitu suara. Pada proyek ini, skenarionya kita akan memasukkan sebuah suara petir yang akan otomatis dimainkan terus menerus saat membuka halaman materi3.html ini.
5
Pertama-tama, mari kita buat sebuah folder baru pada folder proyek kita dengan nama folder sounds. Lalu silakan kita salin file petirgelegar.mp3 yang telah disediakan ke dalam folder sounds tersebut. Silakan drag and drop control Audio dari bilah Controls bagian Media ke bagian bawah dari gambar petir.png
Gambar 3 Control Audio
6
Sehingga tampilan akan menjadi seperti berikut:
AUDIO
Gambar 4 Audio telah dimasukkan ke kanvas
Pada bilah Audio Settings bagian Properties pada elemen Audio tersebut yang masih terseleksi, isikan Mp3 Src dengan “sounds/petirgelegar.mp3” lalu centang Autoplay dan Loop sehingga elemen audio kita tersebut akan otomatis diplay saat masuk halaman tersebut dan akan terus menerus diulang-ulang.
Gambar 5 Properties pada Elemen Audio
7
Alangkah lebih baiknya menyediakan juga versi file Ogg dari audio yang kita masukkan dan menyertakannya pada proyek kita dengan mengisikan juga bagian Ogg Src. Hal tersebut akan memungkinkan lebih banyak platform dan browser yang mendukung untuk memainkan audio pada aplikasi kita. File Audio telah berhasil kita masukkan, namun jika kita Emulate, tidak akan terjadi apa-apa karena untuk Audio belum dapat diemulasikan pada virtual device di Intel XDK. Kita harus menggunakan device asli untuk mencobanya.
Langkah 22: Menambahkan Efek Animasi Langkah berikutnya adalah menganimasikan. Yang akan kita animasikah adalah gambar petir.png yang telah kita masukkan sebelumnya. Sebelum menganimasikan, jangan lupa, pastikan kita telah memberi Id gambar petir.png tersebut dengan Id “gbrPetir” dan tombol Start Animasi dengan Id “btnStartAnimasi”
Gambar 6 Properties pada petir.png
8
Untuk menganimasikan, kita perlu melakukan aktivitas coding di Editor. Silakan buka Editor dari materi3.html lalu di dalam tag elemen masukkan script Javascript berikut: $( "#btnStartAnimasi" ).click(function() { $( "#gbrPetir" ).animate({ width: "70%", opacity: 0.4, marginLeft: "0.6in" }, 1500 ); }); Script tersebut akan menambahkan animasi selama 1500 mili detik pada gbrPetir berupa animasi lebar yang menjadi 70% dari ukuran stage, opacity yang menjadi 40%, dan margin kiri sejauh 0,6 in. Namun seperti pada elemen Audio, efek animasi ini belum dapat dijalankan pada device virtual di Intel XDK. Kita harus mencobanya di device asli.
Langkah 23: Membuat Halaman Kuis Seperti sebelumnya saat menambahkan halaman baru, buat sebuah halaman quiz.html di file tree dan pilih framework JQuery Mobile pada App Designer dari quiz.html.
Langkah 24: Mengisi Halaman Kuis Halaman Kuis terdiri dari komponen dasar sebagai berikut: -
Header : Quiz Time o BackButton : Tombol kembali ke halaman sebelumnya Footer : (c) {nama}, 2013 Teks: Berlabelkan pertanyaan pada kuis ini yaitu “Apakah nama planet yang dapat ditinggali oleh makhluk hidup?”
9
Sehingga tampilan pada halaman quiz.html akan seperti berikut:
Gambar 7 Tampilan dasar halaman quiz.html
Langkah 25: Membuat Pop Up Hasil Jawaban Berikutnya, mari kita siapkan Pop Up untuk jawaban benar dan jawaban salah. Pop up ini akan memberitahu pengguna atas jawaban yang telah dipilihnya. Pertama mari kita buat Pop Up Jawaban Benar. Drag Pop Up dari bilah Controls bagian Layout ke kanvas.
POP UP
10
Sehingga tampilan menjadi seperti berikut:
Dengan Popup yang terseleksi tersebut, isikan pada bilah Properties bagian Title yaitu “Benar Sekali”, bagian Close Button dengan “right”, dan Id dengan “popupBenar”. Dengan cara yang sama, buat satu lagi Popup dan isikan pada bilah Properties bagian Title yaitu “Maaf Belum Tepat”, bagian Close Button dengan “right”, dan Id dengan “popupSalah”.
11
Dan tampilan akan menjadi seperti ini:
Gambar 8 Tampilan Pop Up Salah
12
Langkah 25: Membuat Pilihan Jawaban Berikutnya, kita akan menambahkan button group untuk pilihan jawaban. Dengan cara yang pernah dijelaskan sebelumnya, drag and drop Button Group yang terdapat di bilah Controls bagian Form ke kanvas di bagian bawah teks pertanyaan.
Gambar 9 Button Group pada bilah Controls
13
Sehingga tampilan akan menjadi seperti berikut:
Gambar 10 Menambahkan Button Group
Dengan Button Group tersebut yang masih terseleksi, pada bilah Button Group Setting bagian Properties centang Vertical.
Gambar 11 Pilihan Vertical pada Properties Button Group
Sehingga tampilan button group susunannya akan secara vertikal seperti berikut ini:
14
Gambar 12 Tampilan Button Group yang vertikal
Langkah 25: Membuat kode program untuk kuis Sekarang saatnya kita masuk ke tampilan Editor dari quiz.html. Pada bagian elemen yang berisi button group yang telah kita buat, yaitu kurang lebih bentuk skripnya seperti ini: Button Button Button
15
Ganti isi masing-masing dari ketiga tag yang asalnya berisi Button dengan “Bumi”, “Krypton”, dan “Uranus”. Sehingga skrip menjadi seperti berikut: Bumi Krypton Uranus Lalu pada elemen pertama, yang berisi “Bumi”, tambahkan atribut berikut: href="#popupBenar" data-rel="popup" data-positionto="window" data-transition="slide" Sehingga elemen pertama tersebut menjadi seperti ini: Bumi Lalu pada kedua elemen berikutnya, tambahkan atribut berikut: href="#popupSalah" data-rel="popup" data-positionto="window" data-transition="slide" Sehingga kedua elemen tersebut menjadi seperti ini: Krypton Uranus
16
Berikutnya, kita akan memodifikasi masing-masing pop up benar dan salah. Pada bagian pop up benar, yang skripnya kurang lebih seperti berikut: Benar Sekali Close Isikan skrip ini di dalam tag : Jawaban Anda benar sekali. Selamat! Sehingga kurang lebih skripnya akan menjadi seperti berikut: Benar Sekali Close Jawaban Anda benar sekali. Selamat! 17
Lakukan hal serupa dengan pop up salah dengan menambahkan skrip berikut di dalam tag : Sayang sekali belum tepat. Silakan coba lagi. Sehingga skrip pop up salah kurang lebih akan menjadi seperti berikut: Maaf Belum Tepat Close Sayang sekali belum tepat. Silakan coba lagi. Selesai. Silakan mengetes aplikasi berjudul Duniawi yang baru saja kita selesaikan.
Gambar 13 Hasil akhir aplikasi Duniawi
18
Common Senses Beberapa hal yang harus kita biasakan pada saat menggunakan Intel XDK antara lain: -
Sering melakukan refresh terhadap File Tree Pada saat menambahkan komponen biasanya Intel XDK melakukan prosesing beberapa saat, bersabarlah Sering mengakses resources HTML5 di: http://www.w3schools.com/html/html5_intro.asp Dianjurkan sering mengakses resources CSS di: http://www.w3schools.com/css/ Resources JavaScript lengkap di: http://www.w3schools.com/js/ Resources JQM lengkap di: http://view.jquerymobile.com/1.3.2/demos/ Keep Smile
19
Pelatihan Intel XDK Modul 6 – Preview Aplikasi pada Device Dikembangkan oleh Intel Software.
1
Versi 1.0. September 2013. Hak Cipta (C) 2013 Intel Software.. Adobe, Adobe Edge, dan Adobe Edge Animate merupakan merk dagang dan merk dagang terdaftar milik Adobe, Inc. Android, Chrome, dan Google adalah merk dagang dan merk dagang terdaftar milik Google, Inc. Intel, Intel XDK merupakan merk dagang dan merk dagang terdaftar milik Intel Corporation. iOS dan OS X adalah merk dagang dan merk dagang terdaftar milik Apple, Inc. Windows, Windows Phone, Windows Store adalah merk dagang dan merk dagang terdaftar milik Microsoft Corporation. Semua merk dagang terdaftar lainnya yang tercantum pada modul ini merupakan milik pemiliknya masing-masing yang peduli. Modul ini bebas untuk disebarluaskan secara hardcopy ataupun softcopy dengan tanpa menambah atau mengurangi isi dari modul ini termasuk isi halaman ini. Modul ini tidak boleh diperjual belikan atau digunakan untuk tujuan komersial lain.
2
Modul 6 – Preview Aplikasi pada Device.
3
Pengantar Pada saat ini kita telah berhasil mengenal Intel XDK Development Tools dan mencoba fiturfitur hebatnya untuk membuat aplikasi multiplatform. Nah, kali ini, pada modul ini, kita akan membahas lebih lanjut tentang mengetes aplikasi yang telah kita kembangkan pada device mobile. Untuk bisa mengikuti modul ini tentunya diperlukan sebuah device mobile sebagai tempat kita mengetes aplikasi buatan kita. Sampai saat ini, untuk pengetesan, platform yang didukung oleh Intel XDK adalah platform iOS dan Android. Sebelum melanjutkan, pastikan Anda telah membuka sebuah proyek di Intel XDK.
Langkah 1: Klik tombol Test Pada menu pengembangan aplikasi yang ada di bagian atas layar, klik Test.
Gambar 1 Tombol Test
Maka kita akan disuguhkan layar seperti berikut:
Gambar 2 Layar awal Test
4
Kita diminta untuk melakukan sinkronisasi dengan server testing untuk dapat melanjutkan melakukan testing. Klik Sync dan silakan tunggu proses sinkronisasi yang akan berjalan. Setelah selesai, maka akan disuguhkan tampilan seperti berikut ini:
Gambar 3 Tampilan Testing di Device
Jika terdapat perubahan pada aplikasi kita, maka kita perlu melakukan Push Files kembali ke server testing dengan mengklik tombol Push Files.
Gambar 4 Tombol Push Files
Selanjutnya ketika sudah dipastikan semua file sudah disinkronisasi, maka kita dapat mengetes aplikasi kita pada device.
Langkah 2: Mengetes Aplikasi pada Device Pada device yang akan digunakan untuk testing, silakan unduh aplikasi App Lab di App Store pada device iOS dan Google Play pada device Android. 5
Setelah diunduh silakan buka aplikasi yang telah kita buat dan telah disinkronisasi ke server dengan cara seperti berikut: 1.
2.
Alternatif cara 1: Pindai QR Code yang telah tersedia di tampilan Intel XDK menggunakan device Anda untuk membuka aplikasi App Lab dan menjalankan aplikasi yang telah kita buat. Alternatif cara 2: Buka aplikasi App Lab di device, lalu pilih My Apps pada aplikasi App Lab tersebut. Setelah itu silakan pilih aplikasi yang akan Anda jalankan dan tekan tombol Launch. MY APPS
6
Pelatihan Intel XDK Modul 7. Integrasi Aplikasi dengan Facebook Graph API Menggunakan Intel XDK. Dikembangkan oleh Intel Software.
1
Versi 1.0. September 2013. Hak Cipta (C) 2013 Intel Software. Adobe, Adobe Edge, dan Adobe Edge Animate merupakan merk dagang dan merk dagang terdaftar milik Adobe, Inc. Android, Chrome, dan Google adalah merk dagang dan merk dagang terdaftar milik Google, Inc. Intel, Intel XDK merupakan merk dagang dan merk dagang terdaftar milik Intel Corporation. iOS dan OS X adalah merk dagang dan merk dagang terdaftar milik Apple, Inc. Windows, Windows Phone, Windows Store adalah merk dagang dan merk dagang terdaftar milik Microsoft Corporation. Semua merk dagang terdaftar lainnya yang tercantum pada modul ini merupakan milik pemiliknya masing-masing yang peduli. Modul ini bebas untuk disebarluaskan secara hardcopy ataupun softcopy dengan tanpa menambah atau mengurangi isi dari modul ini termasuk isi halaman ini. Modul ini tidak boleh diperjual belikan atau digunakan untuk tujuan komersial lain.
2
Modul 7. Integrasi Aplikasi dengan Facebook Graph API Menggunakan Intel XDK.
3
Overview Pada sesi ini kita akan mengintegrasikan aplikasi yang sudah dibuat dengan Facebook Graph API. Aplikasi akan membuat profile Facebook kita mengiri status bahwa sudah mengerjakan quiz pada aplikas xdk-duniawi Graph API merupakan jembatan yang bisa disebrangi oleh aplikasi sehingga sehingga Facebook bisa menerjemahkan request yang dikirim aplikasi dengan response yang sesuai. Hmm.. ?? Berikut illustrasinya:
HTML5 Based Mobile Apps Gambar 1 – Facebook Graph API Connect
Mari kita mulai
Langkah 1: Setup Facebook Application Langkah pertama ini kita harus membuat sebuah aplikasi di Facebook yang nantinya digunakan untuk mengakses Graph API. Masuk ke halaman http://developer.facebook.com pilih menu Apps.
Apps
Gambar 2 – Menu Developer Facebook
4
Langkah 2: Buat Aplikasi Facebook Baru Setelah masuk halaman apps, selanjutnya kita buat aplikasi facebok baru. Caranya kita tinggal pilih menu Buat Aplikasi Baru. Buat Aplikasi Baru
Gambar 3 - Buat Aplikasi Baru
Lakukan setup pada aplikasi baru yang akan kita buat sesuai penjelasan di bawah ini: -
Nama Aplikas (unique) : Isi dengan XDKduniawi_namaanda App Namespace (unique) : Isi dnegan xdkduniawi_namaanda App Category : Pendidikan
Klik lanjutkan lalu isi captcha dengan benar.
Gambar 4 - Setup Aplikasi
5
Langkah 3: Pengaturan Aplikasi Facebook Setelah berhasil membuat aplikasi baru maka kita akan langsung dibawa ke dashboard aplikasi yang kita buat tadi. Penjelasannya sebagai berikut:
App ID
Icon aplikasi
Identias Aplikasi
Metode integrasi
Gambar 5 - Pengaturan Aplikasi
-
App ID : Merupakan ID aplikasi yang unik dan digunakan sebagai kunci untuk berinteraksi dengan aplikasi di luar Facebook Metode Integrasi : Ada beberapa metode integrasi, masing-masing memiliki karakteristik yang berbeda sesuai kebutuhan. 6
Adapun metode yang akan kita gunakan untuk XDKduniawi ini hanya dua, yaitu Website with Facebook Login dan Aplikasi Android Natif.
Langkah 4: Atur Cara Pengintegrasian Aplikasi Facebook Cara pengintegrasian yang kita gunakan berdasarkan aturan yang sudah tersedia pada Intel XDK. Untuk aplikasi Android kita menggunakan Website with Facebook login dan Aplikasi Android Natif sementara untuk aplikasi Intel XDK berbasis iOS menggunakan Website with Facebook Login dan Aplikasi IOS Native. Kita gunakan aturan untuk aplikasi Android, berikut detailnya:
Site URL
Key Hashes dari Intel XDK
Gambar 6 - Cara Pengintegrasian Aplikasi Facebook
-
Site URL : Diisi dengan http://html5tools-software.intel.com/ Key Hashes : Diambil dari pengaturan credentials pada saat mem-build aplikasi menggunakan Intel XDK 7
-
Package Name : Optional, package harus sama jikalau kita ingin menambahkan update pada aplikasi yang sudah dibuat. Class Name : Optional
Langkah 5: Pengaturan Access Token dan Permission Setelah pengaturan aplikasi selesai, selanjutnya kita harus membuat aplikasi ini membolehkan aplikasi dari Intel XDK mengambil dan mengirim data. Caranya kita harus setup permission, berikut detailnya: Masuk menu Tools lalu pilih Graph API Explorer
Graph API Explorer
Gambar 7 - Facebook Tools
Selanjutnya pilih Dapatkan Access Token
Get Access Token Current Access Token Gambar 8 - Graph API Explorer
8
Lalu setelah muncul dialog pilihan permissions, centang pilihan sesuai dengan yang digambarkan dibawah ini:
Gambar 9 - Select permissions
Setelah pemilihan permission selesai, maka secara otomatis akan keluar dialog Oauth seperti di bawah ini untuk permintaan permission yang sudah tadi kita set. Klik OK untuk tiap permintaa permissions
Gambar 10 - Oauth Permissions
9
Pengaturan Facebook Graph API sampai di sini pada fase ini berarti kita sudah berhasil membuat sebuah aplikasi Facebook yang nantinya bisa menjembatani aplikasi mobile Intel XDK yang kita buat dengan Facebook.
Langkah 6: Pengaturan Build Credentials pada Intel XDK Lakukan pengaturan credentials pada saat mem-build aplikasi Intel XDK. Pengaturan yang akna kita isi mengacu pada aplikasi Facebook yang sudah dibuat sebelumnya berikut penjelasannya : Masuk menu Build, lalu pilih Android sebagai target build nya
Android
Gambar 11 - Build Android Apps
Gambar 12 - Uploading Bundle
10
Setelah uploading bundle berhasil, lalu masuk overview application lalu edit CREDENTIALS.
Credentials
Gambar 13 – Overview Application
Langkah selanjutnya: -
isi FACEBOOK APPLICATION ID dengan App ID pada aplikasi Facebook yang sudah kita buat tadi. Lalu copy-paste FACEBOOK APPLICATION SIGNATURE ke Key Hashes pada pengaturan cara integrasi menggunakan Android natif.
Gambar 14 - Pengaturan Credentials
11
Lakuran pengaturan pada step selanjutnya sesuai dengan yang dibutuhkan. Setelah semua pengaturan build pada Intel XDK berhasil, lakukan testing pada aplikasi yang sudah kita buat tersebut. Oke pengaturan pada Facebook App sudah, pengaturan pada Intel XDK langkah selanjutnya adalah coding Kita akan melanjutkan project xdk-duniawi yang sudah kita buat sebelumnya.
Langkah 7: Mengisi File default.js dengan Method Facebok Integration Fase ini kita akan mengisi file default.js yang sebelumnya berisi aksi-aksi untuk tombol dengan method-method untuk mengintegrasikan dengan Facebook. Adapun method-method tersebut berupa method login, postStatus. Berikut keseluruhan method dalam file default.js
Gambar 15 - Facebook Integration pad default.js
12
Langkah 8: Membuat Method Facebook Login Method ini membuka akses aplikasi Intel XDK terhadap Facebook, mengeluarkan Oauth dan permintaan akses permissions. Berikut baris kodenya: function fblogin(){ document.addEventListener("appMobi.facebook.login",function (e){ if (e.success == true) { console.log("Facebook Log in Successful"); } else { console.log("Unsuccessful Login"); } },false);
AppMobi.facebook.login("publish_stream,publish_actions,offli ne_access"); }
Langkah 9: Membuat Method untuk Post Status Method ini melakukan posting status atas nama kita yang mengacu pada Aplikasi yang sudah kita buat. Adapun baris kodenya adalah sebagai berikut: function postStatus(){ $.mobile.loading( 'show', { text: "Posting to Facebook", textVisible: true, theme: 'b', html: "" }); AppMobi.facebook.enableFrictionlessRequests(); document.addEventListener("appMobi.facebook.request.respons e",function(e) { console.log("News Feed Event Returned"); if (e.success == true) { console.log("News feed updated successfully"); $.mobile.hidePageLoadingMsg(); } },false); var objParameters = { 13
"picture":"http://fbrell.com/f8.jpg", "name":"XDK Duniawi", "caption":"XDK Duniawi Android Apps", "description":"Dikirim melalui aplikasi Android yang dikembangkan menggunakan Intel XDK", "message":"Saya telah menyelesaikan quiz pada Aplikasi XDK Duniawi. Aplikasi ini dikembangkan menggunakan Intel XDK. http://bit.ly/IntelXDK #IntelXDK #mLearning" } AppMobi.facebook.requestWithGraphAPI("me" + "/feed","POST", objParameters); } Output-nya seperi di bawah ini: Message
Informasi Aplikasi
Image Aplikasi Gambar 16 - Output Post Status
Langkah 11: Menambahkan Button Login to Facebook pada Dialog Quiz Pada modul sebelumnya, kita telah mencapat fase Quiz dan memberikan dialog untuk feedback jawaban. Pada dialog tersebut akan ditambahkan Tombol Login fo Facebook untuk mengambil Oauth dari Facebook. Login to Facebook Button
Gambar 17 - Button untuk Login ke Facebook
14
Berikut baris kode yang ditambahkan: function fblogin(){ document.addEventListener("appMobi.facebook.login",function (e){ if (e.success == true) { console.log("Facebook Log in Successful"); } else { console.log("Unsuccessful Login"); } },false);
AppMobi.facebook.login("publish_stream,publish_actions,offli ne_access"); } Method di atas akan menampilkan Oauth facebook, jika user belum login maka akan otomatis muncul dialog login. Ouath di atas meminta permission publish_stream, publis_actions, offline_access yang mana sudah merupakan standar permission dalam pengembangan aplikasi mobile berbasis html5 dan diakses secara offline.
Langkah 12: Menambahkan Button Share to Facebook pada Dialog Quiz Setelah tombol login dibuat, kita akan membuat tombol Share to Facebook yang mana akan mengirimkan sebuah postingan pada profile kita. Hal tersebut sudah dijelaskan pada langkah sebelumnya.
Share to Facebook Button
Gambar 18 - Share to Facebook
15
Mari kita pelajari baris kode berikut ini: function postStatus(){ $.mobile.loading( 'show', { text: "Posting to Facebook", textVisible: true, theme: 'b', html: "" }); AppMobi.facebook.enableFrictionlessRequests();
document.addEventListener("appMobi.facebook.request.response ",function(e) { console.log("News Feed Event Returned"); if (e.success == true) { console.log("News feed updated successfully"); $.mobile.hidePageLoadingMsg(); } },false); var objParameters = { "picture":"http://fbrell.com/f8.jpg", "name":"XDK Duniawi", "caption":"XDK Duniawi Android Apps", "description":"Dikirim melalui aplikasi Android yang dikembangkan menggunakan Intel XDK Development Tools.. ", "message":"Saya telah menyelesaikan quiz pada Aplikasi XDK Duniawi. Aplikasi ini dikembangkan menggunakan Intel XDK. http://bit.ly/IntelXDK #IntelXDK #mLearning" } AppMobi.facebook.requestWithGraphAPI("me" + "/feed","POST", objParameters); } Dikarenakan services yang digunakan pada Intel XDK adalah AppMobi, maka semua method yang berhubungan facebook mengambil dari library AppMobi. Untuk baris kode di atas, yang paling inti adalah bagian: AppMobi.facebook.requestWithGraphAPI("me" + "/feed","POST", objParameters); 16
Kode diatas meminta Graph API dengan parameter “me” yang merupakan standar parameter yang digunakan Graph API untuk menunjukan user yang telah login dan diberikan auth. Parameter “/feed” merupakan opsi ke-arah mana parameter selanjutnya “POST” akan dilemparkan. Pada kasus ini kita akan melempar “POST” ke arah “/feed” (status facebook). Parameter teakhir objParameters merupakan object yang dibuat sebelumnya dan isinya adalah: -
"picture":"http://fbrell.com/f8.jpg", "name":"XDK Duniawi", "caption":"XDK Duniawi Android Apps", "description":"Dikirim melalui aplikasi Android yang dikembangkan menggunakan Intel XDK Development Tools.. ", "message":"Saya telah menyelesaikan quiz pada Aplikasi XDK Duniawi. Aplikasi ini dikembangkan menggunakan Intel XDK. http://bit.ly/IntelXDK #IntelXDK #mLearning"
Object tersebut berisi array of params yang akan di “POST” ke “/feed” yang “me” miliki dan sudah diberikan hak akses. Berikut preview aplikasi
Gambar 19 - Preview Post to Facebook
17
Horeee kita sudah sampai tahap akhir project Mobile Apps Menggunakan Intel XDK ini. Mari kita sedikit flash-back apa saja yang sudah kita pelajari, selanjutnya jangan lupa untuk terus dan terus berlatih Selamat berlatih menggunakan Intel XDK..
That’s all.
18
Pelatihan Intel XDK Modul 8. Men-submit Aplikasi ke Store. Dikembangkan oleh Intel Software.
1
Versi 1.0. September 2013. Hak Cipta (C) 2013 Intel Software. Adobe, Adobe Edge, dan Adobe Edge Animate merupakan merk dagang dan merk dagang terdaftar milik Adobe, Inc. Android, Chrome, dan Google adalah merk dagang dan merk dagang terdaftar milik Google, Inc. Intel, Intel XDK merupakan merk dagang dan merk dagang terdaftar milik Intel Corporation. iOS dan OS X adalah merk dagang dan merk dagang terdaftar milik Apple, Inc. Windows, Windows Phone, Windows Store adalah merk dagang dan merk dagang terdaftar milik Microsoft Corporation. Semua merk dagang terdaftar lainnya yang tercantum pada modul ini merupakan milik pemiliknya masing-masing yang peduli. Beberapa gambar dari modul ini diambil dari halaman website http://www.flipcreator.net/icreateapp/submit-to-googleplay.html. Modul ini bebas untuk disebarluaskan secara hardcopy ataupun softcopy dengan tanpa menambah atau mengurangi isi dari modul ini termasuk isi halaman ini. Modul ini tidak boleh diperjual belikan atau digunakan untuk tujuan komersial lain.
2
Modul 8. Men-Submit Aplikasi ke Store.
3
Pengantar Setelah aplikasi selesai dikembangkan dan lulus uji saat tahap testing. Saatnya kita menerbitkan aplikasi kita ke pasar. Untuk menerbitkan aplikasi ke pasar sebenarnya cukup sederhana. Langkah-langkahnya adalah kita mem-build aplikasi kita yang telah selesai di Intel XDK, lalu kita akan mendapatkan kode binary program dari aplikasi kita untuk masingmasing platform secara otomatis, dan kita tinggal mengirimkan kode binary program tersebut ke pengelola pasar untuk selanjutnya diverifikasi dan diterbitkan. Mari kita mulai, kali ini sebagai contoh platform yang akan dibahas adalah platform Android.
Langkah 1: Klik Build Pada menu tahapan pengembangan yang ada di bagian atas layar, silakan klik Build.
Gambar 1Tombol Build
Dan kita akan diberi suguhan layar seperti ini:
Gambar 2 Layar Build
4
Pada layar tersebut, terlihat sekali kemudahan yang ditawarkan Intel XDK. Kita dapat membuild aplikasi yang telah kita kembangkan ke belasan platform sekaligus hanya dengan beberapa klik. Kali ini mari kita klik Build untuk Android.
Gambar 3 Build untuk Android
Maka proses sinkronisasi dengan server akan dimulai. Jika sebelumnya kita pernah mengunggah kode proyek kita tersebut, maka akan diberi tawaran untuk menggunakan kode kita yang lama, namun untuk lebih pasti bahwa kode yang akan dibuild adalah kode yang benar-benar termutakhir. Maka kita klik Upload Code.
Gambar 4 Tawaran untuk menggunakan kode yang telah diunggah sebelumnya atau mengunggah ulang kode
5
Maka proses unggah pun akan dimulai.
Gambar 5 Mengunggah bundle kode program
Setelah proses unggah selesai, maka kita akan disuguhkan tampilan seperti berikut:
Gambar 6 Tampilan Build Page
Pada tampilan tersebut terlihat semua sudah dicentang hijau dan aplikasi siap untuk dibuild. Namun ada kalanya masih ada yang berwarna merah dan perlu diperhatikan lagi. Untuk itu 6
jika ada yang berwarna merah silakan klik tombol edit dari bagian yang berwarna merah dan isi field-field yang salah atau masih kosong. Jika sudah hijau semua dan siap untuk dibuild, silakan pada bagian kanan bawah layar klik tombol “Build App Now”.
Gambar 7 Tombol Build App Now
Maka Intel XDK akan melakukan proses Build.
. Gambar 8 Proses Build
7
Saat proses Build telah selesai maka akan muncul tampilan berikut:
Gambar 9 Tampilan saat proses Build telah selesai.
Sekarang kita dapat mengunduh versi binary dari aplikasi kita untuk platform Android yang berupa file .apk. Klik Download Build untuk mengunduh APK aplikasi kita lalu tentukan folder tempat kita akan menyimpan hasil unduhan tersebut.
Gambar 10 Tombol Download Build
8
Gambar 11 Menentukan lokasi penyimpanan APK
Tunggu beberapa saat sampai proses pengunduhan selesai, lalu silakan buka folder tempat kita menyimpan hasil unduhan APK tersebut. Maka akan terdapat APK dari aplikasi kita.
Gambar 12 Hasil APK dari aplikasi
9
Langkah 2: Log in ke Google Play Store Sekarang saatnya kita menerbitkan hasil build dari aplikasi kita ke Google Play Store. Silakan pertama-tama login ke Google Play Developer Console (https://play.google.com/apps/publish) dan log in menggunakan akun Google Anda.
Gambar 13 Halaman Log in Google Play Developer Console
10
Langkah 3: Add New Application Setelah log in, jika Anda telah terdaftar menjadi developer, maka Anda akan disuguhkan layar seperti di bawah ini dan pada layar tersebut klik Add new application. Jika belum terdaftar menjadi developer, Anda akan diminta mendaftar menjadi developer dengan mengisi form yang disediakan dan membayar sebesar $25 menggunakan kartu kredit.
Gambar 14 Tombol Add new application
Lalu beri nama aplikasi yang akan kita tambahkan tersebut.
11
Langkah 4: Unggah APK Lalu klik Upload APK dan ikuti instruksi yang tersedia pada layar selanjutnya.
Gambar 15 Layar pengunggahan APK
Gambar 16 Layar pengunggahan APK
12
Langkah 5: Lengkapi Data-Data Aplikasi Setelah selesai mengunggah aplikasi, kita akan disuguhkan layar untuk melengkapi datadata aplikasi seperti judul aplikasi, deskripsi, target negara yang boleh menggunakan aplikasi kita, dan lain-lain.
Gambar 17 Form data-data aplikasi
13
Gambar 18 Form data-data aplikasi
Dan jika semuanya sudah selesai dilengkapi, pada pojok kanan atas, tombol “Draft” akan menjadi “Ready to publish”, klik tombol tersebut dan klik “Publish this app”.
Gambar 19 Ready to Publish
14
Dan selesai. Jika tidak ada masalah, aplikasi kita akan segera terbit di Google Play Store dalam beberapa jam. Untuk menerbitkan aplikasi ke platform lain kurang lebih langkahnya sama namun tentu dengan penyesuaian berupa website tempat kita menerbitkan aplikasi kita harus sesuai dengan platform yang kita tuju. Pada beberapa platform, terdapat pengecekan terlebih dahulu dari aplikasi yang diterbitkan seperti pengecekan kode program kalau-kalau masih ditemui bug yang akan mengganggu device, atau pengecekan isi konten aplikasi kalau-kalau mengandung konten pornografi, menyesatkan, atau berbahaya. Jika aplikasi kita gagal pada tahap pengecekan tersebut, maka akan diberitahu aspek apa yang membuat aplikasi kita gagal. Jika seperti itu silakan perbaiki aplikasi dan terbitkan ulang aplikasi tersebut.
15
Pelatihan Intel XDK Modul Ekstra: Membuat Aplikasi Menggunakan AppStarter Wizard. Dikembangkan oleh Intel Software.
1
Hak Cipta (C) 2013 Intel Software. Adobe, Adobe Edge, Adobe Edge Animate merupakan merk dagang dan merk dagang terdaftar milik Adobe, Inc. Intel, Intel XDK merupakan merk dagang dan merk dagang terdaftar milik Intel Corporation. Semua merk dagang terdaftar lainnya yang tercantum pada modul ini merupakan milik pemiliknya masing-masing yang peduli. Modul ini bebas untuk disebarluaskan secara hardcopy ataupun softcopy dengan tanpa menambah atau mengurangi isi dari modul ini termasuk isi halaman ini. Modul ini tidak boleh diperjual belikan atau digunakan untuk tujuan komersial lain.
2
Modul Ekstra: Membuat Aplikasi Menggunakan AppStarter Wizard.
3
Menjalankan Intel XDK Plugin Pada bagian ini kita akan mencoba menggunakan Intel XDK Plugin yang sudah terinstal pada browser. Lalu kita akn mencoba menggunakan salah satu fitur utama yaitu membuat aplikasi menggunakan appstarter. Langkah pertama adalah kita jalankan plugin Intel XDK pada browser anda. Launcher intel XDK ada pada bilah ekstensi.
Setelah launcher diklik maka akan keluar halaman intro dari intel XDK ini. Jikalau sudah terinstall dengan baik maka akan muncul splash screen intel XDK.
4
Halaman utama intel XDK seperti di bawah ini.
Bisa kita lihat bahwa sudah otomatis tampil sample app yang bisa kita coba dan modifikasi.
Membuat Aplikasi Menggunakan AppStarter Wizard Oke sekarang selanjutnya kita masuk konten utama pada sessi ini, yaitu membuat aplikasi menggunakan AppStarter Wizard. Berikut langkah-langkahnya:
Klik Tombol Start New
5
Selanjutnya maka akan keluar pop-up untuk memilih tipe, metode dan tools yang digunakan pada project yang akan dibuat.
Isi dengan nama project Pilih App Starter
Klik tombol next maka akan muncul pop-up untuk menjalankan appstarter seperti di bawah ini:
Launch App Starter
Jikalau anda belum login atau membuat akun intel dev center maka akan ada perintah untuk login atau daftar. Jika sudah mempunya akun maka akan muncul pada tab baru workspace seperti di bawah ini:
6
Seperti biasa kita akan melakukan Hello World. Anda boleh merubah text pada tombol yang sudah tersedia dengan text yang diinginkan. Untuk mengganti text pada tombol Hello World yang sudah tersedia, kita cukup menyorot dan memilih tombol terserbut sehingga keluar tab button properties dan button styles.
Button Properties
Button Styles
Lalu kita coba ganti title pada Button Properties menjadi “Hello Indonesia” kemudian tekan tombol Apply pada tab Button Properties. (Masing-masing tab memiliki tombol Apply sendiri)
Title: Hello Indonesia Tombol Apply untuk Tab Button Properties Tombol Apply untuk Tab Button Styles
That’s all.. Silahkan berkreasi tanpa batas J
7
