Quick Android Review Kit

Linkedin punya repo yang menarik hati: https://github.com/linkedin/qark

serupa dengan mobile top 10 security vulnerabilities via owasp yang pernah saya bahas di tulisan sebelumnya.

Kali ini, saya mencoba sebuah tool bernama “QARK” (Quick Android Review Kit) yang terdapat di repo punya linkedin. Tool ini dikembangkan menggunakan python dan tool ini mampu menganalisis dengan mudah celah keamanan di aplikasi Android yang kita kembangkan.

Tanpa perlu memeriksa satu per satu, hanya dengan mengetik satu baris perintah (bisa dipakai untuk memeriksa apk ataupun sourcecode), dan output dari tool ini adalah memberitahukan persentase celah keamanan dan juga apa saja yang berbahaya dan harus dihindari.


Baru saja saya coba di laptop saya, dan sebagai bahan percobaan, saya mencoba salah satu sourcecode aplikasi project saya sebelumnya. Dan di screenshot di bawah ini, ada beberapa celah keamanan yang diperlihatkan dengan persentase. Setelah semua dicek satu per satu, di bawahnya dibahas satu per satu, apa saja yang menjadi celah agar dapat diperbaiki segera oleh developer.

Persentase tingkat celah keamanan di aplikasi yang dikembangkan
Beberapa “suggest” yang diberikan QARK ini agar saya bisa memperhatikan dan memperbaiki celah keamanan tersebut

Anda memerlukan Python terinstall di OS laptop/PC untuk mencoba Qark ini. Silahkan download python di sini. Setelah selesai download python. Bisa dicoba install qark melalui terminal dengan cara, download terlebih dahulu sourcecode qark tersebut dari github. Kemudian jalankan terminal, arahkan terminal ke folder tempat sourcecode qark tersebut disimpan di harddisk anda. Lalu ketikkan perintah berikut di terminal:

$ python qarkMain.py [enter]

Setelah berhasil, sebuah jendela qark akan muncul di layar, dan tinggal dipilih deh apa yang mau dilakukan dengan tool kit ini. Selamat mencoba.

Advertisements

Memperkuat keamanan di sisi aplikasi mobile Android

