Trendyol GO — Bir Front-End Teknoloji Hikayesi

Sercan Eraslan
Sep 17, 2020 · 6 min read

Bu seride Trendyol GO nam-ı diğer Hızlı Market projesinin en başından şu ana kadar neler yaşadık, teknoloji seçimlerine nasıl karar verdik, nasıl problemlerle karşılaştık ve problemleri nasıl çözdük bunlardan bahsedeceğiz. Her hafta Cuma günü 1 yazı paylaşarak 5 yazılık serimizi tamamlamayı planlıyoruz.

Mevcut Yapı ve Tercih Edilen Teknolojiler

Hızlı Market, Trendyol mobil uygulaması içinde yaşıyor. Market seçimi, ürün listeleme, sepet, adres seçme ve ödeme işlemleri burada yapılıyor. Ödeme yapıldıktan sonra oluşan sipariş Trendyol GO servislerine düşüyor ve bu aşamadan sonra teslimat macerası başlıyor.

Not: “Trendyol GO Back-End” diye grupladığımız alanda bir sürü mikroservis var, kafa karıştırmaması için grupladık. Belki başka bir yazıda detaylarına değiniriz :)

Admin Panel

Düşen Siparişleri, kuryeleri, marketleri, çalışma saatlerini, çalışma bölgelerini takip etme ve yönetim işlemleri buradan yapılıyor. Admin Panel’de React kullanmayı tercih ettik, neden seçtiğimizi maddeler halinde paylaşalım;

  • Projenin amaçlarına uygun olması

Gerçek zamanlı veri aktarımını sağlayabilmek için de WebSocket’i tercih ettik.

Kurye Mobil Uygulaması

Sipariş düştüğünde kuryeye notification (bildirim) gönderme, market bilgilerini iletme, sipariş listesi gösterme, alıcı bilgilerini iletme, yol tarifi yapma, çalışacağı saatleri ve bölgeyi seçtirme, kazançlarını gösterme ve müşteri hizmetlerine bağlanabilme işlemleri bu uygulama üzerinden yapılıyor. Kurye mobil uygulamasında hangi teknolojiyi seçeceğimiz biraz daha uzun sürdü çünkü ekip içerisinde mobil uygulama geliştirme tecrübesi sadece denemelerden ve küçük uygulamalar geliştirmekten ibaretti. Dolayısıyla araştırmalarımızı daha derin yapmamız gerekti. Önce ihtimallerimizi değerlendirdik;

  • Native: Hem iOS hem de Android için 2 ayrı Native uygulama geliştiremezdik çünkü hem hızlı olmamız gerekiyordu hem de öğrenme maliyetleri çok yüksekti.

React Native - Artılar

  • 2015 yılında açık kaynak hale getirildi

React Native - Eksiler

  • CSS in JS

Flutter - Artılar

  • Performansı diğerlerinden daha iyi

Flutter - Eksiler

  • 2017 yılında geliştirilmeye başlanmış

Ionic - Artılar

  • 2013 yılında geliştirilmeye başlanmış

Ionic - Eksiler

  • PhoneGap ve Cordova gibi eski isimlerinden dolayı Google aramalarında biraz karışıklık yaratabiliyor

Artıları ve eksileri değerlendirdiğimizde React Native’e daha yakın hissettik. Her ne kadar Wikipedia, stabil sürümün 2020 Temmuz’da olduğunu söylese de henüz stabil olmadığını, daha gidecek yolu olduğunu ama şimdilik iyi bir seçim olduğunu söyleyebiliriz.

Trendyol’da böylesine kapsamlı bir React Native uygulaması yazma fikri ilk başta biraz tedirgin etmişti fakat uygulama içerisinde telefonun bir çok özelliğini (GPS, Push Notification, Kamera, Harita, Pil vb) kullanmamıza rağmen performansından ve derlenmiş halinin boyutunun küçük olmasından çok memnun kaldık. Kodumuzun yaklaşık %95 civarında ortak olması, işletim sistemi bazında spesifik kod yazımının az olması mutlu etti.

BFF / API Gateway

Mobil uygulamanın ihtiyaç duyduğu verileri Back-End mikroservis’lerinden toplayarak/işleyerek mobil uygulamalara buradan sunuyoruz. Çok fazla bir alternatifimiz olmadığı için BFF’i (Back-End for Front-end) NodeJS ile yazdık, sunucudan cevap alma sürelerimizden (Response Time) ve performanstan gayet memnunuz :)

Canlı Takip

Trendyol uygulamasından market ürünü satın alan kullanıcıların siparişini takip edebilmesi için WebView ile uygulama içerisinde Canlı Takip sayfasını gösteriyoruz. Kullanıcılar bu sayfadan kuryenin lokasyonunu anlık olarak takip edebiliyor. Bu sayfada da React ve WebSocket kullanmayı tercih ettik, sebeplerimizi yukarıda belirtmiştik.

