Gizmologi
Situs Berita Gadget dan Teknologi Indonesia

Tokopedia Ungkap Praktik Terbaik Kembangkan Platform Web dan Aplikasi

1 279

Mobilitas di era serba praktis ini telah menjadi faktor penting dalam setiap lini kehidupan. Dengan bantuan teknologi, kita dapat dengan mudahnya mengakses apapun, dimanapun dan kapanpun tanpa adanya batasan ruang dan waktu. Oleh karena itu, Tokopedia sebagai perusahaan teknologi berupaya untuk dapat terus meningkatkan dan menjawab setiap kebutuhan pengguna. E-commerce unicorn ini harus berkembang tidak hanya dalam bentuk website, namun juga aplikasi mobile baik untuk iOS maupun Android.

Pada START Summit Extension yang digelar pada 20 Oktober lalu, tim engineer Tokopedia mengajak para pegiat teknologi untuk berdiskusi dan mempelajari lebih dalam tentang pengembangan sebuah platform. Disaksikan oleh lebih dari 12 ribu penonton melalui Tokopedia Play pada 20 Oktober 2020, tim iOS dan Web Platform Tokopedia membawakan presentasi yang dibagi ke dalam dua sesi, yakni iOS UI Development at Scale dan Unlocking New Capabilities for The Web.

Baca juga: Tokopedia Hadirkan Sederet Inovasi Terbaru untuk Aplikasi Versi iOS

Pengembangan iOS UI dengan UIKit dan Auto Layout

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

Ia tidak merekomendasikan untuk menggunakan UIStackView berlebihan pada layout yang sangat kompleks. Karena dapat berpengaruh terhadap mobile phone yang memiliki spesifikasi lama. Masalah lain dari penggunaan Auto Layout adalah perubahan versi OS yang tidak terduga. 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. Ini merupakan kerangka yang menggunakan UIKit, namun tidak menggunakan Auto Layout dan developmentnya menggunakan full coding. 

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 menggunakan Flexbox yang juga digunakan untuk Web development. Secara performa, dengan menggunakan Texture, tampilan UI menjadi jauh lebih smooth. Terlebih ketika pengguna melakukan scrolling halaman, tinggi cell juga akan menyesuaikan layout.

Struktur Organisasi Tribe

Fitur Tukar Tambah Smartphone TokopediaSelanjutnya, Tiara Freddy Andika, Principal Engineer – iOS menjelaskan bahwa Tokopedia mengadaptasi struktur organisasi tribe. Mereka 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. Ini adalah 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.

Dipaparkan lebih lanjut, SharedUI membagi desain sistem ke dalam tiga bagian yaitu color, typography, dan component. Color yang digunakan pada aplikasi ditentukan melalui Color Token. 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. Kedua, dari sisi user experience yang konsisten pada setiap halaman aplikasi.

Kapabilitas website 

Laptop Lenovo Edvision Think Pad Yoga 370Sesi kedua membahas tentang kemampuan baru yang dapat diimplementasikan di Web yang dipaparkan oleh Dendi Sunardi, Engineering Manager Web Platform Tokopedia. Ia 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.

Menurutnya, e-commerce memiliki tiga tantangan 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.

Lebih lanjut, Dendi menjabarkan beberapa alasan mengapa Tokopedia sangat serius dalam membangun sebuah Web. Beberapa di antaranya adalah karena kemudahan dalam mendistribusikan aplikasi. Kemudahan akses untuk dari device apapun, ataupun kemampuan untuk selalu up to date ketika suatu fitur baru dirilis. Selain itu, Web juga memiliki tautan yang sangat mudah untuk dibagikan oleh pengguna, serta sifatnya yang universal.

Selanjutnya, Irfan Maulana, Principal Engineer Web Platform mengatakan di Tokopedia sendiri sudah banyak mengimplementasikan Web capabilities. 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 kita dalam 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. 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.

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. Terakhir adalah content indexing, di mana konten yang dirasa bermanfaat akan dikirimkan ke pengguna untuk disimpan ke dalam device, sehingga dapat dibaca meskipun pengguna dalam keadaan offline.

Sesi ini 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.


Disclaimer: Gizmologi adalah media partner dari acara Tokopedia Start Summit Extension