[Article] Visual Studio Code | Tips 4

En post anteriores vimos funcionalidades que posee la herramienta. En este post veremos plugins. Visual Studio Code posee una gran variedad de plugins que pueden cubrir todas nuestras necesidades. Veremos algunos de los más recomendados.

Bookmarks

Este plugin nos permitirá poner marcar en nuestros archivos para luego poder movernos entre estos para ubicar las secciones  de código que deseamos. con el comando Ctrl + Alt + K marcamos o desmarcamos el código. Se podrá ver un icono celesta del lado izquierdo.  Una vez que marcamos el código podemos movernos hacia adelante con Ctrl + Alt + L y hacia atrás con Ctrl + Alt + J.

Prettier

Prettier es un formateador de código para javascript, typescript y css. Presionaremos Ctrl + Shift + P para ingresar a la paleta de comandos, tipeamos Format Document y presionamos enter. Automáticamente el código de idéntica de la forma correcta.

Paste Json As Code

Paste Json as Code nos ayuda a copiar código JSON desde cualquier lugar y pegarlo en nuestro editor dependiendo el tipo o lenguaje que seleccionemos. Lo que hara sera tirar el objeto JSON. Para esto seleccionamos nuestro código JSON, luego presionamos Ctrl + Shift + P y tipeamos Paste JSon as Code (recordemos que detectara el lenguaje del archivo destino por su extensión), le damos un nombre y presionamos enter. Nuestro código, en el caso del ejemplo, se tipara en C#.

GitLens

GitLens dará la capacidad de poder ver que comentarios referentes a git tiene el codigo el cual estamos trabajando. Es una herramienta muy útil que nos dice que cosas estan sin commit o quién fue el último en modificar ese código.

Project Manager

Este plugin agrega una nueva funcionalidad a Visual Studio Code. Normalmente solamente podemos abrir una carpeta de proyecto, pero con Project Manager podremos abrir varias carpetas en nuestro entorno de trabajo.

Live Server

Si somos desarrolladores web nos servirá de mucha ayuda un servidor Web. Lo que hace este plugin es tener un servidor web disponible que irá reflejando los cambios a medida que vamos modificando nuestro código.

Conclusión

Visual Studio Code es una poderosa herramienta para desarrolladores. Tiene una gran cantidad de funcionalidad pensadas para nosotros, y si no las tiene, algun plugin puede ayudarnos con lo que necesitamos. No se pierdan de probar esta herramienta.

[Article] Visual Studio Code | Tips 3

Como vimos en el post anterior, Visual Studio Code se ha vuelto una de las herramientas de cabecera para muchos programadores. En este post vamos a ver mas funcionalidades de la herramienta que no ayudaran con nuestro código.

EDITING HACKS

La herramienta posee un gran cantidad de funciones dentro del editor de texto que hace que sea más sencillo y rápido editar mientras estamos desarrollando. Veremos algunas de ellas.

Selección Múltiple

Si queremos editar varios valores que pertenecen a una columna debemos presionar Alt + Click seleccionado el lugar donde queremos comenzar. Luego presionando Ctrl + Alt  + Up o Down seleccione la filas.

Podemos seleccionar una secuendi de tag para editarlos. Seleccionaremos el tag y presionamos Ctrl + D hasta el tag final.

Siempre seleccionamos por filas para editar y cuando debemos modificar una columna debemos ir fila por fila para poder editarlo. Ya no es necesarios. La edición de columnas nos ayudará con este problema. Debemos mantener presionado Shift + Alt y arrastre el cursor para seleccionar las columnas.

Copiar Filas

Cuando copiamos filas la ejecución clásica es: primero, seleccionar filas, luego presionar Ctrl + C, bajar una fila y presionar Ctrl + V. Con Shift + Alt + Up y Shift + Alt + Down podemos hacer lo mismo copiando hacia arriba o hacia abajo la fila en la cual estamos posicionados.

Mover Filas

De la misma forma que duplicamos filas, podemos mover bloque de código hacia arriba o hacia abajo. En caso de ser html respetará los tags. Si solo estamos ubicados en una línea moverá solamente esa línea

Formateo Automático de Código

Supongamos que tenemos una persona en el equipo desordenada. Escribe su código sin respetar el formato del código que está haciendo. Para ordenarlo podemos seleccionar el código y presionar Ctrl +K + F.

Ventana rápida de referencias

Seleccionaremos un objeto, luego presionamos Shift + F12, se abrirá una ventana donde podemos ver el listado de archivo junto al código de donde ese objeto está siendo referenciado.

Para buscar todas las referencias debemos presionar Shift + Alt + F12.

Renombrado de Símbolos

Imaginemos que declaramos un objeto con un nombre erróneo y ese objeto fue utilizado en un gran cantidad de sitios. ¿Estamos perdidos? No! podemos seleccionar el símbolo, presionar F2 y cambiar el nombre. Automaticamente se abrira todos los archivos los cuales fueron afectados por el cambio.

[Article] Visual Studio Code | Tips 2

