## SOLID là gì ?

SOLID là từ viết tắt dùng để chỉ 5 nguyên tắc thiết kế giúp cho code của ae dev dễ tái sử dụng hơn, dễ maintain hơn, dễ mở rộng hơn. Những nguyên tắc này bao gồm:

- Single-responsibility principle
- Open-Closed principle
- Liskov substitution principle
- Interface segregation principle
- Dependency inversion principle

Tôi sẽ lấy ReactJs làm ví dụ, nhưng các bạn ko cần phải lo lắng về tính áp dụng, vì bản chất cốt lõi của 5 nguyên tắc trên, nếu bạn hiểu, thì đều có thể áp dụng ở tất cả những ngôn ngữ lập trình khác.

## Single-responsibility Principle
> “A module should be responsible to one, and only one, actor.” — Wikipedia.

Nguyên tắc này chỉ ra răng một component chỉ nên được sử dụng cho một mục đích hoặc một trách nhiệm rõ ràng. Nghĩa là, component đó chỉ nên tập trung vào một chức năng hoặc 1 hành động cụ thể, tránh thực hiện những công việc không liên quan.

Việc tuân theo SRP giúp cho những component chúng ta phát triển ra, sẽ trở nên tập trung hơn, dễ hiểu và dễ dàng sửa đổi hơn. Hãy cũng xem ví dụ bên dưới.

```javascript
// ❌ Bad Practice: Product component chứa nhiều nhiệm vụ như sau:
// - Render danh sách product
// - Render UI cho từng product

const Products = () => {
    return (
        <div className="products">
            {products.map((product) => (
                <div key={product?.id} className="product">
                    <h3>{product?.name}</h3>
                    <p>${product?.price}</p>
                </div>
            ))}
        </div>
    );
};
```

Ở ví dụ trên, `Products` component vi phạt nguyên tắc SRP vì nó đang nhận nhiều nhiệm vụ. Lẽ ra nó chỉ nên quản lý việc render danh sách product, tuy nhiên, nó lại render UI cho từng product cụ thể. Điều này có thể làm component trở lên khó hiểu hơn trong tương lai

__Thay vào đó, ta có thể áp dụng SRP như sau__
```javascript
// ✅ Good Practice: Tách nhỏ nhiệm vụ của Products component ra thành nhiều phần khác nhau

import Product from './Product';
import products from '../../data/products.json';

const Products = () => {
    return (
        <div className="products">
            {products.map((product) => (
                <Product key={product?.id} product={product} />
            ))}
        </div>
    );
};

// Product.js
// Tách ra 1 component riêng chịu trách nhiệm render UI của từng product
const Product = ({ product }) => {
    return (
        <div className="product">
            <h3>{product?.name}</h3>
            <p>${product?.price}</p>
        </div>
    );
};
```
Việc tách nhỏ này đảm bảo mỗi component có một nhiệm vụ duy nhất, làm chúng trở nên dễ hiểu, test và dễ maintain hơn.

## Open-Closed principle

> “software entities (classes, modules, functions, etc.) should be open for extension, but closed for modification.” — Wikipedia.

Nguyên tắc này nhấn mạnh rằng component nên __open__ cho việc mở rộng (VD: có thể bổ sung thêm chức năng hoặc những hành động khác) những __close__ với những hành động chỉnh sửa (nghĩa là, đoạn code hiện tại ko nên bị thay đổi). OCP khuyển khích việc tạo ra những đoạn code linh hoạt, dễ maintain. Giờ hãy cùng xem cách triển khai thực tế nhé.

```javascript
// ❌ Bad Practice: Vi phạm nguyên tắc Open-Closed Principle

// Button.js
// Button component hiện tại như sau
const Button = ({ text, onClick }) => {
  return (
    <button onClick={onClick}>
      {text}
    </button>
  );
}

// Button.js
// Button component bị chỉnh sửa bằng cách bổ sung trực tiếp thuộc tính icon
const Button = ({ text, onClick, icon }) => {
  return (
    <button onClick={onClick}>
      <i className={icon} />
      <span>{text}</span>
    </button>
  );
}

// Home.js
const Home = () => {
  const handleClick= () => {};

  return (
    <div>
      {/* ❌ Tránh việc chỉnh sửa trực tiếp bên trong component như sau */}
      <Button text="Submit" onClick={handleClick} icon="fas fa-arrow-right" /> 
    </div>
  );
}
```

Ở ví dụ trên, chúng ta chỉnh sửa component `Button` hiện tại bằng cách thêm mới 1 thuộc tính là `icon`. Việc thay đổi một thành phân hiện có để đáp ứng các yêu cầu mới là vi phạm nguyên tắc OCP. 

>Những thay đổi này có khả năng sẽ gây ra những rủi ro ngoài ý muốn, nếu component đó __đã và đang được sử dụng__ ở những nơi khác nhau trong source code.

__Thay vào đó, hãy làm như sau__

```javascript
// ✅ Good Practice: Open-Closed Principle

// Button.js
// Existing Button functional component
const Button = ({ text, onClick }) => {
  return (
    <button onClick={onClick}>
      {text}
    </button>
  );
}

// IconButton.js
// IconButton component
// ✅ Good: You have not modified anything here.
const IconButton = ({ text, icon, onClick }) => {
  return (
    <button onClick={onClick}>
      <i className={icon} />
      <span>{text}</span>
    </button>
  );
}

const Home = () => {
  const handleClick = () => {
    // Handle button click event
  }

  return (
    <div>
      <Button text="Submit" onClick={handleClick} />
      {/* 
      <IconButton text="Submit" icon="fas fa-heart" onClick={handleClick} />
    </div>
  );
}
```

Ở ví dụ trên, ta tạo ra một component mới  gọi là `IconButton`. Component này chỉ làm một nhiệm vụ, đó là render button cùng với 1 icon, nó sẽ ko làm ảnh hưởng tới component `Button` đang được sử dụng. Cách này tuân thủ OCP bằng cách mở rộng chức năng thông qua việc tạo ra một đổi tượng mới thay vì chỉnh sửa đổi tượng hiện có.

> Lưu ý, ví dụ về cách sử dụng OCP ở trên sẽ chỉ đúng với trường hợp `Button` component đã được sử dụng ở nhiều nơi trong source code. Nếu component đang trong quá trình phát triển thì việc áp dụng OCP ko cần thiết.

## Liskov substitution principle

> “Subtype objects should be substitutable for supertype objects” — Wikipedia.

Nguyên tắc Liskov nhấn mạnh về việc chỉnh sửa hay tùy chỉnh một đối tượng hay một component. Nếu chỉ nói về React component, thì LSP  nói tới ý tưởng về việc tạo ra những custom component và những component có thể dễ dàng thay thế cho những component gốc mà không ảnh hưởng tới tính đúng đắn hoặc hành vi của ứng dụng. Ví dụ

```javascript
// ⚠️ Bad Practice
// This approach violates the Liskov Substitution Principle as it modifies 
// the behavior of the derived component, potentially resulting in unforeseen 
// problems when substituting it for the base Select component.
const BadCustomSelect = ({ value, iconClassName, handleChange }) => {
  return (
    <div>
      <i className={iconClassName}></i>
      <select value={value} onChange={handleChange}>
        <options value={1}>One</options>
        <options value={2}>Two</options>
        <options value={3}>Three</options>
      </select>
    </div>
  );
};

const LiskovSubstitutionPrinciple = () => {
  const [value, setValue] = useState(1);

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return (
    <div>
      {/** ❌ Avoid this */}
      {/** Below Custom Select doesn't have the characteristics of base `select` element */}
      <BadCustomSelect value={value} handleChange={handleChange} />
    </div>
  );
```

Ví dụ trên, ta có 1 component là `BadCustomSelect` - là một component thay thế cho select input trong React. Tuy nhiên, nó vi phạm LSP vì nó hạn chế hành vi của `select` element. VD: nếu ta truyền thêm thuộc tính `disabled` hoặc `readOnly` thì sẽ ko có hiện tượng gì xảy ra cả

__Thay vào đó, làm như sau__

```javascript
// ✅ Good Practice
// This component follows the Liskov Substitution Principle and allows the use of select's characteristics.

const CustomSelect = ({ value, iconClassName, handleChange, ...props }) => {
  return (
    <div>
      <i className={iconClassName}></i>
      <select value={value} onChange={handleChange} {...props}>
        <options value={1}>One</options>
        <options value={2}>Two</options>
        <options value={3}>Three</options>
      </select>
    </div>
  );
};

const LiskovSubstitutionPrinciple = () => {
  const [value, setValue] = useState(1);

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return (
    <div>
      {/* ✅ This CustomSelect component follows the Liskov Substitution Principle */}
      <CustomSelect
        value={value}
        handleChange={handleChange}
        defaultValue={1}
      />
    </div>
  );
};
```
Đoạn code trên, ta tạo ra component `CustomSelect` hướng tới việc mở rộng chức năng của `select` element. Component này nhận vào những props khác như `disabled`, `readOnly`, ... . Bằng cách đó, `CustomSelect` đã tuân thủ LSP

## Interface segregation principle

> “No code should be forced to depend on methods it does not use.” — Wikipedia.

Nguyên tắc ISP đề xuất rằng ta chỉ nên cung cấp cho component những thông tin cần thiết, nằm trong yêu cầu về chức năng và tránh cung cấp những thông tin dư thừa. Ví dụ

```javascript
// ❌ Avoid: Cung cấp cho `ProductThumbnailURL ` toàn bộ product data
const ProductThumbnailURL = ({ product }) => {
  return (
    <div>
      <img src={product.imageURL} alt={product.name} />
    </div>
  );
};

// ❌ Bad Practice
const Products = ({ product }) => {
  return (
    <div>
      <ProductThumbnailURL product={product} />
      <h4>{product?.name}</h4>
      <p>{product?.description}</p>
      <p>{product?.price}</p>
    </div>
  );
};

const Products = () => {
  return (
    <div>
      {products.map((product) => (
        <Product key={product.id} product={product} />
      ))}
    </div>
  );
}
```

Ở ví dụ trên, ta truyền toàn bộ thông tin của thông tin product cho `ProductThumbnailURL` component, mặc dù nó chỉ yêu cầu 2 thông tin duy nhất là `imageURL` và `name`. 

__Thay vào đó, làm như sau__

```javascript
// ✅ Good: chỉ nhận những thông tin cần thiết, bỏ những thông tin dư thừa
const ProductThumbnailURL = ({ imageURL, alt }) => {
  return (
    <div>
      <img src={imageURL} alt={alt} />
    </div>
  );
};

// ✅ Good Practice
const Products = ({ product }) => {
  return (
    <div>
      <ProductThumbnailURL imageURL={product.imageURL} alt={product.name} />
      <h4>{product?.name}</h4>
      <p>{product?.description}</p>
      <p>{product?.price}</p>
    </div>
  );
};

const Products = () => {
  return (
    <div>
      {products.map((product) => (
        <Product key={product.id} product={product} />
      ))}
    </div>
  );
};
```

Trong đoạn code sửa đổi trên, `ProductThumbnailURL` component chỉ nhận vào những thông tin cần thiết. Nó ngăn chặn được những rủi ro không cần thiết và tuân thủ nguyên tắc ISP.


## Dependency inversion principle

> “No component or function should care about how a particular thing is done” — Mohammad Faisal.

Về mặt lập trình hướng đối tượng, ý tưởng chính đằng sau nguyên tắc này là luôn luôn sử dụng abstraction thay vì implement cụ thể.

Vẫn khó hiểu đúng ko 😂, vậy thì ae đi vào ví dụ cho dễ hình dung

