Trong bài viết này, tôi chia sẻ trải nghiệm thú vị (và hơi "củ chuối") khi dùng 100% AI để thay đổi giao diện website cá nhân. Liệu AI đã đủ "thông minh" để làm việc này mà không cần đến code thủ công của con người? Đọc ngay để biết kết quả!

Lê Lân

14/07/2025

Trong thế giới frontend phát triển chóng mặt, công cụ mới cứ 'mọc như nấm sau mưa'. Nhưng thỉnh thoảng, lại có một 'siêu phẩm' xuất hiện, không chỉ mang đến tính năng mới mà còn là cả một triết lý hoàn toàn khác biệt. Và Shadcn/ui chính là một 'hiện tượng' như thế, đang làm mưa làm gió trong cộng đồng React. Nếu bạn nghe giới dev rỉ tai nhau về nó mà vẫn chưa hiểu 'điều thần kỳ' gì đã khiến nó đặc biệt đến vậy, thì bạn đã đến đúng nơi rồi đó! Bởi vì Shadcn/ui không phải là một thư viện component thông thường – mà nói đúng hơn, nó CHẲNG PHẢI LÀ THƯ VIỆN GÌ CẢ! Nghe lạ đúng không? Giờ thì, hãy cùng 'mổ xẻ' xem Shadcn/ui là cái gì, tại sao nó lại khác biệt và liệu có phải là 'chân ái' cho dự án tiếp theo của bạn không nhé! Bạn nhớ các thư viện component truyền thống như Material-UI hay Chakra UI chứ? Cách dùng thường là bạn cài đặt chúng qua npm, sau đó import các component vào rồi tùy chỉnh bằng đủ loại props và theme providers phức tạp. Kiểu như này nè: // 'Ngày xửa ngày xưa': import { Button } from '@mui/material'; function MyApp() { return <Button variant='contained'>Click Me</Button>;} Cách này ổn thôi, nhưng thường đi kèm với vài 'phiền toái' nhỏ: 'Đóng hộp' và bí ẩn: Logic và style bên trong component bị giấu tít trong node_modules. Bạn muốn biết nó hoạt động thế nào ư? Hên xui! Đau đầu với tùy chỉnh: Muốn ghi đè style ư? Coi chừng 'choảng' nhau với độ ưu tiên CSS, phải dùng !important hay vật lộn với mấy cái object theme 'khó nhằn'. Tải nặng ứng dụng: Đôi khi bạn import cả tấn code mà lại chẳng dùng đến bao nhiêu, làm ứng dụng nặng nề hơn. Shadcn/ui thì sao? Nó 'lật kèo' toàn bộ mô hình này! <img src='https://truyentranh.letranglan.top/api/v1/proxy?url=https://i.imgur.com/ShadcnFlipModel.png' alt='Shadcn/ui lật ngược mô hình thư viện'> Nó KHÔNG phải là một npm package. Bạn không cài nó như một dependency! Thay vào đó, Shadcn/ui là một 'bộ sưu tập' các component được thiết kế đẹp mắt, có thể tái sử dụng, mà bạn sẽ 'copy-paste' thẳng vào dự án của mình bằng một công cụ dòng lệnh (CLI). <img src='https://truyentranh.letranglan.top/api/v1/proxy?url=https://i.imgur.com/ShadcnCliCopy.png' alt='Copy-paste qua CLI'> Khi bạn chạy lệnh kiểu như này: npx shadcn-ui@latest add button Bạn KHÔNG hề thêm một dependency mới vào package.json đâu nhé. Thay vào đó, CLI sẽ tạo ra một file button.tsx bên trong thư mục components/ui của dự án bạn. Và từ giây phút đó, đoạn code đó là CỦA BẠN! Các component này được xây dựng dựa trên hai 'ngôi sao' đình đám nhất hiện nay: Radix UI: 'Phù thủy' xử lý mọi logic phức tạp, khả năng truy cập (accessibility), và hành vi 'ngầm' của component (ví dụ: trạng thái dropdown, lớp phủ dialog, các thuộc tính ARIA). <img src='https://truyentranh.letranglan.top/api/v1/proxy?url=https://i.imgur.com/radix_ui_logo_only.png' alt='Radix UI logo'> Tailwind CSS: 'Ông trùm' về styling, mang đến phương pháp utility-first cực kỳ dễ đọc và sửa đổi. <img src='https://truyentranh.letranglan.top/api/v1/proxy?url=https://i.imgur.com/tailwind_css_logo_only.png' alt='Tailwind CSS logo'> Vậy tại sao cái 'chiêu' copy-paste này lại 'cách mạng' đến vậy? Tất cả gói gọn trong một từ khóa: QUYỀN SỞ HỮU! 1. Bạn là 'Chủ' của Code! Vì code của component nằm ngay trong codebase của bạn, bạn có 100% quyền kiểm soát! Muốn thay đổi hiệu ứng hover của cái nút Button ư? Cứ mở button.tsx ra và chỉnh sửa mấy class Tailwind thôi. Cần thêm một biến thể (variant) mới? Làm trực tiếp luôn! Không có 'hộp đen' nào ở đây cả. Bạn không còn là 'người tiêu dùng' component nữa; bạn chính là 'ông chủ' của nó! <img src='https://truyentranh.letranglan.top/api/v1/proxy?url=https://i.imgur.com/ShadcnOwnsCode.png' alt='Lập trình viên làm chủ code'> 2. Không Tải Nặng Thời Gian Chạy! Vì Shadcn/ui không phải là một thư viện bạn phải bundle kèm, nên nó không làm tăng thêm 'cân nặng' cho ứng dụng của bạn. Đoạn code duy nhất được 'ship' ra trình duyệt là đoạn code bạn thực sự dùng, bởi vì nó đã là một phần của mã nguồn ứng dụng rồi. 3. Thiết Kế Đẹp Mắt, Tùy Biến Vô Hạn! Các component trông cực kỳ 'xịn sò' ngay từ đầu, với thiết kế tinh tế và thẩm mỹ cao. Nhưng vì bạn có mã nguồn, bạn có thể dễ dàng chỉnh sửa chúng để phù hợp với thương hiệu công ty hay một hệ thống thiết kế độc đáo mà không cần phải 'vật lộn' với các quy tắc của thư viện nữa. <img src='https://truyentranh.letranglan.top/api/v1/proxy?url=https://i.imgur.com/ShadcnCustomization.png' alt='Các component Shadcn/ui dễ dàng tùy biến'> 4. Trải Nghiệm Phát Triển Tuyệt Vời (DX)! Cái CLI của Shadcn/ui dùng 'sướng' cực kỳ! Thiết lập đơn giản, thêm component thì 'dễ như ăn kẹo'. Nó tự động hóa những phần 'nhàm chán' (tạo file, cài đặt Radix UI nếu cần) và dành lại phần 'vui vẻ' (xây dựng và tùy chỉnh) cho bạn. Bắt đầu với Shadcn/ui thì 'easy' không tưởng! Bước 1: Khởi tạo 'công trình' Trong dự án React/Next.js của bạn, chạy lệnh 'init': npx shadcn-ui@latest init Lệnh này sẽ hỏi bạn vài câu hỏi cấu hình (kiểu như bạn muốn lưu component ở đâu), và tạo ra một file components.json để 'ghi nhớ' các cài đặt của bạn. Nó cũng thêm một file lib/utils.ts với hàm cn siêu tiện lợi để 'hợp nhất' các class Tailwind. Bước 2: Thêm một component Giả sử chúng ta muốn thêm một component Alert: npx shadcn-ui@latest add alert Lệnh này sẽ làm gì? Kiểm tra xem bạn có các dependency cần thiết chưa (như tailwind-variants, lucide-react). Tạo file alert.tsx trong thư mục component của bạn. Bước 3: Dùng component thôi! Giờ thì bạn có thể import và sử dụng nó như bất kỳ component 'nhà làm' nào khác: ```jsximport { Alert, AlertTitle, AlertDescription } from '@/components/ui/alert';import { Terminal } from 'lucide-react';export default function MyPage() { return ( <Alert> <Terminal className='h-4 w-4' /> <AlertTitle>Heads up!</AlertTitle> <AlertDescription> Bạn giờ đã có thể thêm component vào app bằng CLI rồi đó! </AlertDescription> </Alert> );}``` Bước 4: 'Múa cọ' tùy chỉnh! Không ưng màu viền? Mở alert.tsx, tìm cái class border và đổi nó thôi! Đơn giản vậy đó. Bạn đang chỉnh sửa chính đoạn code mà bạn đã hiểu. Thật là 'sướng' đúng không? Shadcn/ui là một công cụ 'đỉnh của chóp', nhưng không phải lúc nào cũng là 'chân ái' cho mọi trường hợp đâu nhé. Bạn chắc chắn nên cân nhắc Shadcn/ui nếu: Bạn đang bắt đầu một dự án mới tinh với React và Tailwind CSS. Bạn muốn 'toàn quyền sinh sát' về giao diện, cảm giác, và chức năng của component. Bạn đang xây dựng một hệ thống thiết kế 'độc quyền' và muốn một nền tảng vững chắc, có khả năng truy cập tốt. Bạn 'ghét cay ghét đắng' việc phải 'đấu tranh' với các quy tắc styling của thư viện bên thứ ba. <img src='https://truyentranh.letranglan.top/api/v1/proxy?url=https://i.imgur.com/ShadcnSuitedDev.png' alt='Lập trình viên phù hợp với Shadcn/ui'> Bạn có thể muốn 'trung thành' với các thư viện truyền thống hơn nếu: Dự án của bạn không dùng Tailwind CSS. Bạn chỉ cần xây dựng một bản prototype thật nhanh và không quan tâm đến việc tùy chỉnh sâu. Cái ý tưởng 'sở hữu và bảo trì' code component nghe có vẻ 'quá sức' (dù CLI cũng có lệnh diff để giúp bạn cập nhật dễ dàng hơn!). Shadcn/ui đại diện cho một sự thay đổi mạnh mẽ trong cách chúng ta tư duy về việc xây dựng giao diện người dùng. Nó 'kéo' chúng ta ra khỏi những thư viện 'đóng hộp', 'một kích cỡ cho tất cả' và hướng tới một cách tiếp cận minh bạch hơn, có khả năng kết hợp cao hơn và 'lấy lập trình viên làm trung tâm' hơn. Bằng cách cung cấp cho bạn những 'viên gạch' được xây dựng tốt cùng với 'chìa khóa' để mở cửa code, nó giúp bạn xây dựng nhanh hơn mà không phải hy sinh chất lượng hay quyền kiểm soát. Đó là một sự kết hợp 'thiên tài' giữa quy ước và cấu hình, và nó đã xứng đáng trở thành một công cụ 'đinh' cho các nhà phát triển frontend hiện đại. <img src='https://truyentranh.letranglan.top/api/v1/proxy?url=https://i.imgur.com/ShadcnModernUI.png' alt='Shadcn/ui - Tư duy phát triển UI mới'> Nếu bạn chưa thử, hãy 'xắn tay áo' lên, tạo một dự án mới và thêm vài component xem sao. Biết đâu bạn lại 'yêu lại từ đầu' cái cảm giác xây dựng UI thì sao!

Lê Lân

14/07/2025

Ê, bạn có bao giờ thấy 'ngợp' với đủ thứ tin tức về AI không? Nào là 'AI agent', nào là 'code copilot' nghe thật hoành tráng, nhưng rồi tự hỏi: 'Thế mình là dev thì dùng AI vào công việc hằng ngày kiểu gì cho nó thực tế nhỉ, chứ không phải chỉ là mấy vụ PR?' Nếu bạn đang băn khoăn vậy thì yên tâm đi, bạn không hề cô đơn đâu! Việc đưa AI vào thói quen làm việc hàng ngày của chúng ta không cần phải là một cú nhảy vọt đáng sợ vào vùng đất bí ẩn đâu. Với tư duy đúng đắn và vài công cụ ngon lành, AI hoàn toàn có thể trở thành 'người cộng sự thầm lặng' của bạn – giúp bạn code nhanh hơn, debug thông minh hơn và 'ship' sản phẩm với sự tự tin ngút trời. Sẵn sàng chưa? Bắt đầu ngay thôi!<img src='https://truyentranh.letranglan.top/api/v1/proxy?url=https://i.imgur.com/DevAIIntro.png' alt='Nhà phát triển tự tin làm việc với AI'><br>Bạn có bao giờ mất cả nửa tiếng đồng hồ chỉ để dựng một cái form đăng nhập hay cái modal pop-up mới toanh không? Phải ngồi gõ đi gõ lại mấy cái boilerplate (mã khởi tạo) phát chán luôn! Đừng lo, AI sinh ra là để 'cứu' bạn khỏi mấy việc lặp đi lặp lại này đó! Nó có thể lo liệu phần 'dựng khung' (scaffolding) các component, giúp bạn có thêm thời gian và năng lượng tập trung vào mấy thứ 'xịn' hơn như thiết kế và logic của ứng dụng. Dù bạn đang code React, Vue hay thậm chí là HTML/CSS 'chay', chỉ cần bạn 'tâm sự' với AI một prompt (yêu cầu) thật chi tiết kiểu như: 'Tạo giúp tôi một navbar đáp ứng (responsive) có dropdown và hỗ trợ mobile nhé!', đảm bảo bạn sẽ có ngay một điểm khởi đầu cực kỳ vững chắc. Vừa tiết kiệm thời gian, vừa giảm tải 'gánh nặng' tinh thần cho mấy vụ lặt vặt. Mẹo nhỏ nè: Bạn càng cung cấp nhiều ngữ cảnh (ví dụ: loại dự án, hệ thống thiết kế đang dùng, thư viện quản lý trạng thái), kết quả AI trả về sẽ càng 'xịn sò' hơn đó!<img src='https://truyentranh.letranglan.top/api/v1/proxy?url=https://i.imgur.com/AIScaffolding.png' alt='AI tự động tạo code boilerplate'><br>À nói đến lỗi thì ai mà chẳng từng gặp phải mấy cái lỗi khiến mình 'đứng hình', cứ nhìn chằm chằm vào màn hình mà chẳng biết đường nào mà gỡ đúng không? Thay vì 'cắm mặt' vào Stack Overflow và lướt không ngừng nghỉ, sao bạn không thử dán mấy cái thông báo lỗi hay đoạn code 'dở chứng' đó vào công cụ AI của mình (như Cursor hay ChatGPT chẳng hạn)? Bạn sẽ nhận được những lời giải thích 'chuẩn như người thật' và cả những hướng dẫn 'cụ thể như cầm tay chỉ việc' để sửa lỗi đó! Đừng hiểu lầm nhé, AI không thay thế được việc bạn phải tự mình hiểu vấn đề đâu, nhưng nó cứ như là bạn có một anh/chị senior dev lúc nào cũng túc trực 24/7 vậy đó – mà lại còn siêu dễ tính, hỏi mấy câu 'ngớ ngẩn' cũng chẳng làm phiền đâu nha!<img src='https://truyentranh.letranglan.top/api/v1/proxy?url=https://i.imgur.com/AIDebugging.png' alt='AI giải thích lỗi lập trình'><br>Một giao diện người dùng (UI) 'đỉnh cao' thì không thể thiếu những lời lẽ 'chất lượng' được, đúng không nè? AI cực kỳ giỏi trong việc tạo ra văn bản placeholder (văn bản giữ chỗ) và 'microcopy' (những đoạn văn bản nhỏ nhưng quan trọng) như nhãn nút, gợi ý khi người dùng bắt đầu (onboarding hints), hay thông báo lỗi... tất cả đều nghe rất tự nhiên và 'mượt mà'. Thậm chí, bạn còn có thể đưa cho nó ảnh chụp màn hình hay các file xuất component từ Figma rồi hỏi ý kiến về bố cục hoặc đề xuất các thiết kế thay thế. Đây không phải là 'đẩy' hết việc sáng tạo cho AI đâu nhé! Mục đích chính là tăng tốc quy trình làm việc, giúp bạn cùng đội ngũ thiết kế của mình 'thử nghiệm và cải tiến' (iterate) nhanh hơn rất nhiều.<img src='https://truyentranh.letranglan.top/api/v1/proxy?url=https://i.imgur.com/AIUIcopy.png' alt='AI tạo văn bản cho giao diện người dùng'><br>Nói đến kiểm thử (testing), chắc hẳn nhiều bạn sẽ 'ngán ngẩm' vì nghĩ nó tốn thời gian lắm đúng không? Nhưng mà khoan đã! AI có thể tự động tạo ra đủ loại bài kiểm thử 'thần tốc' cho bạn đó: Nào là Unit tests (kiểm thử đơn vị) để đảm bảo từng phần nhỏ chạy đúng, nào là Component tests (ví dụ như dùng Cypress) để mô phỏng tương tác người dùng, rồi cả Accessibility checks (kiểm tra khả năng tiếp cận) để 'soi' xem có thiếu alt text, lỗi tương phản màu sắc hay thuộc tính ARIA nào không. Tưởng tượng xem, bạn sẽ từ trạng thái 'Để mai tính, lúc khác viết test' chuyển sang 'Xong test rồi!' trong chớp mắt – mà chất lượng thì vẫn 'đảm bảo như cam kết' luôn nha!<img src='https://truyentranh.letranglan.top/api/v1/proxy?url=https://i.imgur.com/AITesting.png' alt='AI tạo test tự động'><br>Hỏi thật nè, có mấy ai thích viết tài liệu (documentation) hay mấy cái commit message dài dòng không? Chắc ít lắm nhỉ! Nhưng mà bạn biết không, hai thứ này lại cực kỳ quan trọng để code của chúng ta 'dễ thở' và dễ bảo trì về sau đó. Thật may, AI có thể 'phù phép' để bạn có những commit message rõ ràng, ý nghĩa, tự động cập nhật file README mỗi khi có component mới, hoặc tạo ra những bản tóm tắt PR (Pull Request) siêu chi tiết, giúp đồng đội của bạn tiết kiệm kha khá thời gian khi review code. Kết quả là gì? Team làm việc ăn ý hơn, giao việc trơn tru hơn, và giao tiếp nội bộ cũng 'chất lượng' hơn rất nhiều!<img src='https://truyentranh.letranglan.top/api/v1/proxy?url=https://i.imgur.com/AIDocsCommits.png' alt='AI viết commit message và tài liệu'><br>Khi duyệt các PR (Pull Request) của đồng nghiệp, AI còn có thể là 'cố vấn' đắc lực, giúp bạn đảm bảo code của họ tuân thủ các quy tắc và thực hành tốt nhất. Chỉ cần 'đút' cho công cụ AI cái 'diff' (bản so sánh thay đổi) và một chút ngữ cảnh, bạn sẽ nhanh chóng có ngay bản tóm tắt những gì đã thay đổi, được chỉ ra những 'vùng nguy hiểm' tiềm ẩn, hay thậm chí là gợi ý những bài kiểm thử còn thiếu. Nghe cứ như bạn đang tự động hóa một phần quy trình code review vậy đó – giúp bạn có thêm thời gian quý báu để tập trung vào kiến trúc hệ thống, trải nghiệm người dùng (UX) hay thậm chí là... 'truyền nghề' cho mấy bạn junior!<img src='https://truyentranh.letranglan.top/api/v1/proxy?url=https://i.imgur.com/AIPRReview.png' alt='AI hỗ trợ code review'><br>Vậy tại sao bạn nên 'rước' AI vào quy trình làm việc của mình? Đơn giản là vì những lợi ích 'khủng' mà nó mang lại:<br>✅ <b>Tốc độ tên lửa:</b> Giảm đáng kể thời gian 'cày cuốc' vào những công việc lặp đi lặp lại hay viết boilerplate.<br>✅ <b>Rõ ràng như pha lê:</b> Biến những thông báo lỗi 'hại não' thành lời giải thích dễ hiểu.<br>✅ <b>Chất lượng khỏi bàn:</b> Kiểm thử kỹ lưỡng hơn và viết tài liệu 'có tâm' hơn rất nhiều.<br>✅ <b>Tập trung cao độ:</b> Giải phóng năng lượng cho bạn để tha hồ 'bay bổng' với những vấn đề cần tư duy sáng tạo!<br><img src='https://truyentranh.letranglan.top/api/v1/proxy?url=https://i.imgur.com/AIBenefits.png' alt='Lợi ích của AI trong phát triển phần mềm'><br><b>Đọc thêm nè:</b> Bạn là Front-End Developer có nên lo lắng về AI không?<br>Nếu bạn đang 'hăm hở' muốn thử dùng AI nhưng vẫn còn 'lăn tăn' về tương lai sự nghiệp của mình, thì hãy nghía qua bài viết trước của tôi nhé: '<a href="https://dev.to/yahav10/as-front-end-developer-should-i-be-worried-about-ai-1idf">Là Front-End Developer, Liệu Tôi Có Nên Lo Lắng Về AI Không?</a>'. Trong bài đó, chúng ta đã cùng 'mổ xẻ' tại sao AI không đến để thay thế các nhà phát triển, mà là để 'nâng tầm' cách chúng ta làm việc – và tại sao những kỹ năng độc đáo của bạn về thiết kế, UX, và giải quyết vấn đề vẫn là 'vô giá', không ai thay thế được.<br>Gộp cả hai bài này lại, bạn sẽ có đủ cả tư duy lẫn những bước đi thực tế để tự tin đưa AI vào quy trình làm việc hàng ngày, và quan trọng hơn là 'bảo hiểm' cho sự nghiệp Front-End của mình trong tương lai!<br><b>Lời kết 'chất':</b> AI không đến để 'soán ngôi' các nhà phát triển đâu – nó đến để giúp chúng ta làm việc hiệu quả hơn thôi! Bằng cách từng bước tích hợp AI vào các tác vụ hàng ngày, bạn sẽ dành ít thời gian hơn cho những việc 'tầm phào' và có nhiều thời gian hơn để xây dựng những tính năng 'đỉnh cao', ý nghĩa. Bắt đầu từ những thứ nhỏ nhất: chọn một trong các lĩnh vực tôi vừa kể trên và thử nghiệm với một công cụ AI mà bạn tin tưởng. Rất nhanh thôi, bạn sẽ thấy AI không chỉ là một 'trend' nhất thời, mà chính là 'người cộng sự' thầm lặng, không biết mệt mỏi của mình đó!

Lê Lân

12/07/2025

Chào bạn, là một kỹ sư phần mềm, bạn có nghĩ công việc của chúng ta chỉ gói gọn trong việc "code tính năng mới" hay "sửa bug" không? Thực ra, sứ mệnh của chúng ta còn "cao cả" hơn nhiều: đó là biến quy trình phát triển phần mềm trở nên NHANH HƠN, AN TOÀN HƠN và ĐỒNG BỘ HƠN! Tức là, chúng ta phải liên tục tự hỏi:Liệu có cách nào để giảm bớt mấy cái việc lặp đi lặp lại đến "phát chán" không?Làm sao để "mã hóa" những kinh nghiệm, quy tắc tốt nhất để "lính mới" không còn phải mò mẫm hay đoán già đoán non?Có thể giảm bớt gánh nặng "tư duy" khi bắt đầu một tính năng mới không nhỉ?Với các dự án Angular, có một "bảo bối" cực kỳ lợi hại để giải quyết mấy vấn đề đau đầu này, đó chính là Angular Schematics! Nó cho phép bạn tự động hóa cấu trúc, áp đặt tiêu chuẩn và đảm bảo mọi thứ đi theo một khuôn mẫu nhất định. Cứ như có một đội quân robot mini làm việc cho bạn vậy!Vậy, rốt cuộc "Schematic" trong Angular là cái gì mà nghe có vẻ "ảo diệu" thế? Đừng phức tạp hóa vấn đề! Bạn cứ hình dung Schematic như một "bí kíp võ công" hay một "kịch bản" mà bạn đưa cho Angular CLI. Cái "kịch bản" này sẽ chỉ dẫn cho Angular CLI biết phải làm gì để "sinh ra" hoặc "biến đổi" mã nguồn.Nó có thể làm được gì ư?Tạo ra các file mới toe từ những mẫu có sẵn (như khi bạn muốn một chiếc bánh đã có khuôn vậy!).Cập nhật những đoạn code "cũ" (ví dụ, tự động thêm một component vào module cho bạn mà không cần gõ tay).Đảm bảo cấu trúc dự án và cách đặt tên được đồng bộ, gọn gàng, đẹp mắt.À, bật mí chút xíu nhé: Schematics là một phần của Angular DevKit, chính là "bộ não" quyền năng đằng sau Angular CLI đó!<img src='https://truyentranh.letranglan.top/api/v1/proxy?url=https://i.imgur.com/schematic_robot.png' alt='Angular Schematic - Robot tự động hóa việc viết mã'>Bạn có biết không, thực ra chúng ta đã "dùng Schematics" hằng ngày mà đôi khi không hề hay biết đó! Mỗi khi bạn gõ những câu lệnh quen thuộc như:ng generate component my-button (Tạo một component tên là my-button)ng generate module user (Tạo một module user)ng generate service auth (Tạo một service auth)Đó chính là bạn đang sử dụng các "Schematics mặc định" mà Angular CLI đã trang bị sẵn! Chúng được thiết kế để tạo ra mã Angular chuẩn chỉnh, tuân thủ các best practices, và quan trọng hơn là tự động cập nhật các file liên quan (như khai báo component trong module). Cứ như có người dọn dẹp nhà cửa giúp bạn vậy!<img src='https://truyentranh.letranglan.top/api/v1/proxy?url=https://i.imgur.com/ng_generate_schematic.png' alt='Các lệnh ng generate sử dụng Schematics mặc định'>Mấy cái Schematics "có sẵn" thì đúng là tuyệt vời rồi, nhưng với các dự án lớn, phức tạp thì đôi khi chúng lại không "đủ đô" để đáp ứng mọi nhu cầu. Chính vì thế, Angular đã mở ra cánh cửa cho chúng ta tự tay tạo ra "Custom Schematics" – những "robot tùy chỉnh" của riêng mình! Bạn có thể định nghĩa các quy tắc "dàn khung" (scaffolding) và cấu trúc dự án theo ý bạn muốn. Tức là, bạn có thể biến "giấc mơ" về một cấu trúc code hoàn hảo thành hiện thực!<img src='https://truyentranh.letranglan.top/api/v1/proxy?url=https://i.imgur.com/custom_schematic_creation.png' alt='Tạo Custom Schematics trong Angular'>Thử kể bạn nghe một câu chuyện có thật nhé! Trong một dự án mà tôi tham gia, chúng tôi dùng một framework test "cây nhà lá vườn" được xây dựng dựa trên Angular's TestBed, với logic setup (mock, tiện ích, providers) rất riêng. Vấn đề là, Angular CLI lại luôn tạo ra file test với "đống" boilerplate (mã lặp lại) của Jasmine mặc định.Thế là, cứ mỗi lần tạo component mới, chúng tôi lại phải copy-paste, copy-paste... đoạn code setup test "thủ công" đến mỏi tay! Quá nản! Để giải quyết nỗi "ám ảnh" này, tôi đã xây dựng một Schematic riêng. Nó làm gì ư? Nó tự động tạo ra một file spec.ts với đầy đủ setup "nhà làm" của chúng tôi: từ việc inject đúng testing providers, đến các import cần thiết và cả các hàm assert nữa.Kết quả thì sao? Tuyệt vời ông mặt trời! Mỗi component mới đều đi kèm với một file test đã "sẵn sàng chiến đấu" theo đúng tiêu chuẩn của dự án. Chúng tôi không chỉ tiết kiệm được vô số thời gian gõ lại code, mà còn "ép buộc" được các best practices, giúp các dev mới nhanh chóng làm quen với framework test của công ty. Thật là "nhất tiễn hạ song điêu" phải không?<img src='https://truyentranh.letranglan.top/api/v1/proxy?url=https://i.imgur.com/automate_test_setup_schematic.png' alt='Schematic giúp tự động hóa thiết lập test'>Trong các dự án cá nhân, tôi rất thích áp dụng kiến trúc "feature-first" – tức là chia ứng dụng thành từng "tính năng" độc lập. Thường thì cấu trúc của tôi sẽ kiểu như này:features: Nơi chứa các tính năng chính của ứng dụng (ví dụ: auth, products, dashboard).shared: Chứa các tiện ích, component, service dùng chung cho nhiều tính năng.layout: Nơi "an cư" của header, sidebar, footer.Và điều thú vị là, mỗi "tính năng" trong thư mục features lại có một cấu trúc con rất "riêng":data-access: Chứa các service, logic quản lý trạng thái.feature: Nơi đặt các "smart component" (component chứa logic chính).ui: Nơi đặt các "dumb component" (component chỉ lo về giao diện).Để "tự động hóa" việc tạo ra cấu trúc phức tạp này, tôi đã "chế tạo" một Schematic riêng (bạn có thể tìm thấy nó trên GitHub của tôi).Con "robot" này của tôi làm được gì?Tạo hẳn một thư mục feature mới cùng các thư mục con và file cơ bản.Thêm một service (có sẵn HttpClient injection – quá tiện!).Tạo một smart component "thông minh" kèm theo cấu hình routing đầy đủ.Cập nhật file tsconfig để hỗ trợ path aliases (ví dụ: @my-feature), giúp việc import gọn gàng hơn nhiều.Thêm route mới vào file cấu hình route trung tâm một cách "thông minh", đảm bảo nó được đặt đúng chỗ, nhất là trước các route wildcard **.Bạn thấy đấy, đây không chỉ là việc tiết kiệm thời gian gõ phím đâu. Nó là về việc biến một kiến trúc tốt trở nên DỄ THỰC HIỆN và KHÓ SAI LỆCH! Cứ như có người giám sát và dọn dẹp cho bạn ngay từ đầu vậy!<img src='https://truyentranh.letranglan.top/api/v1/proxy?url=https://i.imgur.com/feature_architecture_schematic.png' alt='Schematic giúp tự động hóa kiến trúc dự án Angular'>Tổng kết lại, Schematics là một trong những công cụ "hiếm có khó tìm" cho phép bạn tự động hóa cả boilerplate (mã lặp lại) lẫn các best practices. "Sinh mã tự động" (Codegen) không chỉ là để bạn gõ ít phím hơn đâu. Nó là về việc nâng tầm khả năng của đội ngũ bạn, giúp mọi người xây dựng đúng thứ, theo đúng cách, và CHUẨN XÁC hơn!Angular Schematics chính là một công cụ mạnh mẽ nhưng lại ít được sử dụng đúng cách mà các kỹ sư có thể tận dụng để:Mã hóa kiến trúc: Biến các quy tắc kiến trúc thành code.Giảm thời gian onboarding: "Lính mới" dễ dàng bắt nhịp mà không cần học thuộc cả tấn tài liệu.Giảm lỗi phát sinh: Vì mọi thứ đã được chuẩn hóa.Tăng tốc độ phát triển: Mọi thứ trơn tru mà không hề "hỗn loạn".Vậy nên, nếu bạn đang ngồi viết tài liệu kiến trúc dài lê thê hay các checklist review "khô khan", hãy thử dừng lại một chút và tự hỏi: "Liệu cái này có thể biến thành một Schematic được không nhỉ?". Biết đâu đó lại là bước đột phá cho dự án của bạn!<img src='https://truyentranh.letranglan.top/api/v1/proxy?url=https://i.imgur.com/schematics_productivity.png' alt='Schematics giúp tăng năng suất làm việc nhóm'>Nếu bạn đã thấy "ngứa tay" và muốn tự mình "chế tạo robot" Schematic thì đây là một vài tài liệu hữu ích nè:Tài liệu chính thức của Angular Schematics: <a href="https://truyentranh.letranglan.top/api/v1/proxy?url=https://angular.dev/tools/cli/schematics">https://angular.dev/tools/cli/schematics</a>Giải thích Schematic một cách siêu đơn giản: <a href="https://truyentranh.letranglan.top/api/v1/proxy?url=https://www.telerik.com/blogs/the-what-and-how-of-angular-schematics-the-super-simple-version">https://www.telerik.com/blogs/the-what-and-how-of-angular-schematics-the-super-simple-version</a>Chơi đùa với Schematics – Angular: <a href="https://truyentranh.letranglan.top/api/v1/proxy?url=https://nado261.medium.com/schematics-angular-5110c008f0f">https://nado261.medium.com/schematics-angular-5110c008f0f</a>Hướng dẫn tự viết Schematic chi tiết: <a href="https://truyentranh.letranglan.top/api/v1/proxy?url=https://angular.dev/tools/cli/schematics-authoring">https://angular.dev/tools/cli/schematics-authoring</a>

Lê Lân

09/07/2025

Khám phá cách xây dựng ứng dụng frontend bền vững và dễ bảo trì với Clean Architecture. Bài viết này hướng dẫn chi tiết từng bước quy trình phát triển, từ khởi tạo đến triển khai, sử dụng ví dụ về ứng dụng đếm đơn giản.

Lê Lân

09/07/2025

Khám phá bản tin hàng tuần từ Unicorn Club với Adam: nguồn cảm hứng thiết kế, thủ thuật CSS, bài viết UX sâu sắc và thông tin sự kiện mới nhất dành cho nhà phát triển front-end và nhà thiết kế UX/UI. Cập nhật các xu hướng về UX, CSS, AI và mẹo tối ưu hóa trang web.

Lê Lân

08/07/2025

Khám phá bản tin Unicorn Club tuần này với những cảm hứng thiết kế, mẹo CSS hữu ích và bài viết UX sâu sắc. Cập nhật xu hướng mới nhất, từ onboarding người dùng đến chi phí ẩn của cuộn vô tận, cùng các sự kiện công nghệ nổi bật.

Lê Lân

06/07/2025

Tôi đã dùng 100% AI để biến đổi giao diện website cá nhân từ Angular. Liệu AI có thể thay thế kỹ sư phần mềm? Khám phá những 'cơn lú' và giới hạn của các LLM như Claude, Gemini, GPT trong thực tế.

Lê Lân

04/07/2025

Ranh giới giữa frontend và backend đang mờ dần! Tìm hiểu về xu hướng mới nơi frontend developers có thể viết logic backend trực tiếp, giúp phát triển nhanh hơn, dễ quản lý hơn và vẫn đảm bảo bảo mật cho các ứng dụng cấp doanh nghiệp.

Lê Lân

03/07/2025

Tìm hiểu vì sao việc lạm dụng useContext có thể làm chậm ứng dụng React của bạn và cách useContextSelector giúp giải quyết vấn đề re-render toàn cục, mang lại hiệu năng vượt trội cho ứng dụng của bạn.

Lê Lân

03/07/2025

Tìm hiểu sự thật về Flutter năm 2025: liệu framework này có đang 'chết' như lời đồn, hay đang tiến hóa mạnh mẽ? Bài viết sẽ làm rõ các tin đồn, phân tích sự phát triển của Flutter 4.0, Impeller Engine, sự ra đời của Flock, và cơ hội việc làm.

Lê Lân

03/07/2025

Khám phá kiến trúc đột phá giúp AI tự động tạo code chất lượng cao, tuân thủ kiến trúc và tự cập nhật tài liệu. Từ một PoC, chúng ta sẽ thấy làm thế nào AI có thể trở thành đối tác phát triển đáng tin cậy, giải quyết các vấn đề về tính nhất quán và bảo trì dự án lớn.

Lê Lân

03/07/2025

Khám phá Shadcn UI: giải pháp hoàn hảo cho giao diện front-end hiện đại, kết hợp Radix UI và Tailwind CSS. Học cách cài đặt và sử dụng trong React + TypeScript.

Lê Lân

03/07/2025

Khám phá những công nghệ Front-end dẫn đầu xu hướng năm 2025 như React, Next.js, Tailwind CSS, Vite và Svelte. Nắm bắt các framework và công cụ không thể thiếu để phát triển web hiện đại.

Lê Lân

02/07/2025

Tuần này, khám phá cảm hứng thiết kế, mẹo CSS, insights UX, và tin tức công nghệ từ Unicorn Club. Đăng ký nhận newsletter độc quyền và đừng bỏ lỡ các sự kiện công nghệ sắp tới. Nâng cao kỹ năng với Adam!

Lê Lân

01/07/2025

Khám phá MediBot, chatbot AI y tế mã nguồn mở được thiết kế để đơn giản hóa giao tiếp y tế, hiểu người dùng và cung cấp thông tin đáng tin cậy, không còn những bot FAQ khô khan.

Lê Lân

01/07/2025

Trong kỷ nguyên web 2025 với frameworks, AI, Progressive Enhancement vẫn là chìa khóa để ứng dụng của bạn hoạt động mượt mà trên mọi thiết bị và kết nối, đảm bảo không ai bị bỏ lại phía sau.

Lê Lân

30/06/2025

Virtual DOM (VDOM) từng là một giải pháp hữu ích, nhưng với sự tiến hóa của trình duyệt hiện đại, nó đang dần trở thành gánh nặng và lỗi thời. Bài viết phân tích lý do VDOM không còn cần thiết, các framework hiện đại không sử dụng VDOM, và sự ra đời của Vue Vapor.

Lê Lân

28/06/2025

Bạn có từng "ngứa mắt" với HTML đầy class Tailwind không? Khám phá lý do Tailwind đang "làm mưa làm gió" trong giới lập trình, so với Bootstrap "huyền thoại" và bí quyết kết hợp với AI để tạo UI đẹp lung linh chỉ trong tích tắc!

Lê Lân

26/06/2025

Khám phá WebAR – công nghệ thực tế tăng cường trên trình duyệt web, cho phép bạn trải nghiệm AR mà không cần tải ứng dụng. Tìm hiểu lý do WebAR quan trọng, các công cụ phổ biến (AR.js, A-Frame, 8thWall, WebXR), các mẹo xây dựng và ứng dụng thực tế đầy cảm hứng. Đã đến lúc biến ý tưởng của bạn thành hiện thực ảo!

Lê Lân

25/06/2025