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?

Sigue leyendo

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: Habilitar acceso remoto a MongoDB


Por defecto MongoDB no viene con el acceso remoto habilitado, esto ya sea para administrarlo desde una interfaz gráfica o desde alguna aplicación externa, para ello se necesita cubrir 3 pasos.

  1. Abrir el archivo mongodb.conf y buscar la línea que dice bind_ip y comentar la ip que trae por defecto, los comentarios son con una almohadilla o numeral #
  2. Reiniciar el servicio de MongoDB
  3. Conectar la interface!

Si se está en linux y con una versión mayor o igual a la 2.6.3 sería de la siguiente manera:

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; }
}

How To’s


En este blog ahora encontrará trucos sencillos y rápidos que bajo mi experiencia puedo certificar que funcionan ya que serán snippets que estaré usando en mi diario vivir.

Sin embargo la mayoría y me centraré a las tecnologías Universal Apps con C++.

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”