{"id":25006684,"url":"https://github.com/javierpe/artgallery","last_synced_at":"2025-10-15T01:11:39.284Z","repository":{"id":38820168,"uuid":"465529405","full_name":"javierpe/ArtGallery","owner":"javierpe","description":"Server Driven UI with Jetpack Compose and Hilt","archived":false,"fork":false,"pushed_at":"2023-08-09T02:58:31.000Z","size":6325,"stargazers_count":64,"open_issues_count":1,"forks_count":8,"subscribers_count":7,"default_branch":"main","last_synced_at":"2025-04-12T16:00:10.419Z","etag":null,"topics":["android","compose-navigation","compose-testing","dependency-injection","dynamic-views","hilt","hilt-android","jetpack-android","jetpack-compose","kotlin","ksp","macrobenchmark","sdui","server-driven-ui"],"latest_commit_sha":null,"homepage":"","language":"Kotlin","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/javierpe.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-03-03T01:43:28.000Z","updated_at":"2025-02-19T01:08:12.000Z","dependencies_parsed_at":"2025-02-05T01:51:00.052Z","dependency_job_id":"045ce4b8-b0fb-4a6f-b901-b767a2e2f3f7","html_url":"https://github.com/javierpe/ArtGallery","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"purl":"pkg:github/javierpe/ArtGallery","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javierpe%2FArtGallery","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javierpe%2FArtGallery/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javierpe%2FArtGallery/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javierpe%2FArtGallery/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/javierpe","download_url":"https://codeload.github.com/javierpe/ArtGallery/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/javierpe%2FArtGallery/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260679817,"owners_count":23045572,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","compose-navigation","compose-testing","dependency-injection","dynamic-views","hilt","hilt-android","jetpack-android","jetpack-compose","kotlin","ksp","macrobenchmark","sdui","server-driven-ui"],"created_at":"2025-02-05T01:50:41.796Z","updated_at":"2025-10-15T01:11:34.247Z","avatar_url":"https://github.com/javierpe.png","language":"Kotlin","funding_links":[],"categories":[],"sub_categories":[],"readme":" # Server Driven UI with Jetpack Compose   [![version](https://img.shields.io/badge/version-1.1.0-yellow.svg)](https://semver.org)\n \n![Artboard](https://user-images.githubusercontent.com/7097754/216787352-2ab8fa54-62de-411c-84d5-765f9c87136f.png)\n\n ## Features\n\n - [x] Tooltips\n - [x] Compose navigation by\n - [x] Macrobenchmark test\n - [x] KSP processor\n \n Art Gallery is based on Server Driven UI, only provide a JSON and UI definition.\n\n \u003e The SDUI allows you send new features and create\n \u003e reusable componentes as possible. \n\n ### Definition\n\n1. Each JSON component must follow the following definition:\n   1. `render` is an enum of RenderType and is the record of each component in the list.\n   2. `index` is the component's position in the list and must not be duplicated.\n   3. `resource` is a JSON object and therefore can be converted to some data class.\n![Definition](https://user-images.githubusercontent.com/7097754/229964052-a2069a24-b386-42e9-a666-5a0e3a3eb7aa.png)\n\n2. You must create a model capable of containing all these components, for example `DataContentModel`, here the header and body of our JSON are specified.\n![Definition](https://user-images.githubusercontent.com/7097754/229964357-668ff6fd-afae-4983-8ac7-7d7db1760454.png)\n![DataContentModel](https://user-images.githubusercontent.com/7097754/229964225-e305f830-2530-42ed-8768-133a5af2a5bb.png)\n\n### Do it!\n\nTo create a new UI component you must follow the following steps:\n\n1. In the RenderType class you must register the name of the new component\n2. Create a model specific to the `resource` you need to convert\n3. Add the `@RenderModel` annotation to the model and pass the new render type you created as a parameter\n![RenderClass](https://user-images.githubusercontent.com/7097754/236341023-619813d2-4b09-43de-9ed2-3c469de2c66d.png)\n\n4. Create a render factory class that extends `DynamicListFactory` and that will take care of managing the component\n   1. The class asks for a list of compatible renders, add the one you created.\n   2. If that component has an onboarding tooltip then add `hasShowCaseConfigured = true`\n   3. In the `CreateComponent` function add your composable element\n   4. In the `CreateSkeleton` function create a plain copy of your composable element, this is a skeleton!\n   5. Do not forget annotate it with `@ComponentFactory`\n\n5. On the main screen add the `ContextView` component as follows\n   1. `title` is the title of the screen\n   2. `viewModel` you must create a ViewModel that extends from `ContextViewModel` that contains the screen information\n   3. `destinationsNavigator` is a navigation instance\n      1. `dynamicListRequestModel` here goes a `DynamicListRequestModel` object or via `rememberDynamicListRequestState`\n![ContextView](https://user-images.githubusercontent.com/7097754/229964545-78096ce6-b286-4bbe-98e7-56a7c8e0aab0.png)\n\n ## Used libraries\n\n - [Compose Destinations](https://github.com/raamcosta/compose-destinations) - Its a great navigation compose library\n - [Hilt](https://developer.android.com/training/dependency-injection/hilt-android?hl=es-419) - Dependency injection\n - [Coil](https://coil-kt.github.io/coil/compose/) - Image loader for compose\n - [Lottie](https://github.com/airbnb/lottie/blob/master/android-compose.md) - Lottie animations for compose\n - [Moshi](https://github.com/square/moshi) - JSON Serialization/Deserializaton\n - [DataStore](https://developer.android.com/topic/libraries/architecture/datastore?hl=es-419) - Modern Android preferences\n - [Room](https://developer.android.com/jetpack/androidx/releases/room?gclid=CjwKCAjw6fyXBhBgEiwAhhiZsjAF2biSAQEU8zfC58pfv7u2Z-B6Hbysd4PlQtYZH_KZSvWyMRhd3BoCIV8QAvD_BwE\u0026gclsrc=aw.ds) - Data persistence\n - [Jetpack Compose](https://developer.android.com/jetpack/compose?gclid=CjwKCAjw6fyXBhBgEiwAhhiZshbizxlJ4fvLaIjjt3SZerY3SnmCgygwltc7iBUlIApiwcC7IHmEexoC7PsQAvD_BwE\u0026gclsrc=aw.ds) - Modern Android UI development\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjavierpe%2Fartgallery","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjavierpe%2Fartgallery","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjavierpe%2Fartgallery/lists"}