React Native'de HMS Map Kullanımı ile Harita Uygulaması Geliştirme



Merhaba arkadaşlar, bugün sizlerle birlikte işimize de yarayabilecek bir uygulama geliştireceğiz. Uygulamamız hem İBB’nin otopark verisini kullanıp bunu haritaya yansıtacak hem de seçtiğimiz ilçenin ve park yeri detaylarının gösterilmesini sağlayacak.




UI Katmanları

Uygulamamız harita katmanı ve buton katmanı olmak üzere iki katmandan oluşuyor. Harita katmanımız uygulamanın arka planını oluştururken bir yandan da üst katmandaki event’leri görselleştiriyor. Üst katmanımız da haritanın yetersiz kaldığı bilgilendirme ve yönlendirme konusunda bize yardımcı oluyor.


Harita katmanı arkaplanda HMSMap component’ini içeriyorken, üst katman (buton katmanı) kart, dropdown ve info window component’lerimizi içeriyor.




Haritayı Ekleme ve Konfigürasyon

İlk olarak https://developer.huawei.com/consumer/en/doc/development/HMS-Plugin-Guides/config-agc-0000001050032216 adresindeki adımlarla AppGallery Connect hesabını oluşturup uygulamamızı platforma kaydediyoruz.


İndirdiğimiz agconnect-services.json dosyasını /android/app klasörüne ekliyoruz. Aynı şekilde oluşturduğumuz keystore dosyasının fingerprint’ini de SHA-256 certificate fingerprint alanına ekliyoruz.


Daha sonra android/build.gradle dosyamıza aşağıdaki satırları ekliyoruz.