Getting Started (ANDROID)

The SuperAwesome Kids Web Services (KWS) Social SDKs for Mobile are a set of individual composable components for easily creating kid-safe social applications for the Android and iOS platforms. They may be used in isolation to each other or composed together to create a complete social media experience for kids.

The Android SDKs are written in Kotlin and use the Redux patterns internally.

Setting up the SDK

Before we are able to use the SDK we must set it up correctly. First thing to do is to define an environment to work with:

/**
* Our custom environment class implements the INetworkEnvironment
* interface.
* The only thing we must define is the specific server instance
* we want to connect to.
*/
class MyEnvironment: INetworkEnvironment {
 override val environment = "https://my.server.instance.com"
}


Next it’s a matter of creating and configuring up some essential SDK components. As in many other cases, this involves doing work in a custom application class.

class MyApplication: Application() {

 /**
  * First, create an instance of the environment type we defined previously
  */
 val environment = MyEnvironment()

 /**
  * Second, we create a Store. This holds as well as mutates all
  * the internal state of the SDK.
  */
 val store = Store()

 override fun onCreate() {
   super.onCreate()

   /**
    * We can then obtain an instance of SharedPreferences to keep all
    * non-transient data in.
    */
   val preferences = PreferenceManager.getDefaultSharedPreferences(this)

   /**
    * Next we create an instance of an "SDK", that we feed the
    * current context as well as the environment.
    * This will configure all internal services.
    */
   val sdk = SocialSDK(this, environment)

   /**
    * Finally, we use the previous store, sdk instance and
    * SharedPreferences instance to configure the Social SDK.
    */
   DispatchFactory.configure(store, sdk, preferences)
 }
}


And that’s it! All of the internal SDK components are now correctly configured.

Additionally, know that we will need to use the Store we defined in a number of cases in the codebase. It’s therefore indicated that we use Kotlin’s powerful extension mechanism to create a method to help us access it easily.

val Application.store: Store
 get() {
   return (this as MyApplication).store
 }


Authentication & OnBoarding SDK

Registration Button

Provides default UI for a button that can perform user creation. Includes functionality for specifying a username and password function, so the information source can be mostly anything (an EditText view, another function, etc).

In order to add it to an Activity, first we must add it to our Fragment or Activity XML layout.

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
 tools:context=".activities.MyIntroActivity">

 <tv.superawesome.pj.ui.authbutton.views.RegisterButton
   android:id="@+id/register_button"
   android:layout_width="match_parent"
   android:layout_height="48dp"/>

</android.support.design.widget.CoordinatorLayout>


Once its taken its place in our layout, we can hook it up in code:

class MyIntroActivity: AppCompatActivity() {

 override fun onCreate(savedInstanceState: Bundle?) {
   super.onCreate(savedInstanceState)

   register_button.setUsernameSource { "some-username" }
   register_button.setPasswordSource { "some-password" }
 }
}

Login Button

Provides default UI for a button that can perform user login. Includes functionality for specifying a username and password function, so the information source can be mostly anything (an EditText view, another function, etc).

In order to add it to an Activity, first we must add it to our Fragment or Activity XML layout.

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
 tools:context=".activities.MyIntroActivity">

 <tv.superawesome.pj.ui.authbutton.views.LoginButton
   android:id="@+id/login_button"
   android:layout_width="match_parent"
   android:layout_height="48dp"/>

</android.support.design.widget.CoordinatorLayout>


Once its taken its place in our layout, we can hook it up in code:

class MyIntroActivity: AppCompatActivity() {

 override fun onCreate(savedInstanceState: Bundle?) {
   super.onCreate(savedInstanceState)

   login_button.setUsernameSource { "some-username" }
   login_button.setPasswordSource { "some-password" }
 }
}

Username Input

Provides default UI for selecting a username. Includes functionality that allows the input of usernames as well as validation against rules that can be setup server-side, such as minimum and maximum username length, regex rules, etc.

In order to add it to an Activity, first we must add it to our Fragment or Activity XML layout.

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
 tools:context=".activities.MyIntroActivity">

 <tv.superawesome.pj.ui.registerusername.views.RegisterUsernameView
   android:id="@+id/register_username"
   android:layout_width="match_parent"
   android:layout_height="match_parent"/>

