Pengembangan UI/UX: Merancang Nyawa Sebuah Aplikasi

by | Aug 3, 2019

 

Beberapa hari yang lalu startup unicorn (atau decacorn) di bidang jasa angkut penumpang atau penumpang mengganti logonya setelah sekian lama berada di jajaran puncak tangga daftar aplikasi yang ada di Google Play di Indonesia. Netizen Indonesia yang ramah dan murah komentar tak mau ketinggalan obrolan seputar perubahan ini. Tak hanya perubahan logo yang menjadi bahasan netizen karena memang bukan hanya logonya saja yang berubah tapi user interface-nya juga berubah. Mulai dari icon-icon yang terdapat pada aplikasi hingga font.

Kenapa perubahan user interface ini ramai dibicarakan? Well, sebelum kita membahas mengapa user interface itu penting, yuk kita dalami dulu apa itu user interface, apa itu user experience (UX) dan mengapa penyebutan dua hal tersebut UI/UX sering dijadikan satu bagaikan komponen yang tak terpisahkan?

 

Apa itu UX?

UX adalah singkatan dari user experience. Hampir sama dengan arti literalnya, user experience berbicara tentang bagaimana pengalaman seorang user atau pengguna dalam menggunakan suatu produk. Yup, UX tidak melulu dikaitkan dengan software atau yang sekarang lebih sering kita sebut apps. Bahkan produk semacam closet duduk pun berhak memiliki UX yang baik. 

Pengembangan (development) user experience memiliki tujuan agar produk dapat memberikan suatu nilai kepada pengguna entah itu kemudahan, kenyamanan, kepuasan, estetika atau apapun itu sehingga user ingin terus menggunakan produk tersebut. Jika berbicara tentang produk software, fokus dari pengembangan user experience apalagi kalau bukan membuat wireframe dan struktur komponen-komponen yang ada dalam sebuah apps beserta fungsinya. 

 

Apa itu UI?

UI adalah akronim dari user interface sering diterjemahkan sebagai antarmuka pengguna. Hal ini juga bisa diartikan sebagai apapun yang ada di depan muka pengguna ketika mereka berinteraksi dengan suatu produk. Setiap halaman, tombol, icon, font, atau warna dalam sebuah aplikasi merupakan elemen-elemen yang ada dalam UI. Pengembangan software atau aplikasi belakangan ini semakin bersifat user centered menjadikan UI sebagai komponen utama.

Berbicara tentang UI tentu saja kita harus berbicara tentang desain, kegunaan, konten, dan masih banyak lain. Masih ingat beberapa dekade lalu ketika kita mengetikkan sebuah password di halaman web dan yang muncul masih berupa tulisan yang masih bisa dibaca bukan bulatan-bulatan kecil seperti sekarang ini? Yup, UI memang tidak hanya berbicara masalah estetika tapi juga keamanan.

 

Komponen dalam UI/UX

Penyebutan user interface dan user experience sering digabung sehingga tak sedikit yang bingung membedakan mana UI dan mana UX. Sebenarnya memang UI dan UX merupakan komponen yang tak terpisahkan, pengembangan UI akan percuma jika tidak memenuhi objective dari UX. Begitu pula pengembangan UX sepertinya tidak akan berjalan tanpa adanya UI. Dalam pengembangan UI/UX terdapat beberapa komponen penting yang berperan untuk ‘mengarahkan’ perilaku user dalam menggunakan suatu apps.

 

Information Architecture

Information architecture yang biasanya disingkat IA secara singkat adalah struktur dari segala bentuk informasi yang akan ditampilkan ke pengguna. IA merupakan bentuk paling dasar dari UI/UX baik itu web ataupun aplikasi native. Sebelum merancang information architecture kita harus memahami informasi apa saja yang dibutuhkan saat user membuka aplikasi kita. Tidak hanya ‘apa’ tapi kita juga harus tahu seberapa penting informasi tersebut bagi pengguna.

Membanjiri pengguna dengan semua informasi sekaligus dalam satu langkah dapat membuat pengguna bingung, membuatnya tak bisa mengingat poin utama yang ingin kita sampaikan, dan bahkan dapat menimbulkan ‘pengalaman buruk’ bagi pengguna karena merasa dipaksa. Oleh karena itu, mengapa setiap website terdapat ‘navigation bar’ yang membuat pengguna bisa memilih sendiri informasi apa saja yang ingin dia dapatkan.

Aktivitas utama dalam IA adalah mengorganisir informasi baik itu apa, kapan, di mana, dan bagaimana user mendapatkan informasi tersebut. Ada beberapa contoh metode untuk mengorganisir informasi dalam information architecture yaitu:

  • Hierarchical
    Metode pengorganisasian informasi berdasarkan hirarki didasari pada teori psikologi yang dikemukakan oleh Gestalt tentang hirarki visual di mana setiap elemen visual seperti bentuk, warna, letak, dan ukuran menyimpan informasi seberapa penting hal tersebut untuk dihiraukan. Metode inilah yang menyebabkan mengapa menu navigasi di suatu website walaupun terbilang kecil tapi terletak di atas dan ada di setiap halaman karena menu navigasi bukan informasi utama tapi informasi yang berfungsi sebagai penunjuk sesuai dengan namanya.
  • Sequential
    Metode pengorganisasian sequential adalah mem-breakdown informasi menjadi beberapa tahapan yang harus dilalui user satu per satu. Fungsi dari metode ini adalah agar user tidak lupa dengan informasi yang diberikan. Metode sequential banyak digunakan oleh e-commerce yang memiliki banyak detail informasi yang diberikan sebelum user melakukan pembelian.
  • Matrix
    Bisa dibilang metode pengorganisasian informasi yang magabut (makan gaji buta) karena metode ini melimpahkan kerjaan mengorganisir informasi kepada user. Sorting merupakan fitur yang menggunakan metode matrix. Tapi jangan senang dulu, metode ini sebenarnya agak merepotkan bagi seorang information architect karena menyusun jenis metadata apa saja yang berguna bagi user untuk setiap data cukup memakan waktu.

 

Interaction Design

Seperti yang semua orang tahu, user tidak hanya berperan pasif dengan cuma memandangi produk seperti layaknya karya seni. Mereka disebut user karena menggunakan suatu produk yang tentu saja terdapat interaksi di dalamnya. Oleh sebab itu, desain interaksi termasuk komponen yang tak kalah penting dalam pengembangan UI/UX.

Dalam produk software atau aplikasi, desain interaksi berbicara tentang bagaimana user mengklik, menekan, menggeser layar dan apa yang terjadi setelah itu. Desain interaksi yang baik itu mengacu pada ergonomi dan kebiasaan/perilaku dari pengguna. Salah satu contoh dari desain interaksi ini adalah bagaimana Google menerapkan ‘swipe’ (menggeser) untuk mengarsip email pada Gmail. Metode ‘swipe’ ini menggantikan metode ‘hold’ (menekan lama) karena metode ‘swipe’ dinilai lebih efisien dan praktis daripada ‘hold’ sedangkan jumlah rata-rata email masuk ke user semakin bertambah dari tahun ke tahun sehingga manfaat perubahan ini dapat dirasakan oleh pengguna.

 

Usability

Usability jika diterjemahkan ke dalam Bahasa Indonesia berarti kegunaan. Secara definisi usability adalah seberapa mudah pengguna menggunakan produk. Jika Anda pernah mendengar istilah ‘user-friendly’, hal tersebut merupakan tujuan dari komponen ini. Usability sering kali berbicara tentang seberapa familiar dan kompeten seorang pengguna dalam menggunakan fitur dari sebuah produk. Selain itu, usability juga berbicara tentang berapa lama waktu yang dibutuhkan bagi user untuk memahami apa yang harus dia lakukan untuk menggunakan suatu fitur dalam sebuah produk.

 

Wireframing

Wireframe merupakan prototype kasar dalam pengembangan UI/UX. Ketika kita sudah mempunyai IA, desain interaksi, dan konsep usability, saatnya bagi UI/UX designer untuk menyusun ketiga komponen dalam sebuah layout. Layout ini berfungsi sebagai acuan utama bagi engineer dalam proses produksi software atau aplikasi. Wireframe juga berguna dalam melakukan pre-test terhadap sebuah fungsi atau fitur.

 

Visual Design

Ketika wireframe sudah ada di tangan, sekarang saatnya bagi visual designer berkarya menuangkan ide-idenya dalam bentuk, warna, dan juga font. Walaupun ini merupakan komponen terakhir dalam UI/UX, visual design adalah komponen yang paling mudah untuk dapat dikenali, dikomentari, bahkan dicela. Ini terjadi karena visual design berada di garda depan sebuah UI/UX. Dari mata langsung jatuh ke hati, begitulah metafora yang sering dipakai oleh para pujangga untuk menggambarkan pentingnya peran elemen visual dalam membangun experience pengguna.

 

Pentingnya Pengembangan UI/UX untuk Sebuah Produk

Memberikan pengalaman yang baik bagi pengguna merupakan objective paling utama, tentunya setelah produk tersebut bisa digunakan. Seringkali UI/UX menjadi faktor penentu apakah pengguna mau untuk terus menggunakan produk tersebut atau tidak. Bahkan, UI/UX suatu produk turut menentukan asumsi seseorang terhadap produsen brand. Ya, UI/UX juga merupakan bagian dari branding. Maka tidak heran jika pengembangan UI/UX seharusnya mendapat perhatian lebih agar umur produk berlangsung lama.

Berkenalan Dengan Julia, Bahasa Pemrograman Berperforma Tinggi Tapi Mudah Dipelajari

by | Jul 8, 2019

