Skip to content

ragaa07/Compose_SDUI

Repository files navigation

RemoteCompose

A demonstration of Remote Compose — a server-driven UI framework where the server generates binary Compose UI documents and the Android client dynamically renders them.

Architecture

┌─────────────────┐         HTTP         ┌─────────────────┐
│   Android App   │ ◄──────────────────► │  Ktor Server    │
│                 │    Binary documents   │                 │
│ RemoteCompose   │                      │ RemoteCompose   │
│    Player       │                      │   Creation      │
└─────────────────┘                      └─────────────────┘
  • Server (/server) — Kotlin/Ktor (Netty) server that builds UI documents using the Remote Compose creation API and serves them over HTTP.
  • Client (/app) — Android app that fetches documents via Ktor HTTP client and renders them with RemoteComposePlayer.

Features

Car Marketplace

Browse mock car listings with dealer info, mileage, price, and photos. Supports configurable listing counts (5, 10, 20).

News Feed

Aggregated news from NewsAPI with category filtering and search. Displays featured articles, source attribution, and time-ago formatting.

Tech Stack

Layer Technology
UI Jetpack Compose, Material 3
Arch MVVM, Repository pattern, StateFlow
Network Ktor Client (OkHttp) / Ktor Server (Netty)
Remote UI Remote Compose (core, creation, player) 1.0.0-alpha05
Build Gradle Kotlin DSL, Version Catalog
Language Kotlin 2.0.21

Prerequisites

  • Android Studio (latest stable)
  • JDK 17+
  • Android SDK (Compile SDK 36, Min SDK 29)

Getting Started

1. Start the server

./gradlew :server:run

The server starts on http://localhost:8080.

2. Run the Android app

Run the app on an Android emulator from Android Studio. The app connects to http://10.0.2.2:8080 (emulator's localhost alias).

API Endpoints

Method Endpoint Description
GET /list 10 car listings (default)
GET /list/{count} Car listings with custom count
GET /news?country=us&category=tech Top headlines by category/country
GET /news/search?q=query Search news articles

Build Commands

./gradlew build              # Full build
./gradlew assembleDebug      # Debug APK
./gradlew :server:run        # Start server
./gradlew test               # Unit tests

Project Structure

RemoteCompose/
├── app/                         # Android client
│   └── src/main/java/.../
│       ├── MainActivity.kt      # Single activity entry point
│       ├── ui/
│       │   ├── RemoteListScreen.kt      # Tab UI (Cars/News)
│       │   └── RemoteListViewModel.kt   # State management
│       ├── data/
│       │   ├── RemoteComposeRepository.kt
│       │   └── RemoteComposeService.kt  # Ktor HTTP client
│       └── ui/theme/            # Material 3 theming
├── server/                      # Ktor server
│   └── src/main/kotlin/.../server/
│       ├── Server.kt            # Netty server & routing
│       ├── view/
│       │   ├── CarListView.kt   # Car listing UI builder
│       │   └── NewsView.kt      # News feed UI builder
│       ├── model/               # Data models
│       ├── repository/          # Data sources
│       └── viewmodel/           # Server-side view models
└── gradle/
    └── libs.versions.toml       # Version catalog

License

This project is for demonstration purposes.

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors

Languages