FuelBuddy'nin BAE B2B pazarına açılması özel bir web portalı gerektiriyordu. Kurumsal müşteriler, perakende tüketici akışları yerine filo yönetimi, toplu sipariş ve çok lokasyonlu teslimat planlaması istiyordu. Bu portalı ilk depodan üretime kadar geliştirdim; frontend mimarisini ve arka uç veri API'lerini kapsayarak.
Neler geliştirdim
- Frontend mimarisi: Uygulamayı sıfırdan kurdum; bileşen mimarisi, istemci tarafı yönlendirme ve kurumsal iş akışları için tutarlı bir tasarım sistemi dahil.
- B2B iş akışları: Çok adımlı sipariş formları, toplu yakıt planlama akışları ve sipariş ile cüzdan geçmişi için grafik ve tablo görünümlü, veri yoğun filo panoları geliştirdim.
- Ödemeler ve kayıt: Cüzdan bakiye yüklemeleri ve sipariş ödemeleri için Stripe'ı entegre ettim, kurumsal hesaplar için telefon tabanlı OTP kaydını uyguladım.
- Uçtan uca özellikler: CRUD API'lerini Hasura GraphQL motoru üzerinde geliştirdim, bunları arayüz durumuna bağladım, uygulamayı kurulabilir bir PWA olarak yayınladım ve iş doğrulama kurallarını üretime kadar yönettim.
Neden önemliydi
Portalı teslim etmek, FuelBuddy'ye Dubai'deki kurumsal müşteriler için özel bir web platformu kazandırdı, toplu yakıt siparişlerini kolaylaştırdı ve şirketin bölgesel iş büyümesini destekledi.
Aslında Neler Yayına Girdi
Toplu sipariş ve toplu vardiya planlaması, yer tutucu formlar değil, Hasura'ya karşı çalışan gerçek mutasyonlar; bunun yanında eski bir sürümün yerini alan bir pano var (ikisi de kod tabanında hâlâ mevcut, yenisi canlı). Kimlik doğrulama, sonradan eklenmiş ayrı bir izin katmanı yerine Hasura'nın kendi JWT iddiaları (token'dan doğrudan okunan x-hasura-default-role) üzerinden yürüyor.
Sadece CRUD Değil, Ödemeler ve Kayıt
Cüzdan bakiye yüklemeleri ve doğrudan sipariş ödemesi, bağımsız siparişler ve cüzdan işlemleri için özel ödeme rotalarıyla birlikte Stripe (@stripe/stripe-js, vue-stripe-js) üzerinden yürüyor. Kayıt, düz bir e-posta/şifre formu değil, telefon tabanlı OTP doğrulaması (vue3-otp-input, uluslararası telefon biçimlendirmesini vue-tel-input'un ele almasıyla) üzerinden yürüyor; bu da rastgele kayıtlar için değil, kurumsal filo hesapları için inşa edilmiş bir portala uyuyor.
Sadece Duyarlı Değil, Kurulabilir
Portal, vite-plugin-pwa ve Workbox aracılığıyla kurulabilir bir Progressive Web App olarak yayınlanıyor; autoUpdate service worker kaydıyla birlikte, böylece bir filo yöneticisi onu ana ekranına ekleyebiliyor ve manuel bir yeniden kurulum olmadan yeni dağıtımları alabiliyor.
Veri Modeli ve Ölçek
- Üretilen GraphQL SDK'sı (şema codegen'inden) 31.000 satırı aşıyor; birkaç rastgele sorgu değil, gerçek anlamda büyük, tipli bir API yüzeyi.
- Veri çekme, aradan Apollo veya urql istemcisi olmadan doğrudan
graphql-requestile Hasura'ya karşı yapılıyor. - Filo panoları,
vue3-easy-data-tablevevue-chart-3(Chart.js) üzerinden işleniyor; birkaç özet kart için değil, gerçek satır sayılarına sahip tablolar ve grafikler için inşa edilmiş.
Stack
Vue 3, Vite, durum yönetimi için Pinia, Hasura'ya karşı GraphQL Code Generator ile graphql-request, ödemeler için Stripe, kimlik doğrulama için Firebase, panolar için Chart.js, çevrimdışı/kurulabilir destek için Workbox ile vite-plugin-pwa, testler için Playwright.