Getting started with the ObjectStore connector

ObjectStore Connector

As a developer, organizing, managing and searching through high volumes of unstructured data can be a challenge. With an ObjectStore (also known as a KV store), developers can store data as a Key Value pair. This data storage model is incredibly easy for developers to implement and automatically scales as your application takes off. With MuleSoft’s Anypoint Platform and Flow Designer, designing integrations and storing data is simple.

Game objective

In this mini game, control Max the Mule with the up, left, and right arrow keys on your keyboard. Jump and run around the level to collect “MuleCoins”. Each coin will increment the current value in the ObjectStore by one increment. The score that is displayed on the top right of the window is the global number of “MuleCoins” that have been collected by developers like you. If other developers are playing the game at the same time, you could see the number increment up automatically.

HTTP to ObjectStore flow

Flow Designer, which is located within Design Center on MuleSoft’s Anypoint Platform, provides developers with an easy-to-use platform to build complex integrations. With Flow Designer, placing connectors to route and manipulate data is easy. Let’s run through each connector we used in this video game to store the score in the ObjectStore.

The first step is to add an HTTP Listener connector to the project. In the Path field, type message in the field which defines the endpoint that the request will post new coin count data to. In the Advanced tab, in Allowed Methods type in POST. This will allow only POST requests to trigger the flow. In the Responses tab, set Headers to allow Access-Control-Allow-Origin to “*”. This header prevents the application from getting Cors errors when running the game on a local machine, since sending XHR requests from a local server causes Cors security issues.

Next, let’s add a Transform connector to the Flow. Next, add the following code under the Script tab to convert the payload data which is in a string format into JSON. The read API is a Dataweave Operator that allows you to convert data from one type into another type.

1
2
3
4
%dw 2.0
output application/json
---
read(payload,"application/json")

Next, let’s set up a few variables so we can store retrieve and store objects into the ObjectStore using the correct value and key in the Payload. First, add a Set Variable connector to the flow. Name the variable name Value. In the value, add the dataweave expression #[payload.value] in the value field. This will assign the payload value object to a variable. Some of the actual games code is pasted below. You will see that the XHR POST request is formatted into two rows, a key row and value row. Those values in the body of the message are what will be stored in the Set Variable connector.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const sendCoin = async () => {
const response = await fetch('http://mule-coin-collector-unsx.us-e2.cloudhub.io/message', {
method: 'POST',
body: JSON.stringify({
"key": "coinCount",
"value": 1
}),    
headers:{
}
});
const responsetext = await response.json(); //extract JSON from the http response
scoreText.setText(responsetext);
globalText = responsetext - 1;
}
sendCoin();

Next, add another Set Variable connector to the flow. Name the variable name Key. In the value, add the dataweave expression #[payload.key] in the value field.

Next, let’s retrieve the most recent value that is stored in the ObjectStore. If there is no value stored in the ObjectStore, set the beginning value to 0. Also, it’s important that we set the data type equal to application/json. In the Key field, we pass vars.key which lookups the value by the key we saved as a variable.

Next, let’s go ahead and store the updated score in the ObjectStore so that all users can see the same output. To update the most recent score, take the sum of the payload (which is the value we Retrieved in the ObjectStore Connector), and vars.Value which is the variable we saved of the value passed by the JSON message.

After the updated score is saved in the ObjectStore, the flow will return the updated value to the client who initiated the POST request. This means that the updated coin count will be shown to all users on the top right of the HTML5 game window. Need some more help, watch our YouTube video tutorial below.

Next Steps

Got lost? Download the .jar file and import it into Flow Design. Now that we’ve created our MuleSoft video game, go checkout some more of our awesome developer tutorials. Visit our tutorials page to view more developer tutorials.