Thông tin môn học
-
Mã số học phần: CT3231D
-
Tên học phần: Phát triển ứng dụng Web nâng cao
-
Số tín chỉ: 3 (2LT – 1TH)
-
Thuộc chương trình đào tạo trình độ: Đại học
-
Hình thức đào tạo: Chính quy
-
Loại học phần (bắt buộc, tự chọn): bắt buộc
-
Điều kiện tiên quyết:
o
Thiết kế Web
o
Phát triển ứng dụng Web
-
Giờ tín chỉ đối với các hoạt động:
o
Lý thuyết :
30 tiết
o
Thực hành :
30 tiết
-
Đánh giá môn học
o Điểm
quá trình: 50% (Chuyên cần 10% - Kiểm tra 20% - Lab/Dự án 20%)
o Thi
cuối kỳ: 50% (Trên máy)
-
Nội dung môn học
o Front-end
§ React
(hoặc tùy chọn khác)
o Back-end
§ Laravel
(hoặc tùy chọn khác)
o Quản
lý mã nguồn
§ Git
(hoặc tùy chọn khác)
o Môi
trường triển khai
§ Local
§ Cloud
o Dự
án mẫu: Todolist (hoặc tùy chọn khác)
-
Phương pháp học
o Xem
các clip/đọc hướng dẫn chi tiết và làm theo
o Đọc
sách/ebook tiếng Việt và làm ra sản phẩm
o Đọc
sách/ebook tiếng Anh và làm ra sản phẩm
o Làm
một dự án lớn (làm theo clip)
o Tự
tải mã nguồn các dự án từ trên mạng (ví dụ github) về đọc hiểu và làm lại (rèn
khả năng đọc và hiểu mã nguồn)
o Đọc
các bài viết về công nghệ chuyên sâu, sách chuyên sâu
o Ghi chép mọi thứ vào sổ tay (word)
Tài liệu học
Ebook:
1. https://drive.google.com/file/d/1nSTGV2JW2grdbRb5GK7em3M1VvDATGmZ/view?usp=sharing
2.
3.
– Loạt bài của F8: https://www.youtube.com/watch?v=x0fSBAgBrOQ&list=PL_-VfJajZj0UXjlKfBwFX73usByw3Ph9Q
– Loạt bài của CodersX: https://www.youtube.com/watch?v=xuVL7hoYb3M&list=PLkY6Xj8Sg8-vV5kALCOT0LShKc6mVFBvW
1
React
1.1
Tổng quan
1.1.1
React là gì?
Bạn hoàn toàn có thể phát triển phần front-end của một ứng dụng
web bằng HTML, CSS và JavaScript; tuy nhiên, để có thể:
– Tái sử dụng các thành phần trong quá trình phát triển;
– Tăng tốc độ hiển thị khi cần cập nhật các thành phần giao
diện;
– Giúp người dùng có trải nghiệm với ứng dụng tốt hơn;
– Thân thiện với SEO;
– Và dễ dàng cộng tác giữa các thành viên trong quá trình
phát triển; thì bạn nên nghĩ tới việc sử dụng các thư viện, framework trong quá
trình phát triển phần front-end cho các ứng dụng web.
Có rất nhiều các thư viện và framework có thể hỗ trợ quá
trình phát triển phần front-end, ví dụ React, Angular, Vue, jQuery. Phần này sẽ
giúp bạn tìm hiểu và sử dụng được React.
React (cũng được gọi là ReactJS, React.js) là một thư viện
JavaScript mã nguồn mở do Facebook tạo ra năm 2013, được sử dụng để xây dựng
giao diện người dùng (UI) cho các ứng dụng web (single page application-SPA) hoặc
ứng dụng di động (mobile application).
React tạo ra giao diện từ các thành phần nhỏ hơn gọi là các
component.
Vì React chỉ quan tâm tới việc kết xuất dữ liệu ra DOM, nên
khi xây dựng front-end cần kết hợp React với các thư viện khác như Redux, React
Router để quản lý trạng thái (state management) và điều hướng xử lý (routing).
Thư viện React chạy trên cả client và server.
1.1.2
Cài đặt React developer tool
Để kiểm tra một trang web có sử dụng React hay không, cần
cài React Developer Tools cho trình duyệt Chrome. Làm như sau:
– Vào google.com, nhập từ khóa: “chrome how to install react developer
tools”
– Mở kết quả tìm kiếm đầu tiên, ví dụ “https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi”
– Trình duyệt sẽ mở trang có React Developer Tools, bấm vào nút Add to Chrome để cài đặt cho trình duyệt
– Nếu cài đặt thành công, biểu tượng của React Developer
Tools (đừng nhầm với Developer Tools của trình duyệt) sẽ xuất hiện ở phía phải
của thanh địa chỉ trình duyệt, và nó sẽ sáng lên khi trang web hiện tại có sử dụng
React. Mở thử trang https://reactjs.org/ là
cái biểu tượng nó sẽ sáng lên, bấm vào biểu tượng rồi đọc nội dung thông báo để biết thêm
– Mở Developer Tools sẽ thấy có thêm tab Components và
Profiler giúp làm việc với React
1.1.3
Cài đặt Node.js
Khi học và làm việc với ngôn ngữ lập trình JavaScript, bạn sẽ
cần phải có một trình dịch mã để dịch mã nguồn sang mã thực thi; sau đó thực
thi mã nguồn và xuất ra kết quả. Để làm việc này, bạn có thể sử dụng trình duyệt
web hoặc chương trình Nodejs.
Nodejs là một môi trường thực thi mã JavaScript, đa nền tảng,
mã nguồn mở. Nó bao gồm V8 JavaScript engine của Google, libUV, và một số thư
viện khác.
Với Nodejs bạn có thể thực thi mã JavaScript bên ngoài trình
duyệt.
Nodejs cho phép nhà phát triển sử dụng JavaScript để viết
các công cụ dòng lệnh và tạo ra các đoạn mã chạy tại server để sinh ra nội dung
web động trước khi gửi về trình duyệt, điều này cho phép tạo ra một ứng dụng
web chỉ sử dụng một ngôn ngữ lập trình duy nhất cho cả phía client và phía
server.
– Tải Nodejs về máy: https://nodejs.org/en/
– Sau khi tải về, nhấp đúp vào tập tin vừa tải về để cài đặt
Nodejs. Quá trình cài đặt Nodejs sẽ thiết lập luôn biến môi trường PATH, do vậy
có thể sử dụng chương trình dòng lệnh (cmd) để nhập lệnh cho Nodejs thực thi ở
mọi vị trí.
– Để kiểm tra cài đặt Nodejs được hay chưa, trong cửa sổ
dòng lệnh nhập lệnh node –v để xem
phiên bản của Nodejs. Hoặc vào thư mục C:\Program Files\ sẽ thấy thư mục
nodejs.
D:\>node -v
v10.15.3
1.1.4
Xem và đọc thêm
– Sử dụng các từ khóa sau để tìm kiếm trên mạng, đọc và xem
thêm: react, react developer tool, nodejs, biến môi trường trong Windows,
– Nodejs là gì : https://vi.wikipedia.org/wiki/Node.js
– What is Nodejs : https://en.wikipedia.org/wiki/Node.js
– React: https://reactjs.org/
– Xem ReactJS là gì? Tại sao nên học ReactJS? của f8 [https://www.youtube.com/watch?v=x0fSBAgBrOQ&list=PL_-VfJajZj0UXjlKfBwFX73usByw3Ph9Q]
1.1.5
Bài tập và thực hành
Bài tập 1. Thực hiện các việc sau:
– Cài đặt React developer tool cho trình duyệt trên máy của
bạn.
– Liệt kê 3 trang web không sử dụng React và 3 trang web có
sử dụng React.
Bài tập 2. Thực hiện các việc sau:
– Cài đặt Nodejs trên máy của bạn.
– Phiên bản của Nodejs trên máy bạn là gì?
– Biến môi trường (PAHT) của chương trình Nodejs trên máy bạn
được lưu ở đâu? Có nội dung gì?
– Bạn hãy xóa biến môi trường của Nodejs, chạy lệnh node – v
ở cửa sổ dòng lệnh? chuyện gì xảy ra? tại sao?
– Bạn hãy thiết lập lại biến môi trường cho Nodejs, chạy lại
lệnh node –v ở cửa sổ dòng lệnh? chuyện gì xảy ra? tại sao?
– Bạn có thể tìm thấy tiến trình Nodejs trong tiện ích Task Manager
của Windows không? Giải thích.
1.1.6
Câu hỏi ôn tập
Câu 1. React được gọi là gì?
A. Framework
B. Library
C. Program
D. Extension
Câu 2. Nodejs được gọi là gì?
A. Extension
B. Framework
C. Platform
D. Library
Câu 3. React (also known as React.js or ReactJS) is a free
and open-source front-end JavaScript library for building user interfaces based
on _________.
A. library
B. framework
C. functions
D. UI components
Câu 4. Node.js is an open-source, cross-platform, back-end
JavaScript runtime environment that runs on the V8 engine and executes
JavaScript code outside a __________.
A. server
B. web browser
C. extension
D. computer
Đáp án: 1 (B), 2 (C), 3(D), 4 (B)
--------
Cập nhật: 22/2/2022
-------