Como vimos en el post anterior, Visual Studio Code se ha vuelto una de las herramientas de cabecera para muchos programadores. En este post vamos a ver mas funcionalidades de la herramienta que no ayudaran con nuestro código.

Símbolos de navegación

Supongamos que tenemos un archivo muy largo. Queremos buscar un objeto, un tipo o una clase. Si presionamos Ctrl + P, luego presionamos @ Visual Studio Code nos mostrará la lista de objetos, clases, tipos, etc que tenemos en ese archivo.

Si ahora ponemos ademas de @ el símbolo : Visual Studio Code organiza los objetos por su tipo.

Otro símbolo interesante de navegación es uso solamente : que nos permite ingresar el numero de linea a la cual queremos ir. Presionamos Ctrl+P nuevamente, luego, : <ingresar numero de linea> y nos llevara hasta ahí.

Colapsar o Desplegar código

Esta funcionalidad nos permite colapsar el código permitiendo que sea más sencillo agrupar nuestro código. Visual Studio detectará el tipo de lenguaje que es.  Mediante el comando Ctrl + Shift + P activamos la paleta de comandos. Luego podemos ingresar algunas de las siguiente opciones:

  • fold all, colapsa todos los códigos que estén cerrados correctamente dependiendo del marcado o lenguaje.
  • unfold all, desplegara todos los codigo que estén colapsados.

También tenemos la posibilidad de solamente colapsar algunas partes como por ejemplo, solamente comentarios o regiones.

Terminales

Visual Studio Code viene con un terminal integrada. Podemos tener varias abiertas simultáneas, pero también, es posible ponerlas en columnas. Esto es muy útil por ejemplo en el caso que estemos trabajando con Angular. En una podemos dejar corriendo el servidor integrado, ver qué está pasando y en la otra correr comando que necesitemos.

Emmet

Emmet es un herramienta de marcado la cual nos permite tener snippets y abreviaturas para acceder a él. No es necesario instalar ningún plugin, viene integrado al Visual Studio Code. Tiene soporte para html, haml, jade, slim, jsx, xml, css, scss, sass, less and stylus.

Por ejemplo, supongamos que queremos escribir un tag div en html. Deberíamos escribir <div> y al cerrar la herramienta nos cerrará el taga automáticamente. Pero esto no es necesario. Con solo escribir div y presionar la tecla tab Emmet se encargará de completarlo.

Otra capacidad que tenemos en poder completar id o clases en nuestra abreviatura. supongamos que deseamos crear el siguiente tag.

<div id=”nombre” class=”nombre-color”></div>

Simplemente deberíamos escribir div#nombre.nombre-color. Tenemos varias combinaciones muy interesantes. Supongamos ahora que queremos crear el siguiente tag.

<div class=”menu”>
	<ul>
		<li></li>
		<li></li>
		<li></li>
        </ul>
</div>

Podriamos hacerlo escribiendo div.menu>ul>li*3 y presionar tab.

Otra utilidad muy interesante es el tamaño de las imágenes. Cuando agregamos una imagen al código html la mayoría del tiempo no sabemos cual es tu tamaño. Emmet puede tomar el tamaño de la imagen y configurarlo automáticamente. Para esto debemos presionar Ctrl + Shift + P y tipeamos Update Image Size.

Supongamos que necesitamos hacer un cálculo, una suma o resta. Lo que hacemos, el la mayoría de los casos es abrir la calculadora, pero ya no es necesario. Emmet tiene funcionalidades math que nos permite hacer el cálculo dentro de la herramienta. Nuevamente Ctrl + Shift + P, tipeamos Evaluate Math Expression.

Estos son algunas de las características de Emmet. Les dejo un link donde pueden encontrar un Cheat Sheet muchas más opciones.

https://docs.emmet.io/cheat-sheet/https://docs.emmet.io/cheat-sheet/

Auto Save

Siempre me pregunto cual es la combinación de teclas que presiono mayor cantidad de veces al dia. Descubrí que es Ctrl + S que es guardar. A veces es cansador. Visual Studio Code tiene una funcionalidad que al activar guardara automaticamente cada una cierta cantidad de tiempo los archivos que estamos modificando.

Para activarlo debemos ir al menú  File y seleccionar del menú Auto Save. Para configurar el tiempo de guardado presionaremos Ctrl + Shift + P, tipeamos user setting y en la barra de navegación buscaremos. Veremos que en el panel de la derecha la última opción es Auto Save Delay. El valor esta en milisegundos podemos poner el que mas no apetezca.

Ctrl + K +  S

Si queremos ver todos Keybinding disponibles con presionar Ctrl + K + S la herramienta nos mostrará el listado de shortcuts disponibles. También, podemos configurarlo a nuestro gusto. Los invito a verlo ya que sera muy util para aprender nuevos comando y agiliza nuestra escritura de código.

Conclusión

Visual Studio Code es una poderosa herramienta para desarrolladores. Seguirá evolucionando con el pasar de los meses brindando nuevas funcionalidades. En próximos post veremos más características de la herramienta.

[Article] Visual Studio Code | Tips 1

