Lesson 5: Responsive, Tailwind, AI

PreviousLesson 4: Layout NextLesson 6: Javascript, Typescript

Last updated 1 day ago

Lesson 5: Responsive, Tailwind, AI

Trong nội dung này, ta sẽ tìm hiểu về cách thiết lập để giao diện tương thích với các kích thước màn hình với khái niệm Responsive; sử dụng thêm thư viện về CSS, giúp thực hiện style giao diện nhanh chóng hơn với framework Tailwind

Responsive

Bản chất, giao diện không thể tự thích ứng được với các màn hình khác nhau, mà lập trình viên bắt buộc phải thiết kế, để cho giao diện có thể đáp ứng được.

Như giới thiệu trên, Responsive là một khái niệm chỉ rằng giao diện sẽ thích ứng được với các kích thước màn hình, thiết bị khác nhau.

Hiện nay, nhu cầu của người dùng điện thoại chiếm đại đa số, nên nếu trang Web, có khả năng thích ứng được với thiết bị điện thoại, đó là một điểm mạnh rất lớn, bởi chỉ cần có trình duyệt, đã có thể lướt Web, vậy nếu những dụng được triển khai trên nền tảng này, sẽ tiết kiệm được một lượng lớn tài nguyên trên điện thoại, thay vì phải tải về như những ứng dụng khác

Để có thể xem được ứng dụng web hiển thị trên nhiều kích thước màn hình khác nhau, với trình duyệt Chrome, chúng ta làm theo các bước sau:

Mở developer tools
Click vào nút “Toggle Device toolbar” hoặc tổ hợp phím Ctrl + Shift + M
Chọn thiết bị trong dropdown hoặc responsive

Về bản chất, Responsive, thật ra là viết CSS cho các điều kiện kích thước màn hình, thường ta chỉ cần tính theo kích thước chiều ngang (width) và sẽ quy định xem đối với các kích thước phổ biến như thế nào.

Tuỳ thuộc vào yêu cầu của dự án và mục tiêu mà ta sẽ chọn breakpoint (điểm giới hạn đâu là kích thước dành cho thiết bị nào)

Một số Breakpoint phổ biến:

SM: 640px
MD: 768px
LG: 1024px
XL: 1280px
2XL: 1536px

Ví dụ cài đặt CSS:

/* SM: ≥640px */
@media (min-width: 640px) {
  /* Code cho các thiết bị từ 640px trở lên */
  body {
    font-size: 14px;
  }
}

/* MD: ≥768px */
@media (min-width: 768px) {
  /* Code cho các thiết bị từ 768px trở lên */
  body {
    font-size: 16px;
  }
}

/* LG: ≥1024px */
@media (min-width: 1024px) {
  /* Code cho các thiết bị từ 1024px trở lên */
  body {
    font-size: 18px;
  }
}

/* XL: ≥1280px */
@media (min-width: 1280px) {
  /* Code cho các thiết bị từ 1280px trở lên */
  body {
    font-size: 20px;
  }
}

/* 2XL: ≥1536px */
@media (min-width: 1536px) {
  /* Code cho các thiết bị từ 1536px trở lên */
  body {
    font-size: 22px;
  }
}

min-width (mobile-first):
- Ưu tiên thiết bị di động.
- Thiết kế ban đầu tập trung vào điện thoại di động và mở rộng giao diện cho các màn hình lớn hơn.
max-width (desktop-first):
- Ưu tiên thiết bị có màn hình lớn như máy tính để bàn, laptop.
- Tạo giao diện phức tạp hơn cho màn hình lớn và dần đơn giản hóa cho màn hình nhỏ hơn.

Sử dụng như thế nào là do tư tưởng, cách tiếp cận của dự án mà cần linh động.

Tailwind CSS

Tailwind CSS là một framework CSS utility-first (tiện ích đầu tiên), cung cấp một loạt các class CSS được tạo sẵn, giúp xây dựng giao diện nhanh chóng mà không cần viết CSS từ đầu.

Thay vì viết các stylesheet tùy chỉnh, chỉ cần sử dụng các class tiện ích (utility class) trực tiếp trong HTML để kiểm soát bố cục, khoảng cách, màu sắc,...

Ban đầu cần một lượng thời gian để làm quen, nhưng sau đó sẽ hỗ trợ rất nhiều cho lập trình viên, tối ưu thời gian phát triển

