Diproteksi: Compromise.

Konten ini diproteksi dengan password. Untuk melihatnya cukup masukkan password Anda di bawah ini:

Iklan

Project : JagoanGitar!

In my last semester (hopefully!), I chose to take course which will give me opportunity to code more. By that reason, I chose two courses : Pengembangan Aplikasi Media Interaktif/PAMI (Interactive Media Development) and Tech-Based Business. Today, I will tell more about my final project in PAMI. I also developed something for my tech-based business class, but I will tell you about it later.

For the final project in PAMI, we were asked to build an interactive application (which mostly will associate it with ‘Game’) using one of many tools : Myo Armband, Intel Galileo, and Leap Motion. First, we’re asked to propose the idea for the final project. The general requirement is “develop something that can also improve your skill in real life”.

We try to give interactive experience when you try to learn guitar by reading tab.

We try to give interactive experience when you try to learn to play guitar by reading tab.

After discussed the idea, our team (oh, our team consists of me, Andre, and Wono)  came up with JagoanGitar! JagoanGitar! (which is Bahasa Indonesia-literal-translation for Guitar Hero, our role model for this game, hahaha) is a desktop-game which developed to help you learn to play guitar by reading tab. For development, we chose Intel Galileo as our tools. Why? We want to create experience for user as they play using their guitar. Intel Galileo will be used as a middleware to detect input from guitar to desktop via electric signal as the user play his/her guitar.

But, as it turns out, we developed our game using Arduino. We found an example code to read signal from guitar, but it involves a low-level programming and we didn’t have many time to learn and convert it to similar code in Intel Galileo. Besides that, we stumbled on problem about how to calibrate the input signal. Because of resonance, we got so many input with various value and so far range. We tried to tackle this by using heuristic : if one of the value is in correct range in desired note, we count it as true! (for the list of notes, we use this list). It’s quite good to tackle problem to recognize a note via their frequency, but not much in case two same notes was strummed twice. (Btw, if you have experience about this problem, maybe you can share how you tackled this problem).

For game development, we mainly use Unity as our engine, using C# script. For connecting input from Ardunio to the main game, we use serialization. For a sneak peek, you can see it from video below, or for the code base you can see it on github (we do so many iteration for the level struct haha).

 


At the end, I, myself, think that our execution is not fulfill what we really planned before. Besides problem I mentioned before, we also stumbled on problem like : why the input modul –somehow– did not work (which usually worked before). We tried to re-build the circuit in arduino many times, but , still, nothing happens. And finally we realize the problem is not in the circuit, but in the cable from guitar to arduino (which we realize after the guitar was also not working in my Makrab hahaha).

In our final presentation, we got many feedbacks from our lecturer. Mostly about our execution, in game-concept-related. From the feedbacks, we realize what really miss in our project : our team has no game-developer background! We are so focused about the technical side and basic requirement, but not develop it until game-ready-phase. And also, from the screenshot, you can tell that we have no designer hahaha.

We also forgot about the means of the course. We spent so many time in “how we get correct input from guitar”, which the course actually emphasize on “how you develop better interaction and experience for your user”. I think we should choose the right idea and tools. Hahaha.

But, after all, it was both amazing experience and exciting project for me.

(For me, the best project for this course is developed by Ardi, Midum, and Gilang, but I can’t find the video)

Cheers!

#MendingNgodingDaripadaPusing

Musixmatch

image

Love this quote! I’ve made my #LyricsCard via @musixmatch app. Make yours: http://goo.gl/8zQSyk

Ketika diwawancarai Bukalapak sebagai salah satu prosedur buat penerimaan mahasiswa KP, saya ditanyai soal aplikasi apa sih yang bagus atau berkesan buag saya.

Ketika itu, saya jawab “Musixmatch”.

Buat yang belum tau, aplikasi bisa digunain buat mengenali sebuah lagu, sampai menyajikan liriknya supaya kita bisa sing along. Terus, dia juga bisa memperbaik meta-data dari lagu (penyanyi, album, genre, judul, dll) dan ngeganti background image dari lagunya.

