SlideShare uma empresa Scribd logo
1 de 21
Baixar para ler offline
LooWID 
Todo lo que he intentado aprender 
gracias al software libre 
Juanjo Meroño 
© 2014 jjmerono at um.es
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
Hasta aquí la promoción... 
Hay vida más allá de Java...
Hasta aquí la promoción... 
Y ya la conoces...
Starting from scratch... 
Una buena excusa para trastear con: 
Bower
Tratando de ordenar las piezas 
-> 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 
Bower
WebRTC + WebSockets 
Permite la comunicación P2P 
Chrome, Firefox y Ópera 
Funciona en PC/Android 
Comunicación Servidor <-> Cliente
Arquitectura básica [1] 
AngularJS 
Browser 
Express 
NodeJS MongoDB 
Ajax 
REST 
JSON 
Web 
Socket
Arquitectura básica [2]
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.
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
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...
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
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
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
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
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/#!/
Roadmap
Gracias 
https://github.com/loowid 
https://www.loowid.com/#!/

Mais conteúdo relacionado

Destaque

Destaque (16)

Notimovil
NotimovilNotimovil
Notimovil
 
MEDEA contada a los alumnos de Grado de Ingeniería Informática
MEDEA contada a los alumnos de Grado de Ingeniería InformáticaMEDEA contada a los alumnos de Grado de Ingeniería Informática
MEDEA contada a los alumnos de Grado de Ingeniería Informática
 
En 20 minutos ... jQuery
En 20 minutos ... jQueryEn 20 minutos ... jQuery
En 20 minutos ... jQuery
 
En 20 minutos ... Tests de Aceptación con Cucumber
En 20 minutos ... Tests de Aceptación con CucumberEn 20 minutos ... Tests de Aceptación con Cucumber
En 20 minutos ... Tests de Aceptación con Cucumber
 
LOGATICA
LOGATICALOGATICA
LOGATICA
 
Pórtico
PórticoPórtico
Pórtico
 
En 20 minutos ... HTML5 + CSS3
En 20 minutos ... HTML5 + CSS3En 20 minutos ... HTML5 + CSS3
En 20 minutos ... HTML5 + CSS3
 
Medea. Metodología de desarrollo en ÁTICA
Medea. Metodología de desarrollo en ÁTICAMedea. Metodología de desarrollo en ÁTICA
Medea. Metodología de desarrollo en ÁTICA
 
En 20 minutos ... Arquitectura Oracle
En 20 minutos ... Arquitectura OracleEn 20 minutos ... Arquitectura Oracle
En 20 minutos ... Arquitectura Oracle
 
En 20 minutos ... jBPM
En 20 minutos ... jBPMEn 20 minutos ... jBPM
En 20 minutos ... jBPM
 
En 20 minutos ... Charla drools
En 20 minutos ... Charla droolsEn 20 minutos ... Charla drools
En 20 minutos ... Charla drools
 
Experiencia de Usuario (UX)
Experiencia de Usuario (UX)Experiencia de Usuario (UX)
Experiencia de Usuario (UX)
 
En 20 minutos... Buenas Practicas SSL
En 20 minutos... Buenas Practicas SSLEn 20 minutos... Buenas Practicas SSL
En 20 minutos... Buenas Practicas SSL
 
Auditoria en BD de las Sesiones Web
Auditoria en BD de las Sesiones WebAuditoria en BD de las Sesiones Web
Auditoria en BD de las Sesiones Web
 
En 20 minutos ... Responsive Design
En 20 minutos ... Responsive DesignEn 20 minutos ... Responsive Design
En 20 minutos ... Responsive Design
 
En 20 minutos ... Chrome Developer Tools
En 20 minutos ... Chrome Developer ToolsEn 20 minutos ... Chrome Developer Tools
En 20 minutos ... Chrome Developer Tools
 

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

Open Source Modern Web Development
Open Source Modern Web DevelopmentOpen Source Modern Web Development
Open Source Modern Web Development
Jaime Irurzun
 

Semelhante a En 20 minutos ... Como se hizo LooWID.com (20)

Desarrollo de aplicaciones multiplataforma 2/2
Desarrollo de aplicaciones multiplataforma 2/2Desarrollo de aplicaciones multiplataforma 2/2
Desarrollo de aplicaciones multiplataforma 2/2
 
Remote System Controller with Android technologies
Remote System Controller with Android technologiesRemote System Controller with Android technologies
Remote System Controller with Android technologies
 
inLab FIB MeteorJS workshop by uLab UPC - Telefonica I+D
inLab FIB MeteorJS workshop by uLab UPC - Telefonica I+DinLab FIB MeteorJS workshop by uLab UPC - Telefonica I+D
inLab FIB MeteorJS workshop by uLab UPC - Telefonica I+D
 
Introducción a NodeJS
Introducción a NodeJSIntroducción a NodeJS
Introducción a NodeJS
 
ASP.NET MVC
ASP.NET MVCASP.NET MVC
ASP.NET MVC
 
Cherokee presentacion
Cherokee presentacionCherokee presentacion
Cherokee presentacion
 
