Library for creating telegram mini apps with Kotlin Multiplatform and Compose Multiplatform.
-
Create Kotlin Multiplatform app with js target. Check this tutorial for more information.
-
Place script
telegram-web-app.jsin the<head>tag:
<script src="https://telegram.org/js/telegram-web-app.js"></script>
- Add implementation for
jsMaintg-mini-applibrary:
implementation("io.github.kirillNay:tg-mini-app:1.1.0")
- In
mainfuntion ofjsMaincalltelegramWebAppwith providing Composable content:
fun main() {
telegramWebApp { style ->
// Compose content ...
}
}
To get access of Telegram web app instance call webApp. All properties and functions of Telegram WebApp are available in kotlin style.
Showing confirmation dialog before closing app.
webApp.showConfirm("Want to exit?") { result ->
if (result) {
webApp.close()
}
}
Mini apps should be designed to provide smooth user experience so pay attention of themeing of app. Check Telegram's Design Guidelines for more information.
Pay attention to viewport changes. Viewport of mini app can change due to users gestures. On every change new viewport size value will be provided to content composable as a TelegramStyle parameter. Recompose composable functions that should be changed on viewport size modifications.
You can get current viewport height using webApp.viewportHeight. In case you need last stable viewport state you can get it from webApp.viewportStableHeight.
Aldo you can get if current mini app state is expanded using webApp.isExpanded.
telegramWebApp { style ->
val height = remember(style.viewPort.viewPortHeight) {
max(style.viewPort.viewPortHeight, 500.dp)
}
Column(
modifier = Modifier.height(height)
) {
/...
}
}
The colors of the mini-apps should not contrast with the main theme of the application. Create your system design based on colors parameter that is provided to content composable as a TelegramStyle. This parameter will change and cause recomposition if user change app style in settings of telegram app or in using dark theme of his device.
You can observe theme changes in any place of your app using:
var telegramColors by remember { mutableStateOf(YourDefaultColors()) }
webApp.addEventHandler(EventType.THEME_CHANGED) {
telegramColors = webApp.themeParams.toYourAppColors() // Map telegram theme colors to your colors scheme
}
You can get if current theme of app is in dark mode using webApp.colorScheme.
Check GlassOfWater - simple web app created with Kotlin and Compose Multiplatform.