Đây là kết quả trả về từ server khi ta gọi API:

1
2
3
4
5
6
7
8
9
10
11
12

POST /api/download
Request Headers:
----------------
Authorization: Bearer .... (Server của mình yêu cầu token này để xác thực user)
Response Header:
----------------
Content-Type: application/vnd.ms-excel
Content-Disposition: attachement; filename=report.xls

Đây là đoạn code mình xử lý để gọi đến API và lưu data trả về thành file trên máy tính:

1
2
3
4
5
6
7
8
9
10
11
12

var DownloadRestangular = Restangular.withConfig(function(RestangularConfigurer) {
  RestangularConfigurer.setFullResponse(true);
});
DownloadRestangular.all(url)
.withHttpConfig({responseType: 'arraybuffer'})
.post(postValue, params)
.then(function(res) {
    var filename = res.headers('Content-Disposition').match(/filename=(.*)/)[1];
    var file = new Blob([res.data], { type: res.headers('Content-Type') });
    saveAs(file, filename);
});

Trước tiên, ta cần cài đặt setFullResponse cho Restangular để lấy được thông tin headers từ đó ta mới có file type và file name.

Sau đó ta cần response trả về kiểu arraybuffer như vậy ta mới dùng được với thư viện FileSaver.js.

Cuối cùng là chuyển dữ liệu trả về sang Blob và lưu lại bằng hàm saveAs của FileSaver.

Tuy nhiên, cảm giác khi thấy thông báo chúc mừng hiện lên, được nghe những lời tổng kết của thầy Andrew Ng, thấy háo hứng, thú vị và phấn khích. Bởi vì đây là lần đầu sau bao lâu mình mới hoàn thành một điều gì đó khi đã theo đuổi nó trong một thời gian dài.

Tại sao lại như vậy?

Đây là những khóa học mình đã đăng ký tham gia trước đó.

Cả 10 khóa mà chẳng hoàn thành được một khóa nào, khóa cao nhất chỉ hoàn thành được gần 50%. Đó là do cái tính của mình, cái tính khi bắt đầu thì rất hứng thú, nhưng dần dần lại lười đi. Nên có nhiều dự định, cứ bắt đầu rồi âm thầm kết thúc. Để rồi, một thời gian sau nhìn lại mình lại cảm thấy tiếc, thấy bức rứt, thấy xấu hổ với bản thân vì đã không theo đuổi được đến cùng (theo như cái bài nào đó mình mới đọc, thì đó là bản thân mình đã trở thành nô lệ của lười nhác, khi phải gánh chịu những cảm xúc tiêu cực về bản thân). Không biết bạn nào đã từng có cảm giác như mình không.

Đến với khóa học Machine Learning lần này, mình đã áp dụng một phương pháp, để đưa bản thân vào khuôn khổ hơn (ít nhất là với khóa học này). Mình in ra một tờ lịch năm trên tờ giấy A4 để đánh dấu lại những ngày nào mình học, ngày nào không học, cứ mỗi tối mình kiểm tra lại và cập nhật lại tờ lịch.

Đây là, những ngày học và không học của mình:

Mỗi lần nhìn lên tờ lịch này, mình sẽ biết được mình đã học ngày nào, đã bỏ ngày nào và quan trong nhất nhìn những ngày bị đánh dấu [X] cái cảm giác nó khó chịu lắm. Vì thế mình càng hạn chế dấu X càng tốt.

Một cái nữa, mình dán tờ lịch ngay chỗ làm nên ngày nào nó cũng đập vào mắt mình, nhắc nhở mình, cho nên nhiều khi đi nhậu về, hơi mệt mệt định nghỉ rồi mà nghĩ đến phải đánh dấu X vào ngày đó cũng không đành, nên cố gắng ngồi học một chút cho đúng tiến độ, mặc dù ngày hôm sau vẫn phải coi lại bài đã qua. Nhưng như vậy nó cũng có tác dụng thúc ép mình phải tiếp tục ngay cả khi cảm thấy không hứng thú, cho đến khi nào hoàn thành thì thôi.

Và đây là kết quả của mình sau bao nhiêu cố gắng chiến đấu với bệnh lười của bản thân để thỏa mãn ham muốn tìm hiểu của mình.

Một cảm giác thật tuyệt!

Template string

