<h2>Debounce</h2>Kỹ thuật debounce giúp giảm tần suất gọi hàm khi sự kiện xảy ra liên tục trong một khoảng thời gian ngắn. Nếu sự kiện xảy ra liên tục, hàm chỉ được gọi sau khi khoảng thời gian xác định đã trôi qua mà không có sự kiện mới xảy ra. Điều này thường được sử dụng để giảm tải cho các tác vụ đòi hỏi tài nguyên nặng như việc tìm kiếm tự động khi người dùng nhập liệu.Ví dụ:<figure class="table"><table><tbody><tr><td>Chưa áp dụng debounce</td><td>Đã áp dụng debounce</td></tr><tr><td><img class="image_resized" style="width:100%;" src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/without_debounce_bd4bd22b6e.gif" alt="without-debounce.gif"></td><td><img class="image_resized" style="width:100%;" src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/with_debounce_f9ad3d9671.gif" alt="with-debounce.gif"></td></tr></tbody></table></figure>Dưới đây là một ví dụ cách sử dụng debounce trong JavaScript:<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
 &lt;head&gt;
 &lt;meta charset="UTF-8" /&gt;
 &lt;meta http-equiv="X-UA-Compatible" content="IE=edge" /&gt;
 &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
 &lt;title&gt;Debounce&lt;/title&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;script&gt;
 function debounce(func, delay = 500) {
 let timer;
 return (...args) =&gt; {
 clearTimeout(timer);
 timer = setTimeout(() =&gt; {
 func.apply(this, args);
 }, delay);
 };
 }

 // Sử dụng debounce để giảm tần suất gọi hàm xử lý sự kiện resize
 const handleResize = debounce(function () {
 console.log("Window resized!");
 }, 500);

 window.addEventListener("resize", handleResize);
 &lt;/script&gt;
 &lt;/body&gt;
&lt;/html&gt;</code></pre><h2>Throttle</h2>Kỹ thuật throttle giới hạn tần suất gọi hàm trong một khoảng thời gian nhất định. Thay vì chờ một khoảng thời gian nhất định sau mỗi lần sự kiện xảy ra như debounce, throttle đảm bảo rằng hàm được gọi duy nhất một lần sau mỗi khoảng thời gian nhất định.Ví dụ:<figure class="table"><table><tbody><tr><td>Chưa áp dụng throttle</td><td>Đã áp dụng throttle</td></tr><tr><td><img class="image_resized" style="width:100%;" src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/without_throttle_7b4da3a169.gif" alt="without-throttle.gif"></td><td><img class="image_resized" style="width:100%;" src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/with_throttle_d22ed70943.gif" alt="with-throttle.gif"></td></tr></tbody></table></figure>Dưới đây là một ví dụ cách sử dụng throttle trong JavaScript:<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
 &lt;head&gt;
 &lt;meta charset="UTF-8" /&gt;
 &lt;meta http-equiv="X-UA-Compatible" content="IE=edge" /&gt;
 &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
 &lt;title&gt;Throttle&lt;/title&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;p&gt;
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente nesciunt nihil voluptate praesentium placeat
 repellat incidunt beatae, officiis voluptates doloribus cupiditate eos nisi at porro mollitia. Consequatur ducimus
 adipisci provident expedita, libero quia suscipit. Quia, earum. Earum animi voluptatum repellat deserunt tempore
 quidem cumque deleniti maxime ipsa asperiores. Earum exercitationem consectetur quia eaque nemo eius esse non,
 commodi quaerat cum, vero aliquid laboriosam eligendi nulla officiis hic natus itaque. Illo temporibus ad
 provident alias unde, expedita laborum fugiat odit aperiam iste nisi, ipsa pariatur. Cupiditate repudiandae, totam
 dolor, qui necessitatibus consequuntur harum, minima modi facilis fugiat fuga reprehenderit veritatis magni.
 &lt;/p&gt;
 &lt;p&gt;
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente nesciunt nihil voluptate praesentium placeat
 repellat incidunt beatae, officiis voluptates doloribus cupiditate eos nisi at porro mollitia. Consequatur ducimus
 adipisci provident expedita, libero quia suscipit. Quia, earum. Earum animi voluptatum repellat deserunt tempore
 quidem cumque deleniti maxime ipsa asperiores. Earum exercitationem consectetur quia eaque nemo eius esse non,
 commodi quaerat cum, vero aliquid laboriosam eligendi nulla officiis hic natus itaque. Illo temporibus ad
 provident alias unde, expedita laborum fugiat odit aperiam iste nisi, ipsa pariatur. Cupiditate repudiandae, totam
 dolor, qui necessitatibus consequuntur harum, minima modi facilis fugiat fuga reprehenderit veritatis magni.
 &lt;/p&gt;
 &lt;p&gt;
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente nesciunt nihil voluptate praesentium placeat
 repellat incidunt beatae, officiis voluptates doloribus cupiditate eos nisi at porro mollitia. Consequatur ducimus
 adipisci provident expedita, libero quia suscipit. Quia, earum. Earum animi voluptatum repellat deserunt tempore
 quidem cumque deleniti maxime ipsa asperiores. Earum exercitationem consectetur quia eaque nemo eius esse non,
 commodi quaerat cum, vero aliquid laboriosam eligendi nulla officiis hic natus itaque. Illo temporibus ad
 provident alias unde, expedita laborum fugiat odit aperiam iste nisi, ipsa pariatur. Cupiditate repudiandae, totam
 dolor, qui necessitatibus consequuntur harum, minima modi facilis fugiat fuga reprehenderit veritatis magni.
 &lt;/p&gt;
 &lt;p&gt;
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente nesciunt nihil voluptate praesentium placeat
 repellat incidunt beatae, officiis voluptates doloribus cupiditate eos nisi at porro mollitia. Consequatur ducimus
 adipisci provident expedita, libero quia suscipit. Quia, earum. Earum animi voluptatum repellat deserunt tempore
 quidem cumque deleniti maxime ipsa asperiores. Earum exercitationem consectetur quia eaque nemo eius esse non,
 commodi quaerat cum, vero aliquid laboriosam eligendi nulla officiis hic natus itaque. Illo temporibus ad
 provident alias unde, expedita laborum fugiat odit aperiam iste nisi, ipsa pariatur. Cupiditate repudiandae, totam
 dolor, qui necessitatibus consequuntur harum, minima modi facilis fugiat fuga reprehenderit veritatis magni.
 &lt;/p&gt;
 &lt;p&gt;
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente nesciunt nihil voluptate praesentium placeat
 repellat incidunt beatae, officiis voluptates doloribus cupiditate eos nisi at porro mollitia. Consequatur ducimus
 adipisci provident expedita, libero quia suscipit. Quia, earum. Earum animi voluptatum repellat deserunt tempore
 quidem cumque deleniti maxime ipsa asperiores. Earum exercitationem consectetur quia eaque nemo eius esse non,
 commodi quaerat cum, vero aliquid laboriosam eligendi nulla officiis hic natus itaque. Illo temporibus ad
 provident alias unde, expedita laborum fugiat odit aperiam iste nisi, ipsa pariatur. Cupiditate repudiandae, totam
 dolor, qui necessitatibus consequuntur harum, minima modi facilis fugiat fuga reprehenderit veritatis magni.
 &lt;/p&gt;
 &lt;p&gt;
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente nesciunt nihil voluptate praesentium placeat
 repellat incidunt beatae, officiis voluptates doloribus cupiditate eos nisi at porro mollitia. Consequatur ducimus
 adipisci provident expedita, libero quia suscipit. Quia, earum. Earum animi voluptatum repellat deserunt tempore
 quidem cumque deleniti maxime ipsa asperiores. Earum exercitationem consectetur quia eaque nemo eius esse non,
 commodi quaerat cum, vero aliquid laboriosam eligendi nulla officiis hic natus itaque. Illo temporibus ad
 provident alias unde, expedita laborum fugiat odit aperiam iste nisi, ipsa pariatur. Cupiditate repudiandae, totam
 dolor, qui necessitatibus consequuntur harum, minima modi facilis fugiat fuga reprehenderit veritatis magni.
 &lt;/p&gt;
 &lt;p&gt;
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente nesciunt nihil voluptate praesentium placeat
 repellat incidunt beatae, officiis voluptates doloribus cupiditate eos nisi at porro mollitia. Consequatur ducimus
 adipisci provident expedita, libero quia suscipit. Quia, earum. Earum animi voluptatum repellat deserunt tempore
 quidem cumque deleniti maxime ipsa asperiores. Earum exercitationem consectetur quia eaque nemo eius esse non,
 commodi quaerat cum, vero aliquid laboriosam eligendi nulla officiis hic natus itaque. Illo temporibus ad
 provident alias unde, expedita laborum fugiat odit aperiam iste nisi, ipsa pariatur. Cupiditate repudiandae, totam
 dolor, qui necessitatibus consequuntur harum, minima modi facilis fugiat fuga reprehenderit veritatis magni.
 &lt;/p&gt;
 &lt;p&gt;
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente nesciunt nihil voluptate praesentium placeat
 repellat incidunt beatae, officiis voluptates doloribus cupiditate eos nisi at porro mollitia. Consequatur ducimus
 adipisci provident expedita, libero quia suscipit. Quia, earum. Earum animi voluptatum repellat deserunt tempore
 quidem cumque deleniti maxime ipsa asperiores. Earum exercitationem consectetur quia eaque nemo eius esse non,
 commodi quaerat cum, vero aliquid laboriosam eligendi nulla officiis hic natus itaque. Illo temporibus ad
 provident alias unde, expedita laborum fugiat odit aperiam iste nisi, ipsa pariatur. Cupiditate repudiandae, totam
 dolor, qui necessitatibus consequuntur harum, minima modi facilis fugiat fuga reprehenderit veritatis magni.
 &lt;/p&gt;
 &lt;p&gt;
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente nesciunt nihil voluptate praesentium placeat
 repellat incidunt beatae, officiis voluptates doloribus cupiditate eos nisi at porro mollitia. Consequatur ducimus
 adipisci provident expedita, libero quia suscipit. Quia, earum. Earum animi voluptatum repellat deserunt tempore
 quidem cumque deleniti maxime ipsa asperiores. Earum exercitationem consectetur quia eaque nemo eius esse non,
 commodi quaerat cum, vero aliquid laboriosam eligendi nulla officiis hic natus itaque. Illo temporibus ad
 provident alias unde, expedita laborum fugiat odit aperiam iste nisi, ipsa pariatur. Cupiditate repudiandae, totam
 dolor, qui necessitatibus consequuntur harum, minima modi facilis fugiat fuga reprehenderit veritatis magni.
 &lt;/p&gt;
 &lt;p&gt;
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente nesciunt nihil voluptate praesentium placeat
 repellat incidunt beatae, officiis voluptates doloribus cupiditate eos nisi at porro mollitia. Consequatur ducimus
 adipisci provident expedita, libero quia suscipit. Quia, earum. Earum animi voluptatum repellat deserunt tempore
 quidem cumque deleniti maxime ipsa asperiores. Earum exercitationem consectetur quia eaque nemo eius esse non,
 commodi quaerat cum, vero aliquid laboriosam eligendi nulla officiis hic natus itaque. Illo temporibus ad
 provident alias unde, expedita laborum fugiat odit aperiam iste nisi, ipsa pariatur. Cupiditate repudiandae, totam
 dolor, qui necessitatibus consequuntur harum, minima modi facilis fugiat fuga reprehenderit veritatis magni.
 &lt;/p&gt;
 &lt;p&gt;
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente nesciunt nihil voluptate praesentium placeat
 repellat incidunt beatae, officiis voluptates doloribus cupiditate eos nisi at porro mollitia. Consequatur ducimus
 adipisci provident expedita, libero quia suscipit. Quia, earum. Earum animi voluptatum repellat deserunt tempore
 quidem cumque deleniti maxime ipsa asperiores. Earum exercitationem consectetur quia eaque nemo eius esse non,
 commodi quaerat cum, vero aliquid laboriosam eligendi nulla officiis hic natus itaque. Illo temporibus ad
 provident alias unde, expedita laborum fugiat odit aperiam iste nisi, ipsa pariatur. Cupiditate repudiandae, totam
 dolor, qui necessitatibus consequuntur harum, minima modi facilis fugiat fuga reprehenderit veritatis magni.
 &lt;/p&gt;
 &lt;p&gt;
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente nesciunt nihil voluptate praesentium placeat
 repellat incidunt beatae, officiis voluptates doloribus cupiditate eos nisi at porro mollitia. Consequatur ducimus
 adipisci provident expedita, libero quia suscipit. Quia, earum. Earum animi voluptatum repellat deserunt tempore
 quidem cumque deleniti maxime ipsa asperiores. Earum exercitationem consectetur quia eaque nemo eius esse non,
 commodi quaerat cum, vero aliquid laboriosam eligendi nulla officiis hic natus itaque. Illo temporibus ad
 provident alias unde, expedita laborum fugiat odit aperiam iste nisi, ipsa pariatur. Cupiditate repudiandae, totam
 dolor, qui necessitatibus consequuntur harum, minima modi facilis fugiat fuga reprehenderit veritatis magni.
 &lt;/p&gt;
 &lt;p&gt;
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente nesciunt nihil voluptate praesentium placeat
 repellat incidunt beatae, officiis voluptates doloribus cupiditate eos nisi at porro mollitia. Consequatur ducimus
 adipisci provident expedita, libero quia suscipit. Quia, earum. Earum animi voluptatum repellat deserunt tempore
 quidem cumque deleniti maxime ipsa asperiores. Earum exercitationem consectetur quia eaque nemo eius esse non,
 commodi quaerat cum, vero aliquid laboriosam eligendi nulla officiis hic natus itaque. Illo temporibus ad
 provident alias unde, expedita laborum fugiat odit aperiam iste nisi, ipsa pariatur. Cupiditate repudiandae, totam
 dolor, qui necessitatibus consequuntur harum, minima modi facilis fugiat fuga reprehenderit veritatis magni.
 &lt;/p&gt;
 &lt;p&gt;
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente nesciunt nihil voluptate praesentium placeat
 repellat incidunt beatae, officiis voluptates doloribus cupiditate eos nisi at porro mollitia. Consequatur ducimus
 adipisci provident expedita, libero quia suscipit. Quia, earum. Earum animi voluptatum repellat deserunt tempore
 quidem cumque deleniti maxime ipsa asperiores. Earum exercitationem consectetur quia eaque nemo eius esse non,
 commodi quaerat cum, vero aliquid laboriosam eligendi nulla officiis hic natus itaque. Illo temporibus ad
 provident alias unde, expedita laborum fugiat odit aperiam iste nisi, ipsa pariatur. Cupiditate repudiandae, totam
 dolor, qui necessitatibus consequuntur harum, minima modi facilis fugiat fuga reprehenderit veritatis magni.
 &lt;/p&gt;
 &lt;p&gt;
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente nesciunt nihil voluptate praesentium placeat
 repellat incidunt beatae, officiis voluptates doloribus cupiditate eos nisi at porro mollitia. Consequatur ducimus
 adipisci provident expedita, libero quia suscipit. Quia, earum. Earum animi voluptatum repellat deserunt tempore
 quidem cumque deleniti maxime ipsa asperiores. Earum exercitationem consectetur quia eaque nemo eius esse non,
 commodi quaerat cum, vero aliquid laboriosam eligendi nulla officiis hic natus itaque. Illo temporibus ad
 provident alias unde, expedita laborum fugiat odit aperiam iste nisi, ipsa pariatur. Cupiditate repudiandae, totam
 dolor, qui necessitatibus consequuntur harum, minima modi facilis fugiat fuga reprehenderit veritatis magni.
 &lt;/p&gt;
 &lt;p&gt;
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente nesciunt nihil voluptate praesentium placeat
 repellat incidunt beatae, officiis voluptates doloribus cupiditate eos nisi at porro mollitia. Consequatur ducimus
 adipisci provident expedita, libero quia suscipit. Quia, earum. Earum animi voluptatum repellat deserunt tempore
 quidem cumque deleniti maxime ipsa asperiores. Earum exercitationem consectetur quia eaque nemo eius esse non,
 commodi quaerat cum, vero aliquid laboriosam eligendi nulla officiis hic natus itaque. Illo temporibus ad
 provident alias unde, expedita laborum fugiat odit aperiam iste nisi, ipsa pariatur. Cupiditate repudiandae, totam
 dolor, qui necessitatibus consequuntur harum, minima modi facilis fugiat fuga reprehenderit veritatis magni.
 &lt;/p&gt;
 &lt;script&gt;
 function throttle(func, delay = 500) {
 let lastCall = 0;

 return (...args) =&gt; {
 const now = new Date().getTime();
 if (now - lastCall &lt; delay) return;
 lastCall = now;
 return func(...args);
 };
 }

 // Sử dụng throttle để giới hạn tần suất gọi hàm xử lý sự kiện scroll
 const handleScroll = throttle(function () {
 console.log("Window scrolled!");
 }, 300);

 window.addEventListener("scroll", handleScroll);
 &lt;/script&gt;
 &lt;/body&gt;
&lt;/html&gt;</code></pre>

Kỹ thuật debounce và throttle trong JavaScript được sử dụng để kiểm soát tần suất gọi hàm (thường là một hàm xử lý sự kiện) trong quá trình xử lý sự kiện.

Giới thiệu về Debounce và Throttle

&nbsp;Chào mừng bạn đến với bài viết đầu tiên trong chuỗi học TypeScript! Trong bài này, chúng ta sẽ khám phá TypeScript từ góc nhìn của những người đã biết về JavaScript. Hãy bắt đầu hành trình của bạn để tìm hiểu về TypeScript và tận hưởng những lợi ích mà nó mang lại!<h2>1. Giới thiệu về TypeScript</h2>TypeScript là một ngôn ngữ lập trình tĩnh dựa trên JavaScript. Nó giúp chúng ta viết mã JavaScript hiệu quả hơn, đồng thời mang lại tính tin cậy và dễ bảo trì hơn. TypeScript được phát triển bởi Microsoft và được sử dụng rộng rãi trong các dự án lớn và phức tạp.<h2>2. Tại sao nên sử dụng TypeScript?</h2>Mặc dù JavaScript là một ngôn ngữ lập trình mạnh mẽ, nhưng nó không có kiểu dữ liệu tĩnh và kiểm tra lỗi tại thời điểm biên dịch. Điều này có thể dẫn đến việc xảy ra lỗi trong quá trình chạy chương trình. TypeScript giải quyết vấn đề này bằng cách bổ sung kiểu dữ liệu tĩnh và kiểm tra lỗi tại thời điểm biên dịch. Điều này giúp bạn phát hiện lỗi sớm hơn và tăng tính tin cậy của mã.Ngoài ra, TypeScript cung cấp gợi ý thông minh, phân tích mã mạnh mẽ và IDE tích hợp tốt. Điều này giúp tăng năng suất phát triển và giảm thời gian tìm kiếm lỗi.<h2>3. Tích hợp TypeScript vào dự án JavaScript hiện có</h2>Nếu bạn đã có một dự án JavaScript hiện có và muốn chuyển sang TypeScript, đừng lo lắng. TypeScript có thể tích hợp vào dự án JavaScript hiện có một cách dễ dàng. Bạn có thể bắt đầu bằng cách đổi tên các tệp mã JavaScript thành .ts và bắt đầu thêm kiểu dữ liệu vào từng phần mã một. Điều này cho phép bạn tận dụng lợi ích của TypeScript từng bước mà không cần viết lại toàn bộ mã.<h2>4. Sử dụng kiểu dữ liệu trong TypeScript</h2>Một trong những tính năng quan trọng nhất của TypeScript là khả năng sử dụng kiểu dữ liệu tĩnh. Bạn có thể xác định kiểu dữ liệu cho biến, tham số và giá trị trả về hàm. Điều này giúp bạn kiểm tra và đảm bảo tính hợp lệ của mã nguồn.Ví dụ:<pre><code class="language-typescript">function add(a: number, b: number): number {
 &nbsp;return a + b;
}


let result: number = add(3, 5);
</code></pre>Trong ví dụ trên, chúng ta xác định kiểu dữ liệu cho biến "a" và "b" là "number", và kiểu dữ liệu của giá trị trả về là "number". TypeScript sẽ kiểm tra kiểu dữ liệu này và thông báo lỗi nếu chúng không phù hợp.<h2>5. Type Contracts</h2>TypeScript cũng hỗ trợ type contracts, cho phép bạn xác định các ràng buộc kiểu dữ liệu và giao diện cho đối tượng. Điều này giúp xác định các thuộc tính bắt buộc và tuân thủ các quy tắc kiểu dữ liệu cụ thể.Ví dụ:<pre><code class="language-typescript">interface Person {
 &nbsp;name: string;
 &nbsp;age: number;
}


function greet(person: Person): void {
 &nbsp;console.log("Hello, " + person.name + "!");
}


let john = { name: "John", age: 25 };
greet(john);
</code></pre>Trong ví dụ trên, chúng ta định nghĩa một interface "Person" với hai thuộc tính là "name" (kiểu string) và "age" (kiểu number). Hàm "greet" nhận một tham số là một đối tượng có cấu trúc tương tự với interface "Person". Việc này đảm bảo rằng chỉ các đối tượng tuân thủ type contracts "Person" mới có thể được chuyển vào hàm "greet".Nếu chúng ta khai báo thêm thuộc tính “gender” có giá trị là “male” vào đối tượng “join”&nbsp;<pre><code class="language-typescript">let john = { name: "John", age: 25, gender: "male" };</code></pre>Thì lúc này đối tượng "john" có một thuộc tính không được khai báo trong type contracts "Person" là "gender". TypeScript sẽ hiển thị một thông báo lỗi:<pre><code class="language-typescript">Object literal may only specify known properties, and 'gender' does not exist in type 'Person'.</code></pre>Với TypeScript, việc kiểm tra kiểu dữ liệu tại thời điểm biên dịch giúp bạn xác định và sửa lỗi ngay từ quá trình phát triển, tăng tính tin cậy và dễ bảo trì của mã.<h2>6. Tận dụng các tính năng nâng cao của TypeScript</h2>TypeScript còn nhiều tính năng nâng cao khác như:Generics: Generics cho phép bạn viết mã linh hoạt và tái sử dụng cho nhiều kiểu dữ liệu khác nhau mà không cần định nghĩa cứng rắn kiểu dữ liệu.Module: TypeScript hỗ trợ module để quản lý mã trong các dự án lớn, giúp chia nhỏ mã thành các phần riêng biệt và sử dụng lại chúng trong các tệp khác.Lớp và Kế thừa: TypeScript hỗ trợ lập trình hướng đối tượng đầy đủ với lớp và kế thừa, cho phép định nghĩa lớp, thuộc tính, phương thức và sử dụng kế thừa để chia sẻ mã giữa các lớp.Và nhiều hơn nữa.&nbsp;Các tính năng này cùng với các tính năng khác trong TypeScript giúp bạn viết mã linh hoạt và hiệu quả hơn, đồng thời giảm thiểu lỗi và tăng tính bảo trì của mã.<h2>7. Kết luận</h2>Trên đây là một sơ lược về TypeScript cho những người đã biết về JavaScript. TypeScript cung cấp tính hợp lệ kiểu dữ liệu, gợi ý thông minh và phân tích mã mạnh mẽ, giúp bạn viết mã JavaScript hiệu quả hơn và dễ bảo trì hơn. Hy vọng bài viết này đã giúp bạn có cái nhìn tổng quan về TypeScript và khám phá được tiềm năng của nó. Hãy tiếp tục học và áp dụng TypeScript vào dự án của bạn để tận hưởng những lợi ích mà nó mang lại! &nbsp;

Bài viết này giới thiệu về TypeScript và hướng dẫn cho những người đã biết về JavaScript để khám phá và tận hưởng những lợi ích mà TypeScript mang lại. TypeScript giúp viết mã JavaScript hiệu quả hơn, đồng thời mang lại tính tin cậy và dễ bảo trì hơn.

TypeScript cho người mới bắt đầu - Đưa mã JavaScript lên một tầm cao mới

<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_b5ccffdddf.png">Chào các bạn chào các bạn chào mừng các bạn đã đến với channel à nhầm 😅 blog của mình.&nbsp;Các bạn đã từng nghe nói về Three.js chưa? nếu chưa thì sau bài viết này các bạn sẽ muốn tìm hiểu thêm về nó đấy. Đây là một thư viện rất thú vị của javascript giúp chúng ta thoải mái bay bổng sáng tạo trong vũ trụ 3D đầy màu sắc nhé 🚀.Nhắc lại chút về JavascriptJavaScript là một ngôn ngữ lập trình thông dịch được sử dụng chủ yếu để xây dựng các ứng dụng web tương tác, chạy trên trình duyệt của người dùng. Nó cho phép thực hiện các tác vụ động trên trang web, tương tác với người dùng, kiểm soát các sự kiện, thay đổi nội dung trang web và nhiều hơn nữa. JavaScript cũng được sử dụng để phát triển ứng dụng trên các nền tảng khác nhau như desktop và di động, và là một trong những ngôn ngữ lập trình phổ biến nhất hiện nay.&nbsp;&nbsp;&nbsp; Với đặc điểm này nổi trội này của mình javascript cùng với đồ hoạ 3D đã tạo nên một thư viện mạnh mẽ để sáng tạo đó chính là Three.js.Three.js từ vô vị đến thú vịThree.js là một thư viện JavaScript mã nguồn mở rất bá đạo được sử dụng để tạo và hiển thị đồ họa 3D trong trình duyệt web. Thư viện này cung cấp cho người dùng những công cụ mạnh mẽ để tạo ra các trải nghiệm 3D phức tạp trên web.Three.js được phát triển bởi Ricardo Cabello, còn được gọi là Mr.doob, và là một trong những thư viện 3D phổ biến nhất trên web ngày nay. Three.js được xây dựng trên WebGL, một giao diện lập trình ứng dụng (API) được tích hợp sẵn trong các trình duyệt web hiện đại, cho phép truy cập trực tiếp vào đồ họa 3D của GPU.Tại sao nên dùng Three.jsMột trong những đặc điểm nổi bật của Three.js là khả năng tương tác cao với các thành phần khác của web như HTML, CSS và JavaScript. Thư viện này cũng hỗ trợ các loại hình học phổ biến như hình cầu, hình trụ, hình hộp, hình nón và hình elip. Three.js cũng cung cấp một loạt các chức năng khác nhau để tạo ra các hiệu ứng, động lực học và ánh sáng, giúp người dùng tạo ra những trải nghiệm 3D đa dạng, chân thực và rất là magic✨.<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_a400443c65.png">Các tính năng chính của Three.js bao gồm:<ul style="list-style-type:disc;"><li>Tạo và hiển thị các đối tượng 3D như hình cầu, hình trụ, hình hộp, hình nón và hình elip.&nbsp;</li><li>Các chức năng hỗ trợ tạo ra các hiệu ứng, động lực học và ánh sáng.</li><li>Tích hợp WebGL để tăng cường khả năng đồ họa 3D của GPU.</li><li>Tương tác cao với các thành phần khác của web như HTML, CSS và JavaScript.</li><li>Tích hợp với các thư viện khác như D3.js, React, jQuery và Tween.js.</li></ul><img class="image_resized" style="width:18.95%;" src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_645dd566bd.png"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_da7f971ba3.png">Three.js rất linh hoạt và có thể được sử dụng cho nhiều mục đích khác nhau như tạo ra các trò chơi trực tuyến, mô hình hóa các dự án kiến ​​trúc, tạo ra các bản đồ động, tạo ra các sản phẩm quảng cáo và nhiều hơn nữa. Với các tính năng mạnh mẽ và tích hợp các công nghệ tiên tiến, Three.js là một công cụ tuyệt vời cho các nhà phát triển web muốn tạo ra các trải nghiệm đồ họa 3D đa dạng và ấn tượng trên trang web của mình.Sau đây là một ví dụ cụ thể về ứng dụng của Three.js:<figure class="image image_resized" style="width:20.62%;"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_278f351542.png"></figure><div class="raw-html-embed"><iframe height="300" style="width: 100%;" scrolling="no" title="Colorful Painting🎨" src="https://codepen.io/wakana-k/embed/yLRaEGb?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
 See the Pen <a href="https://codepen.io/wakana-k/pen/yLRaEGb">
 Colorful Painting🎨</a> by Wakana Y.K. (<a href="https://codepen.io/wakana-k">@wakana-k</a>)
 on <a href="https://codepen.io">CodePen</a>.
</iframe></div><div class="raw-html-embed"><iframe height="300" style="width: 100%;" scrolling="no" title="sony" src="https://codepen.io/Joanderson15/embed/qBJxEGm?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
 See the Pen <a href="https://codepen.io/Joanderson15/pen/qBJxEGm">
 sony</a> by Joanderson (<a href="https://codepen.io/Joanderson15">@Joanderson15</a>)
 on <a href="https://codepen.io">CodePen</a>.
</iframe></div>Vì vậy tại sao chúng ta không thử dùng Three.js vào trang web của mình, khách hàng truy cập vào sẽ phải ngạc nhiên đấy! 😎&nbsp;Một số điểm bất cập về Three.jsMặc dù Three.js là một thư viện mạnh mẽ và đa năng trong việc tạo ra các trải nghiệm đồ họa 3D trên web, nhưng cũng có một số bất cập mà bạn nên lưu ý khi sử dụng nó.Đầu tiên, Three.js có một số yêu cầu phần cứng khá cao để chạy mượt mà. Nếu trang web của bạn có quá nhiều đối tượng 3D hoặc các hiệu ứng phức tạp, điều này có thể dẫn đến hiện tượng giật hoặc lag cho người dùng, đây cũng là tại vì nghèo đó 😭😭.Thứ hai, Three.js còn đang trong quá trình phát triển và thường xuyên có các phiên bản cập nhật mới. Điều này có nghĩa là một số tính năng có thể bị thay đổi hoặc gỡ bỏ trong các phiên bản mới nhất, và bạn sẽ cần phải cập nhật mã của mình để đảm bảo tính tương thích.Thứ ba, việc tạo ra các đối tượng 3D phức tạp trong Three.js đòi hỏi một mức độ kiến thức và kỹ năng cao trong lĩnh vực đồ họa 3D. Điều này có nghĩa là nếu bạn không có kinh nghiệm hoặc kiến thức cần thiết, việc sử dụng Three.js để tạo ra các trải nghiệm đồ họa 3D có thể là một thử thách. Thế nên chúng ta hãy học hỏi không chỉ có code dể trãi nghiệm nhiều đều mới mẻ hay ho hơn nữa&nbsp;🙌🏻&nbsp;.Cuối cùng, một số trình duyệt web cũng có thể không tương thích hoàn toàn với Three.js, và điều này có thể dẫn đến các vấn đề về hiển thị hoặc tương tác trên trang web của bạn.KếtĐến đây là hết bài viết rồi trên nhưng nói về Three.js thì vẫn còn nhiều thứ cần để tìm hiểu có rất nhiều tài liệu về Three.js mà chúng ta có thể tìm kiếm trên Internet. Mình sẽ để vài link tham khảo ở đây <a target="_blank" rel="noopener noreferrer" href="https://threejs.org/">Three.js</a>, <a target="_blank" rel="noopener noreferrer" href="https://codepen.io/tag/threejs">Code pen Three.js</a>,&nbsp;Nếu bạn đang quan tâm đến việc phát triển trò chơi trực tuyến, mô hình hóa các dự án kiến ​​trúc, tạo ra các bản đồ động hoặc các sản phẩm quảng cáo độc đáo, Three.js là một công cụ bá đạo rất đáng để thử. Với khả năng tương tác với các thành phần khác của web, tích hợp các công nghệ tiên tiến và các tính năng mạnh mẽ, Three.js sẽ giúp bạn tạo ra các trải nghiệm đồ họa 3D tuyệt vời và đưa trang web của bạn lên một tầm cao mới 🚀.

Three.js là một thư viện JavaScript mã nguồn mở rất bá đạo được sử dụng để tạo và hiển thị đồ họa 3D trong trình duyệt web. Thư viện này cung cấp cho người dùng những công cụ mạnh mẽ để tạo ra các trải nghiệm 3D phức tạp trên web

Tìm hiểu về Three.js thư viện hỗ trợ đồ hoạ 3D

<h1 style="text-align:center;">Triển khai việc tổ chức và lựa chọn các nội dung phù hợp cho từng chủ đề &nbsp;- WordPress</h1>Trong việc tổ chức nội dung trên trang web của bạn, có nhiều trường hợp mà bạn cần sắp xếp các bài viết theo từng chủ đề cụ thể, chẳng hạn như các bài viết về mèo hoặc chó. Hôm nay mình sẽ hướng dẫn các bạn làm điều đó thông qua một demo nho nhỏ. Trước tiên các bạn cần phải cài đặt phần mềm Local WP. Sau đó dùng phần mềm này để tạo ra một trang WordPress. Tiếp theo là cài đặt plugin Advanced Custom Fields, một plugin phổ biến để tổ chức các field cho một post-type hay một page, ....<h3 style="text-align:justify;">1. Tổ chức thư mục:</h3>└── my-theme/ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;├── inc/&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; │ ├── acf/ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; │ &nbsp;│ └── select-post-show-blog-about-product.php &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; │ └── index.php &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;├── post-types/ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; │ &nbsp; &nbsp; &nbsp; &nbsp;└── product/ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; | &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;│ &nbsp; &nbsp; &nbsp; └── index.php &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; | &nbsp; &nbsp; &nbsp; &nbsp; └──index.php &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; └── page-blog-about-product.php &nbsp;<ul><li style="text-align:justify;">my-theme: là theme mà bạn muốn sử dụng.&nbsp;</li><li style="text-align:justify;">inc: chứa các file dùng để custom các filed hay những gì mà bạn muốn cho dự án của mình.&nbsp;</li><li style="text-align:justify;">post-type: đúng như tên gọi dùng để quản lý cái post-type.&nbsp;</li><li style="text-align:justify;">page-blog-about-product.php: dùng để tạo ra một tamplate cho page Blog about product.&nbsp;</li></ul><h3 style="text-align:justify;">2. Viết code</h3>Đầu tiền các bạn nhớ import đầy đủ file:acf/index.php<pre><code class="language-php">&lt;?php
require_once get_template_directory() . "/inc/acf/select-post-show-blog-about-product.php";</code></pre>post-types/index.php<pre><code class="language-php">&lt;?php
require_once get_template_directory() . "/post-types/product/index.php";</code></pre>function.php<pre><code class="language-php">add_filter("use_block_editor_for_post", "__return_false");

require_once get_template_directory() . "/inc/index.php";
require_once get_template_directory() . "/post-types/index.php";</code></pre>Tạo ra một post-type là product để quản lý các sản phẩm của chúng taproduct/index.php<pre><code class="language-php">&lt;?php
add_action('init', 'create_product_type');

function create_product_type()
{
 $labels = array(
 'name' =&gt; _x('Product', 'post type general name'),
 );

 $rewrite = array(
 'slug' =&gt; 'product'
 );

 $args = array(
 'labels' =&gt; $labels,
 'description' =&gt; 'Holds our custom product items',
 'public' =&gt; true,
 'menu_position' =&gt; 10,
 'supports' =&gt; array('title', 'editor', 'thumbnail'),
 'has_archive' =&gt; true,
 'rewrite' =&gt; $rewrite,
 );

 register_post_type('product', $args);
}
</code></pre>Ở demo này mình sẽ tạo một post-type để quả lý các product và một file select-post-show-blog-about-product.php dùng để tạo ra một field select lấy thông tin từ post-type product. Và dùng các function của ACF lấy ra các bài theo từng chủ đề mà bạn muốn.<figure class="image image_resized" style="width:75%;"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Screenshot_2023_04_16_at_18_01_58_Product_blog_Word_Press_6e9f8c0301.png" alt="Screenshot 2023-04-16 at 18-01-58 Product ‹ blog — WordPress.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_Screenshot_2023_04_16_at_18_01_58_Product_blog_Word_Press_6e9f8c0301.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_Screenshot_2023_04_16_at_18_01_58_Product_blog_Word_Press_6e9f8c0301.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_Screenshot_2023_04_16_at_18_01_58_Product_blog_Word_Press_6e9f8c0301.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_Screenshot_2023_04_16_at_18_01_58_Product_blog_Word_Press_6e9f8c0301.png 1000w," sizes="100vw"></figure>Ở đây mình sẽ tạo ví dụ 4 bài. Sau đó tạo ra một trang để hiển hị ra các bài viết này, ở đây mình tạo ra một trang có tên là Blog about product để lấy ra các bài viết.<figure class="image image_resized" style="width:75%;"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Screenshot_2023_04_16_at_18_04_39_Edit_Page_Blog_about_product_blog_Word_Press_e100dd527d.png" alt="Screenshot 2023-04-16 at 18-04-39 Edit Page “Blog about product” ‹ blog — WordPress.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_Screenshot_2023_04_16_at_18_04_39_Edit_Page_Blog_about_product_blog_Word_Press_e100dd527d.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_Screenshot_2023_04_16_at_18_04_39_Edit_Page_Blog_about_product_blog_Word_Press_e100dd527d.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_Screenshot_2023_04_16_at_18_04_39_Edit_Page_Blog_about_product_blog_Word_Press_e100dd527d.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_Screenshot_2023_04_16_at_18_04_39_Edit_Page_Blog_about_product_blog_Word_Press_e100dd527d.png 1000w," sizes="100vw"></figure>Mình sẽ dùng đoạn code sau để tạo ra một custom field select lấy ra hết các bài của post-type productacf/select-post-show-blog-about-product.php<pre><code class="language-php">&lt;?php
add_filter('acf/load_field/name=products', 'get_products');

function get_products($field)
{
 $choices = array();

 $args = array(
 'post_type' =&gt; array('product'),
 'post_status' =&gt; 'publish',
 'posts_per_page' =&gt; -1,
 );

 $query = new WP_Query($args);
 $posts = $query-&gt;posts;

 foreach ($posts as $post) {
 $key = $post-&gt;ID;
 $choices[$key] = $post-&gt;post_title;
 }

 $field['choices'] = $choices;

 return $field;
}
</code></pre>Sau đó mình sẽ dùng ACF để tạo ra các field cho trang Blog about product.<img class="image_resized" style="width:75%;" src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Screenshot_2023_04_16_at_19_25_32_Edit_Field_Group_Page_Blog_about_product_blog_Word_Press_309e3b7c4a.png" alt="Screenshot 2023-04-16 at 19-25-32 Edit Field Group “Page – Blog about product” ‹ blog — WordPress.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_Screenshot_2023_04_16_at_19_25_32_Edit_Field_Group_Page_Blog_about_product_blog_Word_Press_309e3b7c4a.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_Screenshot_2023_04_16_at_19_25_32_Edit_Field_Group_Page_Blog_about_product_blog_Word_Press_309e3b7c4a.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_Screenshot_2023_04_16_at_19_25_32_Edit_Field_Group_Page_Blog_about_product_blog_Word_Press_309e3b7c4a.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_Screenshot_2023_04_16_at_19_25_32_Edit_Field_Group_Page_Blog_about_product_blog_Word_Press_309e3b7c4a.png 1000w," sizes="100vw"><figure class="image image_resized" style="width:75%;"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Screenshot_2023_04_16_at_19_27_02_Edit_Field_Group_Page_Blog_about_product_blog_Word_Press_3781931af5.png" alt="Screenshot 2023-04-16 at 19-27-02 Edit Field Group “Page – Blog about product” ‹ blog — WordPress.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_Screenshot_2023_04_16_at_19_27_02_Edit_Field_Group_Page_Blog_about_product_blog_Word_Press_3781931af5.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_Screenshot_2023_04_16_at_19_27_02_Edit_Field_Group_Page_Blog_about_product_blog_Word_Press_3781931af5.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_Screenshot_2023_04_16_at_19_27_02_Edit_Field_Group_Page_Blog_about_product_blog_Word_Press_3781931af5.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_Screenshot_2023_04_16_at_19_27_02_Edit_Field_Group_Page_Blog_about_product_blog_Word_Press_3781931af5.png 1000w," sizes="100vw"></figure><figure class="image image_resized" style="width:75%;"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Screenshot_2023_04_16_at_19_27_45_Edit_Field_Group_Page_Blog_about_product_blog_Word_Press_ad99bea32e.png" alt="Screenshot 2023-04-16 at 19-27-45 Edit Field Group “Page – Blog about product” ‹ blog — WordPress.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_Screenshot_2023_04_16_at_19_27_45_Edit_Field_Group_Page_Blog_about_product_blog_Word_Press_ad99bea32e.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_Screenshot_2023_04_16_at_19_27_45_Edit_Field_Group_Page_Blog_about_product_blog_Word_Press_ad99bea32e.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_Screenshot_2023_04_16_at_19_27_45_Edit_Field_Group_Page_Blog_about_product_blog_Word_Press_ad99bea32e.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_Screenshot_2023_04_16_at_19_27_45_Edit_Field_Group_Page_Blog_about_product_blog_Word_Press_ad99bea32e.png 1000w," sizes="100vw"></figure>Sau khi chúng ta tạo được một custom field thì chúng ta chỉ cần gán cho một field cùng loại với tên của custom field chúng ta tạo thì các giá trị sẽ được lưu lại.<figure class="image image_resized" style="width:75%;"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Screenshot_2023_04_16_at_18_12_50_Edit_Page_Blog_about_product_blog_Word_Press_7a116b5832.png" alt="Screenshot 2023-04-16 at 18-12-50 Edit Page “Blog about product” ‹ blog — WordPress.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_Screenshot_2023_04_16_at_18_12_50_Edit_Page_Blog_about_product_blog_Word_Press_7a116b5832.png 146w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_Screenshot_2023_04_16_at_18_12_50_Edit_Page_Blog_about_product_blog_Word_Press_7a116b5832.png 467w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_Screenshot_2023_04_16_at_18_12_50_Edit_Page_Blog_about_product_blog_Word_Press_7a116b5832.png 700w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_Screenshot_2023_04_16_at_18_12_50_Edit_Page_Blog_about_product_blog_Word_Press_7a116b5832.png 934w," sizes="100vw"></figure>Công việc của chúng ta lúc này là tổ chức dững liệu cho cho các field mà chúng ta đã tạo cho trang Blog about product. Sau đó dùng đoạn mã sau để lấy các dữ liệu đó ra:<pre><code class="language-php">&lt;h1&gt;Blog about product&lt;/h1&gt;

&lt;?php
if (have_rows('blogs')) :
 while (have_rows('blogs')) : the_row();
 $topic = get_sub_field('topic');
 echo '&lt;h2&gt;' . $topic . '&lt;/h2&gt;';
 echo '&lt;ul class="blogs"&gt;';
 if (have_rows('list_of_products')) :
 while (have_rows('list_of_products')) : the_row();
 $post_id = get_sub_field('products');
 echo '&lt;li&gt;Id: ' . $post_id . ' title:' . get_the_title($post_id) . '&lt;/li&gt;';
 endwhile;
 endif;
 echo '&lt;/ul&gt;';
 endwhile;
endif;</code></pre>Và kết quả chúng ta có được:<figure class="image image_resized" style="width:75%;"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Screenshot_2023_04_16_at_18_16_34_Screenshot_8505d510bf.png" alt="Screenshot 2023-04-16 at 18-16-34 Screenshot.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_Screenshot_2023_04_16_at_18_16_34_Screenshot_8505d510bf.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_Screenshot_2023_04_16_at_18_16_34_Screenshot_8505d510bf.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_Screenshot_2023_04_16_at_18_16_34_Screenshot_8505d510bf.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_Screenshot_2023_04_16_at_18_16_34_Screenshot_8505d510bf.png 1000w," sizes="100vw"></figure>Hy vọng qua bài viết này, bạn sẽ nhận được những cách tiếp cận độc đáo và sáng tạo để tổ chức các bài viết theo chủ đề theo ý muốn của bạn.Các tài liệu tham khảo:<a target="_blank" rel="noopener noreferrer" href="https://www.advancedcustomfields.com/">ACF | Advanced Custom Fields Plugin for WordPress</a><a target="_blank" rel="noopener noreferrer" href="https://developer.wordpress.org/themes/template-files-section/page-template-files/">Page Templates | Theme Developer Handbook</a>

Trong việc tổ chức nội dung trên trang web của bạn, có nhiều trường hợp mà bạn cần sắp xếp các bài viết theo từng chủ đề cụ thể, chẳng hạn như các bài viết về mèo hoặc chó. Mong là bài viết này sẽ cung cấp cho bạn ý tưởng để làm điều đó.

Triển khai việc tổ chức và lựa chọn các nội dung phù hợp cho từng chủ đề  - WordPress

Sao chép đối tượng là một yêu cầu quan trọng trong lập trình JavaScript, và nó đóng vai trò quan trọng trong việc đảm bảo an toàn cho dữ liệu và tránh tình trạng tham chiếu. Trong JavaScript, có hai phương pháp sao chép đối tượng là "Shallow Copy" và "Deep Copy". Tuy nhiên, nhiều nhà phát triển mới trong lĩnh vực này thường gặp khó khăn khi áp dụng các phương pháp này vào thực tế. Vì vậy, trong bài viết này, chúng ta sẽ tìm hiểu cách sao chép đối tượng trong JavaScript một cách dễ dàng và hiệu quả, bao gồm các ví dụ cụ thể và lưu ý quan trọng khi sử dụng các phương pháp này.Trước khi đi vào chi tiết về các phương pháp sao chép đối tượng trong JavaScript, hãy cùng xem xét về ý nghĩa của việc sao chép đối tượng.Trong JavaScript, đối tượng được sử dụng để đại diện cho một thực thể hoặc một tập hợp các thuộc tính và phương thức của một đối tượng cụ thể. Điều này đặc biệt hữu ích trong việc quản lý dữ liệu trong ứng dụng web hoặc các hệ thống máy chủ. Tuy nhiên, khi làm việc với các đối tượng trong JavaScript, bạn cần đôi khi sao chép chúng để đảm bảo an toàn cho dữ liệu và tránh tình trạng tham chiếu.Ví dụ, khi bạn truyền một đối tượng từ một hàm này sang hàm khác trong JavaScript, nếu bạn không sao chép đối tượng đó và chỉ truyền tham chiếu của nó, thì khi các thuộc tính hoặc phương thức bên trong của đối tượng thay đổi, điều này sẽ ảnh hưởng đến tất cả các đối tượng truy cập vào nó. Điều này có thể gây ra những vấn đề không mong muốn trong ứng dụng của bạn và làm cho mã của bạn khó để quản lý và bảo trì.Do đó, sao chép đối tượng là một kỹ thuật quan trọng trong JavaScript giúp bạn giải quyết các vấn đề liên quan đến quản lý dữ liệu và đảm bảo tính ổn định của ứng dụng của bạn. Tiếp theo, chúng ta sẽ xem xét các phương pháp sao chép đối tượng cụ thể trong JavaScript.Như đã nói ở đầu bài biết trong JavaScript có hai phương pháp chính để sao chép đối tượng: "Shallow Copy" và "Deep Copy". Tuy nhiên, cả hai phương pháp này đều có những ưu và nhược điểm riêng, và bạn cần hiểu rõ cách hoạt động của chúng trước khi sử dụng."Shallow Copy" là phương pháp sao chép đối tượng một cách đơn giản bằng cách tạo một bản sao mới của đối tượng gốc và trỏ các thuộc tính của bản sao đó đến các giá trị của đối tượng gốc. Điều này có nghĩa là nếu bất kỳ thuộc tính nào của đối tượng gốc thay đổi, thì các thuộc tính của bản sao cũng sẽ thay đổi theo."Deep Copy" là phương pháp sao chép đối tượng một cách đầy đủ bằng cách tạo ra một bản sao hoàn chỉnh của đối tượng gốc. Điều này bao gồm cả các thuộc tính và các đối tượng con bên trong của đối tượng gốc. Nó đảm bảo rằng nếu bất kỳ thuộc tính nào của đối tượng gốc thay đổi, thì các thuộc tính của bản sao sẽ không bị ảnh hưởng.Tuy nhiên, việc sao chép đối tượng bằng phương pháp "Deep Copy" có thể tốn kém về mặt hiệu suất, đặc biệt là khi sao chép các đối tượng lồng nhau hoặc có kích thước lớn. Do đó, cần phải cân nhắc và lựa chọn phương pháp phù hợp nhất tùy thuộc vào tình huống cụ thể.Trong bài viết này, chúng ta sẽ đi sâu vào từng phương pháp sao chép đối tượng và tìm hiểu cách thực hiện chúng trong JavaScript. Chúng ta cũng sẽ xem xét các ví dụ cụ thể và những lưu ý quan trọng khi sử dụng các phương pháp này.Để bắt đầu, chúng ta sẽ tìm hiểu cách sao chép đối tượng bằng phương pháp "Shallow Copy". Để làm điều này, chúng ta có thể sử dụng một số phương thức như Object.assign() hoặc spread operator.Phương thức Object.assign() được sử dụng để sao chép các thuộc tính của một hoặc nhiều đối tượng và gán chúng vào đối tượng đích. Để sao chép một đối tượng bằng phương pháp "Shallow Copy" sử dụng Object.assign(), chúng ta có thể làm như sau:<pre><code class="language-javascript">const obj1 = { a: 1, b: 2, c: { d: 3 } };
const obj2 = Object.assign({}, obj1);


console.log(obj2); // { a: 1, b: 2, c: { d: 3 } }


obj1.a = 4;
console.log(obj1); // { a: 4, b: 2, c: { d: 3 } }
console.log(obj2); // { a: 1, b: 2, c: { d: 3 } }</code></pre>Trong ví dụ trên, chúng ta đã sử dụng Object.assign() để sao chép đối tượng obj1 vào đối tượng trống {} và gán kết quả vào đối tượng obj2. Bây giờ, nếu chúng ta thay đổi giá trị của thuộc tính a của đối tượng obj1, thì thuộc tính a của đối tượng obj2 không bị ảnh hưởng, bởi vì đối tượng obj2 chỉ là một bản sao mờ nhạt của đối tượng obj1.Ngoài Object.assign(), chúng ta cũng có thể sử dụng spread operator (...) để sao chép đối tượng. Ví dụ:<pre><code class="language-javascript">const obj1 = { a: 1, b: 2, c: { d: 3 } };
const obj2 = { ...obj1 };


console.log(obj2); // { a: 1, b: 2, c: { d: 3 } }


obj1.a = 4;
console.log(obj1); // { a: 4, b: 2, c: { d: 3 } }
console.log(obj2); // { a: 1, b: 2, c: { d: 3 } }</code></pre>Cả Object.assign() và spread operator đều có thể được sử dụng để sao chép các thuộc tính của một hoặc nhiều đối tượng vào đối tượng đích. Tuy nhiên, nếu đối tượng có các thuộc tính là đối tượng hoặc mảng, thì chúng sẽ chỉ được sao chép theo phương pháp "Shallow Copy". Nghĩa là, các thuộc tính đó sẽ trỏ đến cùng một vùng nhớ.Để hiểu rõ hơn về phương pháp "Shallow Copy" và vấn đề liên quan đến các thuộc tính là đối tượng hoặc mảng, chúng ta hãy xem xét ví dụ sau:<pre><code class="language-javascript">const obj1 = { a: 1, b: 2, c: { d: 3 } };
const obj2 = { ...obj1 };


obj2.c.d = 4;


console.log(obj1); // { a: 1, b: 2, c: { d: 4 } }
console.log(obj2); // { a: 1, b: 2, c: { d: 4 } }</code></pre>Ở ví dụ trên, chúng ta sử dụng spread operator (...) để sao chép đối tượng obj1 và gán kết quả vào đối tượng obj2. Sau đó, chúng ta thay đổi giá trị của thuộc tính d của đối tượng c trong đối tượng obj2. Kết quả là cả đối tượng obj1 và obj2 đều bị ảnh hưởng bởi thay đổi này. Điều này xảy ra bởi vì khi chúng ta sao chép đối tượng obj1 bằng spread operator, chúng ta chỉ sao chép giá trị tham chiếu của đối tượng c vào đối tượng obj2. Do đó, khi chúng ta thay đổi giá trị của thuộc tính d trong đối tượng c của đối tượng obj2, giá trị tham chiếu của thuộc tính c trong đối tượng obj1 cũng bị thay đổi theo.Để sao chép đối tượng bằng phương pháp "Deep Copy", chúng ta có thể sử dụng một số thư viện như Lodash hoặc jQuery. Ví dụ, để sao chép đối tượng bằng phương pháp "Deep Copy" sử dụng Lodash, chúng ta có thể làm như sau:<pre><code class="language-javascript">const lodash = require('lodash');


const obj1 = { a: 1, b: 2, c: { d: 3 } };
const obj2 = lodash.cloneDeep(obj1);


obj2.c.d = 4;


console.log(obj1); // { a: 1, b: 2, c: { d: 3 } }
console.log(obj2); // { a: 1, b: 2, c: { d: 4 } }</code></pre>Ở ví dụ trên, chúng ta sử dụng hàm lodash.cloneDeep() của thư viện Lodash để sao chép đối tượng obj1 và gán kết quả vào đối tượng obj2. Bây giờ, khi chúng ta thay đổi giá trị của thuộc tính d trong đối tượng c của đối tượng obj2, đối tượng obj1 không bị ảnh hưởng bởi thay đổi này. Điều này xảy ra bởi vì hàm lodash.cloneDeep() sẽ tạo ra một bản sao mới của đối tượng obj1, bao gồm các thuộc tính và giá trị của nó cũng như tất cả các đối tượng và mảng lồng nhau bên trong. Vì vậy, khi chúng ta thay đổi giá trị của thuộc tính d trong đối tượng c của đối tượng obj2, đối tượng obj1 không bị ảnh hưởng bởi thay đổi này.Tuy nhiên, điều cần lưu ý là phương pháp "Deep Copy" có thể ảnh hưởng đến hiệu suất của ứng dụng vì nó sẽ tạo ra một bản sao đầy đủ của đối tượng ban đầu. Do đó, khi sao chép đối tượng trong ứng dụng của bạn, hãy cân nhắc giữa sự tiện lợi và hiệu suất.Ngoài ra bạn còn có thể “Deep Copy” bằng các cách sau:Sử dụng JSON.stringify và JSON.parse:<pre><code class="language-javascript">const obj1 = { a: 1, b: 2, c: { d: 3 } };
const obj2 = JSON.parse(JSON.stringify(obj1));


obj2.c.d = 4;


console.log(obj1); // { a: 1, b: 2, c: { d: 3 } }
console.log(obj2); // { a: 1, b: 2, c: { d: 4 } }</code></pre>Lưu ý rằng phương pháp này chỉ hoạt động với các đối tượng đơn giản không chứa các hàm hoặc các đối tượng liên quan đến DOM. Nếu bạn muốn sao chép các đối tượng phức tạp hơn, bạn có thể sử dụng các thư viện hỗ trợ như Lodash hoặc jQuery.Hoặc bạn có thể tự viết ra một hàm deep copy bằng cách sử dụng đệ quy.<pre><code class="language-javascript">function deepClone(obj) {
 &nbsp;// Nếu đối tượng không phải là object hoặc là null, không cần sao chép
 &nbsp;if (obj === null || typeof obj !== "object") {
 &nbsp;&nbsp;&nbsp;return obj;
 &nbsp;}


 &nbsp;// Tạo một bản sao mới của đối tượng
 &nbsp;let clone = {};


 &nbsp;// Lặp qua tất cả các thuộc tính của đối tượng
 &nbsp;for (let key in obj) {
 &nbsp;&nbsp;&nbsp;// Kiểm tra xem thuộc tính đó có phải là thuộc tính riêng của đối tượng hay không
 &nbsp;&nbsp;&nbsp;if (obj.hasOwnProperty(key)) {
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Nếu là một đối tượng, gọi đệ quy để tạo ra một bản sao sâu
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (typeof obj[key] === "object") {
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;clone[key] = deepClone(obj[key]);
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} else {
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Nếu là một giá trị nguyên thủy, sao chép giá trị đó sang bản sao mới
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;clone[key] = obj[key];
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
 &nbsp;&nbsp;&nbsp;}
 &nbsp;}


 &nbsp;// Trả về bản sao mới
 &nbsp;return clone;
}


const obj1 = { a: 1, b: 2, c: { d: 3 } };
const obj2 = deepClone(obj1);


obj2.c.d = 4;


console.log(obj1); // { a: 1, b: 2, c: { d: 3 } }
console.log(obj2); // { a: 1, b: 2, c: { d: 4 } }</code></pre>Trong bài viết này, chúng ta đã tìm hiểu về hai phương pháp sao chép đối tượng trong JavaScript là "Shallow Copy" và "Deep Copy", cùng với những điểm mạnh và yếu của từng phương pháp. Khi sao chép đối tượng trong ứng dụng của bạn, hãy cân nhắc sử dụng phương pháp phù hợp để đảm bảo tính chính xác và hiệu suất của ứng dụng của bạn. &nbsp;

Một vài kiến thức bạn nên biết khi làm copy object trong JS

Copy object trong JS

<h1>1. Bug report là gì?</h1><figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_f37c6161ce.png"></figure>- Bug report (báo cáo lỗi) là một tài liệu mô tả chi tiết các lỗi, vấn đề hoặc sự cố xảy ra trong quá trình phát triển hoặc sử dụng phần mềm. Bug report thường được sử dụng để báo cáo cho nhà phát triển hoặc nhóm phát triển về các lỗi cần được sửa chữa, và được sử dụng để giải quyết các vấn đề của phần mềm.&nbsp; - Một bug report thông thường sẽ bao gồm các thông tin như tên của lỗi, mô tả vấn đề, trạng thái lỗi, người báo cáo, ngày và thời gian xảy ra lỗi, và các bước để tái hiện lỗi. Bug report là một công cụ quan trọng trong quá trình kiểm thử phần mềm và hỗ trợ nhà phát triển giải quyết các lỗi và cải thiện chất lượng sản phẩm.<h1> 2. Tại sao cần phải viết bug report tốt?</h1><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_bfa6180d01.png"> Mục tiêu của kiểm thử bảo mật ứng dụng web là đảm bảo rằng ứng dụng không có lỗ hổng bảo mật nào có thể bị tấn công hoặc xâm nhập. Các mục tiêu cụ thể của kiểm thử bảo mật ứng dụng web có thể bao gồm:1. Xác định lỗ hổng bảo mật: Kiểm thử bảo mật ứng dụng web để phát hiện các lỗ hổng bảo mật có thể bị khai thác để tấn công và xâm nhập vào hệ thống.2. Xác định mức độ nghiêm trọng của lỗ hổng: Để đánh giá mức độ nghiêm trọng của các lỗ hổng bảo mật được phát hiện và quyết định ưu tiên xử lý chúng.3. Cải thiện bảo mật của ứng dụng: Bằng cách xác định và khắc phục các lỗ hổng bảo mật, kiểm thử bảo mật ứng dụng web cải thiện chất lượng bảo mật của ứng dụng.4. Đảm bảo tuân thủ các quy định bảo mật: Kiểm thử bảo mật ứng dụng web cũng đảm bảo tuân thủ các quy định, tiêu chuẩn và thủ tục bảo mật được đề ra bởi các tổ chức quản lý an ninh và chính phủ.5. Đảm bảo tính toàn vẹn dữ liệu: Kiểm thử bảo mật ứng dụng web giúp đảm bảo tính toàn vẹn của dữ liệu được lưu trữ và truyền qua ứng dụng.<h1> 3. Những yếu tố nào để đánh giá một bug report tốt</h1><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_14320baf07.png"> - Tự mô tả: Một bug report tốt nên có khả năng mô tả vấn đề chi tiết, rõ ràng, dễ hiểu và đầy đủ để giúp nhà phát triển hiểu được nguyên nhân và cách để khắc phục lỗi một cách nhanh chóng và hiệu quả. - Tính tái sử dụng: Bug report nên được viết sao cho nó có thể tái sử dụng được trong tương lai nếu có cùng vấn đề lỗi. Điều này giúp đơn giản hóa quá trình kiểm tra và sửa chữa lỗi sau này. - Khả năng tái hiện: Bug report nên cung cấp các bước để tái hiện lỗi, giúp cho nhà phát triển có thể chính xác xác định và sửa chữa lỗi một cách nhanh chóng. - Phạm vi ảnh hưởng: Bug report nên xác định rõ ràng phạm vi ảnh hưởng của lỗi đối với sản phẩm hoặc hệ thống. Điều này giúp nhà phát triển đánh giá được tầm quan trọng của vấn đề và đưa ra giải pháp phù hợp. - Thông tin hỗ trợ: Bug report cần cung cấp đầy đủ thông tin hỗ trợ như hệ điều hành, phiên bản phần mềm, phần cứng được sử dụng, thông tin về môi trường kiểm thử, v.v. để giúp nhà phát triển xác định và sửa chữa lỗi một cách hiệu quả. - Trạng thái và ưu tiên: Bug report cần được đánh giá trạng thái và ưu tiên, giúp cho nhà phát triển xác định các vấn đề cần được ưu tiên và giải quyết một cách hiệu quả.<h1>4. Format bug report đơn giản và đầy đủ những thông tin cần thiết</h1><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_02d26cbe6a.png"> - Tiêu đề: Mô tả tóm tắt vấn đề lỗi. - Mô tả vấn đề: Bao gồm các mục sau:<ul style="list-style-type:disc;"><li>Bước để tái hiện lỗi: Mô tả các bước để tái hiện vấn đề.</li><li>Kết quả mong muốn: Mô tả kết quả mong muốn khi thực hiện bước trên.</li><li>Kết quả thực tế: Mô tả kết quả thực tế khi thực hiện bước trên.</li><li>Mô tả chi tiết lỗi: Mô tả chi tiết về vấn đề lỗi, bao gồm thông tin về lỗi như thông báo lỗi, phản hồi không mong đợi, v.v.</li></ul>- Thông tin hỗ trợ:<ul><li>Hệ điều hành: Phiên bản hệ điều hành được sử dụng.</li><li>Trình duyệt: Phiên bản trình duyệt được sử dụng.</li><li>Phiên bản phần mềm: Phiên bản phần mềm hiện tại.</li><li>Môi trường kiểm thử: Mô tả môi trường kiểm thử, bao gồm cả phần cứng và phần mềm.</li></ul>- Phạm vi ảnh hưởng: Mô tả phạm vi ảnh hưởng của lỗi đối với sản phẩm hoặc hệ thống. - Ảnh chụp màn hình (nếu có): Đính kèm ảnh chụp màn hình nếu có thể để giúp nhà phát triển hiểu rõ hơn về vấn đề. - Trạng thái và ưu tiên:<ul><li>Trạng thái: Hiện tại vấn đề đang ở trạng thái gì (như chưa được xác nhận, đã xác nhận, đang được xử lý, ...).</li><li>Ưu tiên: Mức độ ưu tiên của vấn đề, bao gồm cả ưu tiên cao, trung bình và thấp.</li></ul>- Người báo cáo: Tên người báo cáo vấn đề. - Ngày báo cáo: Ngày báo cáo vấn đề. - Tên module hoặc tính năng: Tên module hoặc tính năng của sản phẩm mà vấn đề xảy ra. - Tình trạng môi trường: Tình trạng môi trường khi xảy ra vấn đề, bao gồm thông tin về phiên bản hệ điều hành, phần mềm bảo mật,… - Thông tin thêm: Thông tin bổ sung khác liên quan đến vấn đề, bao gồm tài liệu hướng dẫn, thông tin sản phẩm, …<h1> 5. Một số mẹo nhỏ đảm bảo bạn luôn có một bug report tốt</h1><figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_b7c8aaa2a7.png"></figure>- Thực hiện các bước kiểm thử và ghi chép lại tất cả các bước trong bug report. Điều này giúp đảm bảo rằng các nhà phát triển có thể tái hiện vấn đề một cách chính xác và xác định nguyên nhân của lỗi. - Cung cấp thông tin chi tiết về lỗi, bao gồm thông tin về lỗi, cách thức phát hiện lỗi, các thông báo lỗi, các mã lỗi, ... Nếu có thể, hãy cung cấp ảnh chụp màn hình hoặc video để minh họa vấn đề. - Đưa ra các bước để tái hiện lại vấn đề. Bao gồm tất cả các bước cần thiết để tái hiện vấn đề, kể cả các bước trước và sau khi lỗi xảy ra. - Nêu rõ phạm vi ảnh hưởng của vấn đề, bao gồm các tính năng hoặc chức năng nào bị ảnh hưởng, cách thức mà vấn đề ảnh hưởng đến người dùng, v.v. - Sử dụng các phần mềm quản lý vấn đề để quản lý các bug report. Điều này giúp bạn theo dõi các vấn đề và xử lý chúng theo đúng thứ tự ưu tiên. - Cung cấp thông tin chi tiết về môi trường kiểm thử, bao gồm phiên bản phần mềm, phiên bản hệ điều hành, các phần mềm liên quan khác, v.v. - Chú ý đến ngôn ngữ và cách viết của bạn. Sử dụng ngôn ngữ rõ ràng và tránh sử dụng các thuật ngữ kỹ thuật khó hiểu. - Chú ý đến tính khả thi và tính hiệu quả của các giải pháp đề xuất. Nếu bạn đưa ra các giải pháp, hãy đảm bảo rằng chúng khả thi và hiệu quả. - Cập nhật thông tin về bug report đầy đủ và chính xác. Điều này giúp cho các nhà phát triển có thể theo dõi và giải quyết các vấn đề một cách nhanh chóng và hiệu quả.

Report bug là công việc thường xuyên và liên tục của một người làm test. Bạn nghĩ mình có thể làm gì để một bug report trở nên hoàn chỉnh, ngắn gọn cũng như thể hiện sự chuyên nghiệp và rõ ràng trong từng report.

Làm thế nào để viết một bug report tốt? Một số "tip" nhỏ khi viết bug report.

Chào mừng mọi người đã quay lại với serie học gì chia sẻ nấy và mình là Tuyền. Hôm nay mình sẽ chia sể về một lĩnh mới mà mình học được, đó là Business Analyst. Một phần nhỏ trong số khóa học mình thấy khó thành thạo nhất là viết task theo một khuôn mẫu: Description, requirement, acceptance criteria. Cái khó ở đây là phải viết “acceptance criteria” cho chuẩn và đúng. Và “acceptance criteria” là gì? Làm cách nào để viết nó trở nên đúng và chuẩn?Dưới đây là một khái niệm về “acceptance criteria” hay còn gọi là tiêu chí chấp nhận là các điều kiện mà phần mềm đáp ứng được nhu cầu của user trong user story. Mà user story là gì? Làm thế nào để phân tích đúng và đủ ý của một user story trong một acceptance criteria.<figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_8_4747aab603.png"></figure>User story được hiểu đơn giản là những nhu cầu của khách hàng hoặc người dùng đối với sản phẩm, dịch vụ nhằm tập trung vào nhu cầu và giá trị người dùng. Ví dụ như bạn là người thích đi du lịch và họ mong muốn tìm kiếm một dịch vụ trên nền tảng các thiết bị thông minh (laptop, ipad, điện thoại) vừa đẹp mắt, lại còn dễ sử dụng, thao tác đơn giản, giao diện thông minh,... tất cả các thông tin được thể hiện rõ ràng, rành mạch, cung cấp đủ nhu cầu người dùng. Một ứng dụng nhanh chóng, hiệu quả, tiện lợi.&nbsp;Từ những nhu cầu trên user story sẽ giúp cho các nhà phát triển có cái nhìn tổng quan và hiểu về nhu cầu của người dùng khi đó quá trình xây dựng sản phẩm hoặc dịch vụ phù hợp với nhu cầu đó.Cơ bản khi thực hành nhiều bạn cũng dễ dàng nhận thấy thực ra nó rất giống những nhu cầu trải nghiệm của cá nhân thay vì của khách hàng nữa, đặt vai trò là một khách hàng thì bạn sẽ có những mong muốn gì? Muốn tìm hiểu một giải pháp công nghệ tốt, đáp ứng cho nhu cầu cá nhân, đó là những vấn đề cần đặt ra ngay trong đầu đối với mỗi BA. Cách phân tích vấn đề, viết tiêu chuẩn chấp nhận là phương pháp giúp chúng ta khái quát, tổng hợp hóa các yêu cầu đó thành nhiều trường hợp, hướng giải quyết tối ưu. Để team dev làm việc thuận lợi và suôn sẻ thì bạn chính là cầu nối giữa user và team dev.&nbsp;Đi sau hơn vào việc phân tích và viết task thì mỗi BA sẽ có cách viết riêng nhưng cơ bản cũng dựa trên theo phương pháp chung: description, requirement, acceptance criteria. Còn riêng mình thì sau khi tìm hiểu và học hỏi thì mình đúc kết được nhanh gọn để viết một task vừa đúng, chuẩn và đạt ưu cầu user, cụ thể: Bước 1: Nhận yêu cầu, tìm hiểu kĩ vấn đề, mô tả (description).Bước 2: Khai thác, phân tích và chia nhiều tình huống cho vấn đề đó để tìm ra giải pháp tối ưu dựa theo các yêu cầu mà khách hàng đưa ra (requirement).Bước 3: Liệt kê các hướng cần làm, cần xử lý, mô tả cụ thể, chi tiết, minh họa bằng hình ảnh để giúp việc hoàn thành task trở nên thuận lợi hơn đồng thời đưa ra kết quả mong muốn (acceptance criteria).<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Acceptance_Criteria_e26845ecfb.png"> Một ví dụ dễ hiểu cho quá trình này:User Story: Là một khách hàng, tôi muốn đặt hàng trực tuyến để mua sản phẩm từ cửa hàng, để tiết kiệm thời gian và thuận tiện hơn.Acceptance Criteria: Khách hàng có thể truy cập trang web của cửa hàng và đăng nhập vào tài khoản của mình. Khách hàng có thể xem danh sách các sản phẩm và chi tiết của từng sản phẩm gồm: giá cả, hình ảnh, mô tả và số lượng sản phẩm còn lại. Khách hàng có thể thêm sản phẩm vào giỏ hàng của mình bằng cách nhấp vào nút "Thêm vào giỏ hàng". Để mua sản phẩm, khách hàng có thể nhấn mua và thực hiện hình thức thanh toán phù hợp hoặc vào phần giỏ hàng để xác nhận số lượng sản phẩm và tổng chi phí của đơn hàng và xác nhận hình thức thanh toán phù hợp, sau đó nhập thông tin và xác nhận đơn hàng. Khách hàng nhận được xác nhận đơn hàng và số lượng sản phẩm đã đặt hàng qua email hoặc tin nhắn. Hệ thống giảm số lượng sản phẩm còn lại trong kho sau khi khách hàng đặt hàng thành công.Ngoài việc làm một BA phân tích requirement của user cho team dev, thì BA còn là người giúp gợi ý, đề xuất hướng giải quyết hoặc tư vấn giải pháp tốt cho khách hàng. Bởi, sẽ có nhiều khách hàng họ tìm đến mình chỉ muốn làm website mà nhu cầu họ không có nhiều hoặc họ không biết họ muốn gì thứ họ quan tâm là một website có thể pr thương hiệu của họ giúp họ cải thiện năng suất kinh doanh và được nhiều người biết đến thì bạn sẽ là người tư vấn giúp họ. Còn đối với khách hàng họ đã biết họ muốn gì thì nhiệm vụ của bạn sẽ rất dễ dàng đó là xem nhu cầu của họ, team dev có đáp ứng được không? nếu không thì chúng ta đề xuất hướng giải quyết tối ưu vừa vừa lòng khách hàng mà cũng vừa thuận lợi cho team dev.&nbsp;Tóm lại, BA có thể giúp team dev phát triển sản phẩm bằng cách hiểu rõ yêu cầu của khách hàng, tạo và phân tích các tài liệu yêu cầu, điều phối giữa khách hàng và team dev, kiểm tra và đánh giá sản phẩm, hỗ trợ việc phân tích dữ liệu và điều chỉnh yêu cầu khi cần thiết. Vai trò của BA trong mỗi dự án rất quan trọng, không những là một người có kiến thức rộng mà còn là người có nhiều kĩ năng mềm khác. Bạn không có nhiều kiến thức hay kĩ năng đừng lo những thứ đó môi trường sẽ tôi luyện cho bạn. Bởi, khi bạn vào một môi trường làm việc nào đó bạn không muốn giỏi, không muốn học thì bạn cũng không thể từ chối được. Cách mà bạn có thể làm và duy trì tốt trong môi trường đó là nỗ lực cố gắng không ngừng để trau dồi kiến thức liên quan. Ai cũng có lần đầu mà, nên cứ làm vấp ngã ta đứng dậy đó là cách trưởng thành sau mỗi bài học.&nbsp;Trên đây, là toàn bộ kiến thức mình đúc kết từ việc viết task. Hi vọng sẽ giúp ích được cho các bạn. Cảm ơn bạn đọc tới đây.Hẹn các bạn ở blog tiếp theo nhé và mình là Tuyền.&nbsp;Bài viết được tạo bởi ChatGPT và đã được chỉnh sửa.

Acceptance criteria” hay còn gọi là tiêu chí chấp nhận là các điều kiện mà phần mềm đáp ứng được nhu cầu của user trong user story.

Tìm hiểu về Acceptance Criteria?

Chào mừng mọi người đã quay lại với series học gì chia sẻ nấy và mình là Tuyền. Hôm nay mình sẽ chia sẻ những vấn đề gặp phải khi là một beginner bước chân vào ngành lập trình. Cụ thể đối với mình là về code, design. Và đây là câu chuyện cá nhân của mình.Dưới đây là những bài học và kinh nghiệm của mình khi gặp phải. Vậy nên nếu có gì thiếu sót và không đúng thì mong bạn đọc bỏ qua.&nbsp; Đối với một beginner khi mới bước chân vào ngành lập trình kinh nghiệm chưa có, kiến thức chưa vững thì rất dễ dàng mắc phải những sai lầm không đáng có cụ thể:&nbsp;1. Đối với mình từng là dân coder thì khi code cũng hay gặp bug. Cụ thể các lỗi:<ol><li>Lỗi cú pháp khi code không đúng với cấu trúc ngôn ngữ. Ví dụ, khi bạn code một đoạn code HTML như sau:</li></ol><pre><code class="language-html">&lt;html&gt;
&lt;head&gt;
 &lt;title&gt;Trang web của tôi&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;h1&gt;Xin chào các bạn
 &lt;/body&gt;
&lt;/html&gt;</code></pre>Lỗi: thiếu thẻ đóng &lt;/h1&gt; Sửa lỗi: &lt;h1&gt;Xin chào các bạn &lt;/h1&gt;<ul><li>Lỗi logic là đoạn code viết hoạt động không đúng như mong muốn. Ví dụ, khi bạn viết một đoạn code Javascript&nbsp; về tính tổng hai số tự nhiên (1+1=2) nhưng kết quả lại là 11 thì đây là kết quả không mong muốn thể hiện qua đoạn code sau:</li></ul><pre><code class="language-javascript">let a = "1";
let b = "1”
let c = a+b;
console.log("Kết quả là:", c);
→ Kết quả: c = 11</code></pre>Lỗi: Kết quả mong muốn của chúng ta là c=a+b (c=1+1) kết quả sẽ là 2 nhưng kết quả chúng ta nhận được c=11. Nguyên nhân là khi khai báo bạn lại khai báo biến a, b là chuỗi nên khi chạy kết quả sẽ tự hiểu là nối chuỗi. Sửa lỗi: Khai báo biến đúng mục đích sử dụng nếu muốn tính tổng 2 số tự nhiên thì khai báo như sau:<pre><code class="language-javascript">let a = 1;
let b = 1;
let c = a+b;
console.log("Kết quả là:", c);
→ Kết quả: c = 2, đây là kết quà mong muốn của chúng ta.</code></pre><ul><li>Hiệu suất chậm là khi bạn code nhiều thứ dư thừa không cần thiết khiến cho đoạn code chạy trở nên phức tạp và lâu. Vậy nên hãy hạn chế code dư thừa. Code sạch, đủ để tốc độ build trở nên mượt và nhanh hơn.</li><li style="text-align:justify;">Thiếu sự bảo mật: Khi một client gửi request thì dân coder sẽ ẩn token đó đi (được gọi là Cross-site request forgery (CSRF). Nếu không ẩn đi thì thông tin user sẽ bị lộ và dễ dàng bị đánh cắp,...</li><li style="text-align:justify;">Không tương thích: có thể không tương thích phiên bản phần mềm, hệ điều hành,... thì source sẽ không dùng được. Ví như source code bạn code ở Nodejs (version 16) nhưng khi bạn download về bạn lại chạy nó ở phiên bản Nodejs (version 14) tất nhiên sẽ khiến cho source code gặp lỗi. Vậy nên hãy chú ý version hệ diều hành,...</li><li style="text-align:justify;">Thiếu kiểm tra lỗi và thử nghiệm: đối với một beginer thì việc này rất dễ gặp sai lầm. Bởi, khi code mình gặp vấn đề khó mà tìm được hướng giải quyết thì cảm giác đầu tiên là rất vui mà khi đó mong muốn hoàn thành sớm target nên vội vàng gửi pull request nhưng lại không kiểm tra lại code, không format code, không test kĩ nhiều trường hợp,... nên dễ dàng bị leader mắng đốn.&nbsp;</li></ul><figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_369_8c94407cfa.png"></figure>Vì vậy, để tránh phạm sai lầm không đáng có thì chúng ta nên trau kiến thức, kĩ năng nhiều hơn. Một beginner thì có thể thiếu kinh nghiệm, phạm sai lầm nhưng thời gian sẽ cho bạn học hỏi nhiều thứ, khi đó bạn có thể rút kinh nghiệm dần. Nhưng lỗi sai lần đầu biết và học được thì hạn chế đừng để tái phạm lần hai, bởi không ai tắm hai lần trên một dòng sông.&nbsp;2. Ngoài là một beginner trong code thì mình còn là một beginner trong design. Dân mới bước vào nghề nên không tránh việc&nbsp;gặp nhiều sai sót, cụ thể:&nbsp;<ul><li style="text-align:justify;">Design sai không theo tỉ lệ chuẩn.</li><li style="text-align:justify;">Design sai yêu cầu khách hàng, do không hiểu hết yêu cầu mà khách hàng cung cấp. Không tập trung vào người dùng cuối.</li><li style="text-align:justify;">Tạo ra một thiết kế không thân thiện người dùng.</li><li style="text-align:justify;">Không đảm bảo tính nhất quán trong thiết kế.</li><li style="text-align:justify;">Không có đầy đủ phiên bản ở nhiều nền tảng (desktop, tablet, mobile).</li></ul><figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_370_03aa82a18d.png"></figure>Vậy nên để có 1 bản thiết kế đẹp, thuận lợi cho người dùng một designer phải cần có nhiều cái nhìn tổng quan về website, một tí kiến thức về code, tìm hiểu kĩ về lĩnh vực và yêu cầu mà khách hàng đề xuất, có kiến thức về lĩnh vực thiết kế. Theo quan điểm cá nhân mình thì tập trung theo tiêu chí đơn giản, thuận tiện người dùng và đẹp mắt. 3. Khi một bản design hoàn thành thì nhiệm vụ tiếp theo là dành cho dân coder là biến thiết kế thành website động theo yêu cầu khách hàng. Nhưng để một dân coder mà code chuẩn và cho ra sản phẩm hoàn hảo thì cũng rất khó. Bởi khi code theo design thì cũng rất khó bởi không đáp ứng được các tiêu chí sau:&nbsp;<ul><li style="text-align:justify;">Không hiểu rõ yêu cầu hoặc không hỏi ý kiến của người leader, design khi cần, họ có thể không đáp ứng được các yêu cầu của khách hàng.</li><li style="text-align:justify;">Không hiểu rõ design và thiếu sáng tạo: phân tích design sai hướng khiến cho việc code bị sai lệch. Thiếu sáng tạo, họ có thể không tìm ra các giải pháp tối ưu và dẫn đến mã lặp đi lặp lại, khó bảo trì và không hiệu quả.</li><li style="text-align:justify;">Không kiểm tra kĩ giữa bản code và bản design khiến cho website không giống design.</li></ul><figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_371_6cc2621345.png"></figure>Vậy nên trước khi code, dân coder phải họp và bàn bạc kĩ với design về yêu cầu và mục đích sử dụng của khách hàng và website. Sau đó team dev sẽ họp với nhau để phân tích design và tìm hướng đi để code nhanh và sạch. Trên đây, là những gì mình gặp phải khi là một beginner mới bước chân vào nghề. Chắc hẳn rồi ai cũng sẽ phải vấp ngã nên mình hi vọng các bạn đọc, đọc được bài viết của mình sẽ rút được những kinh nghiệm và bài học cho bản thân. Còn đối với mình, sau khi trải qua hành trình học và làm việc tại công ty ABC Software Company Solution thì mình đã học được rất nhiều thứ: kinh nghiệm từ những đàn anh/đàn chị đi trước, cải thiện được những khuyết điểm mà bản thân mình hay mắc phải: việc cẩu thả khi code, không kiểm tra code, format code trước khi gửi pull request, không kiểm tra bản code với design,... Tóm lại, thứ mình học được sau khi đi làm là tính cẩn thận, sự tự giác về việc học và tìm hiểu công nghệ (bởi ngành IT tụi mình thì kiến thức luôn cập nhật liên tục) và trách nhiệm của bản thân đối với mỗi sản phẩm mình làm. Hi vọng, các bạn sẽ không vướng phải nhiều sai lầm khi trở thành một dân coder, designer như mình nhé.&nbsp; Cảm ơn bạn đọc đến đây. Hẹn các bạn ở blog tiếp theo nhé và mình là Tuyền. Bài viết được tạo bởi ChatGPT và đã được chỉnh sửa.

Đây là câu chuyện chia sẻ những vấn đề gặp phải khi là một beginner bước chân vào ngành lập trình. Cụ thể đối với mình là về code, design.

Câu chuyện của một Beginner  bước chân vào nghề

Để đảm bảo chất lượng và độ tin cậy của phần mềm, việc viết code đầy đủ và đúng chuẩn là rất quan trọng. Để giúp các nhà phát triển phần mềm làm việc hiệu quả và tiết kiệm thời gian, cộng đồng phát triển phần mềm đã thiết lập một số quy tắc viết code đầy đủ mà mọi nhà phát triển đều nên tuân thủ.Quy tắc viết code đầy đủ bao gồm các quy tắc về định dạng, cú pháp, tên biến và hàm, và phong cách lập trình. Để bắt đầu, việc đặt tên biến và hàm rõ ràng và dễ hiểu là rất quan trọng để giúp người khác đọc và hiểu code của bạn. Các biến và hàm nên được đặt tên một cách mô tả và thể hiện đúng chức năng của chúng trong phần mềm.Định dạng cú pháp của code cũng là một yếu tố quan trọng. Các nhà phát triển nên sử dụng đúng khoảng trắng và dấu ngoặc đóng/mở để làm cho code dễ đọc hơn. Việc thêm chú thích (comment) cũng là một phương pháp tuyệt vời để giải thích code và làm cho nó dễ hiểu hơn.Phong cách lập trình là một yếu tố khác cũng rất quan trọng. Việc sử dụng các quy tắc nhất định, như sử dụng biến địa phương (local variable) thay vì biến toàn cục (global variable), có thể giúp giảm thiểu lỗi và làm cho code dễ hiểu hơn.Tóm lại, việc viết code đầy đủ và đúng chuẩn là rất quan trọng trong việc phát triển phần mềm. Bằng cách tuân thủ các quy tắc viết code đầy đủ, các nhà phát triển có thể tăng tính tin cậy và hiệu quả của phần mềm, đồng thời cũng giúp cho việc đọc và hiểu code trở nên dễ dàng hơn. Sau đây là các qui tắc viết mã:<h3 style="margin-left:0px;">HTML</h3><ol style="list-style-type:decimal;"><li style="margin-left:0px;">Đảm bảo sử dụng cú pháp đúng trong viết HTML, bao gồm đó là đóng thẻ (tag) đầy đủ, đặt tên thẻ đúng cách và sử dụng các thuộc tính (attributes) đầy đủ. Ví dụ khi dùng thẻ &lt;img&gt; phải có thuộc tính alt, dùng thẻ &lt;a&gt; phải có thuộc tính href…</li><li style="margin-left:0px;">Sử dụng các thẻ (tag) hợp lý cho các thành phần khác nhau của trang web, chẳng hạn như sử dụng thẻ &lt;h1&gt; cho các tiêu đề trong trang, thẻ &lt;p&gt; cho đoạn văn bản, thẻ &lt;ul&gt; và &lt;li&gt; cho danh sách...</li><li style="margin-left:0px;">Đặt tên id và class đúng cách giúp cho việc viết CSS và JavaScript dễ dàng hơn.</li></ol>Ví dụ:<pre><code class="language-html">&lt;button class="btn-customize"&gt;Customize&lt;/button&gt;
&lt;input class="txt-firstname" name="firstname" /&gt;
&lt;input type="checkbox" class="chk-publish" /&gt;</code></pre>Theo ví dụ trên chúng ta sẽ tạo sẽ có 1 prefix tương ứng với từng loại phần tử (<code>btn-</code>, <code>txt-</code>, <code>chk-</code>). Điều này giúp chúng ta nhận biết nhanh nó là gì khi đọc code. Có một số quy tắc đặt tên phổ biến như <code>kebab-case</code>, <code>snake_case</code>, <code>camelCase</code>. Khuyến nghị sử dụng <code>kebab-case</code>.<h3 style="margin-left:0px;">JAVSCRIPT</h3>Khuyến nghị sử dụng AirBnb style guide: <a target="_blank" rel="noopener noreferrer" href="https://github.com/airbnb/javascript">https://github.com/airbnb/javascript</a>Airbnb JavaScript Style Guide là một tài liệu hướng dẫn về việc viết code JavaScript được phát triển bởi Airbnb, một trong những công ty công nghệ hàng đầu thế giới. Tài liệu này cung cấp những qui định và hướng dẫn chi tiết về cách viết code JavaScript nhằm đảm bảo tính nhất quán, dễ đọc và dễ bảo trì của mã nguồn. Dưới đây là những lý do tại sao nên sử dụng AirBnb JavaScript Style Guide:<ol style="list-style-type:decimal;"><li>Tăng tính nhất quán: Khi các lập trình viên tuân thủ cùng một quy tắc, code của họ sẽ có tính nhất quán hơn, dễ đọc và dễ hiểu hơn. Điều này giúp cho công việc kiểm tra và bảo trì code dễ dàng hơn.</li><li>Giảm lỗi: Mã nguồn được tuân thủ theo một quy tắc cụ thể sẽ giảm thiểu số lỗi được tạo ra trong quá trình viết và bảo trì code. Ngoài ra, nếu phát hiện lỗi, người kiểm tra code cũng dễ dàng tìm ra vị trí của lỗi và sửa chữa nhanh chóng hơn.</li><li>Tăng tính bảo mật: Việc tuân thủ các quy tắc trong AirBnb JavaScript Style Guide sẽ giúp đảm bảo tính bảo mật của mã nguồn JavaScript. Ví dụ như việc sử dụng các phương thức bảo mật để xử lý dữ liệu đầu vào sẽ giảm thiểu nguy cơ bị tấn công.</li><li>Tiết kiệm thời gian: Các quy tắc trong AirBnb JavaScript Style Guide được thiết kế để giúp cho lập trình viên viết code nhanh hơn và hiệu quả hơn. Nó giúp cho nhóm phát triển có thể tiết kiệm được thời gian khi làm việc với mã nguồn JavaScript.</li></ol>Sử dụng các quy tắc được thiết kế bởi các chuyên gia: Airbnb JavaScript Style Guide được phát triển bởi các chuyên gia về lập trình JavaScript, nên các quy tắc và hướng dẫn được đưa ra đều là những kinh nghiệm thực tế trong quá trình phát triển sản phẩm. Việc sử dụng các quy tắc này sẽ giúp cho các nhà phát triển tránh được các lỗi thường gặp và phát triển ứng dụng JavaScript tốt hơn.<h3 style="margin-left:0px;">CSS/SASS</h3>SMACSS: <a target="_blank" rel="noopener noreferrer" href="http://smacss.com/book/categorizing">http://smacss.com/book/categorizing</a> BEM: <a target="_blank" rel="noopener noreferrer" href="https://aptech.fpt.edu.vn/bem-la-gi.html">https://aptech.fpt.edu.vn/bem-la-gi.html</a>BEM là một phương pháp đặt tên class cho các phần tử HTML và CSS, giúp cho việc phát triển và bảo trì trang web dễ dàng hơn. Để sử dụng BEM trong viết CSS, hãy tuân theo các qui tắc sau:<ol style="list-style-type:decimal;"><li>Sử dụng tiền tố để phân biệt khối (Block)</li><li>Sử dụng dấu gạch ngang (--) để phân biệt các thành phần tử (Element):</li><li>Sử dụng dấu gạch dưới (__) để phân biệt các trạng thái của element (Modifier):</li><li>Đặt tên class rõ ràng và có ý nghĩa: Đặt tên class theo ý nghĩa của nó để giúp cho việc đọc và hiểu code dễ dàng hơn.</li><li>Tránh đặt tên quá dài hoặc phức tạp: Đặt tên class ngắn gọn và dễ đọc để giảm thiểu sự phức tạp của code.</li><li>Sử dụng Sass hoặc các công cụ hỗ trợ để tạo ra CSS BEM dễ dàng hơn: Sử dụng các công cụ hỗ trợ như Sass để tạo ra CSS BEM dễ dàng hơn và giảm thiểu thời gian viết code. &nbsp;</li></ol>Ví dụ:<pre><code class="language-html">&lt;div class="card card--large"&gt;
 &lt;div class="card__header"&gt;
 &lt;h2 class="card__title"&gt;Title&lt;/h2&gt;
 &lt;/div&gt;
 &lt;div class="card__content"&gt;
 &lt;p class="card__description"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/p&gt;
 &lt;/div&gt;
 &lt;div class="card__footer"&gt;
 &lt;button class="card__button card__button--primary"&gt;Button&lt;/button&gt;
 &lt;/div&gt;
&lt;/div&gt;</code></pre><pre><code class="language-css">.card {
 background-color: #fff;
 border-radius: 4px;
 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 padding: 20px;
}

.card--large {
 padding: 40px;
}

.card__header {
 margin-bottom: 20px;
}

.card__title {
 font-size: 24px;
 font-weight: 700;
 margin: 0;
}

.card__content {
 margin-bottom: 20px;
}

.card__description {
 font-size: 16px;
 margin: 0;
}

.card__footer {
 display: flex;
 justify-content: flex-end;
}

.card__button {
 background-color: #007bff;
 border: none;
 border-radius: 4px;
 color: #fff;
 cursor: pointer;
 font-size: 16px;
 font-weight: 700;
 padding: 10px 20px;
 transition: background-color 0.2s ease-in-out;
}

.card__button--primary {
 background-color: #28a745;
}

.card__button:hover {
 background-color: #0069d9;
}</code></pre>Trong ví dụ này, chúng ta sử dụng cú pháp block__element--modifier để đặt tên cho các class CSS. Block được định nghĩa là phần tử gốc, Element là các phần tử con của Block, Modifier là các thuộc tính cải tiến hoặc đổi mới của Block hoặc Element.Trong ví dụ này, Block là .card, Element là .card__header, .card__title, .card__content, .card__description, .card__footer, .card__button, Modifier là .card--large, .card__button--primary. Việc sử dụng BEM giúp cho CSS dễ đọc và bảo trì hơn, đồng thời giúp tránh xung đột giữa các class và giảm thiểu số lượng CSS cần viết.Bài viết được tạo bởi ChatGPT và đã được chỉnh sửa.&nbsp;

Để đảm bảo chất lượng và độ tin cậy của phần mềm, việc viết code đầy đủ và đúng chuẩn là rất quan trọng. Để giúp các nhà phát triển phần mềm làm việc hiệu quả và tiết kiệm thời gian, cộng đồng phát triển phần mềm đã thiết lập một số quy tắc viết code đầy đủ mà mọi nhà phát triển đều nên tuân thủ.

Quy tắc viết code.

Xin chào các bạn, mình là Linh đây. Như chúng ta đã biết, những người làm tester thưở ban đầu thường hay test các chức năng của một web app một cách thủ công, gọi là manual test. Nhưng mà việc test thủ công hay bị lặp đi lặp lại các thao tác quen thuộc như đăng nhập đăng ký, bấm nút bất kì, ... Và việc đó sẽ tiếp tục diễn ra mỗi khi developer cập nhật tính năng mới, tester phải chịu khó test lại từ đầu toàn bộ chức năng, thành ra manual test sẽ không mang lại nhiều hiệu quả cho quy trình làm việc. Từ đó đã có nhiều loại hình thức test tự động như unit test, E2E cùng với các công cụ test như Selenium, Cypress, Playwright. Một trong những công cụ phổ biến mà chúng ta hay dùng chính là Cypress. Chúng ta cùng nhau tìm hiểu nó.<h1>1. Các hình thức test phổ biến:</h1><h2>E2E</h2><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/e2e_730147bad1.png" alt="e2e.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_e2e_730147bad1.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_e2e_730147bad1.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_e2e_730147bad1.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_e2e_730147bad1.png 1000w," sizes="100vw">Kiểm thử End to End (E2E) là một phương pháp kiểm thử để kiểm tra luồng hoạt động của ứng dụng từ đầu đến cuối. Mục đích của thử nghiệm E2E là mô phỏng kịch bản của người dùng thực, xác nhận hệ thống đang được thử nghiệm và các thành phần của nó để tích hợp và toàn vẹn dữ liệu.<h1>Unit test:<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/unit_test_324a838acd.png" alt="unit-test.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_unit_test_324a838acd.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_unit_test_324a838acd.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_unit_test_324a838acd.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_unit_test_324a838acd.png 1000w," sizes="100vw"></h1>Unit test là mức độ kiểm thử nhỏ nhất trong quy trình kiểm thử phần mềm. Unit test kiểm thử các đơn vị nhỏ nhất trong mã nguồn như method, class, module...Do đó Unit test nhằm kiểm tra mã nguồn của các chương trình, các chức năng riêng rẽ hoạt động đúng hay không.Unit testing được thực hiện bởi lập trình viên.<h1>2. Cypress là gì:</h1><figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/cy_logo_f5b96f6abc.jpeg"></figure>Cypress là front end testing tool được xây dựng cho các ứng dụng Web hiện đại. Đây là một công cụ hỗ trợ hữu hiệu cho developers và QA trong kiểm thử ứng dụng Web hiện đại. Cypress khá giống với selenium, nhưng mạnh mẽ hơn, dễ sử dụng vì được viết bằng Javascript, hỗ trợ nhiều hình thức test khác nhauCypress hỗ trợ chúng ta:<ul><li>Viết unit test, e2e,…</li><li>Chạy nhiều testcase.</li><li>Xem lại kết quả của từng bước test</li></ul>&nbsp;<h1>3. Setup và chạy giao diện điều khiển của Cypress:</h1><ul><li>Cần có Node.JS phiên bản 16 trở lên</li><li>Khuyến khích sử dụng package manger là yarn thay vì npm</li><li>Mở terminal và chạy lệnh sau để cài đặt cypress:</li></ul><pre><code class="language-plaintext">mkdir cypress-tool &amp;&amp; cd cypress-tool
yarn add cypress -dev</code></pre><ul><li>Mở giao diện cypress lên bằng lệnh sau:</li></ul><pre><code class="language-plaintext">npx cypress open</code></pre><ul><li>Giao diện cypress hiện lên, màn hình chọn loại hình thức test xuất hiện, ở đây sẽ có sẵn hai kiểu hình thức test là unit test và component test. Chúng ta sẽ chọn hình thức test là Unit Test, và chọn trình duyệt để test là Chrome.</li></ul><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/cypress_gui_select_e2e_99f5904ae1.gif" alt="cypress-gui-select-e2e.gif"><ul><li>Giao diện quản lý các test case sẽ mở ra trong cửa sổ chrome mới với địa chỉ là <a target="_blank" rel="noopener noreferrer" href="http://localhost:64478/__/#/specs">http://localhost:64478/__/#/specs</a>&nbsp;</li><li>Thanh công cụ bên trái sẽ bao gồm:<ul><li>Specs: Quản lý các file testcase, có thể lưu các test case theo từng thư mục cụ thể để dễ dàng quản lý và chạy code. Ngoài ra, ta cũng có thể tạo test case mẫu từ Scaffold example specs.</li></ul></li></ul><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/cypress_specs_344e7a7b4e.gif" alt="cypress-specs.gif"><ul><li>Runs: Là nơi ta xem các bản ghi testcase có sẵn từ dịch vụ đám mây của Cypress, theo dõi và debug các testcase bị thất bại với biểu đồ trực quan cùng với các công cụ phân tích mạnh mẽ<img class="image_resized" style="width:84.78%;" src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_baec815dfc.png"></li><li>Settings: Là nơi cấu hình project như: Cấu hình các đuôi file testcase mà cypress có thể đọc ('cypress/e2e/**/*.cy.{js,jsx,ts,tsx}'). Thử nghiệm các tính năng nâng cao như quản lý bộ nhớ, hỗ trợ webkit,… &nbsp;Cấu hình proxy, cấu hình cypress cloud.</li></ul><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/cypress_settings_ed2dacd687.gif" alt="cypress-settings.gif"><h1>4. Tạo 1 testcase đơn giản:</h1>Trước khi bắt đầu tạo testcase, chúng ta hãy cùng nhau xem qua cấu trúc thư mục của project demo mà ta đã tạo ở bước 1:<figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_d2035cadae.png"></figure>Các testcase có đuôi .cy.js sẽ được lưu trong thư mục e2e.Chúng ta hãy tạo 1 file test cypress/e2e/1-getting-started/todo.cy.js:<pre><code class="language-javascript">/// &lt;reference types="cypress" /&gt;


describe('example to-do app', () =&gt; {
 beforeEach(() =&gt; {
 cy.visit('https://example.cypress.io/todo')
 })

 it('displays two todo items by default', () =&gt; {
 cy.get('.todo-list li').should('have.length', 2)
 cy.get('.todo-list li').first().should('have.text', 'Pay electric bill')
 cy.get('.todo-list li').last().should('have.text', 'Walk the dog')
 })

 it('can add new todo items', () =&gt; {

 const newItem = 'Feed the cat'
 cy.get('[data-test=new-todo]').type(`${newItem}{enter}`)

 cy.get('.todo-list li')
 .should('have.length', 3)
 .last()
 .should('have.text', newItem)
 })

 it('can check off an item as completed', () =&gt; {

 cy.contains('Pay electric bill')
 .parent()
 .find('input[type=checkbox]')
 .check()


 cy.contains('Pay electric bill')
 .parents('li')
 .should('have.class', 'completed')
 })

 context('with a checked task', () =&gt; {
 beforeEach(() =&gt; {
 cy.contains('Pay electric bill')
 .parent()
 .find('input[type=checkbox]')
 .check()
 })

 it('can filter for uncompleted tasks', () =&gt; {

 cy.contains('Active').click()

 cy.get('.todo-list li')
 .should('have.length', 1)
 .first()
 .should('have.text', 'Walk the dog')

 cy.contains('Pay electric bill').should('not.exist')
 })

 it('can filter for completed tasks', () =&gt; {

 cy.contains('Completed').click()

 cy.get('.todo-list li')
 .should('have.length', 1)
 .first()
 .should('have.text', 'Pay electric bill')

 cy.contains('Walk the dog').should('not.exist')
 })

 it('can delete all completed tasks', () =&gt; {
 cy.contains('Clear completed').click()

 cy.get('.todo-list li')
 .should('have.length', 1)
 .should('not.have.text', 'Pay electric bill')

 cy.contains('Clear completed').should('not.exist')
 })
 })
})
</code></pre>Nhìn qua những dòng code trên ta có thể thấy, các code cho từng bước thực hiện testcase thường bắt đầu bằng cy. Vì thế ta sẽ có danh sách các hàm để thực hiện các hành vi tương tác với trang web như:<ul><li>cy.visit ('URL'): Phương thức này là phương thức điều hướng cho Cypress. Nó gọi URL đã cho</li><li>cy.get ('locator'): Phương thức này lấy một đối số là trình</li><li>cy.get('locator').should('attribute or data', value): Phương thức này cho phép ta kiểm tra một hoặc nhiều đối tượng element mà mình truy vấn được có chứa thuộc tính hoặc giá trí thoả mãn kết quả mình mong muốn.</li><li>cy.find('locator'): Phương thức này gần giống với document.querySelector, cho phép ta thực hiện truy vấn đến một phần tử element nào đó thông qua id, class name hoặc xpath.</li></ul>Để chạy đoạn code trên, ta chỉ cần vào menu Specs trong sidebar và chọn file test vừa rồi, quá trình test sẽ chạy theo từng bước với các thông tin về quá trình chạy test một cách chi tiết nhất.<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/cypress_run_test_8d337f1c37.gif" alt="cypress-run-test.gif"><h1>4. Tạo testcase tự động với Chrome Recorder:</h1>Nếu chúng ta từng dùng qua Selenium IDE, chúng ta sẽ quen thuộc với chức năng recorder để tự động ghi lại các thao tác chuột, bàn phím khi mình tương tác với website bất kì để tự động sinh ra file code test cho các ngôn ngữ lập trình khác nhau như python, C#, Javascript. Thì bên Cypress GUI mặc dù không có tính năng ấy, nhưng ta vẫn có thể sinh code test cho cypress tự động bằng tool Chrome Recorder. Chi tiết thêm các bạn có thể xem thêm video hướng dẫn từ document dưới đây:<a target="_blank" rel="noopener noreferrer" href="https://www.youtube.com/watch?v=-RJuZrq-wOk">https://www.youtube.com/watch?v=-RJuZrq-wOk</a><h1>5. Kết luận:</h1>Cypress là một công cụ hữu ích giúp cho việc kiểm thử trở nên dễ dàng hơn cho developers và QA đặc biệt là trong Integration Testing. Nó không chỉ giúp tiết kiệm thời gian, mà còn tiết kiệm chi phí trong quá trình kiểm tra chất lượng sản phẩm. Nhanh chóng mang đến sự hài lòng cho khách hàng.

Như chúng ta đã biết, những người làm tester thưở ban đầu thường hay test các chức năng của 1 web app một cách thủ công, gọi là manual test. Nhưng mà việc test thủ công hay bị lặp đi lặp lại các thao tác quen thuộc như đăng nhập đăng ký, bấm nút bất kì,... Và việc đó sẽ tiếp tục diễn ra mỗi khi developer cập nhật tính năng mới, testẻ phải chịu khó test lại từ đầu toàn bộ chức năng, thành ra manual test sẽ không mang lại nhiều hiệu quả cho quy trình làm việc. Từ đó đã có nhiều loại hình thức test tự động như unit test, E2E cùng với các công cụ test như Selenium, Cypress, Playwright. Một trong những công cụ phổ biến mà chúng ta hay dùng chính là Cypress. Chúng ta cùng nhau tìm hiểu nó.

Hướng dẫn cypress căn bản cho người mới bắt đầu

<h1>Tiềm năng của việc sử dụng AI trong công việc</h1>AI tại nơi làm việc là một chủ đề nóng hiện nay và vì lý do chính đáng. Với những tiến bộ trong công nghệ, giờ đây chúng ta có thể tự động hóa nhiều nhiệm vụ từng được thực hiện thủ công, giải phóng thời gian để nhân viên tập trung vào công việc quan trọng và sáng tạo hơn.Một trong những lợi ích lớn nhất của việc sử dụng AI tại nơi làm việc là khả năng tăng hiệu quả. Máy móc có thể hoạt động 24/7 mà không mệt mỏi, đồng thời chúng có thể xử lý và phân tích lượng lớn dữ liệu trong một khoảng thời gian ngắn so với con người. Điều này có nghĩa là các doanh nghiệp có thể hoàn thành nhiều việc hơn trong thời gian ngắn hơn, điều này có thể dẫn đến tăng năng suất và lợi nhuận cao hơn.Một lợi ích khác của việc sử dụng AI tại nơi làm việc là khả năng cải thiện việc ra quyết định. Các thuật toán AI có thể phân tích dữ liệu và đưa ra dự đoán về các xu hướng và mô hình trong tương lai. Điều này có thể giúp các nhà quản lý và giám đốc điều hành đưa ra quyết định sáng suốt hơn, điều này có thể dẫn đến kết quả tốt hơn cho công ty.AI cũng đang giúp cải thiện dịch vụ khách hàng. Với việc sử dụng chatbot, khách hàng có thể nhận được câu trả lời nhanh chóng cho các câu hỏi của họ mà không cần phải đợi đại diện dịch vụ khách hàng chờ đợi. Điều này có thể dẫn đến khách hàng hạnh phúc hơn và kinh doanh lặp lại nhiều hơn.AI cũng có thể giúp tạo ra nhiều trải nghiệm cá nhân hóa hơn cho khách hàng. Với việc sử dụng máy học, doanh nghiệp có thể phân tích dữ liệu khách hàng để hiểu rõ hơn về nhu cầu và sở thích của họ. Điều này có thể dẫn đến các chiến dịch tiếp thị được nhắm mục tiêu nhiều hơn và các sản phẩm và dịch vụ được tùy chỉnh.AI cũng có thể giúp cải thiện sự an toàn tại nơi làm việc. Với việc sử dụng các cảm biến và máy ảnh, AI có thể giám sát nơi làm việc để tìm các mối nguy tiềm ẩn và cảnh báo nhân viên về những nguy cơ tiềm ẩn. Điều này có thể giúp giảm nguy cơ tai nạn và thương tích.Một trong những lĩnh vực hứa hẹn nhất của AI tại nơi làm việc là lĩnh vực tự động hóa. Với việc sử dụng robot và các hệ thống tự động khác, doanh nghiệp có thể giảm chi phí lao động và tăng năng suất. Điều này có thể dẫn đến lợi nhuận cao hơn và giá cả cạnh tranh hơn cho khách hàng.Nhìn chung, việc sử dụng AI tại nơi làm việc là một tình huống đôi bên cùng có lợi cho cả doanh nghiệp và nhân viên. Các doanh nghiệp có thể tăng hiệu quả, cải thiện việc ra quyết định và tạo ra nhiều trải nghiệm cá nhân hóa hơn cho khách hàng. Nhân viên có thể tập trung vào công việc quan trọng và sáng tạo hơn, đồng thời có quyền truy cập vào các công cụ và công nghệ tiên tiến hơn.Tóm lại, việc sử dụng AI tại nơi làm việc là một bước phát triển đầy hứa hẹn có thể giúp tăng hiệu quả, cải thiện quá trình ra quyết định, dịch vụ khách hàng tốt hơn và môi trường làm việc an toàn hơn. Khi công nghệ tiếp tục phát triển, chúng ta có thể kỳ vọng sẽ thấy nhiều lợi ích hơn nữa từ việc sử dụng AI tại nơi làm việc trong những năm tới.<h1>Làm thế nào AI hoặc ChatGPT có thể giúp các nhà phát triển?</h1>AI và ChatGPT có thể giúp các nhà phát triển theo nhiều cách khác nhau, bao gồm:<ul><li>Tạo mã: Các thuật toán AI có thể phân tích mã và tạo mã mới tương tự về cấu trúc và chức năng. Điều này có thể tiết kiệm thời gian và công sức của nhà phát triển khi làm việc trên các dự án.</li><li>Phát hiện lỗi: AI có thể được sử dụng để phân tích mã và phát hiện lỗi hoặc lỗi. Điều này có thể giúp các nhà phát triển nhanh chóng xác định và khắc phục sự cố, cải thiện chất lượng tổng thể của mã.</li><li>Hoàn thành mã: Các công cụ hoàn thành mã do AI cung cấp có thể giúp các nhà phát triển viết mã nhanh chóng bằng cách đề xuất các đoạn mã phù hợp dựa trên ngữ cảnh.</li><li>Kiểm tra: AI có thể được sử dụng để tự động kiểm tra mã và xác định bất kỳ lỗi hoặc sự cố nào. Điều này có thể tiết kiệm thời gian của nhà phát triển và cải thiện chất lượng tổng thể của mã.</li><li>Xử lý ngôn ngữ tự nhiên (NLP): ChatGPT một loại AI có thể được sử dụng để hiểu và tạo ngôn ngữ của con người, có thể được sử dụng để xây dựng giao diện ngôn ngữ tự nhiên cho nhà phát triển, ví dụ: nhà phát triển có thể sử dụng NLP để xây dựng chatbot, trợ lý ảo, v.v. ứng dụng dựa trên ngôn ngữ.</li><li>Tạo nội dung: AI cũng có thể được sử dụng để tạo tài liệu kỹ thuật, hướng dẫn và nội dung bằng văn bản khác cho nhà phát triển.</li><li>Tự động hóa các tác vụ lặp đi lặp lại: AI có thể được sử dụng để tự động hóa các tác vụ lặp đi lặp lại như nhập dữ liệu, xử lý dữ liệu và phân tích dữ liệu. Điều này có thể tiết kiệm thời gian của nhà phát triển và cải thiện độ chính xác của kết quả.</li><li>Mô hình dự đoán: AI có thể được sử dụng để xây dựng các mô hình dự đoán có thể được sử dụng để dự đoán các xu hướng và mô hình trong tương lai. Điều này có thể hữu ích cho các nhà phát triển làm việc trên các dự án liên quan đến dự báo, tối ưu hóa và các lĩnh vực khác yêu cầu dự đoán.</li><li>Tóm lại, AI và ChatGPT có thể được sử dụng để tự động hóa nhiều tác vụ và nâng cao hiệu quả của quy trình phát triển, cho phép các nhà phát triển tập trung vào công việc quan trọng và sáng tạo hơn.</li></ul>Lưu ý*: Bài đăng trên blog này được tạo bởi ChatGPT!

Khám phá những lợi ích tiềm năng của việc sử dụng AI tại nơi làm việc, bao gồm tăng hiệu quả và cải thiện quá trình ra quyết định. Những cách mà AI có thể hỗ trợ các nhà phát triển, chẳng hạn như tạo mã, phát hiện lỗi và tự động hóa các tác vụ lặp đi lặp lại.

Tiềm năng của AI và ChatGPT trong công việc

Xin chào các bạn, lại là mình đây. Trong blog ngày hôm nay, mình và các bạn sẽ cùng nhau làm một web app nhỏ thú vị, mô phỏng lại tính năng yêu thích của JIRA hoặc Trello. Vâng và đó chính là Kanban. Một trong những tính năng hữu ích nhằm giúp chúng ta, công ty, tổ chức, cá nhân tự quản lý tiến độ, số lượng công việc của mình hiệu quả, trực quan và đẹp mắt hơn. Trước khi đi vào bài viết, mình sẽ nói tóm tắt cho các bạn về những công nghệ, kiến thức mà chúng ta sẽ dự định áp dụng trong ứng dụng này:<h1>I) Kanban:</h1><figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/kanban_f3556b80c2.webp"></figure>Kanban (trong tiếng Nhật có nghĩa là bảng hiệu) là một phương pháp tinh gọn để quản lý và cải tiến công việc trên toàn hệ thống của con người. Cách tiếp cận này nhằm mục đích quản lý công việc bằng cách cân bằng nhu cầu công việc với năng lực hiện có và cải thiện việc xử lý vấn đề thắt cổ chai ở cấp hệ thống.Các hạng mục công việc được hiển thị trực quan để cung cấp cho người tham gia một cái nhìn về tiến độ và quy trình, từ đầu đến cuối — thường thông qua bảng Kanban. Công việc được kéo theo khả năng cho phép, thay vì đẩy công việc vào quy trình khi được yêu cầu.Trong các công việc trí óc, đặc biệt trong phát triển phần mềm, mục đích là cung cấp một hệ thống quản lý quy trình trực quan, hỗ trợ việc ra quyết định về sản xuất cái gì, khi nào và bao nhiêu. Phương pháp Kanban cơ bản bắt nguồn từ sản xuất tinh gọn, được lấy cảm hứng từ hệ thống sản xuất của Toyota. Nhưng chính kỹ sư David J. Anderson của Microsoft đã nhận ra phương pháp này có thể trở thành một quy trình áp dụng cho bất kỳ loại hình công ty nào. Kanban thường được sử dụng trong phát triển phần mềm kết hợp với các phương pháp và mô hình khác như Scrum.<h1>2) Next.JS:</h1><figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/next_js_thumbnail_179188f360.png"></figure>Nextjs là một web framework dựa trên ReactJS, cho phép xây dựng một trang web một cách nhanh chóng. Sức mạnh của nó xuất phát từ việc tập trung vào các thành phần riêng lẻ. Chính vì vậy, thay vì làm việc trên toàn bộ ứng dụng web, Next.JS hay React.JS cho phép một developer có thể phá vỡ giao diện người dùng phức tạp thành các thành phần đơn giản hơn.Đặc biệt, Next.js hỗ trợ render phía server – mặc định là Server Side Rendering (SSR). Lợi thế của SSR là tối ưu SEO cực kì tốt, giúp website dễ dàng thăng hạng trên bảng xếp hạng Google.Next.js được phát triển dựa trên ReactJS, tức là mọi tính năng, ưu điểm của ReactJS được tận dụng, và sẽ bổ sung thêm các tính năng khắc phục nhược điểm của ReactJS. Nếu bạn đã quen với ReactJS thì việc chuyển sang Next.js vô cùng đơn giản.<h1>3) DND-KIT</h1><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/dnd_kit_thumbnail_dcb345f5b0.png"> Nhắc đến kanban, ta không thể không nhắc đến tính năng kéo thả chuột để di chuyển vị trí các task trong cùng một cột, hay di chuyển task sang cột khác. Tuy nhiên để làm điều đấy mà không có sự giúp sức của một thư viện nào đó thì thật là vất vả. Vì vậy để đáp ứng nhu cầu trên, rất nhiều nhóm lập trình viên đã tạo ra những thư viện kéo thả xịn như ReactDND,<a target="_blank" rel="noopener noreferrer" href="https://www.cssscript.com/reordering-grid-items-via-drag-drop-grabbable/">Grabbable</a>.&nbsp;Thư viện mà mình lựa chọn phù hợp nhất ở đây là DND-KIT vì các ưu điểm sau:<ul><li>Dung lượng nhẹ, hiệu suất cao và phù hợp với React.</li><li>Dễ tuỳ biến component, đa dạng cách sử dụng.</li><li>Kiểm soát tốt các hành vi kéo thả.</li></ul><h1>4) Cấu trúc Component:</h1>Làm việc với React, việc quan trọng nhất đầu tiên ta phải làm là phân chia giao diện web của mình ra thành từng phần nhỏ hơn. Việc đó, không chỉ giúp ta tái sử dụng các thành phần UI ở các trang khác nhau, mà còn giúp web app dễ dàng bảo trì hơn. Dưới đây là thông tin của các component mà chúng ta sẽ dự định xây dựng cho kanban<ul><li>Kanban Container:<ul><li>Column: Chứa id cột và danh sách các id của các item trong cột đó<ul><li>Column Header: Chứa id cột, và sử dụng chính id đó để làm tên cột</li><li>Column Body: Chứa danh sách các id của các item trong cột đó</li><li>Column Item: Sử dụng id của item để làm tên cột, hoặc sử dụng id đó để truy vấn sang các thông tin chi tiết của item đó.</li></ul></li></ul></li></ul>Ngoài ra còn có các hàm xử lý, style của từng component, mình sẽ tổng hợp trong từng đoạn code dưới đây để giúp bạn đọc có thể áp dụng vào web app của mình.Lưu ý, trước khi thực viện demo này, chúng ta sẽ vào tài liệu của Next.JS để biết cách tạo một project Next.JS khởi đầu:<a target="_blank" rel="noopener noreferrer" href="https://nextjs.org/docs/api-reference/create-next-app.">https://nextjs.org/docs/api-reference/create-next-app.</a>Lệnh cài thư viện dnd-kit để thực hiện demo này:<pre><code class="language-plaintext">yarn add @dnd-kit/core@1.0.2 @dnd-kit/sortable@1.0.2</code></pre>Trước khi code. Các bạn cần xem qua cấu trúc cây thư mục dưới đây để dễ thực hiện theo mình hơn:<figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_dc2f531a0f.png"></figure>src/pages/index.tsx<pre><code class="language-javascript">import Head from 'next/head';
import dynamic from 'next/dynamic';

const KanbanContainer = dynamic(() =&gt; import('@/components/kanban'), {
 ssr: false
});

export default function KanbanDNDKit() {
 return (
 &lt;&gt;
 &lt;Head&gt;
 &lt;title&gt;Kanban DND Kit Demo&lt;/title&gt;
 &lt;link rel='icon' href='/favicon.ico' /&gt;
 &lt;/Head&gt;
 &lt;KanbanContainer /&gt;
 &lt;/&gt;
 );
}</code></pre>&nbsp;src/components/kanban/index.tsx<pre><code class="language-javascript">import {closestCorners, DndContext, DragOverlay} from '@dnd-kit/core';
import Column from './column';
import ColumnItem from './column/item';
import {useKanban} from './hook';

const KanbanContainer = () =&gt; {
 const {activeId, data, handleDragEnd, handleDragOver, handleDragStart, sensors, setActiveId, setData} = useKanban();
 return (
 &lt;div style={{display: 'flex', flexDirection: 'row'}}&gt;
 &lt;DndContext
 sensors={sensors}
 collisionDetection={closestCorners}
 onDragStart={handleDragStart}
 onDragOver={handleDragOver}
 onDragEnd={handleDragEnd}&gt;
 &lt;Column id='Column1' data={data.Column1} /&gt;
 &lt;Column id='Column2' data={data.Column2} /&gt;
 &lt;Column id='Column3' data={data.Column3} /&gt;
 &lt;DragOverlay&gt;{activeId ? &lt;ColumnItem id={activeId} /&gt; : null}&lt;/DragOverlay&gt;
 &lt;/DndContext&gt;
 &lt;/div&gt;
 );
};

export default KanbanContainer;
</code></pre>src/components/kanban/hook.ts<pre><code class="language-javascript">import {arrayMove} from '@/utils/kanban/array';
import {
 DragEndEvent,
 DragOverEvent,
 DragStartEvent,
 KeyboardSensor,
 PointerSensor,
 UniqueIdentifier,
 useSensor,
 useSensors
} from '@dnd-kit/core';
import {sortableKeyboardCoordinates} from '@dnd-kit/sortable';
import {useState} from 'react';

export const useKanban = () =&gt; {
 const [data, setData] = useState&lt;{[x: string]: string[]}&gt;({
 Column1: ['4', '5', '6'],
 Column2: ['7', '8', '9'],
 Column3: ['1', '2', '3']
 });

 const [activeId, setActiveId] = useState&lt;UniqueIdentifier | null&gt;();

 const sensors = useSensors(
 useSensor(PointerSensor),
 useSensor(KeyboardSensor, {
 coordinateGetter: sortableKeyboardCoordinates
 })
 );

 function findColumn(id: UniqueIdentifier) {
 if (id in data) {
 return id;
 }

 return Object.keys(data).find(key =&gt; data[key].includes(id));
 }

 function handleDragStart(event: DragStartEvent) {
 const {active} = event;
 const {id} = active;

 setActiveId(id);
 }

 function handleDragOver(event: DragOverEvent) {
 const {active, over, draggingRect} = event;
 const {id} = active;
 const overId = over?.id || '';

 // Find the Columns
 const activeColumn = findColumn(id);
 const overColumn = findColumn(overId);

 if (!activeColumn || !overColumn || activeColumn === overColumn) {
 return;
 }

 setData(prev =&gt; {
 const activeColumnData = prev[activeColumn];
 const overColumnData = prev[overColumn];

 // Find the indexes for the items
 const activeItemIndex = activeColumnData.indexOf(id);
 const overItemIndex = overColumnData.indexOf(overId);

 let newIndex;
 if (overId in prev) {
 // We're at the root droppable of a Column
 newIndex = overColumnData.length + 1;
 } else {
 const isBelowLastItem =
 over &amp;&amp;
 overItemIndex === overColumnData.length - 1 &amp;&amp;
 draggingRect.offsetTop &gt; over.rect.offsetTop + over.rect.height;

 const modifier = isBelowLastItem ? 1 : 0;

 newIndex = overItemIndex &gt;= 0 ? overItemIndex + modifier : overColumnData.length + 1;
 }

 return {
 ...prev,
 [activeColumn]: [...prev[activeColumn].filter(item =&gt; item !== active.id)],
 [overColumn]: [
 ...prev[overColumn].slice(0, newIndex),
 data[activeColumn][activeItemIndex],
 ...prev[overColumn].slice(newIndex, prev[overColumn].length)
 ]
 };
 });
 }

 function handleDragEnd(event: DragEndEvent) {
 const {active, over} = event;
 const {id} = active;
 const overId = over?.id || '';

 const activeColumn = findColumn(id);
 const overColumn = findColumn(overId);

 if (!activeColumn || !overColumn || activeColumn !== overColumn) {
 return;
 }

 const activeItemIndex = data[activeColumn].indexOf(active.id);
 const overItemIndex = data[overColumn].indexOf(overId);

 if (activeItemIndex !== overItemIndex) {
 setData(data =&gt; ({
 ...data,
 [overColumn]: arrayMove(data[overColumn], activeItemIndex, overItemIndex)
 }));
 }

 setActiveId(null);
 }

 return {data, setData, activeId, setActiveId, sensors, handleDragEnd, handleDragOver, handleDragStart};
};
</code></pre>src/components/kanban/column/index.tsx<pre><code class="language-javascript">import React, {FC} from 'react';
import {useDroppable} from '@dnd-kit/core';
import {horizontalListSortingStrategy, SortableContext, verticalListSortingStrategy} from '@dnd-kit/sortable';
import ColumnHeader from './header';
import ColumnBody from './body';

const columnStyle = {
 background: '#1296ba',
 padding: 10,
 margin: 10,
 flex: 1
};

interface IColumn {
 id: string;
 data: string[];
}

const Column: FC&lt;IColumn&gt; = ({data, id}) =&gt; {
 const {setNodeRef} = useDroppable({
 id
 });

 return (
 &lt;&gt;
 &lt;SortableContext id={id} items={data} strategy={verticalListSortingStrategy}&gt;
 &lt;div ref={setNodeRef} style={columnStyle} className='column'&gt;
 &lt;ColumnHeader id={id} /&gt;
 &lt;ColumnBody data={data} id={id} /&gt;
 &lt;/div&gt;
 &lt;/SortableContext&gt;
 &lt;/&gt;
 );
};

export default Column;

</code></pre>src/components/kanban/column/header/index.tsx<pre><code class="language-javascript">import React, {FC} from 'react';
import {useSortable} from '@dnd-kit/sortable';
import {CSS} from '@dnd-kit/utilities';

interface IColumnHeader {
 id: string;
}

const ColumnHeader: FC&lt;IColumnHeader&gt; = ({id}) =&gt; {
 return (
 &lt;div className='column-header' style={{textAlign: 'center'}}&gt;
 &lt;p&gt;{`Column ${id}`}&lt;/p&gt;
 &lt;/div&gt;
 );
};

export default ColumnHeader;
</code></pre>src/components/kanban/column/body/index.tsx<pre><code class="language-javascript">import React from 'react';
import ColumnItem from '../item';

interface IColumnBody {
 id: string;
 data: string[];
}

export default function ColumnBody({id, data}: IColumnBody) {
 return (
 &lt;div className='column-body'&gt;
 {data.map(id =&gt; (
 &lt;ColumnItem key={id} id={id} /&gt;
 ))}
 &lt;/div&gt;
 );
}
</code></pre>src/components/kanban/column/item/index.tsx<pre><code class="language-javascript">import {useSortable} from '@dnd-kit/sortable';
import React, {FC} from 'react';
import {CSS} from '@dnd-kit/utilities';

interface IColumnItem {
 id: string;
}

const ColumnItem: FC&lt;IColumnItem&gt; = ({id}) =&gt; {
 const {attributes, listeners, setNodeRef, transform, transition, isDragging} = useSortable({id});

 const style = {
 width: '100%',
 height: 50,
 display: 'flex',
 alignItems: 'center',
 justifyContent: 'center',
 border: '1px solid black',
 margin: '10px 0'
 };

 const styleDrag = {
 transform: CSS.Transform.toString(transform),
 opacity: isDragging ? 0.5 : 1
 };

 return (
 &lt;div ref={setNodeRef} style={style} {...attributes} {...listeners} className='column-item'&gt;
 &lt;div style={{...styleDrag, transition: transition || ''}} className='column-item-inner'&gt;
 Item {id}
 &lt;/div&gt;
 &lt;/div&gt;
 );
};

export default ColumnItem;</code></pre>&nbsp;<h1>5) Demo:</h1>Sau khi hoàn tất quá trình code các component, ghép nối chúng, cùng với các hook xử lý logic, state lại với nhau. Ta chạy lệnh “yarn start” sẽ được kết quả như hình dưới đây. Truy cập vào trang <a target="_blank" rel="noopener noreferrer" href="http://localhost:3000">http://localhost:3000</a> để xem kết quả nhé.<h1><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_4efd88cdbe.png"> &nbsp;</h1>&nbsp;

Xin chào các bạn, lại là mình đây. Trong blog ngày hôm nay, mình và các bạn sẽ cùng nhau làm một web app nhỏ thú vị, mô phỏng lại tính năng yêu thích của jira hoặc trello. Vâng và đó chính là Kanban. Một trong những tính năng hữu ích nhằm giúp chúng ta, công ty, tổ chức, cá nhân tự quản lý tiến độ, số lượng công việc của mình hiệu quả, trực quan và đẹp mắt hơn.

Hành trình xây dựng kanban với Next.JS 13, Typescript và DND-KIT

&nbsp;Migration là gì?Migration về cơ bản chỉ là một file duy nhất có các truy vấn để cập nhật database schema và áp dụng các thay đổi mới cho cơ sở dữ liệu hiện có.&nbsp;Migration hoạt động như thế nào?Trong bài viết này tôi sẽ sử dụng ví dụ của Migrations từ TypeORM.Giả sử bạn đã có database và một bảng như sau:<pre><code class="language-typescript">import { Entity, Column, PrimaryGeneratedColumn } from "typeorm"
 
@Entity()

export class Post {

 &nbsp;&nbsp;&nbsp;@PrimaryGeneratedColumn()

 &nbsp;&nbsp;&nbsp;id: number



 &nbsp;&nbsp;&nbsp;@Column()

 &nbsp;&nbsp;&nbsp;title: string


 &nbsp;&nbsp;&nbsp;@Column()

 &nbsp;&nbsp;&nbsp;text: string

}</code></pre>Database của bạn đã hoạt động ở môi trường Product trong nhiều tháng mà không có bất kỳ thay đổi nào. Bạn có hàng nghìn bài đăng trong cơ sở dữ liệu của mình.Vì một lý do nào đó bạn muốn đổi tên cột title thành name.Và đương nhiên là bạn không thể để tính năng đồng bộ hoá với Database (database schema sẽ thay đổi theo các Entity bên trong code) để thay đổi cấu trúc của database schema. Điều này quá nguy hiểm, nó làm mất dữ liệu của bạn trong database.Bạn cần tạo một migration với truy vấn SQL sau (phương ngữ postgres):<pre><code class="language-typescript">ALTER TABLE "post" ALTER COLUMN "title" RENAME TO "name";
 </code></pre>Khi bạn chạy truy vấn SQL này, database schema của bạn đã sẵn sàng hoạt động với code mới của bạn.Một vài tính năng cở bản của Migrations: Trước tiên thì bạn cần tạo một data source:<pre><code class="language-typescript">{

 &nbsp;&nbsp;&nbsp;type: "mysql",

 &nbsp;&nbsp;&nbsp;host: "localhost",

 &nbsp;&nbsp;&nbsp;port: 3306,

 &nbsp;&nbsp;&nbsp;username: "test",

 &nbsp;&nbsp;&nbsp;password: "test",

 &nbsp;&nbsp;&nbsp;database: "test",

 &nbsp;&nbsp;&nbsp;entities: [/*...*/],

 &nbsp;&nbsp;&nbsp;migrations: [/*...*/],

 &nbsp;&nbsp;&nbsp;migrationsTableName: "custom_migration_table",

}</code></pre>Chúng chứa các thông tin để kết nối với database của bạn và các configs của migration.Creating a new migration:Khi bạn chạy lên dưới đây:<pre><code class="language-plaintext">typeorm migration:create ./path-to-migrations-dir/PostRefactoring</code></pre>Ở đây, PostRefactoring là tên của migration - bạn có thể chỉ định bất kỳ tên nào bạn muốn. Sau khi chạy lệnh, bạn có thể thấy một file mới được tạo trong thư mục "path-to-migrations-dir" có tên {TIMESTAMP}-PostRefactoring.ts. trong đó {TIMESTAMP} là dấu thời gian hiện tại khi quá trình di chuyển được tạo. Bây giờ bạn có thể mở tệp và thêm các truy vấn sql di chuyển của mình vào đó.Bạn sẽ thấy nội dung sau trong file vừa được tạo:<pre><code class="language-typescript">import { MigrationInterface, QueryRunner } from "typeorm"


 

export class PostRefactoringTIMESTAMP implements MigrationInterface {

 &nbsp;&nbsp;&nbsp;async up(queryRunner: QueryRunner): Promise&lt;void&gt; {}


 

 &nbsp;&nbsp;&nbsp;async down(queryRunner: QueryRunner): Promise&lt;void&gt; {}

}</code></pre>Ở đây có một class với 2 method “up” và “down”. Và bây giờ bạn có thể viết các câu lên truy vấn ở đây. Up Method: chứa các câu truy vấn để thực hiện việc thay đổi database schema. Down Method: chứa các câu truy vấn để thực hiện việc hoàn tác database schema lại như trước khi thay đổi.Running and reverting migrations:Giả sử tôi có một file migration để đổi tên cột title thành name như sau:<pre><code class="language-typescript">import { MigrationInterface, QueryRunner } from "typeorm"


 

export class PostRefactoringTIMESTAMP implements MigrationInterface {

 &nbsp;&nbsp;&nbsp;async up(queryRunner: QueryRunner): Promise&lt;void&gt; {

 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;await queryRunner.query(

 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`ALTER TABLE "post" RENAME COLUMN "title" TO "name"`,

 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;)

 &nbsp;&nbsp;&nbsp;}


 

 &nbsp;&nbsp;&nbsp;async down(queryRunner: QueryRunner): Promise&lt;void&gt; {

 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;await queryRunner.query(

 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`ALTER TABLE "post" RENAME COLUMN "name" TO "title"`,

 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;) // reverts things made in "up" method

 &nbsp;&nbsp;&nbsp;}

}</code></pre>Để running migration (chạy các câu truy vấn trong Up Method):<pre><code class="language-plaintext">typeorm migration:run</code></pre>Nếu bạn có nhiều file migration thì nó sẽ chạy nhiều file, đương nhiên là chỉ những migration chưa được chạy.Để reverting migration (chạy các câu truy vấn trong Down Method):<pre><code class="language-plaintext">typeorm migration:revert</code></pre>Command này chỉ reverting lại migration mới nhất. Nếu bạn muốn reverting nhiều lần thì bạn cần phải chạy command này nhiều lần.Generation migrations:Giả sử bạn có một Post Entity có cột title và bạn đã thay đổi tên tiêu đề thành name. Thay vì phải tạo mới một migration và phải tự viết các câu truy vấn mất rất nhiều thời gian thì bạn có thể chạy command này:<pre><code class="language-plaintext">typeorm migration:generate -n PostRefactoring</code></pre>Bạn sẽ nhận được 1 file migration tương tự như trên:<pre><code class="language-typescript">import { MigrationInterface, QueryRunner } from "typeorm"

export class PostRefactoringTIMESTAMP implements MigrationInterface {

 &nbsp;&nbsp;&nbsp;async up(queryRunner: QueryRunner): Promise&lt;void&gt; {

 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;await queryRunner.query(

 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`ALTER TABLE "post" ALTER COLUMN "title" RENAME TO "name"`,

 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;)

 &nbsp;&nbsp;&nbsp;}


 

 &nbsp;&nbsp;&nbsp;async down(queryRunner: QueryRunner): Promise&lt;void&gt; {

 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;await queryRunner.query(

 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`ALTER TABLE "post" ALTER COLUMN "name" RENAME TO "title"`,

 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;)

 &nbsp;&nbsp;&nbsp;}

}</code></pre>Đây là một tính năng rất tuyệt với. Nó giúp bạn tiết kiệm được rất nhiều thời gian. Tôi sử dụng nó rất thường xuyên.Trên đây là chút kiến thức cơ bản về migrations. Tuy không nhiều nhưng nó sẽ giúp bạn có một cái nhìn tổng quan migration. Những tính năng tôi kể ở trên không chỉ TypeORM mà hầu hết các library/framework đều có. Nên bạn có thể tham khảo vào áp dụng nó theo library/framework mà bạn sử dụng.&nbsp;Cảm ơn vì đã đọc bài viết‌!

Trong bài viết này sẽ cho bạn cái nhìn tổng quan về migration.

Giới thiệu Migration

<pre><code class="language-php">WORDPRESS: LÀM VIỆC VỚI API</code></pre><h3 style="text-align:justify;">I. Các ý chính</h3><ul><li style="text-align:justify;">Routes &amp; Endpoints</li></ul>&nbsp; Đối với WordPress REST API, một route là một URI có thể được ánh xạ tới các phương thức HTTP khác nhau. Ánh xạ của một phương thức HTTP riêng lẻ tới một tuyến đường được gọi là endpoints. Ví dụ: chúng ta thực hiện yêu cầu GET tới URI <a target="_blank" rel="noopener noreferrer" href="http://oursite.com/wp-json/">http://oursite.com/wp-json/</a><ul><li style="text-align:justify;">Requests</li></ul>&nbsp; REST API request được thể hiện trong WordPress bằng một phiên bản của lớp WP_REST_Request, được sử dụng để lưu trữ và truy xuất thông tin cho yêu cầu hiện tại. Đối tượng WP_REST_Request được tạo tự động khi bạn thực hiện yêu cầu HTTP tới API đã đăng ký. Dữ liệu được chỉ định trong đối tượng này (được lấy từ URI tuyến đường hoặc tải trọng JSON được gửi như một phần của yêu cầu).<ul><li style="text-align:justify;">Responses</li></ul>&nbsp; Phản hồi là dữ liệu bạn nhận được từ API. Lớp WP_REST_Response cung cấp một cách để tương tác với dữ liệu phản hồi do các endpoints trả về. Phản hồi trả về dữ liệu được yêu cầu hoặc cũng có thể được sử dụng để trả về lỗi nếu xảy ra sự cố trong khi thực hiện yêu cầu.<ul><li style="text-align:justify;">Schema</li></ul>&nbsp; Mỗi endpoint yêu cầu một cấu trúc cụ thể của dữ liệu đầu vào và trả về dữ liệu bằng cấu trúc được xác định và có thể dự đoán được. Các cấu trúc dữ liệu đó được xác định trong schema API. Lược đồ cấu trúc dữ liệu API và cung cấp danh sách toàn diện về tất cả các thuộc tính mà API có thể trả về và các tham số đầu vào mà API có thể chấp nhận. Lược đồ được xác định rõ ràng cũng cung cấp một lớp bảo mật trong API, vì nó cho phép chúng ta xác thực và làm sạch các yêu cầu được gửi tới API.<h3 style="text-align:justify;">II. Làm việc với API</h3>Cấu trúc thư mục:&nbsp; &nbsp;.&nbsp; &nbsp; └── themes/ &nbsp; &nbsp; &nbsp; &nbsp;└── my-theme/ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;├── post-types/ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;│ ├── product/ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;│ │ ├── index.php &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;│ │ ├── post-type.php &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;│ │ └── taxonomy.php &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;│ └── index.php &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;├── api/ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;│ ├── product/ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;│ │ ├── index.php &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;│ │ ├── prepare.php &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;│ │ ├── routes.php &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;│ │ ├── schema.php &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;│ │ └── services.php &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;│ └── index.php &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;└── utils/ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;├── index.php&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;└── prefix_prepare_for_collection.php<h4 style="text-align:justify;">1. Đăng ký một post type mới</h4>Thư mục post-types sẽ chứa các post-type mà bạn đã đăng ký, ở đây mình đăng ký một post-type có tên là product product/post-type.php<pre><code class="language-plaintext">&lt;?php
add_action('init', 'create_product_type');

function create_product_type()
{
&nbsp; $labels = array(
&nbsp; &nbsp; 'name' &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;=&gt; _x('Products', 'post type general name'),
&nbsp; &nbsp; 'singular_name' =&gt; _x('Product', 'post type singular name'),
&nbsp; &nbsp; 'menu_name' &nbsp; &nbsp; =&gt; 'Products',
&nbsp; &nbsp; 'all_items' =&gt; &nbsp;__('All Products'),
&nbsp; );
&nbsp; $args = array(
&nbsp; &nbsp; 'labels' &nbsp; &nbsp; &nbsp; &nbsp;=&gt; $labels,
&nbsp; &nbsp; 'description' &nbsp; =&gt; 'Holds our custom product items',
&nbsp; &nbsp; 'public' &nbsp; &nbsp; &nbsp; &nbsp;=&gt; true,
&nbsp; &nbsp; 'menu_position' =&gt; 5,
&nbsp; &nbsp; 'supports' &nbsp; &nbsp; &nbsp;=&gt; array('title', 'editor', 'thumbnail'),
&nbsp; &nbsp; 'has_archive' &nbsp; =&gt; true,
&nbsp; );
&nbsp; register_post_type('product', $args);
}</code></pre>product/taxonomy.php<pre><code class="language-php">&lt;?php
register_taxonomy(
&nbsp; 'products',
&nbsp; array('product'),
&nbsp; array(
&nbsp; &nbsp; 'hierarchical' =&gt; true,
&nbsp; &nbsp; 'label' =&gt; 'Product category',
&nbsp; &nbsp; 'show_admin_column' =&gt; true,
&nbsp; &nbsp; 'singular_label' =&gt; 'Product category',
&nbsp; &nbsp; 'rewrite' =&gt; array(
&nbsp; &nbsp; &nbsp; 'slug' =&gt; 'loai-khach-san'
&nbsp; &nbsp; )
&nbsp; )
);</code></pre>product/index.php<pre><code class="language-php">&lt;?php
require_once get_template_directory() . "/post-types/product/post-type.php";
require_once get_template_directory() . "/post-types/product/taxonomy.php";</code></pre>post-types/index.php<pre><code class="language-php">&lt;?php
require_once get_template_directory() . "/post-types/product/index.php";</code></pre>functions.php<pre><code class="language-php">require_once get_template_directory() . "/post-types/index.php";</code></pre>Sau khì đăng ký xong bạn ra dashboard của wordpress xem kết quả:<img class="image_resized" style="width:11.94%;" src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/api_wordpress_1_75d0c52dc9.png" alt="api-wordpress-1.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_api_wordpress_1_75d0c52dc9.png 40w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_api_wordpress_1_75d0c52dc9.png 128w," sizes="100vw">2. Sử dụng Advanced Custom Fields Ở đây mình thêm 3 field mới cho product:<figure class="image image_resized" style="width:75%;"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/api_wordpress_2_3624322b06.png" alt="api-wordpress-2.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_api_wordpress_2_3624322b06.png 128w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_api_wordpress_2_3624322b06.png 411w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_api_wordpress_2_3624322b06.png 616w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_api_wordpress_2_3624322b06.png 821w," sizes="100vw"></figure><h4>3. Đăng ký API</h4>- Thư mục api: chứa các API mà bạn đăng ký - Thư mục product: chứa các xử lý API của post-type product. &nbsp; &nbsp; + index.php: gộp các file prepare.php, routes.php, schema.php, services.php về &nbsp;một chỗ. &nbsp; &nbsp; + prepare.php: chuẩn bị dữ liệu để trả về. &nbsp; &nbsp; + routes.php: đăng ký các routes và endpoint. &nbsp; &nbsp; + schema.php: tổ chức dữ liệu. &nbsp; &nbsp; + services.php: các funtions dùng để GET, POST, … - index.php: gộp các file index.php của các API về một chỗ.product/schema.php<pre><code class="language-php">&lt;?php

// SCHEMA: product
function prefix_get_product_schema()
{
&nbsp; $schema = array(
&nbsp; &nbsp; '$schema' &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;=&gt; 'http://json-schema.org/draft-04/schema#',
&nbsp; &nbsp; 'title' &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;=&gt; 'product',
&nbsp; &nbsp; 'type' &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; =&gt; 'object',
&nbsp; &nbsp; 'properties' &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; =&gt; array(
&nbsp; &nbsp; &nbsp; 'id' &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;=&gt; array(
&nbsp; &nbsp; &nbsp; &nbsp; 'description' &nbsp;=&gt; esc_html__('Unique identifier for the object.', 'my-textdomain'),
&nbsp; &nbsp; &nbsp; &nbsp; 'type' &nbsp; &nbsp; &nbsp; &nbsp; =&gt; 'integer',
&nbsp; &nbsp; &nbsp; &nbsp; 'context' &nbsp; &nbsp; &nbsp;=&gt; array('view', 'edit', 'embed'),
&nbsp; &nbsp; &nbsp; &nbsp; 'readonly' &nbsp; &nbsp; =&gt; true,
&nbsp; &nbsp; &nbsp; ),
&nbsp; &nbsp; &nbsp; 'title' &nbsp; &nbsp; &nbsp; =&gt; array(
&nbsp; &nbsp; &nbsp; &nbsp; 'description' =&gt; esc_html__('The title for the object.', 'my-textdomain'),
&nbsp; &nbsp; &nbsp; &nbsp; 'type' &nbsp; &nbsp; &nbsp; &nbsp;=&gt; 'string',
&nbsp; &nbsp; &nbsp; ),
&nbsp; &nbsp; &nbsp; 'manufacturing_date' =&gt; array(
&nbsp; &nbsp; &nbsp; &nbsp; 'description' =&gt; esc_html__('The manufacturing date for the object', 'my-textdomain'),
&nbsp; &nbsp; &nbsp; &nbsp; 'type' &nbsp; &nbsp; &nbsp; &nbsp;=&gt; 'string',
&nbsp; &nbsp; &nbsp; ),
&nbsp; &nbsp; &nbsp; 'price' &nbsp;=&gt; array(
&nbsp; &nbsp; &nbsp; &nbsp; 'description' =&gt; esc_html__('The price for the object', 'my-textdomain'),
&nbsp; &nbsp; &nbsp; &nbsp; 'type' &nbsp; &nbsp; &nbsp; &nbsp;=&gt; 'string',
&nbsp; &nbsp; &nbsp; ),
&nbsp; &nbsp; &nbsp; 'gallery' =&gt; array(
&nbsp; &nbsp; &nbsp; &nbsp; 'description' =&gt; esc_html__('The gallery for the object', 'my-textdomain'),
&nbsp; &nbsp; &nbsp; &nbsp; 'type' &nbsp; &nbsp; &nbsp; &nbsp;=&gt; 'array',
&nbsp; &nbsp; &nbsp; &nbsp; 'items' =&gt; array(
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'type' =&gt; 'string',
&nbsp; &nbsp; &nbsp; &nbsp; ),
&nbsp; &nbsp; &nbsp; )
&nbsp; &nbsp; )
&nbsp; );

&nbsp; return $schema;
}</code></pre>product/prepare.php<pre><code class="language-php">&lt;?php

function prefix_rest_prepare_product($product, $request)
{
&nbsp; $id &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; = (int) $product-&gt;ID;
&nbsp; $title &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;= $product-&gt;post_title;
&nbsp; $manufacturing_date = get_field('prefix_product_manufacturing_date', $product);
&nbsp; $price &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;= get_field('prefix_product_price', $product);
&nbsp; $gallery &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;= array();

&nbsp; while (have_rows('prefix_product_gallery', $product)) : the_row();
&nbsp; &nbsp; $image = get_sub_field('image', $product);
&nbsp; &nbsp; array_push($gallery, $image['url']);
&nbsp; endwhile;

&nbsp; $product_data = array();

&nbsp; $schema = prefix_get_product_schema();

&nbsp; if (isset($schema['properties']['id'])) {
&nbsp; &nbsp; $product_data['id'] = $id;
&nbsp; }

&nbsp; if (isset($schema['properties']['title'])) {
&nbsp; &nbsp; $product_data['title'] = $title;
&nbsp; }

&nbsp; if (isset($schema['properties']['manufacturing_date'])) {
&nbsp; &nbsp; $product_data['manufacturing_date'] = $manufacturing_date;
&nbsp; }

&nbsp; if (isset($schema['properties']['price'])) {
&nbsp; &nbsp; $product_data['price'] = $price;
&nbsp; }

&nbsp; if (isset($schema['properties']['gallery'])) {
&nbsp; &nbsp; $product_data['gallery'] = $gallery;
&nbsp; }

&nbsp; return rest_ensure_response($product_data);
}</code></pre>product/services.php<pre><code class="language-php">&lt;?php

// GET: products
function prefix_get_products($request)
{
&nbsp; $args = array(
&nbsp; &nbsp; 'post_type' &nbsp; =&gt; 'product',
&nbsp; &nbsp; 'post_status' =&gt; 'publish',
&nbsp; );

&nbsp; $products = get_posts($args);

&nbsp; foreach ($products as $product) {
&nbsp; &nbsp; $response = prefix_rest_prepare_product($product, $request);
&nbsp; &nbsp; $data[] = prefix_prepare_for_collection($response);
&nbsp; }

&nbsp; return rest_ensure_response($data);
}</code></pre>product/routes.php<pre><code class="language-php">&lt;?php
add_action('rest_api_init', 'prefix_register_routes_products');

function prefix_register_routes_products()
{
&nbsp; $namespace = 'api';
&nbsp; $base = 'products';

&nbsp; register_rest_route(
&nbsp; &nbsp; $namespace,
&nbsp; &nbsp; '/' . $base,
&nbsp; &nbsp; array(
&nbsp; &nbsp; &nbsp; array(
&nbsp; &nbsp; &nbsp; &nbsp; 'methods' &nbsp; =&gt; 'GET',
&nbsp; &nbsp; &nbsp; &nbsp; 'callback' &nbsp;=&gt; 'prefix_get_products',
&nbsp; &nbsp; &nbsp; ),
&nbsp; &nbsp; &nbsp; 'schema' &nbsp; &nbsp; &nbsp;=&gt; 'prefix_get_product_schema',
&nbsp; &nbsp; )
&nbsp; );
}</code></pre>product/index.php<pre><code class="language-php">&lt;?php
require_once get_template_directory() . "/api/product/prepare.php";
require_once get_template_directory() . "/api/product/routes.php";
require_once get_template_directory() . "/api/product/services.php";
require_once get_template_directory() . "/api/product/schema.php";</code></pre>api/index.php<pre><code class="language-php">&lt;?php
require_once get_template_directory() . "/api/product/index.php";</code></pre>Ở đầy mình của dùng một fuction để hỗ trỡ dữ liệu trả về prefix_prepare_for_collection. Hàm này mình sẽ viết trong một thư mục có tên là utils.utils/prefix_prepare_for_collection.php<pre><code class="language-php">&lt;?php
function prefix_prepare_for_collection($response)
{
&nbsp; if (!($response instanceof WP_REST_Response)) {
&nbsp; &nbsp; return $response;
&nbsp; }

&nbsp; $data &nbsp;= (array) $response-&gt;get_data();
&nbsp; $links = rest_get_server()::get_compact_response_links($response);

&nbsp; if (!empty($links)) {
&nbsp; &nbsp; $data['_links'] = $links;
&nbsp; }

&nbsp; return $data;
}</code></pre>utils/index.php<pre><code class="language-php">&lt;?php
require_once get_template_directory() . "/utils/prefix_prepare_for_collection.php";</code></pre>funtions.php<pre><code class="language-php">require_once get_template_directory() . "/utils/index.php";
require_once get_template_directory() . "/api/index.php";</code></pre>Sau đó các bạn nhập liệu và chạy vào đường dẫn http:/exmple.com/wp-json/api/products để xem kết quả:<figure class="image image_resized" style="width:50%;"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/api_wordpress_3_0ab0b6a9db.png" alt="api-wordpress-3.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_api_wordpress_3_0ab0b6a9db.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_api_wordpress_3_0ab0b6a9db.png 500w," sizes="100vw"></figure>Tài liệu tham khảo:<a target="_blank" rel="noopener noreferrer" href="https://developer.wordpress.org/rest-api/">REST API Handbook</a><a target="_blank" rel="noopener noreferrer" href="https://www.advancedcustomfields.com/">ACF | Advanced Custom Fields Plugin for WordPress</a>&nbsp;

Một bài blog giúp bạn hiểu hơn về cách làm việc với API trong WordPress

WORDPRESS: LÀM VIỆC VỚI API

Với sự hỗ trợ đắc lực đến từ công nghệ trong nhóm Amazon S3, chính là S3 Bucket đây. Chúng ta đã có thể tạo ra cho mình không chỉ một mà còn nhiều hệ thống lưu trữ dữ liệu, hình ảnh, tài liệu cho các website khác nhau. Ưu điểm của dịch vụ này là không những không giới hạn về mức dung lượng lưu trữ, mà còn cho phép ta dùng bao nhiêu dung lượng thì trả bấy nhiêu chi phí cho dịch vụ này. Trong bài viết này mình sẽ hướng dẫn các bạn sử dụng dịch vụ này với thư viện frontend nổi tiếng là Next.JS và React Hook Form để upload hình ảnh lên server.<h2>1. Giới thiệu sơ lược về các công nghệ trong bài:</h2><h3>Amazon S3 Bucket:&nbsp;</h3>Amazon S3 Bucket là một dịch vụ lưu trữ dữ liệu tương tự như các dịch vụ đám mây phổ biến là Google Drive, Dropbox,… Tuy nhiên không giống các dịch vụ lưu trữ đám mây dành cho cá nhân hay doanh nghiệp như trên. Mà Amazon S3 Bucket chủ yếu hướng đến các dịch vụ web, các dịch vụ hỗ trợ Deployment như Cloudform, Lambda, Github Action,… Do đó S3 Bucket sẽ cung cấp cho khách hàng một kho lưu trữ với các tính năng ưu việt như tốc độ truy cập dữ liệu cực kì nhanh, khả năng mở rộng dung lượng không bị giới hạn, phù hợp cho các website chuyên về marketting và du lịch với khối lượng hình ảnh, video ngày một gia tăng là một ví dụ điển hình cho thấy sức mạnh của Amazon S3 Bucket.<h3>Next.JS:&nbsp;</h3>Next.js là một frame-work front-end được xây dựng dựa trên React. Giúp chúng ta xây dựng website có tốc độ tải trang nhanh chóng, đồng thời hỗ trợ SEO cực kì tốt để mà đem lại hiệu quả về kinh tế và quảng bá website. Hơn nữa Next.JS kế thừa toàn bộ công nghệ của React, nên các lập trình viên front-end sẽ dễ dàng làm quen và tiếp cận hơn.<h3>React Hook Form.</h3>Một thư viện độc đáo, giúp bạn đơn giản hóa các thao tác thường thấy khi lập trình các tính năng liên quan đến form nhập liệu văn bản như: Kiểm tra dữ liệu đầu vào của từng ô nhập liệu, xử lý dữ liệu khi khách hàng hoàn tất việc điền form nhập liệu.<h2>2. Khởi tạo một S3 Bucket để làm nơi lưu trữ hình ảnh:</h2>Chuẩn bị một tài khoản Amazon Web Service.&nbsp;Truy cập trang web <a href="https://s3.console.aws.amazon.com/s3/buckets ">https://s3.console.aws.amazon.com/s3/buckets&nbsp;</a> để vào trang quản lý của S3 Bucket.&nbsp;Bấm vào nút “Create Bucket” màu cam.Đặt tên bucket, chọn khu vực của máy chủ mà website chính của bạn có máy chủ được đặt gần nhất &nbsp;tại mục AWS Region.Bỏ chọn Block all public access tại mục Block Public Access settings for this bucket.Tại mục Turning off block all public access might result in this bucket and the objects within becoming public. Ta nhấn vào checkbox để xác nhận bỏ cấu hình Block all public access&nbsp;.&nbsp;Kéo xuống cuối trang và nhấn vào “Create Bucket” để tiến hành tạo S3 Bucket.Sau khi tạo thành công, ta nhấn vào tên của S3 bucket vừa tạo để vào giao diện quản lý như hình dưới đây.<figure class="image"><img></figure><figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_bcab256de2.png"></figure>Để Website có thể đọc và ghi dữ liệu lên S3 bucket này, ta cần cấu hình CORS như sau:Các bạn nhấn vào tab Permissions và tìm đến mục Cross-origin resource sharing (CORS)Nhấn edit và paste đoạn code dưới đây vào ô nhập liệu:<pre><code class="language-plaintext">[
 {
 "AllowedHeaders": [
 "*"
 ],
 "AllowedMethods": [
 "HEAD",
 "GET",
 "PUT",
 "POST",
 "DELETE"
 ],
 "AllowedOrigins": [
 "*"
 ],
 "ExposeHeaders": [
 "ETag"
 ]
 }
]</code></pre> Tiếp theo ta cấu hình Object Ownership như sau với cấu hình như sau:<img class="image_resized" style="width:72.79%;" src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_016509be0a.png"><h2>3. Cấu hình các key để Web app tương tác với S3 Bucket:</h2>Sau khi khởi tạo S3 Bucket và cấu hình CORS. Web application vẫn chưa có khả năng truy cập để upload tệp tin lên S3 Bucket. Vì sao?. Vì cấu hình bảo mật của Amazon Web Service rất chặt chẽ để mà có thể ngăn chặn các hành vi truy cập dữ liệu trái phép từ bên ngoài. Bởi vì vậy chúng ta cần tạo không chỉ một mà nhiều chìa khóa bảo mật khác nhau để có thể sử dụng được dịch vụ này.Để làm được điều đó, ta cần truy cập bảng điều khiển User của IAM qua đường link sau:<a href="https://console.aws.amazon.com/iam/home#/users">https://console.aws.amazon.com/iam/home#/users</a>Click chuột vào Add User.Tại mục Set user details. Ta nhập username vào ô nhập liệu User name*Tại mục Select AWS access type. Tích chọn checkbox Access key - Programmatic access và nhấn nút Next Permissions.Tại mục Add user to group. Ta chọn &nbsp;Attach existing policies directly, và chọn Policy AdministratorAccess. Sau đó nhấn nút Next: Tags để sang bước tiếp theoTại mục Add tags (optional). Ta nhấn Next: Review và cuối cùng là nhấn nút Create User để hoàn tất.Màn hình Success hiện ra. Các bạn sẽ bấm nút Download .csv để lưu lại Access key ID và Secret access key.<figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_b8da395d9e.png"></figure><h2>4. Cấu hình dự án Next.JS và React Hook Form:</h2>Tiếp theo chúng ta sẽ setup một project Next.JS template để thực hiện công việc upload ảnh. Tham khảo liên kết dưới đây sẽ hướng dẫn bạn tạo dự án Next.JS: <a href="https://nextjs.org/docs/api-reference/create-next-app">https://nextjs.org/docs/api-reference/create-next-app</a>Cài đặt các thư viện cần thiết:&nbsp;<pre><code class="language-plaintext">yarn add @aws-sdk/client-s3 aws-sdk react-hook-form</code></pre>Tạo file .env với các biến môi trường sau:<pre><code class="language-plaintext">NEXT_PUBLIC_AWS_ACCESS_KEY_ID=
NEXT_PUBLIC_AWS_SECRET_ACCESS_KEY=
NEXT_PUBLIC_AWS_BUCKET_NAME=
NEXT_PUBLIC_AWS_REGION=</code></pre>Trong đó <code>NEXT_PUBLIC_AWS_ACCESS_KEY_ID</code> và <code>NEXT_PUBLIC_AWS_SECRET_ACCESS_KEY</code> ta sẽ lấy được 2 tham số này từ tệp tin .csv ở cuối bước 3.Đối với <code>NEXT_PUBLIC_AWS_REGION</code> nó chính là mã của khu vực máy chủ Amazon Web Service, nơi mà S3 Bucket của chúng ta được đặt. nó chính là cụm từ cuối cùng của AWS Region.Nhìn theo hình dưới đây ta sẽ thấy: <code>NEXT_PUBLIC_AWS_REGION=</code><code>ap-southeast-1</code><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_be326eecd9.png">&nbsp;Sau khi thiết lập đầy đủ biến môi trường ta sẽ tiến hành tạo một trang rỗng để cài đặt code upload ảnh:pages/s3/index.tsx<pre><code class="language-javascript">/* eslint-disable @next/next/no-img-element */
import aws from 'aws-sdk';
import {ManagedUpload, PutObjectRequest} from 'aws-sdk/clients/s3';
import Image from 'next/image';
import React, {useEffect, useState} from 'react';
import {useForm} from 'react-hook-form';

aws.config.update({
 accessKeyId: process.env.NEXT_PUBLIC_AWS_ACCESS_KEY_ID,
 secretAccessKey: process.env.NEXT_PUBLIC_AWS_SECRET_ACCESS_KEY,
 region: process.env.NEXT_PUBLIC_AWS_REGION
});

const s3 = new aws.S3();

type FormValues = {
 image: File[];
};

export default function UploadImage() {
 const [imgSRC, setImgSRC] = useState('');

 const {
 register,
 handleSubmit,
 formState: {errors}
 } = useForm&lt;FormValues&gt;();
 const onSubmit = handleSubmit(data =&gt; {
 const {name} = data.image[0];
 const imageFile = data.image[0];

 const s3ObjectRequest: PutObjectRequest = {
 Bucket: process.env.NEXT_PUBLIC_AWS_BUCKET_NAME!,
 Body: imageFile,
 Key: `data/${name}`,
 ACL: 'public-read'
 };

 s3.upload(s3ObjectRequest, function (err: Error, response: ManagedUpload.SendData) {
 if (err) {
 console.log(err);
 }
 if (response) {
 console.log('Link image to save in database: ', response.Location);
 setImgSRC(response.Location);
 }
 });
 });

 return (
 &lt;form onSubmit={onSubmit}&gt;
 &lt;input {...register('image', {required: true})} type='file' /&gt;
 {errors?.image &amp;&amp; &lt;p&gt;Image bắt buộc thêm&lt;/p&gt;}

 &lt;input type='submit' /&gt;
 &lt;img src={imgSRC} alt={'S3 Picture'} /&gt;
 &lt;/form&gt;
 );
}
</code></pre>

Với sự hỗ trợ đắc lực đến từ công nghệ trong nhóm Amazon S3, chính là S3 Bucket đây. Chúng ta đã có thể tạo ra cho mình không chỉ một mà còn nhiều hệ thống lưu trữ dữ liệu, hình ảnh, tài liệu cho các website khác nhau. Ưu điểm của dịch vụ này là không những không giới hạn về mức dung lượng lưu trữ, mà còn cho phép ta dùng bao nhiêu dung lượng thì trả bấy nhiêu chi phí cho dịch vụ này. Trong bài viết này mình sẽ hướng dẫn các bạn sử dụng dịch vụ này với thư viện frontend nổi tiếng là Next.JS và React Hook Form

Upload ảnh với Amazon S3 Bucket và Next.JS với React Hook Form

Các ứng dụng chat như Messenger, Zalo, Telegram,… đã là một phần không thể thiếu đối hầu hết mọi người trong cuộc sống hiện nay. Không như những ứng dụng khác chỉ được cập nhật (làm mới) khi “Reload” lại page, ứng dụng chat là một ứng dụng thời gian thực, nó cần phải được cập nhật (làm mới) một cách nhanh chóng bất cứ khi nào có một người nào đó tương tác với phòng chat (data thay đổi). Trong bài blog này tôi giới thiệu về thư viện Socket.IO - một trong nhiêu những thư viện phổ biến được sử dụng để viết các ứng dụng chat như trên.
<h2 id="socketiolg">Socket.IO là gì?</h2>
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Introduction_About_Socket_IO_1_ba927865ae.png" alt="IntroductionAboutSocketIO1.png" />
Socket.IO là một thư viện cho phép giao tiếp độ trễ thấp, hai chiều và dựa trên sự kiện giữa client và server. Nó được xây dựng dựa trên giao thức WebSocket và cung cấp các đảm bảo bổ sung như dự phòng cho tính năng thăm dò dài hạn HTTP hoặc kết nối lại tự động.
Socket.IO không phải là một triển khai WebSocket. Mặc dù Socket.IO thực sự sử dụng WebSocket để truyền tải khi có thể, nó sẽ thêm siêu dữ liệu bổ sung vào mỗi gói. Đó là lý do tại sao client WebSocket sẽ không thể kết nối thành công với server Socket.IO và client Socket.IO cũng sẽ không thể kết nối với server WebSocket thuần túy.
<h2 id="features">Features</h2>
<h3 id="httplongpollingfallback">HTTP long-polling fallback</h3>
Kết nối sẽ trở lại trạng thái bỏ phiếu dài HTTP trong trường hợp không thể thiết lập kết nối WebSocket.
<h3 id="automaticreconnection">Automatic reconnection</h3>
Trong một số điều kiện cụ thể, kết nối WebSocket giữa client và client có thể bị gián đoạn mà cả hai bên đều không biết về trạng thái bị hỏng của liên kết. Đó là lý do tại sao Socket.IO bao gồm cơ chế heartbeat, kiểm tra định kỳ trạng thái của kết nối. Và khi client cuối cùng bị ngắt kết nối, nó sẽ tự động kết nối lại với độ trễ dự phòng theo cấp số nhân, để không overwhelm server.
<h3 id="packetbuffering">Packet buffering</h3>
Theo mặc định, bất kỳ sự kiện nào được kích hoạt trong khi Socket không được kết nối sẽ được lưu vào bộ đệm cho đến khi kết nối lại.
Mặc dù hữu ích trong hầu hết các trường hợp (khi độ trễ kết nối lại ngắn), nó có thể dẫn đến một lượng lớn các sự kiện khi kết nối được khôi phục.
Có một số giải pháp để ngăn chặn hành vi này, tùy thuộc vào trường hợp sử dụng của bạn:
sử dụng thuộc tính connected của Socket instance:
<pre><code class="ts language-ts">if (socket.connected) {
 socket.emit(/* ... */);
 socket.emit(/* ... */);
} else {
 // …
}
</code></pre>
sử dụng volatile events
<pre><code class="ts language-ts">socket.volatile.emit(/* ... */);
</code></pre>
<h3 id="acknowledgements">Acknowledgements</h3>
Socket.IO cung cấp một cách thuận tiện để gửi một sự kiện và nhận phản hồi.
Sender:
<pre><code class="ts language-ts">socket.emit("hello", "world", (response) =&gt; {
 console.log(response); // "got it"
});
</code></pre>
Receiver:
<pre><code class="ts language-ts">socket.on("hello", (arg, callback) =&gt; {
 console.log(arg); // "world"
 callback("got it");
 });
</code></pre>
Bạn cũng có thể thêm thời gian chờ:
<pre><code class="ts language-ts">socket.timeout(5000).emit("hello", "world", (err, response) =&gt; {
 if (err) {
 // the other side did not acknowledge the event in the given delay
 } else {
 console.log(response); // "got it"
 }
});
</code></pre>
<h3 id="broadcasting">Broadcasting</h3>
Ở phía server, bạn có thể gửi một sự kiện đến tất cả các client được kết nối hoặc đến một tập hợp con các client nào đó:
<pre><code class="ts language-ts">// to all connected clients
io.emit("hello");
// to all connected clients in the "abc" room
io.to("abc").emit("hello");
</code></pre>
<h3 id="multiplexing">Multiplexing</h3>
Namespace cho phép bạn phân chia logic của ứng dụng của mình qua một kết nối được chia sẻ duy nhất. Điều này có thể hữu ích, chẳng hạn như nếu bạn muốn tạo kênh "quản trị viên" mà chỉ những người dùng được ủy quyền mới có thể tham gia.
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Introduction_About_Socket_IO_2_97f525482c.png" alt="IntroductionAboutSocketIO2.png" />
<pre><code class="ts language-ts">io.on("connection", (socket) =&gt; {
 // classic users
});
io.of("/admin").on("connection", (socket) =&gt; {
 // admin users
});
</code></pre>
<h2 id="events">Events</h2>
<h3 id="emittingevents">Emitting events</h3>
API Socket.IO được lấy cảm hứng từ Node.js EventEmitter, có nghĩa là bạn có thể phát ra các sự kiện ở bên này và đăng ký các trình nghe ở bên kia:
Server
<pre><code class="ts language-ts">io.on("connection", (socket) =&gt; {
 socket.emit("hello", "world");
});
</code></pre>
Client
<pre><code class="ts language-ts">socket.on("hello", (arg) =&gt; {
 console.log(arg); // world
});
</code></pre>
Bạn có thể gửi bất kỳ số lượng đối số nào và tất cả các cấu trúc dữ liệu có thể tuần tự hóa đều được hỗ trợ, bao gồm các đối tượng nhị phân như Buffer hoặc TypedArray
Server
<pre><code class="ts language-ts">io.on("connection", (socket) =&gt; {
 socket.emit("hello", 1, "2", { 3: "4", 5: Buffer.from([6]) });
</code></pre>
Client
<pre><code class="ts language-ts">socket.on("hello", (arg1, arg2, arg3) =&gt; {
 console.log(arg1); // 1
 console.log(arg2); // "2"
 console.log(arg3); // { 3: '4', 5: ArrayBuffer (1) [ 6 ] }
});
</code></pre>
<h3 id="listeningtoevents">Listening to events</h3>
socket.on(eventName, listener): Thêm hàm lắng nghe sự kiện.
<pre><code class="ts language-ts">socket.on("details", (...args) =&gt; {
 // ...
});
</code></pre>
socket.once(eventName, listener): Thêm hàm lắng nghe sự kiện một lần.
<pre><code class="ts language-ts">socket.once("details", (...args) =&gt; {
 // ...
});
</code></pre>
<pre><code>
</code></pre>
socket.off(eventName, listener): Loại bỏ trình nghe đã chỉ định khỏi mảng trình nghe cho sự kiện có tên eventName.
<pre><code class="ts language-ts">const listener = (...args) =&gt; {
 console.log(args);
};
</code></pre>

socket.on("details", listener);
<pre><code class="ts language-ts">// and then later...
socket.off("details", listener);
</code></pre>
<pre><code>
</code></pre>
socket.removeAllListeners ([eventName]): Loại bỏ tất cả người nghe hoặc những người của eventName được chỉ định.
<pre><code class="ts language-ts">// for a specific event
socket.removeAllListeners("details");
// for all events
socket.removeAllListeners();
</code></pre>
<h3 id="rooms">Rooms</h3>
Rooms là một kênh tùy ý mà các socket có thể tham gia và rời khỏi. Nó có thể được sử dụng để truyền phát các sự kiện cho một nhóm nhỏ các client.
Mỗi Socket trong Socket.IO được xác định bằng một mã định danh ngẫu nhiên, không thể đoán được, duy nhất (Socket#id). Để thuận tiện cho bạn, mỗi socket sẽ tự động tham gia vào một phòng được xác định bằng id riêng của nó.
Xin lưu ý rằng phòng là khái niệm chỉ dành cho server (tức là khách hàng không có quyền truy cập vào danh sách các phòng đã tham gia).
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Introduction_About_Socket_IO_3_aae65bef2d.png" alt="IntroductionAboutSocketIO3.png" />
Bạn có thể gọi join để đăng ký socket vào một kênh nhất định:
<pre><code class="ts language-ts">io.on("connection", (socket) =&gt; {
 socket.join("some room");
});
</code></pre>
Và sau đó bạn có thể sử dụng to hoặc in khi broadcasting or emitting:
<pre><code class="ts language-ts">io.to("some room").emit("some event");
</code></pre>
Bạn có thể emit nhiều phòng cùng một lúc:
<pre><code class="ts language-ts">io.to("room1").to("room2").to("room3").emit("some event");
</code></pre>
Trong trường hợp đó, kết hợp được thực hiện: mọi socket có ít nhất một trong các phòng sẽ nhận được sự kiện một lần (ngay cả khi socket ở hai hoặc nhiều phòng).
Bạn cũng có thể emit đến một phòng từ một socket nhất định:
<pre><code class="ts language-ts">io.on("connection", (socket) =&gt; {
 socket.to("some room").emit("some event");
});
</code></pre>
Trong trường hợp đó, mọi socket trong phòng không bao gồm người gửi sẽ nhận được sự kiện. 
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Introduction_About_Socket_IO_4_84ee33adc0.png" alt="IntroductionAboutSocketIO4.png" />
Để rời khỏi một kênh, bạn gọi là leave theo cách tương tự như join.<div id="md2html-converted" style="display:none"></div>

Socket.IO cốt lõi của nhiều ứng dụng real-time.

Giới thiệu về Socket.IO

JavaScript (JS) là một ngôn ngữ lập trình thông dịch được phát triển từ các ý niệm nguyên mẫu. Nó là ngôn ngữ lập trình được sử dụng phổ biến nhất hiện nay. Ngôn ngữ này được dùng rộng rãi cho các trang web (phía người dùng) và cũng như phía máy chủ (với Node.JS).
Từ lúc ra mắt cho đến nay JS đã trải qua 2 bản sửa đổi lớn. ECMAScript 2009 còn được gọi là ES5 là bản sửa đổi lớn đầu tiên cho JS và ECMAScript 2015 còn được gọi là ES6 là bản sửa đổi lớn thứ hai cho JS. Sau 2 bản sửa đổi lớn này JS tiếp tục được sửa đổi nhiều bản sửa đổi khác như: ECMAScript 2016 và 2017 nhưng chúng không được gọi là ES7 và ES8. Kể từ năm 2016, các phiên bản mới được đặt tên theo năm (ECMAScript 2016/2017/2018).
Trong các bản sửa đổi trên thì ES6 là bản sửa đổi quan trọng nhất được bổ sung thêm cú pháp mới quan trọng cho việc viết các ứng dụng phức tạp, bao gồm classes và modules. Và trong blog này tôi sẽ nói về một vài tính năng quan trọng được cập nhật trong ES6.
1. Arrow function
Về cơ bản thì arrow function hoàn toàn giống function bình thường nhưng đương nhiên sẽ có một chút khác biệt, cụ thể là:
<ul>
<li>Cú pháp của arrow function ngăn gọn hơn sử dụng "=>" chỉ có 2 ký tự thay vì sử dụng từ khoá "function" tận 8 ký tự như function bình thường chính vì thế nó giúp code của bạn được ngăn gọn sạch sẽ hơn.
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/some_concepts_in_ES_6_1_b488c3c03c.png" alt="some-concepts-in-ES6-1.png" /></li>
<li>Arrow function không tạo ra một scope mới cho từ khóa this khi được gắn cho một thuộc tính bên trong một đối tượng. Có nghĩa từ khoá this bên trong function sẽ khác nhau tuỳ thuộc và loại function ( arrow hay bình thường) khi function được gắn cho 1 thuộc tính bên trong đối tượng.</li>
</ul>
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/some_concepts_in_ES_6_2_0eb13e1151.png" alt="some-concepts-in-ES6-2.png" />
2. Block scope
Block scope là phạm vi trong một khối (trong cặp {}), có nghĩa là các biến được khai báo trong nào thì chỉ tồn tại bên trong khối đó.
Ví dụ như khi bạn khai báo một biến a trong block scope 1 và sau đó gọi nó trong cả hai block scope 1 và 2 như đoạn code sau:
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/some_concepts_in_ES_6_3_907a6c557b.png" alt="some-concepts-in-ES6-3.png" />
Sau khi chạy đoạn code trên bạn nhận được kết quả là: ở block 1 biến a sẽ được log ra bình thường và ở block 2 thì bạn sẽ nhận được một lỗi "a is not defined" vì biến a không được khai báo trong block scope 2.
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/some_concepts_in_ES_6_4_19b0c38e48.png" alt="some-concepts-in-ES6-4.png" />
3 . từ khoá let, const
Từ khoá để khai báo một biến trong JS trước bản sửa đổi ES6 chỉ có từ khoá var và tại bản sửa đổi ES6 chúng ta có thêm hai từ khoá mới để khai báo biến là let và const.
Và đương nhiên là không phải tự nhiên mà nó được sinh ra. Let , const , var đều dùng để khai báo 1 biến nhưng chúng sẽ có 1 một vài điểm khác nhau.
Từ khoá var là 1 khái niệm có trước ES6 và trước ES6 thì chưa có khái niệm block scope và nó là biến tuân thủ theo global scope (phạm vi toàn cục) do đó các được khai báo bằng từ khoá var sẽ không tuân thủ theo block scope. Có nghĩa là ngay cả khi chúng được khai báo bên trong một block scope này thì bạn vẫn có thể gọi chúng bên trong một block scope khác.
Quay lại ví dụ ban nảy trong phần block scope nếu bạn thay đổi từ khoá let thành từ khoá var.
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/some_concepts_in_ES_6_5_53f608793b.png" alt="some-concepts-in-ES6-5.png" />
Thì kết quả lần này sẽ khác lần trước, ở cả 2 block đều log ra được biến a.
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/some_concepts_in_ES_6_6_923bc6aed0.png" alt="some-concepts-in-ES6-6.png" />
Thế còn từ khóa const thì sao, nếu ta dùng từ khóa const để khai báo biến trong ví dụ trên thì được một kết quả tương tự như khi khi dùng từ khoá let để khai báo biến a.
Từ đó ta thấy các biến được khai báo bằng từ khoá:
<ul>
<li>var sẽ tuân thủ theo global scope (nó sẽ tồn tài trong toàn bộ chương trình).</li>
<li>const , let tuân thủ theo block scope (nó chỉ tồn tại trong block scope mà nó được khai báo).</li>
</ul>
Đọc tới đây chắc bạn đang tự hỏi thế "const"và "let" thì sao? Chúng khác nhau như thế nào?
Hãy cùng xem 1 ví dụ:
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/some_concepts_in_ES_6_7_2d4b75c8ee.png" alt="some-concepts-in-ES6-7.png" />
Và kết quả chắc chắn sẽ dòng "a: 10" sẽ được log ra. Nhưng nếu bạn thay từ khoá let bằng từ khóa const bạn sẽ gặp lỗi "Assignment to constant variable".
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/some_concepts_in_ES_6_8_77daba236c.png" alt="some-concepts-in-ES6-8.png" />
Từ ví dụ trên chắc chắn bạn đã thấy được let và const khác nhau như thế nào rồi. Biến được khai báo bằng từ khoá let sẽ có thể thay đổi giá trị nhưng nếu biến đó được khai báo bằng từ khóa const thì chúng sẽ không thể thay đổi giá trị được.
Và một vấn đề không quan trọng lắm bạn sẽ được nhắc nhở bởi IDE nếu mặc gặp vấn đề này nhưng bạn cũng nên biết. Đó là một biến đã được khai báo bằng từ khoá let hoặc const thì bạn sẽ không thể dùng từ khóa let hoặc const để khai báo lại chúng.
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/some_concepts_in_ES_6_9_87429e7dbe.png" alt="some-concepts-in-ES6-9.png" />
Và còn một điều nữa mà bạn cần nên biết về từ khóa const. Như đã nói trên biến được khai báo bằng từ khóa const thì giá trị của chúng sẽ không thể được thay đổi. Tuy nhiên nếu giá trị của chúng là một object thì bạn vẫn có thể thay đổi giá trị thuộc tính của chúng. 
Ví dụ:
<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/some_concepts_in_ES_6_10_01158d32fd.png" alt="some-concepts-in-ES6-10.png" />
Trong bài blog này tôi đã trình bày về 4 khái niệm mới được thêm vào trong bản cập nhật ES6. vẫn còn nhiều khái niệm khác nữa bạn có thể đọc thêm tại<a href="https://www.w3schools.com/js/js_es6.asp">https://www.w3schools.com/js/js_es6.asp</a><div id="md2html-converted" style="display:none"></div>

Công Nghệ

Categories

Liên hệ