Trendyol GO — Bir Front-End Teknoloji Hikayesi

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ı
• 2013 yılında geliştirmeye başlanmış olması
• Facebook desteği olması
• Community (Topluluk) desteğinin güçlü olması
• Contributor (Destekleyen) sayısının fazla olması
• Hooks özelliğinin gelmesi (React, Hooks’la beraber güzelleşti :)
• React kullanan yazılımcı sayısının fazla olması (Hızlı adaptasyon)
• Ekipte oy birliğinin 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.
• PWA: İlk başta hızlı geliştirme, HTML, CSS, JavaScript kullanabilme ve paketleme ihtiyacı olmaması gibi sebeplerle çok mantıklı gelmişti fakat kuryelerin telefon ekranı kapalıyken bile konum verilerini dinlememiz gerektiği için PWA’den vazgeçmek zorunda kaldık.
• Hybrid/Cross Platform: Çözümlere baktığımızda 3 alternatif arasında kaldık iyi ve kötü yönlerini şöyle not ettik;

React Native - Artılar

• 2015 yılında açık kaynak hale getirildi
• Facebook desteği var
• JavaScript ile yazılabiliyor
• Community desteği var (React’e göre daha az)
• Contributor sayısı fazla
• Native deneyime yakın, performansı iyi
• Hızlı kurulum yapılabiliyor
• Facebook, Instagram, Uber, Tesla, Bloomberg, Wix, Walmart gibi şirketler kullanıyor
• React bilen daha kolay öğrenebiliyor

React Native - Eksiler

• CSS in JS
• Kütüphanelere bağımlılık biraz fazla (azaltılabilir)

Flutter - Artılar

• Performansı diğerlerinden daha iyi
• Built-in özellikler var (kütüphanelere ihtiyacı az)

Flutter - Eksiler

• 2017 yılında geliştirilmeye başlanmış
• Google desteği var (Google’ın AngularJS’i ve bir çok projeyi hızlı kapatmış olması biraz güven sarsıyor)
• Dart ile yazılıyor (Dart öğrenme maliyeti var)
• Yavaş/Detaylı kurulum

Ionic - Artılar

• 2013 yılında geliştirilmeye başlanmış
• HTML, CSS ve JavaScript yazabilmek çok avantajlı
• Hızlı geliştirme yapılabiliyor
• Community desteği var
• Tek kod ile iOS + Android + Web + Desktop + Windows + PWA uygulamaları üretebiliyor
• UI Component’leri (Bileşenleri) iyi

Ionic - Eksiler

• PhoneGap ve Cordova gibi eski isimlerinden dolayı Google aramalarında biraz karışıklık yaratabiliyor
• Cihazın Native özelliklerine erişmek maliyetli
• Performans olarak iyi değil
• Çıktısı Native değil, WebView’da çalışıyor

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.
2. Firebase üzerinde Stage ve Production ayarlarınızın karışmadığından emin olun.
3. Custom bildirim sesine ait dosyanın doğru path’te olduğundan emin olun (Android için: android/app/src/main/res/raw/custom.mp3 - iOS için: root path’inde olması yeterli).
4. Mobil uygulamanızın içinde her seferinde yeni bir channel (bildirim kategorisi) oluşturmadığınıza emin olun.
5. Custom bildirim sesi çalmadığında uygulamayı silip yeniden kurmayı deneyin. Eğer düzelirse sorun channel’ların karışmasından dolayı diyebiliriz.

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 :)