How to create your own social app with Amity Social Cloud

  • 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.

How to create your own social app with Amity Social Cloud

Creating social engagement with your products and services will allow brands and companies to increase customer loyalty — however currently brands have no option but to integrate themselves into large social media platform, giving up user data to the platform along the way. Would it be nice if we can easily create our own social platform that focuses on things around our brand? This article willl show you how to easily create our own social media platform like Facebook by using Amity Social Cloud SDK.

amity social cloud web

With Amity Social Cloud, we can create a community for a group of people who have things in common or similar interests. Moreover, it can be an application for a community in an organization in which we can make rules, manage and control the whole platform, unlike Facebook where we have to follow all the rules and get some limited accesses written by Facebook.

Amity Social Cloud is user-friendly (very simple and easy), just download and install SDK, then you can start to develop your application without a backend concern because we’ve already prepared everything, including a scalable server for you!

Besides the backend, we also have UI Kit as another tool. No need to waste your time designing UX/UI. Meanwhile, users will feel familiar with the similar UI that they have ever used before.

Such a nice and wonderful application.

Let’s have some fun, I’m taking you to create the application with me now…

(Technical part about to begin…)

Required

  • Android Studio
  • Android 5.0 (API level 21 or higher)
  • Android X
  • Gradle 3.4.0 or higher
  • Java 8
  • Coffee or Tea and Snack

Creating an Android project

→ In the Welcome window, select Start new Project.

→ You can select Project Template whatever you want (I choose Empty Activity)

→ Enter your project Name, Package Name then we are READY !!

Setting up SDK

→ Add Jitpack in project level {% c-line %}build.gradle{% c-line-end %}

{% c-block language="javascript" %}
allprojects {
   
repositories {
       maven {
           
url "https://jitpack.io"
}
   }
}

{% c-block-end %}

→ Add UIKit dependency in module level {% c-line %}build.gradle{% c-line-end %} (for now version 1.8.0)

→ Add EkoSDK in module level {% c-line %}build.gradle{% c-line-end %} (for now version 4.7.1)

{% c-block language="javascript" %}
dependencies {
   implementation
"com.github.EkoCommunications.UpstraUIKitAndroid:upstra-uikit:1.8.0"
    implementation
"com.github.EkoCommunications.EkoMessagingSDKAndroid:eko-sdk:4.7.1"
}
{% c-block-end %}

Initialize the SDK

→ In your Main Class OnCreate() add this

  • apiKey is a key to your organization’s environment. The app will show only data of your organization only
  • Register your account on our website to get your API key

{% c-block language="javascript" %}
EkoClient.setup(apiKey)
   .subscribeOn(Schedulers.io())
   .observeOn(AndroidSchedulers.mainThread())
   .doOnComplete {
       
Log.d("", "setup success")
}
   
.doOnError {
       it
.message?.let { it1 -> Log.d("", it1) }
   }
   
.subscribe()
{% c-block-end %}

→ create new fragment, layout and menu

for layout file

{% c-block language="javascript" %}
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   android:id="@+id/container"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical">

<TextView
       android:id="@+id/titleName"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:paddingStart="15dp"
       android:text="home"
       android:textColor="#000"
       android:textSize="18sp"
       android:textStyle="bold" />

<FrameLayout
       android:id="@+id/content"
       android:layout_width="match_parent"
       android:layout_height="0dp"
       android:layout_weight="1"
       android:theme="@style/Base.Theme.EkoApp">
</FrameLayout>

<com.google.android.material.bottomnavigation.BottomNavigationView
       android:id="@+id/navigation"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:layout_gravity="bottom"
       android:background="?android:attr/windowBackground"
       app:itemIconTint="#4267B2"
       app:itemTextColor="#808080"
       app:labelVisibilityMode="labeled"
       app:menu="@menu/bottom_navigation" />

</LinearLayout>
{% c-block-end %}

for menu

{% c-block language="javascript" %}
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

