FuelBuddy'nin BAE genişlemesi, bölgesel operasyonel gereksinimlere uyarlanmış özel bir franchise uygulaması gerektiriyordu. Dubai Franchise Uygulamasını hem frontend hem de veri API'leri boyunca sıfırdan geliştirdim.
Neler geliştirdim
- Sıfırdan frontend: Bileşen sistemini ve uygulama yapısını sıfırdan geliştirdim; franchise operasyonları için temiz ve duyarlı bir arayüz sundum.
- Hasura GraphQL API'leri: Arka uç veri katmanını Hasura GraphQL motoru üzerinde geliştirdim; uygulamanın ihtiyaç duyduğu CRUD işlemlerini ve veri modellerini tanımladım.
- Haritalar, planlama ve dışa aktarma: Canlı haritaları, bir takvim/Gantt planlama görünümünü ve franchise raporlaması için elektronik tablo/PDF dışa aktarmayı entegre ettim.
- Kimlik doğrulama ve güvenlik: Hasura'nın kendi JWT iddiaları üzerinden uygulanan rol tabanlı erişimle Firebase destekli kimlik doğrulamayı yapılandırdım.
Neden önemliydi
Özel bir platform teslim etmek, FuelBuddy'nin BAE franchise operatörlerine, gerçek zamanlı harita verisi ve yoğun raporlama için inşa edilmiş bir yığın üzerinde, bölgesel operasyonlara özel olarak tasarlanmış bir araç kazandırdı.
Veri Katmanı
Bu uygulama, istemci durumunu tutan Pinia store'larıyla birlikte, tipli, codegen ile üretilmiş bir SDK'ya karşı graphql-request üzerinden veri çekiyor; bağımlılık ağacında hiçbir yerde TanStack Query yok. Kimlik doğrulama Firebase üzerinde çalışıyor, rol tabanlı erişim ise ayrı bir izin sisteminden değil, Hasura'nın kendi özel JWT iddialarından (x-hasura-default-role, x-hasura-user-id) geliyor.
Bir Form Oluşturucudan Fazlası
İnce bir CRUD aracı olabilecek bir şey için gerçek anlamda özellik yoğun bir uygulama bu: franchise bölgelerini doğrudan harita üzerinde çizmek ve düzenlemek için Mapbox GL artı mapbox-gl-draw, Gantt tarzı planlama için vue-ganttastic ile eşleştirilmiş FullCalendar, raporlama panoları için Chart.js, ve franchise raporlarının operatörün ihtiyacına göre tek bir sabit format yerine elektronik tablo, PDF veya görsel olarak uygulamadan çıkmasını sağlayan tam bir dışa aktarma hattı (xlsx, papaparse, jszip, html2pdf.js, dom-to-image, html-to-image).
El Yazımı Sorgular Değil, Codegen
GraphQL işlemleri, derleme zamanında codegen.yml'ye karşı vite-plugin-graphql-codegen aracılığıyla üretiliyor; Hasura şemasından tipli bir src/sdk.ts istemcisi ortaya çıkarıyor. Her sorgu ve mutasyon, arka uç değiştiğinde sessizce kayan el yazımı string'ler yerine canlı şemaya karşı tipleniyor.
Test Odağı
Playwright iki akışı uçtan uca kapsıyor: giriş ve sipariş yönetimi, diğer her ekranın arkasında durduğu kapı ve uygulamanın var olma nedeni olan asıl işlem. Bu ikisinin sonrasındaki her şey (planlama, dışa aktarmalar, raporlama), testlerden daha yeni bir yüzey alanı, bir gözden kaçma değil.
Stack
Vue 3, Vite, Pinia, Hasura'ya karşı GraphQL Code Generator ile graphql-request, kimlik doğrulama için Firebase, mapbox-gl-draw ile Mapbox GL, vue-ganttastic ile FullCalendar, raporlama için Chart.js, testler için Playwright.