Have you ever wondered how to make an app like Whatsapp or Messenger? In this article, we describe step by step how to make a chat app like Messenger, by leveraging our free (or premium) chat app template, which is a Messenger Clone app, inspired by the popular Facebook app. By downloading our source code, you’ll skip a few months of development, while saving thousands of dollars.
Once you download the Swift project, your own chat app will look exactly like the Messenger Clone picture above.
Setting up Messenger Clone App in Xcode
In order to run your own Messenger Clone app, you need to make a few setup steps. The goal is to have your own Firebase account linked to the chat app so that the app will use your own database instance. Once you wire up your Firebase, you can simply run the Swift project in Xcode, to get the actual mobile app.
Check out this iOS Chat app setup tutorial for details on how to each of the following steps:
- Override GoogleService-Info.plist file with your own file downloaded from Firebase Console
- Install the pods, by running “pod install” in the project folder
- Run the Swift project in Xcode
Note: Make sure you are using the latest stable (GM) version of Xcode and the latest version of Swift.
At this point, we are going to assume you were able to run the Messenger Clone app successfully, on your iOS simulator or on your iPhone/iPad. You should see the following landing screens, which are part of the walkthrough flow.
Now that everything is working successfully, congratulations! You’ve just created your own Messenger Clone app, with a ton of awesome chatting features. Create a few accounts, make them friends, and send a few messages between them. You can even create a group chat or send photo messages.
Now that you’ve built your own Messenger Clone app, it’s time to customize it. After all, you don’t want this app to look exactly like Instachatty. The best part is that you don’t need to have any coding experience, in order to make simple UI customizations. We are going to describe in details how to customize our free and premium Messenger Clone app.
Customize the Name of the Chat App
By default, our Messenger clone app is called Instachatty. Obviously, that cool name is already taken (by us, haha), so you most likely want to come up with your own name for the chat app. In order to rename the mobile app, just open the ChatApp target in Xcode, and change the Display Name and the Bundle Identifier (which you might have already done when you linked your Firebase account), as shown below:
Change the Logo of Your Messenger Clone
Changing the logo of the app is a very frequent use case in iOS app development, so many of you already know how to override the AppIcon asset. For those who are not developers (or are just getting started with iOS), go ahead and open the ChatApp/Assets.xcassets folder in Xcode. You’ll notice the current logo of Instachatty, in a ton of different sizes.
You’ll need all these formats for your logo too, since you want your brand to look nice on all devices, including all version of iPhone and iPad. You can simply drag-and-drop your logo on each existing image, to override it.
Pro-tip: Use a tool such as MakeAppIcon to generate all the sizes for you. That tool will give you an AppIcon.appiconset folder, that can directly override the folder in Xcode. Right-click on the AppIcon asset in Xcode -> Show in Finder and override the AppIcon.appiconset folder with the one generated from Make App Icon. The photo below depicts all this:
Customize the Colors Scheme
You’ll want to create an app unique in order to make it stand out from the crowd. So we made our Messenger Clone app extremely easy to customize, in terms of branding.
All you need to do to customize the color scheme of your messenger clone app is to change the colors in the ChatUIConfiguration.swift file.
Re-run the app, and voila: it’s a completely different app.
Play around with those variables, since there are more things you can customize here, such as the foreground color, the text & subtitles colors, as well as the font of the app.
Customize the Walkthrough Screens
You can add, reorder, remove, and edit walkthrough screens with a single line of code. Simply open the ATCMockStore.swift (it’s in Core/Chat/ folder) file and change the walkthrough steps as you want:
Make sure that any icon name you use here, corresponds to an asset existing in a .xcassets folder, such as the one in Core/Assets/Misc.xcassets. This rule applies to any asset you use anywhere:
Customize Login & Sign Up Screens
If you wish to use different copy & placeholders for the text and input fields in the onboarding screens, you can simply customize them in ChatHostViewContorller.swift:
Modify the Tab Bar Menu
By default, the app has three tabs: Home, Contacts, and Profile. You can add, remove, reorder or edit these menu items, simply by changing the configuration of the main host view controller. So openChatHostViewContorller.swift and edit the menuItems array:
Setting up Push Notifications
To be able to send push notifications on iOS, you need to register a developer account with Apple, since push notifications are sent via Apple’s APNs, which require signed certificates, for security purposes. We describe how to get a certificate from Apple, to upload it to Firebase in details, in this iOS Push Notifications Firebase tutorial. Please follow all the steps from there. Once you uploaded a valid certificate to Firebase, all you need to do is open ATCPushNotificationSender.swift file, and update the Authorization key with your own server key from Firebase.
To recap, here’s what you need to do in order to enable push notifications with Apple:
- Upload a valid certificate from Apple to Firebase
- Update the Server API Key in the ATCPushNotificationSender class
Once done, your app will start sending push notifications to all users that are reachable (a.k.a users who accepted push notifications permission requests).
Hopefully, this article did a good job at teaching you how to build an app like Messenger, by leveraging our free or premium chat app clones. If you need to make further modifications to your Messenger Clone, and they are not listed in this tutorial, please let us know and we’ll provide you with help and guidance on how to skin the app even more.