Meteor Workshop

1. Meteor
Developing TeamSync (Real Time Collaboration Tool)
Febin John James
Boutline

2. TeamSync Demo

3. Workshop
Introduction to Meteor
Hands on Mini Mongo
Create a prototype with static data
Wire up with database
Add authentication
Deploy the app

4. 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. Routing
Learn about routing in meteor
Create team pages with Unique Url’s
6.Publications & Subscriptions
How publications & subscriptions work
Adding 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 language
Your first template
Template Manager’s
TeamSync Prototype with static data

5. Introduction to Meteor

6. Before Meteor

7. Meteor
Database Real-time Sync User Interface

8. Why Meteor?
Easy to learn
Up and running in hours
You are already familiar with javascript, aren’t you?

9. Meteor Packages
Core Packages Smart Packages Atmosphere Packages

10. Hands on Mini Mongo

11. Features of MongoDB
No Schema
High Performance
High Scalability

12. MongoDB CRUD Operations
Type “meteor mongo”
Let’s begin

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

14. Starting Meteor

15. Creating a meteor app
meteor create teamsync
cd teamsync
meteor

16. Meteor app folder structure
client
server
public
lib
collections

17. Templates

18. A meteor app
Server Side(JS Files) Client Side(JS Files) Templates(HTML Files)

19. Your first template

20. {{>helloWorld}}
<template name=”helloWorld”>
<h1> Hello World </h1>
</template>

21. 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

22. Collections

23. Collections for TeamSync
Teams Collection Mission’s Collection Status Collection
Messages Collection

24. Teams = new Meteor.Collection(‘Teams’);
Teams.insert({})
Teams.update({})
Teams.remove({})
Teams.find({})

25. Server-Side Collections

26. Client-Side Collections

27. Let’s wire the static templates with database

28. Handlebars

29. JS HTML
Template.teamsBoard.teams = function()
{
return Teams.find();
}
{{#each teams}}
<li>
{{name}}
</li>
{{/each}}

30. Reactivity

31. Routing

32. Iron-Router

33. Router.map(function () {
this.route('dashboard', {
path: '/'dashboard',
waitOn: function () {
}
});
});

34. Making unique links for team pages

35. Publications & Subscriptions

36. How it works?

37. Server Client
Meteor.publish(‘teamsData’,function(){
return Teams.find({});
});
this.subscribe(‘teamsData’)

38. Adding publication’s and subscriptions to TeamSync

39. Sessions

40. Session.set(‘loggedIn’,false);
Session.get(‘loggedIn’);

41. Improving User Experience of TeamSync with sessions

42. Meteor Accounts

43. Adding twitter Authentication to our TeamSync App

44. Allow/Deny

45. Securing our TeamSync App with allow deny callbacks

46. Teams.allow({
insert: function (userId,tournaments)
{
if(Meteor.user())
return true;
else
return false;
}
});

47. Deploying TeamSync