Hướng dẫn này trình bày quy trình đơn giản trong việc kết hợp xác thực vào ứng dụng Next.js của bạn bằng thư viện next-auth. Mặc dù thư viện cung cấp nhiều tùy chọn (nhà cung cấp), hướng dẫn này tập trung vào việc triển khai bằng cách sử dụng Nhà cung cấp Google.

Về hướng dẫn này, mọi người cũng sẽ hiểu rõ hơn về việc dễ dàng thiết lập các tuyến được bảo vệ trong ứng dụng của mình, một nhiệm vụ được thư viện next-auth này thực hiện dễ dàng.

Thiết lập thư viện next-auth

Đầu tiên mọi người phải có 1 chiếc project nextjs đã, mọi người có thể tham khảo hướng dẫn trên trang chủ của Nextjs tại đây, hướng dẫn quá chi tiết: https://nextjs.org/docs/getting-started/installation

Cài đặt thư viện next-auth bằng lệnh sau:

npm install next-auth

Sau khi hoàn tất cài đặt, hãy tạo thư mục api trong thư mục ứng dụng gốc và bên trong thư mục đó tạo thư mục /auth. Cuối cùng, tạo thư mục […nextauth] bên trong thư mục auth đó.

Inside the [...nextauth] folder, create two files named route.ts and options.ts.

Cấu trúc thư mục của mọi người cho đến thời điểm này sẽ trông như thế này:

Sau đó, trong tệp options.ts, chèn đoạn mã sau:

import type { NextAuthOptions } from 'next-auth'
import GoogleProvider from "next-auth/providers/google";

export const options: NextAuthOptions = {
    providers: [
  GoogleProvider({
    clientId: process.env.GOOGLE_CLIENT_ID as string,
    clientSecret: process.env.GOOGLE_CLIENT_SECRET as string,
  })
]
}

việc bạn có thể thêm nhiều Provider khác sử dụng mạng xã hội các bạn có thể tham khảo tại đây, có hướng dẫn cụ thể như đoạn code GoogleProvider trên

Biến options là nơi chúng ta nhúng bất kỳ nhà cung cấp nào chúng tôi dự định sử dụng từ next-auth

Để sử dụng đăng nhập bằng Google một cách hiệu quả, mọi người cần có các thuộc tính clientId và clientSecret của mình. Hãy yên tâm, mình sẽ sớm đi sâu vào vấn đề này. Đầu tiên, tạo tệp .env nơi bạn sẽ gán giá trị cho cả hai thuộc tính đã khai báo bên trên.

lưu ý rằng tạo file .env nên đặt nó ở thư mục gốc để tránh các lỗi có thể sảy ra nếu như không config nó ở trong file config

OK giờ chúng ta cùng đi đến bước setup Google nào!!!

Setup google

Truy cập trang https://cloud.google.com/ và tiến hành tạo mới một project trên đó

Mình sẽ bỏ qua bước tạo project vì hầu như trên mạng cũng đã có rồi, mà mình sẽ hướng dẫn từ bước mọi người đã tạo xong nhé

Sau khi tạo xong các bạn sẽ được tới 1 trang như thế này, bấm theo các bước mình đã chụp ở trên, đầu tiên chọn Credentials

Sau đó ở màn hình Credentials nhấn chọn button “CONFIGURE CONSENT SCREEN”

Sau khi đã thiết lập cũng như đồng ý các điều khoản thì mọi người sẽ được chuyển tới màn hình như sau:

ở màn hình này chúng ta sẽ chả làm gì cả vì cũng chưa setup gì cho project của mình, chuyển tiếp về lại trang Credentials:

nhập các thông tin đầy đủ vào phần Create OAuth client ID:

Cuộn xuống phần “Authorize redirect URI” và dán URI sau:
http://localhost:3000/api/auth/callback/google. Sau đó bấm nút Create

Trong trường hợp mọi người muốn setup cho production thì thay vì để localhost hãy thay bằng domain của mình

Cuối cùng thì id của chúng ta cần đã xuất hiện, việc chúng ta cần làm là đưa 2 id này vào trong phần .env của dự án mình và tiến hành tới bước tiếp theo, test

Mọi người cũng cần tạo key NEXT_AUTH_SECRET để tăng cường tính bảo mật của quy trình xác thực trong next-auth. Mình từng mắc tới việc nếu không thêm key này thì không thể sử dụng tới Google được nên mọi người cứ thêm vào cho chắc nhé. Tạo secret key của mọi người bằng cách thực hiện lệnh sau:

openssl rand -base64 32

Lệnh này sẽ tạo ra một chuỗi 32 ký tự. Sao chép chuỗi này và dán nó làm giá trị cho biến NEXTAUTH_SECRET trong tệp .env này. Tệp .env cuối cùng của chúng ta sẽ giống như sau:

GOOGLE_CLIENT_ID = client ID value
GOOGLE_CLIENT_SECRET = client secret value
NEXT_AUTH_SECRET = next auth secret

Sau khi bạn đã triển khai thành công các biến .env, hãy dán đoạn mã sau vào tệp Route.ts của mình:

import NextAuth from "next-auth/next";
import { options } from "./options";

const handler = NextAuth(options);

export { handler as GET, handler as POST };

Điều này đảm bảo rằng các request GET và POST được gửi đến điểm cuối này api/auth/[…nextauth] sẽ được thư viện next-auth xử lý.

Cuối cùng, hãy khởi động lại ứng dụng nextjs của chúng ta. Điều quan trọng cần lưu ý là thư viện next-auth sẽ không hoạt động ngay vào thời điểm này. Lý do là chúng ta vẫn chưa triển khai protected routes để bảo vệ các trang của mình. Chúng ta sẽ khám phá khía cạnh này tiếp theo.

Làm sao để implement Protected Routes với next-auth

Với việc sử dụng middleware của Next.js, việc bảo vệ các routes trở nên rất dễ dàng.

Bắt đầu bằng cách tạo tệp middleware.ts trong thư mục src gốc.

Để bảo vệ tất cả các trang của bạn một cách thống nhất, hãy chèn đoạn mã sau:

export { default } from 'next-auth/middleware'

Ngoài ra, mọi người có thể bảo mật riêng các trang cụ thể bằng cách sử dụng matcher. Ví dụ: chỉ bảo vệ trang chủ và cart sẽ được triển khai như sau:

export { default } from 'next-auth/middleware'

export const config = { matcher: ['/', '/cart'] }

Bây giờ, khi ta truy cập cả hai trang trên localhost của mình, chúng sẽ hiển thị lời nhắc xác thực mời bạn “Sign in with Google” thay vì hiển thị nội dung thông thường:

Tổng kết lại

Trong hướng dẫn này, mình đã đề cập đến các bước cần thiết để triển khai authenticate và được protected trong ứng dụng Next.js của bạn bằng thư viện next-auth với Nhà cung cấp Google.

Với kiến ​​thức thu được ở đây, giờ đây mọi người có thể tự tin phát triển các ứng dụng cung cấp khả năng kiểm soát truy cập an toàn và nội dung được cá nhân hóa dựa trên xác thực người dùng.

Mọi người cũng có thể triển khai thêm trên các mạng xã hội khác, ví dụ như Facebook, Instagram, Apple, …

Mọi người có thể truy cập vào đây để có thể triển khai những nhà cung cấp khác nhé https://next-auth.js.org/providers/

