en 20 minutos ... como se hizo loowid.com

LooWIDTodo lo que he intentado aprender

gracias al software libre

Juanjo Meroñojjmerono at um.es© 2014

Proyecto OpenSourceNace de una colaboración en SakaiY el interés por la tecnología WebRTC

https://github.com/loowidhttps://www.loowid.com/#!/

Proyecto PersonalInversión en tiempo libreUn trabajo de un año

LooWID

Hasta aquí la promoción...Hay vida más allá de Java...

Hasta aquí la promoción...Y ya la conoces...

Una buena excusa para trastear con:

Starting from scratch...

Bower

-> Servidor de aplicaciones JS

-> Base de datos NoSQL JSON

-> Web Framework

-> Motor de renderización AJAX

Tratando de ordenar las piezas

-> Gestores de configuración

-> Control de calidad

-> Control de versiones (GitHub)

-> Despliegue y distribución

Tratando de ordenar las piezas

Bower

Permite la comunicación P2PChrome, Firefox y ÓperaFunciona en PC/Android

Comunicación Servidor <-> Cliente

WebRTC + WebSockets

Arquitectura básica [1]

Browser

AngularJS

NodeJS MongoDB

ExpressAjax REST

JSON

WebSocket

Arquitectura básica [2]

Es imposible aprender todo esto en 20 min.Mucho menos si soy yo el que lo explica.Lo que sí podemos hacer es:

Intentar hacer una aplicación.Que use todas esas tecnologías.Lista para funcionar con un comando.

Y ahora...

Instalar nodejs, mongodb, git, mean, grunt, bower,…Crear el esqueleto mean… Añadir un paquete y modificarlo hasta convertirlo en la app…Pero eso ya lo he hecho…Puedo deciros cómo o… mejor

Paso a paso

Daros un par de URL’shttps://github.com/juanjmerono/basichttps://github.com/juanjmerono/basic-docker

Y ponerlo en marcha en un PC...

Ya lo he hecho

mean init basic● package.json -> Dependencias npm● bower.json -> Dependencias bower● gruntfile.js -> Configuración de grunt● jshintrc.js -> Reglas de JSHint

mean package chat● packages/custom/chat

○ public -> client code○ server -> server code

Interesante [1]

views/routes● data-ng-xxx -> Directivas Angular● data-ng-controller -> Controlador que maneja la vista● #!/angular/path -> views/html

controllers● $scope -> La clave de angular

services● rest -> Acceso a datos via rest api

Interesante [2]

express● routes -> Punto de entrada de peticiones rest● requiresLogin -> Control de acceso a urls

models● Mongoose -> El equivalente mongo de hibernate

controllers● routes -> model

Interesante [3]

usermedia● Acceso con javascript a video/audio/screen

webrtc● PeerConnection -> Un canal entre clientes● Requiere de otro canal para establecer la llamada

websocket● Canal de comunicación bidireccional inmediato● Ideal para usarlo como canal de señalización

Interesante [4]

docker● Facilita el despliegue de entornos● VM mínima con los servicios que quieres

○ Configurados correctamente○ Listos para funcionar○ Images vs Containers (Linux Containers)

http://155.54.67.126:3000/#!/

Interesante [5]

Roadmap

Graciashttps://github.com/loowidhttps://www.loowid.com/#!/