Meteor Module 1
INF1802
Profa. Melissa Lemos
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
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, Dr
Matthew 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
1 - Web Concepts with Meteor,
Introduction
CLIENT
SERVER
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
Web Application - Concepts
2 Install Meteor, Generate
Starter App, Run it, Look at the
files
Install Meteor: https://www.meteor.com/install
Create a starter application
Create a directory (example
dev)
Create a example application
meteor create
hello_world
Run the application
meteor
3 Templates
Create
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.
* The Template element is HTML5 (W3C
reccomendation)
https://www.w3.org/TR/html5/scripting1.html#the-template-element
Meteor template documentation:
http://docs.meteor.com/#/full/templates_api
http://meteorcapture.com/spacebars/
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.
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 got
the header, which we saw in the template
4 Templates
Sending data to Templates with
Helpers
Send some data in from the Javascript layer into the template
Template helpers provide data for templates
The same name
Array of images
5 Using Bootstrap
Meteor packages provide additional features
Search installed packages.
Search the most popular Bootstrap package
To add, you need to be in the application folder
Before and after Bootstrap
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)
In Bootstrap, you have to put things in containers
6 Responding to User Actions
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 cant do that because its all happening inside the browser.
I dont have access that event inside my Meteor system.
Lets re-create the same functionality in the Meteor way
Create a class that relates to interactively. Js-image
It 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).
Console
Look at the target
Changing the style
Test yourself with Exercises
Test yourself with Exercises
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)
