El core del desarrollo

Sprint 3 — Eventos

VACmatch
3 min readFeb 28, 2016

Este tercer sprint se ha centrado principalmente en la gestión de eventos con la idea de hacer su gestión lo más genérica posible para que fuese funcional para múltiples deportes.

Eventos multideporte

Se ha creado una clase Sport y cada deporte la implementa para desarrollar una serie de métodos que permiten a la aplicación, en función del deporte que utilice, mostrar unos eventos u otros, mostrar diferentes iconos o tener una lógica diferente para calcular el resultado del encuentro.

Para esto mantenemos una Store muy sencilla que se espera que se modifique cuando un árbitro haga login con sus credenciales de una federación ya que cada federación es de un deporte en concreto.

let SportStore = Reflux.createStore({
listenables: SportActions,
init: function () {
this.state = new Soccer()
},
getInitialState: function () {
return this.state
},
onUpdateSport: function (newSport) {
this.state = newSport
this.trigger(this.state)
}
})

Eventos deportivos o de control

Se han creado dos tipos de eventos, Sport que modelan las actividades propias del juego como un gol o una falta o Control que modelan los diversos estados de control como el cambio de parte, el comienzo y fin del encuentro, etc y todos los eventos heredan de ellos.

Rediseño de la DB

El proyecto surgió a partir de una base de datos relacional que se está implementando en paralelo en el backend de VACmatch por lo que ha sido necesario modificar dicho diseño para adaptarlo a una base de datos no relacionar como es PouchDB en el navegador.

Otras funciones implementadas

La aplicación también permite listar eventos ordenados cronológicamente, con los últimos más arriba, y por supuesto borrarlos por si el árbitro se ha equivocado.

También se han añadido eventos con el motivo por el cual se producido, muy útil para indicar el motivo de una tarjeta roja por ejemplo así como la posibilidad de seleccionar de entre todos los jugadores de un equipo, aquellos que han asistido al encuentro y que son los únicos que se muestran para añadir eventos.

Sprint 4 — Auth

Para realizar la autenticación en una SPA con React ha sido necesario crear un componente intermedio que recibe los componentes que debe renderizar y realice la autenticación.

import React from ‘react’
import Reflux from ‘reflux’
import { History } from ‘react-router’
import AuthStore from ‘../../stores/AuthStore’
import urls from ‘../../api/urls’
import config from ‘../../api/config’
export default (ComposedComponent) => {
let AuthenticatedComponent = React.createClass({
mixins: [
Reflux.connect(AuthStore, ‘auth’),
History
],
componentWillMount: function (transition) {
if (config._env !== ‘development’) {
// This method is called before transitioning to this component.If the user is not logged in, we’ll send him or her to the Login page.
if (!AuthStore.isLoggedIn()) {
this.history.pushState(null, urls.login.show)
}
}
},
render: function () {
return (
<ComposedComponent
{…this.props} />
)
}
})
return AuthenticatedComponent
}

Para aquellos componentes que deban ser autenticados, deben ser exportados dentro de un AuthenticatedComponent para que la aplicación pueda realizar dicha comprobación.

module.exports = AuthenticatedComponent(Report)

Crear y editar encuentros

Se ha refinado esta feature y añadido un pequeño menú en el que añadir los diversos campos del mismo, crear nuevos equipos si no existen y editarlos de forma sencilla para que un árbitro que no haya descargado el acta de su partido, pueda crearla manualmente.

Sprint 5 — Firmas

La aplicación permite que los implicados en un encuentro puedan firmar el acta, dando fé de que se encuentran de acuerdo con lo que en ella se encuentra escrito.

Firmado con PIN

Tanto árbitro como jugadores dispondrán de su propio código PIN interno para firmar las actas que se encontrará cifrado y que la aplicación descargará para todos los jugadores y árbitros implicados en el partido, con el fin de realizar la comprobación incluso de forma offline.

Incidencias de un acta

El árbitro también dispone de un pequeño campo de texto en el que añadir las incidencias o imprevistos surgidos a lo largo del encuentro.

--

--