Untuk mereka yang putus asa mau jadi programmer

Sudah beberapa kali saya temukan di berbagai forum dan mailing list, orang-orang yang bertanya: kenapa program saya ini tidak jalan, dan kemudian mereka mempaste source code mereka. Biasanya saya akan menemukan kesalahan-kesalahan super fatal, mulai dari:

  1. Salah syntax
  2. Salah besar-kecil huruf di bahasa yang case sensitive (misalnya C)
  3. Salah logika

Saya bisa memahami bahwa orang-orang ini mungkin:

  1. Salah memilih jurusan Informatika/Ilmu komputer, atau
  2. Terpaksa mengambil kuliah pemrograman karena ini mata kuliah wajib meski jurusannya tidak langsung berhubungan dengan pemrograman
20160409_113910 (1)

Untuk orang-orang dalam kategori pertama: sudah saatnya Anda memperbaiki cara belajar Anda, atau segeralah pindah jurusan. Jika Anda kesulitan mencari kerja karena Anda tidak bisa memprogram, itu murni kesalahan Anda.

Lanjutkan membaca Untuk mereka yang putus asa mau jadi programmer

Single Board Computer dan Single Board Microcontroller

Belajar embedded system merupakan cara yang baik untuk lebih mengenal arsitektur komputer. Di PC/Tablet/Smartphone, ada begitu banyak “layer” yang mempersulit pemahaman kita tentang hardware, tapi di embedded system, kita bisa langsung berinteraksi dengan hardware, bahkan tanpa menggunakan sistem operasi sama sekali.

Saat ini ada dua jalur populer untuk belajar embedded system: menggunakan single board computer (misalnya: Raspberry Pi, BeagleBoard, BeagleBone Black, Cubie Board, RadXa, dsb), atau menggunakan single board microcontroller (misalnya: berbagai versi Arduino, Parallax Propeller, LaunchPad MSP430, dsb).  Singkatan SBC untuk single board computer sudah lazim digunakan, tapi single board microcontroller  biasanya tidak disingkat, tapi supaya artikel ini ringkas, akan saya singkat saja sebagai SBM.

Perlu diperhatikan bahwa saya menekankan pada kata populer, Anda tidak harus menggunakan SBM atau SBC untuk belajar embedded system, tapi keduanya akan membuat proses belajar menjadi lebih mudah.

Banyak pemula merasa bingung memilih dan membedakan fungsi keduanya. Jika Anda melihat berbagai proyek elektronik di Internet, sepertinya fungsi dan kemampuan keduanya hampir sama.   Untuk lebih jelasnya, saya akan membahas keduanya.

Lanjutkan membaca Single Board Computer dan Single Board Microcontroller

Safari Books Online + Review Buku

Saya sekedar mau sharing layanan Safari Books Online (ini saya nggak dibayar, nggak dapet referal atau apapun). Layanan ini semacam perpustakaan di mana kita bisa meminjam buku selama menjadi member.

Paket termurahnya 9.99 USD/bulan, kita mendapatkan 5 slot buku yang bisa kita baca penuh. Setelah memasukkan sebuah buku ke dalam sebuah slot, bukunya hanya bisa dikeluarkan 30 hari kemudian. Kita bisa membaca bukunya offline menggunakan aplikasi yang mereka sediakan (untuk iOS/Android/BlackBerry). Mereka juga menyediakan trial 15 hari (tapi kita harus memberikan nomor kartu kredit).

Bagi sebagian orang, layanan ini tidak cocok, karena mereka ingin terus memiliki satu buku untuk dibaca ulang, tapi bagi saya yang jarang membaca ulang sebuah buku (kalau ada bagian penting, bisa saya copy paste), layanan ini sangat cocok.

Kenapa saya mau sharing hal tersebut? Harga sebuah buku asli sangat mahal, bahkan versi ebooknya sekalipun. Contohnya buku SDN: Software Defined Network harganya 47.99 (menurut kurs saat ini: lebih dari 500 ribu rupiah). Buku tersebut bisa dibaca sebagai satu slot dalam pakt 9.99 USD per bulan. Saya ingin hidup legal, tapi juga belum mampu membeli segala sesuatu yang saya inginkan.

Lanjutkan membaca Safari Books Online + Review Buku

Jangan Fanatik Teknologi Tertentu

Setiap waktu, selalu ada orang yang fanatik menggunakan teknologi tertentu untuk menyelesaikan semua masalah. Karena ini blog “Cinta Programming”, pembahasannya tentunya adalah teknologi pemrograman. Lebih spesifiknya lagi: bahasa tertentu. Sekarang ini aplikasi web sedang sangat populer, dan orang-orang pun ingin memanfaatkan 100% teknologi HTML dan JavaScript untuk melakukan semua hal. Bahkan bukan cuma aplikasi web, tapi aplikasi desktop dan mobile.