Bulan Juli telah tiba. Mungkin di bulan ini kita akan sibuk mengucapkan ulang tahun kepada teman yang bernama Yuli, Yulia, Julia, atau Yulianto. Omong-omong tentang Julia, ada bahasa pemrograman dengan nama tersebut dan bisa dibilang masih lucu-lucunya karena belum genap berumur setahun sejak stable release versi 1.0 pada Agustus 2018. Yup! Secara de facto Julia lahir di bulan Agustus. Mungkin seharusnya para kreator Julia mulai memikirkan untuk mengganti nama Julia menjadi Agus.

Julia merupakan bahasa pemrograman umum (general purpose) level atas (high level) yang dikembangkan oleh tim dari MIT (Massachusetts Institutes of Technology). Walaupun belum genap setahun, komunitas Julia berkembang secara eksponensial. Pada Januari 2019 saja, Julia telah mencapai 3,2 juta unduhan dan lebih dari 1 juta Docker image dari Julia tersebar di seantero dunia.

 

Latar Belakang Diciptakannya Julia

Julia lahir dari tangan Jeff Bezanson, Stefan Karpinski, Viral B. Shah, dan Alan Edelman. Mereka adalah para ilmuwan komputer di MIT yang memiliki cita-cita menciptakan bahasa pemrograman high-level tapi dengan performa yang cepat untuk siapa saja. Pada tahun 2012, mereka merilis website untuk memberi kabar kepada dunia tentang misi mereka kepada dunia. Julia sendiri sudah rilis di tahun yang sama semenjak para kreator merilis website-nya tapi versi yang dirilis pada saat itu masih merupakan versi alfa dan beta. Sintaks pada versi sebelum versi 1.0 masih sering berubah-ubah sehingga jauh dari kata stabil.

Jika ditanya kenapa memilih nama ‘Julia’, para kreator tersebut hanya memberikan jawaban diplomatis, “Tak ada alasan khusus dalam memberi nama. Kami hanya menerima usulan dari teman kami dan menurut kami itu nama yang cantik.” 

Julia lahir karena para kreator ingin memecahkan masalah klasik yang dialami oleh para programmer. Saat memilih bahasa pemrograman, para programmer selalu dihadapkan pada situasi di mana mereka harus memilih salah satu saja antara performa yang dimiliki oleh bahasa pemrograman low-level atau kemudahan yang ditawarkan oleh bahasa pemrograman high-level.

Edelmen melakukan pengamatan yang dilakukan di organisasi besar bahwa seringkali pengembangan software dilakukan dengan menggunakan bahasa pemrograman high-level di tahap awal kemudian organisasi tersebut kemudian merekrut tim lain untuk menulis ulang kode software-nya dengan bahasa pemrograman low level. Menurutnya, metode ini sangat tidak efektif karena harus memulai siklus baru. Itulah sebabnya dia dan teman-temannya menciptakan Julia.

 

Apa yang Membuat Julia Berbeda

Seperti yang telah dibahas sebelumnya, Julia adalah bahasa pemrograman high-level dengan performa yang dapat menyaingi bahasa pemrograman low level. Julia disebut-sebut sebagai bahasa pemrograman yang memiliki kecepatan seperti C dengan kemudahan seperti Python, dinamis seperti Ruby, kemampuan matematika yang hebat seperti MatLab, dan keahlian statistik seperti R. Memang janji ini terkesan sedikit utopis, akan tetapi dengan angka popularitas Julia yang naik dengan cepat agaknya sebagian besar janji ini berhasil ditepati. 

Julia memang bahasa pemrograman yang dapat digunakan untuk keperluan apapun, akan tetapi para kreator dari Julia mengatakan bahwa Julia lebih menyasar ilmuwan. Dengan performanya yang tinggi, Julia diharapkan dapat membantu para ilmuwan untuk melakukan analitik big data, melakukan penelitian yang memiliki komputasi tinggi untuk penelitian ilmiah, serta simulasi desain rekayasa.

Sama seperti Python dan JavaScript yang populer belakangan ini, Julia merupakan bahasa pemrograman multi-paradigma yang berarti bisa digunakan untuk pemrograman object-oriented maupun pemrograman fungsional. Selain itu, bahasa pemrograman ini juga mendukung penggunaan multi-thread dan multi-core pada CPU secara built-in baik itu dalam sebuah chip ataupun dalam sebuah sistem yang memiliki banyak chip. Ke depannya para kreator dari Julia akan meningkatkan kemampuan Julia dalam menggunakan berbagai macam jenis core seperti Graphic Processing Unit (GPU) dan Tensor Processing Unit (TPU) milik Google. Tentu hal ini akan membantu performa Julia dalam pengembangan AI maupun visualisasi big data.

Core yang ada dalam Julia sendiri menggunakan bahasa C dan C++ dalam LLVM-nya. Yup! Feel dari Julia seperti scripting language yang menggunakan JIT compiler. Akan tetapi, Julia dapat juga di-compile ke berbagai kode natif bahasa pemrograman low-level.

 

