Xây dựng ứng dụng mealmaster chia sẻ công thức nấu ăn

TÓM TẮTTên đề tài: Xây dựng ứng dụng MealMaster chia sẻ công thức nấu ăn Sinh viên thực hiện: Tưởng Thị Mỹ Nga Nội dung tóm tắt: Ứng dụng chia sẻ công thức nấu ăn là một nền tảng cho p

Trang 1

ĐẠI HỌC ĐÀ NẴNG TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT

XÂY DỰNG ỨNG DỤNG MEALMASTER CHIA SẺ

CÔNG THỨC NẤU ĂN

Sinh viên thực hiện : Tưởng Thị Mỹ Nga

Trang 2

Đà Nẵng, tháng 06/2023

Trang 3

ĐẠI HỌC ĐÀ NẴNG TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT

XÂY DỰNG ỨNG DỤNG MEALMASTER CHIA SẺ

CÔNG THỨC NẤU ĂN

Giảng viên hướng dẫn duyệt

ThS Lê Vũ

Trang 4

Đà Nẵng, tháng 6/2023

Trang 5

NHẬN XÉT GIẢNG VIÊN HƯỚNG DẪN

………

Giảng viên hướng dẫn

(Ký và ghi rõ họ tên)

ThS Lê Vũ

Trang 6

NHẬN XÉT CỦA HỘI ĐỒNG

………

TM Hội đồng

(Ký và ghi rõ họ tên)

Trang 7

TÓM TẮT

Tên đề tài: Xây dựng ứng dụng MealMaster chia sẻ công thức nấu ăn

Sinh viên thực hiện: Tưởng Thị Mỹ Nga

Nội dung tóm tắt:

Ứng dụng chia sẻ công thức nấu ăn là một nền tảng cho phép người dùng khámphá các công thức nấu ăn từ cộng đồng người dùng Với ứng dụng này, người dùng cóthể chia sẻ những công thức nấu ăn của riêng mình để góp phần làm giàu và mang tính

đa dạng cho cộng đồng Thông qua ứng dụng, người dùng có thể tìm kiếm các côngthức theo từng danh mục, theo tên người dùng và tên bài đăng Họ có thể xem cáchướng dẫn chi tiết, cách thực hiện từng bước trong quá trình nấu ăn và thậm chí xemhình ảnh hoặc video minh họa

Bên cạnh việc khám phá và chia sẻ công thức, ứng dụng còn cung cấp tính năngtương tác và giao lưu giữa các thành viên trong cộng đồng Người dùng có thể bìnhluận và lưu trữ những công thức yêu thích Điều này tạo ra một môi trường trao đổikiến thức và kinh nghiệm về nấu ăn, nơi mà người dùng có thể học hỏi và giao lưu vớinhau

Trang 8

NHIỆM VỤ ĐỒ ÁN TỐT NGHIỆP

Giảng viên hướng dẫn: ThS Lê Vũ

Sinh viên thực hiện: Tưởng Thị Mỹ Nga Mã SV: 1911505310241

1 Tên đề tài

Xây dựng ứng dụng MealMaster chia sẻ công thức nấu ăn

2 Các số liệu, tài liệu ban đầu

- Dựa trên thông tin của sách dạy nấu ăn;

- Quy trình tìm kiếm công thức nấu ăn;

- Ngôn ngữ Javascript;

- Công nghệ React Native.

3 Nội dung chính của đồ án

- Chương 1: Tổng quan đề tài

- Chương 2: Cơ sở lý thuyết

- Chương 3: Phân tích thiết kế hệ thống

- Chương 4: Kết quả triển khai hệ thống

- Kết luận

4 Các sản phẩm dự kiến

- Xây dựng ứng dụng MealMaster chia sẻ công thức nấu ăn

- File báo cáo hoàn chỉnh

5 Ngày giao đồ án: 06/02/2023

6 Ngày nộp đồ án: 07/06/2023

Đà Nẵng, ngày 07 tháng 06 năm 2023

ThS Lê Vũ

Trang 10

LỜI CẢM ƠN

Lời đầu tiên, em xin chân thành cảm ơn Trường Đại học Sư phạm Kỹ thuật

đã tạo điều kiện để em có được môi trường học tập và phát triển bản thân tốt nhất

Đặc biệt em xin gửi lời cảm ơn chân thành và sâu sắc tới thầy ThS Lê Vũ

đã hướng dẫn, giúp đỡ em trong suốt thời gian thực hiện đề tài này.

Em xin chân thành cảm ơn quý thầy/cô giáo bộ môn Khoa Công Nghệ Số đã

tận tình giảng dạy, truyền đạt kiến thức cho chúng em trong các kỳ học vừa qua.

Xin cảm ơn tất cả bạn bè đã động viên, giúp đỡ chúng em trong thời gian học tập và hoàn thành đồ án tốt nghiệp.

Mặc dù đã cố gắng nhiều nhưng sẽ không thể tránh khỏi những thiếu sót vì thời gian hạn chế và kiến thức trong đề tài làm đồ án Em kính mong nhận được

sự góp ý của quý Thầy cô giáo và các bạn để hoàn thành tốt hơn nữa!

Em xin chân thành cảm ơn!

Đà Nẵng, ngày 07 tháng 06 năm 2023

Sinh viên thực hiện

Tưởng Thị Mỹ Nga

Trang 11

LỜI CAM ĐOAN

Em xin cam đoan:

1 Những nội dung trong đồ án này là do em thực hiện dưới sự hướng dẫn trựctiếp của thầy ThS Lê Vũ

2 Mọi tham khảo trong đồ án đều được trích dẫn rõ ràng tên tác giả, tên côngtrình, thời gian địa điểm công bố

3 Nếu có những sao chép không hợp lệ, vi phạm, em xin chịu hoàn toàn tráchnhiệm của mình (nếu có)

2023

Sinh viên thực hiện

Tưởng Thị Mỹ Nga

Trang 12

MỤC LỤC

MỤC LỤC i

DANH MỤC BẢNG BIỂU v

DANH MỤC HÌNH VẼ vi

DANH MỤC CHỮ VIẾT TẮT viii

CHƯƠNG 1 : TỔNG QUAN ĐỀ TÀI 1

1.1 Đặt vấn đề 1

1.2 Mục tiêu đề tài 1

1.3 Đối tượng nghiên cứu và phạm vi nghiên cứu 2

a) Đối tượng nghiên cứu 2

b) Phạm vi nghiên cứu 2

1.4 Phương pháp nghiên cứu 2

1.5 Giải pháp công nghệ 2

1.6 Cấu trúc đồ án 2

1.6.1 Chương 1: Tổng quan đề tài 2

1.6.2 Chương 2: Cơ sở lý thuyết 3

1.6.3 Chương 3: Phân tích thiết kế hệ thống 3

1.6.4 Chương 4: Kết quả triển khai hệ thống 3

1.6.5 Phần kết luận 3

CHƯƠNG 2 : CƠ SỞ LÝ THUYẾT 4

2.1 Giới thiệu hệ quản trị cơ sở dữ liệu NoSql MongoDB 4

2.1.1 Tổng quan 4

2.1.2 Lợi ích sử dụng 4

2.2 Giới thiệu API 5

2.3 Giới thiệu ngôn ngữ lập trình Java Script 5

i

Trang 13

2.3.1 Ứng dụng của JavaScript 6

2.3.2 Cách hoạt động của JavaScript 6

a) Phía máy khách 6

b) Phía máy chủ 7

c) Thư viện của JavaScript 7

2.4 Giới thiệu React Native – Framework 7

2.4.1 Lợi ích sử dụng 8

2.5 Giới thiệu về NodeJs 8

2.5.1 Giới thiệu chung 8

2.5.2 Mô hình hoạt động của nodejs 9

2.6 Công cụ sử dụng phát triển hệ thống 10

2.6.1 Giới thiệu về Visual Studio Code 10

2.6.2 Giới thiệu công cụ Postman 11

CHƯƠNG 3 : PHÂN TÍCH THIẾT KẾ HỆ THỐNG 12

3.1 Đặc tả chức năng 12

3.1.1 Xác định các tác nhân 12

3.1.2 Các yêu cầu chức năng 12

a) Khách vãng lai 12

b) Khách thành viên 12

c) Admin 12

3.2 Phân tích 12

3.2.1 Sơ đồ Usecase 12

b) Sơ đồ usecase chức năng quản lý công thức nấu ăn cá nhân 13

c) Sơ đồ usecase chức năng chỉnh sửa trạng thái người dùng 14

d) Sơ đồ usecase chức năng quản lý danh sách công thức nấu ăn 14

3.2.2 Sơ đồ hoạt động (Activity Diagram) 15

ii

Trang 14

a) Actor quản trị viên, khách thành viên đăng nhập 15

b) Actor thành viên 16

c) Actor quản trị viên 19

3.2.3 Sơ đồ tuần tự 21

a) Sơ đồ tuần tự đăng công thức nấu ăn 21

b) Sơ đồ tuần tự xem danh sách bài đăng công thức nấu ăn 21

c) Sơ đồ tuần tự xem chi tiết bài đăng công thức nấu ăn 22

d) Sơ đồ tuần tự tìm kiếm bài đăng công thức nấu ăn 22

e) Sơ đồ tuần tự duyệt bài đăng công thức nấu ăn 23

3.2.4 Sơ đồ thuật toán 24

a) Sơ đồ thuật toán đăng bài 24

3.3 Thiết kế hệ thống 26

3.3.1 Kịch bản use-case 26

a) Actor khách thành viên, quản trị viên 26

b) Actor khách thành viên 27

c) Actor quản trị viên 32

3.3.1 Sơ đồ ERD 34

3.3.2 Thiết kế cơ sở dữ liệu 35

a) Bảng quyền 35

b) Bảng người dùng 35

c) Bảng_Follower 35

d) Bảng thông báo 35

e) tbl_Comment 36

f) Bảng danh mục 36

g) Bảng hình ảnh 36

h) Bảng bài đăng công thức 37

iii

Trang 15

i) Bảng nguyên liệu 37

j) Bảng các bước 37

k) Bảng yêu thích 37

CHƯƠNG 4 : KẾT QUẢ TRIỂN KHAI HỆ THỐNG 39

4.1 Giao diện người dùng 39

4.1.1 Logo ứng dụng 39

4.1.2 Giao diện trang mở đầu 39

4.1.3 Giao diện màn hình trang chủ 40

4.1.4 Giao diện đăng ký, đăng nhập tài khoản 41

4.1.5 Giao diện đăng nhập 42

4.1.6 Giao diện trang chi tiết 42

4.1.7 Giao diện tạo mới bài đăng công thức 43

4.1.8 Giao diện profile và edit profile 44

4.1.9 Giao diện chi tiết bài đăng cá nhân và bình luận 44

4.1.10 Giao diện follow và following bạn bè 45

4.1.11 Giao diện màn hình các công thức yêu thích 45

4.1.12 Giao diện màn hình tìm kiếm 46

4.2 Giao diện admin 47

4.2.1 Giao diện đăng nhập 47

4.2.2 Giao diện quản lý người dùng 47

4.2.3 Giao diện quản lý danh sách bài đăng 48

4.2.4 Giao diện quản lý danh mục bài đăng 48

KẾT LUẬN 49

TÀI LIỆU THAM KHẢO 50

iv

Trang 16

DANH MỤC BẢNG BIỂU

Bảng 3.1: Kịch bản Usecase đăng nhập 26

Bảng 3.2: Kịch bảng Usecase đăng tin 27

Bảng 3.3: Kịch bảng Usecase chỉnh sửa bài đăng 28

Bảng 3.4: Kịch bản Usecase xóa công thức 28

Bảng 3.5: Kịch bản Usecase tìm kiếm 29

Bảng 3.6: Kịch bản Usecase bình luận 30

Bảng 3.7: Kịch bản Usecase Follow bạn bè 30

Bảng 3.8: Kịch bản Usecase Thêm công thức vào mục yêu thích 31

Bảng 3.9: Kịch bản Usecase xóa công thức khỏi mục yêu thích 31

Bảng 3.10: Kịch bản Usecase cập nhập thông tin cá nhân 32

Bảng 3.11: Kịch bản Usecase quản lý người dùng 32

Bảng 3.12: Kịch bản usecase duyệt bài đăng công thức 33

Bảng 3.13: Kịch bản usecase khóa bài đăng công thức 33

Bảng 3.14: Bảng quyền 35

Bảng 3.15: Bảng người dùng 35

Bảng 3.16: Bảng Follower 35

Bảng 3.17: Bảng thông báo 36

Bảng 3.18: Bảng bình luận 36

Bảng 3.19: Bảng danh mục 36

Bảng 3.20: Table Image 37

Bảng 3.21: Bảng bài đăng 37

Bảng 3.22: Bảng Nguyên liệu 37

Bảng 3.23: Bảng các bước 37

Bảng 3.24: Bảng yêu thích 38

v

Trang 17

DANH MỤC HÌNH VẼ

Hình 2.1: Mô hình hoạt động của Nodejs 9

Hình 3.1: Sơ đồ usecase tổng quát 13

Hình 3.2: Usecase quản lý công thức nấu ăn cá nhân 13

Hình 3.3: Usecase Chỉnh sửa trạng thái người dùng 14

Hình 3.4: Usecase quản lý danh sách công thức nấu ăn 14

Hình 3.5: Sơ đồ hoạt động đăng nhập 15

Hình 3.6: Sơ đồ hoạt động đăng công thức 16

Hình 3.7: Sơ đồ hoạt động chỉnh sửa, xóa công thức 17