Screenshot_2016-06-07-19-19-09

Saya hanya ingin menunjukkan bahwa kadang tidak semuanya bisa dilakukan oleh satu teknologi seratus persen. Seperti Anda lihat di posting-posting sebelumnya, saya sudah membuat beberapa aplikasi dengan HTML5 (dan bahkan sudah ada yang saya jual), tapi meski demikian saya masih sering “gemes” dengan orang yang terpaku pada HTML dan JS dan menganggap itu teknologi terbaik untuk semua hal (termasuk juga aplikasi mobile).

Lanjutkan membaca Jangan Fanatik Teknologi Tertentu

Sencha Touch di PlayBook

Ini catatan teknis mempackage aplikasi Sencha Touch menjadi file .bar PlayBook. Pertama download dulu Sencha Touch 2, dan Juga SDK Toolsnya.

Saya memakai Mac, tapi tutorial ini berlaku juga untuk OS Windows. Perhatikan bahwa Anda perlu punya web server terinstall. Di Mac, Apache sudah ada default. Di Windows, silakan install IIS atau Apache (misalnya dari Wamp).

Extract file sencha-touch-2.0.1.1-commercial.zip. Saya mengekstraknya di dalam ~/Sites/ , lalu saya rename jadi “sencha” saja, jadi file-file sencha-touch-all.js, sencha-touch.js dsb ada di ~/Sites/sencha/.

Berikutnya kita buat aplikasi hello world. Sekarang dari dalam ~/Sites/sencha kita bisa menjalankan perintah “sencha generate app” untuk membuat aplikasi:

$ cd ~/Sites/sencha/
$ sencha generate app --name=HelloWorld -p ~/Sites/helloworld

Aplikasinya bisa dites dengan mengakses di http://localhost/~yohanes/helloworld (atau tergantung setting web server Anda bagaimana).

Saya tidak akan mengubah file-filenya, jadi saya langsung package saja. Pertama buat dulu file config.xml. Saya memakai file template yang sudah biasa saya pakai. Sebenarnya baris-baris feature itu tidak diperlukan untuk ini, tapi karena saya sering lupa menambahkan baris tersebut ketika memakai API Blackberry, saya selalu menggunakan template ini.

Catatan: saya tidak menggunakan ikon untuk aplikasi ini (blank). Silakan ditambahkan sendiri jika dibutuhkan.

<?xml version="1.0" encoding="UTF-8"?>

<widget xmlns="http://www.w3.org/ns/widgets"
xmlns:rim="http://www.blackberry.com/ns/widgets"
version="1.0.0.0" id="helloworld" xml:lang="en">

<name>Sencha Hello</name>
<description>Sencha Hello.</description>
<author rim:copyright="2012" email="[email protected]">Yohanes Nugroho</author>

<rim:orientation mode="landscape" />

<content src="index.html"/>
<rim:category name="Games"/>

<feature id="blackberry.app" required="true" version="1.0.0.0"/>
<feature id="blackberry.app.event" required="true" version="1.0.0.0"/>
<feature id="blackberry.system" required="true" version="1.0.0.0"/>
<feature id="blackberry.system.event" required="true" version="1.0.0.0"/>
<feature id="blackberry.ui.dialog" required="true" version="1.0.0.0"/>
<feature id="blackberry.utils" required="true" version="1.0.0.0"/>
<feature id="blackberry.invoke" required="true" version="1.0.0.0"/>
<access subdomains="true" uri="*">
</access>
</widget>

Sekarang kita bisa men-zip aplikasinya. Masalah utama adalah: tools webworks tidak suka dengan file yang memiliki nama dengan tilde (~) dan dengan at(@) (misalnya [email protected], ini untuk retina display). Ada beberapa file seperti ini, untungnya ini tidak diperlukan, jadi kita bisa kecualikan dari file zip

zip -r senchahello.zip config.xml app.js app.json index.html resources/ sdk/ app/ -x *2x* -x *~*

Kuncinya ada pada “-x *2x* -x *~*” untuk meng-exclude file yang tidak valid menurut webworks.

Berikutnya kita bisa mempaketkan file zip tersebut menjadi file bar. Untuk mempersingkat command line, saya menginstall SDK di home directory saya di direktori webworks-tablet.

~/webworks-tablet/bbwp/bbwp senchahello.zip -g password -v buildId 1

Catatan: jika versi tidak diubah, buildId perlu dinaikkan setiap kali build.

Sekarang file .bar akan tercipta dalam direktori ~/Sites/helloworld/bin siap untuk diinstall ke PlayBook.

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:

  1. 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).
  2. Saya ingin bisa membuat gambar yang warnanya seperti diwarnai dengan krayon, jadi tidak polos.

Lanjutkan membaca Catatan Teknis – Baby Coloring Book