Visual Studio Code se ha vuelto una de las herramientas de cabecera para muchos programadores. Desde su lanzamiento en el 2015, hasta estos días, ha tenido una evolución constante con grandes mejoras y muchas nuevas funcionalidades con cada nueva versión. A pesar de ser una herramienta bastante joven, ha escalado hasta el primer puesto entre los IDE de código fuente livianos del mercado. En esta serie de publicaciones vamos a ver algunos trucos, funcionalidades y plugins que podemos encontrar en esta fabulosa herramienta, como también, cómo nos ayudará a agilizar nuestra escritura de código, como también, optimizar nuestros tiempos..

Les dejo el link de descarga https://code.visualstudio.com/

Themes

Una de las funcionalidades que pocos conocen es la de los temas.  Visual Studio Code viene con varios temas para seleccionar que podemos elegir según a nuestro gusto. Para esto presionamos <F1> , tipeamos theme, presionamos <enter>, por último, seleccionaremos Preferences: Color Theme. Esto nos mostrará el listado de temas disponibles.

Podemos seleccionar el que más nos guste de la lista o bien agregar más temas si lo deseamos. Ingresamos nuevamente a la lista y elegimos la opción Install Additional Color Themes. Esto nos llevará a una lista descargable para seleccionar el que deseemos.

Iconos por tipo de archivo

Cada vez que creamos un archivo nuevo, Visual Studio Code, reconocerá la extensión y nos mostrará el icono relacionado con ese tipo de archivo. Posee una gran cantidad de iconos. Tenemos disponibles para casi todos  de los lenguajes más utilizados en el mercado.

Font Ligatures

Esta funcionalidad básicamente une algunos símbolos en un solo . Hace que la lectura de código sea más fácil del código y legible. Por ejemplo, si tenemos que escribir === será transformado a ☰. Parece ser más sencillo y natural de leer.  Otro ejemplo, si queremos hacer una arrow function, =>, sera cambiado por el símbolo ⇒.

Para tener disponible esta característica, lo primero que debemos hacer es descargar e instalar la fuente Fira Code. Les dejo el link para que lo descarguen.

https://github.com/tonsky/FiraCode#solution

Lo segundo que debemos hacer es agregar a la familia de fuentes la fuente Fira Code desde la configuración de VS Code. Presionamos <F1>, tepeamos User Setting, buscaremos en  la configuración a editar fontFamily y le agregamos Fira Code. Luego buscamos  fontLigatures y la activamos, esta funcionalidad viene desactivada por default.

Playground

Supongamos que queremos ver todos los features que posee Visual Studio Code. La manera de hacerlo es ingresando a la barra de comandos con <F1> y escribimos Playground. Seleccionamos Help: Interactive Playground. Esto nos mostrará todo el listado completo.

Panels

La funcionalidad de múltiples editores nos ayudará a tener varios archivos al mismo tiempo y poder visualizarlos de una forma simple. Por ejemplo, en angular, casi siempre tengo 2 archivos abiertos, el componente y la vista. Tenemos 2 maneras de dividirlo, la primera es por el icono que se encuentra arriba a la derecha. La segunda opción es por medio de Ctrl + \. Podemos dividir en la cantidad de columnas que deseemos.

Otra funcionalidad es la Grilla 2×2. Esta podemos activarla desde el menú View – Editor Layout – Grid (2×2). Nos dividirá la pantalla en 4 permitiendo visualizar 4 archivos al mismo tiempo.

Zen Mode

Trabajamos en pantalla completa!!!. Al activar ZenMode el Visual Studio Code ocultara todo, todas las barras y menús, se ampliará a todo nuestro screen permitiendo hacer foto 100% en lo que estamos trabajando.

Conclusión

Visual Studio Code se ha vuelto una poderosa herramienta para desarrolladores que podemos usar con la gran  mayoría de los lenguajes. En próximos post veremos más características de la herramienta.

[Article] Novedades de C# 8

Hoy vamos a ver algunas de las nuevas funcionalidad más interesantes que vendrán en C# 8. Para esto ver algunos ejemplos usaremos Visual Studio 2019 que se encuentra en su versión preview hasta el momento. También, deberemos instalar el SDK de .Net Core 3.0. Les dejo los links.

https://visualstudio.microsoft.com/es/vs/preview/

https://dotnet.microsoft.com/download/dotnet-core/3.0

Nullable reference types

Lo primero que vamos a ver son los  tipos nulos. Todos sabemos lo costoso que es cuando tenemos muchas excepciones que nos devuelve NulLReferenceException, más que todo, en un ambiente de producción.

Supongamos en siguiente caso: Tenemos un servicio que nos devuelve una lista de Personas.  Luego tenemos una metodo GetName, que nos devuelve e libro y el autor concatenados.

static string GetName(Person p)
    {
        return (p.MiddleName != null)
            ? $"{ p.FirstName } { p.MiddleName[0] }. { p.LastName })"
            : $"{ p.FirstName } { p.LastName })";
    }
}

public class Person
{
    public string FirstName { get; set; }
    public string? MiddleName { get; set; }
    public string LastName { get; set; }

    public Person(string first, string last)
    {
        FirstName = first;
        LastName = last;
    }
}

