Fatih Kadir Akın

Phát triển một công cụ chuyển đổi tiền tệ toàn diện sử dụng HTML5, CSS3, JavaScript và một Exchange Rate API đáng tin cậy. Tạo giao diện gọn gàng, trực quan với các ô nhập liệu và bộ chọn loại tiền tệ nổi bật. Triển khai tỷ giá hối đoái thời gian thực kèm theo chỉ báo dấu thời gian cho biết độ mới của dữ liệu. Hỗ trợ hơn 170 loại tiền tệ toàn cầu bao gồm cả tiền điện tử (crypto) với ký hiệu và định dạng phù hợp. Duy trì nhật ký lịch sử chuyển đổi kèm theo dấu thời gian và thông tin tỷ giá. Cho phép người dùng đánh dấu các cặp tiền tệ yêu thích để truy cập nhanh. Tạo các biểu đồ lịch sử tỷ giá tương tác với khoảng thời gian có thể tùy chỉnh. Triển khai chức năng hoạt động ngoại tuyến sử dụng tỷ giá đã lưu đệm kèm cảnh báo rõ ràng về độ trễ dữ liệu. Thêm một máy tính bỏ túi tích hợp sẵn để thực hiện các phép chuyển đổi và tính toán số học phức tạp. Tạo tính năng cảnh báo tỷ giá khi chạm mức tỷ giá mục tiêu kèm thông báo tùy chọn. Bao gồm bảng so sánh song song tỷ giá của các nhà cung cấp khác nhau khi có dữ liệu. Hỗ trợ in và xuất kết quả chuyển đổi ở nhiều định dạng (PDF, CSV, JSON).

Tạo một trình khởi tạo mật khẩu an toàn toàn diện sử dụng HTML5, CSS3 và JavaScript với độ ngẫu nhiên mạnh về mặt mật mã học. Xây dựng giao diện trực quan có khung xem trước mật khẩu theo thời gian thực. Cho phép tùy chỉnh độ dài mật khẩu kèm các cấu hình cài sẵn cho các mức độ bảo mật khác nhau. Bao gồm các nút bật/tắt cho từng loại ký tự (chữ hoa, chữ thường, chữ số, ký tự đặc biệt) kèm chỉ báo trực quan. Triển khai thước đo độ mạnh mật khẩu nâng cao hiển thị số bit entropy và thời gian bẻ khóa ước tính. Thêm nút sao chép bằng một cú nhấp chuột có xác nhận và tự động xóa bộ nhớ tạm (clipboard). Tạo tính năng két sắt lưu trữ mật khẩu (password vault) với bộ nhớ localStorage được mã hóa. Tạo đồng thời nhiều mật khẩu cùng lúc với các tùy chọn tạo hàng loạt. Duy trì lịch sử mật khẩu kèm theo dấu thời gian khởi tạo. Tính toán và hiển thị độ hỗn loạn (entropy) bằng các công thức tiêu chuẩn. Cung cấp các tùy chọn tạo mật khẩu dễ nhớ (dựa trên cụm từ, dựa trên khuôn mẫu). Bao gồm chức năng xuất danh sách mật khẩu kèm các tùy chọn mã hóa bảo vệ.

Xây dựng một công cụ màu sắc cấp độ chuyên nghiệp bằng HTML5, CSS3 và JavaScript dành cho các nhà thiết kế và lập trình viên. Tạo giao diện trực quan với nhiều phương thức chọn màu bao gồm ống nhỏ giọt (eyedropper), bánh xe màu, thanh trượt và các ô nhập giá trị. Triển khai chuyển đổi thời gian thực giữa các định dạng màu (RGB, RGBA, HSL, HSLA, HEX, CMYK) kèm chức năng sao chép. Thêm trình tạo bảng màu (palette generator) với các tùy chọn phối màu bổ túc (complementary), tương đồng (analogous), bộ ba (triadic), bộ bốn (tetradic) và đơn sắc (monochromatic). Bao gồm hệ thống mục yêu thích với các bộ sưu tập được đặt tên và các tùy chọn xuất tệp. Triển khai trực quan hóa các quy tắc hài hòa màu sắc với khả năng điều chỉnh tương tác. Tạo trình tạo dải chuyển màu (gradient generator) hỗ trợ chuyển màu tuyến tính (linear), tỏa tròn (radial) và hình nón (conic) với nhiều điểm dừng màu. Thêm công cụ kiểm tra khả năng tiếp cận theo tiêu chuẩn WCAG với tỷ lệ tương phản và mô phỏng các dạng mù màu. Triển khai tính năng sao chép bằng một cú nhấp chuột cho các đoạn mã CSS, SCSS và SVG. Bao gồm thuật toán đặt tên màu để gợi ý tên gọi cho các màu được chọn. Hỗ trợ xuất bảng màu sang nhiều định dạng khác nhau (Adobe ASE, JSON, biến CSS, SCSS).

