Kotlin Multiplatform Mobile App Template

Related tags

Kotlin android kotlin swift ios cross-platform kotlin-native kotlin-multiplatform
Overview

KMMT : Kotlin Multiplatform Mobile Template

Kotlin Multiplatform Mobile Development Simplified

Kotlin License: MIT Platform

KMMT is a KMM based project template designed to simplify the KMM development. It uses a simplified approach that can be shared both in android and iOS easily.

Primary objective of this project is to help KMM Developers & promote KMM technology

image

Credits : KaMP Kit

Android.mp4
iOS.mp4
IDE Requirements

IntelliJ/Android Studio - Android & Shared Module

Xcode - iOS Project

✨ Features ✨

1. Simple Networking API ( Ktor )

Create API Services using BaseAPI class. All network responses are wrapped in Either data type

class JsonPlaceHolderServiceAPI : BaseAPI() {

    override val baseUrl: String
        get() = "https://jsonplaceholder.typicode.com/"

    suspend fun getPosts(postId: Int): Either<List<PostModel>, NetworkFailure> {
        return doGet {
            apiPath("comments?postId=$postId")
        }
    }

    suspend fun setPost(post: PostModel): Either<PostModel, NetworkFailure> {
        return doPost(post) {
            apiPath("comments")
        }
    }
}
class BreedServiceAPI : BaseAPI() {
    override val baseUrl: String
        get() = "https://dog.ceo/"

    suspend fun getBreeds(): Either<List<TBreed>, NetworkFailure> {
        return doGet<BreedResult> {
            apiPath("api/breeds/list/all")
        }.flatMap { breedResult ->
            //Converting BreedResult to List<TBreed>
            Either.Success(
                breedResult.message.keys
                    .sorted().toList()
                    .map { TBreed(0L, name = it.toWordCaps(), false) }
            )
        }
    }
}

2. Async Task Helper ( Kotlinx.Coroutines )

Run code (Networking calls, Heavy calculations, Large dataSets from local DB, etc..) in Background thread and get the result in UI thread.

runOnBackground {
    //Code to execute in background
}

Return value from background

runOnBackgroundWithResult {
    //Code to execute in background with return
}.resultOnUI { result ->

}

or

runOnBackgroundWithResult {
    //Code to execute in background with return
}.resultOnBackground { result ->

}
class PostViewModel(view: LoginView) : BaseViewModel<LoginView>(view) {

    fun getPostsFromAPI() {

        runOnBackgroundWithResult {
            JsonPlaceHolderServiceAPI().getPosts(1)    //getPost returns data so return statement is not needed
            //or 
            // return@runOnBackgroundWithResult JsonPlaceHolderServiceAPI().getPosts(1)
        }.resultOnUI {
            getView()?.showPopUpMessage(
                "First Post Details",
                "Username : ${it.first().name}\n email : ${it.first().email}"
            )
        }
    }

    fun savePost() {

        val post = PostModel("Post Body", "[email protected]", 100, "Jitty", 6)

        runOnBackgroundWithResult {
            JsonPlaceHolderServiceAPI().setPost(post)
        }.resultOnUI {
            getView()?.showPopUpMessage("Saved Post Details", "Name : ${it.name}\n email : ${it.email}")
        }
    }
}

3. Multiplatform Bundle : Object Passing B/W Activities or ViewControllers

View Model can pass objects & values from Activity to Activity (Android) or ViewController to ViewController (iOS)

Send Values From 1st View Model
   // 1st View Model 

var userModel = UserModel("[email protected]", "Jitty", "Andiyan")

var bundle = Bundle {
    putStringExtra(HomeViewModel.USER_NAME, username.toString())
    putSerializableExtra(HomeViewModel.USER_OBJECT, userModel, UserModel.serializer())
}

getView()?.navigateToHomePage(bundle)


// 1st View 

fun navigateToHomePage(bundle: BundleX)


// 1st Activity : Android

override fun navigateToHomePage(bundle: BundleX) {
    openActivity(HomeActivity::class.java, bundle)
    finish()
}

// 1st ViewContoller : iOS

