Primeros pasos en Node.js


Casi siempre que tengo que escribir una nueva App con Node.js me toca buscar los pasos iniciales ya que mi frecuencia de desarrollo en esta tecnología no es alta, por lo que decidí re-copilar todos estos primeros pasos que desde mi perspectiva son los más generales.

¿Cómo instalar Node.js en Ubuntu 14.x?

Desde la consola ya sea directamente o un terminal PuTTY escribir los siguientes comandos:

sudo apt-get update
sudo apt-get install nodejs
sudo apt-get install npm

Cabe aclarar que la máquina virtual debe tener conexión a Internet.

¿Cómo instalar Express?

Continue reading “Primeros pasos en Node.js”

Snippet: storageHelper.js


El día de hoy he creado una pequeña librería que encapsula las funcionalidades para LocalStorage de HTML5, esto se puede usar en cualquier Web App o Mobile App.

Sin más o menos que decir les dejo la librería: Continue reading “Snippet: storageHelper.js”

How To: Hacer petición POST con contentType x-www-form-urlencoded


Muchas veces tenemos que hacer peticiones con distintos contentType, como es el caso de x-www-form-urlencoded, para esto la vez pasada se había hecho con $.ajax(…) pero si se había hecho un test se podrá ver que no funciona; gracias a Esteban Ladino (un compañero del trabajo) pude ver la luz para esta situación la cual es hacer uso de XMLHttpRequest, aquí el ejemplo.

var nombre = "Camilo";
var apellido = "Rodriguez";
var xmlhttp = new XMLHttpRequest();
var url = 'http://...com/api/../';
var params = "Nombre=" + nombre + "&Apellido=" + apellido;

xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        // Refresh output

    }

    if (xmlhttp.readyState == 4 && xmlhttp.status == 400) {
        // Log
    }
}

xmlhttp.open("POST", url, true);

xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send(params);

 

How To: Consumir REST service desde WebAPI en Frontend


Este Snippet utilizará 2 verbos HTTP que son GET y POST, por lo general son los que más se utilizan.

GET

En ASP .NET Web API se debe tener el controlador de la siguiente manera

public IEnumerable<string> Get()
{
    return new string[] { "value1", "value2" };
}

Donde IEnumerable es el tipo de dato que se desea obtener, entre estos caben los tipos de datos estándares como:

string
int
double
float
etc...

Sin embargo se pueden obtener objetos definidos, este es el caso del uso de bases de datos con Entity Framework.

Como por ejemplo, se requiere obtener un usuario filtrado por cédula o identificador de país

public Usuario Get(string id)
{
    Usuario usuario = _usuarios.GetUsuario(id);
    if (usuario == null)
    {
        usuario = new Usuario() { Cedula = "-1", Contraseña = "N/N", Id_Usuario = -1 };
    }
    return usuario;
}

Ahora solo nos queda ir a nuestro frontend donde queremos consumir, para esto usaremos Ajax y JQuery.

var idUsuario = '1023925417';
 $.getJSON("/api/APIUser/" + idUsuario)
.done(function (data) {
    alert('Ud es ' + data.Id_Usuario);
});

POST

En este caso la variable de datos se llama marcador_usuarioData y contiene información en JSON de la manera.

En la petición definimos que es de tipo POST, una url hacia donde queremos apuntar, los datos, el tipo de contenido y tipo de dato.

var marcador_usuarioData = JSON.stringify({
    Id_Usuario: idUsuario[0],
    Id_Partido: id,
    Marcador_Equipo_A: marcadorA,
    Marcador_Equipo_B:marcadorB
});
$.ajax({
    type: "POST",
    url: "/api/APIGame",
    data: marcador_usuarioData,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    processData: true,
    success: function (data, status, jqXHR) {

        console.log('Ok:' + data);

    },
    error: function (xhr) {
        alert(xhr.responseText);
    }
});

Y en el código de backend debe definirse el tipo de dato conocido para si mismo, por ejemplo mirar la estructura con la que se envía “marcador_usuarioData” y mirar como se compone el controlador y la clase

public void Post(Marcador_Usuario item)
{
    // something code
}
...
public partial class Marcador_Usuario
{
    public int Id_Usuario_Marcador { get; set; }
    public int Id_Usuario { get; set; }
    public int Id_Partido { get; set; }
    public Nullable<int> Marcador_Equipo_A { get; set; }
    public Nullable<int> Marcador_Equipo_B { get; set; }
    public Nullable<int> Puntos { get; set; }
}

Crear Cloud Service desde Azure PowerShell automaticamente: Anexo


Luego de haber construido gran parte del backend necesario para crear nuestro proveedor de servicios basado en Microsoft Azure lo que nos queda es hacerle un Frontend y así automatizar más las operaciones, así que comencemos.