</android.support.design.widget.CoordinatorLayout>


Once its taken its place in our layout, we can hook it up in code:

class MyFeedActivity: AppCompatActivity() {

 override fun onCreate(savedInstanceState: Bundle?) {
   super.onCreate(savedInstanceState)

   register_username.setSkin(RegisterUsernameSkin())
   register_username.bindTo(context.application.store)
 }

 override fun onDestroy() {
   register_username.unbindFrom(context.application.store)
   super.onDestroy()
 }
}

Password Input

Provides default UI for selecting a password. Includes functionality that allows the input of passwords as well as validation against rules that can be setup server-side, such as minimum and maximum username length, regex rules, etc.

In order to add it to an Activity, first we must add it to our Fragment or Activity XML layout.

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
 tools:context=".activities.MyIntroActivity">

 <tv.superawesome.pj.ui.registerpassword.views.RegisterPasswordView
   android:id="@+id/register_password"
   android:layout_width="match_parent"
   android:layout_height="match_parent"/>

</android.support.design.widget.CoordinatorLayout>


Once its taken its place in our layout, we can hook it up in code:

class MyIntroActivity: AppCompatActivity() {

 override fun onCreate(savedInstanceState: Bundle?) {
   super.onCreate(savedInstanceState)

   register_password.setSkin(RegisterPasswordSkin())
   register_password.bindTo(context.application.store)
 }

 override fun onDestroy() {
   register_password.unbindFrom(context.application.store)
   super.onDestroy()
 }
}

Login Input

Provides default UI for helping a user login in. Includes functionality that allows the input of usernames and passwords as well as validation against rules that can be setup server-side, such as minimum and maximum username length, regex rules, etc.

In order to add it to an Activity, first we must add it to our Fragment or Activity XML layout.

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
 tools:context=".activities.MyIntroActivity">

 <tv.superawesome.pj.ui.login.views.LoginView
   android:id="@+id/login_view"
   android:layout_width="match_parent"
   android:layout_height="match_parent"/>

</android.support.design.widget.CoordinatorLayout>


Once its taken its place in our layout, we can hook it up in code:

class MyIntroActivity: AppCompatActivity() {

 override fun onCreate(savedInstanceState: Bundle?) {
   super.onCreate(savedInstanceState)

   login_view.setSkin(LoginSkin())
   login_view.bindTo(context.application.store)
 }

 override fun onDestroy() {
   login_view.unbindFrom(context.application.store)
   super.onDestroy()
 }
}


Password Recovery Email Input

Provides default UI for helping a user set a password recovery email. Includes functionality that allows the input of emails as well as validation against rules that can be setup server-side, such as minimum and maximum username length, regex rules, etc.

In order to add it to an Activity, first we must add it to our Fragment or Activity XML layout.

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
 tools:context=".activities.MyIntroActivity">

 <tv.superawesome.pj.ui.recoveryemail.views.RecoveryEmailView
   android:id="@+id/email_view"
   android:layout_width="match_parent"
   android:layout_height="match_parent"/>

</android.support.design.widget.CoordinatorLayout>


Once its taken its place in our layout, we can hook it up in code:

class MyIntroActivity: AppCompatActivity() {

 override fun onCreate(savedInstanceState: Bundle?) {
   super.onCreate(savedInstanceState)

   email_view.setSkin(RecoveryEmailSkin())
   email_view.bindTo(context.application.store)
 }

 override fun onDestroy() {
   email_view.unbindFrom(context.application.store)
   super.onDestroy()
 }
}


Recover Password Input

Provides default UI for helping a recover its password. Includes functionality that allows the input of usernames and emails as well as validation against rules that can be setup server-side, such as minimum and maximum username length, regex rules, etc.

In order to add it to an Activity, first we must add it to our Fragment or Activity XML layout.

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
 tools:context=".activities.MyIntroActivity">

 <tv.superawesome.pj.ui.recoverypassword.views.RecoveryPasswordView
   android:id="@+id/recover_view"
   android:layout_width="match_parent"
   android:layout_height="match_parent"/>