có hàng ti tỉ thứ nằm ở đây chờ đón mọi người đó ^^

Sắp tới mình sẽ ra thêm nhiều blog liên quan tới Frontend hơn nữa, sẽ chi tiết hơn nên mọi người nhớ đón chờ nhé

The post Authentication Google with NextJS and NextAuth appeared first on Tomoshare.

Storybook là một công cụ phát triển giao diện người dùng (UI) cho các ứng dụng web và ứng dụng di động. Nó cung cấp một môi trường phát triển tách biệt để xây dựng và kiểm thử các component giao diện của bạn mà không cần triển khai toàn bộ ứng dụng.

Cụ thể, Storybook cho phép bạn xây dựng và hiển thị các “storybook” (“story”) cho từng component trong hệ thống của bạn. Mỗi “story” là một trạng thái hoặc biến thể của một component cụ thể, và bạn có thể tạo ra các “story” khác nhau để thử nghiệm và hiển thị các tính năng và trạng thái khác nhau của component đó.

Công cụ này giúp nhóm phát triển tăng tốc quá trình phát triển và kiểm thử UI bằng cách tạo ra môi trường cô lập, thân thiện với người dùng để thử nghiệm và hiển thị các thành phần UI. Nó giúp đảm bảo rằng các component có thể tái sử dụng một cách đúng đắn và không bị ảnh hưởng bởi các yếu tố khác trong ứng dụng.

2. Install storybook

Sử dụng npx:

npx storybook@latest init

yarn:

yarn dlx storybook@latest init

pnpm:

pnpm dlx storybook@latest init

3. Start storybook

Sau khi cài đặt thành công storybook mặc định câu lệnh chạy script trong pakage.json là:

"storybook": "storybook dev -p 6006"

Mặc định sẽ chạy port 6006. Để run script chạy lệnh:

yarn storybook
# or
npm run storybook

Sau khi chạy câu lệnh chúng ta sẽ có màn hình storybook trên localhost:6006

Trong thư mục code sẽ tự tạo 1 folder stories bao gồm 1 số component example:

Ok các bạn có thể xóa thư mục này đi vì đây cũng chỉ là example, chúng ta sẽ tạo story cho các component của riêng dự án của chúng ta dưới đây.

3. Tạo storybook cho component

Trước khi tạo storybook cho 1 component thì đương nhiên chúng ta sẽ phải có component chứ đúng không. Dưới đây mình sẽ tạo một BaseButton component:

// BaseButton.jsx

import './base-button.css';

export const BaseButton = (props) => {
  const { children, primary, size, disable, ...buttonProps } = props;

  return (
    <button
      className={[
        'button',
        `button--${size}`,
        primary ? 'button--primary' : 'button--secondary',
        disable ? 'button--disable' : '',
      ].join(' ')}
      {...buttonProps}
    >
      {children}
    </button>
  );
};

/* base-button.css */

.button {
  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 500;
  border: 0;
  border-radius: 3em;
  cursor: pointer;
  display: inline-block;
  line-height: 1;
}
.button--primary {
  color: white;
  background-color: var(--primary-color);
}
.button--secondary {
  color: #333;
  background-color: transparent;
  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
}
.button--secondary:focus,
.button--secondary:focus-visible {
  color: var(--dark-primary-color);
  background-color: transparent;
  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
}

.button--small {
  font-size: 12px;
  padding: 10px 16px;
}
.button--medium {
  font-size: 14px;
  padding: 11px 20px;
}
.button--large {
  font-size: 16px;
  padding: 12px 24px;
}

.button--disable {
  color: var(--disable-color);
  background-color: var(--disable-color);
  cursor: not-allowed;
}
.button--disable:focus,
.button--disable:focus-visible {
  outline: 4px auto var(--disable-color);
  background-color: var(--disable-color);
  color: var(--disable-color);
}

Sau khi tạo ra một BaseButton component chúng ta sẽ tạo một storybook cho nó. Mình cấu trúc file component như sau (các bạn có thể tùy chỉnh theo ý thích):

Mỗi component sẽ có một hoặc nhiều story cho thấy các trạng thái mà nó hỗ trợ. Bạn có thể hiển thị các stories trong giao diện người dùng và xem code đằng sau chúng trong các tệp kết thúc bằng .stories.js hoặc .stories.ts

Tạo 1 file BaseButton.stories.js hoặc BaseButton.stories.jsx:

// BaseButton.stories.js|jsx

import { BaseButton } from "./BaseButton";

export default {
  component: BaseButton,
};

/*
 *👇 Render functions are a framework specific feature to allow you control on how the component renders.
 * See https://storybook.js.org/docs/react/api/csf
 * to learn how to use render functions.
 */
export const Primary = {
  render: () => <BaseButton primary>Button</BaseButton>,
};

Phía trên là ví dụ cách để render BaseButton ở trạng thái “primary” và xuất một story được gọi là Primary.

Để mở rộng thêm lợi thế của Storybook’s “args” chúng ta sẽ khai báo thêm những Args mà BaseButton có như là: primary, size, disable…

import { BaseButton } from "./BaseButton";

export default {
  title: 'BaseButton',
  component: BaseButton,
  parameters: {
    layout: 'centered',
  },
  tags: ['autodocs'],
  argTypes: {
    backgroundColor: { control: 'color' },
  },
};

export const Primary = {
  args: {
    primary: true,
    children: 'Click',
  },
};

export const Secondary = {
  args: {
    children: 'Click',
  },
};

export const Disable = {
  args: {
    children: 'Click',
    disable: true,
  },
};

export const Large = {
  args: {
    size: 'large',
    children: 'Click',
  },
};

export const Small = {
  args: {
    size: 'small',
    children: 'Click',
  },
};

Cả hai ví dụ về câu chuyện đều hiển thị cùng một nội dung vì Storybook cung cấp thuộc tính args đã cho vào story trong quá trình kết xuất. Nhưng bạn sẽ có được sự tiện lợi tiết kiệm thời gian với args.

4. Chỉnh sửa một story

Storybook giúp bạn dễ dàng làm việc trên 1 component ở một trạng thái. Khi bạn edit code hoặc story của BaseButton. Storybook sẽ ngay lập tức hiển thị lại trong trình duyệt. Không cần phải reload lại trang.

5. Kết luận

Storybook là một công cụ phát triển và kiểm thử giao diện người dùng (UI) cho ứng dụng web và các dự án front-end khác. Dưới đây là một số công dụng chính của Storybook:

1. Phát triển và kiểm thử từng thành phần (Component): Storybook cho phép nhà phát triển tạo và xem các thành phần UI độc lập một cách riêng biệt từ ứng dụng chính. Điều này giúp chúng ta tập trung vào phát triển từng thành phần một cách hiệu quả hơn và kiểm thử chúng mà không cần khởi động toàn bộ ứng dụng.
2. Tạo và quản lý hướng dẫn sử dụng (Documentation): Storybook giúp tạo ra một bản hướng dẫn sống cho các thành phần UI. Người phát triển có thể tạo các story (câu chuyện) để minh họa cách sử dụng và các trạng thái khác nhau của mỗi thành phần, làm cho việc tạo tài liệu trở nên dễ dàng.
3. Kiểm thử tự động (Automated Testing): Storybook có thể được tích hợp với các công cụ kiểm thử tự động như Jest để đảm bảo rằng các thành phần UI hoạt động đúng như mong đợi và không gặp vấn đề sau khi thay đổi mã nguồn.
4. Chia sẻ và tái sử dụng thành phần (Sharing and Reusability): Nhờ vào Storybook, các thành viên trong nhóm có thể dễ dàng chia sẻ và tái sử dụng các thành phần UI. Điều này giúp tạo ra một quy trình phát triển mở và linh hoạt hơn.
5. Thử nghiệm các trạng thái và tương tác khác nhau: Storybook cho phép mô phỏng và kiểm thử các trạng thái khác nhau của các thành phần, cũng như tương tác của người dùng. Điều này giúp đảm bảo rằng UI của ứng dụng hoạt động chính xác trong mọi tình huống.
6. Hỗ trợ nhanh chóng cho thiết kế (Design Support): Storybook là một công cụ hữu ích trong quá trình hợp tác giữa nhà phát triển và người thiết kế. Thiết kế có thể xem và tương tác với các thành phần UI mà không cần sự giúp đỡ từ ứng dụng chính.

Tóm lại, Storybook là một công cụ mạnh mẽ giúp tối ưu hóa quá trình phát triển và kiểm thử UI trong các dự án web và front-end.

Tương tự như react chúng ta cũng có thể viết storybook cho vue và angular. Các bạn hãy đón xem bài viết tiếp theo về hướng dẫn viết storybook cho vue nhé.

Tìm hiểu thêm ở trang chủ storybook nhé: https://storybook.js.org/

The post Storybook là gì? Cách sử dụng storybook trong Reactjs appeared first on Tomoshare.

Hãy cùng nhau xem xét cách một hoạt động đọc file blocking được thực hiện trong 3 trường hợp sau:

• Đơn luồng (single-threaded): Chỉ xử lí được 1 công việc một lúc. Khi bắt đầu đọc file A, toàn bộ quy trình sẽ bị “đóng băng” cho đến khi hoàn tất. Lúc đó không thể đọc file B được.
• Đa luồng (multi-threaded): Khi luồng 1 bắt đầu đọc file A, chỉ riêng luồng 1 bị block, còn luồng 2 vẫn đọc được file B đồng thời.
• Đơn luồng với Async-IO (single-threaded with Async-IO): Khi gặp lệnh đọc file A, nó sẽ chuyển sang thread pool thực hiện. Luồng chính tiếp tục đọc file B. Khi xong sẽ trả kết quả về luồng chính bằng callback.

Nhờ đó trang web không bị “đóng băng” khi thực hiện nhiều yêu cầu đồng thời như gọi hàm fetch()

Như vậy, chúng ta đã cùng nhau xét xem cách hoạt động đọc file blocking được thực hiện trong các mô hình đơn luồng, đa luồng và sử dụng thread pool. Việc nắm vững các khái niệm này giúp lập trình viên Javascript xử lý I/O hiệu quả, đảm bảo tính khả dụng và trải nghiệm người dùng. Enjoy coding 😘

Bài viết gốc: https://www.thamdavies.com/blog/async-io-da-luong-va-don-luong-trong-javascript

The post Async-IO, đa luồng và đơn luồng trong Javascript appeared first on Tomoshare.

Ngược dòng lịch sử 1 chút, chúng ta cùng nhau tìm hiểu về 2 thời kì đã qua của Web 3.0.

Thư viện online Web 1.0.

Web 1 được xem là thời kì khủng long của Internet với tiêu chí 3 KHÔNG:

• KHÔNG có sự tương tác, chỉ tiếp cận thông tin theo 1 chiều
• KHÔNG bị quản lý bởi cá nhân hay tổ chức nào cả
• KHÔNG có các thuật toán để sàng lọc thông tin. Khiến người dùng rất khó tìm thông tin liên quan

Sau tất cả, chúng ta có công thức chốt hạ cho Web 1.0

WEB1 = THE INTERNET OF INFORMATION; I.E., THE HTML CSS WEBSITES YOU CANNOT INTERACT WITH.

_{^{Web1 = kỷ nguyên internet của không tin. Bao gồm HTML CSS và không thể tương tác.}}

Web 2.0 xuất hiện với diện mạo mới, cải tiến mới.

Năm 2005, Web 2.0 chính thức được ra đời với diện mạo mới. Được cải tiến từ Web 1.0 và một trong những thay đổi quan trọng lớn nhất đó là sự tương tác.

Khi bạn sử dụng Meta, Youtube,…những nền tảng này sẽ thu thập những thông tin của người dùng tìm kiếm để trả lại những thông tin phù hợp nhất.

Cụ thể hơn tí nhé! Khi bạn search trên Youtube với từ khoá là Blockchain, lúc này Youtube sẽ đề cử những video liên quan đến Blockchain. Từ ví dụ này chúng ta có thể thấy 1 điểm sáng tiếp theo của Web 2.0 đối với Web 1.0 đó chính là thuật toán. Web 2.0 sử dụng thuật toán để sàng lọc thông tin liên quan đến những cái mà người dùng quan tâm.

Nghe đến đây, mọi người có đang nghĩ rằng Web 2 là đủ rồi, cần gì phải cải tiến hơn nữa?

Không thể phũ nhận Web 2 có nhiều tiện ích và khả năng phát triển vô cùng lớn. Nhưng cái gì cũng có ưu và nhược điểm cả. Chắc hẳn mọi người cũng đã từng nghe qua cụm từ “Facebook nghe lén”. Đúng vậy, Web 2 đang dần lộ ra yếu điểm chính là việc thông tin cá nhân của người dùng bị xâm phạm. Những gã khổng lồ công nghệ như là Google, Meta, Amazon,… đang hằng ngày thu thập dữ liệu và bán cho các bên quảng cáo.

Để giúp cho người dùng có thể kiểm soát được quyền riêng tư, cũng như là dữ liệu của mình. Thì đây là lúc Web 3 xuất hiện. Vậy Web 3.0 là gì nhỉ!

Web 3.0 nền dân chủ kĩ thuật số.

Điểm sáng cho Web 3.0 là dựa vào công nghệ mở đường Blockchain, là loại hình công nghệ giúp lưu trữ, sắp xếp và quản lí thông tin trên mạng lưới Internet 1 cách phi tập trung

Các thiết bị chia sẻ thông tin 1 cách trực tiếp với nhau mà không cần phải chịu sự kiểm soát bởi cá nhân hay tổ chức nào. Có thể thấy bước cải tiến này của Web 3.0 đã ăn đứt Web 2.0 nhỉ. Nếu ở Web 2.0 quyền lợi của người dùng là rất mong manh và bị kiểm soát bởi các ông lớn công nghệ, thì Web 3.0 hứa hẹn người dùng chính là chủ sở hữu dữ liệu của họ, họ hoàn toàn có quyền quyết định và kiểm soát những dữ liệu đó.

Với Web 3.0, những ca nhạc sĩ có thể trực tiếp đăng tải sản phẩm âm nhạc của họ lên mạng thông qua công nghệ Blockchain. Sản phẩm sẽ được số hoá thành Token hoặc NFT. Họ có thể kiếm lợi nhuận từ việc bán sản phẩm đó và hoàn toàn loại bỏ được bên thứ 3.

Web 3.0 ra đời là mối đe doạ đến các ông lớn. Nó thay đổi luật chơi, loại bỏ trung gian và sang bằng lợi nhuận.

Connect wallet with Web3-React

Step 1: Cài đặt ethers và web3-react

npm i ethers@5.5.4
npm i @web3-react/core@6.1.9

Step 2: Khởi tạo Web3ReactProvider

import { Web3ReactProvider } from "@web3-react/core";
import { ethers } from "ethers";

const getLibrary = (provider: any) => {
  return new ethers.providers.Web3Provider(provider);
}

<React.StrictMode>
  <Web3ReactProvider getLibrary={getLibrary}>
    <App />
  </Web3ReactProvider>
</React.StrictMode>

Step 3: Cài đặt Wallet Connectors

npm i @web3-react/walletlink-connector # Coinbase Wallet
npm i @web3-react/injected-connector # Metamask

Tạo file connectors.ts với mục đích khởi tạo các trình kết nối để tích hợp vào app của mình

import { InjectedConnector } from "@web3-react/injected-connector";
import { WalletLinkConnector } from "@web3-react/walletlink-connector";

const injected = new InjectedConnector({
  supportedChainIds: [1, 5],
});

const coinbaseWallet = new WalletLinkConnector({
  url: `https://mainnet.infura.io/v3/${process.env.INFURA_KEY}`,
  appName: "web3-react-demo",
});

export const connectors = {
  injected: injected,
  coinbaseWallet: coinbaseWallet,
};

• supportedChainIds: Nó được sử dụng để xác định danh sách các chainId (ID chuỗi) mà một ứng dụng hoặc một thư viện hỗ trợ. Mỗi mạng Ethereum hoặc chuỗi con có một chainId duy nhất để xác định nó. Tham khảo https://chainlist.org/
• INFURA_KEY: là một khóa API được sử dụng để kết nối ứng dụng của bạn với mạng Ethereum và IPFS thông qua dịch vụ Infura. Tham khảo https://www.infura.io/

Step 4: Connect and Disconnect from Wallet

Trong file App.tsx sử dụng useWeb3React hook để connect và disconnect ví

<import { useWeb3React } from '@web3-react/core'

function App() {
  
  const { activate, deactivate } = useWeb3React();
    ...
}

<button onClick={() => { activate(connectors.coinbaseWallet) }}>
  Coinbase Wallet
</button>

<button onClick={() => {
  if (window.ethereum) {
    activate(connectors.injected);
  } else {
    alert("Please install Meta Mask Extension");
  }
}}>
  Meta Mask
</button>

<button onClick={deactivate}>Disconnect</button>

Cùng xem demo nhé.

Cảm ơn mọi người đã đọc ^^

Nguồn tham khảo:

https://docs.cloud.coinbase.com/wallet-sdk/docs/web3-react

https://www.youtube.com/watch?v=6xZdv1hiphg&t=362s

The post Web 3 – Nền dân chủ kĩ thuật số. Kết nối ví với Web 3.0 bằng ReactJS appeared first on Tomoshare.

Vuex và Pinia là hai thư viện quản lý trạng thái cho các ứng dụng Vue.js. Vuex là thư viện cũ hơn và lâu đời hơn, nhưng Pinia đang trở nên phổ biến nhờ API đơn giản hơn và hỗ trợ TypeScript tốt hơn.

Quản lý state là gì?

Quản lý state là quá trình quản lý dữ liệu được chia sẻ giữa các thành phần khác nhau trong ứng dụng Vue. Điều này có thể phức tạp, đặc biệt đối với các ứng dụng phức tạp, nơi cần có các thư viện quản lý trạng thái như Vuex và Pinia.

Vuex

Vuex là một thư viện quản lý trạng thái (state management) cho ứng dụng Vue.js. Nó giữ trạng thái của ứng dụng trong một trung tâm duy nhất gọi là “store”. Vuex cũng cung cấp một số tính năng giúp quản lý trạng thái dễ dàng, chẳng hạn như:

• Mutations: là các hàm thuần túy cập nhật trạng thái theo cách có thể dự đoán được.
• Actions: là các hàm không đồng bộ có thể được sử dụng để thực hiện các tác vụ cập nhật trạng thái, chẳng hạn như tìm nạp dữ liệu từ API.
• Getters: là các hàm thuần túy có thể được sử dụng để tính toán các giá trị từ trạng thái.

Pinia

Pinia cũng là một thư viện quản lý trạng thái, nhưng được thiết kế với mô hình dựa trên cơ sở TypeScript. Nó khuyến khích sử dụng các cửa hàng cụ thể cho từng phần của ứng dụng. Điều này có nghĩa là mỗi thành phần có thể có cửa hàng riêng, chứa trạng thái dành riêng cho thành phần đó. Pinia cũng cung cấp một số tính năng giúp quản lý trạng thái dễ dàng, chẳng hạn như:

• Hỗ trợ Composition API:  API của Pinia được thiết kế để sử dụng với Vue Composition API, giúp dễ dàng tạo và quản lý trạng thái theo cách mô-đun.
• Hỗ trợ TypeScript:  Pinia có hỗ trợ TypeScript tích hợp, giúp bạn dễ dàng viết mã an toàn.
• Hỗ trợ Devtools:  Pinia hỗ trợ Vue Devtools, giúp bạn dễ dàng gỡ lỗi và kiểm tra trạng thái của mình.

Bạn nên sử dụng Pinia hay Vuex?

Mặc dù Pinia đã được công nhận là giải pháp quản lý trạng thái chính thức cho các ứng dụng Vue trong tương lai nhưng điều đó không có nghĩa là Vuex không còn được dùng nữa. Nếu bạn có một ứng dụng đang được sản xuất và sử dụng Vuex thì ứng dụng của bạn sẽ vẫn hoạt động tốt và bạn nên tiếp tục sử dụng Vuex vì việc di chuyển từ thư viện này sang thư viện khác có thể tốn rất nhiều công sức.

Tuy nhiên, nếu dự án của bạn vẫn đang trong giai đoạn phát triển ban đầu thì Pinia là lựa chọn phù hợp. Bạn sẽ được hưởng lợi từ cú pháp dễ hiểu và đơn giản hơn của Pinia cùng với các tính năng khác được đề cập trong bài viết này.

Dưới đây là bảng tóm tắt những điểm khác biệt chính giữa Vuex và Pinia:

Tại sao chọn Pinia thay thế Vuex?

Trong số các ưu điểm của thư viện Pinia, cá nhân mình thấy nó nổi trội nhất ở các điểm sau:

• Kích thước thư viện siêu nhẹ, chỉ khoảng 1kb
• Hỗ trợ module hóa tốt
• Hỗ trợ auto complete khi code tốt. Thay vì phải khai báo mapAction(…), mapGetter(…).v.v…
• Dễ sử dụng, vì cách viết giống như bạn vẫn khai báo và sử dụng state trong từng component vậy.

Và còn nhiều ưu điểm khác nữa. Mình nghĩ sau khi thực hành và ứng dụng vào dự án, bạn sẽ trải nghiệm và nhận ra các ưu điểm này.

Cảm ơn mọi người đã dành thời gian để đọc 🙏

Have a nice day!

The post Vuex vs Pinia: So sánh các thư viện quản lý State Vue appeared first on Tomoshare.

Về việc triển khai refresh token có thể không còn xa lạ đối với nhiều Frontend Dev trong chúng ta. Sau khi đăng nhập thành công, token sẽ được trả lại từ API (Thông thường api sẽ trả về access_token và refresh_token).