Pentingnya memahami Ilmu Informatika secara menyeluruh

Hari ini saya menemukan link ke sebuah pertanyaan menarik di Stack Overflow. Sebuah pertanyaan sederhana: mengapa menjumlahkan elemen yang nilainya kurang dari nilai tertentu dalam array yang terurut, lebih cepat dari melakukan operasi yang sama pada array yang tidak terurut. Lebih jelasnya silakan baca pertanyaan dan jawabannya di sini:

Why is processing a sorted array faster than an unsorted array?

Ada beberapa hal menarik dari jawaban pertanyaan tersebut.

Pertama: meskipun Anda memprogram high level sekalipun (menggunakan Java/Ruby/Python, atau bahasa lain yang menggunakan JIT), Anda akan tetap dibatasi oleh hardware. Anda tetap perlu mengerti hardware untuk membuat aplikasi yang performasinya tinggi.

Kedua: perhatikan bahwa dengan mengetahui sebab dari masalah, kita bisa mempercepat program, tanpa menggunakan sorting. Cukup dengan menggunakan manipulasi bit yang menghilangkan branching. Kita ingin menghilangkan sorting, karena sorting sendiri butuh waktu.

Ketiga: dalam kasus tertentu, compiler bisa mengoptimasi jika diberi flag yang tepat. Tapi kita tidak bisa menggantungkan diri pada compiler saja. Compiler yang berbeda menghasilkan kode yang berbeda, dan hasilnya bisa sangat jauh berbeda. Misalnya disebutkan bahwa compiler Visual C++ 2010 tidak bisa mengoptimasi kodenya, sedangkan compiler Intel bisa melakukannya dengan sangat baik.

Keempat: Perhatikan juga bahwa optimasi compiler dibatasi oleh hardware. Hardware tertentu (misalnya Intel sejak Pentium Pro) mendukung instruksi conditional move (di assembly Intel, instruksi ini disebut dengan CMOV) yang tadinya perlu manipulasi bit manual (AND, OR, dsb). Anda tidak bisa menggunakan optimasi ini di semua hardware, apalagi jika Anda menargetkan CPU model lama (banyak digunakan di embedded device).

Mungkin sebagian dari Anda mengira pertanyaan tersebut agak mengada-ada: untuk apa mencari jumlah bilangan yang kurang dari N dan dilakukan berulang-ulang, kalau sekali saja kan hanya butuh beberapa milidetik. Dan berbeda beberapa milidetik saja kan harusnya tidak berpengaruh bagi user.

Saya terpikir beberapa aplikasi dalam dunia nyata yang mungkin membutuhkan penjumlahan secara cepat tapi berulang-ulang. Saya berikan contoh kecil: Misalnya Anda punya aplikasi interactive data viewer, dengan slider yang bisa diubah nilainya dengan mouse (sangat cepat)

  1. Anda punya array yang berisi daftar jumlah gaji semua orang pegawai di sebuah kota (arraynya tidak terurut)
  2. Kita ingin menampilkan secara interaktif: jika saya set slider ke nilai 1 juta, maka saya akan melihat bahwa total gaji semua orang yang dibawah satu juta adalah X
  3. saya bisa mengubah nilai di slider, dan menghitung ulang total semua orang yang gajinya di bawah 2 juta. Saya bisa menaik turunkan slider dengan sangat cepat, ratusan kali per detik nilai slider bisa berubah.

Perhatikan bahwa meskipun contoh ini hanya menyatakan kurang dari X, tapi sebenarnya berlaku juga untuk operasi lebih dari X, atau X dalam range tertentu.

Dalam contoh ini: perbedaan interaksi antara beberapa milidetik dan beberapa puluh milidetik bisa sangat terasa. Jadi mengerti untuk mengurutkan data (atau menggunakan trik manipulasi bit) sebelum menjumlahkan bisa membuat interaksi semakin smooth. Menggunakan database untuk tujuan animasi yang sangat smooth seperti itu tidak akan berhasil (latensinya sangat tinggi), apalagi misalnya devicenya kemampuannya processing/komputasinya rendah (misalnya tablet atau smartphone).

Sebenarnya saya bisa menunjukkan contoh yang lebih kompleks lagi (misalnya dalam hal komputasi piksel grafik), tapi nanti pembahasannya akan ngelantur ke mana-mana. Hal yang ingin saya tekankan adalah: ada banyak persoalan serupa dalam dunia nyata semacam ini. Ini adalah penyederhanaan, supaya inti masalah bisa dilihat lebih jelas.

Seringkali jika ada yang menunjukkan bahwa optimasi seperti ini diperlukan, jawaban programmer yang malas adalah: beli saja hardware yang lebih cepat, masalahnya kan beres. Perlu dicatat juga: bahwa membeli hardware yang lebih cepat tidak selalu menjadi solusi.

