Category Archives: Informatics

Library untuk Theming Aplikasi Android

Seperti yang sudah diketahui, sebagaimana ‘termaktub’ dalam design principles Android apps, Android memiliki template layout aplikasi yang sudah diikuti oleh sebagian besar aplikasi-aplikasi Android belakangan ini.

Nah, bagi Anda para Android developer, telah tersedia — kayak iklan aje, hehehe — beberapa open source library yang bisa kita gunakan untuk mempermudah pengembangan aplikasi kita agar mengikuti design principles itu. 

Di artikel ini saya hanya ingin berbagi mengenai 4 library yang saya gunakan untuk theming aplikasi Android.

1. ActionBarSherlock

Actionbarsherlock

Sampel Actionbarsherlock

Boleh dibilang inilah “a must have” library dalam suatu project Android. Library ini sudah sangat populer. Cukup banyak aplikasi populer di Play Store yang menggunakan library ini. Yang obvious menyebutkan menggunakan library ini dalam aplikasinya, salah satunya adalah aplikasi Otaku Camera. Yang lain misalnya, Foursquare dan GitHub.

ActionBarSherlock sebenarnya adalah extension dari native ActionBar-nya Android. Nah, dengan library ini kita akan dengan mudah membuat action bar untuk aplikasi kita. Kelebihannya, action bar tersebut akan kompatibel dengan berbagai versi Android (versi 2.x ke atas).

Kita dapat mengunduh library itu di sini. Di dalamnya ada project demo yang dapat kita pelajari dan menjadikanya sebagai referensi. Ada berbagai macam variasi penerapan action bar yang dicontohkan pada project demo tersebut. Thanks to Jack Wharton yang sudah mengembangkan library ini. 🙂

 

2. ViewPagerIndicator

Sample ViewPageIndicator

Sample ViewPageIndicator

ViewPagerIndicator sebenarnya merupakan extension dari ViewPager yang native-nya Android. Bedanya, dengan menggunakan library ini kita akan dengan mudah mengkustomisasi style atau theme dari top atau bottom bar yang akan kita buat.

Kita dapat mempelajari berbagai variasi penerapan ViewPagerIndicator ini dari project demo yang terdapat di dalamnya. Mulai dari tab view standar, tab view dengan kombinasi icon + title, dsb. Selain itu, untuk kasus di mana ada beberapa tab view yang mungkin akan tak tampak oleh user karena limitasi dari lebar screen, dapat diakali dengan meletakkan indicator baik berupa icon, garis, bulatan, dsb yang bisa kita kustom. Dengan ViewPagerIndicator ini juga fitur swipe untuk navigasi antar view langsung terimplementasi.

Beberapa aplikasi PlayStore yang menggunakan library ini di antaranya Beautiful Widgets, FriendCaster, TV Show Favs, dan SeriesGuide. Lagi-lagi, thanks to Jack Wharton yang sudah mengembangkan library ini. 🙂

 

3. Android Menu Drawer

Sample MenuDrawer

Sample MenuDrawer

Ingin membuat menu drawer seperti pada Facebook, Uber Social, atau Foursquare di Android? Library MenuDrawer karya Simon Vig Therkildsen ini boleh dicoba. Anda bisa mengunduhnya di GitHub, di sini.

Sebagai catatan, mungkin ada beberapa library menu drawer lain. Tapi hasil baca-baca di stack overflow, sepertinya inilah library paling direkomendasikan untuk membuat menu drawer. Ternyata lagi-lagi Jake Wharton juga ikut berkontribusi dalam mengembangkan library ini.

Sama seperti dua library yang disebutkan sebelumnya, di dalam project pada GitHub itu juga include project demo-nya. Kita bisa mempelajari variasi penggunaan library ini dari contoh-contoh yang ada.

 

 

 

4. PullToRefresh

Sampel PullToRefresh

Sampel PullToRefresh

Sebenarnya ini agak out of topic dengan topik dalam tulisan ini yang lebih menekankan library-library yang mempermudah kita dalam mengembangkan aplikasi Android yang sesuai dengan design guideline-nya Android. Tapi okelah, anggap saja ini sebagai bonus (emang apaan … kuis berhadiah kalee, hehehe). 😀

