Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/javierpe/artgallery

Server Driven UI with Jetpack Compose and Hilt
https://github.com/javierpe/artgallery

android compose-navigation compose-testing dependency-injection dynamic-views hilt hilt-android jetpack-android jetpack-compose kotlin ksp macrobenchmark sdui server-driven-ui

Last synced: about 8 hours ago
JSON representation

Server Driven UI with Jetpack Compose and Hilt

Host: GitHub
URL: https://github.com/javierpe/artgallery
Owner: javierpe
License: apache-2.0
Created: 2022-03-03T01:43:28.000Z (almost 3 years ago)
Default Branch: main
Last Pushed: 2023-08-09T02:58:31.000Z (over 1 year ago)
Last Synced: 2024-03-23T19:48:41.172Z (11 months ago)
Topics: android, compose-navigation, compose-testing, dependency-injection, dynamic-views, hilt, hilt-android, jetpack-android, jetpack-compose, kotlin, ksp, macrobenchmark, sdui, server-driven-ui
Language: Kotlin
Homepage:
Size: 6.03 MB
Stars: 51
Watchers: 7
Forks: 6
Open Issues: 1
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

         # Server Driven UI with Jetpack Compose   [![version](https://img.shields.io/badge/version-1.1.0-yellow.svg)](https://semver.org)

 

![Artboard](https://user-images.githubusercontent.com/7097754/216787352-2ab8fa54-62de-411c-84d5-765f9c87136f.png)

 ## Features

 - [x] Tooltips

 - [x] Compose navigation by

 - [x] Macrobenchmark test

 - [x] KSP processor

 

 Art Gallery is based on Server Driven UI, only provide a JSON and UI definition.

 > The SDUI allows you send new features and create

 > reusable componentes as possible. 

 ### Definition

1. Each JSON component must follow the following definition:

   1. `render` is an enum of RenderType and is the record of each component in the list.

   2. `index` is the component's position in the list and must not be duplicated.

   3. `resource` is a JSON object and therefore can be converted to some data class.

![Definition](https://user-images.githubusercontent.com/7097754/229964052-a2069a24-b386-42e9-a666-5a0e3a3eb7aa.png)

2. You must create a model capable of containing all these components, for example `DataContentModel`, here the header and body of our JSON are specified.

![Definition](https://user-images.githubusercontent.com/7097754/229964357-668ff6fd-afae-4983-8ac7-7d7db1760454.png)

![DataContentModel](https://user-images.githubusercontent.com/7097754/229964225-e305f830-2530-42ed-8768-133a5af2a5bb.png)

### Do it!

To create a new UI component you must follow the following steps:

1. In the RenderType class you must register the name of the new component

2. Create a model specific to the `resource` you need to convert

3. Add the `@RenderModel` annotation to the model and pass the new render type you created as a parameter

![RenderClass](https://user-images.githubusercontent.com/7097754/236341023-619813d2-4b09-43de-9ed2-3c469de2c66d.png)

4. Create a render factory class that extends `DynamicListFactory` and that will take care of managing the component

   1. The class asks for a list of compatible renders, add the one you created.

   2. If that component has an onboarding tooltip then add `hasShowCaseConfigured = true`

   3. In the `CreateComponent` function add your composable element

   4. In the `CreateSkeleton` function create a plain copy of your composable element, this is a skeleton!

   5. Do not forget annotate it with `@ComponentFactory`

5. On the main screen add the `ContextView` component as follows

   1. `title` is the title of the screen

   2. `viewModel` you must create a ViewModel that extends from `ContextViewModel` that contains the screen information

   3. `destinationsNavigator` is a navigation instance

      1. `dynamicListRequestModel` here goes a `DynamicListRequestModel` object or via `rememberDynamicListRequestState`

![ContextView](https://user-images.githubusercontent.com/7097754/229964545-78096ce6-b286-4bbe-98e7-56a7c8e0aab0.png)

 ## Used libraries

 - [Compose Destinations](https://github.com/raamcosta/compose-destinations) - Its a great navigation compose library

 - [Hilt](https://developer.android.com/training/dependency-injection/hilt-android?hl=es-419) - Dependency injection

 - [Coil](https://coil-kt.github.io/coil/compose/) - Image loader for compose

 - [Lottie](https://github.com/airbnb/lottie/blob/master/android-compose.md) - Lottie animations for compose

 - [Moshi](https://github.com/square/moshi) - JSON Serialization/Deserializaton

 - [DataStore](https://developer.android.com/topic/libraries/architecture/datastore?hl=es-419) - Modern Android preferences

 - [Room](https://developer.android.com/jetpack/androidx/releases/room?gclid=CjwKCAjw6fyXBhBgEiwAhhiZsjAF2biSAQEU8zfC58pfv7u2Z-B6Hbysd4PlQtYZH_KZSvWyMRhd3BoCIV8QAvD_BwE&gclsrc=aw.ds) - Data persistence

 - [Jetpack Compose](https://developer.android.com/jetpack/compose?gclid=CjwKCAjw6fyXBhBgEiwAhhiZshbizxlJ4fvLaIjjt3SZerY3SnmCgygwltc7iBUlIApiwcC7IHmEexoC7PsQAvD_BwE&gclsrc=aw.ds) - Modern Android UI development