Menampilkan Splash Screen pada Cordova

Artikel kali ini akan menjelaskan cara menampilkan splash screen dari sebuah aplikasi dengan menggunakan API Cordova. Splash Screen yang dimaksud di sini adalah sebuah tampilan yang akan muncul pertama kali saat sebuah aplikasi dibuka. Splash Screen biasanya menampilkan nama dan logo aplikasi berikut nama pembuat, versi dan sebagainya. Biasanya splash screen akan muncul selama beberapa detik kemudian baru beralih ke halaman utama dari aplikasi mobile.

Splash screen dapat dengan mudah ditampilkan dengan menggunakan plugin Splashscreen.

Sebelum memulai dengan pembuatan aplikasi ini, pastikan komputer kerja Anda telah dipersiapkan dengan API Cordova dan software yang dibutuhkan lainnya. Untuk mempersiapkan lingkungan pengembangan Cordova, silakan membaca artikel “Memulai Cordova” yang dibuat penulis sebelumnya.

Catatan:

  • Pada artikel ini platform yang digunakan hanya Android, sehingga semua penjelasan yang diuraikan mengacu pada platform tersebut.
  • Kode program dari contoh aplikasi telah disertakan bersama artikel ini sehingga Anda bisa menggunakannya sambil membaca penjelasan agar lebih mudah memahaminya.

Mempersiapkan gambar splash screen

Splash screen adalah sebuah gambar dengan format PNG. Idealnya Anda harus mempersiapkan gambar PNG yang sama namun dengan resolusi yang berbeda-beda sesuai dengan ukuran layar perangkat mobile. Tetapi pada contoh kali ini kita hanya menyiapkan sebuah file splash screen walaupun nantinya gambar akan tampak tidak proporsional jika di ditampilkan pada layar perangkat yang tidak sesuai. Namun hal itu tidak masalah jika tujuannya untuk latihan.

Pada contoh ini penulis menggunakan sebuah gambar PNG dengan resolusi 300 x 200 pixel seperti di bawah ini.

splashscreen-cordova01

Selanjutnya gambar ini harus diedit menggunakan program Draw 9-patch yang ada di dalam Android SDK. Program Draw 9-patch adalah sebuah editor WYSIWYG untuk membuat sebuah gambar bitmap yang secara otomatis dapat menyesuaikan tampilannya untuk mengakomodasi ukuran layar yang berbeda-beda.

Silakan ikuti langkah-langkah berikut ini:

  1. Pastikan Android SDK telah terintal pada komputer kerja.
  2. Jalankan program bat yang ada di dalam folder ..\sdk\tools dari Android SDK.

splashscreen-cordova02

  1. Ambil file PNG yang telah disiapkan dan tarik/geser ke layar program Draw 9-patch di atas. Atau Anda bisa juga menggunakan menu File –> Open.
  2.  Aktifkan opsi “Show patches”.

splashscreen-cordova03

Buat area patch pada bagian luar gambar sehingga membentuk seperti bingkai. Pastikan area patch tidak menyentuh gambar yang ingin ditampilkan. Patch adalah area yang akan berubah secara fleksibel baik memanjang atau memendek sesuai ukuran layar. Karena bagian tengah gambar harus tetap proporsional maka pastikan bagian itu terbebas dari area patch.

Perhatikan apa yang terjadi jika gambar bagian tengah terkena area patch (yang seharusnya dihindari).

splashscreen-cordova04

  1. Simpan gambar tersebut dengan menu File à Save. Program Draw 9-patch akan menambahkan karakter “.9” pada nama file-nya. Contoh: splash.9.png

 

Membuat projek baru

  1. Buat sebuah folder kerja untuk projek Cordova. Pada contoh ini folder tersebut diletakkan pada folder ..\Cordova\workshop. Anda bebas menentukan nama dan lokasi folder tersebut.
  2. Buka sebuah command shell dan masuk ke dalam folder kerja di atas. Pada contoh ini akan dibuat sebuah projek bernama splash.
  3. Jalankan perintah berikut ini:

Setelah projek berhasil dibuat, file-file projek tersebut akan disimpan di dalam folder ..\Cordova\workshop\splash. Silakan menuju folder tersebut dan melihat folder-folder dan file-file apa saja yang sudah terbentuk.

  1. Tambahkan dukungan untuk platform Android. Silakan masuk ke folder ..\Cordova\workshop\ splash dan jalankan perintah:

  1. Tambahkan plugin-plugin yang dibutuhkan. Silakan masuk ke folder ..\Cordova\workshop\splash dan jalankan perintah:

splashscreen-cordova05

  1. Sesuaikan versi API Android yang terinstal pada komputer kerja dengan versi target yang akan dibuat. Pada API Cordova yang digunakan oleh penulis, secara default target yang ditetapkan adalah android-22. Namun karena pada komputer kerja penulis versi API Android yang terinstal adalah 21 maka bagian ini harus diedit secara manual.

Buka file project.properties di dalam folder ..\workshop\splash\platforms\android. Ubah versi API pada bagian target dengan yang sesuai.

Buka file AndroidManifest.xml di dalam folder ..\workshop\splash\platforms\android. Ubah versi API pada bagian android:targetSdkVersion dengan yang sesuai.

  1. Salin file flash PNG yang dibuat tadi ke salam folder ..\workshop\splash\platforms\android\ res\drawable.

Mempersiapkan jQuery

Langkah ini bertujuan untuk memperindah tampilan dan tidak berhubungan dengan fungsi inti dari aplikasi yang sedang dibuat.

jQuery dibutuhkan untuk digunakan bersama-sama jQuery Mobile. Versi jQuery yang digunakan pada contoh program ini adalah jquery-1.11.3. Dianjurkan untuk tidak menggunakan jQuery 2.x karena terbatasnya versi browser yang didukung oleh versi tersebut.

  1. Silakan mengunduh jQuery dari situs beralamat:

https://jquery.com/download/

  1. Silakan menyalin file jquery-1.11.3.js ke dalam folder ..\splash\www\js.

Mempersiapkan jQuery Mobile

Pada contoh ini framework jQuery Mobile akan digunakan untuk memperindah tampilan antar muka (User Interface= UI). jQuery Mobile adalah UI framework yang sangat populer dan cukup mudah digunakan. Versi jQuery Mobile yang digunakan pada contoh program ini adalah jquery.mobile-1.4.5, namun demikian tidak ada batasan untuk menggunakan versi yang lebih baru.

  1. Silakan mengunduh jQuery Mobile dari situs beralamat:

https://jquerymobile.com/

  1. Silakan menyalin file mobile-1.4.5.min.js ke dalam folder ..\splash\www\js.
  2. Silakan menyalin file mobile-1.4.5.min.css ke dalam folder ..\splash\www\css.

 

Mengedit file html

Buka file index.html yang ada di dalam folder ..\splash\www. Hapus semua skrip HTML yang asli dan ganti dengan skrip yang baru berikut ini.

 

Mengedit file config.xml

  1. Buka file xml yang ada di dalam folder ..\workshop\splash.
  2. Tambahkan dua baris baru <preference> seperti di bawah ini.

 Atribut SplashScreen berisi nama file splash screen, yaitu dalam hal ini adalah splash.9.png yang terletak di dalam folder ..\workshop\splash\platforms\android\res\drawable. Anda bebas menggunakan nama file lain.

Atribut SplashScreenDelay berisi durasi splash screen akan ditampilkan dalam mili detik. Nilai default-nya adalah 3000.

Mempersiapkan file-file gambar

File-file gambar ada di dalam folder ..\splash\www\img.

Mempersiapkan file icon

Sebuah icon baru telah dipersiapkan untuk menggantikan icon standar dari aplikasi Cordova.

  1. Siapkan sebuah gambar dengan format PNG dan berukuran 96 x 96
  2. Pada folder projek aplikasi Cordova, silakan masuk ke sub-folder ..\platforms\android\res. Di situ akan dijumpai beberapa folder drawable dan drawable-xxx seperti pada gambar berikut ini.
  3. Hapus semua folder drawable-xxx dan tinggalkan sebuah folder bernama drawable. Dengan dihapusnya folder-folder drawable-xxx maka perangkat mobile selalu akan mencari gambar icon di dalam folder drawable.

cordova-dgn-bootstrap01

  1. Di dalam folder drawable terdapat file bernama png. File inilah yang dapat diganti dengan gambar lain supaya icon aplikasi berubah sesuai dengan gambar yang diinginkan. Silakan mengambil gambar icon yang baru dan salin ke dalam folder ini dengan nama file yang sama (hapus file icon.png yang asli). Pastikan resolusinya sama dengan gambar yang asli.

 

Menjalankan aplikasi

  1. Sambungkan kabel data dari komputer ke perangkat Android. Pastikan perangkat Android terdeteksi oleh komputer.
  2. Masuk ke dalam folder ..\Cordova\workshop\splash dan jalankan perintah:

Tampilan aplikasi saat dijalankan diperlihatkan pada gambar di bawah ini.

splashscreen-cordova07

 

end-of-doc

Leave a Reply

Your email address will not be published. Required fields are marked *