Meteor Lesson #2

In this presentation can see some Meteor stuffs. Can learn how to install meteor and learn to code some basic things. This presentation based on www.discovermeteor.com

Transcript

1. Meteor Lessons #2
2. Review from Previous Lesson • Publication/Subscription • Remote Procedure Call • Oplog Tailing • Minimongo • Blaze/Spacebars
3. Learning by Creating • MeteorLessons ◦ A list of Lessons ▪ Each Lesson has • Title • Date - Time • Location • Mini Description ◦ Registration/Login System ◦ Any logged in user can leave a feedback/comment ◦ Only admin can add new lesson and edit previous meteorlessons.meteor.com github.com/mstamos/meteorlessons
4. What we will learn... • Install Meteor • Add/Remove Package • File Structure • Templates • Storing Data • Publication/Subscription
5. Let’s Get Start
6. • Install Meteor by execute the below command into your terminal • For Windows download from https://install.meteor.com/windows Getting Started curl https://install.meteor.com | sh
7. Creating a Simple App > meteor create meteorlessons > cd meteorlessons > ls .meteor meteorlessons.css meteorlessons.html meteorlessons.js
8. Running a Simple App > meteor => Started proxy. => Started your app. => App running at: localhost:3000
9. Running a Simple App
10. What is a package • Small isolated unit which add an additional functionality into Meteor app
11. Five package basic types • The Meteor core itself • Regular Meteor packages ◦ Maintained by Meteor Development Group (like accounts-ui) • Third-party packages ◦ you can find them at atmospherejs.com • Local packages • NPM packages
12. List of app’s packages • Typing the below command > meteor list • Move to file ◦ /yourMeteorProject/.meteor/packages meteor-platform autopublish insecure Even Meteor is a package
13. Adding/Remove a Package Let’s say you want to add Bootstrap into your app you just write the command • meteor add twbs:bootstrap ◦ twbs the package author’s username ◦ bootstrap is the package name • meteor remove twbs:bootstrap
14. File Structure • /server: loaded on the server only • /client: loaded on the client only • /tests: not loaded, use it for local test • Everything else runs on both the client and the server • Your static assets (font, images etc) go in the /public
15. Order of Loading • Files in /lib are loaded before anything else • Any main.* file is loaded after everything else • Everything else loads in alphabetical order based on the file name.
16. Deploy • At meteor.com > meteor deploy myapp.meteor.com • First time you need to create a Meteor account
17. Templates
18. Templates • Two parts ◦ Html Template ◦ Template Helpers
19. Templates - HTML part You can create a new template by writing <template name=”templateName”> //something here </template> The HTML part is just a dumb template with placeholders for variables
20. client/templates/lessons/lessonList.html client/templates/lessons/lessonItem.html
21. Spacebars • Meteor’s templating system • Is simply HTML with the addition of three things: ◦ inclusions (also called “partials”) ◦ expressions ◦ block helpers
22. client/templates/lessons/lessonList.html client/templates/lessons/lessonList.js Block Helpers Template Helpers
23. client/templates/lessons/lessonList.html client/templates/lessons/lessonItem.html Inclusion Expressions
24. Spacebars Block Helpers Are special tags that control the flow of the template, such as {{#each}} … {{/each}} {{#if}} … {{/if}}
25. Spacebars Inclusions Simply tell Meteor to replace the inclusion with the template of the same name {{> templateName }}
26. Spacebars Expressions Either call a property of the current object, or the return value of the template helper as defined in the current template’s manager {{ title }}
27. Template Helpers Are responsive to do the heavy lifting by assigning a value to each variable which is into template file
28. Live Code Session Let’s download MeteorLessons > git clone https://github.com/mstamos/meteorlessons.git > cd meteorlessons Checkout into chapter 2.1 and run the app > git checkout chapter2-1 > meteor
29. Hot Code Reload Meteor tracks all the files within your project directory, and automatically refreshes your browser for you whenever it detects a modification to one of them
30. Storing Data
31. Storing Data • The browser’s memory ◦ things like JavaScript variables are stored in the browser’s memory ◦ local to the current browser tab • The browser’s storage ◦ using cookies or Local Storage • The server-side database
32. Collections • What is it? ◦ A special data structure that takes care of storing your data in the permanent server-side MongoDB database • Where to put them? ◦ Inside the lib directory to secure that are always defined first ◦ executed both to the client and to the server
33. Client-Side Collections • called MiniMongo • local, in-browser cache of the real Mongo collection • a subset of your data ◦ offers very quick access to this data
34. Collections lib/collections.js Lessons = new Mongo.Collection(“lessons”);
35. Live Code Session Checkout into chapter 3.1 and run the app > git checkout chapter3-1 > meteor
36. Server-Side Collections meteor mongo > db.lessons.insert({title: "A new lesson"}); > db.polessonssts.find(); { "_id": ObjectId(".."), "title" : "A new lesson"};
37. Client-Server Communication > db.posts.find(); {title: "A new post", _id: ObjectId("..")}; The Mongo Shell ! Posts.findOne(); {title: "A new post", _id: LocalCollection._ObjectID}; First browser console ! Posts.find().count(); 1 ! Posts.insert({title: "A second post"}); 'xxx' ! Posts.find().count(); 2 ! db.posts.find(); {title: "A new post", _id: ObjectId("..")}; {title: "A second post", _id: 'yyy'}; The Mongo Shell ! Posts.find().count(); 2 Second browser console
38. Publication/Subscription
39. The Olden Days
40. Publication/Subscription • client subscribes into a real-time data and get notifications • three types of notifications ◦ added ◦ changed ◦ removed
41. Publication/Subscription Server Client subscribe: chatMessages added: message 1 added: message 2 ready . . . added: transaction 3
42. Autopublish • A package which is enabled when create a Meteor app • The goal of autopublish is to make it very easy started coding your Meteor app • automatically mirroring all data from the server on the client
44. Publishing All Lessons @DB // on the server Meteor.publish('lessons', function() { return Lessons.find(); });
45. Publishing // on the server Meteor.publish('lessons', function() { return Lessons.find({done: false}); });
46. Subscribing // on the server Meteor.publish(‘lessons’, function() { return Lessons.find({flagged: false}); }); // on the client Meteor.subscribe('lessons');
47. Subscribing // on the server Meteor.publish('lessons', function(title) { return Lessons.find({done: false, title: title}); }); // on the client Meteor.subscribe('lessons', 'First Lesson');
48. Subscribing
49. Subscribing - Browser Data // on the client Template.lessonsList.helpers({ lessons: function(){ return Lessons.find({title: 'First Lesson', date: '5/5/2015'}); } });
51. Live Code Session • meteor reset ◦ completely clears out the Mongo database Checkout into chapter 3.3 and run the app > git checkout chapter3-3 > meteor
52. Review • What Meteor is • We create an app • Add package • File Structure • Template - Spacebars • Collections • Publish/Subscribe
53. Lesson Based on https://www.discovermeteor.com/
54. Questions Ooo...no! It’s not time to go! Its time for questions!
55. meteor-exercise-2 Requirements: User should be able to create an account • in order to create an account he must insert ◦ username ◦ email ◦ password • User could type a message into an input text box (html tag) and publish it by pressing a submit button • Anyone could write a message ◦ If user is logged in, then his username should be appeared next to his name, otherwise “Anonymous”. Github link: https://github.com/mstamos/meteor-lesson-exercise-2
56. Thank you!