4 Hari Membuat Progressive Web App Siakad Kampus

Beberapa minggu yang lalu ada kabar kalau sistem akademik kampus akan dirombak ulang atau ditulis ulang agar menjadi app yang lebih baik.

Menariknya, staff IT di kampus sedang seru-serunya mendebatkan rencana pengembangan ini, apakah siakad akan ditulis ulang menggunakan PWA (Progressive Web App) atau Native App? Untuk itu, izinkan saya ikut andil untuk mendukung pilihan menggunakan PWA dengan membuat prototype aplikasi siakad versi PWA.

Tali mbulet

Tiap minggu, terkadang saya berusaha untuk menyibukkan diri. Entah dengan belajar library baru ataupun membuat project iseng. Biasanya project-project yang dibuat adalah aplikasi yang bisa mempercepat atau mengefisiensi kegiatan harian. Salah satu contohnya bisa dibaca disini

Motivasi

Keresahan yang saya rasakan selama semester ini adalah sering lupa dengan jadwal kuliah. Yaaa menurut saya buat apa mengingat jadwal kuliah? Ya Kan? Karena bisa dilihat melalui sistem akademik (Siakad). Tapi sayangnya, saya masih kurang nyaman dengan cara ini. Karena butuh tenaga dan waktu ekstra hanya untuk sekedar melihat jadwal. Nggak percaya? akan saya beri langkah-langkahnya:

  1. Nyalain paket data
  2. Buka Browser
  3. Harus membuka situsnya terlebih dahulu
  4. Login SSO Kampus untuk akun
  5. Klik link menuju sistem akademik mahasiswa
  6. Lalu klik link menuju Homepage mahasiswa

Selesai? Belum dong…

7. Klik menu Portal

Eh bener gak ya? 😕 sampai lupa langkah-langkah saking banyaknya. Bentar saya izin buka webnya dulu……

8. Klik perkuliahan mahasiswa

9. Klik jadwal

Alhamdulillah akhirnya muncul tuh jadwal. Bayangkan jika langkah-langkah ini dilakukan beberapa kali dalam sehari. nggak capek sih, tapi gemes aja.

Saatnya Siakad Berkembang

Mulai dari sisi desain responsif….

Siakad Progressive Web App!

Mayoritas pengguna internet mengakses web melalui ponsel, ataupun perangkat mobile lainnya. Ini yang menjadi alasan kenapa sebuah aplikasi atau web haruslah responsif dan nyaman saat dibuka di layar kecil. Tentu dengan tidak melupakan pengguna desktop.

Selain disibukkan dengan langkah yang panjang, saat mengakses jadwal, kita juga harus repot-repot zoom in dan zoom out laman web siakad. Belum lagi penampilan jadwal yang masih menggunakan tabel dan mengharuskan user untuk scroll ke kanan dan ke kiri bila layar ponselnya kurang lebar. Ini disebabkan karena sistem lama tak mendukung responsive design.

Laman Login Siakad Extended yang clean and neat. Haha..

Dengan tampilan baru yang nyaman dan menarik, mampu menambah interest user untuk stay dan betah menggunakan web app tersebut. Saya pribadi menggunakan teknik mobile-first design. Sehingga tidak terlalu capek untuk proses pembuatan interfacenya. Percayalah mendesain dari layar kecil menuju ke layar besar itu lebih mudah ketimbang sebaliknya.

Salah satu inspirasi saya adalah website salestock.com yang fokus pada user mobile. Tapi saat di desktop, tampilannya tetap rapi dan mudah dimengerti.

Easy To Access

Poin terpenting menurut saya pribadi. Sebuah web haruslah mudah untuk diakses. Dengan fitur PWA (Progressive Web App) user bisa melakukan add to homescreen action. Sehingga, Web app ini bisa terasa seperti aplikasi native yang diinstall dari playstore ataupun app store.

Percayalah. Siakad Extended telah menerapkannya. Jadi, add to homescreen sekarang juga!

Cara Melakukan Add To Home Screen

Web App Haruslah Instan

Untuk pembuatan yang super ngebut yaitu selama 4 hari saja. Sepertinya saya belum menerapkan konsep App Shell dengan sempurna pada aplikasi ini. Tapi tenang, selalu ada waktu untuk terus berkembang.

Biasanya kalau di web, user selalu menemui laman putih (atau loading halaman) terlebih dahulu dan waktunya juga relatif lama. Menurut saya, user tidak boleh menunggu laman putih ini lebih dari 5 detik. Karena ketika lebih dari 5 detik, user akan malas untuk melanjutkan dan lebih memilih untuk menutup laman tersebut.

Apa Siakad Extended sudah memiliki load time yang rendah? pada awalnya akan membutuhkan sedikit waktu, karena disini terjadi proses caching atau penyimpanan lokal sementara pada device. Tapi setelah laman termuat, maka kunjungan selanjutnya akan sangat cepat! hanya perlu 1 hingga 3 detik saja. Nggak percaya? Buktikan sendiri.

Tampilan Awal Langsung muncul secara instan

Dengan adanya App Shell, web bisa beraksi layaknya aplikasi native! Karena App shell adalah tampilan awal aplikasi yang langsung muncul secara instan. Jadi langsung kelihatan menubarnya dan komponen-komponen utamanya. Paling tidak, user disuguhi oleh tampilan interface. Bukan hanya sekedar layar putih yang membosankan.

UX Saat Loading