Saat saya menerima hasil audit tahap pertama, saya kaget, ternyata aplikasi yang saya buat, datanya “telanjang”, kelihatan semua. Loh? padahal sudah saya enkripsi dengan RSA public-key, tapi kok URLnya keliatan, data yang di-POST keliatan, dan tidak rusak sama sekali datanya, padahal sudah pakai koneksi https (SSL). Saat itu ternyata masih belum cukup. Saya menerima hasil audit tersebut dan melihat software apa yang dipakai oleh IT Security Engineer-nya: ternyata yang dipakai adalah tool Burp Suite (https://portswigger.net/burp), Nmap, Charles proxy, dan beberapa baris script yang dijalankan di bash di HP rooted. Sama seperti tool security testing atau pentest (penetration test) lainnya seperti Wireshark, OWASP (Open Web Application Security Project) dan Back Track . Tools yang dipakai bertujuan untuk menguji beberapa standar pengujian di aplikasi mobile. Bisa dicek di web berikut ini dari M1 sampai dengan M10.

Beberapa aspek yang diuji yang menjadi mobile risk base line adalah:

  • improper platform usage (M1),
  • insucure data storage (M2),
  • insecure communication (M3),
  • insecure authentication (M4),
  • insufficient cryptography (M5),
  • insecure authorization (M6),
  • client code quality(M7),
  • code temparing (M8),
  • reverse engineering (M9),
  • dan extraneous functionality (M10)

Mari kita bahas satu per satu dengan singkat (saya sertakan link pelengkap di setiap bahasan agar bisa dijelajah lebih jauh)…

Untuk mengatasi issue M1, platform yang digunakan harus jelas, codingan yang kita gunakan juga harus terstandar sesuai dengan guideliness di SDK Android. Ini untuk meminimalisir improper platform usage.

Untuk M2, biasanya penyakit ini terjadi kalau developer menyimpan atau menampilkan data di Log, mungkin maksudnya biar mudah untuk debugging, tapi yang kayak gini biasanya akan jadi masalah ketika ada user yang test aplikasi kemudian membaca lognya dari tools seperti adb logcat atau ddms. Atau dia menyimpan data pengguna di db sqlite yang bisa di-extract dari APKnya dan dibaca pakai tools SQlite browser. Atau menyimpan ke dalam flat file XML yang ternyata itu data penting. Jadi, sebaiknya hal tersebut dihindari. Bagaimana caranya log tersebut hilang pada saat kita build APK tanpa perlu capek remove atau comment satu per satu line by line di source code. Tenaaang..di Android kan ada proguard, bisa matiin log pakai proguard tersebut dengan cara menambahkan line berikut di file proguard:

-assumenosideeffects class android.util.Log {
    public static boolean isLoggable(java.lang.String, int);
    public static int d(...);
    public static int w(...);
    public static int v(...);
    public static int i(...);
}

Atau lebih jelasnya cek di laman berikut.

Untuk kasus M3, insecure connection biasanya terjadi ketika kita menggunakan koneksi http (port 80), bukan https (port 443). Emang apa bedanya? jika masih belum paham bisa main ke web ini. Selain itu yang menjadi concern ialah koneksi https tidak sepenuhnya aman, karena bisa dinetralisir dengan menggunakan proxy atau vpn yang insecure. Jadi ketika aplikasi hit ke server, sebelum sampai ke server, datanya melalui proxy dulu atau vpn dulu, tidak langsung ke server. Ya kena tangkap deh datanya terbaca jelas. Apalagi kalau tidak dilengkapi dengan trusted SSL. Tambah ketahuan. Tadi saya mengira dengan saya menguji sendiri aplikasi yang saya kembangkan dengan menggunakan Charles Proxy di MacOS, saya install cert dari Charles, kemudian jalankan aplikasi di Android. Tadaa..saya senang ternyata datanya sudah tidak terbaca, tapi begitu teman bilang “jangan lupa SSLProxy-nya disetting, mas”, pas saya setting untuk host server yang digunakan di aplikasi, kemudian tekan OK, kemudian jalankan kembali aplikasi yang saya buat. “loh???? kok datanya terbaca 100% tidak ada yang kacau..waduh”. Ternyata masih ada celah. Untuk mengantisipasi hal tersebut, di Android sudah ada standar pinning SSL, bisa dilihat di web berikut. Jadi, ketika koneksi tersebut untrusted SSL, aplikasi dapat memutuskan hubungan koneksi sehingga tidak terhubung ke jaringan yang tidak aman. Bagaimana cara mengakali VPN atau proxy. Di android bisa diantisipasi dengan cara mem-bypass proxy. Caranya seperti ini:

try {
    conn = (HttpsURLConnection) url.openConnection(Proxy.NO_PROXY);
    try {
        sf = new SSLSocketFactory(ksTrust);
        sf.setHostnameVerifier(SSLSocketFactory.STRICT_HOSTNAME_VERIFIER);
    } catch (NoSuchAlgorithmException e) {
        e.printStackTrace();
    } catch (KeyManagementException e) {
        e.printStackTrace();
    } catch (KeyStoreException e) {
        e.printStackTrace();
    } catch (UnrecoverableKeyException e) {
        e.printStackTrace();
    }
} catch (SocketTimeoutException | java.net.ProtocolException e) {
    e.printStackTrace();
} catch (ConnectException e) {
    e.printStackTrace();
} catch (IOException e) {
    e.printStackTrace();
}finally{
    conn.disconnect();
}

Dari contoh code di atas, koneksi HTTPS tersebut diset parameter NO_PROXY untuk mem-bypass proxy di device Android ketika aplikasi terhubung internet. Selain itu terdapat SSLSocketFactory dengan menggunakan KTrust (ini contoh variable dari Keystore yang digenerate dari file certificated trusted SSL). Dengan begini ketika koneksi untrusted otomatis koneksi tersebut terputus (conn.disconnect() di bagian finally). Selain itu bisa juga koneksi tersebut diset DIRECT Connection dengan cara seperti ini. Tujuan bypass proxy ini juga agar tools pengujian penetrasi di atas semacam Charles Proxy dan SandroProxy tidak dapat bekerja dengan baik (karena kedua tools tersebut menggunakan proxy). Bacaan tambahan soal Socket Proxy.

Untuk kasus M4, insucure authentication, bisa diantisipasi dengan 2-step-verification, makanya saat ini standar di aplikasi Android seperti itu, dengan menggunakan PIN via SMS atu telepon, atau dengan menggunakan biometrik touchID (sidik jari). Selain itu perlunya memberitahukan pengguna soal level kuat tidaknya password yang ia gunakan. Makanya di form pendaftaran biasanya di bagian password dicantumkan level kekuatan password : very weak, weak, medium, strong, very strong. Dan jangan lupa, dihimbau agar jangan membuat fitur untuk menyimpan mpin atau password ke database local atau di-sharedPreferences. Bila ingin membuat fitur “remember password” ya perlu dibuat ada expirednya di kedua sisi (backend dan aplikasi mobile).

Untuk kasus M5, insuffienct cryptography.. rendahnya tingkat kriptografi membuat data yang terenkripsi dengan mudah didekripsi. Di aplikasi dapat ditambahkan mekanisme enkripsi dua arah (server dan aplikasi), jadi server mengirimkan public key atau bisa juga bikin API untuk generate userAPIKey yang akan digunakan aplikasi untuk enkripsi RSA, bisa menggunakan base64 atau yang lain. Contohnya banyak di stackoverflow, atau bisa lihat di sini. Ada juga yang sudah dalam bentuk lib yang bisa langsung dipakai di sini (saya rekomendasikan yang ini, karena sering saya pakai untuk beberapa aplikasi Android). Umumnya biar aman, publicKey dan userAPIKey digenerate dari server, tinggal user request via aplikasi ntah itu ketika splash screen atau ketika di landing screen (berjalan secara background ya..jangan ditampilin). Ketika userAPIKey dan publicKey diperoleh, aplikasi tinggal memakai publicKey, ditambah dengan deviceID, module, dan exponent untuk enkripsi dengan RSA, bisa dipakai untuk enkripsi pin, password, atau data penting lainnya. Cara mendapatkan value module dan exponent bisa berkunjung ke web berikut.

Untuk kasus M6, pernah tau gak kalau kita mau install aplikasi, akan dicantumkan popup permission? nah, di situ aplikasi memiliki otorisasi untuk mengakses beberapa komponen dari OS device kita. Contoh, ketika kamu install aplikasi kamera, maka ketika install dan jalankan akan muncul popup meminta permisi untuk mengakses kamera (camera permission), atau aplikasi sticky notes, ketika kita install dan jalankan, akan muncul pop-up meminta izin mengakses storage, dll. Nah, pentingnya bagi pengguna untuk waspada, aplikasi apa yang kita install dan izin apa saja yang kita berikan. Jangan sampai kita menginstall aplikasi senter, ternyata permissions yang diminta banyak: minta izin akses akun google, minta izin akses lokasi, dll…kan jadi aneh. Nah, dari sisi development, permission ini dicantumkan di manifest aplikasi. Dan ketika aplikasi hendak menjalankan suatu metode yang berhubungan dengan device, biasanya permission ini ikut triggered. Jangan sampai kita menambahkan permission yang tidak ada hubungannya dengan tujuan aplikasi tersebut.

Untuk kasus M7, pernah liat codingan orang lain yang acak-acakan? atau gak perlu jauh-jauh, cek aja codingan sendiri 5 tahun yang lalu, mesti masih berantakan..hehe. Nah, code yang jelek seperti ini akan jadi masalah, rawan bug, rawan celah keamanan. Maka berlatihlah menulis code dengan baik dan benar hehe. Apalagi sekarang sudah ada beberapa standar atau pattern di dalam penulisan code Android. Dulu kenal MVC -> Model, View, Controller? nah di Android, selain MVC, ada juga pattern MVVM dan MVP. Dengan menerapkan pattern tersebut, otomatis kita sudah membiasakan codingan yang lebih rapih dan baik.

Untuk kasus M8, pernah liat atau pernah melakukan install APK mod sebuah games yang duit/emerald/koinnya bisa 99999999. Mungkin pernah main Candy Crush atau game lain yang koinnya 999999 (unlimited)? nah, APK tersebut adalah apk yang sudah dimodifikasi alias sudah ditambahkan code lain yang tidak resmi. Biasanya, APK itu di-build tanpa obfuscatedJadi, ketika APK didecompile, ya codenya terbaca jelas. Ya sudah, akhirnya si penyusup dapat menambahkan code lain-lain yang berbahaya, tinggal compile ulang dan sebarkan. Nah, bahayanya, ketika kita sebagai pengguna tidak tau kalau APK tersebut disisipi code berbahaya, ntah itu mengambil data akun kita (facebook, dll), atau merekam aktivitas kita di HP. Untuk mengantisipasi agar ketika APK di-decompile, codenya rusak (obfuscated), bisa menggunakan ProGuard dan aktifkan minify APK dari gradle. Selain itu di sisi server juga ditambahkan pengecekan apakah APK tersebut original ataukah mod, bisa dengan generate appID setiap update, jadi ketika versinya outdated atau appID tidak valid, maka tidak dapat terhubung ke server. Atau mekanisme pengecekan apakah APK rooted ataukah resmi. Pernah lihat kan? gak bisa install apk tertentu (misal netflix), karena HP/device Android kamu rooted? nah itulah bagusnya sisi keamanan app. tersebut.

Reverse engineering (M9), sudah pernah install aplikasi android “Show Java” ? coba deh install di PlayStore, atau klik tautan ini. Aplikasi tersebut memungkinkan aplikasi yang terinstall di device Android untuk di-decompile. Jadi, inputnya APK, outputnya jadi source-code Java (di-reverse engineering). Nah, kalau tidak di-obfuscate, codingan kamu ya akan terbaca jelas semua melalui aplikasi reverse engineering tersebut. Jadi source-code java, xml, dan lain-lain dari aplikasi tersebut dapat dilihat, dipelajari dan bahkan bisa dicari celah keamanannya. Bahayanya, jika kamu menaruh API_KEY atau hal-hal lain yang mestinya bersifat rahasia, jadi ketahuan deh. Cara antisipasi ini ya dengan di obfuscate melalui proguard dan atau..dengan minifyEnabled diset “true” di gradle app. aplikasi kamu (di bagian buildTypes>release). Selain cara menggunakan app “show java” di atas, apk kamu sebenarnya bisa dengan mudah di-reverse engineering dengan mengganti extensi apk menjadi zip atau tar. Misal, nama filenya: app-release.apk, coba deh ganti jadi app-release.zip, terus extract… Tadaaa… keliatan semua tuh folder dan file java beserta xmlnya. Makanya perlu diantisipasi dengan obfuscate itu tadi. Cara modding apk yang banyak dilakukan cracker untuk beberapa games ya dengan cara inject file atau replace file yang ada di dalam package apk tersebut (diubah jadi ext .zip terlebih dahulu) dengan file yang sudah dimodifikasi. Nah ini dia celahnya, jadinya ya APKnya sudah tidak signed lagi. Makanya penting menginstall apk yang sudah signed. Di PlayStore juga kalau mau publish apk mesti signed menggunakan keystore. Jangan install apk sembarangan ya.

Extraneous Functionality (M10), hal yang fatal yang sering ditulis developer di code aplikasinya adalah mengakses API dengan menaruh parameternya pada URL (dengan method GET), yang terkadang, bila si cracker mampu melakukan debug aplikasi, kemudian membaca URL APInya, kemudian membuat “backdoor“, mencobanya di browser, tadaa..ternyata berhasil diakses. Nah, dari sisi backend semestinya hal ini bisa dihindari. Jangan sampai API bisa diakses via url. Dan di Android sendiri sudah ada cara yang aman, misal menggunakan retrofit atau okhttp, dengan method POST dan tentunya seperti yang dibahas sebelumnya, parameternya di-enkripsi. Selain itu, matikan semua debug atau Log yang dipasang di app agar tidak ada data di background yang terbaca oleh orang yang tidak seharusnya. Periksa semua API endpoint yang diakses dari mobile app, apakah sudah tertulis dengan benar dan periksa semua log statement di source-code, jangan sampai ada sesuatu dari backend terbaca jelas di log (walaupun tujuannya sekedar buat debugging, tapi yang seperti ini bisa jadi celah).

Sekian pembahasan dari saya. Semoga bermanfaat bagi semua, dan mampu membuat code yang well-written, dan ini juga menjadi pengingat bagi diri saya pribadi yang masih perlu banyak belajar.

 

 

Cara mudah install/update gradle di Mac

Mungkin masih ada yang bingung bagaimana cara mengupdate gradle secara manual, atau terlalu pusing dengan banyaknya step di internet. Nah, di mac ada cara mudah dan cepat untuk meng-install atau meng-update gradle. Lakukanlah langkah-langkah berikut.

Di mac, buka terminal, kemudian ketik perintah berikut untuk menginstall SDKMan:

curl -s https://get.sdkman.io | bash

Setelah selesai, lanjut ketikkan perintah berikut:

$ sdk install gradle 3.5

Setelah selesai install gradle, cek di Android Studio apakah gradlenya sudah versi 3.5 atau belum, dengan cara masuk ke Terminal-nya Android Studio, kemudian ketik perintah berikut:

Gradle --version

Jika berhasil, maka hasilnya seperti pada gambar di bawah ini:

Screen Shot 2017-04-30 at 8.53.56 PM

Selesai 😀

Mempercepat proses gradle build

Masalah yang sering dihadapi seorang developer Android adalah berhadapan dengan IDE Android Studio. IDE ini memang dikenal memakan banyak resource RAM dan harddisk, bahkan RAM yang disarankan cukup besar 8 GB. Jika di bawah itu ya, siap-siap saja menunggu lama compile aplikasi sambil ditinggal tidur, ngopi dan makan.

Jika sudah memenuhi spesifikasi install Android Studio, namun dirasa masih cukup lambat, terutama ketika melakukan “build” aplikasi menggunakan gradle, ada baiknya mencoba tips berikut:

  1. Update versi gradle ke versi terbaru. Saat ini (April 2017) versi terbarunya adalah versi 3.5 (https://docs.gradle.org/current/release-notes.html)
    Cara updatenya bisa ikuti di tutorial berikut: https://gradle.org/install
  2. Buat file baru dengan nama gradle.properties, taruh di lokasi berikut:
    /home/<username>/.gradle/ (Linux)
    /Users/<username>/.gradle/ (Mac)
    C:\Users\<username>\.gradle (Windows)

    Setelah itu copas teks berikut ke gradle.properties:

    org.gradle.daemon=true
    org.gradle.parallel=true
    org.gradle.jvmargs=-Xmx2048M   

    Untuk org.gradle.jvmargs, apabila RAM yang dimiliki sekitar 4 GB, cukup set di angka 2048M, namun jika lebih ya lebih bagus, bisa diset di angka 8192 bagi yang memiliki RAM sekitar 16 GB.
    Jika sudah, save, dan lanjut ke bagian android Studio. Buka Preferences/Settings Android Studio, masuk ke bagian “Build, Execution, Deployment”, pilih “Gradle” dan beri centang pada “Offline Work” seperti pada gambar di bawah ini, dan set directory-nya ke lokasi gradle.properties yang sudah dibuat tadi.
    lseqd

  3. Beri parameter –offline pada Compiler seperti pada gambar di bawah ini:
    gjrrv
  4. Masuk ke Aplikasi yang sedang dibuat di Android Studio, klik build.gradle.
    Setelah itu tambahkan line berikut di dalam tag android:
    Screen Shot 2017-04-30 at 6.00.47 PM

    dexOptions {
        incremental true
        javaMaxHeapSize "4g"
    }

    beri angka “4g” apabila RAM yang dimiliki 4GB, dan beri angka 8g bila RAM yang dimiliki 8GB. Dokumentasinya ada di sini: google.github.io/android-gradle-dsl/current/

  5. Perbesar heapsize untuk mempercepat build di gradle.properties dengan menambahkan parameter berikut:
    # Specifies the JVM arguments used for the daemon process.
    # The setting is particularly useful for tweaking memory settings.
    # Default value: -Xmx10248m -XX:MaxPermSize=256m
    org.gradle.jvmargs=-Xmx2048m -XX:MaxPermSize=512m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8

    *peringatan: memperbesar heapsize beresiko membuat software lain yang dibuka menjadi lambat. Karena RAM akan terfokus ke gradle Android Studio.

  6. Done, selamat mencoba 😀

Testing app di Android Studio menggunakan device Android via Wifi

Bagi yang ribet menggunakan kabel untuk melakukan pengujian aplikasi ke device/hardware Android, anda dapat mengikuti cara mudah berikut ini. Di artikel ini diberikan 2 opsi melakukan pengujian aplikasi dari Android Studio ke device Android dengan perantara nirkabel/wifi.

Metode Pertama.

  • Nyalakan debugging mode di Pengaturan HP/device Android.
  • Koneksikan kabel usb dari laptop/PC ke HP Android (ini untuk inisialisasi saja, seterusnya tidak diperlukan lagi)
  • Gunakan command prompt/terminal yang sudah bisa menggunakan perintah “adb” (atau ya kalau belum paham, tinggal arahkan saja ke path lokasi SDK Android dan masuk ke directory sdk/platform-tools/ di dalamnya ada batch file adb)
  • Ketik:
    adb tcpip 5555[enter]
  • setelah itu cek IP Address HP/device Android dengan cara ketik:
    adb shell netcfg
  • Setelah anda mengetahui IP Address dari device/HP anda, dicatat/diingat, kemudian ketikkan perintah dengan format berikut:
    adb connect [IP_Address_device]:5555
    Contoh: adb connect 192.168.1.6:5555[enter]
    nanti akan muncul response:

    “connected to 192.168.1.6:5555” (ini tidak perlu diketik ya..ini akan muncul kalau anda berhasil menghubungkan HP/device android ke laptop via IPaddress secara wireless)

  • Setelah itu lepas kabel usb dari HP/device Android dan laptop/PC anda.
  • Dan selamat menikmati, Android Studio anda sudah bisa melakukan testing ke device/HP Android tanpa terhubung dengan kabel usb.
  • Bila anda sudah selesai melakukan testing aplikasi, anda dapat menutup koneksi wireless dari HP ke laptop anda dengan perintah berikut:
    adb -s [IP_address_device]:5555 usb [enter]

Cukup ribet ya cara di atas? atau masih ada yang gagal mencoba? Move-on dong..mari coba metode ke-dua.

Metode Kedua.

  1. Dari Android Studio kamu, masuk ke Preferences, dengan cara:
    Android Studio: Preferences/Settings->Plugins->Browse Repositories
  2. Install Plugins dengan mengetikkan: “Android WiFi ADB” dan pilih install sesuai petunjuk di layar.
  3. Setelah selesai Install, apabila diminta restart, pilih “restart”
  4. Selamat, plugins Android WiFi ADB berhasil diinstall. Sekarang bagaimana cara menggunakannya ya? Lanjut ke step ke-5.
  5. Mau testing di device Android, tentu jangan lupa nyalakan DEBUGGING mode (pokoknya wajib, masih belum ngerti? bisa bertanya atau cari diinternet, seharusnya developer Android tau langkah mudah mengaktifkan debugging mode ini)
  6.  

    Cari opsi “DEBUG OVER TCP/NETWORK” di dalam Menu Pengaturan/Settings device/HP android kamu>Developer Options.

  7.  

    Pasang kabel USB dari HP ke Laptop/PC, dan pastikan keduanya (PC dan HP) menggunakan jaringan internet yang sama (ntah hotspot ataupun wifi)

  8.  

    Pilih icon ANDROID Wifi ADB di Android Studio.

  9.  

    Setelah itu, device/hp kamu akan terdeteksi di situ, dan siap digunakan untuk testing (jangan lupa cabut kabel USBnya yah pas menggunakan plugins Android Wifi ADB ini)

Selamat mencoba.

 

“Adaptive Design” di Aplikasi Android

Salah satu bentuk tantangan tersendiri di dalam pengembangan aplikasi Android adalah, membuat aplikasi yang well designed secara antarmuka, apalagi ada banyak keberagaman jenis device Android, baik dari ukuran layar (3 inci, 4 inci, 5 inci sampai 10 inci) maupun density (Android menggunakan satuan dp (pixel density) bukan pixel, ini mengacu pada konsentrasi pixel pada layar tertentu, diukur dalam pixel per inch (ppi). Kerapatan pixel (dp) ini dihitung dengan membagi resolusi pixel diagonal layar dengan ukuran diagonal).

Ngomong-ngomong soal pixel density. Bisa dicek di tabel berikut bagaimana acuannya untuk beberapa resolusi dalam satuan pixel ke density pixel:

---------------------------     -----   ------------    --------------- ------- -----------     ----------------    ---         ----------
Device                          Inches  ResolutionPX    Density         DPI     ResolutionDP    AspectRatios        SysNavYorN  ContentResolutionDP
---------------------------     -----   ------------    --------------- ------- -----------     ----------------    ---         ----------                                                          
Galaxy Y                                 320 x  240     ldpi    0.75    120      427 x 320      4:3     1.3333                   427 x 320
?                                        400 x  240     ldpi    0.75    120      533 x 320      5:3     1.6667                   533 x 320
?                                        432 x  240     ldpi    0.75    120      576 x 320      9:5     1.8000                   576 x 320
Galaxy Ace                               480 x  320     mdpi    1       160      480 x 320      3:2     1.5000                   480 x 320
Nexus S                                  800 x  480     hdpi    1.5     240      533 x 320      5:3     1.6667                   533 x 320
"Galaxy SIII    Mini"                    800 x  480     hdpi    1.5     240      533 x 320      5:3     1.6667                   533 x 320
?                                        854 x  480     hdpi    1.5     240      569 x 320      427:240 1.7792                   569 x 320

Galaxy SIII                             1280 x  720     xhdpi   2       320      640 x 360      16:9    1.7778                   640 x 360
Galaxy Nexus                            1280 x  720     xhdpi   2       320      640 x 360      16:9    1.7778                   640 x 360
HTC One X                       4.7"    1280 x  720     xhdpi   2       320      640 x 360      16:9    1.7778                   640 x 360
Nexus 5                         5"      1920 x 1080     xxhdpi  3       480      640 x 360      16:9    1.7778      YES          592 x 360
Galaxy S4                       5"      1920 x 1080     xxhdpi  3       480      640 x 360      16:9    1.7778                   640 x 360
HTC One                         5"      1920 x 1080     xxhdpi  3       480      640 x 360      16:9    1.7778                   640 x 360
Galaxy Note III                 5.7"    1920 x 1080     xxhdpi  3       480      640 x 360      16:9    1.7778                   640 x 360
HTC One Max                     5.9"    1920 x 1080     xxhdpi  3       480      640 x 360      16:9    1.7778                   640 x 360
Galaxy Note II                  5.6"    1280 x  720     xhdpi   2       320      640 x 360      16:9    1.7778                   640 x 360
Nexus 4                         4.4"    1200 x  768     xhdpi   2       320      600 x 384      25:16   1.5625      YES          552 x 384
---------------------------     -----   ------------    --------------- ------- -----------     ----------------    ---         ----------
Device                          Inches  ResolutionPX    Density         DPI     ResolutionDP    AspectRatios        SysNavYorN  ContentResolutionDP
---------------------------     -----   ------------    --------------- ------- -----------     ----------------    ---         ----------
?                                        800 x  480     mdpi    1       160      800 x 480      5:3     1.6667                   800 x 480
?                                        854 x  480     mdpi    1       160      854 x 480      427:240 1.7792                   854 x 480
Galaxy Mega                     6.3"    1280 x  720     hdpi    1.5     240      853 x 480      16:9    1.7778                   853 x 480
Kindle Fire HD                  7"      1280 x  800     hdpi    1.5     240      853 x 533      8:5     1.6000                   853 x 533
Galaxy Mega                     5.8"     960 x  540     tvdpi   1.33333 213.333  720 x 405      16:9    1.7778                   720 x 405
Sony Xperia Z Ultra             6.4"    1920 x 1080     xhdpi   2       320      960 x 540      16:9    1.7778                   960 x 540

Kindle Fire (1st & 2nd gen)     7"      1024 x  600     mdpi    1       160     1024 x 600      128:75  1.7067                  1024 x 600
Tesco Hudl                      7"      1400 x  900     hdpi    1.5     240      933 x 600      14:9    1.5556                   933 x 600
Nexus 7 (1st gen/2012)          7"      1280 x  800     tvdpi   1.33333 213.333  960 x 600      8:5     1.6000      YES          912 x 600
Nexus 7 (2nd gen/2013)          7"      1824 x 1200     xhdpi   2       320      912 x 600      38:25   1.5200      YES          864 x 600
Kindle Fire HDX                 7"      1920 x 1200     xhdpi   2       320      960 x 600      8:5     1.6000                   960 x 600
?                                        800 x  480     ldpi    0.75    120     1067 x 640      5:3     1.6667                  1067 x 640
?                                        854 x  480     ldpi    0.75    120     1139 x 640      427:240 1.7792                  1139 x 640

Kindle Fire HD                  8.9"    1920 x 1200     hdpi    1.5     240     1280 x 800      8:5     1.6000                  1280 x 800
Kindle Fire HDX                 8.9"    2560 x 1600     xhdpi   2       320     1280 x 800      8:5     1.6000                  1280 x 800
Galaxy Tab 2                    10"     1280 x  800     mdpi    1       160     1280 x 800      8:5     1.6000                  1280 x 800
Galaxy Tab 3                    10"     1280 x  800     mdpi    1       160     1280 x 800      8:5     1.6000                  1280 x 800
ASUS Transformer                10"     1280 x  800     mdpi    1       160     1280 x 800      8:5     1.6000                  1280 x 800
ASUS Transformer 2              10"     1920 x 1200     hdpi    1.5     240     1280 x 800      8:5     1.6000                  1280 x 800
Nexus 10                        10"     2560 x  1600    xhdpi   2       320     1280 x 800      8:5     1.6000                  1280 x 800
Galaxy Note 10.1                10"     2560 x  1600    xhdpi   2       320     1280 x 800      8:5     1.6000                  1280 x 800
---------------------------     -----   ------------    --------------- ------- -----------     ----------------    ---         ----------
Device                          Inches  ResolutionPX    Density         DPI     ResolutionDP    AspectRatios        SysNavYorN  ContentResolutionDP
---------------------------     -----   ------------    --------------- ------- -----------     ----------------    ---         ----------

Dan dokumentasi lengkapnya bisa dilihat di sini: https://developer.android.com/guide/practices/screens_support.html#testing

Itulah mengapa di dalam Resources Project di Android Application terdapat drawable dan layout dengan kategori ldpi (low-dpi), mdpi (medium-dpi), hdpi (high-dpi), xhdpi (extra high-dpi), xxhdpi, dan xxxhdpi.
Masing-masing kategori folder tersebut merujuk ke DPI layar device.
Jadi ketika ingin menerapkan aplikasi yang disupport di ukuran layar 3 inch (dengan dpi 160) dan 4 inch (dengan dpi 240), maka harus dicek di tabel di atas, bahwa dpi 160 itu adalah mdpi, so desain yang kamu siapkan mesti ditaruh di folder drawable/drawable-mdpi dan layoutnya di folder layout/layout-mdpi, begitu juga dengan DPI lainnya.

screen-shot-2017-01-13-at-4-07-46-pm

Lalu bagaimana caranya biar satu slicing desain saya bisa pas ditaruh di masing-masing folder tersebut (ldpi, mdpi, hdpi, dll) tanpa perlu repot?

Ada banyak cara loh! Caranya gak pake ribet, ada yang cara online dan ada yang cara offline.

Untuk membuat 1 komponen desain agar bisa diterapkan di masing-masing folder dpi tersebut dapat menggunakan generator, salah satunya 9-patch generator yang bisa dicoba secara online di sini. Dan untuk cara offline-nya, bisa dicoba langsung dari Android Studio dengan cara:

Install plugin “Drawable Importer” dengan cara masuk ke Preferences di Android Studio.

Setelah itu masuk ke bagian Editor\Plugins dan pilih Browse Repositories. Masukkan keyword “Android Drawable Importer” lalu klik “Install Plugin”, seperti pada gambar di bawah ini:

drawable_importer-1

Setelah itu tinggal digunakan dengan cara klik kanan file drawablenya dan pilih New\Scaled drawable. Dan ikutilah petunjuknya di layar.

Dengan mempersiapkan slicing komponen desain dengan berbagai ukuran layar, kita bisa membuat aplikasi tersebut menjadi adaptive design, tanpa khawatir aplikasi tersebut tidak cocok di berbagai ukuran layar.

Pentingnya bagi seorang designer mobile app. memahami “design pattern” dan guidelines desain aplikasi

Waaah…. desainer baru…. begitu dilihat pengalamannya ternyata basic-nya adalah desainer web yang sudah bekerja selama 5 tahun lebih.

Tiba-tiba kebutuhan akan aplikasi mobile begitu tinggi, alhasil beberapa desainer web beralih profesi mengerjakan desain-desain antarmuka aplikasi mobile.

Nah, ada kesalahan fatal yang terjadi, menyebabkan potensi kesalahan di dalam pengembangan, ntah itu timeline menjadi tambah panjang, developer yang menjadi sulit mengimplementasikan desain yang diberikan, dan sebagainya.

Siapapun yang menjadi desainer aplikasi mobile, dimohon jangan samain seperti mendesain website yah..hehe
Desain aplikasi platform apapun itu, baik itu iOS, Android, Windows Phone, Blackberry, ada prinsip-prinsip desain yang harus dipahami, ada guidelines yang harus dipatuhi. Setiap OS mobile punya pattern desain sendiri yang mesti diikuti. Tidak bisa “semau gue, menurut gue itu keren”.

Seorang designer antarmuka aplikasi mobile mesti mendalami pengetahuan seputar perangkat OS platform tersebut, mindset-nya juga harus diubah. Sama seperti pada waktu seorang designer web mendapatkan job dari perusahaan ternama (pernah saya alami di BNI, Jakarta), mereka (BNI…yg saya tau) punya guidelines terhadap website mereka. Misal : Warna tema website mereka.. di guidelines-nya dijelasin hexa codenya apa, logo web-nya pakai yang mana, resolusi “width height“-nya berapa, ukuran hurufnya berapa, pake typeface apa, dan sebagainya..maka terjadilah konsistensi desain di web yang dimiliki perusahaan ternama tersebut.

Begitu juga dengann platform mobile. Antarmuka di aplikasi mobile punya konsistensi, ketika mendesain layout, peletakan menu slalu di sebelah mana, icon aplikasi bentuknya seperti apa, di hape layar kecil resolusinya berapa, di hape layar besar resolusinya berapa, kalo bikin tab taruh di mana, default typeface pake apa, dan sebagainya.

Saya rasa tantangan yg mereka (designer web) hadapi ketika menjadi designer apps adalah bagaimana caranya agar menguasai design interaksi dan UX-nya.

Untuk mengubah sebuah tampilan website menjadi tampilan aplikasi yg mungil, layar terbatas, jangkauan pengguna ketika menyentuh layar bagaimana, dan hal-hal lain yang perlu diperhatikan… bukanlah sebuah pekerjaan yang mudah. Sebagai contoh : ketika mengatur ukuran huruf yang nyaman dibaca pengguna aplikasi, mengatur komponen apa aja yang dapat dijangkau pengguna aplikasi ketika menyentuh layar, dan dari langkah tersebut, desainer masih dibuat pusing lagi ketika menguji hasil karya antar mukanya.

Si desainer sudah merasa yakin mendesain aplikasi di hape layar besar (di atas 5 inch), ternyata di hape layar kecil membuat pengguna kurang nyaman, terkadang mengalami masalah komponen layout-nya oversize di hape layar kecil, terkadang ukuran hurufnya kegedean diterapkan di hape layar kecil, dan masih banyak lagi masalah-masalah yang mungkin terjadi. Dan akhirnya si desainer aplikasi  mencoba mengatur ulang layout-nya.

Dengan kata lain, mau tidak mau si desainer harus menyiapkan beberapa layout design untuk beberapa jenis ukuran layar smartphone maupun tablet (dari ldpi, mdpi, hdpi, xhdpi, sampai dengan xxhdpi).

Seperti yang sudah saya jelaskan, masing-masing perangkat mobile, baik itu smartphone maupun tablet punya UX berbeda. Apalagi beda platform, tentu User Experience di tiap platform berbeda. Pengguna device Android sudah terbiasa melihat menu dengan slide ke kanan atau tap pada pojok kiri dan kanan, sedangkan pengguna device iOS terbiasa dengan menu slide di bawah ke atas, dan berbeda lagi dengan pengguna WindowsPhone, menu disajikan per tab dengan label yang besar di atasnya, tidak ada menu pojok seperti di Android ataupun menu bawah seperti di iOS. Setiap platform punya guidelines-nya bagaimana meletakkan komponen design, seperti yang saya sampaikan yaitu menu, slide menu, tombol, tab, tabel, dan komponen lainnya.

Biasanya, seorang desainer itu melakukan coret2 dulu di wireframe (wireframing), diskusikan dengan tim (ntah dengan desainer web ataupun aplikasi mobile yang lain ataupun dengan developer dan system analyst) apa yang telah di-wireframing sudah pas atau belum, kemudian periksa guidelines di docs platform tersebut apakah sudah sesuai pattern OS tersebut atau belum, kemudian UX-nya bagaimana.. apakah sudah sesuai dengan kebiasaan pengguna di platform tersebut atau belum, setelah itu baru memulai perbaiki designnya agar menjadi tampilan antarmuka aplikasi yang ideal yang siap diimplementasikan ke dalam aplikasi.

Bagi teman-teman yang belum mengetahui guidelines atau panduan mendesain di masing-masing platform mobile, bisa merujuk ke link berikut ini :
Semua udah ditulis lengkap, resmi dan terstruktur, tinggal kitanya mau belajar dengan tekun atau tidak.
iOS : https://developer.apple.com/…/UserExp…/Conceptual/MobileHIG/
Android : http://developer.android.com/de…/get-started/principles.html
WP : https://dev.windows.com/en-us/design

Sekian 🙂