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

Meteor JSWORKSHOP

Jaume BoschMarc CobosOlga DziêgielewskaJonatan Fernández

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.

VENTAJASData 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

VENTAJASFull 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)

DESVENTAJAS

Problemas con seguridadMongoDB/autopublish

*latencia

Problema con indexing/JavaScript

*la solución propensa a ataques DDoS

MONGODBMONGODB 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.

http://es.wikipedia.org/wiki/Base_de_datos

http://es.wikipedia.org/wiki/NoSQL

MONGODB● Insert en una Colección MongoDB

var x = Rooms.insert({

url: newUrl,

name: newName,

room_id: key,

userOwner: keyUser,

});

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/

http://www.mongodb.org/

INSTALACIÓN

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

http://nodejs.org

https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager

https://github.com/joyent/node

https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager

https://npmjs.org/

https://www.meteor.com/

https://github.com/oortcloud/meteorite

ESTRUCTURA

Iconos: http://dryicons.com

ESTRUCTURAlib/ # <- any common code for client/server.

environment.js # <- general configuration

lmethods.js # <- Meteor.method definitions

external/ # <- common code from someone else

collections/ # <- definitions of collections and methods on them (could be models/)

client/ # <- client specific libraries (also loaded first)

lib/environment.js # <- configuration of any client side packages

lib/helpers # <- any helpers (handlebars or otherwise) that are used often in view files

application.js # <- subscriptions, basic Meteor.startup code.

index.html # <- toplevel html

index.js # <- and its JS

views/

<page>.html # <- the templates specific to a single page

<page>.js # <- and the JS to hook it up

<type>/ # <- if you find you have a lot of views of the same object type

stylesheets/ # <- css / styl / less files

server/

publications.js # <- Meteor.publish definitions

lib/environment.js # <- configuration of server side packages

tests/ # <- unit test files (won't be loaded on client or server) Fuentegithub.com/oortcloud/unofficial-meteor-faq

EJEMPLO LEADERBOARD

Icono: http://dryicons.com

http://exworkshop.meteor.com

EJEMPLO LEADERBOARD● Crear un nuevo proyecto:

> meteor create nombre_proyecto

EJEMPLO LEADERBOARD


PAQUETESAñadir funcionalidades/paquetes no instalados por defecto en el proyecto.# Mostrar paquetes disponiblesmeteor list

# instalar un nuevo paquetemeteor add nombrePaquete

# Eliminar un paquete instalado previamentemeteor remove nombrePaquete

Puedes ver una lista de los paquetes disponibles con meteor list, agregar paquetes a tu proyecto con meteor add, y eliminarlos con meteor remove.

http://docs-es.meteor.com/#meteorlist

http://docs-es.meteor.com/#meteoradd

http://docs-es.meteor.com/#meteorremove

PAQUETESDistintos paquetes usados:

● Accounts-Password● HTTP● Iron-router

DESPLIEGUEMeteor 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.commeteor deploy myapp.meteor.com

# Despleguar tu aplicacion en localhost:3000meteor

DESPLIEGUE# Despleguar tu aplicacion en otro puerto de localhostmeteor --port=NumPort

# Borrar el despliegue hecho en meteor.commeteor deploy myapp.meteor.com --delete

# Reiniciar la BBDD Mongo de tu aplicaciónmeteor reset

SETTINGS FILE# Puedes asociar al proyecto un fichero con variables de configuraciónmeteor --settings settingFile.json

fichero: settingFile.json

{ "public" : { "Variable1" : "ValorVariable1" "Variable2" : "ValorVariable2" }}

Acceso a las variables de settingFile.json

Meteor.settings.public.variable1;

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

PRIVATE CHATS AUTHSERVER


rooms.js



private_chats.js



rooms.js



private_chats.js

PRIVATE CHATS CHATSERVER


messajesList.html



router.js

chatserver.meteor.com/room/YqZ3sEhLK7aLxhnmy?usr=JTv6apBxfXrpEmvjT

&tok=XKayJuRmjQRnM2Eu5

http://chatserver.meteor.com/room/YqZ3sEhLK7aLxhnmy?usr=JTv6apBxfXrpEmvjT&tok=XKayJuRmjQRnM2Eu5








router.js

PRIVATE CHATS DEMO

authserver.meteor.com

http://authserver.meteor.com

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

Technology

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