ArtGallery
ArtGallery copied to clipboard
Server Driven UI with Jetpack Compose and Hilt
Server Driven UI with Jetpack Compose 
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
-
Each JSON component must follow the following definition:
-
render
is an enum of RenderType and is the record of each component in the list. -
index
is the component's position in the list and must not be duplicated. -
resource
is a JSON object and therefore can be converted to some data class.
-
-
You must create a model capable of containing all these components, for example
DataContentModel
, here the header and body of our JSON are specified.
Do it!
To create a new UI component you must follow the following steps:
-
In the RenderType class you must register the name of the new component
-
Create a model specific to the
resource
you need to convert -
Add the
@RenderModel
annotation to the model and pass the new render type you created as a parameter -
Create a render factory class that extends
DynamicListFactory
and that will take care of managing the component- The class asks for a list of compatible renders, add the one you created.
- If that component has an onboarding tooltip then add
hasShowCaseConfigured = true
- In the
CreateComponent
function add your composable element - In the
CreateSkeleton
function create a plain copy of your composable element, this is a skeleton! - Do not forget annotate it with
@ComponentFactory
-
On the main screen add the
ContextView
component as follows-
title
is the title of the screen -
viewModel
you must create a ViewModel that extends fromContextViewModel
that contains the screen information -
destinationsNavigator
is a navigation instance-
dynamicListRequestModel
here goes aDynamicListRequestModel
object or viarememberDynamicListRequestState
-
-
Used libraries
- Compose Destinations - Its a great navigation compose library
- Hilt - Dependency injection
- Coil - Image loader for compose
- Lottie - Lottie animations for compose
- Moshi - JSON Serialization/Deserializaton
- DataStore - Modern Android preferences
- Room - Data persistence
- Jetpack Compose - Modern Android UI development