func navigateToHomePage (bundle: BundleX) {
    openViewController(newViewControllerName: "HomeViewController", bundle: bundle)
}
Retrieve Values From 2nd View Model
   // 2nd View Model 

class HomeViewModel(view: HomeView) : BaseViewModel<HomeView>(view) {

    companion object BundleKeys {
        const val USER_NAME = "USERNAME"
        const val USER_OBJECT = "USEROBJ"
    }

    override fun onStartViewModel() {

        getBundleValue<String>(USER_NAME)?.let { username ->

        }
        getBundleValue<UserModel>(USER_OBJECT)?.let { userModel ->

        }
    }
}

4. Platform Blocks

Execute anything specific to a particular platform using Platform Blocks

runOnAndroid {

}

runOniOS {

}

5. Object Serialization Helper ( Kotlinx.Serialization )

Use toJsonString and toObject functions for instant serialization.

Objects to String Serialization

        var userModel = UserModel("[email protected]", "Jitty", "Andiyan")
        
        var jsonString = userModel.toJsonString(UserModel.serializer())

String to Object Serialization

        var userModel = jsonString.toObject<UserModel>()
        
        or
        
        var userModel:UserModel = jsonString.toObject()
        
        or
        
        var userModel = jsonString.toObject(UserModel.serializer())

6. Key Value Store ( Multiplatform Settings )

Use storeValue and getStoreValue functions for storing and retrieving Key-Value respectively

Storing Key-Value pair

        var userModel = UserModel("[email protected]", "Jitty", "Andiyan")
        
        storeValue { 
            putString("Key1","Value")
            putBoolean("Key2",false)
            putSerializable("Key3",userModel,UserModel.serializer())
        }

Retrieve Value using Key

        var stringValue = getStoreValue<String>("Key1")
        
        or
        
        var stringValue:String? = getStoreValue("Key1")
        
        var boolValue = getStoreValue<Boolean>("Key2")
        
        var userModel = getStoreValue<UserModel>("Key3",UserModel.serializer())

7. LiveData & LiveDataObservable ( LiveData )

LiveData follows the observer pattern. LiveData notifies Observer objects when underlying data changes. You can consolidate your code to update the UI in these Observer objects. That way, you don't need to update the UI every time the app data changes because the observer does it for you.

        //Sources
        var premiumManager = PremiumManager()
        var premiumManagerBoolean = PremiumManagerBoolean()

        //Create Observer & Observe
        var subscriptionLiveDataObservable = observe<String> {
           getView()?.setSubscriptionLabel(it)
        }
        
        //Adding Sources
        subscriptionLiveDataObservable.addSource(premiumManager.premium())

        or
        
        //Adding Sources with converter (Boolean to String)
        subscriptionLiveDataObservable.addSource(premiumManagerBoolean.isPremium()){
            if (it)
            {
                return@addSource "Premium"
            }else{
                return@addSource "Free"
            }

        }

        //Update source states
        premiumManager.becomePremium()

        premiumManagerBoolean.becomeFree()

        premiumManager.becomeFree()

        premiumManagerBoolean.becomePremium()


class PremiumManager {
    private val premium = MutableLiveDataX<String>()
    fun premium(): LiveDataX<String> {
        return premium
    }

    fun becomePremium() {
        premium.value = "premium"
    }

    fun becomeFree() {
        premium.value = "free"
    }

}

class PremiumManagerBoolean {
    private val premium = MutableLiveDataX<Boolean>()
    fun isPremium(): LiveDataX<Boolean> {
        return premium
    }

    fun becomePremium() {
        premium.value = true
    }

    fun becomeFree() {
        premium.value = false
    }

}

8. Observe with DBHelper ( Local Database : SQLite - SQLDelight )

Use 'asFlow()' extension from DBHelper class to observe a query data

class BreedTableHelper : DBHelper() {

    fun getAllBreeds(): Flow<List<TBreed>> =
        localDB.tBreedQueries
            .selectAll()
            .asFlow()
            .mapToList()
            .flowOn(Dispatchers_Default)


    suspend fun insertBreeds(breeds: List<TBreed>) {
        ...
    }

