Domain: tinhoc.leminhdang.com

Lời mở đầu

Chào mừng bạn đến với giáo trình hướng dẫn xây dựng trang web “Cổng Giáo án Tương tác”. Đây là một dự án đầy tâm huyết, kết hợp giữa giao diện hiện đại và một hệ thống quản lý nội dung (CMS) mạnh mẽ, linh hoạt bằng cách sử dụng các công cụ miễn phí và phổ biến.

Mục tiêu của giáo trình này là cung cấp một lộ trình chi tiết, từ bước chuẩn bị đầu tiên cho đến khi hoàn thiện một trang web giáo dục chuyên nghiệp, nơi mà việc cập nhật nội dung bài học có thể được thực hiện dễ dàng thông qua Google Sheet mà không cần can thiệp vào mã nguồn.

Phần 1: Giới thiệu Dự án & Công nghệ sử dụng

1.1. Mục tiêu Dự án

• Tính tương tác: Xây dựng một giao diện thân thiện, hiện đại, thu hút học sinh và giáo viên.
• Tính linh hoạt: Nội dung các bài học (văn bản, hình ảnh, video, trắc nghiệm) có thể được cập nhật, chỉnh sửa một cách dễ dàng bởi người không chuyên về lập trình thông qua Google Sheet.
• Tính chuyên nghiệp: Giao diện được thiết kế đẹp mắt, đồng bộ, có các hiệu ứng chuyển động tinh tế, mang lại trải nghiệm người dùng tốt nhất.
• Tối ưu tốc độ: Áp dụng kỹ thuật caching để trang web tải nhanh, gần như tức thì ở những lần truy cập sau.

1.2. Công nghệ sử dụng

Dự án của chúng ta sử dụng một bộ công cụ mạnh mẽ, miễn phí và dễ tiếp cận:

• HTML5: Ngôn ngữ đánh dấu siêu văn bản, dùng để xây dựng cấu trúc (bộ xương) của trang web.
• CSS3 & Tailwind CSS:
  • CSS3: Dùng để tạo phong cách, hiệu ứng và “trang điểm” cho trang web.
  • Tailwind CSS: Một thư viện CSS giúp chúng ta xây dựng giao diện nhanh chóng bằng các lớp (class) tiện ích được định nghĩa sẵn.
• JavaScript (ES6): “Bộ não” của trang web, xử lý mọi logic, từ việc tải dữ liệu, hiển thị nội dung động, cho đến các chức năng tương tác như trắc nghiệm.
• Google Sheets: Đóng vai trò như một “cơ sở dữ liệu” (database) miễn phí, nơi chúng ta lưu trữ toàn bộ nội dung các bài học.
• Google Apps Script: Một công cụ mạnh mẽ của Google, được sử dụng để viết một đoạn mã kịch bản nhỏ, biến tệp Google Sheet của chúng ta thành một “API” (Giao diện lập trình ứng dụng) để trang web có thể đọc dữ liệu.

Phần 2: Cấu trúc Thư mục & Chuẩn bị Môi trường

Một dự án được tổ chức tốt sẽ rất dễ dàng để quản lý và mở rộng. Cấu trúc thư mục cuối cùng của chúng ta sẽ như sau:

/ (Thư mục gốc của website)
|
|-- index.html             (Trang chủ - Cổng chọn lớp)
|-- style.css              (Tệp định dạng chung cho toàn bộ web)
|-- logo.jpg               (Logo của trường)
|-- favicon.png            (Icon hiển thị trên tab trình duyệt)
|
|-- khoi3/
|   |-- index.html         (Trang hiển thị bài học của khối 3)
|   |-- app.js             (Tệp logic của khối 3)
|   |-- [Các file PDF...]
|
|-- khoi4/
|   |-- index.html
|   |-- app.js
|   |-- [Các file PDF...]
|
|-- khoi5/
|   |-- index.html
|   |-- app.js
|   |-- [Các file PDF...]
|
|-- khoi6/
|   |-- index.html
|   |-- app.js
|   |-- [Các file PDF...]
|
|-- khoi7/
|   |-- index.html
|   |-- app.js
|   |-- [Các file PDF...]