Idenya sederhana sih. Fitur yang mungkin “susah” (bukan berarti yang lain gampang, cuman relatif kebayang cara buatnya) adalah ngenalin lagunya dari musik.

Yang paling saya suka, adalah eksekusi tampilannya. Bagus banget. Image yang dipilihin buat jadi background image juga bagus-bagus alias cocok diliatin sambil denger lagunya.

Gambar di atas adalah salah satu fitur barunya, buat mengshare kutipan lagu yang kita dengar. Saya akui, fitur yang sebenernya “gak dibutuhin” tapi karena eksekusinya bagus, saya jadi sering pake. Huehuehue.

Pengen belajar interface-interface gaul deh.

Eniwei, wawancaranya gagal :”)

CariAman

Berhubung hari ini bertepatan dengan Hackaton Merdeka 3.0 (dan saya ga ikutan, niatnya mau te-a, tapi malah ngehabisin utang Breaking Band sama TBBT), saya pengen cerita sedikit soal keikutsertaan saya kemarin di Hackaton Merdeka 2.0.

Awalnya, saya tidak tertarik untuk ikutan. Pengalaman Hackaton saya sebelumnya, Hackaton sangat mengganggu jadwal tidur. Selain itu, aplikasi yang ingin dibuat selalu downgrade atau tidak jadi. Ujung-ujungnya, saat presentasi, poin penilaian lebih diarahkan pada aspek ide dan bukan kesiapan aplikasi. Tidak salah sih, tapi kan pengennya kalo Hackaton kan jadi sesuatu apa gimana gitu 😦

Lalu, Joshua ngeline buat ngajakin ikutan Hackaton Merdeka (selanjutnya saya sebut MDK aja deh) bareng Arum juga. Berhubung saat berlangsungnya MDK 2.0 sehabis UAS, saya jadi iyain aja. Soalnya kalo waktu UAS, pasti jarang banget ngoding jadinya :p. Oiya, posisi timnya juga enak. Ngikutin Hustler, Hacker, ama Hipster. Karena saya lebih pengen jadi Hacker sebenernya, pada MDK 2.0, saya mutusin untuk mangut-mangut aja urusan desain dan ide.

Singkatnya, di hari Kamis, Joshua ngajak kumpul buat nentuin ide apa yang mau dibuat. Kita coba brainstorming di CC timur sekitar dua jam, dan akhirnya mutusin untuk ngebuat sebuah aplikasi yang temanya keamanan. Dari hasil ngobrol, ada tiga target fitur yang pengen kita kejar dari aplikasinya:

  • Lapor Kejahatan
  • Tombol Urgent
  • Notify daerah rawan

Dan waktu itu juga, Joshua ngasih tahu buat nyobain yang namanya Ionic Framework buat ngoding mobile. Ionic bisa digunain buat ngoding mobile, tapi menggunakan HTML/JS. Lumayan seru dan gampang buat ngurusin tampilan.

Di hari Sabtunya, saya dan Joshua berangkat bareng ke TKP MDK 2.0. Setelah registrasi, kita dapet baju dan handuk. Bajunya kesempitan buat saya hahaha. Terus Joshua sama Arum gamau handuknya, jadi saya dapet banyak handuk. Lumayan loh, buat lap kaki di kosan :p

Setelah pembukaan, ada sedikit pemaparan soal lomba. Ternyata dibuka kategori khusus mengenai asap, akibat kebakaran hutan di Riau. Saya dan Joshua sempet berfikir untuk ganti kategori ke asap. Dengan alasan takut mendadak, atau Arum udah buatin material buat aplikasi keamanannya, kita jadi mutusin untuk tetep buat aplikasi tentang keamanan.

Setelah makan siang, saya dan Joshua mulai bagi tugas. Saya ngurusin urusan service di bagian server, Joshua mulai coba untuk bikin aplikasi mobile-nya menggunakan Ionic. Sekitaran abis asar, service servernya selesai sehingga saya mulai bantuin Joshua di Ionic. Berhubung saya ga pernah make Ionic sebelumnya, saat nyoba bantuin Joshua, saya malah bingung sendiri. Akhirnya, saya mutusin untuk menggunakan waktu saya buat belajar dulu.

