Tokopedia menerbitkan platform web dan praktik terbaik pengembangan aplikasi

sayaMobilitas telah menjadi bagian penting dari setiap kehidupan di era praktis ini. Berkat teknologi, kami memiliki akses mudah ke segala sesuatu kapan saja, di mana saja, tanpa batasan ruang atau waktu. Oleh karena itu, Tokopedia berkomitmen untuk terus berkembang sebagai perusahaan teknologi untuk memenuhi kebutuhan semua pengguna. E-commerce unicorn ini perlu mengembangkan tidak hanya format situs web, tetapi juga aplikasi seluler untuk iOS dan Android.

Pada START Summit Extension pada 20 Oktober, tim engineer Tokopedia mengundang para penggiat teknis untuk berdiskusi dan mempelajari lebih lanjut tentang pengembangan platform. Disaksikan oleh lebih dari 12.000 penonton melalui Tokopedia Play pada 20 Oktober 2021, tim Tokopedia di iOS dan platform web dibagi menjadi dua sesi: pengembangan UI iOS skala besar dan membuka fitur baru di web. Saya memberikan presentasi.

Baca juga: Tokopedia Hadirkan Serangkaian Inovasi Terbaru Aplikasi Versi iOS

Pengembangan IOS UI menggunakan UIKit dan tata letak otomatis

Technical Architect Samuel Edwin – iOS Tokopedia membagikan praktik dan pengalamannya dalam membangun iOS dari sisi UI atau antarmuka pengguna. Dalam mengembangkan UI, Samuel terlebih dahulu menjelaskan dari segi teknis, yaitu cara menggunakan UIKit dan Auto Layout.

Dia tidak merekomendasikan penggunaan UIStackView secara berlebihan dengan tata letak yang sangat kompleks. Hal ini karena dapat mempengaruhi ponsel yang lebih tua. Masalah lain dengan menggunakan tata letak otomatis adalah perubahan versi OS yang tidak terduga. Implementasi Tata Letak Otomatis bervariasi dari versi iOS ke versi iOS, dan seringkali sulit untuk menyesuaikan tinggi halaman menggunakan UICollectionViewCell.

Berdasarkan pengalamannya dengan Tata Letak Otomatis, Samuel membagikan solusi yang digunakan oleh tim Tokopedia: cara mengadopsi Tekstur.Ini adalah kerangka kerja yang menggunakan UIKit, tetapi tidak menggunakan tata letak otomatis dan untuk pengembangannya Pengkodean lengkap.

Dalam kerangka tekstur, tim Tokopedia iOS menggunakan ASDisplayNode yang mudah digunakan. Komponen yang diperlukan sudah tersedia di ASDisplayNode. Pastikan semua item memiliki penggantinya sendiri dari yang sudah tersedia di UIKit, apakah itu menampilkan gambar, tombol, tampilan gulir, atau bidang teks.

Tata letak tekstur menggunakan Flexbox, yang juga digunakan untuk pengembangan web. Dari segi performa, Texture membuat UI terlihat lebih mulus. Tata letak juga disesuaikan dengan ketinggian sel, terutama saat pengguna menggulir halaman.

Struktur organisasi suku

Selain itu, Chief Engineer – iOS Tiara Freddy Andika menjelaskan bahwa Tokopedia telah mengadaptasi struktur organisasi tribal. Mereka terdiri dari lebih dari 20 anggota tim dengan titik fokus yang berbeda. Setiap suku memiliki desainer dan pengembang UI sendiri. Oleh karena itu, tidak menutup kemungkinan desain aplikasi berbeda yang memengaruhi alur pengembangan fitur.

Untuk mengatasi hal tersebut, tim iOS membuat sebuah framework bernama Shared UI. Ini adalah kerangka kerja yang dibangun dengan tekstur yang menyediakan komponen UI untuk aplikasi iOS Tokopedia. SharedUI dibuat dalam beberapa cara dengan mengidentifikasi komponen berdasarkan penggunaan, perilaku, struktur, dan penempatan.

Seperti yang dijelaskan lebih lanjut, SharedUI membagi desain sistem menjadi tiga bagian: warna, tipografi, dan komponen. Warna yang digunakan dalam aplikasi ditentukan oleh token warna. Saat ini, aplikasi Tokopedia mendukung Mode Gelap, sehingga semua warna ditentukan dalam dua versi, terang dan gelap. Ini menghilangkan kebutuhan pengembang untuk menggunakan beberapa token warna dalam dua mode tampilan.