Fernando Gandia - Airflow - PyData Mallorca 18-10-2016
Fernando Gandia - Airflow - PyData Mallorca 18-10-2016Fernando Gandia - Airflow - PyData Mallorca 18-10-2016
Fernando Gandia - Airflow - PyData Mallorca 18-10-2016
 
ReConnect 2015 - ASP.NET 5: MVC 6 y EF 7
ReConnect 2015  - ASP.NET 5: MVC 6 y EF 7ReConnect 2015  - ASP.NET 5: MVC 6 y EF 7
ReConnect 2015 - ASP.NET 5: MVC 6 y EF 7
 
Como desarrollar una api en .NET Core como un autentico Avenger
Como desarrollar una api en .NET Core como un autentico AvengerComo desarrollar una api en .NET Core como un autentico Avenger
Como desarrollar una api en .NET Core como un autentico Avenger
 
Infraestructura como código
Infraestructura como códigoInfraestructura como código
Infraestructura como código
 
WebRTC en tu web con OpenVidu
WebRTC en tu web con OpenViduWebRTC en tu web con OpenVidu
WebRTC en tu web con OpenVidu
 
Integrando AngularJS y drupal
Integrando AngularJS y drupalIntegrando AngularJS y drupal
Integrando AngularJS y drupal
 
Wilver mongo db
Wilver mongo dbWilver mongo db
Wilver mongo db
 
WordPress, Nginx, Ghost y Telegram con Docker - I Meetup Docker Córdoba - Quaip
WordPress, Nginx, Ghost y Telegram con Docker - I Meetup Docker Córdoba - QuaipWordPress, Nginx, Ghost y Telegram con Docker - I Meetup Docker Córdoba - Quaip
WordPress, Nginx, Ghost y Telegram con Docker - I Meetup Docker Córdoba - Quaip
 
DotNet 2019 | Pablo Santos Luaces - Como migrar un producto multiplataforma a...
DotNet 2019 | Pablo Santos Luaces - Como migrar un producto multiplataforma a...DotNet 2019 | Pablo Santos Luaces - Como migrar un producto multiplataforma a...
DotNet 2019 | Pablo Santos Luaces - Como migrar un producto multiplataforma a...
 
Despliegue de Imágenes en aulas de informática
Despliegue de Imágenes en aulas de informáticaDespliegue de Imágenes en aulas de informática
Despliegue de Imágenes en aulas de informática
 
Breve introducción práctica al DevOps - (es) 2021_03_18
Breve introducción práctica al DevOps -  (es) 2021_03_18Breve introducción práctica al DevOps -  (es) 2021_03_18
Breve introducción práctica al DevOps - (es) 2021_03_18
 
dockerize.it
dockerize.itdockerize.it
dockerize.it
 
Open Source Modern Web Development
Open Source Modern Web DevelopmentOpen Source Modern Web Development
Open Source Modern Web Development
 
Desarrollo Web Ágil con Symfony, Bootstrap y Angular
Desarrollo Web Ágil con Symfony, Bootstrap y AngularDesarrollo Web Ágil con Symfony, Bootstrap y Angular
Desarrollo Web Ágil con Symfony, Bootstrap y Angular
 

Último

Modulo-Mini Cargador.................pdf
Modulo-Mini Cargador.................pdfModulo-Mini Cargador.................pdf
Modulo-Mini Cargador.................pdf
AnnimoUno1
 

Último (11)

Refrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdf
Refrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdfRefrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdf
Refrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdf
 
How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.
 
Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21
 
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptxEL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
 
Avances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvanaAvances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvana
 
Avances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estosAvances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estos
 
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptxPROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
 
pruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNITpruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNIT
 
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
 
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptxEVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
 
Modulo-Mini Cargador.................pdf
Modulo-Mini Cargador.................pdfModulo-Mini Cargador.................pdf
Modulo-Mini Cargador.................pdf
 

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

  • 1. LooWID Todo lo que he intentado aprender gracias al software libre Juanjo Meroño © 2014 jjmerono at um.es
  • 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.
  • 4. Hasta aquí la promoción... Hay vida más allá de Java...
  • 5. Hasta aquí la promoción... Y ya la conoces...
  • 6. Starting from scratch... Una buena excusa para trastear con: Bower
  • 7. Tratando de ordenar las piezas -> Servidor de aplicaciones JS -> Base de datos NoSQL JSON -> Web Framework -> Motor de renderización AJAX
  • 8. Tratando de ordenar las piezas -> Gestores de configuración -> Control de calidad -> Control de versiones (GitHub) -> Despliegue y distribución Bower
  • 9. WebRTC + WebSockets Permite la comunicación P2P Chrome, Firefox y Ópera Funciona en PC/Android Comunicación Servidor <-> Cliente
  • 10. Arquitectura básica [1] AngularJS Browser Express NodeJS MongoDB Ajax REST JSON Web Socket
  • 12. 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.
  • 13. 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
  • 14. 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...
  • 15. 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
  • 16. 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
  • 17. 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
  • 18. 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
  • 19. 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/#!/