jQuery Mobile (02): Cara Memasang Ripple Emulator di Google Chrome

Subscribe channel BangHaji CotCom

Sebelumnya sudah dibahas tentang pengantar aplikasi web mobile, berisi sebuah contoh kode program struktur dari dokumen web mobile menggunakan jQuery Mobile. Juga telah disediakan paket jQuery Mobile yang bisa di download sebagai bahan belajar. Pada paket tersebut ada sebuah file contoh kerangka halaman web mobile dengan tipe file php.

Aplikasi pendukung

Oleh karena tipe file yang digunakan adalah php, maka diperlukan web server agar file tersebut dapat dijalankan. Silahkan download web server portabel bernama Server2Go. Petunjuknya ada pada tulisan tersebut.

Ripple Emulator

Ripple Emulator adalah extension pada Google Chrome yang akan digunakan untuk mengubah tampilan agar disimulasikan pada perangkat mobile. Hasilnya akan terlihat sama seperti diakses menggunakan perangkat mobile sungguhan.

Instalasi Ripple Emulator

Untuk memasang extension ini di Google Chrome silahkan ikuti langkah-langkah berikut.

Satu. Buka Google Chrome, kemudian klik icon options menu di ujung kanan atas, pilih Settings.

Instalasi Ripple Emulator, Options Menu, Settings

Dua. Pilih menu Extensions yang ada di panel kiri, selanjutnya klik link “Get more extensions” di bagian bawah halaman.

Instalasi Ripple emulator, Extensions

Tiga. Pada kotak pencarian, ketik saja “ripple emulator” dan tekan enter, akan ditampilkan beberapa hasil pencarian. Jika sudah ada Ripple Emulator (Beta), klik tombol ADD TO CHROME untuk memasang extension ke Google Chrome.

Instalasi Ripple emulator, Pencarian, Add to Chrome

Empat. Akan muncul konfirmasi pemasangan, klik tombol Add extension.

Instalasi Ripple emulator, Add extension

Lima. Proses download akan berlangsung beberapa saat dan jika telah selesai akan ditampilkan icon Ripple Emulator beserta pesan berhasil memasang extension.

Instalasi Ripple emulator, sudah terinstal

Enam. Untuk mengaktifkannya, silahkan buka tab baru kemudian akses alamat URL tertentu yang akan ditampilkan dalam simulasi perangkat mobile. Pada contoh ini, saya ingin mengakses web banghaji dot com pada emulator. Selanjutnya, klik icon Ripple Emulator dan klik tombol Enable, setelah itu refresh halaman dengan menekan tombol F5.

Instalasi Ripple emulator, Enable

Tujuh. Pilih platform dari web, klik saja tombol Mobile Web (default), halaman akan di-refresh otomatis.

Instalasi Ripple emulator, Mobile Web

Delapan. Daaaan… Halaman web ditampilkan pada emulator dengan simulasi perangkat mobile, seakan-akan diakses menggunakan perangkat mobile sungguhan 😀 .

Anda bisa melakukan perubahan pada emulator ini, misalnya ingin mengganti ukuran device, mengganti desain perangkat, mengubah orientasinya apakah potrait atau landscape. Agar tampilan lebih luas (tidak penuh), Anda bisa menyembunyikan panel kiri dan kanan dari emulator.

Instalasi Ripple emulator, Simulasi Perangkat Mobile

Oke, pemasangan Ripple Emulator sudah selesai dan sudah berjalan dengan baik. Sekarang coba jalankan web server dan akses halaman contoh (file kerangka) dan aktifkan Ripple Emulator pada halaman tersebut. Hasilnya, file kerangka akan terlihat seperti gambar berikut.

Simulasi file kerangka jQuery Mobile

Baiklah, sampai jumpa pada tutorial jQuery Mobile selanjutnya, baca juga tutorial lainnya. 😎 😀 . Oh iya, jangan lupa download Server2Go portabel sebagai aplikasi pendukungnya.

Related Posts