Prueba Programador Frontend

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:
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"
},
{
"id": "848531ca-0680-4d46-9cb4-d818458dd74f",
"descripcion": "segunda tarea",
}
]
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:
{
fechaVencimiento: string
}
Ejemplo:
{
descripcion:"Tarea para después",
fechaVencimiento:"2018-01-31"
}
Respuesta: se devuelve la tarea creada.

{
"id": "34f45b80-8b52-4a4d-a2ba-3fc9130720b1",
"descripcion": "Tarea para después",
}
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.

{
"id": "34f45b80-8b52-4a4d-a2ba-3fc9130720b1",
"descripcion": "Tarea para después de diciembre",
}
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.

Prueba Programador Frontend

Cargado por

Copyright:

Formatos disponibles

Prueba Programador Frontend

Cargado por

Información del documento

Descripción original:

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Prueba Programador Frontend

Cargado por

Copyright:

Formatos disponibles

Prueba Programador Frontend

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:

Git: Herramienta para control de versiones de software.

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

Servicios Web Disponibles

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

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

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

redirect_uri: this_url+ "/callback.html",

response_type: "id_token token",

scope:"openid profile api1",

var mgr = new Oidc.UserManager(config);

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

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:

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

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

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

/tareas/consultar Se consultan todas las tareas

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

Respuesta: se devuelve la tarea creada.

Respuesta: se devuelve la tarea creada.

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

Respuesta: El servicio no devuelve respuesta.

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

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

var xhr = new XMLHttpRequest();

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

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

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

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

Prerrequisito: El usuario debe estar autenticado.

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

Todas: Enviar solicitud al servicio para consultar todas las tareas

Puede ser posible realizar la consulta combinando las dos opciones:

También podría gustarte