Tech Talks

How to Build an E-commerce Chat App for iOS in Swift

Published On December 1st, 2022 Tech Talks

In this article, you’ll learn how to build an ecommerce chat app for iOS using MirrorFly’s chat SDKs. At the end of this guide, you will be able to connect the sellers, buyers, and other stakeholders in your online marketplace business via in-app chat.

On completing the steps instructed, you will have built an app that is similar to the below screenshot:

ios chat app for ecommerce

Prerequisites

To build messaging into your E-commerce app, you will need 

  • Development Environment: Xcode 13+
  • Programming Language: Swift 5.0+
  • Platform: iOS 13+
  • In App SDKs: MirrorFly Video SDKs

Note: If you’d like to build the video call on our sample app, you can check out our GitHub repositories.

Create Your E-commerce App Project in Xcode

Step 1: Create a New Xcode Project

  • Launch Xcode on your device
  • Create a new project or open an existing project
  • From the Template grids, choose SingleView App
ios ecommerce chat app
  • A form page will open. Fill in all the required fields and configure your project. 
 
We invite developers to try and test our SDK

Step 2: Get the MirrorFly License Key 

A license key is needed for the server to authenticate your SDK. To acquire one, you’ll need an account with MirrorFly

  • Open the MirrorFly Console Page
  • Fill in your basic details and create your login credentials 
  • Click on the Signup Button
  • Next, you need to verify your account using your email ID
  • After verification, login to your MirrorFly Account
  • From the Account Overview page, download the iOS SDK file
ios ecommerce chat app 2

Step 3: MirrorFly SDK Integration

1. Add the SDK dependencies to your Ecommerce Chat project

  • Extract the framework files from the iOS SDK on your device.
  • Import the dependencies into your project.
FlyCore.xcframework 
FlyCommon.xcframework 
FlyNetwork.xcframework 
FlyDatabase.xcframework 
FlyXmpp.xcframework 
FlyTranslate.xcframework
  • Go to Project > Target > General
  • Select Frameworks, libraries, and Embedded Content
  • Select Embed & Sign against all the xcframeworks
ios chat app for ecommerce 3

2. Disable the Bitcodes

Since MirrorFly is a third-party SDK for your app project, the bitcodes will not allow integration if the bitcodes are enabled. So, you need to disable them as instructed below:

  • Go to Project
  • Select Build Settings
  • Filter ‘Bitcode’ using the search bar
  • From the dropdown against Bitcode, select ‘No’

3. Initiate the pods for your Project

The pods in your project hold information on each element of your project. They communicate with each other and provide the data needed to perform significant actions in your project.

 pod 'libPhoneNumber-iOS'
 pod 'Alamofire'
 pod 'RealmSwift', '10.20.1'
 pod 'XMPPFramework/Swift'
 pod 'SocketRocket'
 pod 'Socket.IO-Client-Swift'

4. Next, add the pod hook block at the end of the pod file as mentioned below. And then, continue to install the pods.

post_install do |installer|
  installer.pods_project.targets.each do |target|
    target.build_configurations.each do |config|
      config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '12.1'
      config.build_settings['ENABLE_BITCODE'] = 'NO'
      config.build_settings['APPLICATION_EXTENSION_API_ONLY'] = 'No'
      config.build_settings['BUILD_LIBRARY_FOR_DISTRIBUTION'] = 'YES'
    end
  end
end

5.  Configure The Capabilities For Your Ecommerce Chat App 

  • Go to Project
  • Click on Target  
  • Choose Signing & Capabilities
  • Click ‘+’ at the top left corner 
  • Search for the capabilities: App groups and Background Mode
  • Right under Background Mode, you need to enable the below capabilities:
    • Audio, Airplay, and Picture in Picture
    • Remote notifications
    • Background fetch

Step 4: Configure the MirrorFly SDK Server & Data 

  • In this step, you need to add the details including the License key (downloaded in Step 1), and configure the server. 
  • Add the necessary server information to the AppDelegate class.
let BASE_URL = "https://api-preprod-sandbox.mirrorfly.com/api/v1/"
let LICENSE_KEY = "xxxxxxxxxxxxxxxxxxxxxx"
let CONTAINER_ID = "xxxxxxxxxxxxxxxxxxxxxx"

Step 5: Initialization of Chat SDK

  • Provide the basic data needed to build the ChatSDK
  • Further, use the AppDelegate class within the didFinishLaunchingWithOptions method.
try? ChatSDK.Builder.setAppGroupContainerID(containerID: CONTAINER_ID)

      .setLicenseKey(key: LICENSE_KEY)
      .isTrialLicense(isTrial: true)
      .setDomainBaseUrl(baseUrl: BASE_URL)
      .buildAndInitialize()

