El objetivo de esta práctica es aprender a utilizar el framework VueJS. Utilizaremos como material de base los videotutoriales siguientes (en inglés con subtítulos en castellano):

• https://vueschool.io/courses/vuejs-fundamentals
• Alternativa (prácticamente con los mismos contenidos): https://www.vuemastery.com/courses/intro-to-vue-js/
• Documentación completa de VueJS: https://vuejs.org/v2/guide/
• Videotutorial: Introducción a VueJS

En el repositorio se incluye un archivo index.html y un archivo js/script.js.

• El archivo index.html debe utilizarse para realizar la tarea.
• El archivo js/script.js contiene el código para inicializar la instancia de VueJS junto con los datos de prueba que se deberán mostrar correctamente formateados en el archivo index.html.

También se incluye en el repositorio un conjunto de archivos que se utilizarán para realizar tests. Dichos tests se podrán utilizar para comprobar si la práctica se ha realizado correctamente. Los tests se podrán ejecutar el número de veces que sea necesario.

Para poder realizar esta práctica y que funcione adecuadamente el entorno de test será necesario instalar el siguiente software en el equipo:

• Navegador Chrome.
• Entorno de ejecución NodeJS.

Para realizar la práctica se seguirán los principios del Desarrollo Guiado por Test. Para ello se proporciona en el repositorio una serie de ficheros que permiten ejecutar tests. Dichos tests comprobarán que la web cumple con algunos de los requisitos de la práctica.

1. Instalar los requisitos de software indicados
2. Abrir un terminal
3. Clonar el repositorio al equipo local mediante git clone
4. Acceder a la carpeta del repositorio
5. Ejecutar el comando npm install. Este comando instalará todas las librerías de Node necesarias para ejecutar los tests. Dichas librerías se guardarán en una carpeta con nombre node_modules dentro del repositorio. Nótese que dicha carpeta está excluida del repositorio en el archivo .gitignore.
6. Ejecutar el comando npm test para lanzar los tests. Este comando podrá ejecutarse tantas veces como sea necesario. Por pantalla se mostrarán los tests que se pasan y los que no, de manera que se tendrá información sobre las acciones que hay que realizar.

En esta práctica vamos a simular que tenemos una aplicación cliente de una sola página que recibe una serie de datos en formato JSON. Nuestra tarea es crear un cliente web con el framework de desarrollo VueJS para mostrar adecuadamente dichos datos de forma amigable en el navegador.

Se utilizará Bootstrap para el formato visual. El resultado de la aplicación será el siguiente:

• Vista móvil
• Vista resto pantallas

Los datos que recibirá la aplicación tienen el siguiente esquema:

{
    collection :
    {
        title : "Movie List",
        type : "movie",
        version : "1.0",

        items : [ //Array de items
            {
                href : "https://...",  //URL del item
                data : [               //Array de datos de cada item
                    {name : "NOMBRE_PROPIEDAD", value : "VALOR_PROPIEDAD", prompt : "DESCRIPTOR_PROPIEDAD_PARA_USUARIO"},

                    // Más datos del item...

                ]
            },

            // Más items...

        ]
    }
}

Como puede observarse, el objeto principal tiene 4 propiedades:

• title - Almacena el título de la colección
• type - Tipo de colección (qué tipo de datos almacena)
• version - Versión del esquema de datos
• items - Array de elementos de la colección. Cada elemento se denomina item.

Cada item de la colección tiene a su vez 2 propiedades:

• href - Almacena la URL del elemento
• data - Array de datos del elemento. Un elemento puede tener 0 o más datos

Por último, el formato de cada dato de la colección es un objeto con 3 propiedades:

• name - Nombre de la propiedad. Es un nombre único que un hipotético servidor utilizará para guardar los datos de manera organizada (posiblemente en una tabla de una base de datos; por tanto, la propiedad name estará relacionada con el campo de la tabla de la base de datos). Normalmente este campo contendrá texto en minúsculas y sin espacios en blanco.
• value - Valor de la propiedad.
• prompt - Texto descriptivo que se utilizará para indicar al usuario la descripción del dato. Este campo está pensado para almacenar texto formateado (mayúsculas y minúsculas, signos de puntuación y varias palabras) que vaya a ser mostrado al usuario.

El formato de los datos está pensado para que sea consumido por procesadores de código, no por personas. Por tanto, la tarea a realizar consistirá en utilizar VueJS para mostrar los datos de manera amigable a los usuarios. Para ello se pide:

• Mostrar el título de la colección dentro de un componente Jumbotron de Bootstrap . En su interior habrá un <h1> con id=title que mostrará el título de la colección.
• Para cada item:
  • Crear un componente card de Bootstrap
  • Mostrar un enlace de tipo botón a la propiedad href del item con el texto Ver. Hay que tener en cuenta que href es un atributo.
  • Mostrar cada uno de los datos del item en una lista de definición <dl>. Para cada dato se mostrará:
    • El término <dt> será la propiedad prompt
    • La definición <dd> será la propiedad value

Por último, se deberán utilizar las clases apropiadas para que el aspecto visual de la página sea distinto en pantallas móviles del resto de pantallas.

• Cada alumno dispondrá de un repositorio en GitHub para su trabajo personal. Dicho repositorio se creará automáticamente al hacer clic en el enlace y aceptar la tarea (assignment).
• Todos los archivos de la práctica se guardarán en el repositorio y se subirán a GitHub periódicamente. Es conveniente ir subiendo los cambios aunque no sean definitivos.
• Para cualquier tipo de duda o consulta se pueden abrir Issues haciendo referencia al profesor mediante el texto @antonioroig dentro del texto del Issue.
• Una vez finalizada la tarea se debe crear un Issue en el repositorio haciendo referencia al profesor incluyendo el texto @antonioroig dentro del Issue.