As per the overview: Meteor.js to build multi-user, interactive web apps

As per the Course Info

• After each lesson, there are practice quizzes
• Practice quizzes don’t count towards your grade for the course
• Grading breakdown:
  • Each quiz (x4) = 10%
  • Each peer assessment (x2) = 30%
  • Pass mark = 65%

• Applications in Javascript, CSS, and HTML – no other server-specific language required
• Uses an adapted version of the handlebars template library (used in a previous course in the specialization)
• Provides easy-to-install dev environment that includes a web server and a database server
• Provides an easy-to-use packaging system
• Provides reactive data sources with a distributed data model so that apps will feel snappy to multiple users
• Includes the capability to generate native iOS and Android apps from the same Javascript code base
• Implements an isomorphic model so that you can run the same code base on the server and the client
• Apps can be deployed on any server with Node.js and MongoDB support

• Get up and running with Meteor.js : install, get first app up and running, and check it out in the web browser; then explore templates; then add user interactivity

• Meteor website

• I downloaded the code
• I installed meteor via the instructions on the meteor webpage
• I ran meteor npm install
• I ran meteor update --patch
• I ran meteor et voila! Site available at localhost:3000

• Previous courses in this specialization have worked on sites for single users
• Review of the stack so far: { HTML, CSS, Javascript + Templates, Data } -> Web Browser
• New addition to the stack: the Server (with Meteor.js)

• Simple, 2-question quiz

• https://www.meteor.com/install

• Start by installing meteor, create a starter application, and run the application
• You can create a folder to create your application within; in there, you’d use: meteor create <application_name>
• If you use meteor create, it’ll create a boilerplate application

• Simple, 2-question quiz

• https://www.meteor.com/tutorials/blaze/templates