Step 6: User Registration

To register a user in the sandbox mode or in the live mode, use the below method in the ChatSDK.Builder class

try! ChatManager.registerApiService(for:  USER_IDENTIFIER ) { isSuccess, flyError, flyData in
        var data = flyData
        if isSuccess {
         // This is your Password
           guard let password = data["password"] as? String else{
               return
           }
           // This is your Username
           guard let username = data["username"] as? String else{
               return
           }
        }else{
            let error = data.getMessage()
            print("#chatSDK \(error)")
        }
    }

Step 7: Connect the Chat SDK to the MirrorFly Server

A server connection is needed to send or receive messages within your Ecommerce Chat App. To establish the connection, use the below method:

ChatManager.connect()

Step 8: Disconnect the Chat Server

To disconnect the connection between the chat server and the SDK, you need to call the below method:

ChatManager.disconnect()

Step 9: Add One-to-One Chat 

Send one-to-one Chat:

You need to use the below method to send one-to-one messages:

FlyMessenger.sendTextMessage(TO_JID, TEXT) { isSuccess,error,chatMessage in
     if isSuccess {
        // Update the UI
     }else{
        // Handle the error
     }
 }

Receive One-to-one Messages

To see other incoming messages, you need to set the delegate in your ViewController’s viewDidAppear method and confirm the MessageEventsDelegate class.

  ChatManager.shared.messageEventsDelegate = self

After setting up the delegate, you will start receiving incoming messages from other SDK users.

func onMessageReceived(message: ChatMessage, chatJid: String) {
      // Message received from chatJid, content is message.messageTextContent
}

Step 10: Add Group Chat Capabilities to Your eCommerce Chat App

You can create groups for the stakeholders in your business to drive more engagement and transactions. The following steps will guide you through. 

Prepare the Group Chat jid

To prepare the group JID. FlyUtils.getGroupJid(groupId : String), the SDK provides the below utility method.

FlyUtils.getGroupJid(groupId : String)

Group Creation

In order to create a group, you need to call the below method

GroupManager.shared.createGroup(groupName: "ABCXYZ", participantJidList: [jids], groupImageFileUrl: "", completionHandler: { [self] isSuccess, flyError, flyData in
    if isSuccess {
        // Update the UI
    } else{
        // failure case of the group creation
    }
})

Create the Group Profile

From the server or local, you need to get a group profile using the below method.

GroupManager.shared.getGroupProfile(groupJid: groupId, fetchFromServer: fromServer, completionHandler: { isSuccess, flyError, flyData in
    if isSuccess {
        let data =  (flyData.getData() as?
        ProfileDetails)
        // Update the UI
    } else{
        // failure case of get group profile
    }
})

Get the Participants List

You need to call the below method to get the group members from the server

GroupManager.shared.getParticipants(groupJID: groupId)

Add Participants to a Group

You need to call the below method to add new particpants to a group in your eCommerce chat app. 

