bahasa

Catatan Teknis – Baby Coloring Book

Setiap kali saya membuat aplikasi dengan teknologi yang baru, biasanya saya mendapati banyak tantangan teknis. Dalam konteks ini “baru” bisa berarti teknologinya benar-benar baru, atau saya yang baru saja mengenal teknologi tersebut. Kali ini saya ingin membahas mengenai aplikasi saya di appworld, Baby Coloring Book.

Ide dari aplikasi ini sangat sederhana: buku mewarnai untuk bayi (terutama di bawah 3 tahun), hanya perlu menyentuh saja untuk mewarnai, tidak perlu menggosok-gosok seperti memakai krayon. Jika saya menggunakan teknologi lain untuk membuat ini (misalnya flash atau C++), saya akan menggunakan pendekatan sederhana: buat gambar tidak berwarna, gunakan flood fill untuk mengisi area. Tapi saya menggunakan HTML5 untuk membuat aplikasi ini. Alasan utamanya adalah untuk belajar mengenal lebih jauh HTML5. Saya tidak menggunakan library selain selain JQuery.

Contoh Gambar

Di Stack Overflow sudah ada yang menjawab bagaimana mengimplementasikan flood fill dengan JavaScript menggunakan Canvas:

How can I perform flood fill with HTML Canvas?

Jadi saya coba itu di PC menggunakan browser Google Chrome. Manipulasi piksel di Google Chrome sangat cepat, tapi saya melihat ada sedikit delay. Saya langsung curiga: jangan-jangan jika saya coba di PlayBook akan sangat lambat. Ternyata benar: sangat lambat.

Ada beberapa pendekatan yang terpikir oleh saya supaya aplikasi ini bisa dibuat dengan HTML5 tapi tetap cepat, tapi saya memiliki beberapa requirement:

Saya tidak ingin “membatik” mendefinisikan setiap area gambar yang bisa diwarnai. Jika saya punya gambar, saya ingin langsung bisa memakai gambar itu tanpa edit manual. Dengan pendekatan flood fill, algoritma tersebut bisa otomatis mewarnai sebuah area yang dibatasi pixel tertentu (seperti mewarnai dengan “ember” di Ms Paint).
Saya ingin bisa membuat gambar yang warnanya seperti diwarnai dengan krayon, jadi tidak polos.

Lanjutkan membaca Catatan Teknis – Baby Coloring Book

HTML5 Saat Ini

Akhir-akhir ini di waktu luang, saya sedang senang ngoprek HTML5. Kesimpulan sementara saat ini: HTML5 belum bisa memenuhi semua yang dijanjikannya terutama dalam hal portabilitas dan kecepatan. Sekarang ini lebih sering teknologi lain (misalnya Flash atau kode native) lebih cocok.

