Meteor

Developing TeamSync (Real Time Collaboration

Tool)

Febin John JamesBoutline

TeamSync Demo

Introduction to Meteor

Hands on Mini Mongo

Create a prototype with static data

Wire up with database

Add authentication

Deploy the app

Workshop

Developing TeamSync using Meteor

7.Sessions

Understanding meteor sessions

8.Meteor Accounts

Understanding meteor accountsAdding external login servicesAdding twitter login

9.Allow Deny

Understand allow deny callbacks.Securing TeamSync

10.Deployment

Deploying teamsync app.

4. Collections

Meteor CollectionsMeteor Data SynchronizationIntegrating collection with templatesTurning prototype into functional appReactivity

5. Routing

Learn about routing in meteor Create team pages with Unique Url’s

6.Publications & Subscriptions

How publications & subscriptions workAdding publications to our prototype

1. Introduction

What is meteor?Why meteor?Installing meteor Meteor Packages

2. Mini Mongo

What makes mongodb simple?Mini Mongo CRUD Operations

3. Templates

Meteor’s templating languageYour first templateTemplate Manager’sTeamSync Prototype with static data

Introduction to Meteor

Before Meteor

Meteor

Database Real-time Sync User Interface

Why Meteor?

Easy to learn

Up and running in hours

You are already familiar with javascript, aren’t you?

Meteor Packages

Core Packages Smart Packages Atmosphere Packages

Hands on Mini Mongo

Features of MongoDB

No Schema

High Performance

High Scalability

MongoDB CRUD Operations

Type “meteor mongo”

Let’s begin

db.collection.insert({})db.collection.update({})db.collection.remove({})db.collection.find({})

Starting Meteor

Creating a meteor app

meteor create teamsync

cd teamsync

meteor

Meteor app folder structure

client serverpubliclibcollections

Templates

A meteor app

Templates(HTML Files)Client Side(JS Files)Server Side(JS Files)

Your first template

{{>helloWorld}}

<template name=”helloWorld”><h1> Hello World </h1></template>

Let’s create prototype of teamsync with static data

create team templateteams board templatejoin team templatechat templatemission’s templateteam update templatemission update template

Collections

Collections for TeamSync

Teams Collection Mission’s Collection Status Collection

Messages Collection

Teams = new Meteor.Collection(‘Teams’);

Teams.insert({})

Teams.update({})

Teams.remove({})

Teams.find({})

Server-Side Collections

Client-Side Collections

Let’s wire the static templates with database

Handlebars

Template.teamsBoard.teams =

function()

{

return Teams.find();

}

{{#each teams}}

<li>{{name}}</li>

{{/each}}

JS HTML

Reactivity

Routing

Iron-Router

Router.map(function () {

this.route('dashboard', {

path: '/'dashboard',

waitOn: function () {

}

});

});

Making unique links for team pages

Publications & Subscriptions

How it works?

Meteor.publish(‘teamsData’,function

(){

return Teams.find({});

});

this.subscribe(‘teamsData’)

Server Client

Adding publication’s and subscriptions to TeamSync

Sessions

Session.set(‘loggedIn’,false);

Session.get(‘loggedIn’);

Improving User Experience of TeamSync with sessions

Meteor Accounts

Adding twitter Authentication to our TeamSync App

Allow/Deny

Securing our TeamSync App with allow deny callbacks

Teams.allow({

insert: function (userId,tournaments)

{

if(Meteor.user())

return true;

else

return false;

}

});

Deploying TeamSync