Como recorrer y ordenar un Array en Diagramas de Flujo

En esta nueva entrada vamos a aprender y resolver nuevos retos de programacion a través de los diagramas de flujo.

Iniciemos con uno sencillo, calcular el cuadrado de un numero:

1. Leemos un numero
2. Creamos una nueva caja de operaciones y en ella definimos una variable cuadrado, y le asignamos el valor de la multiplicación del numero por el mismo para calcular el cuadrado.
3. Imprimimos el valor del cuadrado
4. Capturamos si desea continuar
5. Preguntamos si la respuesta es S, si es S, lo enviamos a que capture un nuevo numero y vuelva a calcular el resultado.
6. Si es no, entonces terminamos.


Utilización de Bucles para ordenar

Un bucle es un grupo de instrucciones que se repiten un numero determinado de veces, el mas representativo de los bucles es la instrucción for, pero existen tambien while y do while.

El enunciado del reto es: Captura 50 números, ordénelos y muestre los 5 números mayores y los 5 menores.

1. Definimos una Array de una longitud de 50 elementos, para esto definimos una caja de operaciones, el array lo llamamos Numeros
2. Creamos un ciclo for, o un bucle for, en donde creamos una variable i que inicia en cero, valida que sea menor a 50 y se incremente de 1 en 1. 
3. Hacemos la captura del numero y lo almacenamos en N.
4. Almacenamos el numero capturado en el Array Numeros en la posición i, que es la que tenga el Bucle.
5. Cuando finaliza el ciclo, esto es en el conector A, debemos ordenar el array, para ello creamos un nuevo bucle for.
6. En este declaramos una variable TMP en la cual almacenamos el valor del array en la posición en valla la variable i
7. creamos una variable TPOS que inicializamos en cero (0).
8. Creamos un segundo bucle for, que inicia en el valor de i mas 1
9. Preguntamos si el valor de TMP es mayor que Numeros en la posición j
10. Si dice que No, en TMP almacenamos el valor del array en la posición j, y en TPOS, almacenamos el valor de j.
11. Continuamos el bucle.
12.Si la respuesta es SI a la pregunta TMP es mayor que Numeros en la posición j, entonces continuamos con la siguiente posición o iteración del ciclo.
13. Cuando termine el ciclo, preguntamos si TPOS es igual a cero (0).
14. Si, es SI, entonces lo enviamos que continúe el bucle for a la siguiente iteración.
15. Si es NO, entonces TMP lo hacemos igual a Numeros en la posición i
16. Numeros en la posición i lo hacemos igual a Numeros en la posición TPOS
17. Numeros en la posición TPOS lo hacemos igual al contenido de TMP
18. Lego en el conecto B de la imagen, termina el segundo bucle.
19. luego imprimimos los 5 números mayores del array.
20. Imprimimos los 5 números menores .
21. Finalizamos.


Calcular la Edad de una Factura

Ahora vamos a calcular la edad de una Factura, para esto, capturamos el numero de la factura, el cliente y la fecha de la factura.

Para esto, seguimos los siguientes pasos
1. Definimos un Array que llamamos Meses de 12 posiciones de longitud o tamaño.
2. Llenamos el array con los valores de los números de los dias en cada mes del año.
3. capturamos o pedimos los datos de la factura.
4, creamos una caja de operaciones, en la cual definimos una variable FechaActual, en la cual realizamos la operación de multiplicar el año por 365 y le sumamos el dia de la fecha.
5. Creamos una variable que llamamos AcumDiaMes y lo hacemos igual a cero.
6. Creamos un bucle for, aqui en AcumDiaMes acumulamos los dias de los meses, este bucle ira desde cero hasta el valor del mes actual.
7. En el operador A, realizamos los mismos pasos pero para la fecha de la factura
8. creamos una caja de texto después del bucle, en la cual calculamos la edad de la factura en una variable que llamamos EdadFactura, luego imprimimos el resultado.
9. Fin.

Calcular si un año es bisiesto o no

Para esto diseñamos el siguiente diagrama de flujo

1. Capturamos los datos, "Digite el año" 
2. creamos una variable que llamamos Bisiesto y la igualamos a cero.
3. en esta variable Bisiesto, calculamos el modulo o Mod de la división del año entre 4, Bisiesto = Anio MOD 4
4. Preguntamos  si bisiesto es mayor a 0
5. Si es cierto, entonces imprimimos el año no es bisiesto.
6. Si es falso, entonces mostramos un mensaje indicando que el año es bisiesto.
7. Finalizamos.