Đọc hướng dẫn cài đặt tại: https://tailwindcss.com/docs/installation

Để đơn giản hoá, ta sẽ lựa chọn cài đặt với CDN bằng cách

thêm một thẻ script vào thẻ head:

<script src="https://cdn.tailwindcss.com"></script>

Ví dụ sử dụng:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
    <title>Box model & position</title>
</head>

<body>
    <div class="container">
        <div class="bg-[red] text-[white] font-bold">MINDX 1</div>
    </div>
</body>

</html>

Như ví dụ trên, không hề có file CSS, nhưng vẫn có thể style cho phần tử, thông qua class.

Tailwind cũng có quy luật đặt class theo tên các thuộc tính, ta nên lên tài liệu để tìm kiếm mỗi khi cần và không nhớ!

Một số class phổ biến:

container: Tạo container với chiều rộng tối đa thay đổi theo kích thước màn hình.
flex: Kích hoạt Flexbox.
grid: Kích hoạt CSS Grid Layout.
block: Hiển thị phần tử dưới dạng block (chiếm toàn bộ chiều ngang).
inline-block: Hiển thị phần tử dưới dạng inline block.
hidden: Ẩn phần tử.
p-[n]: Padding (đệm) cho tất cả các phía.
pt-[n], pr-[n], pb-[n], pl-[n]: Padding cho từng phía (trên, phải, dưới, trái).
m-[n]: Margin (lề) cho tất cả các phía.
mt-[n], mr-[n], mb-[n], ml-[n]: Margin cho từng phía (trên, phải, dưới, trái).
bg-[color]: Màu nền (background color).
text-[color]: Màu chữ (text color).
border-[color]: Màu viền (border color).
relative: Định vị tương đối.
absolute: Định vị tuyệt đối.
fixed: Định vị cố định.
sticky: Định vị sticky (bám dính).
hover:bg-[color]: Thay đổi màu nền khi hover.
focus:bg-[color]: Thay đổi màu nền khi phần tử được focus.

Với, bên trong cặp dấu [] là giá trị mong muốn. Ví dụ:

bg-[red]
text-[blue]
...

(Đọc thêm) Một chút quy tắc design

Quy tắc phối màu (Color Scheme)

Nguyên tắc 60-30-10

Nguyên tắc này được sử dụng để duy trì sự cân bằng màu sắc. Nó quy định tỷ lệ của ba nhóm màu chính trong thiết kế:

60%: Màu chủ đạo (primary color) – thường là màu nền, hoặc màu chi phối lớn trong giao diện.
30%: Màu thứ cấp (secondary color) – dùng cho các yếu tố như khối, nút, hay các phần khác nổi bật hơn một chút so với màu nền.
10%: Màu nhấn (accent color) – dùng cho các chi tiết nhỏ nhưng quan trọng, như nút CTA (Call to Action), liên kết, hoặc biểu tượng để thu hút sự chú ý.

Sử dụng bảng màu đơn sắc (Monochromatic Color Scheme)

Phối màu đơn sắc sử dụng các sắc độ khác nhau của một màu duy nhất (từ sáng đến tối) để tạo ra sự đồng bộ và tối giản. Điều này tạo nên một thiết kế tối giản và dễ nhìn.

Ví dụ: Dùng các sắc độ của màu xanh dương (blue) từ xanh nhạt cho nền đến xanh đậm cho các tiêu đề hoặc nút.

Sử dụng bảng màu bổ sung (Complementary Colors)

Màu bổ sung là các màu đối lập nhau trên bánh xe màu (color wheel), chẳng hạn như xanh dương và cam, đỏ và xanh lá. Điều này tạo ra sự tương phản mạnh và làm nổi bật các phần quan trọng.

Lưu ý: Không nên lạm dụng màu bổ sung quá nhiều vì có thể gây cảm giác quá mạnh và chói mắt. Nên sử dụng một cách tiết chế để nhấn mạnh các yếu tố chính.

Phối màu tương tự (Analogous Colors)

Màu tương tự là các màu liền kề nhau trên bánh xe màu, tạo ra sự hài hòa và dễ chịu. Ví dụ, màu xanh lá cây kết hợp với màu vàng hoặc xanh dương.

Ví dụ: Sử dụng màu xanh lam, xanh dương và xanh lá cây cho giao diện để tạo sự liên kết hài hòa.

Độ tương phản (Contrast)