Phát triển một ứng dụng trắc nghiệm tương tác toàn diện bằng HTML5, CSS3 và JavaScript. Tạo giao diện người dùng cuốn hút với hiệu ứng chuyển cảnh mượt mà giữa các câu hỏi. Hỗ trợ nhiều dạng câu hỏi bao gồm trắc nghiệm nhiều lựa chọn, đúng/sai, ghép nối và trả lời ngắn với tính năng chấm điểm tự động. Triển khai bộ đếm thời gian có thể cấu hình cho từng câu hỏi kèm đồng hồ đếm ngược trực quan. Thêm tính năng theo dõi điểm số chi tiết với số điểm dựa trên độ khó và thời gian phản hồi. Hiển thị thanh tiến độ động cho biết tỷ lệ phần trăm hoàn thành. Bao gồm chế độ xem lại để kiểm tra các câu trả lời đúng/sai kèm theo lời giải thích sau khi hoàn thành bài trắc nghiệm. Triển khai bảng xếp hạng lưu trữ bền vững bằng localStorage. Tổ chức các câu hỏi thành từng danh mục với biểu tượng và mô tả tùy chỉnh. Hỗ trợ nhiều cấp độ khó ảnh hưởng đến cách tính điểm và giới hạn thời gian. Tạo bản tóm tắt kết quả chi tiết kèm phân tích hiệu suất làm bài và gợi ý cải thiện. Thêm chức năng chia sẻ kết quả lên mạng xã hội với thông điệp tùy chỉnh.

Tạo một ứng dụng hẹn giờ pomodoro toàn diện sử dụng HTML5, CSS3 và JavaScript tuân theo kỹ thuật quản lý thời gian Pomodoro. Thiết kế giao diện thanh lịch với vòng tròn chỉ báo tiến độ lớn có hiệu ứng động biểu diễn trực quan phiên làm việc hiện tại. Cho phép tùy chỉnh thời lượng các phiên làm việc (mặc định 25min), nghỉ giải lao ngắn (mặc định 5min) và nghỉ giải lao dài (mặc định 15min). Bao gồm tích hợp danh sách công việc nơi người dùng có thể gắn các phiên pomodoro với những nhiệm vụ cụ thể. Thêm thông báo âm thanh có thể cấu hình khi chuyển đổi giữa các phiên kèm điều khiển âm lượng. Triển khai theo dõi thống kê chi tiết về năng suất hàng ngày/hàng tuần bằng các biểu đồ trực quan. Sử dụng localStorage để lưu giữ cài đặt và lịch sử giữa các phiên truy cập. Làm cho ứng dụng có thể cài đặt dưới dạng PWA với hỗ trợ ngoại tuyến và thông báo đẩy. Thêm các phím tắt bàn phím để điều khiển bộ hẹn giờ nhanh chóng (bắt đầu/tạm dừng/đặt lại). Bao gồm nhiều tùy chọn chủ đề giao diện với màu sắc và phông chữ có thể tùy chỉnh. Thêm chế độ tập trung giúp chặn các yếu tố gây xao nhãng trong suốt phiên làm việc.

Tạo một trình phân tích gói tin mạng chạy trên dòng lệnh bằng ngôn ngữ C sử dụng thư viện libpcap. Triển khai tính năng bắt gói tin từ các giao diện mạng (network interfaces) với các tùy chọn bộ lọc. Thêm phân tích giao thức cho các giao thức phổ biến (TCP, UDP, HTTP, DNS, v.v.). Bao gồm thống kê lưu lượng mạng với mức sử dụng băng thông và số lượng kết nối. Triển khai giải mã gói tin với thông tin tiêu đề (header) chi tiết. Thêm chức năng xuất dữ liệu ở định dạng PCAP và CSV. Bao gồm hệ thống cảnh báo đối với các mẫu lưu lượng đáng ngờ. Triển khai theo dõi kết nối kèm thông tin trạng thái. Thêm tính năng tra cứu vị trí địa lý cho các địa chỉ IP. Bao gồm các đối số dòng lệnh cho tất cả các tùy chọn kèm theo giá trị mặc định hợp lý. Triển khai đầu ra có phân biệt màu sắc để dễ đọc hơn.

Tạo một máy tính khoa học toàn diện bằng HTML5, CSS3 và JavaScript mô phỏng các máy tính bỏ túi chuyên nghiệp. Triển khai tất cả các phép toán số học cơ bản tuân thủ đúng thứ tự ưu tiên phép tính. Bao gồm các hàm khoa học nâng cao (lượng giác, logarit, lũy thừa, thống kê) kèm nút chuyển đổi đơn vị độ/radian. Thêm các thao tác bộ nhớ (M+, M-, MR, MC) với các chỉ báo hiển thị trực quan. Duy trì nhật ký lịch sử tính toán có thể cuộn xem, xóa hoặc lưu lại. Triển khai hỗ trợ bàn phím đầy đủ với ánh xạ phím và phím tắt hợp lý. Thêm cơ chế xử lý lỗi chặt chẽ cho phép chia cho 0, các phép toán không hợp lệ và tình trạng tràn số kèm theo các thông báo lỗi hữu ích. Tạo thiết kế đáp ứng tự động chuyển đổi giữa bố cục tiêu chuẩn và bố cục khoa học dựa trên kích thước hoặc hướng xoay màn hình. Bao gồm nhiều tùy chọn chủ đề giao diện (cổ điển, hiện đại, độ tương phản cao). Thêm phản hồi âm thanh tùy chọn khi nhấn nút kèm điều khiển âm lượng. Triển khai chức năng sao chép/dán cho kết quả và biểu thức tính toán.

Tạo một ứng dụng quản lý việc cần làm (todo app) đáp ứng bằng HTML5, CSS3 và JavaScript thuần (vanilla JavaScript). Ứng dụng cần có giao diện hiện đại, gọn gàng sử dụng CSS Grid/Flexbox với các điều khiển trực quan. Triển khai đầy đủ chức năng CRUD (thêm/sửa/xóa/hoàn thành công việc) với hiệu ứng chuyển động mượt mà. Bao gồm phân loại công việc kèm mã màu và các mức độ ưu tiên (thấp/trung bình/cao). Thêm ngày đến hạn với thành phần chọn ngày (date-picker) và thông báo nhắc nhở. Sử dụng localStorage để lưu giữ dữ liệu bền vững giữa các phiên làm việc. Triển khai chức năng tìm kiếm với các bộ lọc theo trạng thái, danh mục và khoảng thời gian. Thêm tính năng kéo và thả để sắp xếp lại thứ tự công việc bằng HTML5 Drag and Drop API. Đảm bảo thiết kế đáp ứng hoàn toàn với các điểm ngắt (breakpoints) phù hợp bằng media queries. Bao gồm nút chuyển đổi chủ đề tối/sáng tôn trọng tùy chọn hệ thống của người dùng. Thêm các tương tác vi mô (micro-interactions) và hiệu ứng chuyển cảnh tinh tế để nâng cao trải nghiệm người dùng (UX).

Tạo một trò chơi không chiến nhiều người chơi sống động sử dụng Three.js, HTML5, CSS3 và JavaScript kết hợp với WebSocket để kết nối mạng thời gian thực. Triển khai mô hình máy bay 3D chi tiết với vật lý bay chân thực bao gồm điều khiển chúc/ngóc mũi (pitch), liệng hướng (yaw), nghiêng cánh (roll) và tay ga (throttle). Thêm điều khiển góc máy quay mượt mà đi theo máy bay của người chơi với các góc nhìn có thể cấu hình (buồng lái, góc nhìn đuổi theo phía sau, góc nhìn quỹ đạo xoay quanh). Tạo môi trường bầu trời (skybox) với thời gian động trong ngày và hiệu ứng thời tiết. Triển khai chức năng nhiều người chơi bằng WebSocket để cập nhật vị trí thời gian thực, chiến đấu và đồng bộ hóa trạng thái trò chơi. Thêm các hệ thống vũ khí với vật lý đường đạn, phát hiện va chạm trúng đích và mô hình sát thương. Bao gồm hiệu ứng hạt (particle effects) cho luồng khí thải động cơ, khai hỏa vũ khí, vụ nổ và hư hại. Tạo giao diện hiển thị trên kính buồng lái (HUD) cho biết tốc độ, độ cao, hướng bay, radar, máu và trạng thái vũ khí. Triển khai hiệu ứng âm thanh cho động cơ, vũ khí, vụ nổ và âm thanh môi trường bằng Web Audio API. Thêm các chế độ đấu bao gồm đấu sinh tử tự do (deathmatch) và đấu đội kèm hệ thống tính điểm. Bao gồm tính năng tùy chỉnh trang bị máy bay (loadouts) với các loại vũ khí và kỹ năng khác nhau. Tạo hệ thống phòng chờ (lobby) để tạo trận đấu và chia đội. Triển khai dự đoán phía máy khách (client-side prediction) và bù trễ mạng (lag compensation) để mang lại trải nghiệm nhiều người chơi mượt mà. Thêm bản đồ thu nhỏ (mini-map) hiển thị vị trí người chơi và các mục tiêu. Bao gồm hệ thống phát lại (replay) để xem lại trận đấu và tạo các đoạn cắt khoảnh khắc nổi bật. Tạo hệ thống điều khiển nhạy bén hỗ trợ cả đầu vào bàn phím/chuột lẫn tay cầm chơi game (gamepad).

Xây dựng một ứng dụng ghi chú markdown giàu tính năng bằng HTML5, CSS3 và JavaScript. Tạo giao diện chia đôi màn hình với trình soạn thảo văn bản phong phú ở một bên và khung xem trước markdown trực tiếp (live preview) ở bên kia. Triển khai hỗ trợ đầy đủ cú pháp markdown bao gồm bảng biểu, khối mã có tô sáng cú pháp (syntax highlighting) và công thức toán học LaTeX. Thêm hệ thống tổ chức phân cấp với các danh mục lồng nhau, thẻ gắn (tags) và mục yêu thích. Bao gồm chức năng tìm kiếm mạnh mẽ với các bộ lọc và đánh chỉ mục nội dung. Sử dụng localStorage kèm tùy chọn xuất/nhập tệp để sao lưu dữ liệu. Hỗ trợ xuất ghi chú sang các định dạng PDF, HTML và markdown. Triển khai chế độ tối/sáng có thể tùy chỉnh cùng các chủ đề màu tô sáng cú pháp. Tạo bố cục đáp ứng thích nghi với các kích thước màn hình khác nhau với các bảng điều khiển có thể thu gọn. Thêm các phím tắt bàn phím giúp tăng năng suất cho mọi thao tác phổ biến. Bao gồm chức năng tự động lưu kèm lịch sử phiên bản và tùy chọn khôi phục.

