Learn how to implement a chat feature in your iOS app in less than 10 minutes thanks to Applozic’s SDK. Using Swift 5 and Xcode 12.
- Difficulty: Beginner | Easy | Normal | Challenging
- Environment: Xcode 12, UIKit, no storyboard & MVC
- Prerequisites: Knowledge of cocoapods and working with SDKs
In this tutorial, we will learn how to add the ApplozicSwift SDK to your project, set up authentication, implement a signup / logged in logic and add a chat feature thanks to its built-in user interface.
Here is the program:
- Set up the ApplozicSwift SDK
- Set up Xcode permissions
- Implement the App logic
- Create an authentication screen
- Integrate 1–1 chat
- Summary & where to go from there
Set up the Applozic Swift SDK
Create a new Xcode project
Open Xcode > Create a new project > App template > UIKit App Delegate and name it ChatApp.
Add Applozic Swift SDK using Cocoapods
Open the terminal of your MacBook and write cd followed by the directory of your project with a space and hit enter.
Now that you have targeted your project, you can write the following.
Hit enter. You will now have a new podfile in your project folder. Open it and add the following pods into it:
# Pods for ChatApp use_frameworks! pod 'ApplozicSwift'
Now, close the file, go back to the terminal and run pod install:
After just a few minutes you will have these dependencies installed on your project. You can now close the terminal and open the new .xcworkspace file that just got created.
Next, we will add a ALChatManager.swift file to our project. This code will handle the communication with the AppLozic server and help us keep our ViewController clean. To do so, create a new swift file and call it ALChatManager.swift. Copy/paste the following code into it:
<script src="https://gist.github.com/Sullivan677/68efadccfa1903e1d90f7e5dcdff19ae.js"> </script>
Note: Don’t forget to paste your own API Key after the applicationId declaration (line 14).
Set up Xcode permissions
Next, we’ll need to set up Xcode permissions. Go right to your Info.Plist file > Left click > Open as source code.
From there, add the following code into it:
<script src="https://gist.github.com/Sullivan677/53651ca9576ed0ed600e695edb276c1b.js"> </script>
Set up the flow
Now we are going to implement the following logic:
- User is signed in: present the main screen (chat)
- User is not logged in: present the login screen
Let’s create a new ViewController > subclass of UIViewController > call it LoginVC.
Then, go into your SceneDelegate.swift file and add the following code inside it to replace the current scene function:
<script src="https://gist.github.com/Sullivan677/d8a9874100f1aa522811fad8409cc5cc.js"> </script>
This way, when the app launches, it will present the sign up screen if the user is not logged in or the main chat interface if they are already logged in. The framework handles this notification for us which is pretty nice!
You can find a similar flow present in popular apps like Whatsapp or Telegram.
Create an authentication screen
First, import the AppLozic SDK at the top of your LoginVC.swift file that you created previously:
<script src="https://gist.github.com/Sullivan677/a9f9d4fb23a38856cf5fe504516da326.js"> </script>
Second, let’s declare the following over the viewDidLoad method:
<script src="https://gist.github.com/Sullivan677/7a45dc1d4c299397e8b51245959f31c5.js"> </script>
That’s all we will need to register a new user: a username, an email and a password, to extract the user’s information, and a button to trigger the AppLozic framework and register the user.
Note: you can also add more information during your sign up process such as imageLink (for profile picture), a confirm password, etc..
Now, add the following functions to set up the user interface inside the LoginVC:
<script src="https://gist.github.com/Sullivan677/ad2c8e22873e35653a563c61be1ab572.js"> </script>
Write the above functions in the same order inside the viewDidLoad method.
Next, give an action to the button at the top, so we can register the user.
Add the following code to the loginVC:
<script src="https://gist.github.com/Sullivan677/5baf0216fb128134226f355a4ed787d2.js"> </script>
This code will talk directly to the server from Applozic, register the user and give an identifier to be able to use the chat feature.
Add a rightBarButtonItem to your ViewController, so you can trigger this action upon a user’s interaction:
<script src="https://gist.github.com/Sullivan677/69188f10b0464db5cd272e517968352e.js"> </script>
We’re done with the authentication, congrats! Now, we can go ahead with building the chat. If you get lost at any point, I have pasted the full code of the LoginVC right below:
<script src="https://gist.github.com/Sullivan677/fe38e8e044e4d323e5862ad164797518.js"> </script>
Let’s create the 1–1 chat
Now, we are going to implement the 1-to-1 chat, so that when the user is logged in, we will bring him to the next screen and from there, he will be able to start a chat. So we will create a button in this screen that trigger the chat feature with the built-in UI.
Import the framework at the top of the ViewController:
<script src="https://gist.github.com/Sullivan677/6fd55bae6247e9101727c18b1f9c2870.js"> </script>
Next, let’s declare the button over the viewDidLoad method:
<script src="https://gist.github.com/Sullivan677/c9cfc487c961f02575a69183426a30c2.js"> </script>
Right after the viewDidLoad method, we give constraints to this button and give the action to present the chat interface:
<script src="https://gist.github.com/Sullivan677/6ecbf93f3c1eca000c3d3f16e288ed03.js"> </script>
Only one small thing is missing: we need to add a little configuration to the AppDelegate.swift file. Copy/paste the following right after the AppDelegate class first graph:
<script src="https://gist.github.com/Sullivan677/2ddfff4936ace5f8d101b921c481a76d.js"> </script>
And you’re good to go! Now, you can run your app, sign up and have fun starting a chat. Another cool thing is that when you’re in the chat interface, you have camera access, a photo library and documents right out of the box: just click on a button, and the native iOS permission request will pop-up!
Once you have started a conversation, you can monitor how many people use your chat feature directly from the Applozic dashboard:
Summary and where to go from here
Through this tutorial, we have been able to authenticate a user, manage their status (logged in or not), present the user interface accordingly and finally let them start a 1–1 chat in only a few lines of codes thanks to AppLozic’s built-in chat UI.
Next step: try to register your users in your own database after they sign up!
GitHub repository: https://github.com/Sullivan677/Chat-Applozic
Sullivan De Carli is an avid reader, he enjoys writing about technologies and visual design. Currently working as an iOS Developer in France. he is always happy to have a chat and collaborate at email@example.com.