How to integrate HubSpot API to develop a Flutter mobile application using DhiWise?

Published in

DhiWise

4 min readSep 21, 2022

Introduction

HubSpot has changed the way we work today. All the features provided by HubSpot are beneficial to all industries. I am writing this article to share how quickly I built a Flutter mobile application using HubSpot API and DhiWise.

Problem:

Developing a mobile app eats a lot of time. First, you have to visualize the design, convert it to Figma/Sketch/XD, and then to UI code. On top of that, we also require data management and API call. Last but not least comes thorough testing of the application. Hence, all these are very tedious tasks.

Solution:

On average, developing a mobile app takes more than two months. The solution is simple. A HubSpot mobile application has features to access and handle all things. So, I built this Flutter app in just 7 days. Check out the next topic to know the features.

Features:

1. List of today’s upcoming tasks.

2. List of today’s upcoming meetings.

3. List of due tasks with filter and sorting.

4. List of future tasks with filter and sorting.

5. Create a new task.

6. List of contacts and companies with filter and sorting.

7. List of deals with filter and sorting.

8. Create a new deal.

9. List of email activities.

Steps to integrate HubSpot into Flutter Application:

Import Figma

Import your Figma, and DhiWise gives the UI Code for it.

2. HubSpot API

Not just code, DhiWise makes your code dynamic by allowing you to integrate APIs.
I am using these HubSpot APIs to build the application

3. Import Postman

You can import the entire Postman collection instantly.

4. Add request response

Select Screen, and you will get the Smart Editor

Select UI

Define onClick and Select ‘navigation’

Select Screen Navigation and choose screen

Now Select the Contact screen and setup onReady Life cycle method.

Choose the API which needs to be integrated
Bind response with a view

5. API Runner

Run your API into the browser to test them in real-time with DhiWise API runner.

6. Code Generation & Preview

Click on the build app button to get the zip file on the code

Preview: You can preview the application to check how it works.

Code Review

Readability and Reusability

DhiWise generates code, either UI Widget or API calls; both are simple to read and modify for the developer. In addition, DhiWise generates a standard Widget for reusability.

2. Folder Structure: Check the below screenshot to see how the Folder structure will be in DhiWise generated code.

3. Packages

DhiWise uses the following packages to help you make your application even after you get the code.

4. UI

DhiWise generated code gives an accurate UI.

Conclusion

As we have seen above that how I quickly build a Flutter application using DhiWise and HubSpot APIs. DhiWise helps you reduce the time spent on repetitive coding and mundane tasks and lets you focus on what is more important.

Below is the GitHub URL of the application. Would love to know your feedback on this.

Link: https://github.com/DhiWise/hubspot-clone-DhiWise

About me

I am Mihir Patel, Senior NodeJS Developer from DhiWise. Follow me on LinkedIn and Twitter to know more about such technical updates.