Finishes NodeRed example

website/docs/examples/node-red-phycus.md

@@ -16,4 +16,130 @@ This .zip file is necessary to carry on with this example and those are availabl
 - [**phycusTeselagenNodeRed.zip**](https://raw.githubusercontent.com/TeselaGen/fsml.org/main/website/static/phycus-tg-nodered-example-01.zip)
 
 
+## Node-RED Server
 
+In order to get started with using Node-RED flows you will need a Node-RED server running.
+
+TeselaGen offers one such server at https://biomade.teselagen.com/node-red-editor to all Biomade members logged into TeselaGen.
+
+_NOTE: If you are a Biomade member looking to get an account to the app feel free to contact the TeselaGen Team at [email protected]._
+## Node-RED Flow
+
+Included in the [**phycusTeselagenNodeRed.zip**](https://raw.githubusercontent.com/TeselaGen/fsml.org/main/website/static/phycus-tg-nodered-example-01.zip) file you will find the Node-RED Flow JSON file called `phycus-teselagen-flow.json` that you can import into any Node-RED editor as new Node-Red flow. The flow should like the following screenshot:
+
+![image](https://user-images.githubusercontent.com/11540280/208500500-dd94e3b9-861c-41be-b749-d49fbb3647b8.png)
+
+
+As you can observe, the Flow is pretty simple with just a few functional nodes and I/O http ones.
+
+The first function node (FSML --> TG) contains code that imports an npm package called [tgExporter](https://www.npmjs.com/package/tg-exporter) that exports an [FSML Plugin Exporter](/software/plugins/exporter). It takes in an FSML Manifest and returns a TeselaGen Data Grid _(a data grid in TeselaGen is a an object specific to TeselaGen used to represent data as data cells)_.
+
+```javascript
+/** FSML --> TG Node-Red Function Node. **/
+
+// Imports the tgExporter public npm package which exports an FSML Plugin Exporter
+const tgExporter = global.get("tgExporter")
+
+const { manifest } = msg.payload
+
+msg.payload = tgExporter.run(manifest)
+
+return msg;
+```
+
+The second functional node called `Prepare Data grid Body` is just TeselaGen specific code to format the body request of a POST /data-grids endpoint to create a Data Grid in TeselaGen's TEST Module app.
+
+## FSML TeselaGen Exporter Plugin
+
+The first function node in the above flow, imports the `tgExporter` npm package. This publicly available and works by generating a TeselaGen Data Grid by parsing any FSML data manifest. The implementation of such Exporter can be seen below:
+
+<details>
+<summary>TeselaGen's FSML Plugin Exporter</summary>
+
+```javascript
+
+import * as fs from 'fs';
+import lodash from 'lodash';
+import * as fsml_utils from 'fsml-utils';
+import * as fsml_standard from 'fsml-standard';
+import papaparse from 'papaparse';
+
+const { get, flatMap } = lodash;
+
+const tgExporter = {
+  name: 'tgExporter',
+  type: 'exporter',
+  run: (manifest) => {
+
+    // Leverages the FSML SDK to validate the provided manifest object.
+    const { isValid } = fsml_utils.validateType(
+      fsml_standard.Manifest,
+      manifest
+    );
+    if (!isValid) throw new Error('Invalid FSML manifest');
+    const manifestRows = get(manifest, 'supplementalInfo.data[0].rows');
+
+    const dataRows = manifestRows.map((row) =>
+      row.values.map((rowValue) => rowValue.value)
+    );
+
+    const dataGridCells = flatMap(
+      dataRows.map((dataRow, rowPosition) =>
+        dataRow.map((cellValue, columnPosition) => ({
+          rowPosition,
+          columnPosition,
+          value: cellValue,
+        }))
+      )
+    );
+
+    const dataGrid = {
+      name: 'fsml-datagrid',
+      dataCells: dataGridCells,
+    };
+
+    const csvData = papaparse.unparse(dataRows);
+
+    const csvDataBuffer = Buffer.from(csvData, 'utf-8');
+
+    return { data: dataGrid, file: csvDataBuffer };
+  },
+};
+
+export default tgExporter;
+```
+
+</details>
+
+The above implementation leverages the FSML SDK for validation and parsing of an FSML Manifest file. The SDK is distributed into the following publicly available npm packages:
+
+- [fsml-standard](https://www.npmjs.com/package/fsml-standard)
+    * Exports all the FSML manifest schemas to build different parts of the FSML manifest.
+- [fsml-plugins](https://www.npmjs.com/package/fsml-plugins)
+    * Exports some typing functions for easier implementation of different FSML Plugins, mostly beneficial for TypeScript developers.
+- [fsml-utils](https://www.npmjs.com/package/fsml-utils)
+    * Exports several utility function to work with FSML, such as the `validateType` and `createTemplateForType` functions
+
+
+## Import FSML into TeselaGen
+
+Finally, we are going to trigger the above Node-RED flow to get the FSML Phycus manifest into a TeselaGen Data Grid. Since Node-RED flows are essentially HTTP endpoints, we can trigger them with any kind of tool that allows calling http requests. If you are a Biomade member you can leverage TeselaGen's Biomade app, if not you can hit the endpoint of any Node-RED server you might have access to.
+
+The next steps of the example are for Biomade members only.
+
+### Log into the Teselaegn Biomade app
+
+Head to https://biomade.teselagen.com and log in with your credentials _(if you are a Biomade member and don't own an account, contact [email protected] to get one)_.
+
+
+After logging into the app, head to [Setting > Intergations](https://biomade.teselagen.com/test/client/settings/integrations-management), you shall see the Integrations Management Panel, where you can upload an existing Integration. Included in the [**phycusTeselagenNodeRed.zip**](https://raw.githubusercontent.com/TeselaGen/fsml.org/main/website/static/phycus-tg-nodered-example-01.zip) file you should find a JSON file called `phycus-teselagen-integration.json` that you can use to uploading in the `Upload Existing` button shown below.
+
+
+![image](https://user-images.githubusercontent.com/11540280/208506273-4404bd53-5547-4d44-ae2a-49eb0019774c.png)
+
+After so, and if you scroll down to the `API Integration` subsection you shall a see a new TeselaGen Integration called `fsml` as shown here.
+
+![image](https://user-images.githubusercontent.com/11540280/208506733-ba409a13-f9a5-404a-b93f-51f8a2ca1860.png)
+
+
+The TeselaGen app runs its own dedicated Node-RED Server, you can open its Node-RED editor and look at the Node-RED flow by clicking in the View in Node Red button shown above, which should take you the same Node-RED flow explained at the beginning.

website/docs/software/tools/nodered.md

@@ -8,3 +8,40 @@ slug: /software/tools/nodered
 The FSML Node-RED tool is under development.
 
 _Node-RED is a programming tool for wiring together hardware devices, APIs and online services in new and interesting ways. It provides a browser-based editor that makes it easy to wire together flows using the wide range of nodes in the palette that can be deployed to its runtime in a single-click._
+
+
+## Introduction to Node-RED
+
+Node-RED is a powerful tool for building IoT applications, allowing you to quickly and easily connect hardware devices, APIs, and online services using a visual, drag-and-drop interface. In this article, we'll cover the basics of using Node-RED and how to get started building your own projects.
+
+###  Setting up Node-RED
+To use Node-RED, you'll need to install it on your computer. The easiest way to do this is to use the Node.js package manager (npm), which comes with Node.js. First, make sure you have Node.js installed on your machine. Then, open a terminal or command prompt and enter the following command:
+
+```bash
+    $> npm install -g node-red
+```
+
+This will install Node-RED globally on your machine. Once the installation is complete, you can start Node-RED by running the following command:
+
+
+```bash
+    $> node-red
+```
+
+This will start the Node-RED server, and you should see a message indicating that it is running. You can then access the Node-RED editor by opening a web browser and navigating to http://localhost:1880.
+
+### Building a Node-RED flow
+
+In Node-RED, you build applications by creating a flow of interconnected nodes. Each node represents a specific function, such as reading data from a sensor, making an HTTP request, or displaying data on a chart. To build a flow, simply drag and drop nodes from the palette on the left onto the canvas in the center. Then, connect the nodes together by dragging wires from the output of one node to the input of another.
+
+As you build your flow, you can configure the properties of each node by double-clicking on it and filling in the form that appears. For example, you might specify the URL of an HTTP endpoint, the port number of a sensor, or the format of a message to be displayed.
+
+
+### Configuring Node-RED
+In order to be able to have access to public npm packages you will need to tap into Node-RED's settings file and update it with the npm package you can you Node-RED editor to come with.
+
+### Deploying your flow
+Once you've finished building your flow, you can deploy it by clicking the "Deploy" button in the top-right corner of the editor. This will send your flow to the Node-RED server, where it will start running. You can then interact with your flow by sending it data, or by using the built-in debug and dashboard nodes to monitor its behavior.
+
+### Next steps
+Congratulations, you now know the basics of using Node-RED! To learn more, be sure to check out the official Node-RED documentation and the many tutorials and examples available online. With also provide a Node-RED example at [Node-RED FSML Example](/examples/node-red-phycus)