Flutter

Build your own Flutter mobile application to monitor downtime of your system with notifications in a day using DhiWise

72
Saved hours
$1080
Saved money
iconiconicon

In organizations, there are possibilities that their service have dependencies on other third-party services, and when third-party service downtime occurs it also affects their services. So to monitor downtime, there is a need to create a system like this that can notify the stakeholders when the system downtime occurs.

A few hours of downtime might not seem like a big deal at the time, but if it happens during a time 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.

The Challenge

For all different types of services, there are different status pages and instead of visiting and checking each service’s status, an idea was thought upon to automate the process of providing all service statuses on a single page and sending notifications of the dependent services which are having downtime.

The Solution

With the help of DhiWise, users can save the cost of time for development which is the best part because the developer can focus on the creative part instead of putting all efforts into coding recursive tasks.

Steps:

  1. Converted Figma to Flutter code
  2. Created constants of URL like logo, status page view, and status API endpoints
  3. Actions, Navigation, and Passing Arguments
  4. Notification With Slack Incoming Web-hooks

1. Converted Figma to Flutter code

DhiWise Flutter Builder had generated each component from Figma designs with accurate Flutter UI with the required model, widgets, controller, and state management code using GetX in a very structured way.

Here, DhiWise also has a rich collection of Figma screens available, which can be used to create excellent working applications using DhiWise Flutter Builder. Here, in this case, only 2 screens were used to create a working application.

The panel had screens that could be imported easily from Figma URL and it also had a sync option to sync all changes at any time without interrupting existing functionalities.

2. Created constants of URL like logo, status page view, and status API endpoints

In the application, it was required to store values of API endpoints, logo images, and redirection URLs, so they can be used anywhere in the project. Using the Constants feature of DhiWise, it was achieved easily.

Image

3.Actions, Navigation, and Passing Arguments

On the Ready method of the home screen, there was some manual part that required to be done like binding dynamic constant values into a list and binding logo image links and service name with a view of the row in the list, binding with a button to select multiple services.

After that actions like the click of the button, which redirected to another screen using the Navigation feature Of DhiWise, which also supports passing arguments in the state with Navigation, so it was managed and saves more time and solves difficulties for passing, which is managed by DhiWise as it has a feature to bind response of API with the state.

Image

It was required to load API data on the Screen. Using the API Integration on the Lifecycle method along with using the previous page’s navigation arguments and API endpoint from the constants, everything was accessible on the Platform, so it was integrated quickly and then logic was added manually.

Image

Here the list which needed to show was the selected service list from the home screen. This screen was to get the status of each service by calling get API dynamically which was a logical part of coding, and showing the status as per response on the screen, also had a tap method where navigation was set to open the original status page of the service in a new tab which was saved in constant named "redirect URL" at the beginning of the project.

4. Notification With Slack Incoming Web-hooks

Here, to implement Slack Incoming Webhooks a new app name was created and it’s workspace was also chosen from the drop-down menu.

Image

After creating a new app "Activate Incoming Web-hooks" was selected to first to allow to post messages through Slack Webhook APIs.

Image
Image

When access was allowed to the channel token generation was required to authorize Webhooks API.

Image

It provided cURL to implement Web-hook In Project, imported cUrl in API Runner, and API Integration was done in the “on ready” method of the life cycle.

URL was provided to implement Web-hook in this project so after importing the same in API Runner, API Integration was done in the “on ready” method of the life cycle.

Image
Image

After importing cUrl, it was easily integrated into a project with manual logical parts also as there may be different types of responses from each API as endpoints and domains were different, but mostly up to 65% of services which provides the status of the services have some standard responses.

Image

Finally, the Flutter Project was generated through DhiWise, after a few manual business logic and the working application is available on GitHub. You can clone the project, replace API and modify the code as per your requirements.