Using no-code airtable and Netlify to quickly build a machine log application

Published on August 30, 2020

Tagged: #frontend-development #no-code-explained

Follow me on twitter for more posts like this

A friend asked me to create a tool for logging when one of his staff enters a room to turn on and off machine jobs. It needed to be on the cloud and run on an ipad. He wanted it to be simple and have an MVP fast.

I wanted to see if I could build the tool using no-code or similar. I got it built in around 2 hours using airtable! Though I found that I needed a tiny bit of code to make it more professional by having it on its own url.

The solution steps

  • Setup an airtable account
  • Setup a new base
  • Add a new table
  • Add a new form
  • Test the form
  • Add the site template
  • Add a github repository
  • Add a netlify site
  • Deploy your site
  • Add a password on airtable
  • Add a domain

Setting up the basic air table account

First step is to go to air table and open an account. For our purposes you will have to purchase a Pro level account. This gives you custom branding on the form and a password restriction so you can keep it private.

Go here to sign up: https://airtable.com

Setting up a new base

In air table there is this concept of a base. This is like a single database or an app. We need a new one of these for our app.

Click add a base (the + symbol) and then “from scratch”. Call it “Machine Log”.

Add a base
Add a base

Open the new base. This will show you a grid view where we can edit the columns (they are called “fields” in air table). Airtable adds some default columns and sample data for us. For our app we need to customise these columns. You can remove all the fields to the right of “Name” that airtable adds by default.

delete fields
delete fields

We need to add a column that records when the person enters the log. For this we add Name: “DateOfAction”, Type: “Created time”, Date format: ISO, Include time, 24-Hour clock and use GMT time.

created date
created date

Next we add the name of the machine job that we’re logging. This is a fixed list of options for this application so we add a column called “Job Name”. Type: “Single select”, add some options.

machine job name
machine job name

Add the action that the operator is recording. We will call this the “Event”. Another single select field with “Start”, “Stop” and “Pause” options.

action
action

We add a field that the operator can use to indicate why they are pausing the job. This will only be shown to the operator in our form if they have selected “Pause” in the event field.

pause
pause

The last column change we need is to make the Name column automatically filled when a new record is created. To do this we will use a formula column. The formula is DateOfAction & "-" & {Job Name} & "-"&Event. This combination should be unique for a single log entry.

name
name

Rename the table to “Machine Job Logs”

rename table
rename table

Adding a form

So now that we have a table to store the data. We need to create the form for our machine operators to enter the data with a better ui than the grid view / excel view. To do this click on Add form. The form should already have all of our fields. You can add a logo if you like here.

Change the title and description to help our machine operator. You can edit the form field properties by clicking on the title of the form field.

Change the Job name field properties to look like this. It should be required and because there aren’t many options right now I change it to show the list of options.

job name form
job name form

Same for event - required, show list

event form
event form

Set the pause reason to only show when the event is “Pause”.

pause form
pause form

Change form so that:

  • The button reads “Save Machine Log Entry” so it’s clear what will happen for the operator.
  • Turn off airtable branding
  • Show a message “Saving log entry please wait…”
  • And select “Show a new form in 5 seconds”

form
form

Test the form

Use the preview feature to test your new form ! You can see that it will show with very little branding because of our pro account. This would take (me at least) a lot of work to set up and test with full code.

test form
test form

Add Some Code

Now we need to add some code but it isn’t much.

Create a folder on your computer and add this content to a file called “index.html”.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Machine Job Logging</title>
    <script src="https://static.airtable.com/js/embed/embed_snippet_v1.js"></script>
  </head>
  <body>
    <iframe
      class="airtable-embed airtable-dynamic-height"
      src="======PASTE EMBED LINK HERE========"
      frameborder="0"
      onmousewheel=""
      width="100%"
      height="1000"
      style="background: transparent; border: 1px solid #ccc;"
    ></iframe>
  </body>
</html>

Get your embed link

Air table allows us to embed our forms in another site. We’re going to create a netlify site to host our form soon. To get the embed share link from airtable. Click on “Share form”

share form
share form

and then “Embed this form on your site”. This will open a new window with the details we need.

embed form
embed form

Copy the contents of the src="" bit from this page and past it into index.html replacing “======PASTE EMBED LINK HERE========“. So from the example in the image, our index. html would be

...
<body>
  <iframe
    class="airtable-embed airtable-dynamic-height"
    src="https://airtable.com/embed/shr0pGWyApaYYKXf0?backgroundColor=blue"
    frameborder="0"
    onmousewheel=""
    width="100%"
    height="1000"
    style="background: transparent; border: 1px solid #ccc;"
  ></iframe>
</body>
...

Add a github repository

There are many guides on the internet to show you how to do this. But create a new github repository and add the index.html folder to it.

Add a netlify site

Signup for netlify and add a new netlify site. Tell it to use your new github repository from the step above. Because our site is super simple we don’t need any build command or output directory specified.

netlify
netlify

Deploy your site

It should deploy in a second. Click on the link and you should see the form!

deploy
deploy

Password protect your site

Your site is now public to world and we don’t want people messing with it so add a password. Back in air table open the “Share form” popup again. Click on “Restrict access with password” and enter a password. Now when someone visits your netlify site they will have to enter the password.

Add a domain

Use netlify to set up a custom domain (if you like). Follow their instructions here: https://docs.netlify.com/domains-https/netlify-dns/

Darragh ORiordan

Hi! I'm Darragh ORiordan.

I live and work in Sydney, Australia building supporting happy teams that create high quality software for the web.

I also make tools for busy developers! Do you have a new M1 Mac to setup? Have you ever spent a week getting your dev environment just right?

My DevShell tooling will save you 30+ hours configuring your dev environment with all the best modern tools. Get it here

https://darraghoriordan.gumroad.com/l/devshell


Read more articles like this one...

List of article summaries

#frontend-development

Migrating a Create React App (CRA) application to Vite

I had an existing app that was scaffolded using create react app (CRA) and extended with craco. CRA didn’t support the tooling I needed so I had to look for an alternative. I found Vite.

There are some incredible improvements in Vite over CRA, including PostCSS 8.0 support so I decided to migrate my production application.

I’ll explain some of the benefits of Vite and describe the steps you need to take to upgrade your application.

#frontend-development

Fix React Router navlink-exact when activeClass is not working

If you’re adding navlinks with react router because you want to set the active class you might find that it doesn’t work. These are the steps I had to take to make this work.

#frontend-development

Avoid rebuild of React App in every CI stage

If you have a react app you can use env vars like REACT_APP_MY_ENV_VAR in your application and React will automatically pull them in to your app when you build the production application.

This is very useful but if you have variables that change for each environment and your application build takes a long time, you might want to avoid building unnecessarily in CI. For example you might have a QA environment and a Staging environment that have different configuration.

We type-check our code on each build and that was taking 5 minutes+ to build each environment so we had to make it faster. We changed our app from using REACT_APP env vars to using a configuration file that we could quickly write to using CI.

Our CI system is Azure DevOops so the CI scripts here are specifically for Azure DevOps but they apply to most CI systems with small changes.

The real work happens in a Node.js script that would work anywhere.

#frontend-development

Setting and debugging Azure Devops yaml env vars

I received an interesting question yesterday that highlighted how some parts of environment variables in Azure devops are not clear. Here are some things to check if your environment variables aren’t working in azure pipelines.