Meteor

Developing TeamSync (Real Time Collaboration Tool)

Febin John James

Boutline

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 accounts

Adding external login services

Adding twitter login

9.Allow Deny

Understand allow deny callbacks.

Securing TeamSync

10.Deployment

Deploying teamsync app.

4. Collections

Meteor Collections

Meteor Data Synchronization

Integrating collection with templates

Turning prototype into functional app

Reactivity

5.Publications & Subscriptions

How publications & subscriptions work

Adding publications to our prototype

6. Routing

Learn about routing in meteor

Create team pages with Unique Url’s

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 language

Your first template

Template Manager’s

TeamSync Prototype with static data

Introduction to Meteor

What is 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?

Installing Meteor

curl https://install.meteor.com | sh

npm install -g meteorite

// Only needed if you encounter any permission errors

sudo -H npm install -g meteorite

Meteor Packages

Core Packages Smart Packages Atmosphere Packages

Hands on Mini Mongo

It’s way better than SQL

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

server

public

lib

collections

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 template

teams board template

join team template

chat template

mission’s template

team update template

mission 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}}

{{>name}}

{{/each}}

JS HTML

Reactivity

Publications & Subscriptions

How it works?

Meteor.publish(‘teamsData’,function(){

return Teams.find({});

});

this.subscribe(‘teamsData’)

Server Client

Adding publication’s and subscriptions to TeamSync

Routing

Iron-Router

Router.map(function () {

this.route('dashboard', {

path: '/'dashboard',

waitOn: function () {

this.subscribe(‘teamsData’);

}

});

});

Making unique links for team pages

Sessions

Improving User Experience of TeamSync with sessions

Session.set(‘loggedIn’,false);

Session.get(‘loggedIn’);

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