Saturday, 25 July 2015

Menguji Situs Responsif pada Perangkat yang Sebenarnya

Sejauh saya telah berfokus pada bagaimana untuk menguji situsdevelopment machines dengan menguji sebuah situs di browser dan menggunakan phone simulators. Meskipun pengujian situs ini dapat dilakukan dengan praktis dan memungkinkan Anda untuk cepat melakukan test awal, tapi mereka tidak menyediakan refleksi/cerminan yang sejati tentang bagaimana situs akan bekerja pada perangkat yang sesungguhnya.

Salah satu alasan untuk ini adalah bahwa pada development machines Anda hanya meniru metode input yang berbeda dengan menggunakan perangkat keyboard dan mouse. Dengan menguji pada perangkat yang sesungguhnya, Anda dapat menguji dengan metode input pengguna yang akan menggunakan. Tanpa menguji situs pada perangkat fisik atau perangkat yang sebenarnya, Anda mungkin tidak melihat masalah yang berkaitan dengan usability. Masalah umum yang mungkin tidak Anda lihat akan tombol yang terlalu kecil untu tap atau teks tidak dapat dibaca pada layar kecil.

Dengan pemikiran ini, itu sangat penting untuk menguji situs responsif pada banyak perangkat yang Anda memiliki akses. Namun, jika Anda baru mulai mengumpulkan perangkat Anda, itu dapat menjadi benar-benar sulit untuk memilih perangkat mana yang harus dibeli, terutama jika Anda memiliki anggaran yang terbatas. Dalam situasi ini, masuk akal untuk melihat perangkat yang digunakan oleh pengguna Anda dan ketika memilih perangkat yang Anda butuhkan, pastikan mencakup dasar-dasar yang Anda perlukan. Perangkat harus mencakup sebagian besar sistem operasi yang popular sebagai minimum, dengan campuran high end and low end jika memungkinkan.

Debugging Web Sites on Devices
 Ketika menguji situs web dengan berabagai perangkat yang berbeda, Anda perlu mampu untuk debug apapun masalah yang mungkin pengguna jumpai. Cara untuk melakukan debugging  tergantung sistem operasi dari perangkat.

Debugging Sites on Android
Langkah pertama untuk konfigurasi perangkat Android Anda untuk memungkinkan remote debugging. Cara Anda melakukan ini tergantung pada versi Android yang berjalan pada perangkat Anda.

Untuk Android 4.2  atau yang terbaru, pergi ke Settings ➤ About phone dan tekan build number seven times (terdengar sedikit seperti kode Konami yang sudah tua!) Kemudian kembali ke layar sebelumnya. Kemudian arahkan ke layar sebelumnya dimana new menu option, Developer options, akan terlihat. Dibawah Debugging  sekarang Anda dapat memungkinkan USB debugging. Pengaturan highlighted  dalam figure 1-1

figure 1-1 Pilihan Android Developer dengan USB debugging enabled

Untuk Android 4.0 atau 4.1 pergi ke Settings ➤ Developer Options. Dibawah Debugging, sekarang Anda dapat enable USB debugging. setting highlighted  pada figure 1-1

Jika Anda menggunakan windows, pada tahap ini Anda akan perlu install USB device drivers untuk menghubungkan perangkat Android, ini tersedia untuk di download pada http://developer.android.com/tools/extras/oem-usb.html.

Pada point ini Anda perlu mengubah pengaturan di Chrome untuk mendukung enable remote debugging . Untuk melakukan ini, masukkan URL  about:inspect kedalam web browser Anda, Ini akan menampilkan halaman setting Anda untuk Chrome DevTools. Anda kemudian dapat enable device discovery dengan checking  untuk check box Discover USB devices, seperti ditampilkan pada figure 1-2

figure 1-2 Enable device discovery di Chrome
Anda sekarang berada pada tahap dimana Anda dapat menghubungkan perangkat Anda dengan USB. Ketika terhubung, Anda mungkin melihat peringatan pada perangkat untuk meminta permission dari USB debugging. Untuk menghindari ini pada waktu selanjutnya, Anda dapat melakukan check Always allow from this computer  sebelum mengklik OK.

Anda sekarang dapat membuka situs Anda di Chrome pada perangkat Anda. Ini kemudian akan terlihat pada halaman chrome://inspect untuk memeriksa perangkat Anda telah plugged in ke dalam komputer. Ini digambarkan pada figure 1-3

figure 1-3 Pilih sebuah tab untuk perangkat Anda yang Anda ingin Inspect

Dengan halamanyang dimuat pada perangkat Anda, Anda sekarang dapat mengklik link Inspect di bawah nama situs. Ini adalah inspector Chrome standar yang Anda gunakan untuk inspect situs web pada desktop Anda (seperti ditampilkan pada figure 1-4 . Disamping semua tool developer yang Anda sudah install pada browser dapat juga digunakan untuk debug situs Anda.





figure 1-4 Chrome Developer Tools inspecting situs pada perangkat Android


Open Device Labs
Jika Anda tidak memiliki anggaran untuk membeli apapun perangkat untuk Anda miliki, Anda akan melihat jka ada Open Device Labs (http://opendevicelab.com/) dekat dimana Anda bekerja dan tinggal. Open Device Labs adalah sebuah gerakan komunitas yang mendirikan tempat untuk perangkat dan setiap orang dapat kesana dan mengujinya. Biasanya mereka mempunyai berbagai perangkat yang berbeda, yang memungkinkan Anda untuk mendapatkan gambaran bagus tentang bagaimana situs Anda bekerja lintas perangkat.

Online Solutions
 Anda mungkin berada dalam situasi dimana Anda tidak mungkin untuk mendapatkan tangan Anda pada perangkat dan tidak tinggal dekat dengan Open Device Lab. maka dalam hal ini ada juga solusi online yang akan memungkinkan Anda untuk menguji dengan berbagai perangkat.

Solusi online  pertama adalah Perfecto Mobile (www.perfectomobile.com/).  Perfecto Mobile adalah bukan simulator tetapi sebaliknya Anda dapat mengendalikan perangkat sesungguhnya dengan jarak jauh. Apa ini berarti bahwa Anda mendapatkan benar-benar dari pengguna dari situs Anda akan pengalaman ketka menggunakan situs Anda.

Solusi kedua adalah BrowserStack (www.browserstack.com), yang memungkinkan Anda untuk menguji situs web Anda di sejumlah browser yang berbeda. Selain memungkinkan Anda untuk menguji dan debug situs responsfi Anda. BrowserStack  juga memungkinkan Anda untuk cepat menghasilkan screenshot dari phone di browser dan perangkat yang berbeda. Ini juga ada baiknya bahwa Anda tidak perlu untuk membuat situs Anda tersedia untuk publik untuk menggunakan BrowserStack. karena ini menginstall plug-in browser itu akan menempatkan situs Anda melalui keamanan server mereka.

No comments:

Post a Comment