Lo primer es definir un marcador apropiado para esta operación, el resultado se puede ver en la primera imagen de esta entrada.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>cloud builder.</title>

    <!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css">

	<link href="http://getbootstrap.com/examples/cover/cover.css" rel="stylesheet">

	<style id="holderjs-style" type="text/css"></style>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="site-wrapper">
      <div class="site-wrapper-inner">
        <div class="cover-container">
          <div class="masthead clearfix">
            <div class="inner">
              <h3 class="masthead-brand">cloud builder.</h3>
              <ul class="nav masthead-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Contacto</a></li>
              </ul>
            </div>
          </div>

          <div class="inner cover">
            <h1 class="cover-heading">Creación de Cloud Services</h1>            
			<br/><br/><br/>
           <form role="form" name="myform" method="post">
			  <div class="form-group">
			    <label for="InputName">Ingrese el nombre del servicio</label>
			    <br/>
			    <input type="text" class="form-control" name="InputName" id="InputName" placeholder="nombre">
			  </div>
			</form>
			<br/><br/>
            <p class="lead">
              <a href="javascript:sendForm()" class="btn btn-lg btn-default">CREAR <img src="http://i.imgur.com/wwx9MzT.png" alt="Upload Cloud" width="35" style="position:relative;top:-5px;"></a>
            </p>
          </div>
          <div class="mastfoot">
            <div class="inner">
              <p><img src="http://i.imgur.com/knK1nMO.png" alt="Powered by Microsoft Azure"></p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    
    <!-- Latest compiled and minified JavaScript -->
	<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

	<script>
		function sendForm()
		{
			document.myform.submit();
		}
	</script>
  </body>
</html>

Listo, ahora solo queda hacer el motor del backend en Node.js

 var express = require("express");
 var bodyParser = require('body-parser');
 var app = express();
 
app.use(bodyParser());

 /* serves main page */
 app.get("/", function(req, res) {
    res.sendfile('/public/index.html')
 });
 
  app.post("/", function(req, res) { 
    /* some server side logic */
    var name = req.body['InputName'];
    
	var file = 'C:\\Users\\thEpisode\\Documents\\Scripts\\Create.ps1';
	var params = ' –Name ' + name + 
				' –publish –PathCredentials C:\\Users\\thEpisode\\Documents\\Scripts\\Credentials\\BizSpark-6-16-2014-credentials.publishsettings';
	var exec = require('child_process').exec;
	var child = exec('powershell.exe ' + file + params, function( error, stdout, stderr) 
    {
       if ( error != null ) {
            console.log(stderr);
            // error handling & exit
       }
       console.log(stdout);

       res.send(stdout);

    });
  });
 
 /* serves all the static files */
 app.get(/^(.+)$/, function(req, res){ 
     console.log('static file request : ' + req.params);
     res.sendfile( __dirname + req.params[0]); 
 });
 
 var port = process.env.PORT || 5000;
 app.listen(port, function() {
   console.log("Listening on " + port);
 });

Todo esto puede quedar en una carpeta llamada “www” y el frontend en “public”

Crear Cloud Service desde Azure PowerShell automaticamente


En la entrega pasada se vio como crear y publicar un Cloud Service, pero muchas veces esto no es práctico ni funcional, lo que se necesita en el mundo real son sistemas automatizados que generen mil cosas por detrás para entregarnos un resultado, como es el caso de una compra por Internet con tarjeta de crédito, también el proceso de autenticación en un sitio web, en fin…

Así que sin más preámbulos esta entrada expondrá el típico caso de una empresa que permite hacer páginas web para clientes que pagan algún dinero, en este caso nos basaremos desde el ejemplo anterior pero esta vez será explicado en detalle y con imágenes.

Configurando y preparando el escenario

En Microsoft Azure o en algún entorno de virtualización preferido crear una máquina virtual con Windows Server 2012 R2 Datacenter

Configurar dicha máquina, para el caso de Microsoft Azure escoger la fecha de la versión de Windows, Nombre, Capa, Tamaño Nombre de usuario y una contraseña Continue reading “Crear Cloud Service desde Azure PowerShell automaticamente”

Crear Cloud Service desde Azure PowerShell


En esta entrega demostraré como crear un Cloud Service desde la consola de PowerShell para Microsoft Azure (anteriormente Windows Azure) y poder desplegar un sitio web creado en Node.js.

Prerequisitos

  • Node.js
  • NPM
  • Windows Azure PowerShell
  • Preferible: Windows Server 2012 R2 Datacenter.

Continue reading “Crear Cloud Service desde Azure PowerShell”

Día del maestro – FacultyCol, WebGL Demo 2 parte 1


En la segunda demo quería presentar algo más atractivo y más alucinante que en la primera, ya que si bien montar un escenario en 3D en la Web sin plugins ni ningun instalador externo es sorprendente estamos un tanto acostumbrados a ver este tipo de cosas; así que me propuse a mejorar esta y la siguiente demo.

Para esta seleccioné una tecnología que se llama Photosynth que fue desarrollada por un equipo de Microsoft Research en el que permite capturar escenarios reales en 3D con la posibilidad de visualizarlos, este trabaja actualmente con HTML5 y unos que otros hacks hechos en Javascript.

http://photosynth.net/preview Continue reading “Día del maestro – FacultyCol, WebGL Demo 2 parte 1”

Día del maestro – FacultyCol, WebGL Demo1


WebGL logo

Lo prometido es deuda y comenzaré a publicar los 4 demo que se tenían preparados para el día del maestro.

La primera demostración es un escenario en 3D donde se controla la posición mediante las teclas de teclado a la cámara y con el mouse se controla la dirección de la misma.

La carpeta contiene un index, la librería de Three.js y PointerLockControls.js:

http://1drv.ms/1n2cBkz