Charla sobre potencial de NodeJS en el desarrollo Frontend

NodeJS es una tecnología superponente que nos permite desarrollar aplicaciones muy rápido y muy robustas, tan solo haciendo uso de Javascript.

En tan solo 8 años de vida, se ha introducido en el mundo del desarrollo, con una comunidad muy fuerte.

Os dejo una charla sobre todo lo que se puede lograr.

 

En 15 minutos comenzamos votación en Facebook

1

Queridos amigos, queremos saber cual es vuestro sistema operativo preferido. Para ello, vamos a hacer una votación en Facebook que estará activa entre las 12:00 y las 16:00 hora peninsular española. Os invitamos a que participéis:

1

Usar el método post de un servicio APIs REST desde C#

1

Ya comentamos como se puede usar un servicio web APIs REST desde C# haciendo uso de su método GET, pero hoy os quiero mostrar cómo usar los métodos post de estos servicios que se usan para envío de información a al servicio.

Antes de nada, os pido disculpas por no poder poneros un servicio web donde poder hacer vuestras pruebas, me he basado en código propio, cambio los datos reales por valores ficticios.

Vamos a usar una clase que me nos a hacer todos muchos más fácil, JavaScriptSerializer.

 

JavaScriptSerializer ser = new JavaScriptSerializer();

 

Recordar que deberéis usar el espacio de nombres System.Web.Script.Serialization, como lo vamos a usar más de una vez, os recomiendo que lo añadáis a vuestras referencias using.

A mí personalmente, me gusta poner las URI de los métodos del servicio web en una variable, por si tenemos entorno de pruebas y producción o simplemente tener que reutilizar código, que sea todo mucho más sencillo.

string sUrlRequest = "https://miserviciosrest.biz/stock_prec”;

El siguiente paso será crear nuestra petición http, estamos construyendo una especie de “formulario”, para que os hagáis una idea.:

var httpWebRequest = (HttpWebRequest)WebRequest.Create(sUrlRequest);

httpWebRequest.ContentType = "application/json";

httpWebRequest.Method = "POST";

Ahora vamos a construir el archivo JSON que vamos a enviar dentro del cuerpo de nuestro “formulario”. Nuestro JSON deberá tener una estructura específica, que nos habrá facilitado nuestro proveedor del servicio.

En mi ejemplo, es un servicio APIs REST para consultar productos por código de artículo, en la consulta debo indicar el código de producto y si la búsqueda la hago por código de proveedor o por el código de mi empresa.

Voy a necesitar una clase para crear el objeto que después transformaré en formato JSON, mi clase para consultar es esta:

public class PrecioStockConsulta

{

public string id_artic { get; set; }

public string tipo_id { get; set; }

}

Como mi servicio necesita el envío de un array o vector, para poder consultar en la misma petición varios productos, por lo que tengo que construir mi JSON así:

var exPrecioStockConsulta = new List<PrecioStockConsulta>();


exPrecioStockConsulta.Add(new PrecioStockConsulta ()

{

id_artic = “CódigoAConsultar1”,

tipo_id = "n"

});


exPrecioStockConsulta.Add(new PrecioStockConsulta ()

{

id_artic = “CódigoAConsultar2”,

tipo_id = "n"

});


exPrecioStockConsulta.Add(new PrecioStockConsulta ()

{

id_artic = “CódigoAConsultar3”,

tipo_id = "n"

});

Vale ya tenemos nuestro objeto creado para poder hacer uso del método POST de nuestro servicio REST, pues ahora debemos transformarlo en JSON, tan fácil como esto:

var jsonBodyConsulta = new JavaScriptSerializer().Serialize(exPrecioStockConsulta);

using (var streamWriter = new StreamWriter(httpWebRequest.GetRequestStream()))

{

streamWriter.Write(jsonBodyConsulta);

streamWriter.Flush();

}

var httpResponse = (HttpWebResponse)httpWebRequest.GetResponse();

using (var streamReader = new StreamReader(httpResponse.GetResponseStream()))

{

var result = streamReader.ReadToEnd();

PrecioStockRespuesta exaPrecioStockRespuesta = ser.Deserialize<PrecioStockRespuesta>(result);

}

Como veis mi servicio APIs REST me contesta a mi pregunta de códigos con información sobre su precio y stock, para ello uso esta clase:

public class PrecioStockRespuesta

{

public int count { get; set; }

public List<Item> items { get; set; }

public List<string> errores { get; set; }

}

Tanto PrecioStockRespuesta como PrecioStockConsulta, son clases especificas del servicio que utilizo. Cuando uso  json2csharp, en este caso porque la estructura es muy simple, pero cuando se complica te ahorra mucho trabajo.

