Aprendiendo haciendo.
Indiscutiblemente es la mejor manera de aprender, y más aún en el mundo del desarrollo.
Es posible leer muchos libros/Blogs, ver varios vídeos, pero nada es mejor que la práctica, esto lo he venido aplicando durante mi vida profesional, en la presente entrada deseo dar un recuento de como la he aplicado.
Llevo cerca de 9 años en el mundo del desarrollo, inicie con el desarrollo de aplicaciones en Visual Basic 6.0, obsesionado por la opción de poner iconos en los menús, no sé por qué, pero me parecía que se veían bien.
Una de las grandes pasiones que tengo es el desarrollo de juegos, en ese momento que estaba trabajando con Visual Basic, también estaba probando con Flash, aún no tenía mucho conocimiento de ActionScript, por lo que Flash sólo lo use para realizar animaciones, en este caso los movimiento de los personajes que hacían parte de los juegos.
Ingresé al mundo laboral, puntualmente a desarrollar con PHP, igualmente el manejo de base de datos como es Mysql, pero me gustaba seguir explorando las nuevas tecnologías que también se ofrecían en ese momento, Flash seguía su auge, muchas de las páginas que visitaba en ese tiempo estaban hechas con Flash, por lo que decidí aprender más de ActionScript 2.0 y su posterior sucesor ActionScript 3.0, una de las novedades que nos presentaba Adobe en ese tiempo, era la realización de aplicaciones multiplataforma (Linux/Windows/Mac), haciendo uso de Flex, decidí aprender el manejo de esta aplicación, por lo que hice un desarrollo el cual buscaba ser un “notificador” de eventos (entradas a foros, recepción de correos, etc), en ese momento no tenía conocimiento de WebSockets, por lo que para el manejo de comunicación en tiempo real utilicé RED5
Seguí profundizando mis conocimientos con Flash, realizando juegos y “mezclas” entre aplicaciones, una de ellas fue la realización de un complemento para PowerPoint, que permitiera que el usuario se grabará mientras realizaba su presentación, como es bien sabido es posible programar con Visual Basic en la suite de Office, y además invocar elementos de otras aplicaciones, como es el caso de archivos SWF y mantener una comunicación entre estos.
Flash seguía siendo una de las herramientas más importantes que usaba, además de poder ser utilizada con PHP/Mysql a nivel de Backend, pero como todos ya saben poco a poco el nuevo estándar de HTML5 empezó a mostrar que muchas de las acciones que se realizan en Flash ya era posible hacerlas sin la necesidad de Plugins, como poner un vídeo o incluso realizar una animación compleja.
Poco a poco empecé a ilustrarme acerca de estas nuevas funcionalidades que nos traía HTML5, desde el manejo de nuevos inputs (date, number, email, etc…), nuevas etiquetas (head, footer, aside, section, video, audio, entre otras), de mano de este nuevo estándar para HTML existía el propio para CSS (CSS3), lo cual permitió hacer varias cosas que antes sólo era posible a través de imágenes (bordes redondeados).
Han sido de gran ayuda estos nuevos estándares, tanto que al día de hoy el uso de Plugins cada vez es menor, pero indiscutiblemente uno de los grandes responsables por esto ha sido Javascript, que como es bien sabido inició su vida para cumplir la función de validación de formularios antes de ser enviados al servidor (o para realizar copos de nieve en navidad).
En los tiempos de Flash/ActionScript, Javascript no era muy utilizado, aunque son hermanos (ambos proceden del estándar ECMA), para embeber un SWF se requiere de la etiqueta object, pero llegó un momento en que los navegadores bloqueaban el contenido de Flash, por lo que el usuario necesitaba dar un click inicial para poder activar el elemento, en ese momento era donde intervenía JavaScript, a través de diferentes librerías, una de las más famosas conocida como Swfobject, no sólo solucionaba el inconveniente anteriormente mencionado, sino además permitía una fácil comunicación entre Flash/ActioScript y JavaScript.
Como muchos programadores de Flash, paulatinamente fui atraído hacia JavaScript, una de las muchas APIS que nos trajo junto con HTML5 y su etiqueta vídeo fue WebRTC, la primera vez que vi que podia acceder a una cámara y micrófono sin la necesidad de un Plugin fue sorprendente, pero si no sólo pudiera acceder a esos medios, sino transmitir a otro punto sin la necesidad de contar con un servicio tan robusto como podría ser un Flash Media Server (FMS) o RED5, fue en ese momento en el que me propuse aprender acerca de WebRTC, fue algo totalmente nuevo, no sólo tuve que entender acerca de estas nuevas APIS (getUserMedia/DataChannel), sino conceptos relacionados a telefonía IP (Protocolos como STUN/TURN), y fue la primera vez que escuché acerca de NodeJS, JavaScript ya no sólo estaría en el cliente, sino también estaría en el Servidor, llevando la misma forma en que he aprendido, decidí emprender la realización de una aplicación, en este caso un sistema de chat.
Fue sorprendente, y aún lo sigue siendo, WebRTC ha permitido muchas acciones, no sólo permitir entablar una comunicación por medio de vídeo punto a punto (para sistemas multipunto ya es necesario una MCU), sino que también el intercambio de archivos entre navegadores a través de DataChannel.
La experiencia de desarrollo de esta aplicación, me permitió hacer parte de la primera JSConf que se llevó a cabo en Colombia en el año 2013, ha sido una de las mejores experiencia que he tenido en este ámbito, tuve la oportunidad de estar con los principales representantes del mundo de desarrollo de Javascript.
He seguido aprendiendo más acerca de Javascript, se ha convertido en el lenguaje que más manejo, también he tenido experiencias con otros lenguajes, como lo he indicado antes con PHP, pero además Java y Python, no considero que un lenguaje sea mejor que el otro, en los momentos que he tenido que manejar por ejemplo Java, lo he hecho, mentiría si digo que no he realizado comparación entre lenguajes, pero cada lenguaje tiene lo propio, además como es bien sabido un lenguaje de programación, es tan bueno como lo es su desarrollador.
Javascript trajo la oportunidad de manejar otros campos de acción como es el relacionado a la electrónica, mi acercamiento con este campo fue con Visual Basic, en la elaboración de un brazo robótico, utilizaba el puerto paralelo para tal fin, recuerdo mucho el manejo una aplicación llamada Parmon.
Arduino trajo la electrónica para los nos electrónicos, como es mi caso y con Javascript y librerías como Johnny Five hizo el proceso aún más fácil, de nuevo me enfrentaba al reto de hacer algo para así aprender el manejo de estas tecnologías, es así que vi la oportunidad en una de las clases de la Maestría que estoy realizando, se propuso el desarrollo de una aplicación en la cual controlará acciones básicas en un domicilio, como encender y apagar luces.
Arduino estaba conectado al equipo/computador el cual contaba con un servicio en Node y Johnny Five que realizaban las acciones de encender y apagar las luces.
Pero la aplicación debía estar desplegada en Heroku, por lo que era necesario el uso de WebSockets, para entablar la comunicación en “tiempo real”, fue en ese entonces donde descubrí PubNub un servicio que ofrece exactamente lo que estaba buscando.
Como se aprecia en el vídeo otras de las APIS que se utilizó fue la de reconocimiento de voz y la de texto a audio, ambas nativas del navegador (Google Chrome).
Con PubNub decidí hacer otro pequeño ejemplo, el cual se basaba en la creación de un control remoto, de nuevo se abrió la posibilidad de aprender algo nuevo y fue donde conocí PlayCanvas fue algo sorprendente ya que da la posibilidad de crear juegos en 3D directamente desde el navegador, ya había tenido la oportunidad de trabajar con Unity, pero me atrajo más la idea que presenta PlayCanvas
PlayCanvas aprovechaba otras de las nuevas tecnologías que nos trae la web, como es el caso de WebGL inicie a investigar acerca de esta tecnología, sabía que podía tener alguna relación con OpenGL, en la investigación encontré una de las librerías que hace el proceso de manejo de esta tecnología fácil, como es el caso de ThreeJS
Continuando con la metodología inicie el proceso de aprendizaje de uso de está tecnología, el primer acercamiento fue la realización de un juego (recorre mundos) que la aprovecha.
No es un juego para nada desafiante, tan sólo busca mostrar el potencia de WebGL/ThreeJS, además de hacer uso de recursos propios del celular como es el caso del acelerómetro.
En los últimos años se ha escuchado mucho acerca de la realidad virtual, teniendo como principales representantes el Oculus Rift y las Google CardBoard, investigué por igual ambas opciones, siendo la más asequible en el momento las CardBoard, el SDK que entrega tiene varios ejemplos, muchos de ellos hacen uso de Unity, pero ahondado más en el tema encontré la posibilidad de hacer uso de WebGL/ThreeJS, viendo la oportunidad decidí hacer un pequeño ejercicio con ésta y así poder aprender, de esta forma nació “shoot_the_boxes_cardboard”
He realizado varios juegos, cada uno con el objetivo de aprender algo nuevo, por ejemplo el manejo de canvas, manejo de los FPS de un juego, el escalamiento del mismo, entre otros, todos estos proyectos están publicados en mi Github además de mi página.
Llegando a la actualidad me propuse aprender acerca de algunas de las nuevas funcionalidades de la nueva versión de Javascript conocida como ES6/ES2015 así como el manejo de Service Worker.
Como ha sido la constante a lo largo de este escrito, la forma de aprender fue desarrollar algo y si ese algo es un juego aún mejor.
El juego a realizar ha sido inspirado por el famoso Juego Two Dots, en éste se busca unir puntos del mismo color, con un límite de movimientos, cuando se cierra un circuito (se forma un cuadrado o rectángulo) todos los puntos del mismo color desaparecen dando lugar a otros. El juego fue realizado haciendo uso de CANVAS.
El código del mismo puede ser consultado en el repositorio del proyecto.
Debido a que todos los navegadores aún no soportan algunas de las nuevas funcionalidades de ES6, se hace necesario realizar una “traducción” de éste a la versión estable como es ES5, para tal fin he hecho uso de BabelJS además de Browserify para el manejo de módulos.
Uno de los principales inconvenientes que tiene realizar una Web APP, es la dependencia de una conexión a internet, pero gracias a Service Worker es fácil solucionarlo.
Intenté poner en práctica lo enseñado por Addy Osmany en su blog denominado “Getting started with Progressive Web Apps” en éste se habla del uso del archivo manifest.json el cual da la posibilidad de establecer algunas propiedades a una web app como es la especificación del ícono que representa la aplicación, orientación en la que estará desplegará, incluso el color que puede tener la barra de herramientas cuando se despliega en el navegador.
Si se detecta que la aplicación es frecuentada por el usuario en varias ocasiones, se da la posibilidad de “instalarla” o se podría hacer directamente a través de la opción de “Add to HOME screen” quedando como una aplicación más.
Existen aún muchas cosas por aprender Frameworks/librerías en el mundo del desarrollo el aprendizaje es la constante y es divertido hacerlo.
Deseaba compartir mi experiencia de aprender haciendo, en algunos momentos nos sentimos abrumados por la cantidad de información que existe, llegado el momento sabremos que es lo que necesitamos y de esta forma podemos ahondar en un tema de interés, aplicando en cada momento lo aprendido a algo real, en la mayoría de los casos para mi ha sido la creación de un juego en otros casos puede ser la relación de alguna aplicación como un To-do list
Muchas gracias por tomar el tiempo de leer la presente entrada.
Jorge Rubiano.