Crear una Vista desde Cero, ASP.NET MVC

En algunas ocasiones necesitamos crear una vista que no esta ligada a un modelo, como  hemos estado realizando en talleres anteriores.

Una de las cosas a recordar que Microsoft utiliza de manera por defecto Razor, que básicamente lo que significa es que podemos utilizar el lenguaje C# o VB.NET como lenguaje de cliente, recuerden que por defecto el lenguaje de cliente para paginas web HTML es JavaScript.

No es el único motor para trabajar en nuestra vistas, existen otros por ejemplo: Spark, NHaml, Brail, StringTemplate o NVelocity,

Para trabajar con razor en nuestras vistas debemos utiliza el arroba como carácter de inicio de código, esto indica que lo que sigue es código C# y será interpretado como tal.

@{  var miVariable= 5; }

Si queremos realizar una pregunta lo haremos de la siguiente manera:

@if(miVariable >= 5)
{
     El valor es: @miVariable

}
else
{
     El valor no es valido!
}

Es importante indicar que el código Razor llega hasta la llave que cierra.


Podemos crear secciones de código Razor como el siguiente:

   

        @foreach (var i = 1; i < 32; i++ )
        {
           
• El dia es @i

        }
   

Aqui Creara los ítems de una lista no ordenada con los números del 1 al 31. Una de las cosas a entender es que Razor nos permite incluir lógica en la vista con código HTML como en este ejemplo.
Para crear una vista necesitamos de un Controlador, al controlador le colocamos o creamos nuestra acción. 

Vamos a crear una acción en el controlador, esta acción la llamaremos NuevaVista, en esta acción vamos a crear unas variable de tipo anónimo, con esto no creamos la clase como tal, luego adicionamos esto a una colección genérica con lo cual pasaremos los datos a la vista desde el controlador a través del objeto ViewBag.

Vamos a crear una clase de que llamaremos Mes en el mismo controlador, la clase se vera de la siguiente manera:

    public class Mes
    {
        public int Id { get; set; }
        public string NombreMes { get; set; }
    }

Entonces, en nuestro controlador crearemos una nueva acción que quedara así:

        public ActionResult NuevaVista()
        {
            ViewBag.ListaMeses = new List() {
            new Mes { Id = 1, NombreMes = "Enero" },
            new Mes { Id = 2, NombreMes = "Febrero" },
            new Mes { Id = 3, NombreMes = "Marzo" },
            new Mes { Id = 4, NombreMes = "Abril" },
            new Mes { Id = 5, NombreMes = "Mayo"  },
            new Mes { Id = 6, NombreMes = "Junio" },
            new Mes { Id = 7, NombreMes = "Julio" },
            new Mes { Id = 8, NombreMes = "Agosto" },
            new Mes { Id = 9, NombreMes = "Septiembre" },
            new Mes { Id = 10, NombreMes = "Octubre" },
            new Mes { Id = 11, NombreMes = "Noviembre" },
            new Mes { Id = 12, NombreMes = "Diciembre" },
        };
            return View();
        }


Ahora vamos a crear la nueva vista.

Esto lo hacemos dando clic derecho sobre el nombre de la acción en el controlador, en el menú que nos aparece seleccionamos Add View, o Adicionar vista, esto nos mostrara la ventana de creación de las vistas:

Como se aprecia el nombre de la vista lo crea de acuerdo al nombre que se le haya colocado, el template de la vista es Empty o vacio, pero se puede seleccionar un template de los que ya conocemos que se generan de manera automática a un modelo.

Aqui es dar clic en el botón Add, y crear la vista.

Esta es la vista que se crea, ahora vamos a configurarla para que se pueda ver como deseamos.

Modificamos la vista para que se vea de la siguiente manera:


@{
    ViewBag.Title = "NuevaVista";
}

Nueva Vista

---

   

       

            Seleccione el mes:
       

       

            @Html.DropDownList("ListaMeses",
                    (SelectList)ViewBag.ListaMeses, 
                    new { @class = "from-control" });
       

       

   

Creamos un div con un style y le agregamos un alto a la vista de 360 pixeles, luego creamos un div con una clase de tipo row de bootstrap, lo mas importante es que utilizamos uno de los helpers de HTML y el control DropDownList que le pasamos los parametrs del nombre, que es el mismo del ViewBag, el segundo parámetro es el Viewbag con una conversión a un SelectList que nos permitirá mostrar la lista de datos.

