ClickCease
Amity Social Cloud UI Kit Illustration

Product Announcement: Open Source UI Kits

Our UI Kits include user interfaces to enable fast integration of standard Amity features into new or existing applications.

Previously, these kits were not open sourced, meaning that developers were limited to customize only the features within the scope that we allow them to based on the components that we expose.

We have now open sourced our UI Kits, meaning that developers are free to modify anything they want and have complete control over the visual style with endless customizations. 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. All these translate to a better product and standard development. 

With this new improvement, developers will be able to: 

  • Customize their own kits by creating a new program from the source code
  • Suggest changes and requests to the UI Kit
  • Submit bug and feature requests

Code Structure 

MVVM

MVVM cleanly separates the presentation layer from the other layers. Divorcing one from the other improves its maintainability and testability. It also makes the application evolution easier in the future, thereby reducing the risk of technological obsolescence. It eliminates the need for application redesign - user interfaces become outdated, or even add more complexity in the specific layer. For example, adding a local data source to the application could be impactless to the other layers.

iOS

A graph of the iOS code structure: view model

Android

Amity UI kit architecture overview: presentation, viewmodel, and data source

Presentation

Presentation is basically an Activity, Fragment, or View which is responsible for displaying UI (User Interface) and giving UX (User Experience) of users/ This component will interact with the View Model component to request, send, and save data or state.

ViewModel

ViewModel is fully responsible for communicating between presentation layer and data layer and also representing state, structure, and behavior of the model in data layer.

Data source

Data source is responsible for implementing business logic and hold data or state in the app (in this case Amity SDKs).

Customizing Amity UI Kit Open Source

With open sourcing, developers can customize the kit by downloading a copy of the source code and creating a new program. 

To customize our UIKIt, please use the following steps: 

  1. Download the AmityUIKit source code from GitHub (Git clone)
  2. Once you’ve forked the project, you can go ahead and make any customizations you like.
  3. Refer to Framework Building for the instructions on how to build the project.*

*Applicable to iOS only.

Contributing to AmityUI Kit Open Source 

Like any other source projects, changes that are contributed will need to be reviewed and approved first. It is important to note that not all changes and requests will be approved, but they will be assessed in due course. 

To contribute to our AmityUIKit open source project, use the following steps: 

  1. Navigate to the AmityUIKit OpenSource project.
  2. Fork the project. GitHub will take you to your forked copy of the AmityUIKit OpenSource repository.
  3. Clone your fork with the command line, GitHub CLI, or GitHub Desktop.
  4. You can go ahead and make a few changes to the project using your text editor.
  5. Stage and commit your changes. 
  6. Push your changes to the repository.
  7. Head on over to the repository on GitHub where your project lives and create a Pull Request.
  8. Make sure to provide a title and description of your changes.

Note:
It's important to provide as much useful information and a rationale for why you're making this pull request so we can properly assess and deliberate on the approval.

Submitting fixes and feature requests

For bugs and feature requests, please create an issue from the AmityUIKit repository. 

To create an issue from the repository:

  1. Navigate to the AmityUIKit OpenSource project.
  2. Under your repository name, click Issues.
  3. Click New Issue.
  4. Provide a title and description for your issue.
  5. When you're finished, click Submit new issue.

Note:
It's important to provide as much useful information about the issue that you will submit so we can properly assess and deliberate on the approval.

Share product update
Don't miss out on new features!

Subscribe to our product updates newsletter:

Oops! Something went wrong while submitting the form.