inLab FIB MeteorJS workshop by uLab UPC - Telefonica I+D

959 views
856 views

Published on

Workshop realitzat per l'equip uLab UPC de l'inLab FIB, després de realitzar una prova de concepte de la tecnologia. Més informació:
http://inlab.fib.upc.edu/ca/blog/meteorjs-getting-started

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
959
On SlideShare
0
From Embeds
0
Number of Embeds
352
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

inLab FIB MeteorJS workshop by uLab UPC - Telefonica I+D

  1. 1. Meteor JS WORKSHOP Jaume Bosch Marc Cobos Olga Dziêgielewska Jonatan Fernández
  2. 2. MeteorJS: ¿QUÉ ES? METEOR es una plataforma open source para crear web apps. Utiliza DDP(Distributed Data Protocol) para transferir datos entre Cliente y Servidor. La parte servidora de Meteor utiliza Node.js y MongoDB. Meteor API sirve para implementar la parte cliente y la parte servidora.
  3. 3. VENTAJAS Data on the Wire: no envia HTML por la red, envia los datos y el Cliente decide cuando quiere renderizarlo Database Everywhere: la misma API para acceder a la base de datos de la parte cliente/servidora Simplicity Equals Productivity: API muy facil One Language: JavaScript
  4. 4. VENTAJAS Full Stack Reactivity: todas las capas, desde la base de datos hasta los templates, deberían permitir utilizar una interfaz event-driven. Embrace the Ecosystem: integra otras herramientas y frameworks. Latency Compensation: prefetching y simulación del modelo (en la parte cliente)
  5. 5. DESVENTAJAS Problemas con seguridad MongoDB/autopublish *latencia Problema con indexing/JavaScript *la solución propensa a ataques DDoS
  6. 6. MONGODB MONGODB es un sistema de base de datos NoSQL. Se instala por defecto junto con Meteor. Rooms = new Meteor.Collection('rooms'); Actualmente la mayoría de las aplicaciones Meteor utilizan MongoDB como su base de datos, porque es la mejor soportada, sin embargo soporte para otras bases de datos están en camino.
  7. 7. MONGODB ● Insert en una Colección MongoDB var x = Rooms.insert({ url: newUrl, name: newName, room_id: key, userOwner: keyUser, });
  8. 8. MONGODB ● Select en una Colección MongoDB Rooms.find({num: {$in: [1,2,3]}}, {sort:{ num: 1}}).fetch(); ● Delete en una Colección MongoDB Rooms.remove({num: 1}); ● Mas informarción en: http://www.mongodb.org/
  9. 9. INSTALACIÓN
  10. 10. INSTALACIÓN # Instalar node.js [http://nodejs.org https://github.com/joyent/node] > > > > > git clone git://github.com/ry/node.git cd node ./configure make sudo make install # Instalar npm [https://npmjs.org/] > git clone http://github.com/isaacs/npm.git > cd npm > sudo make install # Instalar Meteor [https://www.meteor.com/] > curl https://install.meteor.com | /bin/sh # Instalar Meteorite con uno de los dos comandos siguientes [https://github.com/oortcloud/meteorite] > sudo npm install -g meteorite > sudo -H npm install -g meteorite
  11. 11. ESTRUCTURA Iconos: http://dryicons.com
  12. 12. ESTRUCTURA lib/ environment.js lmethods.js external/ collections/ client/ lib/environment.js lib/helpers application.js # # # # # # # # # index.html index.js views/ <page>.html <page>.js <type>/ stylesheets/ server/ publications.js lib/environment.js tests/ # <- toplevel html # <- and its JS # # # # <<<<<<<<<- <<<<- any common code for client/server. general configuration Meteor.method definitions common code from someone else definitions of collections and methods on them (could be models/) client specific libraries (also loaded first) configuration of any client side packages any helpers (handlebars or otherwise) that are used often in view files subscriptions, basic Meteor.startup code. the templates specific to a single page and the JS to hook it up if you find you have a lot of views of the same object type css / styl / less files # <- Meteor.publish definitions # <- configuration of server side packages # <- unit test files (won't be loaded on client or server) Fuente github.com/oortcloud/unofficial-meteor-faq
  13. 13. EJEMPLO LEADERBOARD Icono: http://dryicons.com
  14. 14. EJEMPLO LEADERBOARD ● Crear un nuevo proyecto: > meteor create nombre_proyecto
  15. 15. EJEMPLO LEADERBOARD Icono: http://dryicons.com
  16. 16. Icono: http://dryicons.com
  17. 17. Icono: http://dryicons.com
  18. 18. EJEMPLO LEADERBOARD Icono: http://dryicons.com
  19. 19. EJEMPLO LEADERBOARD Icono: http://dryicons.com
  20. 20. EJEMPLO LEADERBOARD Icono: http://dryicons.com
  21. 21. PAQUETES Añadir funcionalidades/paquetes no instalados por defecto en el proyecto. # Mostrar paquetes disponibles meteor list # instalar un nuevo paquete meteor add nombrePaquete # Eliminar un paquete instalado previamente meteor remove nombrePaquete
  22. 22. PAQUETES Distintos paquetes usados: ● Accounts-Password ● HTTP ● Iron-router
  23. 23. DESPLIEGUE Meteor es un servidor de aplicaciones completo. Incluimos todo lo que necesitas para desplegar tus aplicaciones a la internet: tu sólo tienes que encargarte del JavaScript, HTML, y CSS. # Despleguar tu aplicacion en el dominio meteor.com meteor deploy myapp.meteor.com # Despleguar tu aplicacion en localhost:3000 meteor
  24. 24. DESPLIEGUE # Despleguar tu aplicacion en otro puerto de localhost meteor --port=NumPort # Borrar el despliegue hecho en meteor.com meteor deploy myapp.meteor.com --delete # Reiniciar la BBDD Mongo de tu aplicación meteor reset
  25. 25. SETTINGS FILE # Puedes asociar al proyecto un fichero con variables de configuración meteor --settings settingFile.json fichero: settingFile.json Acceso a las variables de settingFile.json { "public" : { "Variable1" : "ValorVariable1" "Variable2" : "ValorVariable2" } } Meteor.settings.public.variable1;
  26. 26. PRIVATE CHATS ● 1 server de autenticación central (authServer) ● N ChatServer privados ● ChatServer’s conocen al authServer (validación) ● Los mensajes no pasan por el authServer (se redirige al usuario) Iconos: http://dryicons.com
  27. 27. PRIVATE CHATS AUTHSERVER rooms.js Icono: http://dryicons.com
  28. 28. PRIVATE CHATS AUTHSERVER private_chats.js Icono: http://dryicons.com
  29. 29. PRIVATE CHATS AUTHSERVER rooms.js Icono: http://dryicons.com
  30. 30. PRIVATE CHATS AUTHSERVER private_chats.js Icono: http://dryicons.com
  31. 31. PRIVATE CHATS CHATSERVER messajesList.html Icono: http://dryicons.com
  32. 32. PRIVATE CHATS CHATSERVER chatserver.meteor.com/room/YqZ3sEhLK7aLxhnmy ?usr=JTv6apBxfXrpEmvjT &tok=XKayJuRmjQRnM2Eu5 router.js Icono: http://dryicons.com
  33. 33. PRIVATE CHATS CHATSERVER router.js Icono: http://dryicons.com
  34. 34. PRIVATE CHATS DEMO authserver.meteor.com

×