In this blog, you will create a simple iOS application using AWS Amplify, a set of tools and serverless services in the cloud. As you complete each module, you will initialize a local app using the Amplify Command Line Interface (Amplify CLI), add user authentication, add a GraphQL API and a database to store your data, and update your app to store images.
What you will accomplish
This tutorial will walk you through the steps to create a simple iOS application. You will learn to:
Manage a serverless cloud backend from the command line
Add auth to your app to enable sign-in and sign-out
Add a GraphQL API, storage solution
Share your backend between multiple projects
Part - 1
Overview
AWS Amplify provides a Git-based workflow for creating, managing, integrating, and deploying serverless backends for web and mobile applications. The Amplify CLI provides a simple text-based user interface to provision and manage backend services, such as user authentication or a REST or GraphQL API for your applications. Amplify libraries helps you to easily integrate these backend services with just a few lines of code in your applications.
In this module, you will begin by creating a new iOS application to take travel notes. A note is made of a title, a description, and a picture. You will enhance this application in the following modules.
What you will accomplish
In this module, you will:
Create an iOS application
Update the main view
Build and test your application
Key concepts
SwiftUI – SwiftUI is a simple way to build user interfaces across all Apple platforms with the power of the Swift programming language.
Implementation
Create an iOS Project
Start Xcode and create a new project by going to File > New > Project... or by pressing Shift + Cmd + N.
Under iOS > Application, select App and choose Next.
Type a name for your project, for example, Getting Started. Make sure Interface is SwiftUI and Language is Swift, then choose Next.
Finally, select a directory and choose Create to create the project.
2.Create a Main View
Create a new Swift File by clicking the plus (+) at the bottom of the navigation pane, or by pressing Cmd + N.
Name the file Note.swift, and add the following content:
This struct holds information about notes, such as a name, description and image. Note: Only the name is a mandatory parameter in its initializer.
Next, create another file named NoteView.swift with the following content:
This defines a view that displays the information of a Note object, including creating an Image from its image property.
Create a new SwiftUI View file named NotesView.swift with the following content:
This view will use the NoteView view to display all the notes in the notes array. If the array is empty, it will show a "No notes" message, as you can see in the Canvas.
Note: If you do not see the canvas, you can enable it by going to Editor > Canvas. If you see a Preview paused message, you can resume it by pressing the ↻ button next to it.
You can set the notes argument in the #Preview block to test how the view looks when the array is populated. For example:
Open the file that defines your App instance (for example, GettingStartedApp.swift) and replace the ContentView() initialization with NotesView().
Delete the ContentView.swift**** file, we will not be using it for this tutorial.
Build and Test
Build and launch the app in the simulator by pressing the ► button in the toolbar. Alternatively, you can also do it by going to Product > Run, or by pressing Cmd + R.
The iOS simulator will open and the app will run. As we are not setting a notes array, the default empty array is used and the "No notes" message is displayed.
Part-2
Overview
Now that you have created an iOS application, you will want to continue development and add new features.
To start to use AWS Amplify in your application, you must install the Amplify command line, initialize the Amplify project directory, configure your project to use the Amplify libraries, and initialize Amplify libraries at runtime.
What you will accomplish
In this module, you will:
Initialize a new Amplify project
Add Amplify libraries in your project
Initialize Amplify libraries at runtime
Key concepts
Amplify CLI – Using the Amplify CLI you can create, manage, and remove AWS services directly from your terminal.
Amplify libraries – Using Amplify libraries you can interact with AWS services from a web or mobile application.
Configure it to connect to your AWS account by running the following command:
amplify configure
Initialize an Amplify Backend
To create the basic structure of our backend, we first need to initialize the Amplify project directory and create our Cloud backend.
Open the Terminal, navigate to the root directory of your project and run the following command:
amplify init
You will be asked to enter a name for the project. Keep the default name, and then validate that the information is correct. The following code is an example.
? Enter a name for the project (GettingStarted) The following configuration will be applied:
Project information | Name: GettingStarted | Environment: dev | Default editor: Visual Studio Code | App type: ios
Proceed with the remaining steps:
Initialize the project with the above configuration? (Y/n) Y
Select the authentication method you want to use: (Use arrow keys) AWS profile
Please choose the profile you want to use default
This will provision the resources in the backend and might take a few minutes. Once it's done, you will see the following information:
Deployment state saved successfully. ✔ Initialized provider successfully. ✅ Initialized your environment successfully. ✅ Your project has been successfully initialized and connected
Add Amplify Libraries to your project:
Switch back to Xcode. Select File and choose Add Package Dependencies...
Make sure that Up to Next Major Version is selected from the Dependency Rule dropdown, and select Add Package.
Once the libraries are fetched, you will be asked to select which ones you wish to add to your target.
In the drop down, next to Amplify, choose GettingStarted.
Select None in for the rest of the Package Products in the Add to Target section, and choose Add Package.
Initialize Amplify at Backend
Open the GettingStartedApp.swiftfile and replace its content with the following information:
Verify your setup
To verify everything works as expected, build the project. Select the Product menu and then select Build, or press Cmd + B. There should be no error.
Part-3
Overview
The next feature you will be adding is user authentication. In this module, you will learn how to authenticate a user with the Amplify CLI and libraries, using Amazon Cognito, a managed user identity provider.You will also learn how to use the Amazon Cognito hosted UI (user interface) to present an entire user authentication flow, allowing users to sign up, sign in, and reset their password with just a few lines of code.
Using a hosted UI means the application uses the Amazon Cognito web pages for the sign-in and sign-up UI flows. The user of the app is redirected to a web page hosted by Amazon Cognito and redirected back to the app after sign-in.
Amplify also offers a native UI component for authentication flows. You can follow these workshop instructions to learn more.
What you will accomplish
In this module, you will:
Create and deploy an authentication service
Configure your iOS app to include Amazon Cognito hosted UI authentication
Key concepts
Amplify libraries – Using Amplify libraries you can interact with AWS services from a web or mobile application.
Authentication – In software, authentication is the process of verifying and managing the identity of a user using an authentication service or API.
To create the authentication service, open Terminal and run the following command in your project root directory:
amplify add auth
Select the following options, when prompted:
Do you want to use the default authentication and security configuration? ❯ Default configuration with Social Provider (Federation)
How do you want users to be able to sign in? ❯ Username
Do you want to configure advanced settings? ❯ No, I am done.
What domain name prefix do you want to use? «default value»
Enter your redirect signin URI: gettingstarted://
Do you want to add another redirect signin URI? (y/N) N
Enter your redirect signout URI: gettingstarted://
Do you want to add another redirect signout URI? (y/N) N
Select the social providers you want to configure for your user pool: «Do not select any and just press enter»
Note: Do not forget to type the redirect URIs. They are needed for the redirection for Amazon Cognito Hosted UI to work.
Run the following command to deploy the service:
amplify push
Press Enter (Y) when asked to continue.
Add the Amplify authentication library to your project
To add the Amplify Authentication library to the dependencies of your project, navigate to the General tab of your Target application (Your Project > Targets > General) and select the plus (+) in the Frameworks, Libraries, and Embedded Content section.
Select AWSCognitoAuthPlugin,**** and choose Add.
You will now see AWSCognitoAuthPlugin as a dependency for your project.
Configure the URL Schemes for your app
Navigate to the Info tab of your target application (Your Project > Targets > Info), and select the plus (+) in the URL Types section.
Enter gettingstarted in the URL Schemes field. Leave the default selections in the remaining fields.
Configure the Amplify Authentication Library at runtime
Navigate back to Xcode, and open the GettingStartedApp.swift file. To configure Amplify Authentication, you will need to:
Add the import AWSCognitoAuthPlugin statement.
Create the AWSCognitoAuthPlugin plugin and register it with.
Your code sould look like the following:
Create a class to support authentication operations
Create a new Swift file named AuthenticationService.swift with the following content:
This class takes care of handling authentication by relying on Amplify's HostedUI capabilities, while also informing whether a user is signed in or not.
Update the UI with authentication
Signing in
Create a new Swift file named LandingView.swift with the following content:
This view takes care of the following:
Before the view first appears, it will fetch the current user status using the authenticationService property. This is done in the view's task(priority:_:) method.
If the user is signed in, it will display the NotesView.
If the user is not signed in, it will automatically invoke the HostedUI workflow. If the user does not sign in and closes that workflow, a "Sign In" button will be displayed that can be used to start the authentication workflow again.
We've marked the authenticationService variable with a @EnvironmentObject property wrapper annotation, meaning we need to set it using the environmentObject(_:) view modifier on an ancestor view.
Update the GettingStartedApp.swift file body to create this view instead, and to set the AuthenticationService object with the following:
Signing out
Open the NotesView.swift file and replace its contents with the following:
We've added a Sign Out button in the toolbar that calls authenticationService.signOut(). As this object has already been added when creating the LandingView ancestor, we don't need to do anything else.
Build and Test
Build and launch the app in the simulator by pressing the ► button in the toolbar. Alternatively, you can also do it by going to Product -> Run, or by pressing Cmd + R.
The iOS simulator will open and the app should prompt you to sign in first.
Once you've finished that process, the Notes view will display with a Sign Out button at the top right. If you choose it, you should land in the Sign in view again.
Part-4
Overview
Now that the notes app is working, you will add the ability to associate an image with each note.
In this module, you will use the Amplify CLI and libraries to create a storage service using Amazon S3. Then, you will update the iOS app to enable image uploading, fetching, and rendering.
What you will accomplish
In this module, you will:
Create a storage service
Update your iOS app with logic to upload and download images
Update the UI of your iOS app
Key concepts
Storage service – Storing and querying of files, such as images and videos, is a common requirement for applications. One option to do this is to Base64 encode the file and send it as a string to save in the database. This comes with disadvantages, such as the encoded file being larger than the original binary, the operation being computationally expensive, and the added complexity around encoding and decoding properly. Another option is to have a storage service specifically built and optimized for file storage.
Storage services like Amazon S3 exist to make this as easy, performant, and inexpensive as possible.
Open the Terminal, navigate to your project root directory, and run the following command:
amplify add storage
When prompted, make the following selections:
Select from one of the below mentioned services: ❯ Content (Images, audio, video, etc.)
Provide a friendly name for your resource that will be used to label this category in the project image
Provide bucket name «default value»
Who should have access: ❯ Auth users only
What kind of access do you want for Authenticated users? ● create/update ● read ● delete «i.e. select all options»
Do you want to add a Lambda Trigger for your S3 Bucket? N
Finally, deploy the service by running the following command:
amplify push
Are you sure you want to continue? Y
Add the Amplify storage Library
Navigate to the General tab of your Target application (Your Project > Targets > General), and select the plus (+) in the Frameworks, Libraries, and Embedded Content section.
Choose AWSS3StoragePlugin, and select Add.
You will see AWSS3StoragePlugin as a dependency for your project.
Configure Amplify storage Library
Navigate back to Xcode and open the GettingStartedApp.swift**** file. To configure Amplify API, you will need to:
Add the import AWSS3StoragePlugin statement.
Create the AWSS3StoragePlugin**** plugin, and register it with Amplify.
Your code should look like the following:
Build and Test
To verify everything works as expected, build, and run the project.
Choose the ► button in the toolbar. Alternatively, you can also do it by going to Product -> Run, or by pressing Cmd + R.
The iOS simulator will open and the app should show you the Notes view, assuming you are still signed in.
You can tap on the "⨁ New Note" button at the bottom to create a new list, and now you should be able to select a picture from the device's photo library.
Conclusion
You have built an iOS application using AWS Amplify! You have added authentication to your app allowing users to sign up, sign in, and manage their account. The app also has a scalable GraphQL API configured with an Amazon DynamoDB database which users can use to create and delete notes. You have also added file storage using Amazon S3, which users can use to upload images and view them in their app.
To conclude this guide, you can find instructions to reuse or delete the backend you have been using in this tutorial.