    fun selectById(id: Long): Flow<List<TBreed>> =
        localDB.tBreedQueries
            .selectById(id)
            .asFlow()
            .mapToList()
            .flowOn(Dispatchers_Default)

    suspend fun deleteAll() {
        ...
    }

    suspend fun updateFavorite(breedId: Long, favorite: Boolean) {
        localDB.transactionWithContext(Dispatchers_Default) {
            localDB.tBreedQueries.updateFavorite(favorite, breedId)
        }
    }

}
class BreedViewModel(view: BreedView) : BaseViewModel<BreedView>(view) {

    private lateinit var breedTableHelper: BreedTableHelper
    private lateinit var breedLiveDataObservable: LiveDataObservable<Either<List<TBreed>, Failure>>
    private lateinit var breedListCache: BreedListCache

    override fun onStartViewModel() {

        breedTableHelper = BreedTableHelper()
        breedListCache = BreedListCache(getBackgroundCoroutineScope())

        breedLiveDataObservable = observe { breedList ->
            breedList.either({
                getView()?.showPopUpMessage(it.message)
                getView()?.stopRefreshing()
            }, {
                getView()?.refreshBreedList(it)
                getView()?.stopRefreshing()
            })

        }

        refreshBreedListCache(forceRefresh = false)

        observeBreedsTable()

    }

    private fun observeBreedsTable() {
        //get Data from db with observe (Flow)
        runOnBackground {
            //Each refreshBreedListCache will trigger collect 
            breedTableHelper.getAllBreeds().collect {
                breedLiveDataObservable.setValue(Either.Success(it))
            }
        }
    }

    private fun refreshBreedListCache(forceRefresh: Boolean) {
        breedListCache.cacheData(Unit, forceRefresh)
        { cachedResult ->
            cachedResult.either({
                breedLiveDataObservable.setValue(Either.Failure(it))
            }, {
                println("Cache Table updated : $it")
            })
        }
    }
}

9. Useful Functional Programming

use Either data type to represent a value of one of two possible types (a disjoint union). Instances of Either are either an instance of Failure or Success

 Either<SuccessType, FailureType>

convert or map SuccessType using flatMap or map

var result = doGet<List<UserModel>> {
    apiPath("jittya/jsonserver/users?username=${credentails.username}&password=${credentails.password}")
}

return result.flatMap {
    // convert List to Boolean
    Either.Success(it.any { it.username == credentails.username && it.password == credentails.password })
}

use either blocks( either or eitherAsync [for suspended method support] ) to define failure & success functionalities

 authenticatedResult.either({
    //Failure
    getView()?.showPopUpMessage(it.message)

}, { isAuthenticated ->
    //Success
    if (isAuthenticated) {

        var userModel = UserModel("[email protected]", "Jitty", "Andiyan")

        var bundle = Bundle {
            putStringExtra(HomeViewModel.USER_NAME, username.toString())
            putSerializableExtra(HomeViewModel.USER_OBJECT, userModel, UserModel.serializer())
        }

        getView()?.navigateToHomePage(bundle)
    } else {
        getView()?.showPopUpMessage("Login Failed")
    }
})

10. Data Cache Helper

Use BaseDataCache<RequestParamType, DataType> to implement data caching (remote to local). call cacheData function to get and save data

class BreedListCache(backgroundCoroutineScope: CoroutineScope) :
    BaseDataCache<Unit, List<TBreed>>(backgroundCoroutineScope, "BREED_SYNC_TIME") {
    
    override suspend fun getData(param: Unit): Either<List<TBreed>, Failure> {
        //get data from remote (using api)
        return BreedServiceAPI().getBreeds()
    }

    override suspend fun saveData(data: List<TBreed>): Either<Boolean, Failure> {
        //save remote data in Local database
        return try {
            BreedTableHelper().insertBreeds(data)
            Either.Success(true)
        } catch (e: Exception) {
            Either.Failure(DataBaseFailure(e))
        }
    }
}
var breedListCache = BreedListCache(getBackgroundCoroutineScope())

