Klanjabrik

RiotJS is not as popular as ReactJS or Angular(2). But the best thing about RiotJS is easy to learn.

PouchDB is javascript database using IndexedDB under the hood and falling back to WebSQL where IndexedDB isn't supported.

PoS (Point of Sales) bagi toko atau restoran sudah tidak asing lagi karena fungsinya yang memudahkan pemilik toko atau restoran memantau ketersediaan barang di gudang dan melihat perolehan penjualan.

Dan sudah banyak sekali sistem PoS yang tersedia baik itu online maupun offline.

Mengapa membuat sistem PoS?

Sudah menjadi kebiasaan saya jika ingin belajar teknologi/bahasa pemrograman yang baru maka harus berbentuk produk yang bisa digunakan oleh orang lain. Misalkan saya ingin belajar AppCompat pada Android, kemudian saya buat aplikasi Income Expense yang tersedia di PlayStore.

Sama halnya dengan AlBarokah, sistem Point of Sales memiliki fitur-fitur yang erat kaitannya dengan router, state management, dan database. Cocok untuk dijadikan studi kasus untuk belajar Javascript.

Kenapa Javascript?

Perkembangan Javascript saat ini cukup mencenangkan, bagi saya mempelajari Javascript yang kekinian memiliki learning curve yang lumayan tinggi. Contoh saja ReactJS, diakui ReactJS cukup pesat perkembangannya, sehingga membuat saya ingin mempelajarinya. Hanya saja selang beberapa minggu hasilnya tidak begitu baik.

Akhirnya pilihan jatuh ke RiotJS, info RiotJS ini saya temukan ketika mewawancarai kandidat karyawan di Sebangsa, yaitu Mas Damaera. Sistem PoS jelas memerlukan database untuk menyimpan hasil penjualan, akhirnya pilihan jatuh ke PouchDB yang menggunakan IndexedDB.

Fitur?

Sebelum membahas lebih lanjut fitur apa saja yang ada di AlBarokah, ada 3 prinsip yang perlu diperhatikan yaitu:

Murah

Mudah

Multi-OS Compatibility

Berdasakran prinsip 3M tersebut, kesimpulannya:

Offline (Tidak perlu internet).

Memaksimalkan teknologi database yang disediakan oleh browser, sehingga tidak perlu menginstall Web dan Database server.

Tidak perlu fitur keanggotaan (Login, register).

Tampilan sederhana. How it works is 70%, how it feels is 30%

Adapun Fitur-fitur yang didukung AlBarokah pada versi 1.0 adalah:

Kasir

Pengaturan Barang/Produk

Penjualan

Konfigurasi (Nama Toko dan Gambar Latar Belakang)

Teknologi yang dilibatkan adalah:

Webpack

RiotJS

RiotControl

PouchDB

Siang ini, teman mengirim postingan mengenai tools untuk membuat Flowtchart/Diagram yang berkerja seperti markdown. Bagi saya menarik karena jika ada tools membuat diagram tanpa harus menarik garis dari satu block ke block lain maka tools tersebut layak dicoba.

Mermaid CLI Langsung menuju https://github.com/knsv/mermaid, dan mencoba Mermaid CLI. Instruksi penggunaan Mermaid CLI bisa dipelajari pada halaman tersebut. Saya coba dengan instruksi sederhana

sequenceDiagram Klanjabrik->>Bob: Hello Bob, i want to follow you! alt is open Bob->>Klanjabrik: OK else is private Bob->>Klanjabrik: OK, i will accept/reject your request later end alt is blocked Bob->>Klanjabrik: Sorry, you were blocked else is not blocked Bob->>Klanjabrik: OK end

Kemudian untuk men-generate file PNG, menggunakan perintah berikut:

$ mermaid test.mermaid -p

Hasil outputnya adalah sebagai berikut (file output: test.mermaid.png):

Lazy Programmer

Rasanya ada yang kurang jika saya harus mengerjakan diagram yang rumit, karena setiap kali melakukan perubahan pada file mermaid, saya harus masuk ke console kemudian generate untuk menghasilkan output, lalu menuju browser dan melakukan refresh.