```javascript
import React from "react";

const REMOTE_URL = 'https://jsonplaceholder.typicode.com/users'

export const Users = () => {
  
    const [users , setUsers] = useState([])

    useEffect(() => {
      
      fetch(URL)
        .then(response => response.json())
        .then(json => setUsers(json))
        
    },[])

    return <>
        <div> Users List</div>
        {filteredUsers.map(user => <div>{user.name}</div>)}
    </>
}
```

Đoạn code trên, tôi gọi một api enpoint lấy về 1 vài thông tin và render ra dữ liệu. Tuy nhiên, mục đích chính của `Users` component là render dữ liệu. Nó không nên quan tâm về việc dữ liệu được lấy về ra sao hoặc lấy về từ đâu.

Vấn đề chính là ở đây, component này cần phải biết quá nhiều thứ.

Giả sử bạn có 10 component khác nhau và tất cả những component này đều có đoạn code lấy về dữ liệu của chúng. Giờ, Team lead của bạn yêu cầu sử dụng `axios` thay vì `fetch`. Xong! bạn sẽ phải vào từng file và refacctor lại toàn bộ logic code liên quan đến `fetch`

__Thay vì vậy, sử dụng như sau__

Tách đoạn xử lý fetch dữ liệu ra một hook api khác gọi là `useFetch`

```javascript
// ./useFetch.ts
import {useState} from "react";

export const useFetch = (URL) => {

    const [data , setData] = useState([])

    useEffect(() => {
      
        fetch(URL)
            .then(response => response.json())
            .then(json => setData(json))
            
    },[])

    return data;
}
```

Tại `Users` component, ta chỉ cần import hook api đó vào và sử dụng

```javascript

// ./Users.tsx 

import React from "react";
import useFetch from './useFetch'

const REMOTE_URL = 'https://jsonplaceholder.typicode.com/users'

export const Users = () => {
  
    const users = useFetch(REMOTE_URL)

    return <>
        <div> Users List</div>
        {filteredUsers.map(user => <div>{user.name}</div>)}
    </>
}
```

Giờ thì, `Users` component chỉ cần quan tâm đến mỗi việc render dữ liệu và gọi `useFetch` . Nó không cần quan tâm đến những logic về việc dữ liệu trả về thì làm sao, hay thư viện nào đang được sử dụng nữa.


# Kết

Đến đây, có thể các bạn cũng đã nắm được cách áp dụng của 5 nguyên tắc SOLID trong Reactjs. Hi vọng bài viết này sẽ giúp các bạn viết code tốt hơn.

Link tham khảo: 
- https://hackernoon.com/mastering-solid-principles-like-the-back-of-your-hand-in-just-8-minutes
- https://betterprogramming.pub/apply-the-dependency-inversion-principle-in-react-c20a0afc3d64



Áp dụng nguyên tắc SOLID trong ReactJS

Danh sách keymap bên dưới do tôi sưu tầm từ một số nguồn trên mạng, nên nếu có phần nào chưa chính xác thì các bạn bỏ qua nhé, sẽ cập nhật lại sau.

# Lưu ý

Bạn có thể sử dụng danh sách keymap bên dưới mà không cần cài bất kì plugin nào. Do đó, bạn cũng có thể tạo ra những keymap cá nhân sử dụng chính những keymap mà tôi cung cấp bên dưới.

Để học cách sử dụng keymap, các bạn có thể xem qua bài viết này nhé : https://www.komaster.dev/post/cai-dat-neovim-tren-windows-keymap

## Link tham khảo khác

![Vim cheetsheet](/image/posts/5kbS7aG3JbU1eFRQ9Ri5/nvim-cheetsheet.png)

https://devhints.io/vim

## Di chuyển

|||
|-|-|
| h| Move cursor left |
| j| Move cursor down |
| k| Move cursor up |
| l| Move cursor right |
| 0| Move cursor to beginning of line |
| ^| Move cursor to first non-whitespace character of line |
| $| Move cursor to end of line |
| gg| Move cursor to beginning of the file |
| G| Move cursor to end of the file |
| 5G| Move cursor to line number 5 |

## Quản lý file

|||
|-|-|
|:e filename|Open file for editing |
|:w|Save current buffer to disk |
|:w filename|Save current buffer to filename |
|:q|Close the current window |
|:wq|Save and close the current window |
|:q!|Close the current window without saving |
|:wa|Save all open buffers to disk |

## Các câu lệnh chỉnh sửa file 
|||
|-|-|
| i| Enter Insert mode before the cursor |
| a| Enter Insert mode after the cursor |
| I| Enter Insert mode at beginning of the line |
| A| Enter Insert mode at the end of the line |
| o| Insert a new line below the current line and enter Insert mode |
| O| Insert a new line above the current line and enter Insert mode |

## Các câu lệnh chỉnh sửa file (tiếp)

|||
|-|-|
| dd| Delete the current line |
| D| Delete from the cursor to the end of the line |
| C| Change from the cursor to the end of the line and enter Insert mode |
| u| Undo the last change |
| cw| Change from cursor to end of word and enter Insert mode |
| cb| Change from cursor to beginning of word and enter Insert mode |

## Các câu lệnh ở chế độ Visual

|||
|-|-|
| v| Enter Visual mode and select text character by character |
| V| Enter Visual mode and select text line by line |
| y| Yank (copy) the selected line |
| d| Delete the selected text |
| c| Change the selected text and enter Insert mode |

## Tìm kiếm và thay thế kí tự

|||
|-|-|
| / | Search forward for a pattern |
| ?| Search backward for a pattern |
| n| Repeat the last search in the same direction |
| N| Repeat the last search in the opposite direction |
| :%s/pattern/replacement/g| Replace all occurrences of 'pattern' with 'replacement' in the entire file |

## Macros

|||
|-|-|
| qa| Start recording a macro in register 'a' |
| q| Stop recording a macro |
| @a| Execute the macro stored in register 'a' |
| "| Access a specific register |
| "ay| Yank into register 'a' |

## Splits and Tabs

|||
|-|-|
| :sp| Split the window horizontally |
| :vsp| Split the window vertically |
| :tabe| Create a new tab |
| :tabc| Close the current tab |
| :tabn| Go to the next tab |
| :tabp| Go to the previous tab |

# Kết 

Nếu các bạn có bất kì keymap nào muốn bổ sung, thì báo tôi nhé. Hi vọng danh sách trên sẽ giúp ích cho các bạn.


Neovim: Tổng hợp cheetsheet

Trong bài viết này, tôi sẽ chia sẻ cho các bạn các cài đặt keymap (phím tắt) mà hiện tại tôi đang sử dụng, cũng như giải thích tại sao tôi lại cài đặt như vậy. 

Tất nhiên là các bạn có thể cài đặt theo ý thích, vì như tôi đã nói trên, đây hoàn toàn là những cài đặt của cá nhân tôi.

# Demo 📺

<iframe width="560" height="315" src="https://www.youtube.com/embed/jwIFfLBTye4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

# Giải thích cú pháp keymap  ❔

![Cú pháp Keymap](/image/posts/7keK4Zjll7QvAAFUNKjz/keymap-cover.jpg)

Để dễ dàng cho việc làm quen với việc cài đặt keymap, tôi sẽ không giải thích chi tiết toàn bộ cú pháp của keymap. 

Như các bạn thấy ở hình trên, keymap bao gồm 3 tham số (thực tế là 4), các tham số này lần lượt đại diện cho:

|Tham số|Ví dụ| Giải thích |
|-|-|-|
|#1|__n__|Tương ứng với mode trong neovim. VD: <br/>  __n__ - normal mode<br/> __v__ - visual mode|
|#2|__`<C-a>`__|Phím tắt mà ta muốn sử dụng, nghĩa là, khi ấn phím Ctrl + A thì neovim sẽ thực hiện các lệnh mà ta cài đặt trong tham số #3|
|#3|__`gg<S-v>G`__|Lệnh được thực hiện, sau khi ta ấn phím tắt được quy định ở tham số #2|

Như vậy, 2 cài đặt trong ảnh ở trên có thể được hiểu như sau:

```lua
local keymap = vim.keymap

-- Nếu đang ở Normal mode
-- mà ta ấn phím Ctrl + A
-- thì thực hiện câu lệnh `gg<S-v>G
keymap.set('n', '<C-a>', 'gg<S-v>G')

-- Nếu đang ở Normal mode
-- mà ta ấn phím Ctrl +S
-- thì thực hiện câu lệnh :w<cr>
keymap.set('n', '<C-s>', ':w<cr>')
```

# Normal mode, visual mode là gì ? 🙄

|Kí hiệu| Ý nghĩa | Giải thích |
|-|-|-|
|n|Normal mode|Là chế độ mà ta chỉ được view file|
|i|Insert mode | Là chế độ khi ta bắt đầu nhập liệu bằng cách ấn phím __i__ hoặc __a__, ...|
|v|Visual mode|Là chế độ khi tachonj 1 hàng, hoặc 1 nhóm nội dung bằng các ấn phím __v__ hoặc __Shift + v__|

# Toàn bộ bài đặt của tôi

Các bạn mở file `/lua/map.lua` ra và đặt toàn bộ cài đặt bên dưới vào nhé. Tôi sẽ giải thích chi tiết một số cài đặt ở mục tiếp theo.

```lua
-- /lua/map.lua

local keymap = vim.keymap

keymap.set('n', '<C-a>', 'gg<S-v>G')
-- Toggle NeoTree sidebar
keymap.set('n', '<leader>e', ':NvimTreeToggle<cr>')

-- Moving around windows using s + h,j,k,l
keymap.set('n', 'sh', '<C-w>h')
keymap.set('n', 'sj', '<C-w>j')
keymap.set('n', 'sk', '<C-w>k')
keymap.set('n', 'sl', '<C-w>l')

-- Split windows
keymap.set('n', 'ss', ':split<cr><C-w>w')
keymap.set('n', 'sv', ':vsplit<cr><C-w>w')

-- Next/Prev tab page
keymap.set('n', '<leader>n', ':BufferLineCycleNext<CR>')
keymap.set('n', '<leader>b', ':BufferLineCyclePrev<CR>')

-- Close all tabs
keymap.set('n', '<leader>ta', [[:tabedit<cr>:BufferLineCloseLeft<cr>:BufferLineCloseRight<cr>]])
-- Keep current tab and close the others
keymap.set('n', '<leader>to', [[:BufferLineCloseLeft<cr>:BufferLineCloseRight<cr>]])

-- Save file
keymap.set('n', '<C-s>', ':w<cr>')
-- do somthing else

-- Move lines and group lines left, right
keymap.set('v', '>', '>gv')
keymap.set('v', '<', '<gv')

-- Move lines and group lines up, down
keymap.set('n', 'K', ':m .-2<cr>')
keymap.set('n', 'J', ':m .+1<cr>')

keymap.set('v', 'K', ":m '<-2<CR>gv=gv")
keymap.set('v', 'J', ":m '>+1<CR>gv=gv")

-- Find file in NvimTree
keymap.set('n', '@', ':NvimTreeFindFile<cr>')

-- Duplicate line
keymap.set('n', '<C-d>', 'yyp')
```

## `<C-a>` chọn toàn bộ nội dung file (Ctrl + A)

```lua
keymap.set('n', '<C-a>', 'gg<S-v>G')
```
Nếu bạn đang ở chế độ __Normal__ và ấn tổ hợp phím __Ctrl + a__ thì neovim sẽ thực hiện câu lệnh `gg<S-v>G`.

Câu lệnh này là 1 tổ hợp gồm 3 lệnh là:
- __gg__: di chuyển con trỏ chuột lên trên cùng 1 file
- __`<S-v>`__ : bật chế độ visual và chọn toàn bộ hàng hiện tại
- __G__: di chuyển con trỏ chuột xuống cuối cùng của file hiện tại

Bạn có thể thử chạy từng câu lệnh 1 để kiểm tra kết quả nhé.

> Việc cài đặt keymap có thể hiểu 1 cách đơn giản là: cài đặt 1 tổ hợp phím để thực hiện nhiều câu lệnh cùng 1 lúc.

## `<leader-e>` tắt/mở Sidebar
```lua
keymap.set('n', '<leader>e', ':NvimTreeToggle<cr>')
```
Cài đặt này thì đơn giản hơn. khi bạn ấn `<leader>e` thì neovim sẽ thực hiện lệnh `:NvimTreeToggle` và `<cr>` (tương ứng với phím __Enter__).

Lưu ý, câu lệnh `:NvimTreeToggle` chỉ tồn tại khi bạn cài đặt `nvim-tree` plugin thôi nhé.

## Chia cửa sổ theo chiều dọc/ngang
```lua
-- Split windows
keymap.set('n', 'ss', ':split<cr><C-w>w')
keymap.set('n', 'sv', ':vsplit<cr><C-w>w')
```
Theo cài đặt trên, nếu:
- bạn nhấn __`ss`__ cửa sổ sẽ chia ra làm đôi, 1 cái trên, 1 cái dưới
- bạn nhấn __`sv`__ cửa sổ sẽ chia ra làm đôi, 1 cái trái, 1 cái phải

Để đóng cửa sổ, đơn giản là gõ lệnh `:q`.

## Di chuyển qua lại giữa các cửa sổ

```lua
-- Moving around windows using s + h,j,k,l
keymap.set('n', 'sh', '<C-w>h')
keymap.set('n', 'sj', '<C-w>j')
keymap.set('n', 'sk', '<C-w>k')
keymap.set('n', 'sl', '<C-w>l')
```
Cài đặt này thường được sử dụng để di chuyển qua lại giữa nhiều cửa sổ khác nhau. Đặc biệt khi bạn sử dụng cài đặt "Chia cửa sổ ngang/dọc" ở trên.

Neovim cung cấp tổ hợp phím để di chuyển giữa các cửa sổ như bên dưới, nó khá dài nên bạn chỉ cần cài đặt keymap ngắn hơn để sử dụng

- __`<C-w>h`__ : di chuyển tới cửa sổ bên trái
- __`<C-w>j`__ : di chuyển tới cửa sổ ở trên
- __`<C-w>k`__ : di chuyển tới cửa sổ ở dưới
- __`<C-w>l`__ : di chuyển tới cửa sổ bên phải

# Vậy, tìm những câu lệnh của Neovim ở đâu ?

Bạn có thể tìm thấy những câu lệnh cần thiết [ở trang chủ neovim](https://neovim.io/doc/user/). Nhưng mà, nội dung họ viết rất dài và lan man. Nên tốt nhất là bạn nên xem link tôi tổng hợp 1 số commands ở đây: https://www.komaster.dev/post/neovim-tong-hop-cheetsheet.

# Kết

Như vậy, ta đã cài đặt được một số keymap cho neovim. Hi vọng các bạn hiểu được cách sử dụng keymap để tối ưu cách làm việc với Neovim. Hẹn các bạn ở bài viết tiếp theo


Cài đặt Neovim trên Windows: keymap

# Telescope, Nvim-tree và Bufferline là gì ❓

Để có được một IDE hoàn chỉnh, đủ dùng, thì 1 vài tính năng cần thiết cần phải có là: hỗ trợ tab, hỗ trợ menu sidebar, hỗ trợ tìm kiếm file.

- [telescope.nvim](https://github.com/nvim-telescope/telescope.nvim): hỗ trợ việc tìm kiếm file theo tên, tìm kiếm nội dung bên trong file, ...
- [nvim-tree.lua](https://github.com/nvim-tree/nvim-tree.lua): hỗ trợ hiển thị cấu trúc thư mục, tạo mới file, folder
- [bufferline.nvim](https://github.com/akinsho/bufferline.nvim): hỗ trợ hiển thị file theo dạng tab

> Để bắt đầu cài đặt, bên nên đảm bảo là đã làm theo hướng dẫn của tôi ở [bài viết trước](https://www.komaster.dev/post/cai-dat-neovim-tren-windows-lazynvim-theme-tree-sitter-lualine)

# Nhắc lại chút về cách cài đặt plugin

Có thể các bạn vẫn chưa quen về cách cài đặt plugin trong Neovim. Nên tôi sẽ liệt kê thứ tự cần thực hiện có bổ sung thêm plugin hoặc thay đổi options. 

|Bước|Lệnh|Mô tả|
|-|-|-|
|1|:w|Lưu lại thay đổi|
|2|:q|Thoát neovim|
|3|$ nvim|Khởi động lại nvim|

Các bạn có thể kết hợp lệnh cùng 1 lúc nhé. VD: thay vì viết `:w` và `:q` lần lượt, thì các bạn có thể viết `:wq`.

# Bắt đầu cài đặt thôi 🚀

## Cài đặt `telescope.nvim`
![Cài đặt telescope](https://camo.githubusercontent.com/3d59e34d1f406890adf620546d3d97017ce0aacda034b1788c66fa872f192134/68747470733a2f2f692e696d6775722e636f6d2f5454546a6136742e676966)

Như đã nói ở trên, plugin này hỗ trợ việc tìm kiếm file theo tên hoặc nội dung bên trong file. Nên tôi sẽ lựa chọn nó làm plugin đầu tiên để cài đặt.

Để tăng tốc độ tìm kiếm của __Telescope__ ta cần phải cài đặt 1 cái tool bên ngoài nữa thông qua `scoop`. Với `scoop` thì bạn không cần chạy trong chế độ Admin đâu nhé 🌝

```shell
$ scoop install ripgrep
```

Tiếp theo, mở `/lua/plugins.lua` ra và thêm đoạn code sau

```lua
-- /lua/plugins.lua

require("lazy").setup({
	-- ......
	{
		'nvim-telescope/telescope.nvim',
		branch = '0.1.x',
		dependencies = {
            -- đây là plugin bổ sung thêm để hỗ trợ chức năng của telescope
			'nvim-lua/plenary.nvim'
		}
	},
})
```

Giờ các bạn khởi động lại Neovim và đợi lazy.nvim cài đặt xong là có thể sử dụng được.

## Sử dụng `telescope.nvim`

Để sử dụng các bạn mở Neovim và gõ lệnh

```shell
:Telescope find_files
```
Các bạn có thể xem danh sách câu lệnh bằng cách, gõ __:Telescope__, ấn phím `<Space>` và sau đó ấn `<Tab>`. Kết quả sẽ hiển thị giống như hình bên dưới

![Telescope](/image/posts/8dREes7pXPWDQwxTqvdS/telescope-find-files.jpg)

## Cài đặt keymap (phím tắt) cho `telescope`

Sử dụng qua một chút chắc các bạn thấy oải đúng không 😆. Kiểu cứ mỗi lần lại phải gõ lệnh, tìm tìm, mệt.

Thế nên giờ tôi sẽ hướng dẫn các bạn cài đặt phím tắt, đảm bảo sẽ nhanh gọn hơn nhiều.

Tạo mới file `/plugin/telescope.lua` nhé. Nó sẽ tự load sau file `init.lua`, cái này tôi nhắc lại thôi.

```lua
-- /plugin/telescope.lua

local status, telescope = pcall(require, 'telescope')
if not status then return end

-- load cái thư viện builtin của telescope ra
-- trong này có 1 tá các function cho chúng ta lựa chọn
local builtin = require('telescope.builtin')

-- gõ `;f` ở chế độ Normal để hiển thị danh sách file
vim.keymap.set('n', ';f', builtin.find_files, {})

-- tương tự, gõ `;r` để tìm kiếm nội dung trong file
vim.keymap.set('n', ';r', builtin.live_grep, {})

-- cứ như thế nhé, các bạn có thể thay đổi kí tự tùy thích
vim.keymap.set('n', ';fb', builtin.buffers, {})
vim.keymap.set('n', ';gbr', builtin.git_branches)
vim.keymap.set('n', ';gst', builtin.git_status)
vim.keymap.set('n', ';gcm', builtin.git_commits)
vim.keymap.set('n', ';xx', builtin.diagnostics)
```
Các sử dụng cơ bản như sau, tôi lấy ví dụ khi bạn ấn `;f`

- ngay khi mở lên, bạn có thể nhập tên file để tìm kiếm luôn
- ấn __Enter__ để chọn file, 
- ấn __Esc__ để thoát chế độ nhập
- ấn __i__ để quay trở lại chế độ nhập liệu
- hoặc ấn __Esc__ lần nữa để thoát hẳn Telescope

![Cách sử dụng cơ bản](/image/posts/8dREes7pXPWDQwxTqvdS/short-video-2-1.gif)

## Cài đặt `nvim-tree.lua`

![Cài đặt nvim-tree](/image/posts/8dREes7pXPWDQwxTqvdS/nvim-tree.jpg)

Plugin tiếp theo, ta sẽ cài đặt trong bài viết này là `nvim-tree`. Tiếp tục mở file `/lua/plugins.lua` và thêm vào đoạn code sau

```lua
-- /lua/plugins.lua

require("lazy").setup({
    -- .....
	{
		'nvim-tree/nvim-tree.lua',
		dependencies = {
            -- plugin này hỗ trợ nvim-tree hiển thị icon 
            -- tương ứng với từng loại file
			"nvim-tree/nvim-web-devicons"
		}
	},
})
```

Tiếp theo, ta lại tạo thêm 1 file `plugin/nvim-tree.lua` để gọi nó hoạt động. 

```lua
-- /plugin/nvim-tree.lua

local status, nvimtree = pcall(require, 'nvim-tree')
if not status then return end

local function on_attach(bufnr)
  -- chúng ta sẽ cài đặt keymap cho nvim-tree ở mục bên dưới 
end

nvimtree.setup({
	on_attach = on_attach,
})
```

Khởi động lại Neovim để cài đặt `nvim-tree`, sau đó ta sẽ bắt đầu cài đặt keymap để tiện sử dụng hơn.

## Cài đặt keymap cho `nvim-tree.lua`

Các bạn bổ sung tiếp đoạn code bên dưới vào file `/plugin/nvim-tree.lua` nhé.

```lua
-- /plugin/nvim-tree.lua
-- ....

local function on_attach(bufnr)
  local api = require('nvim-tree.api')

  local function opts(desc)
    return { desc = 'nvim-tree: ' .. desc, buffer = bufnr, noremap = true, silent = true, nowait = true }
  end

 
  -- Ấn `Ctrl + ]` để thay đổi thư mục root
  vim.keymap.set('n', '<C-]>', api.tree.change_root_to_node,          opts('CD'))

  -- Ấn `Enter` để edit 
  vim.keymap.set('n', '<CR>',  api.node.open.edit,                    opts('Open'))
  vim.keymap.set('n', '<Tab>', api.node.open.preview,                 opts('Open Preview'))

  -- Ấn `a` để tạo file
  vim.keymap.set('n', 'a',     api.fs.create,                         opts('Create'))
	-- Copy file or folder
  vim.keymap.set('n', 'c',     api.fs.copy.node,                      opts('Copy'))
	-- Delete file or folders
  vim.keymap.set('n', 'd',     api.fs.remove,                         opts('Delete'))
  vim.keymap.set('n', 'e',     api.fs.rename_basename,                opts('Rename: Basename'))
  vim.keymap.set('n', 'p',     api.fs.paste,                          opts('Paste'))
  vim.keymap.set('n', 'r',     api.fs.rename,                         opts('Rename'))
  vim.keymap.set('n', 'R',     api.tree.reload,                       opts('Refresh'))

  vim.keymap.set('n', 'W',     api.tree.collapse_all,                 opts('Collapse'))
  vim.keymap.set('n', 'A', api.tree.expand_all, opts('Expand All'))

  vim.keymap.set('n', 'x',     api.fs.cut,                            opts('Cut'))
  vim.keymap.set('n', 'y',     api.fs.copy.filename,                  opts('Copy Name'))
  vim.keymap.set('n', 'Y',     api.fs.copy.relative_path,             opts('Copy Relative Path'))

end
```

Có một số kí tự đặc biệt ở trong đoạn code trên như sau:
- `<C-]>` : tổ hợp phím này nghĩa là __Ctrl + ]__
- `<CR>` : tương ứng  với phím __Enter__


Gõ lệnh `:h key-notation` để xem danh sách kí tự dành cho các phím đặc biệt.

![Kí tự đại diện](/image/posts/8dREes7pXPWDQwxTqvdS/key-notation.jpg)

## Cài đặt keymap để bật/tắt `nvim-tree`

Nốt cài đặt này thôi là ta có thể sử dụng rồi nhé. Các bạn mở file `/lua/map.lua` và đặt đoạn code sau vào.

```lua
-- /lua/map.lua

local keymap = vim.keymap

-- Ấn <Space> + e để bật/tắt `nvim-tree` trong chế độ Normal
keymap.set('n', '<leader>e', ':NvimTreeToggle<cr>')

```

Giờ thì đóng neovim và mở lại để trải nghiệm nhé 😍



## Cài đặt `bufferline.nvim`

![Cài đặt bufferline](https://user-images.githubusercontent.com/22454918/111992693-9c6a9b00-8b0d-11eb-8c39-19db58583061.gif)

Plugin cuối cùng của bài viết này, các bạn bổ sung thêm đoạn code sau nhé

```lua
-- /lua/plugins.lua
require("lazy").setup({
    -- ....
	{
		'akinsho/bufferline.nvim',
		version = "*",
		dependencies = 'nvim-tree/nvim-web-devicons'
	},
})
```

Tiếp theo, như mọi khi, tạo file `/plugin/bufferline.lua` để bắt nó hoạt động

```lua
-- /plugin/bufferline.lua

local status, bufferline = pcall(require, 'bufferline')
if not status then return end

-- Tab pages
bufferline.setup {
	options = {
		offsets = {
			{
                -- đoạn cài đặt này cho phép Tab 
                -- tự động thụt vào khi Nvim-tree được mở ra
				filetype = "NvimTree",
				text = "File Explorer",
				text_align = "center",
				separator = true
			}
		},
		buffer_close_icon = "×"
	}
}
```

Các bạn lặp lại việc tắt/bật neovim để plugin được cài đặt là ok rồi nhé. Giờ ta có thể thử dùng Telescope để mở các file khác nhau, các bạn sẽ thấy tab được hiển thị.

# Khó khăn khi sử dụng `nvim-tree` và `bufferline`

Do hướng dẫn này cũng khá dài nên tôi chưa hướng dẫn các bạn một số cài đặt keymap dành cho 2 plugin trên. 

Với `nevim-tree` nếu các bạn đang muốn __di chuyển con trỏ sang file__ thì bạn có thể sử dụng phím `Ctrl + W + k` hoặc `Ctrl + W + ArrowRight`

Với `bufferline` nếu bạn muốn chọn tab khác, thì có thể click chuột vào file đó. Tuy nhiên, đây ko phải là cách sử dụng neovim đúng đắn. 

Bạn có thể sử dụng `;f` của `telescope` để chọn file hoặc cài đặt keymap theo những câu lệnh mà `bufferline` cung cấp như ảnh dưới.

![Bufferline commands](/image/posts/8dREes7pXPWDQwxTqvdS/bufferline-command.jpg)

# Kết

Như vậy, trong bài viết này chúng ta đã cài đặt thêm được 1 số plugins chính. Ở bài viết tiếp theo, tôi sẽ hướng dẫn các bạn cài đặt `keymap` để giúp quá trình làm việc với Neovim mượt mà hơn. 

Hi vọng hướng dẫn này dễ giúp các bạn hiểu thêm về cách cài đặt plugin và keymap trong Neovim. Hẹn gặp lại các bạn ở bài viết tiếp theo. 


Cài đặt Neovim trên Windows: telescope, nvim-tree, bufferline

# TL,DR
Sau thời gian sử dụng Neovim được 8 tháng, chủ yếu trong công việc hằng ngày, tôi thấy rằng năng suất làm việc của cá nhân tôi đã tăng lên đáng kể. Cho nên lần này tôi muốn làm 1 bài viết để hướng dẫn các bạn cách cài đặt Neovim

Tuy nhiên, hướng dẫn này chỉ dừng lại ở việc hướng dẫn cài đặt. Còn về việc sử dụng thì tôi sẽ chuyển tới 1 bài viết khác. Vì cách sử dụng của Neovim hoàn toàn khác biệt và khó để làm quen

# Chuẩn bị môi trường
Những công cụ mà tôi sử dụng trong hướng dẫn này như sau
- [Window Terminal](https://apps.microsoft.com/store/detail/windows-terminal/9N0DX20HK701)
- [Powershell 7](https://apps.microsoft.com/store/detail/powershell/9MZ1SNWT0N5D)
- Oh-my-posh (optional)
- [Git](https://git-scm.com/downloads)
- [Nodejs](https://nodejs.org/en/download) - tôi sử dụng npm và yarn để cài đặt 1 số tool
- [Scoop](https://scoop.sh/) - một công cụ quản lý app tển Windows
- [Choco](https://chocolatey.org/install) - tương tự như scoop, tôi sử dụng để cài đặt `llvm`

> Nếu bạn __chưa cài đặt__  những công cụ trên, có thể xem hướng dẫn này của tôi [https://www.youtube.com/watch?v=sx1SeW-QFdk](https://www.youtube.com/watch?v=sx1SeW-QFdk). Nhớ là, bỏ qua bước cài đặt Neovim trong video nhé.

# Cài đặt Neovim

Trước hết, ta cần cài đặt Neovim đã. Mở terminal lên và gõ đoạn command sau
```shell
$ winget install Neovim.Neovim
```
Sau khi đoạn command này chạy xong thì các bạn đã cài đặt Neovim thành công. 

![Cài đặt neovim](/image/posts/wpiYMHbljwIPI82EmJC4/install-neovim.jpg)

# Kiểm tra đường dẫn cài đặt

Tắt Terminal đi và khởi động lại. Tại cửa sổ terminal, gõ lệnh bên dưới và ấn `Enter`

```shell
$ nvim
```
Cửa sổ neovim hiện ra như bên dưới chứng tỏ bạn đã cài đặt thành công
![Cửa sổ Neovim](/image/posts/wpiYMHbljwIPI82EmJC4/start-neovim-ok.jpg)

Việc tiếp theo, khá quan trọng, bạn cần phải kiểm tra đường dẫn tới thư mục cài đặt của Neovim đang ở đâu. Bằng cách gõ câu lệnh dưới đây ngay trong cửa sổ Neovim.

```lua
:echo stdpath('config')
```
Kết quả in ra có thể như hình dưới. Đường dẫn này được sử dụng để đặt thư file config của chúng ta, nên các bạn hãy note đường dẫn này

![In ra đường dẫn tới thư mục config của Neovim](/image/posts/wpiYMHbljwIPI82EmJC4/echo-result.jpg)

Giờ thì hãy thoát ra bằng cách gõ lệnh `:q` hoặc `:q!` để ta có thể bắt đầu bước cài đặt

> Lưu ý, lần đầu tiên thư mục `C:\Users\<user>\AppData\nvim` sẽ không tồn tại. Do đó, các bạn cần mở trực tiếp đường dẫn cha, và tạo mới 1 thư mục tên là `nvim`

# Cấu trúc thư mục

Để bắt đầu quá trình cài đặt được suôn sẻ, tôi sẽ giải thích cho các bạn về cấu trúc thư mục cài đặt của Neovim trước

```shell
📂 .\nvim
├── 📄 init.lua    -- file init này sẽ được load đầu tiên khi bạn mở Neovim lên
├── 📂 lua
│  ├── 📄 base.lua
│  ├── 📄 map.lua
│  ├── 📄 plugins.lua
│  └── 📄 theme.lua
└── 📂 plugin
   ├── 📄 <file-name>.lua