private fun refreshBreedListCache(forceRefresh: Boolean) {
    
//    breedListCache.cacheData(Unit, forceRefresh)
//                or
    breedListCache.cacheData(Unit, forceRefresh)
    { cachedResult ->
        cachedResult.either({ failure ->
            println("Cache failed : $failure")
        }, { success ->
            println("Cache updated : $success")
        })
    }
}

How to use

Shared Module (Business Logics & UI Binding Methods) :

Step 1 : Define View
  • Create a View interface by extending from BaseView.
  • Define UI binding functions in View interface.
interface LoginView : BaseView {

    fun setLoginPageLabel(msg: String)
    fun setUsernameLabel(usernameLabel: String)
    fun setPasswordLabel(passwordLabel: String)
    fun setLoginButtonLabel(loginLabel: String)

    fun getEnteredUsername(): String
    fun getEnteredPassword(): String

    fun setLoginButtonClickAction(onLoginClick: KFunction0<Unit>)

    fun navigateToHomePage(bundle: BundleX)
}
Step 2 : Define ViewModel
  • Create a ViewModel class by extending from BaseViewModel with View as Type.
  • Define your business logic in ViewModel class.
class LoginViewModel(view: LoginView) : BaseViewModel<LoginView>(view) {
    override fun onStartViewModel() {
        getView()?.setLoginPageLabel("Login : ${Platform().platform}")
        getView()?.setUsernameLabel("Enter Username")
        getView()?.setPasswordLabel("Enter Password")
        getView()?.setLoginButtonLabel("Login")
        getView()?.setLoginButtonClickAction(this::onLoginButtonClick)
    }

    fun onLoginButtonClick() {
        getView()?.showLoading("authenticating...")
        val username = getView()?.getEnteredUsername()
        val password = getView()?.getEnteredPassword()
        checkValidation(username, password)
    }

    fun checkValidation(username: String?, password: String?) {
        if (username.isNullOrBlank().not() && password.isNullOrBlank().not()) {
            val credentials = CredentialsModel(username.toString(), password.toString())

            runOnBackgroundWithResult {
                JsonPlaceHolderServiceAPI().authenticate(credentials)
            }.resultOnUI { authenticatedResult ->
                getView()?.dismissLoading()
                authenticatedResult.either({
                    getView()?.showPopUpMessage(it.message)
                }, { isAuthenticated ->
                    if (isAuthenticated) {
                        var bundle = Bundle {
                            putStringExtra(HomeViewModel.USER_NAME, username.toString())
                        }
                        getView()?.navigateToHomePage(bundle)
                    } else {
                        getView()?.showPopUpMessage(
                            "Login Failed"
                        )
                    }
                })

            }
        } else {
            getView()?.showPopUpMessage("Validation Failed", "Username or Password is empty")
        }
    }
}

Android Module UI Binding :

Step 3 : Define Android View
  • Create new activity by extending from KMMActivity with ViewModel as Type.
  • Implement created View interface in activity.
  • Implement all necessary methods from View & KMMActivity.

Implement LoginView & Bind UI Controls

class LoginActivity : KMMActivity<LoginViewModel, ActivityMainBinding>(), LoginView {

    //Generated Methods from KMMActivity based on LoginViewModel
    override fun initializeViewModel(): LoginViewModel {
        return LoginViewModel(this)
    }

    override fun viewBindingInflate(): ActivityMainBinding {
        return ActivityMainBinding.inflate(layoutInflater)
    }

    //Generated Methods from LoginView
    override fun setLoginPageLabel(msg: String) {
        binding.textView.text = msg
    }

    override fun setUsernameLabel(usernameLabel: String) {
        binding.usernameET.hint = usernameLabel
    }

    override fun setPasswordLabel(passwordLabel: String) {
        binding.passwordET.hint = passwordLabel
    }

    override fun getEnteredUsername(): String {
        return binding.usernameET.text.toString()
    }

    override fun getEnteredPassword(): String {
        return binding.passwordET.text.toString()
    }

    override fun setLoginButtonClickAction(onLoginClick: KFunction0<Unit>) {
        binding.loginBtn.setClickAction(onLoginClick)
    }

