Chào mừng mọi người đã quay lại với blog của mình và mình là Tuyền. Hôm nay mình sẽ trở lại với serie học gì chia sẻ nấy và series này mình sẽ tạm đặt tên là “Tuyền học Cypress” với mục tiêu vừa tìm hiểu và học và có thể thực hành thành thạo Cypress. Đồng thời, tạo một lộ trình học (mang tính tham khảo) cho những bạn mới bắt đầu học, tìm hiểu về Cypress thì mình hy vọng bài viết của mình sẽ hữu ích cho các bạn.&nbsp;Để hiểu về Cypress là gì? và nó có vai trò như thế nào thì chúng ta cùng nhau tìm hiểu về những kiến thức đại cương về nó nhé!!!! <img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/banner_649be52668.png"><h4>No.1: Cùng Tuyền tìm hiểu kiến thức đại cương về Cypress</h4><figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/cy_97ca7d4a9a.png"></figure>Cypress là một công cụ kiểm thử từ đầu đến cuối được thiết kế cho các ứng dụng web hiện đại. Có mã nguồn mở và được áp dụng rộng rãi trên cộng đồng phát triển web, Cypress hoạt động trực tiếp trên trình duyệt. Với cách hoạt động linh hoạt cho phép các nhà phát triển có thể viết và thực thi các bài kiểm tra một cách dễ dàng, hiệu quả.Những ưu điểm siêu việt của Cypress có thể kể đến:<figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/ud_Cy_f5e0258a87.png"></figure><ul><li>Đơn giản, thân thiện dễ tương tác&nbsp;</li><li>Tải lại trang và loại bỏ lỗi theo thời gian thực: Khi chạy các bài kiểm tra cho phép chúng ta có thể theo dõi từng bước và có thể tạm dừng các bài kiểm tra. Dễ dàng quan sát trạng thái của ứng dụng trong thời gian thực làm đơn giản hóa quá trình gỡ lỗi.</li><li>Đợi và kiểm thử tự động: Với cơ chế thông minh tự động chờ đợi và chạy các bài kiểm tra đối chiếu so sánh dữ liệu: text, con số có đúng với testcase đề ra không?. Đồng thời, hiển thị kết quả đúng hoặc sai một cách rõ ràng, nhằm giúp tester báo cáo lỗi với developer (dev) chính xác hơn. Giúp team dev hiểu và fix lỗi chính xác hơn. Ngoài ra, việc chạy các bài test trong mỗi lần release sẽ giúp web chúng ta không bị lỗi phát sinh trong quá trình phát triển thêm tính năng mới, giúp giảm thiểu được số lượng lỗi, kết quả sai, không đáng tin cậy.</li><li>Khả năng tích hợp vào CI/CD: Giúp cho việc viết test trên các project và chạy lại test nó sẽ linh hoạt và thường xuyên hơn. Dễ dàng thiết lập quy trình kiểm thử mạnh mẽ và đáng tin cậy, loại bỏ lỗi nhanh chóng,&nbsp; đảm bảo chất lượng của ứng dụng với mỗi lần merge pull-request.</li><li>Một tính năng khá hay của Cypress đó là có thể chụp ảnh màn hình ở bất kỳ thời điểm nào khi chạy bài kiểm tra hoặc quay video quá trình chạy test, như vậy có thể giúp bạn lưu trữ và so sánh được với kết quả dự kiến.</li><li>Cộng đồng phát triển lớn và có nhiều plugin hỗ trợ.</li><li>Hỗ trợ kiểm thử ở các trình duyệt: Chrome, Firefox, Edge.</li><li>Hỗ trợ viết nhiều loại test: E2E (End - to - end) test, Component test, Integration test, Unit test,...</li></ul>Tuy vậy, Cypress vẫn có những mặt hạn chế:<figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/nd_Cy_efe16ff923.png"></figure><ul><li>Giới hạn ngôn ngữ viết test, được biết Cypress hiện tại chỉ dùng duy nhất ngôn ngữ là Javascript để viết test.&nbsp;</li><li>Không hỗ trợ chạy song song nhiều trình duyệt: Cypress chỉ chạy test đồng thời ở một trình duyệt duy nhất.</li><li>Đối với các bài kiểm thử lớn và phức tạp gây chậm trong việc thực thi các bài kiểm thử.</li><li>Kiểm tra đa trang web bị hạn chế: hiện tại Cypress chỉ hỗ trợ kiểm thử cho các trang đơn (Single Page Applications - SPAs). Đối với các ứng dụng có sự chuyển đổi trang thì dùng Cypress có thể gặp khó khăn,...</li></ul>Tuy, có những ưu và nhược điểm như vậy nhưng Cypress cũng đang&nbsp; dần chiếm ưu thế vì sự tiện lợi của mình, giúp giải quyết tốc độ, sự tin cậy, các vấn đề khác mà các công cụ kiểm thử web không làm được. Với sự phát triển này, đội ngũ phát triển Cypress sẽ cập nhật thêm nhiều tính năng để giúp các nhà phát triển viết test nhanh chóng và tiện lợi hơn nữa đảm bảo cho các ứng dụng đầu ra sẽ chất lượng đỉnh cao, trải nghiệm người dùng tuyệt nhất…Những kiến thức trên là những lý thuyết đại cương về khái niệm, vai trò, lợi ích mà Cypress mang lại ở môi trường thử nghiệm. Để biết cách hoạt động và xây dựng một bài test đầu tiên thì chúng ta đến với phần tiếp theo ở blog sau, hướng dẫn setup và tạo dự án đầu tiên…!!!!!Cảm ơn các bạn đã đọc đến đâ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.Tài liệu tham khảo: https://docs.cypress.io/guides/overview/why-cypress &nbsp;

Cypress là một công cụ kiểm thử từ đầu đến cuối được thiết kế cho các ứng dụng web hiện đại. Có mã nguồn mở và được áp dụng rộng rãi trên cộng đồng phát triển web, Cypress hoạt động trực tiếp trên trình duyệt. 

Tuyền học Cypress - No.1 Tìm hiểu kiến thức đại cương về Cypress

Dưới đây là sự phân biệt chi tiết giữa Type và Interface trong TypeScript, kèm theo ví dụ code cụ thể để minh hoạ:<h3>Cú pháp:&nbsp;</h3><ul><li>Type: Sử dụng từ khóa type để định nghĩa một Type.</li><li>Interface: Sử dụng từ khóa interface để định nghĩa một Interface.</li></ul>Ví dụ:<pre><code class="language-typescript">// Type
type MyType = {
 prop1: string;
};

// Interface
interface MyInterface {
 prop1: string;
}</code></pre><h3>Extendable:</h3><ul><li>Type: Type không hỗ trợ việc mở rộng từ một Type khác.</li><li>Interface: Interface có thể mở rộng từ một hoặc nhiều Interface khác bằng từ khóa extends.</li></ul>Ví dụ:<pre><code class="language-typescript">interface BaseInterface {
 prop1: string;
}

interface ExtendedInterface extends BaseInterface {
 prop2: number;
}</code></pre><h3>Mergeable:</h3><ul><li>Type: Type không hỗ trợ tính chất mergeable. Nếu bạn định nghĩa hai Type trùng tên, TypeScript sẽ báo lỗi.</li></ul>Ví dụ:<pre><code class="language-typescript">type MyType = {
 prop1: string;
};

type MyType = {
 prop2: number;
};
// Lỗi: Cannot redeclare block-scoped variable 'MyType'.</code></pre><ul><li>Interface: Interface có tính chất mergeable. Nếu bạn định nghĩa hai Interface trùng tên, TypeScript sẽ tự động kết hợp các định nghĩa lại với nhau.</li></ul>Ví dụ:<pre><code class="language-typescript">interface MyInterface {
 prop1: string;
}

interface MyInterface {
 prop2: number;
}

const obj: MyInterface = {
 prop1: "Hello",
 prop2: 10
};</code></pre><h3>Callable:</h3><ul><li>Type: Type không hỗ trợ việc mô tả một function (callable).</li><li>Interface: Interface có thể được sử dụng để mô tả một function.</li></ul>Ví dụ:<pre><code class="language-typescript">interface MyInterface {
 (param: string): void;
}

const myFunc: MyInterface = param =&gt; {
 console.log(param);
};

myFunc("Hello");</code></pre><h3>Readonly và Partial:</h3><ul><li>Type và Interface đều hỗ trợ readonly và partial modifiers để chỉ định thuộc tính chỉ đọc (readonly) và thuộc tính tùy chọn (optional).</li></ul>Ví dụ:<pre><code class="language-typescript">// Readonly và Partial trong Type
type MyType = {
 readonly prop1: string;
 prop2?: number;
};

const obj1: MyType = {
 prop1: "Hello",
};

obj1.prop1 = "World"; // Lỗi, prop1 là thuộc tính chỉ đọc

obj1.prop2 = 10; // OK, prop2 là thuộc tính tùy chọn

// Readonly và Partial trong Interface
interface MyInterface {
 readonly prop1: string;
 prop2?: number;
}

const obj2: MyInterface = {
 prop1: "Hello",
};

obj2.prop1 = "World"; // Lỗi, prop1 là thuộc tính chỉ đọc

obj2.prop2 = 10; // OK, prop2 là thuộc tính tùy chọn</code></pre>Tóm lại, Type và Interface trong TypeScript có sự khác nhau trong cú pháp, khả năng mở rộng, tính mergeable, tính callable và hỗ trợ readonly và partial. Việc sử dụng Type hay Interface phụ thuộc vào yêu cầu cụ thể trong dự án của bạn.

Trong TypeScript, cả type và interface đều được sử dụng để mô tả kiểu dữ liệu. Tuy nhiên, có một số sự khác biệt chú ý giữa chúng. Sau đây là một số khác biệt quan trọng.

Sự khác nhau giữa Interface và Type trong TypeScript

<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

Mình là Hưng đến từ ABC Software Solutions Company.&nbsp; Trong thời gian gần đây, mình có cơ hội thử trải nghiệm xây dựng một trang web trên nền tảng WIX và mình muốn chia sẻ lại với các bạn những lợi ích mà nó mang lại, cùng với trải nghiệm cá nhân của mình và những kinh nghiệm mà mình đã rút ra.<h2>Wix là gì?</h2>Wix là một nền tảng xây dựng website trực tuyến (website builder) cho phép người dùng tạo và quản lý các trang web một cách dễ dàng mà không cần kiến thức về lập trình. Wix cung cấp một giao diện kéo và thả (drag-and-drop) cho phép người dùng chọn và sắp xếp các thành phần và nội dung trên trang web theo ý muốn. Người dùng có thể truy cập vào Wix thông qua trình duyệt web và bắt đầu xây dựng trang web của mình từ các mẫu có sẵn hoặc bắt đầu từ đầu với giao diện trống. Wix cung cấp một loạt các công cụ và tính năng để tùy chỉnh và thiết kế trang web, bao gồm cả việc thay đổi giao diện, sắp xếp các thành phần, tạo trang sản phẩm, thêm các tính năng như blog, cửa hàng trực tuyến, form liên hệ, và nhiều hơn nữa. Wix cũng cung cấp các tính năng quản lý nội dung và phân tích thống kê để người dùng có thể theo dõi hiệu suất của trang web và tương tác với khách truy cập. Ngoài ra, Wix cũng hỗ trợ tích hợp các dịch vụ bên thứ ba như công cụ tối ưu hóa công cụ tìm kiếm (SEO), email marketing, tích hợp mạng xã hội và nhiều hơn nữa. Với Wix, người dùng không cần phải có kiến thức về mã hóa hay thiết kế web phức tạp, và có thể tạo ra một trang web chuyên nghiệp và hấp dẫn trong thời gian ngắn.<h2>Trải nghiệm của mình</h2>Với vai trò là một UI/UX designer mình đến với Wix thông qua một yêu cầu của khách hàng về xây dựng website B2B Landing page. Mình được tạo điều kiện thời gian khoản gần 2 tuần để tìm hiểu và thực hành. Trước đây mình đã có kinh nghiệm xây dựng website bằng WordPress với việc áp dụng các plugin như Elementor, Flatsome, Woocommerce,...Việc làm việc trên Wix lần này có một số điểm tương đồng với WordPress đã làm cho mình cảm thấy thú vị hơn, đồng thời cung cấp cho bản thân mình nhiều kiến thức mới và thú vị hơn về nền tảng này. Dưới đây là những gì mình đã tìm hiểu được về Wix.<h3>Ưu điểm của Wix</h3>Wix tỏa sáng với một loạt các tính năng đáng chú ý. Với sự thu hút của một đám đông người dùng, Wix gây ấn tượng bằng những ưu điểm nổi bật sau:<ul><li>Giao diện dễ sử dụng: Wix được thiết kế với giao diện người dùng thân thiện và dễ dàng tiếp cận. Người dùng có thể tạo và chỉnh sửa trang web một cách đơn giản thông qua công cụ kéo và thả.</li><li>Thiết kế linh hoạt: Wix cung cấp nhiều mẫu và giao diện đẹp mắt để người dùng lựa chọn. Bên cạnh đó, người dùng có thể tùy chỉnh bố cục, màu sắc, phông chữ và hình ảnh theo ý muốn, giúp tạo ra trang web độc đáo và phù hợp với ý tưởng của mình.</li><li>Tích hợp tính năng mạnh mẽ: Wix đi kèm với nhiều tính năng tích hợp như blog, cửa hàng trực tuyến, tích hợp mạng xã hội, hỗ trợ SEO và nhiều tính năng khác. Điều này giúp người dùng dễ dàng xây dựng và quản lý trang web theo nhu cầu của mình.</li><li>Đáp ứng trên nhiều thiết bị: Trang web được xây dựng trên Wix tự động thích ứng với các thiết bị khác nhau như desktop, điện thoại di động và máy tính bảng. Điều này đảm bảo trải nghiệm người dùng tốt trên mọi nền tảng.</li><li>Hỗ trợ khách hàng tận tâm: Wix cung cấp các tài liệu hướng dẫn chi tiết, trung tâm hỗ trợ và diễn đàn cộng đồng để hỗ trợ người dùng. Bạn có thể tìm thấy sự giúp đỡ và giải đáp thắc mắc nhanh chóng khi cần thiết.</li></ul><h3>Một số nhược điểm của Wix</h3>Bên cạnh những ưu điểm, Wix cũng có một số nhược điểm cần lưu ý:<ul><li>Giới hạn tùy chỉnh mã nguồn: Wix không cho phép truy cập và chỉnh sửa mã nguồn trực tiếp. Người dùng chỉ có thể thực hiện tùy chỉnh thông qua giao diện người dùng. Điều này hạn chế sự linh hoạt và khả năng tùy chỉnh cao hơn của trang web.</li><li>Giới hạn mở rộng tính năng: Wix có một số ứng dụng và tiện ích mở rộng trong Wix App Market, nhưng không phải tất cả các tính năng mà bạn có thể tìm thấy trên nền tảng phát triển web chung. Điều này có thể khiến việc đáp ứng những yêu cầu đặc biệt hoặc tích hợp các công cụ bên ngoài trở nên khó khăn hơn.</li><li>Phí dịch vụ và giới hạn băng thông: Một số tính năng và tài nguyên mở rộng của Wix chỉ có sẵn trong các gói dịch vụ trả phí. Một số gói dịch vụ cũng có giới hạn về băng thông, điều này có thể ảnh hưởng đến khả năng tải trang nhanh chóng và xử lý lưu lượng truy cập lớn.</li><li>Quảng cáo Wix: Trong phiên bản miễn phí, Wix hiển thị quảng cáo của chính họ trên trang web của bạn. Để loại bỏ quảng cáo này, bạn cần nâng cấp lên các gói dịch vụ trả phí.</li><li>Khó khăn với di chuyển nền tảng: Nếu bạn muốn chuyển đổi từ Wix sang một nền tảng khác, quá trình di chuyển có thể gặp khó khăn. Việc chuyển đổi có thể mất thời gian và công sức để tùy chỉnh lại trang web trên nền tảng mới.</li></ul>Tuy nhiên, nhược điểm này không ảnh hưởng đến khả năng Wix cung cấp một giải pháp xây dựng trang web nhanh chóng và dễ dàng cho người dùng không có kỹ năng lập trình.<h3>So sánh Wix và WordPress</h3> Sau khoản thời gian tìm hiểu về Wix, mình nhận ra Wix và WordPress sẽ có nhiều điểm khác biệt, sau đây là một số điểm cần quan tâm: <img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/WIX_VS_WP_b34d13fea7.png" alt="WIX VS WP.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_WIX_VS_WP_b34d13fea7.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_WIX_VS_WP_b34d13fea7.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_WIX_VS_WP_b34d13fea7.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_WIX_VS_WP_b34d13fea7.png 1000w," sizes="100vw"><h4>Thiết kế và bố cục</h4>Wix và WordPress đều cung cấp một loạt các mẫu giao diện để bạn lựa chọn. Wix có hơn 500 mẫu được thiết kế sẵn, phù hợp với nhiều ngành nghề khác nhau. Các mẫu này có giao diện trực quan và bạn có thể dễ dàng tùy chỉnh bố cục và công cụ theo ý muốn. Tuy nhiên, một điểm lưu ý là khi mình đã chọn một mẫu giao diện trên WIX, sẽ không thể thay đổi sang mẫu khác. Thay vào đó, mình phải tiếp tục tùy chỉnh bố cục và các thành phần trên mẫu đã chọn. WordPress cũng mang đến cho người dùng một thư viện đa dạng với hàng nghìn mẫu giao diện, bao gồm cả miễn phí và có phí. Một điểm khác biệt với Wix là WordPress cho phép dễ dàng tùy chỉnh lại mẫu giao diện đã chọn bằng cách sử dụng các theme và plugin khác. Điều này mang lại cho người dùng một một mức độ linh hoạt cao hơn trong việc tạo ra trang web độc đáo và phù hợp với mục tiêu hướng đến. Dù là Wix hay WordPress, cả hai nền tảng đều cung cấp các công cụ và tùy chọn tùy chỉnh để bạn tạo ra một trang web đẹp mắt và chuyên nghiệp. Quyết định lựa chọn giữa hai nền tảng này phụ thuộc vào nhu cầu và mục tiêu của bạn. Nếu bạn muốn sự đơn giản và dễ sử dụng, cùng với một số mẫu giao diện sẵn có để tùy chỉnh, Wix là một sự lựa chọn tốt. Ngược lại, nếu bạn mong muốn sự linh hoạt và khả năng tùy chỉnh cao hơn, WordPress sẽ là một lựa chọn phù hợp, mặc dù có đôi chút đòi hỏi kiến thức về mã hóa và quản lý.<h4>Tính trải nghiệm</h4>Wix sở hữu rất nhiều công cụ được thiết kế thông minh và vô cùng dễ sử dụng. Thậm chí với những người hoàn toàn không am hiểu về code hay thiết kế website vẫn có thể dùng được. Trong khi đó, WorPress lại có visual editor giúp viết nội dung và chỉnh sửa theme một cách nhanh chóng, dễ dàng. Tuy nhiên, với những tính năng trong WordPress, bạn cần phải tốn nhiều thời gian và công sức để tìm hiểu.<h4>Plugin/App</h4>Nền tảng Wix hiện tại đang có khoảng hơn 500 app hỗ trợ với những chức năng như: nhận xét, thư viện, theme biểu mẫu liên hệ,… Phần lớn các app này đều được miễn phí. Trong khi đó, số lượng plugin của WordPress đã lên tới con số 55.000 chưa kể hàng nghìn app có trả phí khác.  Tóm lại, tính tới thời điểm hiện tại, nếu so về sự tương quan giữa chi phí – lượng tính năng, tài nguyên, thiết kế bố cục, plugin/app thì WordPress vẫn đang chiếm nhiều ưu thế hơn hẳn. Tuy nhiên, Wix vẫn được đánh giá cao hơn bởi tính dễ sử dụng cho người mới.<h3>Có nên sử dụng Wix?</h3>Nền tảng Wix đơn giản và dễ sử dụng, ngay cả cho những người không có nhiều kiến thức về lập trình. Mọi người có thể bắt đầu sử dụng Wix mà không cần mua hosting và domain riêng. Điều này làm cho Wix trở thành lựa chọn hợp lý cho những người không muốn đầu tư quá nhiều về mặt kỹ thuật và tài chính. Nếu bạn không am hiểu sâu về công nghệ và không muốn chi tiền mua hosting và domain, Wix là sự lựa chọn phù hợp. Bạn có thể tạo ra một trang web chuyên nghiệp theo yêu cầu mà không cần quá nhiều khó khăn. Tuy nhiên, nếu bạn đang xây dựng một trang web lớn hơn với quy mô phức tạp hơn, WordPress là sự lựa chọn tốt hơn. WordPress cung cấp nhiều tính năng và khả năng tùy chỉnh mạnh mẽ hơn, đồng thời cho phép bạn sử dụng tên miền riêng và khai thác các tính năng nâng cao. Đó là những kiến thức cơ bản về nền tảng Wix và cách sử dụng công cụ này để tạo ra một trang web đơn giản. Tuy nhiên, cũng cần lưu ý rằng Wix còn có một số hạn chế. Nếu bạn chỉ cần một trang web đơn giản hoặc không có nhiều kiến thức chuyên sâu, thì Wix là một lựa chọn an toàn và tiện lợi.<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Should_use_WIX_08197ecde3.png" alt="Should use WIX_.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_Should_use_WIX_08197ecde3.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_Should_use_WIX_08197ecde3.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_Should_use_WIX_08197ecde3.png 750w," sizes="100vw"><h2>Kinh nghiệm mình có được</h2>Dù có nhiều lợi ích, mình cũng gặp một số thách thức trong quá trình xây dựng trang web trên Wix. Một trong số đó là giới hạn của các mẫu thiết kế có sẵn, khiến mình phải tìm cách tùy chỉnh để đáp ứng đúng yêu cầu của dự án. Tuy nhiên, mình đã vượt qua các thách thức này bằng cách tìm hiểu kỹ càng và tận dụng các tính năng linh hoạt của Wix. Trải nghiệm xây dựng website trên Wix đã mang lại cho mình nhiều bài học quý giá. Mình nhận thấy rằng việc nắm vững cách sử dụng một công cụ thiết kế web quan trọng như Wix giúp mình tăng cường khả năng thực hiện các dự án trong tương lai. Mình cũng nhận ra tầm quan trọng của việc tối ưu hóa trải nghiệm người dùng và tạo ra một thiết kế hợp lý để đáp ứng nhu cầu của khách hàng. Tổng kết lại, trải nghiệm xây dựng trang web trên Wix đã mang lại cho mình nhiều kiến thức và kỹ năng quý giá trong lĩnh vực UI/UX design. Mình đã hiểu rõ hơn về lợi ích và hạn chế của Wix, cũng như cách tùy chỉnh và linh hoạt để tạo ra một trang web đẹp và hấp dẫn. Qua khoản thời gian này, mình biết rằng việc không ngừng học hỏi và thử nghiệm mới sẽ giúp mình phát triển hơn về những công nghệ mới cũng như nâng cao tư duy và sáng tạo, mang đến người dùng những sản phẩm tuyệt vời. Mình hy vọng blog này đã mang lại cho các bạn những thông tin hữu ích và động lực để khám phá thế giới của thiết kế website. Hãy tiếp tục duy trì đam mê và sáng tạo, luôn khám phá những công nghệ mới và không ngừng học hỏi.&nbsp; Một lần nữa, xin chân thành cảm ơn và hy vọng rằng chúng ta sẽ tiếp tục gặp gỡ trong những bài viết và chia sẻ tương lai.&nbsp; Hẹn gặp lại!

Wix mang lại sự dễ dàng và linh hoạt. Với nhiều mẫu giao diện thiết kế sẵn và công cụ tùy chỉnh, bạn có thể tạo ra một trang web đẹp và chuyên nghiệp một cách nhanh chóng và dễ dàng.

Trải nghiệm xây dựng website trên Wix

Cypress được thiết kế để chạy các kịch bản kiểm thử nhanh chóng và hiệu quả giúp tạo ra các bộ kiểm thử tự động toàn diện, giảm thiểu công sức và thời gian của nhóm QA. Cùng theo chân mình để biết cách cài đặt và mở Cypress như thế nào nhé!<h2>1. Các phần mềm cần thiết</h2>Github<img class="image_resized" style="width:41.27%;" src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Screenshot_2023_05_16_at_15_01_09_243449ba5a.png" alt="Screenshot 2023-05-16 at 15.01.09.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_Screenshot_2023_05_16_at_15_01_09_243449ba5a.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_Screenshot_2023_05_16_at_15_01_09_243449ba5a.png 500w," sizes="100vw">Visual Studio Code<img class="image_resized" style="width:39.98%;" src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Screenshot_2023_05_16_at_15_16_07_8488fd918f.png" alt="Screenshot 2023-05-16 at 15.16.07.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_Screenshot_2023_05_16_at_15_16_07_8488fd918f.png 221w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_Screenshot_2023_05_16_at_15_16_07_8488fd918f.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_Screenshot_2023_05_16_at_15_16_07_8488fd918f.png 750w," sizes="100vw"><h2>2. Cách clone code&nbsp;</h2>Mở Github → tìm Add → chọn Clone Repository<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Screenshot_2023_05_16_at_15_45_57_90405907b9.png" alt="Screenshot 2023-05-16 at 15.45.57.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_Screenshot_2023_05_16_at_15_45_57_90405907b9.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_Screenshot_2023_05_16_at_15_45_57_90405907b9.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_Screenshot_2023_05_16_at_15_45_57_90405907b9.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_Screenshot_2023_05_16_at_15_45_57_90405907b9.png 1000w," sizes="100vw">Gõ từ khóa và tìm đến đường dẫn dự án → bấm Clone<img class="image_resized" style="width:52.76%;" src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Screenshot_2023_05_16_at_15_48_38_79da2f113f.png" alt="Screenshot 2023-05-16 at 15.48.38.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_Screenshot_2023_05_16_at_15_48_38_79da2f113f.png 158w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_Screenshot_2023_05_16_at_15_48_38_79da2f113f.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_Screenshot_2023_05_16_at_15_48_38_79da2f113f.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_Screenshot_2023_05_16_at_15_48_38_79da2f113f.png 1000w," sizes="100vw"><h2>3. Các câu lệnh đơn giản</h2>Vào package.json để định nghĩa câu lệnh<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Screenshot_2023_05_16_at_16_09_04_6376c32681.png" alt="Screenshot 2023-05-16 at 16.09.04.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_Screenshot_2023_05_16_at_16_09_04_6376c32681.png 231w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_Screenshot_2023_05_16_at_16_09_04_6376c32681.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_Screenshot_2023_05_16_at_16_09_04_6376c32681.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_Screenshot_2023_05_16_at_16_09_04_6376c32681.png 1000w," sizes="100vw">Gõ cd + tên thư mục → để dẫn tới thư mục đó<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Screenshot_2023_05_16_at_16_12_03_f37636c78f.png" alt="Screenshot 2023-05-16 at 16.12.03.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_Screenshot_2023_05_16_at_16_12_03_f37636c78f.png 213w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_Screenshot_2023_05_16_at_16_12_03_f37636c78f.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_Screenshot_2023_05_16_at_16_12_03_f37636c78f.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_Screenshot_2023_05_16_at_16_12_03_f37636c78f.png 1000w," sizes="100vw">- Câu lệnh yarn cypress:open để mở cypress<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Screenshot_2023_05_17_at_13_52_33_714e3032d2.png" alt="Screenshot 2023-05-17 at 13.52.33.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_Screenshot_2023_05_17_at_13_52_33_714e3032d2.png 214w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_Screenshot_2023_05_17_at_13_52_33_714e3032d2.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_Screenshot_2023_05_17_at_13_52_33_714e3032d2.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_Screenshot_2023_05_17_at_13_52_33_714e3032d2.png 1000w," sizes="100vw">- Cửa sổ Cypress mở ra → chọn thư mục E2E Testing là thư mục chưa file đã tạo<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Screenshot_2023_05_17_at_13_57_05_0e06ec9012.png" alt="Screenshot 2023-05-17 at 13.57.05.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_Screenshot_2023_05_17_at_13_57_05_0e06ec9012.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_Screenshot_2023_05_17_at_13_57_05_0e06ec9012.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_Screenshot_2023_05_17_at_13_57_05_0e06ec9012.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_Screenshot_2023_05_17_at_13_57_05_0e06ec9012.png 1000w," sizes="100vw">- Chọn 1 trình duyệt để chạy<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Screenshot_2023_05_17_at_13_59_56_cc975e8d29.png" alt="Screenshot 2023-05-17 at 13.59.56.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_Screenshot_2023_05_17_at_13_59_56_cc975e8d29.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_Screenshot_2023_05_17_at_13_59_56_cc975e8d29.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_Screenshot_2023_05_17_at_13_59_56_cc975e8d29.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_Screenshot_2023_05_17_at_13_59_56_cc975e8d29.png 1000w," sizes="100vw">- Cửa sổ trình duyệt mở ra → chọn Specs → home.cyts<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Screenshot_2023_05_17_at_14_01_37_4355ae3ab9.png" alt="Screenshot 2023-05-17 at 14.01.37.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_Screenshot_2023_05_17_at_14_01_37_4355ae3ab9.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_Screenshot_2023_05_17_at_14_01_37_4355ae3ab9.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_Screenshot_2023_05_17_at_14_01_37_4355ae3ab9.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_Screenshot_2023_05_17_at_14_01_37_4355ae3ab9.png 1000w," sizes="100vw">- Cửa sổ tự động chạy, pass là màu xanh, fail là đỏ<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Screenshot_2023_05_17_at_14_28_31_827a01d503.png" alt="Screenshot 2023-05-17 at 14.28.31.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_Screenshot_2023_05_17_at_14_28_31_827a01d503.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_Screenshot_2023_05_17_at_14_28_31_827a01d503.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_Screenshot_2023_05_17_at_14_28_31_827a01d503.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_Screenshot_2023_05_17_at_14_28_31_827a01d503.png 1000w," sizes="100vw">Trên đây là toàn bộ quá trình cài đặt và câu lệnh để chạy Cypress, cùng đón chờ những bài viết tiếp theo của mình về Cypress nhé!&nbsp;

Cypress được thiết kế để chạy các kịch bản kiểm thử nhanh chóng và hiệu quả giúp tạo ra các bộ kiểm thử tự động toàn diện, giảm thiểu công sức và thời gian của nhóm QA. Cùng theo chân mình để biết cách cài đặt và mở Cypress như thế nào nhé!

Cách cài đặt và chạy được Cypress cơ bản

<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

Xin chào !!&nbsp; Mình là Hưng đến từ ABC Software Solutions Company.&nbsp;Mình muốn chia sẻ về trải nghiệm của mình với vai trò UI/UX designer trong những lần gặp gỡ và làm việc trực tiếp với khách hàng. Đó là một trải nghiệm đầy mới mẻ, nhưng cũng rất hữu ích.&nbsp;<h2>Tầm quan trọng khi làm việc trực tiếp với khách hàng</h2>Trước đây, các giao diện mà mình thiết kế thường dựa trên ý tưởng của bản thân, và chỉ dựa vào một số yêu cầu khá chung chung từ khách hàng. Điều này có thể dẫn đến sự không thống nhất vì khi mình gửi bản thiết kế để khách hàng đánh giá, thì họ có thể không đồng ý với ý tưởng của mình (ví dụ như khách hàng yêu cầu một form đăng nhập đơn giản với tài khoản và mật khẩu, nhưng sau đó lại yêu cầu thêm các tùy chọn đăng nhập khác như Gmail, Facebook,...). Đặc biệt là khi đối tượng khách hàng không có kiến thức về thiết kế, việc làm việc chỉ dựa trên yêu cầu có sẵn sẽ rất khó khăn và tốn nhiều thời gian để cập nhật và điều chỉnh.&nbsp; Sau khi trải qua những trường hợp như vậy, mình nhận thấy rằng để tạo ra một giao diện thực sự phù hợp với nhu cầu của khách hàng, việc làm việc trực tiếp và chia sẻ ý tưởng với họ là rất quan trọng. Điều này giúp mình hiểu rõ hơn về mong muốn và nhu cầu của khách hàng, từ đó đưa ra các giải pháp thiết kế tốt hơn. khi mình có cơ hội gặp gỡ và làm việc trực tiếp với khách hàng, mình hiểu rằng điều quan trọng nhất không phải là ý tưởng thiết kế của bản thân mình, mà là nắm bắt được nhu cầu thực tế của khách hàng. Bởi vì nhu cầu của khách hàng luôn thay đổi và được ảnh hưởng bởi nhiều yếu tố khác nhau. Vì vậy, bản thân đã thấy rằng việc làm việc trực tiếp với khách hàng là một bước quan trọng để có được sự đồng thuận về thiết kế.<h2>Lần làm việc với khách hàng để lại ấn tượng lớn cho mình</h2>Vào tháng 3 vừa qua, team của mình được khách hàng tin tưởng để phát triển một trang web lớn để quản lý và bán các sản phẩm du lịch. Với kinh nghiệm thiết kế giao diện và xây dựng các trang web du lịch trước đây, ban đầu mình đã nghĩ rằng đây là một dự án đơn giản và có thể hoàn thành nhanh chóng. Tuy nhiên, khi khách hàng đến công ty để triển khai ý tưởng, mình mới nhận ra rằng đây là một dự án rất thú vị. Team mình đã hội thảo với khách hàng để lắng nghe ý tưởng của họ, mình nhận ra rằng những giao diện mình đã nghĩ trong đầu hoàn toàn không phù hợp với dự án mà khách hàng muốn xây dựng. Nhờ cơ hội này mình cũng đã được nghe rất nhiều và có hiểu thêm các kiến thức về lĩnh vực mà khách hàng đã chia sẻ. Tại buổi họp này, mình và team cố gắng hỏi và nghe kỹ nhu cầu của khách hàng, từ đó xây dựng ra một bản thiết kế sát với yêu cầu thực tế của họ. Bằng cách này,có thể tiết kiệm được rất nhiều thời gian và tránh những sai sót có thể xảy ra.  Cùng với sự thật làm việc với khách hàng trực tiếp là khó khăn và thách thức, nhưng đó cũng là những trải nghiệm thú vị mà một UI/UX designer có thể gặp phải trong sự nghiệp của mình. Không chỉ giúp cho chúng ta hiểu rõ hơn về mong muốn của khách hàng, mà còn tạo cơ hội để chúng ta hoàn thiện kỹ năng mềm về giao tiếp và thiết kế.<h2><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/The_time_I_worked_with_a_customer_left_a_great_impression_on_me_a6491514bf.png" alt="The time I worked with a customer left a great impression on me.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_The_time_I_worked_with_a_customer_left_a_great_impression_on_me_a6491514bf.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_The_time_I_worked_with_a_customer_left_a_great_impression_on_me_a6491514bf.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_The_time_I_worked_with_a_customer_left_a_great_impression_on_me_a6491514bf.png 750w," sizes="100vw"> Một số kinh nghiệm mình có được thông qua việc trực tiếp với khách hàng</h2>Nếu bạn là một UI/UX designer và chuẩn bị đối mặt với việc làm việc trực tiếp với khách hàng, đừng lo lắng. Dưới đây là một số kinh nghiệm của mình để giúp bạn vượt qua những trở ngại và mang đến trải nghiệm tốt nhất cho khách hàng của mình:<ul><li>Luôn lắng nghe và hiểu rõ yêu cầu của khách hàng: Việc lắng nghe và hiểu rõ yêu cầu của khách hàng là một trong những yếu tố quan trọng nhất để thành công trong việc thiết kế giao diện người dùng. Hãy thảo luận cẩn thận với khách hàng để hiểu rõ về nhu cầu của họ, các mục tiêu và mong muốn của dự án. Việc hiểu rõ yêu cầu của khách hàng sẽ giúp bạn tạo ra một thiết kế tốt hơn và giải quyết được những vấn đề mà họ đang gặp phải.</li><li>Chia sẻ ý tưởng và đưa ra các giải pháp hợp lý: Sau khi hiểu rõ yêu cầu của khách hàng, hãy chia sẻ ý tưởng của bạn và đưa ra các giải pháp hợp lý. Bạn có thể sử dụng các công cụ thiết kế và phát triển để hiển thị các ý tưởng của mình dưới dạng mockup hoặc prototype. Nói với khách hàng về lợi ích và các tính năng mà thiết kế của bạn có thể đem lại, cũng như giải thích tại sao nó được thiết kế theo cách đó.</li><li>Giữ thái độ tích cực và thân thiện: Trong quá trình làm việc với khách hàng, bạn cần phải giữ thái độ tích cực và thân thiện với khách hàng. Điều này sẽ giúp bạn tạo dựng mối quan hệ tốt với khách hàng và đưa ra những giải pháp tốt nhất cho họ.</li><li>Hướng dẫn khách hàng qua từng bước trong quá trình thiết kế: Khi làm việc với khách hàng, mình cần phải hướng dẫn họ qua từng bước trong quá trình thiết kế. Điều này giúp khách hàng hiểu rõ hơn về quy trình và có thể đưa ra những ý kiến hoặc góp ý để sản phẩm được hoàn thiện tốt hơn.</li><li>Giải đáp những câu hỏi một cách nhanh chóng và chính xác: Trong quá trình làm việc với khách hàng, bạn sẽ gặp phải nhiều câu hỏi từ khách hàng. Việc giải đáp những câu hỏi một cách nhanh chóng và chính xác sẽ giúp khách hàng cảm thấy được quan tâm và hỗ trợ tốt nhất từ bạn.</li><li>Tận dụng các công cụ hỗ trợ: Với các UI/UX designer thì Figma rất hữu ích để giúp bạn tạo ra các bản thiết kế và prototype chuyên nghiệp. Chúng cũng có thể giúp cho việc giao tiếp và chia sẻ với khách</li><li>Tạo mối quan hệ lâu dài với khách hàng: Việc làm việc trực tiếp với khách hàng không chỉ giúp bạn hiểu rõ hơn về nhu cầu của họ, mà còn giúp bạn tạo dựng mối quan hệ lâu dài với khách hàng. Điều này sẽ giúp bạn tạo được sự tin tưởng và hỗ trợ từ khách hàng trong tương lai. &nbsp;</li></ul><h2>Ý kiến của mình</h2><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/My_review_604b7c27c5.png" alt="My review.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_My_review_604b7c27c5.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_My_review_604b7c27c5.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_My_review_604b7c27c5.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_My_review_604b7c27c5.png 1000w," sizes="100vw">Một trong những điều quan trọng nhất mà mình có cơ hội học được trong quá trình làm việc với khách hàng là tầm quan trọng của việc giao tiếp hiệu quả. Trong quá trình này, việc lắng nghe và hiểu được yêu cầu của khách hàng là rất quan trọng. Việc này giúp mình hiểu rõ hơn về khách hàng của mình, nắm bắt được thị hiếu của họ, cảm nhận được những thay đổi trong nhu cầu của họ và đưa ra các giải pháp tốt nhất để đáp ứng được những yêu cầu này.  Không chỉ là việc lắng nghe, mình cũng học được cách tương tác với khách hàng một cách chuyên nghiệp và lịch sự. Điều này bao gồm việc giữ thái độ tích cực và thân thiện với khách hàng, hướng dẫn họ qua từng bước trong quá trình thiết kế và giải đáp những câu hỏi một cách nhanh chóng và chính xác. Khi làm việc với khách hàng, mình luôn đặt mục tiêu là giúp họ cảm thấy thoải mái và tin tưởng trong quá trình thiết kế. Không chỉ là việc giao tiếp và tương tác, việc làm việc trực tiếp với khách hàng còn giúp mình học được nhiều kỹ năng khác như cách xây dựng một bản giao diện hiệu quả và dễ sử dụng cho khách hàng, cách phân tích dữ liệu và đánh giá hiệu quả của giao diện, cách phát triển sản phẩm phù hợp với nhu cầu thị trường. Tất cả những kỹ năng này đều rất quan trọng đối với một UI/UX Designer và đó cũng là những kỹ năng mà mình đã học được trong quá trình làm việc trực tiếp với khách hàng. Ngoài ra, khi làm việc trực tiếp với khách hàng, mình cũng học được cách tạo động lực cho bản thân và đội ngũ của mình. Đôi khi, trong quá trình thiết kế, khách hàng có thể yêu cầu những điều mà mình chưa từng làm và đòi hỏi mình phải nghiên cứu và áp dụng các kỹ thuật mới. Tuy nhiên, thách thức này cũng giúp mình phát triển kỹ năng tìm kiếm thông tin và nghiên cứu, đồng thời tạo động lực để mình cố gắng hơn nữa trong công việc. Không chỉ học được những kỹ năng cần thiết để làm việc hiệu quả với khách hàng, mình cũng đã xây dựng được mối quan hệ tốt với khách hàng. Đôi khi, khi hoàn thành một dự án, khách hàng cảm thấy hài lòng và rất vui vì sản phẩm của mình. Điều này không chỉ làm mình cảm thấy hạnh phúc mà còn giúp mình xây dựng được uy tín và trở thành một UI/UX Designer được khách hàng tin tưởng.Cảm ơn mọi người đã theo dõi bài viết của mình. Một lần nữa mình là Hưng, hẹn các bạn ở bài viết tiếp theo nhé!!!

Mình muốn chia sẻ về trải nghiệm của mình với vai trò UI/UX Designer trong những lần gặp gỡ và làm việc trực tiếp với khách hàng. Đó là một trải nghiệm đầy mới mẻ, nhưng cũng rất hữu ích. 

Những trải nghiệm thú vị của UI/UX Designer khi gặp gỡ và làm việc trực tiếp với khách hàng

Bài viết hôm nay chúng ta cùng tìm hiểu mô hình Agile và phương pháp kiểm thử phần mềm dựa theo mô hình Agile sẽ hiêu quả như thế nào&nbsp;<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_4dd7dc6f37.png"><h2>1. Agile là gì&nbsp;</h2><ul><li>Agile là một phương pháp phát triển phần mềm linh hoạt, tập trung vào việc phát triển sản phẩm theo từng chu kỳ thời gian ngắn gọi là "sprints". Agile hướng đến việc tối đa hóa giá trị sản phẩm và hạn chế rủi ro bằng cách tập trung vào khả năng thích ứng với sự điều chỉnh các yêu cầu nghiệp vụ và sự phản hồi thường xuyên của khách hàng</li><li>Agile thường được áp dụng trong các dự án phần mềm nhưng cũng có thể được áp dụng trong nhiều lĩnh vực khác nhau, từ sản xuất đến marketing và quản lý dự án.</li></ul><h2>2. Các tiêu chí agile&nbsp;</h2><ul><li>Ưu tiên vào sự tương tác giữa người với người hơn là việc mà tập trung vào công cụ để phát triển phần mềm: Agile đặt sự tương tác, trao đổi giữa các thành viên trong nhóm lên hàng đầu. Việc trao đổi, giao tiếp thường xuyên với khách hàng, sẽ giúp việc quản lý sản phẩm tốt hơn, cũng như hỗ trợ nhóm phát triển phần mềm hiểu rõ hơn về các yêu cầu nghiệp vụ và nằm bắt kịp thời những nhu cầu mà khách hàng phản hồi. Từ đó đưa ra các quyết định phát triển phần mềm nhanh chóng và hiệu quả hơn.</li><li>Tập trung vào phần mềm hơn là viết tài liệu chi tiết cho phần mềm. Mặc dù việc viết tài liệu chi tiết cho phần mềm cũng là điều quan trọng không kém, nhưng mà theo Agile, việc tạo ra các phiên bản phần mềm hoạt động sớm, giúp khách hàng có thể dùng thử phần mềm để đánh giá và đưa ra phản hồi sớm. Giúp tối ưu hoá giá trị sản phẩm</li><li>Hợp tác với khách hàng hơn là đàm phán hợp đồng: Agile coi khách hàng là một phần của quá trình phát triển sản phẩm. Việc hợp tác với khách hàng giúp đảm bảo rằng sản phẩm được phát triển đáp ứng được yêu cầu thực tế và đáp ứng được nhu cầu thay đổi của khách hàng.</li><li>Khả năng thích ứng với thay đổi hơn là theo kế hoạch chi tiết: Agile cho phép các thay đổi và điều chỉnh trong quá trình phát triển sản phẩm. Sự thích ứng nhanh chóng giúp đảm bảo rằng sản phẩm có thể đáp ứng được các yêu cầu mới và giải quyết được các vấn đề phát sinh trong quá trình phát triển</li></ul><h2>3. 12 quy tắc trong agile&nbsp;</h2><ul><li>Ưu tiên hàng đầu là tạo ra sự hài lòng của khách hàng bằng cách cung cấp các sản phẩm có giá trị.</li><li>Chấp nhận thay đổi, thậm chí ở giai đoạn muộn trong quá trình phát triển. Agile giúp cho quá trình phát triển phần mềm trở nên linh hoạt hơn trong việc thay đổi yêu cầu của khách hàng.</li><li>Cung cấp các sản phẩm phần mềm có tính hoạt động và có giá trị cho khách hàng trong một thời gian ngắn, thông qua việc chia nhỏ các sản phẩm phần mềm thành các phần nhỏ và phát triển chúng đồng thời.</li><li>Các thành viên trong nhóm phát triển phần mềm nên hợp tác một cách chặt chẽ để đạt được mục tiêu chung của dự án.</li><li>Xây dựng các dự án quanh những người đóng góp trực tiếp vào dự án.</li><li>Tạo ra môi trường làm việc tích cực, hỗ trợ sự sáng tạo và cải thiện liên tục.</li><li>Chú trọng vào việc cung cấp các sản phẩm phần mềm hoạt động đúng như yêu cầu của khách hàng.</li><li>Đảm bảo rằng các thành viên trong nhóm phát triển phần mềm đều đóng góp vào quá trình phát triển và có trách nhiệm đối với kết quả.</li><li>Điều chỉnh quá trình phát triển phần mềm liên tục, thông qua việc đánh giá và cải thiện định kỳ.</li><li>Sử dụng các phương pháp đơn giản và hiệu quả để phát triển phần mềm.</li><li>Khuyến khích sự tương tác trực tiếp giữa các thành viên trong nhóm phát triển phần mềm.</li><li>Tạo ra các sản phẩm phần mềm bền vững và có thể thích nghi với các thay đổi trong tương lai.</li></ul><h2>4. Quy trình kiểm thử phần mềm trong mô hình Agile&nbsp;</h2>a. Các giai đoạn kiểm thử phần mềm tương ứng với các giai đoạn phát triển phần mềm trong trong mô hình Agile.<ul><li>Giai đoạn lên kế hoạch (Planning phase): Các kế hoạch kiểm thử được lập trình để đảm bảo rằng các yêu cầu của khách hàng được đáp ứng đầy đủ. Các kế hoạch kiểm thử bao gồm các kế hoạch kiểm thử chức năng, kiểm thử hiệu năng và kiểm thử tích hợp.&nbsp;</li><li>Giai đoạn thiết kế (Design phase): Các kịch bản kiểm thử được tạo ra và các ca kiểm thử được thiết kế. Những kịch bản này được sử dụng để đảm bảo rằng các yêu cầu của khách hàng được đáp ứng đầy đủ và các chức năng của phần mềm được thử nghiệm.&nbsp;</li><li>Giai đoạn phát triển (Development phase): Các ca kiểm thử được thực hiện song song với các bước phát triển khác của phần mềm. Các ca kiểm thử được sử dụng để đảm bảo rằng phần mềm hoạt động đúng và đầy đủ.</li><li>Giai đoạn kiểm thử tích hợp (Integration testing phase): Các ca kiểm thử được thực hiện để đảm bảo rằng phần mềm hoạt động đúng khi được tích hợp với các thành phần khác của hệ thống.</li><li>Giai đoạn kiểm thử chấp nhận (Acceptance testing phase): Khách hàng hoặc người dùng cuối được yêu cầu kiểm tra sản phẩm để đảm bảo rằng nó đáp ứng các yêu cầu của họ. Các ca kiểm thử chấp nhận được thực hiện để đảm bảo rằng phần mềm được chấp nhận bởi khách hàng.</li></ul>b. Các họat động đảm bảo chất lượng trong các phân đoạn<figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_82b30d480a.png"></figure><ul><li>Phân đoạn xác định yêu cầu: Các yêu cầu của khách hàng được xác định và đảm bảo rằng chúng có thể được đo lường và đạt được. QA cần liên tục tương tác với khách hàng để hiểu rõ yêu cầu của họ và đảm bảo rằng phần mềm được phát triển đáp ứng đầy đủ các yêu cầu này.</li><li>Phân đoạn thiết kế: QA tham gia vào thiết kế kiến trúc của phần mềm. QA sẽ kiểm tra xem thiết kế có đáp ứng được các yêu cầu chất lượng và các tiêu chuẩn của công ty hay không. Nếu cần, QA sẽ đưa ra các đề xuất để cải thiện thiết kế.</li><li>Phân đoạn phát triển: QA tham gia vào quá trình phát triển phần mềm. QA đảm bảo rằng phần mềm được phát triển đáp ứng được các yêu cầu và các tiêu chuẩn chất lượng được đặt ra. QA sẽ tiến hành kiểm thử sản phẩm để đảm bảo rằng phần mềm được phát triển đáp ứng được các yêu cầu chất lượng.</li><li>Phân đoạn kiểm thử: QA thực hiện kiểm thử phần mềm. Các loại kiểm thử bao gồm kiểm thử đơn vị, kiểm thử tích hợp, kiểm thử hệ thống, và kiểm thử chấp nhận. Kết quả của các hoạt động kiểm thử sẽ được sử dụng để cải thiện phần mềm.</li><li>Phân đoạn triển khai: QA đảm bảo rằng phần mềm được triển khai đúng cách và đáp ứng được các tiêu chuẩn chất lượng. QA sẽ kiểm tra xem hệ thống triển khai đã đáp ứng được các yêu cầu chất lượng và sẽ đưa ra các đề xuất để cải thiện sản phẩm trong tương lai.</li></ul>

Agile là một phương pháp phát triển phần mềm linh hoạt, tập trung vào việc phát triển sản phẩm theo từng chu kỳ thời gian ngắn gọi là "sprints". Agile hướng đến việc tối đa hóa giá trị sản phẩm và hạn chế rủi ro bằng cách tập trung vào khả năng thích ứng với sự điều chỉnh các yêu cầu nghiệp vụ và sự phản hồi thường xuyên của khách hàng.

Phương Pháp Kiểm Thử Phần Mềm Agile

<h3>Middleware&nbsp;</h3>&nbsp; &nbsp;Có thể hiểu đơn giản middleware là một hàm đóng vai trò trung gian giữa các request và respone trong Middleware(cho những ai chưa biết thì request có thể hiểu nhanh là thông tin gửi từ client lên server, respone là dữ liệu server trả về cho client). Khi một request được gửi đến server, nó sẽ đi qua một loạt các Middleware trước khi đến tay Controller. Các Middleware sẽ thực hiện các công việc như:<ol><li>Kiểm tra quyền truy cập của người dùng</li><li>Xác thực người dùng</li><li>Thực hiện phân tích dữ liệu được gửi từ client</li><li>Thực hiện các nhiệm vụ liên quan đến bảo mật</li></ol>&nbsp; &nbsp;Các Middleware được sử dụng để giải quyết các vấn đề chung trong các ứng dụng web và giúp phát triển ứng dụng nhanh hơn. Chúng ta có thể sử dụng các Middleware được cung cấp bởi ExpressJs hoặc ta có thể tự custom các Middleware riêng tùy vào những mục đích khác nhau. Một ví dụ đơn giản về Middleware cho các bạn dễ hình dung.<pre><code class="language-plaintext">// Middleware kiểm tra quyền truy cập của người dùng
const authMiddleware = (req, res, next) =&gt; {
 // Kiểm tra xem người dùng đã đăng nhập hay chưa
 if (req.user) {
 next(); //Hàm next() này giúp các bạn có thể tiếp tục chạy các dòng lệnh bên dưới
 } else {
 res.status(401).send('Bạn cần phải đăng nhập để truy cập vào trang này.');
 }
};

// Route chỉ có thể truy cập khi đã đăng nhập
app.get('/home', authMiddleware, (req, res) =&gt; {
 res.send('Chào mừng đến với trang cá nhân của bạn!');
});
</code></pre>&nbsp; &nbsp;Ở đây, authMiddleware là một Middleware kiểm tra xem người dùng đã đăng nhập hay chưa. Nếu người dùng đã đăng nhập thành công, Middleware sẽ gọi hàm next() để cho request tiếp tục đi đến Controller, ngược lại nó sẽ trả về một lỗi 401(Unauthorized).<h3>Model</h3>&nbsp; &nbsp;Với những ai đã từng nghe hoặc đã từng làm việc với mô hình MVC, chắc hẳn đã không còn xa lạ gì với khái niệm Model(cho những ai chưa biết thì mô hình MVC được viết tắt bởi ba từ là Model-View-Controller). Model đóng vai trò quan trọng trong việc quản lý dữ liệu trong ứng dụng web. Trong ExpressJs, Model có thể được sử dụng để thực hiện các nhiệm vụ như truy vấn cơ sở dữ liệu, thêm xóa sửa dữ liệu trong database và định nghĩa các quan hệ giữa các đối tượng trong ứng dụng. Một ví dụ đơn giản cho việc sử dụng Model để quản lý các thông tin về tài khoản người dùng trong ứng dụng web.<pre><code class="language-plaintext">// Định nghĩa Model cho tài khoản người dùng
const User = mongoose.model('User', {
 name: String,
 email: String,
 password: String
});

// Thêm mới tài khoản người dùng
const user = new User({
 name: 'Thịnh',
 email: 'thinh123@gmail.com',
 password: 'thinh123456'
});
user.save();

// Truy vấn tài khoản người dùng
User.findOne({ email: 'thinh123@gmail.com' }, (err, user) =&gt; {
 if (err) {
 console.log(err);
 } else {
 console.log(user);
 }
});</code></pre>&nbsp; &nbsp;Ở đây chúng ta sử dụng Mongoose để định nghĩa Model cho tài khoản người dùng và sử dụng Model để thêm mới và truy vấn tài khoản người dùng. Model giúp chúng ta quản lý dữ liệu một cách dễ dàng và hiệu quả hơn trong ứng dụng web.<h3>Controller</h3>&nbsp; &nbsp;Cũng giống như Model, Controller là một trong ba thành phẩn logic chính của mô hình MVC. Controller trong ExpressJs chính là thành phần quản lý logic. Khi một request đã đi qua Middleware, nó sẽ được chuyển đến Controller để xử lý. Controller có thể thực hiện các nhiệm vụ như lấy dữ liệu từ Model, xử lý dữ liệu và trả về respone cho client. Dưới đây là một ví dụ về việc sử dụng Controller để lấy danh sách tài khoản người dùng từ Model và trả về respone cho client.<pre><code class="language-plaintext">// Controller lấy danh sách tài khoản người dùng
const getUserList = (req, res) =&gt; {
 User.find({}, (err, users) =&gt; {
 if (err) {
 console.log(err);
 } else {
 res.send(users);
 }
 });
};

// Route để lấy danh sách tài khoản người dùng
app.get('/users', getUserList);
</code></pre>&nbsp; &nbsp;Hàm getUserList ở đây là một Controller được sử dụng để lấy danh sách tài khoản người dùng tự Model và trả về respone cho client. Controller sử dụng hàm find() của Model để lấy danh sách tài khoản người dùng và sử dụng res.send() để trả về danh sách này cho client. Để kiểm tra danh sách người dùng, ta truy cập vào địa chỉ localhost của dự án(ví dụ như http://localhost:3000/users).<h3>Kết luận</h3>&nbsp; &nbsp;Middleware, Model và Controller là ba thành phần quan trọng trong kiến trúc của một ứng dụng web. Middleware được sử dụng để giải quyết các vấn đề chung trong các ứng dụng web và giúp phát triển ứng dụng nhanh hơn. Model giúp chúng ta quản lý dữ liệu trong ứng dụng một cách dễ dàng và hiệu quả, trong khi Controller là thành phần quản lý logic. Các thành phần tương tác với nhau để xây dựng một ứng dụng hoàn chỉnh. Middleware có thể được sử dụng để kiểm tra và xử lý dữ liệu đầu vào từ client, sau đó gọi đến Controller để thực hiệ các tác vụ xử lý logic. Controller sử dụng Model để truy xuất và quản lý dữ liệu, sau đó trả về kết quả cho client thông qua Middleware.&nbsp;&nbsp; &nbsp;Việc hiểu và sử dụng Middlware, Model và Controller là rất quan trọng trong việc phát triển ứng dụng web với ExpressJs. Khi hiểu rõ vai trò và nhiệm vụ của từng thành phần, chúng ta có thể dễ dàng xâu dựng ứng dụng và bảo trì dự án một cách hiệu quả và dễ dàng.<h3>Một số lưu ý khi sử dụng Middleware, Model và Controller</h3><ul><li>Middleware có thể được sử dụng để xử lý các vấn đề chung trong ứng dụng web như xác thực, quản lý phiên và xử lý lỗi.</li><li>Model là thành phần quản lý dữ liệu trong ứng dụng web và giúp chúng ta quản lý dữ liệu một cách dễ dàng và hiệu quả hơn.</li><li>Controller là thành phần quản lý logic trong ExpressJs và được sử dụng để xử lý các yêu cầu từ client và trả về respone.</li></ul>&nbsp; &nbsp;Khi sử dụng Middleware, Model và Controller, chúng ta nên chú ý đến việc giữ cho code của chúng ta đơn giản và dễ đọc. Việc kết hợp các thư viện và công cụ phù hợp cũng giúp cho chúng ta phát triển và bảo trì ứng dụng một cách hiệu quả.&nbsp; &nbsp;Trên đây là một số chia sẽ nho nhỏ về Middleware, Model và Controller trong ExpressJs. Kiến thức trên được mình tổng hợp lại thông qua quá trình học tập và làm việc, vì vậy cho nên có thể có những thiếu sót. Nếu các bạn có thắc mắc gì về ba khái niệm trên thì có thể để lại bình luận bên dưới, mình sẽ cố gắng giải đáp thắc mắc cho các bạn trong phạm vi hiểu biết của mình. See you again &lt;3.

ExpressJs là một framework khá phổ biến trong việc phát triển ứng dụng web bằng Node Js. Middleware, Model và Controller là ba thành phần quan trọng trong kiến trúc của một ứng dụng web. Trong bài viết này, mình sẽ giải thích sơ cho các bạn biết về vai trò và nhiệm vụ của Middleware, Model và Controller trong ExpressJs là như thế nào ?

Tìm hiểu nhanh về Middleware, Model và Controller trong ExpressJs

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. Với các nội dung chia sẻ trước đó về các lĩnh vực code, BA thì hôm nay mình sẽ dẫn dắt các bạn tiếp cận đến với một lĩnh khác cũng góp phần giúp cho dự án trở nên thành công không thể kể đến vai trò của designer.&nbsp; Đối với một designer ngoài&nbsp; kĩ năng được học hoặc tiếp thu kiến thức từ nhiều nguồn thì những công cụ có thể giúp họ thể hiện ý tưởng,&nbsp; sự tự do sáng tạo,... cũng là một phần thành công. Phải kể đến các công cụ hữu ích như: Adobe Creative Suite (Photoshop, Illustrator,...), Figma,... Riêng đối với mình thì 2 công cụ này khá hữu dụng đối với một dân designer như mình.&nbsp;Các bạn thường được nghe dân design nói tôi dùng phần mềm này phần mềm kia để thiết kế nhưng chúng ta chỉ nghe và không hề hiểu rõ về chúng. Lỡ sau này chúng ta cần dùng đến thì chúng ta cũng phải hỏi lại họ về tên các phần mềm đó. Với bất cập đó, mình viết bài blog này là muốn chia sẻ phần mềm mà mình hay dùng nhất khi design đó là Figma.Figma là một phần mềm thiết kế được ra mắt vào năm 2015 và nhanh chóng được sử dụng rộng rãi trong cộng đồng thiết kế và cho phép người dùng tạo ra các bản vẽ thiết kế tương tác và chia sẻ chúng với các thành viên khác của nhóm dự án.Figma cung cấp hàng loạt tính năng hữu ích như các công cụ vẽ hình học, phông chữ, màu sắc và cả các tính năng để tạo ra các bản vẽ tương tác và các mẫu thiết kế. Ngoài ra, còn tích hợp được với nhiều công cụ khác như Sketch, Photoshop và các công cụ quản lý dự án như Jira và Trello. Một tính năng đặc biệt của Figma là cho phép người dùng tương tác hoạt động (các nút bấm, liên kết,...)&nbsp; của bản thiết kế như một trang web.Với sự linh hoạt và tính năng tuyệt vời của Figma mang lại và bạn có thể tận dụng điều này để là cho nó trở nên tốt hơn thông qua việc cải thiện sự trải nghiệm và làm cho việc thiết kế trở nên dễ dàng hơn không thể thiếu sự trợ giúp của các plugin.&nbsp;Như bài blog “<a target="_blank" rel="noopener noreferrer" href="https://www.abcsoftwarecompany.com/vi/blog/nhung-plugin-figma-thong-dung-danh-cho-thiet-ke-ui">https://www.abcsoftwarecompany.com/vi/blog/nhung-plugin-figma-thong-dung-danh-cho-thiet-ke-ui</a>” của bạn Quốc Hưng chia sẻ thì bạn cũng là một dân designer và bạn cũng từng sử dụng các plugin thông dụng trong thiết kế của bạn như: Stylelist, remove.bg, lorem ipsum, unsplash, iconify,... và mình cũng thế. Nhưng bản thân mình lại vô tình phát hiện những điều tuyệt vời hơn của một số plugin của Figma mang lại, cụ thể: anima, content reel, design lint.<h4>Anima</h4>Anima là một plugin cho phép người dùng tạo ra các button, form, dropdown và nhiều hơn nữa với tính năng chia sẻ và tái sử dụng linh hoạt giúp&nbsp; trang web và ứng dụng hoạt động mượt mà và có tính tương tác cao.<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_f14b6226ee.png">Có thể tham khảo UI của các components: button, form, dropdown,...<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_12c94a945e.png">Plugin này hỗ trợ những sự linh hoạt, UI, code giúp cho dân dev dễ dàng tham khảo và code không bị sai lệch yêu cầu và mục đích của khách hàng với designer.Sau khi một designer thiết kế xong 1 page (frame) thì chúng ta chọn frame đó để export sang code theo các ngôn ngữ tùy chỉnh mà plugin Anima hỗ trợ. Mình có thể demo cho các bạn xem một ví dụ nhỏ:&nbsp;<ul><li>Mình lựa chọn một frame (Home page) đã được design trước đó và chuột phải nhấn chọnPlugin -&gt; Anima -&gt; Get code. Nhưng trước khi sử dụng được plugin này bạn cần phải cài đặt plugin này nhé ^^!</li></ul><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_f1e884be72.png"><ul><li>Sau khi Get code bạn có thể lựa chọn ngôn ngữ để plugin hỗ trợ export sang code</li></ul><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_747bab4051.png">Bạn có thể export ra code theo các ngôn ngữ được hỗ trợ sẵn như: HTML, React, Vue<ul><li>Cuối cùng kết quả hiển thị code cho frame (Home page). Nhưng lưu ý, tính năng này còn hạn chế nếu bạn muốn export code và download source về thì nên bỏ thêm tí $ để tiện đôi đường nhé. Còn có cách khác lách luật hơn tí bạn có thể mở sang code pen như mình và xem trực tiếp luôn.&nbsp; &nbsp;</li></ul><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_d3dc2f743b.png">Đây là một plugin hay nhưng lại bị hạn chế tính năng dùng free. Vậy nên muốn trải nghiệm tốt và có điều kiện bạn nên thêm tí $ để có những trải nghiệm tuyệt vời hơn nhé!!!!Ngoài ra, plugin này còn có một tính năng tuyệt vời hơn là Auto Layout cho phép các phần tử tự động thay đổi kích thước và định vị khi kích thước của khung bao quanh nếu&nbsp; chúng thay đổi. Điều này giúp giảm thiểu thời gian cần để cập nhật và sắp xếp các phần tử trong thiết kế.<h4>Content Reel</h4>Là một plugin giúp cho việc thể hiện content (hình ảnh, nội dung, đoạn video, gif và hình ảnh động) trong thiết kế trở nên sinh động, đẹp mắt.<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_533fce5a90.png"><h4>Design Lint&nbsp;</h4>Là một plugin giúp kiểm tra chất lượng và tiêu chuẩn của thiết kế: đảm bảo tính nhất quán trong toàn bộ bản thiết kế, màu sắc, khoảng cách, phông chữ và các quy tắc thiết kế khác, giúp người dùng tìm ra các lỗi thiết kế và sửa chúng một cách nhanh chóng.Mình có một bài tập cá nhân sau khi mình design và tiến hành nhờ plugin hỗ trợ để kiểm tra thì kết quá mình nhận được khá bất ngờ.&nbsp;<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_af9d243da8.png">Chỉ một page thôi mà mình đã sai rất nhiều tiêu chuẩn, con số rất kinh ngạc. Mình nghĩ plugin này khá hay nó sẽ giúp cho dân designer tụi mình nâng cao tiều chuẩn design và nâng sao sự quan sát, tỉ mỉ và cẩn thận hơn rất nhiều <img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_7c6513f53b.png">Nhận thấy rằng những plugin tuy là một phần nhỏ giúp cho việc thiết kế của chúng ta trở nên đẹp mắt, hoàn hảo hơn rất nhiều. Nó góp phần giúp chúng ta giảm thiểu thời gian, công sức để làm nhiều thứ mới mẻ và lớn lao. Nhờ vào tính năng tự động hoá và các công cụ hỗ trợ đắc lực, các designer có thể tập trung vào việc tạo ra các sản phẩm đáp ứng yêu cầu của khách hàng và thị trường.Trên đây, là một số plugin mà mình tự tìm tòi được trong quá trình học hỏi để trở thành designer. Mình sẽ chia sẻ những kiến thức mà mình khám phá được trong quá trình học. Hi vọng sẽ giúp ích được cho các bạn.&nbsp;Cảm ơn các bạn đã đọc đến đâ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.

Bản thân mình lại vô tình phát hiện những điều tuyệt vời hơn của một số plugin của Figma mang lại, cụ thể: anima, content reel, design lint.


Plugin in figma

<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

Đặt vấn đề: mình muốn dùng wordpress để tận dụng giao diện CMS đã rất tối ưu cho người sử dụng, nhưng lại dùng Nextjs để build tầng Frontend.Sơ đồ:<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/1_9_JDI_Qk_G6_UO_Zd_Wg3_VB_7v_Ovg_f2d0125948.webp" alt="1_9JDIQkG6UOZdWg3VB7vOvg.webp" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_1_9_JDI_Qk_G6_UO_Zd_Wg3_VB_7v_Ovg_f2d0125948.webp 128w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_1_9_JDI_Qk_G6_UO_Zd_Wg3_VB_7v_Ovg_f2d0125948.webp 411w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_1_9_JDI_Qk_G6_UO_Zd_Wg3_VB_7v_Ovg_f2d0125948.webp 616w," sizes="100vw"><img class="image_resized" style="width:680px;" src="https://miro.medium.com/v2/resize:fit:700/1*9JDIQkG6UOZdWg3VB7vOvg.png" alt="" loading="eager"><h2 style="margin-left:0px;">Một số thứ nên có để thực hành:</h2><ul><li>Kiến thức căn bản để SSH và một con AWS Ec2, kiến thức căn bản về các câu lệnh Ubuntu, hoặc khả năng đọc tài liệu về các câu lệnh Ubundu</li><li>Đã mua một tên miền, ví dụ mydomain.com</li><li>Đã mua ssl dạng wildcard cho tên miền: *.mydomain.com</li><li>Đã setup ssl cho tên miền: *.mydomain.com&nbsp;</li><li>Đã tạo thủ công một con Ec2 cho mục đích test.</li><li>Đã có một server chạy wordpress và có REST api ở port 8000</li><li>Đã có CMS cũng chạy ở port 8000</li><li>Đã có frontend app chạy ở port 3001</li></ul>*Lưu ý rằng bạn có thể chọn bất kì port nào mình muốn.<h2 style="margin-left:0px;">Ở đây mình chọn Nginx như là reverse proxy để điều phối traffic.</h2>&nbsp;Chuẩn bị xong các điều kiện tiên quyết, bây giờ là bước chính để config Nginx<h2 style="margin-left:0px;">Bước 0:</h2><ul><li>CD vào `/etc/nginx/sites-enabled/` và sửa file <code>default</code> dùng câu lệnh &nbsp;<code>sudo vim default</code></li><li>Nên bảo lưu file detault hiện tại bằng câu lệnh <code>mv default defaultbk</code></li></ul><h2 style="margin-left:0px;">Bước 1: Config Nextjs Frontend webapp tại port 3001</h2><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/1_36x_C8v_G_Sdw_ENL_11l_UHQ_0zg_c2de1ce2a1.webp" alt="1_36xC8vGSdwENL11lUHQ0zg.webp" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_1_36x_C8v_G_Sdw_ENL_11l_UHQ_0zg_c2de1ce2a1.webp 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_1_36x_C8v_G_Sdw_ENL_11l_UHQ_0zg_c2de1ce2a1.webp 500w," sizes="100vw"><pre><code class="language-plaintext">#Nextjs FE app: remove www to avoid canonnical issue
server {
 listen 80;
 listen 443 ssl;

 # Certificate
 ssl_certificate /etc/nginx/ssl/STAR_mydomain.crt;

 # Private Key
 ssl_certificate_key /etc/nginx/ssl/STAR_mydomain.key;

 server_name http://mydomain.com www.mydomain.com;
 return 301 https://mydomain.com$request_uri;
}

#Nextjs FE app: force ssl for mydomain.com (main domain)
server {
 listen 80;
 server_name http://mydomain.com mydomain.com www.mydomain.com;
 return 301 https://mydomain.com$request_uri;
}

#Nextjs FE app: point main domain (Frontend) to port 3001 of Nextjs
server {
 listen 443 ssl;
 listen [::]:443 ssl;
 
 server_name mydomain.com;
 # Certificate
 ssl_certificate /etc/nginx/ssl/STAR_mydomain.crt;

 # Private Key
 ssl_certificate_key /etc/nginx/ssl/STAR_mydomain.key;
 location / {
 proxy_pass http://localhost:3001;
 proxy_set_header Host $host;
 proxy_set_header X-Real-IP $remote_addr;
 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
 proxy_set_header X-Forwarded-Proto $scheme;
 }
}</code></pre><h2 style="margin-left:0px;">Bước 2: Config REST API:</h2><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/1_Ip_N_Xpt1of_FB_Kpdu9w6_HM_7w_8d833916e8.webp" alt="1_IpNXpt1ofFBKpdu9w6HM7w.webp" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_1_Ip_N_Xpt1of_FB_Kpdu9w6_HM_7w_8d833916e8.webp 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_1_Ip_N_Xpt1of_FB_Kpdu9w6_HM_7w_8d833916e8.webp 500w," sizes="100vw"><img class="image_resized" style="width:680px;" src="https://miro.medium.com/v2/resize:fit:700/1*IpNXpt1ofFBKpdu9w6HM7w.png" alt="" loading="lazy"><pre><code class="language-plaintext">#REST API: force ssl for api.mydomain.com (wordpress backend)
server {
 listen 80;
 server_name api.mydomain.com;
 return 301 https://api.mydomain.com$request_uri;
}

#REST API: point api.mydomain.com to port 8000
server {
 listen 443 ssl;
 listen [::]:443 ssl;

 server_name api.mydomain.com http://api.mydomain.com;
 # Certificate
 ssl_certificate /etc/nginx/ssl/STAR_mydomain.crt;

 # Private Key
 ssl_certificate_key /etc/nginx/ssl/STAR_mydomain.key;
 location / {
 proxy_pass http://localhost:8000;
 }
}</code></pre><h2 style="margin-left:0px;">Bước 3: Config CMS</h2><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/1_7_Atk_F4_RGNQ_1_16_At0_H_No_ZA_7baba811f1.webp" alt="1_7AtkF4RGNQ1_16At0HNoZA.webp" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_1_7_Atk_F4_RGNQ_1_16_At0_H_No_ZA_7baba811f1.webp 241w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_1_7_Atk_F4_RGNQ_1_16_At0_H_No_ZA_7baba811f1.webp 500w," sizes="100vw"><img class="image_resized" style="width:680px;" src="https://miro.medium.com/v2/resize:fit:700/1*7AtkF4RGNQ1_16At0HNoZA.png" alt="" loading="lazy"><pre><code class="language-plaintext">#CMS: force ssl for cms.mydomain.com (wordpress cms)
server {
 listen 80;
 server_name cms.mydomain.com http://cms.mydomain.com;
 return 301 https://cms.mydomain.com$request_uri;
}

#CMS: point cms.mydomain.com to port 8000
server {
 listen 443 ssl;
 listen [::]:443 ssl;

 server_name cms.mydomain.com;
 # Certificate
 ssl_certificate /etc/nginx/ssl/STAR_mydomain.crt;

 # Private Key
 ssl_certificate_key /etc/nginx/ssl/STAR_mydomain.key;
 location / {
 proxy_pass http://localhost:8000;
 proxy_set_header Host $http_host;
 proxy_set_header X-Real-IP $remote_addr;
 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
 proxy_set_header X-Forwarded-Proto $scheme;
 }
}</code></pre><h2 style="margin-left:0px;">File default hoàn chỉnh</h2><pre><code class="language-plaintext">
#Nextjs FE app: remove www to avoid canonnical issue
server {
 listen 80;
 listen 443 ssl;

 # Certificate
 ssl_certificate /etc/nginx/ssl/STAR_mydomain.crt;

 # Private Key
 ssl_certificate_key /etc/nginx/ssl/STAR_mydomain.key;

 server_name http://mydomain.com www.mydomain.com;
 return 301 https://mydomain.com$request_uri;
}

#Nextjs FE app: force ssl for mydomain.com (main domain)
server {
 listen 80;
 server_name http://mydomain.com mydomain.com www.mydomain.com;
 return 301 https://mydomain.com$request_uri;
}

#Nextjs FE app: point main domain (Frontend) to port 3001 of Nextjs
server {
 listen 443 ssl;
 listen [::]:443 ssl;
 
 server_name mydomain.com;
 # Certificate
 ssl_certificate /etc/nginx/ssl/STAR_mydomain.crt;

 # Private Key
 ssl_certificate_key /etc/nginx/ssl/STAR_mydomain.key;
 location / {
 proxy_pass http://localhost:3001;
 proxy_set_header Host $host;
 proxy_set_header X-Real-IP $remote_addr;
 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
 proxy_set_header X-Forwarded-Proto $scheme;
 }
}

#REST API: force ssl for api.mydomain.com (wordpress backend)
server {
 listen 80;
 server_name api.mydomain.com;
 return 301 https://api.mydomain.com$request_uri;
}

#REST API: point api.mydomain.com to port 8000
server {
 listen 443 ssl;
 listen [::]:443 ssl;

 server_name api.mydomain.com http://api.mydomain.com;
 # Certificate
 ssl_certificate /etc/nginx/ssl/STAR_mydomain.crt;

 # Private Key
 ssl_certificate_key /etc/nginx/ssl/STAR_mydomain.key;
 location / {
 proxy_pass http://localhost:8000;
 }
}

#CMS: force ssl for cms.mydomain.com (wordpress cms)
server {
 listen 80;
 server_name cms.mydomain.com http://cms.mydomain.com;
 return 301 https://cms.mydomain.com$request_uri;
}

#CMS: point cms.mydomain.com to port 8000
server {
 listen 443 ssl;
 listen [::]:443 ssl;

 server_name cms.mydomain.com;
 # Certificate
 ssl_certificate /etc/nginx/ssl/STAR_mydomain.crt;

 # Private Key
 ssl_certificate_key /etc/nginx/ssl/STAR_mydomain.key;
 location / {
 proxy_pass http://localhost:8000;
 proxy_set_header Host $http_host;
 proxy_set_header X-Real-IP $remote_addr;
 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
 proxy_set_header X-Forwarded-Proto $scheme;
 }
}</code></pre><h2 style="margin-left:0px;">Bước cuối cùng:</h2><ul><li>Reload và restart Nginx bằng câu lệnh <code>sudo systemctl reload nginx</code> và <code>sudo systemctl restart nginx</code></li></ul>Mình hy vọng bài viết này sẽ giúp bạn đọc hiểu cách config Nginx cho cả backend và frontend hay nhiều app trên cùng một EC2 server.

Đặt vấn đề: mình muốn dùng wordpress để tận dụng giao diện CMS đã rất tối ưu cho người sử dụng, nhưng lại dùng Nextjs để build tầng Frontend.

Configure NGINX để host cả Backend và Frontend servers trong một con AWS EC2

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

Trong bài viết này, mình sẽ tìm hiểu khái niệm và các tính năng của web 1.0, 2.0 và 3.0<figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_67d878a48e.png"></figure><h1>1. World Wide Web(WWW) là gì?</h1>- World Wide Web (WWW) là một phần của internet, là một hệ thống giao tiếp và chia sẻ thông tin trên mạng thông qua các trang web được liên kết với nhau. Nó được phát triển bởi Tim Berners-Lee vào năm 1989. - WWW là một phần của internet, bao gồm các trang web được liên kết với nhau thông qua các liên kết siêu văn bản (hypertext links) và siêu trình duyệt (hypertext browser). - Mỗi trang web trên WWW được định danh bằng một địa chỉ duy nhất gọi là URL (Uniform Resource Locator), cho phép người dùng truy cập trực tiếp vào trang web đó. - WWW đã mở ra một thế giới mới của truyền thông, cho phép người dùng truy cập vào hàng triệu trang web về mọi chủ đề và lĩnh vực khác nhau, từ giải trí đến giáo dục, kinh doanh và chính trị. - WWW cũng đã thúc đẩy sự phát triển của nhiều công nghệ và ứng dụng web khác như thương mại điện tử, truyền thông xã hội, tìm kiếm trực tuyến và điện toán đám mây (cloud computing). - Trong thời gian gần đây, WWW đã trở thành một phương tiện quan trọng để chia sẻ thông tin về COVID-19, giúp các cơ quan y tế và chính phủ truyền tải thông tin về virus và các biện pháp phòng ngừa cho cộng đồng.<h1> 2. Web 1.0 là gì?</h1><figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_5b8a1e862b.png"></figure>2.1. Khái niệm - Web 1.0 là một thuật ngữ được sử dụng để chỉ giai đoạn đầu tiên của World Wide Web, từ khi được phát triển cho đến khoảng đầu thập niên 2000. Web 1.0 có thể được xem như là một "web tĩnh" vì nó chỉ cho người dùng xem mà không cho phép tương tác trực tiếp với các trang web đó. - Web 1.0 tập trung chủ yếu vào việc cung cấp thông tin tĩnh và đơn giản. Các trang web được thiết kế để hiển thị các nội dung tĩnh như văn bản, hình ảnh. - Một số ví dụ về các trang web Web 1.0 bao gồm các trang web tin tức, trang web thông tin và các trang web cá nhân. Nó chỉ cung cấp thông tin tĩnh đơn giản như chữ và hình ảnh, cùng với các đường link mà không hề có nút bấm để tương tác như web hiện đại ngày nay. 2.2. Các tính năng của web 1.0 - Các trang web tĩnh: Web 1.0 chỉ hỗ trợ các trang web tĩnh, nghĩa là nội dung trên trang web không có sự thay đổi động &nbsp;mà chỉ có thể được thay đổi bằng cách nhập đường dẫn trang web khác hoặc nhấp chuột vào các liên kết khác ở trong trang web ấy. - Nội dung tĩnh: Nội dung trên các trang web Web 1.0 thường là tĩnh, chỉ hiển thị các thông tin cố định và ít thay đổi. - Thông tin không được phân loại: Không có cơ chế phân loại và sắp xếp thông tin trên trang web, người dùng phải tự tìm kiếm thông tin một cách thủ công.<h1> 3. Web 2.0 là gì?</h1><figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_14be3a87a9.png"></figure>3.1. Khái niệm - Web 2.0 là một khái niệm được sử dụng để chỉ giai đoạn phát triển thứ hai của World Wide Web, từ khoảng giữa thập niên 2000 đến nay. - Web 2.0 đã mở ra một thời đại mới của World Wide Web, đánh dấu sự phát triển và tiến bộ trong công nghệ và tạo ra một môi trường truyền thông trực tuyến đa dạng và phong phú hơn. - Một số ví dụ về các trang web Web 2.0 bao gồm: Facebook, YouTube, Twitter, Instagram, Wikipedia, Google Maps, các trang blog, các trang web tìm kiếm và các trang web thương mại điện tử. 3.2. Các tính năng của web 2.0 - Tính tương tác cao: Web 2.0 cho phép người dùng tương tác trực tiếp với các trang web thông qua các tính năng như comment, like, share, vote, rating và các tính năng khác. - Tính đa nền tảng: Các trang web Web 2.0 được thiết kế để hoạt động trên nhiều nền tảng, bao gồm máy tính, điện thoại di động, máy tính bảng và các thiết bị thông minh khác. - Cộng đồng: Web 2.0 cho phép người dùng tham gia vào cộng đồng, tạo ra các trang web xã hội và tương tác với những người dùng khác. - Thiết kế đẹp và trực quan: Các trang web Web 2.0 được thiết kế với các giao diện đẹp và trực quan, giúp cho người dùng dễ dàng sử dụng và tìm kiếm thông tin trên trang web. - Nội dung đa dạng: Web 2.0 có tính năng tạo ra nội dung đa dạng, bao gồm âm thanh, video, hình ảnh, trò chơi trực tuyến và các ứng dụng web.<h1>4. Web 3.0 là gì?</h1><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_b9cbcd81c2.png"> 4.1. Khái niệm - Web 3.0 là một khái niệm về sự tiến hóa của World Wide Web, được cho là giai đoạn phát triển tiếp theo sau Web 2.0 và được phát triển từ năm 2006. Web 3.0 tập trung vào việc xây dựng các ứng dụng và dịch vụ trên nền tảng blockchain, nơi mà sự phân cấp và tính an toàn được đảm bảo bởi một mạng lưới phân tán. - Một số ví dụ về các ứng dụng Web 3.0 bao gồm: Ethereum, IPFS, Filecoin, Brave browser, Uniswap, Aave, Polkadot và nhiều hơn nữa. 4.2. Các tính năng của web 3.0 - Phi tập trung: Các ứng dụng Web 3.0 sử dụng một mô hình phi tập trung, trong đó các dữ liệu được lưu trữ trên các nút mạng phân tán, thay vì được quản lý bởi một bên thứ ba hoặc một tổ chức trung tâm. - Tính tương tác người máy: Web 3.0 cho phép tương tác giữa con người và máy tính một cách tự nhiên, thông qua các giao diện tương tác và hệ thống điều khiển giọng nói. - Tính bảo mật cao: Các ứng dụng Web 3.0 sử dụng các công nghệ bảo mật tiên tiến như mã hóa đối xứng và không đối xứng để bảo vệ dữ liệu của người dùng. - Quyền sở hữu dữ liệu: Người dùng sẽ có quyền sở hữu và kiểm soát dữ liệu của mình, chứ không phải để cho các công ty lớn kiếm tiền từ dữ liệu của họ. - Tính kết nối thông minh: Web 3.0 cho phép các hệ thống thông tin trên mạng kết nối và tương tác với nhau một cách thông minh, tạo ra một môi trường truyền thông kết nối và linh hoạt hơn.

WWW là một phần của internet, bao gồm các trang web được liên kết với nhau thông qua các liên kết siêu văn bản (hypertext links). WWW mở ra một thế giới mới của truyền thông, cho phép người dùng truy cập vào hàng triệu trang web về mọi chủ đề và lĩnh vực khác nhau, từ giải trí đến giáo dục, kinh doanh và chính trị. Góp phân thúc đẩy sự phát triển của các công nghệ mới như: livestream video trực tiếp, điện toán đám mây,…

Tìm hiểu về các khái niệm web 1.0, web 2.0, web 3.0

<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.

Trong bài này này, tôi sẽ giới thiệu tổng quan về kiểm tra bảo mật ứng dụng web, công cụ và thuật ngữ chính được sử dụng trong thử nghiệm bảo mật trang web cùng với phương pháp thử nghiệm của nó.<figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_7f60975afc.png"></figure><h1>1. Kiểm thử bảo mật là gì ?</h1>Kiểm thử bảo mật (Security Testing) là quá trình kiểm tra và đánh giá tính bảo mật của một ứng dụng hay hệ thống thông tin. Mục đích của kiểm thử bảo mật là xác định và đánh giá các lỗ hổng bảo mật trong ứng dụng hoặc hệ thống, đảm bảo rằng thông tin được bảo vệ tốt và không bị truy cập trái phép. 1.1. &nbsp;Kỹ thuật và phương pháp kiểm thử Kiểm thử bảo mật bao gồm nhiều kỹ thuật và phương pháp kiểm thử khác nhau, bao gồm: - Kiểm thử xác thực và phân quyền: kiểm tra tính xác thực của quy trình đăng nhập và xác thực người dùng, kiểm tra tính bảo mật của việc phân quyền truy cập. - Kiểm thử đột nhập (Penetration Testing): kiểm tra tính bảo mật của ứng dụng bằng cách tấn công vào hệ thống như một tin tặc để tìm ra các lỗ hổng bảo mật. - Kiểm thử tấn công từ chối dịch vụ (Denial of Service Testing): kiểm tra tính bảo mật của hệ thống bằng cách tấn công và làm ngập băng thông hệ thống. - Kiểm thử mã độc: kiểm tra tính bảo mật của ứng dụng bằng cách tìm kiếm các mã độc hay phần mềm độc hại. - Kiểm thử mã nguồn (Code Review): kiểm tra mã nguồn của ứng dụng để phát hiện các lỗ hổng bảo mật có thể xuất hiện trong mã nguồn. - Tùy thuộc vào phạm vi và mức độ phức tạp của ứng dụng hay hệ thống, kiểm thử bảo mật có thể được thực hiện theo nhiều cấp độ khác nhau để đảm bảo tính bảo mật và chống lại các cuộc tấn công bên ngoài. 1.2. &nbsp;Mục tiêu kiểm tra bảo mật <img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_27e411885e.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 các lỗ hổng bảo mật: Kiểm tra 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 bảo mật: Để đá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 chất lượng 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 tra bảo mật ứng dụng web giúp cải thiện chất lượng bảo mật của ứng dụng. 4. Đảm bảo tuân thủ quy định bảo mật: Kiểm tra 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à quy trình bảo mật được đặt ra bởi các tổ chức quản lý bảo mật và chính phủ. 5. Đảm bảo tính toàn vẹn của dữ liệu: Kiểm tra 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 tải qua ứng dụng.<h1> 2. Một số thuật ngữ chính được sử dụng trong kiểm tra bảo mật Web</h1>- Vulnerability: lỗ hổng bảo mật, là một điểm yếu trong hệ thống hoặc ứng dụng, cho phép kẻ tấn công tìm cách khai thác để xâm nhập hệ thống. - Exploit: kỹ thuật khai thác lỗ hổng bảo mật để tấn công hệ thống, chẳng hạn như việc thực thi mã độc, thực hiện các lệnh trái phép, hay truy cập vào thông tin nhạy cảm. - Penetration testing: phương pháp kiểm thử bảo mật bằng cách thử tấn công hệ thống để phát hiện lỗ hổng bảo mật. - Security audit: kiểm tra đánh giá bảo mật hệ thống, xác định các lỗ hổng bảo mật và đưa ra các khuyến nghị để cải thiện. - Security assessment: quá trình kiểm tra toàn diện các yếu tố liên quan đến bảo mật hệ thống, bao gồm kiểm tra thiết kế, triển khai, cấu hình và thực thi của các thành phần bảo mật. - Threat modeling: phân tích các mối đe dọa tiềm tàng đến hệ thống và ứng dụng, giúp định hướng các hoạt động bảo mật cần thiết. - Malware: phần mềm độc hại, được thiết kế để tấn công hệ thống hoặc đánh cắp thông tin. - Firewall: tường lửa, là một thành phần cơ bản của bảo mật mạng, giúp chặn các lưu lượng mạng không mong muốn hoặc độc hại.<h1> 3. Các công cụ kiểm tra bảo mật thường được sử dụng thông thường</h1><figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_a04e8e0202.png"></figure>Có rất nhiều công cụ kiểm tra bảo mật được sử dụng, tùy vào mục đích và yêu cầu của dự án mà chọn công cụ phù hợp. Sau đây là một số công cụ phổ biến được sử dụng trong kiểm tra bảo mật: 1. Acunetix là một công cụ kiểm thử bảo mật web tự động được sử dụng để phát hiện các lỗ hổng bảo mật trên các ứng dụng web. Nó có khả năng phát hiện hầu hết các lỗ hổng bảo mật phổ biến như các lỗ hổng SQL Injection, XSS, LFI, RFI, và nhiều hơn nữa. Acunetix cung cấp cho người dùng các báo cáo chi tiết về các lỗ hổng bảo mật được phát hiện cùng với các giải pháp để khắc phục chúng. Công cụ này được sử dụng rộng rãi bởi các chuyên gia bảo mật, nhà phát triển web và các tổ chức đảm bảo an ninh thông tin.&nbsp; 2. Nmap: Là một công cụ quét mạng, giúp tìm kiếm các cổng mở trên hệ thống và phát hiện các máy chủ trong mạng. Nmap cũng cung cấp thông tin chi tiết về các dịch vụ đang chạy trên các cổng đó. 3. Metasploit: Là một nền tảng kiểm tra đột nhập được sử dụng rộng rãi để phát hiện và khai thác các lỗ hổng bảo mật. Nó cung cấp các công cụ và tài nguyên để phát triển, thử nghiệm và triển khai các tấn công. 4. Wireshark: Là một công cụ phân tích gói tin mạng, giúp phát hiện các tấn công mạng, kiểm tra lưu lượng mạng và phân tích các giao thức mạng. 5. Burp Suite: Là một bộ công cụ kiểm tra bảo mật ứng dụng web, cho phép phát hiện các lỗ hổng bảo mật trên các ứng dụng web, bao gồm các tấn công XSS, SQL injection, và các lỗ hổng tràn bộ đệm. 6. OpenVAS: Là một nền tảng quét mã nguồn mở, được sử dụng để phát hiện các lỗ hổng bảo mật trong các hệ thống và ứng dụng. 7. Aircrack-ng: Là một bộ công cụ để kiểm tra bảo mật mạng Wi-Fi, giúp phát hiện các lỗ hổng bảo mật trên các mạng Wi-Fi và khôi phục mật khẩu truy cập.<h1> 4. Phương pháp kiểm tra bảo mật</h1>Có nhiều phương pháp kiểm tra bảo mật được sử dụng để đảm bảo rằng hệ thống đang hoạt động một cách an toàn và đáng tin cậy. Dưới đây là một số phương pháp kiểm tra bảo mật phổ biến: - Kiểm tra mã nguồn: Phương pháp này kiểm tra mã nguồn của hệ thống hoặc ứng dụng để tìm các lỗ hổng bảo mật, lỗi bảo mật và các điểm yếu khác. Các công cụ phổ biến để kiểm tra mã nguồn bao gồm SonarQube, Veracode và Fortify. - Kiểm tra thâm nhập: Phương pháp này bao gồm việc kiểm tra các lỗ hổng bảo mật bằng cách giả lập các tấn công từ bên ngoài để đánh giá khả năng của hệ thống chống lại các cuộc tấn công này. Các công cụ phổ biến bao gồm Metasploit và Nmap. - Kiểm tra xác thực: Phương pháp này đảm bảo rằng hệ thống chỉ cho phép truy cập đến người dùng được ủy quyền và không cho phép truy cập trái phép. Các công cụ phổ biến để kiểm tra xác thực bao gồm Burp Suite và OWASP ZAP. - Kiểm tra quản lý: Phương pháp này đảm bảo rằng quản lý hệ thống được cấu hình chính xác và an toàn. Các công cụ phổ biến để kiểm tra quản lý bao gồm OpenVAS và Nessus. - Kiểm tra mã độc: Phương pháp này bao gồm kiểm tra mã độc để tìm ra các phần mềm độc hại và các phần mềm gián điệp. Các công cụ phổ biến để kiểm tra mã độc bao gồm Malwarebytes và VirusTotal. - Kiểm tra đánh giá rủi ro: Phương pháp này đánh giá các rủi ro bảo mật để đảm bảo rằng các rủi ro này được xử lý một cách hiệu quả. Các công cụ phổ biến để kiểm tra đánh giá rủi ro bao gồm OpenFAIR và FAIR.<h1> 5. Phương pháp kiểm tra bảo mật Web</h1><figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_b6bf1a5086.png"></figure>Phương pháp kiểm tra bảo mật web là quá trình đánh giá, xác định và giải quyết các lỗ hổng bảo mật trong các ứng dụng web. Đây là một phần quan trọng của việc đảm bảo rằng các ứng dụng web được sử dụng an toàn và đáng tin cậy. Dưới đây là một số phương pháp kiểm tra bảo mật web phổ biến: - Kiểm tra thủ công: Kiểm tra thủ công là quá trình kiểm tra bảo mật web bằng cách sử dụng các công cụ và kỹ thuật thủ công để tìm kiếm lỗ hổng bảo mật. Việc kiểm tra thủ công bao gồm việc kiểm tra và xác định các lỗ hổng bảo mật bằng cách sử dụng các công cụ như Burp Suite, OWASP ZAP và các kỹ thuật khác. - Kiểm tra tự động: Kiểm tra tự động bao gồm sử dụng các công cụ và phần mềm để tự động phát hiện các lỗ hổng bảo mật trong ứng dụng web. Các công cụ kiểm tra tự động bao gồm W3af, Nessus, Acunetix và OpenVAS. - Kiểm tra Penetration Testing: Kiểm tra Penetration Testing bao gồm việc thử thâm nhập vào một hệ thống để tìm kiếm các lỗ hổng bảo mật. Các chuyên gia Penetration Testing sử dụng các kỹ thuật như SQL Injection, Cross-site Scripting (XSS), và các kỹ thuật khác để thử xâm nhập hệ thống. - Kiểm tra tĩnh: Kiểm tra tĩnh là phương pháp kiểm tra bảo mật web bằng cách phân tích mã nguồn của ứng dụng web để tìm kiếm các lỗ hổng bảo mật. - Kiểm tra động: Kiểm tra động bao gồm việc kiểm tra bảo mật web bằng cách chạy ứng dụng web và sử dụng các công cụ để tìm kiếm các lỗ hổng bảo mật trong quá trình chạy.

Kiểm thử bảo mật (Security Testing) là quá trình kiểm tra và đánh giá tính bảo mật của một ứng dụng hay hệ thống thông tin.

Tổng quan về kiểm tra bảo mật ứng dụng web

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?

<h1>1. Khái niệm về QA</h1><figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/QA_fd3f2bb71a.jpg"></figure>QA (Quality Assurance) trong tester là một phần quan trọng trong quá trình phát triển phần mềm. Nó liên quan đến việc đảm bảo chất lượng sản phẩm phần mềm thông qua các hoạt động kiểm thử và giám sát quá trình phát triển. Các chuyên gia QA thường là người quản lý và thực hiện các hoạt động kiểm thử để đảm bảo rằng sản phẩm đáp ứng được các yêu cầu về chất lượng. Các chuyên gia QA cũng sẽ thực hiện kiểm tra các quy trình phát triển để đảm bảo rằng các tiêu chuẩn chất lượng được đáp ứng.<h2>1.1. Các hoạt động chính của QA (Quality Assurance) trong kiểm thử phần mềm bao gồm:</h2> -Kiểm tra tính đúng đắn và đầy đủ của yêu cầu về chất lượng. -Đảm bảo các tiêu chuẩn chất lượng được áp dụng trong toàn bộ quá trình phát triển. -Tạo kế hoạch kiểm thử và thực hiện các kịch bản kiểm thử. -Đánh giá kết quả kiểm thử và lập báo cáo để đưa ra quyết định về chất lượng sản phẩm phần mềm. -Điều chỉnh các quy trình phát triển để đảm bảo đáp ứng được các tiêu chuẩn chất lượng.<h2>1.2. Nhiệm vụ của QA bao gồm:</h2><figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_89388dde9a.png"></figure>-Thiết kế và triển khai quy trình kiểm soát chất lượng để đảm bảo rằng các sản phẩm hoặc dịch vụ đáp ứng các tiêu chuẩn và yêu cầu chất lượng. -Đào tạo và hướng dẫn nhân viên trong quá trình thực hiện quy trình kiểm soát chất lượng. -Đảm bảo rằng quy trình kiểm soát chất lượng được thực hiện đúng cách và đầy đủ. -Theo dõi và đánh giá quá trình kiểm soát chất lượng để tìm kiếm cơ hội cải tiến. -Đưa ra các giải pháp để giải quyết các vấn đề liên quan đến chất lượng sản phẩm hoặc dịch vụ. -Đảm bảo rằng các sản phẩm hoặc dịch vụ được chuẩn bị sẵn sàng cho việc kiểm tra và đảm bảo rằng các tiêu chuẩn kiểm tra được thiết lập đúng<h2>1.3. Các kỹ năng cần thiết cho một chuyên viên kiểm thử chất lượng (QA) bao gồm:</h2>-Kiến thức về quy trình kiểm thử phần mềm: QA cần có kiến thức về quy trình kiểm thử phần mềm để đảm bảo các quy trình kiểm thử được thực hiện đúng cách. -Kỹ năng phân tích và thiết kế kiểm thử: QA cần có khả năng phân tích và thiết kế các ca kiểm thử để đảm bảo phần mềm được kiểm thử đầy đủ. -Kiến thức về lập trình: QA nên có kiến thức về lập trình để có thể hiểu và đọc được mã nguồn phần mềm. -Kiến thức về cơ sở dữ liệu: QA cần hiểu về cơ sở dữ liệu để kiểm tra tính đúng đắn của các câu truy vấn và các thao tác trên cơ sở dữ liệu. -Kỹ năng sử dụng các công cụ kiểm thử: QA cần biết sử dụng các công cụ kiểm thử phần mềm để tăng hiệu quả và tiết kiệm thời gian. -Kỹ năng ghi chép và báo cáo: QA cần có khả năng ghi chép và báo cáo kết quả kiểm thử một cách chi tiết để các nhà phát triển có thể dễ dàng hiểu và sửa lỗi. -Kỹ năng giao tiếp: QA cần có khả năng giao tiếp tốt để có thể trao đổi và làm việc với các thành viên khác trong đội ngũ phát triển phần mềm. -Tinh thần tỉ mỉ và cẩn thận: QA cần có tinh thần tỉ mỉ và cẩn thận trong quá trình kiểm thử phần mềm để không bỏ sót bất kỳ lỗi nào. -Kiên trì và sáng tạo: QA cần có kiên trì trong việc tìm kiếm lỗi và sáng tạo trong việc đưa ra các phương pháp kiểm thử mới. -Sự chuyên nghiệp: QA nên có tinh thần chuyên nghiệp trong việc làm việc với đội ngũ phát triển và trách nhiệm với chất lượng sản phẩm.<h1>2. Khái niệm QC</h1><figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_21877c3985.png"></figure>QC là viết tắt của "Quality Control", nghĩa là kiểm soát chất lượng. Trong lĩnh vực kiểm thử phần mềm, QC thường được hiểu là quá trình kiểm tra sản phẩm hoặc dịch vụ của công ty để đảm bảo chất lượng của chúng đáp ứng các tiêu chuẩn và yêu cầu chất lượng được xác định trước.<h2>2.1. Các hoạt động chính của QC (Quality Control) trong kiểm thử phần mềm bao gồm:</h2>-Kiểm tra chất lượng sản phẩm: QC thực hiện các phương pháp kiểm tra như thử nghiệm chức năng, kiểm tra hiệu suất, kiểm tra bảo mật, kiểm tra tương thích và kiểm tra tính đáng tin cậy của sản phẩm để đảm bảo rằng sản phẩm đáp ứng các yêu cầu chất lượng và tiêu chuẩn được xác định trước. -Đánh giá độ tin cậy của sản phẩm: QC cũng đánh giá độ tin cậy của sản phẩm, bao gồm khả năng hoạt động đúng và đáp ứng các yêu cầu chất lượng với một mức độ xác định. -Kiểm tra tư vấn: QC kiểm tra tài liệu tư vấn, ví dụ như hướng dẫn sử dụng sản phẩm, bản hướng dẫn cho nhân viên hỗ trợ khách hàng, để đảm bảo tính đầy đủ và chính xác. -Kiểm tra quy trình phát triển sản phẩm: QC có thể thực hiện kiểm tra quy trình phát triển sản phẩm để đảm bảo rằng các quy trình này tuân thủ các tiêu chuẩn chất lượng được xác định trước và đưa ra các cải tiến cho các quy trình này. -Kiểm tra chất lượng dịch vụ: QC kiểm tra chất lượng các dịch vụ cung cấp bởi công ty, ví dụ như hỗ trợ khách hàng, để đảm bảo tính đầy đủ và chính xác. -Phát hiện và báo cáo lỗi: QC phát hiện và báo cáo các lỗi và vấn đề về chất lượng của sản phẩm đến các bộ phận liên quan để sửa chữa và cải tiến sản phẩm. -Đưa ra cải tiến và khuyến nghị: QC đưa ra các cải tiến và khuyến nghị để cải thiện chất lượng sản phẩm và các quy trình phát triển.<h2>2.2. Để trở thành một QC (Quality Control), bạn cần có những kỹ năng cơ bản sau:</h2>-Kiến thức về quy trình kiểm thử phần mềm: Để hiểu rõ quy trình kiểm thử phần mềm và các bước trong quá trình kiểm thử phần mềm. -Kiến thức về các kỹ thuật kiểm thử phần mềm: Để có thể sử dụng các kỹ thuật kiểm thử phần mềm phù hợp như kiểm thử hộp trắng, kiểm thử hộp đen, kiểm thử tích hợp, kiểm thử hệ thống, kiểm thử chấp nhận và kiểm thử hiệu suất. -Kỹ năng lập kế hoạch và tổ chức kiểm thử phần mềm: Để có thể lên kế hoạch kiểm thử phần mềm, đảm bảo rằng các bước kiểm thử được thực hiện theo kế hoạch và các lỗi được phát hiện và báo cáo đầy đủ. -Kỹ năng phân tích và giải quyết vấn đề: Để có thể phân tích lỗi và giải quyết vấn đề hiệu quả, đảm bảo rằng các lỗi được phát hiện và sửa chữa kịp thời. -Kỹ năng sử dụng các công cụ kiểm thử phần mềm: Để có thể sử dụng các công cụ kiểm thử phần mềm hiệu quả như Selenium, JMeter, SoapUI, và nhiều công cụ khác. -Kỹ năng giao tiếp: Để có thể trao đổi thông tin và làm việc với các thành viên khác trong nhóm kiểm thử, phát triển và quản lý dự án. -Kỹ năng tư duy logic và chi tiết: Để có thể phát hiện và phân tích các lỗi phần mềm, xác định nguyên nhân và tìm ra các giải pháp để khắc phục. -Kỹ năng kiểm tra và đảm bảo chất lượng: Để có thể kiểm tra chất lượng phần mềm, đảm bảo rằng phần mềm đáp ứng các yêu cầu chất lượng được đưa ra.

Trong bài viết này, chúng ta sẽ tìm hiểu sự khác nhau giữa QA và QC trong kiểm thử phần mềm. Mặc dù chúng đều là quá trình quan trọng của quá trình kiểm thử phần mềm, nhưng chúng có nhiều điểm khác biệt về mục đích, phương pháp và kỹ năng yêu cầu. Bài viết sẽ giúp bạn hiểu rõ hơn về hai khái niệm này và cách chúng tương tác với nhau để đảm bảo chất lượng phần mềm

Tổng quan về QA và QC trong kiểm thử phần mềm 

<h1 style="text-align:center;">Một vài điều nho nhỏ về WordPress</h1><h2 style="text-align:justify;">1. Hãy thường xuyên ấn “Save Changes” ở Permalink Settings</h2>Dưới đây là đoạn mã để tạo một post-type có tên là product:<pre><code class="language-php">&lt;?php
add_action('init', 'create_product_type');

function create_product_type()
{
 $labels = array(
 'name' =&gt; _x('Products', 'post type general name'),
 'singular_name' =&gt; _x('Product', 'post type singular name'),
 'menu_name' =&gt; 'Products',
 'all_items' =&gt; __('All products'),
 );

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

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

 register_post_type('product', $args);
}</code></pre>Dưới đây là ví dụ về một single-product.php để hiển thị thông tin chi tiết của một sản phẩm trong post type product.<pre><code class="language-php">&lt;?php
&lt;h1&gt;&lt;?php echo the_title() ?&gt;&lt;/h1&gt;</code></pre>Nếu như bạn không nhấn “Save Changes” ở Permalink Settings thì trang thường hiển thị ra kết quả là 404.php, ví dụ: &nbsp;<figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_33f764c7d1.png"></figure>Và sau khi bạn nhấn “Save Changes” ở Permalink Settings &nbsp;<figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_8cb290529e.png"></figure>&nbsp;Thì kết quả sẽ là &nbsp;<figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_f68840fd2b.png"></figure><h2>2. Hãy thường xuyên cập nhật plugin.</h2>Lỗi cài đặt và cập nhật plugin/theme là một trong những vấn đề phổ biến mà người dùng WordPress thường gặp phải. Điều này có thể xảy ra khi phiên bản của plugin hoặc theme không tương thích với phiên bản WordPress hiện tại của bạn. Khi gặp phải lỗi này, bạn có thể gặp khó khăn trong việc cài đặt hoặc cập nhật plugin hoặc theme. Điều này có thể gây ra sự cố trên trang web của bạn, ảnh hưởng đến trải nghiệm của người dùng và có thể dẫn đến việc mất dữ liệu quan trọng.Để giải quyết vấn đề này, bạn nên luôn chọn các plugin và theme từ các nhà phát triển uy tín và được cập nhật thường xuyên. Nếu bạn gặp phải vấn đề với phiên bản plugin hoặc theme hiện tại, bạn nên kiểm tra xem có phiên bản mới hơn của chúng không. Nếu có, hãy cập nhật chúng ngay lập tức để giảm thiểu nguy cơ gặp lỗi.Nếu bạn không thể cập nhật plugin hoặc theme của mình vì lý do gì đó, hãy tìm kiếm trợ giúp từ cộng đồng WordPress hoặc từ các chuyên gia về WordPress để giải quyết vấn đề. Điều này giúp tránh gây ra sự cố trên trang web của bạn và đảm bảo rằng trang web của bạn hoạt động ổn định và hiệu quả. &nbsp;<figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_8b46a7c533.png"></figure><h2>3. Gợi ý cho bạn các plugin mà tôi thường xuyên xử dụng</h2> Các plugin sau đây là những plugin mà tôi thường sử dụng khi làm việc với WordPress.&nbsp;<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_3b3b8dd370.png" alt="Index of /wp-content/plugins/advanced-custom-fields/assets/images"> &nbsp;<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_6539ff0a44.png" alt="All-In-One Security (AIOS) – Security and Firewall – WordPress plugin | WordPress.org"> &nbsp;<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_1299490471.png" alt="Contact Form 7 – WordPress plugin | WordPress.org"><ul><li>Plugin Advanced Custom Fields giúp tôi tạo ra các trường tùy chỉnh để quản lý nội dung trang web.&nbsp;</li><li>Plugin All In One WP Security giúp tăng cường bảo mật cho trang web của tôi bằng cách thêm các tính năng như kiểm tra mật khẩu mạnh, chặn địa chỉ IP độc hại và bảo vệ các tệp nhạy cảm.&nbsp;</li><li>Plugin Contact form 7 cho phép tôi tạo ra các biểu mẫu liên hệ để khách hàng có thể liên lạc với tôi.&nbsp;</li><li>Plugin SVG Support giúp tôi tải lên các tệp hình ảnh vector SVG để sử dụng trên trang web của tôi.&nbsp;</li><li>Plugin Yoast Duplicate Post giúp tôi dễ dàng nhân bản bài viết để sử dụng lại mà không phải viết lại từ đầu. Tôi rất tin tưởng vào các plugin này và sử dụng chúng thường xuyên trong các dự án của mình.</li></ul><h2>4. Hãy chú ý đến việc bảo mật website của bạn</h2>WordPress là một trong những nền tảng phổ biến nhất để tạo và quản lý các trang web. Tuy nhiên, vì tính phổ biến này, WordPress đã trở thành một mục tiêu chính cho các cuộc tấn công của hacker. Điều này đặt ra vấn đề bảo mật đối với WordPress.Để bảo vệ trang web WordPress của bạn khỏi các cuộc tấn công, có một số biện pháp bảo mật quan trọng mà bạn nên thực hiện. Đầu tiên, bạn nên sử dụng mật khẩu mạnh và đổi mật khẩu định kỳ. Bạn nên sử dụng plugin bảo mật WordPress để tăng cường tính bảo mật, bao gồm các plugin như All In One WP Security và Wordfence.Bạn cũng nên thường xuyên cập nhật WordPress và các plugin của mình để đảm bảo rằng bạn có phiên bản mới nhất với các lỗi bảo mật được sửa đổi. Ngoài ra, bạn cũng nên sao lưu trang web của mình thường xuyên để đảm bảo rằng bạn có thể phục hồi trang web của mình nếu xảy ra bất kỳ vấn đề bảo mật nào. Với những biện pháp bảo mật đúng đắn, bạn có thể đảm bảo an toàn cho trang web WordPress của mình và tránh được các cuộc tấn công của hacker.

Một chiếc blog note lại những vấn đề , những điều mình đã gặp phải trong quá trình làm việc với wordpress

Một vài điều nho nhỏ về WordPress

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.

<h1 style="text-align:center;">WordPress: Làm việc với API của Contact Form 7</h1><h3 style="text-align:justify;">1. Giới thiệu về Contact Form 7</h3>Contact Form 7 là một trong những plugin phổ biến nhất trong cộng đồng WordPress được sử dụng để tạo và quản lý các biểu mẫu liên hệ. Với nó, người dùng có thể dễ dàng tạo các biểu mẫu liên hệ đa dạng và tùy chỉnh theo nhu cầu của mình mà không cần phải sử dụng bất kỳ một dòng mã nào. Bên cạnh đó, Contact Form 7 còn cung cấp nhiều tính năng hữu ích để giúp người dùng quản lý và xử lý các biểu mẫu liên hệ một cách thuận tiện và hiệu quả.<figure class="image image_resized" style="width:17.93%;"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/contact_form_7_6c4526aeea.png" alt="contact form 7.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_contact_form_7_6c4526aeea.png 201w," sizes="100vw"></figure><h3>2. Demo submit form của Contact Form 7 thông qua API</h3>Mình chuẩn bị một form như sau:<figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_722b56953e.png"></figure>Form gồm các field như là: your-name, your-email, your-subject, your-message Làm sao để gửi submit form trong contact form 7 bằng API. Thật may mắn là contact form 7 đã cung cấp cho ta một đương link để làm việc đó, ví dụ:&nbsp; http://demo.local/wp-json/contact-form-7/v1/contact-forms/171/feedback Trong đó 171 là id của form mà bạn muốn submit.Mình sử dụng postman để gửi đi một email:<figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_71002e607c.png"></figure>Cấu trúc bình thường của một response trả về của contact form 7 khi bạn gửi mail:&nbsp;<pre><code class="language-plaintext">{ 
 "contact_form_id": 171, 
 "status": "mail_sent", 
 "message": "Thank you for your message. It has been sent.", 
 "posted_data_hash": "286ba8559707c76ee30f82f97b09bc32", 
 "into": "#", 
 "invalid_fields": [] 
}</code></pre>Trong đó:<ul><li>contact_form_id: ID của biểu mẫu Contact Form 7 đã được gửi.</li><li>status: Trạng thái của việc gửi biểu mẫu. Trong ví dụ này, giá trị là "mail_sent", cho biết rằng email đã được gửi thành công.</li><li>message: Một thông báo cho biết trạng thái của việc gửi biểu mẫu. Trong ví dụ này, giá trị là "Cảm ơn bạn đã gửi tin nhắn. Nó đã được gửi.", đó là thông báo thành công mặc định cho Contact Form 7.</li><li>posted_data_hash: Một hash của dữ liệu biểu mẫu đã được gửi. Điều này có thể được sử dụng để xác minh tính toàn vẹn của dữ liệu.</li><li>into: Các trường đầu vào của biểu mẫu mà dữ liệu biểu mẫu đã được gửi đến. Trong ví dụ này, giá trị là "#", cho thấy rằng dữ liệu không được gửi đến một địa chỉ email cụ thể mà được gửi đến địa chỉ email mặc định được chỉ định trong cài đặt của Contact Form 7.</li><li>invalid_fields: Một mảng các trường đầu vào không vượt qua kiểm tra hợp lệ. Trong ví dụ này, giá trị là một mảng trống [], cho thấy rằng tất cả các trường đều vượt qua kiểm tra hợp lệ.</li></ul><h3>3. Tuỳ chỉnh response của Contact Form 7</h3>Đầu tiên ta phải biết các trạng thái của một form sau khi được submit để dựa vào đó mà tuỳ chỉnh chỉnh cho phù hợp với nhu cầu của bạn:Các trạng thái của một form sau khi được submit:&nbsp;<ul><li>mail_sent: Email đã được gửi thành công.</li><li>mail_failed: Email không gửi được.</li><li>verify_failed: Xác thực dữ liệu biểu mẫu không thành công.</li><li>spam: Việc gửi biểu mẫu được xác định là thư rác.</li><li>mail_sent_akismet: Email đã được gửi thành công, nhưng nó đã bị Akismet gắn cờ là thư rác.</li><li>mail_sent_ng: Email đã được gửi thành công nhưng không gửi được do lỗi trong cấu hình máy chủ email hoặc các lý do khác.</li></ul>Và mình sử dụng một hook mà Contact Form đã cung cấp đó là wpcf7_ajax_json_echo<ul><li>wpcf7_ajax_json_echo là một hàm trong Contact Form 7 (CF7) được sử dụng để xuất ra các thông báo trả về từ AJAX cho người dùng khi họ gửi một biểu mẫu liên hệ. Khi người dùng nhấn nút "gửi" trên biểu mẫu liên hệ, CF7 sẽ gửi thông tin đó đến máy chủ thông qua AJAX. Sau đó, máy chủ sẽ trả về một phản hồi AJAX cho trình duyệt web của người dùng.</li><li>Hàm wpcf7_ajax_json_echo được sử dụng để hiển thị thông báo trả về này trên trang web của người dùng. Thông báo này có thể bao gồm các thông tin như trạng thái của việc gửi biểu mẫu liên hệ (như "Thành công" hoặc "Thất bại"), thông báo thành công hoặc lỗi cụ thể và các thông tin khác về việc gửi biểu mẫu liên hệ.</li><li>Hàm wpcf7_ajax_json_echo được sử dụng kết hợp với các hook và filter khác của CF7 để tùy chỉnh thông báo trả về và hiển thị chúng theo cách tùy chỉnh. Với wpcf7_ajax_json_echo, người dùng có thể tùy chỉnh thông báo trả về AJAX để hiển thị chúng cho người dùng một cách dễ hiểu và phù hợp với nhu cầu của họ.</li></ul><pre><code class="language-php">&lt;?php
add_action('wpcf7_ajax_json_echo', 'custom_response_message', 10, 2);

function custom_response_message($response, $result)
{
&nbsp; &nbsp; if ($response['status'] === 'mail_sent') {
&nbsp; &nbsp; &nbsp; &nbsp; $response['meta'] &nbsp; = (object) array(
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'id' &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;=&gt; $response['contact_form_id'],
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'invalidFields' &nbsp; =&gt; $response['invalid_fields'],
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'postedDataHash' &nbsp;=&gt; $response['posted_data_hash'],
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'into' &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;=&gt; $response['into']
&nbsp; &nbsp; &nbsp; &nbsp; );
&nbsp; &nbsp; &nbsp; &nbsp; $response['message'] = $response['message'];
&nbsp; &nbsp; &nbsp; &nbsp; $response['error'] &nbsp;= null;
&nbsp; &nbsp; &nbsp; &nbsp; $response['code'] &nbsp; = 204;
}

&nbsp; &nbsp; unset($response['contact_form_id']);
&nbsp; &nbsp; unset($response['message']);
&nbsp; &nbsp; unset($response['invalid_fields']);
&nbsp; &nbsp; unset($response['posted_data_hash']);
&nbsp; &nbsp; unset($response['into']);
&nbsp; &nbsp; return $response;
}</code></pre>Để mình giải thích sở qua đoạn code trên: Đó là khi mail được gửi thành công thì mình sẽ gộp các field như là contact_form_id, invalid_fields, posted_data_hash, into về một chỗ gọi là meta sau đó bỏ nó đi ở response cũ.Và nhờ đoạn code trên thì reposne trả về với cấu trúc như tôi mong đợi:<figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_37435d4199.png"></figure>Mong là thông qua ví dụ ở trên bạn sẽ phần nào hình dung ra được cách làm việc với API của contact form 7.Các tài liệu tham khảo:<a target="_blank" rel="noopener noreferrer" href="https://contactform7.com/">Contact Form 7</a> <a href=" http://chat.openai.com/">ChatGPT</a>&nbsp;&nbsp;&nbsp;

Một chiếc blog giúp bạn hiểu hơn về cách làm việc với API được cung cấp sẵn bởi Contact Form 7

WordPress: API của Contact Form 7

<h1>1. Khái niệm</h1><img> Test Automation là việc sử dụng phần mềm hoặc công cụ để tự động hóa quá trình kiểm thử phần mềm. Nó bao gồm việc tạo ra các kịch bản kiểm thử tự động và sử dụng các công cụ tự động để thực hiện các kịch bản đó, thay vì thực hiện kiểm thử thủ công, các kịch bản kiểm thử được thiết kế và lập trình bởi những người có kinh nghiệm trong lĩnh vực kiểm thử phần mềm. Các kịch bản này có thể được thiết kế để kiểm tra tính năng, hiệu suất, bảo mật, độ tin cậy và các yêu cầu khác của phần mềm. Test Automation giúp tăng tốc độ kiểm thử, giảm thiểu sai sót và đảm bảo tính toàn vẹn của quá trình kiểm thử phần mềm. Nó cũng giúp tiết kiệm thời gian và chi phí cho công ty phát triển phần mềm. Tuy nhiên, Test Automation cũng có những hạn chế và không thể thay thế hoàn toàn cho kiểm thử thủ công.<h1> 2. Ưu, nhược điểm của Automation Testing</h1><figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_7da2bb33ad.png"></figure>a. Ưu điểm của Automation Testing&nbsp; 1. Tiết kiệm thời gian và chi phí: Test Automation có thể tự động hóa quá trình kiểm thử, giúp tiết kiệm thời gian và chi phí so với việc thực hiện kiểm thử bằng tay. 2. Tăng tính chính xác và độ tin cậy: Test Automation loại bỏ những thiếu sót của kiểm thử thủ công có thể gây ra trong quá trình kiểm thử, giúp tăng tính chính xác và độ tin cậy của kiểm thử. 3. Tăng khả năng lặp lại và tăng phạm vi kiểm thử: Test Automation có thể thực hiện các kịch bản kiểm thử một cách lặp đi lặp lại nhiều lần, và có thể kiểm thử được một phạm vi rộng hơn so với kiểm thử bằng thủ công. 4. Tăng tốc độ và hiệu suất kiểm thử: Test Automation có thể thực hiện các kịch bản kiểm thử một cách nhanh chóng và hiệu quả hơn so với kiểm thử bằng tay. 5. Tăng khả năng phát hiện lỗi: Test Automation có thể tìm ra các lỗi một cách chính xác và nhanh chóng hơn so với kiểm thử bằng thủ công. &nbsp; &nbsp; &nbsp;b. Nhược điểm của Automation Testing 1. Đòi hỏi kỹ thuật cao: Test Automation đòi hỏi kiến thức chuyên môn cao về kỹ thuật và công nghệ, lập trình và tư duy logic, các ngôn ngữ lập trình khác nhau. 2. Khó khăn trong việc tạo và duy trì kịch bản kiểm thử: Tạo và duy trì các kịch bản kiểm thử tự động là một công việc phức tạp và đòi hỏi sự cẩn thận và kiên trì. 3. Không thể kiểm thử toàn diện: Test Automation không thể kiểm thử toàn diện và đảm bảo được tính ổn định của phần mềm<h1>3.Cách thức hoạt động của Automation Testing</h1><figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_0162cbcb8e.png"></figure>Automation Test là phương pháp kiểm thử phần mềm tự động, được thực hiện bằng cách sử dụng phần mềm và các công cụ kiểm thử tự động để thực hiện các kịch bản kiểm thử mà không cần sự can thiệp của con người. Cách thức hoạt động của Automation Test thường bao gồm các bước sau: 1. Lựa chọn công cụ Automation Test: Đầu tiên, phải chọn một công cụ Automation Test phù hợp với dự án. Có nhiều loại công cụ Automation Test khác nhau, bao gồm các công cụ miễn phí và thương mại, chẳng hạn như Selenium, Appium, Katalon Studio, Ranorex, và một số công cụ khác. 2. Xây dựng kịch bản kiểm thử: Sau khi chọn công cụ Automation Test, tiếp theo là xây dựng các kịch bản kiểm thử. Các kịch bản kiểm thử này được lập trình sử dụng một trong các ngôn ngữ lập trình phổ biến hiện nay như Java, Javascript, Python, hoặc C#. 3. Thiết lập môi trường kiểm thử: Trong quá trình xây dựng kịch bản kiểm thử, phải thiết lập môi trường kiểm thử để thực hiện kiểm thử. Môi trường kiểm thử bao gồm các trình duyệt web, hệ điều hành, ứng dụng và các công cụ hỗ trợ khác. 4. Thực thi kịch bản kiểm thử: Sau khi đã xây dựng các kịch bản kiểm thử và thiết lập môi trường kiểm thử, ta có thể thực thi các kịch bản kiểm thử này. Các kịch bản kiểm thử được thực thi tự động, mà không cần sự can thiệp của con người. 5. Phân tích kết quả kiểm thử: Sau khi thực thi các kịch bản kiểm thử, các kết quả kiểm thử được lưu lại và phân tích. Các lỗi và vấn đề được phát hiện sẽ được ghi lại trong báo cáo kiểm thử. 6. Sửa chữa lỗi: Cuối cùng, các lỗi và vấn đề phát hiện được trong quá trình kiểm thử sẽ được sửa chữa và thực hiện lại các kịch bản kiểm thử để đảm bảo rằng phần mềm hoạt động đúng và hiệu quả.<h1> 4. &nbsp;Để trở thành Automation Testing thì bắt đầu từ đâu:</h1>&nbsp;<figure class="image"><img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_1132507687.png"></figure>1. Tìm hiểu kiến thức cơ bản về Testing: Để hiểu được kiểm thử tự động, bạn cần có kiến thức về Testing. Bạn nên tìm hiểu về các kỹ thuật kiểm thử, kiểm thử phần mềm, kiểm thử đơn vị, kiểm thử tích hợp, kiểm thử chấp nhận, kiểm thử hệ thống, kiểm thử hiệu năng, kiểm thử bảo mật, và các quy trình, tiêu chuẩn và kiến thức chung về Testing. 2. Học một ngôn ngữ lập trình: Automation Testing thường được thực hiện bằng cách sử dụng các công cụ và ngôn ngữ lập trình như Java, Python, Ruby, C#, v.v. Bạn cần học một ngôn ngữ lập trình để có thể hiểu được các kịch bản kiểm thử tự động và tạo ra các kịch bản kiểm thử tự động. 3. Tìm hiểu các công cụ kiểm thử tự động: Các công cụ kiểm thử tự động giúp bạn tạo và thực hiện các kịch bản kiểm thử tự động. Có nhiều công cụ phổ biến như Selenium, Appium, Katalon Studio, Robot Framework, và nhiều công cụ khác. Bạn cần tìm hiểu và nắm vững các công cụ này để có thể sử dụng chúng một cách hiệu quả. 4. Thực hành và tạo các kịch bản kiểm thử tự động: Sau khi bạn đã có kiến thức cơ bản về Testing, ngôn ngữ lập trình và các công cụ kiểm thử tự động, bạn nên thực hành bằng cách tạo ra các kịch bản kiểm thử tự động. Điều này sẽ giúp bạn hiểu rõ hơn về cách thực hiện kiểm thử tự động và tạo ra các kịch bản kiểm thử tự động hiệu quả. 5. Tìm hiểu thêm về các công nghệ và kỹ thuật liên quan: Testing là một lĩnh vực rộng lớn và luôn cập nhật với các công nghệ mới và kỹ thuật mới. Bạn nên tiếp tục tìm hiểu và nâng cao kiến thức của mình về các công nghệ và kỹ thuật liên quan để có thể áp dụng chúng vào kiểm thử tự động. Nếu bạn muốn đi sâu hơn vào lĩnh vực kiểm thử tự động và trở thành một chuyên gia trong lĩnh vực này, bạn có thể tìm hiểu thêm về các chứng chỉ liên quan như ISTQB Foundation Level hoặc Selenium WebDriver Certification. Ngoài ra, bạn có thể tìm kiếm các khoá học và tài liệu trực tuyến để học hỏi thêm kiến thức về Automation Testing. Các diễn đàn và cộng đồng liên quan cũng là nơi tuyệt vời để kết nối và chia sẻ kiến thức với các chuyên gia khác trong lĩnh vực này&nbsp;

Test Automation là việc sử dụng phần mềm hoặc công cụ để tự động hóa quá trình kiểm thử phần mềm. Nó bao gồm việc tạo ra các kịch bản kiểm thử tự động và sử dụng các công cụ tự động để thực hiện các kịch bản đó, thay vì thực hiện kiểm thử thủ công, các kịch bản kiểm thử được thiết kế và lập trình bởi những người có kinh nghiệm trong lĩnh vực kiểm thử phần mềm. Các kịch bản này có thể được thiết kế để kiểm tra tính năng, hiệu suất, bảo mật, độ tin cậy và các yêu cầu khác của phần mềm.

Tìm hiểu về Automation Testing

Với tư cách là một UI/UX designer, Hưng đã sử dụng nhiều công cụ khác nhau để giúp &nbsp;hoàn thành các dự án của mình. Tuy nhiên, khi mà mình biết đến ChatGPT, một trợ lý thông minh có thể hỗ trợ &nbsp;trong công việc UI/UX,mình đã thử nghiệm nó và phát hiện rằng nó rất hữu ích. Trong bài viết này, Hưng sẽ chia sẻ với trải nghiệm của bản thân khi sử dụng ChatGPT trong công việc thiết kế UI/UX.<h2>1. Giúp tìm kiếm thông tin</h2> Khi bắt đầu một dự án mới, mình thường phải tìm kiếm thông tin về khách hàng và ngành công nghiệp của họ. Với ChatGPT, mình có thể đặt câu hỏi về khách hàng và ChatGPT sẽ tìm kiếm và cung cấp cho tôi các thông tin liên quan. Điều này giúp tiết kiệm thời gian và nỗ lực tìm kiếm thông tin trên Internet.<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Information_search_9a90bad60d.png" alt="Information search.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_Information_search_9a90bad60d.png 234w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_Information_search_9a90bad60d.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_Information_search_9a90bad60d.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_Information_search_9a90bad60d.png 1000w," sizes="100vw"><h2>2. Đưa ra ý tưởng mới</h2>Khi thiết kế giao diện người dùng, mình luôn muốn đưa ra các ý tưởng mới để tạo sự khác biệt và tăng tính độc đáo cho sản phẩm của mình. ChatGPT có thể giúp đưa ra các ý tưởng mới bằng cách đưa ra các gợi ý và đưa ra các trang web liên quan đến chủ đề mình quan tâm. Mình cũng có thể đặt câu hỏi về xu hướng thiết kế mới nhất hoặc các phương pháp thiết kế tốt nhất để tạo ra một giao diện người dùng tốt hơn.<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/idea_b9b5a13c1c.png" alt="idea.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_idea_b9b5a13c1c.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_idea_b9b5a13c1c.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_idea_b9b5a13c1c.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_idea_b9b5a13c1c.png 1000w," sizes="100vw"><h2>3. Hỗ trợ trong quá trình tạo nội dung</h2>Tạo nội dung cho một trang web hoặc ứng dụng là một phần quan trọng của công việc của tôi. ChatGPT có thể giúp tôi trong quá trình tạo nội dung bằng cách cung cấp cho tôi các từ khóa liên quan đến nội dung tôi muốn viết và đưa ra các lời khuyên về phong cách viết và cấu trúc câu.<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/content_e8f0b796f3.png" alt="content.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_content_e8f0b796f3.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_content_e8f0b796f3.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_content_e8f0b796f3.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_content_e8f0b796f3.png 1000w," sizes="100vw"><h2>4. Trả lời các câu hỏi&nbsp;</h2>Khi gặp phải các thắc mắc trong quá trình thiết kế giao diện người dùng, mình có thể đặt câu hỏi cho ChatGPT và nó sẽ cung cấp các câu trả lời và giải pháp cho vấn đề của mình. Điều này giúp tiết kiệm thời gian và tăng tính hiệu quả trong công việc.<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/answer_the_question_8e86d790cb.png" alt="answer the question.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_answer_the_question_8e86d790cb.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_answer_the_question_8e86d790cb.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_answer_the_question_8e86d790cb.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_answer_the_question_8e86d790cb.png 1000w," sizes="100vw"><h2>5. Kiểm tra chính tả và ngữ pháp</h2>Khi tạo nội dung hoặc viết các thông báo cho giao diện người dùng, mình luôn muốn đảm bảo rằng các từ và câu được viết đúng chính tả và ngữ pháp. ChatGPT có thể giúp kiểm tra chính tả và ngữ pháp của các từ và câu mình viết. Điều này giúp đảm bảo rằng các thông điệp mình &nbsp;truyền tải đến người dùng là rõ ràng và chính xác.<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/Check_spelling_and_grammar_8d72f77dc3.png" alt="Check spelling and grammar.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_Check_spelling_and_grammar_8d72f77dc3.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_Check_spelling_and_grammar_8d72f77dc3.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_Check_spelling_and_grammar_8d72f77dc3.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_Check_spelling_and_grammar_8d72f77dc3.png 1000w," sizes="100vw"><h2>6. Hỗ trợ cho việc tối ưu hóa tìm kiếm</h2>Tối ưu hóa tìm kiếm là một phần quan trọng của công việc UI/UX. ChatGPT có thể giúp đưa ra các từ khóa liên quan đến sản phẩm của mình và cung cấp các gợi ý để tối ưu hóa nội dung của mình để thu hút được sự chú ý của các công cụ tìm kiếm.Tổng kết lại ChatGPT đã giúp Hưng &nbsp;nâng cao hiệu quả làm việc của mình.Giúp mình tiết kiệm thời gian và nỗ lực trong quá trình tìm kiếm thông tin, đưa ra ý tưởng mới, hỗ trợ trong quá trình tạo nội dung và trả lời các câu hỏi. Ngoài ra, ChatGPT cũng giúp kiểm tra chính tả và ngữ pháp, hỗ trợ cho việc tối ưu hóa tìm kiếm và đưa ra các lời khuyên về phong cách viết và cấu trúc câu. Mình tin rằng ChatGPT sẽ là một công cụ hữu ích cho bất kỳ UI/UX designer nào muốn tăng cường hiệu quả làm việc của mình và đạt được kết quả tốt nhất cho sản phẩm của họ. Một lần nữa mình là Hưng, cảm ơn theo dõi bài viết của mình!

Với việc được xem là "bách khoa toàn thư" cùng xem chat GPT giúp ích gì cho công việc thiết kế UI/UX trở nên dễ dàng hơn nhé!

Tối Ưu Hóa Công Việc Thiết Kế UI/UX Với Chat GPT

Xin chào !!&nbsp; Mình là Hưng đến từ ABC Software Solutions Company.&nbsp; Để tạo ra một trải nghiệm người dùng tốt nhất, thiết kế UX (user experience) đóng vai trò quan trọng. Tuy nhiên, nhiều người thiết kế đã rơi vào thói quen đặt quá nhiều thông tin và tính năng trong sản phẩm của họ. Điều này làm cho sản phẩm trở nên phức tạp và khó sử dụng, gây khó khăn cho người dùng. Trong bài viết này, cùng Hưng tìm hiểu về sự đơn giản hóa trong thiết kế UX và cách nó giúp tăng cường trải nghiệm người dùng.<h2>Đơn giản hóa là gì, có quan trọng trong thiết kế UX?<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/wrong_right_4e631e7a84.png" alt="wrong right.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_wrong_right_4e631e7a84.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_wrong_right_4e631e7a84.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_wrong_right_4e631e7a84.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_wrong_right_4e631e7a84.png 1000w," sizes="100vw"></h2>Đơn giản hóa là quá trình loại bỏ những yếu tố không cần thiết, giảm bớt sự phức tạp và tạo ra một sản phẩm đơn giản và dễ sử dụng hơn. Nó là một phương pháp thiết kế hữu ích trong việc tạo ra trải nghiệm người dùng tốt hơn. Vì sao đơn giản hóa là quan trọng trong thiết kế UX?<h3> 1. Giúp người dùng dễ dàng sử dụng</h3>Khi thiết kế sản phẩm, đơn giản hóa là cách tốt nhất để giúp người dùng sử dụng sản phẩm của bạn một cách dễ dàng và nhanh chóng. Khi sản phẩm có quá nhiều tính năng, người dùng sẽ khó khăn trong việc tìm ra các tính năng chính và thường sử dụng. Tuy nhiên, khi sản phẩm đơn giản hóa, người dùng sẽ dễ dàng tìm kiếm các tính năng và sử dụng sản phẩm một cách hiệu quả.<h3> 2. Giúp tăng tốc độ tải trang</h3>Sử dụng quá nhiều tính năng và thông tin trên một trang web hoặc ứng dụng di động có thể làm cho tốc độ tải trang chậm. Nếu sản phẩm của bạn quá phức tạp, nó có thể ảnh hưởng đến tốc độ tải trang, gây ra sự chán nản cho người dùng. Đơn giản hóa sản phẩm của bạn sẽ giúp tăng tốc độ tải trang và tạo ra trải nghiệm người dùng tốt hơn.Sử dụng quá nhiều tính năng và thông tin trên một trang web hoặc ứng dụng di động có thể làm cho tốc độ tải trang chậm. Nếu sản phẩm của bạn quá phức tạp, nó có thể ảnh hưởng đến tốc độ tải trang, gây ra sự chán nản cho người dùng. Đơn giản hóa sản phẩm của bạn sẽ giúp tăng tốc độ tải trang và tạo ra trải nghiệm người dùng tốt hơn.<h3>3. Tăng khả năng tương tác</h3>Sản phẩm đơn giản hóa không chỉ giúp tăng cường trải nghiệm người dùng, mà còn giúp tăng khả năng tương tác giữa người dùng và sản phẩm. Với một giao diện đơn giản, người dùng sẽ dễ dàng tương tác với sản phẩm hơn. Nếu người dùng phải tìm kiếm quá nhiều để sử dụng một tính năng hoặc để tìm kiếm thông tin, họ sẽ cảm thấy khó chịu và có thể bỏ qua sản phẩm của bạn. Đơn giản hóa sản phẩm của bạn sẽ giúp tăng khả năng tương tác và giúp người dùng dễ dàng tìm kiếm thông tin và sử dụng các tính năng của sản phẩm.<h3>4. Tăng độ tin cậy của sản phẩm</h3>Một sản phẩm đơn giản hóa thường dễ dàng để sử dụng và hiểu hơn. Sản phẩm đơn giản hóa sẽ giúp người dùng có thể dễ dàng phân biệt các tính năng của sản phẩm và hiểu rõ hơn về sản phẩm của bạn. Điều này sẽ giúp tăng độ tin cậy của sản phẩm và giúp khách hàng có niềm tin hơn vào sản phẩm của bạn.<h2>Cách đơn giản hóa sản phẩm của bạn</h2><ul style="list-style-type:disc;"><li>Tập trung vào tính năng quan trọng nhất: Khi thiết kế sản phẩm, hãy tập trung vào tính năng quan trọng nhất. Loại bỏ các tính năng không cần thiết và tập trung vào những tính năng quan trọng nhất sẽ giúp sản phẩm của bạn đơn giản hóa hơn.</li><li>Giữ giao diện đơn giản: Giao diện đơn giản sẽ giúp người dùng dễ dàng tương tác và sử dụng sản phẩm của bạn. Hãy giữ giao diện đơn giản và tránh sử dụng quá nhiều hình ảnh hoặc màu sắc.</li><li>Sử dụng ngôn ngữ đơn giản: Sử dụng ngôn ngữ đơn giản và tránh sử dụng các thuật ngữ phức tạp. Sử dụng ngôn ngữ dễ hiểu sẽ giúp sản phẩm của bạn dễ sử dụng hơn.</li><li>Kiểm tra sản phẩm của bạn: Trước khi sản phẩm được đưa ra thị trường, hãy kiểm tra kỹ sản phẩm của bạn để đảm bảo rằng nó đơn giản và dễ sử dụng. Bạn có thể tìm kiếm ý kiến từ người dùng hoặc các chuyên gia UX để đánh giá sản phẩm của bạn.</li></ul><h2>Kết luận<img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/experience_2daa89ca99.png" alt="experience.png" srcset="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/thumbnail_experience_2daa89ca99.png 245w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/small_experience_2daa89ca99.png 500w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/medium_experience_2daa89ca99.png 750w,https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/large_experience_2daa89ca99.png 1000w," sizes="100vw"></h2>Sự đơn giản hóa trong thiết kế UX là cách tốt nhất để tạo ra một trải nghiệm người dùng tuyệt vời và tăng độ tin cậy của sản phẩm. Khi sản phẩm của bạn được đơn giản hóa, người dùng sẽ dễ dàng sử dụng sản phẩm hơn, tìm kiếm thông tin nhanh chóng hơn và tương tác với sản phẩm của bạn nhanh hơn. Điều này sẽ giúp tăng khả năng tương tác và giúp người dùng cảm thấy thoải mái hơn khi sử dụng sản phẩm của bạn. Tuy nhiên, đơn giản hóa sản phẩm không phải là điều dễ dàng, nó đòi hỏi sự kiên trì và nỗ lực. Thiết kế sản phẩm đơn giản hóa có thể là một quá trình dài và đòi hỏi thử nghiệm liên tục để đạt được kết quả tốt nhất. Nhưng đối với các nhà thiết kế UX, sự đơn giản hóa trong thiết kế sản phẩm là một kỹ năng quan trọng để đảm bảo rằng sản phẩm của họ đáp ứng được yêu cầu của người dùng và tăng khả năng tương tác của sản phẩm. Tóm lại, sự đơn giản hóa trong thiết kế UX là một phương pháp quan trọng để tạo ra trải nghiệm người dùng tốt và giúp sản phẩm của bạn tăng độ tin cậy. Với các bước đơn giản để đơn giản hóa sản phẩm của bạn, bạn có thể giúp người dùng tương tác với sản phẩm của bạn một cách dễ dàng và hiệu quả. Điều này sẽ giúp tăng sự hài lòng của khách hàng và giúp tăng doanh số bán hàng của bạn. Vì vậy, hãy đầu tư vào sự đơn giản hóa trong thiết kế UX để đạt được thành công trong kinh doanh của bạn. Trên đây là những chia sẻ của mình về sự đơn giản hóa trong xây dựng thiết kế UX. Mình là Hưng cảm ơn đã theo dõi bài viết của mình! &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;

Sự đơn giản hóa trong thiết kế UX là tối giản hoá yếu tố phức tạp, tăng cường tính dễ sử dụng và hiệu quả của sản phẩm.

Sự đơn giản hóa trong thiết kế UX

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

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ề cách Active menu nhiều cấp trong WordPress.&nbsp; Như các bạn đã biết thì WordPress là một trong những nền tảng mà bạn có thể làm hầu hết mọi thứ. Tất cả những gì bạn cần làm là dành vài phút trong bảng quản trị và bạn có thể làm cho trang web của mình trông giống như cách bạn muốn. Điều tương tự cũng xảy ra với các menu tùy chỉnh . Việc tạo và quản lý chúng thực sự dễ dàng và bất kỳ ai cũng có thể làm được. Điều rất quan trọng là phải có các menu trực quan và được tổ chức tốt giúp người dùng của bạn dễ dàng tìm thấy những gì họ cần trên trang web của bạn. Sắp xếp và cấu trúc các danh mục của bạn một cách kỹ lưỡng vì menu sẽ hoạt động giống như một bản đồ cho trang web của bạn. Nó sẽ hướng dẫn khách hàng&nbsp; truy cập đến nội dung họ đang tìm kiếm. Để tạo một menu trong WordPress chúng ta dùng function wp_nav_menu để làm điều này. Bạn có thể tạo chúng như sau: Ta đặt một vài dòng lệnh trong file&nbsp;function.php là bạn đã tạo được. Nhưng trước khi tạo menu, hãy chắc chắn là theme của bạn đã hỗ trợ tính năng menu bằng cách kiểm tra xem có đoạn dưới trong file function của theme chưa, nếu chưa thì thêm vào bằng dòng lệnh vào. Hàm tạo menu:<pre><code class="language-php">&lt;?php

// Them menu cho site wp

add_theme_support( 'menus' );

function register_menus() {

register_nav_menus(

array(

'main-menu' =&gt; __( 'Main Menu' ),

'footer-menu' =&gt; __( 'Footer Menu' )

)

);

}

add_action( 'init', 'register_menus' );</code></pre>Đây là hàm dùng để đăng ký &nbsp;và tạo một menu trong Wordpress. Sau khi ta đã đăng ký để lấy menu ra ngoài theme trong WP thì ta thêm dòng code:<pre><code class="language-php">&lt;?php&nbsp;wp_nav_menu(&nbsp;array(&nbsp;'theme_location' =&gt;&nbsp;'footer-menu' ) );&nbsp;?&gt;</code></pre> * LƯU Ý:&nbsp; ‘theme_location’ chúng ta có thể linh động vị trí menu bằng cấu trúc code sau:<pre><code class="language-php">'theme_location' =&gt;&nbsp;'main_menu' or&nbsp;'theme_location' =&gt; 'tên menu tùy chỉnh'.</code></pre>Sau khi menu tạo thành công để có thể active menu với các class tùy chỉnh lưu ý các item này nó có thể giúp bạn biết được việc active có hoạt động hay không. <img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_c284b7d339.png"> Đối với việc active menu cùng cấp dạng (menu gốc) này: <img class="image_resized" style="width:86.17%;" src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_dba1acdd0d.png"> thì việc active cho nó đơn giản bằng dòng code &nbsp;<pre><code class="language-php">&lt;?php

add_filter('nav_menu_css_class' ,&nbsp;'special_nav_class' ,&nbsp;10 ,&nbsp;2);

function&nbsp;special_nav_class ($classes,&nbsp;$item) {

 if (in_array('current-menu-item',&nbsp;$classes) ){

 &nbsp; $classes[] =&nbsp;'active ';

 }

 return&nbsp;$classes;

}?&gt;
 </code></pre>Kết quả mong đợi:&nbsp; <img class="image_resized" style="width:71.5%;" src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_ed55754c23.png">Còn đối với việc menu đó có nhiều item hay nói cách khác là nó có nhiều category dạng như này:&nbsp; <img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_d0cc12342e.png">Có nghĩa là khi ta chọn 1 category con thì hiển nhiên category cha vẫn còn active (active category cha vẫn luôn được giữ lại nếu ta có nhọn category con). Kết quả mong đợi: <img src="https://abc-cms-production.s3.ap-southeast-1.amazonaws.com/image_dac48a89a3.png">Hàm để giúp việc click vào nhiều category con mà người dùng họ vẫn biết mình đang truy cập category (item menu) nào , ta có đoạn code sau: &nbsp;<pre><code class="language-php">&lt;?php

add_action('nav_menu_css_class',&nbsp;'add_current_nav_class',&nbsp;10,&nbsp;2 );

function&nbsp;add_current_nav_class($classes,&nbsp;$item) {

 &nbsp; global&nbsp;$post;

$current_post_type =&nbsp;get_post_type_object(get_post_type($post-&gt;ID));

 &nbsp; $current_post_type_slug =&nbsp;$current_post_type-&gt;rewrite['slug'];

 &nbsp; $menu_slug =&nbsp;strtolower(trim($item-&gt;url));

 &nbsp; if (strpos($menu_slug,$current_post_type_slug) !==&nbsp;false) {

 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $classes[] =&nbsp;'active';

 &nbsp;&nbsp;}

 &nbsp; return&nbsp;$classes;

}</code></pre>&nbsp;<ul><li>Trong đó: – &nbsp;add_action: là một action hook trong WP dùng để móc cái callback của mình vào cái action hook cần cho nó móc vào. Đồng thời, chúng ta cũng có thể quản lý việc active menu thông qua post_type hoặc slug(ID). Có nghĩa là khi truy cập vào cái post_type hoặc slug(ID) thì menu gốc vẫn luôn active. 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. &nbsp;</li></ul>&nbsp; &nbsp;

WordPress là một trong những nền tảng mà bạn có thể làm hầu hết mọi thứ. Tất cả những gì bạn cần làm là dành vài phút trong bảng quản trị và bạn có thể làm cho trang web của mình trông giống như cách bạn muốn. Điều tương tự cũng xảy ra với các menu tùy chỉnh . Việc tạo và quản lý chúng thực sự dễ dàng và bất kỳ ai cũng có thể làm được.

ACTIVE MENU PHÂN CẤP TRONG WP

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

Kiểm thử

Trang bị các kiến thức về linux, devops và các dịch vụ đám mây.

Bài viết

Categories

Liên hệ