Skip to content

Felix-Kariuki/SDUI-Compose

Repository files navigation

SDUI - Compose

Server-Driven UI is an architectural pattern designed to minimize client-side logic and ensure consistency across multiple platforms (web, iOS, Android, etc.). Instead of returning raw domain data, the API delivers layout information, allowing the UI to be dynamically consumed and reducing the need for platform-specific code.

This is a sample project created to show case the SDUI approach on android apps using jetpack compose.

Resources

  1. Design Server-Driven UI with Jetpack Compose and Firebase

  2. How to Build Server Driven UI w/ Firebase + Jetpack Compose

Tech stack & Libraries 🛠️👨‍💻

  • Kotlin - Kotlin is a cross-platform, statically typed, general-purpose programming language with type inference. Kotlin is designed to interoperate fully with Java, and the JVM version of Kotlin's standard library depends on the Java Class Library, but type inference allows its syntax to be more concise
  • Jetpack Components:

    • Jetpack Compose - Android’s modern toolkit for building native UI. It simplifies and accelerates UI development on Android
    • View Model- store and manage UI-related data in a lifecycle conscious way.
    • Lifecycle - Perform actions in response to a change in the lifecycle status of another component, such as activities and fragments.
    • Android KTX - Android KTX is a set of Kotlin extensions that are included with Android Jetpack and other Android libraries. KTX extensions provide concise, idiomatic Kotlin to Jetpack, Android platform, and other APIs.
    • AndroidX - Major improvement to the original Android Support Library, which is no longer maintained.
  • Dagger-Hilt- a dependency injection library for Android that reduces the boilerplate of doing manual dependency injection in your project

  • Coroutines - a concurrency design pattern that you can use on Android to simplify code that executes asynchronously

  • Flow- In coroutines, a flow is a type that can emit multiple values sequentially, as opposed to suspend functions that return only a single value.

  • CI/CD - Continuous integration systems let you automatically build and test your app every time you check in updates to your source control system.

  • Firebase Android KTX: Kotlin & Compose-friendly Firebase extensions designed to help you focus on your business logic.

  • ksp Kotlin Symbol Processing API for code generation and analysis.

  • Coil - Image Loader library.

  • Compose Navigation

  • Lottie Animation - A Lottie is a JSON-based animation file format that allows you to ship animations on any platform as easily as shipping static assets.

Project Set Up

To set up this project...

  1. Set up firebase and add the google-services.json to the app directory of the project.
  2. Copy this json to your machine and save it with .json extension e.g (games.json)
    {
    "gamesCompose": {
     "games": {
       "list": {
         "itemSize": {
           "height": 200,
           "width": 0
         },
         "items": [
           {
             "developer": "Level Infinite",
             "freetogame_profile_url": "https://www.freetogame.com/tarisland",
             "game_url": "https://www.freetogame.com/open/tarisland",
             "genre": "MMORPG",
             "platform": "PC (Windows)",
             "publisher": "Tencent",
             "release_date": "2024-06-22",
             "scaleType": "crop",
             "short_description": "A cross-platform MMORPG developed by Level Infinite and Published by Tencent.",
             "title": "Tarisland",
             "url": "https://www.freetogame.com/g/582/thumbnail.jpg"
           },
           {
             "developer": "Blizzard Entertainment",
             "freetogame_profile_url": "https://www.freetogame.com/overwatch-2",
             "game_url": "https://www.freetogame.com/open/overwatch-2",
             "genre": "Shooter",
             "platform": "PC (Windows)",
             "publisher": "Activision Blizzard",
             "release_date": "2022-10-04",
             "scaleType": "crop",
             "short_description": "A hero-focused first-person team shooter from Blizzard Entertainment.",
             "title": "Overwatch 2",
             "url": "https://www.freetogame.com/g/540/thumbnail.jpg"
           },
           {
             "developer": "KRAFTON, Inc.",
             "freetogame_profile_url": "https://www.freetogame.com/pubg",
             "game_url": "https://www.freetogame.com/open/pubg",
             "genre": "Shooter",
             "platform": "PC (Windows)",
             "publisher": "KRAFTON, Inc.",
             "release_date": "2022-01-12",
             "scaleType": "crop",
             "short_description": "Get into the action in one of the longest running battle royale games PUBG Battlegrounds.",
             "title": "PUBG: BATTLEGROUNDS",
             "url": "https://www.freetogame.com/g/516/thumbnail.jpg"
           },
           {
             "developer": "InnoGames",
             "freetogame_profile_url": "https://www.freetogame.com/forge-of-empires",
             "game_url": "https://www.freetogame.com/open/forge-of-empires",
             "genre": "Strategy",
             "platform": "Web Browser",
             "publisher": "InnoGames",
             "release_date": "2012-04-17",
             "scaleType": "crop",
             "short_description": "A free to play 2D browser-based online strategy game, become the leader and raise your city.",
             "title": "Forge of Empires",
             "url": "https://www.freetogame.com/g/345/thumbnail.jpg"
           },
           {
             "developer": "Mediatonic",
             "freetogame_profile_url": "https://www.freetogame.com/fall-guys",
             "game_url": "https://www.freetogame.com/open/fall-guys",
             "genre": "Battle Royale",
             "platform": "PC (Windows)",
             "publisher": "Mediatonic",
             "release_date": "2020-08-04",
             "scaleType": "crop",
             "short_description": "Play the most competitive massively multiplayer party royale game featuring beans ever for free on a variety of platforms. ",
             "title": "Genshin Impact",
             "url": "https://www.freetogame.com/g/523/thumbnail.jpg"
           }
         ],
         "layout": "column",
         "testStyles": {
           "heightImage": 200,
           "subTitleFontWeight": "medium",
           "subTitleSize": 15,
           "titleFontWeight": "bold",
           "titleSize": 17,
           "widthImage": 0
         }
       },
       "order": 2,
       "title": {
         "fontWeight": "bold",
         "size": 28,
         "text": "Free To Game"
       }
     },
     "version": 1
    }
    }
  1. Set up Firebase realtime Databsee and once done import the json as demonstrated:Screenshot 2024-09-24 at 01 50 39
  2. Copy the realtime Database Url to and add it to your local.properties as:
REALTIME_DATABASE_URL=URL_HERE

Screenshot 2024-09-24 at 01 51 06

Screnshots

Demo

Screen.Recording.2024-09-24.at.02.mp4

Author

Felix Kariuki

Buy Me A Coffee

Do Reach Out :

License and Copyright

MIT License

Copyright (c) 2024 Felix Kariuki

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

About

A server driven Ui jetpack compose android sample

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages