5. Showcase
This app combines multiple mini-apps in one. Essentially, we present a menu, and based on the selection, we run that section of the Showcase.
By now, you should be very familiar with how Qreli apps are constructed. This is our Flow:
First
Here, we offer a few options and based on the choice made, we transition/jump to that point in the app.
Calculator
Here, we implement a loan calculator - for more info, check this resource.
We start by asking the audience for the loan amount, interest rate, and loan term in years.
Once we have this input, we define n as the number of months for the term, and i as the interest rate:
Then, we perform the calculations. Note the use of the math library to access more advanced math concepts. Lastly, we find out what was the amount of interest paid on top of the principal:
${loan_amount} * ${V.i} * ${E.Math}{pow((1 + ${V.i}),${V.n})} / (${E.Math}{pow((1 + ${V.i}),${V.n})} - 1)
With calculations complete, we show the result:
Game
I'm thinking of a number between 1 and 99, what is it? We'll play this simple game. If we guessed too little or too much, the system would tell us, and ask us to guess again until we succeed. We also count how many times we tried.
First, we came up with a number between 1 and 99. We did this in Options, so that we may easily come up with another number every time we go back to pick another choice.
We then start by asking you the number we are thinking about (for simplicity/illustration purposes, we also show you this number):
We check whether we guessed right or not.
If we guessed correctly, we jump to the Guess Success step. For illustration purposes, we also show a message as a sliding notification that may be green/orange/red based on its type success/warning/error.
If we guessed correctly, we show a message as such.
If we guessed incorrectly, we increase the counter of attempts, and prepare a message on whether the guess was too high or too low:
After a failed start, we go back to Game Start for another attempt.
Parking
Have you been to one of those parking lots that ask that you enter your license plate and how long you wish to park for, then pay for that amount?
This mini app implements that - the front-end, not including the back-end where someone checks every hour if there are any delinquent cars.
To do so, we ask for the license plate using a Text Input control, and embed certain Stripe Pay buttons.
AI
Text (ChatGPT)
This mini-app uses a few private APIs - either enter your own API keys, or clone this Showcase app in your account and modify it to skip certain parts or replace with your own APIs.
For illustration purposes, this is the Auth section of Postmark:
And here it is for OpenAI:
We use Postmark to send a 4-digit code to your email, OpenAI for ChatGPT and Dall-E access, Hubspot to store a verified email to the CRM, and Stability.AI for image generation.
To experience ChatGPT in your Qreli app, we ask the user for what they would like to get an answer to:
Then, we pass this to ChatGPT (here, using the 3.5-turbo engine).
We get the response and map it - we only care about the answer (content), and just for kicks, we also map completion_tokens:
Once we collected the data, we show it:
For example, for the prompt "Why is the sky blue?" we get the following:
Image Comparison (Dall-E vs Stability.AI)
For the image comparison between Dall-E and Stability.AI, we ask for user's email, send a code to verify the user's email is valid, then ask for the prompt, and generate images using both Dall-E and Stability.AI.
We come up with a random code:
Then, we ask for user's name and email:
We then email the code to the user using Postmark (could use any email service via their API):
Then, we ask the user to enter it:
If the code is incorrect, we ask the user to try again:
If successful, we save the user to CRM (for illustration purposes):
Then, we ask for the image prompt:
And we pass this image prompt to OpenAI and Stability.AI to generate images. We map the images to prepare for display. Note that OpenAI return a URL to an image, while Stability.AI returns the actual file as base64 encoding:
Lastly, we show the images produced:
