How to scan barcodes from your phone into a database
MySQL, PostgreSQL, and many more (even HTTP API)!
Whether you need to send data from your database to mobile or insert data from your mobile to the database, today I will show you how you can do that in 5 minutes.
Our MySQL database looks like this.
We have a database named stock with table stock which contains columns id, name, and amount. I want to scan a barcode (which contains the id of the item) and show the details of the scanned item in my mobile app.
In order to do that without much effort, we will download Auri, extract its content, and run auri-server.
This platform allows us to create mobile/web applications and connect them with various API/databases very fast without even touching a single backend or frontend code at all.
After running auri-server, it should automatically open the IDE in the browser with the default application. It should look like this.
The left side panel contains the configuration of the application (backends, components, …). On the right side, we can see the final application in a real-time. The bottom bar contains some debug information like databases call, available variables, and other helpful things.
We will create a simple app with an autocomplete component that will contain all the data from the stock table and then we can search for a specific stock item in the table either by scanning a barcode or by typing its name.
The whole configuration file looks as follows. You can easily copy-paste this configuration and only modify the SQL statements and that is it!
name: Stock
backends:
- MySQL:
database: stock
host: localhost
user: root
password: root
port: 3306
start: Main
screens:
Main:
title: Stock
components:
- autocomplete:
placeholder: Search item...
name: stockId
query: SELECT * FROM stock
withScanner: true
itemId: $id
itemTitle: $name
onSelect:
- query: SELECT * FROM stock WHERE id = $stockId
- goToScreen: StockDetail
StockDetail:
onGoBack:
- resetVariables
- goToScreen: Main
title: Detail
components:
- item:
title: $name
details:
- amount: $amount
- id: $id
The configuration is simple.
The application name
is Stock. We want to connect to the MySQL
database named stock. The start
screen is Main. The Main
screen contains the component autocomplete
which contains data from thequery
SELECT * FROM stock
. Each item in autocomplete has to have a title
which is displayed to the user and id
for the unique identification of the item.
When selecting an item by scanning or manual typing it will trigger the onSelect
operation which will call thequery
SELECT * FROM stock WHERE id = $stockId
. The selected item id is stored in the variable stockId
which corresponds to the name
of the component. After that, we will go to screen
StockDetail
which renders the item
component with the information from the previous SQL query “SELECT * FROM stock WHERE id = $stockId”.
Used variables in the item component $name, $amount and $id correspond to the columns from the previous query.
The final result looks like this.
And that is all!
Now you can grab a mobile phone, click the preview icon on the top right section and go test your application!
The production deployment is very easy, just follow these steps. You can turn on device authentication, alerting, and even monitor the traffic in the admin section.
Are you missing some database connector or some other feature? Do you have some issues or questions? Join this discord and the developers of the platform will definitely help you.