Wednesday, May 22, 2013

Membuat Aplikasi Smart Poster Writer/Reader Menggunakan Android NFC dan Mifare Classic

Smart Poster merupakan teknologi yang mengubah poster yang tadinya hanya "statis" menjadi "dinamis", yaitu dengan meng-embed sebuah URL pada poster tersebut sehingga alih-alih membaca keterangan yang tertera pada poster, pembaca akan membuka link URL yang tentunya isinya dapat berubah-ubah sesuai kebutuhan.

Teknologi ini diimplementasikan dengan dua cara: QR Code (barcode 2 dimensi), dan NFC. Ada perdebatan mengenai teknologi smart poster ini.

Pertama, secara natural, orang tidak tertarik untuk melihat poster yang sama berulang kali, walaupun sebenarnya isi URL-nya berubah-ubah, lagipula bagaimana kita bisa tahu kalau isi URL-nya telah berubah?

Kedua, masalah security. Orang dapat mengganti gambar QR code, atau menyusupkan kartu NFC tanpa sepengetahuan pemilik poster karena keduanya tidak mencolok (sulit membedakan secara visual). Dengan cara ini, orang dapat memanfaatkan smart poster orang lain untuk meredirect ke URL dia.

Ketiga, masalah harga tag NFC. Perbedaan harga smart poster NFC dengan poster biasa sangat jauh. Apakah memang tambahan harga itu worth it untuk kebutuhan bisnis.

Terlepas dari tiga masalah diatas, smart poster sudah mulai dipakai terutama pada poster informasi publik di bandara, stasiun, terminal, dsb. Juga sudah diimplementasi di restoran-restoren (untuk pesan makanan), dan juga diimplementasikan di etalase virtual (orang melihat etalase produk berupa smart poster, lalu dari URL semart poster, orang tersebut membeli produknya).

Berikut contoh code aplikasi smart poster writer pada Android:

Pada code diatas, kita mengimport library NFC dan Mifare, lalu membuat variable berupa Tag, NFC, dan MifareClassic. Pada saat onCreate, semua variable ini diinisialisasi, dan fungsi handlernya juga diinisialisasi. Saya membuat dua fungsi handler yang dipanggil berdasarkan intent-nya. Yang akan saya jelaskan adalah createTag(getIntent()). Berikut isi createTag(getIntent()):

Code akan dieksekusi ketika muncul trigger berupa terdeteksinya NFC card/tag ke Android. Lihat line berikut:

mTagFromIntent = intent.getParcelableExtra(NfcAdapter.EXTRA_TAG);.

Variable mTagFromIntent di-bind dengan intent, ika intent tidak NULL, maka jalankan thread, dimana thread akan menjalankan fungsi writePoster() di background. Fungsi writePoster() adalah untuk melakukan koneksi dan transaksi data dengan NFC card/tag. Lihat code dibawah ini:

Pada code diatas, kita menulis data (NdefRecord) ke NFC card/tag berupa URI, sehingga ketika card ini dideteksi oleh Android, secara otomatis Android akan membuka web-bowser dan redirect page ke URI yang tertulis pada card/tag tersebut. Lihat line berikut:

NdefRecord uriRecord = NdefRecord.createUri(url);
NdefMessage message = new NdefMessage(uriRecord);

Adapun untuk jenis data yang lain, cara penulisannya berbeda. Jenis-jenis data yang bisa ditulis ke NFC dijelaskan pada spesifikasi NDEF (NFC Data Exchange Format), atau bisa juga dicek di Android SDK API berikut: http://developer.android.com/reference/android/nfc/NdefRecord.html

OK, sampai disini kita bisa melakukan fungsi write ke NFC tag berupa data URL. Selebihnya, code yang ada adalah bagian User Interface. Sebagai bonusnya, saya berikan contoh code sleek User Interface dengan fitur-fitur berikut:

  • Card Sliding Animation - mirip animasi card-nya Google Now
  • Tranparent Image Overlay - bisa dipakai untuk membuat UI tutorial, biasanya ditampilkan ketika user baru pertama buka aplikasi
  • Web View - web browser yang diembed di aplikasi
  • Multiple Page/Actvity with PushButton Intent - ini sih standard, yaitu perpindahan page/activity yang ditrigger PushButton

Code bisa didownload di https://github.com/yansyaf/android-smartposter-writer. Kalau ada pertanyaan, silakan comment dibawah. Enjoy! (ya2n)

13 comments:

  1. maaf nih, ini kan buat ngirim URL ke smat poster, bisa berlaku ke smart tag juga ga?

    terus kira kira kalo yang mau kita kirim itu text atau contact, gmn caranya ya?

    terima kasih sebelumnya

    ReplyDelete
  2. Smart poster itu hanya istilah saja, tetap saja pakai smart tag (NFC tag).

    Tipe data yang dikirim didefinisikan di NdefRecord. Silakan cek di http://developer.android.com/reference/android/nfc/NdefRecord.html#RTD_TEXT

    ReplyDelete
  3. aplikasinya sangat menarik, bagus sekali aplikasinya

    ReplyDelete
  4. Replies
    1. beli chip nfc banyak tempatnya, kalau beli ketengan (satu dua buah) bisa di Jaya Plaza Bandung harganya berkisar rp.70rb - 30rb tergantung jenis dan spek nya, kalau mau beli skala banyak (>10000 buah) bisa ke distributor resmi, misal distributor NXP, Infoneon, dll

      Delete
    2. :D saya baru tahu kalau smartphone yang tidak punya chip nfc dapat pasang sendiri, jadi minat mau pasang, mau belajar banyak tentang nfc di android... kalau menggunakan card reader misal dari acs, tutorial yang bisa di pelajarin dimana yah?

      ilmunya bagus, trims...

      Delete
  5. kalo program di atas udah jadi, trs cara mensematkan ke NFC tag-nya gimana?
    Makasih.. mohon dibalas :)

    ReplyDelete
    Replies
    1. Program diatas dijalankan di smartphone/table Android yang punya fitur NFC, lalu tempelkan tag NFC-nya ke smartphpne/tablet tsb, isi data lalu tekan tombol tulis, maka data akan terlulis ke tag NFC tersebut.

      Delete
  6. itu masukin programnya lewat androit atau apa dan kalau pakai android di memakai aplikasi apa untuk memasukan programnya

    ReplyDelete
  7. This comment has been removed by the author.

    ReplyDelete
  8. om, kalo kasusnya begini gimana?

    ketika chip mifarenya ditempel ke smartphone nya tiba tiba muncul message "unfortunately, Smart Poster Tag Writer has stopped"..

    Mohon dengan sangat bantuannya

    ReplyDelete
  9. siang,

    mau tanya : setelah url ditulis pada tag NFC menggunakan aplikasi yang dibuat itu, apakah tag dapat dibaca oleh smartphone yang menggunakan aplikasi yang berbeda? misal NFC trigger/nfc tag launcher dll??

    terimakasih

    ReplyDelete