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

This tutorial is brought to you by Janeth Ledezma, the original post is here

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. 🙌🏼

Image for post

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:

Image for post
Image for post

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

Image for post
Image for post

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:

Image for post
Image for post

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.

Image for post
Image for post
Image for post
Image for post

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.

Image for post
Image for post

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:

Image for post
Image for post

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

Image for post
Image for post

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

Image for post
Image for post

🚀 Ship your QRCode API Generator

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

Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post

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

Inventory management for a small business has never been easier! Ideal for any business owner, this template…

airtable.com

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

Image for post
Image for post

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

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

Image for post
Image for post

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= .

Image for post
Image for post

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

Image for post
Image for post

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())
Image for post
Image for post

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

Image for post
Image for post

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:

Image for post
Image for post

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.

Image for post
Image for post

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

Image for post
Image for post

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

Image for post
Image for post
Image for post
Image for post

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

Image for post
Image for post

Find and select your base and click Finish.

Image for post
Image for post

Select Finished Linking.

Image for post
Image for post

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

Image for post
Image for post

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

Image for post
Image for post

Copy the base id:

Image for post
Image for post

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:

Image for post
Image for post

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

Image for post

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

Discover and learn how to build software using no-code with our collection of resources, tutorials, and courses. Stay up to date with our newsletter!

Thanks for signing up!
Oops! Something went wrong while submitting the form.