Masalah terbesar yang saya alami saat mengembangkan aplikasi ini adalah…. tidak punya data. Iya benar. Saya tak punya akses langsung untuk data siakad. Jadi, loading timenya akan cukup memakan waktu. Tapi ingat, hanya pada awalnya saja terasa sedikit lamban.

Untuk mengakali hal ini, perlu desain UI yang mampu membuat user mau menunggu. Pada awalnya saya terpikir untuk menggunakan teknik illusion Of Speed yang biasa teman-teman temui di youtube atau facebook. Tampilannya seperti ini.

Illusion of speed

Untuk load time data yang mencapai hingga 5 detik lebih, saya rasa cara ini kurang efektif, karena cukup membosankan melihat skeleton dalam waktu 5 detik lebih.

Akhirnya saya menggunakan cara seperti yang dilakukan oleh web asana yaitu dengan memberi tahu user apa yang sedang mereka tunggu melalui scrolling text.

Tampilan loading milik Siakad Extended adalah seperti berikut.

Loading text yang mengedukasi user

Entah kenapa saat saya recording gambar di atas, server dan internet saya sedang cepat-cepatnya (biasanya butuh waktu minimal 5 detik). Sehingga belum sempat menampilkan loading text yang berganti secara menyeluruh.

Anyway, Cara ini saya rasa relatif cukup efektif, karena user akan tau apa yang sedang mereka tunggu.

Bisa diakses Offline Lho!

Nggak percaya? Berikut komparasi goole.com dengan siakad extended saat keadaan offline.

Kondisi saat offline

Google akan mengeluarkan dinosaurus andalannya saat offline, sedangkan siakad extended akan menggunakan data lokal anda! yap! benar, anda tetap bisa mengakses siakad extended saat offline baik melalui browser maupun melalui icon di home.

Dengan syarat, konten telah pernah diakses sebelumnya….

Mengumpulkan Respon Beberapa Teman

Rasanya tak adil jika saya menilai apa yang saya buat sendiri. Saya mengajak beberapa teman untuk ikut mencoba siakad extended. Dan saya menyuruh mereka untuk membuat story berupa hasil screenshot dari aplikasi siakad yang telah mereka akses menggunakan akun mereka.

VIP users yang mencoba siakad extended terlebih dahulu :))

Dan Alhamdulillah, ternyata cukup banyak yang interest dengan adanya tampilan baru dari siakad ini. Berikut beberapa respon yang saya kumpulkan.

Kekepoan Netijen

Questions

Dari sini saya mendapatkan beberapa Questions. Berikut pertanyaan-pertanyaan yang harus saya jawab:

>> “Fal nggak sekalian diJadiin App?”

PWA sudah cukup mumpuni dan nyaman untuk bersaing dengan Aplikasi Native yang ada di App Store. Malah lebih enak PWA, tidak perlu download, cukup add to homescreen kan?

Native App terkadang memakan storage. Hayo… ngaku siapa yang tiap kali install aplikasi merasa berat mengorbankan aplikasi lain untuk dihapus 😆

>> “Fal ini passwordku aman kan?”

Siakad extended tidak menyimpan data pribadi dari pengguna. Tidak ada proses penyimpanan data diri secara eksternal pada aplikasi ini.

Data yang disimpan secara eksternal adalah data token untuk kebutuhan server dan cache yang sifatnya temporary. Data Cache Hanya berada di dalam device user itu sendiri. Jadi, jangan khawatir. Aplikasi ini sangat menjaga privasi data seseorang.

>> “Bisa ngapain aja ini Siakad Extendednya?”

Teman-teman bisa melihat rekap nilai, profil diri masing-masing dan jadwal mingguan secara instan.

Dan ada quote-quote inspirasi pada laman jadwalnya. Yaa, itung-itung buat tambahan semangat…

>> “Adakah pengembangan lebih lanjut?”

Rencananya saya ingin menambahkan menu “news” yang dimana akan menampilkan berita terkini dari web kampus. Tapi ini masih rencana

>> “Ini cara updatenya gimana fal? Kalau ada pembaruan?”

Enaknya PWA, kita cukup refresh laman PWA untuk mendapatkan update terbaru. Mungkin kedepannya saya akan memberikan interface tambahan untuk memudahkan user melakukan update. Tapi pada dasarnya, hanya cukup merefresh laman PWA kita. pull to refresh~

>> “Dari tadi kita bahas Siakad Extended mulu tapi nggak dikasih aksesnya nih?”

Haha. Monggo buat teman-teman mahasiswa (kampus saya) yang ingin mengakses siakad extended, bisa menuju link dibawah ini

Kesimpulan

Progressive Web App memiliki fitur yang canggih dan hampir menyamai native app, sayangnya para stakeholder bisnis lebih percaya bahwa native app lebih baik. Padahal, PWA juga perlu dipertimbangkan. Dengan kemudahan aksesnya, kemudahan updatenya serta kemudahan pengembangannya.

PWA berjalan seperti native App? bisa kok. Seperti kata iklan,

Bikin Aplikasi? PWA aja…

Penutup

Setiap detil isi konten dalam artikel ini tidak bermaksud untuk show off,menyinggung, menyindir, ataupun sejenisnya. Melainkan hanya untuk mendukung Siakad agar dibangun sebagai Progressive Web App dengan user experince yang lebih baik.

Saatnya kita memperbaikki sedikit demi sedikit sistem lama. Dan tetap terus mengembangkan sistem baru secara bertahap.

Sangat terbuka untuk kritik dan saran. Kalau saya salah, mohon dengan sangat untuk diingatkan. Semoga bermanfaat dan jangan lupa Clap and Share~

Let’s talk about some projects with me

Just Contact Me At: