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.
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'.
And make sure to select 'SwiftUI' for the User Interface.
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.
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.
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.
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.
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.
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.
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)