Ini adalah artikel pertama dari seri Belajar Membuat Aplikasi Android HTML5 dengan Intel XDK. Untuk membaca artikel selengkapnya, silahkan klik pada tautan berikut.
[su_note note_color=”#e1100d” text_color=”#f5f5f5″]Maaf, artikel ini sudah tidak relevan. Terhitung semenjak 30 Juni 2017 Intel XDK sudah berstatus depracated/stop support oleh Intel, sehingga menyebabkan Intel XDK sudah tidak bisa digunakan untuk melakukan pengembangan aplikasi mobile.[/su_note]
Belajar Membuat Aplikasi Android HTML5 dengan Intel XDK – Bagian 1
Intel XDK adalah sebuah software untuk pengembangan sebuah aplikasi berbasis web yang dapat digunakan untuk berbagai macam platform, seperti Android, iOS, Windows (Universal), bahkan hingga IoT (Internet of Things). Singkatnya, dengan menggunakan Intel XDK, kita dapat membuat sebuah aplikasi Android, iOS, Windows (Universal), dan IoT menggunakan bahasa pemrograman web, seperti HTML5, Javascript, dan beberapa bahasa pemrograman web lainnya.
Dengan menggunakan Intel XDK, kita tidak hanya dapat membuat sebuah aplikasi, Intel XDK juga sering digunakan untuk pengembangan game berbasis web. Jika kalian membuat sebuah game menggunakan Construct 2, setelah di export menjadi HTML5, kalian dapat mem-build nya menggunakan aplikasi Intel XDK ini.
Tetapi dalam tutorial ini, saya akan membatasi pembahasan hanya pada pengenalan dan proses pembuatan aplikasi Android sederhana saja.
Jika kalian seorang web developer atau hanya mengerti bahasa pemrograman web, Intel XDK sangat cocok untuk digunakan untuk memulai belajar membangun aplikasi Android. Untuk pemula sekalipun yang belum terlalu mengerti bahasa pemrograman, Intel XDK dapat digunakan dengan sangat mudah.
Untuk menggunakan Intel XDK, hampir semua proses pengerjaan dapat dilakukan secara visual dan dengan drag n drop saja. Jika ingin memberikan fungsi tambahan yang lebih detail, kalian juga bisa langsung menambahkannya pada halaman editor.
[su_note note_color=”#f4b6ba” text_color=”#363636″]Untuk menggunakan Intel XDK, pastikan kalian terhubung dengan koneksi internet yang stabil.[/su_note]
Download & Install Intel XDK
Untuk dapat menggunakan Intel XDK, kalian dapat mendownload versi terbarunya secara gratis di https://software.intel.com/intel-xdk atau silahkan klik di sini. Pilihlah sesuai dengan sistem operasi yang kalian gunakan. Dalam tutorial ini, saya menggunakan Intel XDK versi 3641.
Jika sudah terdownload, install saja seperti menginstall aplikasi desktop pada umumnya.
Tampilan Awal
Apabila telah terinstal, silahkan buka aplikasi Intel XDK kalian. Jika belum memiliki akun, buatlah terlebih dahulu. Jika sudah, kalian bisa langsung login menggunakan akun Intel Developer Zone kalian.
Saya asumsikan kalian sudah memiliki akun dan berhasil login pada Intel XDK, berikut adalah tampilan utama dari Intel XDK.
Bisa kalian lihat, kalian bisa menggunakan beberapa template atau sample yang tersedia untuk memulai belajar membuat aplikasi mobile berbasis web.
Untuk membuat project baru, klik Template pada bagian HTML5 Companion Hybrid Mobile or Web App, lalu klik Blank. Pilih HTML5 + Cordova dan beri tanda checklist pada Use App Designer. Klik Continue.
Beri nama project kalian dengan nama HelloWorld. Lalu klik Create.
Tampilan Ruang Kerja
Jika project kalian telah berhasil dibuat, kalian akan masuk ke tampilan berikutnya. Tampilan berikut ini biasa saya sebut Workspace atau Ruang Kerja.
Terdapat beberapa menu yang dapat kalian lihat, seperti Develop, Simulate, Test, Debug, Build, dan Publish.
Berikut penjelasan singkat mengenai menu-menu tersebut.
Develop
Ini adalah menu di mana kalian dapat mengerjakan semua project kalian mulai dari design hingga editing script. Pada sebelah kiri atas, terdapat sub-menu Code dan Design. Pada sub-menu Design, di sini kalian dapat mengatur seluruh tampilan project kalian secara visual. Untuk menambahkan Text Box, Button, dan lain sebagainya, kalian hanya perlu drag n drop komponen tersebut pada tab Controls.
Untuk menambahkan sebuah page, kalian juga hanya perlu klik New Page pada tab Pages.
Sub-menu lainnya adalah Code. Pada sub-menu ini, kalian bisa gunakan untuk mengedit project kalian dengan menggunakan text editor yang ada di dalam Intel XDK.
Simulate
Menu ini digunakan untuk mensimulasikan project yang kalian buat menggunakan beberapa emulator yang tersedia di Intel XDK.
Test
Menu ini digunakan untuk mensimulasikan project yang kalian buat menggunakan perangkat yang kalian memiliki. Kalian juga harus menginstall aplikasi tambahan yang dapat di-download di Store kalian agar dapat melakukan testing secara langsung.
Debug
Digunakan untuk melihat apakah project yang kalian buat terdapat error atau bug.
Build
Menu ini digunakan untuk mem-build project yang telah dibuat menjadi sebuah aplikasi siap pakai untuk beberapa perangkat yang didukung oleh Intel XDK.
Publish
Digunakan untuk mem-publish hasil build yang telah dibuat ke dalam beberapa Store yang didukung oleh Intel XDK. Kalian juga dapat mengisi deskripsi, icon, screenshot, category dan lain sebagainya pada menu ini, sehingga sudah siap untuk di publish ke dalam Store.
Membuat Aplikasi Sederhana #1
Sebelumnya, saya sudah menjelaskan cara membuat sebuah project yang diberi nama dengan HelloWorld, sekarang buka kembali menu Develop pada workspace kalian dan pastikan aktif pada sub-menu Design.
Pada tab Controls > Common, drag n drop icon Text ke dalam page kalian. Sehingga muncul tulisan “Lorem ipsum …“, kalian hapus saja dan tuliskan dengan “Hello World”.
Jika sudah, klik menu Simulate, dan pilih platform dan perangkat yang digunakan untuk melihat dalam bentuk emulatornya. Dalam tutorial ini, saya memilih platform Android, dan perangkat Google Nexus 4. Lalu klik, Start Simulator.
Tunggu beberapa saat, dan jika berhasil tampilan workspace kalian akan seperti gambar di bawah ini.
Sekarang kalian sudah mengerti bagaimana cara menggunakan Intel XDK ini, mudah bukan?
Jadi, itulah tutorial Belajar Membuat Aplikasi Android HTML5 dengan Intel XDK – Bagian 1. Kalian bisa mengikuti tutorial selanjutnya dengan klik pada tombol yang ada di bawah ini. Jika kalian mengalami kesulitan, jangan sungkan untuk menanyakannya kepada kami melalui komentar di akhir artikel. Semoga artikel ini bermanfaat. Terima kasih.
[su_button url=”https://www.tutorialpemrograman.com/mobile/belajar-membuat-aplikasi-android-html5-dengan-intel-xdk-pendahuluan” style=”flat” background=”#f46455″ size=”5″ center=”yes” icon=”icon: arrow-left” rel=”nofollow”]Belajar Membuat Aplikasi Android HTML5 dengan Intel XDK – Pendahuluan[/su_button]
[su_button url=”https://www.tutorialpemrograman.com/mobile/belajar-membuat-aplikasi-android-html5-dengan-intel-xdk-bagian-2″ style=”flat” background=”#f46455″ size=”5″ center=”yes” icon=”icon: arrow-right” rel=”nofollow”]Belajar Membuat Aplikasi Android HTML5 dengan Intel XDK – Bagian 2[/su_button]
