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

Lo que quería hacer es que desde mi móvil pudiera manipular algún Photosynth y que se pudiera mostrar en Internet Explorer 11 aprovechando todas las nuevas funcionalidades, así que aquí hay que ver varios factores, el primero es que debe haber un servidor intermedio entre mi móvil y mi Pc para poder hacer la comunicación, porque si bien es en mi Pc personal quería que cualquiera que estuviera “escuchando” a mi App del celular pudiera manipularse el Photosynth.

Bien, el segundo problema que detecté durante las pruebas es que IE 11 no permite agentes externos que no sea el mismo proceso manipulen la interfaz gráfica o mecanismos internos, entre otras palabras es como si se ejecutara en un sandbox y ese agente simplemente lo finalizaba sin previo aviso ni retornando algún valor. Así que tenía que ejecutar mi propio agente como administrador.

El tercer problema es que mi móvil personal es un Nexus 4 y pues si, bien podía hacerlo en mi Lumia pero esta vez quería probar haciendo este demo en Android, pero como no sé desarrollar para esta plataforma me decidí a usar mis recién adquiridos conocimientos de Xamarin (que me ha dado muy buenos resultados).

El último problema que detecté es que el servidor tenía que cumplir con varias características, la transmisión de datos debe ser mínima ya que la señal de redes que tengo mi servicio Claro es muyyy malo y la cobertura siempre es de una calidad muy baja, debe responderme eficazmente ya que claro, es una demo en vivo no se verá muy bien que digamos si se presentan demoras o simplemente que no me responda de manera eficaz, si hay perdida de datos tampoco me servía; finalmente de tantas soluciones me decidí por Node.js, cumple con lo que necesito y hasta más jeje.

Entonces bien, manos a la obra; en esta primera parte me enfocaré a montar el servidor que lo tengo alojado en una máquina virtual con Ubuntu y es muy pequeña, en Microsoft Azure es de tamaño A0.

Calentando motores y preparando el escenario

  •  Lo primero que debemos hacer en Microsoft Azure es crear una máquina virtual, para lo cual vamos a ir a la parte inferior izquierda y veremos un botón que dice “Nuevo”, si le damos click se nos despliega un panel muy parecido al que tenemos a continuación, allí seleccionar la opción “De la galería”

 

  • Cuando carguen todas las imágenes de disco seleccionamos “Ubuntu”, para este caso seleccionar “Ubuntu Server 14”

 

  • En este segundo paso, seleccionar la fecha de la versión, un nombre de la máquina, tipo de capa, tamaño y lo más importante es configurar el inicio de sesión.

 

  • Luego de haber configurado eso, seleccionar el DNS, la ubicación regional de la máquina virtual y por preferencia los extremos tal cual salen en la imagen.

 

  • Por último permitir la instalación del agente de la máquina virtual.

 

  • Esperamos un rato y cuando esté lista máquina virtual podremos ver en el estado que aparece el mensaje “Ejecutandose”

 

  • Cuando se selecciona una máquina virtual podemos darle click al nombre para acceder a todas sus configuraciones y opciones, aquí seleccionar la opción “Panel”

 

  • Lo importante de aquí en este momento es ir al panel de “Vista rápida”, donde tendremos casi toda la información que necesitamos para conectarnos, que aquí es importante resaltar la IP pública.

 

  • Ahora descargamos un cliente SSH que por preferencia personal usaré PuTTY. Aquí ingresar en Host Name la IP pública o el Host, de resto solo pulsamos la tecla “Enter”.

 

  • Después de un momento, según nuestra velocidad de Internet podemos ver el Login, donde ingresaremos con los datos que configuramos al inicio.

 

  • Si el inicio de sesión fue exitoso veremos algo parecido a lo siguiente, donde podremos ver claramente un resumen de nuestra máquina virtual.

 

  • Ahora nos iremos al root de la máquina y crearemos un directorio llamado “WebGL2”

 

  • Para verificar que se hizo, solo listamos lo que contiene el directorio

 

  • Ahora en este paso supondré que ya instalaron de manera global los siquientes paquetes:
    1. ExpressJS – Encargado de administrar las peticiones entre cliente-servidor
    2. Jade – Motor de plantillas (muy bueno para experimentar y aplicar en escenarios reales)
    3. Socket.io – permite la comunicación en tiempo real entreel front-end y el back-end
  • Dentro del directorio “WebGL2” crearemos un archivo con GNU nano llamado package.json, que es para instalar todo lo que necesitamos para este tutorial.
  • Guardando el archivo, en el mismo directorio ejecutaremos el comando “npm install” que es para instalar el package que se acabó de crear en nano.