Sekitaran Maghrib, Arum akhirnya dateng. Terus kita diskusi soal nama aplikasinya (Arum mau desainin logonya), dan Arum ngide buat ngasih nama CariAman. Saya dan Joshua menganggap namanya cukup catchy, soalnya sering disebut kalo ada kegiatan kaderisasi di ITB :p. Akhirnya, setuju, aplikasinya namanya CariAman.

logo-01

Sekitaran jam 12an malem, saya akhirnya baru ngeh soal struktur dan pemakaian Ionic. Akhirnya, saya mulai bantuin Joshua, coba ngerjain beberapa modul tambahan. Jam 3-an, Joshua pamit buat tewas duluan. Jam 5-an, saya nepok Joshua, izin buat tewas di Mushalla.

Sekitar jam 7, kita mulai sadar lagi, sambil makan pagi, kita coba evaluasi lagi fitur apa yang masih bisa ke kejer buat dikerjain. Akhirnya kita mutusin buat ngelarin satu fitur lagi aja, sambil kita nyiapin servernya.

Btw, saya nemuin aplikasi yang namanya Ngrok, buat jadiin laptop saya jadi server (gapunya soalnya 😦 ).

Sekitar jam 10, kita diminta untuk pitching ke para mentor. Salah satu mentornya Dosen saya di kelas. Hahaha. Seru sih, mentor-mentornya berasal dari startup aktif di Bandung. Waktu kita mau presentasi, kita otomatis mengorbankan Joshua buat ngomong, soalnya dia Kahim. Wqwqwq.

Presentasinya berjalan cepet banget dengan sedikit pertanyaan. Sedikit pertanyaan ngebuat kita cukup bingung sih, apakah aplikasinya ga menarik, atau emang udah cukup jelas. Hahaha. Berhubung kita kelaperan, kita memutuskan untuk makan siang aja hahaha.

Setelah makan siang, ada pengumuman 10 aplikasi yang dapet kesempatan buat presentasi lagi di hadapan juri yang berbeda. Alhamdulillah, kita kepilih masuk salah satunya. Agak kaget sih, soalnya aplikasi dari orang yang semeja sama kita kayaknya lumayan keren, tapi dia ga masuk. Terus, aplikasi kita mirip dengan aplikasi finalis lain. Hahaha.

Yang paling merinding adalah Joshua. Soalnya, lagi-lagi dia yang dikorbankan buat presentasi hahaha. Setelah siap-siap dikit, nyobain nyocokin skenario, kita dapet kesempatan presentasi. Presentasinya lancar. Tinggal nunggu pengumuman menang.

Sayangnya, kita ga jadi pemenang di MDK 2.0 regional Bandung. Aplikasi yang menang adalah Mobile Posyandu, dan runner-up nya aplikasi tentang Kabut Asap dari kakak kelas saya. Menariknya, meski tim kami ga menang, Arum tetep pulang bawa hadiah, soalnya dia menang kategori Top Woman Developer. Hahaha.

Eniwei, kurang lebih begitu jalan acaranya. Setelah pulang, mulailah kepikiran hal-hal yang seharusnya saya kerjain: deadline buat bimbingan TA dan PAT. Saya ga peduli, nyampe rumah langsung bobo. Hahaha.

 

Seru sih. Bagian yang paling membuat saya senang sebenernya adalah akhirnya melalui hackaton saya membuat sesuatu yang (bisa dibilang) selesai. Hahaha.

Btw, ini video Joshua ngejelasin aplikasinya. Hehehehe.

 

Kabar Terbaru

Wueh. Udah lama juga saya tidak nulis di sini.

Alasannya sederhana sih: terlalu banyak hal yang dipertimbangkan sebelum menulis. Sebenernya banyak yang pengen diceritain, tapi takut cheesy banget. Tuh, kalimat sebelumnya aja udah terdengar begitu.

 

Tulisan tulisan berikut hanya sekedar kabar terbaru supaya blog ini tidak kosong-kosong amat.

Eniwei, dalam beberapa minggu ke belakang ini saya lagi banyak coba-coba dengan Ionic. Singkatnya, Ionic ini adalah sebuah framework yang bisa digunakan untuk membuat aplikasi mobile menggunakan bahasa yang biasa digunakan untuk web. Jadi si Ionic ini akan melakukan porting proses dan view yang coba dilakukan dengan pendekatan desain web, menjadi aplikasi native dengan menggunakan webview.

Proses pengerjaan yang saya lakukan sama sih untuk ketiga projek yang saya buat: create project baru, ganti aset, tampilin service yang diberikan.

Soal service, saya merasa pendekatan inilah yang paling baik dilakukan buat pengembangan aplikasi sekarang. Semua ini berawal dari kata-kata aryya di tahun lalu, “Kalo kata Pak Munawar, sebenernya kan aplikasi Gmail itu cuman satu. Terus dibuat tampilannya untuk web, untuk mobile, dsb”.

Pertama kali saya denger, saya dapet insight yang membuat saya menyimpulkan bahwa pengembangan aplikasi, ujung-ujungnya sama: buat satu proses, tukeran data, tampilan dibuat berbeda.

Hal ini kebetulan diterapkan di tempat saya melakukan kerja praktik. Kebetulan Kak Ali (mentor di tempat KP –pen) selalu meminta saya untuk membuat API-nya dulu, baru membuat tampilannya. Hasilnnya cukup menarik, karena kita jadinya tidak perlu ngoding dari awal untuk aplikasi-aplikasi sama tapi beda platform. Kesulitannya ya mungkin, karena prosesnya diletakkan di server, ketergantungan sama masalah koneksi bakal besar banget.

Eh buset, tulisannya kaku amat -___-

Eniwei, saya mau membagikan sedikit cerita saya saat makan siang tadi.

Jadi, sekitar jam 13.00 saya memutuskan untuk makan siang di rumah makan terdekat. Tapi waktu saya memeriksa dompet, ternyata uang saya hanya 3000 rupiah saja. Berhubung uangnya cuman cukup buat bayar parkir doang (kalo ada motor), saya memutuskan untuk mengambil uang di Baltos. Saya ambil jalan pintas, melewati gang. Di salah satu gang, ada anak-anak kecil yang lagi duduk di pinggiran. Terus mereka cekikikan.

Waktu saya lewat mereka, mereka seolah-olah mempelantingkan tubuh mereka ke arah menjauh dari saya.

Mereka bertingah seolah langkah kaki saya membuat gempa.

Kampret.

Btw, akhir-akhir ini WWE lagi seru banget.

Kebetulan shownya sedang berada di Inggris, terus di salah satu aksi, melibatkan pemain sepakbola favorit saya waktu kecil : Wayne Rooney! Adegannya sederhana sih. Bintang WWE-nya gangguin Rooney, Rooney nampar si doi, si doi sakit berlebihan.

 

Kabar mengejutkan dateng dari Seth Rollins. SR mengalami cedera lutut sehingga harus menyerahkan gelar WWE Championnya. Hiks, padahal saya mulai suka sama gimmick dia.

Hal seru lainnya: Brother of Destruction (Tag Team-nya Undertaker dan Kane) balik! Rencananya, mereka bakar ngelawan The Wyatt Family di Survivor Series. *super excited*

 

Kayaknya gitu aja deh. Maafin tulisannya berantakan banget. Huehuehue.

Autopsy-Fork

Halo, kali ini saya mau sharing sedikit nih tentang proyek kecil-kecilan yang lagi bikin :p

Jadi, kemaren saya baru menyadari ada yang namanya Cross Origin Request, hal ini yang ngebuat AJAX saya ga jalan-jalan ketika melakukan request ke sebuah server.

Nah, kebetulan kerjaan saya kemaren menggunakan python di sisi servernya. Ada konfigurasi di Header Response untuk membuat si request dari AJAX bisa menerima reponse dari server. Pas saya cobain… ternyata gagal. Belum tahu kenapa sih sampe sekarang. Hahaha.

