Proyecto: App de Dogglers

1. Antes de comenzar

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 de Dogglers, incluidas la configuración y las pruebas en Android Studio.

Este codelab es diferente de los demás en este curso. A diferencia de los codelabs anteriores, el propósito de este no es proporcionar un instructivo paso a paso para compilar una app. En cambio, sirve para configurar un proyecto que completarás de forma independiente, y te proporcionará instrucciones para completar una app y controlar tu trabajo por tu cuenta.

En lugar de código de solución, proporcionamos un conjunto de pruebas como parte de la app que descargarás. Debes ejecutar estas pruebas en Android Studio (más adelante en este codelab, te mostraremos cómo hacerlo) y verás si se aprueba el código. Esto puede demorar algunos intentos; incluso los desarrolladores profesionales rara vez pasan todas las pruebas en el primer intento. Una vez que el código haya pasado todas las pruebas, podrás considerar que este proyecto está completo.

Entendemos que posiblemente solo quieras ver la solución para comparar los resultados. No proporcionamos el código de la solución porque queremos que practiques cómo es ser un desarrollador profesional. Para ello, podría ser necesario que uses diferentes habilidades con las que aún no tienes mucha práctica, como las siguientes:

• Googlear términos, mensajes de error y bits de código de la app que no reconozcas
• Probar código, leer errores, realizar cambios en el código y volver a probarlo
• Regresar al contenido anterior en Aspectos básicos de Android para repasar lo que aprendiste
• Comparar el código que sabes que funciona (es decir, el que se proporciona en el proyecto o el código de solución anterior de otras apps en la Unidad 2) con el que escribes

Esto puede parecer abrumador al principio, pero estamos 100% seguros de que, si pudiste completar la Unidad 2, ya estás listo para este proyecto. Tómate tu tiempo y no te rindas. ¡Puedes lograrlo!

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

2. Descripción general de la app

Te damos la bienvenida a Proyecto: app de 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 de 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.

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

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

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.

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.

3. Cómo comenzar

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.

1. Navega a la página de repositorio de GitHub del proyecto.
2. Verifica que el nombre de la rama coincida con el especificado en el codelab. Por ejemplo, en la siguiente captura de pantalla, el nombre de la rama es main.

3. En la página de GitHub de este proyecto, haz clic en el botón Code, el cual abre una ventana emergente.

4. En la ventana emergente, haz clic en el botón Download ZIP para guardar el proyecto en tu computadora. Espera a que se complete la descarga.
5. Ubica el archivo en tu computadora (probablemente en la carpeta Descargas).
6. 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.

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

3. En el navegador de archivos, ve hasta donde se encuentra la carpeta del proyecto descomprimida (probablemente en Descargas).
4. Haz doble clic en la carpeta del proyecto.
5. Espera a que Android Studio abra el proyecto.
6. Haz clic en el botón Run para compilar y ejecutar la app. Asegúrate de que funcione como se espera.

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.

Cómo implementar 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: vertical_horizontal_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.

2. 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.

Cómo implementar 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.

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.

2. 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.
3. 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 vertical_horizontal_list_item. El método debe mostrar una instancia de DogCardViewHolder que represente el aumento de diseño.

4. Implementa getItemCount() para mostrar la longitud de la lista de perros.
5. 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.

4. Prueba tu app

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

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.

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.

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.

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.

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

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.

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

Por ejemplo, en el mensaje de error anterior, la prueba está verificando si se muestra una string que contiene la palabra "Nox". Sin embargo, la prueba falla. No se encontró el texto, lo que significa que es probable que aún no se muestre.