Retool x NocoDB: Mobile App for Inventory Management System with Low Code

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 NocoDB as backend.

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.

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. There is a default query object being created, I named it as “query_api”, and switch the “Resource” to “RESTQuery (restapi)”

Below are what I configure the REST API setting for the initial test

Action endpoint: The NocoDB endpoint, with a valid row id behind

Headers’ parameters: The “xc-token”, and set the “accept” to “application/json”, so I can get the data return in JSON format.

If you can’t recall how to get these setting, please visit the previous article.

8. Now, for the KeyValue object we created at step 5, let’s set the data source to the “query_api”, which the result returned from this REST API, will be mapped and displayed on the KeyValue object.

9. Once you ready, click on the “Save & Run” button, as we enter the valid Row ID in the endpoint, it should work just fine, and display the result on “KeyValue_data” object.

You will be able to see under the Items section, all the items from the result being display. You can hide some of them, as not all required to display on the mobile app.

11. Now, let’s run the query again, but this time round, replace the valid Row ID of the end point, with below parameter

{{scanner_button.data[0]}}

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.

13. For Failure handler, we need to set 2 action, 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 have come a long way on REST API and flag setting, this is how the final REST API setup will look like

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 Row ID. We can login to NocoDB to scan some QR Code.

5. If you are scanning the valid Row ID, 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.