DEV Community

Cover image for How to Build a Chat App with SwiftUI: Part 1
Matheus Cardoso
Matheus Cardoso

Posted on • Updated on • Originally published at getstream.io

How to Build a Chat App with SwiftUI: Part 1

Note: Find a more up-to-date version of this article at: https://getstream.io/blog/chat-app-swiftui-part2/

In this tutorial, we'll build a simple chat application for iOS and macOS using SwiftUI and Stream Chat's Swift SDK. Although Stream provides a suite of UIKit components that work out-of-the-box, we can use use the low-level client to develop custom components with SwiftUI.

Screenshot shows a chat between two users running on an iPhone simulator and macOS

If you get lost during this tutorial, you can check the completed project in this GitHub repo.

What is SwiftUI?

"SwiftUI is an innovative, exceptionally simple way to build user interfaces across all Apple platforms with the power of Swift. Build user interfaces for any Apple device using just one set of tools and APIs. With a declarative Swift syntax that's easy to read and natural to write, SwiftUI works seamlessly with new Xcode design tools to keep your code and design perfectly in sync. Automatic support for Dynamic Type, Dark Mode, localization, and accessibility means your first line of SwiftUI code is already the most powerful UI code you've ever written."

What you need

  • iOS 13+
  • Xcode 11+
  • A Stream account

Step 1: Set up the Xcode project

To start, let's create a SwiftUI project in Xcode.

Select 'Single View App'.
Creating Single View App Project on Xcode

And make sure to select 'SwiftUI' for the User Interface.
Creating SwiftUI Project on Xcode

Step 2: Set up the Stream Chat dependency

To install the Stream Chat dependency, we'll use CocoaPods. If you prefer Carthage or Swift Package Manager, they're also supported.

In the folder where you saved the project, run pod init and add StreamChat to the Podfile. It should look similar to this:

After you do that, run pod install, wait a bit for it to finish, and open the project via the .xcworkspace that was created.

Step 3: Configure the Stream Chat Dashboard

Sign up at GetStream.io, create the application, and make sure to select development instead of production.

Screenshot of a user creating a development application at GetStream.io

To make things simple for now, let's disable both auth checks and permission checks. Make sure to hit save. When your app is in production, you should keep these enabled.

Screenshot of skip auth checks and permission being enabled in a Stream App dashboard

You can see the documentation about authentication here and permissions here.

Now, save your credentials, as we'll need them to power the chat in the app. Since we disabled auth and permissions, we'll only really need the key for now, but in production, you'll use the secret in your backend to create JWTs to allow users to interact with your app securely.

Screenshot of credentials on stream dashboard

As you can see, I've blacked out my keys. You should make sure to keep your credentials safe.

Step 4: Configure Stream Chat SDK

Now that we've set up the project and Stream Chat dashboard let's configure the SDK's singleton with the Stream Chat App's key. The didFinishLaunchingWithOptions function in AppDelegate.swift should look similar to the following snippet.

That will configure the Client.shared instance, which we'll use throughout this tutorial to make calls to the Stream Chat API and subscribe to events.

Step 5: Create the Login View

Finally, we can start using the power of SwiftUI to build the login screen, which will look similar to the following screenshot.

Screenshot shows a simple login screen running on the iPhone simulator

Let's create a LoginView.swift file and paste the following contents.

In that snippet of code, we create a TextField and a Button. The Button calls Client.shared.set(user:) with the contents of the TextField for the username. The callback to that function, if successful, will trigger the NavigationLink to the ChatView we'll create in the next step.

Note we're not collecting a password since we're skipping authentication for this tutorial, so anyone can log in as the username they choose. Also, usernames may not contains spaces and some special characters. It would be best if you handled the possible errors.

Step 6: Create the Chat View

For this first part, we'll have a single channel that the user joins as soon as they log in. It will look similar to the screenshot below. We'll make it look a bit cozier in the next step.

Screenshot shows a simple chat screen with two users chatting running on the iPhone simulator

Let's create a ChatView.swift file and paste the contents below.

In that snippet, all we do is create a List for the messages and a simple composer with a TextField and a Button that sends the message with the function Client.shared.send(message:). We also add a callback for the onAppear of this View, which watches the channel with channel.watch(options:), which allows us to receive .messageNew events with channel.subscribe(forEvents:). We now have a functioning chat, though the UI can be improved.

Step 7: Improving the message UI

Instead of that simple text cell, let's create a custom view for it, similar to how it's displayed in iMessage. It will look comparable to this screenshot.

Screenshot shows the chat view running on iPhone simulator with chat bubbles similar to iMessage

Create MessageView.swift and paste the following contents.

After that, replace the line Text("\($0.user.id): \($0.text)") in ChatView.swift with MessageView(message: $0).

To remove the separators between the messages, you'll need to run this call before displaying the chat screen: UITableView.appearance().separatorStyle = .none. I suggest you put it in AppDelegate.swift, next to where you configure the Stream Chat Client.

Wrapping up

Congratulations! You've built the basis of a functioning chat app with SwiftUI and Stream. In part two, we'll make a UI for creating and selecting channels. Stay tuned! Meanwhile, I encourage you to browse through SwiftUI's docs, Stream Chat's docs, and experiment with the project you just built.

Top comments (0)