Powering your low-code app with AI. Integrate UbiOps with OutSystems.

By 12 January 2022Blog, Functionality, Usage

Powering your low-code app with AI
By hosting a Python script and integrating it via a simple API endpoint.

If you know Python or R and wish to make an AI-powered app, or simply apply more advanced analytics to existing BI apps, this is the guide for you. In this case, we explain how to integrate UbiOps with an Outsystems app specifically. 

Say you want to build an application that monitors train tracks, which has a front end where the end user can review when and how often people were detected close to the tracks. To keep things simple we won’t build the entire application. But we’ll help you build the integration with Outsystems, so you can build your app around it. In this case, it’ll be an API endpoint with a model behind it that you can upload pictures to, see when objects are detected, and where you can view a returned result. 

For this we need to have a pre-trained object detection model, some place to host it, and an application/front end. This article focuses on how to take the pre-trained model, host it on UbiOps, and plug it into the application you have built with Outsystems. Although we’re using an object detection model here, the integration is similar for other models or code.

In summary, you need:
1) A UbiOps account (create one here)
2) An Outsystems account (create one here)
3) The (exported) object detection model which can be downloaded here.

1. Upload your code to UbiOps, get the API token and give it the right permissions.

You can find the pre-trained and ready-to-go object detection model here.
If you use the ‘import/export functionality’ in UbiOps to import the entire model and its settings, you won’t have to adjust anything at all to make the model work. It’s available for requests straight away. (See also: https://ubiops.com/docs/import-export/).

This model requires a base_64 string as input. That’s basically an image represented in a very long string of letters and numbers. You can test the model in UbiOps by clicking on “create request” in the top right. Use this website to encode your image to a string for testing purposes: ​​https://www.browserling.com/tools/image-to-base64

To allow our soon-to-be Outsystems application to make requests to the model we just deployed, we must create a service user with the right permissions to call the API endpoint of the model. In UbiOps go to permissions -> API tokens and create a new role. Ensure it has at least the ‘deployment-request-user’ role assigned. The screenshot below shows one step in the process of creating this service user, where its permissions are assigned. When you receive the API token, make sure you store it somewhere because you won’t be able to retrieve it again.

See also this page for more info: https://ubiops.com/docs/organizations/service-users/

With the model deployed you can now copy the API endpoint from the ‘general’ page of your deployment (see picture below).

In case you imported the entire model as explained in this guide, you probably did not see what the required input and output formats are. You can find this under your deployment -> versions -> ‘edit’, or copy the input format from here (JSON):

  "name": "image_base64",

  "data_type": "string"

This means that the model expects something with the name “image_base64”, and with data type “string”, so multiple letters/numbers (e.g. a base_64 encoded string:)). 

2. Edit your Outsystems app such that when you upload a picture it calls the UbiOps API. 

After having created an account on Outsystems and logged in on the Outsystems “service studio” you can either choose to create a new app (or module) or continue in your existing app (or module) with the following steps.

Navigate to the logic tab -> right click REST API -> consume REST API. Select the ‘single method’. 

Select ‘POST’ method as the API method on top of the tab. Take the API endpoint URL of your deployment and add ‘/requests’ to make it suitable for requests, and paste it right next to the “POST” option in Outsystems.

Now fill in the body and the header as follows:
The ‘body’  should be the image_base64 string as defined in the input (in UbiOps). Otherwise you’ll be sending something to UbiOps that it doesn’t expect.
See in the picture below, in JSON format, how you can provide the request body. Paste your own base_64 encoded string of your image there for testing purposes. As you can see, I made a mistake previously and it shows the corresponding error in the response field below. This is how you can troubleshoot as well. 

Printscreen of ‘body’ tab when setting up the API connection with UbiOps. Then move to the tab ‘header’. 

The header should include a request and a response header. Fill in:
Request header: Authorization
Response header: the API token of your deployment/model (the one you saved earlier on).

Navigate to the third and last tab, ‘test’, and make a test request. You can troubleshoot here if you find any errors in the test results. If it works well, you can click ‘copy to response body’ at the bottom and click ‘finish’. Now you’ve successfully set up a REST API call to UbiOps from Outsystems. 

Now you can build your own application around this API call, and include AI in your low-code front-end application. 

For any questions don’t hesitate to reach out to us via slack or via our contact page.