Bulan Oktober ini, tepatnya 20 Oktober 2020, Tokopedia kembali mengadakan START Summit Extension, konferensi teknologi virtual yang diadakan rutin sejak beberapa bulan lalu.
Dalam setiap gelarannya, konferensi ini mengangkat berbagai topik terkait inovasi teknologi yang telah berhasil dikembangkan perusahaan marketplace berlogo burung hantu berwarna hijau tersebut.
Pada START Summit Extension kali ini, tema yang dibahas yaitu “Tokopedia Front-End Journey: Democratizing Commerce through Web & Native Platform” dan menghadirkan empat orang pembicara yang merupakan para Nakama (sebutan karyawan Tokopedia) di bidang teknologi.
Keempat Nakama tersebut di antaranya Samuel Edwin (Technical Architect – iOS), Tiara Freddy Andika (Principal Engineer – iOS), Dendi Sunardi (Engineering Manager – Web Platform), dan Irfan Maulana (Principal Engineer – Web Platfrom).
Presentasi yang dibawakan oleh keempat Nakama tersebut dibagi ke dalam dua sesi, yakni iOS UI Development at Scale dan Unlocking New Capabilities for The Web.
Baca Juga: Inilah Potensi 5G dalam Meningkatkan Kehidupan Kita pada Masa Depan
Membangun UI (User Interface) untuk iOS
Pada awal sesi presentasi, Samuel Edwin (Technical Architect – iOS) membagikan praktik dan pengalamannya soal membangun iOS dari sisi UI (User Interface) di Tokopedia, di mana untuk mendevelop UI, samuel memulainya dengan penjelasan dari sudut pandang teknikal, yaitu penggunaan UIKit dan Auto Layout.
Samuel membagikan pengalamannya dalam menggunakan Auto Layout, di mana Samuel tidak merekomendasikan untuk menggunakan UIStackView berlebihan pada layout yang sangat kompleks.
“Hal ini dapat berpengaruh terhadap mobile phone yang memiliki spesifikasi lama,” ucap Samuel.
Selanjutnya, menurut Samuel masalah lain dari penggunaan Auto Layout adalah perubahan versi OS yang tidak terduga, di mana Auto Layout memiliki perbedaan implementasi di setiap versi iOS dan penggunaan UICollectionViewCell yang kerap sulit diatur tingginya pada sebuah halaman.
Berdasarkan pengalamannya menggunakan Auto Layout, Samuel lantas membagikan solusi yang digunakan ke tim Tokopedia, yakni dengan mengadopsi Texture.
“Texture merupakan kerangka yang menggunakan UIKit, namun tidak menggunakan Auto Layout dan development-nya menggunakan full coding,” cetus Samuel.
Lantas, seberapa andalkah kerangka ini?
Jika sebelumnya kebanyakan developer menggunakan UIView, dengan kerangka Texture tim iOS Tokopedia menggunakan ASDisplayNode yang dapat mudah digunakan.
Pada ASDisplayNode, komponen-komponen yang dibutuhkan sudah tersedia, baik itu untuk menampilkan gambar, button, scrollview, ataupun text field, sehingga semua item sudah memiliki pengganti masing-masing dari yang tersedia pada UIKit.
Layout pada Texture tidak menggunakan Auto Layout, melainkan Flexbox, di mana ini digunakan untuk web development.
Secara performa, dengan menggunakan Texture, tampilan UI menjadi jauh lebih smooth, terlebih ketika pengguna melakukan scrolling halaman.
Tinggi cell pun juga akan menyesuaikan layout, di mana ketika layoutnya sudah benar, maka tinggi cell akan mengikuti.
Nah jika sesi pertama membahas seputar sudut pandang dari sisi teknis, maka sesi berikutnya dilanjutkan dengan membahas dari sudut pandang manusianya atau tim yang berada di balik iOS.
Tiara Freddy Andika (Principal Engineer – iOS) menjelaskan bahwa Tokopedia mengadaptasi struktur organisasi tribe, di mana tribe ini terdiri dari lebih dari 20 anggota tim dengan fokus yang berbeda-beda.
“Setiap tribe memiliki UI Designer dan Developer masing-masing, sehingga tidak menutup kemungkinan adanya perspektif desain app yang berbeda yang kemudian berpengaruh terhadap alur pengembangan suatu fitur,” jelas Tiara.
Untuk mengatasi itu, tim iOS membuat suatu kerangka yang bernama SharedUI, suatu kerangka yang dibuat dengan menggunakan Texture untuk menyediakan UI komponen untuk setiap aplikasi iOS Tokopedia.
SharedUI dibuat dengan beberapa cara, yaitu dengan mengidentifikasi komponen berdasarkan penggunaan, behaviour, anatomi, dan penempatannya.
Proses pembuatan komponen SharedUI sendiri dibagi ke dalam beberapa tahap, yaitu:
- Pengumpulan kebutuhan komponen dari setiap UI designer pada setiap tribe yang dilakukan oleh Tim Core Design;
- Pembuatan komponen spesifikasi oleh tim Core Design, sambil berdiskusi dengan tim iOS Core mengenai kemungkinan yang terjadi dari spesifikasi yang dibuat;
- Pengembangan komponen yang memudahkan developer dalam mengembangkan sebuah fitur yang dilakukan oleh UX engineer.
Baca Juga: Penerima Penghargaan dari NASA Ini Diangkat Sebagai CIO TIBCO
Meningkatkan Kemampuan Baru di Web
Selanjutnya sesi ke dua membahas tentang kemampuan baru yang dapat diimplementasikan di web, dan bagaimana tim Web Platform di Tokopedia mengadopsinya. Sesi ini dibuka oleh pemaparan dari Dendi Sunardi (Engineering Manager – Web Platform).
Dendi menuturkan bahwa di industri e-commerce, web merupakan hal yang penting, karena sebanyak 35% pengguna menghabiskan waktunya di platform web, baik itu mobile web atau desktop web.
Apabila dibandingkan dengan Apps, sebanyak 51% pengguna tidak mengunduh aplikasi setiap bulannya, sehingga dari sini kita bisa melihat bahwa peluang web untuk berkembang masih sangat terbuka lebar.
Selain itu, ia menjelaskan soal tantangan e-commerce yang memiliki tiga hal utama, yaitu Acquisition, Conversion, dan Retention.
“Peran web yang paling besar terdapat pada Acquisition, yaitu bagaimana kita mendapatkan user-user baru, mengingat web memiliki kemampuan aksesibilitas yang lebih tinggi dan universal jika dibandingkan dengan platform lainnya,” tutur Dendi.
Lebih lanjut, Dendi menjabarkan beberapa alasan mengapa Tokopedia sangat serius dalam membangun sebuah Web.
Beberapa di antaranya adalah karena adanya kemudahan dalam mendistribusikan aplikasi, kemudahan akses untuk dari device apapun, ataupun kemampuan untuk selalu up to date ketika suatu fitur baru dirilis, yang memungkinkan para pengguna Tokopedia untuk langsung menikmatinya saat itu juga.
“Selain itu, Web juga memiliki tautan yang sangat mudah untuk dibagikan oleh pengguna, serta sifatnya yang universal,” imbuh Dendi.
Lantas, Bagaimana tim Web Platform Tokopedia dapat meningkatkan kemampuan web atau web capability?
Penjelasan berikut ini dipaparkan oleh Irfan Maulana (Principal Engineer – Web Platform). Di Tokopedia sendiri, sudah banyak diimplementasikan web capabilities.
Yang pertama adalah service worker, yang merupakan ‘tulang punggung’ bagi web Tokopedia untuk menerapkan berbagai peningkatan secara progresif.
Service worker memberikan kemampuan pada web, salah satunya untuk melakukan penyimpanan sumber daya yang membantu mempercepat waktu muat bagi pengguna yang datang berulang kali.
Teknik ini juga membuka kesempatan bagi Tokopedia untuk menyajikan pengalaman berbeda ketika pengguna sedang dalam keadaan offline.
Berikutnya adalah push notification yang dapat membantu tim Tokopedia ketika ingin mengirim pesan penting yang relevan dengan pengguna Tokopedia.
“Kemampuan push notification ini dapat menjadi pengganti bagi pengguna yang tidak memasang aplikasi Tokopedia di device mereka,” ujar Irfan.
Lalu, ada pula contact picker yang dapat membantu pengguna dalam menginput nomor handphone tanpa perlu mengetiknya lagi.
Kemudian, ada pula WebShare API yang memungkinkan pengguna untuk membagikan satu pesan ke berbagai platform media sosial melalui dialog box, seperti yang biasa dijumpai pada aplikasi Native.
Masih menjelaskan seputar web capabilities yang diimplementasikan Tokopedia, saat ini tim Web Platform dapat mengetahui kondisi jaringan internet dari pengguna melalui Network Information, sehingga konten yang dikirimkan dapat menyesuaikan kondisi dari jaringan tersebut.
Web OTP juga merupakan bagian dari web capabilities yang berfungsi untuk mempermudah pengguna dalam menuliskan kode OTP, tanpa perlu lagi melihat isi dari SMS yang dikirimkan.
“Yang terakhir adalah content indexing, di mana konten yang dirasa bermanfaat akan dikirimkan ke pengguna untuk disimpan ke dalam device mereka, sehingga dapat dibaca meskipun pengguna dalam keadaan offline,” jelas Irfan.
Sampai pada di penghujung konferensi, START Summit Extension ditutup dengan penjelasan seputar web capabilities yang sedang dalam tahap pengembangan oleh tim Web Platform Tokopedia, yakni Badging App Icon, Background Sync API, dan Web NFC.
Oh ya sebagai informasi saja, Tokopedia sendiri berencana akan terus mengadakan START Summit Extension setiap bulannya.
Perusahaan memiliki tujuan utama di mana konferensi ini diharapkan bisa menjadi wadah bagi para pegiat teknologi di seluruh Indonesia untuk dapat belajar dan berdiskusi dengan para expert di bidangnya.
Baca Juga: Dengan Teknologi AI Tokopedia Mampu Tingkatkan Pengalaman Pelanggannya