```

Như bạn có thể thấy, cấu trúc thư mục mà tôi tạo ra cũng khá đơn giản. Về cơ bản, __file `init.lua` sẽ được load tự động__ khi bạn mở Neovim lên. 

Bên trong file `init.lua` tôi sẽ load toàn bộ các file trong thư mục `/lua/*.lua` lên. Còn những file bên trong thư mục `/plugin/*.lua` thì sẽ được Neovim tự động load ngay sau `init.lua` 

Mục đích của việc tách ra 2 thư mục `/lua` và `/plugin` là 

- `📂/lua` - được dùng để chứa những cài đặt như keymap, options và danh sách plugin cho dễ quản lý
- `📂/plugin`  -  còn thư mục này thì được sử dụng để viết những đoạn code cài đặt cho từng plugin

# Bắt đầu cài đặt

Rồi, giờ thì các bạn hãy sử dụng IDE hiện tại của mình (nếu bạn chưa quen các thao tác trong Neovim) hoặc dùng chuột để tạo cấu trúc file như trên nhé.

Sau đó, tạo mới file `/nvim/init.lua` và cài đặt như sau.

```lua
-- init.lua

require('base')   -- load file `/lua/base.lua`
require('plugins')   -- load file `/lua/plugins.lua`
require('map')   -- load file `/lua/map.lua`
```

## Cài đặt `/lua/base.lua`

Cài đặt đầu tiên, ta sẽ cùng setup 1 số option cơ bản của Neovim. Các bạn mở file `/lua/base.lua` và paste vào cài đặt bên dưới.

```lua
-- Trong neovim, kí tự \ mặc định được gọi là <leader>
-- tuy nhiên, vì nó quá xa để nhấn, nên ae dev hay đổi kí tự này
-- sang kí tự <space> để gần hơn
vim.g.mapleader = ' '
vim.g.maplocalleader = ' '

-- Thay đổi encoding mặc định của file thành utf-8
vim.scriptencoding = 'utf-8'
vim.opt.encoding = 'utf-8'
vim.opt.fileencoding = 'utf-8'

-- Hiển thị số dòng trong file
vim.opt.nu = true
vim.opt.rnu = true

-- Cài đặt thụt dòng mặc định là 2
vim.opt.shiftwidth = 2
vim.opt.tabstop = 2

-- Thụt dòng tự động khi ấn enter
vim.opt.ai = true
vim.opt.si = true

-- Tự động xuống dòng nếu kí tự trên dòng đó quá dài
vim.opt.wrap = true

vim.opt.cursorline = true
vim.opt.termguicolors = true

-- Giảm thời gian thực thi lệnh xuống 250ms
-- mặc định là 500ms
vim.opt.timeoutlen = 250
vim.opt.timeout = true
vim.opt.updatetime = 250

-- Khi tìm kiếm, không phân biệt chữ hoa, chữ thường
-- Ex: name NaME namE
vim.o.ignorecase = true
vim.o.smartcase = true
```

Bên trên là 1 số cài đặt mà tôi hay sử dụng, các bạn có thể sử dụng lại toàn bộ, hoặc một phần tùy vào ý thích

Để kiểm tra xem mỗi cài đặt này là gì, các bạn có thể save lại file và mở lại neovim sẽ thấy sự thay đổi. Hoặc các bạn có thể dùng lệnh `:w` để lưu file và sau đó gõ lệnh `:so` để Neovim cập nhật thay đổi trong cài đặt.

## Cài đặt `lazy.nvim` 😴

Lazy.nvim - là một công cụ quản lý plugins cho Neovim. Để cài đặt nó, bạn cần đảm bảo __Git__ được cài đặt.

Giờ thì hãy mở file `/lua/plugins.lua` và paste đoạn code sau vào.

```lua
-- /lua/plugins.lua

-- Lưu lại đường dẫn tới file lazy.nvim
local lazypath = vim.fn.stdpath("data") .. "/lazy/lazy.nvim"

-- Nếu đường dẫn trên ko tồn tại, thì dùng Git clone nó về
if not vim.loop.fs_stat(lazypath) then
  vim.fn.system({
    "git",
    "clone",
    "--filter=blob:none",
    "https://github.com/folke/lazy.nvim.git",
    "--branch=stable", -- latest stable release
    lazypath,
  })
end

vim.opt.rtp:prepend(lazypath)
```

## Cài đặt `Tokyonight` theme🎨

![Tokyonigh theme](https://user-images.githubusercontent.com/292349/115295095-3a9e5080-a10e-11eb-9aed-6054488c46ce.png)

Để có tí cảm hứng làm việc, ta sẽ cài đặt `Tokyonight` theme trước, cho có chút cảm hứng làm việc 😁.

Các bạn mở file `/lua/theme.lua` và đặt đoạn cài đặt sau vào.

```lua
-- /lua/theme.lua

-- Lua cho phép bạn return mà 
-- không cần đặt bên trong 1 function hay class nào cả
return {
	"folke/tokyonight.nvim",
	lazy = false,
	priority = 1000,
	config = function()
        -- sử dụng lệnh `colorscheme` để load theme theo tên
        -- nếu bạn muốn load theme khác thì truy cập vào repo gốc nhé
        -- repo gốc: https://github.com/folke/tokyonight.nvim#-usage
		vim.cmd([[colorscheme tokyonight-storm]])
	end,
}
```

Bước tiếp theo, các bạn quay trở lại file `/lua/plugins.lua` và load `/lua/theme.lua` để sử dụng

```lua
-- /lua/plugins.lua

-- ....

vim.opt.rtp:prepend(lazypath)

local theme = require('theme')

require("lazy").setup({
	theme,
})
```

Lưu lại file, tắt Neovim và mở lại, nó sẽ tự động tải theme về và cài đặt. Nếu thành công, kết quả sẽ như ảnh dưới. Gõ lệnh `:q` để tắt màn hình cài đặt.

![Cài đặt Tokyonight theme](/image/posts/wpiYMHbljwIPI82EmJC4/lazy-nvim-install-tokyonight.jpg)

## Cài đặt nvim-treesitter

Plugin tiếp theo, cũng là 1 trong những plugin cần thiết nhất mà ta cần cài đặt. Đó là `nvim-treesitter`, nó là một công cụ để phân tích cú pháp của file, hỗ trợ tốt hơn cho việc hiển thị màu sắc của cú pháp, ...

Với các bạn sử dụng Windows, ta cần phải cài đặt C compiler trước. Vì `Treesitter` sử dụng sử dụng C để thực hiện quá trình phân tích của nó. 

Mở Terminal __trong chế độ Admin__ và cài đặt C compiler như sau

```shell
$ choco install llvm
```

Sau khi cài đặt thành công, bạn có thể tiến hành bước tiếp theo là cài đặt `Treesitter`. Tạo mới file `/plugin/tree-sitter.lua` và cài đặt như sau

```lua
-- /plugin/tree-sitter.lua

-- load treesitter, lưu lại trạng thái vào biến `status`
local status, treesitter = pcall(require, 'nvim-treesitter.configs')

-- nếu `status` trả về false, ngừng, ko làm gì hết
if not status then return end

treesitter.setup {
    -- cài đặt 1 số định dạng file hay sử dụng
    -- bạn có thể tìm danh sách file ở đây
    -- repo: https://github.com/nvim-treesitter/nvim-treesitter#supported-languages
	ensure_installed = {'lua', 'rust', 'tsx', 'typescript', 'vim', 'prisma'},

    -- các cài đặt bên dưới thì cứ để mặc định thôi là được
	highlight = {enable = true},
	indent = {enable = true},
	auto_install = false
}

```

Tiếp theo, mở file `/lua/plugins.lua` và cài đặt như sau

```lua
-- /lua/plugins.lua

--...

vim.opt.rtp:prepend(lazypath)
local theme = require('theme')

require("lazy").setup({
  theme,
  {
    'nvim-treesitter/nvim-treesitter',
    build = ':TSUpdate',
  },
})
```

Giờ các bạn lưu lại toàn bộ file, đóng neovim. Sau đó, mở lại neovim. Nó sẽ tự động cài đặt Treesitter và những ngôn ngữ ta đã liệt kê ở trong file `plugin/tree-sitter.lua`

![Cài đặt Treesitter](/image/posts/wpiYMHbljwIPI82EmJC4/tree-sitter.jpg)

> Chú ý, khi mở lại neovim, tốt nhất các bạn chỉ sử dụng lệnh `nvim` để mở. Và __không mở thêm bất kì file nào khác__ vì có thể sẽ gặp phải lỗi khi Treesitter đang cài đặt ngôn ngữ.

## Cài đặt lualine

![Cài đặt Lualine](/image/posts/wpiYMHbljwIPI82EmJC4/lualine-demo.png)

Lualine - được sử dụng để hiển thị 1 số thông tin cần thiết như: chế độ chỉnh sửa hiện tại của Neovim là gì?, tên git branch, tên file, encoding của file, loại ngôn ngữ của file, ....

Cách cài đặt cũng khá đơn giản, các bạn tiếp tục mở file `/lua/plugins.lua` và bổ sung

```lua
-- /lua/plugins.lua
-- ...

local theme = require('theme')

require("lazy").setup({
      -- ....
  	-- Status line
	{
		'nvim-lualine/lualine.nvim',
		opts = {
			options = {
				icons_enabled = false,
				theme = 'tokyonight',
				component_separators = '|',
				section_separators = '',
			}
		}
	},
})
```

Ok rồi nhé, giờ các bạn chỉ khởi động lại Neovim để nó tự động cài đặt là được. 

# Kết

Đến hiện tại, tôi đã hướng dẫn các bạn các cài đặt Neovim và cài đặt 1 số plugins ban đầu. Ở hướng dẫn tiếp theo, tôi sẽ tiếp tục hướng dẫn các bạn cài đặt Sidebar và Tab.

Hi vọng hướng dẫn này giúp bạn hiểu được cách cài đặt neovim và plugins của nó. Hẹn gặp lại các bạn ở bài viết tiếp theo


Cài đặt Neovim trên Windows: lazy.nvim, theme, tree-sitter, lualine

Clone lại 1 phiên bản cực đơn giản của VSCode sử dụng Tauri và Reactjs

Hi friends! I'm hudy.
A web developer from Hanoi, Vietnam

In this post, I'm gonna show you how to build a Notebook app - desktop application - using Tauri and ReactJS. 

For those who don't know Tauri, it is a toolkit that helps developers make applications for the major desktop platforms - using virtually any frontend framework in existence

A tutorial video:

{% embed https://www.youtube.com/embed/2E5edr4_LXw %}

The source code for this tutorial is available here: [https://github.com/hudy9x/tauri-notebook](https://github.com/hudy9x/tauri-notebook.git)

## Prerequisite

1. [Tauri](https://tauri.app/v1/guides/getting-started/prerequisites) - a toolkit to build desktop app
2. [Nodejs](https://nodejs.org/en/)
3. npm or yarn - package manager

## Table of contents

1. Install Tauri
2. Scaffolding code structure using `create-tauri-app`
3. Using Tiptap library in `<MainEditor/>` and create `<Menubar/>`
4. Time to style
5. Change app's icon
6. Build app

## #1. Install Tauri
The first step is to intall Rust and it's dependencies. Visit Tauri's home page to get it done

- For window users: check this [link](https://tauri.app/v1/guides/getting-
started/prerequisites#setting-up-windows)
- For macOs users: check this [link](https://tauri.app/v1/guides/getting-started/prerequisites#setting-up-macos)
- For Linux users: check this [link](https://tauri.app/v1/guides/getting-started/prerequisites#setting-up-linux)


## #2. Scaffolding code structure using `create-tauri-app`

Make sure that you've installed `npm` already. Then, run the following command to generate code structure

```shell
$ npm create tauri-app
```
Follow the instructions. Just remember to select `react-ts` as main framework

![Select framework](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/63t4kwsu4vdphoyf4roh.png)

Now, time to install `tiptap` and `remixicon`
```shell
$ npm install @tiptap/react @tiptap/starter-kit remixicon
```
Next, create a `components` folder with 2 files inside it as `Editor.tsx` and `Menubar.tsx`. And add a simple component definition to them

![Create Editor and Menubar](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mt7dsgrs5aqwt2zd7rgv.png)

## #3. Using Tiptap library in `<MainEditor/>` and create `<Menubar/>`

Open `src/components/MainEditor.tsx` and add the following code:

```javascript
// src/components/MainEditor.tsx
import { EditorContent, useEditor } from "@tiptap/react";
import StarterKit from "@tiptap/starter-kit";
import Menubar from "./Menubar";

export default function MainEditor() {
  const editor = useEditor({
    extensions: [StarterKit],
    content: `<h2>Hello world</h2>`
  })
  return <>
    {editor ? <Menubar editor={editor} /> : null}
    <EditorContent editor={editor} />
  </>
}
```
Next, open `src/components/Menubar.tsx`
```javascript
// src/components/Menubar.tsx
import {Editor} from '@tiptap/react'

interface IMenubarProp {
  editor: Editor
}

export default function Menubar({editor}: IMenubarProp) {
  const getFocus = () => editor.chain().focus()
  const isActive = (type: string, options?: any) => {
    return editor.isActive(type, options ?? {}) ? 'is-active' : ''
  }

  const menus = [
    [
      {icon: 'bold', onClick: () => getFocus().toggleBold().run(), isActive: isActive('bold')},
      {icon: 'italic', onClick: () => getFocus().toggleItalic().run(), isActive: isActive('italic')},
      {icon: 'strikethrough', onClick: () => getFocus().toggleStrike().run(), isActive: isActive('strike')},
      {icon: 'code-line', onClick: () => getFocus().toggleCode().run(), isActive: isActive('code')},
    ],
    // ...
  ]
    
  return <div className="menu">
    {menus.map(group => {
      return <div className="group-item">
        {group.map(item => {
          return  <button className="menu-item" onClick={item.onClick}>
        <i className={`ri-${item.icon} ${item.isActive}`}></i>
      </button>

        })}
      </div>
          })}
  </div>
}
```

After that, just import `<MainEditor/>` to `App.tsx`
```javascript
// src/App.tsx
import MainEditor from "./components/MainEditor";
import './App.css'
export default function App() {
  return <MainEditor />
}
``` 

Run app to check the result

```shell
$ npm run tauri dev
```

![Run first time](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d8bubaylb79bo31r96uk.png)

## #4. Time to style

Alright, everything work well so far. But we still have no style for the app.

Let's add style to `src/App.css` file

```css
.menu {
  display: flex;
  gap: 0.5rem;
  padding: 0 1rem;
  position: fixed;
  z-index: 10;
}

.group-item {
  display: flex;
  gap: 0.5rem;
}

.menu-item {
  padding: 0.5rem 0.75rem
}

.menu-item .is-active {
  color: #55db55;
}

// Editor css

.ProseMirror {
  padding: 1rem;
  outline: none;
  padding-top: 2.5rem;
}

.ProseMirror >
 * + * {
	 margin-top: 0.75em;
}
 .ProseMirror ul, .ProseMirror ol {
	 padding: 0 1rem;
}
 .ProseMirror h1, .ProseMirror h2, .ProseMirror h3, .ProseMirror h4, .ProseMirror h5, .ProseMirror h6 {
	 line-height: 1.1;
}
 .ProseMirror code {
	 background-color: rgba(97, 97, 97, 0.1);
	 color: #616161;
}
 .ProseMirror pre {
	 background: #0d0d0d;
	 color: #fff;
	 font-family: 'JetBrainsMono', monospace;
	 padding: 0.75rem 1rem;
	 border-radius: 0.5rem;
}
 .ProseMirror pre code {
	 color: inherit;
	 padding: 0;
	 background: none;
	 font-size: 0.8rem;
}
 .ProseMirror img {
	 max-width: 100%;
	 height: auto;
}
 .ProseMirror blockquote {
	 padding-left: 1rem;
	 border-left: 2px solid rgba(13, 13, 13, 0.1);
}
 .ProseMirror hr {
	 border: none;
	 border-top: 2px solid rgba(13, 13, 13, 0.1);
	 margin: 2rem 0;
}

// Scrollbar css
::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}

::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

::-webkit-scrollbar-corner {
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  border: 4px solid rgba(0, 0, 0, 0);
  background-clip: padding-box;
  border-radius: 8px;
  background-color: rgb(182, 182, 182);
}

::-webkit-scrollbar-track {
  border: 4px solid transparent;
  background-clip: padding-box;
  border-radius: 8px;
  background-color: transparent;
}
```

Looks good hah ? 😁

![After add style](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zwnec2prvikrcz0cec4e.png)

## #5. Change app's icon (optional)
By default, Tauri has a default icon. If you want to change it to another using my tool [here](https://github.com/hudy9x/tauri-icon-converter)

Prepare an icon in .PNG format that has size of 1024px x 1024px. And it's name must be 1024x1024. Now clone the tool and install packages

```shell
$ git clone https://github.com/hudy9x/tauri-icon-converter
$ cd tauri-icon-converter && npm install
```
And then, copy the icon to `/tauri-icon-converter` folder and run the below command

```shell
$ node .
```

After genereting process finished, you guys can see a list of icon in `/tauri-icon-converter/outputs`

![List of icon](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xko1dvwj0s0t4g8whxll.png)

Just replace all of them, but `.keep` file to `/src-tauri/icons` folder

You could also verify by running `npm run tauri dev`. If the icon showed as below then everything work well

![App icon after replacing](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x91qjmn26oq11w5f07dz.png)

## #6. Build app 
Time to package our app to .msi file. Open terminal and run the following

```shell
$ npm run tauri build
```
If you guys got an error like below

![Error when building app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/suo249h0twwygeu32eip.png)

That's because your `indentifier` not unique. Just open `src-tauri/tauri.conf.json` and change value to a new one. I changed mine to `com.notebook.dev`

![Update indentifier value](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uwx8x5jkyvoda5mszz55.png)

Ok, run the command `npm run tauri dev` again. And see the result

![Build success](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c1e5x281ymbhzfn4vlt9.png)

After building process finished you can see the output path like above

## Conclusion

So far, you've learnt how to build a desktop application using Tauri and Reactjs. 

You can also improve this app by providing some personal feature like auto update, sign-in, theme, ...etc

Thank you for reading!

Building a notebook using Tauri and ReactJS

🎞 Timestamp
=========

- 00:00 Let's start
- 00:16 Get dummy API endpoint
- 01:25 Scaffolding ReactJS using Vite
- 03:26 Start coding
- 07:21 Create usePaginate hook
- 13:11 Show data on table
- 18:33 Time to style 
- 19:34 Done

📂 Resources
=============
- 👉🏻 Link style: https://github.com/hudy9x/courses/blob/main/code-no-talk/code-pagination/src/Home.css
- 👉🏻 Source code: https://github.com/hudy9x/courses/tree/main/code-no-talk/code-pagination


📖 Contact me:
=========
- 👉🏻 Facebook: https://www.facebook.com/hudy9x/
- 👉🏻 Group: https://www.facebook.com/groups/komaster.dev
- 👉🏻 Blog: https://www.komaster.dev/

CODENOTALK - Coding pagination with react-router-dom

Nếu các bạn chưa xem bài viết trước thì dưới đây là link nhé:
- [JS First Step: Phân tích chức năng](https://www.komaster.dev/post/js-first-step-phan-tich-chuc-nang)
- JS First Step: Làm việc với DOM
- [JS First Step: Tạo sự kiện cho DOM](https://www.komaster.dev/post/js-first-step-tao-su-kien-cho-html-dom)

Ở bài viết này, tôi sẽ làm rõ hơn về mối liên hệ giữa HTML và Javascript. Thêm vào đó là cách sử dụng Javascript để làm việc với DOM (hay có thể hiểu nó là các thẻ HTML)

# DOM là gì? và Javascript có thể làm gì với DOM

DOM là viết tắt của __Document Object Model__, hiểu đơn gián thì nó là 1 cây đối tượng 

![Cây đối tượng DOM](https://www.w3schools.com/js/pic_htmltree.gif)

Mỗi Element được thể hiện ở hình trên được gọi là 1 __DOM Node__. Thông qua cây đổi tượng này Javascript có khả năng thực hiện các xử lý sau:

- thay đổi tất cả các thẻ HTML
- thay đổi toàn bộ HTML attribute 
- thay đổi toàn bộ giá trị CSS
- có thể xóa bỏ các thẻ HTML và thuộc tính của nó
- tạo mới thẻ HTML và thuộc tính của nó
- tác động tới tất cả sự kiện của tất cả các thẻ HTML
- tạo mới sự kiện cho thẻ HTML

Chúng ta sẽ tìm hiểu lần lượt các khả năng trên sau

# Sử dụng Javascript để làm việc với DOM

Tiếp theo, để làm việc với DOM thông thường chúng ta cần làm quen với các công việc sau
- Tìm kiếm DOM
- Thay đổi nội dung của DOM
- Thay đổi style
- Thêm, xóa thẻ DOM
- Thêm hiệu ứng cho thẻ DOM

## 1/ Tìm kiếm DOM

Có kha khá cách sử dụng javascript để thao tác với DOM, các bạn có thể tham khảo [tại đây](https://www.w3schools.com/js/js_htmldom_elements.asp)

Tuy nhiên, cách tìm kiếm dễ dàng nhất là sử dụng __querySelector__. Có 2 cách để sử dụng api này như sau:
- __`querySelector(".example")`__: tìm kiếm chỉ 1 DOM có class là .example
- __`querySelectorAll(".example")`__: tìm kiếm tất cả DOM có class là .example

Xem xét ví dụ sau để rõ hơn về cách sử dụng ([tham khảo thêm](https://www.w3schools.com/jsref/met_document_queryselector.asp))
```javascript
// document.querySelector(<css selector>)
// chỉ trả về 1 DOM
document.querySelector('.title')
document.querySelector('#content p')
document.querySelector('div')
document.querySelector('p')

// document.querySelectorAll(<css selector>)
// trả về toàn bộ DOM phù hợp với <css selector>
document.querySelectorAll('.content')

```

## 2/ Thay đổi style 

Để thay đổi style sử dung Javascript ta có thể sử dụng thuộc tính `style`
```javascript
const div = document.querySelector('div')

div.style.color = 'red'
div.style.background = 'blue'

const allPTags = document.querySelectorAll('p')
// do querySelectorAll trả về 1 mảng 
// nên cần phải loop trước khi sử dụng
allPTags.forEach(p => {
  p.style.color = 'red'
  p.style.background = 'blue'
})


```
Lưu ý rằng, để sử dụng được thuộc tính style, trước hết bạn cần phải tìm được DOM. 

Danh sách các thuộc tính khác của style có thể được tham khảo [ tại đây](https://www.w3schools.com/jsref/dom_obj_style.asp)

## 3/ Thay đổi nội dung của DOM

Tiếp theo, ngoài việc thay đổi style của DOM, bạn có thể thay đổi cả nội dung của DOM. Xem ví dụ sau

```javascript
// Giả sử ta có thẻ HTML sau
// <p>Nội dung cần thay đổi</p>

const p = document.querySelector('p')

p.innerHTML = 'Nội dung mới'
// kết quả là: <p>Nội dung mới</p>

```

## 4/ Thêm, xóa thẻ DOM

Cần phân biệt việc thêm mới DOM và thay đổi nội dung DOM
- Thay đổi nội dung DOM là XÓA toàn bộ nội dung hiện tại và thay bằng nội dung mới sử dụng __`.innerHTML`__
- Thêm mới DOM là bổ sung vào nội dung hiện tại 1 hoặc nhiều DOM mới sử dụng __`.createElement`__ và __`.appendChild`__

Nếu các bạn đã đọc bài viết trước của tôi thì sẽ không lạ lẫm gì với ứng dụng Todo. Ứng dụng cho phép user thêm mới 1 todo vào 1 danh sách có sẵn. Việc __thêm mới__ này được thực hiện sử dụng javascript như sau

```javascript
// tìm thẻ <ul>
const list = document.querySelector('ul')

// tạo ra 1 thẻ mới là <li>
const li = document.createElement('li')

// do nó chưa có nội dung nào, 
// nên ta có thể cập nhật nội dung mới cho nó
item.innerHTML = 'Item 1'

// giờ thì sử dụng .appendChild để chèn thẻ <li> vào cuối <ul>
list.appendChild(li)
```

Giở nếu muốn xóa 1 thẻ đang tồn tại thì sao ? Đơn giản, chỉ việc gọi hàm `.remove()`

```javascript
const list = document.querySelector('ul')
list.remove()
```

Tham khảo thêm tài liệu về [append](https://www.w3schools.com/jsref/met_node_appendchild.asp) và tài liệu về [remove](https://www.w3schools.com/jsref/met_element_remove.asp)

# Mối quan hệ giữa các DOM Node

Lưu ý, mối quan hệ giữa DOM Node với nhau khác hoàn toàn với mối liên hệ giữa HTML và Javascript

![Mối quan hệ của DOM Node](/image/posts/KumyDM08tBHROmBCM71d/Event-Navigation-2.png)

Cùng xem xét hình minh họa trên, mỗi __Node__ đều có __mối quan hệ gia đình dòng họ__ với nhau 😆

- __`<html>`__ - là node gốc và nó không có node cha nào cả
- __`<html>`__ - là node cha của __`<head>`__ và __`<body>`__
- __`<h1>`__ và __`<p>`__ - là node anh em của nhau

## Các thuộc tính nào thể hiện mối quan hệ này trong Javascript

Mối quan hệ trên cũng được thể hiện trong Javacsript qua các thuộc tính:

- __`parentNode`__
- __`children[nodenumber]`__
- __`firstElementChild`__
- __`lastElementChild`__
- __`nextElementSibling`__
- __`previousElementSibling`__

Những thuộc tính này hữu ích trong 1 số TH cụ thể. 

## Áp dụng vào ví dụ thực tiễn


Ví dụ ta có chức năng sau: khi user đổi trạng thái checkbox, dòng text mô tả sẽ bị gạch ngang thể hiện rằng todo này đã được hoàn thành

![Danh sách Todo](/image/posts/KumyDM08tBHROmBCM71d/Event-Example-3.png)

Sử dụng các thuộc tính quan hệ trên ta có thể thực hiện chức năng này như sau

```javascript
// VD: Mỗi todo sẽ có cấu trúc HTML như sau
// 	<div>
//		<input />
//		<p></p>
//	</div>

const input = document.querySelector('input')
input.addEventListener('change', function(){
	const input = this;
	// tìm node anh em nằm bên cạnh input
	const p = input.nextElementSibling;
	
	p.style.textDecoration = 'line-through'
})

```

# Tạm kết

Trên đây là 1 số các làm việc với DOM tiêu biểu, hi vọng các bạn đã có thể thực hiện các bước thao tác cơ bản. Ở bài viết tiếp theo, tôi sẽ hướng dẫn các bạn cách tạo sự kiện DOM





JS First Step: Làm việc với DOM

Nếu các bạn chưa xem bài viết trước thì dưới đây là link nhé:
- [JS First Step: Phân tích chức năng](https://www.komaster.dev/post/js-first-step-phan-tich-chuc-nang)
- [JS First Step: Làm việc với DOM](https://www.komaster.dev/post/js-first-step-lam-viec-voi-dom)
- JS First Step: Tạo sự kiện cho DOM

# HTML Event là gì ? <i emoj>❔</i>

Một HTML Event, hay nói ngắn gọn là Event, là 1 hành động xảy ra bởi sự tác động của trình duyệt hoặc của user lên các HTML Element. Ví dụ như:
- Trang web được tải xong
- User thay đổi nội dung của thẻ input
- User nhấn vào 1 button

# Khi nào cần sử dụng HTML Event ? <i emoj>🤔</i>

Event có thể được sử dụng để xử lý và kiểm duyệt nội dung được nhập bởi user hoặc những hành động của user hay trình duyệt như:
- Xử lý sau mỗi lần trang web được load _(VD: cấp quyền truy cập)_
- Xử lý cần thực hiện khi trang web bị đóng _(VD: cảnh báo nếu user chưa lưu đữ liệu đang nhập)_
- Xử lý hành động khi user click vào 1 button  _(VD: gửi dữ liệu tới backend)_
- Kiểm tra dữ liệu có được user nhập liệu đúng hay không  _(VD: kiểm tra email có hợp lệ không)_
- Và nhiều TH khác nữa ...



# Tại sao nên sử dụng addEventListener <i emoj>✌️</i>

Thay vì trực tiếp thêm sự kiện như là 1 thuộc tính kiểu `<div onclick="...">` thì chúng ta sẽ sử dụng hàm __addEventListener__. Vì những lợi ích sau:

- giống như __`onclick`__ thì __`addEventListener`__ cũng cho phép đính kèm 1 sự kiện vào 1 đối tượng DOM
- Không ghi đè sự kiện đã được tạo trước đó
- Có thể tạo được nhiều sự kiện
- Có thể tạo được nhiều sự kiện có tên giống nhau. VD: bạn có thể tạo được 4 sự kiện click và mỗi sự kiện đều có xử lý logic khác nhau
- Tách biệt code  javascript ra khỏi html, tránh gặp TH khó đọc hiểu, dễ dàng kiểm soát code hơn 

# Cú pháp và cách sử dụng <i emoj>✒️</i>

```javascript
const element = document.querySelector('div');
element.addEventListener(event, function, useCapture);
```

Tham số đầu tiên là kiểu sự kiện (VD: click, mousedown, ...). 
Tham số thứ 2 lầ function mà chúng ta muốn gọi khi sự kiện xảy ra

Tham số cuối cùng là 1 giá trị boolean (True/False). Nó liên quan đến việc sử dụng __event bubbling__ và __event capturing__. Tham số này là tùy chọn, có thể có hoặc không.

Không mất thời gian nữa, chúng ta sẽ tiếp tục học cách làm việc với DOM Events ngay sau đây

## Tạo sự kiện
```javascript
// tạo nhiều sự kiện giống nhau
element.addEventListener("click", myFunction);
element.addEventListener("click", myFunction2);

// tạo nhiều loại sự kiện khác nhau
element.addEventListener("mousedown", myFunction3);
element.addEventListener("mouseover", myFunction4);
```
## Tạo sự kiện khi input thay đổi giá trị

```javascript
// 1. rõ ràng là phải tìm input trước
const input = document.querySelector('input')

// 2. ràng buộc sự kiện change để có thể biết
// khi nào input thay đổi giá trị
input.addEventListener('change', function(){
  console.log(this.value)
})
```

## Tạo sự kiện khi form được submit
```javascript
const form = document.querySelector('form')

form.addEventListener('submit', myFunction)
```

Để biết thêm thông tin về tên các event có thể sử dụng, các bạn có thể tham khảo tại đây: https://www.w3schools.com/jsref/dom_obj_event.asp

# Hiểu về Event bubbling và Event capturing <i emoj>🤓</i>

Khi sự kiện được xảy ra, có 2 con đường mà sự kiện có thể được __lan truyền__ là bubbling và capturing

![Event-Propagration.png](/image/posts/BydGbG5f0m7BBQ1Tk45r/Event-Propagration.png)

Khái niệm lan truyền sự kiện là 1 cách để định nghĩa thứ tự xảy ra sự kiện trên đối tượng element nào. 

Cùng xem xét đoạn code sau, tôi gán giá trị `true` cho tham số thứ 3. Nghĩa là, sử dụng capturing event
```javascript
const p = document.querySelector("p")
const a = document.querySelector("a")

const fn1 = () => console.log('click p')
const fn2 = () => console.log('click a')

p.addEventListener("click", fn1, true);
a.addEventListener("click", fn2, true);
// Kết quả log sẽ là: 
// click p   => sự kiện click ở p sẽ xảy ra trước
// click a

// đổi giá trị sang false
p.addEventListener("click", fn1, false);
a.addEventListener("click", fn2, false);
// Kết quả log sẽ là: 
// click a   => sự kiện click ở a sẽ xảy ra trước
// click p
```
Hành vi lan truyền sự kiện này có thể gây ra những xử lý không mong muốn. Như ví dụ trên ta có thể thấy, người dùng chỉ mong muốn click vào thẻ `<a>`, tuy nhiên xử lý ở thẻ `<p>` lại được gọi. 

Để ngăn chặn việc này xảy ra, ta có thể sử dụng `stopPropagation()`

```javascript
//...
const fn1 = () => console.log('click p')
const fn2 = (ev) => {
  // ngăn chặn hành vi lan truyền sự kiện
  ev.stopPropagation()
  console.log('click a')
}

p.addEventListener("click", fn1, false);
a.addEventListener("click", fn2, false);
// Kết quả log sẽ là: 
// click a  => sự kiện click vào p ko xảy ra

```

# Tạm kết

Đến đây, có lẽ các bạn đã hiểu rõ cách ràng buộc sự kiện cho 1 đối tượng DOM rồi đúng không ? Bài viết tiếp theo chúng ra sẽ làm quen với việc lấy dữ liệu từ backend sử dụng Javascript

JS First Step: Cách làm việc với Event

Tất cả bài viết trong series ở link dưới đây:
- JS First Step: Phân tích chức năng
- [JS First Step: Làm việc với DOM](https://www.komaster.dev/post/js-first-step-lam-viec-voi-dom)
- [JS First Step: Tạo sự kiện cho DOM](https://www.komaster.dev/post/js-first-step-tao-su-kien-cho-html-dom)

Theo khảo sát của tôi thì có rất nhiều bạn học sinh, sinh viên đã và đang học HTML/CSS/JS. Nhưng đa phần trong số đó gặp khó khăn trong việc áp dụng JS vào những bài tập, dự án thực tế.

![Thực trạng học HTML/CSS/JS](/image/posts/oY57U6JCIUiS6y42C1rO/image-3.jpg)

Do đó, trong bài viết này tôi sẽ cố gắng làm rõ cho các bạn hiểu được cách vận dụng JS bằng cách: 
- Chỉ ra mối liên hệ giữa HTML/CSS/JS 
- Hướng dẫn phân tích chức năng trước khi thực hiện bất kì chức năng nào liên quan đến Javascript

# HTML là gì ? và CSS là cái chi ? <i emoj>❔</i>

HTML là 1 ngôn ngữ được sử dụng để xây dựng lên cấu trúc hay còn gọi là nội dung của website

CSS dùng để trang trí cho nội dung HTML. Nói 1 cách đơn giản hơn thì nó hỗ trợ việc tô điểm màu sắc, kích thước, sắp xếp vị trí,...

![HTML vs CSS](/image/posts/oY57U6JCIUiS6y42C1rO/HTMLVSCSS.png)

# Còn Javascript thì sao ? <i emoj>❔</i>

Javascript là ngôn ngữ lập trình trên môi trường web, nó lập trình hành vi của các đối tượng HTML

Nghe vẫn khó hiểu đúng ko. Vậy hãy cùng xem xét ví dụ dưới đây. Đối tượng HTML được click là 1 checkbox, khi checkbox đổi trạng thái thì nội dung text bên cạnh được gạch ngang

Đây chính là hành vi có thể được lập trình sử dụng Javascript

![Hành vi ở đây là tick vào checkbox](/image/posts/oY57U6JCIUiS6y42C1rO/Video-Mon-Dec-13-2021-15-22-23.gif)

# Mối liên hệ giữa HTML và Javascript <i emoj>⚖️</i>

Những định nghĩa trên sẽ trở lên vô nghĩa nếu các bạn không thể hiểu được HTML có liên hệ thế nào với Javascript

Mối liên hệ giữa HTML và Javascript được thiết lập thông qua các thẻ HTML. VD: `<div>`, `<h2>`, `<p>`, ...

>Bạn không thể hiển thị dữ liệu lên website với javascript mà không sử dụng bất kì thẻ HTML nào

Để hình thành mối liên hệ này thì website cần cung cấp 1 chức năng cụ thể. Cụ thể như những chức năng dưới đây
- Hệ thống bình luận bài viết
- Ứng dụng chat
- Chức năng giỏ hàng
- ...

Tóm lại, mối liên hệ ở đây là chức năng mà người dùng có thể thông qua đó tương tác được với website

# Không biết áp dụng Javascript vào 1 chức năng cụ thể  <i emoj>😕</i>

Nhiều bạn, mặc dù hiểu mối liên hệ trên, thậm chí hiểu yêu cầu chức năng nhưng vẫn không biết áp dụng javascript để tạo ra chức năng đó như thế nào

Dựa vào kinh nghiệm của mình thì tôi nhận ra rằng, __các bạn chưa biết cách phân tích chức năng để tìm ra đối tượng và hành động__

Vậy thế nào là phân tích chức năng ? Chúng ra sẽ lấy 1 ví dụ cụ thể như sau: Tạo chức năng todo cho phép user 

- Tạo todo bằng cách nhập input và ấn button ADD
- Todo được hiển thị theo dạng danh sách sau khi nhấn ADD
- User chuyển trạng thái checkbox thì gạch bỏ todo

# Học cách phân tích chức năng <i emoj>✍🏻</i>

Có 3 bước để phân tích 1 chức năng thực hiện bằng javascript
- Tìm đối tượng mà user cần tương tác
- Xác định đâu là hành động của user
- Ràng buộc sự kiện, xử lý logic cho đối tượng tương ứng với hành động

Giờ ta sẽ đi vào phân tích các chức năng của Todo app ở trên để nắm được rõ hơn về cách phân tích

## 1/ Tạo todo bằng cách nhập input và ấn button ADD

Phân tích theo yêu cầu chức năng ta sẽ được:
- Đối tượng 1: nút add -> do user phải nhấn vào nút add nên ta coi nó là 1 đối tượng
- Đối tượng 2: ô input -> vì user phải nhập nội dung cho todo rồi mới có thể ấn nút add
- Hành động: ấn button ADD

Dựa vào phân tích trên ta có thể triển khai code javascript như sau:
```javascript
// tìm đối tượng sử dụng document.querySelector()
const buttonAdd = document.querySelector('#button-add')
const input = document.querySelector('#input-todo')

// ràng buộc sự kiện cho hành động ấn button ADD
buttonAdd.addEventListener('click', function(){
  // ...
})
```

## 2/ Todo được hiển thị theo dạng danh sách sau khi nhấn ADD

Tiếp tục phân tích yêu cầu số 2 ta được:
- _Todo được hiển thị theo dạng danh sách_: để hiển thị  được thì cần có 1 thẻ HTML. Nên trước hết, cần tìm được thẻ HTML để chứa nội dung đó
- _Sau khi nhấn ADD_: nghĩa là việc hiển thị này được thực hiện sau khi user nhấn nút ADD

Triển khai code ta sẽ được

```javascript
// ràng buộc sự kiện cho hành động ấn button ADD
buttonAdd.addEventListener('click', function(){
  // tìm thẻ HTML để chứa nội dung todo, 
  // vẫn sử dụng document.querySelector
  const list = document.querySelector('#list');

  // tạo ra 1 thẻ HTML <div>
  const newTodo = document.createElement('div');
  // lấy giá trị của ô input
  const value = input.value;

  // gán giá trị của input vào thẻ <div>
  newTodo.textContent = input.value;

  // chèn thẻ <div> vào danh sách
  list.appendChild(newTodo)
})
```

## 3/ User chuyển trạng thái checkbox thì gạch bỏ todo

Giờ các bạn thử phân tích hành động thứ 3 nhé. Tôi sẽ giả định rằng, todo mới được tạo sẽ bao gồm 1 thẻ `<input type="checkbox"/>` 

```javascript
buttonAdd.addEventListener('click', function(){
  // ...

  // tiếp tục tìm thẻ <input type="checkbox"/>
  // tuy nhiên, lần này sẽ sử dụng <div> được tạo ra ở bước trên 
  const checkbox = newTodo.querySelector('.checkbox');
  checkbox.addEventListener('change', function(){
    const checked = this.checked;
    
    // tiếp theo là xử lý thêm gạch chân
    // chắc các bạn đã biết phải xử lý như nào rồi
  })

  list.appendChild(newTodo)
})

```

# Tạm kết
Để hiểu cách vận dụng Javascript vào ứng dụng web thì hiểu được mối liên hệ giữa HTML/CSS/JS và hiểu cách phân tích chức năng là rất quan trọng. 

Bài viết này tôi chỉ tóm tắt 1 số ý chính, bạn vẫn cần phải luyện tập nhiều trong những trường hợp thực tế. Hi vọng với những kiến thức này các bạn có thể hiểu cách vận dụng javascript vào những chức năng thực tế

JS First Step: Phân tích chức năng

Bài viết này gồm 2 phần
- [Next.js: Authentication sử dụng Firebase - part 1
](https://www.komaster.dev/post/nextjs-authentication-su-dung-firebase-part-1)
- [Next.js: Authentication sử dụng Firebase - part 2
](https://www.komaster.dev/post/nextjs-authentication-su-dung-firebase-part-2)

Trước khi đi vào việc thực hiện, có 1 số công cụ tôi sử dụng trong suốt bài viết này mà các bạn cần nắm được như sau:
- __Tailwindcss__: css framework cung cấp các class hỗ trợ việc dựng giao diện nhanh chóng
- __Next.js__: một reactjs framework tuyệt vời ở thời điểm hiện tại
- __Firebase__: sử dụng dịch vụ Firebase Authentication
- __Typescript__: hỗ trợ định nghĩa kiểu dữ liệu
- __yarn__: công cụ quản lý package thay cho npm

# Cài đặt
Việc đầu tiên cần làm là cài đặt Next.js và Tailwindcss. Tôi sẽ sử dụng `create-next-app` để tạo next.js project, bổ sung thêm option `--typescript` 
```shell
$ yarn create next-app nextjs-firebase-authentication --typescript
```
Cài đặt Tailwindcss, các bạn có thể tham khảo cách cài đặt [tại đây](https://tailwindcss.com/docs/guides/nextjs#install-tailwind-via-npm)
```shell
$ yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest
```
Tiếp theo, tạo 2 file config của Tailwindcss `tailwind.config.js` và `postcss.config.js`
```shell
$ yarn tailwindcss init -p
```
Sau khi câu lệnh trên chạy xong, sửa nội dung của file `tailwind.config.js` như dưới đây, mục đích của việc này là cung cấp cài đặt để Tailwindcss loại bỏ những style không được sử dụng khi build production

```javascript
// tailwind.config.js
  module.exports = {
   // purge: [],
   purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
    darkMode: false, // or 'media' or 'class'
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [],
  }

```
Đến đây là hoàn thành 9/10 việc cài đặt rồi, giờ ta cần tích hợp tailwindcss vào source code. Để làm việc này các bạn cần import nó vào `globals.css`

```css
/* ./styles/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

```
Thử xem Nextjs đã được tích hợp tailwindcss chưa 
```typescript
// pages/index.tsx
import type { NextPage } from "next";

const Home: NextPage = () => {
  return (
    <div className="m-6">
      <button
        type="button"
        className="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
      >
        Button text
      </button>
    </div>
  );
};

export default Home;

```
![Cài đặt Tailwindcss thành công](/image/posts/VUFsw66dIzwVlzNDJMDx/img-1.jpg)

# Tạo trang Login
Việc đầu tiên cần làm là tạo 1 trang login. Để tập trung vào xử lý authentication nên chúng ta sẽ đơn giản hóa bước này. Nên tôi sẽ dùng __tailwindcss__ chỉ tạo ra 1 trang login gồm 2 input là email và password

```javascript
// pages/login.tsx
export default function Login() {
  return (
    <>
      <div className="h-screen flex flex-col justify-center items-center py-12 sm:px-6 lg:px-8">
        <div className="sm:mx-auto sm:w-full sm:max-w-md">
          <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">
            Login with your account
          </h2>
          <p className="mt-2 text-center text-sm text-gray-600">
            Or{" "}
            <a
              href="#"
              className="font-medium text-indigo-600 hover:text-indigo-500"
            >
              create a new one
            </a>
          </p>
        </div>

        <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-sm">
          <div className="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">
            <form className="space-y-6" action="#" method="POST">
              <div>
                <label
                  htmlFor="email"
                  className="block text-sm font-medium text-gray-700"
                >
                  Email address
                </label>
                <div className="mt-1">
                  <input
                    id="email"
                    name="email"
                    type="email"
                    autoComplete="email"
                    required
                    className="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
                  />
                </div>
              </div>

              <div>
                <label
                  htmlFor="password"
                  className="block text-sm font-medium text-gray-700"
                >
                  Password
                </label>
                <div className="mt-1">
                  <input
                    id="password"
                    name="password"
                    type="password"
                    autoComplete="current-password"
                    required
                    className="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
                  />
                </div>
              </div>

              <div className="flex items-center justify-between">
                <div className="flex items-center">
                  <input
                    id="remember-me"
                    name="remember-me"
                    type="checkbox"
                    className="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"
                  />
                  <label
                    htmlFor="remember-me"
                    className="ml-2 block text-sm text-gray-900"
                  >
                    Remember me
                  </label>
                </div>

                <div className="text-sm">
                  <a
                    href="#"
                    className="font-medium text-indigo-600 hover:text-indigo-500"
                  >
                    Forgot your password?
                  </a>
                </div>
              </div>

              <div>
                <button
                  type="submit"
                  className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                >
                  Sign in
                </button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </>
  );
}

```
Đổ màu cho background để có độ tương phản nhất định
```css
/* styles/globals.css */

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  @apply bg-gray-50
}
```

![Trang Login](/image/posts/VUFsw66dIzwVlzNDJMDx/img-4.jpg)

# Cài đặt Firebase SDK

Trước khi cài đặt Firebase thì các bạn cần phải tạo Firebase Project và đăng kí app đã. Trang chủ của Firebase cũng hướng dẫn chi tiết cách làm. Truy cập vào [hướng dẫn tạo Firebase Project](https://firebase.google.com/docs/web/setup#create-firebase-project-and-app) và thực hiện __Step 1__

Cần phải đảm bảo sau khi tạo Firebase Project, các bạn phải có được thông tin configuation như dưới đây ( ví dụ thôi nhé, sai đấy 😃)

```javascript
// firebase configuration

