👨🏼💻HarmonyOS Earthquake Notifier App Part 1
Introduction
In this article we will develop Earthquake Notifier app for Tablet devices. The The Earthquake Notifier app displays current earthquakes on a map. User can filter earthquakes by magnitude and distance.
We will build the whole application from scratch together.
Requirements
- Dev Eco Studio IDE
What Will You Learn
How to:
- Use HMS Map Kit on HarmonyOS
- Request to Rest APIs with Retrofit
- Add marker and shapes on ma
Creating Project
To create a project, via the IDE: File > New Project. In the window that opens, select the template shown below and click next.
After entering the project name in the window that opens, you should mark the type of project and the devices to be developed. You can mark more than one device. In this case we are choosing “Tablet”.
Development
1- Project Hierarchy
In this article, I felt the need to show the hierarchy of projects. This image can be helpful when creating custom xml files and using images in the following sections. For those new to Harmony, hierarchy looks very android-like and easy to understand.
2- Request Earthquake Data
First of all, we must implement the Retrofit. Let’s enter the following lines into the app level gradle file.
To create a Retrofit object, we create a class called APIClient. In this class, we are creating a method that returns a retrofit object. It should be noted here that we need to add the base url of the API we will use in this step.
After that we need to add an interface that contains GET method and parameters of url. In this part I will set the earthquake dates here. We will make it pull from the device in Part 2. Response will be formatted to data class MultipleResource.
Api that we use returns data that contains structured data. We need to create classes for each structured data that can be converted objects. As you can see the following code there are lots of fields that we don’t use. You can erase that fields. I’m leaving them for those who want to learn about the content of the data coming from the api.
As a last part of using retrofit we need to add permission for internet use. We need to add our permission into the “module” part of config.json file as you can see below:
3- Map Kit
Firstly we need to implement Map kit dependency into the app level gradle file and add GET_NETWORK_INFO permission to the config.json file as you can see above.
In order to project the Map on the screen, we need to create a MapView object and add it to a layout we have defined. Which coordinates we want the map to display, we must specify it in the CameraPosition object. You can also see an example of adding a shape to Map below. In this part, I used a fixed coordinate to demonstrate the use of Map. In the second part, we will pull the location from the user with the Location Kit.
3- Custom Dialog & Settings
We want to show earthquakes that has magnitude above the user-specified magnitude and earthquakes in the distance specified by the user. We will create a custom dialog that will open when the application is first launched, and we will create a settings page so that it can be changed later.
We will create another AbilitySlice named SettingsSlice and add the following code to its onStart method.
4- Earthquakes
In the last step, we have to show the earthquakes on the map. For this we will add markers to the map. But first, we need to get the earthquake data by calling the Retrofit client we created.
Now we can compare data with user specifications and mark them on the map.
Tips & Tricks
- Don’t forget to enable Map Kit on AppGallery Connect.
- Add the appgallery-connect.json file to the: entry>src>main>resources>rawfile directory.
Conclusion
We have developed a Earthquake Notifier map on HarmonyOS with you. As in this project, HarmonyOS provides development opportunities for many devices, not just tablets and smart wearables. Name of the app is Earthquake Notifier because in the second part we will add Push kit to notify user and Location kit to retrieve user location to the app.
Thank you for reading. See you in my other articles…;)
References
https://developer.harmonyos.com/en/docs/documentation/doc-guides/document-outline-0000001064589184
