Jetpack Compose

Descripción

El nuevo sistema de declaración de vistas ha venido a revolucionar el desarrollo de Apps en Android.

Pero la realidad es que el cambio de mentalidad es grande. Si quieres que te equipo esté en la cresta de la ola en cuanto a creación de interfaces declarativas, esta es vuestra formación.

 

* Esta formación puede ser bonificada por FUNDAE (Tripartita)

¿Por qué necesitas este training?

Jetpack Compose es el nuevo sistema de interfaces declarativas en Android, que viene a sumarse a la tendencia de otras plataformas como React, Swift UI o Flutter.

El crecimiento de estos frameworks es imparable, y Jetpack Compose ya es estable para empezar a usarlo en proyectos en producción.

Gracias a Jetpack Compose se consiguen interfaces más predecibles, testeables y mucho menos propensas a errores. Además el tiempo de creación de nuevas pantallas es mucho más corto, lo que acelera al máximo el desarrollo.

Compose se une a la potencia de Kotlin para llevar el desarrollo de interfaces a un nuevo nivel. Si quieres liderar este cambio, este es el momento de aprenderlo y empezar a aplicarlo a los proyectos.

Duración y requisitos

La formación consiste en 25 horas (normalmente dividida en 5 días de 5 horas).

Se necesita tener conocimientos de desarrollo en Android y el lenguaje Kotlin.

Temario

Este es el contenido estándar, aunque se puede adaptar a las necesidades y conocimientos de cada grupo:

1. Qué es Jetpack Compose y cómo crear tu primer proyecto

Durante la formación vamos a ir creando una un par de ejemplos de UI con los que vamos a ir aplicando todos los conceptos.

En esta primera parte aprenderemos:

  • Qué es Jetpack Compose
  • Cómo crear un proyecto en Android Studio
  • Qué son las interfaces declarativas
  • Qué es un Composable y las previews
  • Ejemplo sencillo

 

2. Layouts principales

Vamos a entrar a fondo en la creación de Layouts en Compose. Qué componentes tenemos y cómo organizarlos para convertir los diseños en realidad.

  • Columns, Rows, Boxes
  • Qué son los Modifiers
  • Primeros componentes básicos: 
    • Text
    • TextField
    • Button
    • IconButton
    • Icon…
3. Usando el Estado en Jetpack Compose

En interfaces declarativas, gestionar correctamente el estado es vital, pues de ese estado dependerá que las vistas se actualicen correctamente de forma automática.

Aquí aprenderemos varios conceptos imprescindibles sobre el estado:

  • Cómo se actualiza la UI de Compose basada en el estado
  • Cómo sobrevivir a las recomposiciones y los cambios de configuración
  • Qué es Unidirectional Data Flow
  • State hoisting
  • Jerarquía de estados y cómo organizar el código
  • State Holders
  • ViewModels
  • Compatibilidad con LiveData y StateFlow
  • CompositionLocal y dependencias implícitas

 

4. Layouts dinámicos

Necesitamos componentes que no necesiten pintar de antemano todos los elementos, sino que se vayan cargando según necesiten mostrarse en pantalla. En Jetpack Compose tenemos varios layouts que sustituyen al RecyclerView:

  • LazyRow
  • LazyColumn
  • LazyVerticalGrid

También veremos en este punto cómo cargar imágenes con Coil, así como otros componentes esenciales para crear UIs:

  • ListItem
  • DropDownMenu
5. Scaffold

Un componente que actúa como plantilla para posicionar otros componentes en la UI. Junto con el Scaffold, explicaremos cómo usar:

  • TopAppBar
  • BottomNavigation
  • NavigationDrawer
  • FloatingActionButton
  • SnackBar
6. Side-Effects

En ocasiones, necesitamos realizar acciones que se escapan del ciclo de recomposición de los composables.

Cualquier parte del código que no emita UI se considera un Side-Effect, y hay que tratarlo por separado.

En este módulo veremos cómo y cuándo usarlos:

  • LaunchedEffect
  • rememberCoroutineScope
  • DisposableEffect
  • SideEffect
  • produceState
  • derivedStateOf
7. Navegación

Veremos cómo usar la librería Navigation en Jetpack Compose para navegar entre pantallas:

  • Introducción a la librería Navigation-Compose
  • Navigation en Compose
  • Pasar argumentos de navegación
  • Integración del ViewModel con la librería de navegación
  • Cómo crear múltiples grafos de navegación

 

8. Estilos y Temas

En el estilo tradicional, usábamos XMLs para diseñar los temas de las Apps. En Compose esto cambia mucho, y necesitamos reaprender cómo definirlos:

  • Temas Material
  • Colores
  • Tipografías, y  cómo usar fuentes de terceros
  • Formas
  • Cómo definir estilos o temas genéricos para componentes
9. Animaciones

Vamos a entrar más a fondo en los distintos tipos de animaciones que se pueden realizar en Compose. Veremos cómo animar:

  • Visibilidad
  • Cambio de contenido
  • Cambio de tamaño
  • Un único valor
  • Múltiples valores
  • Animaciones infinitas
10. Testing

Compose está diseñado con el testing en mente. Aquí vamos a ver cuáles son las herramientas necesarias para crear tus primeros tests de UI en Compose:

  • Introducción al testing con Compose
    • Árboles semánticos
    • Depuración de tests
    • Uso de testTag
  • Primer test de UI
  • Test sobre un componente aislado
  • Test sobre varios componentes
  • Tests para elementos con scroll
  • Tests de navegación
11. Interoperabilidad

Aunque lo ideal es empezar proyectos donde solo utilicemos Jetpack Compose como sistema de UI, la realidad es que en la mayoría de las situaciones nos encontraremos con proyectos que ya usan vistas en XML y queremos empezar a usar Compose.

Aquí veremos cómo interoperan ambos sistemas de vistas:

  • Cómo crear una activity o fragment completos usando Jetpack Compose
  • Cómo integrar Compose en una vista clásica
  • Cómo cargar un componente de Jetpack Compose en una vista clásica
  • Usar el tema XML en Compose
  • Cargar una vista en XML en Jetpack Compose

Matrícula

560€ (+IVA) por alumno, con un mínimo de 8 alumnos, o pago del precio equivalente.

 Si tu equipo es más pequeño, no dudes en ponerte en contacto para ver qué opciones podemos plantear.

Si te interesa esta formación para ti o tu empresa, ponte en contacto con nosotros haciendo click en el siguiente botón: