Prueba Programador Frontend

Objetivo:

Evaluar los conocimientos y habilidades del candidato para el desarrollo de aplicaciones web para
ser ejecutadas en el navegador del cliente.

JavaScript: Conocimiento general del lenguaje, Manejo de Peticiones a servicios web, lógica de la
aplicación en el cliente

HTML5 y CSS: Diseño, desarrollo y presentación de la interface gráfica de usuario

Gulp: automatización de las tareas relacionadas con el desarrollo y despliegue como:

mover/copiar archivos de una carpeta a otra, eliminar archivos, reemplazar valores dentro de
archivos en el proceso de construcción, minimizar código, sincronizar el navegador cuando se
modifica el código, validar la sintaxis

Git: Herramienta para control de versiones de software.

Tareas a Realizar
1. Crear una aplicación web cliente, que permita a los usuarios autorizados la gestión de sus
tareas: Consultar, Crear, Modificar, Borrar. (Ver Servicios Web Disponibles e Interface
Gráfica)

2. Incluir el archivo de configuración para la herramienta gulp, que permita realizar las tareas
de construcción y minimización del código de la aplicación.

3. Publicar el código dela aplicación en GitHub. Para su revisión y evaluación el código de la

aplicación debe ser publicado en un repositorio de GitHub.

Servicios Web Disponibles

La aplicación debe utilizar los servicios de autenticación y gestión de tareas descritos a
continuación:

Servicio de Autenticación: la autenticación se realiza por medio de los servicios

suministrados por IdentityServer4 y hospedados en https://drsgps.co/identity
Desde un cliente escrito en JavaScript se puede utilizar la librería oidc-client.js

var authority_url = "https://drsgps.co/identity"; // IdentityServer4

var this_url = "http://localhost:5003"; // entorno de desarrollo

var config = {

authority: authority_url,

client_id: "js",

redirect_uri: this_url+ "/callback.html",

response_type: "id_token token",

scope:"openid profile api1",

post_logout_redirect_uri : this_url+"/index.html",

};

var mgr = new Oidc.UserManager(config);

El valor de puerto en el entorno desarrollo puede ser uno de los siguientes: 5000,5001, 5002,5003,
8080, 9000.

Más información sobre la integración entre oidc-client.js e IdentityServer4 en

https://identityserver4.readthedocs.io/en/release/quickstarts/7_javascript_client.html

Servicio Gestión de Tareas: proporciona los métodos necesarios para la consultar, crear,
actualizar, y borrar las tareas de los usuarios autorizados.

La URL base para todos los métodos en este servicio es https://drsgps.co/protectedapi

La estructura de las tareas de los usuarios está definida de la siguiente forma:

{
fechaCreacion: string,
id: string,
descripcion: string,
finalizada: bool,
fechaVencimiento: string
}
Para los campos fechaCreacion y fechaVecimiento la cadena representa la fecha en UTC de
Creación/Finalización de la tarea en formato: “YYYY-mm-DDTHH:MM:SSZ”

Ejemplo:
{
fechaCreacion: "2017-11-03T15:58:09.1876311Z",
"id": "c507340a-11e4-48dc-b550-e0cc66e133a7",
descripcion: "nueva tarea",
finalizada: false,
fechaVencimiento: "2017-12-31T00:00:00"
}

Consultar de Tareas

Método: GET

URL_API: /tareas/consultar

Parámetros: De manera opcional se puede pasar un objeto con la siguiente estructura:

descripcion: string,

finalizada:bool

Ejemplos:

/tareas/consultar?descripcion=importante Se consultan las tareas cuyo descripcion contienen el

término “importante”

/tareas/consultar?descripcion=importante&finalizada=false Se consultan las tareas cuyo

descripcion contienen el término “importante” y no han sido finalizadas.

/tareas/consultar Se consultan todas las tareas

Respuesta: se devuelve un arreglo con las tareas que satisfagan las condiciones enviadas en la
consulta.
[
{
"fechaCreacion": "2017-11-03T16:11:01.2304059Z",
"id": "5f35ffc8-ad5a-43e5-b237-171f16347a58",
"descripcion": "nueva tarea",
"finalizada": false,
"fechaVencimiento": "2017-12-31T00:00:00"
 },
{
"fechaCreacion": "2017-11-03T16:14:28.4209348Z",
"id": "848531ca-0680-4d46-9cb4-d818458dd74f",
"descripcion": "segunda tarea",
"finalizada": false,
"fechaVencimiento": "2017-11-25T00:00:00"
}
]

Crear de Tarea

Método: POST

URL_API: /tareas/crear

Parámetros: se debe enviar un objeto con la descripción y fecha de vencimiento de la tarea de

acuerdo con la siguiente estructura:
{
descripcion: string,
fechaVencimiento: string
}
Ejemplo:
{
descripcion:"Tarea para después",
fechaVencimiento:"2018-01-31"
}

Respuesta: se devuelve la tarea creada.

{
"fechaCreacion": "2017-11-03T16:24:32.3110776Z",
"id": "34f45b80-8b52-4a4d-a2ba-3fc9130720b1",
"descripcion": "Tarea para después",
"finalizada": false,
"fechaVencimiento": "2018-01-31T00:00:00"
}

Actualizar de Tarea

Método: POST

URL_API: /tareas/actualizar

Parámetros: se debe enviar un objeto información que el usuario desea actualizar de acuerdo con
la siguiente estructura:
{
id: string, // obligatorio
descripcion: string, // opcional
fechaVencimiento: string, // opcional
finalizada: bool //opcional
}
Ejemplo:
{
"id": "34f45b80-8b52-4a4d-a2ba-3fc9130720b1",
descripcion:"Tarea para después de diciembre"
}

Respuesta: se devuelve la tarea creada.

{
"fechaCreacion": "2017-11-03T16:24:32.3110776Z",
"id": "34f45b80-8b52-4a4d-a2ba-3fc9130720b1",
"descripcion": "Tarea para después de diciembre",
"finalizada": false,
"fechaVencimiento": "2018-01-31T00:00:00"
}

Borrar de Tarea

Método: POST

URL_API: /tareas/borrar

Parámetros: se debe enviar el id de la tarea que el usuario desea borrar.

{
id: string, // obligatorio
}

Ejemplo:
{
"id": "34f45b80-8b52-4a4d-a2ba-3fc9130720b1"
}

Respuesta: El servicio no devuelve respuesta.

Observación: Debido a que el usuario debe estar previamente autenticado en todas las peticiones
es necesario incluir el “access_token” del usuario. Por ejemplo, para consultar las tareas se
requiere:

var api_url = "https://drsgps.co/protectedapi"

mgr.getUser().then(function (user) {

var url = api_url +"/tareas/consultar";

var xhr = new XMLHttpRequest();

 xhr.open("GET", url);

xhr.onload = function () {

//

xhr.setRequestHeader("Authorization", "Bearer " + user.access_token);

xhr.send(null);

});

Interface Gráfica.
Pantalla de Inicio

Debe aparecer cuando el usuario ingresa a la url de la aplicación (http:localhost:5003 en desarrollo

o https://drsgps.co/jsclient en producción)

Al dar clic sobre el botón de “Iniciar Sesión” el usuario debe ser redireccionado a la página de
autenticación de IdentityServer4, de acuerdo con lo descrito en “Servicio de Autenticación “

Para efectos de las pruebas usuario: alice, clave: password

Después de autenticarse en el sistema, el IdentityServer4 solicita al usuario el consentimiento para
que la aplicación obtenga su información:

Obtenido el consentimiento del usuario, este es redireccionado a la página establecida en la

configuración de la variable post_logout_redirect_uri de Oidc.UserManager

( https://drspgs.co/clientjs/index.html o localhost:5003/index.html)
Pantalla de Gestión de Tareas

Prerrequisito: El usuario debe estar autenticado.

En esta pantalla de despliegan todas las actividades relacionadas con la gestión de tareas:

Ver las tareas: Consultar las tareas del usuario usando el servicio de gestión de tareas y mostrar las
fichas de cada tarea. Está acción se realiza de manera automática después de la autenticación del
usuario.
Crear Tareas (Nueva Tarea)

Actualizar Tareas
Borrar Tareas

Buscar Tareas (Filtrar por “descripcion”, o estado de finalización (“finalizadas”, “pendientes”,

“todas”)

Todas: Enviar solicitud al servicio para consultar todas las tareas

Finalizadas: Enviar solicitud al servicio para consultar tareas con estado Finalizada {finalizada: true}

Pendientes: Enviar solicitud al servicio para consultar tareas con estado Pendiente {finalizada:
false}

Descripcion: Enviar solicitud al servicio para consultar las tareas que contienen el texto escrito en
cajón “descripcion” . {descripcion:”Tarea fin de año”}

Puede ser posible realizar la consulta combinando las dos opciones:

{descripcion:” Tarea fin de año”, finalizada: true} = Consultar tarea que contiene el texto “tarea fin
de año” en la descripción y que están finalizadas.