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.

The final result of the application

Our MySQL database looks like this.

Stock database with a stock table and its content

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 first run of the Auri application

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 MySQLdatabase 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 idfor 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.