Muy bien!, quedó todo el escenario montado para crear el back-end y front-end.

Desarrollando el Back-end

  • Crear un archivo llamado index.js con GNU nano con el siguiente código:
// This code snippet create a server chat and ready for deploy it
// Author: Cami Rodríguez
// Blog: https://ingcamilorodriguez.wordpress.com

var express = requiere("express");
var app = express();
var port = 3000;

app.set('views', __dirname + '/tpl');
app.set('view engine', "jade");
app.engine('jade', requiere('jade').__express);
app.get("/", function(req, res){
      res.render("page");
});

app.use(express.static(__dirname + '/public'));
var io = requiere('socket.io').listen(app.listen(port));

io.sockets.on('connection', function (socket){
      socket.emit('message', {message: 'welcome to the WebGL Demo2'});
      socket.on('send', function(data){
            io.sockets.emit('message', data);
      });
});

console.log("Listening on port " + port);

Desarrollando el Front-end

  • Crear una carpeta llamada “tpl” que debe estar contenida en “WebGL2”
  • En el directorio “tpl” crear un documento llamado page.jade con el siguiente código
html
      head
            title WebGL Server Log
            script(src='/chat.js')
            script(src='/socket.io/socket.io.js')
      body
      #content(style='width:500px; height:300px; margin: 0 0 20px 0; border: solid 1px #999; overflow-y: scroll;')
      .controls
            |Name
            input#name(style='width:350px;')
            br
            input#field(style='width:350px;')
            input#send(type='button', value='send')

 

  • Ahora solo queda desarrollar el script del front-end que hará posible la comunicación con el back-end, para ello en la raíz de nuestro demo (“WebGL2”) crear una carpeta llamada “public”
  • En “public” crear un archivo llamado “chat.js” con el siguiente código:
window.onload = function() {

    var messages = [];
    var socket = io.connect('http://138.91.126.161:3000');
    var field = document.getElementById("field");
    var sendButton = document.getElementById("send");
    var content = document.getElementById("content");
    var name = document.getElementById("name");

    socket.on('message', function (data) {
        if(data.message) {
            messages.push(data);
            var html = '';
            for(var i=0; i<messages.length; i++) {
                html += '<b>' + (messages[i].username ? messages[i].username : 'Server') + ': </b>';
                html += messages[i].message + '<br />';
            }
            content.innerHTML = html;
        } else {
            console.log("Please contact an engineer and say this problem:", data);
        }
    });

    sendButton.onclick = function() {
        if(name.value == "") {
            alert("Please type your name!");
        } else {
            var text = field.value;
            socket.emit('send', { message: text, username: name.value });
        }
    };

}

Si todo quedó bien deberíamos tener los siguientes archivos y carpetas:

Ahora, si queremos ejecutar nuestro servidor y comprobar que funciona correctamente todo, ejecutamos el comando “nodejs index.js”  y veremos algo muy parecido a lo siguiente:

Perfecto, hasta momento no hay errores. Abrir dos navegadores preferidos difenrentes con la IP pública o el DNS de nuestra máquina virtual y deberíamos ver algo como lo siguiente:

Con eso queda comprobado de que sirve el servidor, solo queda por desarrollar el Bridge y la aplicación para Android, no te pierdas la continuación de este tutorial😉