¡Hola, cibernauta! En el día de hoy hablaremos sobre Compose multiplatform y cómo esta herramienta, desarrollada por JetBrains y basada en Kotlin multiplatform, nos permite crear aplicaciones con interfaces de usuario compartidas para Android, iOS, web y escritorio, a la vez que nos ahorra tiempo y esfuerzo al no tener que escribir la UI en cada plataforma.

¿Qué encontrarás en este post?

¿Qué es compose multiplatform?

Compose multiplatform es un marco de trabajo declarativo que hace posible que los desarrolladores escriban una interfaz de usuario en su aplicación una sola vez y puedan ejecutarla en múltiples plataformas, como lo son Android, iOS, la web y los sistemas de escritorio entre los que se incluyen Windows, MacOS y Linux. Esta es una tecnología que utiliza Jetpack compose y facilita la creación de interfaces a través de componentes reutilizables y personalizables en Kotlin. Así, las empresas pueden optimizar sus procesos de desarrollo sin tener que duplicar código.

Algunas características que destacan en Compose multiplatform

Interfaz declarativa compartida: la intefaz de compose multiplatform está basada en componentes declarativos de jetpack compose que le permiten adaptarse a múltiple splataformas. Por ejemplo, puedes crear un button que funcione igual en Android, iOS o escritorio sin necesidad de reescribir el código:

Button(onClick = { /* Acción */ }) {
    Text("¡Hola, $platform!")
}

Integración con herramientas y librerías de Kotlin: Gracias a que funciona por medio de kotlin multiplatform, compose multiplatform hace su integración con librerías y herramientas como Ktor o Coroutines, las cuales facilitan el desarrollo de apps con una lógica compartida y una interfaz consistente. Puedes gestionar la API en el módulo común y hacer uso de la lógica compartida en todas las plataformas.
Interoperabilidad con UI nativas: compose multiplatform nos permite integrar componentes nativos en su arquitectura. En iOS es compatible con SwiftUI y UIKit, lo cual facilita el proceso de agregar elementos específicos de la plataforma sin complicaciones adicionales.

¿Cómo empezar con compose multiplatform?

Crear un proyecto con compose multiplatform

Debes hacer lo siguiente:

Crear un módulo compartido: En tu IDE, ve a File -> New -> New Module y selecciona “Kotlin Multiplatform Shared Module”.
Configurar el build.gradle: Actualiza el archivo build.gradle.kts para agregar los plugins necesarios. Puedes añadir el soporte para Compose Multiplatform con las siguientes líneas:

plugins {
    id("org.jetbrains.kotlin.multiplatform")
    id("com.android.library")
    id("org.jetbrains.compose")
}

Agregar dependencias de Compose: Para utilizar componentes de Compose en tus vistas compartidas, añade implementation(compose.runtime) y implementation(compose.material3) en la sección commonMain de las dependencias.

Configurar la integración para iOS

Para que Compose funcione en iOS, deberás realizar algunos ajustes adicionales en XCode. Estos pasos permiten que iOS reconozca el módulo compartido como una librería importable. La integración de Compose Multiplatform con iOS es menos compleja de lo que podrías imaginar:

Modificar el gradle.properties: Asegúrate de incluir las rutas correctas de tu proyecto para que se sincronicen con iOS.
Configurar el módulo en XCode: Agrega las configuraciones necesarias en Build Settings y Run Script. Esto asegura que el módulo de Compose Multiplatform sea reconocido como parte de la aplicación iOS.

Usar compose multiplatform en Android e iOS

Implementación de una vista multiplataforma: Una vez configurado el proyecto, puedes empezar a implementar vistas de Compose en las plataformas de destino. La siguiente vista, ExampleView, muestra cómo crear una interfaz compartida que se renderiza en ambos sistemas operativos:

@Composable
fun ExampleView() {
    Text(
        text = "Ejemplo de vista multiplataforma",
        modifier = Modifier.fillMaxWidth()
    )
}

Para Android, solo necesitas llamar a esta función en la actividad correspondiente. En iOS, puedes envolver la vista en un UIViewController utilizando UIViewControllerRepresentable.

Configuración adicional para iOS: En iOS, puedes representar esta vista mediante la creación de una estructura en Swift:

struct ExampleView: View {
    var body: some View {
        ExampleViewRepresentable()
           .ignoresSafeArea(.all)
    }
}

Esta vista se puede integrar en una app de iOS como si fuera un componente nativo, facilitando la reutilización de código entre plataformas.

¿Te interesó este tema y quieres aprender más sobre tecnología? No dudes en unirte a nuestro bootcamp en desarrollo web, en donde adquirirás todas las habilidades necesarias que te ayudarán a escalar en el mundo laboral y conseguir el trabajo de tus sueños. ¡Aprovecha esta gran oportunidad y transforma tu vida con Keepcoding!