Vamos a explicar los pormenores de una webapp de gestión privada.  Una webapp de este tipo está diseñada para ser accesible desde cualquier navegador, sin embargo, suelen redirigirte siempre a un acceso de login y algunas veces carecen incluso de registro, ya que los perfiles que pueden acceder a al contenido son creados de manera externa y supervisados por un administrador. Como no esperan una navegación externa, rara vez incluyen publicidad.

Los problemas que la webapp debe resolver son: Albergar un generador de números aleatorios para que los streamer (creador de contenido) puedan realizar sorteos. Generar una base de datos segura que el administrador pueda implementar sin necesitad de ser programador o tocar el código de la aplicación, generar un texto que contiene variables de múltiples tablas para crear un documento único.  Vamos a resolver cada una de estas partes por separado:

El generador de números aleatorios.

En el ejemplo que vamos a ver (código completo en el enlace git hub), si hay un pequeño apartado para que los usuarios externos puedan registrarse y modificar sus datos en caso de ser necesario (lo veremos mas adelante). También los invitados sin registrar pueden acceder al generador de números aleatorios.

Para ello vamos a contener en la página donde la web app nos recibe (en este caso en el método Index del controlador Home) el siguiente script:

   <script type=»text/javascript»>

        function getRandomArbitrary() {

            var max;

            max = form1.maxNumber.value;

            form1.randomPrimero.value = (Math.floor(Math.random()*max)) +1;

            form1.randomSegundo.value = (Math.floor(Math.random()*max)) +1;

            form1.randomTercero.value = (Math.floor(Math.random()*max)) +1;

            form1.randomCuarto.value = (Math.floor(Math.random()*max)) +1;

            form1.randomQuinto.value = (Math.floor(Math.random() * max)) + 1;

            document.getElementById(«mensaje»).hidden = false;;

            return (Math.floor(Math.random() * max)) + 1;

        }

    </script>

Y para llamar a esta función y generar los 5 números aleatorios en la parte del body, definiremos el botón y las cinco casillas a las que hacemos referencia:

<input type=»button» value=»Good Luck!» onclick=»getRandomArbitrary()» class=»btn btn-info» style=»width: 300px»/>           

            <input type=»number» id=»randomPrimero» name=»randomPrimero» disabled value=»1″ class=»btn btn-secondary text-center» style=»width: 65px» />

            <input type=»number» id=»randomSegundo» name=»randomSegundo» disabled value=»2″ class=»btn btn-secondary text-center» style=»width: 65px» />

            <input type=»number» id=»randomTercero» name=»randomTercero» disabled value=»3″ class=»btn btn-secondary text-center» style=»width: 65px» />

            <input type=»number» id=»randomCuarto» name=»randomCuarto» disabled value=»4″ class=»btn btn-secondary text-center» style=»width: 65px» />

            <input type=»number» id=»randomQuinto» name=»randomQuinto» disabled value=»5″ class=»btn btn-secondary text-center» style=»width: 65px» /><br />

            <p id=»mensaje» hidden> Not a winner? Better luck next time! </p>

Generar una base de datos segura que el administrador pueda implementar sin necesitad de ser programador o tocar el código de la aplicación.

Para ello hay que tener en cuenta establecer autorizaciones a los controladores y métodos a los que solo pueden acceder los administradores. En nuestro caso la gestión de seguridad viene de la librería Microsoft.AspNetCore.Authorization; por lo que antes del controlador o método que vamos a autorizar añadimos:

        [Authorize(Roles = «Admin»)]

Por otro lado, para que el administrador pueda implementar cualquier desplegable en la creación de los registros para los que está hecha la base de datos, crearemos un controlador para que se puedan crear, editar, consultar o borrar cada uno de ellos en cada desplegable. Por lo que existirá un controlador con todas las operaciónes CRUD por cada uno de los desplegables de la tabla que registra las recompensas de los sorteos. De tal forma que un administrador puede gestionar el contenido de la interfaz de los desplegables sin tener que añadirlos a través de un gestor como MySQL.

Generar un texto que contiene variables de múltiples tablas para crear un documento único.

Finalmente, para resolver este texto, podemos crearnos un ViewModel (Un modelo con la combinación de atributos de otros modelos, creado explícitamente para una vista o una función) o importar el modelo del que vayamos a utilizar mas datos y calcular el resto de datos de forma externa.

En este caso hemos elegido la segunda opción por lo que además de la consulta normal (y todos sus includes accesibles), necesitaremos un ViewBag. El código del método del controlador quedaría así:

public async Task<IActionResult> Certified(int? id)

        {

            var reward = await _context.Rewards.Include(x => x.RewardType)

                .Include(x => x.Template).Include(x => x.Castaway).Include(x => x.ClaimedBy)

                .Include(x => x.RewardComposition).Include(x => x.RewardStatus)

                .Where(x => x.RewardId == id).SingleOrDefaultAsync();           

var pepe = await _context.Rewards.Where(x => x.RewardType == reward.RewardType).ToListAsync();

            ViewBag.orderNumber = pepe.IndexOf(reward) +1;

            return View(reward);

        }


Por lo que finalmente la vista contendrá los datos de “reward” mas los contenidos en el “ViewBag.orderNumber”.

Con esto quedaría cubiertas todas las necesidades del cliente en la webapp.


Autor/a: Javier Muñoz Vaquerizo

Curso: Desarrollo Web Full Stack, MultiCloud y Multiplataforma

Centro: Tajamar

Año académico: 2021-2022

Código / Recursos utilizados / Otros datos de interés:
https://github.com/JavierEnTajamar/Entrega2Tajamar

Leave a Comment

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.