GroupManager.shared.addParticipantToGroup(groupId: groupId, newUserJidList: selectedItemArray) { isSuccess, flyError, flyData in
    if isSuccess {
       // Update the UI
    } else{
       // failure cases
    }

Remove Participants from a Group 

Call the below method to remove a participant from the group

GroupManager.shared.removeParticipantFromGroup(groupId: groupId, removeGroupMemberJid: userJid) { isSuccess, flyError, flyData in
    if isSuccess {
        // Update UI
    } else{
        // failure cases
    }
}

Get Groups 

In order to get the groups from local or server, you need to call the below method

GroupManager.shared.getGroups(fetchFromServer: true) { isSuccess, flyError, flyData in
    var data  = flyData
    if isSuccess {
        // Update UI
    } else{
        // failure cases
    }
}

Call the below method to add or update the group image

GroupManager.shared.updateGroupProfileImage(groupJid: groupId, groupProfileImageUrl: selectPath, completionHandler: { isSuccess, flyError, flyData in
    if isSuccess {
       // Update UI
    } else{
       // failure case
    }
})

Removal of Group Image

Call the below method to remove the group image

GroupManager.shared.removeGroupProfileImage(groupJid: groupId, completionHandler: { isSuccess, flyError, flyData in
    if isSuccess {
        // Updat UI in success case
    } else{
        // failure case
    }
})

Group Name Update

In order to update a group image, you need to call the below method

GroupManager.shared.updateGroupName(groupJid: groupId, groupName: "Changing Group Name wXyZ 123", completionHandler: { isSuccess, flyError, flyData in
    if isSuccess {
        // Update UI
    } else{
        // failure case
    }
})

Give Admin Control to a Participant in your eCommerce Chat App 

Call the below method to make a participant an admin.

GroupManager.shared.makeAdmin(groupJid: groupId, userJid: userJid, completionHandler: { isSuccess, flyError, flyData in
    if isSuccess {
        // update UI
    } else{
        // failure case
    }
})

Exit from Group

For a participant to exit from a group, you need to call the below method:

GroupManager.shared.leaveFromGroup(groupJid: groupId, userJid: userJid, completionHandler: { isSuccess, flyError, flyData in
    if isSuccess {
        // update UI
    } else{
        // failure case
    }
})

Delete a Group 

To delete a group in your Ecommerce Chat App, call the below method.

GroupManager.shared.deleteGroup(groupJid: groupId, completionHandler: { isSuccess, flyError, flyData in
    if isSuccess {
        // update UI
    } else{
        // failure case
    }
})

Congratulations!

You’ve successfully built an eCommerce chat app by integrating MirrorFly SDKs using Swift. Your app is now capable of connecting people across your marketplace business via instant group messages. 

To learn more about personalizing the theme, color, style, and fonts of your in-app chat, you can check out our guide to customizing in-app chat with MirrorFly UI Kit

Comment below what other features you’d like to add to your app. My team and I will work on it shortly and get back to you with interesting in-app chat guides. Until then, happy coding!

Vigneshwar

Vigneshwar is a seasoned digital marketer and blogger, extremely passionate about driving search engine visibility for websites. He thoroughly enjoys exploring emerging technologies and is currently honing his expertise in Chat APIs and their associated tech stacks.

In this article, you’ll learn how to build an ecommerce chat app for iOS using MirrorFly’s chat SDKs. At the end of this guide, you will be able to connect the sellers, buyers, and other stakeholders in your online marketplace business via in-app chat.

On completing the steps instructed, you will have built an app that is similar to the below screenshot:

ios chat app for ecommerce

Prerequisites

To build messaging into your E-commerce app, you will need 

  • Development Environment: Xcode 13+
  • Programming Language: Swift 5.0+
  • Platform: iOS 13+
  • In App SDKs: MirrorFly Video SDKs

Note: If you’d like to build the video call on our sample app, you can check out our GitHub repositories.

Create Your E-commerce App Project in Xcode

Step 1: Create a New Xcode Project

  • Launch Xcode on your device
  • Create a new project or open an existing project
  • From the Template grids, choose SingleView App
ios ecommerce chat app
  • A form page will open. Fill in all the required fields and configure your project. 
 
We invite developers to try and test our SDK

Step 2: Get the MirrorFly License Key 

A license key is needed for the server to authenticate your SDK. To acquire one, you’ll need an account with MirrorFly

  • Open the MirrorFly Console Page
  • Fill in your basic details and create your login credentials 
  • Click on the Signup Button
  • Next, you need to verify your account using your email ID
  • After verification, login to your MirrorFly Account
  • From the Account Overview page, download the iOS SDK file
ios ecommerce chat app 2

Step 3: MirrorFly SDK Integration

1. Add the SDK dependencies to your Ecommerce Chat project

  • Extract the framework files from the iOS SDK on your device.
  • Import the dependencies into your project.
FlyCore.xcframework 
FlyCommon.xcframework 
FlyNetwork.xcframework 
FlyDatabase.xcframework 
FlyXmpp.xcframework 
FlyTranslate.xcframework
  • Go to Project > Target > General
  • Select Frameworks, libraries, and Embedded Content
  • Select Embed & Sign against all the xcframeworks
ios chat app for ecommerce 3

2. Disable the Bitcodes

Since MirrorFly is a third-party SDK for your app project, the bitcodes will not allow integration if the bitcodes are enabled. So, you need to disable them as instructed below:

  • Go to Project
  • Select Build Settings
  • Filter ‘Bitcode’ using the search bar
  • From the dropdown against Bitcode, select ‘No’

3. Initiate the pods for your Project

The pods in your project hold information on each element of your project. They communicate with each other and provide the data needed to perform significant actions in your project.

 pod 'libPhoneNumber-iOS'
 pod 'Alamofire'
 pod 'RealmSwift', '10.20.1'
 pod 'XMPPFramework/Swift'
 pod 'SocketRocket'
 pod 'Socket.IO-Client-Swift'

4. Next, add the pod hook block at the end of the pod file as mentioned below. And then, continue to install the pods.

post_install do |installer|
  installer.pods_project.targets.each do |target|
    target.build_configurations.each do |config|
      config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '12.1'
      config.build_settings['ENABLE_BITCODE'] = 'NO'
      config.build_settings['APPLICATION_EXTENSION_API_ONLY'] = 'No'
      config.build_settings['BUILD_LIBRARY_FOR_DISTRIBUTION'] = 'YES'
    end
  end
end

5.  Configure The Capabilities For Your Ecommerce Chat App 

  • Go to Project
  • Click on Target  
  • Choose Signing & Capabilities
  • Click ‘+’ at the top left corner 
  • Search for the capabilities: App groups and Background Mode
  • Right under Background Mode, you need to enable the below capabilities:
    • Audio, Airplay, and Picture in Picture
    • Remote notifications
    • Background fetch

Step 4: Configure the MirrorFly SDK Server & Data 

  • In this step, you need to add the details including the License key (downloaded in Step 1), and configure the server. 
  • Add the necessary server information to the AppDelegate class.
let BASE_URL = "https://api-preprod-sandbox.mirrorfly.com/api/v1/"
let LICENSE_KEY = "xxxxxxxxxxxxxxxxxxxxxx"
let CONTAINER_ID = "xxxxxxxxxxxxxxxxxxxxxx"

Step 5: Initialization of Chat SDK

  • Provide the basic data needed to build the ChatSDK
  • Further, use the AppDelegate class within the didFinishLaunchingWithOptions method.
try? ChatSDK.Builder.setAppGroupContainerID(containerID: CONTAINER_ID)

      .setLicenseKey(key: LICENSE_KEY)
      .isTrialLicense(isTrial: true)
      .setDomainBaseUrl(baseUrl: BASE_URL)
      .buildAndInitialize()

Step 6: User Registration

To register a user in the sandbox mode or in the live mode, use the below method in the ChatSDK.Builder class

try! ChatManager.registerApiService(for:  USER_IDENTIFIER ) { isSuccess, flyError, flyData in
        var data = flyData
        if isSuccess {
         // This is your Password
           guard let password = data["password"] as? String else{
               return
           }
           // This is your Username
           guard let username = data["username"] as? String else{
               return
           }
        }else{
            let error = data.getMessage()
            print("#chatSDK \(error)")
        }
    }

Step 7: Connect the Chat SDK to the MirrorFly Server

A server connection is needed to send or receive messages within your Ecommerce Chat App. To establish the connection, use the below method:

ChatManager.connect()

Step 8: Disconnect the Chat Server

To disconnect the connection between the chat server and the SDK, you need to call the below method:

ChatManager.disconnect()

Step 9: Add One-to-One Chat 

Send one-to-one Chat:

You need to use the below method to send one-to-one messages:

FlyMessenger.sendTextMessage(TO_JID, TEXT) { isSuccess,error,chatMessage in
     if isSuccess {
        // Update the UI
     }else{
        // Handle the error
     }
 }

Receive One-to-one Messages

To see other incoming messages, you need to set the delegate in your ViewController’s viewDidAppear method and confirm the MessageEventsDelegate class.

  ChatManager.shared.messageEventsDelegate = self

After setting up the delegate, you will start receiving incoming messages from other SDK users.

func onMessageReceived(message: ChatMessage, chatJid: String) {
      // Message received from chatJid, content is message.messageTextContent
}

Step 10: Add Group Chat Capabilities to Your eCommerce Chat App

You can create groups for the stakeholders in your business to drive more engagement and transactions. The following steps will guide you through. 

Prepare the Group Chat jid

To prepare the group JID. FlyUtils.getGroupJid(groupId : String), the SDK provides the below utility method.

FlyUtils.getGroupJid(groupId : String)

Group Creation

In order to create a group, you need to call the below method

GroupManager.shared.createGroup(groupName: "ABCXYZ", participantJidList: [jids], groupImageFileUrl: "", completionHandler: { [self] isSuccess, flyError, flyData in
    if isSuccess {
        // Update the UI
    } else{
        // failure case of the group creation
    }
})

Create the Group Profile

From the server or local, you need to get a group profile using the below method.

GroupManager.shared.getGroupProfile(groupJid: groupId, fetchFromServer: fromServer, completionHandler: { isSuccess, flyError, flyData in
    if isSuccess {
        let data =  (flyData.getData() as?
        ProfileDetails)
        // Update the UI
    } else{
        // failure case of get group profile
    }
})

Get the Participants List

You need to call the below method to get the group members from the server

GroupManager.shared.getParticipants(groupJID: groupId)

Add Participants to a Group

You need to call the below method to add new particpants to a group in your eCommerce chat app. 

GroupManager.shared.addParticipantToGroup(groupId: groupId, newUserJidList: selectedItemArray) { isSuccess, flyError, flyData in
    if isSuccess {
       // Update the UI
    } else{
       // failure cases
    }

Remove Participants from a Group 

Call the below method to remove a participant from the group

GroupManager.shared.removeParticipantFromGroup(groupId: groupId, removeGroupMemberJid: userJid) { isSuccess, flyError, flyData in
    if isSuccess {
        // Update UI
    } else{
        // failure cases
    }
}

Get Groups 

In order to get the groups from local or server, you need to call the below method

GroupManager.shared.getGroups(fetchFromServer: true) { isSuccess, flyError, flyData in
    var data  = flyData
    if isSuccess {
        // Update UI
    } else{
        // failure cases
    }
}

Call the below method to add or update the group image

GroupManager.shared.updateGroupProfileImage(groupJid: groupId, groupProfileImageUrl: selectPath, completionHandler: { isSuccess, flyError, flyData in
    if isSuccess {
       // Update UI
    } else{
       // failure case
    }
})

Removal of Group Image

Call the below method to remove the group image

GroupManager.shared.removeGroupProfileImage(groupJid: groupId, completionHandler: { isSuccess, flyError, flyData in
    if isSuccess {
        // Updat UI in success case
    } else{
        // failure case
    }
})

Group Name Update

In order to update a group image, you need to call the below method

GroupManager.shared.updateGroupName(groupJid: groupId, groupName: "Changing Group Name wXyZ 123", completionHandler: { isSuccess, flyError, flyData in
    if isSuccess {
        // Update UI
    } else{
        // failure case
    }
})

Give Admin Control to a Participant in your eCommerce Chat App 

Call the below method to make a participant an admin.

GroupManager.shared.makeAdmin(groupJid: groupId, userJid: userJid, completionHandler: { isSuccess, flyError, flyData in
    if isSuccess {
        // update UI
    } else{
        // failure case
    }
})

Exit from Group

For a participant to exit from a group, you need to call the below method:

GroupManager.shared.leaveFromGroup(groupJid: groupId, userJid: userJid, completionHandler: { isSuccess, flyError, flyData in
    if isSuccess {
        // update UI
    } else{
        // failure case
    }
})

Delete a Group 

To delete a group in your Ecommerce Chat App, call the below method.

GroupManager.shared.deleteGroup(groupJid: groupId, completionHandler: { isSuccess, flyError, flyData in
    if isSuccess {
        // update UI
    } else{
        // failure case
    }
})

Congratulations!

You’ve successfully built an eCommerce chat app by integrating MirrorFly SDKs using Swift. Your app is now capable of connecting people across your marketplace business via instant group messages. 

To learn more about personalizing the theme, color, style, and fonts of your in-app chat, you can check out our guide to customizing in-app chat with MirrorFly UI Kit

Comment below what other features you’d like to add to your app. My team and I will work on it shortly and get back to you with interesting in-app chat guides. Until then, happy coding!

Vigneshwar

Vigneshwar is a seasoned digital marketer and blogger, extremely passionate about driving search engine visibility for websites. He thoroughly enjoys exploring emerging technologies and is currently honing his expertise in Chat APIs and their associated tech stacks.

4 Comments "How to Build an E-commerce Chat App for iOS in Swift"

  1. Scarlett says:

    Hello! This is Scarlett Conner. I live in Europe and am building an online shopping app that will sell clothing to customers around the world. I’m planning to add chat features to my app where my clients can discuss the cost and transaction details. How safe are your APIs for global users?

    1. Vigneshwar says:

      Hi Ms. Conner. Your business sounds interesting! Our APIs are built with end-to-end encryption protocols like AES-256 and TLS/SSL. This makes our APIs stand out in terms of safety. Above that, our chat features are built with complete adherence to industry regulations like GDPR, HIPAA and ISO. So, well without any doubt, we call our chat APIs completely safe for online shopping conversations.

  2. Marlon says:

    Hi, I am Marlon Cox. I’d like to know why group jid is used and not group id in step to prepare a group ID

    1. Vigneshwar says:

      Hello Mr. Cox. Almost every SDK method accepts jid as an input parameter and treats id as a string. This is why, we’ve called groupjid method. The FlyUtils.getGroupJid() uses the [com.contusflysdk.api.ChatConnectionManager.initialize] method to convert any string input in the groupid to jid parameters. For more details, get in touch with our experts now!

Leave a Reply

Your email address will not be published.