1. Questionnaire
Once you join Qreli, we will see 7 apps in your account that will help you learn how to build quickly:
|
Simple forms-based flow to collect data. Gentle intro to Qreli. |
|
Intro to computations - loops and decisions, or using AI coding. |
|
How to use OpenAI to generate text and images. Learn how to use APIs. |
|
Read old newspapers. More about API usage and Qreli public file storage. |
|
Working with complex data and generating tables with drill-down capability. |
|
Learning how to use the light built-in data storage for custom experiences. |
|
More samples: calculator, graphs, sending Gmail, work with Excel/CSV etc. |
Let's start.
Quick refresher: Sources, Design > Test > Deploy
Qreli apps help you create and deliver solutions quickly, using your logic, AI, and API orchestration.
For whatever you wish to create, the first thing to do is to bring in the API services (Sources) you wish to connect to and orchestrate — click on this icon on the top menu:
Add from the Library whatever you need, add your custom source manually, or ask ChatGPT or another AI to create a Postman 2.1 collection of the API you wish to work with, then import it in.
Before you can start working with various sources, be sure to authenticate to them with your credentials, if necessary — follow their documentation to do so.
For example, for OpenAI all you have to do is add an Authorization header "Bearer <your_key>":
Once this is done, and the capabilities or functions you need are set, you can start building.
The general flow is as follows:
In the Design stage, you can name your app and add a description; choose how it looks; see the fields created as you build your app and, most importantly, in Flow: build your app.
Once you built a portion of the app, head over to TEST and see how it behaves: on the left side you can see your app, and on the right side all the data that updates as you work with the app:
Lastly, once happy with how your app behaves and how it looks, you can DEPLOY (share) it with anyone in the world and view the interactions your users had with it.
Questionnaire app
When you start a new app from your Dashboard, you'll give it a name. You may modify this name, as well as add a description of the app — or plan how you'll build it on the DESIGN > NAME tab.
You may choose how your app looks in the beginning, at the end, or really at any point. Simply go to DESIGN > STYLE. Refer to the Style doc to learn more about how to create the look-and-feel.
We'll skip DATA and go straight to building in FLOW:
Groups and Steps
As you can see, the app is structured in a a few rectangles with a title an icon on top — these are groups; you may think of them as sections of you app:
Inside each group there are steps: portions of your app that will execute.
Qreli runs groups and steps in order, unless there is a transition that forces a skip elsewhere.
That is, the first step in the first group runs first.
Then, the second step in the first group.
Then, the first step in the second group.
Etc.
You may move groups around so that you can build and test various parts of your app separately, then place them in the right place to execute in order.
Steps inside a group may also be moved around, as well as cloned, deleted, or configured to transition anywhere. For this or any application we could put all the steps in one group, but we wanted to illustrate the flexibility — you structure the flow in whichever way it makes sense to you.
You will spend most of your time building inside steps.
The key element to remember is that each step follows this logic:
BEFORE > STEP > AFTER > TRANSITION
BEFORE you show data or ask for use input (or both), you can call APIs/compute to get the data.
STEP: You add the visual interactive elements to show and ask for user input here.
AFTER your user responded, you can call more APIs here and prepare more data here.
TRANSITION: By default, always the next step. However, you may skip around based on your logic.
Clicking on the Name of the step allows you to change certain behavious, like what you call the Next button, whether to show it or hide it, complete the flow, or making a step compute-only (no visual / interactive elements). Use the left and right arrows to navigate sequentially between your steps.
Main Flow
Great. Now that we understand the lay of the land, let's get into the meat of what we are building.
We'll be asking for the name of our user, say hi, then ask them for certain preferences.
We dragged a Text Input control from the control bars on the left and added it to the middle section.
Each control has a Label to display and a Data field. The former refers to what is shown on-screen, while the latter refers to the data item which will hold the response — this is very important, so choose data field names that make logical sense for what you are building.
On the next step (Hello), we added a Text Label to display the information collected:
Note the convention ${name} : this is how you refer to the contents of a data field, e.g. name.
At runtime, ${name} will be replaced with the actual content, e.g. Jim.
It could be ${ anything } —> anything you named your data field.
You will learn later another convention for varables, ${V.abc}: after you defined the variable abc, you could retrieve its contents at runtime in this way.
So what we just did so far is ask a user for their name and respond with a greeting, e.g.
Hi Angela, let's answer a short questionnaire.
Cool.
In the next steps we build the questionnaire (you can learn more about the available interactive controls here):
Lastly, we inform the user that we collected the responses and end the flow.
Certain applications may be workflow-like, where there is a concept of flow end (e.g. this questionnaire). Others may be open-ended (e.g. interact with AI).
Depending on your need, if you are looking to measure if your users completed a designated flow, you should mark the end of the flow in your step configurator next to the left arrow:
A step that is terminal no longer has a transition icon in it, but rather an old-school stop indicator:
That's it!
Your app is ready to go - just make it active and share it with the world on the Deploy tab.
You can now start collecting data and view engagement metrics on your Deploy > View tab.