</android.support.design.widget.CoordinatorLayout>


Once its taken its place in our layout, we can hook it up in code:

class MyIntroActivity: AppCompatActivity() {

 override fun onCreate(savedInstanceState: Bundle?) {
   super.onCreate(savedInstanceState)

   recover_view.setSkin(RecoveryPasswordSkin())
   recover_view.bindTo(context.application.store)
 }

 override fun onDestroy() {
   recover_view.unbindFrom(context.application.store)
   super.onDestroy()
 }
}

Select an avatar

Provides default UI for selecting or updating an avatar. Includes functionality that displays avatars (or “stickers”) as a 4xN grid that users can select from and update their avatar image.

In order to add it to an Activity, first we must add it to our Fragment or Activity XML layout.

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
 tools:context=".activities.MyIntroActivity">

 <tv.superawesome.pj.ui.selectavatar.view.SelectAvatarView
   android:id="@+id/select_avatar"
   android:layout_width="match_parent"
   android:layout_height="match_parent"/>

</android.support.design.widget.CoordinatorLayout>


Once its taken its place in our layout, we can hook it up in code:

class MyIntroActivity: AppCompatActivity() {

 override fun onCreate(savedInstanceState: Bundle?) {
   super.onCreate(savedInstanceState)

   select_avatar.setSkin(SelectAvatarViewSkin())
   select_avatar.bindTo(context.application.store)
   select_avatar.fetchAvatars()
 }

 override fun onDestroy() {
   select_avatar.unbindFrom(context.application.store)
   super.onDestroy()
 }
}

USER SETTINGS

Provides default UI for customising a user’s profile. Includes functionality that that can link to other screens where a user can update their avatar or cover image, update their bio. Includes out-of-the-box functionality that can link to privacy policy and terms & conditions urls.

In order to add it to an Activity, first we must add it to our Fragment or Activity XML layout.

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
 tools:context=".activities.MyIntroActivity">

 <tv.superawesome.pj.ui.settings.views.SettingsView
   android:id="@+id/settings"
   android:layout_width="match_parent"
   android:layout_height="match_parent"/>

</android.support.design.widget.CoordinatorLayout>


Once its taken its place in our layout, we can hook it up in code:

class MyIntroActivity: AppCompatActivity() {

 override fun onCreate(savedInstanceState: Bundle?) {
   super.onCreate(savedInstanceState)

   settings.setSkin(SettingsSkin())
   settings.bindTo(context.application.store)
   settings.fetchUser() // local fetch for the currently logged in user
 }

 override fun onDestroy() {
   settings.unbindFrom(context.application.store)
   super.onDestroy()
 }
}

Content SDK

Feeds

Provides default UI for displaying feeds of content tiles from users, channel or other content feeds retrieved from the KWS Social API. Includes functionality for liking and sharing content items via the KWS API, and to report content to moderators. Includes support for displaying image and video content within content tiles. Content tiles include author information, in the form of a username and user avatar, and support the presence of a text comment as part of the content.

In order to add a feed to an Activity, first we must add it to our Fragment or Activity XML layout.

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
 tools:context=".activities.MyFeedActivity">

 <tv.superawesome.pj.ui.feed.views.DetailFeedView
   android:id="@+id/home_feed"
   android:layout_width="match_parent"
   android:layout_height="match_parent"/>

</android.support.design.widget.CoordinatorLayout>


Once its taken its place in our layout, we can hook it up in code:

class MyFeedActivity: AppCompatActivity() {

 override fun onCreate(savedInstanceState: Bundle?) {
   super.onCreate(savedInstanceState)

   home_feed.setSkin(DetailFeedViewSkin())
   home_feed.bindTo(context.application.store)
   home_feed.setUser("__channel_or_user_id__", FeedType.HOME)
   home_feed.fetchFeed()
 }

 override fun onDestroy() {
   home_feed.unbindFrom(context.application.store)
   super.onDestroy()
 }
}


FeedItem

Provides default UI for display the details of one feed item. Includes the same functionality for liking and sharing content items via the KWS API and to report content to moderators as the Feed. Includes support for displaying image and video content within content tiles as the Feed. Includes an embedded video player that provides default UI for playback of video content. Includes functionality for play, pause, scrub, replay, and fullscreen.

