Expert: Integrating Property Booking Application using Huawei Site and Map kit in Xamarin(Android)
Introduction
This application help to users for booking property in online and also it will display the property in map. It will display the property details to users with the help of Huawei Site Kit and will display the map using Huawei Map Kit.
Let us start with the project configuration part.
Step 1: Create an app on App Gallery Connect.
Step 2: Enable Site Kit and Map Kit in Manage API menu.
Step 3: Create new Xamarin (Android) project.
Step 4: Change your app package name same as AppGallery app’s package name.
a) Right click on your app in Solution Explorer and select properties.
b) Select Android Manifest on lest side menu.
c) Change your Package name as shown in below image.
Step 5: Generate SHA 256 key.
a) Select Build Type as Release.
b) Right click on your app in Solution Explorer and select Archive.
c) If Archive is successful, click on Distribute button as shown in below image.
d) Select Ad Hoc.
e) Click Add Icon.
f) Enter the details in Create Android Keystore and click on Create button.
g) Double click on your created keystore and you will get your SHA 256 key. Save it.
h) Add the SHA 256 key to App Gallery.
Step 6: Sign the .APK file using the keystore for Release configuration.
a) Right-click on your app in Solution Explorer and select properties.
b) Select Android Packaging Signing and add the Keystore file path and enter details as shown in image.
Step 7: Download agconnect-services.json and add it to project Assets folder.
Step 8: Install Huawei Site and Huawei Map NuGet package.
Step 9. Integrate HMS Core SDK.
Step 10: Add Huawei Map SDK Permissions.
Let us start with the implementation part:
Step 1: Create activity_main.xml which contains EditText for search and MapView for showing the Huawei Map.
Step 2: Instantiate SearchService and call Text Search API of Huawei Site Kit inside MainActivity.cs OnCreate() method.
Step 3: Create TextSearchResultListener class which will implements ISearchResultListener for getting the search results.
Step 4: Add runtime permission for device location.
Step 5: Initialize Huawei Map inside MainActivity.cs OnCreate() method and show the map inside OnMapReady() callback.
Step 6: Place the results as marker on Huawei Map.
Step 7: Create custom_info_window.xml for showing the custom window on marker click.
Step 8: Create class CustomMapInfoWindow inside MainActivity.cs which implements IInfoWindowAdapter. This class is used to show custom window on marker click.
Find the below code in MainActivity.cs.
Step 9: Create book_property.xml for booking screen.
Step 10: Create PropertyBookingActivity.cs which takes the data for booking the Property. This screen will show after clicking on Book button on custom info window layout.
Step 11: After clicking on Book, it will navigate to success screen.
Now Implementation part done.
Result
Tips and Tricks
1. Please add Huawei Map and Huawei Site NuGet package properly.
2. Please add map meta-data inside application tag of manifest file.
Conclusion
In this article, we have learnt how to book a property in online using Huawei Site and Map Kit. It also displays the location of property.
Thanks for reading! If you enjoyed this story, please provide Likes and Comments.
Reference
