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.
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 :)
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;
Gerçek zamanlı veri aktarımını sağlayabilmek için de WebSocket’i tercih ettik.
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;
React Native - Artılar
React Native - Eksiler
Flutter - Artılar
Flutter - Eksiler
Ionic - Artılar
Ionic - Eksiler
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.
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 :)
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.
Projeyi geliştirirken ne gibi sorunlar yaşadık ve nasıl çözdük görelim.
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.
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;
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.
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.
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.
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 :)