Akan menarik jika ada tools yang bisa mendeteksi jika ada perubahan pada source file (test.mermaid) maka browser akan otomatis melakukan refresh untuk menampilkan file PNG yang terbaru.

Nah, untuk mencapai keinginan di atas maka saya menggunakan Gulp dan BrowserSync.

Gulp bertugas untuk melakukan otomatisasi, mendeteksi (watch) jika file test.mermaid ada perubahan, maka Gulp akan menjalankan command untuk mengeksekusi perintah generate file PNG.

BrowserSync akan melakukan auto-reload jika proses generate file PNG selesai dijalankan.

Gulp + BrowserSync Agar Gulp bisa mengeksekusi sebuah perintah saya menggunakan gulp-shell.

Jika Gulp (Gulp-Shell) dan BrowserSync sudah siap, sekarang waktunya untuk membuat file gulpfile.js

var gulp = require('gulp'); var shell = require('gulp-shell') var browserSync = require('browser-sync'); var reload = browserSync.reload; gulp.task('browser-sync', function() { browserSync({ server: { baseDir: "./" } }); }); gulp.task('mermaidsource', function (cb) { return gulp.src('test.mermaid', {read: true}) .pipe(shell([ 'mermaid test.mermaid -p' ])) .pipe(reload({stream:true})); }) gulp.task('default', ['mermaidsource','browser-sync'], function() { gulp.watch('test.mermaid', ['mermaidsource']); })

Jalankan perintah gulp pada terminal, maka setiap kali saya melakukan perubahan pada file test.mermaid maka pada browser akan menampilkan secara otomatis file PNG terbaru.

Inersia atau kelembaman adalah kecenderungan semua benda fisik untuk menolak perubahan terhadap keadaan geraknya. Secara numerik, ini diwakili oleh massa benda tersebut. ~ Wiki Indonesia

Manusia yang berlari memiliki inersia yang fleksibel ketimbang mobil, sepeda, truk, traktor yang berlari. Karena manusia memiliki massa yang lebih kecil ketimbang mobil, sepeda, truk atau traktor. Fleksibel dalam artian mudah melakukan perubahan arah jika ada kekuatan dari luar yang memiliki tindakan yang kuat atasnya.

Sehingga manusia memiliki momen inersia yang lebih kecil, yang berarti manusia tidak perlu membutuhkan banyak momen untuk melakukan rotasi, gerakan berputar balik maupun melakukan manuver yang ekstrim.

Satu detik yang berlalu bisa menjadi sangat berarti bagi beberapa orang,

Satu detik yang berlalu bisa menjadi sangat bersejarah bagi beberapa orang.

Yang saya tahu, 2 tahun yang lalu kami (Tim Sebangsa) mengumpulkan detik per detik untuk mencapai hari ini. Banyak yang mesti dilalui.

Semenjak aplikasi Sebangsa masuk ke Playstore (sebelumnya Appstore dan Web Sebangsa di-release ke publik) resmi sudah apa yang diperjuangkan Tim Sebangsa 2 tahun yang lalu menuaikan hasil, dan tentunya akan lebih banyak lagi ingin dicapai.

Misi yang diemban tim Sebangsa tidak hanya membuat aplikasi yang bagus tapi juga memberikan manfaat luas kepada masyarakat Indonesia, fitur layanan publik 911 dan 1800 menjadi positioning Sebangsa sebagai pembeda dengan layanan jejaring sosial yang sudah ada, tidak mudah tapi saya yakin kami bisa melakukannya.

Dan inilah kami, hari ini, masih memperbaiki kutu hehehe..., masih mencari format terbaik untuk memproduksi sebuah produk, masih terus ingin belajar tentunya, masih memiliki semangat untuk memberikan sumbangsih kepada Indonesia dengan apa yang kita bisa.

Sangat bangga dengan semua teman-teman di Sebangsa, saya bersyukur Sebangsa memiliki anak-anak muda yang berbakat dan berharap akan terus membuahkan hasil karya yang membanggakan.

