meteor module 2 - inf.puc-rio.brmelissa/web/20162-docs/inf1802... · meteor uses data on the wire,...
TRANSCRIPT
![Page 1: Meteor Module 2 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802... · Meteor uses data on the wire, meaning the server sends data, not HTML, and the client renders it](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17e78ec6de0311e1255fe0/html5/thumbnails/1.jpg)
Meteor – Module 2
INF1802
Profa. Melissa Lemos
![Page 2: Meteor Module 2 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802... · Meteor uses data on the wire, meaning the server sends data, not HTML, and the client renders it](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17e78ec6de0311e1255fe0/html5/thumbnails/2.jpg)
Outline – Module 2
• Meteor Distributed Data Model, mongoDB
• Creating a Collection
• Adding itens in a Collection
• Removing itens
• Adding itens using a Form
• Sorting
• Layout and Navigation
• View item details
• Editing an item
![Page 3: Meteor Module 2 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802... · Meteor uses data on the wire, meaning the server sends data, not HTML, and the client renders it](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17e78ec6de0311e1255fe0/html5/thumbnails/3.jpg)
Reference
• Meteor• https://www.meteor.com/• http://guide.meteor.com/
• Discover Meteor. Tom Coleman, Sacha Greif.• http://pt.discovermeteor.com/pdf
• Coursera Responsive Website Development and Design Specialization, DrMatthew Yee-King, University of London, 2016.• Course Introduction to Meteor.js Development
https://www.coursera.org/learn/meteor-development/home/welcome• Web Application Development with JavaScript and MongoDB
https://www.coursera.org/learn/web-application-development/home/welcome
![Page 4: Meteor Module 2 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802... · Meteor uses data on the wire, meaning the server sends data, not HTML, and the client renders it](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17e78ec6de0311e1255fe0/html5/thumbnails/4.jpg)
1 – Meteor Distributed Data Model
![Page 5: Meteor Module 2 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802... · Meteor uses data on the wire, meaning the server sends data, not HTML, and the client renders it](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17e78ec6de0311e1255fe0/html5/thumbnails/5.jpg)
![Page 6: Meteor Module 2 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802... · Meteor uses data on the wire, meaning the server sends data, not HTML, and the client renders it](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17e78ec6de0311e1255fe0/html5/thumbnails/6.jpg)
![Page 7: Meteor Module 2 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802... · Meteor uses data on the wire, meaning the server sends data, not HTML, and the client renders it](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17e78ec6de0311e1255fe0/html5/thumbnails/7.jpg)
Meteor uses data on the wire, meaning the server sends data, not HTML, and the client renders it.
![Page 8: Meteor Module 2 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802... · Meteor uses data on the wire, meaning the server sends data, not HTML, and the client renders it](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17e78ec6de0311e1255fe0/html5/thumbnails/8.jpg)
2 – Creating a Collection and Adding Itens
![Page 9: Meteor Module 2 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802... · Meteor uses data on the wire, meaning the server sends data, not HTML, and the client renders it](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17e78ec6de0311e1255fe0/html5/thumbnails/9.jpg)
3 – Removing itens from a collection
![Page 10: Meteor Module 2 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802... · Meteor uses data on the wire, meaning the server sends data, not HTML, and the client renders it](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17e78ec6de0311e1255fe0/html5/thumbnails/10.jpg)
Create your application
• Windows command prompt:• > cd dev
• > meteor create myproject
• > cd myproject
• > meteor
![Page 11: Meteor Module 2 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802... · Meteor uses data on the wire, meaning the server sends data, not HTML, and the client renders it](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17e78ec6de0311e1255fe0/html5/thumbnails/11.jpg)
Folder Structure - myproject
• Server• startup.js
• Client• main.js, main.html, main.css
• Public• image1.jpg, image2.jpg, image3.jpg ...
• Lib• collections.js
![Page 12: Meteor Module 2 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802... · Meteor uses data on the wire, meaning the server sends data, not HTML, and the client renders it](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17e78ec6de0311e1255fe0/html5/thumbnails/12.jpg)
lib/ collections.js
This code is outside client and server folders.
Create a collection of images in the database
![Page 13: Meteor Module 2 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802... · Meteor uses data on the wire, meaning the server sends data, not HTML, and the client renders it](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17e78ec6de0311e1255fe0/html5/thumbnails/13.jpg)
Insert and Count images Server/ startup.js
Warning!The startup function runs only if there is no images in the Collection.You must reset and re-start the Meteor to clean data in the database.
![Page 14: Meteor Module 2 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802... · Meteor uses data on the wire, meaning the server sends data, not HTML, and the client renders it](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17e78ec6de0311e1255fe0/html5/thumbnails/14.jpg)
Client/ main.js
We don´t need the array of images now.We insert the images in the database.
![Page 15: Meteor Module 2 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802... · Meteor uses data on the wire, meaning the server sends data, not HTML, and the client renders it](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17e78ec6de0311e1255fe0/html5/thumbnails/15.jpg)
Client/ main.html
![Page 16: Meteor Module 2 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802... · Meteor uses data on the wire, meaning the server sends data, not HTML, and the client renders it](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17e78ec6de0311e1255fe0/html5/thumbnails/16.jpg)
Client/ main.jsDelete an image – define the event listener
‘_id’ refers to a unique identifier for an item in a Mongo collection
This refers to the data the template was displaying (the image)
{"_id":image_id} is a Mongo Filter
![Page 17: Meteor Module 2 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802... · Meteor uses data on the wire, meaning the server sends data, not HTML, and the client renders it](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17e78ec6de0311e1255fe0/html5/thumbnails/17.jpg)
Client/ main.css
Define the max and min height of the thumbnails
![Page 18: Meteor Module 2 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802... · Meteor uses data on the wire, meaning the server sends data, not HTML, and the client renders it](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17e78ec6de0311e1255fe0/html5/thumbnails/18.jpg)
Delete an image – slowly effect
Add a div id.The image object has an id property (mongo db)
![Page 19: Meteor Module 2 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802... · Meteor uses data on the wire, meaning the server sends data, not HTML, and the client renders it](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17e78ec6de0311e1255fe0/html5/thumbnails/19.jpg)
Jquery selector $("#"+image_id)
When you've finished hiding it, actually delete it from the collection. That will basically cause jquery to animate the whole component out of view.
![Page 20: Meteor Module 2 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802... · Meteor uses data on the wire, meaning the server sends data, not HTML, and the client renders it](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17e78ec6de0311e1255fe0/html5/thumbnails/20.jpg)
![Page 21: Meteor Module 2 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802... · Meteor uses data on the wire, meaning the server sends data, not HTML, and the client renders it](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17e78ec6de0311e1255fe0/html5/thumbnails/21.jpg)
4 – Addings itens in a collection with basic form
![Page 22: Meteor Module 2 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802... · Meteor uses data on the wire, meaning the server sends data, not HTML, and the client renders it](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17e78ec6de0311e1255fe0/html5/thumbnails/22.jpg)
Create your application and install Bootstrap
• Windows command prompt:• > cd dev
• > meteor create myproject
• > cd myproject
• > meteor add twbs:bootstrap
• > meteor
![Page 23: Meteor Module 2 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802... · Meteor uses data on the wire, meaning the server sends data, not HTML, and the client renders it](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17e78ec6de0311e1255fe0/html5/thumbnails/23.jpg)
lib/ collections.js
![Page 24: Meteor Module 2 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802... · Meteor uses data on the wire, meaning the server sends data, not HTML, and the client renders it](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17e78ec6de0311e1255fe0/html5/thumbnails/24.jpg)
Server/ startup.js
![Page 25: Meteor Module 2 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802... · Meteor uses data on the wire, meaning the server sends data, not HTML, and the client renders it](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17e78ec6de0311e1255fe0/html5/thumbnails/25.jpg)
Client/ main.html
![Page 26: Meteor Module 2 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802... · Meteor uses data on the wire, meaning the server sends data, not HTML, and the client renders it](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17e78ec6de0311e1255fe0/html5/thumbnails/26.jpg)
Client/ main.html
![Page 27: Meteor Module 2 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802... · Meteor uses data on the wire, meaning the server sends data, not HTML, and the client renders it](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17e78ec6de0311e1255fe0/html5/thumbnails/27.jpg)
Client/ main.js
![Page 28: Meteor Module 2 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802... · Meteor uses data on the wire, meaning the server sends data, not HTML, and the client renders it](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17e78ec6de0311e1255fe0/html5/thumbnails/28.jpg)
Client/ main.js
It will just stop the browser from doingwhatever it normally does when they submit a form. The browser normally reloads page and it just wipeseverything that was in the console.
![Page 29: Meteor Module 2 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802... · Meteor uses data on the wire, meaning the server sends data, not HTML, and the client renders it](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17e78ec6de0311e1255fe0/html5/thumbnails/29.jpg)
![Page 30: Meteor Module 2 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802... · Meteor uses data on the wire, meaning the server sends data, not HTML, and the client renders it](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17e78ec6de0311e1255fe0/html5/thumbnails/30.jpg)
![Page 31: Meteor Module 2 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802... · Meteor uses data on the wire, meaning the server sends data, not HTML, and the client renders it](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17e78ec6de0311e1255fe0/html5/thumbnails/31.jpg)
![Page 32: Meteor Module 2 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802... · Meteor uses data on the wire, meaning the server sends data, not HTML, and the client renders it](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17e78ec6de0311e1255fe0/html5/thumbnails/32.jpg)
![Page 33: Meteor Module 2 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802... · Meteor uses data on the wire, meaning the server sends data, not HTML, and the client renders it](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17e78ec6de0311e1255fe0/html5/thumbnails/33.jpg)
Specify in the sort parameter the field or fields to sort by and a value of 1 or -1 to specify an ascending or descending sort respectively.
https://docs.mongodb.com/manual/reference/method/cursor.sort/
![Page 34: Meteor Module 2 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802... · Meteor uses data on the wire, meaning the server sends data, not HTML, and the client renders it](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17e78ec6de0311e1255fe0/html5/thumbnails/34.jpg)
5 – Navigation and Layout with iron router
![Page 35: Meteor Module 2 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802... · Meteor uses data on the wire, meaning the server sends data, not HTML, and the client renders it](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17e78ec6de0311e1255fe0/html5/thumbnails/35.jpg)
Create your application, install Bootstrap and Router• Windows command prompt:
• > cd dev
• > meteor create myproject
• > cd myproject
• > meteor add twbs:bootstrap
• > meteor add iron:router
• > meteor http://iron-meteor.github.io/iron-router/
You can install iron:router using Meteor's package management system
![Page 36: Meteor Module 2 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802... · Meteor uses data on the wire, meaning the server sends data, not HTML, and the client renders it](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17e78ec6de0311e1255fe0/html5/thumbnails/36.jpg)
When the user navigates to the url "/", the route above will render the template named "Home" onto the page.
This second route will automatically render a template named "Items" or "items" to the page.
![Page 37: Meteor Module 2 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802... · Meteor uses data on the wire, meaning the server sends data, not HTML, and the client renders it](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17e78ec6de0311e1255fe0/html5/thumbnails/37.jpg)
Layouts
Layouts allow you to reuse a common look and feel in multiple pages in your application so you don't have to duplicate the html and logic on every single page template.
Layouts are just templates. But, inside of a layout you can use a special helper called yield. You can think of yield as a placeholder for content.The placeholder is called a region. The content will be "injected" into the region when we actually run our route. This lets us reuse the layout on many different pages, only changing the content of the yield regions.
Client/ main.html
![Page 38: Meteor Module 2 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802... · Meteor uses data on the wire, meaning the server sends data, not HTML, and the client renders it](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17e78ec6de0311e1255fe0/html5/thumbnails/38.jpg)
If you want to use a default layout template for all routes you can configure a global Router option.
Client/ main.html
Client/ main.js
![Page 39: Meteor Module 2 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802... · Meteor uses data on the wire, meaning the server sends data, not HTML, and the client renders it](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17e78ec6de0311e1255fe0/html5/thumbnails/39.jpg)
![Page 40: Meteor Module 2 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802... · Meteor uses data on the wire, meaning the server sends data, not HTML, and the client renders it](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17e78ec6de0311e1255fe0/html5/thumbnails/40.jpg)
Client/ main.html
![Page 41: Meteor Module 2 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802... · Meteor uses data on the wire, meaning the server sends data, not HTML, and the client renders it](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17e78ec6de0311e1255fe0/html5/thumbnails/41.jpg)
Client/ main.js
![Page 42: Meteor Module 2 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802... · Meteor uses data on the wire, meaning the server sends data, not HTML, and the client renders it](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17e78ec6de0311e1255fe0/html5/thumbnails/42.jpg)
Test yourself with Exercises
• Continue o exercício feito em sala de aula da image gallery
• Tire todas as suas dúvidas para que esteja funcionando o código até o exercício dado em sala de aula (até o slide anterior). Precisa funcionar a página com a listagem de imagens com opção de remoção de imagem, o formulário de cadastro de imagem e a página de contato. Todos as páginas com a barra de navegação no topo. Use os pacotes twbs:bootstrap e iron:router.
• Faça os exercícios definidos nos próximos slides.
![Page 43: Meteor Module 2 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802... · Meteor uses data on the wire, meaning the server sends data, not HTML, and the client renders it](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17e78ec6de0311e1255fe0/html5/thumbnails/43.jpg)
1. Adapte o seu código para apresentar cada registro em uma única linha. Tanto a imagem quanto os botões devem estar alinhados a esquerda. Crie os três botões (delete, view details* e see more) usando estilos do Bootstrap. * A ação do botão “view details” não é para ser implementada agora. Este será um assunto da próxima aula.
![Page 44: Meteor Module 2 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802... · Meteor uses data on the wire, meaning the server sends data, not HTML, and the client renders it](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17e78ec6de0311e1255fe0/html5/thumbnails/44.jpg)
2. Faça funções para acender e apagar o background da “janela” de cada imagem quando o usuário passar o mouse por cima/ sair de cima.
![Page 45: Meteor Module 2 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802... · Meteor uses data on the wire, meaning the server sends data, not HTML, and the client renders it](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17e78ec6de0311e1255fe0/html5/thumbnails/45.jpg)
3. Faça função que mostre atributos da imagem quando usuário clicar no botão azul “see more”.
![Page 46: Meteor Module 2 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802... · Meteor uses data on the wire, meaning the server sends data, not HTML, and the client renders it](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17e78ec6de0311e1255fe0/html5/thumbnails/46.jpg)
6 – Showing item details
![Page 47: Meteor Module 2 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802... · Meteor uses data on the wire, meaning the server sends data, not HTML, and the client renders it](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17e78ec6de0311e1255fe0/html5/thumbnails/47.jpg)
CLIENT SERVER
miniMongo mongoDB (central)
![Page 48: Meteor Module 2 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802... · Meteor uses data on the wire, meaning the server sends data, not HTML, and the client renders it](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17e78ec6de0311e1255fe0/html5/thumbnails/48.jpg)
CLIENT
SERVER
miniMongo
mongoDB (central)
CLIENT
miniMongo
CLIENT
miniMongo
![Page 49: Meteor Module 2 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802... · Meteor uses data on the wire, meaning the server sends data, not HTML, and the client renders it](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17e78ec6de0311e1255fe0/html5/thumbnails/49.jpg)
CLIENT SERVER
miniMongo mongoDB (central)
Images.Remove(...)Images.Find(...)Images.FindOne(...)Images.Insert(...)
Images.Remove(...)Images.Find(...)Images.FindOne(...)Images.Insert(...)
Folder Client
Files .JS (events).HTML (templates).CSS (styles)
Folder Server
Files .JS (startup, loading data)
![Page 50: Meteor Module 2 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802... · Meteor uses data on the wire, meaning the server sends data, not HTML, and the client renders it](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17e78ec6de0311e1255fe0/html5/thumbnails/50.jpg)
CLIENT SERVER
miniMongo mongoDB (central)
Images.Remove(...)Images.Find(...)Images.FindOne(...)Images.Insert(...)
Images.Remove(...)Images.Find(...)Images.FindOne(...)Images.Insert(...)
Folder Client
Files .JS (events).HTML (templates).CSS (styles)
Folder Server
Files .JS (startup, loading data)
ImageListImageAddForm
ImageItemHeaderContact
![Page 51: Meteor Module 2 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802... · Meteor uses data on the wire, meaning the server sends data, not HTML, and the client renders it](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17e78ec6de0311e1255fe0/html5/thumbnails/51.jpg)
CLIENT
miniMongo
HTML Templates
ImageList(js-del-image, js-view-image)
ImageAddForm(js-add-image)
ImageItem
click click submit
JS Events
Images.Remove Images.FindOne Images.Insert
![Page 52: Meteor Module 2 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802... · Meteor uses data on the wire, meaning the server sends data, not HTML, and the client renders it](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17e78ec6de0311e1255fe0/html5/thumbnails/52.jpg)
CLIENT
miniMongo
HTML Templates
ImageList(js-del-image, js-view-image)
ImageAddForm(js-add-image)
ImageItem
click click submit
JS Events
Images.Remove Images.FindOne Images.Insert
ROUTER
![Page 53: Meteor Module 2 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802... · Meteor uses data on the wire, meaning the server sends data, not HTML, and the client renders it](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17e78ec6de0311e1255fe0/html5/thumbnails/53.jpg)
CLIENT
miniMongo
HTML Templates
ImageList(js-del-image, js-view-image)
ImageAddForm(js-add-image)
ImageItem
click click submit
JS Events
Images.Remove Images.FindOne Images.Insert
ROUTER
![Page 54: Meteor Module 2 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802... · Meteor uses data on the wire, meaning the server sends data, not HTML, and the client renders it](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17e78ec6de0311e1255fe0/html5/thumbnails/54.jpg)
Create your application, install Bootstrap and Router• Windows command prompt:
• > cd dev
• > meteor create myproject
• > cd myproject
• > meteor add twbs:bootstrap
• > meteor add iron:router
• > meteor
![Page 55: Meteor Module 2 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802... · Meteor uses data on the wire, meaning the server sends data, not HTML, and the client renders it](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17e78ec6de0311e1255fe0/html5/thumbnails/55.jpg)
Client/ main.html
![Page 56: Meteor Module 2 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802... · Meteor uses data on the wire, meaning the server sends data, not HTML, and the client renders it](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17e78ec6de0311e1255fe0/html5/thumbnails/56.jpg)
Client/ main.js
![Page 57: Meteor Module 2 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802... · Meteor uses data on the wire, meaning the server sends data, not HTML, and the client renders it](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17e78ec6de0311e1255fe0/html5/thumbnails/57.jpg)
Client/ main.js
Route Parameters
Routes can have variable parameters. For example, you can create one route to show any image with an id. The id is variable depending on the image you want to see such as "/image/1" or "/image/2".
To declare a named parameter in your route use the : syntax in the urlfollowed by the parameter name. When a user goes to that url, the actual value of the parameter will be stored as a property on this.params in your route function.
![Page 58: Meteor Module 2 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802... · Meteor uses data on the wire, meaning the server sends data, not HTML, and the client renders it](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17e78ec6de0311e1255fe0/html5/thumbnails/58.jpg)
Client/ main.html
![Page 59: Meteor Module 2 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802... · Meteor uses data on the wire, meaning the server sends data, not HTML, and the client renders it](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17e78ec6de0311e1255fe0/html5/thumbnails/59.jpg)
![Page 60: Meteor Module 2 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802... · Meteor uses data on the wire, meaning the server sends data, not HTML, and the client renders it](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17e78ec6de0311e1255fe0/html5/thumbnails/60.jpg)
![Page 61: Meteor Module 2 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802... · Meteor uses data on the wire, meaning the server sends data, not HTML, and the client renders it](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17e78ec6de0311e1255fe0/html5/thumbnails/61.jpg)
6 – Editing an item
![Page 62: Meteor Module 2 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802... · Meteor uses data on the wire, meaning the server sends data, not HTML, and the client renders it](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17e78ec6de0311e1255fe0/html5/thumbnails/62.jpg)
![Page 63: Meteor Module 2 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802... · Meteor uses data on the wire, meaning the server sends data, not HTML, and the client renders it](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17e78ec6de0311e1255fe0/html5/thumbnails/63.jpg)
![Page 64: Meteor Module 2 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802... · Meteor uses data on the wire, meaning the server sends data, not HTML, and the client renders it](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17e78ec6de0311e1255fe0/html5/thumbnails/64.jpg)
![Page 65: Meteor Module 2 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802... · Meteor uses data on the wire, meaning the server sends data, not HTML, and the client renders it](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17e78ec6de0311e1255fe0/html5/thumbnails/65.jpg)
![Page 66: Meteor Module 2 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802... · Meteor uses data on the wire, meaning the server sends data, not HTML, and the client renders it](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17e78ec6de0311e1255fe0/html5/thumbnails/66.jpg)
![Page 67: Meteor Module 2 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802... · Meteor uses data on the wire, meaning the server sends data, not HTML, and the client renders it](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17e78ec6de0311e1255fe0/html5/thumbnails/67.jpg)
CLIENT
miniMongo
HTML Templates
ImageList(js-del-image, js-view-image, js-edit-image)
ImageAddForm(js-add-image)
ImageItem
click click submit
JS Events
Images.Remove Images.Insert
ROUTER
ImageEditForm(form js-edit-image)
submit
Images.UpdateImages.FindOne
![Page 68: Meteor Module 2 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802... · Meteor uses data on the wire, meaning the server sends data, not HTML, and the client renders it](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17e78ec6de0311e1255fe0/html5/thumbnails/68.jpg)
Client/ main.html
![Page 69: Meteor Module 2 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802... · Meteor uses data on the wire, meaning the server sends data, not HTML, and the client renders it](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17e78ec6de0311e1255fe0/html5/thumbnails/69.jpg)
Client/ main.htmlTemplate imagelist
![Page 70: Meteor Module 2 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802... · Meteor uses data on the wire, meaning the server sends data, not HTML, and the client renders it](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17e78ec6de0311e1255fe0/html5/thumbnails/70.jpg)
Client/ main.htmlTemplate imageaddform
![Page 71: Meteor Module 2 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802... · Meteor uses data on the wire, meaning the server sends data, not HTML, and the client renders it](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17e78ec6de0311e1255fe0/html5/thumbnails/71.jpg)
Client/ main.htmlTemplate imageitem
![Page 72: Meteor Module 2 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802... · Meteor uses data on the wire, meaning the server sends data, not HTML, and the client renders it](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17e78ec6de0311e1255fe0/html5/thumbnails/72.jpg)
Client/ main.htmlTemplate imageeditform
![Page 73: Meteor Module 2 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802... · Meteor uses data on the wire, meaning the server sends data, not HTML, and the client renders it](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17e78ec6de0311e1255fe0/html5/thumbnails/73.jpg)
Client/ main.htmlTemplate header
![Page 74: Meteor Module 2 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802... · Meteor uses data on the wire, meaning the server sends data, not HTML, and the client renders it](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17e78ec6de0311e1255fe0/html5/thumbnails/74.jpg)
Client/ main.htmlTemplate contact
![Page 75: Meteor Module 2 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802... · Meteor uses data on the wire, meaning the server sends data, not HTML, and the client renders it](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17e78ec6de0311e1255fe0/html5/thumbnails/75.jpg)
Client/ .jsRouting
![Page 76: Meteor Module 2 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802... · Meteor uses data on the wire, meaning the server sends data, not HTML, and the client renders it](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17e78ec6de0311e1255fe0/html5/thumbnails/76.jpg)
Client/ .jsImagelist - events
![Page 77: Meteor Module 2 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802... · Meteor uses data on the wire, meaning the server sends data, not HTML, and the client renders it](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17e78ec6de0311e1255fe0/html5/thumbnails/77.jpg)
Client/ .jsImagelist - events
![Page 78: Meteor Module 2 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802... · Meteor uses data on the wire, meaning the server sends data, not HTML, and the client renders it](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17e78ec6de0311e1255fe0/html5/thumbnails/78.jpg)
Client/ .jsImageaddform - events
![Page 79: Meteor Module 2 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802... · Meteor uses data on the wire, meaning the server sends data, not HTML, and the client renders it](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17e78ec6de0311e1255fe0/html5/thumbnails/79.jpg)
Client/ .jsImageeditform - events
![Page 80: Meteor Module 2 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802... · Meteor uses data on the wire, meaning the server sends data, not HTML, and the client renders it](https://reader033.vdocuments.us/reader033/viewer/2022060421/5f17e78ec6de0311e1255fe0/html5/thumbnails/80.jpg)