Hình 3.8: Sơ đồ hoạt động tìm kiếm công thức, người dùng 18

Hình 3.9: Sơ đồ hoạt động duyệt/khóa công thức 19

Hình 3.10: Sơ đồ hoạt động chỉnh sửa trạng thái người dùng 20

Hình 3.11: Sơ đồ tuần tự đăng công thức nấu ăn 21

Hình 3.12: Sơ đồ tuần tự xem danh sách bài đăng công thức nấu ăn 21

Hình 3.15: Sơ đồ tuần duyệt bài đăng công thức nấu ăn 23

Hình 3.16: Sơ đồ thuật toán đăng bài 24

Hình 3.17: Sơ đồ hệ thống 25

Hình 3.18: Sơ đồ ERD 34

Hình 4.1: Logo ứng dụng 39

Hình 4.2: Giao diện Getstarted 39

Hình 4.3: Giao diện trang chủ 40

Hình 4.4: Giao diện đăng ký, đăng nhập tài khoản 41

Hình 4.5: Giao diện trang chi tiết 42

Hình 4.6: Giao diện tạo mới bài đăng công thức 43

Hình 4.7: Giao diện profile 44

Hình 4.8: Giao diện chi tiết bài đăng cá nhân và bình luận 44

Hình 4.9: Giao diện follow và following bạn bè 45

Hình 4.10: Giao diện màn hình công thức yêu thích 46

Hình 4.11: Giao diện màn hình tìm kiếm 46

vi

Trang 18

Hình 4.12: Giao diện admin đăng nhập 47

Hình 4.13: Giao diện quản lý người dùng 47

Hình 4.14: Giao diện danh sách bài đăng 48

Hình 4.15: Giao diện quản lý danh mục bài đăng 48

vii

Trang 19

DANH MỤC CHỮ VIẾT TẮTStt Chữ viết tắt Tên tiếng Anh Tên tiếng Việt

1 ERD Entity Relationship Diagram Sơ đồ thực thể quan hệ

2 NoSQL None-Relational SQL Dạng CSDL mã nguồn mở

Trang 20

Xây dựng ứng dụng MealMaster chia sẻ công thức nấu ăn

CHƯƠNG 1 : TỔNG QUAN ĐỀ TÀI

1.1 Đặt vấn đề

“Tất cả chúng ta đều thưởng thức bữa ăn Vì vậy, sẽ là phí phạm và tẻ nhạt nếu

ăn những thức ăn không đem lại gì mới mẻ” Theo lời của Anna Thomas, sự đam mê

của mọi người là tự tay chuẩn bị những món ăn ngon nhất cho gia đình, người thân vàbạn bè Tuy nhiên, không phải ai cũng có khả năng và kỹ năng trong việc nấu ăn vàcông việc nội trợ Với những phương pháp nấu ăn truyền thống, việc học một côngthức mới đòi hỏi viết lại trên giấy, tốn thời gian và khó có thể đánh giá được mức độngon của món ăn Hiện nay, các bà nội trợ, đầu bếp, đặc biệt là những người đam mênấu ăn đang đặt câu hỏi khó khăn: "Hôm nay chúng ta ăn gì?" và "Ngày mai chúng ta

ăn gì?" Đó là lý do tại sao các ứng dụng và phần mềm chia sẻ công thức nấu ăn, vớinhiều món ăn ngon và độc đáo, đã thu hút sự quan tâm và sự yêu thích của nhiềungười

Trong thời đại công nghệ phát triển mạnh mẽ như hiện nay, ứng dụng di động đãtrở thành một phần không thể thiếu trong cuộc sống hàng ngày của chúng ta Mộttrong những lĩnh vực mà ứng dụng đã tạo ra sự thay đổi đáng kể là nấu ăn Tuy nhiên,phần lớn các ứng dụng nấu ăn hiện tại chỉ cung cấp danh sách công thức có sẵn, giớihạn sự sáng tạo và tùy chỉnh của người dùng

Với những lý do trên, tôi đã chọn đề tài “ Xây dựng ứng dụng MealMaster chia

sẻ công thức nấu ăn” làm hướng nghiên cứu cho đề tài của mình.

1.2 Mục tiêu đề tài

Xây dựng ứng dụng mang tên “MealMaster” chia sẻ công thức nấu ăn với cácchức năng chính phục vụ nhu cầu cho từng tác nhân trong ứng dụng:

- Tìm kiếm công thức, người dùng

- Đăng công thức nấu ăn

- Cho phép bình luận bài đăng công thức nấu ăn

- Cho phép cập nhật thông tin cá nhân

- Cho phép thêm vào mục yêu thích

- Quản lý người dùng, quản lý danh sách công thức nấu ăn và thống kê

Trang 21

1.3 Đối tượng nghiên cứu và phạm vi nghiên cứu

a) Đối tượng nghiên cứu

Những người yêu thích nấu ăn và quan tâm đến việc chia sẻ và tìm kiếm côngthức nấu ăn Điều này có thể bao gồm cả người mới bắt đầu học nấu ăn và nhữngngười có kinh nghiệm trong lĩnh vực này

b) Phạm vi nghiên cứu

- Đề tài nghiên cứu về ẩm thực

- Tìm hiểu các phương pháp và công nghệ để tạo ứng dụng chia sẻ công thức nấu ănhiệu quả

1.4 Phương pháp nghiên cứu

- Phương pháp nghiên cứu lý thuyết thu nhập thông tin qua sách, các tài liệutrang web để tìm được các cơ sở lý thuyết mà mình nghiên cứu

- Phương pháp triển khai thực nghiệp: xây dựng ứng dụng

1.5 Giải pháp công nghệ

- Ngôn ngữ lập trình : JavaScript

- Công nghệ: React Native

- Hệ quản trị cơ sở dữ liệu : MongoDB

- Công cụ hỗ trợ : StartUML, VisualCode

và phát triển đề tài Xác định rỏ phạm vi và đối tượng hướng đến, giải pháp công nghệ

để triển khai, xây dựng đề tài, đồng thời phân tích đặc tả yêu cầu nghiệp vụ

1.6.2 Chương 2: Cơ sở lý thuyết Tìm hiểu, giới thiệu tổng quát các kiến thức về ngôn ngữ lập trình JavaScript,công nghệ React Native, và hệ quản trị cơ sở dữ liệu MongoDb

Trang 22

1.6.3 Chương 3: Phân tích thiết kế hệ thốngPhân tích các tác nhân và chức năng của từng tác nhân của hệ thống Thiết kế sơ

đồ use-case, sơ đồ hoạt động, sơ đồ ERD Thiết kế cơ sở dữ liệu Xây dựng kịch bảncho từng use-case hệ thống

1.6.4 Chương 4: Kết quả triển khai hệ thốngXây dựng giao diện và chức năng của ứng dụng

1.6.5 Phần kết luậnKết luận chung cho các chương trong đồ án Trình bày những vấn đề đã giải quyếtđồng thời trình bày hướng phát triển

Trang 23

CHƯƠNG 2 : CƠ SỞ LÝ THUYẾT

2.1 Giới thiệu hệ quản trị cơ sở dữ liệu NoSql MongoDB

2.1.1 Tổng quanMongoDB là một hệ quản trị cơ sở dữ liệu mã nguồn mở thuộc loại NoSQL, được

sử dụng rộng rãi bởi hàng triệu người MongoDB là một hệ quản trị cơ sở dữ liệuhướng tài liệu (document-oriented), trong đó dữ liệu được lưu trữ dưới dạng các tàiliệu có định dạng JSON MongoDB được phát triển bởi MongoDB Inc và được cấpphép theo Giấy phép Công cộng phía Máy chủ (SSPL)

Trong hệ quản trị cơ sở dữ liệu quan hệ (RDBMS), chúng ta sử dụng khái niệm

"bảng" để lưu trữ dữ liệu Tuy nhiên, trong MongoDB, chúng ta sử dụng khái niệm

"collection" thay vì "bảng" Mỗi collection trong MongoDB tương ứng với một bảngtrong RDBMS, và mỗi "document" trong MongoDB tương ứng với một "row" trongRDBMS

Một điểm khác biệt giữa MongoDB và RDBMS là các collection trong MongoDB

có cấu trúc linh hoạt, cho phép lưu trữ các dữ liệu mà không cần tuân theo một cấutrúc cố định.So với RDBMS thì trong MongoDB collection ứng với table, còndocument sẽ ứng với row , MongoDB sẽ dùng các document thay cho row trongRDBMS

- Tiếp đến cũng là về hiệu suất, khi có trư vấn dữ liệu thì các record được cached lên bộnhớ Ram, để lượt truy vấn sau diễn ra nhanh hơn mà không cần đọc từ ổ cứng

- Rất dễ mở rộng, MongoDB dễ dàng mở rộng hệ thống bằng cách thêm node vàocluster – cụm các node chứa dữ liệu giao tiếp với nhau

Trang 24

2.2 Giới thiệu API

Api: API là viết tắt của Application Programming Interface (Giao diện lập trìnhứng dụng), một phần mềm trung gian cho phép hai ứng dụng nói chuyện với nhau.Mỗi khi sử dụng một ứng dụng như Facebook, gửi tin nhắn tức thì hoặc kiểm tra thờitiết trên điện thoại, có nghĩa là bạn đang sử dụng API