Syntax Julia Mirip Dengan Python

Karakter syntax yang digunakan dalam Julia sangat sederhana dan memang dirancang untuk keperluan matematis. Hal ini tentu saja mengingatkan kita dengan bahasa pemrograman Python. Berikut beberapa contoh syntax yang digunakan dalam Julia:

 

1 + 1      # => 2
8 – 1      # => 7
10 * 2     # => 20
35 / 5     # => 7.0
10 / 2     # => 5.0  
div(5, 2)  # => 2    
5 \ 35     # => 7.0
2^2        # => 4
12 % 10    # => 2


# Contoh variabel
someVar = 5
if someVar > 10
    println(“someVar is totally bigger than 10.”)
elseif someVar < 10    # Klausa ini opsional
    println(“someVar is smaller than 10.”)
else                    # Klausa ini juga optional.
    println(“someVar is indeed 10.”)
end
# => Mengeluarkan “some var is smaller than 10”


# Membuat fungsi
function add(x, y)
    println(“x is $x and y is $y”)
    x + y
end
add(5, 6)
# => x is 5 and y is 6
# => 11

Untuk dokumentasi lebih lengkapnya,bisa dilihat di situs Julia Programming

 

***

Itulah tadi sekilas tentang bahasa pemrograman baru Julia. Kepopuleran Julia yang langsung meningkat drastis mungkin saja disebabkan oleh semakin umumnya pemakaian machine learning hampir di semua industri. Dengan fitur-fitur yang dimiliki dan yang sedang dikembangkan oleh Julia, bukan tidak mungkin jika Julia juga bisa digunakan untuk game development sehingga game dapat memanfaatkan pemrograman multi-threded secara efisien.

GraphQL : Solusi Pintar untuk Berkomunikasi dengan API

by | Jun 27, 2019

Beberapa waktu yang lalu, kita sempat membahas perbedaan antara jenis database SQL dan NoSQL di mana perbedaan terbesar terletak pada bahasa query-nya. Mumpung masih mengandung QL dalam memori kita walaupun sebenarnya agak berbeda, kali ini kita mengupas tentang bahasa query yang lain yaitu GraphQL.

Berbeda dengan SQL dan NoSQL yang merupakan bahasa query database, GraphQL merupakan bahasa query untuk sebuah API (Application Program Interface) yang bisa juga dinobatkan sebagai konsep baru API. Oleh karena itu, GraphQL ini tidak bisa ditandingkan dengan SQL atau pun NoSQL. Lawan sesungguhnya GraphQL ini adalah siapa lagi kalau bukan API legendaris yang dipakai jutaan umat manusia yaitu REST (Representation State Transfer).

 

Asal-usul GraphQL

GraphQL diciptakan oleh tim internal Facebook yang juga digunakan untuk keperluan internal pada tahun 2012. Karena dianggap terlalu sakti untuk digunakan Facebook sendiri, akhirnya pada tahun 2015 Facebook merilis GraphQL untuk publik. Project GraphQL kemudian berpindah tangan dari Facebook ke organisasi baru yaitu GraphQL Foundation yang berada di bawah naungan Linux Foundation pada tahun 2018.

Ide diciptakannya GraphQL sendiri adalah untuk memecahkan masalah keterbatasan yang dimiliki oleh REST API. Contohnya, katakanlah kita ingin menampilkan beberapa item buku dalam sebuah situs toko buku dan dalam setiap item menampilkan profil singkat dari penulis buku tersebut. Jika kita menggunakan API tradisional kita harus menarik data dari dua endpoint. Pertama, data item yang berisi judul buku, harga, atau sinopsis dengan endpoint misal tokobuku.shop/item/:id. Kedua, data penulis yang berisi nama, foto profil, buku apa saja yang pernah ditulis, dan biografi dengan endpoint tokobuku.shop/author/:id. Beban akan semakin bertambah jika kita harus menampilkan data lain seperti review dari pembeli dan lain sebagainya.

 

Solusi yang Bernama GraphQL

Solusi yang ditawarkan oleh GraphQL sebenarnya sangat simpel, “daripada harus mengurus beberapa endpoint ‘bodoh’ , kenapa tidak buat satu endpoint ‘pintar’ yang bisa menangani query rumit lalu mengemas output data dalam bentuk apapun yang client minta.” Pada intinya GraphQL berfungsi sebagai layer antara client dan beberapa data source, menerima request dari client, dan memberikan data sesuai dengan apa yang diminta. Untuk lebih jelasnya bisa dilihat dari gambar berikut.

GraphQL : Solusi Pintar untuk Berkomunikasi dengan API 1

