Ini adalah artikel pertama dari seri Belajar Membuat Aplikasi Android HTML5 dengan Intel XDK. mungkin jika ada kekurangan terhadap artikel yang ada, mohon untuk ditambahkan sebagai masukan. terima kasih .

Belajar Membuat Aplikasi Android HTML5 dengan Intel XDK 

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 anda membuat sebuah game menggunakan Construct 2, setelah di export menjadi HTML5, anda dapat mem-build nya menggunakan aplikasi Intel XDK ini.
Jika anda 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, anda juga bisa langsung menambahkannya pada halaman editor.
Untuk menggunakan Intel XDK, pastikan anda terhubung dengan koneksi internet yang stabil.

Download & Install Intel XDK

Untuk dapat menggunakan Intel XDK, anda dapat mendownload versi terbarunya secara gratis di https://software.intel.com/intel-xdk atau silahkan klik di sini. Pilihlah sesuai dengan sistem operasi yang anda gunakan. Dalam tutorial ini, menggunakan Intel XDK versi 3641.




belajar-membuat-aplikasi-android-html5-dengan-intel-xdk
Gambar 1.

Jika sudah terdownload, install saja seperti menginstall aplikasi desktop pada umumnya.

Tampilan Awal

Apabila telah terinstal, silahkan buka aplikasi Intel XDK anda. Jika belum memiliki akun, buatlah terlebih dahulu. Jika sudah, anda bisa langsung login menggunakan akun Intel Developer Zone anda.
di asumsikan anda sudah memiliki akun dan berhasil login pada Intel XDK, berikut adalah tampilan utama dari Intel XDK.



belajar-membuat-aplikasi-android-html5-dengan-intel-xdk
Gambar 2.

Bisa anda lihat, anda 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 anda dengan nama HelloWorld. Lalu klik Create.



belajar-membuat-aplikasi-android-html5-dengan-intel-xdk
Gambar 3.

Tampilan Ruang Kerja

Jika project anda telah berhasil dibuat, anda akan masuk ke tampilan berikutnya. Tampilan berikut ini biasa saya sebut Workspace atau Ruang Kerja.
Terdapat beberapa menu yang dapat anda lihat, seperti Develop, Simulate, Test, Debug, Build, dan Publish.



belajar-membuat-aplikasi-android-html5-dengan-intel-xdk
Gambar 4.

Berikut penjelasan singkat mengenai menu-menu tersebut.

Develop

Ini adalah menu di mana anda dapat mengerjakan semua project anda mulai dari design hingga editing script. Pada sebelah kiri atas, terdapat sub-menu Code dan Design. Pada sub-menu Design, di sini anda dapat mengatur seluruh tampilan project kalian secara visual. Untuk menambahkan Text Box, Button, dan lain sebagainya, anda hanya perlu drag n drop komponen tersebut pada tab Controls.
Untuk menambahkan sebuah page, anda juga hanya perlu klik New Page pada tab Pages.
Sub-menu lainnya adalah Code. Pada sub-menu ini, anda bisa gunakan untuk mengedit project anda dengan menggunakan text editor yang ada di dalam Intel XDK.




belajar-membuat-aplikasi-android-html5-dengan-intel-xdk
Gambar 5.

Simulate

Menu ini digunakan untuk mensimulasikan project yang anda buat menggunakan beberapa emulator yang tersedia di Intel XDK.

Test

Menu ini digunakan untuk mensimulasikan project yang anda buat menggunakan perangkat yang anda memiliki. Anda juga harus menginstall aplikasi tambahan yang dapat di-download di Store anda agar dapat melakukan testing secara langsung.

Debug

Digunakan untuk melihat apakah project yang anda 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. Anda 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

Sebelumnya, sudah menjelaskan cara membuat sebuah project yang diberi nama dengan HelloWorld, sekarang buka kembali menu Develop pada workspace anda dan pastikan aktif pada sub-menu Design.
Pada tab Controls > Common, drag n drop icon Text ke dalam page anda. Sehingga muncul tulisan “Lorem ipsum …“, anda hapus saja dan tuliskan dengan “Hello World”.



belajar-membuat-aplikasi-android-html5-dengan-intel-xdk
Gambar 6.

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.




belajar-membuat-aplikasi-android-html5-dengan-intel-xdk
Gambar 7.

Tunggu beberapa saat, dan jika berhasil tampilan workspace anda akan seperti gambar di bawah ini.



belajar-membuat-aplikasi-android-html5-dengan-intel-xdk
Gambar 8.

Sekarang anda sudah mengerti bagaimana cara menggunakan Intel XDK ini, mudah bukan?

Jadi, itulah tutorial Belajar Membuat Aplikasi Android HTML5 dengan Intel XDK dasar. Semoga artikel ini bermanfaat. Terima kasih.
https://www.tutorialpemrograman.com

0 komentar:

Contoh project Pemrograman Grafik sederhana OpenGL menggunakan fungsi glLines

import java.util.logging.Level; //import java.util.logging.Logger; //import static komgraf01.KomGraf01.DISPLAY_HEIGHT; //import static k...