const firebaseConfig = {
  apiKey: "AIzaSyCZCS8Kw3I65nVjNSQ09bkZtkvdmeUIxg4",
  authDomain: "next01.firebaseapp.com",
  databaseURL: "https://next01-default-rtdb.asia-southeast1.firebasedatabase.app",
  projectId: "next01",
  storageBucket: "next01.appspot.com",
  messagingSenderId: "205499221374",
  appId: "1:205499221374:web:c04a4fff5dfc2e370e964f",
  measurementId: "G-CTFB3NN1RB"
};
```

Quay trở lại project và cài đặt Firebase SDK thông qua terminal
```shell
$ yarn add firebase
```
Đoạn firebase config ở trên giờ đã đến lúc lên sàn. Các bạn tạo 1 file mới trong project và chép đoạn cài đặt dưới đây vào. Sau đó là nhảy sang bước __Đăng nhập__
```javascript
// ./libs/firebase.ts

import { initializeApp } from "firebase/app";

const firebaseConfig = {
  apiKey: "<YOUR_KEY>",
  authDomain: "<YOUR_KEY>",
  databaseURL: "<YOUR_KEY>",
  projectId: "<YOUR_KEY>",
  storageBucket: "<YOUR_KEY>",
  messagingSenderId: "<YOUR_KEY>",
  appId: "<YOUR_KEY>",
  measurementId: "<YOUR_KEY>"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);

```


# Đăng nhập qua Firebase Authentication

Tạo mới file dành riêng cho xử lý đăng nhập và cũng dễ dàng maintain hơn về sau.
```javascript
// ./services/sign.ts

import "../libs/firebase";
import { getAuth, signInWithEmailAndPassword } from "firebase/auth";

const auth = getAuth();

export const signInWithEmail = (email: string, password: string) => {
  return signInWithEmailAndPassword(auth, email, password)
    .then((userCredential) => {
      console.log(userCredential.user);
    })
    .catch((error) => {
      console.log(error.code);
    });
};

//
```
Cập nhật nội dung của file `login.tsx` như sau

```typescript
// pages/login.tsx

import React, { FormEventHandler, useRef } from "react";
import { signInWithEmail } from "../services/sign";

export default function Login() {
  const emailRef = useRef<HTMLInputElement>(null);
  const passRef = useRef<HTMLInputElement>(null);

  const onSubmit = (ev: React.FormEvent<HTMLFormElement>) => {
    ev.preventDefault();
    if (!emailRef.current || !passRef.current) return;

    const email = emailRef.current.value;
    const password = passRef.current.value;

    signInWithEmail(email, password);
  };

  return (
    <>
....
            <form
              onSubmit={onSubmit}
....
                  <input
                    ref={emailRef}
                    id="email"
....

                  <input
                    ref={passRef}
                    id="password"
....

    </>
  );
}