Nah, saya berhubung kerjaan stuck, saya memutuskan buat nyobain solusi konfigurasi header tersebut dengan php. Eh, ternyata bisa. Ah, mungkin karena masih lokal pikir saya, terus saya cobain masukin program saya ke IdHostinger, dan ternyata tetep bisa. Fix. Solusinya bener. Gatau deh apa yang salah sama python nya ._.

Eniwei, saya jadi inget ketika saya di-tag sama seorang temen saya, Alvin, soal Autopsy. Autopsy ini merangkum semua cerita startup yang gagal, disajiin dalam sebuah halaman. Karena saya memang sering internetan dari hape, pake opera mini pula, waktu pertama saya buka halaman webnya tidak nyaman buat dibaca. Tulisannya terpaksa kecil, terpotong, serta border di sana-sini.

Screenshot from 2015-08-06 14:19:49

Ah, wajar bagi saya, soalnya opera mini kan memang menyederhanakan tampilan.

Namun, ternyata ketika saya coba buka dari laptop saya, tampilannya juga ada yang tumpang tindih tulisannya. Nah, setahu saya pula, itu columnnya gak bisa digedein.Jadi, sekali lagi, ada tulisan yang kepotong.

Terus kepikiran deh, ngebuat parser data dari autopsy ini ke tampilan lain, yang lebih sederhana, yang lebih opera-mini-able.

Jeng-jeng, jadilah Autopsy-Fork. Tampilannya memang sangat sederhana, karena saya murni pengen supaya bisa enak dibaca di opera-mini aja.

Screenshot from 2015-08-06 14:19:18