Beberapa tahun ini saya sering ikut sesi wawancara kandidat frontend developer , saya selalu senang bertemu dengan wajah-wajah baru apalagi yang memiliki interest yang sama yaitu bahasa pemrograman. Bagi saya sesi wawancara adalah seperti perbincangan santai malam hari, mencoba menghilangkan sekat dengan saling berbagi pengalaman, kalau memungkinkan biasanya saya mengajak kandidat untuk makan siang bareng di kantor agar suasana cair, perkara si kandidat tidak memenuhi requirement yang kita cari itu soal belakang, yang terpenting adalah impresi positif si kandidat terhadap perusahaan.

Kadang-kadang saya selalu menyampaikan "..diterima atau tidaknya kamu di perusahaan ini, saya harap kamu terus belajar bahasa pemrograman yang lain dengan baik dan meng-upgrade pengetahuan tentang bahasa pemrograman yang kamu kuasai...", kurang lebih seperti itu.

Belajar Bahasa Pemgrograman yang lain dengan baik

Programmer yang menguasai lebih dari 3 bahasa pemrograman patut diapresiasi, rasa keingintahuan seorang programmer adalah modal nomor satu dan sebaga pondasi continuous learning.

Hal positif lainnya yang didapat dari seorang programmer yang menguasai banyak bahasa pemrograman adalah caranya berpikir dan bertindak dalam menyelesaikan sebuah kasus.

Dan yang terpenting adalah mempelajarinya dengan baik.

Baru-baru ini saya juga melakukan test kepada kandidat mengenai penguasaannya dalam pemrograman, contoh sederhana adalah soal berikut:

Anda memiliki sebuah array:

$himpunan = array("ayah","ibu","kakak","adik");

Buatkan baris kode dengan hasil akhir seperti berikut:

1. Ayah 2. Ibu 3. Kakak 4. Adik

Agak mengkhawatirkan juga karena ada beberapa yang menggunakan baris kode ini untuk menampilkan hasil akhir di atas:

$i=0; foreach($himpunan as $val) { echo $i . '. ' . $val . '<br/>'; $i++; }

dibandingkan menggunakan baris kode berikut:

foreach($himpunan as $key=>$val) { echo ($key+1) . '. ' . $val . '<br/>'; }

Tidak ada yang salah pada baris kode pertama karena hasil yang dikeluarkan sudah sesuai, hanya saja baris kode kedua lebih elegan, dan ini membawa saya ke paragraf berikutnya.

Upgrade pengetahuan tentang bahasa pemrograman yang dikuasai

Setiap sesi wawancara saya selalu bertanya "Apa yang membuat kamu menjadi programmer?". Ada yang menjawab karena senang, karena mengambil jurusan informatika (IT), karena uang, dan lain-lain.

Tentu saya akan tertarik jika ada yang menjawab menjadi programmer karena senang. Karena percakapan berikutnya rasanya bakal menyenangkan, walaupun kadang-kadang tidak.

Senang programming satu hal, tapi ada satu bagian berikutnya yaitu continuous learning, ini hal yang rasanya perlu disadari, keinginan untuk terus belajar.

MySQLdb belum mendukung utf8mb, oleh sebab itu sebelum memasukkan teks yang mengandung emoji, sebelumnya menentukan charset terlebih dahulu.

Code:

Terlepas dari kualitas bagaimana BBM mengeluarkan aplikasinya di Android dan iPhone, saya ingin mengajak pembaca untuk berdiskusi mengenai opini saya tentang perbedaan target pengguna yang ingin di-akuisisi oleh BBM dibandingan dengan WhatsApp dan akan berkorelasi pada perbedaan fitur-fitur, tulisan ini akan fokus pada fitur percakapan grup.

Kenapa target pengguna? karena target pengguna akan mempengaruhi secara besar fitur-fitur di aplikasi yang akan dikembangkan.

Kenapa menyorot fitur grup? fitur grup adalah fitur yang advanced.

WhatsApp

WhatsApp menjadi platform chat kesukaan saya setelah mIRC, selain cepat, tampilannya sederhana, walaupun ada fitur-fitur yang masih kurang atau belum tepat penggunannya (menurut saya), misalkan:

Mute di grup, fitur mute bagi saya adalah pengguna tidak menerima chat apapun dari grup yang saya aktifkan fitur mute, saat ini WA masih mengirimkan semua obrolan pada grup yang saya mute.

Percakapan di grup, percakapan di WA adalah percakapan 1 kanal, akan susah bagi pengguna untuk fokus pada 1 pembicaraan. Topik pembicaraan cepat usang dan WA tidak menyediakan fitur untuk membuat kanal-kanal pembicaraan di sebuah grup. Jika ingin membuat kanal percakapan lagi, pengguna harus membuat grup tersendiri dan mengundang pengguna lainnya yang ingin bergabung.

Keanggotaan, WhatsApp fokus untuk mengakuisi pengguna telepon seluler dengan menggunakan nomor telepn seluler sebagai identitas pengguna, dan sebagai informasi, nama tidak wajib di-isi.

BBM

BBM bukan platform baru, diusung oleh Blackberry, BBM menjadi platform percakapan yang sukses di Indonesia. Gary Klassen, pembuat BBM mengirimkan pujian kepada pengguna BBM di Indonesia.

Fitur di BBM jauh lebih lengkap ketimbang WA, karena Blackberry di-produksi untuk pengguna di perusahaan atau kantor (enterprise). Maka otomatis, produk perangkat lunaknya mengikuti visi misi tersebut. Berikut fitur-fitur yang ada di percakapan grup pada BBM:

Multi Kanal Percakapan, jika ada topik menarik di-tengah-tengah percakapan, pengguna bisa membuat kanal percakapan sendiri tanpa harus keluar dari grup dan masih bisa fokus pada topik yang ingin di-diskusikan dan siapapun anggota di grup bisa bergabung pada kanal tersebut, jika sudah usah bisa keluar dari kanal percakapan tersebut tanpa harus keluar dari grup.

Media (Gambar) memiliki fitur chat tersendiri, BBM ingin mengirimkan pesan kepada pengguna, bahwa gambar yang diunggah oleh pengguna adalah bagian dari topik yang bisa di-diskusikan.

Events, pengguna bisa membuat jadwal acara sendiri dan pengguna lain di grup bisa melihat informasi tersebut.

Lists, jika sebuah grup ingin mengadakan acara outing , para pengguna di grup bisa membuat catatan persiapan apa saja yang perlu dicatat.

Keanggotaan, kenapa BBM tidak menggunakan nomor telepon mengakusisi

Dari ke-empat fitur tersebut, terlihat terlalu berat jika pengguna ingin membuat grup percakapan yang kebutuhannya hanya ingin berbicara yang ringan-ringan saja, seperti saya yang bergabung di grup percakapan temen-temen Volta98 (alumni Teknik Elektro UGM angkatan 1998) pada WhatsApp.

Namun, jika pengguna memiliki tim dalam berkerja, dan memerlukan aplikasi yang bisa mewakili kebutuhan pengguna untuk berkoordinasi dengan temen-temen saya dalam sebuah tim secara real-time, tentu saya akan memiliki BBM.

https://github.com/pcmanus/python-cql

