En 20 minutos ... Como se hizo LooWID.com

21
LooWID Todo lo que he intentado aprender gracias al software libre Juanjo Meroño jjmerono at um.es © 2014

description

WebRTC, Mean.io, MongoDB, Express, Angular, NodeJS, Grunt, JSHint, Bower, Web Sockets, Docker y GIT

Transcript of En 20 minutos ... Como se hizo LooWID.com

Page 1: 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

Page 2: En 20 minutos ... Como se hizo LooWID.com

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

Page 3: En 20 minutos ... Como se hizo LooWID.com
Page 4: En 20 minutos ... Como se hizo LooWID.com

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

Page 5: En 20 minutos ... Como se hizo LooWID.com

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

Page 6: En 20 minutos ... Como se hizo LooWID.com

Una buena excusa para trastear con:

Starting from scratch...

Bower

Page 7: En 20 minutos ... Como se hizo LooWID.com

-> Servidor de aplicaciones JS

-> Base de datos NoSQL JSON

-> Web Framework

-> Motor de renderización AJAX

Tratando de ordenar las piezas

Page 8: En 20 minutos ... Como se hizo LooWID.com

-> Gestores de configuración

-> Control de calidad

-> Control de versiones (GitHub)

-> Despliegue y distribución

Tratando de ordenar las piezas

Bower

Page 9: En 20 minutos ... Como se hizo LooWID.com

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

Comunicación Servidor <-> Cliente

WebRTC + WebSockets

Page 10: En 20 minutos ... Como se hizo LooWID.com

Arquitectura básica [1]

Browser

AngularJS

NodeJS MongoDB

ExpressAjax REST

JSON

WebSocket

Page 11: En 20 minutos ... Como se hizo LooWID.com

Arquitectura básica [2]

Page 12: En 20 minutos ... Como se hizo LooWID.com

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...

Page 13: En 20 minutos ... Como se hizo LooWID.com

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

Page 14: En 20 minutos ... Como se hizo LooWID.com

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

Page 15: En 20 minutos ... Como se hizo LooWID.com

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]

Page 16: En 20 minutos ... Como se hizo LooWID.com

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]

Page 17: En 20 minutos ... Como se hizo LooWID.com

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]

Page 18: En 20 minutos ... Como se hizo LooWID.com

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]

Page 19: En 20 minutos ... Como se hizo LooWID.com

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]

Page 20: En 20 minutos ... Como se hizo LooWID.com

Roadmap

Page 21: En 20 minutos ... Como se hizo LooWID.com

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