Kiến trúc API thường được giải thích dưới dạng máy chủ và máy khách Ứngdụng gửi yêu cầu được gọi là máy khách, còn ứng dụng gửi phản hồi được gọi là máychủ Như vậy, trong ví dụ về thời tiết, cơ sở dữ liệu của cơ quan thời tiết là máy chủcòn ứng dụng di động là máy khách API hoạt động theo 4 cách khác nhau, tùy vàothời điểm và lý do chúng được tạo ra

Cách hoạt động của API:

a) API SOAP

Các API này sử dụng Giao thức truy cập đối tượng đơn giản Máy chủ và máykhách trao đổi thông đệp bằng XML Đây là loại API kém linh hoạt được dùng phổbiến trước đây

d) API REST

Đây là loại API phổ biến và linh hoạt nhất trên web hiện nay Máy khách gửi yêucầu đến máy chủ dưới dạng dữ liệu Máy chủ dùng dữ liệu đầu vào từ máy khách này

2.3 Giới thiệu ngôn ngữ lập trình Java Script

JavaScript là một ngôn ngữ lập trình dành cho việc tạo và phát triển web Nóđược nhúng vào trong file HTML giúp cho website trở nên sống động và đẹp hơn.JavaScript có thể cập nhật và thay đổi cả HTML và CSS Một ứng dụng thực tế mà ta

dễ thấy nhất của JavaScript đó là các animation, pop-up quảng cáo, autocomplete khi

Trang 25

search,… tất cả đều một tay JavaScript thực hiện JavaScript còn là một ngôn ngữ lậptrình đa nền tảng, ngoài dành cho việc lập trình frontend trên nền tảng web ra thì nócòn được sử dụng cho việc lập trình và phát triển ứng dụng trên nền tảng mobile.Ngày nay, JavaScript có thể thực thi không chỉ trong trình duyệt mà còn trênserver hoặc bất kỳ thiết bị nào có chương trình đặc biệt gọi là JavaScript engine

2.3.1 Ứng dụng của JavaScriptTrước đây, các trang web có dạng tĩnh, tương tự như các trang trong một cuốnsách Một trang tĩnh chủ yếu hiển thị thông tin theo một bố cục cố định JavaScript dầnđược biết đến như một công nghệ phía trình duyệt để làm cho các ứng dụng web linhhoạt hơn Sử dụng JavaScript, các trình duyệt có thể phản hồi tương tác của ngườidùng và thay đổi bố cục của nội dung trên trang web

Khi ngôn ngữ này phát triển hoàn thiện, các nhà phát triển JavaScript đã thiếtlập các thư viện, khung và cách thức lập trình cũng như bắt đầu sử dụng ngôn ngữ nàybên ngoài trình duyệt web Ngày nay, chúng ta có thể sử dụng JavaScript để thực hiệnhoạt động phát triển cả ở phía máy khách và máy chủ

2.3.2 Cách hoạt động của JavaScripta) Phía máy khách

Sau đây là tổng quan về cách thức hoạt động của JavaScript phía máy khách:

- Trình duyệt tải một trang web khi bạn truy cập trang đó

- Trong khi tải, trình duyệt chuyển đổi trang và tất cả các phần tử của trang, chẳng hạnnhư các nút, nhãn và hộp thả xuống, thành một cấu trúc dữ liệu được gọi là Mô hìnhđối tượng tài liệu (DOM)

- Công cụ JavaScript của trình duyệt chuyển đổi mã JavaScript thành mã bytecode Mãnày đóng vai trò là trung gian giữa cú pháp JavaScript và máy

- Các sự kiện khác nhau, chẳng hạn như nhấp vào nút, sẽ kích hoạt việc thực thi khối mãJavaScript được liên kết Sau đó, công cụ này sẽ diễn giải bytecode và thực hiện cácthay đổi đối với DOM

- Trình duyệt hiển thị DOM mới

Trang 26

b) Phía máy chủ

JavaScript phía máy chủ đề cập đến việc sử dụng ngôn ngữ viết mã trong logicmáy chủ back-end Trong trường hợp này, công cụ JavaScript nằm trực tiếp trên máychủ Hàm JavaScript phía máy chủ có thể truy cập cơ sở dữ liệu, thực hiện các phéptoán logic khác nhau và phản hồi nhiều loại sự kiện do hệ điều hành của máy chủ kíchhoạt Ưu điểm chính của viết tập lệnh phía máy chủ là bạn có khả năng tùy chỉnh linhhoạt phản hồi của trang web dựa trên yêu cầu và quyền truy cập của mình cũng nhưtheo yêu cầu thông tin từ trang web