(Btw, buat yang pengen ngebuat tampilan yang lebih caem, silahkan ngelakuin request ke http://autopsy.hol.es/api.php . Balikannya json, kalau mau gampang, sok pake $.getJSON )

Ada dua tools yang menarik buat saya bahas kali ini.
1. cURL
Pertama kali, saya denger tools ini dari bang Fawwaz. Fungsinya cURL yang saya pakai kali ini adalah buat ngelakuin request ke autopsy asli, terus nerima html responsenya. Kenapa begini? Karena saya belum sejago Aryya yang bisa tahu si autopsy ini ngambil datanya dari mana wkwkwk. Nah, kebetulan php dan IdHostinger mendukung penggunaan cURL ini.

2. Simple_HTML_DOM_Parser
Sip, tugas pertama udah nih, kita udah ngedapetin file mentah htmlnya. Tugas selanjutnya, ngebersihin HTML tersebut buat ngedapetin data yang kita pengen.
Karena kebetulan si cURL nya dilakuin di PHP, ya saya cari-cari HTML Parser-nya PHP, kebetulan ketemu Simple_HTML_DOM_Parser. Sebenernya ada XML parser bawaan PHP sih, tapi saya takutnya HTML biasanya format XMLnya jarang bener. Hahaha. Kebetulan lib ini juga relatif gampang banget kegunaannya, setidaknya buat keperluan saya.

Udah deh, dua tools tadi cukup buat ngebuatin api-nya di http://autopsy.hol.es/api.php.

Tinggal masalah tampilannya. Tampilannya standar lah, bootstrap, rata tengah. Selesai. Sekali lagi, tujuannya biar enak dibaca di opera-mini doang *pembenaran gak bisa desain*

Huehuehue.
Silahkan yang jadinya dapet insight dari tulisan ini, bisa share project yang mau dibuat huehuehue.

*paling enak emang ngerjain sesuatu di saat harusnya ngerjain yang lain*
-_-

Demi Programming yang Lebih Baik

(Yah, mendadak nulis banyak, soalnya lagi di kereta dan ndak bisa tidur)

Di tempat kp yang baru ini, saya sama sekali belum disuruh ngoding. Saya baru disuruh analisis sistem yang ada, dengerin permasalahan yang ada, terus solusi apa yang bisa diberikan.

Berhubung rada gabut, saya mutusin buat nyari insight dengan baca-baca buku yang seharusnya dibaca saat kuliah.

Sekali lagi, saya amazing dengan buku-buku yang seharusnya saya baca ini. Saat ini, saya lagi cobain baca buku Algorithm Design Manual (pengarang Skiena) sama Computer Network + Distributed System (Dua-duanya Tanenbaum). Cukup menyesal sih, kenapa di saat aktif kuliah tidak menyempatkan baca buku-buku ini.

Buku-buku teknis ini, ditulis dengan cara yang bisa dibilang kocak. Setidaknya bisa bikin-bikin senyum sambil bilang “Sa ae si bapak”. Doakan semoga bisa baca sampe selesai deh. Hahaha <– sering naik turun keinginan buat bacanya -_-

Saat baca buku Algorithm Design Manual, saya jadi teringat salah satu artikel yang pernah beredar di Timeline Facebook saya. Artikel ini, intinya, berbicara soal sebenernya penguasaan algorithma tidak penting bagi seorang lulusan informatika. Setelah itu, saya coba refleksikan lagi dengan pendapat salah seorang dosen saya, soal perbedaan Coding dan Programming.

Coding adalah translasi pikiran jadi kode. Programming adalah proses problem solvin dengan menggunakan kode. Programming mencakup coding, namun coding tidak mencakup programming.

Saat anda baca "How to write x in Java", anda sedang belajar coding. Saat anda sedang analisa kebenaran dan kekuatan solusi dari sebuah masalah, anda sedang dalam langkah melakukan programming. Saat anda coba implementasi, anda terjun ke programming.

Mungkin itulah penyebabnya, di kuliah saya, sangat jarang belajar teknis seputar bahasa, namun banyak mata kuliah yang diajarkan tanpa ada koding-kodingnya (tubes tetep ngoding tentunya hahaha). Kami diajarkan untuk analisa. Translasi jadi kode bukan hal utama, disuruh belajar sendiri.

Hal ini, salah satunya diceritakan oleh Skiena dalam masalah Pyramid Problem. Insight yang saya dapatkan, ada perusahaan yang punya resource sangat bagus, mau membuat program untuk membuktikan bahwa setiap bilangan bisa dibangun dari bilangan piramida untuk bilangan kurang dari 1.000.000. Dengan resource yang sudah maksimal, orang yang disewa perusahaan ini membuat program yang baru selesai dijalankan selama 20 (atau 200? Gak inget-inget amat) menit.

Prof Skiena, diminta untuk membuat program yang lebih bagus. Mantap dan bergaya, beliau mampu membuat program yang bisa jalan kurang dari satu menit. Setelah optimasi sana sini, eh bisa juga jalan kurang satu menit, dengan resource yang seadanya.

Apakah program yang dibuat Prof Skiena lebih benar dari yang dibuat orang perusahaan? Sama kok tingkat kebenarannya. Cuman, kualitas yang dibuat Skiena jauh lebih bagus. Apa yang dibuat Skiena punya nilai ++ dibanding yang dibuat oleh orang perusahaan.

Ini juga yang coba saya refleksikan kepada saya yang sekarang. Saya yang kalau dapet tubes lebih asik ngomongin "Woy, ini ngodingnya gimana?" daripada "Menurut lu, seharusnya solusinya gimana?". Keliatan kok, hasil-hasil yang saya buat, kebanyakan hanya hasil-hasil ngoding doang. Termasuk meeting-room. Asal tahu gunain firebase, angular, jquery, semuanya pada bisa buat hahaha.

Insight menarik lagi, yang saya dapetin saat baca tulisan Kak Sonny soal game 24-nya Zaky. Ide gamenya sederhana (relatif umum, bukan ide baru). Salah satu yang menarik adalah, untuk nemuin semua pasangan solusi buat 24, Zaky ngegunain Dynamic Programming. Sesuatu yang bakalan kebanyakan orang, termasuk saya, akan buat dengan Brute Force. Kalau saya buat game yang sama, apakah game saya salah? Nggak. Kalah? Mungkin iya.

Huft. Harus lebih serius dan banyak belajar nih, huehuehue.