Jika masih bingung, saatnya kita bermain metafora! Bayangkan kita adalah client yang banyak maunya, server GraphQL adalah seorang personal assistant, dan sumber data adalah toko. Suatu hari kita butuh mengambil laundry, memesan makanan, dan belanja bulanan. Karena kita tak mau repot dan memiliki personal assistant yang tahu di mana letak toko langganan kita, kita tak perlu mendatangi tempat laundry, restoran, atau supermarket. Yang perlu kita lakukan hanyalah menyerahkan daftar belanjaan, mengatakan menu yang kita inginkan, dan memberikan nota laundry ke personal assistant kita. Kita tinggal santai-santai di rumah atau mengerjakan hal lain dan menunggu personal assistant kita datang membawa barang-barang pesanan kita.

 

3 Pondasi Utama

GraphQL sendiri dibangun atas 3 pondasi utama yaitu query, resolver, dan schema.

 

Query

Dengan masih memakai metafora yang sama, kita tentunya harus memakai bahasa yang sama dengan assistant kita agar komunikasi berjalan lancar bukan? Walaupun bahasa query yang digunakan GraphQL agak berbeda dengan bahasa query yang lain, query tersebut sangat sederhana dan mudah dipahami. Berikut contoh pemakaian query GraphQL untuk menarik data salah satu item buku.

 

query {
  book(id: “10002a”) {
    title
    synopsis
    author {
      name
      avatarUrl
      profileUrl
      }
   }
}

 

Familiar? Yup! Query GraphQL sangat mirip dengan dokumen JSON.  Dalam GraphQL kita dapat memasukan argumen untuk setiap field. Agar bisa men-generate item buku secara dinamis, kita dapat memasukkan query berikut.

 

query ($id: String) {
  book(id: $id) {
    title
    synopsis
    author {
      name
      avatarUrl
      profileUrl
    }
  }
}

 

Resolver

Kembali lagi ke metafora sebelumnya. Personal assistant kita tidak tahu akan ke mana jika dia tidak mengetahui alamat dari masing-masing tempat yang akan dituju. Untuk kita harus memberi tahu alamat dari masing-masing tempat. Sebuah resolver memberitahu GraphQL bagaimana dan di mana sebuah data akan dikirimkan sesuai dengan field-nya masing-masing. Berikut merupakan contoh resolver yang menggunakan GraphQL-Tools dari Apollo.

 

Query: {
  book(root, args) {
    return Books.find({ id: args.id });
  }},
Book: {
  author(book) {
    return Users.find({ id: book.authorId})
  }}

 

Dalam query di atas, selain memiliki resolver pada root kita juga memiliki resolver pada field author di dalam book.

 

Schema

Schema adalah pondasi utama yang paling utama atau jika meminjam salah satu bapak-bapak YouTuber yang sangat jenius itu schema merupakan “core of the core” dari GraphQL. Akan terlalu panjang jika membahas schema dalam GraphQL. Jika penasaran dengan bagaimana schema dari GraphQL silahkan kunjungi situs GraphQL yang memuat dokumentasi schema GraphQL.

 

***

 

Itulah tadi artikel yang bertujuan mengenalkan GraphQL. Tak akan ada habisnya jika kita membahas GraphQL secara keseluruhan karena banyak sekali library Node.JS yang memiliki relasi terhadap graphQL ini seperti Express ataupun Gatsby.

Hadirkan PWA di Google Play Store dengan Trusted Web Activity

by | Jun 24, 2019

Saat ini, web developer dimanjakan dengan teknologi yang dapat meng-compile web app mereka menjadi native app seperti React Native atau Ionic. Ada juga teknologi yang dapat membuat web app tampak seperti native secara instan melalui PWA. Belum puas dengan PWA, kini Google kembali memanjakan web developer dengan Chrome versi 72 dan setelahnya dengan fitur yang disebut trusted web activities. Trusted Web Activities (TWA) memungkinkan para web developer untuk mendistribusikan PWA mereka melalui Google Play Store.

Bukan Teknologi yang Benar-benar Baru

Sebelum membahas TWA lebih jauh lagi, mari kita flashback sejenak bagaimana Android developer menampilkan konten web kepada pengguna aplikasi mereka. Ada dua protokol yang bisa digunakan untuk menampilkan konten web melalui android app:

  1. Webview
    Cara ini adalah cara yang paling sering digunakan oleh Android developer karena lebih fleksibel. Webview membuat developer dapat menyematkan konten web dalam tampilan native, menginjeksi cookies, dan ‘mengikat’ (binding) kode Javascript ke dalam kode Android (Java, Kotlin, dsb). Kekurangan dari metode ini adalah webview cukup menyita hardware resources seperti proses dan memory. Metode webview ini tidak saling berbagi ‘state’ (cookies dan cache) dengan browser.

     

  2. Chrome Custom Tab (CCT)
    Chrome Custom Tab merupakan fitur yang disediakan oleh Chrome mulai dari versi 45. Metode ini akan membuka tab chrome khusus ketika pengguna membuka link halaman web. Kelebihan dari metode ini adalah performa tinggi tapi dengan konsekuensi harus berbagi cookies dan cache dengan Google Chrome. Saat pengguna menggunakan CCT, aplikasi tidak bisa mengakses cookies, storage, dan cache dari halaman web tersebut yang sangat berguna untuk keperluan riset UX. Selain itu, bagaimanapun juga CCT merupakan bagian dari Google Chrome sehingga kita masih melihat bar atas khas milik Google Chrome yang menampilkan alamat URL.

 