Chúng ta sẽ lưu trữ nó lại ở localStorage, cookie, etc… để đính vào headers của mỗi request cho việc xác thực các request mà chúng ta gửi đi.

Khi token này hết hạn, chúng ta sẽ cần gửi một yêu cầu để lấy một token mới bằng việc gửi token hết hạn trước đó hoặc mã refresh_token ban đầu được trả về từ API. Việc này phụ thuộc vào thiết kế API đó.

Trước khi biết khi nào token hết hạn, chúng ta cần đính token vào mỗi request gửi đi. Bạn có thể hình dung việc chúng ta đính token vào mỗi request như thế này, để đảm bảo chúng ta luôn gửi token đến API để xác thực và biết khi nào token sẽ hết hạn (Tránh tự ý kiểm tra token ở client, việc đó không thực sự an toàn).

const axiosClient = axios.create({
  baseURL: process.env.PR_API_HOST,
  headers: {
    'Content-Type': 'application/json',
  },
});

// Add a request interceptor
axiosClient.interceptors.request.use(
  (config) => {
    const storage = useStorage();
    const accessToken = storage.getItem(StorageKeyEnum.AccessToken);
  
    if (accessToken && config.headers) {
      config.headers.Authorization = `Bearer ${accessToken}`;
    }
    return config;
  },
  (error) => Promise.reject(error)
);

Khi mỗi request cần xác thực được gửi đi với token kèm theo, chúng ta sẽ biết token đó còn hợp lệ hay không bằng việc API sẽ giúp chúng ta xác minh token đó. khi token hết hạn, thông thường chúng ta sẽ nhận được mã phản hồi là 401 hoặc 403.

Khi đó, chúng ta sẽ kiểm tra trên mỗi response nhận về. Nếu nó rơi vào các mã lỗi trên, thực hiện kịch bản refresh token mà chúng ta muốn. Ở bên dưới đoạn code này, hiện tại dự án của mình khi hết hạn token trả về mã lỗi là 401 và kèm theo 1 message Signature has expired nên mình đang thực hiện check theo điều kiện như vậy nhé =)))

