Khoá web miễn phí của Harvard lấp lỗ hổng JavaScript cho FDE Python

Một FDE quen Python có thể dựng pipeline dữ liệu, gọi LLM và ghép agent trong vài ngày. Đến lúc khách hàng nói “cho tôi bấm thử”, thứ họ cần là một trang web, và nhiều kỹ sư khựng lại đúng ở chỗ đó.

Khoá CS50’s Web Programming with Python and JavaScript của Harvard là một cách lấp khoảng trống này. Khoá học miễn phí qua OpenCourseWare, gồm chín tuần nội dung, và chỉ đòi bạn đã có kinh nghiệm với một ngôn ngữ lập trình bất kỳ.

Với FDE, đây không phải chuyện học thêm cho vui. Demo chạy được trên trình duyệt của khách thường là thứ giúp một engagement đi tiếp, và tự dựng được demo đó nghĩa là bạn không phải chờ ai.

Khoá học thật ra dạy gì?

Trang chính thức mô tả CS50 Web là phần nối tiếp CS50x, đi sâu hơn vào việc thiết kế và xây ứng dụng web bằng Python, JavaScript và SQL. Stack gồm Django, React và Bootstrap, kèm API và các dịch vụ cloud như GitHub và Heroku.

Phạm vi rộng hơn một khoá front-end nhập môn. Danh sách chủ đề có thêm thiết kế cơ sở dữ liệu, khả năng mở rộng, bảo mật và trải nghiệm người dùng. Bản đăng trên edX cũng ghi đúng những chủ đề này.

Yêu cầu đầu vào là CS50x hoặc kinh nghiệm lập trình trước đó, nên nếu bạn đã viết Python hằng ngày, bạn bỏ qua CS50x và vào thẳng. Học hết chín tuần, có ba ý một FDE nên giữ lại.

Ý thứ nhất: JavaScript là code chạy ở phía khách

Ghi chú bài giảng JavaScript (bản 2020) mở đầu bằng một ý đơn giản: JavaScript cho phép chạy code ở phía client, tức trong trình duyệt. Với kỹ sư chỉ biết Python, đây chính là lỗ hổng, vì mọi thứ họ viết đều chạy trên server hoặc trong notebook.

Ghi chú thường giải thích khái niệm mới qua thứ người học Python đã quen. Local storage của trình duyệt được mô tả là tập các cặp key-value, gần giống một dict Python. Bài giảng cũng dạy hàm fetch để gửi HTTP request, và đó đúng là việc tích hợp mà FDE làm hằng tuần.

Thử hình dung khách hàng có một API nội bộ trả về danh sách ticket hỗ trợ, và họ muốn xem agent của bạn phân loại ticket ra sao, có lọc theo trạng thái. Một trang tối giản chỉ cần vài dòng:

const select = document.querySelector('#filter');
select.value = localStorage.getItem('filter') || 'open';
select.addEventListener('change', () => {
  localStorage.setItem('filter', select.value);
  location.reload();
});

fetch(`/api/tickets?status=${select.value}`)
  .then(response => response.json())
  .then(tickets => {
    tickets.forEach(t => {
      const li = document.createElement('li');
      li.textContent = `${t.title}: ${t.label}`;
      document.querySelector('#list').append(li);
    });
  })
  .catch(err => console.error('Không tải được ticket', err));

Dòng thứ hai đọc lại bộ lọc đã lưu mỗi khi trang mở, và rơi về 'open' nếu chưa có gì. Khi người dùng đổi bộ lọc, giá trị mới được ghi vào localStorage rồi trang tải lại, và bộ lọc vẫn còn nguyên.

Nếu bạn nghĩ về hai thao tác này như filters.get('filter', 'open') và filters['filter'] = value trong Python, bạn đã nắm được phần lớn ý tưởng.

Lỗi hay gặp khi đưa dữ liệu khách lên trang

Lỗi phổ biến nhất là gán dữ liệu từ API vào innerHTML. Chỉ cần một tiêu đề ticket chứa thẻ <script> hay <img onerror=...>, trình duyệt sẽ chạy nó, và demo của bạn thành lỗ hổng XSS ngay trên máy khách hàng. Với dữ liệu bạn không tự viết, hãy dùng textContent.

Lỗi thứ hai là bỏ qua nhánh lỗi. Khi API nội bộ của khách trả về 401 hay timeout, trang trắng trơn trông như sản phẩm hỏng; một dòng .catch và thông báo rõ ràng cứu cả buổi demo. Bảo mật nằm trong danh sách chủ đề của khoá, nên đây là chỗ đáng đọc kỹ chứ không lướt.

Ý thứ hai: đừng tải lại cả trang

Bài giảng User Interfaces đưa người học sang single-page application: tải một trang duy nhất rồi dùng JavaScript thay đổi DOM, thay vì mỗi lần bấm lại tải trang mới. Từ đó khoá học giới thiệu React, framework xây quanh các component, mỗi component có state riêng, và DOM tự cập nhật khi state đổi.

Với FDE làm applied AI, mô hình này khớp với giao diện chat cho agent. State là danh sách tin nhắn; mỗi lần agent trả lời, bạn thêm một phần tử vào danh sách và React tự vẽ lại. Không có React, bạn sẽ tự đi tìm và sửa từng node DOM, và demo dễ vỡ ngay khi khách hỏi câu thứ ba.

Ý thứ ba: test và CI/CD là việc của bạn

Tuần về Testing và CI/CD là phần nhiều khoá web nhập môn bỏ qua. Ghi chú giải thích CI/CD, tức Continuous Integration và Continuous Delivery, là một tập thực hành tốt trong phát triển phần mềm.

Ở site khách hàng, code bạn để lại sẽ có người khác bảo trì sau khi bạn rời đi. Một bộ test và một pipeline chạy tự động là cách bàn giao đáng tin hơn mọi tài liệu viết tay. Đó là lý do bạn nên coi tuần này ngang với tuần JavaScript, không phải phần phụ.

Học theo thứ tự nào để không phí chín tuần?

Nếu đã vững Python và SQL, hãy đi nhanh qua các bài giảng đứng trước Lecture 5, chỉ dừng ở chỗ nào thấy lạ. Thời gian tiết kiệm được nên dồn cho ba bài liền nhau: Lecture 5 (JavaScript), Lecture 6 (User Interfaces, nơi có React) và Lecture 7 (Testing, CI/CD). Đừng chỉ xem video.

Syllabus của bản Harvard Extension, học kỳ Fall 2022, chấm điểm bằng năm project được giao cùng một final project, chiếm 90%; 10% còn lại tính cho việc tham dự các buổi học nhóm (section). Cách chấm này thuộc bản Extension, không phải bản OpenCourseWare miễn phí, nhưng nó cho thấy người làm khoá đặt giá trị vào thứ bạn tự tay xây.

Vì thế, kể cả khi học miễn phí, hãy làm final project giống một demo FDE thật: backend Django gọi một API, front-end React, có test và CI chạy trên GitHub. Trong CV, viết một dòng cụ thể như “dựng ứng dụng Django + React tích hợp API bên ngoài, có test tự động và CI”, kèm link repo.

Khi đọc tin tuyển dụng FDE, để ý các từ React, REST API, CI/CD. Nếu cả ba nằm trong repo của bạn, bạn có bằng chứng cụ thể để chỉ vào thay vì chỉ liệt kê kỹ năng.

Kỹ sư Python giỏi thường không thiếu tư duy, họ chỉ chưa đưa được kết quả lên màn hình của khách. Chín tuần là cái giá rẻ để không phải nói “để em nhờ team front-end” thêm lần nào nữa.