Hướng dẫn đồ an python

TRƯỜNG ĐẠI HỌC BÁCH KHOA HÀ NỘI

VIỆN ĐIỆN TỬ - VIỄN THÔNG

ĐỒ ÁN

TỐT NGHIỆP ĐẠI HỌC
Đề tài:

THIẾT KẾ HỆ THỐNG TRÒ CHƠI PHIÊU LƯU BẮN
BÓNG BAY BẰNG NGÔN NGỮ LẬP TRÌNH
PYTHON TRÊN NỀN WEBSITE GAMEBALL

Hà Nội, 6-2018

Chương 1

TRƯỜNG ĐẠI HỌC BÁCH KHOA HÀ NỘI

Đánh
giá quyển
án tốtTHÔNG
nghiệp
VIỆN
ĐIỆN
TỬ -đồ
VIỄN
(Dùng cho giảng viên hướng dẫn)
Giảng viên đánh giá: ...............................................
Họ và tên Sinh viên: ................................................ MSSV: ………………….

Tên đồ án: ................................... ................................... ...................................
………………………………………………………………………………….
Chọn các mức điểm phù hợp cho sinh viên trình bày theo các tiêu chí:
Rất kém (1); Kém (2); Đạt (3); Giỏi (4); Xuất sắc (5)

ĐỒ ÁN

Có sự kết hợp giữa lý thuyết và thực hành (20)
1 Nêu rõ tính cấp thiết và quan trọng của đề tài, các vấn đề và các giả 1 2 3 4 5

TỐT NGHIỆP ĐẠI HỌC

thuyết (bao gồm mục đích và tính phù hợp) cũng như phạm vi ứng

dụng của đồ án
2 Cập nhật kết quả nghiên cứu gần đây nhất (trong nước/quốc tế)
1 2 3 4 5
3
Nêu


chi
tiết
phương
pháp
nghiên
cứu/giải
quyết
vấn
đề

1 2 3 4 5
Đề tài:
4 Có kết quả mô phỏng/thưc nghiệm và trình bày rõ ràng kết quả đạt 1 2 3 4 5
được
THIẾT
KẾ
HỆ
THỐNG
TRÒ
CHƠI
LƯU
Có khả
năng
phân tích và
đánh giá
kết quả PHIÊU
(15)
5 Kế hoạch làm việc rõ ràng bao gồm mục tiêu và phương pháp thực

1 2 3 4 5

BẮN BÓNG BAY BẰNG NGÔN NGỮ LẬP TRÌNH

hiện dựa trên kết quả nghiên cứu lý thuyết một cách có hệ thống
6 Kết quả được trình bày một cách logic và dễ hiểu, tất cả kết quả đều 1 2 3 4 5

PYTHON TRÊN NỀN WEBSITE GAMEBALL

được phân tích và đánh giá thỏa đáng.
7 Trong phần kết luận, tác giả chỉ rõ sự khác biệt (nếu có) giữa kết quả 1 2 3 4 5

đạt được và mục tiêu ban đầu đề ra đồng thời cung cấp lập luận để
đề xuất hướng giải quyết có thểHà
thực
hiện
trong tương lai.
Nội,
6-2018
Kỹ năng viết (10)
8 Đồ án trình bày đúng mẫu quy định với cấu trúc các chương logic và 1 2 3 4 5
đẹp mắt (bảng biểu, hình ảnh rõ ràng, có tiêu đề, được đánh số thứ
tự và được giải thích hay đề cập đến trong đồ án, có căn lề, dấu cách

Chương 17

sau dấu chấm, dấu phẩy v.v), có mở đầu chương và kết luận chương,
có liệt kê tài liệu tham khảo và có trích dẫn đúng quy định
9 Kỹ năng viết xuất sắc (cấu trúc câu chuẩn, văn phong khoa học, lập 1 2 3 4 5
luận logic và có cơ sở, từ vựng sử dụng phù hợp v.v.)
Thành tựu nghiên cứu khoa học (5) (chọn 1 trong 3 trường hợp)
10a Có bài báo khoa học được đăng hoặc chấp nhận đăng/đạt giải

Chương 18

SVNC khoa học giải 3 cấp Viện trở lên/các giải thưởng khoa học

5

(quốc tế/trong nước) từ giải 3 trở lên/ Có đăng ký bằng phát minh
sáng chế

Được báo cáo tại hội đồng cấp Viện trong hội nghị sinh viên
10b

nghiên cứu khoa học nhưng không đạt giải từ giải 3 trở lên/Đạt giải
khuyến khích trong các kỳ thi quốc gia và quốc tế khác về chuyên

ngành như TI contest.
10c Không có thành tích về nghiên cứu khoa học

2

0

Điểm tổng

/50

Điểm tổng quy đổi về thang 10

3. Nhận xét thêm của Thầy/Cô (giảng viên hướng dẫn nhận xét về thái độ và
tinh thần làm việc của sinh viên)
.............................................................................................................................
.............................................................................................................................
.............................................................................................................................
.............................................................................................................................
.............................................................................................................................
.............................................................................................................................
..................
Ngày:

/

/201

Người nhận xét
(Ký và ghi rõ họ tên)

Đánh giá quyển đồ án tốt nghiệp
(Dùng cho cán bộ phản biện)
Giảng viên đánh giá: ...............................................
Họ và tên sinh viên: ................................................ MSSV: ………………….
Tên đồ án: ................................... ................................... ...................................
………………………………………………………………………………….
Chọn các mức điểm phù hợp cho sinh viên trình bày theo các tiêu chí:
Rất kém (1); Kém (2); Đạt (3); Giỏi (4); Xuất sắc (5)
Có sự kết hợp giữa lý thuyết và thực hành (20)
Nêu rõ tính cấp thiết và quan trọng của đề tài, các vấn đề và các giả
1 thuyết (bao gồm mục đích và tính phù hợp) cũng như phạm vi ứng 1 2 3 4 5
dụng của đồ án
2 Cập nhật kết quả nghiên cứu gần đây nhất (trong nước/quốc tế)
3 Nêu rõ và chi tiết phương pháp nghiên cứu/giải quyết vấn đề
Có kết quả mô phỏng/thưc nghiệm và trình bày rõ ràng kết quả đạt
4
được
Có khả năng phân tích và đánh giá kết quả (15)
Kế hoạch làm việc rõ ràng bao gồm mục tiêu và phương pháp thực
5
hiện dựa trên kết quả nghiên cứu lý thuyết một cách có hệ thống
Kết quả được trình bày một cách logic và dễ hiểu, tất cả kết quả đều

6
được phân tích và đánh giá thỏa đáng.
Trong phần kết luận, tác giả chỉ rõ sự khác biệt (nếu có) giữa kết
7 quả đạt được và mục tiêu ban đầu đề ra đồng thời cung cấp lập luận

1 2 3 4 5
1 2 3 4 5
1 2 3 4 5

1 2 3 4 5
1 2 3 4 5

1 2 3 4 5

để đề xuất hướng giải quyết có thể thực hiện trong tương lai.
Kỹ năng viết (10)
Đồ án trình bày đúng mẫu quy định với cấu trúc các chương logic
và đẹp mắt (bảng biểu, hình ảnh rõ ràng, có tiêu đề, được đánh số
8 thứ tự và được giải thích hay đề cập đến trong đồ án, có căn lề, dấu 1 2 3 4 5
cách sau dấu chấm, dấu phẩy v.v), có mở đầu chương và kết luận

9
10a

chương, có liệt kê tài liệu tham khảo và có trích dẫn đúng quy định
Kỹ năng viết xuất sắc (cấu trúc câu chuẩn, văn phong khoa học, lập

1 2 3 4 5
luận logic và có cơ sở, từ vựng sử dụng phù hợp v.v.)
Thành tựu nghiên cứu khoa học (5) (chọn 1 trong 3 trường hợp)

Có bài báo khoa học được đăng hoặc chấp nhận đăng/đạt giải
5
SVNC khoa học giải 3 cấp Viện trở lên/các giải thưởng khoa học
(quốc tế/trong nước) từ giải 3 trở lên/ Có đăng ký bằng phát minh

sáng chế
Được báo cáo tại hội đồng cấp Viện trong hội nghị sinh viên nghiên
10b

10c

cứu khoa học nhưng không đạt giải từ giải 3 trở lên/Đạt giải khuyến
khích trong các kỳ thi quốc gia và quốc tế khác về chuyên ngành
như TI contest.
Không có thành tích về nghiên cứu khoa học

2

0

Điểm tổng

/50

Điểm tổng quy đổi về thang 10

3. Nhận xét thêm của Thầy/Cô (giảng viên hướng dẫn nhận xét về thái độ và
tinh thần làm việc của sinh viên)
.............................................................................................................................

.............................................................................................................................
.............................................................................................................................
.............................................................................................................................
.............................................................................................................................
.............................................................................................................................
..................
Ngày:

/

/201

Người nhận xét
(Ký và ghi rõ họ tên)

GVHD: ThS.

LỜI NÓI ĐẦU
Trước hết, em xin cảm ơn tất cả các thầy cô giáo trường đại học Bách Khoa
Hà Nội nói chung và các thầy cô của Viện Điện tử - Viễn thông nói riêng đã tận tâm
truyền đạt kiến thức cho em trong suốt quãng thời gian em được đi học ở trường.
Thầy cô đã truyền dạy lại cho em rất nhiều kiến thức nền tảng cơ sở đến những kiến
thức chuyên môn hữu ích và cả những kinh nghiệm sâu sắc ngoài đời sống để giúp
đỡ cho chúng em cho cuộc sống sau này.
Là sinh viên năm cuối của Viện Điện tử -Viễn thông, Đại Học Bách Khoa Hà
Nội, em nhận thấy mình cần phải phát huy thế mạnh về lĩnh vực lập trình bởi vì
hiện nay, công nghệ lập trình phát triển rất nhanh đói hỏi các kỹ sư như em cần nắm
bắt nhanh với tư duy lập trình mới, nắm bắt tìm hiểu những ngôn ngữ mới, những
thư viện mới, framework mới xuất hiện ngày càng nhiều và có rất nhiều điểm mạnh

riêng phù hợp với hầu hết các yêu cầu của các công ty, các đối tác khách hàng. Lựa
chọn tìm hiểu và ứng dụng trong lập trình ReactJS và Python có tính mới mẻ, tính
phổ biến, tính hiệu quả hàng đầu, em quyết định chọn đề tài Đồ án Tốt nghiệp:
“THIẾT KẾ HỆ THỐNG TRÒ CHƠI PHIÊU LƯU BẮN BÓNG BAY BẰNG
NGÔN NGỮ LẬP TRÌNH PYTHON TRÊN NỀN WEBSITE GAMEBALL”
Em xin tỏ lòng biết ơn đến thầy giáo ThS. đã hỗ trợ cho em trong việc chọn
đề tài cũng như hướng dẫn em trong suốt quá trình thực hiện đồ án tốt nghiệp. Em
đã nhận được rất nhiều lời khuyên bổ ích cũng như những kiến thức về chuyên môn
đáng quý hỗ trợ để em trong suốt quá trình làm đồ án. Đây là những kiến thức sẽ
theo em trong suốt quá trình làm việc sau này.
Em cũng xin gửi lời cảm ơn chân thành đến các anh chị trong Công ty Cổ
phần Đầu tư và Phát triển Koolsoft cung cấp chia sẻ kiến thức, giúp đỡ về chuyên
môn cho em làm đồ án cũng như tạo môi trường làm việc khoa học cho em rất
nhiều kinh nghiệm quý giá cho công việc tương lai của em.
Trong suốt quá trình làm đồ án, dù đã rất cố gắng nhưng vì thời gian có hạn
nên sản phẩm chắc chắn sẽ còn những thiếu sót. Nên em rất mong nhận được sự
góp ý của các thầy cô và các bạn, để em rút ra được những kinh nghiệm cho những
sản phẩm sau này của em. Em xin chân thành cảm ơn !

TÓM TẮT ĐỒ ÁN
Trong thời điểm Công nghệ lập trình phát triển mạnh và vô cùng nhanh
chóng như hiện nay, những ngôn ngữ mới, thư viện mới, framework mới xuất hiện
SVTH: Kiều Văn Đông – MSSV: 20130947

1

GVHD: ThS.
ngày càng nhiều và có rất nhiều điểm mạnh riêng đáp ứng hầu hết yêu cầu ngày
càng cao của các công ty, các đối tác khách hàng. Cuối năm 2017 và đầu năm 2018,

cả Python và React đều nằm trong mọi bảng xếp hạng xu hướng lập trình như được
yêu thích hàng đầu, phổ biến nhất Thế giới, cũng như đáp ứng tốt nhất nhu cầu
tuyển dụng.. Nắm bắt những điểm mạnh vượt trội của chúng, trong Đồ án tốt nghiệp
của mình, em đã tìm hiểu về chúng và ứng dụng trong lập trình, cụ thể: Python
trong lập trình Game và ReactJS trong lập trình website gameball
Đồ án của em bao gồm 3 chương, nội dung chính các chương như sau:
Chương 1 sẽ đề cập đến khái niệm, đặc điểm và ứng dụng trong lập trình của
Python và ReactJS.
Chương 2 trình bày phần triển khai ứng dụng Python để lập trình trò chơi bắn bóng
”Game Ball3”
Chương 3 trình bày triển khai ứng dụng ReactJS để lập trình website về trò chơi
“GameBall3”.
Cuối cùng là kết luận, đưa ra những mục tiêu đã và chưa làm được trong hệ
thống, những thuận lợi và khó khăn trong quá trình thực hiện đồ án và hướng
phát triển trong tương lai.

ABSTRACT
Until now programming technology has grown tremendously and rapidly,
today's new languages, new libraries, and new frameworks appear to have more and
more strengths that meet most of the requirements. high of companies, customer
partners. By the end of 2017 and early 2018, both Python and React programming
languages will be in every rankings as Top programming languages, Top of the most
popular languages. Grasp the strengths of the above two languages, in my
graduation project, I learned about them and application in the programmer,
specifically: Python in game programming and ReactJS in website programming.
My project includes 3 program, primary content programs as following:
Chapter 1 shows the Python and React with the specific and applications in
the programming.

SVTH: Kiều Văn Đông – MSSV: 20130947

2

GVHD: ThS.
Chapter 2 shows implementation of the Python application to set the game:
”GameBall3”
Chapter 3 presents the ReactJS application to set the website about game
“GameBall3”.
Finally, the conclusion presents the advantages and difficulties in project
implementation and development in the future.

MỤC LỤC
LỜI NÓI ĐẦU.........................................................................................................1
TÓM TẮT ĐỒ ÁN...................................................................................................2
ABSTRACT.............................................................................................................3
MỤC LỤC................................................................................................................ 4
DANH MỤC HÌNH VẼ...........................................................................................6
DANH MỤC BẢNG BIỂU.....................................................................................7
DANH SÁCH CÁC TỪ VIẾT TẮT.......................................................................8
CHƯƠNG 1 TÌM HIỂU VỀ PYTHON VÀ REACT............................................9
1.1 TÌM HIỂU VỀ PYTHON.................................................................................9
1.1.1 Lịch sử phát triển.....................................................................................9
1.1.2 Đặc điểm chung........................................................................................9
1.1.3 Điểm đặc biệt trong cú pháp, quy tắc lập trình......................................10
1.1.4 Câu lệnh rẽ nhánh..................................................................................16
1.1.5 Vòng lặp.................................................................................................17
1.1.6 Hàm........................................................................................................18
1.1.7 Lớp (Class).............................................................................................19
1.2 TÌM HIỂU VỀ REACTJS............................................................................21

1.2.1 Khảo sát hiện trạng................................................................................21
1.2.2 Giới thiệu chung về ReactJS...................................................................21
1.2.3 Đặc điểm chi tiết về ReactJS..................................................................25
CHƯƠNG 2 ỨNG DỤNG PYTHON LẬP TRÌNH TRÒ CHƠI GAMEBALL 3..28
SVTH: Kiều Văn Đông – MSSV: 20130947

3

GVHD: ThS.
2.1 Ý tưởng..........................................................................................................28
2.2 Giới thiệu sơ lược về thư viện pygame..........................................................28
2.3 Phân tích trò chơi...........................................................................................28
2.3.1 Ý tưởng...................................................................................................28
2.3.2 Xác định rõ yêu cầu................................................................................28
2.3.3 Mô hình hóa chức năng..........................................................................29
2.3.4 Sơ đồ hoạt động của hệ thống (Activity Diagram).................................35
2.3.5 Mô hình cầu trúc....................................................................................36
2.3.6 Mô hình hóa hoạt động..........................................................................41
2.4 Thiết kế trò chơi............................................................................................45
2.4.1 Thiết kế lớp và phương thức...................................................................45
2.5 Thuật toán......................................................................................................46
2.5.1 Phát hiện va chạm..................................................................................46
2.5.2 Phát hiện click trúng vật thể...................................................................47
2.5.3 Giải quyết va chạm.................................................................................47
2.6 Một số hình ảnh của trò chơi.........................................................................48
2.7 Kết luận.........................................................................................................53
CHƯƠNG 3 ỨNG DỤNG REACTJS LẬP TRÌNH WEBSITE TRÒ CHƠI
“GAME BALL3”...................................................................................................54
3.1 Ý tưởng thiết kế website cho trò chơi “Game Ball3”....................................54

3.2 Lý do lựa chọn thư viện ReactJS...................................................................54
3.3 Mục tiêu cần đạt được...................................................................................55
3.4 Yêu cầu phi chức năng..................................................................................56
3.5 Thiết kế cấu trúc............................................................................................56
3.5.1 Lựa chọn cấu trúc phần mềm.................................................................56
3.6 Kiểm thử........................................................................................................58
3.7 Các bước thiết kế giao diện website..............................................................59
3.7.1 Thiết kế giao diện trang chủ...................................................................59
3.7.2 Tạo trang đăng ký, đăng nhập, đổi mật khẩu cho người chơi................62
3.7.3 Thống kê bảng xếp hạng điểm chơi........................................................62
3.7.4 Tạo tính năng bình luận cho người dùng...............................................62
3.7.5 Tính năng tải game cho người dùng.......................................................63
3.7.6 Tạo cơ sở dữ liệu cho web......................................................................63
SVTH: Kiều Văn Đông – MSSV: 20130947

4

GVHD: ThS.
3.7.7 Hình ảnh hoàn thiện...............................................................................64
KẾT LUẬN............................................................................................................66
KẾT LUẬN CHUNG............................................................................................69
TÀI LIỆU THAM KHẢO.....................................................................................70
BẢNG ĐỐI CHIẾU THUẬT NGỮ VIỆT – ANH...............................................71
PHỤ LỤC............................................................................................................... 72

DANH MỤC HÌNH VẼ
Hình 1.1: Virtual DOM............................................................................................23
Hình 2.2: Sơ đồ hoạt động của hệ thống..................................................................35
Hình 2.3: Sơ đồ lớp.................................................................................................39

Hình 2.4: Sơ đồ đối tượng.......................................................................................40
Hình 2.6: Sơ đồ tuần tự của hoạt động đăng nhập...................................................41
Hình 2.7: Sơ đồ tuần tự của hoạt động chơi không đăng nhập................................42
Hình 2.8: Sơ đồ tuần tự của hoạt động hướng dẫn chơi...........................................42
Hình 2.9: Sơ đồ tuần tự của hoạt động bật/tắt âm thanh..........................................43
Hình 2.0: Sơ đồ tuần tự của hoạt động xem điểm số...............................................43
Hình 2.11: Sơ đồ tuần tự của hoạt động chọn màn chơi..........................................44
Hình 2.12 Sơ đồ tuần tự của hoạt động chơi............................................................44
Hình 2.13: Menu start game sau run code ‘main’ trong Pycharm............................48
Hình 2.14: Tính năng đăng ký tạo tài khoản chơi game..........................................48
Hình 2.15: Tính năng đăng nhập tài khoản chơi game............................................49
Hình 2.16: Menu chọn map.....................................................................................49
Hình 2.17: Map chơi 3.............................................................................................50
Hình 2.18: Map chơi 7.............................................................................................50
Hình 2.19: Map chơi 9.............................................................................................51
Hình 2.20: Điểm của người chơi từng map.............................................................52
Hình 2.21: Giao diện code Pycharm........................................................................52
Hình 2.22: Giao diện màn hình run code Python.....................................................53
Hình 3.1: Giao diện trang chủ hoàn thiện................................................................59
Hình 3.2: Giao diện trang chủ hoàn thiện................................................................60
Hình 3.3: Giao diện trang chủ hoàn thiện...............................................................60
Hình 3.4: Giao diện tab tin tức thông báo trên trang chủ.........................................61
Hình 3.5: Giao diện thông tin trang liên kết trang chủ hoàn thiện...........................61
Hình 3.6: Giao diện footer trang chủ hoàn thiện......................................................61
Hình 3.7: Giao diện modal đăng nhập & đăng ký...................................................62
SVTH: Kiều Văn Đông – MSSV: 20130947

5

GVHD: ThS.
Hình 3.8: Giao diện box bình luận trên trang chủ hoàn thiện..................................63

DANH MỤC BẢNG BIỂU
Hình 3.9: Giao diện tab tải game.............................................................................63
Hình 3.10: Giao diện hoàn thiện..............................................................................64
Hình 3.11: Giao diện hoàn thiện..............................................................................64
Hình 3.12: Giao diện hoàn thiện..............................................................................65
Bảng 1.1: Các từ khóa trong Python........................................................................10
Bảng 1.2: Biểu thức toán học..................................................................................11
Bảng 1.3: Danh sách các escape sequence...............................................................12
Bảng 2.1 Mô tả đăng ký..........................................................................................30
Bảng 2.2 Mô tả đăng nhập.......................................................................................31
Bảng 2.3 Mô tả chọn màn chơi................................................................................31
Bảng 2.4 Mô tả hiển thị điểm số cao.......................................................................31
Bảng 2.5 Mô tả bật âm thanh...................................................................................32
Bảng 2.6 Mô tả tắt âm thanh...................................................................................32
Bảng 2.7 Mô tả hướng dẫn chơi..............................................................................32
Bảng 2.8 Mô tả chơi................................................................................................33
Bảng 2.9 Mô tả tạm dừng trò chơi...........................................................................33
Bảng 2.10 Mô tả tiếp tục trò chơi............................................................................33
Bảng 2.11 Mô tả chơi lại.........................................................................................34
Bảng 2.12 Thẻ..........................................................Error! Bookmark not defined.
Bảng 2.13 Thẻ Ball..................................................................................................36
Bảng 2.14 Thẻ Bomb...............................................................................................36
Bảng 2.15 Thẻ wall.................................................................................................37
Bảng 2.17 Thẻ storm...............................................................................................37
Bảng 2.18 Thẻ resizeObj.........................................................................................38
Bảng 3.1: So sánh AngularJS và ReactJS................................................................55
Bảng 3.2: Kiểm thử.................................................................................................58

DANH SÁCH CÁC TỪ VIẾT TẮT
SVTH: Kiều Văn Đông – MSSV: 20130947

6

GVHD: ThS.
MVC
API
SPA
PC
UI
JS
CSS
CLI
GUI

Model – View - Control
Application Programming Interface
Single Page
Personal Computer
User Interface
Java Scripts
Cascading Style Sheets
Command Line Interface
Graphical User Interface

Chương 33
TÌM

HIỂU VỀ
PYTHON

REACT
1.1 TÌM HIỂU VỀ PYTHON
1.1.1 Lịch sử phát triển
Python được phát triển bởi Guido van Rossum vào cuối những năm 1980.
Ông là người quyết định hướng phát triển của ngôn ngữ .
Python 2.0 đã được phát hành 16/10/2000. Python 2.0 thêm những tính năng
mới như là cycle-detecting garbage (bộ phát hiện rác theo chu kỳ), hỗ trợ unicode.
Python 3.0 được phát hành năm 2008. Dòng 3.x không hoàn toàn tương
thích với dòng 2.x, cả hai được phát triển song song. Tuy nhiên cho đến nay python
đã ngưng phát triển dòng 2.x và chỉ tập trung phát triển vào dòng 3.x. Hiện tại đã ra
đến phiên bản python 3.6.4
1.1.2 Đặc điểm chung
 Python là một ngôn ngữ rất dễ dàng để sử dụng được. Ở nước ta C là ngôn
ngữ được lựa chọn để sinh viên tiếp cận với ngôn ngữ lập trình. Còn ở nhiều
nước khác, rất nhiều các trường đại học trên thế giới lựa chọn Python.
 Code python rất dễ đọc , rõ ràng rành mạch
SVTH: Kiều Văn Đông – MSSV: 20130947

7

GVHD: ThS.
 Có một thư viện chuẩn rất lớn, đây là một lợi thế không hề nhỏ cho những
lập trình viên python. Họ có thể tận dụng nguồn thư viện này để phát triển
dự án của mình mà không phải mất công xây dựng thư viện.
 Python là một ngôn ngữ thông dịch, thực thi code theo từng dòng nên rất dễ
dàng để debug.

 Không giống như C là ngôn ngữ hướng cấu trúc Python là một ngôn ngữ
hướng đối tượng.
 Ngoài ra Python còn hỗ trợ rất nhiều thư viện lập trình GUI (lập trình giao
diện người dùng), tương thích với các ngôn ngữ lập trình khác
1.1.3 Điểm đặc biệt trong cú pháp, quy tắc lập trình
1.1.3.1 Biến
Biến giúp chúng ta lưu trữ dữ liệu và cho phép lấy các dữ liệu để tính toán.
Khi một biến được khai báo một vùng nhớ trong bộ nhớ RAM sẽ được dành cho
biến.
Không giống các ngôn ngữ khác, khi khai báo biến phải có kiểu dữ liệu đi
kèm thì Pyhon không cần. Nó sẽ tự xác định kiểu dữ liệu của biến. Cú pháp khởi
tạo:
=
A= 3
Ten = ‘Dong’
Cú pháp khởi tạo nhiều biến:
, , .., =

biến thứ nhất>, , ..,
a,b,c,d,e = 1,2,3,4,5
*Một chú ý khi đặt tên biến: Không được trùng với từu khóa .Dưới đây là danh sách
từ khóa của Python
Bảng 1.1: Các từ khóa trong Python
and
del
from
not
while

as
else


global
or
with

assert
elif
if
pass
yield

break
except
import
print

SVTH: Kiều Văn Đông – MSSV: 20130947

class
exec
in
raise

continue
finally
is
return

def
for
lambda


try

8

GVHD: ThS.
1.1.3.2 Kiểu dữ liệu
Như đã nói ở trên, khi khởi tạo giá trị của biến không cần phải đi kèm với kiểu
dữ liệu. Cũng giống như các ngôn ngữ khác python hỗ trợ kiểu dữ liệu số nguyên,
số thực,số phức,phân số,kiểu ký tự,kiểu chuỗi. Ngoài ra Python còn định nghĩa
thêm các kiểu dữ liệu riêng biệt của chính mình: list, tuple, set, dic.
1.1.3.3 Số nguyên
Số nguyên bao gồm các số nguyên dương, số 0 và các số nguyên âm. Trong
Python, kiểu dữ liệu số nguyên cũng không có gì khác biệt: byte, int, long int
a = -30
Một điểm đáng chú ý trong Python 3.X đó là kiểu dữ liệu số nguyên là vô
hạn. Ta có thể tính toán với những số cực kỳ lớn mà những ngôn ngữ khác không
thể.
1.1.3.3.1 Số thực
Về kiểu dữ liệu số thực, thì đây là tập hợp các số nguyên và số thập phân
.Kiểu dữ liệu: float, double,…
b = 3.14
c = -2.84
d = 6,666666666666666666666666
1.1.3.3.2

Số phức

Số phức gồm 2 thành phần : phần thực và phần ảo. Cú pháp tạo một số phức:
complex(,)


Hoặc có thể đơn giản là :
= + j
Cả 2 cho ra kết quả tương đương.
complex(3,4)
>>> 3+4j
3+4j
>>> 3+4j
Các toán tử cơ bản với kiểu dữ liệu số trong Python
Dưới đây là một số biểu thức toán học của kiểu dữ liệu số trong Python

SVTH: Kiều Văn Đông – MSSV: 20130947

9

GVHD: ThS.
Bảng 1.2: Biểu thức toán học
Biểu thức
X+Y
X-Y
X*Y
X/Y
X // Y
X%Y
X ** Y

Mô tả
Tổng của X và Y
Hiệu của X với Y
Tích của X với Y


Thương của X với Y(kết quả là 1 số thực)
Thương nguyên của X với Y
Dư của X chia Y
Lũy thừ của X với số mũ là Y

1.1.3.4 Kiểu dữ liệu chuỗi
Chuỗi hay string là tập hợp các ký tự. Trong python rất linh hoạt, chuỗi có
thể đặt trong cặp dấu ‘ ’ hoặc “ ” hoặc ‘‘‘ ’’’. Nhưng phổ biến nhất là ‘ ’và “ ”. Cú
pháp khai báo 1 chuỗi:
=’
Ten = ‘Dong’
Khi làm việc với chuỗi ta phải chú ý đến một thứ rất quan trọng đó là Escape
Sequence là một chuỗi (chính xác là kí tự). Bắt đầu với một dấu \. Python có rất
nhiều các escape sequence.
Bảng 1.3: Danh sách các escape sequence
Tên
Kí hiệu
Giải thích
Alert
\a
Phát ra tiếng bíp
Backspace
\b
Đưa con trỏ về một khoảng trắng
Newline
\n
Đưa con trỏ xuống dòng tiếp theo
Horizontal tab
\t
In ra một tab


Single quote
\’
In ra kí tự ‘
Double quote
\’’
In ra kí tự “
Blackslash
\\
In ra kí tự \
Các escape sequence có thể làm chuỗi không giống như mong muốn.
Ví dụ: ta có một chuỗi ‘co\n me\o tre\o cay cau’
Kết quả khi in chuỗi ra màn hình:
co
me\o tre\o cay cau
Vì vậy lúc này Python hỗ trợ một chuỗi gọi là chuỗi trần. Cú pháp như sau:
r’
r‘co\n me\o tre\o cay cau’

SVTH: Kiều Văn Đông – MSSV: 20130947

10

GVHD: ThS.
Kết quả khi in chuỗi ra màn hình:
co\n me\o tre\o cay cau
Sự thật thì, chuỗi trần không phải bỏ qua các Escape Sequence, mà nó sẽ giúp
chúng ta sửa những Escape Sequence đó bằng các thêm \ trước các Escape
Sequence.
Có một chú ý khi làm việc với chuỗi là ta không thể thay đổi nội dung của chuỗi


như
với các ngôn ngữ như Pascal, C, C++ sử dụng phương pháp Indexing.
1.1.3.5 Kiểu dữ liệu List
List là một sự thay thế cho mảng ở các ngôn ngữ khác, hơn nữa list linh hoạt
hơn mảng rất nhiều. Với một mảng các giá trị trong mảng phải cú cùng kiểu dữ liệu
nhưng list thì khác, trong một list có thể có rất nhiều kiểu dữ liệu khác nhau. Các
đặc điểm của list:
 Giới hạn trong cặp [ ], các phần tử nằm trong [ ] là phần tử của list.
 Các phần tử phân cách nhau bởi dấu phẩy.
 List có thể chứa mọi giá trị kể cả chính nó.
Cách khởi tạo List:
Cú pháp:
[, , .., , ]
Ví dụ:
lst = [1,2,5,"Dong"]
Indexing
Như đã đề cập, List với là sụ thay thế cho mảng nên ta có thể truy xuất từng
phần tử của list.
lst[0]
>>>1
lst[3]
>>>Dong
Thay đổi nội dung List
lst = [1, ‘two’, 3]
lst[1] = 2
SVTH: Kiều Văn Đông – MSSV: 20130947

11


GVHD: ThS.
>>>[1, 2, 3]
1.1.3.6 Kiểu dữ liệu Tuple
Tuple về cũng là một thay thế cho mảng giống như list. Các đặc điểm của tuple:
 Giới hạn trong cặp ( ), các phần tử nằm trong ( ) là phần tử của tuple.
 Các phần tử của Tuple được phân cách nhau ra bởi dấu phẩy.
 Tuple có khả năng chứa mọi giá trị, cả chính nó.
Cách khởi tạo Tuple
Cú pháp:
(, , .., , )
Ví dụ:
tup = (1, 2, 3, 5,’anh co danh roi nhip nao khong’)
Indexing
Indexing và cắt Tuple hoàn toàn tương tự như với kiểu dữ liệu List.
Thay đổi nội dung Tuple trong Python
Việc bạn muốn thay đổi nội dung của tuple trên lí thuyết là không thể.
1.1.3.7 Kiểu dữ liệu Set
Set cũng là một tập hợp chứa các phần tử như list và tuple. Set gồm các đặc điểm
sau:
 Được giới hạn bởi cặp ngoặc {}, tất cả những gì nằm trong đó là những phần
tử của Set.
 Các phần tử của Set được phân cách nhau ra bởi dấu phẩy.
 Set không chứa nhiều hơn 1 phần tử trùng lặp.
 Không thể chứa một set trong một set.
Cách khởi tạo Set
Cú pháp:
{, , .., , }
set_ = {1, 2, 3, 4}
set_1 = {1, 1, 1} # các giá trị trùng lặp bị loại bỏ
>>>{1}

Indexing

SVTH: Kiều Văn Đông – MSSV: 20130947

12

GVHD: ThS.
Set không quan tâm đến vị trí của phần tử nằm trong set. Nên việc indexing
là không thể
1.1.3.8 Kiểu dữ liệu Dict
Dict(Dictionary) cũng là một tập hợp chứa các phần tử như LIST, TUPLE.
Điều khác biệt là List, Tuple có các index để phân biệt các phần tử thì Dict dùng các
key để phân biệt. Một Dict gồm các yếu tố sau:
 Được giới hạn bởi cặp ngoặc nhọn {}, tất cả những gì nằm trong đó là những
phần tử của Dict.
 Các phần tử của Dict được phân cách nhau ra bởi dấu phẩy.
 Các phần tử của Dict phải là một cặp key-value
 Cặp key-value của phần tử trong Dict được phân cách bởi dấu hai chấm
Cách khởi tạo Dict
Cú pháp:
{, , .., }
dic = {‘ten’: ‘Dong’, ‘maso’: 47}
Thay đổi nội dung Dict
Ví dụ:
dic ={‘ten’: ‘Dong’, ‘maso’: 47}
dic[‘ten’] = ‘Van’
Kết quả
{‘ten’: ‘Van’, ‘maso’: 47}
Thêm thủ công một phần tử vào dict


Cách này khá giống với cách ta thay đổi nội dung của Dict.
Ví dụ:
dic ={‘ten’: ‘Dong’, ‘maso’: 47}
dic[‘tuoi’] = 23
Kết quả
{‘name’: ‘Dong’, ‘member’: 47, ‘tuoi’: 23}

SVTH: Kiều Văn Đông – MSSV: 20130947

13

GVHD: ThS.
1.1.4 Câu lệnh rẽ nhánh
1.1.4.1 Câu lệnh if-else
Giống như các ngôn ngữ khác Python hỗ trợ câu lệnh if –else. Nếu thỏa mãn
điều kiện trong mênh đề if thì sẽ thực thi câu lệnh bên trong mệnh đề và ngược lại
thì thực hiện câu lênh bên trong mệnh đề else.
Cú pháp của câu lệnh if-else:
if <điều kiện>:

else:

Ví dụ
a = 100
if (a == 100):
print('Dong')
else:
print('Sai')
Kết quả


Dong
Nếu như trong trường hợp chúng ta không cần thực thi điều gì khi điều kiện
đó không đúng thì chúng ta có thể bỏ mệnh đề else cho gọn code.
1.1.4.2 Câu lệnh if-elif-else.
Không phải lúc nào chúng ta cũng có 2 trường hợp vì vậy python hỗ trợ thêm
mệnh đề elif để sử dụng trong trường hợp có nhiều điều kiện. Cú pháp như sau:
if <điều kiện1>:

elif <điều kiện2>:

elif <điều kiện3>:

else:

SVTH: Kiều Văn Đông – MSSV: 20130947

14

GVHD: ThS.
Trong đó, thì sau các mệnh đề if và elif sẽ tồn tại các điều kiện tương ứng, và
nếu như các điều kiện đó đúng thì câu lệnh ở trong mệnh đề đó sẽ được thực hiện.
Ví dụ
a=9
if a >= 4 and a <= 10 :
print('Qua mon')
elif a >= 0 and a <4:
print('Hoc lai')
else:


print('Diem khong hop le')
Kết quả
Qua mon
1.1.5 Vòng lặp
1.1.5.1 Vòng lặp for
Vòng lặp for có tác dụng lặp lại các câu lệnh theo một số lần định sẵn.
Cú pháp như sau:
for in :

Trong đó:
là các biến tạm dùng để chứa dữ liệu sau mỗi lần lặp.
là một list, tuple hoặc string,... chứa giá trị cần lặp.
Ví dụ
ten = "dong"
for i in ten:
print(i)
Kết quả:
d
o
n
g

SVTH: Kiều Văn Đông – MSSV: 20130947

15

GVHD: ThS.
1.1.5.2 Vòng lặp while.
Giống như for nhưng số lần lặp lại trên lý thuyết là không biết trước .


Cú pháp sử dụng:
while <điều kiện>:

Nếu điều kiện thỏa mãn thì vòng lặp while mới được thực thi, và ngược lại
thì nó sẽ không thực thi.
Ví dụ:
i=1
while(i <= 10):
print(i)
i += 1
Kết quả :
1
2
3
4
1.1.6 Hàm
1.1.6.1 Khai báo hàm trong Python.
Để khai báo một hàm trong Python thì chúng ta sử dụng keyword def với cú
pháp như sau:
def ():

Ví dụ:
def noi():
print(‘Day la bao cao TTTN’)
1.1.6.2 Gọi hàm
Để gọi một hàm đã được khai báo rồi, thì chúng ta sử dụng cú pháp sau:
()
#hoặc
()
SVTH: Kiều Văn Đông – MSSV: 20130947

16

GVHD: ThS.
Ví dụ
def noi():
print(‘Day la bao cao TTTN’)
noi()
Kết quả:
Day la bao cao TTTN
1.1.7 Lớp (Class)
1.1.7.1 Khai báo Class trong Python
Class là một phần không thể thiếu trong lập trình hướng đối tượng. Một class
là thể hiện cho một tập hợp các đối tượng có chung đặc điểm. Để khai báo một
class trong Python dụng cú pháp:
class :

Ví dụ:
class nguoi:

1.1.7.2 Khai báo thuộc tính trong Class
Một class có thể không hoặc chứa nhiều thuộc tính. Chúng là những đặc
điểm để mô tả đối tượng. Để khai báo một thuộc tính trong class thì mọi người chỉ
cần khai báo như khai báo một biến bình thường và lưu ý là nó phải nằm trong
phạm vi của class.
Ví dụ:
class nguoi:
ten = "Kieu Van Dong"


tuoi = 23
gioiTinh = “Nam”
1.1.7.3 Khai báo phương thức trong Class.
Trong khi thuộc tính là mô tả đối tượng thì phương thức lại thể hiện hành
động của đối tượng. Phương thức ở trong hướng đối tượng cũng tương tự như hàm
ở trong lập trình hướng thủ tục và một class thì có thể không có hoặc có nhiều

SVTH: Kiều Văn Đông – MSSV: 20130947

17

GVHD: ThS.
phương thức. Để khai báo một phương thức trong Python ta khai báo như là khai
báo với hàm và kèm theo 1 tham số mặc định là self.
Ví dụ:
class nguoi:
#thuộc tính
ten = "Kieu Van Dong"
tuoi = 23
gioiTinh = “Nam”
# phương thức
def setTen(self, ten):
self.ten = ten
def getTen(self):
return self.ten
def setTuoi(self, tuoi):
self.tuoi = tuoi
1.1.7.4 Khởi tạo class
Sau khi đã khai báo được class, để khởi tạo một đối tượng thuộc class thì sử


dụng cú pháp:
= ()
Ví dụ:
dong = nguoi()
Để truy cập thuộc tính đối tượng:
<đối tượng>.
dong.ten
Để truy cập thuộc tính đối tượng:
<đối tượng>.()
dong.getTen()
1.2 TÌM HIỂU VỀ REACTJS
1.2.1 Khảo sát hiện trạng
Sự gia tăng của các ứng dụng trình duyệt front-end đã củng cố tầm quan
trọng của JavaScript (JS) khiến nó tiếp tục phát triển, ngày càng trở nên phổ biến

SVTH: Kiều Văn Đông – MSSV: 20130947

18

GVHD: ThS.
và cùng với Python, Ruby và Java trở thành 4 ngôn ngữ hiệu quả nhất trong năm
2017 (theo Stack Overflow Developer Survey 2017, GitHub và Stack Overflow), được đề xuất là
ngôn ngữ nên học đầu tiên dành cho người mới bắt đầu lập trình (theo
www.devskiller.com).
Hàng triệu triệu nền tảng và thư viện được xây dựng dựa trên JS tạo nên một
thế giới JS đa dạng và phong phú.
1.2.2 Giới thiệu chung về ReactJS
Reactjs được phát triển dưới thư viện JavaScrip vậy JS là gì em sẽ trình bày
kỹ hơn về nó.


1.2.2.1 Java Scripts
JavaScript là ngôn ngữ lập trình hướng đối tượng (OOP) vô cùng linh hoạt,
thông dịch tích hợp vào trình duyệt nhằm tăng tính tương tác của người dùng với
trang web, nó chiếm vị trí độc tôn trong vị trí client-side. Các slideshow, pop-up
quảng cáo và tính năng autocomplete của Google là những thứ được viết bằng
JavaScript. Nó được tạo ra lần đầu tiên bởi Brendan Eich tại công ty Netscape vào
năm 1995 - được đặt tên là Mocha trong quá trình phát triển, phát hành phiên bản
beta với tên là LiveScript và cuối cùng được đặt tên là JavaScript để lợi dụng sự
phổ biến của Java.
Qua 20 năm tồn tại và phát triển, Javascript đã có những thay đổi lớn để
thích nghi với thời cuộc, và bây giờ trở thành một ngôn ngữ toàn năng, thiết yếu và
phù hợp đối với bất cứ một nhà phát triển nào. Là ngôn ngữ lập trình full stack duy
nhất cho đến thời điểm hiện nay, Javascript làm được nhiều thứ từ web client đến
server, từ desktop đến mobile … một cách khá hoàn hảo.
Bây giờ chúng ta sẽ phân tích JavaScrip có thể làm được những gì?
JavaScrip có thể xây dựng toàn bộ một trang web nếu sử dụng Node.Js và
MongoDB (Một cơ sở dữ liệu). Js hiện nay là một trong những cách ưa thích để
phát triển ứng dụng web. Đó là ngôn ngữ sử dụng rất nhiều vì nó được sử dụng cả
font-end và back-end.
Điểm mạnh của JavaScript:

SVTH: Kiều Văn Đông – MSSV: 20130947

19

GVHD: ThS.
Sự tương tác Server ít hơn: Bạn có thể xác nhận đầu

vào (input) người sử dụng trước khi gửi trang tới Server. Điều này làm tiết kiệm lưu
lượng tải ở Server, nghĩa là Server của bạn tải ít hơn.
Phản hồi ngay lập tức tới khách truy cập: Họ không

phải chờ cho một trang web tải lại để thấy xem nếu họ đã quên nhập cái gì đó.
Khả năng tương tác người dùng tăng lên: Bạn có thể

tạo các giao diện mà phản ứng lại khi người sử dụng rê chuột qua chúng hoặc kích
hoạt chúng thông qua bàn phím.
Giao diện phong phú hơn: Bạn có thể sử dụng

JavaScript để bao gồm những mục như các thành phần Drag và Drop (DnD) và các
con trượt (Slider) để cung cấp một Rich Interface (Giao diện giàu tính năng) tới site
khách truy cập của bạn.

1.2.2.2 ReactJS
React.js được Facebook ra mắt hồi 2013 và đang phát triển mạnh mẽ nó là một thư
viện Javascript đang nổi lên trong những năm gần đây với xu hướng Single Page
Application hỗ trợ việc xây dựng những thành phần (components) UI có tính tương

tác cao, có trạng thái và có thể sử dụng lại được. React còn là công cụ có thể thay thế cho
các framework MVC, như Angular hoặc Backbone, với cấu trúc rõ ràng hơn và tập trung vào
tối ưu hiệu năng. React được sử dụng tại Facebook trong production,

và www.instagram.com được viết hoàn toàn trên React.
Vậy reactjs là gì? Reactjs là một thư viện UI để hỗ trợ việc xây dững những
thành phần (components) Ui có tính tương tác cao có trạng thái và có thể tái sử
dụng được React được sử dụng tại
Facebook trong production và instagram
được viết hoàn toàn trên React.
Một trong những điểm hấp dẫn là thư
viện React không chỉ hoạt động phía
client, mà còn được render trên sever và
có thể kết nối với nhau.
React sử dụng khái niệm DOM ảo
(Virtual DOM) để chọn lựa và render
những phần tử của node dựa trên sự

SVTH: Kiều Văn Đông – MSSV: 20130947

20