Updated: Sep 12, 2019
This is my take on making AWS amplify and SwiftUI work together to create an onboarding experience for an app targeted to run on iOS and later to be built for iPadOS, macOS and watchOS.
Firstly with SwiftUI being new and close to a first release as part of the iOS 13 update, there is not much documentation around on how to piece together the different parts of the puzzle. So I'll start by describing what I want to build.
When users open the app, we should check if they are signed in or not. If so, they can be taken directly to the main content view of the app. If not, they should either sign in or create an account.
This workflow should be contained completely within the iOS app, apart from receiving any verification codes. Verification codes will be sent by email.
Having been through a lot of the material available on the apple developer website and reading the examples and tips on Hacking Swift I have come up with a design that can be best described by the diagram below.
Notice how the workflow can be created with 4 views. Using this workflow, the user will be able to handle all the edge cases that may occur when creating an account.
User accounts and the underlying mechanism to manage the user configuration is out sourced to AWS Cognitio and configure largely via the Amplify framework.
Creating our app
So let's get started by creating a new iPhone application based on the tabbed app template and configure it to us SwiftUI.
Click File->New->Project, this will result in the screen below.
Now we need to make sure that the Tabbed App template is selected and click Next, which takes us to the page where we can configure the base aspects of the new Project. Here we need to make sure that SwiftUI is selected and that we have given it a reasonable name, in this case I have called it "myAmplifyApp"
Now click next again and choose a location to save the project and click create.
Configuring a new Amplify cloud backend. Rather than trying to recreate the documentation available on the Amplify website I will just provide a summary of the commands I used and a reference to the getting started page of Amplify.
You will need to follow the instructions for getting Amplify installed, which can be found here this installation did not cause any problems for me. Using the beta builds of macOS 10.15 Catalina with the default shell set to zsh, the installation went fine.
Naturally the next thing we need to do is start building the backend, so click on the "Get Started" button under the apple logo. This takes us to a page which walks us through setting up a number of components offered by the Amplify CLI. We do not them at this point, so complete Step 1 - Step 2 and have a read through Step 3.
At this point we now have a XCode workspace configured with cocoa pods and Amplify. Rather than just jumping in and adding an API and Database, we wish to get authentication configured and connect our SwiftUI views to provide an onboarding experience.
So click on the Authentication link in the left hand menu bar, which should take you here. Reading down the page, we get the section which requires us to add some pods to our pod file.
Note that, we are not adding the optional UI Pods since the objective of this tutorial is a move away from the drop in UI provided by Amplify. Once the file is edited, we can now proceed to push the amplify config to create the awsconfiguration.json file that we need to create and access the AWS services created by Amplify.
The code below should be run in sections, first lines 1-2 should be run this will create the awsconfiguration.json file and update the Xcode project with some new Pods.
Once this has completed, we can now move onto adding the auth module to our Amplify backend. Run line 4 and from the options presented at the command line make sure you enable email address to be used as a username. Once configured, run line 6 to actually create the resources in AWS.
Lets take stock of what we have accomplished so far. we have:
1. Create a new SwiftUI based iOS app
2. Initialized a cloud backend and setup authentication for this backend
3. Added the required iOS frameworks to interact with this authentication provider
Building Our UI
Logically the next phase is to start building the UI that we wish our app to have. The design diagram at the start of this article called for 4 screens. I will show the code and resulting screen shot for these below.
The code I have created these views with contains some state variables and function calls that I will explain in the next section. All the screens can be previewed in the preview canvas of XCode. What I really like about the declarative nature of SwiftUI is how each platform has a great understanding of how it layout the user interface given the constraints each device has. We will explore this in a bit more depth once all the functionality is complete.
Interfacing with AWS Cognitio
Now that we have some views to use for the onboarding process, we also need some code to actually interface with the backend service. Cognitio is accessible via an API, however it is tricky to work with and thankfully Amplify provides a framework for us to work with. It's the Pod we included earlier. Examples of most of the code I have wrapped is available on the Amplify site.
We can see here the functions used in the above views to create the onboarding experience. There are a few other tricks I used are to move between the onboarding views and the main content view. Since after all we don't Really want to have a jarring experience of having all the content. The code for this goes into the SceneDelegate.swift
So essentially, I am listening for the state changes to the userState and switching to the appropriate view.
So that's it, a brief explanation and code samples on how I have integrated AWS Amplify iOS framework into a SwiftUI app. I'm really excited given that I can build this app to target iPhone, iPad, Mac & Apple TV straight from XCode.