Integrate UI Kit components to your existing app

  • This is some text inside of a div block.
  • This is some text inside of a div block.
  • This is some text inside of a div block.
  • This is some text inside of a div block.

Integrate UI Kit components to your existing app

Welcome to another blog on how to fully utilize what Amity Social Cloud has to offer to the world. Amity Social Cloud as the SDK alone is such a powerful tool that helps you build social experiences into your own application without the need to code your own messaging system, communities, or user profiles. You can just take full advantage of Amity Social Cloud and deliver these experiences to your users in no time and effort.

With the offering of the UIKit, you can easily accelerate the process of development without having to build your own user interfaces. You can use our UIKit right out of the box and integrate any of the modules separately by choosing just what you need. This is where this guide is for. I will walk you through how to integrate these components separately so that you can pick and choose to your heart’s desire.

Requirement

  • iOS 12.0 or higher
  • Swift 5
  • Xcode 11.0 or higher

UIKit Installation

There are actually various ways you can install our UIKit, but in this case, I will install mine through CocoaPods (as it is just so easy to install and upgrade).

First, open your terminal and navigate to your project folder. Run this command to create the Podfile.

{% c-block language="javascript" %}
pod init
{% c-block-end %}

Configure your Podfile just like this.

{% c-block language="javascript" %}
# platform :ios, '9.0'

target 'Fashion News Today' do
 # Comment the next line if you don't want to use dynamic frameworks
 use_frameworks!

 # Pods for Fashion News Today
 pod 'UpstraUIKit', '~>1.11.0', :source => "https://github.com/EkoCommunications/EkoMessagingSDKUIKit.git"

end
{% c-block-end %}

You can now run this command to install the UIKit to your project.

{% c-block language="javascript" %}
pod install
{% c-block-end %}

Setup

Go to your appDelegate.swift file and import UpstraUIKit like so:

{% c-block language="javascript" %}
import UpstraUIKit
{% c-block-end %}

Add another two lines of code into application: didFinishLaunchingWithOptions function to link your app and register your device with a user for testing

{% c-block language="javascript" %}
UpstraUIKit.UpstraUIKitManager.setup(“YOUR_API_KEY”)

UpstraUIKit.UpstraUIKitManager.registerDevice(withUserId: "test_user", displayName: "Test")
{% c-block-end %}

In the end, your appDelegate.swift file should look something like this:

Integrate your desired components

The idea of my app here is a fashion news source that compiles the latest news in the fashion industry. Here is what I have so far.

I create a new file called FeedView.swift in which I make it conforms to UIViewControllerRepresentable. In the makeUIViewController function, I just simply call the make method in my component’s controller (EkoCommunityHomePageViewController) and returns it.

{% c-block language="javascript" %}
import SwiftUI
import UpstraUIKit

struct FeedView: UIViewControllerRepresentable {

   typealias UIViewControllerType = EkoCommunityHomePageViewController

   func makeUIViewController(context: Context) -> EkoCommunityHomePageViewController {
       return EkoCommunityHomePageViewController.make()
   }

   func updateUIViewController(_ uiViewController: EkoCommunityHomePageViewController, context: Context) {

   }
}
{% c-block-end %}

And now, you just integrated one component into your app, just like that.

People can now join groups and discuss various topics in my app!

I also want every user who comes into my community to have an identity. Let’s integrate the Profile component next. This time I will use EkoUserProfilePageViewController to make my view. I need to pass in a userId so that the user can see their own profile once they visit this page. As I’m just developing the app, I will use the userId of my testing account.

{% c-block language="javascript" %}
import SwiftUI
import UpstraUIKit

struct ProfileView: UIViewControllerRepresentable {

   typealias UIViewControllerType = EkoUserProfilePageViewController

   func makeUIViewController(context: Context) -> EkoUserProfilePageViewController {
       return EkoUserProfilePageViewController.make(withUserId: "test_user")
   }

   func updateUIViewController(_ uiViewController: EkoUserProfilePageViewController, context: Context) {

   }
}
{% c-block-end %}

The result is a ready-to-use user profile page. Very simple indeed.

That’s it!

Now that you know how to integrate and use our UIKit components separately in your iOS app project, you can start to enable social experiences for your users!

If you are curious to explore further what Amity Social Cloud is, feel free to visit our website or contact us for any questions that you may have.

We believe that the future is social and we can’t wait to see what you will make with Amity Social Cloud! See you next time!

Bonus: Link to this Fashion News Today App