Uso de Deeplink y pruebas de interfaz de usuario en Jetpack Compose Navigation | de Mert Toptas | marzo 2023

UnsplashDeep Linking dirige a los usuarios a contenido específico dentro de una aplicación móvil, en lugar de solo a la pantalla de inicio o de inicio de la aplicación. Permite a los usuarios acceder directamente al contenido que buscan en lugar de navegar por los menús y pantallas de la aplicación para encontrarlo.Android Jetpack Navigation, por otro lado, es un componente de la biblioteca de Android Jetpack que simplifica la implementación de la navegación en Android. aplicaciones Al usar Deeplink con Android Jetpack Navigation, los desarrolladores pueden brindar una experiencia de usuario aún más fluida al permitirles acceso directo a pantallas específicas dentro de la aplicación. En este artículo, exploraremos el concepto de deeplink, los conceptos básicos de la navegación de Android Jetpack y cómo usar Deeplink con la navegación de Android Jetpack para mejorar su aplicación móvil. La vinculación profunda en Android es una forma de dirigir a los usuarios a una ubicación o contenido específico dentro de una aplicación, en lugar de simplemente abrir la pantalla predeterminada de la aplicación. Permite a los usuarios acceder directamente al contenido que les interesa sin tener que navegar por los menús y pantallas de la aplicación. Técnicamente, los enlaces profundos se implementan mediante un esquema de URL que asigna una URL a una ubicación específica dentro de una aplicación. Cuando un usuario hace clic en un enlace profundo, la URL es interceptada por el sistema operativo, que luego inicia la aplicación y navega a la ubicación o contenido apropiado dentro de la aplicación.

¿Qué es el gráfico de navegación y cómo se crea?

Jetpack Compose Navigation Graph es un componente de Biblioteca de navegación Jetpack Esto simplifica la implementación de la navegación en aplicaciones basadas en Jetpack Compose. Esto es similar a navegación Gráfico utilizado en las aplicaciones tradicionales de Android, pero diseñado específicamente para funcionar con los componentes de la interfaz de usuario de Jetpack Compose. El NavHost componible debe colocarse en el diseño de la aplicación y se puede personalizar con varios parámetros, como el objetivo de lanzamiento, el comportamiento de backstack y las opciones de animación. Por ejemplo, la clase de navegación de la página de inicio es la siguiente. Debe hacer esto para cada pantalla.

Configura tu intención implícita

Jetpack Compose Navigation puede manejar intenciones implícitas A usted. Primero necesitas un cambio en AndroidManifest.xml para crear el Intención. Aquí debe especificar el host y el esquema con una etiqueta de datos para un vínculo profundo en Filtro de intenciones.

Configura el enlace profundo en tu ruta

Para crear un enlace profundo en el componente de navegación de Jetpack en Jetpack Compose, complete los siguientes pasos: En este ejemplo, manejaremos la navegación usando la biblioteca del componente de navegación. El NavHost asocia el NavController con un gráfico de navegación que especifica los objetivos componibles entre los que debería poder navegar. A medida que navega entre componibles, el contenido de NavHost se recompone automáticamente. Cada destino componible en su carta de navegación está asociado con una ruta. En el ejemplo anterior, le indicamos a Jetpack Compose Navigation Library que procese enlaces que puedan coincidir con el patrón de URI especificado. Puedes hacer esto de dos maneras diferentes. Primero, puede decirle que maneje todas las conexiones y todos los parámetros en el argumento, y que maneje esos argumentos en ViewModel y administre la navegación. En segundo lugar, puede indicarle que maneje la conexión, que puede coincidir con el patrón de URI específico de la pantalla usando un parámetro de «nombre» como se especifica en AndroidManifest.arguments = listOf(navArgument(«name») {type = NavType.StringTypedefaultValue = «» } ) host y esquema definidos. Definimos un parámetro de argumento llamado «nombre». También podemos hacerlo opcional, el valor predeterminado es una cadena vacía. De hecho, este proceso establece exactamente un valor que podemos golpear en la pantalla. Aquí obtienes los datos del enlace profundo directamente. val argument = navBackStackEntry.arguments?.getString(«name»)HomeScreenRoute(deepLinkData = argument) Al configurar HomeScreen, como un paquete en la navegación, verificamos si hay un valor en los argumentos de acuerdo con el parámetro de nombre y enviamos el valor enviado por este enlace profundo a HomeScreenRoute. Dependiendo de su escenario, si desea mostrar una ID con el enlace profundo de la pantalla de inicio, puede seguir este flujo y mostrar el parámetro de nombre que obtiene desde aquí en la pantalla de inicio. Puede pasar cualquier tipo de propiedades de intención al constructor navDeepLink, p. B. Acciones y Mimetype. Mostramos los datos de enlace profundo en la pantalla de inicio como en el ejemplo a continuación. Observe aquí que la biblioteca de componentes de navegación de Jetpack Compose navega hasta el enlace profundo que mejor coincide con su tabla de navegación. Si no se encuentran coincidencias, simplemente navega al objetivo de la pantalla de inicio.Puede usar esto para probar la vinculación profunda;adb shell am start -W -a android.intent.action.VIEW -d «example://compose/dashboard/dashBoardDeeplink» Supongamos también que hay una pantalla de configuración según nuestro escenario. Dependiendo del escenario, llevamos al usuario a la pantalla de configuración con redirección de enlace profundo y mostramos el argumento que viene con el enlace profundo.Puedes usar esto;adb shell am start -W -a android.intent.action.VIEW -d «example://compose/settings/sampleArgument»

Sección 4: Pruebas de IU con enlaces profundos en Jetpack Compose

GiphyAl crear una aplicación Jetpack Compose que utiliza enlaces profundos, es importante asegurarse de que el flujo de navegación funcione correctamente tanto para la navegación normal de la aplicación como para la navegación basada en enlaces profundos. Aquí es donde entran en juego las pruebas de interfaz de usuario. En esta sección, examinamos cómo escribir pruebas de interfaz de usuario para la navegación basada en enlaces profundos en Jetpack Compose. Para probar un enlace profundo en Jetpack Compose, puede crear una prueba de IU que simule un enlace profundo entrante y verifique que la aplicación navega al destino correcto. Estos son los pasos que puede seguir para crear una prueba de IU de vínculo profundo en Jetpack Compose: Cree un método de prueba: en su clase de prueba de IU, cree un método de prueba que inicie la aplicación con un vínculo profundo simulado. Puede hacerlo utilizando el método Action.View previsto de la clase androidx.compose.ui.test.junit4.ComposeTestRule. En este ejemplo, el método de prueba inicia la aplicación con una simulación Enlace profundo (Ejemplo: //compose/dashboard/johnDoe) y comprueba que el elemento de texto «Esta es la pantalla de inicio, John Doe» está presente en la pantalla de destino. Si se encuentra el elemento de texto, la prueba pasa. De lo contrario, la prueba falla, lo que indica que la aplicación no navegó al destino correcto. En este artículo, aprendimos a usar enlaces profundos en Jetpack Compose para crear experiencias de navegación perfectas para los usuarios. Hemos cubierto cómo crear y manejar enlaces profundos, y cómo usar las pruebas de IU para garantizar que funcione correctamente. Jetpack Compose simplifica la implementación de enlaces profundos con su marco de interfaz de usuario declarativo. Si sigue los pasos descritos en este artículo, puede crear una experiencia de navegación fluida para sus usuarios y garantizar la calidad de la aplicación con las pruebas de IU.

recurso

Repositorio Github: