Let’s build a Web app for monitoring 3rd party services using Slack Incoming Webhook Notification and DhiWise

An organization offering service may be having dependencies on other third-party services. Therefore, when third-party service downtime occurs it also affects the organizational services. To monitor downtime, there is a need to create a system (preferably a service monitoring app), so it can notify when the system downtime occurs.

A few hours of downtime might not seem like a big deal at the time, but if it happens when people are most likely to use your services, and they can’t get in, you could lose the client’s interest and maybe much more. Downtime can have a devastating impact on businesses of all sizes.

Get to the point :

What about getting multiple services with real-time statuses on a single page and sharing downtime notifications on Slack?

I used the Slack incoming webhook API and status APIs stored in constant. https://api.slack.com/apps?new_app=1

I used the below Figma for Design.

Figma Design :

https://www.figma.com/file/Jobvnz4b90VKQBCIh2vxiO/checkstatus?node-id=0%3A1

I got a Slack incoming webhook token by signing in for Developer access from Slack Portal. For more information, visit Slack API Doc.

Development With DhiWise:

I saved 100% web designing and component writing time by using DhiWise. It saved me more than 70% of the time. Here is how:

1. I created my application on DhiWise and imported my Figma onto it.
2. It automatically fetched all my screens and helped me perform additional functionalities such as Navigation, and Constants management.
3. I hit the “build app” button and got the code. After that, I needed to modify a few lines of code as per my requirement.

DhiWise Introduction

Next-gen programming automation platform to develop enterprise-grade applications in low-code and pro-code simultaneously. All in hours, not weeks. Eliminate the pain of mundane and repetitive tasks of your developers so your team can focus on things that matter.

For more information visit our website.

Integrate Status APIs of Dependency Services and Slack API in DhiWise:

So after creating the application in DhiWise, It will ask for the Figma URL. It will fetch all your Figma screens to provide the UI code with components structure and TailwindCSS.

After fetching the screens, it will show each screen like this.

You can configure the screen with the all-new Smart Editor. It gives the same feeling as you work with the editor you prefer in your daily development. DhiWise feels like home to the developers.

Configure the UI components by simply typing the name editor’s smart suggestions. The suggestions will pop up to assist you in writing faster code intelligently.

Please make sure you have exported the cUrl from the Slack incoming webhook access. On the left sidebar of DhiWise, go to the API Integration option and click on the button to import cUrl.

We will see the first API. The rest are the same to implement in DhiWise.

Once you add Logo URLs, Status API endpoints, and Redirect URLs go to the screen and define the onClick property for the component you want. Select “API Integration” and write the function name, and you can set up your headers, requests, and responses.

So I have the list of elements in this Figma where I have to implement this API.

Put all your data inside the headers. Define your token.

For the response part, you can directly integrate the list data. DhiWise platform will write a JavaScript map loop to print all data. It will handle all the elements and design as well.

No need to write even an API call function. DhiWise is generating that too for you.

You need to do manual logic for a response if it is different from the common one which we implemented for the first API.

Developer Experience:

Code Review

The directory structure generated from DhiWise looks like this:

DhiWise generates all the common components separately like buttons, Rows, Columns, List, etc. It helps in two ways:

1. Maintain project design guidelines from one single place.
2. Reuse component codes.

Tailwind CSS

DhiWise generates TailwindCSS codes for the component, making code easy to read and edit or scale.

Easy to read

As a ReactJS developer, I find the DhiWise-generated code more reliable than being dependent on a large team.

Figma to React is real quick. No iterations. No delays. No worries. Just import Figma and get the ReactJS project with the structured code.

If you build 5 screens in ReactJS + TailwindCSS, that will eat your brain, peace, and time. All together.

With DhiWise, it is just a matter of a few minutes. Just import Figma, select the screen and build the code.

API Integration

Just like you do in your daily work but smarter, faster, and easier.

Smart-suggestion. No gap for errors and bugs. Dreamy, right? Well, DhiWise made it true

The code

DhiWise generates a common function with the AXIOS package to manage API calls with the least errors.

And that’s a wrap if you simply plan on developing the service monitoring web app to stay on top of your services. For anything else, keep reading:

Here is the generated output

Video Tutorial

Want to see how to build this using DhiWise?

Here is the working application’s GitHub link:

GitHub - DhiWise/DowntimeMonitorWebApp: This is a react web application. It uses status APIs of…

About me:

I am a Backend Developer at DhiWise. It’s a pro-code platform that generates production-ready code for React and Flutter Apps. It is so much more than just a design-to-code platform.

You can find me on LinkedIn and Twitter, and we can talk about cool dev tools like the one I am developing.