Teknologi Dibalik Aplikasi Tokopedia Versi iOS

Uzone.id - Tokopedia START Summit Extension yang diadakan Oktober kemarin menampilkan kisah 5 orang Nakama (karyawan Tokopedia) di balik aplikasi e-commerce tersebut. Tiga di antaranya berkutat untuk membuat aplikasi Tokopedia iOS.

Salah satunya adalah Samuel Edwin sebagai Technical Architect iOS Tokopedia. Dia membagikan praktik dan pengalamannya soal membangun iOS dari sisi UI atau User Interface. Untuk mendevelop UI, Samuel memulainya dengan penjelasan dari sudut pandang teknikal, yaitu penggunaan UIKit dan Auto Layout.

Saat menjelaskan Auto Layout, Samuel tidak merekomendasikan untuk menggunakan UIStackView berlebihan pada layout yang sangat kompleks. Hal ini dapat berpengaruh terhadap mobile phone yang memiliki spesifikasi lama. Selanjutnya, masalah lain dari penggunaan Auto Layout adalah perubahan versi OS yang tidak terduga, dimana 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 oleh tim Tokopedia, yakni dengan mengadopsi Texture. Texture merupakan kerangka yang menggunakan UIKit, namun tidak menggunakan Auto Layout dan developmentnya menggunakan full coding. Lalu, seberapa andalkah kerangka ini?

Baca juga: Diapresiasi Apple, Aplikasi iOS Tokopedia Punya 4 Fitur Baru

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, dimana 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, dimana ketika layoutnya sudah benar, maka tinggi cell akan mengikuti.

Jika sesi pertama membahas seputar sudut pandang dari sisi teknis, maka sesi berikutnya akan dilanjutkan dengan membahas dari sudut pandang manusianya atau tim yang berada dibalik iOS. Tiara Freddy Andika selaku Principal Engineer – iOS menjelaskan bahwa Tokopedia mengadaptasi struktur organisasi tribe, dimana 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.

Untuk mengatasi itu, tim iOS membuat suatu kerangka yang bernama SharedUI, dimana ini adalah 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.

Baca juga: Indonesia Masuk 3 Besar Pengguna WhatsApp Terbanyak di Dunia, Tapi...

Proses pembuatan komponen SharedUI sendiri dibagi ke dalam beberapa tahap, yaitu:

1. Pengumpulan kebutuhan komponen dari setiap UI designer pada setiap tribe yang dilakukan oleh Tim Core Design
2. Pembuatan komponen spesifikasi oleh tim Core Design, sambil berdiskusi dengan tim iOS Core mengenai kemungkinan yang terjadi dari spesifikasi yang dibuat
3. Pengembangan komponen yang memudahkan developer dalam mengembangkan sebuah fitur yang dilakukan oleh UX engineer.

Dipaparkan lebih lanjut oleh Tiara, SharedUI membagi desain sistem ke dalam tiga bagian yaitu color, typography, dan component. Color yang digunakan pada aplikasi ditentukan melalui Color Token, dimana saat ini aplikasi Tokopedia telah mendukung dark mode, sehingga semua warna akan ditentukan ke dalam dua versi yaitu light dan dark. Hal ini memudahkan developer agar tidak perlu menggunakan beberapa Color Token untuk dua mode tampilan.

Selanjutnya untuk typography, developer dapat dengan mudah membuat suatu teks dengan hanya melihat tipe tipografinya saja, serta dapat pula menentukan warna serta format dari setiap tulisan.

Bagian terakhir yaitu component, tim Core Design telah membuat spesifikasi komponen seperti component toaster yang digunakan untuk memberi feedback secara instan kepada pengguna setelah melakukan action tertentu. Feedback tersebut dapat berupa pesan positif ataupun pesan negatif, tergantung pada action yang dilakukan oleh pengguna agar pengguna mengetahui dampak dari action yang dilakukannya, serta mengetahui apa yang harus dilakukan selanjutnya.

Setelah membahas seputar spesifikasi, Design System component juga dibagi berdasarkan fungsinya, yaitu Base Component, Actions, Navigation, User Guide/ Information Display, serta User Input. Hal terakhir yang dibagikan oleh Tiara adalah soal keuntungan menggunakan kerangka SharedUI. Keuntungan yang pertama adalah dari segi kecepatan pengembangan yang akan jauh lebih cepat, dan yang kedua adalah dari sisi user experience yang konsisten pada setiap halaman aplikasi.

START Summit Extension merupakan konferensi teknologi virtual pertama yang dihadirkan oleh Tokopedia melalui Tokopedia Academy. Berbagai topik terkait inovasi teknologi yang dilakukan oleh Tokopedia akan dikemas dan dibawakan oleh para talenta berbakat di bidangnya masing-masing.

Tokopedia akan terus mengadakan START Summit Extension setiap bulannya sebagai wadah bagi para pegiat teknologi di seluruh Indonesia untuk dapat belajar dan berdiskusi dengan para expert di bidangnya. Hal ini sesuai dengan visi dari Tokopedia Academy untuk membina para talenta teknologi Indonesia untuk menjadi ahli teknologi masa depan.