UP | HOME

Diseño de Interfaces Web

Scrum 3 - Web Design with VueJS and Hypermedia

Índice

1 Introduction

We are going to create a web application to manage an online multimedia database. It will store books, music albums, movies and videogames.

We will implement both the server and client for this app.

The server logic will be an API based on a REST architecture. This API will serve and accept data in a specific format called Collection + JSON. The teacher will provide the skeleton of the application and the team will have to implement the missing functionalities. The server language will be PHP and it will use the Slim framework. The database will be MySQL.

The client logic will consist on a Single Page Application (SPA) built with VueJS and Bootstrap. The client will use AJAX to send and receive data in the Collection + JSON format to the server. Again, the teacher will provide the skeleton of the application and the team will have to develop the main functionality and design its visual appearance.

Each team will have a GIT repository to work with the code. We will also use continuous integration and automatic deployment to publish the web app.

2 Learning goals

  • Learn how to use development frameworks to create web sites.
  • Develop responsive web interfaces that can be displayed correctly in all kinds of devices and screens.
  • Learn the fundamentals of REST architecture.
  • Design web APIs using REST architecture.
  • Learn the fundamentals of Hypermedia (HATEOAS).
  • Learn the fundamentals of PHP language and PHP frameworks to design web applications.
  • Learn how to use JSON based hypermedia types to send and receive data between client and server.
  • Learn how to create basic Single Page Applications using Vue JS.
  • Learn how to use AJAX to send and receive data between client and server.
  • Learn how to use continous integration to automatically test and deploy web applications.
  • Learn how to work in teams using a version control system.

3 Agenda

Tuesday 01/22/2019 to Wednesday 01/23/2019
Planning meeting (2 days / 3 hours).
Thursday 01/24/2019 to Friday 02/22/2019
Sprint (22 days / 33 hours).
Monday 02/25/2019
Demo (1 day / 2 hours).
Tuesday 02/26/2019
Retrospective (1 day / 2 hours).

4 Product Backlog

4.1 Reading: documentation

Every team member must read the following articles:

  1. Wikipedia article about REST architecture: link.
  2. Wikipedia article about HATEOAS: link.
  3. Wikipedia article about JSON: link.
  4. Collection + JSON media type specification: link.
  5. Collection + JSON examples: link.
Definition of Done
You have read and understood the documentation.

4.2 Setting up the development environment

Every team member must do the following tasks:

  1. Install a portable XAMPP (Apache web server, PHP and MySQL) environment: link.
  2. Read the following article about Composer, a dependency manager for PHP: link.
  3. Install Composer using the XAMPP console: https://getcomposer.org/doc/00-intro.md#manual-installation
  4. Clone the team's GIT repository inside the htdocs folder of the XAMPP installation.
  5. Run Composer to automatically download all project dependencies:https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies
  6. Start XAMPP control panel and start the Apache and MySQL servers.
  7. Import the database file included in the project into the MySQL server provided by XAMPP: link.
  8. Test the server app in the local XAMPP environment (change PROJECTDIR for the actual name of your project folder):
  9. Run npm install from the command line to install the client dependencies.
  10. Run the development server to run the Vue JS client app: npm run serve
  11. Test the client app in the web browser:
Definition of Done
Every team member can access its own copy of the app in his/her own local environment. Every team member has read the provided articles.

4.3 Understanding Travis CI

Every team member must do the following tasks:

  1. Read the following article about Travis CI: link.
  2. Inspect and try to understand the .travis.yml file included in the repository.
Definition of Done
You have read the article. You have read and inspected the .travis.yml file.

4.4 Heroku

All teams will do this task at the same time. The teacher will explain how to set up Heroku to host the project app.

Definition of Done
You have understood how to deploy web applications to a cloud service like Heroku. Every team has its application available in Heroku.

4.5 Read and inspect the provided server code

Every team member must do the following tasks:

  1. Analyse the server code provided in the repository. Get familiar with PHP syntax, Slim, the template manager Twig and the ORM Eloquent.
  2. Inspect the api/.htaccess file. Try to understand what it does.
  3. Read the following articles about ORMs and Eloquent:
  4. Test the server with the web browser. Inspect the returned data.
Definition of Done
You have analyzed the server code. You have understood (at least, a little bit) how the code works. You have tested the server with the web browser. You have read the provided articles.

4.6 Read and inspect the provided client code

Every team member must do the following tasks:

  1. Analyse the client code provided in the repository.
  2. Test the client with the web browser.
  3. Think of how to organize the code to add the missing functionality.
Definition of Done
You have analyzed the client code. You have understood how it works. You have tested the client with the web browser. The team has thought of how to organize themselves.

4.7 Create the server code (already done!!)

The server is available in the /api route. It is an API that works with the Collection + JSON format.

The main entry point to the API returns a collection object with links to each of the types of multimedia in the database: movies, TV series, disc albums, books and videogames. If you access to any of these links URL, the server will send another collection object with the corresponding list of items and:

  • Links to access a specific item.
  • Links to access the other lists of items.
  • A template to edit or add an item of the current collection.

The data model for each type of item is based on the standarized data types published in http://schema.org. The properties of each type of element are:

  • Movie
    • name - Name of the movie (text)
    • description - Description of the movie (text)
    • director - Director of the movie (text)
    • datePublished - Release date (date)
    • embedUrl - URL of the YouTube trailer (text)
  • TVSeries
    • name - Name of the TV series (text)
    • description - Description of the TV series (text)
    • director - Director of the TV series (text)
    • datePublished - Release date (date)
    • numberOfSeasons - Number of seasons (number)
    • numberOfEpisodes - Number of episodes (number)
    • embedUrl - URL of the YouTube trailer (text)
  • MusicAlbum
    • name - Name of the music album (text)
    • description - Description of the music album (text)
    • datePublished - Release date (date)
    • image - URL of the album cover image (text)
    • embedUrl - URL of the SoundCloud stream for the main song of the album (text)
  • Book
    • name - Name of the book (text)
    • description - Description of the book (text)
    • isbn - ISBN book id (text)
    • datePublished - Release date (date)
    • image - URL of the cover book image (text)
  • VideoGame
    • name - Name of the videogame (text)
    • description - Description of the videogame (text)
    • gamePlatform - Available gaming platforms for the game (text)
    • applicationSubCategory - Game category (arcade, platforms,…) (text)
    • screenshot - URL of a screenshot of the game (text)
    • datePublished - Release date (date)
    • embedUrl - URL of the YouTube trailer (text)

To do tasks:

  • Create the appropriate routes to access each of the resources provided by the API (both lists and individual items): movie list, movie item, TV series list, TV series item, music album list, music album item, book list, book item, videogame list and videogame item.
  • For each of the four categories, create the server logic to implement the four actions of the CRUD model: Create, Read, Update and Delete.
    • Get a list of elements.
    • Get an individual item.
    • Create a new item.
    • Update an item.
    • Delete an item.
  • Test the API in Chrome with Postman.
  • Optionally, you can create unit tests following the example provided in the repository. These tests will be executed by Travis CI when you do a commit or a pull request in GitHub.
Definition of Done
You have tested the proper operation of the server API. You can make CRUD operations to each of the four categories provided by the API. The server code is correctly deployed in Heroku.

4.7.1 How to process data sent with POST or PUT

The Collection + JSON format is based on JSON. For that reason, the server must convert JSON to PHP objects. You can read the following articles to know how to do it:

4.8 Create the client code

The client logic will consist on a Single Page Application (SPA) built with Vue JS and Bootstrap. The client will use AJAX to send and receive data in the Collection + JSON format to the server.

The provided source code includes sections marked with the TODO tag to indicate what you have to implement. The code also includes comments that explain how to do it. The main tasks that have to be done are detailed below.

Definition of Done
The client can interact with the server API. Each of the four categories are displayed correctly. The client is deployed in Heroku.

4.8.1 Include the Bootstrap CSS library

Load both libraries in the index.html file.

