Emily Stark at Stanford ACM Hackathon
-
Upload
meteorjs -
Category
Technology
-
view
335 -
download
0
description
Transcript of Emily Stark at Stanford ACM Hackathon
![Page 1: Emily Stark at Stanford ACM Hackathon](https://reader035.fdocuments.us/reader035/viewer/2022073116/554f72c3b4c905c8088b56e3/html5/thumbnails/1.jpg)
,Getting Started with
Meteor
Emily Stark
![Page 2: Emily Stark at Stanford ACM Hackathon](https://reader035.fdocuments.us/reader035/viewer/2022073116/554f72c3b4c905c8088b56e3/html5/thumbnails/2.jpg)
What is Meteor and who am I?
Meteor is a full-stack JavaScript framework for quickly creating fast, realtime web
applications.
I’m Emily: Stanford CS ’11, Meteor core dev, @estark37
![Page 3: Emily Stark at Stanford ACM Hackathon](https://reader035.fdocuments.us/reader035/viewer/2022073116/554f72c3b4c905c8088b56e3/html5/thumbnails/3.jpg)
Step 1: install Meteor
• On Mac and Linux:
$ curl https://install.meteor.com/ | sh
• Try http://nitrous.io for Windows
![Page 4: Emily Stark at Stanford ACM Hackathon](https://reader035.fdocuments.us/reader035/viewer/2022073116/554f72c3b4c905c8088b56e3/html5/thumbnails/4.jpg)
docs.meteor.com
![Page 5: Emily Stark at Stanford ACM Hackathon](https://reader035.fdocuments.us/reader035/viewer/2022073116/554f72c3b4c905c8088b56e3/html5/thumbnails/5.jpg)
Step 2: basic Meteor commands
meteor create <app name>
meteor help and meteor help <command>
Inside your app directory:
meteor run
meteor mongo
meteor reset
![Page 6: Emily Stark at Stanford ACM Hackathon](https://reader035.fdocuments.us/reader035/viewer/2022073116/554f72c3b4c905c8088b56e3/html5/thumbnails/6.jpg)
Step 3: scaffolding
git clone https://github.com/estark37/acmhn.git
![Page 7: Emily Stark at Stanford ACM Hackathon](https://reader035.fdocuments.us/reader035/viewer/2022073116/554f72c3b4c905c8088b56e3/html5/thumbnails/7.jpg)
Step 4: the MongoDB API
Leaders
A collection (sort of like a table in a SQL database)
Leaders.insert({name: “Foo”, votes: 0});
Inserts a new document (sort of like a row)
![Page 8: Emily Stark at Stanford ACM Hackathon](https://reader035.fdocuments.us/reader035/viewer/2022073116/554f72c3b4c905c8088b56e3/html5/thumbnails/8.jpg)
Step 4: the MongoDB API
Leaders.find();
A cursor representing all the documents in the collection
Leaders.find({ name: “Foo” })
A cursor representing all documents with name equal to “Foo”
Leaders.findOne({ name: “Foo” })
Returns a single document with name equal to “Foo”
![Page 9: Emily Stark at Stanford ACM Hackathon](https://reader035.fdocuments.us/reader035/viewer/2022073116/554f72c3b4c905c8088b56e3/html5/thumbnails/9.jpg)
Step 4: the MongoDB API
Leaders.update({name: “Foo”}, {$set: {votes: 1}});
Update all documents with name “Foo” by setting the number of votes to 1
Leaders.update({name: “Foo”}, {$inc: {votes: 1}});
Update all documents with name “Foo” by incrementing the votes by 1
![Page 10: Emily Stark at Stanford ACM Hackathon](https://reader035.fdocuments.us/reader035/viewer/2022073116/554f72c3b4c905c8088b56e3/html5/thumbnails/10.jpg)
Step 5: add voting
• Add upvote/downvote buttons in the “leader” template.
• Add a click event:
Template.leader.events({
‘click .upvote’: function (evt) {...}
});
• You can use the MongoDB API in your click handler!
![Page 11: Emily Stark at Stanford ACM Hackathon](https://reader035.fdocuments.us/reader035/viewer/2022073116/554f72c3b4c905c8088b56e3/html5/thumbnails/11.jpg)
Step 6: add new items
• Add a form in a new template
• Add an event handler for submitting the form:
Template.newItem.events({
‘submit .upvote’: function (evt) {...}
});
![Page 12: Emily Stark at Stanford ACM Hackathon](https://reader035.fdocuments.us/reader035/viewer/2022073116/554f72c3b4c905c8088b56e3/html5/thumbnails/12.jpg)
Step 7: Meteor methods
Should all clients be able to write anything to the database? No.
meteor remove insecure
Meteor.methods({
foo: function () { ... }})
Meteor.call(‘foo’)
![Page 13: Emily Stark at Stanford ACM Hackathon](https://reader035.fdocuments.us/reader035/viewer/2022073116/554f72c3b4c905c8088b56e3/html5/thumbnails/13.jpg)
Step 8: the Meteor package system
meteor list
meteor list --usingmeteor add accounts-ui
meteor add accounts-passwordhttps://atmosphere.meteor.com for
community packages
![Page 14: Emily Stark at Stanford ACM Hackathon](https://reader035.fdocuments.us/reader035/viewer/2022073116/554f72c3b4c905c8088b56e3/html5/thumbnails/14.jpg)
Step 9: authentication and authorization
• Make it so that only logged-in users can vote on items or add new ones.
• this.userId inside methods
• {{loginButtons}} in templates
![Page 15: Emily Stark at Stanford ACM Hackathon](https://reader035.fdocuments.us/reader035/viewer/2022073116/554f72c3b4c905c8088b56e3/html5/thumbnails/15.jpg)
Step 10: publish and subscribe
Right now, all users can read all data.
meteor remove autopublishMeteor.publish()
Meteor.subscribe()to control which data is sent to which clients.
![Page 16: Emily Stark at Stanford ACM Hackathon](https://reader035.fdocuments.us/reader035/viewer/2022073116/554f72c3b4c905c8088b56e3/html5/thumbnails/16.jpg)
More
• www.eventedmind.com
• www.discovermeteor.com
• https://github.com/meteor/telephone-pictionary
• https://www.meteor.com/learn-meteor
• Interested in starting a Meteor South Bay meetup? Email [email protected]
• Come to Meteor Devshop 11! http://www.meetup.com/Meteor-SFBay