Với chức năng này ta có thể tạo một bản mẫu cho chuỗi cho phép ta nhúng các biểu thức vào, và cũng có thể viết trên nhiều dòng. Chú ý là ta sẽ dùng dấu ` chứ không phải dấu ‘, dấu này ở ngay dưới phím Esc trên bàn phím.

Cách dùng

1
2
3
4

var country = 'vietnam';
var str = `Xin chao ${country}
phep tinh 1 + 2 = ${1+2}`;
console.log(str);

Kết quả

1
2

Xin chao vietnam
phep tinh 1 + 2 = 3

Destructuring assignment (Tách và gán)

Tách và gán là mình tự dịch ra thôi, chức năng này cho phép ta trích xuất dữ liệu từ mảng hoặc đối tượng gán vào các biến riêng lẽ.

Cách dùng

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

var arr = [1, 2, 3];
var [one, two, three] = arr;
console.log('one is', one);     // => one is 1
console.log('two is', two);     // => two is 2
console.log('three is', three); // => three is 3
// Lấy 1 phần của mảng
var [a, ...rest] = arr;
console.log(a);                 // => 1
console.log(rest);              // => [2,3]
var obj = {name: 'thach', age: 27};
var {name, age} = obj;
console.log('name is', name);  // => name is thach
console.log('age is', age);    // => age is 27

Lấy kết quả trả về từ hàm

1
2
3
4
5
6

function getTop2() {
    return ['hai', 'ha'];
}
var [p1, p2] = getTop2();
console.log(p1);    // hai
console.log(p2);    // ha

Gán cho một biến khác tên với thuộc tính của đổi tượng

1
2
3

var obj = {name: 'thach', age: 27};
var {name: n, age: a} = obj;
console.log(n, a);      // thach 27

Block scope với let

let cho phép ta tạo ra một biến được giới hạn trong phạm vi của block chứa nó. let khác với var ở chỗ, var tạo ra một biến có phạm vi toàn cục hoặc xuyên suốt một hàm. Để rõ hơn thì mình coi qua ví dụ so sánh giữa let và var.

1
2
3
4
5
6
7
8
9
10

if (true) {
    // Đây là 1 block của if
  var a = 'foo';
  let b = 'bar';
  console.log(a);       // foo
  console.log(b);       // bar
}
console.log(a);         // foo
console.log(b);         // Error: Uncaught ReferenceError: b is not defined

Như ta thấy ở ví dụ trên, biến b chỉ có thể dùng trong if-block mà không thể dùng bên ngoài được. Bây giờ ta tiếp tục ví dụ với hàm.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

function varFunc() {
  var x = 1;
  if (true) {
    var x = 2;
    console.log(x);         // 2
  }
  console.log(x);           // 2
}
function letFunc() {
  let y = 1;
  if (true) {
    let y = 2;
    console.log(y);         // 2
  }
  console.log(y);           // 1  
}
varFunc();
letFunc();

Khi ta let y = 2 bên trong if-block nó tạo ra một biến y mới không liên quan gì đến let y = 1 ở trên cả. cho nên sau if-block, y bên ngoài không bị thay đổi.

Dùng let với bất đồng bộ

Hãy xem ví dụ sau:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

for (var i = 0; i < 3; i ++) {
  setTimeout(function() {
    console.log('var', i);
  });
}
// var 3
// var 3
// var 3         
for (let i = 0; i < 3; i ++) {
  setTimeout(function() {
    console.log('var', i);
  });
}
// var 0
// var 1
// var 2

Nếu ta dùng var ở trên, sau khi 3 vòng lặp thực hiện xong, 3 dòng console.log bên trong setTimeout sẽ được thực thi, khi đó in ra giá trị i lúc này đã là 3 rồi, cho nên ta có 3 nội dung var 3 giống nhau.

Tuy nhiên nếu dùng let như ở dưới, mỗi vòng lặp tạo ra một biến i không liên quan gì đến nhau, cho nên ta có 3 nội dung in ra khác nhau.

Vì vậy, ta thấy dùng let sẽ giúp cho code rõ ràng hơn trong trường hợp này, tránh phải sai lầm không mong muốn.

Const

Coi về let rồi thì tranh thủ coi về const 1 chút luôn. const giúp ta định nghĩa một biến với giá trị không thể thay đổi.

1
2

const a = 'foo';
a = 'bar';     // Error: Uncaught TypeError: Assignment to constant variable.

Class

Khi trước để tạo một giả class trong js ta sẽ dùng function, như thế này:

1
2
3
4
5
6
7
8
9
10

function Person() {
    // ....
}
Person.prototype.hello = function() {
    console.log('hello');
}
var p1 = new Person();
p1.hello();     // hello

Nay với ES6, ta có class, giúp ta có thể tạo lớp, đối tượng, làm việc với kế thừa một cách đơn giản hơn.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

class Person {
    constructor (name) {
    this.name = name;
  }
  
  speak() {
    console.log('My name is', this.name);
  }
  
  // static method có thể được gọi mà không cần đến đối tượng của class
  static sayHello() {
    console.log('Hello');
  }
}
var p1 = new Person('Viet');
p1.speak();                 // My name is Viet
Person.sayHello();          // Hello

Tạo một class con với extends

Để tạo một class con của một class ta dùng extends.

1
2
3
4
5
6
7
8

class Teacher extends Person {
  speak() {
    console.log('My name is', this.name, 'I am a teacher');
  }
}
var p2 = new Teacher('Hai');
p2.speak();     // My name is Hai I am a teacher

Nếu trong lớp con có constructor thì ta phải gọi phương thức super() trước khi sử dụng this.

1
2
3
4
5
6
7
8
9
10
11
12
13

class Student extends Person {
  constructor(name, school) {
    super(name);
    this.school = school;
  }
  
  speak() {
    console.log('My name is', this.name, 'I am studying in', this.school);
  }
}
var p3 = new Student('Minh', 'ST');
p3.speak();     // My name is Minh I am studying in ST

Arrow functions

Một cách viết hàm mới, ngắn gọn hơn.

Dưới đây là ví dụ so sánh giữa cách viết cũ và mới.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// ES5
[1,2,3].map(function (num) { return num * 2; })
// => [2, 4, 6]
// ES6
[1,2,3].map((num) => { return num * 2; })
// => [2, 4, 6]
// Vì chỉ có 1 tham số num nên ta có thể bỏ dấu ngoặc đơn luôn
[1,2,3].map(num => { return num * 2; })
// => [2, 4, 6]
// Nhưng ở đây cũng chỉ có mỗi lệnh return nên ta có thể bỏ luôn dấu ngoặc nhọn và return
[1,2,3].map(num => num * 2)
// => [2, 4, 6]

Nếu như hàm có nhiều tham số, và có nhiều dòng lệnh hơn thì ta viết đầy đủ thế này:

1
2
3
4
5
6
7
8

[1,2,3].map((num, index) => {
  console.log(index);
  return num * 2;  
});
// 0
// 1
// 2
// => [2, 4, 6]

Trả về một object

Chú ý nếu muốn trả về một object ta không chỉ đơn giản dùng { key: value } được.

1
2
3
4
5

var func1 = () => { name: 'saysua' };
func1(); // undefined
var func2 = () => { name: 'saysua', age: 3 };
func2(); // Error: Uncaught SyntaxError

Lỗi ở đây là do, ở giữa cặp dấu ngoặc nhọn {} code sẽ được hiểu là một chuỗi các câu lệnh. Như ở func1, name được hiểu là 1 label chứ không phải là một key của object. (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/label)

Ta viết lại cho đúng như sau:

1
2
3
4
5

var func1 = () => ({ name: 'saysua' });
func1(); // => Object {name: "saysua"}
var func2 = () => ({ name: 'saysua', age: 3 });
func2(); // => Object {name: "saysua", age: 3}

Arrow function không tự động bind this

Nếu ở ES5 ta tạo một hàm mới, nó sẽ luôn tự tạo ra một giá trị this vì vậy code dưới đây sẽ chạy bị sai.

1
2
3
4
5
6
7
8
9

function Runner() {
  this.count = 1;
  setTimeout(function() {
    this.count ++;  //  this ở đây không phải là this ở trên nên this.count không tồn tại
    console.log(this.count);  // NaN
  }, 100);
}
var r = new Runner();

Ta sẽ thường xử lý bằng cách gán một biến that = this hoặc là bind(this) vào hàm bên trong.

1
2
3
4
5
6
7
8
9
10
11

function Runner() {
  var that = this;
  this.count = 1;
  setTimeout(function() {
    that.count ++;
    console.log(that.count);  // 2
  }, 100);
}
var r = new Runner();

Còn arrow function không tự động tạo giá trị this nên đoạn code sau sẽ chạy đúng như ta mong muốn.

1
2
3
4
5
6
7
8
9

function Runner() { 
  this.count = 1;
  setTimeout(() => {
    this.count ++;
    console.log(this.count);  // 2
  }, 100);
}
var r = new Runner();

Tuy nhiên, chính vì đặc tính này mà bạn cần phải chú ý khi sử dụng arrow function trong một số trường hợp, ví dụ:

1
2
3
4
5
6
7
8
9
10

var sum = {
  a: 1,
  b: 2,
  run: () => {
    console.log(this === window); // => true (this không phải là sum)
    return this.a + this.b; // NaN (nên this.a và this.b không có)
  }
}; 
sum.run();

Tổng kết

Mình thấy những tính năng mới của ES6 rất thú vị, giúp viết code nhanh và vui hơn, vẫn còn nhiều tính năng mới nữa nhưng mình chưa tìm hiểu hết được. Tuy nhiên một vài trường hợp cần phải sử dụng cẩn thận, kẻo nhanh quá lại hóa sai, không kiểm soát được các giá trị. Happy codding!

Nhưng nếu ta cần có thống kê chi tiết hơn về các truy cập này, như số lượt truy cập trong ngày, phân loại người dùng … thì file log này là chưa đủ. Cho nên, ta có thể đẩy những log này lên elastic search rồi từ đó dùng các công cụ thích hợp để phân tích.

Dưới đây là các bước mình đẩy log của nginx lên elastic search sử dụng logstash.

Cài đặt elastic search và logstash

Môi trường mình sử dụng ở đây là ubuntu, coi như nginx đã được cài đặt rồi.

• Cài đặt elastic search theo hướng dẫn sau: https://www.elastic.co/guide/en/elasticsearch/reference/5.0/deb.html
• Cài đặt logstash theo hướng dẫn sau: https://www.elastic.co/guide/en/logstash/current/installing-logstash.html#package-repositories

Chú ý: Phiên bản elastic search hiện tại yêu cầu java 1.8

Start elastic search và logstash

Từ terminal để khởi động hai dịch vụ trên ta chạy:

1
2

sudo service elasticsearch start
sudo service logstash start

Bản log của nginx

Dưói đây là một mẫu log của nginx

1

192.168.1.100 - - [01/Dec/2016:10:38:17 +0700] "GET / HTTP/1.1" 304 0 "-" "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.99 Safari/537.36"

Tạo 1 pattern cho logstash để phân tích mẫu log của nginx

Trong thư mục /usr/share/logstash/ tạo thư mục patterns, sau đó tạo file nginx (Chú ý là file, chứ không phải thư mục) trong thư mục patterns

1

sudo nano /usr/share/logstash/patterns/nginx

Nội dung file nginx như sau:

1

NGINX_ACCESS %{IPORHOST:remote_ip} - %{DATA:user_name} \[%{HTTPDATE:time}\] "%{WORD:request_action} %{DATA:request} HTTP/%{NUMBER:http_version}" %{NUMBER:response} %{NUMBER:bytes} "%{DATA:referrer}" "%{DATA:agent}"

Cấu hình logstash để đẩy log từ nginx lên elastic search

Tạo file nginx.conf trong thư mục /etc/logstash/conf.d/

1

sudo nano /etc/logstash/conf.d/nginx.conf

Nội dung file nginx.conf như sau:

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

input {
  file {
    type => "nginx"
    start_position => "beginning"
    path => [ "/var/log/nginx/*.log" ]
  }
}
filter {
  if [type] == "nginx" {
    grok {
        patterns_dir => "/usr/share/logstash/patterns"
        match => { "message" => "%{NGINX_ACCESS}" }
        remove_tag => ["_grokparsefailure"]
        add_tag => ["nginx_access"]
    }
    date {
      match => [ "time", "dd/MMM/YYYY:HH:mm:ss Z" ]
      locale => en
    }
    geoip {
      source => "remote_ip"
      target => "geoip"
    }
    useragent {
      source => "agent"
      target => "user_agent"
    }
  }
}
output {
  elasticsearch {
    index => "nginx_log_test"
    hosts => ["localhost:9200"] 
  }
}

Config lại quyền của file log để logstash có thể đọc được

1

chmod 644 /var/log/nginx/*.log

Kết quả

Bây giờ bạn thử truy cập vào trang web được phục vụ bởi server nginx của bạn, cứ mỗi lần bạn truy cập vào thì log của nginx sẽ được logstash đẩy lên elastic search.

Đây là kết quả khi mình search từ elastic search tại đường dẫn http://192.168.1.244:9200/nginx_log_test/_search?&scroll=1m&size=1000&pretty=true

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

{
  "_scroll_id" : "DnF1ZXJ5VGhlbkZldGNoBQAAAAAAAAAdFkhleEZWRFdPUmJXcnBqc3h0eUtGbWcAAAAAAAAAHBZIZXhGVkRXT1JiV3JwanN4dHlLRm1nAAAAAAAAABoWSGV4RlZEV09SYldycGpzeHR5S0ZtZwAAAAAAAAAeFkhleEZWRFdPUmJXcnBqc3h0eUtGbWcAAAAAAAAAGxZIZXhGVkRXT1JiV3JwanN4dHlLRm1n",
  "took" : 3,
  "timed_out" : false,
  "_shards" : {
    "total" : 5,
    "successful" : 5,
    "failed" : 0
  },
  "hits" : {
    "total" : 1,
    "max_score" : 1.0,
    "hits" : [
      {
        "_index" : "nginx_log_test",
        "_type" : "nginx",
        "_id" : "AVi4dhUNQ4OVFTpBmGks",
        "_score" : 1.0,
        "_source" : {
          "request" : "/",
          "request_action" : "GET",
          "agent" : "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.99 Safari/537.36",
          "geoip" : { },
          "user_name" : "-",
          "http_version" : "1.1",
          "message" : "192.168.1.100 - - [01/Dec/2016:10:38:14 +0700] \"GET / HTTP/1.1\" 304 0 \"-\" \"Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.99 Safari/537.36\"",
          "type" : "nginx",
          "tags" : [
            "nginx_access",
            "_geoip_lookup_failure"
          ],
          "path" : "/var/log/nginx/access.log",
          "referrer" : "-",
          "@timestamp" : "2016-12-01T03:38:14.000Z",
          "remote_ip" : "192.168.1.100",
          "response" : "304",
          "bytes" : "0",
          "@version" : "1",
          "host" : "ubuntu",
          "time" : "01/Dec/2016:10:38:14 +0700",
          "user_agent" : {
            "patch" : "2840",
            "os" : "Windows 10",
            "major" : "54",
            "minor" : "0",
            "name" : "Chrome",
            "os_name" : "Windows 10",
            "device" : "Other"
          }
        }
      }
    ]
  }
}

Bạn thấy đấy, log của nginx đã được phân tách và lưu đầy đủ trên elastic search. Thật tuyệt vời phải không?

• Di chuyển đến thư mục chứa file .sln
• Build code "C:\Program Files (x86)\MSBuild\14.0\Bin\msbuild.exe" SelfHost.sln /p:Configuration=Release (Hoặc là Debug)
• Chạy file đã build SelfHost\bin\Release\SelfHost.exe

Để thuận tiện cho những lần chạy sau, ta có thể tạo một file bat, khi nào cần chỉ cần click một phát là xong.

Với học không có giám sát, chúng ta biết được một ít không không có ý tưởng về kết quả sẽ như thế nào. Chúng ta được đưa cho dữ liệu và yêu cầu trả về cấu trúc của dữ liệu đó dựa vào mối quan hệ giữa các biến trong dữ liệu.

Ví dụ:

• Dựa vào dữ liệu về khách hàng của một công ty, chúng ta phân nhóm khách hàng để có thể thực hiện các chiến dịch bán hàng đặc biệt.
• Phân loại các nhóm thành viên trên mạng xã hội.
• Trong một bữa tiệc, ta có tập ghi âm thanh, ta có thể phân tích và tách các tạp âm để lọc ra âm thanh riêng của từng người.

Với học có giám sát (Supervised Learning), chúng ta được đưa một dữ liệu với kết quả đầu ra tương ứng đã biết trước, ta cần xây dựng mối quan hệ dữa đầu vào và đầu ra, để dự đoán kết quả đầu ra của các giá trị đầu vào khác.

Ví dụ, dự đoán giá nhà dựa vào vị trí, kích thước của căn nhà.

Học có giám sát được chia ra làm hai loại, regression (hồi quy) và classification (phân lớp).

• Loại hồi quy: ta cố gắng dự đoán kết quả dưới dạng liên tục.
• Loại phân lớp: ta cố gắng dự đoán kết quả dưới dạng rời rạc.

Ví dụ:

• Loại hồi quy:
  • Cho kết quả kiểm tra đầu vào một lớp học, dự đoán số học sinh lên lớp.
  • Dựa vào kích thước, màu sắc của quả dưa leo, dự đoán giá bán sản phẩm.
• Loại phân lớp:
  • Dựa vào kích thước, màu sắc của quả dưa leo, dự đoán có bán được hay không?
  • Cho thông tin khách hàng, dự đoán khách hàng mua sản phẩm hay không?

Tìm trên Coursera (mình đã học một khóa về Python trên này), có một khóa về ML do Andrew ng hướng dẫn, anh này mình thấy rất nổi tiếng về lĩnh vực ML, cấu trúc khóa học cũng rõ ràng, bắt đầu từ cơ bản.

Nên mình quyết định dừng việc theo dõi khóa học trên Udemy và tập trung vào khóa học trên Coursera trước (https://www.coursera.org/learn/machine-learning). Mình có coi qua các đánh giá thì khóa này vẫn còn thiếu vài phần Wish the course also covered decision trees, random forests and boosting algorithms. mà mấy phần này bên Udemy có. Nên sau khi hoàn thành khóa trên Coursera mình sẽ quay lại coi bên Udemy.

Bạn nào mới bắt đầu tìm hiểu về ML thì có thể cùng mình học trên Coursera nhé. Có 2 tùy chọn Free hoặc trả phí (Trả phí thì sau khi hoàn thành sẽ có chứng nhận.)

Phần mềm và ngôn ngữ

Đây là các phần mềm và ngôn ngữ mình cần phải cài đặt:

• Python https://www.python.org/
• R https://cran.r-project.org/bin/windows/base/
• R Studio https://www.rstudio.com/products/rstudio/download/
• Anaconda https://www.continuum.io/downloads

Sau khi cài Anacoda, ta sẽ có IDE spyder để viết và debug python code.

Còn RStudio dĩ nhiên là để viết R code rồi.

Tiền xử lý dữ liệu

Đây là dữ liệu mẫu cần được xử lý Data.csv

Trước khi xử lý dữ liệu ta cần phải sơ chế nó trước.

Xử lý phần dữ liệu bị thiếu

Ở đây, trong dữ liệu mẫu ô B8 và C6 bị thiếu giá trị, trong quá trình sơ chế ta có thể loại bỏ 2 hàng này đi, nhưng như vậy có thể nguy hiểm vì nó có thể chứa các giá trị quan trọng. Có một cách khác là ta sẽ lấy giá trị trung bình trong cột để áp dụng vào các ô bị thiếu.

Code python sử dụng thư viện pandas:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# Import libraries
import numpy as np
import matplotlib.pyplot as plt
import pandas as pd
# Import data
dataset = pd.read_csv('Data.csv')
X = dataset.iloc[:, :-1].values
# Missing data
from sklearn.preprocessing import Imputer
imputer = Imputer(missing_values='NaN', strategy='mean', axis=0)
imputer = imputer.fit(X[:, 1:3])
X[:, 1:3] = imputer.transform(X[:, 1:3])

Ở dòng 8, ta lấy X là mảng giá trị của tất cả các hàng và tất cả các cột trừ cột cuối (-1). Ta có giá trị X như sau:

1
2
3
4
5
6
7
8
9
10

array([['France', 44.0, 72000.0],
       ['Spain', 27.0, 48000.0],
       ['Germany', 30.0, 54000.0],
       ['Spain', 38.0, 61000.0],
       ['Germany', 40.0, nan],
       ['France', 35.0, 58000.0],
       ['Spain', nan, 52000.0],
       ['France', 48.0, 79000.0],
       ['Germany', 50.0, 83000.0],
       ['France', 37.0, 67000.0]], dtype=object)

Ở dòng 12, ta xác định các giá trị bị thiếu bằng missing_values='NaN', và thay thế chúng bằng giá trị trung bình strategy='mean' của cột axis=0.

Ta sẽ áp dụng nó cho hai cột 1 và 2 của X (cột đầu tiên là 0): X[:, 1:3] (vì giá trị cột được xác định trong khoảng nên ta phải dùng 1:3 chứ không phải 1:2)

Cuối cùng ta có X:

1
2
3
4
5
6
7
8
9
10

array([['France', 44.0, 72000.0],
       ['Spain', 27.0, 48000.0],
       ['Germany', 30.0, 54000.0],
       ['Spain', 38.0, 61000.0],
       ['Germany', 40.0, 63777.77777777778],
       ['France', 35.0, 58000.0],
       ['Spain', 38.77777777777778, 52000.0],
       ['France', 48.0, 79000.0],
       ['Germany', 50.0, 83000.0],
       ['France', 37.0, 67000.0]], dtype=object)

Các giá trị nan đã được thay thế bằng giá trị trung bình.

Code R

1
2
3
4
5
6
7
8
9
10
11
12
13

# Import data
dataset = read.csv('Data.csv')
# Missing data handler
dataset$Age = ifelse(is.na(dataset$Age),
                     ave(dataset$Age, FUN = function(x) mean(x, na.rm = TRUE)),
                     dataset$Age
                     )
dataset$Salary = ifelse(is.na(dataset$Salary),
                        ave(dataset$Salary, FUN = function(x) mean(x, na.rm = TRUE)),
                        dataset$Salary
                        )

Ở dòng 5, ta tính toán lại giá trị các ô trong cột Age, nếu ô không có giá trị is.na(dataset$Age), ta sẽ lấy giá trị trung bình của cột Age bằng hàm mean và bỏ qua các giá trị bị thiếu na.rm = TRUE (dòng 6), nếu ô có giá trị thì ta giữ nguyên nó dataset$Age (dòng 7).

Tổng kết

Như vậy là mình đã biết cách căn bản để xử lý dữ liệu thiếu bằng cách lấp vào các giá trị trung bình bằng python và R. Khi viết code vẫn có nhiều chỗ chưa rõ, chúng ta có thể xem phần help của ứng dụng để hiểu thêm về các hàm.

Trong Spyder các bạn nhấn Ctrl + I tại một hàm để coi help của nó, trong RStudio thì nhấn F1.

Mẹo Trong cả 2 IDE trên, để chạy từng đoạn code, ta bôi đen đoạn code và nhấn Ctrl + Enter.

Các ghi chú này được mình ghi lại khi đang tham gia khóa học tại udemy nếu bạn thấy thú vị có thể đăng ký để học trên đó, sẽ có nhiều giải thích chi tiết hơn (https://www.udemy.com/machinelearning) .

Ngày hôm nay, mình nhận được một tình huống tương tự như vậy, nhưng kết quả đã khác. Đã có thể cài nodejs lên shared hosting của Godaddy. Dưới đây là các bước thực hiện.

SSH vào server của Godaddy

Ở đây mình cần phải có username để ssh. Lúc đầu mình nhầm username này với user đăng nhập vào trang quản lý của Goddady. Để có được username ssh này các bạn mở trình quản lý Cpanel của hosting lên.

Sau đó vào phần FPT Accounts, các bạn nhìn vào danh sách Special FPT Accounts sẽ có username để ssh.

Để ssh nếu dùng windown thì ta có thể sử dụng chương trình Putty, còn ở Mac hoặc Linux thì mở terminal lên để ssh.

1

ssh {username}@{public_ip}

Ở đây Password nhập vào là password các bạn login vào Godaddy.

Kiểm tra xem nodejs đã được cài chưa

Sau khi ssh vào server các bạn kiểm tra xem nodejs được cài chưa bằng cách.

1
2
3

which node
which npm
which nvm

Nếu không có thông tin gì, thì ta bắt đầu quá trình cài đặt.

Cài đặt nodejs bằng nvm

Để cài đặt nodejs không cần dùng quyền sudo ta sẽ sử dụng nvm.

Ta chạy lần lượt các lệnh sau:

1

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.32.0/install.sh | bash

Sau khi đã chạy xong ta có thể kiểm tra lại nvm đã được cài đặt bằng:

1

nvm --version

Cài đặt nodejs bằng nvm:

1

nvm install node

Để kiểm tra nodejs đã được cài thành công ta chạy lệnh:

1
2

node -v
npm -v

Từ đây ta có thể cài thêm pm2 để chạy các ứng dụng nodejs trên server mà không làm ứng dụng tắt đi khi ta thoát phiên ssh.

1

npm install pm2 -g

Kết

Như vậy là mình đã có thể chạy nodejs trên shared hosting của Godaddy, tuy nhiên mình không chạy được ứng dụng ở cổng http 80. Khi mình chạy một ứng dụng ở cổng 5000 chẳng hạn. Mình cũng không thể truy cập được từ public IP. Tuy nhiên nếu mình truy cập từ localhost thì vẫn có thể được. Ví dụ:

1

curl http://localhost:5000

Ngoài ra mình thấy Godaddy cũng đang có dịch vụ NodeJS cloud. Cái này mình chưa thử, nên chưa biết thế nào. Dù sao thì chạy đưọc nodejs trên shared hosting cũng có thể giúp ích đưọc trong một vài trường hợp đặt biệt.

• ssh to my centos agent machine.
• Go to agent folder, in this case it is BuildAgent
• I tried to stop the agent by bin/agent.sh stop but got no luck. When I started the agent it said that Build agent is already running with PID 1795, so that I could not restart it.
• KILL the process by sudo kill 1795
• Restart again bin/agent.sh start
  => It should work now.

Modules are cached after the first time they are loaded. This means (among other things) that every call to require(‘foo’) will get exactly the same object returned, if it would resolve to the same file.

Multiple calls to require(‘foo’) may not cause the module code to be executed multiple times. This is an important feature. With it, “partially done” objects can be returned, thus allowing transitive dependencies to be loaded even when they would cause cycles.

If you want to have a module execute code multiple times, then export a function, and call that function.

(https://nodejs.org/api/modules.html#modules_caching)

Trying code

Let’s see bellow test code and the result:

A.js

1
2
3
4
5
6

var list = [];
module.exports = {
  list: list,
  name: 't'
};

index.js

1
2
3
4
5
6
7
8
9
10
11
12

var a1 = require('./A');
var a2 = require('./A');
a1.list.push(1);
console.log(a1.list);
console.log(a2.list);
console.log(a2.name);
console.log(a1.name);
a1.name = 'update';
console.log(a2.name);
console.log(a1.name);

Result

1
2
3
4
5
6

[ 1 ]
[ 1 ]
t
t
update
update

So, we know a1 and a2 are the same object.

1
2
3
4
5
6
7
8
9

var request = require('request');
var userProfileUri = 'http://test.com/API/user/profile';
request.get(userProfileUri, {
  'headers': {
    'Authorization': 'Bearer eyJ0eX'
  },
}, function(err, response, body) {
  console.log(err);
});

After running this code, I waited for a minute and got this error:

1

{ [Error: socket hang up] code: 'ECONNRESET' }

Doing for many searches via google, finally I got a solution that make my day happy. I hope that bellow solution can help you too.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

var request = require('request');
var userProfileUri = 'http://test.com/API/user/profile';
request.get(userProfileUri, {
  'headers': {
    'Authorization': 'Bearer eyJ0eX'
  },
  agentOptions: {
    secureOptions: require('constants').SSL_OP_NO_TLSv1_2,
    ciphers: 'ECDHE-RSA-AES256-SHA:AES256-SHA:RC4-SHA:RC4:HIGH:!MD5:!aNULL:!EDH:!AESGCM',
    honorCipherOrder: true
  }
}, function(err, response, body) {
  console.log(err);
});

The important part is agentOptions. Just add it to your request config.

Ta tạo file animal-service.ts cùng cấp với app.ts:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

export class AnimalService {
  animals: [];
  constructor() {
    this.animals = ANIMALS;
  }
  getAnimals() {
    return this.animals;
  }
  addAnimal(type: String, name: String) {
    this.animals.push({ 'type': type, 'name': name});
  }
}
var ANIMALS = [
  { type: 'Tiger', name: 'Bobo'},
  { type: 'Dog', name: 'Mic'},
  { type: 'Elephan', name: 'Big'}
];

Một cách đơn giản, service trong Angular 2 chỉ là một class bình thường. Ở đây, ta có class AnimalService nó có hai phương thức sẽ được sử dụng trong AppComponent là getAnimals và addAnimal.

Trong AppComponent ta inject AnimalService vào như sau:

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

import {AnimalService} from './animal-service';
...
@Component({
  ...
})
class AppComponent {
  public selectedAnimal;
  public newAnimal = {
    type: '',
    name: ''
  }
  animals = [];
  constructor(private animalService: AnimalService) {
    this.animals = animalService.getAnimals();
  }
  select(animal) { this.selectedAnimal = animal; }
  getSelectedClass(animal) {
    return {
      'selected': animal === this.selectedAnimal
    }
  }
  onSubmit() {
    this.animalService.addAnimal(this.newAnimal.type, this.newAnimal.name);
    this.newAnimal.type = '';
    this.newAnimal.name = '';
  }
}
bootstrap(AppComponent, [AnimalService]);

Trong constructor của AppComponent ta thêm vào tham số animalService, từ khóa private trước tham số sẽ báo cho TypeScript biết để tự động gán animalService trở thành một private member của AppComponent. Do đó trong hàm onSubmit ta có thể sử dụng this.animalService.

Angular 2 được xây dựng đi kèm với nó là Dependency Injection framwork, framwork này sẽ tự động nhúng một instance của AnimalService vào AppComponent. Tuy nhiên để được như vậy, ta cũng cần phải đồng thời khai báo AnimalService khi bootstrap App.

1

bootstrap(AppComponent, [AnimalService]);

Nhúng service vào service

Nếu AnimalService của chúng ta cũng cần một service khác thì sao, ví dụ LogService. Khi đó AnimalService có thể như thế này:

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

import {Injectable} from 'angular2/angular2';
import {LogService} from './log-service';
@Injectable()
export class AnimalService {
  animals: [];
  constructor(private logger: LogService) {
    this.animals = ANIMALS;
  }
  getAnimals() {
    return this.animals;
  }
  addAnimal(type: String, name: String) {
    this.logger.log('Adding new animal.');
    this.animals.push({ 'type': type, 'name': name});
  }
}
var ANIMALS = [
  { type: 'Tiger', name: 'Bobo'},
  { type: 'Dog', name: 'Mic'},
  { type: 'Elephan', name: 'Big'}
];

Như vậy, để inject một service vào service khác, ta nhớ phải sử dụng @Injectable().

Tổng kết

Trên đây là cách đơn giản để inject dependency vào Angular2. Thực tế có nhiều cách khác nhau để tạo một instance của service tùy từng mục đích mà chúng ta sẽ cùng nhau tìm hiểu trong những phần sau.

1
2
3
4

import {Component, bootstrap, CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/angular2';
...
  directives: [CORE_DIRECTIVES, FORM_DIRECTIVES],

Ngoài CORE_DIRECTIVES ra mình còn khai báo thêm FORM_DIRECTIVES, chắc hẳn là bạn đã đoán ra đó là tập hợp các directive dành cho Form của Angular.

Tạo form

Trong Component template ta thêm vào form

1
2
3
4
5

<form (ng-submit)="onSubmit()">
  <label>Type</lable><input type="text" required [(ng-model)]="newAnimal.type">
  <label>Name</lable><input type="text" required [(ng-model)]="newAnimal.name">
  <button type="submit">Add</button>
</form>

Trong Component ta thêm thuộc tính newAnimal và phương thức onSubmit:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

public newAnimal = {
  type: '',
  name: ''
}
onSubmit() {
  this.animals.push({
    type: this.newAnimal.type,
    name: this.newAnimal.name
  });
  this.newAnimal.type = '';
  this.newAnimal.name = '';
}

Sau khi ta nhập thông tin vào form và nhấn nút Add phương thức onSubmit sẽ được gọi. Trong phương thức này ta push thêm một animal mới vào danh sách this.animals với dữ liệu được lấy từ this.newAnimal mà ta đã liên kết nó với form input bằng [(ng-model)]. Sau khi add xong, ta làm trống 2 ô text input bằng cách gán chuỗi rỗng vào type và name của newAnimal.

ng-model

Phần này trình bày sâu về directive ng-mode, bạn có thể bỏ qua nếu muốn dùng mà không cần tìm hiểu thêm

Như ta thấy ở trên, dữ liệu giữa model và text input đã được truyền theo kiểu two-way data binding.

Với Property binding, ng-model được bọc trong cặp dấu [], khi dữ liệu của model thay đổi, nó sẽ thay đổi phần view của text input. Cho nên khi ta gán this.newAnimal.type = '', text input của ta cũng bị làm rỗng. Dữ liệu ở đây đi theo chiều model -> view.

Với Event binding, ng-model được bọc trong cặp dấu (), khi giá trị của text input thay đổi, dữ liệu sẽ được cập nhật lại vào trong newAnimal. Chính vì vậy, khi form được submit ta mới có thể lấy được thông tin nhập vào từ text input. Dữ liệu ở đây đi theo chiều view -> model.

Thực tế thì ta có thể tách [(ngModel)] ra 2 phần riêng lẽ như sau:

1

<input type="text" required (ng-model-change)="newAnimal.type = $event" [ng-model]="newAnimal.type">

Việc binding cũng sẽ diễn ra tương tự.

ng-model-change ở đây không phải là một event của thẻ <input> mà nó thực tế là một event property của ngModel. Khi Angular nhìn thấy cú pháp [(abc)] nó sẽ mong đợi directive abc có một input property abc và một ouput property abc-change.

Khi coi sơ qua code của ngModel ta sẽ thấy như sau (Code này có thể thay đổi khi Angular2 ra bản chính thức):

1
2
3
4
5
6
7

@Directive({
  selector: '[ng-model]:not([ng-control]):not([ng-form-control])',
  bindings: [formControlBinding],
  inputs: ['model: ngModel'],
  outputs: ['update: ngModelChange'],
  exportAs: 'form'
})

ng-model-change là một EventEmitter của angular, nó sẽ trả về value cho input khi được gọi.

Nói chung là tìm hiểu một chút cho biết, còn bình thường thì ta cứ dùng [(ng-model)] cho khỏe.

Validate và track state với ng-control

Ta sửa lại template phần form và add thêm style cho component như sau:

Form

1
2
3
4
5
6
7

<form (ng-submit)="onSubmit()">
  <label>Type</lable><input type="text" required [(ng-model)]="newAnimal.type" ng-control="type" #type="form" required>
  <label>Name</lable><input type="text" required [(ng-model)]="newAnimal.name" ng-control="name" #name="form" required>
  <button type="submit">Add</button>
  <div class="alert" [hidden]="type.valid">Type is required</div>
  <div class="alert" [hidden]="name.valid">Name is required</div>
</form>

Styles

1
2
3

input { border: 1px solid #ccc; }
.ng-invalid { border-left: 3px solid red; }
.alert { color: red; }

Để có thể theo dõi được state của form controller ta sử dung directive ng-control, directive này chỉ có thể được áp dụng cho control bên trong thẻ <form>.

1

<label>Type</lable><input type="text" required [(ng-model)]="newAnimal.type" ng-control="type" #type="form" required>

Với mỗi ng-control ta cần gán cho nó một cái tên duy nhất. ng-control giúp ta biết được khi nào control được click (touch), khi nào giá trị thay đổi, khi nào thì giá trị bị sai. Và nó cũng thêm vào control một vài class đặc biệt của Angular.

Vì input của ta có thuộc tính required nên khi không có giá trị nào bên trong, ng-control sẽ tự động thêm vào class ng-invalid do đó ta sẽ thấy input của mình như thế này:

input invalid

Hiển thị thông báo lỗi khi input không đúng

Trong input ta tạo một local variable #type="form" và gán cho nó từ form. Angular tự hiểu cú pháp này và gán Control Object cho biến type. Do đó ta có thể bind giá trị type.valid vào property hidden của thẻ div:

1

<div class="alert" [hidden]="type.valid">Type is required</div>

error message

Ngăn form submit khi dữ liệu invalid

Ta tạo một local variable animalForm và disable nút Add khi dữ liệu trong form invalid.

1
2
3
4
5
6
7

<form (ng-submit)="onSubmit()" #animalform="form">
  <label>Type</lable><input type="text" required [(ng-model)]="newAnimal.type" ng-control="type" #type="form" required>
  <label>Name</lable><input type="text" required [(ng-model)]="newAnimal.name" ng-control="name" #name="form" required>
  <button type="submit" [disabled]="!animalform.form.valid">Add</button>
  <div class="alert" [hidden]="type.valid">Type is required</div>
  <div class="alert" [hidden]="name.valid">Name is required</div>
</form>

Khi mới chạy ta sẽ thấy nút Add bị disabled, sau khi đã điền đủ thông tin vào name và type, nút Add sẽ được enable trở lại và ta có thể submit form.

Tổng kết

zoo app version 2

Sau phần này, ta đã biết cách sử dụng ng-model cho two-way data binding. Tìm hiểu một chút về cách [(ng-model)] hoạt động.
Sử dụng ng-control để theo dõi trạng thái của control, cũng như thêm style cho control, ẩn hiện thông báo lỗi tùy vào trạng thái của control.

Toàn bộ code của phần 2.

app.ts

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

import {Component, bootstrap, CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/angular2';
@Component({
  selector: 'app',
  directives: [CORE_DIRECTIVES, FORM_DIRECTIVES],
  template: `
    <h1>Animal list</h1>
    <form (ng-submit)="onSubmit()" #animalform="form">
      <label>Type</lable><input type="text" required [(ng-model)]="newAnimal.type" ng-control="type" #type="form" required>
      <label>Name</lable><input type="text" required [(ng-model)]="newAnimal.name" ng-control="name" #name="form" required>
      <button type="submit" [disabled]="!animalform.form.valid">Add</button>
      <div class="alert" [hidden]="type.valid">Type is required</div>
      <div class="alert" [hidden]="name.valid">Name is required</div>
    </form>
    <ul class="animal-list">
      <li *ng-for="#animal of animals" (click)="select(animal)" [ng-class]="getSelectedClass(animal)">
        <span class="type">{{animal.type}}</span> {{animal.name}}
      </li>
    </ul>
    <div *ng-if="selectedAnimal">
      <h2>Selected Animal</h2>
      ({{selectedAnimal.type}}) {{selectedAnimal.name}}
    </div>
  `,
  styles: [`
    .animal-list { list-style-type: none; padding: 0; }
    .animal-list li { cursor: pointer; }
    .animal-list li:hover { cursor: pointer; font-weight: bold; }
    .animal-list li .type { background: #FF9800; color: #FFF; padding: 2px 4px; line-height: 1.5em;}
    .selected { font-weight: bold; }
    input { border: 1px solid #ccc; }
    .ng-invalid { border-left: 3px solid red; }
    .alert { color: red; }
  `]
})
class AppComponent {
  public selectedAnimal;
  public newAnimal = {
    type: '',
    name: ''
  }
  animals = [
    { type: 'Tiger', name: 'Bobo'},
    { type: 'Dog', name: 'Mic'},
    { type: 'Elephan', name: 'Big'}
  ];
  select(animal) { this.selectedAnimal = animal; }
  getSelectedClass(animal) {
    return {
      'selected': animal === this.selectedAnimal
    }
  }
  onSubmit() {
    this.animals.push({
      type: this.newAnimal.type,
      name: this.newAnimal.name
    });
    this.newAnimal.type = '';
    this.newAnimal.name = '';
  }
}
bootstrap(AppComponent);

Ở bài này, mình sẽ viết một ứng dụng quản lý sở thú bằng Angular 2 với typescript. Sau khi kết thúc ta sẽ có một ứng dụng như sau:

Tạo một thư mục để chứa ứng dụng.

1
2

mkdir angular-zoo
cd angular-zoo

Ở đây, mình sẽ dùng live-server để chạy một static server, nó sẽ giúp trang web tự động tải lại khi nội dung file được thay đổi.

1

npm install -g live-server

App Component

Trong thư mục ứng dụng, tạo file app.ts với nội dung sau:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

import {Component, bootstrap} from 'angular2/angular2';
@Component({
  selector: 'app',
  template: `
    <h1>Animal list</h1>
    <ul class="animal-list">
      <li *ng-for="#animal of animals">
        <span class="type">{{animal.type}}</span> {{animal.name}}
      </li>
    </ul>
  `
})
class AppComponent {
  animals = [
    { type: 'Tiger', name: 'Bobo'},
    { type: 'Dog', name: 'Mic'},
    { type: 'Elephan', name: 'Big'}
  ];
}
bootstrap(AppComponent);

Ở đây, ta có directive ng-for là một repeater directive của Angular 2.

Chú ý: Dấu * trước ng-for là cần thiết. Nó cho ng-for biết rằng, thẻ <li> và nội dung trong nó chính là template của từng phần tử.

Bằng cách sử dụng typescript, ta có một cách để viết chuỗi với nhiều dòng như phần template của Component, đó là sử dụng dấu ` (Không phải là dấu nháy đơn, dấu này trên bàn phím thường nằm ở phím dưới phím ESC)

index.html

Tiếp tục, tạo file index.html với nội dung sau:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<html>
  <head>
    <title>Angular 2 QuickStart</title>
    <script src="https://code.angularjs.org/tools/system.js"></script>
    <script src="https://code.angularjs.org/tools/typescript.js"></script>
    <script src="https://code.angularjs.org/2.0.0-alpha.44/angular2.dev.js"></script>
    <script>
      System.config({
        transpiler: 'typescript',
        typescriptOptions: { emitDecoratorMetadata: true }
      });
      System.import('./app.ts');
    </script>
  </head>
  <body>
    <app>loading...</app>
  </body>
</html>

Chạy server

Mở terminal và chạy lệnh

1

live-server

Nếu như mọi chuyện đều ổn, ta sẽ nhìn thấy một danh sách các con vật với loại và tên, tuy nhiên, ta chỉ thấy dòng chữ loading.... Bật develop tool của trình duyệt lên (ở đây mình dùng Chrome) ta sẽ thấy lỗi:

1
2

EXCEPTION: Template parse errors:
Can't bind to 'ngForOf' since it isn't a known native property in AppComponent > ul:nth-child(1) > li:nth-child(1)[*ng-for=#animal of animals]

Lý do là do ta dùng directive ng-for trong template, nhưng ứng dụng không biết directive đó ở đâu. Ta sẽ sửa nó bằng cách import ng-for vào và nhúng vào app component.

Trong file app.ts ta sửa lại dòng import:

1

import {Component, bootstrap, NgFor} from 'angular2/angular2';

và trong component ngay dưới thuộc tính selector ta thêm vào thuộc tính directives để cho component của ta biết template sẽ sử dụng những directives nào.

1
2
3
4
5
6
7
8
9
10
11
12

@Component({
  selector: 'app',
  directives: [NgFor],
  template: `
    <h1>Animal list</h1>
    <ul class="animal-list">
      <li *ng-for="#animal of animals">
        <span class="type">{{animal.type}}</span> {{animal.name}}
      </li>
    </ul>
  `
})

Ghi chú: Dấu # trước animal nghĩa là Angular sẽ tạo 1 local variable có tên là animal

Thêm style cho app component

Để thêm style cho app component, trong decorator component ta thêm vào thuộc tính styles, style này chỉ được áp dụng bên trong app component.

1
2
3
4
5
6

styles: [`
  .animal-list { list-style-type: none; padding: 0; }
  .animal-list li { cursor: pointer; }
  .animal-list li:hover { cursor: pointer; font-weight: bold; }
  .animal-list li .type { background: #FF9800; color: #FFF; padding: 2px 4px; line-height: 1.5em;}
`]

animal list with style

Thêm sự kiện click

Giờ ta sẽ thêm vào một chức năng, khi click vào một con vật thì sẽ hiển thị thông tin của con vật được chọn.

Trước tiên sửa lại template:

1
2
3
4
5
6
7
8
9
10

<h1>Animal list</h1>
<ul class="animal-list">
  <li *ng-for="#animal of animals" (click)="select(animal)">
    <span class="type">{{animal.type}}</span> {{animal.name}}
  </li>
</ul>
<div *ng-if="selectedAnimal">
  <h2>Selected Animal</h2>
  ({{selectedAnimal.type}}) {{selectedAnimal.name}}
</div>

Ở đây ta sẽ sử dụng thêm ng-if (chỉ hiển thị khi điều kiện của ng-if cho giá trị đúng), cũng giống như ng-for ở trên ta phải import NgIf vào và add thêm và phần directives của component.

Trong thẻ <li> ta đã thêm vào (click)="select(animal)", nghĩa là khi click vào thẻ li ta Angular sẽ gọi phương thức select của component cùng với tham số là animal. So với AngularJS 1, ta không còn ng-click nữa. Ở đây (click), dấu ngoặc sẽ xác định mục tiêu là sự kiện click của thẻ li, như vậy ta có thể tạm đoán dấu () sẽ giúp ta có thể làm việc được với bất kỳ sự kiện nào của element.

Tiếp đến, ta cần thêm phương thức select vào component và một thuộc tính selectedAnimal:

1
2
3

public selectedAnimal;
select(animal) { this.selectedAnimal = animal; }

Thay đổi style cho con vật được chọn với ng-class

Ta sửa lại thẻ li, thêm vào directive ng-class

1
2
3

<li *ng-for="#animal of animals" (click)="select(animal)" [ng-class]="getSelectedClass(animal)">
  <span class="type">{{animal.type}}</span> {{animal.name}}
</li>

sau đó trong component ta thêm phương thức getSelectedClass:

1
2
3
4
5

getSelectedClass(animal) {
  return {
    'selected': animal === this.selectedAnimal
  }
}

phương thức này trả về đối tượng với thuộc tính selected bằng true nếu animal trùng với selectedAnimal.

Ghi chú: ng-class được bọc trong dấu [] đây là cú pháp của property binding mà dữ liệu sẽ đi theo 1 chiều từ nguồn là getSelectedClass(animal) đến đích là property của directive ng-class.

để thấy được sự thay đổi của li sau khi được chọn ta thêm style cho class .selected:

1

.selected { font-weight: bold; }

Tổng kết

Như vậy là trong phần này ta đã cùng nhau tìm hiểu về một vài directive có sẵn của Angular 2 như ng-for , ng-if, ng-class, cách khai báo directive sử dụng trong component.

Để bind event của element ta sử dụng cặp dấu ngoặc (), để bind property ta dùng cặp dấu ngoặc [].

Ở phần tiếp theo, ta sẽ cùng dùng thử form trong Angular 2 để add thêm con vật vào sở thú của mình.

Đây là toàn bộ code của phiên bản zoo app hiện tạ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

import {Component, bootstrap, NgFor, NgIf, NgClass} from 'angular2/angular2';
@Component({
  selector: 'app',
  directives: [NgFor, NgIf, NgClass],
  template: `
    <h1>Animal list</h1>
    <ul class="animal-list">
      <li *ng-for="#animal of animals" (click)="select(animal)" [ng-class]="getSelectedClass(animal)">
        <span class="type">{{animal.type}}</span> {{animal.name}}
      </li>
    </ul>
    <div *ng-if="selectedAnimal">
      <h2>Selected Animal</h2>
      ({{selectedAnimal.type}}) {{selectedAnimal.name}}
    </div>
  `,
  styles: [`
    .animal-list { list-style-type: none; padding: 0; }
    .animal-list li { cursor: pointer; }
    .animal-list li:hover { cursor: pointer; font-weight: bold; }
    .animal-list li .type { background: #FF9800; color: #FFF; padding: 2px 4px; line-height: 1.5em;}
    .selected { font-weight: bold; }
  `]
})
class AppComponent {
  public selectedAnimal;
  animals = [
    { type: 'Tiger', name: 'Bobo'},
    { type: 'Dog', name: 'Mic'},
    { type: 'Elephan', name: 'Big'}
  ];
  select(animal) { this.selectedAnimal = animal; }
  getSelectedClass(animal) {
    return {
      'selected': animal === this.selectedAnimal
    }
  }
}
bootstrap(AppComponent);

Tiếp theo: zoo app phần 2.

Trong phần làm quen này, chúng ta cùng nhau viết ứng dụng vô cùng đơn giản coi như để biết được Angular2 là cái gì, và viết nó như thế nào. Một ứng dụng Hello World.

Chúng ta sẽ cùng nhau thực hiện các bước sau:

• Tạo thư mục
• Tạo Component gốc trong file app.ts
• Nhúng các thư viện và code vào file index.html
• Chạy ứng dụng
• Cải tiến một vài phần cho ứng dụng

Tạo thư mục

1
2

mkdir angular2
cd angular2

Tạo Component gốc trong file app.ts

1
2
3
4
5
6
7
8
9

import {bootstrap, Component} from 'angular2/angular2';
@Component({
  selector: 'my-app',
  template: '<h1>Hello Angular2</h1>'
})
class AppComponent { }
bootstrap(AppComponent);

Ở trên, mình đã tạo ra một Component, thành phần quan trọng nhất trong Angular 2. Ta có thể coi nó như phần views của ứng dụng. Hiện tại AppComponent của chúng ta là một class rỗng, chưa làm gì cả.

Trong Typescript, dấu @ cho ta biết đó là một decoration, nó giống như là metadata cho class.

• Đầu file, ta import bootstrap và Component từ thư viện angular2 để sử dụng.
• @Component cho Angular biết AppComponent là một component. Config object của @Component gồm 2 thuộc tính.
  • selector: CSS selector cho Angular biết component của chúng ta sẽ được áp dụng ở đâu. Như ví dụ trên nó sẽ áp dụng vào element `‘
  • template: Phần hiển thị của component. Tạm thời ta dùng inline code, sau này ta sẽ tách nó ra thành 1 file template riêng.
• bootstrap: cho Angular biết component này là component gốc của ứng dụng. Sau này trong component gốc ta có thể có các component khác.

Nhúng các thư viện và code vào file index.html

Trong file index.html ta có code như sau:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<html>
  <head>
    <title>Angular 2 Quickstart</title>
    <script src="https://code.angularjs.org/tools/system.js"></script>
    <script src="https://code.angularjs.org/tools/typescript.js"></script>
    <script src="https://code.angularjs.org/2.0.0-alpha.44/angular2.dev.js"></script>
    <script>
      System.config({
        transpiler: 'typescript',
        typescriptOptions: { emitDecoratorMetadata: true }
      });
      System.import('./app.ts');
    </script>
  </head>
  <body>
    <my-app>loading...</my-app>
  </body>
</html>

• Tạm thời ta sẽ không bàn về 3 thư viện ở trên cùng.
• Trong đoạn config cho System (từ system.js, đây là một công cụ cho phép ta import code) ta yêu cầu chuyển đổi code từ Typescript sang Javascript ngay trên trình duyệt.
• Import AppComponent của chúng ta từ file app.ts
• Trong <body> ta thêm một element <my-app>, chính là selector của AppComponent đã viết ở trên.

Chạy ứng dụng

Để chạy ứng dụng ta cần 1 static file server, ở đây mình sẽ dung live-server

1
2
3

npm install -g live-server
cd /path/to/source
live-server

Chúc mừng, ứng dụng angular 2 đầu tiên của bạn đã hoàn thành.

Cải tiến

Ở đây có một vài phần chúng ta sẽ cần phải cải tiến cho ứng dụng của mình.

1. Cấu trúc lại ứng dụng cho việc phát triển sau này
2. Sử dụng resource từ local thay vì tải từ mạng:
   Tải resource từ trên mạng thì hiện tại vẫn ổn, nhưng trong quá trình dev mỗi lần ta reload lại trình duyệt ta sẽ mất thêm thời gian tải các resource từ mạng, vì vậy ta đưa các file resource về máy mình rồi tải lại sẽ nhanh hơn.
3. Chuyển đổi Typescript sang Javascript bằng công cụ thay vì trên trình duyệt:
   Vì việc chuyển đổi thực hiện trên trình duyệt sẽ khiến cho ứng dụng của chúng ta trở nên chậm, khi có nhiều file cần phải xử lý. Vì vậy ta sẽ đổi sang javascript trước rồi mới để trình duyệt tải vào.
4. Sử dụng một vài công cụ cho việc dev (Như là công cụ để thực hiện mục 3)

Cấu trúc lại ứng dụng cho việc phát triển sau này

Trong thư mục hiện tại, ta tạo thêm thư mục src và thư mục con của nó app. Di chuyển index.html vào thư mục src và app.ts vào thư mục src/app.

1
2
3
4
5

angular2
  |- src
      |- app
      |   |- app.ts
      |- index.html

Cài đặt các package npm

1
2
3

npm init -y
npm i angular2@2.0.0-alpha.44 systemjs@0.19.2 --save --save-exact
npm i typescript live-server --save-dev

• angular: thư viện angular
• systemjs: hỗ trợ module loading

Ngoài ra có 2 packages hỗ trợ cho việc dev

• typescript: chuyển đổi typesript sang javascript
• live-server: static server tự động reload lại trang web khi file thay đổi

Sau khi chạy lệnh cài đặt xong ta có file package.json như sau:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "angular2": "2.0.0-alpha.44",
    "systemjs": "0.19.2"
  },
  "devDependencies": {
    "live-server": "^0.8.2",
    "typescript": "^1.7.3"
  }
}

Tìm đến phần scripts sửa lại:

1
2
3
4

"scripts": {
  "tsc": "tsc -p src -w",
  "start": "live-server --open=src"
}

Cập nhật lại file index.html

Nạp resource từ thư mục ta vừa cài các packages

1
2

<script src="../node_modules/systemjs/dist/system.src.js"></script>
<script src="../node_modules/angular2/bundles/angular2.dev.js"></script>

Cập nhật lại cấu hình của System

1
2
3
4
5
6

<script>
  System.config({
    packages: {'app': {defaultExtension: 'js'}}
  });
  System.import('app/app');
</script>

Vì bây giờ ta không chuyển đổi typescript ngay trên trình duyệt nữa, mà sẽ chạy lệnh chuyển đổi từ máy trước, nên trên trình duyệt ta chỉ nạp các file js.

Cấu hình cho việc biên dịch typescript

Trong thư mục src ta thêm file tsconfig.json với nội dung như sau:

1
2
3
4
5
6
7
8
9
10
11

{
  "compilerOptions": {
    "target": "ES5",
    "module": "commonjs",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  }
}

Bạn có thể xem thêm các tùy chọn tại đây Typescript config

Biên dịch typescript sang javascript

Di chuyển đến thư mục gốc của ứng dụng, chạy lệnh tsc mà ta vừa thêm vào package.json ở trên:

1

npm run tsc

Sau khi chạy, ta sẽ thấy trong thư mục src/app có thêm file app.js và app.js.map file này giúp ích cho ta trong việc debug giữa file javascript và file typescript. Vì đã thêm tham số -w nên câu lệnh sẽ tiếp tục watch-theo dõi các file typescript, khi có thay đổi nó sẽ tự biên dịch lại. Bạn cứ để nó chạy ở đó, nếu muốn dừng thì nhấn Ctrl+C.

Chạy ứng dung

Mở một cửa sổ terminal khác, di chuyển đến thư mục gốc của ứng dụng và chạy lệnh:

1

npm start

Và trình duyệt lại chạy lên, hiển thị ứng dụng của chúng ta với chữ “Hello Angular2”

Thay đổi nội dung

Như đã nói ở trên, công cụ biên dịch typescript của chúng ta sẽ tự động biên dịch lại khi nội dung file thay đổi, và live-server cũng tự động tải lại trang khi nội dung file thay đổi. Bây giờ bạn vào file app.ts thử thay đổi lại template của component và xem trình duyệt tự động cập nhật lại nội dung cho bạn như thế nào.

Tổng kết

• Angular 2 có phần quan trọng nhất là Component
• Ta có thể dùng Typescript để viết ứng dụng với Angular 2 và biên dịch ra javascript bằng Typescript Compiler (TSC)
• Bằng cách để Compiler theo dõi file và sử dụng live-server ta có thể thấy được ứng dụng thay đổi nhanh chóng sau khi thay đổi code
• Đây chỉ là một ứng dụng rất đơn giản, để làm quen với Angular 2

Các thao tác trong bài này mình hoàn toàn theo bài hướng dẫn tại Angular Quickstart các bạn có thể đọc để nắm thêm chi tiết.

Trình duyệt hỗ trợ ES6

Angular 2 yêu cầu trình duyệt hỗ trợ ES6, hầu hết đều đã được hỗ trợ với các trình duyệt hiện tại. Tuy nhiên với các trình duyệt cũ hơn như IE11 ta có thể dùng thêm thư viện shim

Cài đặt shim

1

npm install es6-shim --save

Thêm vào index.html

1

<script src="../node_modules/es6-shim/es6-shim.js"></script>

Sau một hồi dạo quanh thì mình đã tìm thấy LowDB

Need a quick way to get a local database?

Cài đặt

1

npm install lowdb --save

Sử dụng

1
2
3
4

var low = require('lowdb')
var db = low('db.json')
db('posts').push({ title: 'lowdb is awesome'})

Ở đây, dự liệu sẽ được tự động lưu vào file db.json

1
2
3
4
5

{
  "posts": [
    { "title": "lowdb is awesome" }
  ]
}

Một vài thao tác sử dụng cơ bản

LowDB này sử dụng lodash, nên thao tác với API của nó cũng giống như thao tác với API của lodash vậy.

Thêm dữ liệu

1

db('users').push({ name: 'Thach Nguyen', email: 'thach@email.com', role: 'admin'});

Tìm 1 đối tượng

1

db('users').find({email: 'thach@email.com'});

Tìm nhiều đối tượng

1

db('users').filter({role: 'admin'});

Cập nhật dữ liệu

1
2
3
4
5

db('users')
  .chain()
  .find({email: 'thach@email.com'})
  .assign({role: 'member'})
  .value();

Xóa dữ liệu

1

db('users').remove({role: 'member'});

Lấy số lượng users

1

db('users').size();

Hỗ trợ ID

Có 2 cách tạo ID cho dữ liệu.

• Sử dụng underscore-db

1
2
3
4
5
6

var db = low('db.json')
db._.mixin(require('underscore-db'))
var songId = db('songs').insert({ title: 'low!' }).id
var song   = db('songs').getById(songId)

• Dùng uuid

1
2
3
4

var uuid = require('uuid')
var songId = db('songs').push({ id: uuid(), title: 'low!' }).id
var song   = db('songs').find({ id: songId })

Kết

Theo tác giả của lowDB thì:

Nếu các bạn muốn tìm một DB nhanh gọn, không cần cài đặt server thì lowdb này là một lựa chọn hợp lý. Còn bình thường thì cứ dùng MongoDB hoặc các DB khác. :)

Các bạn có thể đọc thêm cách sử dụng ở đây: https://github.com/typicode/lowdb

1

unzip -p dbdump.sql.zip | mysql -u root -p dbname

• Câu lệnh này chỉ thực hiện được với điều kiện file zip của bạn chỉ có 1 file sql.
• Thay root bằng user mysql của bạn
• Thay dbname bằng tên của DB
• Nhập password vào và chờ kết thúc.

Cách này mình tìm được từ đây: http://snippets.khromov.se/import-zipped-mysql-dumps/

Trước đây mình đã thử với một sản phẩm viết blog bằng python, sau khi viết xong nó tự động generate ra các file html rồi up lên host. Nhưng mà python thì mình cũng không thích lắm, muốn một cái tương tự bằng node. Và rồi mình tìm thấy hexo

A fast, simple & powerful blog framework

Giới thiệu chung thì đây là một nền tảng viết blog bằng nodejs:

• Viết bài bằng markdown
• Có giả lập server để test trên localhost
• Tự động generate ra file html
• Có các tùy chọn để deploy qua git, fpt, ssh

Khi viết thì chỉ cần tạo ra một file .md, dùng một phần mềm editor bất kỳ để viết nội dung rồi sau đó deploy.

Có khi các bạn nhìn vào thấy nó phức tạp hơn wordpress nhiều nhưng bản thân mình thì thấy nó rất thú vị và quyết định đưa em hexo vào đội.