Xây dựng ứng dụng realtime với backbone.js
Backbone.js là một framework javascript thông dụng cho phép các nhà phát triển ứng dụng web để tạo ra dữ liệu động. Trong bài viết này, chúng ta sẽ xem làm thế nào mà backbone có thể kết hợp với Javascript SDK của PubNub để tạo một ứng dụng cho phép thay đổi thông báo theo giời ...
Backbone.js là một framework javascript thông dụng cho phép các nhà phát triển ứng dụng web để tạo ra dữ liệu động.
Trong bài viết này, chúng ta sẽ xem làm thế nào mà backbone có thể kết hợp với Javascript SDK của PubNub để tạo một ứng dụng cho phép thay đổi thông báo theo giời gian thực. Nói cách khác , chúng tôi sẽ xây dựng một ứng dụng sử dụng Backbone.js mà dữ liệu của model được cập nhật theo thời gian thực .
Sự kết hợp này cho phép các nhà phát triển để tạo ra một model hay collection Backbone có thể đồng bộ hóa với tất cả các client khác theo thời gian thực. Điều này sẽ làm cho ứng dụng Backbone tuyệt vời hơn khi được áp dụng trong các hệ thống như cộng tác, xã hội , hoặc bất kỳ loại hình giao diện đa người dùng.
Full source code project có ở đây
Ứng dụng này được xây dựng từ nguồn cảm hứng mang tên “Programmer Competency Matrix”, nó là một công cụ dùng để đánh giá năng lực của một người trong hệ thống, nó được biểu diễn dưới dạng một ma trận(ma trận tổ chức năng lực). Tôi quyết định áp dụng công cụ này để xây dựng ứng dụng PCM thu nhỏ dựa trên Backbone.ks và PubNub, nó cho phép người dùng:
- Tự đánh giá bản thân.
- Xem bản đánh giá của các người dùng khác.
- Nhận kết quả mới nhất khi có bất kì ai thay đổi đánh giá của họ.
các bạn có thể xem demo ở đây! Khi bạn điền vào PCM và submit kết quả. Các kết quả này được đồng bộ hóa trên tất cả các trình duyệt khác đã đăng ký vào cùng một kênh với bạn.
Ứng dụng này được xây dựng với các framework JavaScript sau:
- BackboneJS
- backbone localStorage
- PubNub Javascript SDK
Các giao diện người dùng cho ứng dụng này được bố trí theo dạng bảng. Các hàng sẽ hiển thị các thông số năng lực khác nhau (được xác định bởi tên trong cột đầu tiên) và các cột chỉ mức độ thành thạo. Vì vậy, mỗi ô trên bảng sẽ xác định một mức cụ thể về trình độ cho mõi loại năng lực.
Ứng dụng Backbone cần xác định Model để lưu trữ dữ liệu. Có hai model trong ứng dụng này đó là Stat và Key. Model Stat được sử dụng để lưu trữ các giá trị tổng hợp của tất cả các cấp độ năng lực còn model Key được sử dụng để lưu các lựa chọn của người dùng.
Hãy xem cách định nghĩa model dưới đây:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
// Define Backbone Stats model app.Stat = Backbone.Model.extend({ defaults: { stats: [[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0]] }, localStorage: new Backbone.LocalStorage("pcm-stat") }); //Defining Backbone Model for table cells app.Key = Backbone.Model.extend({ defaults: { key: [0, 0, 0, 0, 0, 0] }, localStorage: new Backbone.LocalStorage("pcm-matrix") }); |
Dữ liệu của model Stat được lấy từ PubNub khi ứng dụng bắt đầu chạy:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
connect: function() { pubnub.history({ channel: 'pcm-stats', count: 1, callback: function(m){ app.popOverView.model.set({stats: m[0][0]}); app.popOverView.model.save(); } }); }, |
Và, Key được cập nhật bất cứ khi nào người dùng nhấp chuột vào một ô trong bảng
|
1 2 3 4 5 6 7 8 |
updateKey: function (e) { var $cellIndex = $("td").index(e.target); var matrixKey = _.clone(this.model.get('key')); matrixKey[Math.floor($cellIndex / 5)] = $cellIndex % 5; this.model.save({key: matrixKey}); }, |
Người dùng tương tác với các View
Người dùng có thể tương tác với ứng dụng theo 1 trong các cách sau đây:
Tự đánh giá bản thân bằng cách chọn các mức điểm theo từng kĩ năng trong bảng.
Ứng dụng có một giao diện đơn giản giúp cho người dùng lựa chọn mức năng lực kĩ năng của mình. Điều này được xử lý bởi các event Backbone được định nghĩa như bên dưới.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 |
app.View = Backbone.View.extend({ el: '#mainview', events: { 'click td': 'updateKey', 'click #submit': 'checkAllRows', 'click #publish': 'onSubmit', 'click #alertClose': 'hideAlert' }, checkAllRows: function () { console.log('checkAllrowsTriggered!'); if(_.contains(this.model.get('key'), 0)) $('#alertModal').modal('show'); else $('#confirm').modal('show'); }, rowNotClicked: function () { _.contains(this.model.get('key'), 0); }, onSubmit: function() { this.updateStat(); this.publishNow(); this.events["click td"] = undefined; this.events["click button"] = undefined; this.delegateEvents(this.events); $('#confirm').modal('hide'); $('.navbar-text').removeClass('hidden'); $('button').addClass('hidden'); }, publishNow: function() {pubnub.publish({ channel : 'pcm-stats', message : app.popOverView.model.get('stats'), callback: function(m){console.log("sent!");} }); }, initialize: function () { this.model.on('all', this.render, this); $('.alert').hide(); $('#confirm').modal({ show: false}); this.render(); }, updateKey: function (e) { var $cellIndex = $("td").index(e.target); var matrixKey = _.clone(this.model.get('key')); matrixKey[Math.floor($cellIndex / 5)] = $cellIndex % 5; this.model.save({key: matrixKey}); }, addClass: function (cell) { var $cell = $("td:eq(" + cell + ")"); $cell.nextAll().removeClass("checked"); $cell.prevAll().addBack().addClass("checked"); }, render: function () { var matrixCell = this.model.get('key'); var cellKey = _.map(matrixCell, function(num, i){ return i * 5 + num; }); _.each(cellKey, this.addClass); }, updateStat: function() { var matrixCell = this.model.get('key'); var currentStat = _.clone(app.popOverView.model.get('stats')); _.map(currentStat, function (value, index){ ++value[matrixCell[index]-1]; }); app.popOverView.model.set({stats: currentStat}); app.popOverView.model.save(); }, hideAlert: function() { $('.alert').hide(); } }); |
Người dùng lưu bản kết quả đánh giá.
Khi người dùng đã chọn điểm số cho tất cả các thông số năng lực, người sử dụng có thể submit điểm của mình. Sau đó hiển thị điểm số tổng hợp của lần submit vừa rồi. Qua thông báo được gửi qua PubNub.
