Visitando de Nuevo el Pokedex, con Jetpack Compose (Parte 1)

Otra vez dejándolos por mucho tiempo, mis niños adorados, pero bueno, ya nos encontramos aquí escribiendo para todos ustedes. Esperando que ya después de 4 meses de este 2023 todo les esté saliendo de maravilla y que no batallen mucho con los bugs.

Si recuerdan, en un post anterior que les dejo aquí, armamos el Pokedex y lo armamos con los siguientes parámetros:

• Usamos Clean Architecture para conectar la API. En esa ocasión no usamos Room.
• Usamos RxJava para poder hacer los repositorios y usecases (interactors)
• Usamos Navigation Component para la navegabilidad.
• Usamos MVVM para poder estructurar las llamadas a la API desde nuestros Fragments o Activities.

En esta ocasión, por fin he profundizado en el conocimiento de Jetpack Compose para Android y he decidido comenzar a armar el Pokedex pero utilizando esta tecnología, al igual de hacer los siguientes cambios:

• Se usará Jetpack Compose desde el principio para generar todo el workflow de nuestra aplicación.
• Conservaremos la implementación de la Clean Architecture, pero ahora sí usaremos Room.
• Conservaremos el uso de MVVM, sin embargo ahora lo orientaremos a Jetpack Compose en lugar de Fragmentos. En los siguientes posts lo averiguaremos.
• Usaremos en lugar de RxJava, corrutinas, mismas que abonarán en el desarrollo de esta versión del Pokedex.

Oye, pero ¿qué diablos es Jetpack Compose?

Jetpack Compose es el futuro, dirían algunos y sí, es un nuevo sistema de creación de interfaces incluído para Android, el cual arma de forma declarativa todas y cada una de nuestras interfaces gráficas.

Esta forma de armar interfaces gráficas se ha establecido muy popularmente en SwiftUI (iOS) y Flutter (apps híbridas), por lo que ya prácticamente la curva de aprendizaje en cualquier sistema declarativo es muy similar y abona para poder aprender cualquiera de los otros dos, es decir, sabes Flutter, vas a agarrar Jetpack Compose y SwiftUI como pez en el agua (claro, sabiendo únicamente las sintaxis propias de cada framework).

¿Cambia la generación de interfaces en Jetpack Compose?

Definitivamente, como lo mencionamos anteriormente, Compose (así le diremos de ahora en adelante) utiliza el paradigma de programación declarativa, mismo que permite que una aplicación en vez de montar todos los componentes o widgets de la UI en un árbol de componentes, Compose únicamente aplique los cambios necesarios sin afectar el resto de la UI, haciéndolo más económico en cuanto a procesamiento y consumo de recursos.

Ahora, unos ejemplitos.

Históricamente, nosotros para generar un TextView, teníamos que hacer esto:

<TextView
    android:id="@+id/text_view_id"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:text="@string/hello" />

Ahora en Compose, el declarar un TextView se hace de la siguiente manera:

@Composable
fun Greeting() {
    Text("Hello")
}

Igualmente, si nosotros deseamos enviarle un parámetro a nuestra función Composable, lo podemos hacer y anidarla como cualquier variable en Kotlin:

@Composable
fun Greeting(name: String) {
    Text("Hello $name")
}

Ok, hasta aquí todo muy bien, pero te has de preguntar ¿cómo es que lo mando llamar a mi interfaz? Pues de la siguiente manera:

@Composable
fun AppMainScreen() {
    val scaffoldState = rememberScaffoldState()
    val coroutineScope = rememberCoroutineScope()

    Scaffold(
        scaffoldState = scaffoldState,
        topBar = {
            TopBar(
                title = "Pokedex",
                buttonIcon = Icons.Filled.Menu,
                onButtonClicked = {
                    coroutineScope.launch {
                        scaffoldState.drawerState.open()
                    }
                }
            )
        },
        drawerContent = {
            Column(
                modifier = Modifier
                    .fillMaxSize()
                    .padding(start = 8.dp, top = 32.dp),
                horizontalAlignment = Alignment.CenterHorizontally,
            ) {
                Greeting("World")
            }
        }
    )
}

El código arriba mencionado, es la forma predeterminada para mandar lo que antes conocíamos como un fragmento, sin embargo nos falta una parte importante: asegurarnos de que el punto de entrada, la Activity lance como tal nuestra pantalla, por lo que tenemos que modificar nuestra MainActivity a lo siguiente:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            PokedexTheme {
                AppMainScreen()
            }
        }
    }
}

Con esto podremos lanzar nuestra primer aplicación móvil con Jetpack Compose y se verá así:

En el siguiente post, voy a profundizar en armar la Toolbar (que ya está en la pantalla anterior), pero quisiera explicar funciones necesarias para controlar la navegabilidad dentro de Jetpack compose y otras features que tenemos. Asimismo, ya estaremos construyendo algo un poquito más elaborado en cuanto a interfaces se refiere. Stay tuned.