Meteor Lesson #3

In this presentation can someone see how to add useraccount in a Meteor.js app and how to create routes. This presentation based on www.discovermeteor.com.

Transcript

1. Meteor Lessons #3
2. What we will learn... • Routers • Adding Users
3. Routers
4. Routes • What are routes? ◦ Routes are basically paths the user takes whic attached to code that will be triggered when a reaches the specific route. ◦ An example ▪ http://myapp.com/lessons/YX9U6 ▪ YX9U6 is MongoDB id for the post
5. Meteor Route Package • Iron Router ◦ A routing package that was conceived specifically for Meteor apps • Add Iron Router > meteor add iron:router
6. Mapping URLs to Templates Hard-coded
7. Mapping URLs to Templates • The {{ > yield }} template helper ◦ Define a special dynamic zone that will automatically render whichever template corresponds to the current route
9. client/main.html client/templates/application/layout.html
10. Configure Iron Router • Two important things ◦ We have told the router to use layout template as a default layout for all routes. ◦ We defined a new route named postList and mapped it to the root / path. lib/router.js Root Path Root Name Root Layout Template
11. Live Code Session Lets download Microscope > git clone https://github.com/mstamos/meteorlessons.git > cd meteorlessons Checkout into chapter 4.1 and run the app > git checkout chapter4-1 > meteor
12. waitOn lib/router.js
13. loadingTemplate lib/router.js client/templates/include/loading.html
14. Routing to A Specific Post Set up a route to display the details of a single post
15. Routing to A Specific Post The special :_id syntax tells the route two things • To match any route of the /lessons/xyz/ • To put whatever it finds in the “xyz” spot inside in _id property in the route’s params array client/templates/lessons/lessonPage.html lib/router.js
16. Routing Data • We find the appropriate post and pass it to the template • How do we find it? ◦ We make a query into Minimongo collection ◦ We use router’s params array lib/router.js
17. Live Code Session Checkout into chapter 4.3 and run the app > git checkout chapter4-3 > meteor
18. Post not Found client/templates/application/not_found.html lib/router.js
19. Adding Users
20. Adding Users • In Meteor account system is almost for free. • You can use > meteor add accounts-ui • Or for more bootstrap styling you can use > meteor add ian:accounts-ui-bootstrap-3 Simple templates to add login widgets to an app
21. Adding Users • The next package we need is > meteor add accounts-password A login service that enables secure password-based login.
22. Adding Accounts Helpers client/templates/application/layout.html
23. client/templates/includes/header.html
24. Adding Accounts Helpers
25. Live Code Session Checkout into chapter 5.1 and run the app > git checkout chapter5-1 > meteor
26. Review • Routers ◦ Install Iron Router ◦ Mapping URL ◦ Configure Iron Router • Adding Users ◦ Install accounts-ui and accounts-password ◦ Add login system to an app
27. Lesson Based on https://www.discovermeteor.com/
28. Questions Now its time to ask Obelix!
29. meteor-lesson-exercise-3 Requirements: • User should be able to create an account ◦ In order to create an account he must insert ▪ username ▪ email ▪ password • Users should be able to login via their facebook account • 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”. • Have to exist a link, called My Messages, which lead to path myapp.com/mymessages. ◦ At this path/page the user can see all his messages ◦ This link should be hidden when the user isn’t logged in Autocomplete package have to be removed and publish/subscribe to be used instead Github link: https://github.com/mstamos/meteor-lesson-exercise-3
30. Thank You! Now its time to run!