Phần 3: Xây dựng “Cơ sở dữ liệu” với Google Sheets

Đây là trái tim của hệ thống. Mọi nội dung sẽ được quản lý tại đây.

1. Tạo Google Sheet: Truy cập sheets.new để tạo một trang tính mới. Đặt tên cho nó, ví dụ: CSDL - Giáo án Tin học.
2. Tạo 2 trang tính (Tabs):
   • Đổi tên trang tính đầu tiên thành Lessons.
   • Tạo một trang tính mới và đặt tên là LessonDetails.
   • Lưu ý: Tên phải chính xác tuyệt đối, có phân biệt chữ hoa/thường.
3. Cấu trúc trang tính Lessons: Trang này quản lý danh sách các bài học sẽ hiển thị.
   • Dòng đầu tiên phải là tiêu đề các cột, chính xác như sau:chapterKey | chapterTitle | chapterIcon | lessonId | lessonTitle | gdrive_embed | video_embed | image
   • Ý nghĩa các cột:
     • chapterKey: Mã chủ đề (ví dụ: A, B, C…).
     • chapterTitle: Tên đầy đủ của chủ đề.
     • chapterIcon: Lớp (class) của biểu tượng Font Awesome cho chủ đề đó.
     • lessonId: Mã định danh duy nhất cho mỗi bài học (ví dụ: A1, A2, B1…).
     • lessonTitle: Tên đầy đủ của bài học.
     • gdrive_embed: Link chia sẻ của Google Slides (hoặc để trống).
     • video_embed: Link chia sẻ của YouTube (hoặc để trống).
     • image: Link ảnh đại diện cho bài học.
4. Cấu trúc trang tính LessonDetails: Trang này chứa nội dung chi tiết cho từng bài.
   • Dòng đầu tiên phải là tiêu đề các cột, chính xác như sau:lessonId | objectives | core_content | quiz | answer_keys
   • Ý nghĩa các cột:
     • lessonId: Mã định danh của bài học, phải khớp với lessonId ở trang Lessons.
     • objectives: Mục tiêu bài học.
     • core_content: Nội dung cốt lõi.
     • quiz: Các câu hỏi trắc nghiệm.
     • answer_keys: Gợi ý trả lời cho phần củng cố.
   • QUAN TRỌNG: Nội dung trong các cột objectives, core_content, quiz, và answer_keys phải ở định dạng JSON hợp lệ.
     • Ví dụ cho objectives: ["Mục tiêu 1.", "Mục tiêu 2."]
     • Ví dụ cho quiz: [{"question":"Câu hỏi 1?","options":["A","B","C"],"answer":1}]
     • Ví dụ cho answer_keys: {"luyen_tap":["Gợi ý 1."],"van_dung":"Gợi ý 2."}

Phần 4: Tạo API với Google Apps Script

Bước này sẽ biến tệp Google Sheet của bạn thành một nguồn dữ liệu mà trang web có thể đọc được.

1. Trong Google Sheet, vào Tiện ích mở rộng (Extensions) > Apps Script.
2. Xóa hết mã mặc định và dán toàn bộ mã kịch bản đã được nâng cấp với chức năng caching vào.
3. Nhấn Lưu dự án.
4. Nhấn nút Triển khai (Deploy) > Lượt triển khai mới (New deployment).
5. Trong cửa sổ hiện ra:
   • Nhấp vào biểu tượng bánh răng, chọn Ứng dụng web (Web app).
   • Trong phần Ai có quyền truy cập (Who has access), chọn Bất kỳ ai (Anyone).
   • Nhấn nút Triển khai (Deploy).
6. Google sẽ yêu cầu bạn cấp quyền. Hãy Cho phép truy cập (Authorize access).
7. Cuối cùng, bạn sẽ nhận được một URL ứng dụng web. Hãy sao chép URL này để sử dụng trong tệp app.js.