4.8.2 Understand the AJAX functions

The Collection + JSON format allows four types of interacion (we will not use the queries functionality for simplicity):

  • Follow links to get a different collection object.
  • Send a template to edit an item.
  • Send a template to create an item.
  • Send a DELETE request to delete an item.

For that reason, the client will have to implement 4 functions:

  • readCollection
  • createItem
  • editItem
  • deleteItem

4.8.3 Implement the Vue component to display the collection links

This component will display the list of links stored in the collection.links object. You can use Bootstrap classes for the UI.

When the user clicks on a link, the application must call the readCollection function to get the collection referred by that link.

4.8.4 Implement a component to display the collection items

This component must call 5 different components, one for each of the 5 categories provided by the server. You can use the collection.type along with the v-if or v-show directives to display the appropriate one.

Each these category components must display the item data according to its category: for example, a movie must show an embedded YouTube player that plays the trailer available in its embedUrl property.

When the item component is created, the function buildEditTemplate will be called. This function will create a data object (editTemplate) inside the item component with the collection.template object provided in the Collection + JSON format and the item data. This data object will be used to render the item edit form and send it to the server to update the item information.

Each item must have three links/buttons:

  • A link to the URL of the item (item.href). When the user clicks on it, the function readCollection will be called and the client will connect to the item URL and get its representation in Collection + JSON format.
  • A link/button for displaying the "edit item" component. When the user clicks on the edit button, the component will show the "edit item" component.
  • A link/button for deleting the item. When the user clicks on the delete button, the function deleteItem will be called.. it will send the edit template object to the URL stored in the item.href.

4.8.5 Implement a component for the "edit item" form

This component must build a form bound to to the item.editTemplate object. You will have to use v-model.

Form fields and labels can be formatted with Bootstrap classes.

Form fields types must correspond to the field types: e.g., date (input type=date) or description (textarea). You can use v-if or v-show directives for that.

The form must be validated before its submission.

When the user submits the form, the function editItem will be called. It will send the item.editTemplate object to the URL stored in the item.href property.

4.8.6 Implement a component to display the collection template ("create item" form)

This component must build a form bound to the collection.template object. You will have to use v-model.

Form fields and labels can be formatted with Bootstrap classes.

Form fields types must correspond to the field types: e.g., date (input type=date) or description (textarea). Again, you can use v-if or v-show directives for that.

The form must be validated before its submission (all fields are required).

When the user submits the form, the function createItem will be called. It will send the collection.template object to the URL stored in collection.href.

4.8.7 Improvements (optional)

  • Use the same template component to create and edit items. Both forms are generated from the collection.template object. The only difference is that one form is empty (create form) and the other one is pre-filled with the item data (edit form).
  • Show the create and edit forms when the user clicks a button instead of always showing them.
  • Use transitions.

5 Hints

  • Remember to use the GIT workflow proposed for teams.
  • Every team member must work both with client and server code. Each member must choose a certain item type (movies, TV series, books, music albums or videogames) and work both with client and server.
  • It is advisable not to work more than one person in the same file to minimize conflicts. Tasks should affect different files.
  • Teams must create tasks that generate valid product updates.
  • You should do one commit and one push at least once in every class.

6 Grading criteria

Scrum board (Flip) (20%)
Daily update, tasks estimation updates, Burn Down chart, daily scrums.
Percentage of completed Product Backlog (20%)
Completed tasks, optional tasks.
Quality (20%)
Originality, design, validation tests, correct visualization in different browsers and devices, design consistency, usability and accessibility features.
Retrospective (20%)
Correct revision of processes, identification of strengths and weaknesses, team analysis, individual analysis.
Demo session (20%)
Participation of all team members, oral presentation, materials used in the presentation, adaptation to available time.

Individuals who do not attend the Eduscrum events (planning meeting, demo, retrospective) will get the corresponding decrease in their grade.

Licencia de Creative Commons
Diseño de Interfaces Web by Pedro Prieto is licensed under a Creative Commons Reconocimiento-CompartirIgual 4.0 Internacional License.