Saturday, 25 July 2015

Pengujian Desain Responsif pada Simulator Perangkat

Sejauh ini Anda telah menguji situs dengan jendela browser atau menggunakan tool-tool yang dibangun browser untuk menguki situs responsif, Meskipun ini efektif untuk menampilkan bagaimana media queries bekerja, tetapi ini tidak memberikan gambaran gambaran lengkap bagaimana mereka akan berpengaruh pada perangkat mobile. Kita sekarang akan melihat pada bagaimana kita dapat menguji project pada simulator perangkat dan perangkat yang sesungguhnya.

Sebelum Anda mulai dengan menguji pada browser perangkat mobile yang sebenarnya, Anda perlu  menentukan yang mana browser Anda yang akan mendukung. Ini mungkin berbeda pada setiap situs web yang Anda bangun berdasar pada target pengunjung situs Anda, jadi setelah Anda mempunyai beberapa analisa pada browser yang digunakan oleh pengunjung Anda, maka ini adalah awal yang baik. Selain itu jika situs web Anda ditargetkan pada negara tertentu, ini mudah untuk menentukan statistik pada apa persentase dari pengguna yang menggunakan masing-masing platform dengan melihat pada StatCounter GlobalStats site (http://gs.statcounter.com/).

Ada lima sistem operasi smart phone yang utama saat ini :
  1. iOS
  2. Android
  3. Windows Mobile
  4. BlackBerry OS
  5. Firefox OS
Setelah menentukan pada browser yang mana yang Anda inginkan untuk menguji, mari kita lihat bagaimana menguji pada mobile browser yang sesungguhnya. Ada dua pilihan : pertama menggunakan simulator dan yang kedua adalah mendapatkan beberapa perangkat yang sebenarnya untuk melakukan test.

Simulators
 Simulator memberikan awal yang fantastik untuk mengui situs responsif Anda, mereka mampu untuk menjalankan pada local machine Anda, sering dengan kemampuan untuk mengakses semua file local Anda dan semua file yang ada pada jaringan yang ada.

iOS Simulator
Jika Anda menggunakan Mac maka Anda dapat mendownload Mac developer toolkit, Xcode, pada Apple App Store. termasuk dengan ini adalah iOS Simulator, yang dapat digunakan untuk menguji situs responsif, untuk memulai dengan iOS Simulator, Anda perlu mengikuti langkah berikut :
  1.  Download Xcode dari the Apple App Store.
  2. Buka Xcode.
  3. Gunakan menu bar untuk navigate ke Xcode ➤ Open Developer Tool ➤ iOS Simulator.
  4. Buka Safari dengan mengklik icon Safari di dock.
Sekarang Anda dapat mengakses apapun situs web, termasuk situs lokal yang disimpan dalam file host Anda. Jika Anda hanya ingin menguji untuk file HTML,  Anda bahkan dapat hanya drag and drop nya ke dalam iOS Simulator window.

Sayangnya, ini tidak mungkin untuk menguji situs di Safari mobile pada Microsoft Windows karena Apple belum membuat versi dari iOS Simulator compatible dengan sistem operasi.

Android
Android emulator, menyediakan Android SDK (software development kit) pada Windows dan  Mac.
  1. Download Android SDK dari http://developer.android.com/sdk.
  2. Extract file zip ke ~/bin/Android (~Adalah singkatan Unix untuk direktori pengguna, jadi jika username  Anda Setiawan, maka full path folder akan seperti ini /Users/setiawan/bin/Android).
  3. Buka terminal Anda.
  4. Navigasi ke SDK, yang terletak di ~/bin/Android/sdk/tools.Anda dapat menavigasi ke path ini menggunakan Unix command cd untuk mengubah direktori. jadi full command yang Anda masukkan ke terminal akan menjadi ~/bin/Android/sdk/tools.
  5. Jalankan SDK Manager dengan menjalankan ./android command pada terminal Anda. Ini akan memuat aplikasi lain (sadari aplikasi ini mungkin memerlukan untuk di load dan sayangnya tidak memberikan indikasi dari stattus loadingnya).
Windows
  1.  Download Android SDK dari http://developer.android.com/sdk.
  2. Ekstrak file zip ke C:\Program Files\Android.
  3. Launch the SDK Manager.exe.
Langkah Bersama
  1. Sekarnag Anda dapat memilih SDK version yang Anda ingin menguji, Dalam kasus ini saya memilih  Android 4.3. Kemudian cukup klik install, baca dan accepting lisensi yang diminta.
  2. Anda kemudian perlu untuk memilih  Tools ➤ Manage AVDs pada  menu bar. Kemudian klik tombol New untuk membuat sebuah New Android Virtual Device.
  3. Sekarang Anda perlu memasukkan setting untuk simulator Anda, lihat pada figure 1-1
  4.  Sekarang Anda dapat memilih Simulator Anda, dan klik start , figure 1-2
  5. Dengan emulator Android yang telah diinstall, Anda sekarang dapat cukup menggunakan emulator seperti yang Anda lakukan pada perangkat Android yang normal. figure 1-3

 
figure 1-1 Simulator prompt memungkinkan Anda untuk mengkonfigurasi Simulator Anda















figure 1-2 . Daftar Android Virtual Device Manager Simulator yang tersedia
figure 1-3 Android simulator, dengan tombol  hardware  yang termasuk dalam jendela
Firefox OS Simulator
Firefox OS Simulator berjalan sebagai add on untuk Firefox, dan pada Firefox 26.0 itu benar-benar sangat sederhana untuk menginstall :
  1. Buka Firefox dan buka URL about:app-manager. Maka Anda akan disajikan dengan built-in App Manager, seperti ditampilkan pada figure 1-4 
  2. Sekarang Anda dapat klik Start Simulator. Karena tidak ada simulator yang diinstall, Anda akan diberikan pilihan install simulator, jadi klik  Install Simulator untuk melanjutkan, seperti ditampilkan dalam figure 1-5 
  3. Sekarang Anda akan di bawa ke halaman web untuk menginstall simulator, cukup ikuti instruksi untuk menginstall versi terbaru
  4. Setelah terinstall kembali ke  about:app-manager dan refresh halaman, klik Start Simulator dan pilih versi simulator yang Anda ingin mulai. Jika itu masih mengatakan Install Simulator, Anda sebaiknya mencoba untuk menginstall versi  yang berbeda, lihat figure 1-6
  5. Setelah waktu loading yang singkat, Anda akan menemukan diri Anda pada Firefox OS home screen, dimana Anda dapat memilih web browser. OS Simulator ditampilkan dalam figure 1-7
  6. Setelah memuat browser, Anda dapat memasukkan URL situs web Anda untuk mulai menguji situs Anda. Browser akan ditampilkan dalam figure 1-8
figure 1-4 Firefox App Manager tool dapat digunakan untuk launch a Firefox OS Simulator

figure 1-5 App Manager memungkinkan Anda untuk menginstall simulator jika belum di install

figure 1-6 pilihan untuk memilih dari versi simulator yang berbeda untuk di install

figure 1-7 Firefox OS Simulator home screen, dengan browser ditemukan pada sudut bawah kanan


figure 1-8 Firefox berjalan pada Firefox OS Simulator
 BlackBerry OS Simulator
BlackBerry Limited  menyediakan emulator untuk BlackBerry OS yang dapat berjalan pada Windows dan Mac. Dan mereka benar-benar mudah untuk diinstall, Namun Anda juga perlu untuk install VMware Player pada Windows atau VMware Fusion  pada Mac, jika Anda belum memiliki aplikasi ini, maka Anda dapat menemukannya di www.vmware.com.
  1. Download emulator di http://uk.blackberry.com/sites/developers/resources/simulators.html.
  2. Jalankan installer.
  3. Jalankan Virtual Machine di VMware, perhatikan figure 1-9
 
figure 1-9 BlackBerry simulator berjalan di VMware
 Windows Phone Simulator
 Windows Phone Simulator adalah bagian dari Windows Phone SDK, yang saat ini hanya tersedia untuk Windows 8+. Sayangnya menjalankan Windows Phone Simulator  juga meminta hardware yang spesifik. yang dapat Anda temukan pada msdn.microsoft.com/en-us/library/windowsphone/develop/ff626524(v=vs.105).aspx.
  1. Download Windows Phone SDK dari http://dev.windowsphone.com/en-us/downloadsdk.
  2. Jalankan SDK installer (meminta 6.5GB dari hard drive space)
  3. Setelah menyelesaikan installasi, Anda akan diberitahu Anda perlu lisensi untuk Visual Studio, jadi Anda dapate membatalkan atau menggunakan trial atau register untuk free license pada http://www.visualstudio.com/en-US/products/visual-studio-express-vs.
  4. Check update yang tersedia untuk SDK.
  5. Buka command line (cmd)  dengan klik kanan dan klik Run as administrator.
  6. Jalankan Command: "C:\Program Files (x86)\Microsoft XDE\8.0\XDE.exe" /vhd "C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v8.0\Emulation\Images\Flash.vhd" /name WP8SDK
  7. Dengan simulator yang sekarang sudah terbuka, Sekarang Anda dapat menjalankan Internet Explorer di Simulator , figure 1.10
  8. Untuk membuka simulator selanjutnya dapat dilakukan dengan mudah, buat .bat file dengan command.

figure 1-10 Internet Explorer berjalan pada Windows Phone Simulator

No comments:

Post a Comment