Apa Bedanya Trusted Web Activities dengan 2 Metode di Atas?

Tentu saja TWA merupakan teknologi yang lebih baru bila dibandingkan dengan 2 metode tersebut. TWA hampir mirip dengan CCT tapi sama sekali tidak menampilkan UI dari browser dalam hal ini Google Chrome. Bar paling atas di mana kita bisa melihat alamat URL tidak lagi tampak. Hal ini berguna bagi native app untuk menampilkan atau mengupdate kebijakan privasi dan konten statis lainnya sehingga pengguna merasa bahwa mereka masih di app yang sama.

Fungsi yang paling penting dari TWA seperti yang telah disebutkan dalam judul artikel ini yaitu membuat PWA yang telah kita bangun bisa didistribusikan via Google Play Store. Pengguna tidak lagi harus mengetik URL dalam Chrome dan menekan menu ‘Add to Homescreen’ untuk menginstall PWA. Cara menginstall PWA yang sudah mendukung TWA sama persis dengan menginstal aplikasi native lainnya.  File APK yang akan diunduh oleh pengguna hanya sebesar beberapa ratus KB saja. ServiceWorker dalam PWA dapat berjalan mulus seperti yang diharapkan sehingga sama seperti PWA ‘standar’ yang dapat dibuka secara offline.

Walaupun lebih canggih daripada CCT, TWA masih mewariskan kekurangan CCT yang lain yaitu native app tidak bisa mengakses web state karena pada dasarnya aplikasi ini masih berjalan di atas Chrome. Oleh karena itu, sangat disarankan kepada para developer untuk meletakkan metode login di dalam web app dengan OAuth bukan di dalam package APK.

 

Apa yang Harus Dipenuhi Agar PWA Kita Dapat Didistribusikan Melalui Google Play Store?

Dalam pengerjaan proyek TWA ini, seorang web developer membutuhkan tools tambahan di luar proyek PWA biasa. Jadi tidak hanya mengandalkan code editor dan server saja. Tools yang dibutuhkan antara lain:

  • Android Studio
  • TWA Support Library
  • Google Play Developer Account (Premium)

Dalam PWA, selama ServiceWorker dan web app kita berjalan tanpa masalah, pengunjung langsung dapat ‘menginstal’  web app kita. Jika ingin mendistribusikannya melalui Google Play Store tentu saja akan sedikit lebih ribet. TWA tidak serta merta membuat Google mau mendistribusikan di Play Store miliknya. Berikut ini syarat yang harus dimiliki PWA agar dapat didistribusikan di Play Store:

  • Tidak melanggar kebijakan Google Play
  • Dapat diinstall
  • Skor performa Lighthouse (tools untuk debugging PWA) harus di atas 80
  • Direkomendasikan untuk memiliki kebijakan privasi

 

***

Akhir kata, dengan hadirnya TWA ini pasar web development akan semakin ramai. Jika Anda seorang web developer yang menguasai banyak teknologi termasuk PWA di dalamnya, pilihan Anda untuk menginvestasikan waktu dan pikiran dalam menguasai skill ini sudah tepat. Jika Anda masih ingin meningkatkan kemampuan web development dengan menguasai teknologi PWA, Anda dapat mengikuti kelas pelatihan Progressive Web App dari Inixindo Jogja.

SQL vs NoSQL: Perbedaan dalam Menentukan Pilihan Database

by | Jun 21, 2019

 

Berbicara mengenai database, mana yang lebih baik antara SQL atau NoSQL adalah topik yang selalu menjadi perdebatan baik yang baru belajar maupun profesional yang sudah lama malang melintang di dunia database sehingga dipanggil suhu oleh para juniornya. Tak main-main, perbedaan ini sering memanas dan menimbulkan konflik antara teman kerja atau pun teman komunitas persis seperti perdebatan fans sepakbola atau fans politik. Beberapa dekade yang lalu  SQL database merupakan pilihan wajib untuk jenis database karena memang pada saat itu SQL adalah satu-satunya jenis database yang dapat diandalkan.

Situasi dan kondisi mulai berubah sejak negara api menyerang dengan sistem database yang sering disebut dengan NoSQL. Jenis database ini menawarkan sesuatu yang baru. Setiap jenis database memiliki karakter dan kelebihannya masing-masing sehingga sebenarnya jika kita benar-benar memahaminya perdebatan sengit tak perlu terjadi apalagi sampai mengakibatkan keluar dari grup WhatsApp.

 

Definisi

Sebenarnya perbedaan antara SQL dan NoSQL secara mendasar sudah dapat dijelaskan dari akronimnya.

 

SQL

