In this tutorial we'll show you how to create an app with Adalo that is powered by live data from Airtable.

What you'll need

• Airtable
• Adalo

Estimated time to complete

• 40 minutes

Open Adalo and create a new mobile app. Add a custom list to the Home page. Select the list and change the name of the placeholders. Add a Image component to the Card.

Select the list and add an action, select link and new screen. Choose App Bar. Add an Image and text components to the new screen, rename them, 'Name', 'Website' and 'Bio'. This will be our members profiles.

Now let's connect Airtable.

Select Databases from the left hand menu. Under extreanl collections lcick add collection. Now over to Airtable.

Select Account, Airtable API, scroll down and find the Base. Select List Records and Copy the URL in the EXAMPLE REQUEST on the right side of the screen. Copy up to the end of the word Users and ignore everything after the ?. Paste that into Adalo.

Next under Auth Setup, click Add Item and select Header. Insert 'Authorization' and your API key from Airtable (e.g. Bearer YOU_API_KEY).

Press next. Open Get All and add the word Records into the Results Key field. Select Update and change Put to Patch. Press Done and Next.

Test to see your data. Press Create Collection.

Back in Adalo map the data across by selecting the List and choosing the new database from the What is this a list of? dropdown. Next map each piece of data across on the first list page and the member profile page.

Select 'Current Makerpad Member' and the appropriate field for each screen.

‍

Now let's make it so we can update Airtable from the Adalo app.

Add a button to the Member profile screen. Add an action, link to a new screen. Select Form. Select the form and point it to the Makerpad Members collection and we'll want it to Update Member.

Now back over to the form and remove the fields we don't need.

Rename the fields if you want.

Next press preview and test it by clicking through the Member, the button, changing a piece of information and pressing Update Makerpad Member.

Check it's changed both inside of Adalo and inside of Airtable.

That's it! You now know how to power an Adalo app with Airtable.

I hope you enjoy this tutorial preview, if you have any questions please reach out on Twitter @tomosman or @makerpad.

‍