👨🏼‍💻Integrating Huawei Map, Ads and Account Kit to React Native : A Sales App — Part 1
Introduction
Hello all, in this article, We will create a React Native demo seller app with Map, Account and Ads plugins.
HUAWEI Map Kit -> Development kit and map service developed by Huawei to easily integrate map-based functions into your apps. The kit currently covers map data of more than 200 countries and regions, supports 40+ languages, provides UI elements such as markers, shapes and layers to customize your map and also enables users to interact with the map in your app through gestures and buttons in different scenarios.
HUAWEI ADS Kit -> Provides the open advertising identifier (OAID) and install referrer capabilities for advertisers to deliver personalized ads and attribute conversions.
HUAWEI Account Kit -> Plugin provides adaptation code used for HUAWEI Account Kit to communicate with the React Native platform. Most of the apps on the market these days are offering various ways to authenticate their users. With the help of Huawei Account Kit users can sign in easily with their Huawei accounts.
We will now integrate Huawei’s Mobile Services to demo app. Before we start, I would like to inform that I won’t go into details about the UI code and some business logic. All source code will be available in github repository.
Use Cases
- Login with Huawei Account (Account Kit)
- List houses for sale and Banner Ad (Huawei Ads Kit)
- Display details of house and location on Map (Huawei Map Kit)
After some information we are ready for development.
Let’s start developing our application with the authentication provided by the Account Kit. If there are no errors, application will navigate to the main page with the user data which is returned from Huawei Auth Service.
Let’s add stacknavigator to App.js and create Login, HomePage and Details pages.
After we login with Huawei Auth service app will redirect us to Home Page. In that page we have listed the houses for sale and a banner ad as a header of list.
Here the sample code of the Flatlist with Banner Ad component and render Item.
Here we have create a Banner Ad component with sample ad ID. Banner ads are rectangular images that occupy a spot at the top, middle or bottom within an app’s layout. Banner ads refresh automatically at regular intervals. When a user clicks a banner ad, the user is redirected to the advertiser’s page in most cases. The available Banner Ad sizes are in the link!
Let’s add Tab.Navigator to DetailPage.js and create Advertisement and Location pages to separate the House detail info and map for location of as follows:
Conclusion
In this article, we focused on the Map, Account and Ads kit and implemented the most commonly used methods to demo app.
If you have any questions related to this article, feel free to leave a comment.
You can also check References section for more information about the integrated React Native plugins.
In the next section, we will implement the Analytics and Push kit.
See you next time!
