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 Nitrous.io)
Tobias will assist you
or follow
Install Meteorite
Why?
Well we're going to use packages
from atmospherejs.com later.
from atmospherejs.com later.
How?
npm install -g meteorite
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
Meteor CRASH COURSE
By Tim Brandin
Meteor CRASH COURSE
- 3,392
