Proyecto: App Dogglers

En este codelab, se presenta una nueva app llamada Dogglers, que compilarás por tu cuenta. En él, seguirás los pasos necesarios para completar el proyecto de la app Dogglers, incluidas la configuración y las pruebas en Android Studio.

Requisitos previos

  • Este proyecto es para usuarios que completaron la unidad 2 del curso Aspectos básicos de Android en Kotlin.

Qué compilarás

  • Compilarás una app llamada Dogglers que muestra información en un elemento RecyclerView con las habilidades que aprendiste en la unidad 2.

Requisitos

  • Una computadora que tenga Android Studio instalado

Te damos la bienvenida a Proyecto: app Dogglers.

En Google, llamamos afectuosamente Googlers a nuestros compañeros de trabajo. Como muchos Googlers tienen perros como mascotas, pensamos que sería divertido crear una app para nuestros amigos caninos, llamada Dogglers. Tu tarea es implementar Dogglers, que muestra listas de desplazamiento de perros de Googlers, además de su información básica, como nombre, edad, pasatiempos y una foto. En este proyecto, compilarás diseños para los elementos RecyclerView en la app Dogglers. Asimismo, implementarás un adaptador para que la lista de perros se pueda presentar de tres maneras: por desplazamiento horizontal, desplazamiento vertical y diseño de cuadrícula con desplazamiento vertical.

Cuando inicias la app, tienes distintas opciones para el diseño: horizontal, vertical y de cuadrícula.

adf6ec8cce8cc655.png

La primera opción es una vista de reciclador con desplazamiento vertical y elementos que ocupan todo el ancho de la pantalla.

51045288de047217.png

La segunda opción muestra la lista de perros en una vista de reciclador con desplazamiento horizontal.

ce534bc07ecba432.png

La tercera opción muestra los perros en un diseño de cuadrícula con desplazamiento vertical en el que se muestran dos perros en cada fila.

6dac0c59577f6fbb.png

Todos estos diseños funcionan con la misma clase de adaptador. Tu tarea será compilar los diseños para las tarjetas de la vista de reciclador y, luego, implementar el adaptador de modo que cada elemento se propague con la información sobre cada perro.

Descarga el código del proyecto

Ten en cuenta que el nombre de la carpeta es android-basics-kotlin-dogglers-app. Selecciona esta carpeta cuando abras el proyecto en Android Studio.

A fin de obtener el código necesario para este codelab y abrirlo en Android Studio, haz lo siguiente:

Obtén el código

  1. Haz clic en la URL proporcionada. Se abrirá la página de GitHub del proyecto en un navegador.
  2. En esa página, haz clic en el botón Code, que abre un cuadro de diálogo.

5b0a76c50478a73f.png

  1. En el cuadro de diálogo, haz clic en el botón Download ZIP para guardar el proyecto en tu computadora. Espera a que se complete la descarga.
  2. Ubica el archivo en tu computadora (probablemente en la carpeta Descargas).
  3. Haz doble clic en el archivo ZIP para descomprimirlo. Se creará una carpeta nueva con los archivos del proyecto.

Abre el proyecto en Android Studio

  1. Inicia Android Studio.
  2. En la ventana Welcome to Android Studio, haz clic en Open an existing Android Studio project.

36cc44fcf0f89a1d.png

Nota: Si Android Studio ya está abierto, selecciona la opción de menú File > New > Import Project.

21f3eec988dcfbe9.png

  1. En el cuadro de diálogo Import Project, navega hasta donde se encuentra la carpeta de proyecto descomprimido (probablemente en Descargas).
  2. Haz doble clic en la carpeta del proyecto.
  3. Espera a que Android Studio abra el proyecto.
  4. Haz clic en el botón Run 11c34fc5e516fb1c.png para compilar y ejecutar la app. Asegúrate de que funcione como se espera.
  5. Explora los archivos del proyecto en la ventana de herramientas Project para ver cómo se configuró la app.

El proyecto se organiza en paquetes separados. Si bien la mayor parte de la funcionalidad ya se implementó, aún deberás implementar DogCardAdapter. También deberás modificar dos archivos de diseño. En las siguientes instrucciones, se analizarán otros archivos según sea necesario.

93c2c1fee50a493b.png

Implementa el diseño

Tanto el diseño vertical como el horizontal son idénticos, por lo que solo necesitas implementar un único archivo de diseño para ambos. El diseño de cuadrícula muestra la misma información, pero el nombre, la edad y los pasatiempos del perro se apilan de forma vertical, por lo que, en este caso, necesitarás un diseño separado. Ambos diseños necesitarán los siguientes cuatro objetos de vistas diferentes sobre cada perro:

  1. Un objeto ImageView con la foto del perro
  2. Un objeto TextView con el nombre del perro
  3. Un objeto TextView con la edad del perro
  4. Un objeto TextView con los pasatiempos del perro

También observarás algunos diseños en cada tarjeta para mostrar un borde y una sombra. MaterialCardView, que se agregó previamente a los archivos de diseño en el proyecto inicial, se encarga de esto. Dentro de cada MaterialCardView, deberás agregar las vistas restantes en ConstraintLayout.

Existen dos archivos en formato XML con los que deberás trabajar a fin de implementar los diseños: horizontal_vertical_list_item.xml para los diseños horizontal y vertical, y grid_list_item.xml para el diseño de cuadrícula.

  1. Cómo compilar el diseño para listas verticales y horizontales

Abre vertical_horizontal_list_item.xml y, en el elemento ConstraintLayout interno, compila el diseño para que coincida con la imagen.

73a663ae61811a4b.png

  1. Cómo compilar el diseño de cuadrícula