Tulisan ini berdasarkan pengalaman saya dan berlaku saat ini. Saya sendiri sudah mulai mengembangkan aplikasi dengan HTML5, bahkan sudah dijual di AppWorld (http://appworld.blackberry.com/webstore/vendor/9151/?lang=en, yang dibuat dengan HTML5 adalah MultiCounter, Four Colors, dan Baby Coloring Book), dan saya berharap dalam beberapa tahun ke depan HTML5 akan semakin baik.

HTML5 didengungkan sebagai sesuatu yang mudah, cepat dan portabel. Dalam kenyataannya, jika aplikasi kita sederhana (hanya memakai sebagian kecil fitur HTML5), maka hal itu benar, tapi jika aplikasi kita sudah mulai kompleks, maka hal-hal tersebut tidak lagi benar.

Lanjutkan membaca HTML5 Saat Ini

Catatan pengalaman development webworks untuk PlayBook

Sudah lama tidak posting dan belum semangat meneruskan tutorial manipulasi bit. Jadi untuk kali ini, saya akan cerita mengenai oprekan saya saat ini: memprogram playbook dengan webworkd (html5/javascript).

Saya ingat waktu pertama kali memprogram dalam bahasa BASIC, hal yang terpikir oleh saya adalah FUN. Menyenangkan sekali memprogram dengan BASIC, tidak perlu persiapan apa-apa, bisa langsung memprogram dan menjalankan programnya. Sekarang ini setiap kali memprogram sesuatu yang baru, rasanya ribet sekali, misalnya untuk memprogram Webworks Playbook: SDK harus diinstall (yang butuh AdobeAir SDK), signing key perlu disiapkan (walau cuma perlu sekali), Path perlu diset (supaya tidak perlu mengetik panjang), perlu tahu IP device, perlu mengaktifkan development mode, mengeset password, dsb. Walaupun cukup rumit, tapi sebenarnya webworks ini masih lebih sederhana dibandingkan aplikasi Adobe Air yang saya buat untuk playbook (LocalBar) yang memakai native extension dalam C++.

Untungnya setelah melewati semua langkah-langkah tersebut, sekarang saya bisa memprogram webworks dengan cukup nyaman. Bahkan ternyata setelah mengetahui langkah-langkahnya, itu bisa diulangi dengan cepat. Ketika saya sedang berlibur seperti ini, saya bisa mensetup development environment di pc adik saya dengan sangat cepat.

Memprogram dengan webworks ini cukup “fun”. Saya cuma perlu membuat file HTML dan Javascript, lalu saya test di komputer dengan Google Chrome. Library seperti jquery juga bisa saya gunakan.

Di PC development bisa dilakukan dengan cepat. Setelah semua algoritma selesai, halaman html yang sama tinggal dibuka dengan menggunakan browser playbook.
Browser playbook memiliki “Web Inspector” yang memungkinkan kita mendebug JavaScript di browser playbook menggunakan *browser* di desktop kita (ya benar, debuggernya diakses via *browser*).

Setelah itu saya bisa mensetup app “kosong” yang jika dibuka akan mengambil konten dari URL yang disediakan. Dengan cara ini, jika ada perubahan kode maka tidak perlu mempackage ulang file bar. Aplikasi juga bisa di debug tanpa tool khusus.

Baru setelah semua selesai, saya mempackage semua file menjadi sebuah file bar dan siap dikirimkan ke appworld.

Secara umum, development dengan webworks ini sangat mudah dan fun. Selain bagian packaging, semua development dan debugging bisa dilakukan dengan editor teks biasa dan web browser.

Manipulasi bit bagian 3: bit shift

Di bagian ini saya akan menunjukkan apa artinya menggeser bit ke kiri dan ke kanan. Waktu saya belajar konversi biner, saya mendapati bahwa cara paling mudah bagi saya dalam konversi desimal dan biner adalah dengan membayangkan “tabel” seperti ini:

128

Misalnya saya ingin mengkonversi 1001 menjadi desimal, maka saya letakkan angka 1001 tersebut di bawah tabel:

128	64	32	16	8	4	2	1
				1	0	0	1

Kita lihat bit mana saja yang nilainya satu, lalu lihat angka di atas, dalam hal ini 8 dan 1, jika dijumlahkan, hasilnya adalah 9. Jadi 1001 biner = 9 desimal.

Dengan melihat tabel seperti itu, bisa kita bayangkan apa yang terjadi jika bit-bit biner semua digeser ke kiri satu posisi. Karena di geser satu posisi, maka kita menambahkan satu digit 0 di sebelah kanan, jadi 10010.

128	64	32	16	8	4	2	1
			1	0	0	1	0

Nilainya sekarang menjadi 16 + 2 = 18 atau dua kali 9. Cara lain untuk memahami ini adalah dalam desimal (basis 10), jika kita menambahkan 0 di kanan maka nilainya menjadi 10 kali lipat, misalnya 18 menjadi 180 menjadi 1800. Demikian juga dalam biner, jika kita menggeser bit ke kiri, artinya kita menambahkan digit 0 di kanan, dan nilainya menjadi dua kalinya.

Proses di atas bisa diulangi berkali-kali. Dan proses tersebut tentunya bisa dibalik, menggeser ke kanan, dalam desimal, jika kita potong satu digit terakhir, maka nilainya akan menjadi sepersepuluhnya, misalnya 180 menjadi 18. Atau tepatnya, sepersepuluh dengan pembulatan ke bawah, karena jika kita buang angka 5 dari 185 hasilnya adalah 18. Dalam notasi biner, jika kita geser ke kanan, maka nilainya akan menjadi setengahnya (juga dengan pembulatan ke bawah).

Jadi apa kegunaan bit shifting? Salah satu kegunaannya adalah untuk perkalian dan pembagian dengan dua. Kegunaan lainnya adalah untuk ekstraksi bit (mengambil bagian bit tertentu). Mengenai ekstraksi bit, akan saya bahas di bagian berikutnya.

Manipulasi bit bagian 1: representasi biner

Kemarin buku yang saya tunggu-tunggu akhirnya tiba juga: The Art of Computer Programming, Volumes 1-4A Boxed Set (Box Set). Dulu waktu kuliah, saya sudah membaca sebagian buku ini, tapi buku ini berat di matematika, jadi kebanyakan saya hanya membaca bagian algoritmanya saja, sambil mencoba-coba sedikit latihannya. Terinspirasi dari banyak programmer di buku Coders at work yang menyukai buku ini, dan minimal memakai buku ini sebagai referensi, maka saya sekarang berusaha membaca ulang koleksi buku Knuth, plus membaca volume yang baru: Volume 4a.

Sebagai catatan: dalam wawancara Knuth sendiri tidak menyarankan seseorang membaca buku ini dari sampul ke sampul sampai habis. Saya membaca buku ini pertama skimming dulu, mencari topik menarik, setelah itu baru saya baca teliti bagian-bagian yang saya perlukan. Jadi jika Anda merasa berat membaca buku ini: coba langsung skip ke bagian yang menarik.
Lanjutkan membaca Manipulasi bit bagian 1: representasi biner

Mengenal berbagai bahasa

Anda mungkin sering membaca di berbagai buku, kalimat-kalimat semacam ini: “Prolog itu bagus untuk Artificial Intelligence”, “LISP bagus untuk AI”, “Fortran bagus untuk aplikasi numerik”, “C bagus untuk pemrograman sistem”. Tapi biasanya penulisnya tidak mendeskripsikan lebih lanjut apa maksud dari kalimat-kalimat tersebut, dan apa contohnya. Bukankah semua bahasa yang turing complete itu sama saja?. Setelah lulus dari kuliah pun, banyak yang masih belum tahu: apakah pernyataan-pernyataan tersebut benar? kalau salah, yang benar seperti apa? apa contoh aplikasi di mana memprogram dengan Lisp/Prolog/Fortan akan lebih mudah atau lebih baik dari memprogram dengan bahasa lain?

Screenshot_2016-06-11-11-19-27

Ketika orang diperkenalkan pada suatu bahasa, kebanyakan caranya adalah melalui pengenalan sintaks, lalu kemudian membuat aplikasi kecil dalam bahasa tersebut. Jika Anda belajar bahasa yang paradigmanya sama atau mirip, cara ini memang akan berhasil, tapi tidak jika paradigmanya berbeda. Saya contohkan sedikit mengenai Lisp. Kebanyakan orang akan belajar mengenai apa itu atom, apa itu list, lalu operasi terhadap atom dan list (car, cdr, cons, list, dsb). Setelah itu kebanyakan akan membuat program manipulasi list sederhana. Di titik ini sebagian orang akan bertanya: di mana bagusnya Lisp, bagian mana yang membuat ini cocok untuk aplikasi AI?
Lanjutkan membaca Mengenal berbagai bahasa

Tools untuk debugging

Di posting ini saya sekedar ingin sharing metode dan tools yang biasa saya pakai untuk debugging program. Di lingkungan yang ideal, kita seharusnya punya debugger yang canggih, cepat dan reliable, tapi sayangnya sering kali ini tidak tersedia. Ini contoh beberapa lingkungan pengembangan yang “mengesalkan” yang pernah saya jumpai:

Symbian versi awal (versi 6): untuk bisa mendebug, perlu IDE khusus dengan license khusus yang mahal. Symbian versi terbaru sudah semakin baik (tapi sekarang ini Symbian sudah akan berakhir).
BlackBerry: startup time debugger sangat lama, dan debugger sering error. Setiap kali menginstall versi program baru di BlackBerry, perlu restart (butuh sekitar 5 menit tiap kali restart).
Mendebug aplikasi Android di emulator. Startup emulator sangat lambat (bahkan di processor AMD quad core 3 ghz memori 16 GB) , lebih cepat mencoba langsung di HP. Masalahnya adalah ketika ada laporan: ada bug kecil di Android versi 2.2, tapi HP saya memakai Android 2.3
Debugging PHP di web hosting. Kadang ada masalah yang hanya muncul di web hosting, tapi tidak muncul ketika dicoba di server sendiri. Beberapa kemungkinan adalah karena versi PHP yang tidak sama, versi library yang tidak sama. Di server sendiri bisa mudah menginstall Xdebug, tapi tidak tersedia di tempat hosting.
Nurit Point Of Sales. Device ini banyak bugnya, tidak tersedia debugger, dan jika crash, akan memprint isi memori di atas kertas thermal sekitar 1/2 meter.
Kernel FreeBSD. Ketika porting tahap awal, sangat sulit mendebug apa yang terjadi di level CPU. Masalahnya karena saya tidak menggunakan development board yang memiliki JTAG.

Sebenarnya tidak semua lingkungan itu benar-benar mengesalkan jika kita punya uang, contohnya: jika saya punya uang beberapa ribu dollar, saya akan bisa mendebug Symbian dengan mudah. Jika saya punya beberapa HP Android berbagai versi, debugging Android juga lebih mudah. Jika saya punya development board resmi dengan JTAG, porting kernel akan lebih mudah. Jika saya hosting VPS dengan versi PHP saya sendiri, maka tidak akan ada masalah dengan PHP, dan andaikan ada masalah, saya bisa menginstall XDebug. Pada kenyataannya seringkali tidak tersedia dana untuk menyelesaikan berbagai masalah tersebut.
Lanjutkan membaca Tools untuk debugging

Cara Belajar Algoritma

Beberapa pembaca blog ini menanyakan “bagaimana sih caranya belajar algoritma?”. Daripada saya harus menjelaskan ulang berkali-kali, akan saya coba tuliskan di sini. Pertama perlu diingat bahwa cara belajar setiap orang berbeda-beda, jadi cara yang saya sebutkan mungkin tidak berlaku 100% bagi Anda. Misalnya jka Anda penyuka matematika, Anda bisa mempelajari aspek matematis algoritma, tapi dalam tulisan ini saya asumsikan bahwa anda bukan matematikawan.

Cara yang paling baik dalam memahami algoritma adalah dengan berlatih. Di tahap ini orang akan mulai bertanya: saya harus latihan apa? Cobalah berlatih membuat struktur data dasar, misalnya tree, atau linked list.

Ada banyak algoritma dasar yang bisa dipelajari dari sebuah struktur data, misalnya cobalah membuat binary tree. Pertama Anda bisa mencoba melihat buku, tapi setelah itu cobalah dengan menggunakan logika sendiri. Beberapa hal dasar dalam membuat binary tree: menyisipkan elemen tree, menghitung jumlah node daun (leaf node/node yang tidak punya anak), menghapus node, melakukan traversal, dsb. Lalu kemudian Anda bisa membuat pohon biner terurut. Setelah itu Anda bisa mencoba mengaplikasikan pohon biner itu pada masalah nyata, misalnya membuat kompresi dengan algoritma hufman.
Lanjutkan membaca Cara Belajar Algoritma

Kurikulum Pemrograman

Tujuan pengajaran universitas adalah mengajarkan secara umum sebuah ilmu. Setelah itu masing-masing bisa mengambil bidang spesifik. Semua dokter yang Anda tahu (baik umum maupun spesialis) telah mendapatkan ilmu dasar mengenai tubuh manusia, pertolongan pertama. Meskipun sebagian besar dokter ini tidak akan pernah membedah dalam hidupnya, mereka pasti diajari juga ilmu dasarnya.
Saat ini banyak kurikulum pemrograman yang dibuat untuk mengikuti tren terbaru. Sayangnya tren ini bisa cepat sekali berlalu, dan kadang baru disadari kemudian betapa jeleknya tren sebelumnya (misalnya Microsoft yang menyadari Visual Basic merupakan bahasa yang tidak scalable, tidak cocok untuk enterprise). Di posting ini saya akan menceritakan kurikulum yang dulu saya alami ketika belajar pemrograman di ITB. Sayangnya saat ini kurikulumnya sudah berubah, tapi saya tetap ingin menunjukkan di sini, kira-kira kurikulum yang baik itu seperti apa.

Ketika saya belajar pemrograman di ITB, kurikulumnya dimulai dengan dasar pemrograman. Dalam dasar pemrograman kami diajari LISP. LISP merupakan bahasa dengan paradigma fungsional. Tidak semua aspek LISP diajarkan (misalnya do-loop yang sifatnya imperatif). Ketika belajar LISP, fokusnya adalah memanipulasi struktur data (list, tree) secara rekursif dan mengenai stateless programming.

Lanjutkan membaca Kurikulum Pemrograman

System programming

Banyak orang yang terkesima dengan orang yang memprogram di level kernel sistem operasi; banyak juga yang menganggap wilayah kompilasi atau interpretasi itu sesuatu yang rumit, dan sebaiknya diterima saja, tidak perlu dipelajari.

Sebagian orang bersifat tidak mau tahu. Misalnya ada yang bilang: mengapa belajar assembly atau C/C++, bahasanya nggak dipakai, mendingan belajar PHP, Ruby, Java atau .NET. Orang-orang tersebut tidak menyadari bahwa compiler dan atau runtime bahasa-bahasa tersebut dibuat dengan C dan C++. Sebagian besar library yang dipakai di berbagai bahasa juga diimplementasikan di C/C++.

Sebagian kemampuan prosessor juga tidak akan bisa dimanfaatkan secara maksimal oleh bahasa tingkat tinggi, tanpa bantuin assembly dan atau C/C++. Contoh terbaru adalah instruksi-instruksi STTNI (String & Text New Instructions) yang diperkernalkan di prosessor baru Intel dengan arsitektur Nehalem untuk mempercepat pemrosesan teks (dan parsing XML) tidak akan bisa dilakukan.

Bahkan jika Anda tidak memprogram dalam bahasa C sekalipun, pengetahuan tersebut bisa berguna, misalnya Anda bisa mengoptimasi penggunaan memori dan mengoptimasi kecepatan di PHP. Lihat juga posting saya mengenai Kritik PHP.

Sekarang pertanyaan berikutnya yang mungkin muncul adalah: bagaimana saya belajar pemrograman sistem?

System programming adalah aktivitas pembuatan software sistem. Ini cakupannya luas, dari mulai kernel sistem operasi, sampai compiler, dan aneka utility level sistem.

Lanjutkan membaca