    override fun setLoginButtonLabel(loginLabel: String) {
        binding.loginBtn.text = loginLabel
    }

    override fun navigateToHomePage(bundle: BundleX) {
        openActivity(HomeActivity::class.java, bundle)
        finish()
    }
}

iOS Module UI Binding (Xcode) :

Step 4 : Define iOS View
  • Create new viewcontroller by extending from KMMUIViewController.
  • Implement created View interface in viewcontroller.
  • Implement all necessary methods from View & KMMUIViewController.

Implement LoginView & Bind UI Controls

class LoginViewController : KMMUIViewController, LoginView {

    @IBOutlet weak
    var usernameTF: UITextFieldX!
    @IBOutlet weak
    var passwordTF: UITextFieldX!
    @IBOutlet weak
    var textlabel: UILabel!
    @IBOutlet weak
    var loginBtn: UIButton!

    override func viewDidLoad()
    {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }

    //Generated Methods from LoginView
    func setLoginPageLabel(msg: String)
    {
        textlabel.text = msg
    }

    func setUsernameLabel(usernameLabel: String)
    {
        usernameTF.placeholder = usernameLabel
    }

    func setPasswordLabel(passwordLabel: String)
    {
        passwordTF.placeholder = passwordLabel
    }

    func getEnteredUsername() -> String
    {
        usernameTF.errorMessage = ""
        return usernameTF.text ?? ""
    }

    func getEnteredPassword() -> String
    {
        return passwordTF.text ?? ""
    }

    func setLoginButtonClickAction(onLoginClick: @escaping() -> KotlinUnit)
    {
        loginBtn.setClickAction(action: onLoginClick)
    }

    func setLoginButtonLabel(loginLabel: String)
    {
        loginBtn.setTitle(loginLabel, for: UIControl.State.normal)
    }

    //Generated Methods from KMMUIViewController
    override func initializeViewModel() -> BaseViewModel<BaseView>
    {
        return LoginViewModel(view: self).getViewModel()
    }

    func navigateToHomePage(bundle: BundleX)
    {
        openViewController(newViewControllerName: "HomeViewController", bundle: bundle)
    }
}
Subscribe for upcoming details and features...

Views

You might also like...
MangaKu App Powered by Kotlin Multiplatform Mobile, Jetpack Compose, and SwiftUI
MangaKu App Powered by Kotlin Multiplatform Mobile, Jetpack Compose, and SwiftUI

MangaKu 🤖 Introduction MangaKu App Powered by Kotlin Multiplatform Mobile, Jetpack Compose, and SwiftUI Module core: data and domain layer iosApp: io

Uwais Alqadri 132 Jan 8, 2023
Opinionated Redux-like implementation backed by Kotlin Coroutines and Kotlin Multiplatform Mobile

CoRed CoRed is Redux-like implementation that maintains the benefits of Redux's core idea without the boilerplate. No more action types, action creato

Kittinun Vantasin 28 Dec 10, 2022
Gradle plugin for simplify Kotlin Multiplatform mobile configurations
Gradle plugin for simplify Kotlin Multiplatform mobile configurations

Mobile Multiplatform gradle plugin This is a Gradle plugin for simple setup of Kotlin Multiplatform mobile Gradle modules. Setup buildSrc/build.gradle

IceRock Development 78 Sep 27, 2022
KaMP Kit by Touchlab is a collection of code and tools designed to get your mobile team started quickly with Kotlin Multiplatform.
KaMP Kit by Touchlab is a collection of code and tools designed to get your mobile team started quickly with Kotlin Multiplatform.

KaMP Kit Welcome to the KaMP Kit! About Goal The goal of the KaMP Kit is to facilitate your evaluation of Kotlin Multiplatform (aka KMP). It is a coll

Touchlab 1.7k Jan 3, 2023
Playground for learning Kotlin Multiplatform Mobile
Playground for learning Kotlin Multiplatform Mobile

This is a playground for learning KMP (KMM Plugin for android studio). Requirements Android Studio Canary 8 Architecture Thanks https://twitter.com/jo