Al ejecutar la vista veremos lo siguiente:

Ahora si desplegamos la lista, o sea el DropDownList, se vera asi:

De esta manera podremos crear desde cero nuestras vistas, o utilizar la plantilla que ya tiene Asp.net MVC.

Que lo disfruten!

Hasta la próxima.

ASP.NET MVC Modelos y DataAnnotations

Introducción a MVC DataAnnotations

DataAnnotations es la clase del framework de ASP.NET MVC que nos permite configurar las diferentes características de nuestros modelos para que se vean reflejados en las tablas de SQL Server u del motor de base de datos que estemos utilizando.

Es importante entender lo siguiente en una aplicacion ASP.NET MVC

• Ya incluye el framework Bootstrap de Twitter, para configuración de la UI, o interfaz de usuario.
• El proyecto ya tiene la referencia a Entity Framework de Microsoft, que abstrae el acceso al motor de base de datos y las sentencias T-SQL que nos permite acceder a la información del motor de base de datos, la ventaja de Entity Framework es que lo hacemos desde el propio lenguaje de programacion, en nuestro caso C#. 
• Crear una aplicacion Web con MVC es muy rápido, siempre y cuando sea sencilla, posteriormente veremos como se pueden crear de manera sencilla y mas ordenada estas aplicaciones.

La técnica que estamos utilizando en los datos se llama "Code First", el código primero, esto es, creamos las clases de modelos, las cuales se convertirán en las tablas de la base de datos, por eso es tan importante los DataAnnotations.

Lista de Anotaciones 

[Key]

Crea una llave primaria en la tabla de la base de datos, al momento de crear la vista no crea en la vista de creación pues es un campo auto numérico.

[Required]

Esto indica que el campo es requerido, no acepta nulos, esto tambien genera una validación en la vista de Creación  (Create) y la de edición (Edit) que el campo debe contener información. Es importante recalcar aqui que no se escribe código de validación por parte nuestra, esta validación la realiza el framework de manera automática.

[Display(Name="Texto a Mostrar")]

Esta anotación permite que el texto asociado a este campo, sea el que coloquemos en las comillas, pues podemos tener un campo llamado NombreProducto, por ejemplo, si lo dejamos asi, en la vista aparecerá de esa forma, si colocamos Display, se mostrara el texto que coloquemos nosotros entre las comillas, esto nos permitirá dar una mejor presentación a las vistas que hagamos.

[Range(50, 9999999)]

Esta anotación sirve para validar que el valor de un campo numérico este entre los valores mínimos y máximos que se definan aqui. En este ejemplo, el valor minimo es 50 y el valor máximo es 9.999.999, lo importante a recalcar aqui es que, con solo esta anotación se realiza la validación, sin necesidad de adicionar código pro parte de nosotros.

[DataType(DataType.Currency)]

Lo que hace esta anotación es que el valor lo interpreta como un valor monetario, lo que implica esto es que al momento de mostrar el valor lo mostrar en formato numérico, tambien es importante aqui que hay otros tipos de datos, como teléfonos, email, etc.

[StringLength(250)]

Esta anotación se utiliza con campos de tipo texto, string, en C#, con lo cual se indica que el campo en la tabla de la base de datos va a ser nvarchar o varchar del tamaño colocado entre los paréntesis de esta anotación.

Existen muchas otras anotaciones, incluso algunas de estas anotaciones que menciono aqui tienen otros atributos que nos permite configurar algunas otras cosas. Es importante que busque mas información acerca de ellas.

Taller Creando Relaciones con Entity Framework en Asp.Net MVC

Cree un proyecto de ASP.Net MVC 5 en VS2017

Coloque un nombre a su solución y de clic en el botón Aceptar o OK.

Aparece la ventana siguiente:

Seleccione la opción MVC como aparece en la imagen, y presione el botón Aceptar.

Esto generara una aplicación MVC con un controlador Home, ahora vamos a crear los siguientes modelos para poder realizar el aplicativo que queremos. En la carpeta de Model vamos a iniciar a crear nuestros modelos que son las tablas e la base de datos.

Creamos la nueva clase

Creamos la clase Producto

public class Producto

{

    [Key]

    public int Id { get; set; }

    [Required]

    [MaxLength(150)]

    [Display(Name = "Nombre Producto")]

    public string NombreProducto { get; set; }