Xây dựng một công cụ tính toán chỉ số sức khỏe toàn diện bằng HTML5, CSS3 và JavaScript dựa trên các tiêu chuẩn y khoa. Tạo giao diện gọn gàng, dễ tiếp cận với các biểu mẫu nhập liệu từng bước. Triển khai tính toán chỉ số BMI chính xác kèm thang phân loại trực quan và đánh giá nguy cơ sức khỏe. Thêm công cụ tính tỷ lệ mỡ cơ thể sử dụng nhiều phương pháp (Hải quân Hoa Kỳ - Navy, Jackson-Pollock, mô phỏng BIA). Tính toán khoảng cân nặng lý tưởng bằng nhiều công thức (Hamwi, Devine, Robinson, Miller). Triển khai công cụ tính nhu cầu calo chi tiết với chỉ số BMR (sử dụng phương trình Harris-Benedict, Mifflin-St Jeor và Katch-McArdle) và TDEE dựa trên mức độ vận động. Bao gồm các khuyến nghị sức khỏe cá nhân hóa dựa trên các chỉ số đã tính toán. Hỗ trợ cả hệ đo lường mét và hệ Anh (imperial) với khả năng chuyển đổi mượt mà. Lưu trữ hồ sơ người dùng và lịch sử đo lường kèm trực quan hóa xu hướng. Tạo các biểu đồ tiến trình tương tác hiển thị sự thay đổi theo thời gian. Tạo các báo cáo PDF có thể in hoặc xuất ra tệp chứa đầy đủ các chỉ số và khuyến nghị.

Tạo một trình xem PDF trên nền tảng web sử dụng HTML5, CSS3, JavaScript và thư viện PDF.js. Xây dựng giao diện gọn gàng với các nút điều khiển điều hướng trực quan. Triển khai điều hướng trang kèm khung nhìn ảnh thu nhỏ (thumbnails) và mục lục (outline view). Thêm tính năng tìm kiếm văn bản với việc tô sáng kết quả khớp. Bao gồm các điều khiển thu phóng và căn vừa chiều rộng/chiều cao trang. Triển khai tính năng chọn và sao chép văn bản. Thêm các công cụ chú thích bao gồm tô sáng (highlights), ghi chú và vẽ tay. Hỗ trợ xoay tài liệu và chế độ trình chiếu (presentation mode). Bao gồm chức năng in ấn với các tùy chọn cấu hình. Tạo thiết kế đáp ứng hoạt động tốt trên mọi thiết bị. Thêm tính năng hiển thị thuộc tính và siêu dữ liệu của tài liệu.

Xây dựng một bộ hẹn giờ thiền chánh niệm sử dụng HTML5, CSS3 và JavaScript. Tạo một giao diện thanh tịnh, không gây xao nhãng với phong cách thiết kế lấy cảm hứng từ thiên nhiên. Triển khai các phiên thiền có thể tùy chỉnh với các khoảng thời gian chuẩn bị, thiền định và nghỉ ngơi. Thêm các tùy chọn âm thanh môi trường bao gồm âm thanh tự nhiên, sóng âm hai tai (binaural beats) và tiếng ồn trắng (white noise). Bao gồm tính năng thiền có hướng dẫn với các lời nhắc bằng giọng nói có thể tùy chỉnh. Triển khai tiếng chuông báo chuyển giai đoạn với điều khiển âm lượng và lựa chọn âm thanh. Thêm tính năng theo dõi lịch sử phiên thiền và số liệu thống kê. Tạo các hướng dẫn nhịp thở trực quan bằng hoạt ảnh. Hỗ trợ sử dụng ngoại tuyến dưới dạng ứng dụng web tiến bộ (PWA). Bao gồm chế độ nền tối (dark mode) và nhiều chủ đề giao diện. Thêm tính năng lên lịch phiên thiền kèm thông báo nhắc nhở.

Phát triển một trình phát nhạc trên nền tảng web sử dụng HTML5, CSS3 và JavaScript kết hợp với Web Audio API. Tạo giao diện hiện đại có hiển thị ảnh bìa album và hiệu ứng sóng nhạc trực quan (visualizations). Triển khai quản lý danh sách phát (playlist) với khả năng kéo và thả để sắp xếp lại thứ tự bài hát. Thêm các nút điều khiển âm thanh bao gồm phát/tạm dừng, chuyển bài, tua, âm lượng và tốc độ phát. Bao gồm chế độ phát ngẫu nhiên (shuffle) và lặp lại (repeat) kèm các chỉ báo trực quan. Hỗ trợ nhiều định dạng âm thanh cùng cơ chế dự phòng (fallbacks). Triển khai bộ cân bằng âm thanh (equalizer) 10 dải tần với các cấu hình cài đặt sẵn (presets). Thêm tính năng trích xuất và hiển thị siêu dữ liệu (metadata) từ các tệp âm thanh. Tạo thiết kế đáp ứng hoạt động tốt trên mọi thiết bị. Bao gồm các phím tắt bàn phím để điều khiển phát nhạc. Hỗ trợ phát nhạc trong nền với tích hợp Media Session API.

Tạo một ứng dụng tìm kiếm công thức nấu ăn sử dụng HTML5, CSS3, JavaScript và một API ẩm thực. Xây dựng giao diện hấp dẫn trực quan với hình ảnh món ăn đẹp mắt và điều hướng dễ hiểu. Triển khai tìm kiếm nâng cao với bộ lọc theo nguyên liệu, nền ẩm thực, chế độ ăn kiêng và thời gian chuẩn bị. Thêm phần đánh giá và nhận xét của người dùng với hệ thống chấm sao. Bao gồm thông tin dinh dưỡng chi tiết với các chỉ báo trực quan về lượng calo, chất dinh dưỡng đa lượng (macros) và các chất gây dị ứng. Hỗ trợ lưu công thức nấu ăn và phân loại vào các bộ sưu tập. Triển khai lịch lập kế hoạch bữa ăn với chức năng kéo và thả. Thêm tính năng tự động điều chỉnh quy mô khẩu phần kèm việc tính toán lại định lượng nguyên liệu. Bao gồm chế độ nấu ăn với hướng dẫn từng bước và bộ hẹn giờ. Hỗ trợ truy cập ngoại tuyến vào các công thức đã lưu. Thêm chức năng chia sẻ lên mạng xã hội cho các công thức yêu thích.

Phát triển một ứng dụng theo dõi ngân sách toàn diện sử dụng HTML5, CSS3 và JavaScript. Tạo bảng điều khiển trực quan hiển thị thu nhập, chi tiêu, khoản tiết kiệm và tình trạng ngân sách. Triển khai quản lý giao dịch với các danh mục, thẻ gắn (tags) và các giao dịch định kỳ. Thêm các biểu đồ và đồ thị tương tác để phân tích chi tiêu theo danh mục và khoảng thời gian. Bao gồm tính năng thiết lập mục tiêu ngân sách kèm theo dõi tiến độ và cảnh báo. Hỗ trợ nhiều tài khoản và chuyển tiền qua lại giữa các tài khoản. Triển khai tính năng quét và lưu trữ hóa đơn bằng camera của thiết bị. Thêm chức năng xuất báo cáo ở các định dạng CSV and PDF. Tạo thiết kế đáp ứng theo hướng ưu tiên thiết bị di động (mobile-first). Bao gồm chức năng sao lưu và khôi phục dữ liệu. Thêm các tính năng dự báo để dự đoán tình hình tài chính trong tương lai dựa trên xu hướng hiện tại.

Tạo một ứng dụng vẽ tương tác sử dụng HTML5 Canvas, CSS3 và JavaScript. Xây dựng giao diện gọn gàng với khả năng chọn công cụ trực quan. Triển khai nhiều công cụ vẽ bao gồm cọ vẽ, bút chì, hình khối, văn bản và cục tẩy. Thêm tính năng chọn màu với danh sách màu dùng gần đây, bộ chọn màu (color picker) và các bảng màu. Bao gồm hỗ trợ đa lớp (layers) với các tùy chọn độ mờ đục (opacity) và chế độ hòa trộn (blend mode). Triển khai chức năng hoàn tác/làm lại (undo/redo) với lịch sử các trạng thái. Thêm tính năng nhập và xuất hình ảnh ở nhiều định dạng (PNG, JPG, SVG). Hỗ trợ thay đổi kích thước và xoay vùng vẽ canvas. Triển khai điều hướng thu phóng (zoom) và kéo trượt (pan). Thêm các công cụ chọn vùng với khả năng di chuyển, thay đổi kích thước và biến đổi hình dạng (transform). Bao gồm các phím tắt bàn phím cho những thao tác phổ biến.

Xây dựng một bảng điều khiển thời tiết toàn diện sử dụng HTML5, CSS3, JavaScript và OpenWeatherMap API. Tạo một giao diện bắt mắt hiển thị điều kiện thời tiết hiện tại với các biểu tượng phù hợp và thay đổi hình nền dựa trên thời tiết/thời gian trong ngày. Hiển thị dự báo chi tiết trong 5 ngày kèm khả năng mở rộng xem chi tiết từng giờ cho mỗi ngày. Triển khai tìm kiếm vị trí có tính năng tự động hoàn thành (autocomplete) và lịch sử tìm kiếm, hỗ trợ cả tên thành phố lẫn tọa độ địa lý. Thêm hỗ trợ định vị địa lý (geolocation) để tự động phát hiện vị trí của người dùng. Bao gồm nút chuyển đổi đơn vị nhiệt độ (°C/°F) và định dạng thời gian. Hiển thị các cảnh báo thời tiết khắc nghiệt với việc làm nổi bật mức độ ưu tiên. Hiển thị dữ liệu khí tượng chi tiết bao gồm tốc độ/hướng gió, độ ẩm, áp suất khí quyển, chỉ số tia UV và chất lượng không khí khi có sẵn. Bao gồm thời gian mặt trời mọc/mặt trời lặn kèm chỉ báo trực quan. Tạo bố cục đáp ứng hoàn toàn (responsive layout) bằng CSS Grid thích ứng với mọi kích thước thiết bị với mật độ thông tin hợp lý.

Tạo một công cụ đo điểm chuẩn (benchmark) HTTP hiệu năng cao bằng ngôn ngữ Go. Triển khai tính năng phát sinh yêu cầu đồng thời với số lượng luồng (thread) có thể cấu hình được. Thêm các số liệu thống kê chi tiết bao gồm độ trễ, thông lượng và tỷ lệ lỗi. Bao gồm hỗ trợ cho các giao thức HTTP/1.1, HTTP/2 và HTTP/3. Triển khai quản lý tiêu đề (header) và cookie tùy chỉnh. Thêm tính năng tạo biểu mẫu yêu cầu (request templating) cho nội dung động. Bao gồm xác thực phản hồi bằng biểu thức chính quy (regex) và kiểm tra mã trạng thái. Triển khai cấu hình TLS với các tùy chọn xác thực chứng chỉ. Thêm cấu hình hồ sơ tải (load profile) với các giai đoạn tăng tải dần (ramp-up) và duy trì tải ổn định (steady-state). Bao gồm báo cáo chi tiết với các phân vị (percentiles) và biểu đồ tần suất (histograms). Triển khai chế độ kiểm thử phân tán cho các kịch bản tải lớn.

---
name: web-application-testing-skill
description: Bộ công cụ để tương tác và kiểm thử các ứng dụng web cục bộ bằng Playwright.
---

# Kiểm thử Ứng dụng Web (Web Application Testing)

Kỹ năng này cho phép kiểm thử và gỡ lỗi toàn diện các ứng dụng web chạy cục bộ bằng công cụ tự động hóa Playwright.

## Khi nào Cần Sử dụng Kỹ năng Này

Hãy sử dụng kỹ năng này khi bạn cần:
- Kiểm thử chức năng frontend trên một trình duyệt thực tế
- Xác minh hành vi giao diện người dùng (UI) và các thao tác tương tác
- Gỡ lỗi các sự cố của ứng dụng web
- Chụp ảnh màn hình để làm tài liệu hoặc phục vụ gỡ lỗi
- Kiểm tra nhật ký bảng điều khiển của trình duyệt (browser console logs)
- Xác thực việc gửi biểu mẫu (form submissions) và các luồng thao tác của người dùng
- Kiểm tra thiết kế đáp ứng (responsive design) trên nhiều kích thước khung nhìn (viewports) khác nhau

## Điều kiện Tiên quyết (Prerequisites)

- Đã cài đặt Node.js trên hệ thống
- Một ứng dụng web đang chạy cục bộ (hoặc một đường dẫn URL có thể truy cập được)
- Playwright sẽ được tự động cài đặt nếu chưa có sẵn

## Các Khả năng Cốt lõi

### 1. Tự động hóa Trình duyệt (Browser Automation)
- Điều hướng tới các đường dẫn URL
- Nhấp vào các nút bấm và liên kết
- Điền dữ liệu vào các trường biểu mẫu
- Chọn các danh sách thả xuống (dropdowns)
- Xử lý các hộp thoại (dialogs) và thông báo cảnh báo (alerts)

### 2. Xác minh (Verification)
- Kiểm tra xác nhận sự hiện diện của phần tử (element presence)
- Xác minh nội dung văn bản
- Kiểm tra khả năng hiển thị của phần tử (element visibility)
- Xác thực đường dẫn URL
- Kiểm thử hành vi hiển thị đáp ứng (responsive behavior)

### 3. Gỡ lỗi (Debugging)
- Chụp ảnh màn hình
- Xem nhật ký bảng điều khiển (console logs)
- Kiểm tra các yêu cầu mạng (network requests)
- Gỡ lỗi các bài kiểm thử bị thất bại

## Ví dụ Sử dụng

### Ví dụ 1: Kiểm thử Điều hướng Cơ bản
```javascript
// Navigate to a page and verify title
await page.goto('http://localhost:3000');
const title = await page.title();
console.log('Page title:', title);
```

### Ví dụ 2: Tương tác với Biểu mẫu
```javascript
// Fill out and submit a form
await page.fill('#username', 'testuser');
await page.fill('#password', 'password123');
await page.click('button[type="submit"]');
await page.waitForURL('**/dashboard');
```

### Ví dụ 3: Chụp Ảnh Màn hình
```javascript
// Capture a screenshot for debugging
await page.screenshot({ path: 'debug.png', fullPage: true });
```

## Nguyên tắc Hướng dẫn (Guidelines)

1. **Luôn xác minh ứng dụng đang chạy** - Kiểm tra chắc chắn rằng máy chủ cục bộ có thể truy cập được trước khi chạy các bài kiểm thử
2. **Sử dụng lệnh chờ tường minh (explicit waits)** - Chờ cho các phần tử xuất hiện hoặc quá trình điều hướng hoàn tất trước khi tương tác
3. **Chụp ảnh màn hình khi gặp lỗi** - Chụp lại ảnh màn hình để giúp gỡ lỗi các sự cố nhanh hơn
4. **Dọn dẹp tài nguyên** - Luôn đóng trình duyệt sau khi đã thực hiện xong
5. **Xử lý hết thời gian chờ (timeouts) một cách mượt mà** - Thiết lập khoảng thời gian chờ hợp lý cho các thao tác chạy chậm
6. **Kiểm thử tăng dần từng bước** - Bắt đầu với các tương tác đơn giản trước khi đi vào các luồng phức tạp
7. **Sử dụng bộ chọn (selectors) một cách khôn ngoan** - Ưu tiên dùng `data-testid` hoặc các bộ chọn dựa trên vai trò (role-based selectors) hơn là các lớp CSS

## Các Mẫu Phổ biến (Common Patterns)

### Mẫu: Chờ Phần tử Xuất hiện
```javascript
await page.waitForSelector('#element-id', { state: 'visible' });
```

### Mẫu: Kiểm tra Xem Phần tử Có Tồn tại Không
```javascript
const exists = await page.locator('#element-id').count() > 0;
```

### Mẫu: Lấy Nhật ký Bảng điều khiển (Console Logs)
```javascript
page.on('console', msg => console.log('Browser log:', msg.text()));
```

### Mẫu: Xử lý Lỗi
```javascript
try {
  await page.click('#button');
} catch (error) {
  await page.screenshot({ path: 'error.png' });
  throw error;
}
```

## Các Hạn chế (Limitations)

- Yêu cầu môi trường Node.js
- Không thể kiểm thử các ứng dụng di động gốc (native mobile apps - hãy sử dụng React Native Testing Library để thay thế)
- Có thể gặp khó khăn với các luồng xác thực phức tạp
- Một số framework hiện đại có thể đòi hỏi cấu hình đặc thù riêng