Tutorial: Hello world

This tutorial will guide you through creation of the basic "Hello world" pipeline. It assumes that you have either registered at cloud version of Exynize or deployed your own copy of the platform.

Step 1: "Hello world" source

First, we'll create a source component that will dispatch a string "Hello world!" and end immediately.
To do this, navigate to "Create component" tab, name your new component and add the source code.
Here's how the code will look:

export default (obs) => {
    obs.onNext('Hello world!');
    obs.onCompleted();
};

As mentioned in the description of source components, the function that we export as default in this code will be passed to Rx.Observable.create to get new Observable.
In this case, the observable will only dispatch one value (Hello world!) and complete immediately.

Make sure to hit "Test" button once you enter the code into the Exynize editor to see the resulting output. After test succeeds, hit the "Save" button to save your new source component.

Step 2: Basic string processor

Next, we'll create a simple processor component that will generate a new string using the input data and a preset template.
Once again, click on "Create component" tab to create new component, name it and add the source code.
Here's how the code will look:

export default (data) => {
    return Rx.Observable.return(`${data} => processed!`);
};

As mentioned in the description of processor components, the function that we export as default in this code will be applied to the source using .flatMap operator.
That's why we return new Observable instead of just value. This simple change allows us to easily create both sync and async processors without changing syntax.

The result of this processor will be a new string created from the template we'd used. E.g. if data was Hello world!, the output of this processor would be Hello world! => processed!. You can test this by entering Hello world! into data field in Exynize editor and hitting "Test" button.

After test succeeds, hit the "Save" button to save your new processor component.
You can find all your saved components as well as all public components in "Browse components" tab.

Step 3: Basic string renderer

Finally, we need to create a render component that will display results. We'll create a simple one that will just render incoming data a string. Again, start by clicking on "Create component" tab to create new component, name it and add the source code.
Here's how the code will look:

export default () => React.createClass({
    render() {
        return <h2>{this.props.data}</h2>;
    }
});

As mentioned in the description of render components, the function that we export as default in this code will be used to create a React component that will be displayed to user.

You can test this component by entering Hello world! into data field in Exynize editor and hitting "Test" button. You will see rendered representation of your component.

After test succeeds, hit the "Save" button to save your new render component.

Step 4: Pipeline assembly

Now that all the components have been created, we need to assemble them into a pipeline.
To do that, first navigate to "Create pipeline" tab, name your new pipeline and start adding components.

First click on + button near "Source component" text to bring up list of all available source components. Find the component you've created in the first step of this tutorial and click "Select" button.

Next click on + button near "Processor components" text to bring up list of all available processor components. Find the component you've created in second step of this tutorial and click "Select" button.
Since this pipeline will only have one processor, click on - button near "Processor components" text to collapse processor selector.

Finally, click on + button near "Render component" text to bring up list of all available render components. Find the component you've created in third step of this tutorial and click "Select" button.

Make sure to test the pipeline by pressing "Test" button before saving it using the "Save" button.

Step 5: Running and viewing results

Now that you've assembled, tested and saved your new pipeline, you can navigate to "Browser pipelines" tab to see it there.
To start it, simply press "Start" button next to it. Doing so will execute the pipeline in the runners and produce the output that can be viewed in one of three ways:

1. You can view the rendered result by clicking "Web" button next to pipeline name
2. You can view execution logs by clicking "Log" button next to pipeline name
3. You can get the resulting data by sending HTTP GET request to pipeline URL with accept: json header