Si esta lista de personas nos devuelve una de sus propiedades, la segunda propiedad se encuentra en null, GetName(), fallará, debido a que se encuentra en null y devolverá la excepción System.NullRerefenceException.

Imaginemos si esto pasa todo el tiempo. Tratar de rastrear este tipo de excepciones a veces es difícil debido a que debemos suponer donde podría ocurrir. Aquí es donde esta nueva característica aparece para ayudarnos.

Lo primero que debemos hacer es activar esta característica de siguiente manera:

Una vez que se encuentra activa, veremos como el Visual Studio comienza a detectar los posibles null. En la siguiente imagen vemos como un campo, que debería ser parte del objeto, no está siendo declarado con Non-nullable.

Una vez que agregamos la declaración del parámetro, le asignamos el valor null, nos avisara que la variable declarada asociada no es nuleable como lo vemos en el siguiente código.

Por último, debemos arreglar nuestro método. Nos indica que es posible que uno de las propiedades posiblemente sea null en un momento en particular.

Entonces para solucionar esto podemos usar las siguientes líneas de código.

Esta funcionalidad no ayudará a prevenir muy eficientemente las situaciones donde es posible, que un error en el código, nos devuelva System.NullRerefenceException.

Async streams

Esta funcionalidad nos permite consumir o producir resultado asíncronos sencillamente sin la necesidad tener que devolver algo desde las llamadas. Veamos el siguiente código:

async Task GetBigResultAsync() { 
var result = await GetResultAsync(); if (result > 20) return result; else return -1; 
}

Supongamos que tenemos una lista, si estamos suscritos a un servicio o por ejemplo algún componente IoT no se reproducen tan fácilmente. Aquí es donde entra en juego la nueva Interfaz IAsyncEnumerable que es la versión asíncrona de IEnumerable. Esto nos permitirá que podamos agregar la palabra clave await a un foreach permitiendo recorrer los elementos a medida que van llegando

Ranges and indices

Ranges and indices es una funcionalidad que me gusta mucho. Supongamos nuevamente que tenemos un array o una collection, pero no deseamos recorrer desde el inicio hasta el final, sino solamente una parte. Actualmente deberíamos recorrer nuestro array omitiendo ciertas posición o bien hacer una subconsulta en linq devolviendo un nuevo resultado con el contenido deseado.

Para evitar esto podemos utilizar rango o índices. Veamos el siguiente código, vamos a decirle que solamente quiero recorrer desde 1 hasta 3.

foreach(var p in people[1..3]) yield return p;

Default implementations of interface members

Esta interesante característica nos ayudará a que la interfaces evolucionen más fácilmente. Supongamos que tenemos una interface que ya fue implementada. Si modificamos esa interfaz, seguramente, las implementaciones fallaran..

Para solucionar este inconveniente al modificar la interface podemos implementar, en la interface, un comportamiento por defecto:

interface ILogger
{
     void Log(LogLevel level, string message);
     void Log(Exception ex) => Log(LogLevel.Error, ex.ToString()); // New overload
}
class ConsoleLogger : ILogger
{
     public void Log(LogLevel level, string message) { … }
     // Log(Exception) gets default implementation
}

La clase ConsoleLogger no tiene implementado la sobrecarga del método Log, pero, al estar declarada en la interface como una implementación determinada no romperemos nuestras implementaciones antiguas.

Recursive patterns

C# 8 ahora nos permite tener patrones que contengan otros patrones. Por ejemplo:

IEnumerable GetEnrollees()
 {
     foreach (var p in People)
     {
         if (p is Student { Graduated: false, Name: string name }) yield return name;
     }
 }

En este código estamos verificando que p sea del tipo que se le asigna, si lo es, le asigna un valor de false a la propiedad y devolverá el name como nulo.

Switch expressions

¿Quién no ha sufrido la necesidad de en un switch validar todas combinaciones posibles? Como también, evaluar en ciertos casos un valor de un objeto. Para verlo en más detalle lo que estamos hablando les mostrare un código clásico:

  switch (p.FirstName, p.MiddleName, p.LastName)
            {
                case (string f, string m, string l):
                    return $"{ f } { m[0] }. { l }";
                case (string f, null, string l):
                    return $"{ f } { l }";
                case (string f, string m, null):
                    return $"{ f } { m }";
                case (string f, null, null):
                    return f ;
                case (null, string m, string l):
                    return $"Ms/Mr { m[0] }. { l }";
                case (null, null, string l):
                    return $"Ms/Mr { l }";
                case (null, string m, null):
                    return $"Ms/Mr { m }";
                case (null, null, null):
                    return "Someone";
            }

Verdaremante se hace muy difícil de leer. Ahora podemos, con C# 8, mediante Switch Expressions, hacerlo más legible y sencillo de la siguiente forma:

return (p.FirstName, p.MiddleName, p.LastName) switch
             {
                 (string f, string m, string l) =>  $"{ f } { m[0] }. { l }",
                 (string f, null, string l) =>  $"{ f } { l }",
                 (string f, string m, null) => $"{ f } { m }",
                 (string f, null, null) => f,
                 (null, string m, string l) => $"Ms/Mr { m[0] }. { l }",;
                 (null, null, string l) => $"Ms/Mr { l }",
                 (null, string m, null) =>  $"Ms/Mr { m }",
                 (null, null, null) => "Someone";
             }