Đảm bảo có sự tương phản giữa văn bản và nền để dễ đọc. Văn bản màu sáng trên nền tối, hoặc ngược lại, giúp cải thiện khả năng đọc. Đặc biệt, khi dùng màu trắng trên nền sáng, bạn cần đảm bảo rằng văn bản đủ tối (màu đen hoặc xám đậm).

Lưu ý về khả năng tiếp cận (accessibility): Hãy đảm bảo rằng độ tương phản giữa nền và văn bản đạt chuẩn để người dùng có vấn đề về thị lực cũng có thể dễ dàng sử dụng.

Sử dụng màu trung tính (Neutral Colors)

Các màu trung tính như trắng, xám, và đen thường được sử dụng trong phần nền, văn bản, và các yếu tố phụ để tránh làm rối mắt. Các màu mạnh và sáng hơn được dùng cho các yếu tố cần làm nổi bật.

Trên là một chút kiến thức về quy tắc phối màu, giúp lập trình viên nâng cao kỹ năng của bản thân trong việc phối màu sắc, ngoài ra còn rất nhiều nguyên tắc khác.

Lập trình viên vẫn cần đảm bảo theo bản thiết kế của hệ thống khi đã được đưa ra và các bạn có thể dùng kiến thức của mình để góp ý, cải thiện bản thiết kế.

Tailwind có cung cấp sách để các bạn có thể học hỏi thêm, tìm hiểu thêm tại: https://www.refactoringui.com/

Sách sẽ mất kinh phí mua, để cân nhắc, tham khảo trước tại:

Ứng dụng AI trong Lập Trình

AI là gì?

Là một lĩnh vực của khoa học máy tính giúp máy móc có thể thực hiện các nhiệm vụ yêu cầu trí thông minh của con người, chẳng hạn như học hỏi, suy luận, xử lý ngôn ngữ tự nhiên và nhận dạng hình ảnh.

Các phân loại của AI:

AI hẹp (Weak AI): AI chuyên dụng cho một nhiệm vụ cụ thể (ví dụ: ChatGPT, Siri, Google Translate).
AI mạnh (Strong AI): AI có khả năng suy nghĩ và lý luận như con người (chưa đạt được).
AGI (Artificial General Intelligence): AI có khả năng học và thực hiện bất kỳ nhiệm vụ trí tuệ nào mà con người có thể làm.

Đối với lập trình:

Hỗ trợ phát triển phần mềm: AI có thể giúp kiểm tra lỗi code, đề xuất cải tiến, và gợi ý mã nguồn (Copilot, CodeWhisperer).
Tự động hóa quy trình DevOps: Tối ưu CI/CD pipeline, dự báo lỗi hệ thống.
Tạo nội dung code tự động: Sử dụng AI để viết các đoạn mã lặp lại, gợi ý API, tối ưu thuật toán.
Hỗ trợ phân tích dữ liệu: AI giúp xử lý và phân tích dữ liệu lớn nhanh chóng.

Đạo đức sử dụng AI

Thách thức

Thiên vị trong AI: AI có thể bị ảnh hưởng bởi dữ liệu huấn luyện, dẫn đến thiên vị trong quyết định.
Riêng tư và bảo mật dữ liệu: AI có thể xâm phạm quyền riêng tư nếu không được quản lý đúng cách.
Lạm dụng AI trong lập trình: Lập trình viên có thể dựa quá nhiều vào AI, làm giảm tư duy sáng tạo và kỹ năng lập trình thực tế.

Nguyên tắc

Minh bạch: Cung cấp thông tin rõ ràng về cách AI đưa ra quyết định.
Công bằng: Đảm bảo AI không tạo ra sự thiên vị hoặc phân biệt đối xử.
An toàn: Kiểm tra AI trước khi triển khai để tránh rủi ro.
Trách nhiệm: Lập trình viên chịu trách nhiệm về việc sử dụng AI, không phó mặc hoàn toàn vào AI.

Chiến lược sử dụng AI

Dùng AI để gợi ý, nhưng không phụ thuộc hoàn toàn
- Sử dụng AI để đề xuất code, sau đó kiểm tra và điều chỉnh theo yêu cầu dự án.
Tối ưu hóa công việc lặp lại
- Sử dụng AI để viết các đoạn mã lặp lại, tạo unit test, và tự động hóa build pipeline.
Hỗ trợ debugging và tối ưu code
- Dùng AI để phát hiện lỗi, đề xuất cách sửa lỗi và tối ưu thuật toán.
Phân tích dữ liệu và học máy
- AI có thể giúp xử lý và phân tích dữ liệu lớn, dự đoán xu hướng, và hỗ trợ ra quyết định.