Contoh kasus: Mendeteksi apakah ada URL (tanpa atau dengan http(s)://) dalam sebuah string, jika terdapat URL, URL tersebut digantikan dengan sebuah pola string (sbgsurl[index]) dan merekam URL tersebut ke dalam sebuah list.

Code:

#!/usr/bin/env python import re string = 'Some text with (id.berita.stackoverflow.com) t.co halo.ali kabarmu links in them like http://id.xxx:8080/ahay' regex = re.compile(r'([^\.\s]+\.[^\.\s]*)+[^\.\s]{2,}') link_index=-1 links=[] def linkconvert(text): def replacewith(matchobj): global link_index global links url = matchobj.group(0) text = unicode(url) # DOMAIN ALLOWED regexp = re.compile("\.net|\.org|\.edu|\.com|\.cc|\.br|\.jp|\.dk|\.gs|\.co\.id|\.am|\.ac\.id|\.co|\.be|\.am") if regexp.search(text) is not None: # Cleanup the start of the string rx = re.compile('^\W+') text = rx.sub(' ', text).strip() # Cleanup charcter at the end of the string rx = re.compile('\W+$') text = rx.sub(' ', text).strip() # Insert URL into links links.append(text) # Increment link_index += 1 return '[sbgsurl%s]' % link_index else: return text if text != None and text != '': return regex.sub(replacewith, text) else: return '' print linkconvert(string) print links

Result:

Some text with [sbgsurl0] [sbgsurl1] halo.ali kabarmu links in them like http://id.xxx:8080/ahay [u'id.berita.stackoverflow.com', u't.co']

Dari hasil linkconvert(string), halo.ali tidak digantikan dengan pola string sbgsurl, sama halnya dengan http://id.xxx....karena nama domain tidak terdapat di domain_allowed.

Kalau berkerja menggunakan Bottle, kode di atas akan menjadi masalah pada penggunaan global variabel, saran saya untuk mengimplementasikan konsep di atas mengguakan Class.

The answer is YES!

Just follow the instructions on this page https://github.com/opengeo/suite/tree/master/geoexplorer

if there is an error: [INFO] BUILD FAILURE, do not panic! An error occured because not all libraries provided in opengeo/suite, for example "suite/geoexplorer/externals/buildkit", so you need to download it from another repositories and put it into current folder.

if the installation (mvn install) has completed, you will have geoexplorer.war and geoexplorer/ in target/ directory, and put it into tomcat/webapps/. After that, restart the Tomcat.

Contoh kasus, Aplikasi memiliki satu activity mengambil data dari API, dan ketika terjadi kegagalan, muncul AlertDialog untuk pemberitahuan dan pengguna bisa langsung melakukan pemanggilan activity dari awal (OnCreate).

Berikut adalah MyHelpers.java:

public class MyHelpers { public static final void myAlert( final Activity activity, final String title, final String message, final String positiveLabel, final String negativeLabel, final Runnable onPositiveClick, final Runnable onNegativeClick) { AlertDialog.Builder dialog = new AlertDialog.Builder(activity); dialog.setTitle(title); dialog.setMessage(message); dialog.setCancelable (false); dialog.setPositiveButton(positiveLabel, new DialogInterface.OnClickListener () { public void onClick (DialogInterface dialog, int buttonId) { if (onPositiveClick != null) onPositiveClick.run(); } }); dialog.setNegativeButton(negativeLabel, new DialogInterface.OnClickListener () { public void onClick (DialogInterface dialog, int buttonId) { if (onNegativeClick != null) onNegativeClick.run(); } }); dialog.setIcon (android.R.drawable.ic_dialog_alert); dialog.show(); } }

Berikut adalah contoh untuk memanggilnya:

MyHelpers.myAlert(UserProfileActivity.this, "Connection Timeout", "", "Refresh", "Back to Previous Screen", new Runnable() { public void run() { // Refresh Cureent Activity Intent intent = getIntent(); intent.addFlags(Intent.FLAG_ACTIVITY_NO_ANIMATION); intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP); finish(); startActivity(intent); } }, new Runnable() { public void run() { // Back to previous Screen or Cancel finish(); } } );

Untuk menghindari duplikasi label pada layer, temen2x harus menggunakan SingleTile, karena Tiled akan memproduksi label per-tile (256x256 px).

Berikut contoh implementasi layer dengan menggunakan Tiled di Javascript OpenLayer:

// Tiled Layer the_layer = new OpenLayers.Layer.WMS( "My Layer", "http://localhost:8080/geoserver/merapi/wms", { layers: 'merapi:desa', isBaseLayer: false, tiled: true, format: 'image/png', tilesOrigin : map.maxExtent.left + ',' + map.maxExtent.bottom, yx : {'EPSG:26713' : false}, transparent: "true" }, { 'buffer': 0 } );

Berikut adalah penggunaan SingleTile di Javascript OpenLayer:

// SingleTile Layer the_layer = new OpenLayers.Layer.WMS( "My Layer", "http://localhost:8080/geoserver/merapi/wms", { layers: 'merapi:desa', isBaseLayer: false, format: 'image/png', yx : {'EPSG:26713' : false}, transparent: "true" }, { singleTile: true, ratio: 1, 'buffer': 0 } );