Previously, we already built the inventory management system backend using several low code / no code tools, now is time to built a simple mobile app front end to make use of what we learned so far.
In this Inventory Management System use case:
- Backend: Store inventory data, including generate QR code, and provide REST API to query specific inventory data
- Frontend: A mobile app front end for sales personnel, quickly scan on the QR Code, and trigger the backend REST API, and get the inventory data display on mobile app
In this example, we going to use Retool as mobile app frontend, and SeaTable as backend.
Pre-requisite check
Initial requirement
Let’s look at how it started, as well as the initial design
URL
https://retool.com/products/mobile
Platform
Retool for Mobile App currently is a cloud SAAS (Software as a service) platform, and required to run within Retool mobile app
Account
You can start with 5 users for free. For each user required to login to Retool Mobile App, it required the user license.
Programming Required
You need to know some basic REST API concept, basic SQL know how, and little JavaScript knowledge.
Limitation
At the time when this article being published, Retool mobile is still under beta stage. However, due to it excellent UI, almost idiot-proof mobile app low code builder, it will be a sin if I don’t include this tool as 1 of the mobile app low code tool.
Let's get started
Create the mobile app
1. Let’s start by creating a mobile app, we call it “Inventory Scanner”, since the main objective of the mobile app is to scan the QR Code
2. By default, Retool will create some default screen templates, in this case we only need 1 screen, hence just delete the rest of the screens.
3. Let’s start with adding the first component, the greeting label. As an old-school developer myself since Visual Basic 6 era, I like to name it properly to avoid confusion later
I name it “text_greeting”, and put the value as “Hi, please start to scan something”.
4. For 2nd object, that’s the scanner object, which presented in button. When the user click on the button, the app will call up the phone camera to act as scanner.
I name it “scanner_button”, and the put down the label as “Scan”
5. 3rd object, we will be using KeyValue object to display the inventory information.
I name it as “KeyValue_data”; For the Data property, we will need to bind it with a data source later.
6. Lastly, create the last text label, I call it as “text_firstscan_flag”, and make it hidden, and the default value to set as “0”.
You might wondering the purpose of this flag? Let me explain now.
The problem: I am not sure why, but the moment the screen launch, the REST API will get triggered, and caused error message to pop up, as nothing get scanned when the app just launched.
The workaround: Use a flag to tell the app, this is the first time launching, don’t pop up any error message just yet.
The question: Why I don’t use Retool’s temporaly state, unfortunately, it don’t work well on my case, it is just weird, maybe is due to beta stage.
7. To query data from SeaTable via REST API, we need to trigger 2 REST API.
- The first REST API is to get the access token
- The 2nd REST API is to make use of the access token from first step, to query the data.
There is a default query object being created, I named it as “query_auth”, and switch the “Resource” to “RESTQuery (restapi)”
If you can’t recall how to get these setting, or not sure what am I talk about, please visit the previous article.
You will need 2 parameters:
- GET endpoint: https://cloud.seatable.io/api/v2.1/dtable/app-access-token/
- Header parameter named “Authorization”, with the value “Token {YOUR_SEATABLE_BASE_TOKEN}“
8. Now, Let’s do a test on the API called “query_auth”, if the parameters you entered in step 7 are correct, you should get the below result without any issue.
9. Now, let’s create the 2nd REST API, I named it as “query_api”
At the end point, the action type being set to POST, and the URL is https://cloud.seatable.io/dtable-db/api/v1/query/{YOUR_SEATABLE_BASE_ID}/
At the header parameter, we will need at the “Authorization” as 1 of the parameter, and the value we have to do some little Javascript coding
Token {{query_auth.data.access_token}}
Lastly, let’s add the body parameter. Retool support the body in JSON format, hence we just need to supply the key “sql”, and the value as below:
SELECT * FROM products WHERE ReferenceID = '0001'
So you might be wondering, why are we hard coding the ReferenceID? Isn’t it supposed to get from the scanner?
I promise we will come to that, for now, we need to ensure Retool recognize the data structure return by SeaTable.
10. If the SQL we entered is correct, we should get the success response below, which we can see, the data that we need from SeaTable actually is at “results”
Please take note at the following
- The actual product’s data is in “results” variable
- The results is in array format, meaning it is designed to return in multiple data – as this is SQL statement.
- For our case, only 1 data will be returned as we only scan 1 product at a time.
Based on above, the data return from REST API able to present in Retool environment as
{{query_data.results[0]}}
11. Now, let’s set the data source name to KeyValue, which we get from Step 10.
12. Let’s run the query again, to see how it is display on the mobile app.
If everything run smoothly, you should see the data presented on the mobile app.
However, I noticed there is a catch here, the columns’ name return seems not readable by human being, and having some system column return as well.
Luckily, we can easily solve this in Retool by
- Rename the columns
- Hide the unwanted columns
13. Let’s run the query 1 more time, but this time round, change the SQL to
SELECT * FROM products WHERE ReferenceID = '000X'
12. Now, we already setup the data source, and already making sure that it work with success case, and error case. At this moment, is time to put the “text_firstcan_flag” into actual usage.
The logic is simple:
- if “text_firstcan_flag” is 0: this is the first time the app is launching, hence any REST API error, is false alarm
- If “text_firstcan_flag” is 1: Any error at this time, is the real error, please pop up the message to inform the user.
Under the query object, there 2 event handlers, which is Success and Failure handler, we will make use of that to control the “text_firstcan_flag”
Under Success handler:
- The mobile app already scanned for the first time, and return the data successfully, we can now set the “text_firstcan_flag” to 1
- After the “text_firstcan_flag” being set to 1, any REST API error is the actual error.
So, we will add 2 actions under Success handler, in below sequence
- Alert the error message, if the data return is blank – we able to do a count on array using Javascript
{{query_api.data.results.length === 0 && text_firstscan_flag.value === "1"}}
Basically this Javascript code saying, if the results array count is 0 (mean is blank), and this is not the first time the mobile app is launch, just pop up the error message!
- Set the “text_firstcan_flag” to 1
13. For Failure handler, we need to set 2 actions, the error message pop up, and the flag setting.
Let’s look at the error message pop up.
- The Action set to “Alert”, this is the same as JavaScript alert command
- Title set to “Error”, you can enter any title you prefer.
- Description set to “Invalid product”, nothing fancy but better than the scary REST API error.
- For the “Actions”, it is actually the button, we only need an “OK” button, hence I removed “Cancel” button.
- For “Only run when”, this the interesting part, the pop up will only display when “text_firstcan_flag” is 1, meaning if “text_firstcan_flag” is 0, the mobile app will not pop up the error as it is a false alarm. The code is simple:
{{text_firstscan_flag.value === "1"}}
14. The 2nd action for failure handle is, to set the “text_firstcan_flag” to 1. The reason being, on the first time false alarm, the Failure event handler will be triggered, hence we have to set the “text_firstcan_flag” to 1, to indicate: false alarm is over, next error will be real.
15. When screen is being loaded, is always a good practice to set the “text_firstscan_flag” to 0, in programming term, we call this “initialized” the variable.
16. We are now all set! Now is time to put the SQL to dynamic variable! The SQL code now become
SELECT * FROM products WHERE ReferenceID = '{{scanner_button.data[0]}}'
17. We have come a long way on REST API and flag setting, this is how the final REST API setup will look like
18. We have 2 more steps to make the 2 REST APIs work together. So basically the sequence of calling REST APIs should be as below
- Scanner trigger query_auth after scan
- query_auth trigger query_api after getting the responsed data
Let’s start with the setup the scanner_button “Capture” events. We set the events to trigger the query_auth
19. Finally, we end it with setup the trigger at query_auth.
Test the mobile app
1. To run the mobile app by Retool, you required to download the Retool mobile app, which is available on iOS AppStore, and Google Playstore.
2. When login to the Retool mobile app, you shall see the mobile app you created just now.
3. This will be the first screen of your app, which we built just now.
4. Let’s scan something, start with some valid ReferenceID. We can login to SeaTable to scan some QR Code.
5. If you are scanning the valid ReferenceID, you should see something below.
6. Let’s try some invalid QR Code, we can create some QR Code by using QR Code Generator. There are ton of free online tools out there, I am using this.
7. As this is an invalid QR Code which will not return any product, hence you shall see the below.
8. We actually just completed a simple Inventory Management System for backend, and mobile app frontend with low code! How cool is that?
The functions we completed are
- Storing inventory information
- Generate QR Code automatically
- Setup REST API from backend
- Create a mobile app for sales personnel to scan, and get the information via REST API