Para pengguna aplikasi Android tentu sudah familiar dengan action “pull to refresh”. Tulisan itu biasanya akan muncul ketika kita menarik suatu bidang view konten aplikasi — baik berupa list atau view biasa — hingga ke batas maksimum atau minimumnya. Setelah itu yang terjadi adalah aplikasi akan menge-load konten sebelum atau sesudah current content yang tengah ditampilkan.

Nah, untuk menambahkan fitur tersebut pada aplikasi, kita tak perlu membuatnya dari nol lagi karena sudah ada library yang membantu kita untuk mengimplementasikan itu. Sebagai catatan, library untuk pull to refresh itu mungkin ada banyak. Tapi sejauh ini yang sesuai dengan kebutuhan saya sehingga saya rekomendasikan di tulisan ini adalah library PullToRefresh karya Chris Banes. Anda bisa mengunduhnya di sini.

Salah satu fiturnya yang sesuai dengan kebutuhan saya adalah bisa pull to refresh dari kedua sisi, atas dan bawah. Selain itu, yang penting adalah tersedianya demo dan penjelasan mengenai bagaimana penggunaannya, sehingga mudah saya mengerti. View yang bisa di-pull to refresh tidak hanya ListView saja, tapi WebView, ScrollView, GridView, dsb. pun juga didukung dan diberikan contoh penggunaannya. Sayang, kekurangannya adalah hanya support Android untuk versi 2.3 ke atas.

Kesimpulan

Ada banyak sebenarnya library-library yang mempermudah kita dalam mengembangkan aplikasi Android yang sesuai dengan guideline. A must havelibrary yang akan sangat membantu adalah ActionBarSherlock.

Perlu dicatat, sebenarnya kita pun bisa mengimplementasikan action bar atau view pager native dari Android Support Library. Tapi dengan menggunakan ActionBarSherlock dan ViewPagerIndicator akan lebih mudah bagi kita untuk mengimplementasikannya. Keduanya adalah karya Jake Wharton.

Apabila ingin membuat menu aplikasi yang ‘tidak biasa’, seperti Facebook atau Uber Social dengan menu drawer-nya, sudah ada library yang tersedia untuk itu yang bisa kita manfaatkan, yaitu karya Simon Vig Therkildsen yang bisa diunduh di sini. Begitu pula fitur pull to refresh” untuk memperbaharui konten, juga telah tersedia library-nya, salah satunya adalah karya Chris Banes yang bisa diunduh di sini.

Anda punya rekomendasi library yang lain? Silakan share di sini. 🙂

Template Layout Aplikasi Android

Kalau Anda memperhatikan, beberapa aplikasi Android (yang non-game) sebenarnya memiliki kesamaan template layout. Beberapa di antaranya:

SuperSU

SuperSU

Runkeeper

Runkeeper

Quora

Quora

Tweetcaster

Tweetcaster

Google PlayStore

Google PlayStore

Path

Path

Foursquare

Foursquare

Facebook

Facebook

Gmail

Gmail

Toresto

Toresto

—————————————————————————————————————

Hmm… coba tebak apa persamaan dari layout aplikasi-aplikasi di atas? 😀

Bagi yang pernah mengembangkan aplikasi Android (atau mungkin juga aplikasi mobile lainnya) tentu akan paham. Pada layout aplikasi-aplikasi tersebut terdapat adanya pengelompokan yang jelas antara action button dan view control.

Di design principles yang ditulis Google di dokumentasi pengembangan aplikasi Android di http://developer.android.com/design/patterns/actionbar.html juga sudah digambarkan secara mendetail bagaimana ‘seharusnya’ layout suatu aplikasi Android didesain. Yak, mengutip dari link tersebut, kurang lebih secara umum bisa dijelaskan seperti ini:

Layout aplikasi

Layout aplikasi (sumber: developer.android.com)

  1. Main Action Bar 

Kalau di web mungkin bisa dibayangkan seperti header. Umumnya di align kiri terdapat icon dan nama aplikasi. Lalu di align kanan terdapat item-item action menu.

  1. Top Bar

Biasanya berupa view controls atau navigation bar. Fungsinya adalah memudahkan user untuk berpindah antar halaman view

Varian bentuknya cukup banyak. Aplikasi-aplikasi di atas selain Google PlayStore, Facebook, dan Foursquare adalah contoh bentuk fixed tabs. Semua tab langsung terlihat dalam satu layar. 

Sedangkan PlayStore sendiri menggunakan scrollable tabs. Tidak semua tab view ditampilkan dalam satu layar. Untuk melihat tab-tab yang lain, kita perlu men-swipe layar ke kiri atau ke kanan.

Facebook dan Foursquare adalah contoh aplikasi yang menggunakan bentuk drawers. Memang secara eksplisit sangat berbeda ‘penampakan’-nya dengan top bar pada aplikasi standar. Action button untuk menampilkan drawers itu biasanya berupa icon berbentuk strip 3 horizontal menggantikan icon atau nama aplikasi di bagian kiri action bar.

  1. Bottom Bar

Fungsinya persis dengan top bar. Bedanya tentu adalah letaknya di dalam aplikasi itu. Pada gambar aplikas-aplikasi di atas, Toresto dan  Gmail adalah salah satu yang menggunakan bottom bar tersebut.

Sejauh ini rasanya aku belum pernah menemui sebuah aplikasi yang bersamaan menggunakan top dan bottom bar. Selain karena kegunaannya yang sama, juga karena pertimbangan space yang tersedia untuk konten menjadi berkurang ketika keduanya muncul bersamaan.

—————————————————————————————————————

Untuk mengetahui lebih detail design principle dalam membangun aplikasi Android, bisa baca-baca di http://developer.android.com/design/index.html. Nah, untuk tulisan berikutnya aku akan mencoba membagi pengetahuan mengenai apa saja library yang bisa kita manfaatkan untuk memudahkan pekerjaan kita dalam membangun aplikasi Android yang sesuai dengan guideline tersebut. Because sharing is caring. 🙂

Ikutan #GDG #DevFestBDG

Hari Sabtu yang lalu, 6 Oktober 2012, aku mengikuti acara Google Developer Group (GDG) DevFest Bandung yang bertempat di Hotel The Luxton, Dago-Bandung. Sebagaimana dilaporkan oleh blog GDG Bandung, acara ini diikuti oleh sekitar 140 orang peserta. Namun, aku agak heran juga sih, dari sekian jumlah itu — di luar panitia — hanya sedikit mahasiswa/alumni ITB yang mengikuti acara itu. Selain aku, ada satu orang lagi anak STI ’09 yang ikutan.

Yang pasti yang nggak ikutan akan menyesal. Soalnya tempatnya cozy lux banget. Ada coffee break dan makan siang prasmanan khas hotel berbintang, serta dapat goodies kaos dan sticker, hehehe.

Tapi bukan karena itu juga kali motivasi untuk datang ke sini. Topik-topik yang ditawarkan di acara ini menurutku cukup menarik. Ada tentang project butter Android Jelly Beans, tips membangun aplikasi Android, membangun aplikasi dengan HTML5, menggunakan Canvas di HTML5, membangun aplikasi artificial intelligence sederhana, dan perkenalan beberapa electronic frameworks.

Presentation by Tony Chan

Presentation by Tony Chan (src: foto panitia)

Dari sekian pembicara yang berkesempatan sharing knowledge pada hari itu, materi yang disampaikan oleh Tony Chan (Google Android Dev. Advocate) adalah yang paling menarik bagiku. Di sesi pertama dia menjelaskan mengenai project butter yang digunakan di Android 4.1 (Jelly Beans).Perubahan-perubahan apa saja yang terdapat pada Jelly Beans dibandingkan OS terdahulunya. Bagaimana strategi yang digunakan para engineer OS Android di sana untuk membuat proses display menjadi lebih smooth. Bagaimana fitur notifikasi di Jelly Beans sekarang lebih fleksibel dan sebagainya.

Di sesi kedua Tony menjelaskan mengenai tips-tips dalam membuat aplikasi Android, terutama dari segi desain atau layout. Materi ini sebenarnya sangat menarik dan berguna sekali bagi developer. Karena dengan mengetahui tips-tips tersebut, para developer akan mengetahui bagaimana aplikasi yang dipandang menarik oleh user. Sayang sekali, waktu untuk sesi kedua ini benar-benar terbatas sekali. 😦

Kang Imaduddin

Kang Imaduddin menyampaikan materi HTML5

Materi lain seperti HTML5 juga cukup menarik. Memberikan pandangan kepadaku mengenai pros n cons membangun aplikasi dengan HTML5, dibandingkan dengan native, dan juga hybrid. Terus terang HTML5 ini adalah hal yang baru bagiku. Aku belum banyak mengoprek di sana. Hmm … jadi tertarik untuk mempelajari lebih dalam HTML5. Terutama fitur canvas-nya yang pada pertemuan kemarin banyak sekali demo yang diperlihatkan tentangnya.

Sementara itu materi dari Pak Peb — oh ya, aku nggak nyangka kalau Pak Peb mengisi juga di acara ini — sebelumnya asa sudah pernah dapat. Kalau tidak salah, di acara Phyton Meet Up beberapa bulan yang lalu di kampus ITB. Tapi tidak pernah ada kata rugi atau bosan untuk mendengarkan materi yang sama untuk kedua kalinya. Karena biasanya yang kedua, (seharusnya) jadi lebih mengerti, hehehe.

Materi terakhir mengenai electronic frameworks. Itu merupakan materi yang benar-benar baru bagiku karena selama berkuliah di Informatika, tidak pernah bersentuhan dengan itu. Sayangnya kebanyakan framework tersebut berbayar euy. Mudah-mudahan ada waktu untuk mengoprek framework-framework itu. Seru juga sepertinya ‘bermain-main’ dengan electronic frameworks itu.

Alhamdulillah, puaslah ikutan acara kemarin. Selain dapat makanan gratis (banyak lagi, hihihi), kaos gratis, tapi yang paling penting nih … juga dapat banyak knowledge baru. 😀

Foto bersama seusai acara

Foto bersama seusai acara (src: foto panitia)

Menjajal Windows 8

 

Homscreen Windows 8

Homscreen Windows 8

 

Akhirnya kesampaian juga mencoba sistem operasi teranyar Microsoft, yakni Windows 8. Memang sih, masih versi release preview, tapi secara garis besar tak akan ada banyak perubahan dengan versi RTM yang akan dirilis Oktober nanti.

Dari segi tampilan, aku sangat suka dengan penampilan baru OS Windows yang kali ini mengusung tema Metro. So simple, so clean, so fresh. Memang sih sebagian orang bilang, “Apanya sih yang bagus, cuma kotak-kotak gitu.” Tapi entahlah, bagiku enak saja melihatnya.

Cukup salut juga dengan Microsoft yang cukup berani merilis OS baru dengan user experience yang benar-benar berbeda dari sebelumnya. Tanggapan user aku yakin tak sedikit pula yang negatif. Kini tinggal mencoba bagaimana kompatibilitas aplikasi-aplikasi yang biasanya kugunakan bila dipasang di Windows 8 ini.

Bagi yang ingin mencoba Windows 8 Release Preview ini, bisa mengunduhnya di sini. Oh ya, aku baru tahu kalau ternyata Windows 8 (dan ternyata Windows 7 pula) bisa di-install via USB. Selama ini yang kutahu baru Ubuntu saja yang bisa seperti itu.

Fitur Plot Mathematical Function di Google Search Engine

Tengah-tengah malam begini ketika sedang online Twitter, tiba-tiba ada satu tweet dari akun official-nya Google yang mengabarkan fitur baru yang dirilisnya, yakni plot mathematical function. Yap, dengan fitur ini, kita dapat memasukkan suatu persamaan matematika ke dalam kotak pencarian. Kemudian Google pun akan melakukan pencarian dengan kata kunci persamaan tersebut serta menampilkan gambar plot persamaan atau fungsi tersebut dalam sebuah bidang koordinat.

Asyik nggak tuh? Belajar kalkulus pun menjadi lebih mudah dan tentunya menyenangkan. Coba dari dulu ketika aku masih berjibaku di TPB (Tahap Persiapan Bersama) alias tahun pertama kuliah di ITB. Ketika zaman pusing-pusingnya belajar kalkulus. Zaman di mana ketiduran di kelas gara-gara sudah nggak kuat lagi mikir konsep-konsep kalkulus menjadi pemandangan yang biasa kita lihat saat kuliah. 😀

Btw, masih ada yang nyantol nggak ya kuliah kalkulus yang dipelajari dulu? 😀

Persamaan lingkaran

Persamaan lingkaran

persamaan-persamaan kalkulus

persamaan-persamaan kalkulus

 

 

Upgrade G5 ke CyanogenMod 7.1 v1.7.1 Gingerbread