SQL merupakan singkatan dari Structured Query Language. Sebenarnya SQL sendiri merupakan bahasa yang digunakan untuk mengatur/mengelola data dalam database relasional. Jadi sebenarnya SQL sendiri pada mulanya tidak digunakan untuk menyebut jenis database. Akan tetapi karena jenis (kategori) database yang berbeda memiliki bahasa query yang berbeda juga maka agaknya salah kaprah yang juga dialami oleh penulis (karena alasan SEO tentunya) dapat dimaklumi.

Database relasional menggunakan ‘relasi’ (yang biasanya disebut tabel) untuk menyimpan data dan mencocokkan data tersebut dengan memakai karakteristik umum di setiap dataset. Beberapa contoh database management system yang menggunakan SQL antara lain Oracle, Sybase, Microsoft SQL Server, PostgreSQL.

Munculnya SQL berawal dari peran Larry Ellison salah satu pendiri Oracle yang mengimplementasikan ide dari petinggi IBM Edgar F. Cobb. Cobb mengeluarkan makalah pada tahun 70’an yang mendeskripsikan tentang database di mana objek dapat dikonstruksikan dan di-query memakai sesuatu yang disebut SQL. Dia menggunakan SQL untuk membuat data (dalam objek yang disebut tabel) dan skema untuk data tersebut yang mendeskripsikan isian dalam beberapa kolom. Sedangkan untuk setiap record dalam SQL database disebut ‘baris’.

NoSQL

Dilihat dari namanya, database NoSQL sebenarnya sudah cukup menjelaskan. NoSQL merupakan database yang tidak membutuhkan skema dan tidak memiliki relasi untuk setiap tabel. Semua bentuk dokumen dari NoSQL adalah JSON yang mudah dibaca dan dimengerti. NoSQL banyak diminati karena memiliki performa yang tinggi dan bersifat non-relasional sehingga dapat memakai berbagai model data. Beberapa contoh dari database NoSQL yaitu MongoDB, MarkLogic, Couchbase, CloudDB, dan Dynamo DB.

 

Memahami dari Perbedaan

Sebenarnya banyak perbedaan yang dimiliki di antara dua database tersebut tapi inilah perbedaan yang paling mencolok antara SQL dan NoSQL:

  • Bahasa
  • Skalabilitas
  • Komunitas
  • Aplikasi

 

Bahasa

Seperti telah disebutkan sebelumnya bahwa SQL sendiri merujuk pada bahasa query, perbedaan antara SQL dan NoSQL yang langsung dapat dilihat adalah bahasa query dari masing-masing database. Bahasa SQL adalah bahasa query yang terstruktur. Hal ini menyebabkan SQL menjadi agak terbatas. SQL mengharuskan kita untuk menentukan skema dalam membangun struktur data bahkan sebelum kita membuat database tersebut. Data kita harus mengikuti struktur yang sama setelah database dibuat. Oleh karena itu, kita dituntut untuk merencanakan secara matang dan berhati-hati dalam mengeksekusi data.

Sebaliknya, database NoSQL tidak memiliki skema (setidaknya skemanya dapat berubah-ubah) dan tak terstruktur. Selain itu data NoSQL dapat disimpan dalam berbagai cara baik itu graph-based, document-oriented, column-oriented, atau yang terorganisir dengan baik seperti KeyValue. Fleksibilitas ini memungkinkan kita untuk membuat dokumen terlebih dahulu sebelum perencanaan matang dan menentukan struktur terlebih dahulu. KIta juga bisa menambahkan isian (field) secara dadakan serta menerapkan syntax yang berbeda-beda dalam setiap database.

 

Skalabilitas

Hal lain yang membedakan antara SQL dan NoSQL adalah dari segi skalabilitas. Hampir seluruh database SQL memiliki skala vertikal. Ini berarti jika kita ingin mengembangkan database kita, yang dapat kita lakukan adalah menambah kapasitas muatan di satu server dengan meng-upgrade komponennya seperti RAM, kapasitas SSD, atau CPU. Hal ini cukup beralasan mengingat SQL lahir di masa di mana hardisk dan komponen lain masih mahal. Jadi dibandingkan membangun server baru, akan lebih efisien jika kita meng-upgrade komponennya secara bertahap. Walaupun begitu, beberapa korporasi besar seperti Oracle terus melakukan pengembangan agar database SQL dapat memiliki skala horizontal.

Sebaliknya, database NoSQL memiliki skala horizontal di mana jika kita ingin mengembangkan database kita, kita hanya perlu menambah server baru. Inilah mengapa NoSQL dipakai oleh perusahaan seperti Facebook yang memiliki jumlah pengguna sangat besar dan jenis data yang bermacam-macam.

 

Komunitas