Target-typed new-expressions

Se que van amar esta nueva funcionalidad. Anteriormente cuando declaramos una array de algún tipo de objeto y queríamos agregarle objetos nuevos debíamos hacerlo de esta manera:

Person[] people =
                {
                    new Person("Fernando", "A", "Sonego"),
                    new Person("Ricardo", "E", "Gomez"),
                    new Person("Alfredo", "X", "Rodriguez"),
                    new Person("Miguel", "A", "Gimenez")
                };

Ya no es necesario decirle que el objeto que vamos agregar en el array es del mismo tipo. Automáticamente se reconocerá y solamente debemos declararlo de la siguiente forma:

Person[] people =
                {
                    new ("Fernando", "A", "Sonego"),
                    new ("Ricardo", "E", "Gomez"),
                    new ("Alfredo", "X", "Rodriguez"),
                    new ("Miguel", "A", "Gimenez")
                };

Conclusiones

C# 8 nos trae nuevas y muy interesantes características que nos harán la vida un poco más fácil mientras estamos desarrollando. Además de estas habrá muchas más en el lanzamiento oficial.

Por ahora solo nos queda esperar el lanzamiento de Visual Studio 2019 junto ASP.Net Core 3.0. Mientras tanto podemos descargar las versiones preview e ir jugando para adoptarlas apenas sean oficiales.


[Event] NetConfUy 2018 | Integrá fácilmente login social con Azure B2C y .NET

Viajamos con amigos  compañeros de trabajo para participar en la NetConfUy. Estuve tocando el tema de Azure B2C junto a .Net Core.

Hoy en día, muchas de las aplicaciones que construimos requieren inicio de sesión facilitada con redes sociales o proveedores de identidad pre-existentes. ¿Cómo puedo lograr limitar la construcción de código para llevarlo adelante? En esta charla te vamos a presentar Azure B2C y sus características, que te permiten integrar muy fácilmente inicios de sesión con redes sociales y proveedores de terceros, y la posibilidad de alojar en una base de datos escalable y redundante tus propios usuarios. Además, te vamos a mostrar cómo fácilmente podemos sumar funcionalidades de doble factor de autenticación, reseteo de password y muchas cosas más. La charla va a estar acompañada de demos donde veremos cómo integrar código personalizado de nuestras aplicaciones, móviles o web, login desde twitter, google, facebook, etc.

Les dejo los links de la presentación y videos.

Presentación

Video (Próximamente)

Entrevista (Próximamente)

[Event] NetConfCo 2018 |.Net Core Multiplataforma. ¿Sera Verdad?

Esta vez viajamos con amigos  compañeros de trabajo para participar en la NetConfCO Medellín, Colombia. Fuimos recibidos con una gran calidez por toda la gente de Colombia y no alcanzas la gracias para describir los excelentes momentos que pasamos.

Estuvimos viendo:

Todos comentan que .Net Core es OpenSource y multiplataforma. ¿Puedo trabajar 100% en linux como en windows? ¿Quién usa linux con .Net core? ¿Que beneficios tengo al trabajar en Linux? ¿Que necesito para empezar?. En esta charla te vamos a contar cómo podemos trabajar con .Net Core sin la necesidad de tener Windows. Además, crearemos un entorno con todo lo necesarios para llevar adelante cualquier proyecto .Net Core sea en Windows o en Linux. También, veremos cómo algunas personas de un equipo pueden trabajar en Linux y otras Windows al mismo tiempo sin conflictos.

Les dejo los links de la presentación, videos y webcast:

Presentación

Video

Video Entrevista

Nota WebCast

WebCast

[Article] .Net Core | User Secrets

En tiempo de desarrollo .Net Core nos brinda esta excelente funcionalidad la cual nos permite guardar configuraciones en nuestro perfil de usuario loca de una forma segura y sencilla. Estás funcionalidad nos ayuda a no subir por error o a no modificar los archivos con información privada en servidores o inclusive en nuestros sistemas de control de código fuente como GitHub, Bitbucket o Team Foundation Service.

Objetivo

En esta entrega estaremos viendo qué es, cómo configurar y utilizar User Secrets. .

Audiencia

Este documento está dirigido a personas que conocen muy poco o nada sobre el tema o personas que desarrollan tareas de consultoría de desarrollo o que simplemente están interesados en leer e investigar sobre la tecnología alcanzada por esta publicación.

Desarrollo

Antiguamente, en nuestras aplicaciones .Net, teníamos la posibilidad de encriptar nuestra información secreta contenida en los archivos web.config. Lo cual a veces lo hacía un poco incómodo al tener que implementar las aplicaciones o guardarlas en nuestros repositorios de código ya que se guardaban información sensible.

Ahora podemos guardar información sensible de la mano User Secrets de forma segura. Entre las cosas que podemos guardar tenemos: cadenas de conexión, claves de API, datos del cliente, datos de cualquier red social o de cualquier aplicación. Todo lo que nosotros consideremos como datos sensible puede ser almacenado sin correr riesgos de exponerla públicamente.

En mi caso me es muy útil cuando subo ejemplos a GitHub. Lo utilizo para subir un ejemplo sin la necesidad de tener que subir en el ejemplo los datos de acceso aun APi que utilizo en Azure o de alguna red social.

Microsoft.Extensions.SecretManager.Tools

Para poder utilizar y tener disponible esta funcionalidad deberemos usar Microsoft.Extensions.SecretManager.Tools.  Secret Manager almacena la información fuera del proyecto y nos permite no solo usar en el proyecto actual, también, nos brinda la posibilidad de usarlo en varios proyectos.

Lo instalaremos desde la consola de los paquetes Nuget en nuestra aplicación.

Una vez instalado hacemos botón derecho sobre nuestro proyecto y seleccionaremos del menú la opción “Manage User Secrets”:

Nos abrirá un archivo del tipo JSON llamado secrets.json. Este archivo guardaran los datos que necesitemos. Este se crea automáticamente y se ubica dentro de una carpeta protegida del sistema. podremos encontrarlo por medio de una estructura  de carpeta similar a esta:

%APPDATA%\Microsoft\UserSecrets\user-secrets-id\secrets.json

Si queremos ver el User-Secrets-Id podemos ubicarlo haciendo click derecho sobre el proyecto y seleccionado la opción “Edit <Nombre del proyecto>.csproj”. Este nos mostrar el archivo de configuración del proyecto con el id dentro:

En nuestro archivo JSON agregaremos un valor con motivo de poder tener información para poder ser consumida más adelante:

{
"TopSecret": "TopSecretValuePasssUserRoot"
}

El siguiente paso es configurarlo en nuestra aplicación Web el servicio. Abriremos el archivo Startup.cs y modificaremos el constructor para que lo tengamos disponible con las siguientes líneas:

Hasta ahora ya tenemos activo nuestro servicio de UserSecrets, agregamos un valor en nuestro archivo secrets.json y configuramos en el constructor para poder acceder. Ahora vamos a consumir el valor desde nuestro archivo. Iremos al HomeController.cs e inyectamos en constructor IConfiguration para tener disponible la consulta del valor:

Por último, Lo ejecutaremos y comprobaremos si está recuperando el error correctamente:

Conclusión

En este post hemos visto  que es, como configurarlo y cómo utilizar UserSecrets. El uso de esta funcionalidad no brinda una gran posibilidad de no estar obligados o por error a subir información confidencial de nuestras cuentas de redes sociales, conexión a base de datos o cualquier información sensible que consideremos.

[Tutorial] Javascript | TypeScript – Parte 8

En esta octava entrega continuaremos con nuestro demo de TypeScript junto a Jquery. Recordemos que utilizaremos un proyecto que hicimos en otro post: “Crear una App en Asp.Net Core en Linux”. En nuestro post anterior habíamos dejado todo listo para comenzar nuestra aplicación.

Objetivo

En esta octava entrega continuaremos con nuestro demo de TypeScript junto a Jquery. Recordemos que utilizaremos un proyecto que hicimos en otro post: “Crear una App en Asp.Net Core en Linux”. En nuestro post anterior habíamos dejado todo listo para comenzar nuestra aplicación.

Audiencia

Este documento está dirigido a personas que conocen muy poco o nada sobre el tema o personas que desarrollan tareas de consultoría de desarrollo o que simplemente están interesados en leer e investigar sobre la tecnología alcanzada por esta publicación.

Desarrollo

Nuestra aplicación tendrá unas funcionalidades bastantes simples. Sera un ABM de clientes los cuales consumen servicios rest para almacenar y actualizar la información. No voy a entrar en detalle de la interfaz gráfica. Usaremos AdminLTE que está basada en Bootstrap como interfaz gráfica. Les dejare el demo completo en github para que puedan consultarlo cuando lo necesiten.

Crearemos un carpeta que se llame customers. Dentro tendremos la página web inicio de nuestro ABM que se llamara customer-index.html.

Crearemos otra carpeta llamada src donde tendremos el archivo app.ts que creamos en el post anterior. Agregaremos: customers.ts, customerTypes.ts y GenericRepository.ts.

En nuestro archivo customer-index.html deberemos agregar una línea que código la cual ara referencia a bundle creado por webpack y que es el que realmente ejecutará nuestra aplicación.

&lt;script src="/dist/app.js"&gt;&lt;/script&gt;

Empezaremos por nuestro archivo GenericRepository.ts. Este archivo contendrá un interface junto a un clase repositorio. Esta clase repositorio la utilizaremos como clase genérica para cualquier acceso a datos que necesitemos. Veamos el código:

import * as $ from 'jquery'

export interface IRepository&lt;T&gt;{
GetAll(): JQueryPromise&lt; Array&lt;T&gt; &gt;;
GetById(id: number): JQueryPromise&lt;T&gt;;
Delete(id: number) : JQueryPromise&lt;void&gt;;
Save(entity: T) : JQueryPromise&lt;T&gt;;
Update(id:number, entity: T) : JQueryPromise&lt;void&gt;;
}

