Ứng dụng ruby on rails xây dựng website cookgram

Tác nhân kích hoạt User, Admin Tiền điều kiện Tồn tại tài khoản Các bước thực hiện Bước 1: Vào màn hình đăng nhập hoặc trang chủ Bước 2: Nhập Username/Email và Mật khẩu Bước 3: Nhấn b

Trang 1

THÀNH PHỐ HỒ CHÍ MINH

BỘ GIÁO DỤC VÀ ĐÀO TẠO

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

ĐỒ ÁN TỐT NGHIỆP NGÀNH CÔNG NGHỆ THÔNG TIN

ỨNG DỤNG RUBY ON RAILS XÂY

DỰNG WEBSITE COOKGRAM

GVHD: LÊ THỊ MINH CHÂU SVTH: TÔ NGỌC ÁNH MSSV:16126003

SVTH: MÃ NGỌC TÚ MSSV:16110254

Tp Hồ Chí Minh, tháng 07/2020

SKL 0 0 7 0 7 2

Trang 2

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH

KHOA ĐÀO TẠO CHẤT LƯỢNG CAO

Nghành: CÔNG NGHỆ THÔNG TIN

GVHD: THS LÊ THỊ MINH CHÂU

Trang 3

CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM

Độc lập – Tự do – Hạnh phúc

-*** -Tp Hồ Chí Minh, ngày tháng năm 2020

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

Họ và tên sinh viên 1: Tô Ngọc Ánh MSSV1: 16126003

Họ và tên sinh viên 2: Mã Ngọc Tú MSSV2: 16110254

Nghành: Công Nghệ Thông Tin Lớp: 16110CLST4

Giảng viên hướng dẫn: ThS Lê Thị Minh Châu ĐT: 090.2200.557

Ngày nhận đề tài: 25/02/2020 Ngày nộp đề tài: 01/07/2020

1 Tên đề tài: Ứng dụng ruby on rails xây dựng website cookgram

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

Đồ án phát triển dựa trên đề tài Tiểu luận chuyên ngành

3 Nội dung thực hiện đề tài:

- Ứng dụng Ruby on Rails xây dựng website chia sẻ công thức nấu ăn: Cải thiện, phát triển thêm chức năng và hoàn thiện sản phẩm đã có từ tiểu luận chuyên nghành

- Tìm hiểu và cài đặt thêm các chức năng như: Gợi ý món ăn, tìm kiếm và

chatbot để hỗ trợ người dùng

4 Sản phẩm:

Webistie Cookgram – website chia sẻ công thức nấu ăn

Trang 4

*****

PHIẾU NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN

Họ và tên sinh viên 2: Mã Ngọc Tú MSSV2: 16110254 Nghành: Công Nghệ Thông Tin

Tên đề tài: Ứng dụng ruby on rails xây dựng website cookgram

Họ và tên giảng viên hướng dẫn: ThS Lê Thị Minh Châu

NHẬN XÉT

1 Về nội dung đề tài & khối lượng thực hiện:

2 Ưu điểm:

3 Khuyết điểm:

4 Đề nghị cho bảo vệ hay không?

5 Đánh giá loại:

6 Điểm: (Bằng chữ: )

Tp Hồ Chí Minh, ngày tháng năm 2020

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

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

Trang 5

*****

PHIẾU NHẬN XÉT CỦA GIẢNG VIÊN PHẢN BIỆN

Họ và tên sinh viên 2: Mã Ngọc Tú MSSV2: 16110254 Nghành: Công Nghệ Thông Tin

Tên đề tài: Ứng dụng ruby on rails xây dựng website cookgram

Họ và tên giảng viên phản biện:

NHẬN XÉT 1 Về nội dung đề tài & khối lượng thực hiện:

2 Ưu điểm:

3 Khuyết điểm:

4 Đề nghị cho bảo vệ hay không?

5 Đánh giá loại:

6 Điểm: (Bằng chữ: )

Tp Hồ Chí Minh, ngày tháng năm 2020

Giảng viên phản biện

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

Trang 6

i

LỜI CẢM ƠN

Để hoàn thành tốt đề tài khóa luận tốt nghiệp này, ngoài sự nỗ lực từ chính bản thân, nhóm em còn nhận được sự quan tâm giúp đỡ, chỉ bảo tận tình của nhiều cá nhân, tập thể Người mà chúng em không quên gửi lời cảm ơn sâu sắc

Đầu tiên, nhóm em xin chân thành cảm ơn khoa Đào tạo Chất lượng cao – nghành Công nghệ thông tin, trường Đại học Sư Phạm Kỹ Thuật TP Hồ Chí Minh và thầy

Nguyễn Đăng Quang – trưởng nghành CNTT đã tạo điều kiện thuận lợi cho chúng

em thực hiện đề tài này

Chúng em cũng xin được gửi lời cảm ơn chân thành nhất đến cô Lê Thị Minh Châu,

người đã tận tình chỉ bảo và hướng dẫn nhóm em trong suốt quá trình thực hiện đề tài này

Bên cạnh đó, chúng em xin gửi lời cảm ơn đến các thầy cô giảng viên của trường Đại học Sư Phạm Kỹ Thuật TP Hồ Chí Minh nói chung cũng như các thầy cô giảng viên khoa Đào tạo Chất lượng cao, nhất là nghành Công nghệ thông tin nói riêng, những người đã giảng dạy, tích lũy cho chúng em những kiến thức quý báu trong những năm học vừa qua Đó là nền tảng giúp chúng em làm nên đề tài này và cũng là tiền đề giúp chúng em tiến xa hơn nữa trong tương lai

Dù đã cố gắng hoàn thành đề tài khóa luận đúng yêu cầu, nhưng do thời gian hạn hẹp và khả năng còn hạn chế nên chắc chắn nhóm sẽ không tránh khỏi nhiều thiếu sót Chúng em mong nhận được sự thông cảm và tận tình chỉ bảo của các thầy cô và các bạn

Nhóm chúng em một lần nữa xin chân thành cảm ơn

Trân trọng

Trang 7

ii

TÓM TẮT ĐỒ ÁN TỐT NGHIỆP

Đề tài: ỨNG DỤNG RUBY ON RAILS XÂY DỰNG WEBSITE COOKGRAM

Ngày nay với sự phát triển của công nghệ thông tin, nhu cầu chia sẻ, cập nhật thông tin là không thể thiếu đối với con người trong cuộc sống hằng ngày Từ đó, một thế giới mang tên Mạng xã hội ra đời, đó là nơi mà mọi người, đặc biệt là giới trẻ rất yêu thích Và với xu hướng đó, nhóm chúng em đã tạo ra Cookgram – một mạng xã hội nho nhỏ chuyên về nấu ăn, dành cho những người có cùng sở thích bếp núc có thể cập nhật mọi công thức mới, chia sẻ, giao lưu, kết bạn

Trang 8

iii

MỤC LỤC

TRANG

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

PHIẾU NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN ii

PHIẾU NHẬN XÉT CỦA GIẢNG VIÊN PHẢN BIỆN iii

LỜI CẢM ƠN i

TÓM TẮT ĐỒ ÁN TỐT NGHIỆP ii

MỤC LỤC iii

DANH MỤC CÁC TỪ VIẾT TẮT vi

DANH MỤC CÁC BẢNG BIỂU vii

DANH MỤC CÁC BIỂU ĐỒ VÀ HÌNH ẢNH ix

CHƯƠNG 1: TỔNG QUAN 1

1.1 Tính cấp thiết của đề tài 1

1.1.1 Vấn đề đặt ra 1

1.1.2 Khảo sát hiện trạng 1

1.1.3 Hướng giải quyết 4

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

1.3 Đối tượng nghiên cứu 4

CHƯƠNG 2: YÊU CẦU HỆ THỐNG 5

2.1 Yêu cầu người dùng 5

2.2 Yêu cầu hệ thống 5

2.2.1 Yêu cầu chức năng 5

2.2.2 Yêu cầu phi chức năng 16

CHƯƠNG 3: THIẾT KẾ HỆ THỐNG 17

3.1 Tổng quan hệ thống 17

3.1.1 Mô hình MVC 17

3.1.2 Mô hình MVC trong Ruby on rails 17

3.1.3 Class Diagram 19

3.2 Database 20

3.2.1 ERD 20

Trang 9

iv

3.2.2 Physical diagram 21

3.2.3 Đặc tả chi tiết database 21

3.3 Sequence diagram 25

3.3.1 SQ001_UC002 Đăng ký 25

3.3.2 SQ002_UC001a Đăng nhập 25

3.3.3 SQ003_UC005 Xem chi tiết món ăn 25

3.3.4 SQ004_ UC007 Quản lý tài khoản 26

3.3.5 SQ005_UC0011a Quản lý món ăn (user) 26

3.4 Đặc tả API 27

3.4.1 Graph API 27

3.5 Thiết kế giao diện 29

3.5.1 Giao diện Guest 29

3.5.2 Giao diện User 41

3.5.3 Giao diện Admin 52

CHƯƠNG 4: TRIỂN KHAI HỆ THỐNG 57

4.1 Nền tảng phát triển 57

4.1.1 Nền tảng công nghệ 57

4.1.2 Framework, thư viện 57

4.2 Công nghệ sử dụng 58

4.2.1 Ruby on rails 58

4.2.2 Database MySQL [2] 60

4.2.3 Google Dialogflow [3] 61

4.2.4 Recommendation systems [4] 62

4.2.5 Search engine elasticsearch [5] 64

CHƯƠNG 5: KIỂM THỬ VÀ CÀI ĐẶT HỆ THỐNG 67

5.1 Kiểm thử phần mềm 67

5.1.1 Kế hoạch kiểm thử 67

5.1.2 Thiết kế kiểm thử 67

5.1.3 Trường hợp kiểm thử 67

5.1.4 Kết quả kiểm thử 77

5.2 Cài đặt môi trường và hệ thống 79

Trang 10

v

5.2.1 Cài đặt framework Ruby on Rails 79

5.2.2 Cài đặt Yarn 80

5.2.3 Cài đặt MySQL Server 80

5.2.4 Cấu hình và tích hợp chatbot 80

5.2.5 Cài đặt và chạy website Cookgram 81

CHƯƠNG 6: KẾT LUẬN 82

6.1 Tiến độ thực hiện 82

6.2 Kết quả đạt được 82

6.2.1 Kiến thức và thực nghiệm 82

6.2.2 Ưu điểm và nhược điểm 83

6.3 Thách thức 83

6.4 Kế hoạch phát triển trong tương lai 83

TÀI LIỆU THAM KHẢO

Trang 11

vi

DANH MỤC CÁC TỪ VIẾT TẮT

Admin: Administration (Người quản trị)

MVC: Model-View-Controller

ERD: Entity Relationship Diagram

API: Application Programming Interface (Giao diện lập trình ứng dụng)

SQL: Structured Query Language

HTML: HyperText Markup Language

CRUD: Create – Read – Update – Delete

Trang 12

vii

DANH MỤC CÁC BẢNG BIỂU

Bảng 1.1 Bảng câu hỏi khảo sát Cookpad.com 2

Bảng 1.2 Bảng câu hỏi khảo sát Cooky.vn 3

Bảng 1.3 Bảng câu hỏi khảo sát CandyCanCook.com 3

Bảng 2.1 Yêu cầu người dùng 5

Bảng 2.2 Actor 5

Bảng 2.3 Chức năng actor Guest 5

Bảng 2.4 Chức năng actor User 6

Bảng 2.5 Chức năng actor Admin 6

Bảng 2.6 Bảng danh sách các use case 10

Bảng 2.7 Mô tả usecase UC001a.Đăng nhập 10

Bảng 2.8 Mô tả usecase UC001b.Đăng xuất 10

Bảng 2.9 Mô tả usecase UC002.Đăng ký 11

Bảng 2.10 Mô tả usecase UC003.Quên mật khẩu 11

Bảng 2.11 Mô tả usecase UC004.Xem danh sách món ăn 12

Bảng 2.12 Mô tả usecase UC005.Xem chi tiết món ăn 12

Bảng 2.13 Mô tả usecase UC006.Bình luận 12

Bảng 2.14 Mô tả usecase UC007.Quản lý tài khoản 13

Bảng 2.15 Mô tả usecase UC008.Quản lý bookmark 13

Bảng 2.16 Mô tả usecase UC009.Quản lý follow 14

Bảng 2.17 Mô tả usecase UC0010.Đánh giá món ăn 14

Bảng 2.18 Mô tả usecase UC0011a.Quản lý món ăn (User) 14

Bảng 2.19 Mô tả usecase UC0011b.Quản lý món ăn (Admin) 15

Bảng 2.20 Mô tả usecase UC0012.Quản lý user 15

Bảng 2.21 Yêu cầu phi chức năng 16

Bảng 3.1 Bảng User 21

Bảng 3.2 Bảng Relatioships 22

Bảng 3.3 Bảng Recipes 22

Bảng 3.4 Bảng Rates 22

Bảng 3.5 Bảng Comments 23

Bảng 3.6 Bảng Ingredients 23

Bảng 3.7 Bảng Steps 23

Bảng 3.8 Bảng Viewed_recipe 23

Bảng 3.9 Bảng Bookmarks 24

Bảng 3.10 Bảng Likes 24

Trang 13

viii

Bảng 3.11 Bảng Notifications 24

Bảng 3.12 Danh sách màn hình của Guest 29

Bảng 3.13 Mô tả chi tiết màn hình GUEST001.Home 30

Bảng 3.14 Mô tả chi tiết màn hình GUEST002.Home-newfeed 31

Bảng 3.15 Mô tả chi tiết màn hình GUEST0003 Home- RecipeDetail 34

Bảng 3.16 Mô tả chi tiết màn hình GUEST004 Guest-ViewUsers 35

Bảng 3.17 Mô tả chi tiết màn hình GUEST006 Guest-Search 37

Bảng 3.18 Mô tả chi tiết màn hình GUEST007 SignUp 38

Bảng 3.19 Mô tả chi tiết màn hình GUEST008 Login 39

Bảng 3.20 Mô tả chi tiết màn hình GUEST008 Chatbot 40

Bảng 3.21 Danh sách màn hình User 41

Bảng 3.22 Mô tả chi tiết màn hình USER001 User-Home 41

Bảng 3.23 Mô tả chi tiết màn hình USER002 User-NewsFeed 43

Bảng 3.24 Mô tả chi tiết màn hình USER003 User-upRecipe 44

Bảng 3.25 Mô tả chi tiết màn hình USER004 User-Home-RecipeDetail 46

Bảng 3.26 Mô tả chi tiết màn hình USER005 Profile-About 47

Bảng 3.27 Mô tả chi tiết màn hình USER006 Profile-Followers 49

Bảng 3.28 Mô tả chi tiết màn hình USER007 Profile-Bookmarks 51

Bảng 3.29 Mô tả chi tiết màn hình USER008 Profile-Repcies 52

Bảng 3.30 Danh sách màn hình Admin 52

Bảng 3.31 Mô tả chi tiết màn hình ADM001.Dashboard 53

Bảng 3.32 Mô tả chi tiết màn hình ADM002.Like 54

Bảng 3.33 Mô tả chi tiết màn hình ADM004.Relationships 54

Bảng 3.34 Mô tả chi tiết màn hình ADM004.User 55

Bảng 3.35 Mô tả chi tiết màn hình ADM005 Recipe 56

Bảng 4.1 Nền tảng công nghệ sử dụng 57

Bảng 4.2 Framework, thư viện sử dụng 57

Bảng 4.3 Các phương pháp gợi ý 63

Bảng 5.1 Testcase đăng nhập 68

Bảng 5.2 Testcase Đăng công thức 71

Bảng 5.3 Testcase Chi tiết công thức 73

Bảng 5.4 Testcase Trang cá nhân 75

Bảng 6.1 Tiến độ công việc 82

Trang 14

ix

DANH MỤC CÁC BIỂU ĐỒ VÀ HÌNH ẢNH

Hình 1.1 Website Cookpad.com 2

Hình 1.2 Website Cooky.vn 2

Hình 1.3 Website CandyCanCook 3

Hình 2.1 Usecase diagram tổng quát 7

Hình 2.2 Usecase của actor User 8

Hình 2.3 Usecase của actor Guest 9

Hình 2.4 Usecase của actor Admin 9

Hình 3.1 Mô hình MVC 17

Hình 3.2 Mô hình MVC trong rails 18

Hình 3.3 Class Diagram 19

Hình 3.4 ERD 20

Hình 3.5 Physical diagram 21

Hình 3.6 SQ001_UC002 Đăng ký 25

Hình 3.7 SQ002_UC001a Đăng nhập 25

Hình 3.8 SQ003_UC005 Xem chi tiết món ăn 26

Hình 3.9 SQ004_UC007 Quản lý tài khoản 26

Hình 3.10 SQ005_UC0011a Quản lý món ăn (user) 27

Hình 3.11 Màn hình GUEST001.Home 30

Hình 3.12 Màn hình GUEST002.Home-newfeed 31

Hình 3.13 Màn hình Popup Repice Preview 32

Hình 3.14 Màn hình GUEST0003 Home-RecipeDetail 33

Hình 3.15 Màn hình GUEST004 Guest-ViewUsers 35

Hình 3.16 Màn hình GUEST006 Guest-Search 36

Hình 3.17 Màn hình GUEST007 SignUp 37

Hình 3.18 Màn hình GUEST008 Login 38

Hình 3.19 Màn hình Login Facebook 39

Hình 3.20 Màn hình GUEST009.Chatbot 40

Hình 3.21 Guest’s screen flow 40

Hình 3.22 Màn hình USER001 User-Home 41

Hình 3.23 Màn hình USER002 User-NewsFeed 42

Hình 3.24 Màn hình USER003 User-upRecipe 43

Hình 3.25 Màn hình USER004.User-Home- RecipeDetail 45

Hình 3.26 Màn hình USER005 Profile-About 47

Hình 3.27 Màn hình Cập nhật thông tin cá nhân 48

Trang 15

x

Hình 3.28 Màn hình USER006 Profile-Followers 49

Hình 3.29 Màn hình USER007 Profile-Bookmarks 50

Hình 3.30 Màn hình USER008 Profile-Repcies 51

Hình 3.31 User’s screen flow 52

Hình 3.32 Màn hình ADM001.Dashboard 53

Hình 3.33 Màn hình ADM002.Likes 53

Hình 3.34 Màn hình ADM004.Relationships 54

Hình 3.35 Màn hình ADM004.Users 55

Hình 3.36 Màn hình ADM005 Recipes 55

Hình 3.37 Màn hình View Recipe từ Admin 56

Hình 4.1 Minh họa logo ngôn ngữ Ruby 58

Hình 4.2 Minh họa logo Ruby on Rails 59

Hình 4.3 Sơ đồ hoạt động của dialogflow 62

Hình 4.4 Logo công cụ Elasticsearch 64

Hình 5.1 Kết quả tổng quan về kiểm thử 77

Hình 5.2 Kết quả testcase Đăng nhập 77

Hình 5.3 Kết quả testcase Đăng công thức 78

Hình 5.4 Kết quả testcase Chi tiết công thức 78

Hình 5.5 Kết quả testcase Trang cá nhân 79

Trang 16

Tuy nhiên, rất nhiều người vẫn thích tự nấu ăn, có niềm đam mê với nấu nướng, luôn muốn được học thêm nhiều kinh nghiệm, công thức mới để thực hành khi có cơ hội hoặc chia sẻ chiến tích nấu ăn của mình với nhiều người khác để có thể giao lưu, kết bạn với nhau

Thực ra với thời đại công nghệ số, công việc vào bếp đã đơn giản hơn rất nhiều khi xung quanh là các loại máy móc hỗ trợ Vì vậy, vấn đề đặt ra là chúng ta phải tổng hợp lại các công thức, tạo một nơi giao lưu, chia sẻ, kết bạn cho những người có cùng sở thích nấu nướng cũng như những người muốn vào bếp, học làm bếp,… thành một hội nhóm, mạng xã hội nho nhỏ đơn giản và dễ dàng truy cập

1.1.2 Khảo sát hiện trạng

Với thời đại công nghệ tiên tiến, việc vào bếp và nấu nướng đã trở nên khá dễ dàng Chỉ cần có Internet, chúng ta có thể truy cập vào bất kì trang Web nấu nướng nào hoặc tải về các ứng dụng dạy nấu ăn trên điện thoại, các bước tiếp theo đương nhiên

là chỉ cần làm theo hướng dẫn sẵn có Tuy nhiên, độ chính xác của các công thức hiện diện đấy là bao nhiêu phần trăm? Chúng ta có thể tin cậy công thức đấy và các món

ăn sẽ luôn được làm ra thành công chứ?

Thật ra nấu ăn là một công việc gần như là thường xuyên, được thực hiện hằng ngày Nhưng có vẻ các website về chủ đề nấu ăn trên thị trường Việt Nam lại khá ít:

Trang 17

2

1.1.2.1 Cookpad.com (https://cookpad.com/)

Hình 1.1. Website Cookpad.com

Bảng 1.1 Bảng câu hỏi khảo sát Cookpad.com

Câu hỏi khảo sát Có/ Không Khác

Bình luận về món ăn Có Theo kiểu đặt câu hỏi bài viết Thông báo, tin nhắn Có Tin nhắn từ hệ thống

Tính toán khẩu phần ăn theo số

- Đánh giá ưu điểm: Giao diện thân thiện, đơn giản, dễ sử dụng Có nhiều event nấu

ăn được tổ chức thường xuyên

- Đánh giá nhược điểm: Độ tương tác giữa người dùng với nhau còn thấp

1.1.2.2 Cooky.vn (https://www.cooky.vn/)

Hình 1.2 Website Cooky.vn

Trang 18

3

Bảng 1.2 Bảng câu hỏi khảo sát Cooky.vn

Bình luận về món ăn Có

Thông báo, tin nhắn Có Tin nhắn từ hệ thống

người Có Nhập vào số người để nhận số lượng nguyên liệu cần dùng

- Đánh giá ưu điểm: Giao diện sinh động Độ tương tác giữa tác giả với người đọc cao nên bạn có thể đánh giá các công thức cũng như thảo luận về món ăn Có nhiều event nấu ăn được tổ chức thường xuyên

- Đánh giá nhược điểm: Không có

1.1.2.3 Candycancook.com (https://candycancook.com/)

Hình 1.3 Website CandyCanCook Bảng 1.3 Bảng câu hỏi khảo sát CandyCanCook.com

Trang 19

4

người

Có Nhập vào số người để nhận số

lượng nguyên liệu cần dùng

- Đánh giá ưu điểm: giao diện sinh động Giao diện rất dễ nhìn, rõ ràng và sinh động Nhiều món ăn đa dạng đến từ các nước khác nhau trên trang web này

- Đánh giá nhược điểm: độ tương tác không cao giữa các người đọc

Nhìn chung, các trang web không có sự khác biệt nhiều về chức năng Mỗi website đều hướng đến đối tượng người dùng khác nhau nhưng đều chú trọng vào độ đơn giản nhưng sinh động trên giao diện Những trang web này chú trọng tối ưu tốc độ duyệt web rất tốt cho trải nghiệm người dùng

1.1.3 Hướng giải quyết

Để đáp ứng nhu cầu về việc gợi ý một bữa ăn hợp lý cũng như thỏa mãn nhu cầu giao lưu kết bạn của giới trẻ mà “Cookgram” ra đời

Với trang “Cookgram” không những là nơi giao lưu, kết bạn mà còn là nơi giúp các bạn trẻ có thể chia sẻ với nhau niềm yêu thích nấu ăn, các bí kíp nấu ăn nhanh, tiết kiệm thời gian mà lại đầy đủ dinh dưỡng, ngon như mẹ nấu,… Để việc nấu nướng không còn là nổi ám ảnh Ngoài ra “Cookgram” còn dành cho các mẹ nội trợ, mẹ bỉm sữa, những người luôn mong muốn có một bữa cơm đầy đủ cho cho gia đình mình

mà không phải mất quá nhiều thời gian việc suy nghĩ: Hôm nay ăn gì?

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

- Áp dụng ngôn ngữ và công nghệ Ruby on Rails trong lập trình Web application

- Nắm bắt những nghiệp vụ cần có khi triển khai xây dựng website, đặc biệt là mô hình mạng xã hội

- Phân tích, thiết kế và xây dựng ứng dụng web chia sẻ công thức nấu ăn dành cho những người dùng yêu thích và muốn học hỏi nấu ăn

- Tìm hiểu và tích hợp các công nghệ machine learning, chatbot vào để hỗ trợ website

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

- Ngôn ngữ ruby và framework ruby on rails

Trang 20

5

2.1 Yêu cầu người dùng

Bảng 2.1 Yêu cầu người dùng

STT Tiêu đề User story

1 Web Application Ứng dụng web hỗ trợ người dùng có thể:

- Tìm kiếm món ăn

- Chia sẻ công thức nấu ăn

- Tương tác bài viết (Yêu thích, chia sẻ và đánh giá)

- Tương tác người dùng (Theo dõi người dùng)

- Quản lý lượt tương tác, hành vi người dùng

2 API Sever - Hỗ trợ kênh đăng nhập khác cho người dùng

2.2 Yêu cầu hệ thống

2.2.1 Yêu cầu chức năng

2.2.1.1 Actor

Bảng 2.2 Actor

1 Guest (Khách) Người dùng ẩn danh truy cập vào website,

1 Đăng ký Guest sử dụng email để đăng ký tài khoản

Sau khi đăng ký thành công người dùng sẽ được chuyển tới homepage

2 Tìm kiếm món ăn Nhập tên món ăn hoặc nguyên liệu ở thanh

tìm kiểm để tìm món ăn

3 Xem danh sách món ăn Món ăn mới nhất được hiện thị trên trang

chủ cho người xem và món ăn của follower nếu user đã đăng nhập

Trang 21

6

4 Xem chi tiết món ăn Người dùng chọn một món ăn để hiển thị

thông tin về món ăn đó

2 Đăng xuất Đăng xuất tài khoản khỏi hệ thống

3 Quên mật khẩu User sẽ nhập email của tài khoản Sau đó

vào mail xác nhận để đổi mật khẩu

4 Quản lý tài khoản User có thể thực hiện các tác vụ:

- Sửa thông tin cá nhân

- Đổi mật khẩu

5 Bình luận User nhập nội dung và đăng tải bình luận

trên bài viết của món ăn đang xem

6 Đánh giá Chọn số sao ứng với cảm nhận của user

7 Thêm follower User có thể theo dõi

8 Quản lí follower User có thể xem danh sách đang được theo

dõi và hủy theo dõi user khác

9 Quản lý bài viết User có thể thực hiện các tác vụ:

- Sửa thông tin bài viết

- Xóa bài viết

10 Quản lý bookmark User có thể thực hiện các tác vụ:

- Lưu thông tin bài viết

- Xóa bài viết đã lưu

11 Thông báo Thông báo cho user khi có hoạt động mới từ

người dùng khác

2.2.1.2.3 Admin

Bảng 2.5 Chức năng actor Admin

1 Xem trang quản lí admin Người dùng phải có role admin Chứa các

tính năng quản lý của admin

2 Quản lý bài viết món ăn Admin có thể thực hiện các tác vụ CRUD

bài viết món ăn

Trang 23

8 2.2.1.3.1 Usecase User

Hình 2.2 Usecase của actor User

Trang 25

10

2.2.1.4 Danh sách usecase

Bảng 2.6 Bảng danh sách các use case

STT Tên use case Usecase ID

12 Quản lý món ăn của user UC0011a

13 Quản lý món ăn của admin UC0011b

2.2.1.5 Đặc tả chi tiết usecase

2.2.1.5.1 UC001a.Đăng nhập

Bảng 2.7 Mô tả usecase UC001a.Đăng nhập

Usecase Đăng nhập Usecase ID UC001.1

Mô tả Kiểm tra và xác thực vai trò người dùng

Tác nhân kích hoạt User, Admin

Tiền điều kiện Tồn tại tài khoản

Các bước thực hiện Bước 1: Vào màn hình đăng nhập hoặc trang chủ

Bước 2: Nhập Username/Email và Mật khẩu Bước 3: Nhấn button Đăng nhập

Bước 4: Nếu thành công sẽ chuyển tới trang chủ Nếu thất bại sẽ quay lại bước chuyển tới màn hình đăng nhập

2.2.1.5.2 UC001b.Đăng xuất

Bảng 2.8 Mô tả usecase UC001b.Đăng xuất

Usecase Đăng xuất

Usecase ID UC001.2

Mô tả Người dùng đăng xuất tài khoản ra khỏi hệ thống và

Trang 26

11

trình duyệt

Tác nhân kích hoạt User, Admin

Tiền điều kiện Đã tiến hành đăng nhập vào website

Các bước thực hiện Bước 1: Click vào button user, tùy chọn đăng xuất sẽ

hiện ra từ menu dropdown

Bước 2: Người dùng được chuyển về trang chủ sau khi đăng xuất

2.2.1.5.3 UC002.Đăng ký

Bảng 2.9 Mô tả usecase UC002.Đăng ký

Usecase Đăng ký

Usecase ID UC002

Mô tả Đăng ký tài khoản để đăng nhập vào website

Tác nhân kích hoạt Guest

Tiền điều kiện Không có

Các bước thực hiện Bước 1: Vào trang chủ

Bước 2 :Click vào button Tạo tài khoản để vào màn hình đăng ký

Bước 3: Nhập thông tin (Tên của bạn, Username, Email, Mật khẩu, Xác nhận Mật khẩu)

Bước 4: Click button Đăng ký để hoàn thành việc đăng

ký tài khoản Bước 5: Nếu đăng ký thành công sẽ được chuyển đến trang chủ Nếu thất bại thì quay lại bước 3

2.2.1.5.4 UC003.Quên mật khẩu

Bảng 2.10 Mô tả usecase UC003.Quên mật khẩu

Usecase Quên mật khẩu

Mô tả Người dùng quên mật khẩu và muốn lấy mật khẩu mới

Tác nhân kích hoạt User, Admin

Các bước thực hiện Bước 1: Vào màn hình đăng nhập

Bước 2: Click vào button Quên mật khẩu Bước 3: Nhập Email của tài khoản

Bước 4: Vào Email để đổi mật khẩu

Trang 27

12

2.2.1.5.5 UC004.Xem danh sách món ăn

Bảng 2.11 Mô tả usecase UC004.Xem danh sách món ăn

Use case Xem danh sách món ăn

Mô tả Xem danh sách món ăn tại màn hình trang chủ, người

dùng có thể xem các loại món ăn được thêm mới nhất theo mặc định

Tác nhân kích hoạt Guest, User

Các bước thực hiện Truy cập vào trang chủ

2.2.1.5.6 UC005.Xem chi tiết món ăn

Bảng 2.12 Mô tả usecase UC005.Xem chi tiết món ăn

Usecase xem chi tiết món ăn

Mô tả Xem thông tin chi tiết về cách nấu món ăn

Tác nhân kích hoạt Guest, User

Các bước thực hiện Bước 1: Vào màn hình trang chủ

Bước 2: Click vào một món ăn sẽ chuyển đến màn hình chi tiết món ăn

2.2.1.5.7 UC006.Bình luận

Bảng 2.13 Mô tả usecase UC006.Bình luận

Usecase Bình luận món ăn

Mô tả Bình luận, nhận xét món ăn

Tác nhân kích hoạt User

Tiền điều kiện Đăng nhập vào tài khoản

Các bước thực hiện Bước 1: Vào trang xem chi tiết món ăn

Bước 2: Nhập nội dung muốn bình luận ở phần thảo luận

Bước 3: Nhấn phím Enter hoặc Gửi trên bàn phím để

Trang 28

13

đăng tải

2.2.1.5.8 UC007.Quản lý tài khoản

Bảng 2.14 Mô tả usecase UC007.Quản lý tài khoản

Usecase Quản lí tài khoản

Mô tả User quản lí tài khoản thông qua xem trang cá nhân

của tài khoản và có thể tiến hành chỉnh sửa thông tin hoặc đổi mật khẩu

Tiền điều kiện Đăng nhập thành công

Các bước thực hiện Bước 1: Chọn profile ở thanh Navigation

Bước 2: Người dùng vào trang cá nhân Bước 3a: Người dùng click vào icon setting để có thể tiến hành chỉnh sửa thông tin tài khoản

Bước 4a : Người dùng điền đầy đủ thông tin và bấm Lưu thay đổi để xác nhận chỉnh sửa thông tin

Bước 3b: Người dùng chọn đổi mật khẩu Bước 4b: Người dùng điền mật khẩu cũ và mật khẩu mới để tiến hành đổi mật khẩu

Bước 5b: Người dùng trở về trang cá nhân nếu đổi mật khẩu thành công

2.2.1.5.9 UC008.Quản lí bookmark

Bảng 2.15 Mô tả usecase UC008.Quản lý bookmark

Usecase Quản lí bookmark

Mô tả User quản lí bookmark đã lưu

Các bước thực hiện Bước 1: Click vào icon bookmark trên bài viết để tạo

Bước 2 : Click lại vào icon bookmark trên bài viết để xóa

Trang 29

14

2.2.1.5.10 UC009.Quản lý follow

Bảng 2.16 Mô tả usecase UC009.Quản lý follow

Usecase Quản lí bookmark

Mô tả User quản lí follower đã lưu

Các bước thực hiện Bước 1: Click vào icon follow bên cạnh tên user để

follow

Bước 2: Click vào icon following bên cạnh tên user

để unfollow

2.2.1.5.11 UC0010.Đánh giá món ăn

Bảng 2.17 Mô tả usecase UC0010.Đánh giá món ăn

Usecase Đánh giá món ăn

Mô tả User đánh giá món ăn theo số điểm dựa theo cảm

nhận

Các bước thực hiện Bước 1: User click vào số sao trên trang chi tiết món

ăn

Bước 2: Hệ thống sẽ tính lại số điểm của món ăn và gửi về browser

2.2.1.5.12 UC0011a.Quản lý món ăn của user

Bảng 2.18 Mô tả usecase UC0011a.Quản lý món ăn (User)

Usecase Quản lí món ăn (User)

Usecase ID UC0011a

Mô tả User quản lí những món ăn đã tạo ra và có thể thực

hiện hoạt động CRUD

Các bước thực hiện Bước 1: User truy cập vào trang cá nhân

Trang 30

15

Bước 2: Danh sách món ăn được tạo ra bởi user sẽ được show lên màn hình

Bước 3: User click chọn món ăn cần quản lí

Bước 4.a: User chọn chỉnh sửa món ăn Bước 4a.1: User tiến hành chỉnh sửa món ăn Bước 4a.2: User click chọn Lưu món ăn Bước 4a.3: Nếu món ăn được lưu thành công, user sẽ trở về giao diện xem chi tiết món ăn

Bước 4b: User chọn delete món ăn Bước 4b.1: Pop-up hiện lên yêu cầu xác nhận

Bước 4b.2: Nếu user xác nhận, hệ thông sẽ xóa món

ăn và trở về giao diện danh sách món ăn

Bước 4c: User chọn tạo món ăn mới Bước 4c.1: User tiến hành tạo món ăn Bước 4c.2: User click chọn lưu món ăn Bước 4c.3: Nếu món ăn được lưu thành công, user sẽ trở về giao diện xem chi tiết món ăn

2.2.1.5.13 UC0011b.Quản lý món ăn của admin

Bảng 2.19 Mô tả usecase UC0011b.Quản lý món ăn (Admin)

Usecase Quản lí món ăn (Admin)

Usecase ID UC0011b

Mô tả Admin quản lí tất cả những món ăn đã tạo ra bởi tất

cả user và có thể thực hiện hoạt động CRUD

Tác nhân kích hoạt Admin

Tiền điều kiện Đăng nhập thành công và có quyền admin

Các bước thực hiện Bước 1: Admin truy cập vào trang admin

Bước 2: Admin chọn data Recipes từ table

Bước 3: Dữ liệu món ăn sẽ được hiện lên màn hình để admin thực hiện CRUD

2.2.1.5.14 UC0012.Quản lý user

Bảng 2.20 Mô tả usecase UC0012.Quản lý user

Usecase Quản lí user

Mô tả Admin quản lí tất cả users đã tạo ra và có thể thực

hiện hoạt động CRUD

Tác nhân kích hoạt Admin

Trang 31

16

Tiền điều kiện Đăng nhập thành công và có quyền admin

Các bước thực hiện Bước 1: Admin truy cập vào trang admin

Bước 2: Admin chọn data Users từ table

Bước 3: Dữ liệu users sẽ được hiện lên màn hình để admin thực hiện CRUD

2.2.2 Yêu cầu phi chức năng

Bảng 2.21 Yêu cầu phi chức năng

STT Chức năng Mô tả

1 Trực quan, tương

thích Giao diện phù hợp với từng trình duyệt web khác nhau

UX thân thiện người dùng, dễ sử dụng

2 Độ tin cậy Các thông tin được lưu trữ trong cơ sở dữ liệu là vĩnh

viễn

Bảo mật hệ thống và thông tin người dùng

3 Tính khả dụng Xử lý dữ liệu theo thời gian thực

4 Bảo trì Dễ dàng bảo trì và nâng cấp

Trang 32

17

3 CHƯƠNG 3: THIẾT KẾ HỆ THỐNG

3.1 Tổng quan hệ thống

3.1.1 Mô hình MVC

Mô hình MVC là một kiến trúc phần mềm hay mô hình thiết kế được sử dụng trong

kỹ thuật phần mềm Khi một phần mềm sử dụng mô hình này thì nó sẽ phải chia ra

thành ba phần chính Model-View-Controller (MVC) với ba nhiệm vụ khác nhau:

Hình 3.1 Mô hình MVC

- Model: Là thành phần chính và nó chỉ chứa nghiệp vụ logic, các phương thức xử

lý dữ liệu, truy xuất dữ liệu từ database và gửi đến Views Model độc lập với giao diện người dùng

- View: Là nới chứa những giao diện như một nút bấm, khung nhập, menu, hình ảnh… Nó đảm nhiệm nhiệm vụ hiển thị dữ liệu và giúp người dùng tương tác với

hệ thống

- Controller: Là nới tiếp nhận những yêu cầu xử lý được gửi từ người dùng, nó sẽ gồm những class/ function xử lý nhiều nghiệp vụ logic giúp lấy đúng dữ liệu thông tin cần thiết nhờ các nghiệp vụ lớp Model cung cấp và hiển thị dữ liệu đó

ra cho người dùng nhờ lớp View

3.1.2 Mô hình MVC trong Ruby on rails

Model - Controller - View là nguyên tắc phân chia công việc của một ứng dụng thành

ba hệ thống con riêng biệt nhưng hợp tác chặt chẽ

Các thư mục models, view, controllers được đặt trong thư mục app với:

- app/controllers: Nó là bộ não controller trong MVC chứa tất cả các file contrller Việc đặt tên của file này bắt buộc phải theo quy tắt là số nhiều của tên model +

“_controller”

- app/models: Tất cả model sẽ nằm trong app/models Models đóng vai trò như đối tượng quan hệ sẽ mapping với database table chứa dữ liệu Quy tắt đặt model sẽ

Trang 33

Ngoài ra, các file layout sẽ được đặt tại đây app/views/layouts Nó như là một layout tổng và được kế thừa ở các views khác

Hình 3.2 Mô hình MVC trong rails

Trang 34

19

3.1.3 Class Diagram

Hình 3.3 Class Diagram

Trang 35

20

3.2 Database

3.2.1 ERD

Hình 3.4 ERD.

Trang 37

22

3 Encrypted_password Mật khẩu đã được mã

hóa của user

Varchar

4 Reset password_token Đổi mật khẩu Varchar

11 Created_at Ngày tạo tài khoản Datetime

12 Updated_at Ngày cuối cùng chỉnh

sửa tài khoản datetime

2 Follower_id Id của người theo dõi Int

3 Followed_id Id theo dõi Int

4 Created_at Ngày tạo theo dõi Datetime

5 Updated_at Ngày cuối cùng chỉnh sửa

4 Image Hình ảnh món ăn Varchar

5 Created_at Ngày tạo Datetime

6 Updated_at Ngày cuối cùng chỉnh sửa Datetime

Trang 38

23

3 Reatable_id Id của công thức Int

4 Rateable_type Tên công thức Varchar

3 Recipe_id Id công thức Int

5 Created_id Ngày tạo datetime

6 Updated_at Ngày cuối cùng chỉnh sửa datetime

3 Name Tên nguyên liệu Varchar

4 Image Hình ảnh bước làm Varchar

3.2.3.8 Bảng Viewed_recipe

Bảng 3.8 Bảng Viewed_recipe

STT Tên cột Mô tả Kiểu dữ liệu Note

Trang 39

24

Tự động tăng

2 User_id Id của user Int

4 Comment_id Id của bình luận Int

3 Actor_id Người được thông báo Int

4 Notifiable_id Người tạo ra thông báo Int

5 Notifiable_type Đối tượng được thông

Trang 40

25

3.3 Sequence diagram

3.3.1 SQ001_UC002 Đăng ký

Hình 3.6 SQ001_UC002 Đăng ký 3.3.2 SQ002_UC001a Đăng nhập

Hình 3.7 SQ002_UC001a Đăng nhập 3.3.3 SQ003_UC005 Xem chi tiết món ăn

Định dạng
Số trang	100
Dung lượng	8,47 MB