Nâng cao hơn:

Tích hợp AI vào dự án

Sử dụng AI để tạo tài liệu API tự động.
Tạo chatbot hỗ trợ lập trình viên trong nhóm làm việc.
Tự động kiểm tra mã nguồn với AI-powered static analysis tools.
Dự đoán lỗi và hiệu suất của ứng dụng bằng AI.

AI Generative

Là cách sử dụng AI tạo ra các đoạn mã nguồn giúp tăng tốc độ lập trình, hỗ trợ lập trình viên trong việc tìm ra giải pháp tối ưu hơn.

Nguyên Tắc Viết Prompt Hiệu Quả

Cụ thể, rõ ràng: Đừng viết prompt chung chung. Hãy nêu rõ yêu cầu về chức năng, ngôn ngữ lập trình, thư viện cần dùng.
Chia nhỏ yêu cầu: Nếu code phức tạp, chia thành nhiều phần nhỏ, yêu cầu từng phần.
Định dạng rõ ràng: Nếu cần code HTML + CSS (áp dụng cho các ngôn ngữ sau này cũng vậy), hãy nói rõ.
Ví dụ cụ thể: Nếu muốn một giao diện giống Bootstrap hoặc Material UI v.v.., hãy nhắc đến nó.
Yêu cầu tối ưu hóa: Nếu cần code ngắn gọn, dễ bảo trì, hãy yêu cầu AI làm vậy.

Ví dụ 1: Sinh một giao diện website cơ bản

✅ Prompt tốt:

Viết một trang web HTML + CSS có một tiêu đề chính và một nút bấm "Bắt đầu". 
Khi nhấn vào nút, màu nền của trang sẽ thay đổi ngẫu nhiên.
Hãy sử dụng CSS để thiết kế giao diện đẹp mắt, phông chữ dễ đọc.

⛔ Prompt không tốt:

Viết một trang web HTML có một nút.

🛑 Prompt này quá mơ hồ, AI sẽ chỉ tạo một nút đơn giản mà không có hiệu ứng hay style đẹp.

Dưới đây là đoạn mã AI có thể sinh ra khi dùng prompt hiệu quả:

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Trang Web Đơn Giản</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            background-color: #f4f4f4;
            padding: 50px;
        }
        h1 {
            color: #333;
        }
        button {
            background-color: #007bff;
            color: white;
            padding: 10px 20px;
            font-size: 16px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background 0.3s ease;
        }
        button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>

    <h1>Chào mừng đến với trang web của tôi!</h1>
    <button onclick="changeBackgroundColor()">Bắt đầu</button>

    <script>
        function changeBackgroundColor() {
            const colors = ["#FF5733", "#33FF57", "#3357FF", "#FF33A1", "#FFC733"];
            document.body.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
        }
    </script>

</body>
</html>

Mẹo Viết Prompt Tốt Hơn

📌 Mẹo 1: Nếu muốn AI sinh code theo framework cụ thể, hãy ghi rõ.

Viết một trang web HTML + CSS với giao diện giống Bootstrap. 
Nút "Đăng ký" phải có hiệu ứng hover, và khi nhấn vào, hiện ra thông báo "Bạn đã đăng ký thành công".

📌 Mẹo 2: Yêu cầu AI tối ưu mã.

Viết trang web HTML + CSS có giao diện đẹp, code ngắn gọn, dễ đọc và dễ bảo trì.

📌 Mẹo 3: Dùng mô tả chi tiết cho tính năng.

Viết code HTML + CSS cho một card profile có ảnh đại diện, tên người dùng, và một nút "Xem thêm" khi hover vào sẽ phóng to card.

PreviousLesson 4: Layout NextLesson 6: Javascript, Typescript

Last updated 1 day ago

Responsive

Như giới thiệu trên, Responsive là một khái niệm chỉ rằng giao diện sẽ thích ứng được với các kích thước màn hình, thiết bị khác nhau.

Để có thể xem được ứng dụng web hiển thị trên nhiều kích thước màn hình khác nhau, với trình duyệt Chrome, chúng ta làm theo các bước sau:

Mở developer tools
Click vào nút “Toggle Device toolbar” hoặc tổ hợp phím Ctrl + Shift + M
Chọn thiết bị trong dropdown hoặc responsive

Tuỳ thuộc vào yêu cầu của dự án và mục tiêu mà ta sẽ chọn breakpoint (điểm giới hạn đâu là kích thước dành cho thiết bị nào)

Một số Breakpoint phổ biến:

SM: 640px
MD: 768px
LG: 1024px
XL: 1280px
2XL: 1536px

Ví dụ cài đặt CSS:

/* SM: ≥640px */
@media (min-width: 640px) {
  /* Code cho các thiết bị từ 640px trở lên */
  body {
    font-size: 14px;
  }
}

/* MD: ≥768px */
@media (min-width: 768px) {
  /* Code cho các thiết bị từ 768px trở lên */
  body {
    font-size: 16px;
  }
}

/* LG: ≥1024px */
@media (min-width: 1024px) {
  /* Code cho các thiết bị từ 1024px trở lên */
  body {
    font-size: 18px;
  }
}

/* XL: ≥1280px */
@media (min-width: 1280px) {
  /* Code cho các thiết bị từ 1280px trở lên */
  body {
    font-size: 20px;
  }
}

/* 2XL: ≥1536px */
@media (min-width: 1536px) {
  /* Code cho các thiết bị từ 1536px trở lên */
  body {
    font-size: 22px;
  }
}

min-width (mobile-first):
- Ưu tiên thiết bị di động.
- Thiết kế ban đầu tập trung vào điện thoại di động và mở rộng giao diện cho các màn hình lớn hơn.
max-width (desktop-first):
- Ưu tiên thiết bị có màn hình lớn như máy tính để bàn, laptop.
- Tạo giao diện phức tạp hơn cho màn hình lớn và dần đơn giản hóa cho màn hình nhỏ hơn.

Sử dụng như thế nào là do tư tưởng, cách tiếp cận của dự án mà cần linh động.

Tailwind CSS

Thay vì viết các stylesheet tùy chỉnh, chỉ cần sử dụng các class tiện ích (utility class) trực tiếp trong HTML để kiểm soát bố cục, khoảng cách, màu sắc,...

Ban đầu cần một lượng thời gian để làm quen, nhưng sau đó sẽ hỗ trợ rất nhiều cho lập trình viên, tối ưu thời gian phát triển

Đọc hướng dẫn cài đặt tại: https://tailwindcss.com/docs/installation

Để đơn giản hoá, ta sẽ lựa chọn cài đặt với CDN bằng cách

thêm một thẻ script vào thẻ head:

<script src="https://cdn.tailwindcss.com"></script>

Ví dụ sử dụng:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
    <title>Box model & position</title>
</head>

<body>
    <div class="container">
        <div class="bg-[red] text-[white] font-bold">MINDX 1</div>
    </div>
</body>

</html>

Như ví dụ trên, không hề có file CSS, nhưng vẫn có thể style cho phần tử, thông qua class.

Tailwind cũng có quy luật đặt class theo tên các thuộc tính, ta nên lên tài liệu để tìm kiếm mỗi khi cần và không nhớ!

Một số class phổ biến:

container: Tạo container với chiều rộng tối đa thay đổi theo kích thước màn hình.
flex: Kích hoạt Flexbox.
grid: Kích hoạt CSS Grid Layout.
block: Hiển thị phần tử dưới dạng block (chiếm toàn bộ chiều ngang).
inline-block: Hiển thị phần tử dưới dạng inline block.
hidden: Ẩn phần tử.
p-[n]: Padding (đệm) cho tất cả các phía.
pt-[n], pr-[n], pb-[n], pl-[n]: Padding cho từng phía (trên, phải, dưới, trái).
m-[n]: Margin (lề) cho tất cả các phía.
mt-[n], mr-[n], mb-[n], ml-[n]: Margin cho từng phía (trên, phải, dưới, trái).
bg-[color]: Màu nền (background color).
text-[color]: Màu chữ (text color).
border-[color]: Màu viền (border color).
relative: Định vị tương đối.
absolute: Định vị tuyệt đối.
fixed: Định vị cố định.
sticky: Định vị sticky (bám dính).
hover:bg-[color]: Thay đổi màu nền khi hover.
focus:bg-[color]: Thay đổi màu nền khi phần tử được focus.

Với, bên trong cặp dấu [] là giá trị mong muốn. Ví dụ:

bg-[red]
text-[blue]
...

(Đọc thêm) Một chút quy tắc design

Quy tắc phối màu (Color Scheme)

Nguyên tắc 60-30-10

Nguyên tắc này được sử dụng để duy trì sự cân bằng màu sắc. Nó quy định tỷ lệ của ba nhóm màu chính trong thiết kế:

60%: Màu chủ đạo (primary color) – thường là màu nền, hoặc màu chi phối lớn trong giao diện.
30%: Màu thứ cấp (secondary color) – dùng cho các yếu tố như khối, nút, hay các phần khác nổi bật hơn một chút so với màu nền.
10%: Màu nhấn (accent color) – dùng cho các chi tiết nhỏ nhưng quan trọng, như nút CTA (Call to Action), liên kết, hoặc biểu tượng để thu hút sự chú ý.

Sử dụng bảng màu đơn sắc (Monochromatic Color Scheme)

Ví dụ: Dùng các sắc độ của màu xanh dương (blue) từ xanh nhạt cho nền đến xanh đậm cho các tiêu đề hoặc nút.

Sử dụng bảng màu bổ sung (Complementary Colors)

Lưu ý: Không nên lạm dụng màu bổ sung quá nhiều vì có thể gây cảm giác quá mạnh và chói mắt. Nên sử dụng một cách tiết chế để nhấn mạnh các yếu tố chính.

Phối màu tương tự (Analogous Colors)

Màu tương tự là các màu liền kề nhau trên bánh xe màu, tạo ra sự hài hòa và dễ chịu. Ví dụ, màu xanh lá cây kết hợp với màu vàng hoặc xanh dương.

Ví dụ: Sử dụng màu xanh lam, xanh dương và xanh lá cây cho giao diện để tạo sự liên kết hài hòa.

Độ tương phản (Contrast)

Lưu ý về khả năng tiếp cận (accessibility): Hãy đảm bảo rằng độ tương phản giữa nền và văn bản đạt chuẩn để người dùng có vấn đề về thị lực cũng có thể dễ dàng sử dụng.

Sử dụng màu trung tính (Neutral Colors)

Tailwind có cung cấp sách để các bạn có thể học hỏi thêm, tìm hiểu thêm tại: https://www.refactoringui.com/

Sách sẽ mất kinh phí mua, để cân nhắc, tham khảo trước tại:

Ứng dụng AI trong Lập Trình

AI là gì?

Các phân loại của AI:

AI hẹp (Weak AI): AI chuyên dụng cho một nhiệm vụ cụ thể (ví dụ: ChatGPT, Siri, Google Translate).
AI mạnh (Strong AI): AI có khả năng suy nghĩ và lý luận như con người (chưa đạt được).
AGI (Artificial General Intelligence): AI có khả năng học và thực hiện bất kỳ nhiệm vụ trí tuệ nào mà con người có thể làm.

Đối với lập trình:

Hỗ trợ phát triển phần mềm: AI có thể giúp kiểm tra lỗi code, đề xuất cải tiến, và gợi ý mã nguồn (Copilot, CodeWhisperer).
Tự động hóa quy trình DevOps: Tối ưu CI/CD pipeline, dự báo lỗi hệ thống.
Tạo nội dung code tự động: Sử dụng AI để viết các đoạn mã lặp lại, gợi ý API, tối ưu thuật toán.
Hỗ trợ phân tích dữ liệu: AI giúp xử lý và phân tích dữ liệu lớn nhanh chóng.

Đạo đức sử dụng AI

Thách thức

Thiên vị trong AI: AI có thể bị ảnh hưởng bởi dữ liệu huấn luyện, dẫn đến thiên vị trong quyết định.
Riêng tư và bảo mật dữ liệu: AI có thể xâm phạm quyền riêng tư nếu không được quản lý đúng cách.
Lạm dụng AI trong lập trình: Lập trình viên có thể dựa quá nhiều vào AI, làm giảm tư duy sáng tạo và kỹ năng lập trình thực tế.

Nguyên tắc

Minh bạch: Cung cấp thông tin rõ ràng về cách AI đưa ra quyết định.
Công bằng: Đảm bảo AI không tạo ra sự thiên vị hoặc phân biệt đối xử.
An toàn: Kiểm tra AI trước khi triển khai để tránh rủi ro.
Trách nhiệm: Lập trình viên chịu trách nhiệm về việc sử dụng AI, không phó mặc hoàn toàn vào AI.

