Kategori: javascript

Assembler di browser berbasis Keystone dengan WebAssembly

Sebenarnya saat ini saya sedang sibuk dengan banyak hal, tapi karena sedang berduka, saya ingin melakukan sesuatu untuk mengalihkan pikiran. Bapak saya suka membongkar mobil untuk mengalihkan pikiran, sedangkan saya lebih suka memprogram sesuatu yang tidak berhubungan dengan pekerjaan. Hasilnya: hari ini saya mengkompilasi framework Keystone dengan target WebAssembly (Wasm) lalu memberi interface HTML dengan Preact (alternatif React yang ukurannya jauh lebih kecil).

Assembler ini bisa diakses online di https://asm.x32.dev dan sourcenya saya berikan di https://github.com/yohanes/online-assembler . Aplikasinya bisa diakses dengan semua browser modern (Safari, Chrome, Firefix, Edge), termasuk juga mobile browser (sudah ditest di iOS 13 dan Android 10).

WebAssembly (Wasam)

Supaya tidak bingung dengan penjelasan assembler dan webassembly, akan saya jelaskan apa itu WebAssembly (biasa disingkat dengan Wasm). WebAssembly adalah format instruksi biner untuk virtual machine (bisa dibayangkan seperti bytecode Java) . Saat ini target utamanya adalah web browser (saat ini sudah disupport di Firefox, Google Chrome, Safari dan Edge). Di masa depan web assembly ini dihrapkan akan bisa dipakai juga di aplikasi desktop maupun server.

Lanjutkan membaca Assembler di browser berbasis Keystone dengan WebAssembly

Modifikasi Aplikasi Android

Ada banyak alasan kenapa kadang kita ingin memodifikasi aplikasi Android, dan ada banyak cara untuk melakukannya. Beberapa alasan saya pernah memodifikasi Android di antaranya: untuk pentest, untuk membuat aplikasi bisa berjalan lagi, dan untuk mencurangi game.

Untuk pentesting, modifikasi yang sering perlu dilakukan adalah: mematikan certificate pinning, mematikan root checking, dan juga menambahkan tracing untuk melihat logika aplikasi lebih jelas. Jam tangan murah dari China yang saya pakai memakai aplikasi Android untuk notifikasinya. Suatu saat aplikasi ini tidak bisa dipakai karena servernya di China sudah dimatikan, dengan mengubah aplikasinya, jam ini jadi tetap terpakai. Untuk masalah mencurangi game, sudah pernah saya tuliskan di blog saya yang lain.

Contoh skrip Frida untuk salah satu soal Flare On
Lanjutkan membaca Modifikasi Aplikasi Android

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

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.