Category: Ocio

Todos los post que no son para nada profesionales.

Arduino orientado a IoT

Posted on by Camilo Rodriguez in Arduino, Español, Ocio, Programación general, Tutoriales

Luego de tener todos los componentes es necesario ahora conectar el backend (click aquí) con los Arduino necesarios el cual tendrán un código genérico ya que todos harán lo mismo, encender el led que trae por defecto cuando una aplicación de FrontEnd de la orden.

Si va a compilar desde Raspberry PI

Suponiendo que no se tiene instalado Arduino IDE es necesario ejecutar los siguientes comandos en la consola, cada uno por separado y donde dice “pi” es el usuario.

sudo apt-get update
sudo apt-get install arduino
sudo usermod -a -G tty pi
sudo usermod -a -G dialout pi

Continue reading “Arduino orientado a IoT” →

Raspberry PI orientado a IoT

Posted on by Camilo Rodriguez in Español, Ocio, Programación general, Python, Raspberry PI, Tutoriales

Bien, ahora se usará una Raspberry PI para poder conectarse con nuestro backend creado anteriormente con Node.js (click aquí) y así poder interactuar con nuestra aplicación de frontend y los dispositivos conectados.

Para mayor agilidad en el taller se conectarán por medio de USB ya que esto no requiere de ninguna configuración ni dispositivos externos.

Conectarse por escritorio remoto

  • Conociendo la IP asignada a la Raspberry presione en su teclado las teclas Windows + R, tener en cuenta que la tecla Windows tiene la bandera de Windows y por lo general está al lado del botón ALT, este comando ejecutará un ventana y allí escribir “mstsc”

Continue reading “Raspberry PI orientado a IoT” →

Event Hubs orientado a IoT

Posted on by Camilo Rodriguez in C/C++/C#, Español, Microsoft Azure, Ocio, Programación general, Tutoriales, Windows Azure

Para tener un centro de eventos listo para usar en nuestro sistema de IoT (hacer click aquí) es necesario seguir la siguiente guía.

Crear Event Hub

Continue reading “Event Hubs orientado a IoT” →

Node.js App orientado a IoT

Posted on by Camilo Rodriguez in Español, Javascript, Microsoft Azure, Node.js, Ocio, Programación general, Programación Web, Tutoriales, Windows Azure

Para esta primera aplicación respecto al diagrama del post primario ( click aquí ) se usará Node.js y Socket.io para comunicar el front-end y Raspberry Pi, lo que será nuestro servidor de backend.

Crear máquina virtual

Continue reading “Node.js App orientado a IoT” →

Mini sistema orientado a IoT

Posted on by Camilo Rodriguez in Arduino, C/C++/C#, Español, Javascript, Microsoft, Microsoft Azure, Node.js, Ocio, Programación general, Programación Web, Tutoriales, Windows Azure

El pasado lunes 6 de abril se llevó a cabo IoT Expert Day, el cual durante el día se llevaron a cabo charlas introductorias al Internet de las Cosas y se mostraron ejemplos de cada tema; luego, después del medio día se llevó a cabo un taller para crear un sistema orientado a IoT para que todos los participantes pudieran tener un primer acercamiento.

Este taller que ahora dejo en disposición de manera online consta de los siguientes elementos:

  • Programa escrito en Arduino para encender un led
  • Aplicación hecha con Node.js y Socket.io, para servir de interface de conexión
  • Aplicación en Python para recibir todos los comandos por medio de Internet
  • Web App para controlar el led
  • Event Hub para registrar todos los eventos
  • Programa en C# para demostrar el funcionamiento de los Event Hub
  • Finalmente dejaré una aplicación móvil para que sea más realista el ejemplo

diagrama del sistema Continue reading “Mini sistema orientado a IoT” →

Ejecutar Socket.io en Xamarin.Android

Posted on by Camilo Rodriguez in Android, C/C++/C#, Español, HTML5, Javascript, Microsoft Azure, Node.js, Ocio, Programación general, Programación Web, Tutoriales, Windows Azure, Xamarin

Es muy frecuente querer ejecutar esta grandiosa tecnología en la mayoría de recursos que usamos, por lo que esta vez les enseñaré a implementar Socket.io sin necesidad de usar terceros y sacarse las canas entre versiones y dependencias en servidor, etc etc… como me pasó a mi.

La ejecución es muy sencilla, tenemos un WebView donde se ejecuta código en Razor, HTML y un poco de JS donde se hará un hilo de comunicación de doble vía entre el WebView y el Code-Behind, a esta técnica la llamé BlackOps, ya que aquí se harán todas estas tareas oscuras y transparentes al usuario final, la cual darán una sensación de que corre de manera nativa.

  • En Xamarin Studio crear un nuevo proyecto tipo “Android WebView Application”, en este caso lo llamaré “EtonMessy_And”. 
  • En la carpeta Assets crear otra carpeta llamada “js” y crear un archivo llamado “blackOpsHelper”, descargar el cliente de Socket.io desde https://cdn.socket.io/socket.io-1.0.4.js y JQuery desde http://code.jquery.com/jquery-1.11.0.min.js 
  • En el archivo RazorView.cshtml agregar las referencias necesarias a los script.
  • Como buena práctica es encapsular toda la lógica en un archivo *.js que podría llamarse BlackOpsHelper.js, sin embargo, por razones del diseño del control WebView en Xamarin no es posible ejecutar llamados a Internet (probablemente se corrija más adelante), por el momento..  añadir el código base que he diseñado en una etiqueta “script”.

Continue reading “Ejecutar Socket.io en Xamarin.Android” →

Crear un backend rápido y poderoso con Socket.io en Azure

Posted on by Camilo Rodriguez in Español, Javascript, Microsoft, Microsoft Azure, Ocio, Programación Web, Tutoriales, Windows Azure

Siguiendo con el demo del 11 de diciembre el siguiente paso es crear un backend donde todo orquestará y hará armonía; pero para ello decidí usar Socket.io, ya que es una tecnología muy flexible y desde mi punto de vista, muy sencilla de implementar.

Básicamente en Socket.io se generan eventos y listener de estos eventos donde se necesite, si necesito ejecutar un evento en el backend, simplemente defino el emisor y el receptor, con sus lógicas de negocio dependiendo de como sea el callback.

Para comenzar es vital generar una máquina virtual en el ambiente que nosotros deseemos, sin embargo, con fines de esta práctica todo se hizo en Microsoft Azure y su implementación de Virtual Machines.

Crear Website básico en Microsoft Azure

Posted on by Camilo Rodriguez in Español, HTML5, Microsoft, Microsoft Azure, Ocio, Programación Web, Tutoriales, Windows Azure

El pasado jueves 11 de Diciembre en Microsoft Branch Colombia se estaba llevando a cabo unas sesiones técnicas para emprendedores del país, en esta sesión accedí a dictar la charla donde se tomarán los siguientes temas:

  • Websites Azure
  • Virtual Machines Azure
  • Windows Phone
  • Xamarin

Por lo cual decidí compartir este código usado durante la sesión en varias secciones, la primera es acerca de la creación básica de Websites en Azure.

Creando el Front End

En esta ocasión se decidió hacer un sitio muy básico y estático que a la final solo se conectará con un Backend publicado en otro lado.

En este caso se simulará un negocio de una disquera musical, sin embargo aclaro que todos los logos y nombres de marca son propiedad registrada.

  • Seleccionar una plantilla adecuada, en este caso ir a http://startbootstrap.com/template-overviews/freelancer/
  • Descomprimir el contenido y renombrar la carpeta a algún nombre fácil de recordar.
  • Modificar las imágenes primarias, donde aparece el muñeco por una foto de algún Dj y agregarle un background a esa sección, esto se hace en el archivo freelancer.css
header {
    text-align: center;
    color: #fff;
    background: #18bc9c;

    background-image: url(../img/DJ-Background.jpg);
  
    /* Background image is centered vertically and horizontally at all times */
    background-position: center center;
  
    /* Background image doesn't tile */
    background-repeat: no-repeat;
  
    /* Background image is fixed in the viewport so that it doesn't move when 
       the content's height is greater than the image's height */
    background-attachment: fixed;
  
    /* This is what makes the background image rescale based
       on the container's size */
    background-size: cover;
}

Continue reading “Crear Website básico en Microsoft Azure” →

Windows Phone 8.1: WebView – ScriptNotify & InvokeScriptAsync

Posted on by Camilo Rodriguez in C/C++/C#, Español, Javascript, Ocio, Programación general, Programas, Windows, Windows 8, Windows Phone, WinRT

En WinRT el control WebView proporciona dos métodos el cual hace que le suba el poder casi hasta que las páginas Web podrían interactuar directamente con la aplicación, proporcionando así una visión totalmente distinta de que este control podría comportarse como una especie de IFRAME o un sandbox dentro de nuestra aplicación.

Este detalle es maravilloso pero así mismo puede ser un gran dolor de cabeza ya que podría ser una puerta trasera (backdoor) de nuestra aplicación y así podríamos afectar completamente la seguridad ya que estamos dejando un portal abierto hacia la Web.

“Puesto que este evento se activa mediante código externo, debe tener cuidado sobre lo que se coloca en el controlador de eventos. Para evitar que los scripts malintencionados aprovechen este evento, asegúrese de habilitarlo solo para los URI de confianza” – MSDN

Teniendo en cuenta estas recomendaciones y tomando las medidas de seguridad necesarias procederemos a implementar estos poderosos métodos.

InvokeScriptAsync

Este método como su nombre lo indica es capaz de ejecutar un script declarado en el fuente destino, por lo general sería una función de JavaScript; adicional puede retornar un mensaje tipo string de modo callback.

En C#

await myWebView.InvokeScriptAsync("scriptName", new string[] { "Parameter1", "Parameter2" });

En JS

function scriptName(Param1, Param2) {
    // ..
}

Continue reading “Windows Phone 8.1: WebView – ScriptNotify & InvokeScriptAsync” →

Windows Phone 8.1: WebView

Posted on by Camilo Rodriguez in C/C++/C#, Español, Microsoft, Ocio, Programación general, Tutoriales, Windows, Windows Phone, WinRT

El control WebView hospeda contenido Web en la aplicación el cual está en el ensamblado Windows.UI.Xaml.Controls.WebView definido en las librerías compartidas entre Windows y Windows Phone; mediante este control es posible renderizar código HTML y poderlo visualizar, por lo tanto podemos embeber una página Web en nuestra aplicación la cual nos puede traer grandes beneficios a la hora de desarrollar aplicaciones multiplataforma, sin embargo si se usa sin control o de manera desmedida puede convertirse en un dolor de cabeza ya que se puede volver un vector de ataque a nuestra aplicación.

He ahí el motivo de dedicarle una serie de artículos a este aparente sencillo control del cual podremos aprovechar para sacarle su máximo potencial.

Comenzando, dedicaré este artículo a explicar los ámbitos sencillos.

Primeros pasos

Para implementar un control tipo WebView nuestro proyecto de Windows Phone 8.1 debe tener referenciado el ensamblado Windows.UI.Xaml.Controls.WebView el cual si lo construimos con la ayuda de Visual Studio 2015 o 2013 ya lo tendremos referenciado por defecto.

Es decisión nuestra declararlo en la interfaz gráfica o en el code behind, sin embargo la documentación de las API de Microsoft oficial (MSDN) nos recomienda declarar todos los controles a través de XAML porque ya este fue optimizado para administrar la memoria y demás, sin embargo en casos particulares se puede declarar que en este caso será C#.

Code behind:
Windows.UI.Xaml.Controls.WebView webView = new Windows.UI.Xaml.Controls.WebView();
webView.Name = "myWebView";
XAML:
<WebView x:Name="myWebView" />

Continue reading “Windows Phone 8.1: WebView” →