export class Repository&lt;T&gt; implements IRepository&lt;T&gt;{

constructor(public serviceUrl: string){}

getServiceUrl():string {
return this.serviceUrl;
}

GetById(id: number): JQueryPromise&lt;T&gt; {
return &lt;JQueryPromise&lt;T&gt;&gt;$.ajax({
type: "GET",
dataType: 'json',
contentType: 'application/json; charset=utf-8',
url: this.serviceUrl + "/" + id
});
}
GetAll(): JQueryPromise&lt; Array&lt;T&gt; &gt; {
$.support.cors=true;
return &lt;JQueryPromise&lt;Array&lt;T&gt;&gt;&gt;$.ajax({
type: 'GET',
dataType: 'json',
contentType: 'application/json; charset=utf-8',
url: this.serviceUrl
});
}

Delete(id: number): JQueryPromise&lt;void&gt; {
return &lt;JQueryPromise&lt;void&gt;&gt;$.ajax({
type: "DELETE",
dataType: 'json',
contentType: 'application/json; charset=utf-8',
url: this.serviceUrl + "/" + id
});
}
Save(entity: T): JQueryPromise&lt;T&gt;{

return &lt;JQueryPromise&lt;T&gt;&gt;$.ajax({
type: "POST",
url: this.serviceUrl,
data: JSON.stringify(entity),
contentType: "application/json; charset=utf-8",
dataType: 'json'
});
}

Update(id:number, entity: T): JQueryPromise&lt;void&gt; {
return &lt;JQueryPromise&lt;void&gt;&gt;$.ajax({
type: "PUT",
url: this.serviceUrl + "/" + id ,
data: JSON.stringify(entity),
contentType: "application/json; charset=utf-8",
dataType: 'json'
});
}
};

La primera línea que podemos ver es muy importante. Esta línea hace que podamos importar y tener disponible JQuery. Automáticamente como instalamos el archivo de tipos específicos para JQuery tendremos intellisense disponible:

La segunda línea también muy importante importara nuestra clase base repository para que podamos extenderlas en nuestras clases de negocio.

En nuestra interface Repository declaramos los métodos básicos y necesarios de cualquier Repositorio con una base de tipos de Datos genéricos que podemos ver representado por <T>. Este contrato obligará a las clases que lo implementen tengan estos métodos.

Más adelante, en el mismo archivo, podemos ver la implementación de nuestra interface en una clase también genérica llamada Repository. Esta clase implementa los métodos y la funcionalidad de nuestro repositorio. Veamos el método GetByID.

En este método o como el de los demás podemos ver que el método devolverá un JQueryPromise genérico como también que está usando el método de Jquery $.ajax. El cual es encargado de invocar los servicios Rest.

Dentro de nuestro archivo customer.ts implementaremos nuestra clase RepositoryCustomers la cual extenderá Repository<T>. Aqui esta la clase completa

import * as $ from 'jquery'
import { Repository } from './GenericRepository'

export class ModelCustomer {
customerId: number;
firstName: string;
middleName: string;
surName: string;
emailAddress: string;
customerTypeId: number;
notes: string;
}

export class ModelPageCustomer {
countPages: number;
countCustomers: number;
actualPage : number;
customers : Array&lt;ModelCustomer&gt;;
}

export class RepositoryCustomers extends Repository&lt;ModelCustomer&gt;{

constructor(){
super("http://localhost:8044/api/customers");
}

GetPage(page: number): JQueryPromise&lt; ModelPageCustomer &gt; {

return &lt;JQueryPromise&lt;ModelPageCustomer&gt;&gt;$.ajax({
type: "GET",
contentType: 'application/json; charset=utf-8',
url: super.getServiceUrl() + "/" + page + "/30"
});
}
}

Podemos ver en nuestra archivo 2 clases mas: ModelCustomer y ModelPageCustomer. La primera es un modelo para nuestros datos de clientes y la segunda es un modelo para paginar en nuestra vista de listado.

En el archivo customerTypes.ts tendremos una implementación similar, pero, para los tipos de nuestros clientes. La clase RepositoryCustomersTypes igualmente que nuestra clase anterior extenderá Repository<T> pero para el modelo ModelCustomerType.

Por último veamos nuestro archivo app.ts. En este archivo tendremos la implementación de las funcionalidades de nuestra interfaz gráfica. Está funcionalidades consumen nuestros repositorios. Lo más importantes son las 3 primeras líneas.


import { RepositoryCustomers, ModelCustomer, ModelPageCustomer } from './customers';
import { RepositoryCustomersTypes, ModelCustomerType } from './customersTypes';
import * as $ from 'jquery';

En estas líneas importamos todo lo necesario para nuestra vista y sus funcionalidades.

Conclusión

En este post hemos visto un acercamiento al demo hecho en javascript. Pueden descargar el proyecto desde la dirección de github https://github.com/withoutdebugger/DemoTypeScript. En el próximos post tocaremos algunos temas más complejos de que podemos desarrollar con TypeScript.

