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.

Agile: Project Management yang Fokus ke Pengguna

by | Jun 17, 2019

 

Dalam artikel scrum kita telah sedikit membahas tentang agile project management di mana scrum merupakan framework dari agile yang populer digunakan selain kanban.  Dalam artikel tersebut kami lebih memfokuskan membahas ritual-ritual yang dijalani saat kita menggunakan scrum tapi justru kurang memberi pengertian tentang apa agile itu sendiri. Oleh karena itu, kami berharap dalam artikel ini kami berharap kami memberikan gambaran umum tentang agile kepada semua kalangan termasuk yang belum memiliki pengalaman dalam software development sekalipun.

 

Apa Itu Agile?

Agile adalah metodologi dalam pengembangan software dengan proses-proses kecil yang berulang-ulang atau yang sering disebut dengan iterasi. Berbeda dengan metodologi waterfall di mana kita memiliki alur linear awal hingga akhir yang tak bisa dipotong atau diubah di tengah proses. Prinsip dari agile sendiri adalah fleksibel terhadap perubahan.

 

Agile: Project Management yang Fokus ke Pengguna 2

 

Agile sendiri lahir dari perusahaan Jepang Toyota pada tahun 70’an di mana pada tahun tersebut produksi mobil menerapkan sistem waterfall. Jadi memang agile sebenarnya tidak murni milik perusahaan yang bergerak di bidang software development saja. Sebelum Toyota menerapkan metode yang disebut Toyota Production System pada dekade tersebut, mereka merekrut W. Edwards Deming untuk melatih ratusan managernya. W. Edwards Deming merupakan seorang engineer yang menyempurnakan metode siklus Plan-Do-Study-Act (PDSA).

 

Agile Manifesto

We are uncovering better ways of developing software by doing it and helping others do it.

Through this work we have come to value:

Individuals and interactions over processes and tools

Working software over comprehensive documentation

Customer collaboration over contract negotiation

Responding to change over following a plan

 

Agile memiliki manifesto seperti yang tertulis di atas. Metode agile mengedepankan individu dan interaksi dibanding proses dan alat, software yang terus dikerjakan dibandingkan dokumentasi yang komprehensif, kolaborasi dengan pelanggan dibandingkan negosiasi kontrak, serta peka terhadap perubahan dibanding selalu mengikuti rencana. Walaupun begitu, metode ini tidak serta-merta meninggalkan semua yang berada di sebelah kanan dari manifesto. Akan tetapi jika dihadapkan pada kondisi harus memilih satu di antara dua, maka yang dipilih adalah yang sebelah kiri.

 

Contoh Penerapan Agile

Agile memang lebih mudah diterapkan pada proyek pengembangan software karena pada dasarnya sebuah produk software atau aplikasi merupakan kumpulan dari beberapa fitur-fitur kecil yang digabungkan jadi satu.  Itulah mengapa metode ini populer di kalangan start-up digital. Akan tetapi seperti yang sudah dibahas sebelumnya, agile justru lahir dari produsen mobil di mana pengguna melihat produk mobil secara keseluruhan. Untuk itu, kami akan memberikan contoh penerapan agile dalam pengembangan mobil karena mobil lebih familiar untuk semua kalangan.

Katakanlah kita ingin membuat sebuah mobil. Pada metode waterfall kita membuat list tentang apa yang dibutuhkan oleh pengguna dari mobil tersebut mulai dari jenis mobil,  kapasitas penumpang, tenaga mesin, sistem transmisi, sistem pengendalian, dan sebagainya. Lalu kita akan mendesain mobil secara keseluruhan mulai dari chasis, body, mesin, hingga interior. Setelah keseluruhan desain diselesaikan mungkin kita akan meminta persetujuan dari klien yang memesan mobil tersebut dan kemudian memproduksi bagian-bagiannya satu persatu.

Proses perakitan pun dimulai, kita merangkai bagian-bagian tersebut hingga menjadi sebuah unit mobil. Kita kembali mengkonsultasikan produk tersebut ke klien. Di tahap inilah sering muncul permasalahan klasik metode waterfall. Di saat klien kurang puas dengan katakanlah satu bagian saja, misalnya bagian suspensi. Kita harus membongkar atau bahkan mendesain ulang keseluruhan mobil termasuk rangka dan bodi.

Di dalam metode Agile dengan menggunakan contoh yang sama, setelah membuat daftar tentang apa yang dibutuhkan target pengguna dari sebuah mobil saatnya memilah fitur tersebut untuk diprioritaskan semisal suspensi yang nyaman pada urutan pertama. Maka kita akan memfokuskan pada desain rangka dan damper (shock absorber) dan memproduksi part tersebut. Lalu kita akan meminta klien untuk mengetes-nya walaupun kita belum membuat mesin ataupun body-nya. Bahkan jika perlu, kita bisa memasang bodi atau mesin dari produk yang sudah pernah dibuat sebelumnya baik oleh kita sendiri atau produsen lain agar mobil bisa berjalan terlebih dahulu selama pengetesan. Jika ada ketidakpuasan dari klien, kita tidak usah repot-repot membongkar desain dari keseluruhan mobil. Setelah mendapat persetujuan dari klien, maka kita akan fokus untuk menyediakan fitur selanjutnya. Proses ini berjalan berulang-ulang hingga semua kebutuhan pengguna atas sebuah mobil tercukupi. Jika profesi Anda berkecimpung dalam pengembangan software atau aplikasi tentu Anda sudah mendapatkan gambaran singkat contoh agile dan waterfall dalam proyek yang Anda jalankan.

***

Jadi pada intinya, perbedaan metode agile dan waterfall terletak pada proses di mana agile lebih melibatkan klien / kustomer dalam  menyempurnakan bagian-bagian kecil dari sebuah produk. Sesuai dengan manifesto agile yang sudah kami sebutkan sebelumnya, produk yang diciptakan melalui metode ini cenderung akan lebih bisa menyesuaikan dengan perubahan-perubahan yang disebabkan oleh tren maupun inovasi baru. Memang penerapan metode ini tidak semudah teorinya. Perusahaan sekelas Toyota saja butuh waktu dan effort yang lebih untuk menerapkan metode agile ini dengan melatih karyawannya di level perencana maupun pelaksana.

Jika Anda ingin menguasai penerapan agile sesuai dengan PMBOK 6, Anda dapat mengikuti class of the month dengan materi “Agile Practice Guide in PMBOK 6” oleh Inixindo Jogja.