Lama nggak ngupdate ROM HP G5 (Galaxy I5500) milikku. ROM terakhir yang kugunakan adalah Froyo (Android versi 2.2) dengan code name CM 2.0.9 final buatan MAD Team. Setelah itu aku sudah nggak mengikuti update-an berikut-berikutnya lagi karena kesibukan tugas akhir kala itu.

Nah, kemudian muncullah ROM-ROM Gingerbread dari MAD Team dengan code name CyanogenMod 7.x. Tetapi saat itu baca review-review yang ada, katanya masih banyak bug. Akhirnya niat untuk mengupgrade ke Gingerbread terpaksa diurungkan dahulu menunggu versi yang lebih stabilnya.

Beberapa hari yang lalu saat berkunjung ke situsnya MAD Team, ternyata ada berita baru: “New Release: CyanogenMod 7.1 [v 1.7.1] for G5”! Pada versi terbaru ini bug-bug terdahulu yang pernah ditemui seperti pada bluetooth, wifi, dsb sekarang sudah diperbaiki. Aku pun jadi tertarik untuk mencobanya.

Enaknya, di situs MAD Team itu sudah tersedia artikel yang menjelaskan secara runtut dan lengkap (disertai screenshots) langkah-langkah instalasi ROM CyanogenMod 7 ini. User guide itu sudah cukup jelas dan mudah dimengerti, bahkan oleh orang yang baru pertama kali (newbie) melakukan flashing CyanogenMod 7 seperti aku ini. Instalasinya tidak butuh waktu lama. Paling-paling sekitar 10 menit. File-file yang dibutuhkan juga sudah diberikan linknya pada artikel itu dan kita tinggal download saja..

Kesan pertama yang aku dapat saat menjajal CyanogenMod 7 v1.7.1 ini adalah: fresh! Themes dan animasi bawaannya bener-bener cakep dan segar, beda dengan yang sebelum-sebelumnya — aku sebelumnya pernah menggunakan Eclair bawaan Samsung dan Froyo buatan MAD Team. Locked style yang biasanya berupa sliding touch tombol di kiri dan kanan, sekarang ada pilihan variasi lainnya.

Tapi sayangnya, accelerator-nya terasa agak laggy. Hal ini sudah dikonfirmasi di artikel yang diterbitkan MAD Team itu dan akan segera diberikan update-an berikutnya (hotfix). Aku juga sebenarnya penasaran sama wifi-nya, bisa jalan dengan baik atau tidak. Mungkin besok mau ngetes di kantor saja. Namun, kalau kita mengecek performanya dengan quadrant advanced, ternyata system performance-nya jauh di atas performa gadget yang lainnya :D.

Ini enaknya pakai HP Android, bisa nyoba-nyoba ROM yang ada sesuka kita. Enaknya lagi, ada developer (MAD Team) yang concern dalam pengembangan ROM untuk Samsung G5 ini :

Quadrant Advanced CM 7 v 1.7.1

Performa CM 7 v 1.7.1

screenshot home

screenshot home

screenshot dalam keadaan locked

screenshot saat locked

screenshot menu

screenshot menu

Auto Increment Integer di MySQL

Ada yang menarik pada rule auto increment di basis data MySQL. Misalkan kita membuat field user_id dengan tipe data integer lalu kita set auto increment. Jika kita alpa atau sengaja tidak mengisi value user_id saat meng-insert row baru, secara otomatis value user_id akan diisi dengan increment dari angka tertinggi yang ada di field tersebut. Kalau hal ini, kita semua pasti sudah tahu.

Nah, bagaimana jika saya ingin memasukkan user_id dengan nilai 0 (zero)? Apabila saya memasukkan nilai 0, nilai saya itu akan langsung diganti dengan nilai increment dari angka tertinggi. Gagal deh membuat user_id 0. Lalu, saya coba lagi dengan memasukkan user_id dengan nilai -1 — harapannya agar di-increment menjadi 0, eh gagal juga. Nilai tetap -1. Ternyata semua nilai integer negatif yang kita insert tidak di-auto increment. Nilai integer negatif itu akan bertahan apa adanya. Akhirnya, iseng-iseng mencoba memasukkan nilai NULL untuk field user_id saat meng-insert user yang baru. Ternyata nilai NULL itu diubah (atau di-auto increment?) menjadi nilai 0. Hmm… baru tahu saya. :mrgreen: