Quick Start

This quick start gets you up and running with Quix in the shortest possible time.

It shows you how to deploy a real-time app in the Quix platform and walk you through the relevant parts of the code.

There are two parts to the guide:

Get up and running In this section you will deploy a real-time chat application and connect to it with your computer and phone.
Add more features In this section you will add an external feed to the pipeline and see messages delivered in real-time.

Don't get stuck

If you run into trouble or need any help of any kind with this guide, then please drop into our Slack community The Stream

1. Get up and running

To get up and running as fast as possible you will use items from the Quix Library. These have been coded and tested. All you have to do is deploy them to your workspace.

Analyze Sentiment

To compliment the chat UI you will deploy in the next step, you will first deploy a pre-built microservice designed to analyze the sentiment of messages in the chat.

Click + Add transformation on the home screen.

Not your first time?

If this is not your first time deploying something to this workspace then navigate to the Library using the left hand navigation instead.
Use the search box to find the Sentiment analysis library item.
Click Edit code

Note

Ensure that the input is set to messages and the output is set to sentiment
Click Save as project

The code for this transformation is now saved to your workspace
Locate main.py

Locate the line of code that creates the output stream

output_stream=output_topic.create_stream(input_stream.stream_id)

Append -output to the stream id.

This will ensure the UI is able to locate the sentiment being output by this transformation service.
```
output_stream=output_topic.create_stream(input_stream.stream_id + "-output")
```
Click Deploy near the top right corner
Change the memory in deployment settings to at least 4GB
Click Deploy on the deployment dialog

Success

You located and deployed the sentiment analysis microservice to the Quix platform.

This microservice will subscribe to the messages topic and process data to determine the sentiment of any messages in real-time.

The UI

You are going to locate and deploy a UI. It's written in Angular and connects to Quix. Allowing you to see messages on both your phone and computer in real-time.

Navigate to the library using the left hand navigation.
Use the search box to find the Sentiment Demo UI library item.
Click Edit code.
Click Save as project.
Click Deploy near the top right hand corner of your browser window.
Click the Public Access section of the dialog to expand it.
Click the toggle switch to enable public access.
Click Deploy on the dialog.

Success

You located, saved and deployed the UI code to the Quix platform.

The UI is comprised of a relatively simple Angular app that subscribes to Quix topics and streams chat messages and sentiment data in real-time.
The Code

If you want to dive into the code then please do. These are some of the interesting bits:
1. Expand the tree view and select the webchat.component.ts file.
Locate the connect() method.

Notice the SubscribeToEvent and SubscribeToParameter lines. These are used to tell Quix that the code should be notified as soon as data arrives. Specifically any data arriving for the specified topic, stream and event or parameter.
1. Above the parameter and event subscriptions in the same file you will see the handlers. These will handle the data, doing whatever is needed for the app. In this case we add the messages to a list, which is then displayed in the UI.
```
this.quixService.readerConnection.on('EventDataReceived', (payload) => {...}

this.quixService.readerConnection.on('ParameterDataReceived', (payload) => {...}
```
For more on connecting to Quix with a web based UI take a look at how to read and write with NodeJS.

Testing it out

In the browser

Once the UI is built and deployed you can go ahead and click the icon on the Sentiment Demo UI tile.

You will see a form asking you to enter the name for a chat room and your own name.

Enter Room1 for the room and anything for your name.

Click Connect

You will be redirected to the chat page.

The most notable features of this page are the chat area, the sentiment graph and the QR code.

Enter some positive and negative messages in the chat window.
You will see your messages and a short time later the sentiment of the message will be indicated by the name tag next to each message changing color.

On mobile

Now join the chat with your mobile phone, chat messages will be displayed both on the phone and in the browser.

With your mobile phone, scan the QR code.
Use the same room name as before Room1
Use a different name e.g. Mobile
Type some messages

Success

You will see the message and it's sentiment on your phone

And the same messages and sentiment will appear in real-time on your computer's web browser

2. Add more features

Now that you have the basics of searching the library, selecting and saving a pre-made sample and deploying it to the Quix serverless infrastructure, we can add an additional services to the pipeline including sourcing data and pre-processing the data so it's compatible with the existing services.

Your'e a pro now, so we'll move a little faster!

Create the data source

Go to the library
Search for the Empty template - Source. If should have a blue highlight.
Click Edit code
Change the name to API Data
Change the topic to api-data
Click Save as project
Add requests on a new line to the requirements.txt file and save it
Go back to the main.py file
Add the following imports to the imports at the top of the file
```
import requests
import time
```

Delete the code between the following print statements {start=10}

print("Sending values for 30 seconds.")

print("Closing stream")

Add the following code between those print statements

while True:

    # get a random beer from this free API
    response = requests.get("https://random-data-api.com/api/v2/beers")

    # print the response data
    print(response.json())

    # sleep for a bit
    time.sleep(4)

Add the following code under the print(response.json()) line and above the sleep line

# sink the beers 'style' to Quix as an event
stream.events.add_timestamp(datetime.datetime.utcnow()) \
    .add_value("beer", response.json()["style"]) \
    .write()

Lastly, delete the following lines

stream.parameters.add_definition("ParameterA").set_range(-1.2, 1.2)
stream.parameters.buffer.time_span_in_milliseconds = 100

Save and then run the code by clicking the Run button near the top right of the code editor window

Success

Every 4 seconds the random beer API will be called and a new style of beer will be transmitted to the Quix topic api-data

Click Stop (mouse over the Running button)

Deploy

Deploy the code so it will run continuously.

Click Deploy in the top right
Click Deploy on the dialog

Transformation

Now that you have some data you need to transform it to make it compatible with the rest of your data processing pipeline.

You will now locate a suitable transformation template and modify it to handle the incoming beer styles and output them as chat messages.

Search the library for Empty template - Transformation
Save the code to your workspace

Note

Ensure you change the Name to Beer to chat

Change the input to api-data. This is the topic you set as the output for the API data.

Change the output to messages
You can click Run and look in the console output see that this code is handling the event data. Click stop when you have seen it running.
Add the following import to the quix_function.py file
```
import datetime
```
Locate the on_event_data_handler method

Replace the comment # Here transform your data. with the following code

# stream chat-messages to the output topic
self.output_stream.events.add_timestamp(datetime.datetime.utcnow()) \
    .add_value("chat-message", data.value) \
    .add_tag("room", "Beer") \
    .add_tag("name", "BeerAPI") \
    .write()

Delete the last line of the method
```
self.output_stream.events.write(data)
```
Save the file and open the main.py file

Locate the following line

output_stream = output_topic.create_stream(input_stream.stream_id)

Replace input_stream.stream_id with "beer"
Save and deploy this project!

Success

You have built a transformation to take output from an API and turn it into messages that the existing parts of the pipeline can use!

See it working

Navigate to the UI you deployed earlier. Ensure you are in the lobby
Enter beer for the room name and provide any name for yourself
You can now see the messages arriving from the API as well as the calculated sentiment for them.

Congratulations

You made it into the Quix elite squad!

Your completed real-time data processing pipeline should look something like this

Come on over to our Slack community called The Stream and tell us how you did or if you had any issues.

Conclusion

You’ve successfully built a data pipeline that transforms one stream of data, which is just the beginning!

Speak with a technical expert about how to set up and use Quix in your own projects.

Additional resources