Scribd
Upload
55 views

Meteor Module

This document provides an overview of Module 1 of a Meteor course which covers basic web concepts with Meteor including installing Meteor, generating a starter application, looking at application files, using templates, sending data to templates with helpers, and responding to user actions. It also introduces using the Bootstrap framework in Meteor applications. The module concludes with exercises for students to create a Meteor project with a collection and display data from the collection in a Bootstrap table, including adding a field with links.

Uploaded by

Noel Koutlis
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
55 views

Meteor Module

This document provides an overview of Module 1 of a Meteor course which covers basic web concepts with Meteor including installing Meteor, generating a starter application, looking at application files, using templates, sending data to templates with helpers, and responding to user actions. It also introduces using the Bootstrap framework in Meteor applications. The module concludes with exercises for students to create a Meteor project with a collection and display data from the collection in a Bootstrap table, including adding a field with links.

Uploaded by

Noel Koutlis
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 39

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)

You might also like