In order to add a feed to an Activity, first we must add it to our Fragment or Activity XML layout.

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
 tools:context=".activities.MyFeedItemActivity">

 <tv.superawesome.pj.ui.feeditem.views.FeedItemView
   android:id="@+id/feed_item"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"/>

</android.support.design.widget.CoordinatorLayout>

Once its taken its place in our layout, we can hook it up in code:

class MyFeedItemActivity: AppCompatActivity() {

 override fun onCreate(savedInstanceState: Bundle?) {
   super.onCreate(savedInstanceState)

   feed_item.setSkin(FeedItemSkin())
   feed_item.bindTo(context.application.store)
   feed_item.setFeedItemId("__feed_item_id__")
   feed_item.fetchFeedItem()
 }

 override fun onDestroy() {
   feed_item.unbindFrom(context.application.store)
   super.onDestroy()
 }
}

Comments

Provides functionality to like and reply to comments, and to report comments to moderators. Provides support for text, image and “sticker” comments.

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
 tools:context=".activities.MyFeedItemActivity">

 <tv.superawesome.pj.ui.comments.views.CommentView
   android:id="@+id/comments"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"/>

</android.support.design.widget.CoordinatorLayout>

Once its taken its place in our layout, we can hook it up in code:

class MyFeedItemActivity: AppCompatActivity() {

 override fun onCreate(savedInstanceState: Bundle?) {
   super.onCreate(savedInstanceState)

   comments.setSkin(CommentViewSkin()())
   comments.bindTo(context.application.store)
   comments.setFeedItemId("__feed_item_id__")
   comments.fetchComments()
 }

 override fun onDestroy() {
   comments.unbindFrom(context.application.store)
   super.onDestroy()
 }
}


Search Results

Summary: Provides default UI for searching. The Search view can act as input for the Search Results view but it’s not mandatory. The Search Results view provides default UI for displaying search results. Includes functionality to display user, channel and tag results in different tiles. Includes functionality to follow or unfollow a user, channel or tag.

In order to add it to an Activity, first we must add it to our Fragment or Activity XML layout.

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
 tools:context=".activities.MySearchActivity">

 <tv.superawesome.pj.ui.search.view.SearchView
   android:id="@+id/search_box"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"/>

 <tv.superawesome.pj.ui.search.view.SearchResultsView
   android:id="@+id/search_results"
   android:layout_width="match_parent"
   android:layout_height="match_parent"/>

</android.support.design.widget.CoordinatorLayout>

Once its taken its place in our layout, we can hook it up in code:

class MySearchActivity: AppCompatActivity() {

 override fun onCreate(savedInstanceState: Bundle?) {
   super.onCreate(savedInstanceState)

   search_box.setSkin(SearchViewSkin())

   search_results.setSkin(SearchResultsViewSkin())
   search_results.bindTo(context.application.store)
   search_results.search("keyword")
 }

 override fun onDestroy() {
   search_results.unbindFrom(context.application.store)
   super.onDestroy()
 }
}

User Profile

Provides default UI for a user’s profile details. Includes functionality to see the profile (avatar) image, background image, number of followers, following count, etc. Includes functionality to follow or unfollow a user (if it’s not your own user’s profile) or to get followers (if it’s your profile).

In order to add it to an Activity, first we must add it to our Fragment or Activity XML layout.

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
 tools:context=".activities.MyProfileActivity">

 <tv.superawesome.pj.ui.user.views.UserView
   android:id="@+id/user_profile"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"/>

</android.support.design.widget.CoordinatorLayout>

Once its taken its place in our layout, we can hook it up in code:

class MyProfileActivity: AppCompatActivity() {

 override fun onCreate(savedInstanceState: Bundle?) {
   super.onCreate(savedInstanceState)

   user_profile.setSkin(UserSkin())
   user_profile.bindTo(context.application.store)
   user_profile.setUserId("__channel_or_user_id__")
   user_profile.fetchUser()
 }

 override fun onDestroy() {
   user_profile.unbindFrom(context.application.store)
   super.onDestroy()
 }
}