Mitch Tabian 111 Dec 27, 2022
Ethereum Web3 implementation for mobile (android & ios) Kotlin Multiplatform development

Mobile Kotlin web3 This is a Kotlin MultiPlatform library that ... Table of Contents Features Requirements Installation Usage Samples Set Up Locally C

IceRock Development 32 Aug 26, 2022
A sample project that helps to start building a Mobile Kotlin Multiplatform application
A sample project that helps to start building a Mobile Kotlin Multiplatform application

Mobile Kotlin multiplatform project template A sample project that helps to start building a Mobile Kotlin Multiplatform application. It establishes a

Dizel 0 Oct 16, 2021
Location Service Manager for Kotlin Multiplatform Mobile iOS and android
Location Service Manager for Kotlin Multiplatform Mobile iOS and android

Location Service Manager for Kotlin Multiplatform Mobile iOS and android Features Provides simple permission settings Dramatically reduce the amount o

LINE 55 Dec 10, 2022
A local storage management library for Kotlin Multiplatform Mobile iOS and android
A local storage management library for Kotlin Multiplatform Mobile iOS and android

A local storage management library for Kotlin Multiplatform Mobile iOS and android Features iOS and Android local storage in one interface Provides ge

LINE 20 Oct 30, 2022
Owner
Jitty Andiyan
Kotlin Multiplatform Mobile App Developer. Looking for challenging opportunities.
Jitty Andiyan
GitHub
KMM RSS Reader: an open-source, mobile, cross-platform application built with Kotlin Multiplatform Mobile.

KMM RSS Reader This is an open-source, mobile, cross-platform application built with Kotlin Multiplatform Mobile. It's a simple RSS reader, and you ca

Kotlin 1.4k Jan 4, 2023
Arrow-Maven-Template - A template project for Arrow with Maven. It defines an application and a couple small examples

Arrow-Maven-Template A template project for Arrow on Maven. See the official doc

ΛRROW 0 Jan 11, 2022
Kotlin multiplatform library template.

template-kmp-library Kotlin multiplatform library template. Has a baseline setup for a multiplatform library supporting all kotlin targets except andr

Martynas Petuška 51 Nov 21, 2022
A Kotlin Multiplatform and Compose template that allows you to easily set up your project targeting: Android, Desktop, and Web

A Kotlin Multiplatform and Compose template that allows you to easily set up your project targeting: Android, Desktop, and Web

Carlos Mota 3 Oct 27, 2021
Kotlin multiplatform library template

template-kmp-library Kotlin multiplatform library template. Has a baseline setup for a multiplatform library supporting all kotlin targets except depr

Jamie Astley 0 Dec 6, 2021
This is a Kotlin multiplatform template project used to generate and deploy a natively compiled AWS lambda function using the custom runtime.

Overview This is a Kotlin multiplatform template project used to generate and deploy a natively compiled AWS Lambda function using a custom runtime. U

Greg Steckman 5 Jun 25, 2022
An app architecture for Kotlin/Native on Android/iOS. Use Kotlin Multiplatform Mobile.

An app architecture for Kotlin/Native on Android/iOS. Use Kotlin Multiplatform Mobile. 项目架构主要分为原生系统层、Android/iOS业务SDK层、KMM SDK层、KMM业务逻辑SDK层、iOS sdkfra

libill 4 Nov 20, 2022
Crunch-Mobile - A Food Delivery Mobile App which uses Modern App Architecture Pattern, Firebase And a Simple Restful Api

Crunch-Mobile This is a Food Delivery Mobile App which uses Modern App Architect

Bright Ugwu 1 Jan 1, 2022
Mobile client for official Nextcloud News App written as Kotlin Multiplatform Project

Newsout Android and iOS mobile client for Nextcloud news App. The Android client is already available to download in the Play Store. F-Droid and Apple

Simon Schubert 118 Oct 3, 2022
Kotlin Multiplatform Mobile demo for Android and iOS - app for viewing Cat pictures

CatViewerDemo Android demo iOS demo Kotlin Multiplatform Mobile demo for Android and iOS. App for viewing Cat pictures from Cats API. This sample show

Martin Rajniak 111 Dec 18, 2022