Yaşadığımız Sorunlar

Projeyi geliştirirken ne gibi sorunlar yaşadık ve nasıl çözdük görelim.

Her Değişiklikte Yeni Uygulama Versiyonu Çıkma Sorunu

Projenin başlarında her güncellemede yeni bir uygulama versiyonu çıkmamız bizi bir hayli yavaşlattı. Aynı zamanda bu uygulamayı tüm kuryelere dağıtmak ve güncellediklerine emin olmak oldukça zahmetli bir süreçti. Çözüm olarak CodePush entegrasyonu yaptık.

CodePush, uygulamanın kodlarını kendi sunucularında barındırıyor ve yeni bir değişiklik yapıldığında kodun sadece değişen kısımlarını uygulama içerisine güncelleme olarak otomatik indirebiliyor. Bu yapılan değişikliklerin JavaScript (template ve stiller dahil) ve görseller gibi küçük değişiklikleri kapsadığını, Native kodlarda yapılan değişiklikleri kapsamadığını söylemiş olalım. Native ve büyük değişikler için hala uygulamanın yeni bir versiyonunu çıkmak gerekiyor.

CodePush kullanarak tüm JavaScript değişliklerimizi anında uygulamalara gönderebildik ve tüm kuryelerin uygulamaların güncel halini kullandığından emin olduk. Hem deploy (kodlarımızı Canlı Ortam’a gönderme) sıklığımızı hem esnekliğimizi hem de kuryelerin memnuniyetini artırmış olduk.

Detaylar için buraya bakabilirsiniz.

Push Notification / Bildirim Sorunları

Firebase üzerinden Push Notification alma ve custom (özel) bildirim sesi çalma ile ilgili çok fazla sorun yaşadık. Uygulamamızın hem ön planda (foreground) ve hem arka planda (background) hem de uygulama çalışmadığında (kill modda) custom bildirim sesi çalabilmesi gerekiyordu. İnternette push notification ile ilgili çok fazla yanıltıcı bilgi var. Github issue’larında iOS’in arka planda custom bildirim sesi çalamadığı ya da firebase’in 5. sürümünde iOS’te arka planda custom bildirim sesi çalabildiğine dair bir sürü yanıltıcı bilgi var. Firebase’in son sürümünde (şu an v6) hiç bir sorun olmadan her durumda custom bildirim sesi çalınabiliyor. Yanılmamak için aşağıdaki maddeleri tek tek teyit etmenizde fayda var;

  1. iOS ve Android için doğru kurulum yaptığınızdan emin olun.

Harici Mobil Uygulama Dağıtma Sorunları

Apple App Store ve Google Play Store dışında uygulama dağıtma konusu sandığımızdan daha uzun sürdü çünkü Apple App Store dışında uygulama dağıtma ile ilgili internette çok fazla bilgi bulamadık. Tanıdığımız eş/dost mobil uygulama geliştiren arkadaşların da daha önce böyle bir deneyimi olmamış. Detaylı bir iş olduğu için ayrı bir yazı olarak paylaştık buradan okuyabilirsiniz. Uygulama dağıtmayı otomatik hale getirdiğimiz kodlarımızı da açık kaynak olarak paylaşacağız.

Edit: Mobile App Automizer adıyla kodlarımızı açık kaynak hale getirdik :)
https://github.com/Trendyol/mobile-app-automizer

React, Google Maps, WebSocket ve Performans Sorunları

React, Google Maps ve WebSocket ile yaşadığımız performans sorununu ve çözümünü de ayrı bir yazı olarak paylaştık buradan okuyabilirsiniz.

GPS / Lokasyon Sorunları

Kuryelerin lokasyon bilgilerini alırken de çok fazla sorun yaşadık. Hem iOS hem Android cihazlarda, hem uygulama ön plandayken (foreground) hem de arka plandayken (background) düzgün ve stabil çalışan bir lokasyon kütüphanesi bulmamız çok uzun sürdü. Bu konuda da yaşadığımız deneyimleri de ayrı bir yazı olarak paylaştık buradan okuyabilirsiniz.

Kapanış

Edindiğimiz deneyimleri her hafta Cuma günü paylaşmaya devam edeceğiz, umarız deneyimlerimizin size bir faydası dokunur. Yaklaşık 9 haftada MVP’sini hazırladığımız, 3 aydır da canlıda hizmet veren bu projeye katılmak isterseniz bana istediğiniz zaman ulaşabilirsiniz. Benzer deneyimleri birlikte yaşamak dileğiyle, hoşçakalın :)

Trendyol Tech

Trendyol Tech Team

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store