Tempo

Tempo is a platform designed to allow customers to schedule pest control visits with the service provider on their location. It aims to bridge the gap between the company's website and scheduling software for pest service providers.

Inception phase

During the discovery, the client approached us with the idea of simplifying communication between customers and pest control providers. They identified a missing link between the customer-facing website and the management system used by the providers. The client also explained the necessary workflow for customers to schedule an appointment through the pest service provider's website and into their management software application.

Based on these requirements, we were tasked with generating a solution for this type of customer that would only require access keys to the management software, adding a Javascript tag to the website, and defining the button that triggers the application. This simplifies the integration process with each pest service provider.

As part of the process, we were also required to capture payment for the initial visit or service from within the application. We planned to integrate two payment providers based on the customer's requirements and register payments and information in the management software backend to allow charging to the credit card if required.

Development phase

The application is built on a multi-tenant architecture, which enables multiple customers to use the system, and serves the ReactJS application that is dynamically injected into the pest service provider's webpage through a specific JavaScript tag that's generated for each provider, which loads the specific customer configuration. Our task was to take the existing backend application that the customer had, review it, and generate the necessary test cases to ensure that the communication with the management software worked as expected. Once this was completed, we worked with a designer to create the frontend application design.

We checked that we could follow all the instances of the recommended workflow, validated all the icons, and ensured that customizations for each future customer could be integrated into the code. After the design was confirmed, we developed a ReactJS application that forms the foundation for each step of the workflow. We validated each step and branch that a customer can use on the system using automated testing with the CodeceptJS testing suite, to avoid changes down the line that might affect the already implemented code.

Since the platform allows for each customer to have different elements in their styles, such as color scheme, logo, names, and location, we added API links for providers to configure these elements. We validated at least three different color schemes and generated an API endpoint that receives the provider's name and returns a JavaScript code that injects the application with the correct configuration for payment provider (Braintree or WorldPay) and color scheme, design, and logo for the provider. This allowed the script for this endpoint to be injected into any website, with the application triggered by selecting the appropriate action on the page. Since the platform also allows providers to choose whether to capture new customers, attend only to existing customers, or both, we generated test steps for each of the three possible configurations.

These workflows were automatically run and validated by the testing suite before integrating any new changes.

Deployment and initial proof of work

While developing the system and adjusting the calls to the management software, we created an auto-scalable service on AWS Beanstalk. This service includes an API provider running on EC2 that serves configuration files and a dynamic script. The ReactJS application is loaded from an S3 bucket, and the API redirects all requests to the management software directly. We configured the payment methods in a sandbox environment to test and validate the coordination between services.

To demo the application, we used one of the customer's websites and tested purchasing, requests, and all workflows using the provider website's ready-to-deploy configuration.

We deployed all the infrastructure to a simplified service based on the Heroku platform as a staging ground. We also integrated the Sentry service to track errors in the application and provide important context information for proposing solutions.


Tagged under


Apr 2023 - Tempo

Serfe info(at)serfe.com https://www.serfe.com/images/serfe_logo_text.png https://www.serfe.com/images/serfe_logo_text.png FALUCHO 2032, S3016LDB, SANTO TOME, SANTA FE, ARGENTINA 1-305-5375397
Cookies & Privacy: 
This website uses cookies to ensure you get the best experience on our website.


Privacy Policy