En 20 minutos ... Como se hizo LooWID.com
-
Upload
seccion-de-metodologias-normalizacion-y-calidad-del-software -
Category
Technology
-
view
86 -
download
3
description
Transcript of 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/#!/