![Page 1: Meteor Module 1 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802-06-Meteor-M… · Meteor includes a key set of technologies for building connected-client reactive applications, a build](https://reader033.vdocumento.com/reader033/viewer/2022050218/5f63e196cad0ab57c03ebad4/html5/thumbnails/1.jpg)
Meteor – Module 1
INF1802
Profa. Melissa Lemos
![Page 2: Meteor Module 1 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802-06-Meteor-M… · Meteor includes a key set of technologies for building connected-client reactive applications, a build](https://reader033.vdocumento.com/reader033/viewer/2022050218/5f63e196cad0ab57c03ebad4/html5/thumbnails/2.jpg)
Outline – Module 1
• Web concepts with Meteor
• Install Meteor, Generate starter application, Run it, Look at the files
• Templates• Editing a template
• Sending data to templates with helpers
• Responding to user actions
• Using Bootstrap
![Page 3: Meteor Module 1 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802-06-Meteor-M… · Meteor includes a key set of technologies for building connected-client reactive applications, a build](https://reader033.vdocumento.com/reader033/viewer/2022050218/5f63e196cad0ab57c03ebad4/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 1 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802-06-Meteor-M… · Meteor includes a key set of technologies for building connected-client reactive applications, a build](https://reader033.vdocumento.com/reader033/viewer/2022050218/5f63e196cad0ab57c03ebad4/html5/thumbnails/4.jpg)
1 - Web Concepts with Meteor, Introduction
![Page 5: Meteor Module 1 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802-06-Meteor-M… · Meteor includes a key set of technologies for building connected-client reactive applications, a build](https://reader033.vdocumento.com/reader033/viewer/2022050218/5f63e196cad0ab57c03ebad4/html5/thumbnails/5.jpg)
CLIENT SERVER
![Page 6: Meteor Module 1 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802-06-Meteor-M… · Meteor includes a key set of technologies for building connected-client reactive applications, a build](https://reader033.vdocumento.com/reader033/viewer/2022050218/5f63e196cad0ab57c03ebad4/html5/thumbnails/6.jpg)
![Page 7: Meteor Module 1 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802-06-Meteor-M… · Meteor includes a key set of technologies for building connected-client reactive applications, a build](https://reader033.vdocumento.com/reader033/viewer/2022050218/5f63e196cad0ab57c03ebad4/html5/thumbnails/7.jpg)
Meteor
• Meteor is a full-stack JavaScript platform for developing modern web and mobile applications. Meteor includes a key set of technologies for building connected-client reactive applications, a build tool, and a curated set of packages from the Node.js and general JavaScript community.
• Meteor allows you to develop in one language, JavaScript, in all environments: application server, web browser, and mobile device.
From www.meteor.com
![Page 8: Meteor Module 1 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802-06-Meteor-M… · Meteor includes a key set of technologies for building connected-client reactive applications, a build](https://reader033.vdocumento.com/reader033/viewer/2022050218/5f63e196cad0ab57c03ebad4/html5/thumbnails/8.jpg)
• Web Application - Concepts
![Page 9: Meteor Module 1 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802-06-Meteor-M… · Meteor includes a key set of technologies for building connected-client reactive applications, a build](https://reader033.vdocumento.com/reader033/viewer/2022050218/5f63e196cad0ab57c03ebad4/html5/thumbnails/9.jpg)
2 – Install Meteor, Generate Starter App, Run it, Look at the files
![Page 11: Meteor Module 1 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802-06-Meteor-M… · Meteor includes a key set of technologies for building connected-client reactive applications, a build](https://reader033.vdocumento.com/reader033/viewer/2022050218/5f63e196cad0ab57c03ebad4/html5/thumbnails/11.jpg)
• Create a starter application
• Create a directory (example dev)
• Create a example application• meteor create
hello_world
![Page 12: Meteor Module 1 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802-06-Meteor-M… · Meteor includes a key set of technologies for building connected-client reactive applications, a build](https://reader033.vdocumento.com/reader033/viewer/2022050218/5f63e196cad0ab57c03ebad4/html5/thumbnails/12.jpg)
• Run the application
• meteor
![Page 13: Meteor Module 1 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802-06-Meteor-M… · Meteor includes a key set of technologies for building connected-client reactive applications, a build](https://reader033.vdocumento.com/reader033/viewer/2022050218/5f63e196cad0ab57c03ebad4/html5/thumbnails/13.jpg)
3 –TemplatesCreate
![Page 14: Meteor Module 1 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802-06-Meteor-M… · Meteor includes a key set of technologies for building connected-client reactive applications, a build](https://reader033.vdocumento.com/reader033/viewer/2022050218/5f63e196cad0ab57c03ebad4/html5/thumbnails/14.jpg)
Template
• The template element is used to declare fragments of HTML that can be cloned and inserted in the document by script. *• Templates provide a method for declaring inert DOM subtrees and manipulating
them to instantiate document fragments with identical contents. • When web pages dynamically alter the contents of their documents (e.g. in
response to user interaction or new data arriving from the server), it is common that they require fragments of HTML which may require further modification before use, such as the insertion of values appropriate for the usage context.
• The template element allows for the declaration of document fragments which are unused by the document when loaded, but are parsed as HTML and are available at runtime for use by the web page.
Meteor template documentation:http://docs.meteor.com/#/full/templates_apihttp://meteorcapture.com/spacebars/
* The Template element is HTML5 (W3C reccomendation)
https://www.w3.org/TR/html5/scripting-1.html#the-template-element
![Page 15: Meteor Module 1 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802-06-Meteor-M… · Meteor includes a key set of technologies for building connected-client reactive applications, a build](https://reader033.vdocumento.com/reader033/viewer/2022050218/5f63e196cad0ab57c03ebad4/html5/thumbnails/15.jpg)
Trigger the templating language. So greater than means go and find a template, and render it, and place the output here, the template is called hello.
![Page 16: Meteor Module 1 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802-06-Meteor-M… · Meteor includes a key set of technologies for building connected-client reactive applications, a build](https://reader033.vdocumento.com/reader033/viewer/2022050218/5f63e196cad0ab57c03ebad4/html5/thumbnails/16.jpg)
In the head, Meteor includes all the scripts that we need to make the application work. And in the body tag you can see you've gotthe header, which we saw in the template …
![Page 17: Meteor Module 1 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802-06-Meteor-M… · Meteor includes a key set of technologies for building connected-client reactive applications, a build](https://reader033.vdocumento.com/reader033/viewer/2022050218/5f63e196cad0ab57c03ebad4/html5/thumbnails/17.jpg)
![Page 18: Meteor Module 1 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802-06-Meteor-M… · Meteor includes a key set of technologies for building connected-client reactive applications, a build](https://reader033.vdocumento.com/reader033/viewer/2022050218/5f63e196cad0ab57c03ebad4/html5/thumbnails/18.jpg)
![Page 19: Meteor Module 1 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802-06-Meteor-M… · Meteor includes a key set of technologies for building connected-client reactive applications, a build](https://reader033.vdocumento.com/reader033/viewer/2022050218/5f63e196cad0ab57c03ebad4/html5/thumbnails/19.jpg)
![Page 20: Meteor Module 1 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802-06-Meteor-M… · Meteor includes a key set of technologies for building connected-client reactive applications, a build](https://reader033.vdocumento.com/reader033/viewer/2022050218/5f63e196cad0ab57c03ebad4/html5/thumbnails/20.jpg)
4 –TemplatesSending data to Templates with Helpers
![Page 21: Meteor Module 1 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802-06-Meteor-M… · Meteor includes a key set of technologies for building connected-client reactive applications, a build](https://reader033.vdocumento.com/reader033/viewer/2022050218/5f63e196cad0ab57c03ebad4/html5/thumbnails/21.jpg)
![Page 22: Meteor Module 1 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802-06-Meteor-M… · Meteor includes a key set of technologies for building connected-client reactive applications, a build](https://reader033.vdocumento.com/reader033/viewer/2022050218/5f63e196cad0ab57c03ebad4/html5/thumbnails/22.jpg)
![Page 23: Meteor Module 1 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802-06-Meteor-M… · Meteor includes a key set of technologies for building connected-client reactive applications, a build](https://reader033.vdocumento.com/reader033/viewer/2022050218/5f63e196cad0ab57c03ebad4/html5/thumbnails/23.jpg)
• Send some data in from the Javascript layer into the template
• Template helpers provide data for templates
The same name
![Page 24: Meteor Module 1 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802-06-Meteor-M… · Meteor includes a key set of technologies for building connected-client reactive applications, a build](https://reader033.vdocumento.com/reader033/viewer/2022050218/5f63e196cad0ab57c03ebad4/html5/thumbnails/24.jpg)
• Array of images
![Page 25: Meteor Module 1 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802-06-Meteor-M… · Meteor includes a key set of technologies for building connected-client reactive applications, a build](https://reader033.vdocumento.com/reader033/viewer/2022050218/5f63e196cad0ab57c03ebad4/html5/thumbnails/25.jpg)
5 – Using Bootstrap
![Page 26: Meteor Module 1 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802-06-Meteor-M… · Meteor includes a key set of technologies for building connected-client reactive applications, a build](https://reader033.vdocumento.com/reader033/viewer/2022050218/5f63e196cad0ab57c03ebad4/html5/thumbnails/26.jpg)
• Meteor packages provide additional features
• Search installed packages.
• Search the most popular Bootstrap package
• To add, you need to be in the application folder
![Page 27: Meteor Module 1 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802-06-Meteor-M… · Meteor includes a key set of technologies for building connected-client reactive applications, a build](https://reader033.vdocumento.com/reader033/viewer/2022050218/5f63e196cad0ab57c03ebad4/html5/thumbnails/27.jpg)
• Before and after Bootstrap
![Page 28: Meteor Module 1 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802-06-Meteor-M… · Meteor includes a key set of technologies for building connected-client reactive applications, a build](https://reader033.vdocumento.com/reader033/viewer/2022050218/5f63e196cad0ab57c03ebad4/html5/thumbnails/28.jpg)
The grid has 12 columns. col-xs-12 (xs-phone): Use all 12 columns for an image
col-md-3 (md-desktop): Use 3 columns per image (4 images per row)
![Page 29: Meteor Module 1 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802-06-Meteor-M… · Meteor includes a key set of technologies for building connected-client reactive applications, a build](https://reader033.vdocumento.com/reader033/viewer/2022050218/5f63e196cad0ab57c03ebad4/html5/thumbnails/29.jpg)
![Page 30: Meteor Module 1 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802-06-Meteor-M… · Meteor includes a key set of technologies for building connected-client reactive applications, a build](https://reader033.vdocumento.com/reader033/viewer/2022050218/5f63e196cad0ab57c03ebad4/html5/thumbnails/30.jpg)
In Bootstrap, you have to put things in containers
![Page 31: Meteor Module 1 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802-06-Meteor-M… · Meteor includes a key set of technologies for building connected-client reactive applications, a build](https://reader033.vdocumento.com/reader033/viewer/2022050218/5f63e196cad0ab57c03ebad4/html5/thumbnails/31.jpg)
6 – Responding to User Actions
![Page 32: Meteor Module 1 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802-06-Meteor-M… · Meteor includes a key set of technologies for building connected-client reactive applications, a build](https://reader033.vdocumento.com/reader033/viewer/2022050218/5f63e196cad0ab57c03ebad4/html5/thumbnails/32.jpg)
• Interactivity: Reacting user input
Alert Function
If you want to do something on the server (as something in the database) after they click on an image,I can’t do that because it’s all happening inside the browser.I don’t have access that event inside my Meteor system.
![Page 33: Meteor Module 1 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802-06-Meteor-M… · Meteor includes a key set of technologies for building connected-client reactive applications, a build](https://reader033.vdocumento.com/reader033/viewer/2022050218/5f63e196cad0ab57c03ebad4/html5/thumbnails/33.jpg)
Create a class that relates to interactively. Js-imageIt is useful to prefix the event classes with “js”.
Binding data to the template
Binding events to the template
Anything in that template that has the class .js-image, if I click on it, it will trigger this event (this function gets called).
Let’s re-create the same functionality in the Meteor way
![Page 34: Meteor Module 1 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802-06-Meteor-M… · Meteor includes a key set of technologies for building connected-client reactive applications, a build](https://reader033.vdocumento.com/reader033/viewer/2022050218/5f63e196cad0ab57c03ebad4/html5/thumbnails/34.jpg)
![Page 35: Meteor Module 1 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802-06-Meteor-M… · Meteor includes a key set of technologies for building connected-client reactive applications, a build](https://reader033.vdocumento.com/reader033/viewer/2022050218/5f63e196cad0ab57c03ebad4/html5/thumbnails/35.jpg)
ConsoleLook at the target
![Page 36: Meteor Module 1 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802-06-Meteor-M… · Meteor includes a key set of technologies for building connected-client reactive applications, a build](https://reader033.vdocumento.com/reader033/viewer/2022050218/5f63e196cad0ab57c03ebad4/html5/thumbnails/36.jpg)
Changing the style
![Page 37: Meteor Module 1 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802-06-Meteor-M… · Meteor includes a key set of technologies for building connected-client reactive applications, a build](https://reader033.vdocumento.com/reader033/viewer/2022050218/5f63e196cad0ab57c03ebad4/html5/thumbnails/37.jpg)
Test yourself with Exercises
![Page 38: Meteor Module 1 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802-06-Meteor-M… · Meteor includes a key set of technologies for building connected-client reactive applications, a build](https://reader033.vdocumento.com/reader033/viewer/2022050218/5f63e196cad0ab57c03ebad4/html5/thumbnails/38.jpg)
• Create a project in meteor• Command Prompt – meteor create <project-name>
• Choose a collection from your project (ex. Animal)
• Define 5 fields (ex. Thumbnail, Title, Description, Age, Alt) using an array in javascript
• Create a HTML page with a table that each row presents the fields of each register from your collection
• Use Bootstrap• Command Prompt – meteor add twbs:bootstrap• Use the class = table (from bootstrap)
• ** Try to insert a field with a link to an URL (ex. Each animal has a link to wikipedia)
Test yourself with Exercises
![Page 39: Meteor Module 1 - inf.puc-rio.brmelissa/WEB/20162-docs/INF1802-06-Meteor-M… · Meteor includes a key set of technologies for building connected-client reactive applications, a build](https://reader033.vdocumento.com/reader033/viewer/2022050218/5f63e196cad0ab57c03ebad4/html5/thumbnails/39.jpg)