• Finding out what the boilerplate files out, and how to implement templates the Meteor way
• Template = SpaceBars, derived from HandleBars
• I never knew that you could use open ./ to open Finder in the current directory your terminal is in
• What does {{> hello}} mean? Should review handlebars. {{ triggers the template; > hello means find the hello template and render it
• <template name="hello"> ... </template>
• You can use the inspector in chrome to see exactly what was sent to the browser
• In meteor, a “public” folder in the web application folder will hold static assets

• Simple, 2-question quiz

• Javascript -> HTML template
• Tests for code running in client or in server
• Template helpers send data to template
• e.g. var image_data = { img_src: "laptops.jpg", img_alt: "some laptops" }; Template.images.helpers(image_data);
• Then you could use {{> images}} and <img src="img_src" alt="img_alt" />
• To pass an array in, you’d need to do something like Template.images.helpers({images:image_data})
• Iteration via {{#each images }} ... {{/each}}

• Simple, 2-question quiz

• https://atmospherejs.com/ : a catalog for meteor packages

• Additional functionality provided via packages
• Like brew, package, etc.
• We want to install the Bootstrap package!
• meteor search . will download and display the latest list of packages
• meteor search twbs will display packages that match the twbs terms (like the Twitter Bootstrap package)
• Packages are added on a per-application basis
• In our application, we use meteor add twbs:bootstrap
• We don’t need to edit anything, bootstrap will automatically be used
• Meteor checks your HTML and won’t run the app unless it’s valid

• Simple, 2-question quiz

• Basic interactivity!
• JS file where the “serious work” takes place
• Add class to tag like class=”js-image”; might want to prefix interactive classes with js to indicate they’re not layout based
• Template.images.events({'click .js-image':function(event){ ... }});
• You can bind data and event listeners in templates
• event.target lets you access the HTML tag in the DOM
• You can use jQuery-style e.g. $(event.target).css("width", "50px");

• Simple, 2-question quiz

• Brief recap

• More substantial 10-question quiz
• I filled the form out, but realized that I couldn’t submit it without paying

• I haven’t upgraded, so I won’t be able to submit the assignment
• I DID, however, DO the assignment
• I downloaded Meteor on my Mac via curl https://install.meteor.com/ | sh
• I created my app via meteor create my_first_app, the resulting text in the console was:

        Created a new Meteor app in 'my_first_app'.   

        To run your new app:                          
        cd my_first_app                             
        meteor npm install                          
        meteor                                      
                
        If you are new to Meteor, try some of the learning resources here:
        https://www.meteor.com/learn                
                
        meteor create --bare to create an empty app.  
        meteor create --full to create a scaffolded app.
          

• I ran the app via meteor (from within the app directory) and viewed it in my web browser by navigating to localhost:3000
• It was crashing initially, I used meteor npm install --save babel-runtime and restarted my app with meteor et voila!
• I edited the h1 tag in my application’s client/main.html file as per the instructions and reloaded my browser

• I haven’t upgraded, so I won’t be able to review my peers

• 3 key operations in using databases: insertion, update, and deletion
• Using mongodb (built in with Meteor.js)

• http://docs.meteor.com/api/collections.html

• I downloaded the two zip files

• Meteor apps are slightly different from most other web applications with respect to data models
• Each user has their own local copy of the data: people will see data changes in pseudo-realtime
• Changes by a user are propagated back to the central database (reactive)
• Then propagations go back out to all other users

• Simple, 2-question quiz

• See the theory in practice: store image data in a database
• In mongo, data are called collections
• e.g. Images = new Mongo.Collection("images");
• e.g. console.log(Images.find().count());
• We can put starter data in the database
• We can create a new file called startup.js
• In startup.js, we check if we’re running on the server, if there’s nothing in the collection, we’ll add some starter data (but only when the app is starting up)
• if( Meteor.isServer ){ Meteor.startup(function(){ etc. }); }
• meteor reset from the command line will wipe all of your databases (!careful!)

• Simple, 2-question quiz

• The lecturer DRY’d out the previous startup.js code : loop to add images to collections
• Next up : allow template to access the data
• In image_share.js : we use Template.images.helpers({images:Images.find()})
• Lecturer modified CSS file to style thumbnail (min & max height = 500px)
• Lecturer went to template in image_share.html and added a “delete” button; class=”js-del-image btn btn-warning”
• The “js-del-image” lets us know that we need to tie that to an event handler
• In image_share.js, we enable the delete functionality via:

        Template.images.events({
        'click .js-image':function(event){
        $(event.target).css("width", "50px");
        },
        'click .js-image-del':function(event){
        var image_id = this._id; // this refers to the data the template was displaying; _id is a unique identifier auto-added by mongo
        console.log( image_id );
        Images.remove({ "_id" : image_id }); // this is a mongo filter
        }
        })
          

• We want to use some jQuery to better indicate to the user what’s happening when they click delete
• We add the ID into the template : <div class="col-xs-12 col-md-3" id="{{_id}}">
• Now, here’s how we hide the component :

        $("#" + image_id ).hide('slow', function(){
        Images.remove({ "_id" : image_id });
        }
          

• Note that we move the remove command into the hide function

• Simple, 2-question quiz

• http://docs.meteor.com/#/full/find

• Let user rate images by setting the number of stars
• Sort images so that highest-rated images are shown first
• 1st : HTML to template (for rating widget); is there a package on atmospherejs? Yup!
• To add the package, we use: meteor add barbatus:stars-rating
• Then we add a sub-template below our image (the package has given us the template for free)

        <p>
        {{>starsRating mutable=true class="js-rate-image" id=_id }}
        </p>
          

• _id is the unique id that mongo gives to the image; the star sub-template is within the image template, so we have access to the data from the images
• Now we need to add the star ratings to the database
• We’ll add an event listener

        Template.images.events({
        ...
        'click .js-rate-image':function(event){
        console.log("you clicked a star");
        var rating = $(event.currentTarget).data("userrating");
        console.log(rating);
        var image_id = this.id;
        console.log(image_id);
        Images.update({_id:image_id}, {$set: {rating:rating}})); // Images is the mongodb collection
        // Images.update takes two arguments: the ID of the image you want to change and the property / value that you want to change
        }
        })
          

• this refers to the data in the template
• Now let’s sort the images by rating in this client portion

        Images.find({}, {sort:{rating:-1}});
          

• Simple, 2-question quiz

• Allow users to add content directly into database
• Add form as new template:

        <body>
        {{> image_add_form }}
        ...
        </body>

        <template name="image_add_form">
        <form class="js-add-image">
        <input type="text" name="img_src" />
        <input type="text" name="img_alt" />
        <button class="btn btn-success">save</button>
        </form>
        </template>
          

• Next step, create an event listener so that the server does something when the user submits the form

        Template.image_add_form.events({
        'submit .js-add-image':function(event){
        var img_src, img_alt;
        img_src = event.target.img_src.value; // not jQuery because it's a form so we have access to the data more readily
        img_src = event.target.img_alt.value;

        Images.insert( { img_src:img_src, img_alt:img_alt, createdOn:new Date() } );
        console.log("src: " + img_src + " alt: " + img_alt );
        return false;
        }
        });
          

• By default, submit will overwrite console (return false prevents this)
• From the user perspective, it might be confusing because the image went to the bottom of the list; we’ll use createdOn to help with this

        Template.images.helpers({ 
        images: Images.find({}, 
        {sort:{createdOn: -1, rating: -1}})
        });
          

• The form should look a little bit nicer and be a little more interactive
• We’ll convert the form to sit in a bootstrap modal so that he user can hit a button and the form will appear, then disappear when the user’s done with it

        <template name="image_add_form">
        <div class="modal fade" id="image_add_form">
        <div class="modal-dialog">
        <div class="modal-content">
                <div class="modal-header">
                <div class="modal-title">
                </div>
                </div>
                <div class="modal-body">
                <!-- form goes here -->
                </div>
                <div class="modal-footer">
                <button class=""btn btn-warning" data-dismiss="modal">cancel</button>
                </div>
        </div>
        </div>
        </div>
        </template>
          

• This starts hidden, so we need to add a button to the images template

        <template name="images">
        <button class="btn btn-success js-show-image-form">add image</button>
        ...
        </template>

        Template.image_add_form.events({

        ...

        'submit .js-add-image':function(event){
        ...
        $("#image_add_form").modal('hide'); // or show?!
        return false;

        }

        'click .js-show-image-form:function(event){
        $("#image_add_form").modal('show');
        }
        })
          

• Should go onto the bootstrap site to style the form a bit better

• Simple, 2-question quiz

• Recap of week 2!

• More substantial 10-question quiz
• I filled the form out, but still can’t submit it without paying

• Project will be called siteace
• Project will be used in weeks 3 and 4
• Project will become a site that allows users to add web pages they find interesting
• Task this week = complete the implementation of some event code so that websites are saved to the database, edit a template to make website links click-able
• I downloaded and unzipped the starter code
• I ran meteor npm install --save babel-runtime in the folder
• No errors!
• I ran meteor in the folder
• I haven’t upgraded, so I won’t be able to submit the assignment
• I DID, however, DO the assignment
• My main.js modification looked like this:

        'click .js-add-site':function(event){
        var url = $('#url_input').val();// get the form value using jquery...
        var site = {"url":url};// create a simple object to insert to the collection
        console.log("You need to put some code in here that calls insert on the Websites collection");
        Websites.insert({site:site});
        return false;
        }
          

• My main.html modification looked like this:

        <li><a href="http://{{site.url}}">{{site.url}}</a></li>
          

I think I completed this assignment a little incorrectly:

1. After adding the insert command, sites weren’t automatically showing up in the list, I think this is because I added site, which has a url sub-field instead of just adding url directly
2. If you add sites without http[s], then it’ll automatically try to create a local link. I fixed this by prefixing the href with http. That’s brittle.

• I haven’t upgraded, so I won’t be able to review my peers

• Authentication!

• I downloaded the two zip files

• Allows a user to log in, and customize the experience for them
• Standard feature for most websites
• A few packages: most basic form = store user accounts in local database
• meteor add accounts-ui accounts-password
• accounts-ui : templates for typical user behaviors (log in, reminders)
• accounts-password : handles database aspect (user records)
• In image_share.html, we can add one of the templates we get with accounts-ui

        {{> loginButtons }}
          

• We also get things like emails (on the test server, it’ll be printed to the console)

• Simple, 2-question quiz

• Housekeeping!
• Place login functionality in navbar

        <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">
        {{> loginButtons}}
        </div>
        </nav>
          

• navbar-default : basic styling
• navbar-fixed-top : will always be visible at the top of the page
• Make sure navbar doesn’t lay over things:

        body {
        padding-top: 60px;
        }
          

• Simple, 2-question quiz

• http://docs.meteor.com/#/full/meteor_user

• Dig deeper into user authentication
• We can display the username via something like:

        <h1>Welcome to image share, {{username}}!</h1>
          

• Doesn’t work, yet. Need to provide a template helper function. In image_js:

        Template.body.helpers({username:function(){
        if(Meteor.user){
        return Meteor.users().emails[0].address;
        } else {
        return "anonymous internet user";
        }
        }
        });
          

• The template helper will run twice: as soon as meteor can (in which case the user object won’t exist yet, so it’ll error); and after a user’s logged in, it’ll update that template
• The user will be able to see the anonymous internet user thing briefly
• Next we want to only display the add image button when the user’s logged in:

        {{#if currentUser}}
        <button class="btn btn-success js-show-image-form">add image</button>
        {{/if}}
          

• Normally, currentUser would have to be bound to a template, but Meteor binds it to every template for us

• Simple, 2-question quiz

• http://docs.meteor.com/api/accounts.html#Accounts-ui-config

• Modifying the user registration form with a username
• We can pass an argument into the account package to do so:

        Accounts.ui.config({
        passwordSignupFields: "USERNAME_AND_EMAIL"
        });
          

• Now we want to greet the user by their username instead of their email:

        Template.body.helpers({
        username: function(){
        if( Meteor.user ){
        return Meteor.user.username;
        } else {
        return "anonymous internet user";
        }
        }
        });
          

• Simple, 2-question quiz

• Attach a user account to an image so we know, for each image, which user uploaded it
• In image_share.js:

        Template.image_add_form.events({
        'submit .js-add-image':function(){
        var img_src, img_alt;

        img_src = event.target.img_src.value;
        img_alt = event.target.img_alt.value;

        if( Meteor.user ){
        Images.insert({
        img_src: img_src,
        img_alt: img_alt,
        createdOn: new Date(),
        createdBy: Meteor.user()._id;
        });
        }
        $("#image_add_form").modal("hide");
        return false;
        }
        });
          

• Javascript notion of truthy (e.g. non-false) and falsey (e.g. non-true, not usable data)
• Now, we want to make sure the user information has been added, so we’ll display it in the image template:

        <div class="thumbnail">
        ...
        <div class="caption">
        ...
        <p>User: {{getUser createdBy}}</p>
        ...
        </div>
        </div>
          

        Template.images.helpers({
        images:...
        getUser:function(user_id){
        var user = Meteor.users.findOne({ _id:user_id });
        if( user ){
        return user.username;
        } else {
        return "anon";
        }
        }
        });
          

• We access users differently than images – even though both are collections – because Meteor handles users slightly differently (security, etc.)

• Simple, 2-question quiz

• http://docs.mongodb.org/manual/reference/method/db.collection.find/
• http://docs.meteor.com/#/full/session

• Filter to control which images are being displayed (e.g. by a particular user)
• Make username click-able (in template)

        <div class="caption"> 
        ...
        <p>
        User: <a href="#" class="js-set-image-filter">{{getUser createdBy}}</a>
        </p>
        </div>
          

• Add event listener in Javascript

        Template.images.events({
        ...
        'click .js-set-image-filter':function(event){
        Session.set("userFilter", this.createdBy);
        }
        })
          

• Session is a reactive data source that allows us to store temporary variables in key-value pair format

        Template.images.helpers({
        ...
        images:function(){
        if( Session.get("userFilter") ){
        return Images.find({createdBy:Session.get("userFilter")}, {sort: {createdOn:-1, rating:-1}});
        } else  {
        return Images.find({}, {sort: {createdOn:-1, rating:-1}});
        }
        },
        ...
        })
          

• Simple, 2-question quiz

• No new techniques here: just more examples of previously used ones

• Simple, 2-question quiz

• Load data as needed
• Simplest way of implementing an infinite scroll in the image gallery
• Want to capture a scroll event from the browser; hard in the standard meteor way
• We’ll use some slightly hacky jQuery; we also want to limit the initial number of images we show:

        if (Meteor.isClient) {

        Session. set("imageLimit", 8);
        lastScrollTop = 0;

        $(window).scroll(function(event){
        var scrollTop = $(this).scrollTop();

        // test if we're near the bottom of the window
        if( $(window).scrollTop() + $(window).height() > $(document).height() - 100 ){
        // test if we are going down
        var scrollTop = $(this).scrollTop();
        if (scrollTop > lastScrollTop ) {
        Session.set("imageLimit", Session.get("imageLimit") + 4 );
        }
        lastScrollTop = scrollTop;
        }
        });
        }

        ...

        return Images.find({}, {sort:{createdOn: -1, rating: -1 }, limit:Session.get("imageLimit")});
          

• Simple, 2-question quiz

• Recap of week 3!

• More substantial 10-question quiz
• I filled the form out, but still can’t submit it without paying

• I downloaded and unzipped the starter code
• I ran meteor npm install --save babel-runtime in the folder
• I haven’t upgraded, so I won’t be able to submit the assignment
• I DID, however, DO the assignment
• I found the assignment very straightforward and not very challenging

• I haven’t upgraded, so I won’t be able to submit the assignment

• Find out how to deploy sites; “hack” into our own sites to examine security problems; implement security; routing

• I downloaded the two zip files

• As application grows, having all your code in one file becomes hard to maintain
• We can set up special folders which the framework knows about
• public folder used for public / static assets (e.g. images)
• client and server are two more folders that meteor knows about
• client folder would contain all of the info in the Meteor.isClient block
• server folder would contain all of the info in the Meteor.isServer block
• I think Meteor applications are set up like this by default now
• You can use shared that will have files in use on both (but it’s not a special folder by default)
• Collections are shared, so both client and server need access to them
• Other special folders:
  • private only server needs to see them and it needs to use the assets API to access them
  • tests is just a playground and it won’t be sent to the client or the server

• Simple, 2-question quiz

• Topic = basic security!
• Some examples of behavior that users shouldn’t have access to (e.g. using the Javascript console to delete all the images in the image database)

• Simple, 2-question quiz

• http://docs.meteor.com/#/full/allow

• Securing your application : the basics
• By default, Meteor puts a package in that helps you get up-and-running, but isn’t necessary for us
• We use meteor remove insecure to remove the “insecure” package
• By default, you’re then stopped from doing certain things with the database (e.g. adding pictures)
• We create a lib folder; things in lib will be run first; it’s run on BOTH the client and server
• We can put a collections.js file in there, along with security information:

        Images = new Mongo.Collection("images");

        // Set up security
        Images.allow({
        insert:function(userId, doc){
        if (Meteor.user()){
        doc.createdBy = userId; // force the image to be owned by the current user
        if( userId != doc.createdBy ){ 
        return false; }
        else {
        return true;
        }
        } else {
        return false;
        }
        },
        remove:function(userId, doc){
        if (Meteor.user()){
        return true;
        }
        }
        })
          

• Simple, 2-question quiz

• Cleaning up!
• E.g. server doesn’t need any CSS or HTML files, so we make sure they’re all in the client folder
• E.g. we can get rid of if (Meteor.isServer) if it’s in the server folder; ditto with client

• Simple, 2-question quiz

• https://github.com/iron-meteor/iron-router

• Adding a new feature: routing
• Routing allows you to control which components of the application are shown at any given time
• meteor add iron:router
• We can define different places that the user can visit in the application, and we can define different things that’ll be displayed at each point
• We’ll create templates to simplify things: e.g. for the navbar, etc:

        <template name="navbar">
        ...
        </template>
          

• The body tag will be empty; we’ll modify our routes

        Router.route('/', function() {
        this.render('navbar');
        });

        Router.route('/images', function() {
        this.render('images');
        });
          

• Next up, rendering multiple templates into a single page

• Simple, 2-question quiz

• Welcome page, single image, and back again using routing and templates
• In main.js:

        Router.configure({
        layoutTemplate: 'ApplicationLayout' // default template for layout is ApplicationLayout
        });

        Router.route('/', function() {
        this.render('welcome', { to: "main" });
        });

        Router.route('/images', function() {
        this.render('navbar', { to: "navbar" });
        this.render('images', { to: "main" });
        });

        Router.route('/image/:_id', function() {
        this.render('navbar', { to: "navbar" });
        this.render('image', { to: "main", data: function(){ return Images.findOne({_id:this.params._id}); }});
        });
          

        <template name="ApplicationLayout">
        {{> yield "navbar" }}
        {{> yield "main" }}
        </template>

        <template name="welcome">
        <div class="container">
        <div class="jumbotron">
        ...
        </div>
        </div>
        </template>

        <template name="image>
        <div class="container">
        <h2>{{img_alt}}</h2>
        <a href="/images"><img class="single-img" src="/{{img_src}}" /></a>
        </div>
        </template>
          

• Routes will make the browser back/forward buttons work properly

• Simple, 2-question quiz

• Recap of week 4!

• More substantial 9-question quiz
• I filled the form out, but still can’t submit it without paying

• I downloaded and unzipped the starter code
• I ran meteor npm install in the folder
• I haven’t upgraded, so I won’t be able to submit the assignment
• I DID, however, DO the assignment
• I found the assignment very straightforward and not very challenging

• I haven’t upgraded, so I won’t be able to submit the assignment