3 Easy Steps to Sync with Airtable in Alta

3 easy steps to use Airtable to build a mobile app in Alta

Building apps continues to get easier and easier with options such as Airtable, Google Sheets, and Microsoft Excel powering simple applications. With Alta, you can use familiar tables as a quick way to model data as you’re building your mobile app prototype. In the long run, you may want to migrate to other more complex databases such as the no-code database Xano, the easy to configure databases Firebase or Supabase, or the more common professional engineering tools PostGres or SQL. If you would like to improve app performance, you can also directly use Alta tables to build your database or upload a spreadsheet from Excel or Google Sheets to Alta using the “Import” function and uploading a .csv file. When you’re ready, Alta can help you set up or migrate to these databases. 

For now, we will go over how to use an Airtable to quickly build a mobile app in Alta. We will use a simple 5 question quiz app as an example. While Alta’s free plan only supports 1000 rows, you can upgrade to one of our paid plans if you need to support more rows. 

1. Create an Airtable Base

The first step in the process is ensure you have an Airtable account and have created a base with your column fields and some sample data. In this example, we will create a simple 5 question quiz app. You can duplicate this Airtable quiz template as a starting point. Make sure to update the Airtable template with your questions, answer options and correct answers.

2. Connect Airtable to Alta

The next step is to share your Airtable Table URL and API key with Alta. First, go to the “Data” tab in Alta. Click on “Import from Airtable.” Then fill out the Table URL and API key fields and you’re done! 

‍

To get the Table URL: 

1. In Airtable, click on the “Share” button in the top right hand corner. 
2. Go to the “Share publicly” tab. 
3. Turn on “Enable shared base link”
4. Click on the link to copy it and paste it into Alta

‍

To get the API key: 

1. In Airtable, click on your Account profile icon in the top right hand corner
2. Select “Account” from the dropdown
3. Scroll down the page until you see “Generate API key” and click on it
4. Copy and paste the API key into Alta

‍

‍

That’s it! We will create a 2-way sync between Alta and Airtable. You can then edit cells in either Alta or Airtable, and we will automatically sync the data between the two tables. 

Note:

It may take a few minutes to sync between the two sources but you can always click “Sync Data” on the top right hand corner of an Alta table integrated with Airtable to immediately sync the updated data fields. 

We are not able to create new “Fields” (also known as “Columns”) in Airtable so if you create a new Column in Alta, it will only be saved in Alta. To create a new syncable Column in both tables, go to your Airtable and create the column there.

3. Map your data to your app screens

Once your Airtable is synced, you can click on the “Build” tab in Alta to return to the main design screen. Here you can map your text fields, images, form fields, buttons and other user interface elements to the data you’ve imported into Alta. 

1. On the first page, click on the Header text of your quiz template “Question” and map it using the right hand panel that appears to the correct column in your Data Table (i.e “Question”)
2. On the first page, click on each of the buttons with the possible answers and map it using the right hand panel that appears to the correct column in your Data Table (i.e. “Answer A”, “Answer B”, “Answer C”, “Answer D”)
3. On the first page, click on each of the buttons with the possible answers and add an additional action for each button to “Navigate to” the next screen (i.e. “Screen 2” or “Screen 3”, etc.)
4. Repeat this process for all the pages except the last one. 
5. On the last screen, map the “Score Percentage” placeholder to the correct column in the Table “Score Percentage”

Congrats! You’ve built your first mobile app using Airtable and Alta. The next step is to test your app by clicking on the “Preview” button in Alta. Once you’re happy with it, click “Share” to send a link to your friends and family to try out your mobile app. You can also scan the QR code in the “Share” button to open the app on your mobile device. To turn it into an iOS or Android app that you can submit to the Apple App Store or Google Play Store, follow the instructions here. 

Advanced functionality: 

1. If you’d like to add more questions to your quiz app, right click on an app screen and select “Duplicate” from the dropdown menu to create a copy of your question. Follow the instructions above to add more questions to the data table and map them to the correct screens.
2. If you’d like to add emojis to your quiz answers, you can add them to the Alta or Airtable cells with the quiz answers. On Mac computers, you can use the keyboard shortcut CTRL + CMD + Space to open the emoji picker and select an emoji to add to your responses. On PCs, you can use the keyboard shortcuts Win+. or Win+; on your keyboard. In other words, hold the Windows key down and press either the period (.) or semicolon (;) key to open the emoji picker.
3. If you’d like to add images to your quiz answer, use the bonus "Alta photo quiz" template. The only change is we’ve updated the template to include 4 photo options. In the bonus Airtable photo quiz template, we’ve added 4 additional columns to the table for “Answer Photo A”, “Answer Photo B”, “Answer Photo C”, and “Answer Photo D”. In the cell for each question, add a photo answer by uploading it directly into Alta, providing a URL with the photo or using a stock photo from Unsplash. Then, when you do your mapping, you also need to map each image card in the mobile app screen to the corresponding photo column in your table. You can preview a photo quiz to see how it should work.

With Alta and Airtable, anyone can quickly build a mobile application for mobile web, iOS and Android with a simple spreadsheet. Start building your mobile app today using a customizable Alta quiz template and simple Airtable template.