axiosClient.interceptors.response.use(
  (response) => response.data,
  async (error) => {
    let message = '';
    const originalConfig = error.config;
    const code = error.response && Number(error.response.status);
    switch (code) {
      case 401:
        if (error.response.data.error === RESPONSE_ERROR_MESSAGE.SIGNATURE_HAS_EXPIRED) {
          // Chúng ta sẽ refresh token tại đây
        break;
      case ...:
        break;
      default:
        message = ErrorHttpMessageEnum.Default;
      
    }
    return message;
  },
);

Tiếp theo, để đảm bảo chỉ một request refresh token được tạo ra khi nhiều request với token hết hạn phát sinh khi tải trang, chúng ta sẽ cần sử dụng Promise để delay và chỉ tạo duy nhất một yêu cầu cuối cùng. Kèm theo đó, là kiểm tra xem có request refresh token nào đã được gọi thông qua biến trạng thái isRefreshing

// refresh token is false, to call refresh token api
if (!isRefreshing) {
// update status isRefreshing to be true
  isRefreshing = true;
  // this method fetches the new token
  refreshTokensLoginApi().then(() => {
    const storage = useStorage();
    const accessToken = storage.getItem(StorageKeyEnum.AccessToken);
    onRefreshed(accessToken);
    // after that, to clear all setup
    refreshSubscribers = [];
    isRefreshing = false;
  });
}

// setup callback to change token in headers authorization
const retryOrigReq = new Promise((resolve) => {
  subscribeTokenRefresh((token: string) => {
    // replace the expired token and retry
    originalConfig.headers.Authorization = `Bearer ${token}`;
    resolve(axiosClient(originalConfig));
  });
});

return retryOrigReq;

const subscribeTokenRefresh = (cb: (token: string) => void) => {
  refreshSubscribers.push(cb);
};

const onRefreshed = (token: string) => {
  refreshSubscribers.map((cb) => cb(token));
};

Ở đây, useStorage() là mình đang viết 1 hook để tương tác get, set, remove token với các storage. Mục đích mình viết hooks để mình tái sử dụng lại cho được nhiều components trong dự án đó, thay vì mình phải viết lại từng nơi. Nó giúp code trong dự án mình tường minh, dễ quản lý hơn, tránh lặp lại code.

Tóm gọn lại, chúng ta sẽ có một hàm refresh token như bên dưới.

import axios from 'axios';
import {
  ErrorHttpMessageEnum, StorageKeyEnum, RESPONSE_ERROR_MESSAGE
} from 'src/constant';
import { refreshTokensLoginApi, clearTokenRedirectLogin } from 'src/helpers/auth';
import { useStorage } from 'src/hooks/useStorage';

let isRefreshing = false;
let refreshSubscribers: ((token: string) => void)[] = [];

const axiosClient = axios.create({
  baseURL: process.env.PR_API_HOST,
  headers: {
    'Content-Type': 'application/json',
  },
});

// Add a request interceptor
axiosClient.interceptors.request.use(
  (config) => {
    const storage = useStorage();
    const accessToken = storage.getItem(StorageKeyEnum.AccessToken);
    
    if (accessToken && config.headers) {
      config.headers.Authorization = `Bearer ${accessToken}`;
    }
    return config;
  },
  (error) => Promise.reject(error)
);

// Add a response interceptor
axiosClient.interceptors.response.use(
  (response) => response.data,
  async (error) => {
    let message = '';
    const originalConfig = error.config;
    const code = error.response && Number(error.response.status);
    
    switch (code) {
      case 401:
        if (error.response.data.error === RESPONSE_ERROR_MESSAGE.SIGNATURE_HAS_EXPIRED) {
          if (!isRefreshing) {
            isRefreshing = true;
            refreshTokensLoginApi().then(() => {
              const storage = useStorage();
              const accessToken = storage.getItem(StorageKeyEnum.AccessToken);
              onRefreshed(accessToken);
              
              isRefreshing = false;
              refreshSubscribers = [];
            });
          }

          const retryOrigReq = new Promise((resolve) => {
            subscribeTokenRefresh((token: string) => {
              // replace the expired token and retry
              originalConfig.headers.Authorization = `Bearer ${token}`;
              resolve(axiosClient(originalConfig));
            });
          });

          return retryOrigReq;
        }
        clearTokenRedirectLogin();

        message = ErrorHttpMessageEnum.Code401;
        break;
      case ...:
        break;
      default:
        message = ErrorHttpMessageEnum.Default;
    }
    return message;
  },
);

const subscribeTokenRefresh = (cb: (token: string) => void) => {
  refreshSubscribers.push(cb);
};

const onRefreshed = (token: string) => {
  refreshSubscribers.map((cb) => cb(token));
};

export default axiosClient;

Kết luận

Có rất nhiều cách để chúng ta triển khai refresh token và phía trên là một trong số cách hiện tại của mình đang sử dụng để refresh token trong dự án. Cảm ơn mọi người đã dành thời gian để đọc 🙏

Have a nice day!

The post Refresh token trong Axios như thế nào? appeared first on Tomoshare.

Alpine.js là một JavaScript framework nhẹ và dễ sử dụng, giúp bạn tạo ra các tương tác trực tiếp trên giao diện người dùng (UI) một cách dễ dàng và nhanh chóng mà không cần phải chạy npm, biên dịch tập lệnh, định cấu hình webpack. Nó là một giải pháp thay thế đơn giản và hiệu quả cho các frontend framework khác như Vue, React & Angular. Hãy nghĩ về nó giống như Tailwind dành cho JavaScript.

Cách sử dụng

Theo  tài liệu của Alpine.js , cú pháp của nó gần như được mượn hoàn toàn từ  Vue.js  (và phần mở rộng  Angular.js ), vì vậy nếu bạn đã biết một trong hai framework này thì bạn sẽ không phải mất nhiều thời gian để bắt đầu.

Trong blog này, Chúng ta sẽ tìm hiểu cách sử dụng Alpine.js trong Laravel với hai ví dụ.

1. Alpine.js CDN
2. Laravel Mix

Sử dụng qua CDN

Bạn chỉ cần thêm một thẻ script liên kết thư viện (xem ví dụ bên dưới). Rất đơn giản phải không nào! Bạn không cần phải biên dịch javascript hoặc cấu trúc dự án của mình theo bất kỳ cách cụ thể nào.

<html>
<head>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
<body>
    <h1 x-data="{ message: 'I ❤️ Alpine' }" x-text="message"></h1>
</body>
</html>

Sử dụng qua Laravel mix

Trước tiên, bạn cần cài đặt Alpine js bằng lệnh npm bên dưới:

npm install alpinejs

Tiếp đó, bạn cần import vào resources/js/app.js file

import 'alpinejs';

Cuối cùng chỉ cần chạy lệnh

npm run dev

Bây giờ, bạn có thể sử dụng được alpine (nhớ thêm app.js vào blade view nhé)

<script src="{{ mix('js/app.js') }}"></script>

Cùng xem 1 ví dụ đơn giản nhé:

<div 
    x-data="{ show: false }" 
    x-show="show" 
    x-on:notify.window="() => { show = true; setTimeout(() => { show = false; }, 5000 ) }"
    style="display:none;"
    class="toast active"
>
    <div class="toast-content">
        <i class="ti ti-check toast-icon" x-on:click="show = false"></i>
        <div class="message">
            <span class="message-title">Ví dụ</span>
            <span class="message-content">Ví dụ về alpine js</span>
            <span x-on:click="show = false" class="close">
                <i class="ti ti-x"></i>
            </span>
        </div>
        <div class="progress active"></div>
    </div>
</div>

Ở ví dụ trên, tôi có một component alert được phản ứng khi sự kiện notify được thực hiện thì sẽ hiển thị thông báo.

Kết luận

Với sự đơn giản và gọn nhẹ của Alpine, tôi tin rằng đây sẽ là 1 trong số các giải pháp tốt nhất cho bạn trong một số trường hợp thay vì sử dụng các Js framework khác như Vue hay React để rồi nhận thêm sự cồng kềnh, phức tạp mà chúng mang lại.

Hiện tại, cùng với sự kết hợp với Tailwind, Livewire và Laravel, bộ tứ này đã và đang hình thành nên 1 ngăn xếp công nghệ mới được gọi là ngăn xếp TALL. Nếu tò mò bạn có thể xem tại blog.laravelvietnam.

The post Alpine.js là gì ? Hãy Cùng tìm hiểu về cách sử dụng nào appeared first on Tomoshare.

Bình thường mọi người hay check chẵn lẻ bằng cách này đúng không

const number = 123;

if (number % 2) console.log('even')
else console.log('odd')

Còn một cách khác để kiểm tra số đó là chẵn hay lẻ

const number = 232;  

if (number & 1) console.log("odd");
else console.log("even");

2. Sử dụng object thay vì if-else, switch-case

Thay vì

const day = new Date().getDay();

// switch case
switch (day) {
  case 1:
      console.log("Monday");
      break
  case 2:
      console.log("Tuesday");
      break
  case 3:
      console.log("Wednesday");
      break
  // other days
  default:
    console.log("Waiting For The Weekend.!");
}
  
// if else
if (day === 1) console.log("Monday")
else if (day === 2) console.log("Tuesday")
else if (day === 3) console.log("Wednesday")
// other days
else console.log("Waiting For The Weekend.!")

thì

const date = new Date().getDay();

const day = {
  0: "Waiting For The Weekend.!",
  1: 'Monday',
  2: 'Tuesday',
  3: 'Wednesday',
  // other days
}

console.log(day[date]);

3. Function IIFE (Immediately Invoked Function Expression)

IIFE (Biểu thức hàm được gọi ngay lập tức) là một hàm JavaScript chạy ngay khi được xác định.

Nó là một design pattern được gọi là Self-Executing Anonymous Function gồm 2 phần chính:
– Đầu tiên là hàm ẩn danh với phạm vi từ vựng được bao bọc trong Grouping Operator () . Điều này ngăn cản việc truy cập các biến trong thành ngữ IIFE cũng như làm ảnh hưởng dến phạm vi global.
– Phần thứ hai tạo biểu thức hàm được gọi ngay lập tức () qua đó công cụ JavaScript sẽ diễn giải hàm trực tiếp.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML</title>
  </head>
  <body>
  </body>
</html>

<script type="text/javascript">
  const userName = "Đạt";
  
  ((name) => {
    alert("My name is " + name);
  })(userName);
</script>

4. Cache array.length trong loop

Tip này rất đơn giản và ảnh hưởng nhiều hơn đến hiệu suất khi xử lý các array lớn trong loop. Căn bản là, hầu như mọi người đều viết cái forto đồng bộ này dưới dạng một array:

for (let i = 0; i < array.length; i++) {
    console.log(array[i]);
}

Nếu bạn làm việc với các array nhỏ hơn – không sao cả, nhưng nếu bạn xử lý các array lớn hơn, code này sẽ tính toán lại size của array trong mỗi vòng lặp của loop và sẽ gây ra gián đoạn nhỏ. Để tránh việc này xảy ra, bạn nên cache array.length trong một variable để dùng thay vì đụng tới array.length mọi lúc trong loop:

var length = array.length;
for (let i = 0; i < length; i++) {
    console.log(array[i]);
}

Để làm nó nhỏ lại, hãy viết code sau:

for (let i = 0, length = array.length; i < length; i++) {
    console.log(array[i]);
}

5. Lấy item cuối trong array

Array.prototype.slice(begin, end) có thể cắt các array khi bạn đặt các argument begin và end. Nhưng nếu bạn không cài end argument, function này sẽ tự động gán giá trị lớn nhất cho array. Tôi nghĩ không nhiều người biết rằng function này có thể nhận giá trị âm, và nếu bạn set một số âm vào begin argument bạn sẽ nhận các element cuối cùng trong array:

let array = [1, 2, 3, 4, 5, 6];
console.log(array.slice(-1)); // [6]
console.log(array.slice(-2)); // [5,6]
console.log(array.slice(-3)); // [4,5,6]

6. Cắt array 

Phương pháp này có thể khóa size của array, rất hữu ích để xóa các elemnt của array dựa trên số element bạn muốn set. Ví dụ, nếu bạn có một array khoảng 10 element, nhưng bạn chỉ muốn lấy 5 element đầu tiên, bạn có thể cắt array, làm nó nhỏ lại bằng cách set array.length = 5. Xem ví dụ sau:

let array = [1, 2, 3, 4, 5, 6];
console.log(array.length); // 6
array.length = 3;
console.log(array.length); // 3
console.log(array); // [1,2,3]

7. Gộp các array

Nếu bạn cần gộp 2 array Bạn có thể dùng function Array.concat():

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
console.log(array1.concat(array2)); // [1,2,3,4,5,6];

Tuy nhiên, function này không phù hợp để gộp các array lớn vì nó sẽ tiêu tốn nhiều dung lượng bằng cách tạo ra array mới. Trong trường hợp này, bạn có thể dùng Array.push.apply(arr1, arr2) để tạo array mới, nó sẽ gộp array thứ hai vào cái đầu tiên để giảm tiêu hao bộ nhớ:

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
array1.push.apply(array1, array2)
console.log(array1); // [1,2,3,4,5,6];

8. Sử dụng SET để nhận các giá trị duy nhất

const arr = [10,10,20,20,30]; 
const new_arr = [...new Set(arr)]; 
  
console.log(new_arr); // [10, 20, 30]

9. Clone an Object

Trong một dự án của tôi, tôi đã dính trường hợp gán giá trị một biến bằng một biến đã cho. Khi thay đổi biến đó nó làm thay đổi cả giá trị của biến đã cho kia. Tôi hiểu vì sao lỗi nhưng đã không biết cách fix cũng như không biết keyword của nó là gì để search. Có phải các bạn thường làm như này không:

let obj1 = { a: 1, b: 2 };
let obj2 = obj1; // obj2 = { a: 1, b: 2 }

obj2.a = 3; // Gán lại giá trị a của obj2 = 3

console.log(obj1); // { a: 3, b: 2 } => Giá trị a của obj1 cũng thay đổi theo
console.log(obj2); // { a: 3, b: 2 }

Dưới đây là một số cách fix nhé:

Cách 1: Sử dụng Spread operator {...} hoặc Object.assign(). Issue: Nested objects vẫn có vấn đề trên.

let obj1 = { a: 1, b: 2, c: { nested: 3 } };
let obj2 = { ...obj1 }; // obj2 = { a: 1, b: 2, c: { nested: 3 } }
let obj3 = Object.assign({}, obj1); // obj3 = { a: 1, b: 2, c: { nested: 3 } }

obj2.b = 3;
obj2.c.nested = 4;

console.log(obj1); // { a: 1, b: 2, c: { nested: 4 } } nested vẫn bị thay đổi này 🙂
console.log(obj2); // { a: 1, b: 3, c: { nested: 4 } } nested vẫn bị thay đổi này 🙂
console.log(obj3); // { a: 1, b: 2, c: { nested: 4 } } nested vẫn bị thay đổi này 🙂

Cách 2 (Recommended): Sử dụng JSON.stringify() & JSON.parse().

let obj1 = { a: 1, b: 2, c: { nested: 3 } };
let obj2 = JSON.parse(JSON.stringify(obj1)); // obj2 = { a: 1, b: 2, c: { nested: 3 } }

obj2.b = 3;
obj2.c.nested = 4;

console.log(obj1); // { a: 1, b: 2, c: { nested: 3 } } yêu chưa 😉😘
console.log(obj2); // { a: 1, b: 3, c: { nested: 4 } }

10. Lấy danh sách các khóa và giá trị từ một object

Trong quá trình phát triển, có những lúc chúng ta chỉ cần lấy key hoặc chỉ value từ một đối tượng. Cả hai hàm dựng sẵn sau đây đều khá đơn giản:

const vehicle = { brand: 'BWM', year: 2022, type: 'suv'};
//get keys
console.log(Object.keys(vehicle)); // [ 'brand', 'year', 'type' ]

//get values
console.log(Object.values(vehicle)); // [ 'BWM', 2022, 'suv' ]

Kết luận:

Ngôn ngữ nào cũng sẽ có rất nhiều tips & tricks không riêng gì javascript. Trên đây là 10 tips & tricks hay về javascript. Mong những tips & tricks trên sẽ giúp ích được các bạn trong quá trình phát triển code của mình. Các bạn hãy comment một số tips & tricks khác để chia sẻ cho mọi người nhé. Ủng hộ tôi bằng một lượt comment để ra tiếp phần 2 trong thời gian sắp tới nhé(nhưng chưa biết là bao giờ)

The post Tips & tricks javascript (P1) appeared first on Tomoshare.

Trong đó, một trong những tính năng không thể thiếu đó là 2-way data binding, cụ thể là sử dụng v-model.

Nếu chưa từng làm việc với vuejs thì mình sẽ giải thích một cách khái quát giúp bạn hiểu về v-model. Đây là một cách thức mà bạn hay dùng cho các form nhập liệu. Khi mà giá trị của các biến vừa dùng để hiển thị trên input, đồng thời khi người dùng nhập thì nó cũng tự động lưu vào biến đó. Vẫn hơi khó hiểu đúng không, vậy dưới đây là một ví dụ về v-model:

<template>
  <input type="text" v-model="value"/>
  <div>giá trị nhập từ input: <span style="color: red">{{value}}</span></div>
</template>
<script>
export default {
  data() {
    return {
      value: ''
    }
  }
}
</script>

// Input: Đây là giá trị được nhập từ input
// Output: giá trị nhập từ input: Đây là giá trị được nhập từ input

Dễ đúng không. Nhưng tùy vào dự án mà bạn cần tạo các custom input component mà trong đó cần phải xử lý 2-way data binding. Dưới đây là một số cách mà bạn có thể tự implement v-model:

• Watcher một biến local
• Custom method để implement v-model
• Sử dụng thuộc tính computer
•  Custom props và event

1. Watcher một biến local

Đây có lẽ là cách mọi người hay nghĩ tới nhất khi cần implement v-model cho component.

Cách thực hiện đơn giản nhất là gồm những bước sau:

• chúng ta khai báo một props,
• sau đó tạo một biến observable trong data() và khởi tạo giá trị là giá trị của props đã khai báo trước đó
• Cuối cùng là sử dụng event để thông báo cho component cha, mục đích là để update giá trị props từ bên ngoài component.

Nói thì có vẻ trừu tượng vậy thôi, nhưng nhìn code là bạn sẽ thấy nó đơn giản như nào.

<!-- Tạo component CustomInput.vue -->
<template>
  <input type="text" v-model="model" />
</template>

<script>
export default {
  props: ['modelValue'],
  data() {
    return {
      model: this.modelValue
    }
  },
  watch: {
    model(currentValue) {
      this.$emit('update:modelValue', currentValue)
    }
  }
}
</script>

<!-- Cách sử dụng -->
<template>
  <CustomInput v-model="text" />
  <div>giá trị nhập từ input: <span style="color: red">{{text}}</span></div>
</template>
<script>
import CustomInput from './components/CustomInput.vue'
export default {
  components: { CustomInput },
  data() {
    return {
      text: ''
    }
  }
}
</script>

2. Custom method để implement v-model

Nếu sử dụng watcher ảnh hưởng tới hiệu năng của ứng dụng. Vậy cách 2 này sẽ tận dụng event @input có sẵn của input native và tạo một custom method trong component của chúng ta.

Chúng ta sẽ truyền giá trị của input tới component cha thông qua emit một event, mục đích cũng là để có thể cập nhật props từ bên ngoài component.

<!-- Tạo component CustomInput.vue -->
<template>
  <input
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
  />
</template>
<script>
export default {
  props: ['modelValue'],
  emits: ['update:modelValue']
}
</script>

<!-- Cách sử dụng -->
<template>
  <CustomInput v-model="text" />
  <div>giá trị nhập từ input: <span style="color: red">{{ text }}</span></div>
</template>
<script>
import CustomInput from './components/CustomInput.vue'
export default {
  components: { CustomInput },
  data() {
    return {
      text: ''
    }
  }
}
</script>

Lưu ý: Đối với Vue3, thuộc tính value được đổi tên thành modelValue và tên của event input được đổi thành update:modelValue

3. Sử dụng thuộc tính computer

Một cách khác nữa để implement v-model trong một custom component đó là sử dụng getter và setter của computed.

Bạn có thể định nghĩa một thuộc tính computed, sau đó:

• Implement một getter để trả về value của thuộc tính đó.
• Một setter để emit một input event tới component cha

Cụ thể cách viết code như sau:

<!-- Tạo component CustomInput.vue -->
<template>
  <input v-model="value" />
</template><script>
export default {
  props: ['modelValue'],
  computed: {
    value: {
      get() {
        return this.modelValue
      },
      set(value) {
        this.$emit('update:modelValue', value)
      }
    }
  }
}
</script>

<!-- Cách sử dụng -->
<template>
  <CustomInput v-model="text" />
  <div>giá trị nhập từ input: <span style="color: red">{{ text }}</span></div>
</template>
<script>
import CustomInput from './components/CustomInput.vue'
export default {
  components: { CustomInput },
  data() {
    return {
      text: ''
    }
  }
}
</script>

4. Custom props và event

Vì prop và event mặc định của v-model của Vue3 là modelValue và update:modelValue . Tuy nhiên chúng ta có thể biến đổi tên của nó bằng cách truyền đối số cho v-model

<!-- Component cha -->
<CustomInput v-model:title="text" />

Trong trường hợp này, component con sẽ nhận một prop title và một emit một sự kiện update:title để cập nhật lại giá trị ở component cha

<!-- CustomInput.vue -->
<template>
  <input
    type="text"
    :value="title"
    @input="$emit('update:title', $event.target.value)"
  />
</template>
<script>
export default {
  props: ['title'],
  emits: ['update:title']
}
</script>

Kết luận

Trên đây là một số cách để bạn implement v-model trong một component tùy chỉnh mà bạn tự tạo.Tương tự bạn cũng có thể làm với một số type khác của input như radio, checkbox,…

VueJS với ưu điểm nhanh, gọn, nhẹ và tùy biến cao, nên mình nghĩ ngoài những cách trên, sẽ còn nhiều cách khác nữa.

Bạn còn nghĩ ra cách nào khác để implement v-model cho component nữa không? Để lại ý kiến bình luận bên dưới nhé. Mình cũng đang đón chờ đây.

The post Tạo custom input trong vuejs appeared first on Tomoshare.

Tình huống

Bạn đang phát triển một ứng dụng web Vue.js lớn với khách hàng cũng lớn không kém. Một ngày đẹp trời nào đó, khách hàng gửi cho bạn 1 bug mà thoạt nhìn có vẻ đơn giản, tuy nhiên, bạn không thể tái hiện lỗi này trong môi trường phát triển của mình, và bạn không có thông tin rõ ràng về tình trạng lỗi. Trong tình huống này, bạn có thể sử dụng Sentry để giúp xác định và giải quyết lỗi một cách hiệu quả. Vậy cùng mình đi tìm hiểu xem Sentry là gì mà lại lợi hại như vậy.

Sentry là gì

Sentry là một dịch vụ quản lý lỗi (error tracking) và giám sát (monitoring) phần mềm được sử dụng để theo dõi và ghi lại các lỗi và sự cố trong ứng dụng phần mềm. Sentry giúp các nhà phát triển và nhóm phát triển phát hiện, theo dõi, và khắc phục lỗi một cách hiệu quả. Dịch vụ này có thể được tích hợp vào các ứng dụng web và ứng dụng di động để ghi lại thông tin về lỗi, crash, và sự cố xảy ra trong quá trình chạy ứng dụng

Lợi ích của Sentry

• Ghi lại lỗi tự động: Sentry có thể được tích hợp vào mã của bạn để tự động ghi lại thông tin về lỗi mỗi khi nó xảy ra trong môi trường sản xuất. Điều này cho phép bạn nhận được thông báo ngay khi có sự cố xảy ra.
• Thông tin về lỗi chi tiết: Sentry không chỉ ghi lại lỗi mà còn cung cấp thông tin chi tiết về nguồn gốc của lỗi, ngăn chặn lỗi, và cách lỗi xảy ra. Điều này giúp bạn dễ dàng xác định vị trí và nguyên nhân gây ra lỗi.
• Theo dõi thời gian thực: Sentry cung cấp một giao diện quản lý web cho phép bạn theo dõi lỗi trong thời gian thực và tìm hiểu về tần suất và ngữ cảnh xảy ra lỗi.
• Cung cấp stack trace: Sentry có khả năng tạo ra stack trace, cho phép bạn xem các hàm và dòng mã cụ thể liên quan đến lỗi. Điều này giúp bạn tìm ra lỗi trong mã của bạn.
• Thông báo ngay lập tức: Sentry có thể bắn thông báo qua mail, SMS, …

Setup Sentry cho Vue2

Muốn sử dụng Sentry trước tiên bạn cần có tài khoản, vào https://sentry.io/signup/ để đăng ký tài khoản.

Sau khi đăng ký xong và đăng nhập thành công giao diện sẽ hiển thị như sau:

Okay, tiếp theo thì ấn vào nút Create project, trong phần tạo đấy, vì mình đang hướng dẫn cho vue nên hãy chọn vuejs, nhập tên project và nhấn nút Create Project:

Vậy là chúng ta đã tạo xong Project trên Sentry, bước tiếp theo là lấy Client Keys (DSN) để có thể tích hợp vào dự án vuejs, từ Menu -> Projects -> Chọn Project bạn vừa tạo -> Chọn cài đặt bên góc trên bên phải -> Client Keys (DSN)

Cài đặt Sentry cho vue: npm install @sentry/cli

Trong main.js, khởi tạo Sentry.init với dsn chính là Client Keys (DSN) bạn lấy ở bên trên:

import Vue from 'vue'
import App from './App.vue'
import * as Sentry from "@sentry/vue"

Vue.config.productionTip = false

Sentry.init({
  Vue,
  dsn: "https://51b9f7xxxxxxxx.ingest.sentry.io/45059xxxxxxxxx"
});

new Vue({
  render: h => h(App),
}).$mount('#app')

Các bước đã xong, giờ bạn đã có thể test Sentry bằng cách tạo thử 1 Exception.

Khi 1 Exception được thực thi, Sentry sẽ bắt và trả về cho bạn thông tin xoay quanh Exception đó:

Tổng kết

Trên đây là thông tin cũng như hướng dẫn cơ bản để có thể tích hợp Sentry vào dự án vuejs, còn rất nhiều tính năng hay ho nữa như filter bằng trình duyệt, hỗ trợ source map trong việc gửi thông tin stack trace của exception, …. bạn hãy tự mình khám phá thêm nhé, mình đã làm được và mình tin bạn cũng sẽ làm được. Hẹn gặp lại ở bài tiếp theo

The post Sentry.io cho người mới bắt đầu (Vuejs) appeared first on Tomoshare.