Diferencias

Muestra las diferencias entre dos versiones de la página.

Enlace a la vista de comparación

Ambos lados, revisión anterior Revisión previa
Próxima revisión 		Revisión previa
cap:aurelia:memorama [2017/09/24 21:47]
user 		cap:aurelia:memorama [2018/04/24 11:15] (actual)
cesar.vega
Línea 728: Línea 728:
    
     obtenerCartas(numPares:​ number): Promise<​any>​ {     obtenerCartas(numPares:​ number): Promise<​any>​ {
-        return new Promise<​any>​(resolve =&​gt; ​{ +        return new Promise<​any>​(resolve => { 
-            let cartasDesordenadas = cartas.sort(c =&​gt; ​Math.random() - 0.364);+            let cartasDesordenadas = cartas.sort(c => Math.random() - 0.364);
             let cartasSeleccionadas = cartasDesordenadas.slice(0,​ numPares);             let cartasSeleccionadas = cartasDesordenadas.slice(0,​ numPares);
             cartasSeleccionadas = cartasSeleccionadas.concat(cartasSeleccionadas);​             cartasSeleccionadas = cartasSeleccionadas.concat(cartasSeleccionadas);​
-            cartasDesordenadas = cartasSeleccionadas.sort(c =&​gt; ​Math.random() - 0.472);+            cartasDesordenadas = cartasSeleccionadas.sort(c => Math.random() - 0.472);
             resolve(JSON.parse(JSON.stringify(cartasDesordenadas)));​             resolve(JSON.parse(JSON.stringify(cartasDesordenadas)));​
         });         });
Línea 741: Línea 741:
 let cartas = []; let cartas = [];
    
-for (var i = 1; i &​lt; ​numCartas; i++) {+for (var i = 1; i < numCartas; i++) {
     let carta = {     let carta = {
         id: i,         id: i,
Línea 755: Línea 755:
 <code html> <code html>
 <​template>​ <​template>​
-  <require from="​./​carta"​&​gt;&​lt;​/​require>​+  <require from="​./​carta"​></​require>​
   <button click.delegate="​nuevoJuego()"​ type="​button">​Nuevo Juego</​button>​   <button click.delegate="​nuevoJuego()"​ type="​button">​Nuevo Juego</​button>​
   <ul>   <ul>
Línea 860: Línea 860:
   }   }
    
-  aurelia.start().then(() =&​gt; ​aurelia.setRoot());​+  aurelia.start().then(() => aurelia.setRoot());​
 }</​code>​ }</​code>​
  
Línea 947: Línea 947:
    
     constructor(private ea: EventAggregator) {     constructor(private ea: EventAggregator) {
-        this.ea.subscribe(eventos.JuegoIniciado,​ msg =&​gt; ​{+        this.ea.subscribe(eventos.JuegoIniciado,​ msg => {
             this.horaInicio = new Date();             this.horaInicio = new Date();
             this.horaFin = null;             this.horaFin = null;
         });         });
-        this.ea.subscribe(eventos.ParAcertado,​ msg =&​gt; ​{+        this.ea.subscribe(eventos.ParAcertado,​ msg => {
             this.paresAcertados++;​             this.paresAcertados++;​
             if (this.paresAcertados == 8) {             if (this.paresAcertados == 8) {
Línea 1001: Línea 1001:
    
     constructor(private api: WebApi, private ea: EventAggregator) {     constructor(private api: WebApi, private ea: EventAggregator) {
-        this.ea.subscribe(eventos.JuegoFinalizado,​ msg =&​gt; ​{+        this.ea.subscribe(eventos.JuegoFinalizado,​ msg => {
             this.juegoIniciado = false;             this.juegoIniciado = false;
         });         });
Línea 1009: Línea 1009:
         this.juegoIniciado = false;         this.juegoIniciado = false;
         this.api.obtenerCartas(this.numPares)         this.api.obtenerCartas(this.numPares)
-            .then(_cartas =&​gt; ​{+            .then(_cartas => {
                 this.cartas.length = 0;                 this.cartas.length = 0;
                 this.cartas = _cartas;                 this.cartas = _cartas;
Línea 1094: Línea 1094:
    
     constructor(private ea: EventAggregator) {     constructor(private ea: EventAggregator) {
-        this.ea.subscribe(eventos.ValidandoPar,​ msg =&​gt; ​{+        this.ea.subscribe(eventos.ValidandoPar,​ msg => {
             this.estaValidando = msg.validando;​             this.estaValidando = msg.validando;​
         });         });
Línea 1148: Línea 1148:
    
     constructor(private api: WebApi, private ea: EventAggregator) {     constructor(private api: WebApi, private ea: EventAggregator) {
-        this.ea.subscribe(eventos.JuegoFinalizado,​ msg =&​gt; ​{+        this.ea.subscribe(eventos.JuegoFinalizado,​ msg => {
             this.juegoIniciado = false;             this.juegoIniciado = false;
         });         });
-        this.ea.subscribe(eventos.CartaAbierta,​ msg =&​gt; ​{+        this.ea.subscribe(eventos.CartaAbierta,​ msg => {
             if (!this.juegoIniciado) {             if (!this.juegoIniciado) {
                 this.juegoIniciado = true;                 this.juegoIniciado = true;
Línea 1168: Línea 1168:
         this.juegoIniciado = false;         this.juegoIniciado = false;
         this.api.obtenerCartas(this.numPares)         this.api.obtenerCartas(this.numPares)
-            .then(_cartas =&​gt; ​{+            .then(_cartas => {
                 this.cartasAbieras.length = 0;                 this.cartasAbieras.length = 0;
                 this.cartas.length = 0;                 this.cartas.length = 0;
Línea 1182: Línea 1182:
             this.ea.publish(new eventos.ValidandoPar(false));​             this.ea.publish(new eventos.ValidandoPar(false));​
         } else {         } else {
-            setTimeout(e =&​gt; ​{ +            setTimeout(e => { 
-                pares.map(carta =&​gt; ​carta.cerrar());​+                pares.map(carta => carta.cerrar());​
                 this.ea.publish(new eventos.ValidandoPar(false));​                 this.ea.publish(new eventos.ValidandoPar(false));​
             }, 1000);             }, 1000);
Línea 1221: Línea 1221:
    
     constructor(private ea: EventAggregator) {     constructor(private ea: EventAggregator) {
-        this.ea.subscribe(eventos.NuevaPartida,​ msg =&​gt; ​{+        this.ea.subscribe(eventos.NuevaPartida,​ msg => {
             this.horaFin = this.horaInicio = null;             this.horaFin = this.horaInicio = null;
             this.paresAcertados = 0;             this.paresAcertados = 0;
         });         });
-        this.ea.subscribe(eventos.JuegoIniciado,​ msg =&​gt; ​{+        this.ea.subscribe(eventos.JuegoIniciado,​ msg => {
             this.horaInicio = new Date();             this.horaInicio = new Date();
             this.horaFin = null;             this.horaFin = null;
         });         });
-        this.ea.subscribe(eventos.ParAcertado,​ msg =&​gt; ​{+        this.ea.subscribe(eventos.ParAcertado,​ msg => {
             this.paresAcertados++;​             this.paresAcertados++;​
             if (this.paresAcertados == 8) {             if (this.paresAcertados == 8) {
Línea 1356: Línea 1356:
  
 👍 👍
 +
 +Para terminar el tutorial haremos el consumo de las posiciones por medio de una API la cual vamos a desarrollar en ASP.NET Core usando WebApi, esta API nos servirá para obtener la lista de posiciones y para registrar nuevas posiciones.
 +
 +Las posiciones las vamos a registrar en un archivo en el servidor, pero para hacerlo mas interesante vamos a utilizar inyección de dependencias por si en un futuro queremos cambiar por algún gestor de bases de datos.
 +
 +Para registrar una posición necesitamos saber quien es el jugar de la partida, y para esto lo haremos por medio del plug-in Dialog que nos ofrece Aurelia.IO, sin mas que agregar, empezemos.
 +
 +===== La API =====
 +
 +Para agregar la API primero tendremos que configurar nuestro proyecto, pero con VS2017 es muy sencillo, basta con:
 +
 +  - Agregaremos en la raíz del proyecto una carpeta de nombre **api**: <code bash>- api</​code>​
 +  - Dentro de la carpeta agregaremos un nuevo controlador:​ {{ VS14.png }}
 +   - Nos saldrá una ventana y seleccionaremos dependencias minimas: {{ VS15.png }}
 +   - Al terminar la configuración nos saldra un archivo de texto, habrá que seguir esas instrucciones para que quede configurado.
 +    - Para el paso 1, copiamos el texto y descargamos el proyecto haciendo clic derecho sobre el mismo, y seleccionando la opción **Descargar el proyecto**.
 + - Hacemos clic derecho sobre el proyecto y seleccionaremos **Editar {nombre del proyecto}.csproj**.
 + - Nos vamos al final del archivo y antes de la cierre del elemento **Project** pegamos el texto copiado. {{ VS18.png }}
 + - Guardamos el archivo y lo cerramos.
 + - Hacemos clic derecho sobre el proyecto y seleccionaremos la opción **Volver a cargar el proyecto**.
 + - Para el paso 2.1, despues de pegar el texto es probable que algunas instrucciones las remarque con rojo.
 + - Ponemos el cursor sobre el texto y presionamos las teclas **CTRL + .**
 + - Del menú contextual seleccionaremos <​code>​using Microsoft.Extensions.Configuration;</​code>​
 +   - La instrucción del punto 2.3 la vamos a modificar un poco, ya que nosotros solo usaremos la WebApi y no nos interesa el ruteo tradicional del MVC, nuestro código quedaría asi: <code csharp>​app.UseMvc();</​code>​
 +  - La primera vez que agregamos el controlador realmente nos configura el proyecto, por lo tanto haremos de nueva cuenta el agregado del controlador,​ haciendo los mismos pasos: {{ VS14.png }}
 +  - En esta ocasión la ventana que nos abre es distinta, en ella seleccionaremos **Controlador de API: en blanco**: {{ VS16.png }}
 +  - Pondremos de nombre ListaPosicionesController y le damos **Agregar**:​ {{ VS17.png }}
 +
 +Ahora agregaremos la clase Posicion la cual tendra el nombre de la persona y el tiempo en el que completó el memorama, para eso haremos lo siguiente:
 +
 +  - Agregamos una nueva carpeta en la raíz del proyecto llamada **modelos**:​ <code bash> - modelos </​code>​
 +  - Dentro de la carpeta agregaremos una nueva clase de nombre **Posicion**. {{ VS19.png }}
 +
 +Ahora aplicaremos lo necesario para hacer la inyección de dependencias,​ primero tendremos que crear una carpeta donde pondremos nuestra interface y la clase que va implementar la interface, despues habra que hacer la configuración.
 +
 +==== El repositorio ====
 +
 +El repositorio es la clase la cual nos servirá para almacenar las posiciones en el archivo de texto, para hacer que funcione dentro de la inyección de dependencias vamos aplicar el patrón de repositorio,​ para hacer esto haremos lo siguiente:
 +
 +1. Crearemos una carpeta en la raíz del proyecto y le llamaremos **repositorios**.
 +<code bash>
 +- repositorios
 +</​code>​
 +
 +2. Agregamos una interface llamada **IPosicionRepositorio** en la carpeta **\repositorios**:​
 +<code csharp>
 +using System;
 +using System.Collections.Generic;​
 +using System.Linq;​
 +using System.Threading.Tasks;​
 +
 +namespace memorama.repositorios
 +{
 +  public interface IPosicionRepositorio
 +  {
 +    List<​modelos.Posicion>​ ObtenerPosiciones();​
 +    void GuardarPosicion(modelos.Posicion posicion);
 +  }
 +}
 +</​code>​
 +
 +3. Agregamos una clase llamada **PosicionArchivoRepositorio** ​ en la misma carpeta:
 +<code csharp>
 +using System;
 +using System.Collections.Generic;​
 +using System.Linq;​
 +using System.Threading.Tasks;​
 +using memorama.modelos;​
 +
 +namespace memorama.repositorios
 +{
 +  public class PosicionArchivoRepositorio : IPosicionRepositorio
 +  {
 +    public void GuardarPosicion(Posicion posicion)
 +    {
 +      throw new NotImplementedException();​
 +    }
 +
 +    public List<​Posicion>​ ObtenerPosiciones()
 +    {
 +      throw new NotImplementedException();​
 +    }
 +  }
 +}
 +</​code>​
 +