[Tutorial] Javascript | TypeScript – Parte 6

En esta sexto post tocaremos los temas: namespaces, módulos y decoradores, como se usan en TypeScript, que no brinda para trabajar con ellos y que beneficios tienen. Nuevamente utilizaremos VS Code en algunos ejemplos.

Objetivo

En esta sexto post tocaremos los temas: namespaces, módulos y decoradores, como se usan en TypeScript, que nos brinda para trabajar con ellos y que beneficios tienen. Nuevamente utilizaremos VS Code en algunos ejemplos.

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

Namespaces

Muchos lenguajes de programación como C#, Java y TypeScript nos brindan una forma de organizar nuestro codigo por medio de Namespaces. Usaremos estos namespaces para agrupar funcionalidades similares.

Supongamos que tenemos varias clases validadoras como en el ejemplo:

interface StringValidator {
isAcceptable(s: string): boolean;
}

let lettersRegexp = /^[A-Za-z]+$/;
let numberRegexp = /^[0-9]+$/;

class LettersOnlyValidator implements StringValidator {
isAcceptable(s: string) {
return lettersRegexp.test(s);
}
}

class ZipCodeValidator implements StringValidator {
isAcceptable(s: string) {
return s.length === 5 && numberRegexp.test(s);
}
}

A medida que nuestra aplicación crezca tal vez es necesario agregar más validadores. Es un buena práctica tener nuestros validadores organizados en un Namespace. Por ahora, no le prestemos atención a la palabra export lo veremos más adelante.

namespace Validation {
export interface StringValidator {
isAcceptable(s: string): boolean;
}

const lettersRegexp = /^[A-Za-z]+$/;
const numberRegexp = /^[0-9]+$/;

export class LettersOnlyValidator implements StringValidator {
isAcceptable(s: string) {
return lettersRegexp.test(s);
}
}

export class ZipCodeValidator implements StringValidator {
isAcceptable(s: string) {
return s.length === 5 && numberRegexp.test(s);
}
}
}

Supongamos que no queremos hacer que todas nuestras validaciones estén el mismo archivo. TypeScript nos permite separarlos y hacer referencia al archivo donde se encuentra el namespace base

Validation.ts

namespace Validation {
export interface StringValidator {
isAcceptable(s: string): boolean;
}
}

LettersOnlyValidator.ts

/// <reference path="Validation.ts" />
namespace Validation {
const lettersRegexp = /^[A-Za-z]+$/;
export class LettersOnlyValidator implements StringValidator {
isAcceptable(s: string) {
return lettersRegexp.test(s);
}
}
}

ZipCodeValidator.ts

/// <reference path="Validation.ts" />
namespace Validation {
const numberRegexp = /^[0-9]+$/;
export class ZipCodeValidator implements StringValidator {
isAcceptable(s: string) {
return s.length === 5 && numberRegexp.test(s);
}
}
}

TestExamaple.ts

/// <reference path="Validation.ts" />
/// <reference path="LettersOnlyValidator.ts" />
/// <reference path="ZipCodeValidator.ts" />

let strings = ["Hello", "98052", "101"];

let validators: { [s: string]: Validation.StringValidator; } = {};
validators["ZIP code"] = new Validation.ZipCodeValidator();
validators["Letters only"] = new Validation.LettersOnlyValidator();

for (let s of strings) {
for (let name in validators) {
console.log(""" + s + "" " + (validators[name].isAcceptable(s) ? " matches " : " does not match ") + name);
}
}

Módulos

Cada módulo tiene su propio ámbito, esto significa que todo su contenido, clases, variables, funciones, etc declaradas dentro no serán visibles al menos que se exporten. Es aquí la importancia de la palabra export, export dará visibilidad a las clases que quieran usarla  y para ser usados deben ser importados.

Los módulos pueden importarse entre sí por medio de un cargador de módulos. En nuestro caso estamos usando CommonJS pero podemos utilizar cualquier otro. Veamos un ejemplo supongamos que tenemos una clase que era un módulo:

customer.ts

class Customer{

let name: string;
GetName(){
return name;
}
}

export { Customer };

Simplemente por tener la palabra export ya se convertirá en un módulo. Export está diciendo que Customar podrá ser consumida o utilizada fuera del ámbito del propio módulo.

Para no exponer el nombre original podemos exportarlo como un alias de la siguiente manera:

export { Customer as PrincipalCustomer };

Ahora para utilizar en nuestra app el módulo Customer debemos importarlo de esta manera:

import{ Customer} from "./customer";

let myCustomer = new Customer();

Muchos pensaran “le fatla e .ts”. No es necesario ya que por default sabrá que se refiere a ese tipo de extensión. Supongamos que nuestro módulo posee más de una clase, y queremos importarlo en una variable

import * as list from "./customer";

let myCustomer = new list.Customer();

Una buena opción es exportarlo por default, cada módulo puede tener una y solo una exportación por default.

customer.ts

class Customer{
...
}

export default Customer;

app.ts

import Customer from "./customer";
let myCustomer = new Customer();

Realmente el uso de módulos es bastante sencillo. El tema es más extenso pero con esto nos alcanza para tener un excelente punto de partida.

Decoradores

Los decoradores vienen de Angular (2) y fueron solicitados por el equipo de Google. Si, aunque no lo crean, el equipo de Microsoft y el equipo de Google trabajaron juntos para poder implementarlo en TypeScript.

Antes que nada, para poder hacer uso de los decorator, debemos cambiar una configuración en nuestro tsconfig y agregar lo lo siguiente.

{
"compilerOptions": {
"target": "es5",  'ESNEXT'. */
"module": "commonjs",
"experimentalDecorators": true
}
}

aunque suene raro que diga experimental, en muchos lugares ya se usa en produccion asi que no debemos preocuparnos por esto.

Un decorador es un tipo especial de declaración que adjunta metadata o añadir una cierta característica que no deberían cambiar el comportamiento a una clase, método, propiedades o parámetros.

Para hacer un decorator debemos cumplir algunas especificaciones dependiendo de a cual queramos afectar.

type ClassDecorator = <Function extends Function>(target: TFunction: TFunction | void;
type MethodDecorator = <T>(target: Object, propertyKey: string | symbol, descriptor: TypedPrpoertyDescriptor<T>): void;
Type PropertyDecorator = (target: Object, propertyKey: string | symbol): void;
Type ParameterDecorator = (target: Object, propertyKey: string | symbol, parameterIndex: number): void;

Para mejor su funcionamiento vamos a hacer un ejemplo donde tendremos una clase log que irá registrando el comportamiento de una clase.

function logClass(constructor: Function){
console.log(Date.now() + " - LogClass......: " + constructor["name"]);
}

function logMethod(target: Object, propertyKey: string | symbol, descriptor: TypedPropertyDescriptor<T>):void{
console.log(Date.now() + " - LogMethod.....: " + propertyKey.toString());
}

function logParameter(target: Object, propertyKey: string | symbol, parameterIndex: number):void{
console.log(Date.now() + " - LogParamter...: " + propertyKey.toString());
}

Lo que podemos ver en nuestra clase es que tenemos 3 funciones: una para class, otra para un method y por último para un parámetros. Ahora veamos cómo se vería nuestra clase decorada:

@logClass
class Calculadora{

constructor(){}

@logMethod
Sumar(arg1: number, @logParameter arg2: number){
return arg1 + arg2;
}

}

let calc = new Calculadora();
console.log(calc.Sumar(1,2));

El símbolo @ le dirá compilador que es un decorador.  Para ejecutar nuestro codigo primero debemos compilarlo con tsc y luego lo ejecutaremos con nodeJs desde la consola de VS Code.

tsc decorator.ts
node decorator.js

Conclusión

Hemos visto el uso  namespaces, módulos y decoradores. Nuevamente es simplemente una introducción y un buen punto de partida para comenzar a entrar más en profundidad. En los próximos post veremos un ejemplo de una aplicación sencilla, un abm, utilizando TypeScript junto a JQuery.

[Tutorial] TypeScript | Javascript – Parte 5

En esta quinta entrega tocaremos el tema de funciones y genéricos. Como se usan en TypeScript y que nos brinda para trabajar con ellos. Nuevamente utilizaremos VS Code en algunos ejemplos.

Objetivo

En esta quinta entrega tocaremos el tema de funciones y genéricos. Como se usan en TypeScript y que nos brinda para trabajar con ellos. Nuevamente utilizaremos VS Code en algunos ejemplos.

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

Funciones

Tenemos 2 formas de declarar funciones. Una es de forma anónima la otra es por medio de un nombre. Esto es igual que en javascript no tenemos diferencias:

// por Nombre
function GetSum(x, y) {

    return x + y;

}

// funcion anonima
let sum = function(x, y) { return x+y; };

Ahora veamos el enfoque con los tipos de TypesCript como debería ser declarada la misma función para tener la validación de tipos.

// por Nombre
function GetSum(x: number, y:number): number {
    return x + y;
}

// funcion anonima
let sum = function(x: number, y: number): number { return x+y; };

En el ejemplo declaramos que parámetros recibiremos en la función. Van a ser de tipo numérico y que a su vez esta función nos devolverá también un tipo de dato numérico.

Inferencias de tipos

Un tema interesante es la inferencia de tipos. Lo que hace el compilador es detectar que tipo valor le estamos agregando por ejemplo:

let x = 1;
let x: number = 1;

Al asignar un valor numérico automáticamente sabe de qué tipo es  y no es necesario usar la forma larga como vemos en la segunda línea.

Vamos a ver un ejemplo de una matriz. En una matriz el compilador decidirá cuál es el mejor tipo:

let x = [”Fernando”, “Pepe”, null];

 

¿Y qué pasa con las clases? veamos el ejemplo:

class herramienta{}
class Martillo extends herramienta{}
class Destornillador extends herramienta{}
class Lijadora extends herramienta{}

let list = [ new Martillo(), new Destornillador(), new Lijadora() ]

El compilador tomará como tipo el primero de la lista del array. En estos casos debemos declararle de que tipo.

let list: Herramienta[] = [ new Martillo(), new Destornillador(), new Lijadora() ]

Tipos Genéricos

El objetivo de los tipos genéricos es generar clases altamente reutilizables. Podemos crear piezas de software que pueden accionar sobre un gran cantidad de tipos comunes. Esto permite que cualquier persona que lo utilice junto a sus tipos personales. Hoy la gran mayoría de los lenguajes de programación lo soportan y TypeScript no podía quedarse afuera.

Para empezar veamos un ejemplo que:

function GetValue(arg: number): number {
   return arg;
}

Supongamos que en lugar de usar number usamos any, sería un forma de hacerla genérica, pero en verdad no es conveniente, estaríamos perdiendo información útil del tipo y su funcionalidades. Ahora bien, cómo debemos declararlo de forma genérica:

function GetValue<T>(arg: T): T{
   return arg;
}

En el ejemplo vemos que agregamos la variable T que a diferencia de any sera mas precisa sin perder ninguna información del tipo. Ahora que tenemos nuestra declaración vemos como debemos invocar.

let result = GetValue<string>("hola mundo");

le dice que el parámetro que vamos a pasar es de ese tipo. También podemos llamara de la forma más simple y el compilador infiere el tipo automáticamente siendo tal vez un poco más legible.

let result = GetValue("hola mundo");

Ahora bien,r que problema vemos en el siguiente ejemplo:

function GetValue<T>(arg: T): T{
   return arg.length;
}

Si pasamos el tipo string no habrá ningún problema pero si pasamos del tipo numeric no posee la propiedad length y nos dara un error.

En cambio por ejemplo si trabajamos con matrices esta funcionalidad, length estará presente en todos los tipos.

function GetValue<T>(arg: T[]): T[]{
   return arg.length;
}

// Otra forma de declarar
function GetValue<T>(arg: Array<T>): Array<T>{
   return arg.length;
}

Ahora vemos como hacer un clase genérica:

class GenericClass<T>{
   add(arg1: T, arg2: T) =>; T
}

let myGenericClass = new GenericClass<numeric>();
myGenericClass.add = function(arg1, arg2) {
    return arg1 + arg2;
}

Por último, vamos hacer limitaciones en los tipos genéricos. Como vimos en el ejemplo al hacer una clase genérica puede ser que el tipo que pasamos no tenga un funcionalidad como en el caso que devolvía length.

Lo que podemos hacer es restringir una función para trabajar con todos los tipos tengan o no la propiedad length.

Para esto necesitamos crear una interface:

interface WithLength {
    length: number;
}

function GetValue<T extends WithLength>(arg: T): T {
    console.log(arg.length);
    return arg;
}

Como podemos ver en la imagen ya no tendremos el problema ya que no tira errores.

Conclusión

Hemos visto el uso funciones, la inferencia de tipos y una introducción a tipos genéricos. Si bien es simplemente una introducción es un buen punto de partida para comenzar a entrar más en profundidad. En el próximo post veremos namespaces, módulos y decoradores para cerrar este tutorial para principiantes.

[Tutorial] Javascript | TypeScript – Parte 4

En esta cuarta parte tocaremos interfases, classes y funciones.No solo veremos la teoria sino también algunos ejemplos en VS Code.

Objetivo

En esta cuarta parte tocaremos interfases, classes y funciones.No solo veremos la teoria sino también algunos ejemplos en VS Code.

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

Clases

Comenzaremos por las Clases. En JavaScript siempre utilizamos funciones y el patrón prototipo para hacer uso de clases y  herencia. Si están familiarizados con C# o Java tal vez nos resulte bastante incómodo en Javascript. Por esto, TypeScript, nos da la posibilidad de usarlas del modo como cualquier lenguaje orientado a objetos. También nos brindara compatibilidad futuras implementaciones de las especificaciones ECMAScript. Veamos:

class Persona {
nombre: string;

constructor(_nombre: string) {
this.nombre = _nombre;
}

greet() {
return "Hello, " + this.nombre;
}
}

let fernando = new Persona("Fernando");

Como comente antes, es bastante más familiar que como lo usamos en JavaScript.  Algunos puntos para tener en cuenta:

  • this hace referencia a la misma clase.
  • El constructor, a diferencia de los lenguajes que ya conocemos siempre debe llamarse constructor.
  • En las funciones no es necesario agregar la palabra function.

Como cualquier lenguaje de programación orientado a objetos tenemos herencia. Esto lo haremos por medio de la palabra reservada extends como vemos en el ejemplo:


class Estudiante extends Persona{

constructor(nombre: string) {
super(name);
}

greet() {
return super.greet();
}

}

En el ejemplo podemos ver la palabra super que hace referencia a la clase de la cual heredamos.

Modificadores

TypeScript nos da 3 tipos de modificadores de acceso, públicos, privados y protegidos.

Público

Por defecto serán declarados como públicos, esto hará que podamos acceder desde cualquier lugar del programa. Podemos marcarlo implícitamente si lo queremos pero no es necesario.

class Persona {
public name: string;

public constructor(theName: string) {
this.name = theName;
}
}

Private

Cuanto lo declaramos como private el método no podrá ser accesible desde fuera de la clase.


class Persona {
private name: string;

public constructor(theName: string) {
this.name = theName;
}
}

Protected

Funciona como private,  pero a diferencia de este pueden ser accedidas solamente por las clases derivadas.


class Persona {

protected name: string;
public constructor(theName: string) {
this.name = theName;
}
}

ReadOnly

Podemos declarar solo lectura, esto hará que no pueda asignarle ningún valor desde fuera de la clase y la asignación debe hacerse en el constructor.

class Persona {
readonly name: string;

public constructor(name: string) {
this.name = name;
}
}

let persona = new Persona("Fernando");
persona.name;

Accessors

En TypeScript tenemos la posibilidad de usar getters y setters.


class Persona {
private name: string;

get Name():string{
return this.name;
}

set Name(_name: string){
this.name = name;
}

}

Tener setters nos da la posibilidad de poder evaluar la asignación de un valor por medio de una comparación.

Propiedades Estáticas

Podremos crear un miembro estático que serán visibles sin la necesidad de instanciar la clase.

class Calculadora {

static result: number = 0;

}

Calculadora.result;

Clases abstractas

Estas clases no pueden instanciarse directamente. Deben ser heredadas obligatoriamente. A diferencia de una interface puede implementar funcionalidades en sus miembros.

abstract class Persona {

abstract getName(): void;

}

class Estudiante extends Persona {
getName(): void {}
}

Interfaces

Son una forma de declarar contratos dentro del código para las clases que tienen características comunes. Veamos la siguiente clase:


class Persona {

public name: string;

public constructor(theName: string) { this.name = theName;}

}

Supongamos que vamos a tener 2 clases : estudiantes y profesores. Todos deben cumplir la regla de tener una propiedad name. Para esto usaremos una interface que obligará a que sea implementada:

interface Persona {
name: string;
}
class Estudiante implements Persona{
public name: string;
}

class Profesor implements Persona{
public name: string;
}

Propiedades opcionales

Una buena caracteristicas es que podemos declarar variables opciones las cuales no obligan a las clases que implementar a declarar esos miembros. Se hace por medio del carácter ?.

interface Persona {
name?: string;
}

Propiedades solo lectura

podemos especificar que los miembros deben ser declarados como readonly.


interface Persona {
readonly name: string;
}

Conclusión

Hemos las clases, interfaces y funciones. Si bien el tema puede ser mucho más extenso, con este pantallazo general nos dan la base para poder seguir expandiendo nuestros conocimientos. El el próximo post veremos el tema de Tipos Genéricos.

[Tutorial] TypeScript | Javascript – Parte 3

Todo lenguaje de programación orientado a objetos tiene tipos de datos más o menos complejos como por ejemplo numeros, cadenas de caracteres, etc. En TypeScript tenemos soporte para datos tipado orientados a JavaScript.

Objetivo

En esta tercera parte tocaremos los tipos que TypeScript nos brinda para trabajar y  sus declaraciones. Veremos algunos ejemplos interesantes en VS Code.

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 empezar veremos la estructura básica de cómo debemos declarar una variable:

(alcance) (Nombre): <Tipo> = (Valor);

Ahora que conocemos la estructura básica de declaración comenzaremos con los disponibles.

Tipos

Boolean

Es el tipo más común que podemos encontrar en cualquier lenguaje de tipos. Solamente puede tener 2 valores posibles true o false.

let isCorrect: boolean = true;

Numeric

Este puede contener cualquier número inclusive con decimal. Como en Javascript, TypeScript puede guardar números decimales, flotantes.

let money: numeric = 3.34;
let age: numeric = 12;

String

En este tipo de datos guardaremos caracteres, cadenas de caracteres o texto. Podemos utilizar comillas dobles o comillas simples para encerrar el valor. También plantillas de cadenas agregando la notación $( nombre de variable) dentro de nuestros string.

let titlePage: string = "Hola Mundo";
let textInside: string = "This is ${ titlePage }";

Array

Para usar array tenemos 2 formas de hacerlo, una es muy similar a javascript la otra es muy similar a lo que se denomina Tipos Genéricos.

let colors: string[] = ["Rojo", "Azul", "Verde"];
let colors: Array<string> = ["Rojo", "Azul", "Verde"];

Tuple

Este tipo es que se denomina comúnmente llave valor. similar a un array, nos permitirá acceder al valor por medio de su llave.

let x: [string, number] = ["Pepe", 2];
console.log(x["Pepe"]);

Enum

Son un conjunto de valores que por default  será asignado dependiendo el orden en que se encuentren. También podemos darle valores asignarles nosotros los valores o decirle que empiece la secuencia desde un valor predeterminado declarándose al primero de la lista.

enum Animales{ Perro, Gato, Jirafa, Leon };
enum Animales{ Perro = 1, Gato, Jirafa, Leon };
enum Animales{ Perro = 2, Gato = 5 , Jirafa = 7, Leon = 8 };
let animalTipo = Animales.Jirafa;

Any

La usaremos cuando no sabemos realmente qué valor va a tomar en nuestra aplicación. También podemos usarlo en un array que puede tener valores del tipos distintos. Es como tener un variable de tipo dinámica.

let valorDesconocido: any = 20;
let valoresDesconocidos: any[] =  ["Rojo", 2, true];

Void

Básicamente es lo contrario de lo anterior. Sería no tener ningún tipo. Casi siempre lo usaremos en funciones o métodos que no devuelven un valor.

let sinTipo: void = undefined;

fuction NoDevuelveValor(): void{
    console.log("Hola");
}

Null y Undefined

No solo son valores también pueden declararse como tipos. Por defecto son subtipos de los anteriores esto quiere decir que podemos asignar este valor a un tipo como numerico o string.

let sinTipo: number = null;

Never

Representar valores que nunca ocurrirán. Podría usarse por ejemplo en una función que siempre va devolver un error ya que en realidad no devuelve nada. No podemos asignarle never a ningún tipo solamente puede asignarse a sí mismo.

function lanzarError(mensaje: string): never{
    throw new Error(mensaje)
}

Aserciones de tipo

De esta forma podemos decirle al compilador que confíe en nosotros para asignarle un tipo. Es similar a Cast de otros lenguajes. Podemos usarlo de 2 formas:

let algunValor: any = 123;
let stringLengh: number (<string> algunValor).length;
let stringLengh: number (algunValor as string).length;

Declaraciones de variables

Tenemos 2 let y const. Let es muy similar a usar var y const es como cualquier constante en los lenguajes de programación evitando que se cambie su valor una vez asignado.

Var

La declaramos igual JavaScript:

var nombre = "Jorge";

Las variables de tipo var pueden estar declaradas en cualquier bloque. Hay que tener en cuenta que al declararla como var puede ser accedida desde bloques superiores. No es conveniente usar var debido a que puede causarnos muchos problemas.

Let

Este viene a solucionar el problema que tenemos con var y su diferencia no está en la sintaxis sino en la semántica:

let nombre = "Jorge";

Al utilizar let estamos diciendo que la variable tiene el alcance del bloque en el cual fue declarado.esto quiere decir que no pueden ser alcanzadas desde fuera del bloque donde se encuentra.

Const

Este tipo de declaración tienen las mismas características de let pero al asignarle un valor no podrá ser cambiada en ningún momento posterior.

const nombre = "Jorge";

Al utilizar let estamos diciendo que la variable tiene el alcance del bloque en el cual fue declarado. Esto quiere decir que no pueden ser alcanzadas desde fuera del bloque donde se encuentra.

Conclusión

Hemos tenido nuestro segundo acercamiento a los tipos de TypeScript y cómo debemos declararlos. Si conocen C# o  Java notaran que las referencias son muy similares pero respetando las características de JavaScript. El el próximo post veremos el tema de interfaces y clases.

[Tutorial] TypeScript | Javascript – Parte 2

En esta segunda parte tocaremos algunos temas sobre la configuración de TypeScript, daremos nuestros primeros pasos y veremos algunos puntos interesantes sobre Visual Studio Code que será la herramienta que estaremos utilizando en los ejemplos.

Objetivo

En esta segunda parte tocaremos algunos temas sobre la configuración de TypeScript, daremos nuestros primeros pasos y veremos algunos puntos interesantes sobre Visual Studio Code que será la herramienta que estaremos utilizando en los ejemplos

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

Lo primero que haremos es crear un archivo. Para esto utilizaremos la consola de VS Code para generarlo por medio siguiente comando:

tsc --init

Este comando no creará un archivo que en su interior contendrá algo parecido a lo siguiente:

{
  "compilerOptions": {
     /* Basic Options */
     "target": "es5",
     "module": "commonjs",
     "strict": true,
     "sourceMap": true
   }
}

Si bien este archivo tiene muchas opciones de configuración las que por default están activas son las 3 que vemos en el cuadro anterior. A simple vista vemos la propiedad “target” que es la que indicará que version de ECMAScript usará para crear el JavaScript final.

Ahora crearemos nuestro primer archivo de TypeScript. Los archivos TypeScript poseen la extensión “.ts”. Lo haremos desde el icono de VS Code, creamos el archivo app.ts:

y dentro de este archivo pondremos nuestro código:

class InitApp{
     public static main(){
     console.log("Hola Mundo");

return 0;
     }
}

InitApp.main();

Nuestra aplicación no hace nada muy difícil. Solamente mostrará en consola el mensaje “Hola Mundo!”. Veamos qué pasa cuando compilamos el código. Para hacerlo ejecutaremos en la consola el siguiente comando indicando el nombre de nuestro archivo ts:

tsc app.ts

Como resultado tendremos un nuevo archivo app.js que es el resultado de la transpilación:

A simple vista vemos que el código tal vez es un poco más extenso. Pero eso no debe preocuparnos ya que este nuevo código correrá sin ningún problema en los navegadores que soporten el ECMAScript que le indicamos el archivo de configuración.

Vamos hacer que nuestro codigo falle, no hay que preocuparse por el momento por cosas que veamos y no entendamos lo veremos en los siguientes post. Para darles un ejemplo agregaremos 2 líneas de código:

class InitApp{
     public static main(){
         let msg:string;
         msg= 1;
        console.log(msg);
...

En la declaración estamos diciendo que la variable msg es del tipo string, pero, en la línea siguiente le estamos asignando un valor numerico. Automáticamente el VS Code nos indicará que la asignación no es válida gracias al Intellisense que viene con el.

También podemos ejecutar la compilación por medio de consola para comprobar si realmente es un error. Al ejecutar la compilación por medio del comando tsc podemos ver el mensaje de error:

Corregiremos nuestro código para que deje de errar y lo ejecutaremos:

class InitApp{
     public static main(){
         let msg:string;
         msg= "Hola Mundo!";
        console.log(msg);
...

Para ejecutarlo usaremos Node.Js junto al siguiente comando:

node app.js

Nuestra aplicación está funcionando correctamente. Ya tenemos nuestra primer app funcionando de la mano de TypeScript.

Tal vez sea molesto estar ejecutando todo el tiempo el comando tsc por consola cada vez que hacemos una modificación e inclusive obliga a tener una consola externa o tener abierta la consola VS Code la cual nos quita espacio de trabajo. Para esto tenemos 2 opciones:

Opción 1

El comando tsc tiene un opción muy interesante que es el comando -w. Este comando hace que el tsc quede en modo watcher. Cada vez que guardemos un archivo el tsc detectara el cambio y transpilara el código.

Opción 2

La segunda opción es configurar una tarea en VS Code, presionando f1 nos abrirá la ventana de “Command Palette” y escribiremos Run Build Tanks:

Nos preguntará sobre qué archivo y elegiremos ts.config. Una vez hecho lo anterior nos creará una carpeta nueva llamada .vscode y dentro un archivo tasks.json donde veremos algo parecido a lo siguiente.

{
    "version": "2.0.0",
    "tasks": [
        {
           "type": "typescript",
           "tsconfig": "tsconfig.json",
           "problemMatcher": [
          "$tsc"
          ],
           "group": {
                "kind": "build",
                "isDefault": true
           }
       }
    ]
}

Ahora podemos usar la combinación de teclas ctrl + shift + b para ejecutar la compilación.

Conclusión

hemos tenido nuestro primer contacto con TypeScript y hemos visto algunas características de las herramientas. En el próximo post comenzaremos con la introducción al lenguaje.

[HowTo] Visual Studio Code | En Linux

Microsoft en estos últimos tiempos está apostando al OpenSource. Una de las cosas que ha impulsado es el uso de sus herramientas en este caso el editor liviano pero extremadamente potente VS Code.

Objetivo

El objetivo de esta publicación tiene un tutorial de como podemos instalar Visual Studio Code en linux.

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

Visual Studio Code es un editor de código ligero y muy potente el cual podemos ejecutarlo en cualquier plataforma como Windows, MacOs o Linux. Viene con soporte Intellisense y para varios lenguajes de forma nativa. También podemos utilizar controladores de código fuente como Git o TFS. Por último, la característica que más me gusta, es totalmente extensible. Gracias a esto última característica tenemos una gran cantidad de plugin que podemos instalar para cualquier lenguaje que utilicemos.

Yo he elegido, solo por gusto personal, la distribución Kubuntu. No por nada en particular solo me gusta mas KDE. Lo primero que debemos hacer es descargar el paquete desde la página con la extensión .deb. Pueden hacerlo desde este link  https://code.visualstudio.com/

Una vez que lo tenemos descargado debemos abrir una consola, ir a la carpeta donde descargamos los archivos. En KUbuntu tenemos la posibilidad de instalarlo por medio de QApt:

Y listo! tenemos nuestro VS Code instalado

Para los más audaces podemos instalarlo por medio de consola completamente. Comencemos:

curl https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor > microsoft.gpg
sudo mv microsoft.gpg /etc/apt/trusted.gpg.d/microsoft.gpg
sudo sh -c 'echo "deb [arch=amd64] https://packages.microsoft.com/repos/vscode stable main" > /etc/apt/sources.list.d/vscode.list'

“Nota: puede ser que no tengamos curl instalado por esta razón primero deberemos instalarlo con el siguiente comando apt-get install curl“

Si no hemos tenido ningún problema, el siguiente paso es actualizar nuestro repositorio de paquetes para esto usaremos el siguiente comando

sudo apt-get update

Por último, lo que nos queda es instalar el VS Code desde el repositorio.

sudo apt-get install code

Ya lo tenemos instalado y listo para comenzar disfrutar de esta gran herramienta.

Conclusión

Hemos instalado VS Code en nuestro linux de una forma muy sencilla. En próximos post veremos como hacer una aplicación .Net.

[Event] Global Azure BootCamp 2018 | Azure B2C: servicio de identidad ágil para tus desarrollos.

El día de ayer estuvimos presentando Global Azure Bootcamp 2018 Buenos Aires el tema  Azure B2C. Les dejo los link de la presentación y los el video.

El día de ayer estuve presentando Global Azure Bootcamp 2017 Buenos Aires el tema  Azure B2C. Les dejo los link de la presentación y los el video.

Presentación

Video Charla

Video Entrevista

[Article] Azure | Integrando Azure Search en un Website

En en el artículos anterior (ir al articulo anterior) estuvimos viendo qué es Azure Search y como podemos configurarlo para comenzar a utilizarlo. En este artículo veremos cómo integrarlo en una Aplicación Web por medio del SDK que nos brindan.

Objetivo

En esta entrega estaremos integrando Azure Search en una Aplicación Web. Veremos sus características y funcionalidades plasmadas en un WebSite. El código del proyecto podrán descargo desde GitHub desde esta dirección

https://github.com/withoutdebugger/DemoAzureSearchWODv1

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

Antes que nada necesitaremos el SDK. El SDK posee un conjunto de librerías de cliente las cuales las utilizaremos para manejar los índices, los datasource, indexadores, subir documentos, ejecutar queries y todo lo que necesitemos.

Las librerías principales son:

  • Azure.Search
  • Search.Models

Estas librerías tienen definidas algunas clases principales como Index, Field y Document como también algunas operaciones como Indexes.Create o Documents.Search asociadas a SearchServiceClient y SerachIndeCliente. Están agrupadas de una forma lógica para una mejor compresión.

Una vez listo el SDK en nuestra aplicación necesitaremos los ApiKey que Azure. Esta llave nos dará acceso al servicio y a base de búsqueda. La guardaremos en nuestra configuración de connections strings.

Para obtenerlos debemos ingresar al portal de Azure. Seleccionamos nuestro servicio de búsqueda -> opción claves:

Estas claves la usaremos dentro de nuestro archivo appsettings.json para tenerlas disponibles y consultarlas en el momento de consumir el servicio.

{
"AzureSearch": {
"SearchServiceName": "{nombre del servicio}",
"SearchServiceAdminApiKey": "{apikey}",
"SearchServiceQueryApiKey": "{apikey} "
},

...

}

Nuestra aplicación es una aplicacion ASP.Net Core MVC junto a una Web APi que será consumida por medio de JQuery. No voy a entrar en detalle de la aplicación MVC pero si en el servicio de búsqueda.

Tendremos el Home Controller que solamente nos devolverá la página inicial donde se encontrarán nuestros métodos en JQuery que consumirán los servicios de búsqueda.

Crearemos una Web API que se llamara Search. Será un controller llamado SearchController. Este recibirá en su constructor la clase IConfiguration para tener disponible el servicio de Azure Search.

{
searchServiceName = _configuration["AzureSearch:SearchServiceName"];
queryApiKey = _configuration["AzureSearch:SearchServiceQueryApiKey"];
indexClient = new SearchIndexClient(searchServiceName, "realestate-us-sample", new SearchCredentials(queryApiKey));
}

Nuestro método principal Get será el encargado de recibir las consultas desde el cliente. En esta primera versión filtra por texto, facets, tag y manejara la paginación. También tendremos algunos métodos privados que nos ayudaran a armar la consulta final.

Modelo Hotel

Este modelo es en el cual se transformara el resultado de Azure Search en nuestra aplicación.

public partial class Hotel
{
[System.ComponentModel.DataAnnotations.Key]
public string listingId { get; set; }
public string description { get; set; }
public string description_es { get; set; }
public string number { get; set; }
public string street { get; set; }
public string city { get; set; }
public string countryCode { get; set; }
public string postCode { get; set; }
public string thumbnail { get; set; }
public string status { get; set; }
public string[] tags { get; set; }
}

Get Method

El método principal recibirá los parámetros de consulta. Dentro podemos ver que tenemos los métodos privados CreateFilterFacets, CreateFilterTags, CreateParameter.

[HttpGet]
public DocumentSearchResul<Hotel> Get(string searchtext = "", string cityFacet = "", string typeFacet = "", string tags = "", string orderby = "", string derbydirection "desc", int actualPage = 1)
{
//Filter
string filter = CreateFilter(cityFacet, typeFacet);

//Filter Tags
IList<ScoringParameter> filterTags = CreatedFilterTags(tags);

//Parameters
SearchParameters sp = CreateParameter(10, filter, orderBy, filterTags, actualPage);

//Search
var result = indexClient.Documents.Search<Hotel>(searchtext, sp);
return result;
}

CreateFilterFacets

 Este método es el encargado de crear los filtros para los facets de City y Type. Como podemos ver en el método, el resultado un string que acompañará a la consulta. Azure Index utiliza una estructura OData formar las consultas. Por ejemplo, en el string el comando podemos ver el comando eq que significa igual. Podemos ver la lista completa de comando desde este link:

https://docs.microsoft.com/en-us/rest/api/searchservice/odata-expression-syntax-for-azure-search

private string CreateFilterFacets(string cityFacet, string typeFacet) {

string filter = "";

if (cityFacet != null)
{
filter += filter != string.Empty ? " and " : "";
filter += "city eq '" + cityFacet + "'";
}

if (typeFacet != null)
{
filter += filter != string.Empty ? " and " : "";
filter += "type eq '" + typeFacet + "'";
}

return filter;
}

CreateFilterTags

Este método es el encargado de crear una lista de Tags para filtrar. A diferencia del anterior, los tags deben filtrarse por medio de ScoringParameter que hace referencia a un nivel de acierto.

private IList<ScoringParameter> CreateFilterTags(string tags) {

IList<ScoringParameter> _parameterTags = new List<ScoringParameter>();

if (tags == null) { return _parameterTags; }

string[] _listTags = tags.Split(new[] { "," }, StringSplitOptions.RemoveEmptyEntries);

if (_listTags.Count() > 0)
{
_parameterTags.Add(new ScoringParameter("tags", _listTags));
}

return _parameterTags;
}

CreateParameter

Antes de la ejecución final de obtención de resultados debemos armar un SearchParamters. Desde este manejaremos la configuración principal de la consulta como el modo de búsqueda, cuántos tomar por medio de top, el filtro de text, el cálculo para la página, los campos que usaremos, si incluimos el total y los facets que filtraremos. Por último también se agregara tags correspondientes al ScoringParameters.

private SearchParameters CreateParameter(int top, string filter, IList<string> orderby, IList<ScoringParameter> filterTag, int currentPage)
{

SearchParameters searchParameters =
new SearchParameters() {
SearchMode = SearchMode.Any,
Top = 10,
Filter = filter,
Skip = currentPage - 1,
Select = new Lis<String>() { "listingId", "description", "description_es", "number", "street", "city", "countryCode", "postCode", "thumbnail", "status", "tags" },
// Add count
IncludeTotalResultCount = true,
//// Add facets
Facets = new List<String>() { "city", "type", "status", "tags" },
};

searchParameters.OrderBy = orderby;
searchParameters.ScoringParameters = filterTag;

return searchParameters;
}

Ejecución de resultado

Una vez que tenemos todo los objetos armados para nuestra consulta se llamará al siguiente método perteneciente al cliente de Azure Search.

var result = indexClient.Documents.Search<Hotel>(searchtext, sp);

indexClient es del tipo SearchIndexClient el cual es el encargado de realizar finalmente la consulta en nuestro servicio de Azure Search. Podemos ver que le enviaremos nuestra clase Hotel y el se encargara de hacer la transformación.

La aplicación

Finalmente nuestra aplicación se verá visualizará de la siguiente forma luego de una búsqueda:

Podemos filtrar la búsqueda por medio de la selección en cada una de las secciones City, Type y Tags para ajustar nuestros resultados. El encargado de ajustar la búsqueda sera los métodos creados en JQuery.

 

Conclusión

Azure Search es una excelente herramienta para realizar potentes búsquedas. También nos brinda un SDK muy potente para que podamos realizar consultas muy rápidamente y poder así integrar rápidamente en nuestras aplicaciones

Les dejos la aplicación de ejemplo en GitHub para que puedan consultarla:

https://github.com/withoutdebugger/DemoAzureSearchWODv1

También les dejo el link del demo:

http://wodazuresearch.azurewebsites.net/

[Article] Azure | Azure Search

En este artículo hablaremos de Azure Search. Azure Search es una solución que Microsoft nos brinda para poder integrar una excelente experiencia de búsqueda en nuestras aplicaciones móviles, web o cualquier aplicación como empresariales.

Objetivo

En esta entrega veremos qué es Azure Search. También, como configurar nuestra cuenta de Azure Search y un pequeño demo de como utilizarlos en una aplicación web.

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

Todos los días, como usuarios, al usar aplicaciones estamos acostumbrados a los métodos de búsqueda rápidos y muy eficientes. Por ejemplo, todos los dias, en algun momento, buscamos en Google o algun motor de búsqueda de nuestra preferencia. Cuando usamos otras aplicaciones buscamos la misma experiencia de búsqueda.

Azure Search nos da la posibilidad de tener la misma experiencia de búsqueda en nuestras aplicaciones. Todo esto es posible gracias que tenemos disponible una gran cantidad de APIs Rest para consumir el servicio, también, un SDK muy completo en .Net. Por último,  dentro del portal de Azure tenemos muchas herramientas para la creación de prototipos, creación y consulta de índices.

Para poder comenzar es necesario una cuenta de Azure. Les dejo el link para poder obtener una cuenta gratuita junto a 200 dolares de crédito para poder probar las capacidades que Azure Search brinda:

Suscribirse

Características de Azure Search

A continuación analizaremos las características funcionales más interesantes, desde mi punto de vista, que podemos usar con Azure Search. Son las siguientes:

Búsqueda de texto completo y analisis de texto

Corresponde a la búsqueda que se basa escribiendo en una caja de texto. Podemos usar operadores lógicos o frases de búsqueda como cualquier buscador de internet.

Integración de datos

Azure Search soporta gran variedad de orígenes de datos. La unica caracteristica que tienen que tener estos datos es que tienen que respetar la estructura de datos del tipo JSON.

No obstante tenemos disponible soporte para Azure SQL Database, Azure Cosmos DB o Azure Blob Storage. En este último podemos tener documentos del tipo Microsoft Office, PDF o Html los cuales pueden ser indexados para búsquedas dentro de documentos.

Análisis Lingüístico

Básicamente, tendremos la capacidad de analizar la busqueda relacionado con una fonética de un lenguaje o alguna expresión regular. Podemos controlar el idioma, los tiempos verbales, género, nombres plurales o singulares o inclusive el manejo de palabras compuestas.

Características de la experiencia del usuario

Entre las características más importantes que podemos brindarles a nuestros usuarios tenemos:

  • Sugerencias de búsqueda: a medida que los usuarios van escribiendo su búsqueda le podemos ir sugerencias mostrando relacionadas con lo ingresado.
  • Navegación por facetas: Es un listado de categorización que podemos usar como filtros. Este tipo de filtro es muy similar a los sitios de compras, como amazon, que en el lado izquierdo tenemos varias opciones agrupadas que al hacer un solo click filtran la búsqueda principal.
  • Resaltado de referencias: podemos aplicarle un formato al resultado, por ejemplo subrayarlo en negrita, indicando que está relacionado con la búsqueda.
  • Ordenación: podemos ofrecer varias forma de ordenar la información obtenida del resultado de búsqueda.
  • Paginación: Como todo buen listado de búsqueda, podemos paginarlo.

Supervisión e informes

Es importante analizar las búsquedas de nuestros usuarios con el objetivo de tener que ajustar nuestro índices para que las posteriores búsquedas sean más efectivo y eficiente. Azure Search registra todas la búsquedas realizadas para posterior análisis. En un post futuro tocaremos este tema con más detalle.

Otras Características

Además de las nombradas, Azure Search tiene las siguientes características:

  • Georeferencia: Filtro por ubicaciones geográficas.
  • Relevancia: Usando perfiles de puntuación podemos darle relevancia a ciertos documentos.
  • Herramientos de prototipos e Inspección: configurar indexadores, crear índices, consulta de un índice particular, etc.

Manos a la Obra

Una vez que tenemos nuestra cuenta Azure, es muy sencillo crear una cuenta de Azure Search. Debemos seguir los siguiente pasos:

1. Ingresar al portal y buscar en el MarketPlace “Búsqueda de Azure”, lo seleccionamos y presionamos crear.

2. Completamos los datos que nos solicita el formulario. En mi caso la url sera testwod pero pueden seleccionar un nombre que ustedes deseen. En el plan de tarifa, para motivos de este demo, usaremos la tarifa gratis.

3. Un vez creado, vamos a grupo de recursos, seleccionamos el nombre de recurso que utilizamos y dentro podemos ver la cuenta de Azure Search que creamos. Le hacemos clic y veremos la información necesaria de nuestra cuenta.

Volvamos a nuestro panel de Azure Search. Para conectar nuestra base de datos debemos seleccionar desde la barra de opciones “Importar Datos” y seleccionamos Muestras para nuestro demo:

Luego de vincularlo veremos la pantalla de configuración de nuestros índices que descubrirá, desde nuestro origen de datos. Vamos a dejarlos por default.

Por último, seleccionamos un nombre para nuestro índice.  El tiempo el cual queremos que se refresque nuestros índices es configurable. Cuales son retornables, cuales filtrables, por cual vamos a ordenar, etc. Para esto último debemos habilitarlo en el datasource como dice en el mensaje. Por el momento no será necesario.

Ahora, una vez que el indexador termine podremos ingresar al explorador de búsqueda para probar algunas consultar.

En la imagen podemos ver que tenemos un cuadro donde podemos ingresar nuestra consulta, como también, un cuadro donde podemos obtener la url de esa búsqueda. Por último, un cuadro con el resultado de la búsqueda.

Vamos a escribir la siguiente consulta y veremos los resultado que se corresponden a nuestros parámetros:

search=granite&country=us

Conclusión

Azure Search es una excelente herramienta para realizar potentes búsquedas desde nuestros orígenes de datos existentes. No es necesario crear una plataforma para esto. Azure Search pone a nuestra disponibilidad la misma experiencia de usuario y la misma potencia de un motor búsqueda especializado para nuestra aplicaciones.

En este post hemos hablamos sobre Azure Search, sus características, como configurar nuestra cuenta y configurar nuestros primeros índices para hacer pruebas. En el próximos post integraremos estos índices a una aplicación en .Net para poder explorar un poco más las capacidades en un sitio web.