Meteor CRASH COURSE

Get started with Meteor

and

Build a simple chat application

The complete source code is available here

github.com/timbrandin/meteor-crash-course

start it with "meteor --port=4000"

Install Meteor

On Mac, Ubuntu or similar in the terminal run

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

On Windows (with a virtual machine) follow

win.meteor.com

On Windows (with Nitrous.io)

Tobias will assist you

or follow

discovermeteor.com/blog/meteor-nitrous

Install Meteorite

Why?

Well we're going to use packages
from atmospherejs.com later.

How?

npm install -g meteorite

How on Nitrous.io?

help.nitrous.io/meteor-app

Create a project

Goals

Create a projekt

mrt create chatapp

Run meteor, and open it in the browser

localhost:3000

Create a client/ folder
Create a collections/ folder
Create a server/ folder
Create a public/ folder for images, if you want to
Remove other files, except the smart.json

Create a Template

Tasks (step3)

Create a template in a main.html file the client folder

<body>{{> messages}}</body>
<template name="messages"></template>

Create a collection in the collections/ folder (messages.js)

Messages = new Meteor.Collection('messages');

Add some example chat messages from the console

With a name and message
Messages.insert({name: 'example-name', message: 'hello world'});

Check for your message with: Messages.find().fetch()
Render the message(s) in the template (main.js)
messages: function() { return Messages.find(); }
})

Add ACCOUNTS

Tasks (step4)

Add accounts-base, accounts-password, accounts-ui, accounts-ui-unstyled and render the login-box
If advanced, try to use the accounts-entry and iron-router to login and sign-up.
Clear the database, with meteor reset
Create an account and sign in, and do that in another browser window as well, or on another computer.
Now add new messages

with a "user" from Meteor.user()._id
a message
and a timestamp with for example "(+new Date)" as before

Render the username

Tasks (step5)

Setup users to be able to add a username on signup
In the message template render the username from the user with a helper function.
Optional:

Add the package gravatar from atmosphere to render profile pictures instead of the username.

Tips:

docs.meteor.com/#accounts_config
Inspect Meteor.users in the console
Log "this" to the console from a helper that should render the username.

Create a message form

Tasks (step6)

Create a template for adding messages
Render the message form below the messages.
On submit on the form add the message, user and timestamp like we did through the console

Create chat Rooms

Tasks (step7)

Add iron-router[, and {{> yield}} to main.html (but not in 0.8.3)]
Create a chat room collection
Create some chat rooms through the console
Create a home route (in router.js in the client folder)

In the home route render the chat-rooms

Create a chat-room route and render the messages template as before, but select only the messages tagged with your chat-room_id.
Change the message form so that it adds the chat-room id to each collection.

Tips: Router.current() gives the current route your at.

Style your chat application

Tasks (step8)

Add css so that messages are right and left aligned, depending on who typed the message
Create a bubble around each message
Bottom align the message form to add make it big.
Make the gravatar round or style it cool

More ideas:

Add a like button to reply with
Add a ... (typing response) message
Show how many users there are in each chatroom
Show an notice of empty chatroom if no messages
Scroll to bottom when new messages are added