Misalnya Anda menjual aplikasi Anda di Apple appstore, Anda harus mendukung hardware terlambat sampai tercepat. Jika Anda bandingkan iPad generasi pertama dan kedua, maka perbedaan hardwarenya sangat jauh: memori menjadi 2x lipat, prosessor menjadi jauh lebih cepat (dari single menjadi dual core). Anda bisa mengabaikan 14.8 juta pengguna iPad 1, tapi penjualan aplikasi Anda bisa menurun jauh.

Mungkin Anda terpikir untuk melakukan komputasi di server saja. Tapi berapa delay karena latensi jaringan? apakah kecepatannya cukup acceptable untuk membuat interaksi yang smooth?

Jika saya rangkum, semua hal tersebut menunjukkan: betapa perlunya kita belajar ilmu informatika atau computer science secara baik dan menyeluruh. Misalnya dalam contoh yang sangat kecil ini:

  1. Dalam arsitektur komputer, kita belajar mengenai batasan hardware, bagaimana arsitektur CPU superscalar bekerja.
  2. Dalam pelajaran algoritma, kita belajar mengenai kompleksitas algoritma. Bagaimana memilih algoritma yang baik.
  3. Dalam pelajaran compiler, kita bisa tahu optimasi apa yang bisa (dan tidak bisa) dilakukan oleh compiler
  4. Dalam pelajaran networking, kita bisa tahu mengenai latensi jaringan (jika ingin memindahkan komputasi ke server)

Jadi menurut saya, orang-orang yang ingin membatasi pelajaran komputer hanya dengan materi yang praktis saja, tidak akan berhasil.

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

Manipulasi bit bagian 4: ekstraksi bit

Ekstraksi bit adalah proses pengambilan satu atau lebih bit dari sebuah bilangan. Saya contohkan dulu dalam sistem desimal sebelum masuk ke sistem biner.

Waktu kuliah, NIM saya adalah 13598054. Angka ini sebagai desimal bisa dibaca menjadi tiga belas juta lima ratus sembilan puluh delapan ribu lima puluh empat. Tapi. NIM itu bukan untuk dibaca sebagai bilangan, NIM itu dibentuk dari kode: 1 adalah jenjang (1=s1, 2=s2, 3=s3) kode 35 adalah jurusan (informatika), 98 adalah tahun masuk dan 054 adalah nomor urut saya. Dengan mengekstraksi digit desimal maka kita bisa mendapatkan makna baru dari sebuah bilangan.

Bagaimana cara mengekstraksi bagian jurusan (35) dari angka tersebut? Dengan manipulasi string, kita bisa melakukannya dengan substr/substring/fungsi sejenis. Tapi konversi ke string tidak efisien. Operasi aritmatika bisa digunakan untuk ekstraksi 2 digit jurusan.

Pertama kita bisa menggeser semua digit tahun masuk dan nomor urut (5 angka), dengan shift right 5 digit alias membagi dengan 100000 dibulatkan ke bawah. Hasilnya adlah 135. Setelah itu kita bisa menggunakan modulus 100 untuk mendapatkan angka 35.

Dalam biner, hal yang sama bisa kita lakukan. Misalnya kita ingin menyimpan tanggal (1-31) bulan (1-12) dan tahun (00-99) dalam satu angka biner. Cara penyimpanan seperti ini memungkinkan kita mengurutkan tanggal dengan mudah dan cepat.

Kita bisa menyimpan tahun dalam 7 bit (0-127) bulan dalam 4 bit (0-15) dan tanggal dalam 5 bit (0-31). Total kita butuh 16 bit.

Misalnya kita akan menyimpan tahun 12 (0001010) bulan 5 (0101) tanggal 17 (10001):

0001010 0101 10001

Atau:

0001010010110001

Jika dipandang sebagai 1 bilangan 16 bit: 5272.

Angka tersebut kelihatan jauh sekali dari angka awal kita (17-5-12).

Untuk mengekstraksi bulan. Kita perlu mengubah 5272 menjadi biner:

0001010010110001

Kita geser ke kanan sebanyak 5 untuk menghilangkan tanggal:

0000000010100101

Sekarang kita bisa menggunakan operator and untuk mengambil 4 digit terakhir:

0000000010100101

And

0000000000001111

Hasilnya

0000000000000101

Jika kita hilangkan digit 0 di depan:

101 = 5 desimal (bulan 5).

Secara umum untuk mengekstraksi bit, kita perlu menggeser ke kanan untuk menghilangkan bit yang tidak kita inginkan, lalu di-andkan dengan deretan bit 1 sebanyak bit yang ingin kita ekstrak (dalam kasus ini: 4 bit).

Posting ini ditulis dengan wordpress for blackberry sambil tiduran di waktu libur.

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.