Abre grid_list_item.xml y, en el elemento ConstraintLayout interno, compila el diseño para que coincida con la imagen.

50dd020683b63b1a.png

Implementa el adaptador

Una vez que hayas definido tus diseños, la siguiente tarea será implementar el adaptador RecyclerView. Abre DogCardAdapter.kt en el paquete adapter. Observarás muchos comentarios TODO que ayudan a explicar lo que debes implementar.

3192d25f55b403bc.png

Deberás seguir cinco pasos para implementar el adaptador.

  1. Define una variable o constante para la lista de datos de los perros. La lista se puede encontrar en el paquete data en un objeto llamado DataSource y es similar a lo siguiente:
object DataSource {

   val dogs: List<Dog> = listOf( ...

}

El tipo de la propiedad dogs es List<Dog>. La clase Dog se encuentra en el paquete model y define cuatro propiedades: una imagen (representada por un ID de recurso) y tres propiedades String.

data class Dog(
   @DrawableRes val imageResourceId: Int,
   val name: String,
   val age: String,
   val hobbies: String
)

Configura la variable que defines en DogCardAdapter como la lista dogs en el objeto DataSource.

  1. Implementa DogCardViewHolder. El contenedor de vistas debe vincular las cuatro vistas que se deben configurar para cada tarjeta de vista de reciclador. Se compartirá el mismo contenedor de vistas para los diseños grid_list_item y vertical_horizontal_list_item, ya que se comparten todas las vistas entre ambos diseños. DogCardViewHolder debe incluir propiedades para los siguientes ID de vista: dog_image, dog_name, dog_age y dog_hobbies.
  2. En onCreateViewHolder(), aumenta el diseño de grid_list_item o de vertical_horizontal_list_item. ¿Cómo sabes qué diseño usar? En la definición del adaptador, puedes ver que se pasa un valor llamado diseño de tipo Int cuando se crea una instancia del adaptador.
class DogCardAdapter(
   private val context: Context?,
   private val layout: Int
): RecyclerView.Adapter<DogCardAdapter.DogCardViewHolder>() {

Esto corresponde a un valor definido en el objeto Layout, que se encuentra en el paquete const.

object Layout {
   val VERTICAL = 1
   val HORIZONTAL = 2
   val GRID = 3
}

El valor del diseño será 1, 2 o 3, pero puedes compararlo con los identificadores VERTICAL, HORIZONTAL y GRID del objeto Layout.

En el diseño de GRID, aumenta el diseño de grid_list_item y, para los diseños de HORIZONTAL y VERTICAL, aumenta el diseño de horizontal_vertical_list_item. El método debe mostrar una instancia de DogCardViewHolder que represente el aumento de diseño.

  1. Implementa getItemCount() para mostrar la longitud de la lista de perros.
  2. Por último, debes implementar onBindViewHolder() para configurar datos en cada una de las tarjetas de vista de reciclador. Usa el position para acceder a los datos correctos de los perros en la lista, y configura la imagen y el nombre del perro. Usa los recursos de strings, dog_age y dog_hobbies, para darles el formato adecuado a la edad y los pasatiempos.

Cuando termines de implementar el adaptador, ejecuta tu app en el emulador para verificar que todo esté implementado de manera correcta.

El proyecto Dogglers incluye un objetivo "androidTest" con varios casos de prueba.

583b42ccd1e5b22.png

Cómo realizar las pruebas

Para ejecutar las pruebas, puedes realizar una de las siguientes acciones:

Si se trata de un solo caso de prueba, abre una clase de caso de prueba y haz clic en la flecha verde que está a la izquierda de la declaración de la clase. Luego, puedes seleccionar la opción Run en el menú. Se ejecutarán todas las pruebas del caso de prueba.

a32317d35c77142b.png

Lo más probable es que quieras ejecutar una sola prueba, por ejemplo, si hay una sola prueba fallida y las otras aprueban. Puedes ejecutar una sola prueba como lo harías con todo el caso de prueba. Usa la flecha verde y selecciona la opción Run.

ac6244434cfafb60.png

Si tienes varios casos de prueba, también podrás ejecutar todo el conjunto. Al igual que cuando ejecutas la app, encontrarás esta opción en el menú Run.

7a925c5e196725bb.png

Ten en cuenta que Android Studio usará, de forma predeterminada, el último objetivo que ejecutaste (app, objetivos de prueba, etc.), por lo que, si el menú sigue indicando Run > Run 'app', podrás ejecutar el objetivo de prueba seleccionando Run > Run.

ee1e227446c536fe.png

Luego, selecciona el objetivo de prueba en el menú emergente.

d570c947769db65c.png

Se muestran Los resultados de la ejecución de las pruebas en la pestaña Run. En el panel de la izquierda, verás una lista de las pruebas fallidas, si hay. Se marcan las pruebas fallidas con un signo de exclamación rojo junto al nombre de la función, mientras que las que aprueban tienen una marca de verificación verde.

6d68f2bf589501ae.png

Si una prueba falla, la salida de texto proporcionará información que te ayudará a solucionar el problema.

63f37b6428781c02.png

Por ejemplo, en el mensaje de error anterior, la prueba verifica si un objeto TextView usa un recurso de strings específico. Sin embargo, la prueba falla. El texto que sigue a "Expected" y el que sigue a "Got" no coinciden, lo que significa que el valor que la prueba que se esperaba no coincide con el valor de la app en ejecución.

Nos encantaría saber qué opinas de este proyecto. Completa esta encuesta breve y haz los comentarios pertinentes. Tu aporte ayudará a guiar proyectos futuros en este curso.