Skip to content

Category: Javascript

Firebase – Authentication (Code Template)

Firebase Authentication là cloud service cung cấp cho chúng ta chức năng quản lý đăng ký, đăng nhập, cũng như phân quyền rất chi là tiện lợi

So với việc tự implement thì việc sử dụng service này của Google hoàn toàn biến ứng dụng của bạn thành một con thú mà bạn chẳng cần phải động tay chân gì nhiều cả

Bài viết này sẽ chứa toàn là code dành cho ~ người nào đã biết về Firebase Authentication và muốn có resource để look up nhanh

Firestore – Batch & Transaction

Với những ai đã từng sử dụng MySQL, SQL Server thì đều biết những database này đều hỗ trợ cơ chế Transaction. Còn batch, nếu bạn đã biết về Java JDBC thì sẽ biết về batch

Batch là khi bạn muốn write một loạt những action vào database nhưng muốn những action đó luôn luôn được đảm bảo là thành công ! Nếu một action thất bại => Tất cả action khác bị cancel

Transaction thì liên quan đến vấn đều nâng cao hơn là tránh Race Condition (dữ liệu bị ghi đè)

Bài viết này không nói rõ về Transaction là gì nhưng chỉ nó về ~ khái niệm này trong Firestore

Đối với Firestore, về mặt ý nghĩa thì đều giống như cổ điển nhưng cách thức vận hành thì khác. Transaction không ROLL_BACK mà luôn luôn thành công

Cùng tìm hiểu thêm ở phía dưới nào :))

Firestore Pagination – Code Template cho phân trang

// store last document
let lastestDoc = null;

const getNextReviews = async function() {
const ref = db.collection(‘reviews’)
.orderBy(“createdAt”)
.startAfter(lastestDoc || 0)
.limit(6);
const data = await ref.get();

if(data.empty) {
console.log(“No more data to bring up !”)
return;
}

// update lastest doc
lastestDoc = data.docs[data.docs.length – 1];

Firestore Data Modeling – Chọn mô hình data hợp lý

Thú thật mà nói thì cái vấn đề này khá là confuse khi mà bạn chưa bao giờ trải nghiệm hoặc chưa tham khảo một mô hình nào cả !

Trước tiên, ngày hôm nay chúng ta sẽ tìm hiểu về 3 cách modeling data phổ biến nhất trong Firestore : Map, Sub-collection hay Root-level Collection

Đồng thời hiểu về Collection Group là gì ?

Và đừng nhầm lẫn khái niệm & cách sử dụng của Collection Group & Composite Index

Firestore Indexing – Làm sao mà firestore query data nhanh vậy ?

Để đảm bảo rằng tốc độ query luôn luôn là nhanh => Firestore hỗ trợ 1 cơ chế index (đánh số) theo thứ tự các giá trị của field của doc

Chính vì data được sắp xếp theo thứ tự => Việc query, sort diễn ra vô cùng nhanh chóng do không cần thao tác gì thêm

Vd: nếu ta search document(Student) với Age = 5 => Pointer sẽ chạy đến ngay vị trí số 5 trong vài bước với thuật toán gì đó không biết (Binary Search, v.v.v) thay vì chạy từ đầu List đến cuối List

Cùng tìm hiểu xem cách thức sử dụng Index và tối ưu hóa cách sử dụng ngay sau đây

Vuelidate – Hướng dẫn Input Validator cho Vuejs

Vuelidate là một thư viện hỗ trợ cho Vue 2.0 & 3.0 kiểm tra form input, đồng thời cung cấp cách thức hiển thị lỗi (yêu cầu) một cách trực quan nhất.

So với đối thủ của nó VeeValidate – cũng là một input validator & display errors thì theo cảm nhận cá nhân : Vuelidate đơn giản hơn hẳn về cách hoạt động cũng như rất dễ dàng có thể tìm hiểu trong vài phút đọc document

Dưới đây là cách sử dụng Vuelidate đi với Vue 3.0 chưa được hỗ trợ hoàn toàn (*hi vọng có thể update post này trong tương lai :)) )

Vue Router – thêm Route vào Router như thế nào

Như này

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
]

const router = VueRouter.createRouter({
  history: VueRouter.createWebHashHistory(),
  routes,
})

hoặc 
router.addRoutes(routes)

3 dạng Record

  • Single view record : có 1 component
  • Multiple view record : nhiều component
  • Redirect record : không có component

Những object mà ta truyền vào trong routes sẽ là [RouteRecord] type

Vue Router – RouterLink & Router-View

<router-link> & <router-view> là 2 thành phần chủ chốt của vue-router.

Router link dùng để render ra link <a> dựa trên những route của ta một cách dynamically.

Còn Router view chính là nơi mà ta render ra component dựa trên sự thay đổi của route

Còn hơn thế nữa cách mà chúng ta xử lý link còn có params, query, hash v.v. được Vue-Router hỗ trợ rất mạnh mẽ sau đây

Vue Router – Navigation Guards

Cần quản lý, xác minh User trước khi cho truy cập vào trang web ?

Navigation Guard hỗ trợ rất mạnh mẽ việc này. Đồng thời cho phép ta thoải mái xử lý rất nhiều các loại tác vụ trước & sau khi thực hiện navigation (chuyển route)


  1. Global
    1. Hoặc sử dụng next 3rd argument
    2. After Hooks
    3. Before Resolve
    4. Per-Route Guard (Global setup)
  2. Local (In-Component Guards)
  3. The Full Navigation Resolution Flow

Vue Router – History mode, Catch all/404, Matching Syntax

History mode là phương thức lưu lịch sử trang web vì VueJs là SPA (single page application) nghĩa là ta không có xử lý html code từ server trả về mà trực tiếp thay đổi trên client luôn

Chính vì thế page của chúng ta sẽ không reload full-page nên là đường dẫn sẽ không thay đổi

Nhưng vue-router cho phép ta làm điều đó với createWebHistory()