    [Required]

    [Display(Name = "Unidad")]

    public int UnidadId { get; set; }

    [Required]

    [Display(Name = "Existencia")]

    public float Stock { get; set; }

    [Required]

    [Display(Name = "Proveedor")]

    public int ProveedorId { get; set; }

    [Required]

    [Range(50,999999999)]

    [Display(Name = "Precio Unitario")]

    public decimal PrecioUnitario { get; set; }

    [Display(Name = "Fecha Ultima Compra")]

    [DataType(DataType.Date)]

    public DateTime UltimaCompra { get; set; }

    [ForeignKey("UnidadId")]

    public Unidad Unidad { get; set; }

}

Como el id de unidad es la llave foránea, debe nombrarse como el nombre de la entidad o tabla y luego el id, de esta manera entity framework crea la relación, además hay que crear una propiedad de navegación que se crea al final y se decora con ForeignKey y el nombre de la propiedad UnidadId,

Vamos a adicionar el using para que nos funcione Key.

Colocamos el mouse y nos aparece el mensaje, damos clic en el bombillo que aparece para nos muestre las opciones.

Damos clic en la primera using System.ComponentModelAnnotations.

Para la propiedad UnidadId colocamos lo siguiente para establecer la relación entre las tablas de producto y unidad.

Aquí toca adicionar el using Schema de DtaAnnotations para que nos funcione el ForeignKey, establece la relación entre dos tablas o modelos de entity framework, entre paréntesis como parámetro ira el nombre de l modelo, en este caso Unidad:

Los modelos ahora quedan de la siguiente manera:

Producto:

public class Producto

{

    [Key]

    public int Id { get; set; }

    [Required]

    [MaxLength(150)]

    [Display(Name = "Nombre Producto")]

    public string NombreProducto { get; set; }

    [Required]

    [Display(Name = "Unidad")]

    public int UnidadId { get; set; }

    [Required]

    [Display(Name = "Existencia")]

    public float Stock { get; set; }

    [Required]

    [Display(Name = "Proveedor")]

    public int ProveedorId { get; set; }

    [Required]

    [Range(50,999999999)]

    [Display(Name = "Precio Unitario")]

    public decimal PrecioUnitario { get; set; }

    [Display(Name = "Fecha Ultima Compra")]

    [DataType(DataType.Date)]

    public DateTime UltimaCompra { get; set; }

    [ForeignKey("UnidadId")]

    public Unidad Unidad { get; set; }

}

Unidad

public class Unidad

{

    [Key]

    public int Id { get; set; }

    [Required]

    [Display(Name = "Nombre de Unidad")]

    [StringLength(30)]

    public string NombreUnidad { get; set; }

}

 Ahora podemos compilar el proyecto para generar el controlador y las vistas.

Una vez tengamos los modelos vamos a la carpeta Controller, clic derecho Add, Controller.

Nos muestra la pantalla para crear el controlador

Seleccionamos la que crear las vistas con Entity Framework como esta seleccionada en la imagen. Nos muestra la siguiente imagen para configurar el controlador a crear:

Damos clic en el botón + de DataContext Class porque no existe y lo vamos a crear.

Nos muestra

Ese es el nombre que propone para el contexto de datos, dejemos ese o lo pueden cambiar si lo desean.

Al dar clic en el botón Add nos muestra la pantalla:

A esta pantalla le damos Add al botón para que inicie el proceso de creación de controlador y de las vistas.

Al ejecutar los pasos para Unidad y para Producto tendremos las vistas de ambos asi:

Ahora veamos la vista Create de Productos:

Pueden apreciar que el IdUnidad es un DropDownList,

Entonces ejecuten el programa ingresen datos primero a Unidad y luego creen productos,

Después de esto deben crear el modelo Proveedor, recuerde que Producto tiene IdProveedor, cree el controlador de Proveedor,

Luego borre el controlador de Producto, vaya a Views y busque la carpeta de productos elimínela y vuelva a crear el Controlador de Productos, esta vez debe tener los dos Dropdownlist uno para Unidades y otro para Proveedores.

Una de las ventajas de trabajar con un ORM como Entity Framework es que ademas de abstraernos de los comandos SQL del motor de base de datos, nos permite realizar estas operaciones desde el lenguaje de programación C#.

De esta manera podemos crear relaciones en nuestra base de datos a través de DataAnnotations de MVC para los modelos.

Los espero en la próxima!!!