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
Top Related