Note
Before going further, we recommend that you get an overview from Workflow Designer User Guide.
Before going further, we recommend that you get an overview from Workflow Designer User Guide.
February 18, 2022
This project demonstrates the use of the Workflow Designer Toolkit to customize an app to make it context-aware.
The Context Intent Manager (CIM) service interacts with the AI engine and the workflow to provide the required functionality.
We use a Tic-Tac-Toe game to demonstrate this functionality.
webOS OSE target device (Raspberry Pi 4)
If you do not have this device, then set it up by following the instructions mentioned at Building webOS OSE.
Workflow Designer Toolkit (on the local system)
<WorkflowDesignerRootFolder>
.Tic-Tac-Toe AI custom node
This node provides the logic to make player 2 an AI Bot.
The source code is available at the samples repository. Clone this repository to download the source code on your local development system, and find the custom_nodes/node-red-contrib-tictactoe-ai directory under the ref-apps
repository.
Copy to the <WorkflowDesignerRootFolder>
.
Install the custom node as follows:
On the command prompt, navigate to the <WorkflowDesignerRootFolder>/dashboard/.nodered
directory.
Run the following command:
npm link ../../node-red-contrib-tictactoe-ai
Launch the Workflow Designer tool.
Launch the Workflow Designer toolkit. By default, the Flow Editor page is shown.
Drag and drop the data-inject, tictactoe-ai, and data-publish nodes to the Flow Editor page.
Connect the nodes as shown in the below screenshot:
A brief explanation of the above nodes:
Click the data-inject and data-publish nodes and from the Information pane, make a note of the key value of the nodes.
injectDataToWorkflow
method.getDataFromWorkflow
method.Save the workflow by clicking the Save button.
Find com.reference.app.tictactoe
directory from the cloned samples repository.
Open the index.html
file and update:
For the injectDataToWorkflow
method:
Update the key
parameter with the key of the data-inject node.
This method injects data (current state of the game) from the app and sends it to the tictactoe-ai node.
var request = webOS.service.request("luna://com.webos.service.contextintentmgr/", {
method: "injectDataToWorkflow",
parameters: {
key: "2ca8301e.8535_5a3cbb17.55aa04",
data: '{"currentGameState": ' + JSON.stringify(currentGameState) + '}'
},
onSuccess: function (inResponse) {
console.log(inResponse);
app.data_injected = JSON.stringify(inResponse);
},
onFailure: function (inError) {
console.log(inError);
app.data_injected = JSON.stringify(inError);
},
onComplete: function (inResponse) {
console.log(inResponse);
app.data_injected = JSON.stringify(inResponse);
},
subscribe: false,
resubscribe: false
});
Similarly, for the getDataFromWorkflow
method:
Update the key
parameter with the key of the data-publish node.
This API gets data (the move from the bot) from the tictactoe-ai node of the workflow and sends it to the app.
var request = webOS.service.request("luna://com.webos.service.contextintentmgr/", {
method: "getDataFromWorkflow",
parameters: {
key: "2ca8301e.8535_f1174563.0ecdd8"
},
onSuccess: function (inResponse) {
console.log(inResponse);
var resultData = inResponse.result.data,
gameData = resultData.payload;
app.data_published = JSON.stringify(gameData);
app.game_state = gameData.nextBestGameState;
app.grid = prepareGridData(gameData.nextBestGameState);
let winner = gameData.winner;
if (gameData.winner === '' && gameData.depth === 2) {
app.game_status = "It's a Tie";
} else if (winner) {
app.game_status = (winner === "O" ? "BOT" : "PLAYER") + " wins";
} else {
app.game_status = "In progress";
document.getElementById("tictactoe_game").classList.remove("disable-grid");
}
},
onFailure: function (inError) {
console.log(inError);
app.data_published = JSON.stringify(inError);
},
onComplete: function (inResponse) {
console.log(inResponse);
app.data_published = JSON.stringify(inResponse);
},
subscribe: true,
resubscribe: true
});
In the Workflow Designer Toolkit, click the Package Wizard tab located at the top right-hand side.
Specify details for packaging the app.
com.reference.app.tictactoe
) directory.flows.json
file from the path (<WorkflowDesignerRootFolder>/dashboard/.nodered/
).node-red-contrib-tictactoe-ai
).Specify details for deploying the app on the target device.
Enter the IP Address of the device.
Click Next. A message “Installing application to the device” is shown.
After the operation is complete, it provides a message that indicates that installation is successful and asks to restart the webOS OSE target device to enable the update application flow.
Launch the app on the display and play Tic-Tac-Toe against the BOT as player2.
Contents