a) Thư viện của JavaScript

Thư viện JavaScript là tập hợp các đoạn mã viết sẵn mà các nhà phát triển web cóthể tái sử dụng để thực hiện các hàm JavaScript chuẩn Mã thư viện JavaScript đượcgắn vào phần còn lại của mã dự án khi cần thiết Nếu bạn coi mã ứng dụng JavaScriptnhư một ngôi nhà thì các thư viện JavaScript sẽ giống như đồ nội thất làm sẵn mà cácnhà phát triển có thể sử dụng để cải thiện chức năng của ngôi nhà

Sau đây là một số cách sử dụng thư viện JavaScript phổ biến:

- Trực quan hóa dữ liệu

- Điều chỉnh DOM

- Biểu mẫu

- Các hàm toán học và văn bản

2.4 Giới thiệu React Native – Framework

React Native là một framework mã nguồn mỡ được sáng tạo bởi Facebook Nóđược sử dụng để phát triển ứng dụng di động Android, IOS, Web bằng cách cho phépcác nhà phát triển sử dụng React cùng với môi trường ứng dụng gốc (native) Reactnative cũng giống như React vậy chúng sử dụng các native components thay vì các webcomponents Sự ra đời của React Native là lời giải đáp cho bài toán về hiệu năng và tối

ưu hóa ngôn ngữ cho mọi nền tảng di động Vì vậy để hiểu về cấu trúc của Reactnative chúng ta cần phải có các kiến thức cơ bản với các khái niệm cơ bản của Reactnhư là JSX, components, props hay là state

Với những ưu điểm của mình mà JavaScript được các ông lớn như Google,Facebook,… hỗ trợ trong việc phát triển để cho ra đời các library hay framework

Trang 27

JavaScript nổi tiếng hiện nay như: AngularJS, ReactJS và React Native, VueJS,NuxtJS, NextJS, Jquery, NodeJS …

2.4.1 Lợi ích sử dụng

Ưu điểm của React Native có rất nhiều, trong đó có 4 nội dung chính bao gồm:

- Thời gian học không quá dài

- Có khả năng tái sử dụng lại code

- Sở hữu cộng đồng hỗ trợ cực kì lớn mạnh

- Có tính ổn định và khả năng tối ưu cao

2.5 Giới thiệu về NodeJs

2.5.1 Giới thiệu chungNodeJs một môi trường runtime chạy JavaScript đa nền tảng và có mã nguồn mở,được sử dụng để chạy các ứng dụng web bên ngoài trình duyệt của client Nền tảngnày được phát triển bởi Ryan Dahl vào năm 2009, được xem là một giải pháp hoàn hảocho các ứng dụng sử dụng nhiều dữ liệu nhờ vào mô hình hướng sự kiện (event-driven) không đồng bộ

Khi bạn connect đến một server truyền thống, chẳng hạn Apache, nó sẽ sinh ramột thread mới để xử lý request Ở các ngôn ngữ như PHP hay Ruby, mỗi một phéptoán I/O (ví dụ truy cập database) sẽ chặn execution trên code của bạn cho đến khiphép toán đó hoàn thành Nói cách khác, server sẽ đợi cho đến khi database đượcduyệt xong mới xử lý kết quả Nếu có những request mới, server lại tiếp tục sinhnhững thread mới để xử lý chúng Điều này dẫn đến nguy cơ kém hiệu quả, khi mộtlượng lớn thread được tạo ra sẽ khiến cho hệ thống trở nên chậm chạp, tệ hơn nữa cóthể khiến site bị sập Cách thông thường để giải quyết tình trạng này là bổ sung thêmserver

Trang 28

2.5.2 Mô hình hoạt động của nodejs

Hình 2.5.2.a.1.1: Mô hình hoạt động của NodejsNode.js, mặt khác là single-threaded Nó cũng thuộc dạng event-driven hay nóicách khác tất cả những gì xảy ra trong Node là để phản hồi lại với một sự kiện Ví dụ,khi một request được gửi đến, server bắt đầu xử lý nó Nếu nó gặp phải phép toán I/O,thay vì đợi cho phép toán này kết thúc, nó sẽ đăng ký một callback trước khi tiếp tục

xử lý event tiếp theo Khi phép toán I/O kết thúc, server sẽ chạy callback và tiếp tụclàm việc trên request ban đầu Ở tầng bên dưới, Node sử dụng thư viện libuv để thựchiện hoạt động asynchronous (non-blocking) này Mô hình hoạt động này của Nodegiúp server có thể xử lý một lượng lớn kết nối đến đồng thời Quan điểm truyền thống