Bueno, pues así de simple es consumir el método POST de una APIs REST desde C#

1

Uso de sockets con Node.js

Llevo un tiempo profundizado en el mundo de Node.js y hace unos días probé a desarrollar el ejemplo clásico para practicar los socket, la realización de un chat.

Si no sabéis que son los sockets, tan solo deciros que es una evolución de Ajax. La ventaja de usar sockets con Node.js frente a Ajax, es que los sockets solo se activan cunado la información ha cambiado, mientra que con Ajax debemos de comprobar cada cierto tiempo si la información ha cambiado.

Me ha parecido una autentica pasada la verdad, y mi más profunda enhorabuena a Carlos Azaustre por su detallado vídeo de explicación de como implementar esta tecnología.

Vídeo de uso de sockets con Node.js

Apuntes personales sobre el vídeo

En primer lugar decir una vez más que el vídeo es la caña y que me ha servido tela tela y dar otra vez mi enhorabuena a Carlos Azaustre, pero me guaría dar un par de apuntes extras, para intentar mejorar aún un poco más los apuntes que nos da el maestro,

Si queréis probar la aplicación en un entorno local desde otro PC, debéis de sustituir la linea de:

var socket = io.connect('http://localhost:3000/', {'forceNew':true});

por:

var socket = io.connect();

Porque el ordenador cliente, que no sea donde reside el servidor, tendrá un localhost distinto, por lo que nos dará un error del tipo “ERR_CONNECTION_REFUSED”, puesto que, si no lo hemos modificado, nuestro localhost apuntará a la dirección 127.0.0.1, pero claro, al no ser donde reside el servidor, en esa dirección no habrá nada.

Archivos de demo de sockets con Node.js

Os dejo los archivos para poder poner en práctica este magnifico vídeo, os adelanto que he hecho alguna modificación, pero no porque estuviese mal, si no, porque cada cual programa como le parece bien a fin de cuenta mientras sea funcional está correcto, o al menos, así lo pienso.

Para descarga los archivos, darme un poco de presencia social y ya está 😉

[sociallocker]testsockets[/sociallocker]

Debéis de tener en cuenta que para poder se instalen las dependecias, debéis usar el comando:

npm install

Usar un servicio web API Rest con C# (CSHARP)

Ya no es ninguna novedad, el uso de servicio web API Rest en nuestra aplicaciones es superútil , porque nos permite “desconectar” el código de gestión de una aplicación de su presentación al usuario lo que se conoce como frontend.

Antes de nada, debes saber que un servicio REST  Representational State Transfer o Transferencia de Estado Representacional en españoles un protocolo HTTP para la comunicación entre sistemas. Los sistemas que siguen los principios REST se llaman con frecuencia RESTful.

Antes de entrar en detalle de como usar un servicio web API Rest con C# debemos de tener una base mínimo.

Fundamentos de RESTservicio web API Rest

  • Un protocolo cliente/servidor sin estado: cada mensaje HTTP contiene toda la información necesaria para comprender la petición. Como resultado, ni el cliente ni el servidor necesitan recordar ningún estado de las comunicaciones entre mensajes. Sin embargo, en la práctica, muchas aplicaciones basadas en HTTP utilizan cookies y otros mecanismos para mantener el estado de la sesión (algunas de estas prácticas, como la reescritura de URLs, no son permitidas por REST)
  • Un conjunto de operaciones bien definidas que se aplican a todos los recursos de información: HTTP en sí define un conjunto pequeño de operaciones, las más importantes son POST, GET, PUT y DELETE. Con frecuencia estas operaciones se equiparan a las operaciones CRUD en bases de datos (ABMC en castellano: crear,leer,actualizar,borrar) que se requieren para la persistencia de datos, aunque POST no encaja exactamente en este esquema.
  • Una sintaxis universal para identificar los recursos. En un sistema REST, cada recurso es de doble dirección únicamente a través de su URI.
  • El uso de hipermedios, tanto para la información de la aplicación como para las transiciones de estado de la aplicación: la representación de este estado en un sistema REST es JSON. Como resultado de esto, es posible navegar de un recurso REST a muchos otros, simplemente siguiendo enlaces sin requerir el uso de registros u otra infraestructura adicional.

JSON vs XML

JSON (se pronuncia YAISON) es el acrónimo de JavaScript Object Notation, es un formato de texto ligero para el intercambio de datos. JSON es un subconjunto de la notación literal de objetos de JavaScript aunque hoy, debido a su amplia adopción como alternativa a XML, se considera un formato de lenguaje independiente.

Es posible que os preguntéis porque se ha instaurado como alternativa a XML, pues por dos razones de peso, estructura más simple de usar y leer para un ser humano y el otro punto fuerte es que se reduce el trafico de datos, puesto que un archivo JSON tiene este formato:

{
   "departamento":8,"nombredpto":"Ventas",
   "director": "juan rodriguez",
   "empleados":[
      {
         "nombre":"Pedro",
         "apellido":"Fernández"
      },
      {
         "nombre":"Jacinto",
         "apellido":"Benavente"
      }]
}

Esto mismo en XML sería algo así:

<empresa>
  <departamento>
    <id>8</id>
    <nombredpto>Ventas</nombredpto>
    <director> juan rodriguez</director>
    <empleados>
       <empleado nombre="Pedro" apellido="Fenández">
       <empleado nombre="Jacinto" apellido="Benamente">
    </empleados>				
  </departamento>
</empresa>

Acceder a un servicio web API Rest con C#

 

Una vez ya tenemos más o menos claro que es un servicio web API Rest y que elementos tiene, os voy a enseñar lo fácil que es consumir desde C#.

Lo primero que debemos tener es una URL de un servicio para poder tener acceso a datos JSON, vamos a usar el que tenéis disponible aquí http://jsonplaceholder.typicode.com/posts en esto nos devolverá un total de 100 registros de ejemplo.

string sUrlRequest = "http://jsonplaceholder.typicode.com/posts";

Ahora que ya tenemos nuestra URL para hacer un request de un servicio web API Rest vamos a necesitar hacer un tratamiento sobre los datos devueltos en formato JSON y descargarlos, veréis que fácil.

var json = new WebClient().DownloadString(sUrlRequest);

JavaScriptSerializer ser = new JavaScriptSerializer();

Para poder usar el objeto JavaScriptSerializer debéis añadir a vuestra lista de using el System.Web.Script.Serialization.

Y ahora debemos de transformar el archivo JSON a un objeto, para que nos sea fácil manipularlo. Lo podéis hacer desgranando el JSON por vosotros mismo, pero en ocasiones puede ser un poco lío, yo suelo usar una página muy simple que me lo da directamente. Copiamos el archivo JSON que queremos traspasar a clase y el resultado será esto:

public class RootObject
{
    public int userId { get; set; }
    public int id { get; set; }
    public string title { get; set; }
    public string body { get; set; }
}

Vamos a renombrar el nombre de la clase para que sea más descriptiva a UsuarioEjemplo.

public class UsuarioEjemplo
{
    public int userId { get; set; }
    public int id { get; set; }
    public string title { get; set; }
    public string body { get; set; }
}

Vale ahora ya podemos transformar deseralizar nuestro JSON a una clase así:

UsuarioEjemplo ueUsuario = ser.Deserialize<UsuarioEjemplo>(json);

Y ya está, ya hacemos lo que queramos con nuestro objeto ueUsuario, meterlo en un DataTable, guardarlo en una base datos según los datos que tenga, usarlo para complementar otra clase, etc. El límite lo pondrá nuestra imaginación.

api-rest-con-c

Concurso de Google Maps hasta el 31 de Octubre

Google ha sacado un nuevo concurso para mejorar sus datos en Google Maps y lo ha hecho público con esta nota de prensa que os facilito en español, suerte y a participar.

Nuestro próximo Guías locales Challenge está aquí: desafiamos a explorar el mundo cerca y de lejos. A partir de hoy y hasta el 28 de octubre de cada revisión de calidad alta que escribe y todas las fotos que subes a Google Maps contarán como una entrada en el desafío. Las 5 ciudades que contribuyen la mayor cantidad de comentarios y fotos en Octubre serán invitados a un evento épico en su ciudad natal.

Reúne a tus compañeros de guías locales y intensificar su juego – #LocalGuides gloria eterna está en la línea.

Preguntas frecuentes

¿Cómo se introduce el reto?

Todas las guías locales se introducen automáticamente en el Desafío – no hay registro oficial para participar.

Hacer los que estamos en las comunidades más pequeñas tienen una oportunidad? Parece que este desafío favorece a las grandes ciudades.

Ciudades ganadoras serán determinadas por el porcentaje de participar Guías locales en un lugar determinado – vivir en una ciudad grande o pequeña no afectará artificialmente sus posibilidades.

¿Qué pasa con aquellos de nosotros que viven en áreas remotas? O viven en lugares donde las guías locales no son muy activos?

Los principales contribuyentes individuales en todo el mundo serán recompensados con premios exclusivos sin importar donde están – bulliciosas ciudades, áreas remotas, y en todas partes entre.Nosotros premiamos individualmente los que van por encima y más allá. Y no, no vamos a compartir lo que es la recompensa – que es una sorpresa. ????

¿Cómo vamos a saber dónde nos situamos en el Desafío?

Sigue nuestros canales sociales para las actualizaciones semanales. Vamos a compartir tablas de clasificación y otras actualizaciones de Google+ , Twitter y Facebook . También vamos a enviar actualizaciones semanales aquí en Conectar.

¿Cómo se escribe una reseña en Google Maps?

Aprender cómo escribir un comentario y descubrir consejos para escribir buenas críticas .

¿Cómo puedo subir una foto a Google Maps?

Aprende cómo añadir fotos y revisar nuestras políticas y directrices de fotos . Haga que sus fotos brillan con estos consejos para tomar mejores fotos .

No todas las fotos que subo cuenta?

Al igual que con los puntos de guías locales, el número de lugares que ha subido fotos a es lo que cuenta. Por ejemplo, 5 fotos subidas a 5 lugares se contabiliza como 5 puntos; 5 fotos subidas a 1 lugar como 1 punto.

¿Cómo puedo conocer otras guías locales en mi ciudad natal para animarles a participar?

Conocer a otras personas y compartir la inspiración y aliento aquí en las guías de conexión local.Compartir con otros en Google +, Twitter, Facebook, Instagram y utilizando los #LocalGuides hashtag.

¿Qué es eso – 5 eventos ?

Los 5 mejores ciudades con las críticas de mayor calidad y la más cantidad de fotos de calidad añadido a Google Maps en el mes de octubre va a ganar un evento. Es hora de intensificar su juego.

¿Cuándo estarán los eventos? ¿Tenemos que vivir en una ciudad ganadora para asistir?

Eventos ganadores se llevarán a cabo a finales de este año y, posiblemente, a principios del año siguiente; las fechas y los detalles serán anunciados. Asistencia a los eventos será reservado para los que participaron en el Desafío. Espacios en cada caso pueden estar disponibles para aquellos que eran mayores contribuyentes al desafío, pero vivir en otro lugar.

Media Queries de CSS3 y el diseño adaptativo

Una de las principales ventajas que nos brinda CSS3 es el uso de Media Queries. Este componente nos permite definir una clase CSS dependiendo del tamaño del visor de nuestra página.

Como ya os habréis percatado, se utilizan en el diseño adaptativo de páginas web, Responsive Web Design y es súper útil. Puesto que nos vamos a asegurar que nuestra página web se vea perfectamente en todos los posibles visores, o al menos, los más populares.

Por ejemplo, podemos definir una clase para el body tal que así:

body {
background-color: red;
}

Ahora usaremos una Media Querie para decir que si el ancho de la pantalla es de 500 pixels, ponga el color de fondo negro y el texto en blanco, en vez de rojo:

@media (max-width: 500px) {
body {
background-color: black;
color: white;
}

Obviamente este ejemplo, no tiene mucha más utilidad que la simple explicación del potencial de esta propiedad.

Concepto de Breakpoint en Media Queries

Los breakpoint, son los puntos de ruptura donde iremos añadiendo nuevos estilos a nuestra página. Por ejemplo, en el ejemplo anterior hemos puesto un breakpoint cuando se sobrepase los 500 pixels.

Ejemplo real de uso de Media Queries

Como ya os he comentado esta propiedad se usa fundamentalmente en el diseño responsive y se utiliza cuando se definen el espacio que ocuparán los contenidos d e una web, dependiendo del ancho de la pantalla.

En el siguiente código haremos que se modifiquen el espacio que ocupan cada columna, cuando el ancho de la página sea menor a 768 pixel.

.col-1 {width: 8.33%;}

.col-2 {width: 16.66%;}

.col-3 {width: 25%;}

.col-4 {width: 33.33%;}

.col-5 {width: 41.66%;}

.col-6 {width: 50%;}

.col-7 {width: 58.33%;}

.col-8 {width: 66.66%;}

.col-9 {width: 75%;}

.col-10 {width: 83.33%;}

.col-11 {width: 91.66%;}

.col-12 {width: 100%;}



@media (max-width: 768px) {

/* para móviles: */

[class*="col-"] {
       width: 100%;}
}

¿Por qué hacemos esto?

Para que cuando la página se vea en un móvil se vean las seccione una encima de otra.

En la W3Schools podéis ver un ejemplo completo de uso, si tenéis dudas, dejar un comentario que os lo intento resolver.