Selain itu, untuk tipografi, Anda dapat dengan mudah membuat teks hanya dengan melihat jenis tipografi, dan menentukan warna dan format setiap karakter.

Bagian terakhir adalah komponen. Tim desain inti telah membuat spesifikasi komponen, seperti pemanggang roti komponen, yang digunakan untuk memberikan umpan balik langsung kepada pengguna setelah melakukan tindakan tertentu.

Umpan balik berupa pesan positif atau negatif, tergantung pada tindakan yang dilakukan oleh pengguna, untuk mengenali dampak dari tindakan yang dilakukan oleh pengguna dan untuk mengetahui apa yang harus dilakukan selanjutnya.

Setelah membahas spesifikasi, komponen Sistem Desain juga dibagi berdasarkan fungsinya: komponen dasar, tindakan, navigasi, panduan pengguna/tampilan informasi, dan input pengguna. Hal terakhir yang dibagikan Tiara adalah tentang manfaat menggunakan framework Shared UI. Keuntungan pertama adalah jauh lebih cepat dalam hal kecepatan pengembangan. Kedua, dari perspektif pengalaman pengguna yang konsisten di semua halaman aplikasi.

Fitur situs web

Pada sesi kedua, kami membahas fitur-fitur baru yang dapat diimplementasikan di Web. Hal tersebut dijelaskan oleh Dendi Sunardi, Engineering Manager Tokopedia Web Platform. Dia mengatakan Web penting dalam industri e-commerce. 35% pengguna menghabiskan waktu mereka di platform web, baik seluler maupun desktop. Dibandingkan dengan aplikasi, 51% pengguna tidak mengunduh aplikasi setiap bulan, yang menunjukkan bahwa peluang untuk mengembangkan web masih sangat luas.

Menurutnya, e-commerce memiliki tiga tantangan utama. Yaitu, akuisisi, konversi, pemeliharaan. Peran terbesar Web adalah dalam akuisisi, yang merupakan cara untuk mendapatkan pengguna baru. Pertimbangkan bahwa web memiliki fitur aksesibilitas yang lebih canggih dan universal dibandingkan dengan platform lain.

Selain itu, Dendi menjelaskan beberapa alasan Tokopedia menganggap serius pembangunan Web. Sebagian dari ini adalah karena kemudahan distribusi aplikasi. Ini mudah diakses dari perangkat apa pun dan dapat terus diperbarui saat fitur baru dirilis. Selain itu, web memiliki tautan universal yang mudah dibagikan oleh pengguna.

Selain itu, Principal Engineer untuk Web Platform, Irfan Maulana, menyatakan bahwa Tokopedia sendiri mengimplementasikan banyak fitur web. Yang pertama adalah service worker, “tulang punggung” Web Tokopedia, yang melakukan berbagai penyempurnaan secara bertahap.

Pekerja layanan menyediakan fungsionalitas ke Web. Salah satunya adalah menghemat sumber daya yang membantu mengurangi waktu muat repeater. Teknik ini juga membuka peluang bagi Tokopedia untuk menawarkan pengalaman berbeda saat pengguna offline.

Berikut ini adalah push notification yang membantu Anda mengirimkan pesan penting terkait pengguna Tokopedia. Fitur push notification ini menggantikan pengguna yang belum menginstal aplikasi Tokopedia di perangkatnya. Kedua, ada juga contact picker yang memungkinkan pengguna untuk memasukkan nomor ponsel mereka tanpa harus memasukkannya kembali. Kedua, ada juga WebShare API, yang memungkinkan pengguna untuk berbagi satu pesan ke platform media sosial yang berbeda melalui kotak dialog, seperti yang biasa ditemukan di aplikasi asli.

Tim platform web sekarang dapat mengetahui keadaan jaringan Internet dari pengguna melalui informasi jaringan. Mengizinkan konten yang dikirim untuk menyesuaikan status jaringan. Web OTP juga merupakan bagian dari fitur web yang memudahkan pengguna untuk menulis kode OTP tanpa harus melihat isi SMS yang dikirimkan. Yang terakhir adalah pengindeksan konten. Di sini, konten yang dianggap bermanfaat dikirim ke pengguna dan disimpan di perangkat sehingga konten dapat dibaca bahkan saat pengguna offline.

Sesi diakhiri dengan diskusi tentang fitur web yang sedang dikembangkan oleh tim Tokopedia Web Platform: ikon aplikasi badge, API sinkronisasi latar belakang, dan NFC Web.

---

Penolakan: Gizmologi adalah media partner untuk acara Tokopedia Start Summit Extension.

Share :