Để việc học thú vị hơn, chúng ta sẽ cùng học tiếp các nội dung của môn Phát triển ứng dụng web dựa trên việc thực hiện một dự án (Project-Based Learning - PBL).
Như đã đề cập, vòng đời của một dự án gồm các bước:
- Lập dự án
- Xác định yêu cầu
- Phân tích
- Thiết kế
- Lập trình
- Triển khai
- Bảo trì và cập nhật
Chúng ta sẽ xem như đã có người khác làm các bước Lập dự án, Xác định yêu cầu, Phân tích, Thiết kế.
Chúng ta sẽ chỉ tập trung vào việc lập trình, trong quá trình lập trình, chúng ta sẽ dừng lại và tìm hiểu về các khái niệm liên quan.
4.1 Thông tin về dự án
Tên dự án
Phát triển ứng dụng web bán quần áo.
Các bạn có thể đặt tên dự án ngắn gọn để phù hợp với việc kinh doanh thực tế ngoài thị trường, ví dụ TeoShop.
Môi trường và công cụ
Để làm một ứng dụng web chúng ta cần ngôn ngữ lập trình phía client (client-side) và ngôn ngữ lập trình phía server (server-side).
Ngôn ngữ lập trình phía client gồm:
- HTML để tạo giao diện
- CSS để định dạng hiển thị, trang trí giao diện
- JavaScript để lập trình xử lý các hiệu ứng; giao tiếp, trao đổi dữ liệu giữa client và server
Ngôn ngữ lập trình phía server:
- Ngôn ngữ: JavaScript
- Framework: Express
Web server:
- Nodejs
Hệ quản trị cơ sở
dữ liệu:
- PostgreSQL
Công cụ làm việc
với PostgreSQL:
- DBeaver
Quản lý mã nguồn:
- Git, Github
4.2 Tải và cài đặt VS Code
Để viết mã nguồn, chúng ta có một số công cụ:
- Text editor: ví dụ Notepad
- Code editor: ví dụ VS Code, Sublime Text
- IDE: ví dụ Eclipse, Visual Studio, IntelliJ
- Các trang web: ví dụ https://codepen.io/
- Chatbot: ví dụ Gemini
Mỗi công cụ phù hợp cho từng tình huống sử dụng, trong phần này chúng ta sẽ sử dụng một Code Editor, có tên là VS Code.
VS Code là công cụ để: tạo, tổ chức thư mục, tập tin và viết mã nguồn cho dự án web.
Vào trang https://code.visualstudio.com/ để tải VS Code về máy.
Thực hiện cài đặt như một chương trình thông thường.
4.3 Tải và cài đặt Git
Git là một hệ thống quản lý phiên bản phân tán (distributed version control system) được sử dụng rộng rãi trong phát triển phần mềm. Nó cho phép các nhóm lập trình viên theo dõi và quản lý các thay đổi trong mã nguồn của một dự án một cách hiệu quả.
Một số tính năng của Git
- Theo dõi lịch sử thay đổi: Git lưu lại từng thay đổi nhỏ nhất của mã nguồn, giúp bạn dễ dàng quay lại các phiên bản trước đó nếu cần
- Cộng tác hiệu quả: Git cho phép nhiều người cùng làm việc trên một dự án cùng lúc, đồng thời hợp nhất các thay đổi một cách dễ dàng
- Phân nhánh và hợp nhất: Git hỗ trợ tạo nhiều nhánh (branch) làm việc độc lập, giúp bạn thử nghiệm các tính năng mới mà không ảnh hưởng đến phần còn lại của dự án
- Bảo mật: Git lưu trữ các thay đổi dưới dạng các bản ghi (commit) không thể thay đổi, đảm bảo tính toàn vẹn của mã nguồn
- Phân tán: mỗi bản sao của một kho lưu trữ Git đều là một kho lưu trữ đầy đủ, cho phép bạn làm việc không cần kết nối mạng và đồng bộ hóa sau đó (khi có kết nối mạng)
Tải và cài đặt Git
Do Git là một phần mềm, để sử dụng, bạn cần tải nó về máy, và thực hiện cài đặt như một phần mềm thông thường.
Vào trang https://git-scm.com/, chọn phiên bản phù hợp với hệ điều hành bạn đang dùng, để tải Git về máy.
Sau khi tải về máy, thực hiện cài đặt.
Để kiểm tra xem Git đã cài đặt thành công hay chưa? Hoặc để kiểm tra xem trên máy tính có phần mềm Git hay không:
- Bấm Phím cửa sổ + R để mở cửa sổ Run
- Gõ cmd > nhấn phím Enter để mở cửa sổ dòng lệnh (command line)
- Nhập lệnh git --version hoặc git -v
- Nếu xuất hiện thông tin về phiên bản của Git, có nghĩa là trên máy tính của bạn đã có phần mềm Git và bạn có thể sử dụng.
4.4 Tạo thư mục dự án và nhúng Git
Sử dụng File Explorer, tạo thư mục cho dự án. Ví dụ, trong ổ đĩa E:\, tạo thư mục dự án có tên là TeoShop.
Nhúng Git vào thư mục TeoShop
Nếu bạn muốn sử dụng Git để quản lý các phiên bản của dự án TeoShop thì bạn phải nhúng Git vào trong thư mục TeoShop.
Trước khi nhúng Git, bạn dùng File Explorer mở thư mục TeoShop ra để quan sát, bạn sẽ thấy TeoShop đang là thư mục rỗng.
Bạn có thể sử dụng Git bằng giao diện đồ họa, hoặc các chức năng của Git đã được tích hợp vào các phần mềm lập trình (ví dụ Visual Studio, Eclipse, VS code). Tuy nhiên, cách học Git hiệu quả nhất vẫn là sử dụng giao diện dòng lệnh. Giao diện dòng lệnh chứa đầy đủ nhất các lệnh của Git, khi đã hiểu được bản chất các lệnh rồi thì chuyển sang sử dụng các giao diện khác rất đơn giản.
- Trong cửa sổ dòng lệnh, di chuyển vào thư mục TeoShop.
[Một vài lệnh hữu ích: gõ tên ổ đĩa, kèm dấu hai chấm (:) để chuyển ổ đĩa. Ví dụ, muốn chuyển qua ổ đĩa D sẽ nhập lệnh D: > nhấn phím Enter. Để di chuyển tới thư mục nào thì gõ lệnh cd tenthumuc. Để di chuyển lên thư mục cha: gõ hai dấu chấm (..). Để xem nội dung của một thư mục: dùng lệnh dir. Lệnh cd là viết tắt của change directory, lệnh dir là viết tắt của directory.]
- Gõ lệnh git init
Chữ init viết tắt của initialize, nghĩa là khởi tạo.
- Nếu nhúng Git thành công, sẽ thấy thông báo “Initialized empty Git repository in E:/TeoShop/.git/’. Ý là: đã khởi tạo một kho chứa rỗng của Git trong thư mục E:/TeoShop/.git/”.
- Mở thư mục dự án ra để quan sát sự thay đổi. Bạn sẽ thấy xuất hiện thêm thư mục ẩn có tên là .git. Đây chính là kho chứa (kho lưu trữ) mà phần mềm Git thêm tạo ra trong thư mục dự án TeoShop. Git sẽ sử dụng thư mục này cho các tác vụ của nó. Bạn không nên thay đổi nội dung trong thư mục .git.
Kho chứa là nơi chứa toàn bộ lịch sử các thay đổi của dự án, từ những dòng mã đầu tiên cho đến các phiên bản mới nhất. Hãy tưởng tượng kho chứa như một "nhà kho" lưu trữ tất cả các "bản ghi" về sự phát triển của dự án.
[Nếu máy bạn không nhìn thấy thư mục ẩn: trong cửa sổ của File Explorer, chọn menu View > đánh dấu chọn vào mục Hidden items.]
Vậy là bạn đã nhúng được Git vào trong thư mục của dự án. Chúng ta sẽ sử dụng Git để quản lý mã nguồn bằng các lệnh cụ thể ở trong các phần tiếp theo.
4.5 Bài tập
Bài tập 4.1 Thực hành các cài đặt trong bài học.
4.2 Lệnh nào được sử dụng để nhúng Git vào thư mục dự án?
A. git init
B. git --init
C. git initialize
D. git embed
4.3 Lệnh nào sử dụng để kiểm tra trên máy tính đã có phần mềm Git hay chưa?
A. git ver
B. git version
C. git --version hoặc git -v
D. git --ver
4.4 Trong Git, kho lưu trữ (repo, repository) là gì?
A. Là thư mục dự án
B. Là thư mục dự án đã được nhúng Git
C. Là thư mục cài đặt phần mềm Git
D. Là thư mục .git (trong thư mục dự án)
4.5 Bạn có thể sử dụng các công cụ sau để viết mã. Phát biểu nào không đúng?
A. Text editor
B. MS Word
C. IDE, Code Editor
D. Chatbot (Gemini), Trang web (https://codepen.io/)
-----
Gợi ý làm bài tập
4.2(A), 4.3(C), 4.4(D), 4.5(B)
Học thêm:
[1] Git thực hành (1) - Hệ thống quản lý phiên bản
[2] Git thực hành (2) - Tổng quan về Git