HMS Location kit, Map kit, Site Kit ile React Native Platformunda Geliştirme- 1
Merhabalar bu yazımda sizlerle HMS Location kit, Map Kit, Site Kit ile React Native uygulaması geliştireceğiz ilk öncelikle “react-native init” komutumuzla başlayalım 😄 daha sonrasında ise oluşan projemize giriş yaparak ister npm veya yarn ile kütüphane eklemelerimizi bu sitedeki bilgilere göre gerçekleştirelim;
Location için:
Map için:
Site için:
Npm sitesindeki kurulumlarımızı bitirdiğimize göre Kitler için AppGallery Console’dan eklememiz gereken bazı değerler var bunun için bu linke tıklayıp gerekli bilgilere ulaşabilirsiniz:
Yapmanız Gerekenler
- SHA-256 key oluşturup bu key’i AGC console’da eklemeniz gerekli
- Daha sonrasında HMS Core bağımlılığını projenize eklemeniz gerekli
- AGC console’da oluşan .json dosyanızı indirip app dizinine atmanız gerekli
- Npm veya Yarn ile kütüphane kurulumu yaptığınız için sadece MainApplication.java kısmında paket eklemeleri yapmanız yeterli (Dipnot: Projenizin React-Native versiyonu 0.60'tan yüksek ise bu işlemi yapmanıza gerek yok 🥳)
Paket ekleme işlemi şu şekilde örnek gösterilebilir:
Peki Akıllarda Bir Soru?
Diyelim ki Google servisleriyle çalışan bir react native projeniz var ancak siz Huawei servisleriyle birlikte kullanmak istiyorsunuz ayrı bir .apk dosyası oluşturmak istemiyorsunuz bu gibi bir durumda şu şekilde bir işlem gerçekleştireceğiz:
Bu java dosyasını java dosyalarımızın bulunduğu klasöre ekleyelim.Daha sonrasında bu method’a NativeModules üzerinden ulaşacağız. Böylelikle GMS ve HMS servislerini bir arada kullanabileceğiz 🥳
İlk öncelikle Lokasyon bilgilerimizi Location Kit ile elde etmeyi sizlere göstereyim:
Eğer React-Native versiyonunuz 0.60'dan aşağı ise MainActivty.java dosyamıza packages.add(new RNHMSLocationPackage()) ile paket eklemesi yapmamız gerekiyor ve buna uygun importları sağlamamız gerekiyor:
import com.huawei.hms.rn.location.RNHMSLocationPackage
import com.huawei.hms.rn.location.helpers.HMSBroadcastReceiver
Manifest kısmından izinlerimizi almayı unutmayalım:
<uses-permission android:name=”android.permission.ACCESS_COARSE_LOCATION”/>
<uses-permission android:name=”android.permission.ACCESS_FINE_LOCATION”/>
⚠️ Sürekli konum alacaksanız bu izne ihtiyacınız bulunmakta:
<uses-permission android:name=”android.permission.ACCESS_BACKGROUND_LOCATION”>
Şimdi ise gerekli izinlerimizi ve konfigürasyonlarımızı yaptığımıza göre ilk öncelikle konum almaya başlayabiliriz konum bilgimizin olmadığı bir harita önemsiz ne de olsa 😄
HMS Location Kit’i Kullanarak Nasıl Konum Bilgisi Elde Edeceğim?
Öncelikle konum için gerekli izinleri kullanıcıdan almamız gerekiyor ve bununla birlikte konum bilgisini elde etmemiz gerekiyor:
Öncelikle kodumuzu açıklayayım konum bilgilerini react hooks ile aldım bundan dolayı statelerimizi const fonksiyonunda oluşturduk. Daha sonrasında Lokasyon için uygulamanın izni var mı? Yok mu bunu kontrol etmek içinse hasPermission()’ı kullancağız dönen değeri state’imze kaydedeceğiz. Sonrasında değerimiz false ise konum bilgisi için requestPermission() methodunu çağırıyoruz. Değilse en çok kullanılan anlık konum bilgisi olan getLastLocation() methodunu çağırıp ilgili konum bilgilerine ulaşıyoruz :
Konumu elde ettikten sonra sıra Harita’ımızı entegre etmeye geldi:
Burada dikkat etmeniz gereken konum gelmeden Harita’yı render etmemeniz bundan dolayı if state’ı kullandım.Bunun haricinde Huawei Developers Sayfasında ki React Native dokümanlarını kullanarak haritada geliştirme yapabilirsiniz 👌
Peki Birden Fazla Marker Kullanımında Ne Yapacağız? 🧐
Diyelim ki birden fazla konum bilginiz bulunuyor ve bu konumları sizin Marker‘lar ile göstermeniz gerekiyor bunun için view taglerinde map kullanmanız gerekmekte. Component class’ında map kullanabiliyorsunuz this.state’leri kullanarak 🥳 ancak peki Const Class’larında ne yapacaksınız? Const Class’larında biliyorsunuz this.state yok 😅 Öncelikle ben şu şekilde bir kod oluşturdum:
Bu biraz daha uzun bir kod dosyası oldu şimdi ise Site Kit’i entegre ettik Site Kit Huawei’nin yerlerin konumun bilgilerini ve daha fazlasını içeren bir servis bu servisten örnek kullanım olması için konum yakınında ki otobüs duraklarını almasını söyledim. İlk etapta const olarak api key’inizi set etmeniz lazım daha sonrasında konuma göre yerlerin bilgilerini servisten çağıracağımız için konum bilgimizin gelip gelmediğini kontrol etmeliyiz daha sonrasında gerekli parametreleri vererek kriterlerimizi belirliyoruz. Kriterleri açıklamak gerekirse PoiType’dan yerlerin türlerini değiştirebilirsiniz 🔗
Örnek olması açısından bir otobüs durağının hangi bilgileri geliyor şu şekilde göstereyim:
Page Index ise servis’in size döndürdüğü bilgilerden ilkini sırasıyla almak istiyorsanız 1 ama döndürülen değerlerde ilk baştan 3.sünü almak isterseniz de 3 yazmanız gerekmekte bunun yanı sıra Page Size’da ise kaç tane yer bilgisi alacağınıza karar verirsiniz konumun etrafında 4 yeri görmek istiyorum derseniz 4 demeniz gerekmekte. Country code’lar konumların adlarının düzgün bir şekilde gösterilmesi için önemli olduğunu söyleyebiliriz. Daha sonrasında ise parametrelerimizi bir değere set edip o değeri parametre olarak kullanıp servisi çağıracağız dönen sonuçları ise State’imize aktarıyoruz. Sonrasında const fonksiyonu olduğundan dolayı bir şekilde state’imizden bu verileri map ile almalıyız. Burada da devreye Object.keys devreye giriyor bu şekilde birden fazla Marker set etmiş olduk.
Peki Search Bar / Arama Çubuğu Kullanarak Site Kit İle Gelen Yerleri Nasıl Filitreleyeceğiz? 🧐
İlk öncelikle Searchbar için React Native Elements’ten searchbar eklentisini, vector-icons eklentisi ve ListItem eklentisini kurmamız gerekiyor. Bunun için şu linkleri takip etmelisiniz 👇
SearchBar:
VectorIcons:
ListItem:
Yükleme işlemlerini ve import işlemlerini tamamladıktan sonra örnek kodumuzda şu şekilde yapmamız gerekecek:
Şimdi ilk öncelikle yüklediğimiz React Native Elements eklentilerini render alanında tanımlayalım daha sonrasında ise girilen Search değeri için bir state oluşturalım bu state sayesinde anında güncelleme almamız sağlanacak bu sayede anlık olarak yer bilgilerimiz güncellenecektir bundan dolayı updateSearch adı altında bir method oluşturuyorum bu method’da anlık olarak girdiğim search değerini gönderiyorum. Bu search değeri ile Huawei Site Kit’in öneri sisteminden dönen bilgilere göre yeri alıp bu yere harita Layout’nu odaklamış oluyoruz. Daha sonrasında ise ListItem’a bir dizi atamamız lazım bunuda atadıktan sonra var olan yer listemizi güncellememiz gerekiyor bu yer listemizi güncelledikten sonra öneri listesinde ilk gelen yere haritamızı setCameraPosition ile odaklamış oluyoruz.
⚠️ Oluşturduğumuz mapView değişkenini referans olarak atadığımız için kodun her yerinden haritaya müdahale edebiliyoruz.
ref={(e) => (mapView = e)}
Peki Marker’ı Nasıl Özelleştireceğiz? 🧐
Marker’ın ilk öncelikle ikonunu değiştirerek başlayalım bunun için:
Yanda görmüş olduğunuz dizinde bir assets klasörü açmanız gerekmekte daha sonrasında ikon dosyalarınızı bu klasöre eklemeniz gerekmekte. Ekledikten yeniden yarn android diyerek android apk’sına dosya eklenmiş olacaktır daha sonrasında marker tag’nin içine icon parametresi ile ikonunuzu set edebileceksiniz.
Marker’a peki InfoWindow nasıl ekleyeceğiz? Eğer ki çok basit bir title eklemek istiyorsanız title parametresi size yetecektir ancak daha kapsamlı bir InfoWindow istiyorsanız InfoWindow view tag’i açarak örnek koddaki gibi style’dan destek alarak sizde istediğiniz gibi InfoWindow’unuzu oluşturabileceksiniz.
Peki Clustrable yani haritada uzaklaştırmaya bastığımızda markerların toplanmasını nasıl sağlayacağız? İlk öncelikle MapView view tag’ine:
markerClustering={true}
Marker tag’inin en sonuna “clusterable” eklemeniz lazım.
⚠️ Marker Ikonlarımız henüz style ile değiştirilemiyor.
Peki biz bu yazının sonunda ne oluşturmuş olduk? 💻
Biz bu yazıda Huawei’nin 3 kitini kullanarak React Native platformunda temel bir harita uygulaması geliştirdik. Bazı zamanlar servislerde bekleme gecikme veya şaşırma mümkün oluyor bundan dolayı herhangi bir hata almanız durumunda logları incelemenizi tavisye ederim. Herhangi bir soru durumunda benimle iletişime geçebilirsiniz. İlerleyen zamanda yazımın 2.serisi olacak eğer ki merak ettiğiniz bir kısım olursa lütfen bunu bana söyleyin 2.seride buna değinmiş olurum :) Oluşturduğumuz harita uygulaması hakkında sizinle ekran görüntülerini ve videoyu paylaşayım:
Dokümanlar:
HMS React Native Kits:
React Native Elements:
Github Reposu:
