Membuat Aplikasi Android menggunakan HTML5

by | Jan 14, 2017 | Artikel, Artikel Android, Artikel Software Development, Tutorial | 7 comments

Membuat aplikasi Android menggunakan HTML5 – Teknologi mobile berkembang pesat dalam beberapa tahun terakhir. Berbagai macam produk perangkat mobile dapat dengan mudah kita temukan di pasaran. Para produsen selolah berlomba-lomba memproduksi perangkat dengan berbagai macam fitur dan kelebihan. Berbagai macam fitur disediakan dalam perangkat mobile untuk memenuhi kebutuhan penggunanya.

Perkembangan teknologi mobile tidak sebatas pada perkembangan perangkat fisik / perangkat kerasnya itu sendiri, berbagai macam perangkat lunak dibuat dan disediakan guna memenuhi kepuasan para penggunanya. Di sisi lain para inovator dan developer bekerja mati-matian untuk menciptakan ide-ide kreatif guna diterapkan pada perangkat mobile. Sebagai contoh, Google Play Store (Android Market) adalah sebuah layanan yang meneydiakan berbagai macam aplikasi untuk perangkat mobile berbasis Android. Pada Google Playstore kita dapat menemukan berbagai amcam aplikasi mulai dari game / permainan, aplikasi entertainment, aplikasi new / berita, aplikasi pemutar musik dan lain sebagainya.

Lalu, bagaimanakah cara untuk membuat sebuah aplikasi untuk perangkat mobile? Apa saja peralatan yang harus dibutuhkan untuk membuat sebuah aplikasi mobile? Untuk membuat sebuah aplikasi dilalui dengan berbagai macam tahapan. Para programmer memerlukan SDK / IDE yang selanjutnya akan mereka gunakan untuk membuat aplikasi. SDK / IDE adalah perangkat lunak yang berguna untuk membuat baris-baris program yang selanjutnya baris-baris program tersebut akan di-compile sehingga menghasilkan sebuah aplikasi / program. Kemampuan dalam menggunakan bahasa pemrograman diperlukan dalam proses ini.


Berikut ini saya akan berikan sebuah contoh membuat aplikasi Android menggunakan HTML5. Namun, sebelum memulai membuat aplikasi, terlebih dahulu kita harus siapkan SDK / IDE yang akan digunakan dalam membuat aplikasi Android menggunakan HTML5. Untuk membuat aplikasi Android saya terbiasa menggunakan Eclipse IDE. Sudah hampir 5 tahun saya menggunakan IDE ini untuk membuat aplikasi Android. Bagi yang ingin menggunakan Eclipse, Anda bisa mengunduhnya di halaman official Eclipse.

Apabila SDK / IDE sudah siap, kita bisa langsung membuat aplikasi Android menggunakan HTML5. Berikut ini merupakan langkah-langkah untuk membuat aplikasi Android menggunakan HTML5 :

  1. Buka Eclipse IDE, biasanya ketika pertama kali dibuka akan muncul dialog box untuk menempatkan direktori Workspace Anda. Direktori ini adalah direktori tempat kita menyimpan file source code yang kita kerjakan. Silahkan Anda tempatkan direktori sesuai keinginan Anda.
    Workspace Direktori
  2. Selanjutnya, Eclipse IDE akan terbuka, silahkan Anda menuju ke menu FIle->New->Project maka akan keluar dialog box. Pilih Android->Android Application Project klik Next.
    Membuat aplikasi Android menggunakan HTML5
  3. Berikutnya Anda akan diminta untuk mengisi nama proyek dan nama aplikasi yang akan Anda kerjakan, jika sudah anda dapat klik Next (sebagai contoh perhatikan screenshot di bawah ini).
    Nama Android Project
  4. Klik Next
  5. Tahap berikutnya Anda akan diminta untuk setting icon launcher aplikasi, tahap ini dapat anda lewat dengan klik Next
  6. Pilih Blank Activity, klik Next.
    Android Icon Launcher
  7. Tentukan nama Activity beserta nama layoutnya. Nama Activity adalah nama file Java yang akan dibentuk oleh IDE begitu juga dengan nama layout. Untuk layout akan berupa file xml.
  8. Klik Finish.

Hore… sudah finish!!

Eittsss tunggu dulu,

Membuat aplikasi Android menggunakan HTML5

belum selesai. Tadi hanyalah baru menyelesaikan untuk setting projectnya saja. Selanjutnya Anda akan dihadapkan dengan bahasa pemrograman. Tapi jangan khawatir, jangan takut dengan bahasa pemrograman.

  1. Setelah kita klik finish tadi, selanjutnya silahkan Anda double click nama activity dan nama layout yang sudah kita setting tadi (Nama Activity saya : MainActivity.java, sedangkan nama layoutnya activity_main.xml).
  2. Berikutnya, kita akan membuat sebuah file HTML. Buka Notepad atau text editor yang biasa Anda gunakan. Salin kode program di bawah ini :
  3. Selanjutnya simpan file tersebut dengan aturan sebagai berikut : Folder Proyek Android Anda->Buka Folder Assets ->Buat folder baru dengan nama “app”->simpan file source code tersebut dalam folder “app” dengan nama file “app.html” *ingat perhatikan nama file diikuti nama .html ya….
    Project Directory
    Project Directory
    Project Directory
  4. Selanjutnya perhatikan pada Eclipse IDE, klik kanan pada folder project anda dan pilih refresh agar file app.html tadi dapat terlihat pada project sructure / package explorernya.
    Project Explorer
  5. Langkah berikutnya, buka file layout. Ubah file tersebut menjadi seperti berikut ini :
    layout
  6. Selanjutnya buka file Activity. Ubah source code pada activity menjadi seperti berikut ini :
    Activity
  7. Berikutnya kita akan coba jalankan aplikasi android tersebut. Untuk uji coba, bisa Anda lakukan pada Android Simulator atau pada perangkat Android secara langsung. Untuk test secara langsung pada perangkat diperlukan kabel data untuk koneksi dari PC ke perangkat mobile Anda.