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 tomessages
and theoutput
is set tosentiment
-
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
-
Append
-output
to the stream id.This will ensure the UI is able to locate the sentiment being output by this transformation service.
-
Click Deploy near the top right corner
-
Change the memory in deployment settings to at least 4GB
-
Click
Deploy
on the deployment dialogSuccess
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:
Locate the
connect()
method.Notice the
SubscribeToEvent
andSubscribeToParameter
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.- 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
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
-
Delete the code between the following print statements {start=10}
-
Add the following code between those print statements
-
Add the following code under the
print(response.json())
line and above thesleep
line -
Lastly, delete the following lines
-
Save and then run the code by clicking the
Run
button near the top right of the code editor windowSuccess
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 theRunning
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
toBeer to chat
Change the
input
toapi-data
. This is the topic you set as the output for the API data.Change the
output
tomessages
-
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 -
Locate the
on_event_data_handler
method -
Replace the comment
# Here transform your data.
with the following code -
Delete the last line of the method
-
Save the file and open the
main.py
file -
Locate the following line
-
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