Tim Dietrich

Custom Software Developer

Home Services Portfolio Blog About Contact Newsletter

Airtable: Swift / iOS API Demo App

I'm pleased to announce the availability of my third demo of the Airtable API -- a native iOS app, developed using Apple's popular Swift programming language.

The complete Swift source code is available free of charge, and you can download it here.

How It Works

Like my previous API demo resources, this demo app uses Airtable's API to retrieve data from an Airtable base -- essentially using Airtable as a basic Content Management System (CMS).

The app uses data from a base that was created using the "Restaurant Field Guide" template. It displays a list of restaurants in a table view. When clicking on a row in the table, the user is presented with details about the restaurant (including location, cuisine, cost, pictures, etc) in a tabbed view. It's a very simple app, but another good example of how to make calls to Airtable's API and use the data that it returns.

A brief video that demonstrates the app is available below.

Highlights

The Xcode project includes everything you need to build and run the app. I've summarized a few technical highlights below.

Settings.swift
This file includes settings used by the app to authenticate with the Airtable API. There are two variables used for the setting: One for your Airtable API Key, and another for the App ID assigned to your instance of the "Restaurant Field Guide" Airtable base.

ViewControllerList.swift
This is the view controller for the list / table view, which displays the restaurants in a table.

Calls to the Airtable API are made by the "getRecordsFromAirtable" function. This function takes an offset as a parameter, so that in cases where the number of records in the table exceeds a certain limit, the app can make additional calls to get the remaining records. All calls to the API are made asynchronously. The function returns an array of records, with each record represented as a Swift dictionary. The function has been designed so that it can be easily modified to handle calls made to other Airtable bases / tables.

A UIRefreshControl is used to implement a "pull to refresh" function. When the user pulls to refresh the data, previously loaded data is dumped, "fresh" data is pulled from the Airtable API, and the table is reloaded.

A "didSelectRowAtIndexPath" function is used to handle the segue from this view to the tabbed view. Before making the segue, the dictionary for the selected restaurant is stored in a global dictionary ("selectedRestaurant"). That variable is used by the other views to display the detailed information about the selected restaurant.

ViewControllerAppInfo.swift
This view controller is used to display basic information about the app. There's not much to it, but it is a neat example of how you can display local HTML files (and supporting files such as images and stylesheets) in a web view.

ViewControllerTabs.swift
Restaurant details are shown in a tab view, and this view controller handles the UITabBarController that makes this possible. One interesting aspect of this controller is that it programmatically disables the "menu" and "pictures" tabs in cases where the restaurant does not have that data available. This is done by starting with the original array of view controllers that the tab bar is handling, evaluating the restaurant's dictionary, removing any elements from the array that aren't applicable, and then reassigning the updated array to the tab bar. It's a simple, effective technique.

ViewControllerDetails.swift
Basic restaurant information (including the cuisine, city district, cost, rating, etc) is displayed using the "ViewControllerDetails" view controller. The information is pulled from the SelectedRestaurant dictionary. If applicable, the controller uses the thumbnail URL of the first photo to load a UIImageView object. The restaurant rating is mapped to emoji stars. Swift supports Emoji symbols in code, and this is an interesting use of that feature.

In the Airtable base, the restaurant table includes foreign keys for the related cuisine and district records. The API returns the IDs of those related records, but not their names. Therefore, to display the names, additional calls to the API need to be made.

In the view controller, you'll see code that handles this. It first checks to see if a given ID has already been loaded by looking in one of two arrays (one for districts and another for cuisines). If so, it uses the name value. If not, it makes a call to the Airtable API, gets the record, displays the name, and then adds the record to the array for future use. This reduces the number of calls that need to be made to the API, and improves performance.

ViewControllerMenus.swift
This view controller uses a web view to display a restaurant's scanned menu, which is pulled as a PDF file via a URL. It's a simple, but effective way to display a PDF document in an iOS app.

ViewControllerPhotos.swift
In cases where photos are available, they are displayed as thumbnails using a collectionView. The controller loops over the array of the photos, asynchronously retrieves the thumbnail files, and displays them as a grid. Clicking on a thumbnail initiates a segue to the ViewControllerLargePhoto controller.

ViewControllerLargePhoto.swift
This controller displays the original (large) version of a photo that was selected by the viewer. The image is retrieved asynchronously, and displayed using a UIImageView.

Additional Notes

The demo app was developed using Swift 2 and Xcode 7.0.

The tab bar icons were provided by IconBeast via the Creative Commons Attribution license.

Final Thoughts

I've been using Airtable to prototype iOS / Swift apps. Airtable makes it insanely easy to put together the backend database for a prototype app, and you get a powerful, easy to use API in the process. This lets you focus on the app itself, make changes and refinements, and then move to the production backend database later. However, please keep in mind that Airtable is not intended to serve as the backend database for commercial, high volume apps.

If you have any comments or questions about the demo app (or about the Airtable API in general), please feel free to leave a comment below or drop me a line.

Video Overview

Screen Shots

Here are a few screen shots of the app.


The Airtable Restaurants Demo iOS App's "List View." The restaurant data is pulled from an Airtable base via the Airtable API.


The Airtable Restaurants Demo iOS App's "Details View."


The Airtable Restaurants Demo iOS App's "Photos View." The photos are displayed using a UICollectionView.


The Airtable Restaurants Demo iOS App's "Menu View." The menus, which are PDF documents, are displayed using a UIWebView.