Build a QRCode API and Inventory Management System with Autocode and Airtable

If you use Airtable to keep an inventory of items in your warehouse, you can save time by scanning QR codes with your iPhone and quickly updating your Airtable base as you restock your shelves or check items in and out.

In this tutorial, we’ll learn to create QR Codes for every record in an Airtable base. You’ll be able to print QR Codes for each product and attach them to your inventory shelves for easy scanning and updating information on every record. 🙌🏼

While Airtable’s iPhone app allows you to scan barcode numbers through your phone’s camera, it does not automatically generate unique barcodes every time a record is created.

What You’ll Need Beforehand

• 1x Airtable free account — Airtable is a combination of a spreadsheet & database.
• 1x Standard Library free account — A platform for building and deploying APIs, linking software tools, powering Slack apps, automating tasks, and more.

Part 1: We’ll learn how to build and publish a QRcode API service with Autocode

Part 2: We’ll use our QRCode API in an Airtable formula to automatically produce barcodes for each record (row) in Airtable.

Part 3: We’ll write a script to transform a bulk of image file URLs into image attachments in Airtable.

Part 1: How to Build a QRCode API with Autocode

Head on over and copy the QRCode template using this link:

https://autocode.stdlib.com/github/JanethL/QRCode/?filename=README.md

You will be prompted to sign in or create a free account. If you have a Standard Library account click Already Registered and sign in using your Standard Library credentials.

Give your project a unique name and select Start API Project from Github:

Navigate through the functions folder on the left and select QRCode.js file.

Standard Library automatically generates HTTP endpoints (URLs) for each file.

This URL consists of

<username>.api.stdlib.com/<projectName>@environment/<endpointName> and it will be available after you deploy your project in the next steps.

For example:

A Brief Explanation:

The first line of code imports the node QRcode NPM package. Autocode automatically adds dependencies to package.json file when importing NPM packages.

Lines 3–7 is a comment that serves as documentation and allows Standard Library to type check requests to our APIs. If a request does not supply a parameter with an expected type, it will return an error. You can learn more about the parameters and types here: https://github.com/FunctionScript/FunctionScript

This QRCode API endpoint has a parameter expecting a string that passes in a URL. It will return an HTTP Response as an object. The headers are set to {“Content-Type”: “image/png”} on line 22 and the body (line 24) is the result we define on line 10.

Line 9 is a function (module.exports) that will export our entire code found in lines 9–26. Once you deploy your code, this function will be wrapped into an HTTP endpoint (API endpoint) and will be made available at:

https://<username>.api.stdlib.com/<ProjectName>@dev/<EndpointName>

Test Run the Code:

Before you deploy your API give it a test run. Find and select the Edit Test Event Payload button on the upper right.

Set the url to a site you’d like to generate a QRCode image for and click Save Payload. Payloads must be JSON formatted like this:

When you select Run Test Event, you’ll see the QR code image result rendered by Autocode.

Take out your phone’s camera and test it out!

🚀 Ship your QRCode API Generator

You’re ready to deploy your QRCode API! Select Deploy in the bottom-left of the file manager.

Congrats! 🎉

Your QRCode service is live! You can see the documentation for your APIs by typing https://stdlib.com/@<username>/lib/<projectName>/dev/ in the browser.

Alternatively, find the manager button on the upper left and select View dev API Reference.

Your APIs docs will open up in a different tab. You can also test your API right from the docs by passing in any URL.

Part 2: Generate QRCodes for Every Row in Airtable using a Formula

You can easily create QRCode images for each item in an Airtable Product Inventory Management System. As a sample for this tutorial, we’ll use this inventory tracking template. Copy the template to your Airtable Workspace by clicking this link 👇🏼

Inventory Tracking — Templates — Airtable

Right-click on any record in an Airtable to view the record URL.

Notice that all record URLs include: https://airtable.com/<TableID>/<ViewID>/<RecordID>

For Ex: https://airtable.com/tblHl8cNEZSLdibAJ/viweEDLt42xrPx17P/recTjaUlR9iEC9ayy

We will use these record URLs in a formula to autogenerate QRCodes for every record using the API we built in Part 1.

Writing the Formula in Airtable

Step 1.

Create a new field and title it QRCodeLink select Formula for the field type.

Copy and paste your QRCode URL in the formula field, followed by ?url= .

Here’s the result of the first part of the formula:

Step 2:

Next, we’ll add a new function by first inserting an ampersand (&) as a separator. Then:

• Add the ENCODE_URL_COMPONENT function followed by the URL to your Table which consists of "https://airtable.com/TavkeID/ViewID/" insert an ampersand (&) as a separator and add RECORD_ID() function to retrieve every row’s ID. Close off your function with a bracket ) .
• Mine looks like this: 'https://janethl.api.stdlib.com/qrcode@dev/QRCode/?url=' & ENCODE_URL_COMPONENT("https://airtable.com/tblInrZQFQNQAuRce/viwfGWyw5TswcJHJk/" & RECORD_ID())

Hit Save. Now every time you add a new record to your Airtable, a QRCode will be autogenerated for that record.

Part 3: Transfer Image File URLs to Attachments in Bulk with Autocode

You now have a link to the QRCode image for every row in Airtable.

Create a new Attachment field and title it QRCodeImage:

Copy the code to transfer Image file URLs to attachments using this link:

https://autocode.stdlib.com/github/JanethL/Airtable-URL-To-Attachments/?filename=README.md

Name your project and select Start API Project from Github.

Navigate through the functions folder on the left and select QueryUpdate.js file.

Select the red Account Required button, which will prompt you to link an Airtable account.

Select Link Resource and follow the instructions on the modal to retrieve your Airtable API Key and select Finish.

Find and select your base and click Finish.

Select Finished Linking.

Once you’ve finished Linking your accounts you need to add your base’s ID to line 12 and Line 28.

Locate your Base ID by clicking on the HELP tab on the upper right corner of your Base. Select API documentation.

Copy the base id:

Paste the base ID onto line 12 and line 28 in between the backtick quotes to set the value for baseId as seen in the screenshot:

Hit Run Test Event and watch as your Airtable becomes populated by Autocode.

That’s it! 🤗

You now have all the tools you need to build an Inventory Control System with Airtable and QRCode APIs on Standard Library. I hope you found this tutorial helpful. If you have any questions, jump into our support channels. Our team at Standard Library is ready to help.

Support

• Via Slack: libdev.slack.com
• You can request an invitation by clicking Community > Slack in the top bar on https://stdlib.com.
• Via Twitter: @StandardLibrary
• Via E-mail: support@stdlib.com