<item
       android:id="@+id/globalFeed"
       android:icon="@drawable/ic_launcher_foreground"
       android:title="Group" />

<item
       android:id="@+id/explore"
       android:icon="@drawable/ic_launcher_foreground"
       android:title="Chat" />

<item
       android:id="@+id/profile"
       android:icon="@drawable/ic_launcher_foreground"
       android:title="Profile" />


</menu>
{% c-block-end %}

create fragment class MainPageFragment, import these for connect to UI kit

{% c-block language="javascript" %}
import com.ekoapp.ekosdk.EkoClientimport com.ekoapp.ekosdk.uikit.chat.home.fragment
.EkoChatHomePageFragmentimport com.ekoapp.ekosdk.uikit.community.home.fragments
.EkoCommunityHomePageFragmentimport com.ekoapp.ekosdk.uikit.community.profile.fragment
.EkoUserProfilePageFragment
{% c-block-end %}

add these for build News Feed page, Profile page, Chat page

{% c-block language="javascript" %}
private fun getNewsFeed(): Fragment {
   return EkoCommunityHomePageFragment.Builder()
       .build(this)
}

private fun getProfile(): Fragment {
   return EkoUserProfilePageFragment.Builder()
       .userId(EkoClient.getUserId())
       .build(this)
}

private fun getChat(): Fragment {
   return EkoChatHomePageFragment.Builder()
       .build(this)
}private fun addFragment(fragment: Fragment) {
supportFragmentManager
       
.beginTransaction()
       .setCustomAnimations(
           R.anim.design_bottom_sheet_slide_in,
           R.anim.design_bottom_sheet_slide_out
       
)
       .replace(R.id.content,
        fragment,
        fragment.javaClass.getSimpleName())
       .commit()
}
{% c-block-end %}

add your bottom menu listener

{% c-block language="javascript" %}
private val mOnNavigationItemSelectedListener =
   BottomNavigationView.OnNavigationItemSelectedListener { item ->
       
val titleView = findViewById<TextView>(R.id.titleName)
       titleView.visibility = View.VISIBLE
       
when (item.itemId) {
           R.id.globalFeed -> {
               titleView.text = "Community"
               val fragment = getNewsFeed()
               addFragment(fragment)
               return@OnNavigationItemSelectedListener true
           }
           R.id.explore -> {
               titleView.text = ""
               titleView.visibility = View.GONE
               
val fragment = getChat()
               addFragment(fragment)
               return@OnNavigationItemSelectedListener true
           }
           R.id.profile -> {
               titleView.text = "Profile"
               val fragment = getProfile()
               addFragment(fragment)
               return@OnNavigationItemSelectedListener true
           }
       }
       false
}
{% c-block-end %}

almost done, add these codes to subscribe on network

{% c-block language="javascript" %}
fun initView(user: String, username: String, fragment: Fragment) {
 EkoClient.registerDevice(user).displayName(username).build()
 .submit()
 .subscribeOn(Schedulers.io())
 .observeOn((AndroidSchedulers.mainThread()))
 .doOnComplete {
   
addFragment(fragment)
}
 
.doOnError {
   
Toast.makeText(this, "Could not register user" +
it.message, Toast.LENGTH_SHORT).show()
}
 
.subscribe()
}
{% c-block-end %}

and finally we are in last step, add your content view in onCreate() fragment

{% c-block language="javascript" %}
override fun onCreate(savedInstanceState: Bundle?) {
   super.onCreate(savedInstanceState)
   setContentView(R.layout.activity_news_feed_home)    navigation.setOnNavigationItemSelectedListener(
    mOnNavigationItemSelectedListener)    val fragment = getNewsFeed()
   initView("user_id", "User Name", fragment)
}
{% c-block-end %}

Congratulations !! run the app and see our magic

If you are interested to learn more about Amity Social Cloud, you can contact us at our website.

The future is social thank you and see you soon!