Huawei Kitleri ile React Native 1: Account Kit, Map Kit

Selamlar bu yazı dizimizde Huawei Kitlerini kullanarak React Native projesi geliştireceğiz. Şimdi akıllarınızda bir soru var "Huawei Kitlerini biz sadece Native Android projesinde kullanmıyor muyduk?" diyeceksiniz ancak Huawei Kitleri'nin bir kısmını React Native desteklemekte 🥳 Özetle React Native projelerimizin android bölümünde bu kitleri kullanabilceğiz 🥳 Öncelikle her işin başı olan "react-native init" diyerek başlayalım =)


Şimdi kitlerimizi eklemek için sizi bu sayfaya alalım =>https://www.npmjs.com/~hmscore

Bu sayfa Huawei'nin resmi React-Native, Cordova paket sayfası. Buradan paketleri inceleyip gerekli direktiflere göre yüklemeyi gerçekleştirebilirsiniz. Bugün basit bir login ekranı oluşturacağız bunun yanı sıra projemize Account Kit ve Map Kit'i entegre edeceğiz.


⚠️Ama her şeyden önce Huawei Developer hesabınızın olması gerekiyor.

⚠️AppGallery Connect'e giriş yaptıktan sonra Android application olarak uygulamanızın gerekli bilgilerini giriniz (paket adı, SHA-256) gibi. Bu key'i almak için sizleri bu sayfaya yönlendirmek istiyorum 🔗

⚠️Aynı zamanda HMS Core gradle'larını eklemeniz gerekiyor bunun içinse 🔗

⚠️AppGallery Connect'te ilk öncelikle New Project'ten proje oluşturmanız gerekmekte daha sonrasında gerekli bilgileri ekledikten sonra solda yer alan build'e tıklayarak Account Kit'imizi aktive etmemiz gerekiyor:


Account Kit'imizi aktive ettiğimize göre artık .json dosyamızı indirebiliriz.


Bunları oluşturduktan sonra .json dosyamızı indirip Android klasöründe app dizinine atmamız gerekiyor. Daha detaylı kit kurulum bilgileri için 🔗 linke tıklayabilirsiniz.


Kitlerimiz için gerekli izinlerimizi alalım:

⚠️Öncelikle sayfa işlemleri için react-navigation paketini yüklememiz gerekiyor.


App.js dosyamızda navigasyon işlemleri için şu işlemleri yapalım:



App.js'te görmüş olduğunuz üzere createStackNavigator ile page klasörü altında oluşturduğumuz sayfaları navigasyona tanıtıyoruz. Daha sonrasında Stack Const'una atıp bunu ana Layout'umuzda render ediyoruz böylelikle sayfa geçişlerimiz başarı bir şekilde çalışmakta.


LoginPage sayfamızı oluşturalım:

Login sayfasını oluştururken arka plan rengi için linear-gradient kütüphanesi kullandım çünkü react-native default olarak gradient renkleri desteklememekte.

Login girişi için ayrı bir alan oluşturdum bu alanı component klasöründe oluşturdum.


Login sayfası için Login form component'i oluşturalım:

LoginForm component'imizde Huawei Account kit'i kullanmaya başlayabiliriz öncelikle Huawei Account ile giriş yapabilmek için Sign In fonksiyonu tanımlayalım. Daha sonra bu fonskiyonu kullanacak olan Huawei Account buttonunu koyalım. Birden fazla Input component'i ve MyButton comonent'i koyalım.


Input component'imiz:


MyButton Component'imiz:


Harita sayfamız içinse Map Kit'i kullanmamız gerekli:

Haritamızda örnek olması açısından sadece bir marker kullandım ve uzaklaştırma yakınlaştırma butonlarının dışında buton koymadım. Bunu ileriki bölümlerde ekleyeceğiz.


Çıktımız şu şekilde olacaktır:


İlk bölümü bitirdik. Bu bölüm daha çok temel entegrasyon bilgileri hakkında bir bölümdü. Devamında ise Map Kit, Location Kit, Ads Kit üzerinden gideceğiz. Herhangi bir öneri veya sorunuz var ise benimle her zaman iletişime geçebilirsiniz iyi günler dilerim 😊


Güncel proje linkleri için => https://github.com/can-sevin/Hms_Shopping_RN


#huaweikit #reactnative #huawei #accountkit #mapkit



Komünite

Platform

Mobiler.dev Anasayfa
  • Twitter
  • Instagram
  • development_düzenlendi_düzenlendi
  • Youtube
  • slack-icon-black_edited_edited_edited
  • Gri LinkedIn Simge
JetBrains Hakkında Detaylı Bilgi Alın

© 2020 by mobiler.dev

mobilerdevLogo.jpg
Yazarlık Başvurusu Hakkında Bilgi Alın, Başvuru Yapın.
Topluluk Yazarlarını Tanıyın