```

Nếu đoạn code trên gây ra lỗi như bên dưới có nghĩa là việc đăng nhập hoạt động, nhưng do user chưa tồn tại nên không thể đăng nhập được
![Hoạt động nhưng không login đcược](/image/posts/VUFsw66dIzwVlzNDJMDx/img-6.jpg)

Tiếp theo, chúng ta sẽ tạo user để quá trình trên hoạt động. Có 2 cách để tạo user là: 
__sử dụng firebase sdk__ hoặc __tạo trực tiếp trên firebase console__

Tôi sẽ sử dụng cách thứ 2, tạo trực tiếp trên __firebase console__. Các bạn thực hiện theo các bước dưới đây:
- Truy cập vào địa chỉ [https://console.firebase.google.com/](https://console.firebase.google.com/) 
- Chọn Project để chuyển vào màn hình Admin
- Tại section __Build__ > chọn __Authentication__
- Tại tab __Sign-in method__, chọn __Email/Password__ và enable nó lên
   ![Enable email method](/image/posts/VUFsw66dIzwVlzNDJMDx/img-7.jpg)
- Quay trờ lại tab __Users__ và nhấn __Add user__ để tạo tài khoản
  ![img-8.jpg](/image/posts/VUFsw66dIzwVlzNDJMDx/img-8.jpg)

OK. giờ thử login lại nào
![Login thành công](/image/posts/VUFsw66dIzwVlzNDJMDx/Video-Fri-Nov-05-2021-22-33-39.gif)

# Kết luận

Phần 1 của bài viết Authetication sử dụng Firebase đến đây là kết thúc. Tôi sẽ hoàn thành bài viết này ở phần tiếp theo với việc tạo ra Custom token và xác thực nó. 

Hẹn gặp lại các bạn trong phần tiếp theo