Stickers

Provides default UI for using stickers. Includes functionality to see different sticker packs and the sticker items associated with each sticker pack. Includes functionality that automatically links it with the Comments view and the Creation Tool to add “sticker” as comments drawing elements.

In order to add it to an Activity, first we must add it to our Fragment or Activity XML layout.

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
 tools:context=".activities.MyProfileActivity">

 <tv.superawesome.pj.ui.stickers.views.StickerPackKeyboardView
   android:id="@+id/sticker_keyboard"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"/>

</android.support.design.widget.CoordinatorLayout>

Once its taken its place in our layout, we can hook it up in code:

class MyProfileActivity: AppCompatActivity() {

 override fun onCreate(savedInstanceState: Bundle?) {
   super.onCreate(savedInstanceState)

   sticker_keyboard.setSkin(StickerPackKeyboardSkin())
   sticker_keyboard.bindTo(context.application.store)
   sticker_keyboard.fetchStickers()
 }

 override fun onDestroy() {
   sticker_keyboard.unbindFrom(context.application.store)
   super.onDestroy()
 }
}

Content Input SDK

Provides default UIs for in inputting content, like the Creation Tool, different input boxes (for comments, captions, etc.).

Creation Tool

Provides default UI for the creation tool. Includes functionality to that allows a user to create drawings with different brushes, colours, stickers, photos, etc.

In order to add it to an Activity, first we must add it to our Fragment or Activity XML layout.

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
 tools:context=".activities.MyArtToolActivity">

 <tv.superawesome.sacreationtool.views.CreationToolView
   android:id="@+id/art_tool"
   android:layout_width="match_parent"
   android:layout_height="match_parent"/>

</android.support.design.widget.CoordinatorLayout>

Once its taken its place in our layout, we can hook it up in code:

class MyArtToolActivity: AppCompatActivity() {

 override fun onCreate(savedInstanceState: Bundle?) {
   super.onCreate(savedInstanceState)

   art_tool.setSkin(CreationToolSkin())
   art_tool.setStartingImage("__base64_encoded_bitmap__") // optional
 }
}


Writing a comment

Provides default UI for adding text comments. Includes functionality to that allows a user to add text comments using an input box. Additionally it can allow a redirect to the Creation Tool to enable adding drawing type comments.

In order to add it to an Activity, first we must add it to our Fragment or Activity XML layout.

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
 tools:context=".activities.MyFeedItemActivity">

 <tv.superawesome.pj.ui.input.CommentInput
   android:id="@+id/comment_input"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"/>

</android.support.design.widget.CoordinatorLayout>

Once its taken its place in our layout, we can hook it up in code:

class MyFeedItemActivity: AppCompatActivity() {

 override fun onCreate(savedInstanceState: Bundle?) {
   super.onCreate(savedInstanceState)

   comment_input.setSkin(CommentInputSkin())
   comment_input.setFeedItemId("__feed_item_id__")
   comment_input.bindTo(context.application.store)
 }

 override fun onDestroy() {
   comment_input.unbindFrom(context.application.store)
   super.onDestroy()
 }
}


Adding a caption

Provides default UI adding captions to a creation or a share. Includes functionality to that allows a user to add text comments using an input box. Additionally it can allow a redirect to the Creation Tool to enable adding drawing type comments.

In order to add it to an Activity, first we must add it to our Fragment or Activity XML layout.

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
 tools:context=".activities.MyArtToolActivity">

 <tv.superawesome.pj.ui.input.CaptionInput
   android:id="@+id/caption_input"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"/>

</android.support.design.widget.CoordinatorLayout>

Once its taken its place in our layout, we can hook it up in code:

class MyArtToolActivity: AppCompatActivity() {

 override fun onCreate(savedInstanceState: Bundle?) {
   super.onCreate(savedInstanceState)

   caption_input.setSkin(CaptionInputSkin())
   caption_input.setFeedItemId("__feed_item_id__")
   caption_input.bindTo(context.application.store)
 }

 override fun onDestroy() {
   caption_input.unbindFrom(context.application.store)
   super.onDestroy()
 }
}

Any questions? Get in touch!