để scale một Node app là clone nó và để instance được clone chia sẻ công việc.Node.js thậm chí có module buit-in sẵn để giúp bạn thực hiện chiến lược clone nàytrên một server duy nhất

Trang 29

2.6 Công cụ sử dụng phát triển hệ thống

2.6.1 Giới thiệu về Visual Studio Code

Là một trình biên tập lập trình code miễn phí dành cho Windows, Linux vàmacOS, Visual Studio Code được phát triển bởi Microsoft Nó được xem là một sự kếthợp hoàn hảo giữa IDE và Code Editor

Visual Studio Code hỗ trợ chức năng debug, đi kèm với Git, có syntaxhighlighting, tự hoàn thành mã thông minh, snippets, và cải tiến mã nguồn Nhờ tínhnăng tùy chỉnh, Visual Studio Code cũng cho phép người dùng thay đổi theme, phímtắt, và các tùy chọn khác

- Cung cấp kho tiện ích mở rộng

- Kho lưu trữ an toàn

- Visual Studio Code hỗ trợ nhiều ứng dụng web Ngoài ra, nó cũng có một trình

soạn thảo và thiết kế website

- Lưu trữ dữ liệu dạng phân cấp

- Hỗ trợ viết Code

- Visual Studio Code có tích hợp thiết bị đầu cuối, giúp người dùng khỏi phải

chuyển đổi giữa hai màn hình hoặc trở về thư mục gốc khi thực hiện các thaotác

- Người dùng Visual Studio Code có thể mở cùng lúc nhiều tệp tin và thư mục –

mặc dù chúng không hề liên quan với nhau

- Intellisense: có thể phát hiện nếu bất kỳ đoạn mã nào không đầy đủ Thậm chí,

khi lập trình viên quên không khai báo biến, Intellisense sẽ tự động giúp họ bổsung các cú pháp còn thiếu

- Hỗ trợ Git.

Trang 30

2.6.2 Giới thiệu công cụ PostmanPostman là một loại công cụ cho phép người dùng có thể thao tác với API, màtrong đó phổ biến nhất là REST Với thử nghiệm API thì Postman là một trong nhữngcông cụ phổ biến vì được thực nghiệm nhiều nhất

Nhờ Postman lập trình viên có thể gọi Rest API mà không cần phải viết bất kỳdòng code nào Postman có khả năng hỗ trợ mọi phương thức HTTP bao gồm: POST,PUT, DELETE, PATCH, GET,

Ngoài ra, Postman còn cho phép lập trình viên lưu lại lịch sử của các lầnrequest nên vô cùng tiện lợi cho nhu cầu sử dụng lại

Trang 31

CHƯƠNG 3 : PHÂN TÍCH THIẾT KẾ HỆ THỐNG

- Đăng nhập / đăng xuất

- Cập nhập thông tin cá nhân

- Tìm kiếm công thức món ăn, tìm theo tên người dùng

- Bình luận bài đăng của những người dùng khác

- Đăng công thức cá nhân

- Follow bạn bè

- Quản lý công thức cá nhân (xóa, sửa)

c) Admin

- Quản lý công thức( duyệt, khóa)

- Chỉnh sửa trạng thái tài khoản người dùng

- Quản lý danh mục bài đăng

3.2 Phân tích

3.2.1 Sơ đồ Usecasea) Sơ đồ usecase chức năng cho hệ thống

Trang 32

Hình 3.2.1.a.1.1: Sơ đồ usecase tổng quátb) Sơ đồ usecase chức năng quản lý công thức nấu ăn cá nhân

Hình 3.2.1.b.1.1: Usecase quản lý công thức nấu ăn cá

nhân

Trang 33

c) Sơ đồ usecase chức năng chỉnh sửa trạng thái người dùng

Hình 3.2.1.c.1.1: Usecase Chỉnh sửa trạng thái người

dùngd) Sơ đồ usecase chức năng quản lý danh sách công thức nấu ăn

Hình 3.2.1.d.1.1: Usecase quản lý danh sách công thức

nấu ăn

Tiêu đề	Xây dựng ứng dụng Mealmaster chia sẻ công thức nấu ăn
Tác giả	Tưởng Thị Mỹ Nga
Người hướng dẫn	ThS. Lê Vũ
Trường học	Đại học Đà Nẵng
Chuyên ngành	Công nghệ thông tin
Thể loại	Đồ án tốt nghiệp đại học
Năm xuất bản	2023
Thành phố	Đà Nẵng

Định dạng
Số trang	67
Dung lượng	3,87 MB