Jika dilihat dari segi komunitas, tentu saja SQL memiliki komunitas yang lebih besar dibandingkan NoSQL karena SQL sudah berumur puluhan tahun. Tapi walaupun begitu, perkembangan komunitas NoSQL sangat cepat. Lihat saja banyaknya tutorial MongoDB yang bertebaran di internet. Hadirnya stack seperti MEAN (MongoDB, Express JS, Angular JS, Node JS) atau MERN (MongoDB, Express JS, React JS, Node JS) membuktikan bahwa walaupun terbilang baru, NoSQL memiliki komunitas yang cukup dapat diandalkan.

 

Aplikasi

Seperti yang telah beberapa kali disebutkan bahwa SQL bersifat table-based di mana database ini cocok digunakan untuk aplikasi yang membutuhkan transaksi multi baris. Contoh dari aplikasi ini adalah sistem akuntansi dan mungkin legacy system yang pada awalnya dibuat untuk struktur relasional.  Sedangkan untuk NoSQL, database jenis ini cocok digunakan untuk database yang membutuhkan data set yang besar seperti big data.  NoSQL juga banyak dipakai aplikasi jejaring sosial atau customer management yang struktur datanya bisa berubah sewaktu-waktu tergantung dari perkembangan aplikasinya sendiri.

 

***

 

Itulah tadi beberapa perbedaan dasar antara SQL dan NoSQL. Tidak ada jawaban pasti mana yang lebih baik. Semua disesuaikan kebutuhan oleh masing-masing aplikasi.

TensorFlow JS untuk Deteksi Wajah (Tutorial Part 2 : Face-api JS)

by | Jun 20, 2019

Pastikan anda telah membaca atikel sebelumnya tentang bagaimana memulai menggunakan Tensorflow.js. tutorial kali ini merupakan lanjutan dari tutorial sebelumnya yang mana seperti kita ketahui bersama kehebatan Tensorflow.js yang dapat memudahkan para developer web untuk melakukan proses pengenalan wajah dan sebagainya. Pada kesempatan kali ini kita akan mesharing cara melakukan proses pencocokan wajah atau (face recognition) dengan menggunakan face-api.js yang berjalan diatas Tensorflow.js core. Perbedaan mendasar tutorial kali ini dengan turorial sebelumnya adalah, kalau tutorial sebelumnya kita telah dapat memanfaatkan face-api.js untuk mengenali wajah. Maka kali ini kita akan membandingkan wajah, yang berarti terdapat dua model yang harus disediakan.

Saya telah menyiapkan contoh model dan contoh gambar yang akan di tes. Semua kelengkapan dapat di download di sini
Langsung saja seperti yang sudah dijelaskan dalam tutorial sebelumnya pastikan webserver dan peralatan yang telah dibutuhkan telah terinstal ke dalam computer Anda. Jika semua peralatan telah tersedia semua maka tinggal ikuti langkah-langkah di bawah ini.

  1. Buat folder baru dengan nama face-matching di folder httdoc Anda
  2. Extract file yang ditelah didownload ke dalam folder yang kita buat
  3. Buat file index.html
  4. Tambahkan tag standar html dan pastikan tag heder mempunyai tampilan seperti di bawah ini.
    TensorFlow JS untuk Deteksi Wajah (Tutorial Part 2 : Face-api JS) 2
  5. Tambahakan input file pada body yang akan kita gunakan untuk mengupload data
    TensorFlow JS untuk Deteksi Wajah (Tutorial Part 2 : Face-api JS) 3
  6. Buatlah file script.js dalam folder yang sama dengan file index.html menyesuaikan dengan sintak yang ada dalam line 9.
  7. Isikan deklarasi variable untuk menghadle event file upload click
    TensorFlow JS untuk Deteksi Wajah (Tutorial Part 2 : Face-api JS) 4
  8. Tambahkan sintak pemanggilan terhadap library tensorflow face-api.js
    TensorFlow JS untuk Deteksi Wajah (Tutorial Part 2 : Face-api JS) 5
  9. Tambahkan fungsi start yang akan dijalankan otomatis ketika semua model tensorflow selesai di-load
    TensorFlow JS untuk Deteksi Wajah (Tutorial Part 2 : Face-api JS) 6
  10. Tambahkan fungsi untuk membaca model sample data yang telah disiapkanKetika start dijalankan tambahkan dulu sebuah tag <div> sebagai container
    TensorFlow JS untuk Deteksi Wajah (Tutorial Part 2 : Face-api JS) 7
  11. Panggil fungsi loadLabeledImages() sebagai inisialisasi sumber image model atau bisa dibilang database wajah kita.
  12. Buat event listener untuk file upload. Sehingga proses pencocokan akan dijalankan ketika file berhasil di upload
    TensorFlow JS untuk Deteksi Wajah (Tutorial Part 2 : Face-api JS) 8
  13. Tambahkan sintaks untuk mencocokan data sisipkan sitak di bawah ini setelah line 21
    TensorFlow JS untuk Deteksi Wajah (Tutorial Part 2 : Face-api JS) 9
  14. Jalankan program

 

Selamat Mencoba!

Untuk source code tutorial ini dapat diunduh di sini.