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
![Page 1: En 20 minutos ... Como se hizo LooWID.com](https://reader034.fdocumento.com/reader034/viewer/2022051617/559ccb1f1a28ab4e0a8b4686/html5/thumbnails/1.jpg)
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](https://reader034.fdocumento.com/reader034/viewer/2022051617/559ccb1f1a28ab4e0a8b4686/html5/thumbnails/2.jpg)
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](https://reader034.fdocumento.com/reader034/viewer/2022051617/559ccb1f1a28ab4e0a8b4686/html5/thumbnails/3.jpg)
![Page 4: En 20 minutos ... Como se hizo LooWID.com](https://reader034.fdocumento.com/reader034/viewer/2022051617/559ccb1f1a28ab4e0a8b4686/html5/thumbnails/4.jpg)
Hasta aquí la promoción...Hay vida más allá de Java...
![Page 5: En 20 minutos ... Como se hizo LooWID.com](https://reader034.fdocumento.com/reader034/viewer/2022051617/559ccb1f1a28ab4e0a8b4686/html5/thumbnails/5.jpg)
Hasta aquí la promoción...Y ya la conoces...
![Page 6: En 20 minutos ... Como se hizo LooWID.com](https://reader034.fdocumento.com/reader034/viewer/2022051617/559ccb1f1a28ab4e0a8b4686/html5/thumbnails/6.jpg)
Una buena excusa para trastear con:
Starting from scratch...
Bower
![Page 7: En 20 minutos ... Como se hizo LooWID.com](https://reader034.fdocumento.com/reader034/viewer/2022051617/559ccb1f1a28ab4e0a8b4686/html5/thumbnails/7.jpg)
-> 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](https://reader034.fdocumento.com/reader034/viewer/2022051617/559ccb1f1a28ab4e0a8b4686/html5/thumbnails/8.jpg)
-> 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](https://reader034.fdocumento.com/reader034/viewer/2022051617/559ccb1f1a28ab4e0a8b4686/html5/thumbnails/9.jpg)
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](https://reader034.fdocumento.com/reader034/viewer/2022051617/559ccb1f1a28ab4e0a8b4686/html5/thumbnails/10.jpg)
Arquitectura básica [1]
Browser
AngularJS
NodeJS MongoDB
ExpressAjax REST
JSON
WebSocket
![Page 11: En 20 minutos ... Como se hizo LooWID.com](https://reader034.fdocumento.com/reader034/viewer/2022051617/559ccb1f1a28ab4e0a8b4686/html5/thumbnails/11.jpg)
Arquitectura básica [2]
![Page 12: En 20 minutos ... Como se hizo LooWID.com](https://reader034.fdocumento.com/reader034/viewer/2022051617/559ccb1f1a28ab4e0a8b4686/html5/thumbnails/12.jpg)
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](https://reader034.fdocumento.com/reader034/viewer/2022051617/559ccb1f1a28ab4e0a8b4686/html5/thumbnails/13.jpg)
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](https://reader034.fdocumento.com/reader034/viewer/2022051617/559ccb1f1a28ab4e0a8b4686/html5/thumbnails/14.jpg)
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](https://reader034.fdocumento.com/reader034/viewer/2022051617/559ccb1f1a28ab4e0a8b4686/html5/thumbnails/15.jpg)
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](https://reader034.fdocumento.com/reader034/viewer/2022051617/559ccb1f1a28ab4e0a8b4686/html5/thumbnails/16.jpg)
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](https://reader034.fdocumento.com/reader034/viewer/2022051617/559ccb1f1a28ab4e0a8b4686/html5/thumbnails/17.jpg)
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](https://reader034.fdocumento.com/reader034/viewer/2022051617/559ccb1f1a28ab4e0a8b4686/html5/thumbnails/18.jpg)
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](https://reader034.fdocumento.com/reader034/viewer/2022051617/559ccb1f1a28ab4e0a8b4686/html5/thumbnails/19.jpg)
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](https://reader034.fdocumento.com/reader034/viewer/2022051617/559ccb1f1a28ab4e0a8b4686/html5/thumbnails/20.jpg)
Roadmap
![Page 21: En 20 minutos ... Como se hizo LooWID.com](https://reader034.fdocumento.com/reader034/viewer/2022051617/559ccb1f1a28ab4e0a8b4686/html5/thumbnails/21.jpg)
Graciashttps://github.com/loowidhttps://www.loowid.com/#!/