[Tutorial] Javascript | TypeScript – Parte 7

En esta séptima entrega veremos un ejemplo del uso de TypeScript junto a Jquery. Utilizaremos un proyecto que hicimos en otro post: “Crear una App en Asp.Net Core en Linux”. Estos servicios lo usaremos de repositorio de información.

Objetivo

En esta séptima entrega veremos un ejemplo del uso de TypeScript junto a Jquery. Utilizaremos un proyecto que hicimos en otro post: “Crear una App en Asp.Net Core en Linux”. Estos servicios lo usaremos de repositorio de información.

Audiencia

Este documento está dirigido a personas que conocen muy poco o nada sobre el tema o personas que desarrollan tareas de consultoría de desarrollo o que simplemente están interesados en leer e investigar sobre la tecnología alcanzada por esta publicación.

Desarrollo

Para comenzar vamos a configurar nuestra aplicación con todo lo que necesitamos para el demo. Primero creamos una carpeta, en mi caso la nombraré DemoTypeScript, pero pueden ponerle el nombre que deseen. Luego abriremos la carpeta con visual code.

Una vez abierto ejecutaremos en la consola de VS Code el primero comentado que inicializará el archivo necesario para npm.

npm init

El siguiente comando que ejecutaremos instalará TypeScript y ts-loader. El ts-loader lo usaremos junto a webpack que será instalado más adelante.

npm install --save-dev typescript ts-loader

Le toca a Jquery.

npm install --save-dev jquery

Antes de seguir con los comandos vamos a tocar un tema que habíamos dejamos pendiente y es “Typings”. En nuestro ejemplo queremos usar JQuery, pero tenemos un problema, este no fue hecho con TypeScript. Entonces ¿Cómo podemos tener soportes de tipos usando esta librería?.

Para esto existen Type Script Definitions Files. Estos archivos con la extensión d.ts describen los métodos, tipos y objetos de las librerías que no fueron hechas con TypeScript brindándonos el soporte de tipos. Estos archivos los utilizará el compilador para validar tipos y en el caso los programas, como VS Code, la intellisense en tiempo de desarrollo.

Veamos los pasos para instalar Typings. Debemos instalarlo en nuestro proyecto por medio de comandos npm.

npm install --save-dev typings

Una vez que tenemos instalado el soporte de typings debemos descargar e instalar el soporte para jquery de la siguiente forma:

typings install dt~jquery --global --save

Esto nos creara en nuestro proyecto una carpeta llamada typing que en su interior tendrá los archivos necesarios.

Lo siguiente en la lista es instalar es Webpack. Webpack es una herramienta que nos ayudará a transpilar nuestro codigo TypeScript de una manera más sencilla. Posee muchísimas funciones, pero por este momento, solo utilizaremos la capacidad de generar bundles a partir de nuestro código. Lo instalaremos con el siguiente comando npm:

npm install --save-dev webpack

Empecemos con las configuraciones. Primero creamos el archivo config.json con el siguiente comando:

tsc -init

Lo siguiente es crear una carpeta que llamaremos src que contendrá nuestro código y dentro un archivo que se llamará app.ts el cual será el inicio de nuestra aplicación. Para que TypeScript reconozcas los tipos configurado en el archivo d.ts correspondiente a JQuery debemos agregar las siguientes líneas:

"files": [
"typings/index.d.ts",
"src/app.ts"
]

El archivo index.d.ts le indicara de donde debe tomar los tipos y app.ts le dirá dónde debe iniciar nuestra aplicación. Nuestro archivo tsconfig.json quedara algo asi:

{
"compilerOptions": {
"target": "es5",
"sourceMap": true,
"outDir": "./dist",
"strict": true
}
,
"files": [
"typings/index.d.ts",
"src/app.ts"

]
}

Nos queda solo agregar el archivo de configuración para Webpack. Crearemos un archivo webpack.config.js y le agregaremos el siguiente contenido:


var path = require('path');
var webpack = require('webpack');

module.exports = {

devtool: 'source-map',
entry: ['./src/app.ts'],
output:{
path: path.resolve(__dirname, 'dist'),
filename: 'app.js'
},
module:{
loaders:[
{
test: /\.ts$/,
include: path.resolve(__dirname, 'src'),
loader: 'ts-loader'
}]
},
resolve:{
extensions: [".webpack.js",".web.js", ".ts", ".js"]
}
};

Para comprobar que todo funciona correctamente completaremos nuestro archivo app.ts que se encuentra en la carpeta src con el siguiente código:

class Main{
mySite:string = "http://www.withoutdebugger.com";
}

Iremos a nuestra consola y ejecutaremos el siguiente comando:

node_modules\.bin\webpack

Ahora podemos ver una nueva carpeta con el archivo final de nuestra aplicación.

Por último instalaremos un servidor web liviano hecho en nodejs.

npm install http-server

Y podemos invocarlos desde la consola de VSCode simplemente con el comando:

http-server

Conclusión

En este post hemos configurado todo lo necesario para comenzar nuestra aplicación demo. En el próximo post entramos ya en nuestra aplicación demo.