Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Our community group functionality within the AmityUIKit will allow you to explore social features and how they will look in your app
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
iOS 11.0 or higher
Swift 5
Xcode 11.7
The UIKit API provides several strategies to integrate with your application.
Use the UIKit as is.
Integrate the Chat experience in the least amount of effort.
Add a custom theme to the default implementation of the UIKit.
Complete control of the visual style of Chat UI by implementing declarative styles (fonts and colors) for your user interface.
Use key components from the UIKit SDK and integrate them directly into your application.
Add the Chat UI to your existing design.
The UIKit is built on the foundation of the Amity API while adding a UI layer to speed product development efforts. At the core it is leveraging the same Channel, Messaging concepts, subscribing to live objects whilst adding a UIKit to accelerate product delivery and UI that delivers great user experience for companies wanting to deploy messaging.
In the current state, there are two modules that can be used. You can follow the steps below. These two modules can be integrated into your application easily in no time.
Module
Description
User can create community, create post content and see new content generate via Feed
User can see list of their friends and start a new chat room - 1:1 or group - with them
AmityUIKit uses the default theme as part of the design language.
With no customization, UIKit already looks good. However, if you wish to customize the theme, you can declare changes to both colors and typography.
UIKit uses a small set of declared colors to simplify the design task for developers. These colors are automatically rendered at appropriate shades to communicate states and interactions to the users.
To declare your own colors on iOS:
Create an instance from the provided class AmityTheme
Set the theme instance through AmityUIKitManager
The AmityTypography
is a class that manages a set of UIFont
properties used in Amity UIKit. All fonts used in our UIKit are configured under this class.
To declare your own typography on iOS:
Create an instance from the provided class AmityTypography
.
Set the typography instance through AmityUIKitManager.
Color
Description
Default
Primary
Used for buttons and primary call to actions
#1054DE
Secondary
Used in secondary UI elements
#292B32
Alert
Used when informing users of errors or information that requires attention
#FA4D30
Highlight
Used for hyperlink text
#1054DE
Base
Text presented on light background
#292B32
Base Inverse
Text presented on dark background
#FFFFFF
Message Bubble
Background color of message bubble sent by the user
#1054DE
Message Bubble Inverse
Background color of message bubble sent to the user
#EBECEF
Element
Font/Weight
Size (points)
HeaderLine
System/Bold
20
Title
System/Semibold
17
Body
System/Regular
15
Body bold
System/Semibold
15
Caption
System/Regular
13
Caption bold
System/Semibold
13
There are many components that you can use and integrate into your existing application.
Amity UIKit provides already built UI elements on single page. You can change the appearance such as color and typography, in the global settings. However, the UIKit does not allow you to replace these small components with other views. In addition, you cannot modify the view hierarchy inside the page.
Feature
Description
My community list
User can scroll vertically to see a list of communities that the user has joined sorted in alphabetical order.
Community search
User can search for community by name
Community creation
User can click on + button , to open Community Creation page
Feature
Description
Recommended
Community list
User can scroll horizontally to see up to four recommended communities.
Navigation to Community profile
When a user selects a community item, the user is navigated to Community Profile page
Feature | Description |
Category list | User can see a list of all categories sorted in alphabetical order. |
Navigation to Category detail page |
Feature | Description |
Community list by category | User can see a list of all communities that belong to a category sorted in alphabetical order. |
Navigation to Community Profile page |
When a user selects a category item, the user is navigated to
When a user selects a community item, the user is navigated to
Feature
Description
Community creation
User can create a community by filling the required fields and tapping the Create community button
Feature | Description |
Community profile update | User can update the information such as avatar, community name, description, categories, etc for this community. Profile will be updated upon tapping Save. |
Feature | Description |
Leave community | Leave the community by tapping Leave community. If you are the last remaining moderator in the community you need to transfer your moderator role to other members before you can leave the community. |
Transfer moderator role | Promote a community member to a moderator |
Edit community profile page(moderator user) |
Close community(moderator user) | Close the community by tapping Close community |
Community member page |
Community Notification setting |
This page provides a form for post creation.
The user can select images from 2 sources.
You can create a poll post and other users can interact with that poll post by selecting from the poll options.
To create a live stream post and for a detailed discussion on the live stream features, refer to Livestream Post documentation.
Refer to our Live Stream documentation to enable live stream functionalities.
File: All file types are supported
Image: JPG, JPEG, and PNG
Video: 3GP, AVI, FLV, MP4 and MPEG-2
The maximum file, image, or video size that you can upload is 1 GB.
Uploaded images or videos whose format is not supported (e.g. HEIC, HEVC) will be automatically converted to PNG for images and MP4 for videos.
Create a view controller
Parameter
AmityCommunityModel is a wrapper class of AmityCommunity which is a live object from AmitySDK
Attachment options
By default AmityPostCreatorViewController
allows all attachments when creating a post. You can optionally choose attachment options when creating the post.
All available attachment options are image
, video
, and file
. These can be found in AmityPostAttachmentType
.
Host your events virtually and see community interaction as it happens
AmityUIKit
provides the livestream recording feature that allows you to record livestreams and broadcast simultaneously in real-time. You can also play historical streams when the livestream ends.
This section describes the livestream feature in detail. Refer to our Livestream documentation to enable livestream functionalities.
A livestream post can be viewed in the following feeds:
Community feed
User feed
Global feed
Content feed
You will be able to see the livestream post and interact with it as soon as the livestreamer starts streaming.
To create a livestream post, follow these steps:
Create a livestream post by selecting Livestream from the pop-up and selecting a location where you want to post the stream.
Provide a title and description for your livestream. The Go live button will not enable if you don't provide a title and description.
Add a cover thumbnail from your media gallery for the livestream post and preview the cover image. This step however is optional. You may also update and delete the cover thumbnail.
Note: A default cover will be used if no cover thumbnail is selected.
Tap Go live to start streaming.
There will be a time indicator on the upper left. It will indicate how long it has been since the livestream started.
The livestream post will then show in the feed.
Tap Finish to end livestreaming. It will then show Ending livestream once the livestream has ended.
Note: You have the option to edit or delete the livestream post from the feed.
Other viewers can watch your livestreaming while you are simultaneously recording it. They will see a LIVE indicator on the video.
Tapping the play button in the livestream post will play the video in a full screen mode.
After ending your livestreaming, the playback video may not be available instantly for viewers to see while it is still in the process of producing the playback video. The viewers will see a message that the playback will be available for watching shortly.
When the playback video is already available for viewing, a RECORDED indicator is shown on the video post.
The livestream may be in idle state. This happens when you delete the livestream in console or or other issues that will not enable the livestreaming to start. The viewer will see a message that the stream is currently unavailable.
A livestream post will have the same privacy and access controls as with the other posts. This means that users without the permission, such as those who are not members of the community, won’t be able to view the livestreaming/playback video in a private community. If the community is public, non-members can view the post as read only so they won't be able to interact with it.
If it's your first time creating a livestream, your device will prompt to allow access to your device's camera and microphone.
You need to allow access to be able to start a livestream. The pop-up below will not show once you allow access to your camera and microphone.
This page shows content of a post including reactions and comments.
Reply feature is coming soon.
Create a view controller
The Link Preview feature in posts is designed to enrich user experience by providing a visual and informative preview of external links. This feature enhances content sharing, making it more interactive and engaging. This feature significantly improves the user's posting experience. It allows for a preliminary check of the link's accuracy and relevance, adding visual appeal to the post with an informative preview.
When a user includes a link in a post, the feature automatically extracts and displays key information: the title, main image, and a short description, creating an informative preview of the linked content. If the link is unavailable, it will show a empty placeholder or error view instead.
Users can edit the link preview even after the post is created. This flexibility ensures that the information remains up-to-date and accurate, enhancing the overall quality of the post.
The preview feature is designed to only display images, titles, and descriptions after a post is created. This ensures clarity and relevance in the shared content.
Access the
Access the
View notification setting status and access the
Feature | Description |
---|---|
Feature | Description |
---|
Post creation
Create post by adding content such as text, images, videos, and files. Refer to Supported types for more details.
Mention in post
Mention users in post by typing @ to activate mention suggestion and selecting their names in the suggestion list. Up to 30 users can be mentioned per post.
An alert will be shown if character count is greater than 50000 or mentions count is greater than 30.
Parameter
Description
postTarget
enums to determine where is the target feed
consist of myFeed
and community(AmityCommunityModel)
Feature
Description
Post content
View content of the post including reactions and comments.
Edit post
Navigate to Post Edit page
Delete post
Tap ... and select Delete post. Tap Delete in the confirmation message to confirm post deletion. Otherwise, tap Cancel.
Report post
Tap ... and tap Report or Undo Report to report or undo report respectively.
Create a comment by adding text to the compose bar and tapping Post
Edit comment
Will navigate to Comment Edit page
Delete comment
Tap ... below the comment and tap Delete comment. Tap Delete in the confirmation message to confirm deletion. Otherwise, press Cancel.
Feature | Description |
Comment editing | Edit comment content and tap Save to submit changes. |
Mention in comment | Mention users in comments by typing @ to activate mention suggestion and selecting their names in the suggestion list. Up to 30 users can be mentioned per post. An alert will be shown if character count is greater than 50000 or mentions count is greater than 30. |
Parameter | Data type | Description |
|
| Comment model |
|
| Target community identifier |
Feature | Description |
Text editing | User can edit text content |
Image removal | User can remove images |
File removal | User can remove files |
Parameter | Description |
postId | identifier of the particular post |
Comment creation | Add comments to post |
Mention in comments | Mention users in comments by typing @ to activate mention suggestion and selecting their names in the suggestion list. Up to 30 users can be mentioned per post. An alert will be shown if character count is greater than 50000 or mentions count is greater than 30. |
Parameter | Data type | Description |
|
| Comment model |
|
| Target community identifier |
This page shows the profile of a community including its own feed.
Create a view controller
Feature
Description
Community feed
User can scroll vertically to see a list of posts from a community feed
Feature
Description
Becoming a member
User can tap Join button to join a community
Post creation
User can tap the floating action button to open Post creation page
Community profile update
Creator can tap Edit profile button to open Community profile edit page
Feature | Description |
Navigation to user profile page | User can view profile page by tapping on member list item |
Report user | User can report members present in community |
Parameter | Description |
community | AmityCommunityModel |
Feature | Description |
User Profile | User can view display name and description |
Post creation |
User profile update |
This User profile page can support the Follow feature and User Privacy feature
There are two views for the user profile page.
This view allows the user to see his own user profile detail and his own user feed, there are two state user can see.
Default state : Allows user to see his own following user counter and Follower user counter.
Request pending state : Allows user to see his own following user counter, Follower user counter, and also the follow request he received.
You can get this view by using this code:
This view allows the user to see other user's profile detail and their user feed. There are two states user can see
In the other user view , UIKIT has two main views that support the Follow user connection and the User privacy view.
Default state : Allows user to see the connection between the current user and the target user profile.
You can get this view by using this code:
There are two main state based on the user connection.
In version 2.2, we do not have the User notification setting in the menu.
You can try this code:
In this page, user can see all the follow request he has received. He can either accept or decline the request as well.
The user sorting will be based on what the server provides.
The follow request will not automatically update. User needs to accept or decline first and if the follow request is not available, system will remove the request from list and prompt that the request is unavailable.
You can use the component with this code:
AmityUIKit allows some parts of the component to be customized:
User can tap the floating action button to open to create a post on user's own page
User can tap Edit profile to open to update user's own profile
`
Feature
Description
Follower counter
Shows the total count of followers. It will redirect to Following / Follower user list page when clicked.
Following counter
Shows the total count of users that you're following. It will redirect to Following / Follower user list page when clicked.
Pending follow request section
If you have pending follow requests from other users, you will see the pending request section. It will redirect to Follow request page when clicked.
Edit user profile
It will redirect to User profile edit page when clicked.
Feature
Description
Follow button
When clicked, the system will make a connection with the User.
If the Connection method = with request, system will change to cancel pending state.
Cancel request button
When clicked, follow request will be canceled
Follower counter
Shows the total count of followers. It will redirect to Following / Follower user list page when clicked
Following counter
Shows the total count of users that you're following. It will redirect to to Following / Follower user list page when clicked.
Pending follow request section
If you have pending follow requests from other users, you will see the pending request section. It will redirect to Follow request page when clicked.
Edit user profile
It will redirect to User profile page when clicked.
User feed (Private view)
If a connection was not established, the user profile and the Private setting is Private.
Feature
Description
Edit profile
When clicked, user will be redirect to User profile edit page
Feature
Description
Report / unreport
User can report or unreport user in this user setting page
Unfollow
User can unfollow other user
Feature
Description
User profile update
User can update the information such as avatar, display name, and description. Profile will be updated upon tapping Save.
Feature | Description |
Member Selection | User can select a list of users |
Feature | Description |
Accept Follow request | If user accepts the follow request , system will create a relationship with the request sender and the request item will be removed from the list. |
Decline Follow request | If user declines the follow request, system will invalidate the follow request |
Feature | Description |
Current user profile | If current user will access other user's following and Follower user list, he will see his own profile on top of the list |
Report / undo report user | User can send report or undo report in this page via the action menu UIKIT included in this page |
Remove user from follower list | If current user will access his own follower list, he can remove followers via the three dots button and action menu |
Redirect user to user profile page. | If user taps on the user item list, he will be redirected to user profile page of that user |
UIKIT allows the default behaviour to be overridden by custom logic.
Feature | Description |
Post creation on user's own feed |
Post creation on community feed |
This setting allows you to control where a post can be shared to based on the post origin.
My feed - The post can be shared to my feed. This option will enable "Share to my timeline" menu when user clicks share button.
Public community - The post can be shared to any public community. This option will enable "Share to group" menu when user clicks share button.
Private community - The post can be shared to any private community. This option will enable "Share to group" menu when user clicks share button.
External - The post can be shared externally. This option will enable "More options" menu when user clicks share button.
Origin - The post can be shared within the community feed that it was created. If the post was created in either public or private community, this option will enable "Share to group" menu when user clicks share button.
My feed post - Posts that were created on my feed. By default, possible sharing targets are My feed, Public community, and Private community.
User feed post - Posts that were created on any other users' feed. By default, possible sharing targets are My feed, Public community, and Private community.
Public community feed post - Posts that were created on any public community. By default, possible sharing targets are My feed, Public community, and Private community.
Private community feed post - Posts that were created on any private community. By default, possible sharing target is Origin.
You can select a set of targets for each post origin.
Based on Post sharing settings, there are up to three post sharing events that can be emitted by UIKit.
Share to my timeline - an event emitted when a user clicks on "Share to my timeline" button.
Share to group - an event emitted when a user clicks on "Share to group" button.
Share externally - an event emitted when a user clicks "More options" button.
You can choose to intercept one or all of the events and apply your custom behavior.
UIKit provides default renderers for the core data types: text
, image
, and file
. It also provides a way to render your own UI for your custom post.
A single post UI is composed of 1 or more UITableViewCell. This allows reusability of cell components such as header or footer which can be shared by different kinds of posts.
This is an example of simple text post which contains 3 tableview cell. Top cell represents the header, middle cell contains text content and bottom cell is footer cell.
There are 3 steps involved in creating custom post renderer.
Step 1: Create your UI using UITableView cells.
Step 2: Compose a post UI component. For this create a component which conforms to AmityPostComposable
protocol.
You can also use our default header cell AmityPostHeaderTableViewCell
& default footer cell AmityPostFooterTableViewCell
in your custom post component.
Step 3: Register your custom cell & implement datasource.
When a user selects My Timeline, UIKit will open with the user's own feed as the target.
When a user selects a community, UIKit will open with the selected community.
With our chat functionality in AmityUIKit, you can explore how best to integrate and design messaging features and how they will look in your app.
When a user clicks on the user profile avatar at the post creator area, UIKit will open User profile page
However, you can intercept the event and define your own logic following the example below.
To customize message cell layouts, please follow these instructions:
Create a subclass of UITableViewCell
and conform it to AmityMessageCellProtocol
To bind message data to UI, implement display(message:)
. You can also implement height(for message:boundingWidth:)
to specify the cell height. We've included some examples below for static-height calculation and dynamic-height calculation as reference
Subclass AmityEventHandler,
and override its default functions channelDidTap(from:channelId:)
and conform to AmityMessageListDataSource
.
4. Assign a class instance through a set function of AmityUIKitManager
Static-Height Cell Layout
You can use static-height cell layout types for static content, where the cell height is fixed and will not be scaled regardless of the data being received.
Below is an example of how you can configure a static-height cell layout. In this example, we're assuming that the image message is a class named StaticHeightMessageCell
.
Dynamic-Height Cell Layout
You can use dynamic-height cell layout when you require your cell height to expand dynamically according to the data (e.g. label expands upon strings).
Dynamic-height cell layouts require more complexity in height calculation. Let's look at a text message as an example, where the height of the cell needs to expand dynamically to display the full content.
From v1.8 onwards, UIKit provides the capability for you to manage roles & permissions via the integration with SDK
Permissions
Description
Add user
Moderator user can add new member to the community.
Remove user
Moderator user can remove member from the community.
Assign Moderator role to other users
Moderator user can assign Moderator role to another member in the same community
Remove Moderator role from a Moderator user
Moderator user can remove Moderator role from another Moderator in the same community
Edit community
Moderator user can rename community, change community type as he see fit
Close community
Moderator user can close the community
Moderator badge
the "Moderator" badge shown on the post indicates it was created by a moderator user
Our video functionality within the AmityUIKit will allows for richer, interactive experiences by enabling live streaming on your application
More than ever, videos are increasingly dominating mobile screens. From fun short-form clips to promote new products to live-streamed talk shows to educate your customers, videos have the potential to transform the way customers experience your brand.
The UIKit now supports live stream posts so you can create and watch live streams.
To enable live stream functionalities easily, we’ve provided AmityUIKitLiveStream
, which is built on top of AmityUIKit and AmitySDK.
The plugin provides:
LiveStreamBroadcastViewController
to create and broadcast live stream posts
LiveStreamPlayerViewController
to watch live streams
The live stream plugin can be installed via Swift Package Manager with these steps:
In Xcode, select File > Swift Packages > Add Package Dependency.
Specify the Repository: https://github.com/AmityCo/Amity-Social-Cloud-UIKit-LiveStream-iOS-SwiftPM.
Select Up to Next Major, then click Next.
Select AmityUIKitLiveStream, then
click Finish.
After successfully installing the plugin, you must override the live stream behaviors with these steps:
Create AmityEventHandler
subclass, and override live stream functions.
Set the custom event handler for AmityUIKit
.
LiveStreamBroadcastViewController
requires these permissions:
Camera Permission - to broadcast live stream video
Microphone Permission - to broadcast live stream audio
After LiveStreamBroadcastViewController
is presented, it will prompt to ask permission automatically if needed. You must include these permission keys in your app’s Info.plist file:
NSCameraUsageDescription
NSMicrophoneUsageDescription
This page shows all the messages in a direct chat.
You can create and specify Settings
object when creating AmityMessageListViewController
.
The available settings are shown below.
There are two compose bar styles available in the UIKit.
ComposeBarStyle.default
- has full functionalities including text, audio and, image message sending
ComposeBarStyle.textOnly
- has simple functionalities which are only limited to text message sending
The default settings for compose bar style is ComposeBarStyle.default
.
Feature
Description
User avatar
If the user has no avatar, the system will show the default avatar.
User Display name
If the user has no display name, the display name will be 'anonymous'.
Back button
Redirects user back to the previous page.
Feature
Description
Show list of message
The latest message bubble will be at the bottom of the screen. Scroll up to see all messages.
Date label
Grouping of messages by the sent date
Feature
Description
Read more mode
When the text is more than 13 lines, the system show read more mode. Once it is clicked on the read more button, it expands text to the full size.
Long press to delete
If the long click event occurs, the system will show the delete option.
Long press to edit
If the long click event occurs, the system will show the edit option. When click the edit option, the system will redirect the user to the edit message page.
Error to send message indicator
If the message can not be sent, the system will show the error indicator in front of the message bubble.
Sent time stamp
Show as time stamp HH:MM
Edited label
If the message is edited, the edited label will be shown.
Deleted message
If the message is deleted, the deleted view will be shown.
Feature
Description
Image thumbnails
The system shows the image base on the image ratio. Once it is clicked, it will redirect the user to the edit message page.
Image upload state
The system will show the image uploading indicator while the image is being uploaded.
Feature
Description
Pinch zoom gesture
The user can pinch the screen to zoom in or out the image.
back
Redirect user back to the previous page.
Feature
Description
Click to play
If the user clicks on the voice message , the system will play the audio
Click to stop
If the user clicks on the playing voice message or play another voice message, the system will stop playing the playing audio.
Feature
Description
Hold to record
The user can hold to record an audio message for up to 60 seconds. Once the user releases the finger, the system will send the audio message.
Discard the record
The user can drag the finger to the bin button to discard the current recording session.
Feature
Description
Add text
User can update the text from the original input
Save
User can click save button to save the change he made.
Discard change
user can click x to discard all change before user click save.
Parameter
Description
channelId
Use to query channel info and message list
This component shows the global feed.
You can use either of these two methods:
make
- the posts will be ranked in chronological order.
Below is the sample code.
makeCustomPostRanking
- the posts will be ranked according to a score-sorting mechanism. Refer to Custom Post Ranking for more information about this feature.
You can retrieve your global feed sorted by ranking score with this code.
Feature
Description
Global feed
Scroll vertically to see a list of posts from the global feed.
This component consists of My community and Global feed components.
Feature
Description
My Community list
User can scroll horizontally to see a list of up to eight communities that the user has joined sorted in alphabetical order.
Navigation to Community profile page
When a user selects an community item, the user is navigated to Community Profile page
Navigation to My community page
When a user selects the arrow, the user is navigated to My community page
This component consists of Recommend community, Top trending community, and Categories components.
Feature
Description
Top trending
Community list
User can see up to five top trending communities.
Navigation to Community profile
When a user selects a community item, the user is navigated to Community Profile page
Feature
Description
Category list
User can see up to eight categories sorted in alphabetical order.
Navigation to Category detail page
When a user clicks on a category item, the user is navigated to Category detail page.
Navigation to Category list
When a user selects the arrow, the user is navigated to Category list page.
Amity modules are ready-to-use — the only things left to do for our customers are integration and front-end. Going the extra mile, we've created a UIKit with endless customizations.
Our Chat UIKit and Social UIKit for Amity Social Cloud is a development kit with a user interface to enable fast integration of standard Amity Chat and Amity Social features into new or existing applications. Themes allow you to apply your style through colors and fonts.
We have now open sourced Amity UIKit so you will have complete control of the visual style of your Chat and Social application with endless customizations. Amity UIKit open source is now available in our Github repository.
To customize Amity UIKit open source, download the source code and apply the customizations in the forked source code. Once you fork our UIKit source code separately, you basically own the product so you are free to customize and build it for your specific use cases.
We recommend that you use Amity UIKit open source when:
The standard UIKit is not applicable to your use case.
You want to use an Amity Chat or Social SDK feature which is not yet supported in our standard UIKit.
Please note that we will extend only a limited support once you customize our UIKit open source since we won’t be able to fully know your code once you fork it.
We are using the Amity UIKit open source wiki for any documentation related to Amity UIKit open source.
For our standard UIKit, you can refer to the documentation here.
If you would like to suggest improvements on the source code, you can submit a pull request. If you find bugs or would like to request features, you can create an issue. Please note that not all changes and requests will be approved but they will be assessed in due course.
For more information on these guidelines, you may refer to the Amity UIKit open source wiki or you may go directly to these related pages:
Easy Installation
Fully featured chat experience with minimal coding
Customize targeted UX flows, specific views and respond to user interactions to tailor a user experience for just your application
Feature | Description |
Toggle on/off notification community level setting | Users can choose to toggle on/off the notification setting for this specific community |
Hide disable notification setting. | Users will not receive push notifications that have been turned off |
Error state handle | When users tries to change the status of the community push notification setting and get an error from our back-end due to a failed attempt |
No internet connection state | If users do not have a stable internet connection, the system will show the error |
Installing managed UIKit through Cocoapods, Carthage & SPM.
This section is about installing managed uikit through dependency manager. If you have already installed our Open Source UIKit, you can skip this section.
To provide greater customization options, we have open-sourced our UIKit and deprecated the pacakged UIKit version previously available. For the best quality and access to the latest features, we strongly recommend integrating our UIKit with the open-source version. For more details Please refer to iOS UIKit Installation Guide section.
Go to Xcode and create a project for iOS.
Enter a project name
Select Swift as your language option
AmityUIKit
supports installation via dependency managers, we highly recommend SwiftPM installation as best practice.
SwiftPM
Cocoapods
Carthage
To integrate AmityUIKit into your project via SwiftPM, please follow the instruction below.
Enter the repository URL to search the package, and choose to install AmityUIKit
.
Carthage is a decentralized dependency manager that builds your dependencies and provides you with binary frameworks. To integrate the Amity Social UIKit. First, add the following to your Cartfile
.
Now you can install Amity Social UIKit into your project by running the following command.
If you are using CocoaPods to integrate Amity Social UIKit into your Xcode project. First, open a terminal and run this command to create Podfile
.
Then, add the following lines to the Podfile
Now you can install Amity Social UIKit into your project.
If problems happen during pod install
step. Please try clean Cocoapods cache before running pod install
again.
To clear cache please go to ~/Library/Caches/Cocoapods
and remove all folders.
If this doesn't work, please do visit the Cocoapods Github repo for further resolutions.
After finished installing SDK. You will be able to import AmityUIKit
.
AmityUIKit already includes our SDK. Don’t install AmitySDK separately if you have already installed the UIKit.
From the version 3.x. please install the UIKit with the open source guideline here iOS UIKit Installation Guide
Feature
Description
toggle on/off notification community level setting
Users can choose to toggle on/off the notification setting for this specific community
Hide disable notification setting.
Users will not see push notifications that have been turned off
error state handle
When users try to change the status of the community push notification setting and get an error from our back-end due to a failed attempt
Feature
Description
Toggle on/off notification community level setting
User can choose to toggle on / off the notification setting for this specific community
Hide disable notification setting.
User will not see the push notifications that have been turned off
Error state handle
When use tries to change the status of the community push notification setting but not success due to get error from Backend , we will show pop up and return the toggle state to the previous state
Feature
Description
Gallery
Scroll vertically to see images and videos from posts in a community feed
Media Filter
Filters according to media type (Photos and Videos). Tap the corresponding tabs to see the filtered posts.
Feature
Description
User feed
User can scroll vertically to see a list of posts from a user feed
This component shows a user feed of a specific user.
Feature
Description
User feed
User can scroll vertically to see a list of posts from a user feed
Private feed
User cannot see the feed content if user is not connected and the Privacy setting is Private
There are many components that you can use and integrate into your existing application.
UIKit provides already built UI elements in one page. You can change the appearances, such as color and typography in the global settings. However, UIKit does not allow you to replace these small components with other views. And you cannot modify the view hierarchy inside the page.
There are many pages and actions on AmityUIKit. Pages can be nested inside others and it would be hard for overriding events on the nested pages. In order to solve this problem, we provide EkoEventHandler
which is a behavior controller for actions that happen in UIKit.
Event
Parameter
Condition
communityDidTap
communityId
community avatar or community display name is tapped
userDidTap
userId
user avatar or user display name is tapped
editUserDidTap
userId
edit user button is tapped
postDidtap
postId
post or comment on social feed is tapped
editPostDidTap
postId
edit post button is tapped
channelDidTap
channelId
user channel list or user chat button is tapped
communityChannelDidTap
channelId
n/a
Feature
Description
Recent chat list
User can see a list of the most recent chats
Navigation to Message list
When a user selects a chat, UIKit opens a chatroom page
Amity iOS UIKit Migration Guide
To allow for more customization, we have now open sourced our UI Kits and deprecated the packaged UI Kit version that was previously available.
With open-source, developers have more flexibility and greater customization options, allowing you to have complete control over the visual style. Open sourcing allows for more transparency and visibility and enables contributions from a greater developer community in terms of good design, implementation, code improvement, and fixes, translating into a better product and typical development.
To ensure that you continue to receive the latest features and updates, we encourage you to move off the managed UI Kit to the Open Source UI Kit. This guide will show you how to:
If you've never used UI Kit, you may skip this step and proceed to the next step.
If you're integrating the UI Kit with an existing project, you'll need to remove and unlink the managed UIKit from your project before proceeding with the integration.
There are several ways for you to migrate the open source iOS UI Kit into your projects, depending on your workflow. One way that we recommend is via Git Submodule. This instruction assumes that the app project is already set up with a Git repository.
Add git submodule of Amity UIKit open source into your git repository.
To simplify forking & contributing to the open source UIKit, we are moving away from using git-lfs in our git repository. We are migrating all development of Open Source UIKit to new repository https://github.com/AmityCo/ASC-UIKit-iOS-OpenSource starting release v3.12.0. The previous open source UIKit Repository https://github.com/AmityCo/Amity-Social-Cloud-UIKit-iOS-OpenSource would be supported until <xxxx-yyyy-zzzz> date. New repository will not contain any history before release v3.12.0.
For new users:
If you are just starting to use Open Source UIKit or already using latest version of Open Source UIKit (i.e v3.12.0) from old Repository, We suggest you to start pulling changes from new repository instead.
In this case,
If you have forked old open source UIKit repository, we suggest you to fork new repository and use that instead.
For Old Users:
If you are using older version (< 3.12.0) of open source UIKit, we suggest you to upgrade to latest version of UIKit as soon as possible. Once you are caught up to version 3.12.0, please migrate to use new repository instead.
Create an Xcode Workspace, and then add both MyApp.xcodeproj
and AmityUIKit.xcodeproj
together under the same workspace.
3.AmityUIKit
links with other dependencies such as AmitySDK
, Realm
etc through SharedFrameworks
which is a Swift Package.
Step 1: Reset Package Cache of your Application Target i.e YourApp.xcodeproj. [If you are installing AmityUIKit for the first time, you can skip this step]
Select App Target In Xcode Project -> Select File Menu for Xcode-> Packages -> Reset Package Cache
Step 2: Link SharedFrameworks
& AmityUIKit.framework
to YourApp.xcodeproj target as shown below.
4. On MyApp.xcodeproj
, let’s try importing AmityUIKit / AmitySDK and call some APIs. You should be able to compile and run the app.
You can modify the iOS open source UI Kit to customize behaviors to fit your needs. To modify the code, simply copy and paste it into your local machine.
We recommend that you first fork the repository before starting any customization work, so that it will be easier to merge the code with the next version update that we provide from the main repository.
References on forking: https://docs.github.com/en/get-started/quickstart/fork-a-repo
To update to the latest version of the UI Kit, you can pull the latest commit of the git submodule.
AmityUIKit allows you to personalise some parts of the component.
With Amity UIKit 2.3, we have introduced a new way to Authentication process. Just follow the guide below.
Your app may require the following permissions to work properly;
Camera access
Microphone access
Photo library usage access
Before submitting your application to the store, please make sure the following permissions are already granted. Here are the steps to ask for permission.
Locate the info.plist
file and add:
NSCameraUsageDescription
NSMicrophoneUsageDescription
NSPhotoLibraryUsageDescription
AmityUIKit
requires an API key. You need a valid API key to begin using the UIKit. Please find your account API key in Amity Social Cloud Console.
After logging in Console:
Click Settings to expand the menu.
Select Security.
In the Security page, you can find the API key in the Keys section.
If you have trouble finding this, you can post in our community forum at community.amity.co so our support team can assist you.
AmityUIKitManager.setup should only be called once when app starts running. Calling the method repeatedly will create connection problems.
By default, AmityClient will connect to AmityRegion.SG
. You can specify endpoints manually via AmityEndpoint
struct. API endpoints for each data center are different so you need to adjust the endpoint accordingly.
We currently support multi-data center capabilities for the following regions:
To use any SDK feature, you must first register the current device with a userId
. A device registered with an userId
will be permanently tied to that userId
until you explicitly unregister the device, or until the device has been inactive for more than 90 days. A device registered with a specific userId
will receive all messages belonging to that user.
Additionally, an optional displayName
can be provided if you wish to have this user identified in push notifications.
Registering your app for push notifications will require a device token as a parameter.
Amity's UIKit does not manage:
User-facing requests for push notifications and authorizations
The creation and refreshing of push notification tokens
It's up to your app to take those steps and pass the device token.
In the event that your user logs out, you should explicitly unregister the user from the SDK as well, to prevent the current device from receiving any unnecessary or restricted data.
Unregistering a device is a synchronous operation. Once theunregisterDevice
method is called, the SDK disconnects from the server and wipes out user session.
Region
Endpoint
Europe
AmityRegion.EU
Singapore
AmityRegion.SG
United States
AmityRegion.US