Phần 5: Lập trình Logic (JavaScript)

Đây là “bộ não” của các trang bài học. Tệp app.js trong mỗi thư mục khoi... sẽ có nội dung tương tự nhau, chỉ khác ở URL API nếu bạn quyết định dùng một file Google Sheet riêng cho mỗi khối.

Tệp app.js hoàn chỉnh sẽ bao gồm các chức năng chính:

• fetchData():
  • Kiểm tra xem URL API đã được cấu hình hay chưa.
  • Tải dữ liệu từ URL Google Sheet API.
  • Hiển thị thông báo lỗi chi tiết nếu có sự cố.
  • Lưu dữ liệu vào biến toàn cục và gọi hàm renderLessonList().
• renderLessonList():
  • Duyệt qua dữ liệu lessonsData đã tải về.
  • Tự động tạo ra các khối HTML cho từng chủ đề và từng bài học.
  • Tự động thêm nút “Xem Slide” nếu bài học có link gdrive_embed.
• renderLessonDetail():
  • Tìm kiếm thông tin chi tiết của bài học được chọn.
  • Tạo ra toàn bộ giao diện chi tiết, bao gồm tiêu đề, hình ảnh, các mục có thể thu gọn và hệ thống tab.
• Các hàm tiện ích:
  • convertToEmbedUrl() và convertGoogleSlideToEmbedUrl(): Tự động chuyển đổi các link chia sẻ sang định dạng nhúng.
  • Các hàm xử lý tab, trắc nghiệm, và nút “Quay lại”.

Phần 6: Hoàn thiện Giao diện (HTML & CSS)

6.1. Trang chủ (index.html & style.css)

• HTML: Cấu trúc đơn giản với một tiêu đề chính và một lưới (grid) chứa các thẻ chọn lớp. Mỗi thẻ là một liên kết <a> trỏ đến thư mục của khối tương ứng.
• CSS: Tệp style.css sẽ định nghĩa các biến màu chủ đạo (--theme-blue, --theme-red) và các hiệu ứng chuyển động mượt mà khi di chuột vào các thẻ chọn lớp.

6.2. Trang bài học (/khoi.../index.html)

• HTML: Cấu trúc bao gồm 2 phần chính:
  • <div id="lesson-list-view">: Chứa khu vực hiển thị danh sách bài học. Ban đầu, nó sẽ trống và được app.js điền nội dung vào.
  • <div id="lesson-detail-view" style="display: none;">: Chứa giao diện chi tiết bài học, được ẩn đi lúc đầu.
• Liên kết tệp: Tệp HTML này phải liên kết đến tệp style.css chung (../style.css) và tệp app.js của riêng nó.

Phần 7: Tối ưu & Triển khai

1. Tối ưu tốc độ:
   • Server Cache (Google Apps Script): Giúp API phản hồi nhanh hơn.
   • Browser Cache (localStorage): Giúp trang web tải gần như tức thì ở những lần truy cập sau. Để làm mới dữ liệu khi đang phát triển, bạn có thể xóa cache của trình duyệt (Ctrl+Shift+R).
2. Triển khai:
   • Sau khi hoàn thiện, bạn chỉ cần tải toàn bộ cấu trúc thư mục và các tệp đã tạo lên một nhà cung cấp dịch vụ lưu trữ web (hosting).
   • Trỏ tên miền tinhoc.leminhdang.com của bạn vào hosting đó.

Phần 8: Mã nguồn tham khảo

Toàn bộ mã nguồn của dự án này đã được công khai và bạn có thể tham khảo, tải về hoặc đóng góp tại kho lưu trữ trên GitHub: https://github.com/danglee97/giao-an-tin-CD

Lời kết

Chúc mừng bạn đã hoàn thành giáo trình! Bằng cách làm theo các bước trên, bạn đã không chỉ tạo ra một trang web, mà còn xây dựng được cả một hệ thống quản lý nội dung mạnh mẽ, sẵn sàng để mở rộng và phục vụ cho công việc giảng dạy của mình.