Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

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

  • Login to see the comments

  • Be the first to like this

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

  1. 1. LooWID Todo lo que he intentado aprender gracias al software libre Juanjo Meroño © 2014 jjmerono at um.es
  2. 2. LooWID Proyecto OpenSource Nace de una colaboración en Sakai Y el interés por la tecnología WebRTC https://github.com/loowid https://www.loowid.com/#!/ Proyecto Personal Inversión en tiempo libre Un trabajo de un año
  3. 3. Hasta aquí la promoción... Hay vida más allá de Java...
  4. 4. Hasta aquí la promoción... Y ya la conoces...
  5. 5. Starting from scratch... Una buena excusa para trastear con: Bower
  6. 6. Tratando de ordenar las piezas -> Servidor de aplicaciones JS -> Base de datos NoSQL JSON -> Web Framework -> Motor de renderización AJAX
  7. 7. Tratando de ordenar las piezas -> Gestores de configuración -> Control de calidad -> Control de versiones (GitHub) -> Despliegue y distribución Bower
  8. 8. WebRTC + WebSockets Permite la comunicación P2P Chrome, Firefox y Ópera Funciona en PC/Android Comunicación Servidor <-> Cliente
  9. 9. Arquitectura básica [1] AngularJS Browser Express NodeJS MongoDB Ajax REST JSON Web Socket
  10. 10. Arquitectura básica [2]
  11. 11. Y ahora... 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.
  12. 12. Paso a paso 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
  13. 13. Ya lo he hecho Daros un par de URL’s https://github.com/juanjmerono/basic https://github.com/juanjmerono/basic-docker Y ponerlo en marcha en un PC...
  14. 14. Interesante [1] 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
  15. 15. Interesante [2] 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
  16. 16. Interesante [3] express ● routes -> Punto de entrada de peticiones rest ● requiresLogin -> Control de acceso a urls models ● Mongoose -> El equivalente mongo de hibernate controllers ● routes -> model
  17. 17. Interesante [4] 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
  18. 18. Interesante [5] 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/#!/
  19. 19. Roadmap
  20. 20. Gracias https://github.com/loowid https://www.loowid.com/#!/

×