Tính năng bỏ phiếu

13

Percentage Translated

In this chapter, you will:

  • Xây dựng một hệ thống mà người dùng có thể bỏ phiếu cho bài viết.
  • Xếp hạng bài viết bằng việc bỏ phiếu bài viết "tốt nhất".
  • Học cách viết một Spacebar helper.
  • Học về bảo mật dữ liệu trong Meteor.
  • Tìm hiểu một số xem xét thú vị về hiệu năng của MongoDB.
  • Bây giờ trang của chúng ta đã trở nên ngày một nổi tiếng hơn, và việc tìm ra đường dẫn tốt nhất nhanh trong trở nên rắc rối.

    Chúng ta có thể xây dựng một hệ thống xếp hạng phức tạp với karma, điểm phân dã dựa theo thời gian, và nhiều thứ khác nữa (phần lớn được cài đặt trong Telescope, người anh lớn của Microscope). Nhưng cho ứng dụng của chúng ta, chúng ta sẽ giữ cho mọi thứ thật đơn giản và chỉ đánh giá bài viết bởi số lượng phiếu bầu nó nhận được.

    Hãy bắt đầu bằng việc cho người dùng một cách để bình chọn.

    Mô hình dữ liệu

    Chúng ta sẽ lưu một danh sách upvoter cho mỗi bài viết để có thể biết có hiển thị button upvote tới người dùng, cũng như là để tránh người dùng bình chọn hai lần

    Sự riêng tư dữ liệu & Publications

    Chúng ta sẽ publish những danh sách này tới tất cả người dùng, nó cũng sẽ tự động làm cho dữ liệu được truy cập từ console trình duyệt.

    Đây là một vấn đề về sự riêng tư dữ liệu phát sinh từ cách mà collection hoạt động. Ví dụ, liệu chúng ta có muốn mọi người có thể tìm ra ai đã bình chọn cho bài viết của họ? Trong trường hợp của chúng ta, làm điều đó thực ra không mang lại hậu quả gì, nhưng việc nhận thức ra vấn đề đó cũng rất quan trọng.

    Chúng ta cũng sẽ dùng bất chuẩn hoá cho tổng số upvoter của mỗi bài viết để dễ dàng truy cập được con số đó. Vậy nên chúng ta sẽ thêm vào hai thuộc tính cho bài viết, upvotersvotes. Hãy bắt đầu bằng việc thêm vào dữ liệu tĩnh:

    // Fixture data
    if (Posts.find().count() === 0) {
      var now = new Date().getTime();
    
      // create two users
      var tomId = Meteor.users.insert({
        profile: { name: 'Tom Coleman' }
      });
      var tom = Meteor.users.findOne(tomId);
      var sachaId = Meteor.users.insert({
        profile: { name: 'Sacha Greif' }
      });
      var sacha = Meteor.users.findOne(sachaId);
    
      var telescopeId = Posts.insert({
        title: 'Introducing Telescope',
        userId: sacha._id,
        author: sacha.profile.name,
        url: 'http://sachagreif.com/introducing-telescope/',
        submitted: new Date(now - 7 * 3600 * 1000),
        commentsCount: 2,
        upvoters: [], 
        votes: 0
      });
    
      Comments.insert({
        postId: telescopeId,
        userId: tom._id,
        author: tom.profile.name,
        submitted: new Date(now - 5 * 3600 * 1000),
        body: 'Interesting project Sacha, can I get involved?'
      });
    
      Comments.insert({
        postId: telescopeId,
        userId: sacha._id,
        author: sacha.profile.name,
        submitted: new Date(now - 3 * 3600 * 1000),
        body: 'You sure can Tom!'
      });
    
      Posts.insert({
        title: 'Meteor',
        userId: tom._id,
        author: tom.profile.name,
        url: 'http://meteor.com',
        submitted: new Date(now - 10 * 3600 * 1000),
        commentsCount: 0,
        upvoters: [], 
        votes: 0
      });
    
      Posts.insert({
        title: 'The Meteor Book',
        userId: tom._id,
        author: tom.profile.name,
        url: 'http://themeteorbook.com',
        submitted: new Date(now - 12 * 3600 * 1000),
        commentsCount: 0,
        upvoters: [], 
        votes: 0
      });
    
      for (var i = 0; i < 10; i++) {
        Posts.insert({
          title: 'Test post #' + i,
          author: sacha.profile.name,
          userId: sacha._id,
          url: 'http://google.com/?q=test-' + i,
          submitted: new Date(now - i * 3600 * 1000 + 1),
          commentsCount: 0,
          upvoters: [], 
          votes: 0
        });
      }
    }
    
    server/fixtures.js

    Như thường lệ, dừng ứng dụng đang hoạt động, chạy lệnh meteor reset, khởi động lại ứng dụng và tạo một tài khoản mới. Hãy chắc chắn rằng hai thuộc tính này được khởi tạo khi bài viết đã được tạo:

    //...
    
    var postWithSameLink = Posts.findOne({url: postAttributes.url});
    if (postWithSameLink) {
      return {
        postExists: true,
        _id: postWithSameLink._id
      }
    }
    
    var user = Meteor.user();
    var post = _.extend(postAttributes, {
      userId: user._id, 
      author: user.username, 
      submitted: new Date(),
      commentsCount: 0,
      upvoters: [], 
      votes: 0
    });
    
    var postId = Posts.insert(post);
    
    return {
      _id: postId
    };
    
    //...
    
    collections/posts.js

    Template bình chọn

    Đầu tiên, chúng ta thêm vào một button upvote cho bộ phận bài viết và hiển thị biến đếm upvote trong metadata:

    <template name="postItem">
      <div class="post">
        <a href="#" class="upvote btn btn-default"></a>
        <div class="post-content">
          <h3><a href="{{url}}">{{title}}</a><span>{{domain}}</span></h3>
          <p>
            {{votes}} Votes,
            submitted by {{author}},
            <a href="{{pathFor 'postPage'}}">{{commentsCount}} comments</a>
            {{#if ownPost}}<a href="{{pathFor 'postEdit'}}">Edit</a>{{/if}}
          </p>
        </div>
        <a href="{{pathFor 'postPage'}}" class="discuss btn btn-default">Discuss</a>
      </div>
    </template>
    
    client/templates/posts/post_item.html
    The upvote button
    The upvote button

    Sau đó, chúng ta gọi đến server Method upvote khi người dùng bấm vào button:

    //...
    
    Template.postItem.events({
      'click .upvote': function(e) {
        e.preventDefault();
        Meteor.call('upvote', this._id);
      }
    });
    
    client/templates/posts/post_item.js

    Cuối cùng, chúng ta quay trở lại file lib/collections/posts.js và thêm vào Meteor Method phía server để upvote bài viết:

    //...
    
    Meteor.methods({
      post: function(postAttributes) {
        //...
      },
    
      upvote: function(postId) {
        check(this.userId, String);
        check(postId, String);
    
        var post = Posts.findOne(postId);
        if (!post)
          throw new Meteor.Error('invalid', 'Post not found');
    
        if (_.include(post.upvoters, this.userId))
          throw new Meteor.Error('invalid', 'Already upvoted this post');
    
        Posts.update(post._id, {
          $addToSet: {upvoters: this.userId},
          $inc: {votes: 1}
        });
      }
    });
    
    //...
    
    lib/collections/posts.js

    Commit 13-1

    Added basic upvoting algorithm.

    Method này khá là dễ hiểu. Chúng ta thực hiện một số đoạn kiểm tra có tính chất bảo vệ để chắc chắn rằng người dùng đã đăng nhập và bài viết thực sự tồn tại. Sau đó chúng ta kiểm tra thêm lần nữa là người đã bình chọn cho bài viết rồi hay chưa, nếu họ chưa thì tăng biến bình chọn thêm một và thêm người dùng đó vào danh sách upvoter.

    Bước cuối cùng này khá là thú vị, như chúng ta đã vừa dùng một vài toán tử đặc biệt của Mongo. Còn nhiều thứ có thể học hỏi được, nhưng hai thứ sau khá là hữu ích: $addToSet thêm một mục dữ liệu vào một mảng thuộc tính miễn là nó chưa tồn tại, và $inc đơn giản tăng một trường số nguyên.

    Tính điều chỉnh giao diện người dùng

    Nếu như một người dùng chưa đăng nhập, hoặc đã từng upvote cho bài viết, họ sẽ không thể bình chọn thêm lần nữa. Để phản ánh điều này trong UI, chúng ta sẽ dùng một helper để thêm vào thuộc tính class CSS disabled với button upvote.

    <template name="postItem">
      <div class="post">
        <a href="#" class="upvote btn btn-default {{upvotedClass}}"></a>
        <div class="post-content">
          //...
      </div>
    </template>
    
    client/templates/posts/post_item.html
    Template.postItem.helpers({
      ownPost: function() {
        //...
      },
      domain: function() {
        //...
      },
      upvotedClass: function() {
        var userId = Meteor.userId();
        if (userId && !_.include(this.upvoters, userId)) {
          return 'btn-primary upvotable';
        } else {
          return 'disabled';
        }
      }
    });
    
    Template.postItem.events({
      'click .upvotable': function(e) {
        e.preventDefault();
        Meteor.call('upvote', this._id);
      }
    });
    
    client/templates/posts/post_item.js

    Chúng ta đã thay đổi class từ .upvote sang .upvotable, vì vậy đừng quên thay đổi bộ điều khiển sự kiện bấm chuột.

    Greying out upvote buttons.
    Greying out upvote buttons.

    Commit 13-2

    Grey out upvote link when not logged in / already voted.

    Tiếp theo, có thể bạn đã nhận ra là bài viết với một bình chọn được dán nhãn “1 votes”, vì vậy hãy dành thời gian để biến thành số nhiều nhãn này một cách thích hợp. Số nhiều có thể là một quá trình xử lý phức tạp, nhưng bây giờ chúng ta chỉ làm theo một cách đơn giản nhất. Chúng ta sẽ tạo một helper Spacebar chung mà có thể dùng ở nhiều nơi:

    UI.registerHelper('pluralize', function(n, thing) {
      // fairly stupid pluralizer
      if (n === 1) {
        return '1 ' + thing;
      } else {
        return n + ' ' + thing + 's';
      }
    });
    
    client/helpers/spacebars.js

    Helper chúng ta đã tạo trước đó được gắn chặt với template nó áp dụng vào. Nhưng bằng việc sử dụng UI.registerHelper, chúng ta tạo một helper toàn cục mà có thể dùng trong bất kỳ template nào:

    <template name="postItem">
    
    //...
    
    <p>
      {{pluralize votes "Vote"}},
      submitted by {{author}},
      <a href="{{pathFor 'postPage'}}">{{pluralize commentsCount "comment"}}</a>
      {{#if ownPost}}<a href="{{pathFor 'postEdit'}}">Edit</a>{{/if}}
    </p>
    
    //...
    
    </template>
    
    client/templates/posts/post_item.html
    Perfecting Proper Pluralization (now say that 10 times)
    Perfecting Proper Pluralization (now say that 10 times)

    Commit 13-3

    Added pluralize helper to format text better.

    Bạn bây giờ sẽ thấy “1 vote”.

    Thuật toán bình chọn thông minh hơn

    Đoạn code upvote của chúng ta trông khá tốt, nhưng chúng ta cần phải làm tốt hơn nữa. Trong method upvote, chúng ta tạo ra hai lệnh gọi Mongo: một để gắn với bài viết và một để cập nhật nó.

    Có hai vấn đề với việc này. Đầu tiên, nó không hiệu quả theo nghĩa chúng ta phải tới cơ sở dữ liệu hai lần. Nhưng quan trọng hơn, nó dẫn đến một cuộc đua điều kiện. Chúng ta đang đi theo thuật toán như sau:

    1. Lấy bài viết từ cơ sở dữ liệu.
    2. Kiểm tra xem người dùng đã bỏ phiếu hay chưa.
    3. Nếu chưa, bỏ phiếu cho người dùng đó.

    Điều gì sẽ xảy ra nếu người dùng bỏ phiếu cho bìa viết với bước 1 và 3? Đoạn code hiện tại của chúng ta mở cửa cho người dùng có thể bỏ phiếu hai lần cho cùng một bài viết. Rất biết ơn là Mongo cho phép chúng ta gộp bước 1-3 vào trong cùng một lệnh Mongo:

    //...
    
    Meteor.methods({
      post: function(postAttributes) {
        //...
      },
    
      upvote: function(postId) {
        check(this.userId, String);
        check(postId, String);
    
        var affected = Posts.update({
          _id: postId, 
          upvoters: {$ne: this.userId}
        }, {
          $addToSet: {upvoters: this.userId},
          $inc: {votes: 1}
        });
    
        if (! affected)
          throw new Meteor.Error('invalid', "You weren't able to upvote that post");
      }
    });
    
    //...
    
    collections/posts.js

    Commit 13-4

    Better upvoting algorithm.

    Điều đang được nói đến là “tìm tất cả bài viết với id này và người dùng này chưa bỏ phiếu, sau đó thay đổi chúng theo cách này”. Nếu người dùng chưa bỏ phiếu, dĩ nhiên là nó sẽ tìm bài viết với id đó. Mặt khác, nếu như người dùng đã bỏ phiếu, câu truy vấn sẽ không khớp với bất kỳ tài liệu nào, và do đó không có gì diễn ra.

    Đền bù độ trễ

    Giả dụ bạn cố ăn gian và gửi một bài viết tới đầu danh sách bằng việc đổi số lượng bình chọn của bài viết:

    > Posts.update(postId, {$set: {votes: 10000}});
    
    Browser console

    (postId là id của một bài viết)

    Hàng rào chắn này có thể được xây dựng với callback deny() (trong collections/posts.js) và lập tức có tác dụng.

    Nhưng nếu như bạn nhìn kỹ hơn, bạn có thể đã nhận ra sự đền bù độ trễ trong hành động. Nó có thể rất nhanh, nhưng bài viết sẽ nhảy lên vị trí đầu trong một khoảng thời gian trước khi trở lại đúng vị trí của nó.

    Điều gì đã diễn ra? Trong collection cục bộ Posts, update được áp dụng mà không có trở ngại gì. Điều này xảy ra tức thì, nên bài viết sẽ lên đầu danh sách. Trong khi đó, trên server, update bị từ chối. Nên sau đó một chút (đo bằng mili giây nếu bạn chạy ứng dụng Meteor trên chính máy của mình), server sẽ trả về lỗi, bảo là collection cục bộ phải đổi lại giá trị.

    Kết quả là: trong khi chờ đợi cho server trả lời, giao diện người dùng không thể tránh khỏi việc tin tưởng collection cục bộ. Ngay khi server trở lại và từ chối việc sửa đổi, giao diện người dùng phản ánh lại điều đó.

    Xếp hạng bài viết trang ngoài

    Bây giờ chúng ta đã có một điểm số cho mỗi bài viết dựa trên số lượng bình chọn, hãy cùng hiển thị danh sách bài viết tốt nhất. Để làm điều này, chúng ta sẽ thấy làm thế nào để quản lý hai subscription riêng biệt đối với collection bài viết, và tạo template postList tổng quát hơn một chút.

    Để bắt đầu, chúng ta muốn có hai subscription, một cho thứ tự sắp xếp. Thủ thuật ở đây là cả hai subscription sẽ subscribe tới cùng publish posts, chỉ khác biệt về tham số.

    Chúng ta cũng sẽ tạo hai route mới là newPostsbestPosts, truy cập được từ URLs /new/best (dĩ nhiên là cùng với /new/5/best/5).

    Để làm điều này, chúng ta sẽ mở rộng PostsListController thành hai controller là NewPostsListControllerBestPostsListController. Điều này giúp chúng ta tạo ra cùng chọn lựa route cho cả homenewPosts, bằng việc đưa cho chúng ta NewPostsListController đơn lẻ để kế thừa. Thêm vào đó, nó cũng là minh hoạ tốt cho việc thể hiển Iron Router có thể mềm dẻo như thế nào.

    Vì vậy hãy cùng thay đổi thuộc tính sắp xếp {submitted: -1} trong PostsListController bằng this.sort, là thứ sẽ được cung cấp bởi NewPostsListControllerBestPostsListController:

    //...
    
    PostsListController = RouteController.extend({
      template: 'postsList',
      increment: 5, 
      postsLimit: function() { 
        return parseInt(this.params.postsLimit) || this.increment; 
      },
      findOptions: function() {
        return {sort: this.sort, limit: this.postsLimit()};
      },
      subscriptions: function() {
        this.postsSub = Meteor.subscribe('posts', this.findOptions());
      },
      posts: function() {
        return Posts.find({}, this.findOptions());
      },
      data: function() {
        var hasMore = this.posts().count() === this.postsLimit();
        return {
          posts: this.posts(),
          ready: this.postsSub.ready,
          nextPath: hasMore ? this.nextPath() : null
        };
      }
    });
    
    NewPostsController = PostsListController.extend({
      sort: {submitted: -1, _id: -1},
      nextPath: function() {
        return Router.routes.newPosts.path({postsLimit: this.postsLimit() + this.increment})
      }
    });
    
    BestPostsController = PostsListController.extend({
      sort: {votes: -1, submitted: -1, _id: -1},
      nextPath: function() {
        return Router.routes.bestPosts.path({postsLimit: this.postsLimit() + this.increment})
      }
    });
    
    Router.route('/', {
      name: 'home',
      controller: NewPostsController
    });
    
    Router.route('/new/:postsLimit?', {name: 'newPosts'});
    
    Router.route('/best/:postsLimit?', {name: 'bestPosts'});
    
    lib/router.js

    Chú ý rằng hiện tại chúng ta có nhiều hơn là một route, chúng ta đang lấy đi logic nextPath ra khỏi PostsListController và cho vào NewPostsController cũng như BestPostsController vì đường dẫn sẽ trở nên khác biệt trong cả hai trường hợp.

    Thêm vào đó, khi chúng ta sắp xếp bởi votes, chúng ta có một sự sắp xếp theo sau bằng việc submit tem thời gian và _id để chắc chắn rằng thứ tự sắp xếp được đặc tả.

    Với controller mới tạo, chúng ta có thể an toàn thoát khỏi route postsList trước đó. Chỉ cần xoá đoạn code sau:

     Router.route('/:postsLimit?', {
      name: 'postsList'
     })
    
    lib/router.js

    Chúng ta cũng sẽ thêm đường dẫn vào header:

    <template name="header">
      <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navigation">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="{{pathFor 'home'}}">Microscope</a>
          </div>
          <div class="collapse navbar-collapse" id="navigation">
            <ul class="nav navbar-nav">
              <li>
                <a href="{{pathFor 'newPosts'}}">New</a>
              </li>
              <li>
                <a href="{{pathFor 'bestPosts'}}">Best</a>
              </li>
              {{#if currentUser}}
                <li>
                  <a href="{{pathFor 'postSubmit'}}">Submit Post</a>
                </li>
                <li class="dropdown">
                  {{> notifications}}
                </li>
              {{/if}}
            </ul>
            <ul class="nav navbar-nav navbar-right">
              {{> loginButtons}}
            </ul>
          </div>
        </div>
      </nav>
    </template>
    
    client/templates/includes/header.html

    Và cuối cùng, chúng ta cũng cần phải cập nhật bộ điều khiển sự kiện xoá bài viết:

      'click .delete': function(e) {
        e.preventDefault();
    
        if (confirm("Delete this post?")) {
          var currentPostId = this._id;
          Posts.remove(currentPostId);
          Router.go('home');
        }
      }
    
    client/templates/posts_edit.js

    Với tất cả mọi thứ đã xong xuôi, bây giờ chúng ta có thể đạt tới một danh sách bài viết tốt nhất:

    Ranking by points
    Ranking by points

    Commit 13-5

    Added routes for post lists, and pages to display them.

    Header tốt hơn

    Bây giờ khi mà chúng ta đã có hai danh sách bài viết, có thể sẽ khó để biết được danh sách nào đang được hiển thị. Bởi vậy hãy cùng nhìn lại header để làm cho điều này hiển nhiên hơn. Chúng ta sẽ tạo một file quản lý header.js và tạo helper mà sử dụng đường dẫn hiện tại trong các mục dữ liệu trên navigation:

    Lý do chúng ta muốn phụ trợ route nhiều tên là vì cả route homenewPosts (đang trỏ đến //new lần lượt) mang đến cùng một template. Nghĩa là activeRouteClass của chúng ta nên đủ thông minh để tạo ra tag <li> hoạt động trên cả hai trường hợp.

    <template name="header">
      <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navigation">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="{{pathFor 'home'}}">Microscope</a>
          </div>
          <div class="collapse navbar-collapse" id="navigation">
            <ul class="nav navbar-nav">
              <li class="{{activeRouteClass 'home' 'newPosts'}}">
                <a href="{{pathFor 'newPosts'}}">New</a>
              </li>
              <li class="{{activeRouteClass  'bestPosts'}}">
                <a href="{{pathFor 'bestPosts'}}">Best</a>
              </li>
              {{#if currentUser}}
                <li class="{{activeRouteClass 'postSubmit'}}">
                  <a href="{{pathFor 'postSubmit'}}">Submit Post</a>
                </li>
                <li class="dropdown">
                  {{> notifications}}
                </li>
              {{/if}}
            </ul>
            <ul class="nav navbar-nav navbar-right">
              {{> loginButtons}}
            </ul>
          </div>
        </div>
      </nav>
    </template>
    
    client/templates/includes/header.html
    Template.header.helpers({
      activeRouteClass: function(/* route names */) {
        var args = Array.prototype.slice.call(arguments, 0);
        args.pop();
    
        var active = _.any(args, function(name) {
          return Router.current() && Router.current().route.getName() === name
        });
    
        return active && 'active';
      }
    });
    
    client/templates/includes/header.js
    Showing the active page
    Showing the active page

    Tham số helper

    Chúng ta vẫn chưa dùng mô hình đặc biệt đó cho tới bây giờ, nhưng cũng giống như bất kỳ tag Spacebar nào khác, tag của template helper có thể nhận tham số.

    Và trong khi bạn dĩ nhiên có thể gửi tên đặc biệt cho hàm của bạn, bạn cũng có thể gửi số không được đặc tả và cả tham số không tên và lấy lại chúng bằng việc gọi object arguments bên trong hàm.

    Trong trường hợp cuối cùng này, có thể bạn muốn chuyển object arguments tới một mảng JavaScript ổn định và sau đó gọi pop() để tránh hash bị thêm vào cuối Spacebar.

    Cho mỗi khoản mục của navigation, helper activeRouteClass lấy danh sách tên của route, và sau đó dùng helper any() của Underscore để xem nếu như có route nào vượt qua bài kiểm tra (ví dụ URl tương ứng của nó bằng với đường dẫn hiện tại).

    Nếu như bất kỳ route nào khớp với đường dẫn hiện tại, any() sẽ trả về true. Cuối cùng, chúng ta sẽ lợi dụng mô hình boolean && string của JavaScript khi mà false && myString trả về false nhưng true && myString trả về myString.

    Commit 13-6

    Added active classes to the header.

    Bây giờ người dùng đã có thể bình chọn thời gian thực, chúng ta sẽ thấy các khoản mục nhảy lên và nhảy xuống trang chủ khi thứ hạng thay đổi. Nhưng chẳng phải là sẽ tuyệt hơn nữa nếu như có một cách để làm mềm tất cả những hoạt hoạ đó hay sao?