Chiến lược sử dụng AI

Dùng AI để gợi ý, nhưng không phụ thuộc hoàn toàn
- Sử dụng AI để đề xuất code, sau đó kiểm tra và điều chỉnh theo yêu cầu dự án.
Tối ưu hóa công việc lặp lại
- Sử dụng AI để viết các đoạn mã lặp lại, tạo unit test, và tự động hóa build pipeline.
Hỗ trợ debugging và tối ưu code
- Dùng AI để phát hiện lỗi, đề xuất cách sửa lỗi và tối ưu thuật toán.
Phân tích dữ liệu và học máy
- AI có thể giúp xử lý và phân tích dữ liệu lớn, dự đoán xu hướng, và hỗ trợ ra quyết định.

Nâng cao hơn:

Tích hợp AI vào dự án

Sử dụng AI để tạo tài liệu API tự động.
Tạo chatbot hỗ trợ lập trình viên trong nhóm làm việc.
Tự động kiểm tra mã nguồn với AI-powered static analysis tools.
Dự đoán lỗi và hiệu suất của ứng dụng bằng AI.

AI Generative

Là cách sử dụng AI tạo ra các đoạn mã nguồn giúp tăng tốc độ lập trình, hỗ trợ lập trình viên trong việc tìm ra giải pháp tối ưu hơn.

Nguyên Tắc Viết Prompt Hiệu Quả

Cụ thể, rõ ràng: Đừng viết prompt chung chung. Hãy nêu rõ yêu cầu về chức năng, ngôn ngữ lập trình, thư viện cần dùng.
Chia nhỏ yêu cầu: Nếu code phức tạp, chia thành nhiều phần nhỏ, yêu cầu từng phần.
Định dạng rõ ràng: Nếu cần code HTML + CSS (áp dụng cho các ngôn ngữ sau này cũng vậy), hãy nói rõ.
Ví dụ cụ thể: Nếu muốn một giao diện giống Bootstrap hoặc Material UI v.v.., hãy nhắc đến nó.
Yêu cầu tối ưu hóa: Nếu cần code ngắn gọn, dễ bảo trì, hãy yêu cầu AI làm vậy.

Ví dụ 1: Sinh một giao diện website cơ bản

✅ Prompt tốt:

Viết một trang web HTML + CSS có một tiêu đề chính và một nút bấm "Bắt đầu". 
Khi nhấn vào nút, màu nền của trang sẽ thay đổi ngẫu nhiên.
Hãy sử dụng CSS để thiết kế giao diện đẹp mắt, phông chữ dễ đọc.

⛔ Prompt không tốt:

Viết một trang web HTML có một nút.

🛑 Prompt này quá mơ hồ, AI sẽ chỉ tạo một nút đơn giản mà không có hiệu ứng hay style đẹp.

Dưới đây là đoạn mã AI có thể sinh ra khi dùng prompt hiệu quả:

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Trang Web Đơn Giản</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            background-color: #f4f4f4;
            padding: 50px;
        }
        h1 {
            color: #333;
        }
        button {
            background-color: #007bff;
            color: white;
            padding: 10px 20px;
            font-size: 16px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background 0.3s ease;
        }
        button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>

    <h1>Chào mừng đến với trang web của tôi!</h1>
    <button onclick="changeBackgroundColor()">Bắt đầu</button>

    <script>
        function changeBackgroundColor() {
            const colors = ["#FF5733", "#33FF57", "#3357FF", "#FF33A1", "#FFC733"];
            document.body.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
        }
    </script>

</body>
</html>

Mẹo Viết Prompt Tốt Hơn

📌 Mẹo 1: Nếu muốn AI sinh code theo framework cụ thể, hãy ghi rõ.

Viết một trang web HTML + CSS với giao diện giống Bootstrap. 
Nút "Đăng ký" phải có hiệu ứng hover, và khi nhấn vào, hiện ra thông báo "Bạn đã đăng ký thành công".

📌 Mẹo 2: Yêu cầu AI tối ưu mã.

Viết trang web HTML + CSS có giao diện đẹp, code ngắn gọn, dễ đọc và dễ bảo trì.

📌 Mẹo 3: Dùng mô tả chi tiết cho tính năng.

Viết code HTML + CSS cho một card profile có ảnh đại diện, tên người dùng, và một nút "Xem thêm" khi hover vào sẽ phóng to card.