báo cáo tổng quan thực hiện kiểm thử cho website công thức nấu ăn food recipe

3.1 Khảo sát hiện trạng Hầu hết chỉ có những bài đăng trên website về cách nấu một món nào đó chứ không có nhiều về một kho các công thức dưới dạng một trang web.Vì thế khi xây dựng một

TRƯỜNG ĐẠI HỌC PHENIKAA

BÁO CÁO TỔNG QUAN

Thực hiện kiểm thử cho Website Công Thức

Nấu Ăn Food Recipe

20010948 Nguyễn Minh Dương 20010948@st.phenikaa-uni.edu.vn

20010994 Phạm Văn Tuấn 20010994@st.phenikaa-uni.edu.vn

20010989 Trần Thị Thuận 20010989@st.phenikaa-uni.edu.vn

20010970 Dương Thị Trà My 20010970@st.phenikaa-uni.edu.vn

20010990 Nguyễn Thiện Toàn 20010990@st.phenikaa-uni.edu.vn

Giảng viên hướng dẫn: Trịnh Thanh Bình

Họ và tên nhóm sinh viên:

- Nguyễn Minh Dương

- Phạm Văn Tuấn

- Trần Thị Thuận

- Dương Thị Trà My

- Nguyễn Thiện Toàn

Điện thoại liên lạc: 0981458371 Email: 20010948@st.phenikaa-uni.edu.vn

Tôi/Chúng tôi cam kết Bài tập lớn (BTL) là công trình nghiên cứu của bản thân/nhóm tôi Các kết quả nêu trong BTL là trung thực, là thành quả của riêng tôi, không sao chép theo bất kỳ công trình nào khác Tất cả những tham khảo trong BTL – bao gồm hình ảnh, bảng biểu, số liệu, và các câu từ trích dẫn – đều được ghi rõ ràng và đầy đủ nguồn gốc trong danh mục tài liệu tham khảo Tôi/chúng tôi xin hoàn toàn chịu trách nhiệm với dù chỉ một sao chép vi phạm quy chế của nhà trường

Hà Nội, ngày 8 tháng 5 năm 2023 Tác giả/nhóm tác giả BTL

Họ và tên sinh viên Lời cam kết

Trong bối cảnh sự phát triển nhanh chóng của công nghệ thông tin, việc tìm kiếm và chia sẻ thông tin về các món ăn đã trở nên dễ dàng hơn bao giờ hết Website Food Recipe do nhóm chúng tôi xây dựng là một trong những trang web cung cấp hàng ngàn công thức nấu ăn từ khắp nơi trên thế giới Tuy nhiên, như mọi sản phẩm phần mềm khác, Food Recipe cũng gặp phải nhiều vấn đề liên quan đến chất lượng

và độ tin cậy của nó Hiện nay, việc kiểm thử phần mềm cho trang web Food Recipe vẫn chưa được giải quyết một cách đầy đủ

Nhóm chúng tôi đã lựa chọn hướng tiếp cận kiểm thử phần mềm bằng cách áp dụng các kiến thức về kiểm thử phần mềm đã được giới thiệu qua các bài học kết hợp với tìm hiểu qua các công cụ như internet, các tài liệu tham khảo Với hướng tiếp cận này, chúng tôi tin rằng sẽ giúp tăng độ tin cậy và giảm thiểu sự cố cho trang web Food Recipe

Giải pháp kiểm thử phần mềm được đề xuất bao gồm các bước như lấy dữ liệu

từ trang web, kiểm tra tính đúng đắn của các trang web hiển thị, kiểm tra tính năng của các nút bấm và thực hiện kiểm tra dữ liệu đầu vào và đầu ra Điều này giúp chúng tôi đảm bảo rằng trang web Food Recipe hoạt động đúng như mong đợi và cung cấp chính xác thông tin cho người dùng

Bài tập lớn của nhóm giúp các thành viên có thể áp dụng các kiến thức về kiểm thử phần mềm đã tiếp thu vào việc kiểm thử trang web Food Recipe và đóng góp quan trọng vào quá trình phát triển của trang web Food Recipe Bằng cách kiểm thử phần mềm, chúng tôi giúp phát hiện và gỡ bỏ các lỗi trong quá trình phát triển, giúp tăng độ tin cậy và độ ổn định của trang web Kết quả đạt được sau cùng là một trang web Food Recipe hoạt động tốt hơn, đáp ứng được nhu cầu của người dùng và giúp đảm bảo chất lượng của sản phẩm phần mềm

Chúng em xin chân thành cảm ơn thầy Trịnh Thanh Bình đã hướng dẫn chỉ bảo tận tình để chúng em có kiến thức hoàn thiện được đề tài này

Mở đầu

Lời cam kết ii

Mở đầu iii

Mục lục iv

Danh mục hình vẽ viii

Danh mục bảng x

Danh mục các từ viết tắt xi

Danh mục thuật ngữ xii

Chương 1 Giới thiệu đề tài 1

1.1 Đặt vấn đề 1

1.2 Mục tiêu và phạm vi đề tài 1

1.3 Định hướng giải pháp 2

Chương 2 Giới thiệu nền tảng/Công nghệ sử dụng 3

2.1 Khái quát về HTML: 3

2.2 Khái quát về CSS: 3

2.3 Khái quát về JavaScript: 3

2.4 Khái quát về ReactJS: 4

2.5 Khái quát về Firebase: 4

2.6 Khái quát về Selenium WebDriver: 4

2.7 Khái quát về JMeter: 5

Mục lục

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

3.2 Yêu cầu chức năng 6

3.2.1 Tổng quan các chức năng: 6

3.2.2 Biểu đồ Use Case tổng quan: 7

3.2.3 Biểu đồ phân ra XYZ 7

3.3 Đặc tả chức năng: 8

3.3.1 Đặc tả Use Case Xem công thức: 8

3.3.2 Đặc tả Use Case Đăng nhập: 9

3.3.3 Đặc tả Use Case Đăng ký 11

3.3.4 Đặc tả Use Case Cập nhật/ Đăng công thức: 14

3.3.5 Đặc tả Use Case Xoá công thức: 16

3.3.6 Đặc tả Use Case Tìm kiếm công thức: 18

3.4 Yêu cầu phi chức năng 20

Chương 4 Phát triển và triển khai kĩ thuật 21

4.1 Thiết kế các gói 21

4.2 Triển khai kỹ thuật 21

4.2.1 Thư viện và công cụ sử dụng 21

4.2.2 Kết quả đạt được 22

4.2.3 Minh hoạ các chức năng chính 22

4.3 Triển khai 27

Chương 5 Xây dựng SQA & Test Plan 28

5.1 Xây dựng SQA 28

5.2 Test Plan 28

5.2.1 Mục đích 28

5.2.2 Tổng quan các chức năng cần kiểm thử 29

5.2.3 Phạm vi kiểm thử 29

5.2.4 Những người sử dụng tài liệu Test Plan: 30

5.2.5 Lịch trình công việc 30

5.2.6 Yêu cầu về tài nguyên 31

5.2.7 Công cụ kiểm thử 31

5.2.8 Môi trường kiểm thử 32

5.2.9 Nhân sự 32

5.2.10 Những chức năng được kiểm thử 33

5.3 Chiến lược kiểm thử 34

5.3.1 Test Stages 34

5.3.2 Các loại kiểm thử 35

5.3.3 Điều kiện chấp nhận 36

5.4 Defect Tracking: 36

5.4.1 Phân loại lỗi 36

5.4.2 Quy trình xử lí lỗi 36

5.5 Test Deliverables 36

5.5.1 Test Cases 36

5.5.2 Test Cases Report: 39

Chương 6 Kiểm thử tự động 57

6.1 Unit Test 57

6.1.1 Một số thành phần được viết Unit Test 57

6.2 Kiểm thử tự động bằng Selenium Webdriver 59

6.3 Kiểm thử hiệu năng tự động bằng Jmeter 60

6.3.1 Tạo kịch bản 61

6.3.2 Phân tích kết quả 64

Chương 7 Kết luận và hướng phát triển 66

7.2 Hướng phát triển 66 Tài liệu tham khảo 67

Hình 1 Use Case Tổng quan 7

Hình 2 Sơ đồ tuần tự Use Case Xem công thức 9

Hình 3 Sơ đồ tuần tự Use Case Đăng nhập 11

Hình 4 Sơ đồ tuần tự Use Case Đăng nhập 11

Hình 5 Sơ đồ tuần tự Cập nhật/ Đăng công thức 16

Hình 6 Form đăng nhập 22

Hình 7 Đăng nhập thành công 23

Hình 8 Đăng nhập lỗi 23

Hình 9 Form Đăng ký 24

Hình 10 Đăng ký thành công 24

Hình 11 Tìm kiếm công thức 25

Hình 12 Kết quả trả về khi nhập vào từ khoá hợp lệ 26

Hình 13 Kết quả trả về khi nhập vào từ khoá không hợp lệ 26

Hình 14 Form Đăng công thức 26

Hình 15 Thêm công thức mới thành công 27

Hình 16 Không nhập đầy đủ thông tin 27

Hình 17 Biểu đồ Grantt 30

Hình 18 Kết quả chạy tất cả các Unit Tests 58

Hình 19 Recording tests 59

Danh mục hình vẽ

Hình 21 Thêm nhóm người dùng 61

Hình 22 Thiết lập thông số cho nhóm người dùng 62

Hình 23 Thêm HTTP Request 62

Hình 24 Thêm các dữ liệu yêu cầu 63

Hình 25 Thêm tiêu đề HTTP Header 63

Hình 26 Kết quả test hiệu năng tự động bằng Jmeter sử dụng kết nối mạng Phenikaa-Student 64

Danh mục bảng Bảng 1 Đặc tả Use Case Xem công thức 8

Bảng 2 Đặc tả Use Case Đăng nhập 9

Bảng 3 Đặc tả Use Case Đăng ký 12

Bảng 4 Đặc tả Use Case Cập Nhật/ Đăng công thức 14

Bảng 5 Đặc tả Use Case Xoá công thức 16

Bảng 6 Đặc tả Use Case Tìm kiếm công thức 19

Bảng 7 Danh sách thư viện và công cụ sử dụng 21

Bảng 8 Thông tin mã nguồn 22

Bảng 9 Lịch trình công việc kiểm thử 30

Bảng 15 Phân loại lỗi 36

Bảng 16 Danh sách Chức năng và Test Cases 36

Bảng 17 Test Cases Report 40

Bảng 18 Unit Testing Components 58

API Application Programming Interface

Giao diện lập trình ứng dụng

Quy trình đảm bảo chất lượng phần mềm

Ngôn ngữ đánh dấu siêu văn bản

Giao diện người dùng Danh mục các từ viết tắt

Browser Trình duyệt

Danh mục thuật ngữ

1.1 Đặt vấn đề

Hiện nay, không chỉ các bạn trẻ phải học tập và làm việc xa nhà có nhu cầu nấu ăn cao mà còn rất nhiều người làm nội trợ ở nhà có nhu cầu học hỏi và chia sẻ các công thức nấu nướng nhờ sự phát triển của internet và các thiết bị điện tử ở nước

ta

Việc phải tìm một công thức nấu ăn từ một tạp chí, một cuốn sách sẽ mất thời gian hơn việc bạn mở điện thoại hoặc máy tính của mình lên và thực hiện tìm kiếm Kết quả tìm kiếm được trả về sau một chút thời gian, bạn có thể lựa chọn một công thức nào đó phù hợp với mình để thực hiện

Hoặc bạn là một đầu bếp, một người nội trợ, rất tâm đắc và ưng ý với món ăn mình nấu, bạn sẵn sàng chia sẻ công thức, bí quyết nấu cho mọi người

Tất cả các vấn đề trên đều có thể được giải quyết dễ dàng với một website như Food Recipe Tại đây,bạn có thể chia sẻ, tìm kiếm công thức một cách dễ dàng, nhanh chóng, giúp giảm thời gian và nâng cao đời sống cá nhân, khiến mọi thứ xung quanh trở nên thông minh và tiện dụng hơn

Bên cạnh đó, khi bạn phát triển bất kỳ phần mềm nào, việc kiểm thử đóng vai trò quan trọng Khi bạn cung cấp phần mềm của bạn mà không có bất kỳ thử nghiệm nào thì nó có thể gây nguy hiểm cho chính người đang sử dụng nó Để giữ cho tất cả mọi người tránh xa mọi mối nguy hiểm, quá trình kiểm thử là cần thiết phải được tiến hành Kiểm thử là một quá trình cần thiết trong vòng đời phát triển phần mềm

 Đảm bảo rằng trang web đáp ứng được các yêu cầu chức năng và phi chức năng của người dùng

 Thực hiện kiểm thử cho trang web Food Recipe

 Giải quyết các lỗi và sự cố được xác định để cải thiện trải nghiệm người dùng

và tăng cường hoạt động của trang web

Phạm vi của đề tài : kiểm thử các tính năng và chức năng của trang web Food Recipe (https://food-recipe-omega.vercel.app/),

1.3 Định hướng giải pháp

Thực hiện xây dựng SQA & Test plan cho website đồng thời xây dựng các test case, GUI, code, thực hiện kiểm thử, test tự động bằng Selenium Webdriver và test hiệu năng bằng Jmeter

2.1 Khái quát về HTML:

HTML là viết tắt của Hypertext Markup Language là ngôn ngữ lập trình dung để xây dựng và cấu trúc lại các thành phần có trong Website HTML tạm dịch là ngôn ngữ đánh dấu siêu văn bản HTML là công cụ chính và thường được dùng để tạo nên một website

Các trang web thường chứa nhiều trang con và mỗi trang con này có tệp HTML riêng HTML hoạt động giống như phần mềm Microsoft Word chỉ về bố cục và định dạng các trang web HTML, kết hợp CSS và JavaScript, là nền tảng vững chắc cho thế giới trực tuyến

2.2 Khái quát về CSS:

CSS là chữ viết tắt của Cascading Style Sheets, nó là một ngôn ngữ được sử dụng để tìm và định dạng lại các phần tử được tạo ra bởi các ngôn ngữ đánh dấu CSS được phát triển W3C vào năm 1996, vì HTML không được thiết kế để gắn tag để giúp định dạng trang web HTML là ngôn ngữ markup và CSS định hình phong cách, chúng là không thể tách rời

CSS tạo ra nhiều style khác nhau nên có thể được áp dụng với nhiều trang web, từ

đó giảm tránh việc lặp lại các định dạng của các trang web giống nhau

CSS cung cấp các thuộc tính chi tiết hơn HTML để định nghĩa giao diện của trang web CSS giúp người dùng nhiều style trên một trang web HTML nên khả năng điều chỉnh trang của bạn trở nên vô hạn

2.3 Khái quát về JavaScript:

JavaScript là một trong ba ngôn ngữ lập trình web hàng đầu và nó đã được sử dụng rộng rãi trong 20 năm Ngay từ đầu, nó có tên là Mocha (1995), sau đó trở thành Chương 2 Giới thiệu nền tảng/Công nghệ sử

dụng

Mona, LiveScript, và cuối cùng là JavaScript như này nay Vào năm 2016, 92% trang web ngày nay sử dụng JS và rất có thể bạn đã sử dụng nhiều trang web sử dụng ngôn ngữ lập trình này

Thông thường, các trang web nhúng JS trực tiếp hoặc sử dụng tệp js làm tham chiếu Đây là ngôn ngữ phía máy khách, có nghĩa là thay vì xử lý tập lệnh trên máy chủ của trang web, nó được tải xuống máy của khách truy cập và được xử lý nên máy đó

2.4 Khái quát về ReactJS:

ReactJS là một opensource được phát triển bởi Facebook, ra mắt vào năm 2013, bản thân nó là một thư viện Javascript được dùng để để xây dựng các tương tác với các thành phần trên website Một trong những điểm nổi bật nhất của ReactJS đó là việc render dữ liệu không chỉ thực hiện được trên tầng Server mà còn ở dưới Client nữa ReactJS giúp tăng tốc quá trình phát triển và giảm thiểu rủi ro có thể xảy ra khi coding

2.5 Khái quát về Firebase:

Firebase là dịch vụ cơ sở dữ liệu hoạt động trên nền tảng đám mây – cloud Kèm theo đó là hệ thống máy chủ cực kỳ mạnh mẽ của Google Chức năng chính là giúp người dùng lập trình ứng dụng bằng cách đơn giản hóa các thao tác với cơ sở dữ liệu

Cụ thể là những giao diện lập trình ứng dụng API đơn giản Mục đích nhằm tăng số lượng người dùng và thu lại nhiều lợi nhuận hơn

Đặc biệt, còn là dịch vụ đa năng và bảo mật cực tốt Firebase hỗ trợ cả hai nền tảng Android và IOS Không có gì khó hiểu khi nhiều lập trình viên chọn Firebase làm nền tảng đầu tiên để xây dựng ứng dụng cho hàng triệu người dùng trên toàn thế giới

2.6 Khái quát về Selenium WebDriver:

Selenium WebDriver ( gọi tắt là WebDriver) là một automation framework dành cho web, với WebDriver bạn có thể thực hiện các phiên kiểm thử của mình trên các trình duyệt khác nhau mà không cần chỉ giới hạn trên Firefox hay Chrome

WebDriver sẽ cung cấp công cụ hỗ trợ bạn tốt hơn trong việc coding để tạo test scripts Bạn có thể sử dụng ngay các phương thức điều kiện như if-then-other, switch-

2.7 Khái quát về JMeter:

Jmeter là công cụ để đo độ tải và performance của đối tượng, có thể sử dụng để test performance trên cả nguồn tĩnh và nguồn động, có thể kiểm tra độ tải và hiệu năng trên nhiều loại server khác nhau như: Web – HTTP, HTTPS, SOAP, Database via JDBC, LDAP, JMS, Mail – SMTP(S), POP3(S) và IMAP(S)…

Jmeter là một phần mềm mã nguồn mở được viết bằng java Cha đẻ của JMeter là Stefano Mazzocchi Sau đó Apache đã thiết kế lại để cải tiến hơn giao diện đồ họa cho người dùng và khả năng kiểm thử hướng chức năng

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

Hầu hết chỉ có những bài đăng trên website về cách nấu một món nào đó chứ không

có nhiều về một kho các công thức dưới dạng một trang web.Vì thế khi xây dựng một trang web chuyên biệt riêng thì sẽ giúp khiến người dùng xác định được cụ thể địa điểm đây là một trang web tin cậy và nổi bật.Về phần phát triển nhóm sẽ cố gắng tìm hiểm về các chức năng mới và ưu việt

Điểm quan trọng là người đầu bếp chia sẻ được các cách nấu ăn của mình cho mọi người thông qua bài đăng , phần góp ý comment bổ sung của mọi người cũng sẽ sẽ đóng góp một phần lại cho người chia sẻ công thức

Định hướng website có thể sẽ xây dựng các công thức món ăn gợi ý cho người dùng với những nguyên liệu mà có Cùng với đó, việc triển khai và phát triển dự án không thể tránh khỏi các lỗi cũng như thiếu sót, nên việc kiểm thử cho website là điều tất yếu để đảm bảo website được vận hành một cách tốt nhất

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

3.2.2 Biểu đồ Use Case tổng quan:

Hình 1 Use Case Tổng quan

 Tác nhân tham gia:

o Thành viên: là người dùng đã sở hữu tài khoản được đăng ký trên trang web

o Khách: là những người chưa đăng ký tài khoản trên trang web

Phân rã phần chức năng đăng nhập của người dùng Để đăng nhập được người dùng trước tiên phải phải đăng ký tài khoản bằng gmail hoặc tài khoản tự lập Sau khi có tài khoản bắt đầu tiến hành đăng nhập

Phần đăng nhập người dùng sẽ nhập email và mật khẩu mà mình đã đăng ký tại phần đăng ký

 Đăng công thức:

Để đăng công thức mới, người dùng cần điền đầy đủ thông tin cho bài đăng của mình và không bỏ trống bất kì trường nào, bổ sung ảnh và tải lên Sau đó, người dùng chọn đăng để hoàn thành việc đăng công thức

3.3 Đặc tả chức năng:

3.3.1 Đặc tả Use Case Xem công thức:

Bảng 1 Đặc tả Use Case Xem công thức Tên use case Xem công thức

Mô tả Chức năng xem công thức nấu ăn theo danh mục là một tính năng

cho phép người dùng truy cập vào các danh mục món ăn để tìm kiếm các công thức nấu ăn liên quan đến loại món ăn đó

Kết quả: Trang web hiển thị món ăn theo từng danh mục được chọn

Chi tiết công thức: Người dùng có thể nhấp vào kết quả tìm kiếm

để xem chi tiết công thức món ăn, bao gồm các thông tin như nguyên liệu cần chuẩn bị, hướng dẫn nấu nướng, thời gian chuẩn

Bảng 2 Đặc tả Use Case Đăng nhập

Mô tả Cho phép người dùng đăng nhập vào hệ thống bằng tài

khoản đã tạo

Sự kiện kích hoạt Click vào nút đăng nhập

Điều kiện trước Đã tạo tài khoản trên hệ thống

2 Hệ thống Hiện thị giao diện đăng nhập

(tài khoản và mật khẩu)

5 Hệ thống Kiểm tra xem khách có nhập đủ

thông tin tài khoản và mật khẩu

6 Hệ thống Kiểm tra thông tin tài khoản và

mật khẩu có trùng khớp với tài khoản trên hệ thống

6a Hệ thống Thông báo lỗi: cần nhập đầy đủ

thông tin tài khoản và mật khẩu (Trong trường hợp thông khách không nhập tài khoản hoặc mật khẩu)

7a Hệ thống Thông báo lỗi: tài khoản hoặc mật

khẩu không chính xác (Trong trường hợp tài khoản đó không tồn tại)

Hình 3 Sơ đồ tuần tự Use Case Đăng nhập 3.3.3 Đặc tả Use Case Đăng ký

Hình 4 Sơ đồ tuần tự Use Case Đăng ký

Bảng 3 Đặc tả Use Case Đăng ký

Mô tả Cho phép người dùng tạo tài khoản trên hệ thống

Sự kiện kích hoạt Click vào nút đăng ký

Điều kiện trước Không

2 Hệ thống Hiện thị giao diện đăng ký

đăng ký

5 Hệ thống Kiểm tra khách đã nhập những

các thông tin bắt buộc chưa

6 Hệ thống Kiểm tra địa chỉ email của khách

có hợp lệ không

7 Hệ thống Kiểm tra mật khẩu và xác nhận

mật khẩu có trùng nhau không

8 Hệ thống Kiểm tra mật khẩu có đầy đủ an

toàn không

9 Hệ thống Lưu thông tin tài khoản và thông

báo đăng ký thành công

7a Hệ thống Thông báo lỗi: địa chỉ email

không hợp lệ (Trong trường hợp khách nhập email không hợp lệ)

8a Hệ thống Thống báo lỗi: Mật khẩu và xác

nhận mật khẩu không trùng khớp (Trong trường hợp mật khẩu và xác nhận mật khẩu không trùng khớp)

9a Hệ thống Thông báo lỗi: Mật khẩu phải trên

6 ký tự (Trong trường hợp mật khẩu quá ngắn)

Điều kiện sau Tài khoản được tạo đã được lữu trữ vào hệ thống

3.3.4 Đặc tả Use Case Cập nhật/ Đăng công thức:

Bảng 4 Đặc tả Use Case Cập Nhật/ Đăng công thức Tên usecase Cập nhật/ Đăng công thức

Tác nhân Người dùng “muốn đóng góp và chia sẻ công thức của mính

lên trang web”

Quản trị viên “muốn thêm công thức mới để nâng cao trải nghiệm người dùng và tang tính đa dạng của nội dung trên trang web”

Mô tả Chức năng thêm công thức cho phép người dùng thêm 1 công

Click vào nút thêm trên thanh tiêu đề

Tiền điều kiên Truy cập vào trang web thành công

Đã đăng nhập vào tài khoản người dùng

Luồng sự kiện

chính

STT Thực hiện bởi

Hành động

1 Người dùng Nhấn vào nút “thêm công thức”

2 Hệ thống Hiển thị form nhập thông tin công

Danh mục công thức(bắt buộc)

Nguyên liệu (bắt buộc)

Cách thực hiện(bắt buộc) Hình ảnh(tùy chọn)

Hành động

3a Người dùng Thông báo lỗi: nếu người dùng không

nhập đủ các thông tin bắt buộc

5a Hệ thống Thông báo lỗi: nếu người dùng nhập

thông tin không hợp lệ hoặc trùng lặp với công thức đã có trên trang web Điều kiện sau Thông tin công thức đã được lưu vào trang web

Trang web hiển thị thông báo thành công

Người dùng quay lại trang chủ

Hình 5 Sơ đồ tuần tự Cập nhật/ Đăng công thức 3.3.5 Đặc tả Use Case Xoá công thức:

Bảng 5 Đặc tả Use Case Xoá công thức Tên usecase Xóa công thức

Mô tả Cho phép người dùng hoặc quản trị viên xóa 1 công thức được

đăng trên trang web

STT Thực hiện bởi

Hành động

1 Người dùng Truy cập vào trang chi tiết

công thức cần xóa

2 Người dùng Nhấn vào nút “Xóa” ở góc

bên phải của trang

3 Hệ thống Hiển thị hộp thoại xác nhận

xóa công thức

4 Người dùng Chọn “đồng ý” để xác nhận

xóa công thức hoặc “hủy”

để quay lại trang chi tiết công thức

5 Hệ thống Nếu người dùng chọn “đồng

ý”, hệ thống xóa công thức

và chuyển hướng người dùng đến trang chính của trang web

Điều kiện sau khi xóa

Công thức đã được xóa khỏi trang web

Quản trị

viên

Tác nhân

Quản trị viên của trang web

Luồng sự kiện

Điều kiện sau khi xóa

Công thức đã được xóa khỏi trang web và không còn xuất hiện trên trang quản lý công th

STT Thực hiện bởi

Hành động

1 Quản trị viên

Truy cập vào trang quản lý database trên trang web

2 Quản trị viên

Tìm kiếm và chọn công thức cần xóa

3 Quản trị viên

Nhấn vào nút “Xóa” ở góc trên bên phải của trang

4 Hệ thống Hiển thị hộp thoại xác nhận

xóa công thức

5 Quản trị viên

Chọn “đồng ý” để xác nhận xóa công thức hoặc “hủy”

để quay lại trang quản lý công thức

6 Hệ thống Nếu quản trị viện chọn

“đồng ý” hệ thống xóa công thức và chuyển hướng quản trị viên đến trang quản lí công thức

3.3.6 Đặc tả Use Case Tìm kiếm công thức:

Bảng 6 Đặc tả Use Case Tìm kiếm công thức

Tên use case Tìm kiếm công thức

Sự kiện kích hoạt Nhập vào ô tìm kiếm và Click tìm kiếm

Điều kiện trước Không

Điều kiện sau

Tên use case Tìm kiếm công thức

Sự kiện kích hoạt Nhập vào ô tìm kiếm và Click tìm kiếm

Điều kiện trước Không

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

Một số yêu cầu phi chức năng cho trang web công thức nấu ăn Food Recipe:

 Độ tin cậy: Trang web cần đảm bảo tính ổn định và độ tin cậy cao để đảm bảo người dùng có trải nghiệm tốt nhất khi sử dụng trang web

 Hiệu suất: Trang web cần có hiệu suất tối ưu để đảm bảo thời gian phản hồi nhanh và trải nghiệm tốt cho người dùng

 Bảo mật: Trang web cần có các biện pháp bảo mật đủ mạnh để bảo vệ thông tin của người dùng, bao gồm các thông tin tài khoản và thông tin cá nhân

 Khả năng mở rộng: Trang web cần có khả năng mở rộng để có thể đáp ứng nhu cầu tăng trưởng của người dùng và dữ liệu

 Dễ sử dụng: Trang web cần có giao diện thân thiện và dễ sử dụng để người dùng có thể tìm kiếm và sử dụng thông tin một cách dễ dàng

 Tương thích: Trang web cần tương thích với nhiều trình duyệt web và thiết bị khác nhau để đảm bảo người dùng có thể truy cập trang web từ bất kỳ nơi đâu

 Độ phân giải: Trang web cần có độ phân giải cao để đảm bảo hình ảnh và thông tin trên trang web được hiển thị đúng cách và rõ ràng trên các thiết bị

 Gói tiêu chuẩn:

o Bao gồm các tính năng của gói cơ bản và các tính năng nâng cao như đăng

ký tài khoản, đăng nhập, lưu trữ yêu thích,

o Thiết kế các trang chi tiết cho mỗi công thức nấu ăn, bao gồm các thông tin chi tiết về nguyên liệu, các bước thực hiện, hình ảnh, video,

 Gói nâng cao:

o Bao gồm các tính năng của gói tiêu chuẩn và các tính năng nâng cao như đánh giá công thức, chia sẻ công thức trên mạng xã hội,

o Tích hợp các tính năng thông minh như gợi ý công thức nấu ăn dựa trên lịch sử tìm kiếm, ưu tiên hiển thị các công thức phù hợp với khẩu vị của người dùng,

4.2 Triển khai kỹ thuật

4.2.1 Thư viện và công cụ sử dụng

Bảng 7 Danh sách thư viện và công cụ sử dụng

IDE lập trình Visual Studio Code https://code.visualstudio.com/

Chương 4 Phát triển và triển khai kĩ

thuật

Framework ReacJs https://legacy.reactjs.org/

4.2.2 Kết quả đạt được

Thực hiện cài đặt các công cụ, lập trình và triển khai được website trên Internet

Bảng 8 Thông tin mã nguồn

Dung lượng toàn bộ mã nguồn 874 MB

4.2.3 Minh hoạ các chức năng chính

Đăng nhập:

Hình 6 Form đăng nhập Tại trang đăng nhập, người dùng tiến hành nhập vào tài khoản mà mình đã đăng ký sử dụng trên Website, thông tin nhập vào bao gồm Email và Mật khẩu Sau khi tiến hành nhập vào, người dùng chọn Đăng nhập

Nếu thông tin nhập vào chính xác, hệ thống sẽ điều hướng đến trang chủ với thông tin người dùng tương ứng Nếu thông tin nhập vào không chính xác, hệ thống

sẽ báo lỗi

Hình 7 Đăng nhập thành công

Hình 8 Đăng nhập lỗi Đăng ký:

Hình 9 Form Đăng ký

Để tạo tài khoản mới, tại trang Đăng nhập, người dùng chọn Đăng ký, sau đó nhập vào các thông tin để tiến hành đăng ký, thông tin nhập vào bao gồm Họ, Tên,

… Sau khi tiến hành nhập vào, người dùng chọn Đăng ký, các trường không được

bỏ trống, mật khẩu phải có độ dài trên 6 kí tự, xác nhận lại mật khẩu phải giống với mật khẩu đã tạo

Nếu thông tin nhập vào hợp lệ, hệ thống sẽ điều hướng đến trang chủ với thông tin người dùng đã đăng ký Nếu thông tin nhập vào không chính xác, hệ thống sẽ báo lỗi

Hình 10 Đăng ký thành công

Hình 12 Kết quả trả về khi nhập vào từ khoá hợp lệ

Hình 13 Kết quả trả về khi nhập vào từ khoá không hợp lệ

Thêm công thức:

Hình 14 Form Đăng công thức

Để thêm công thức, người dùng phải đăng nhập bằng tài khoản mà mình đã

nhập vào các thông tin, trường Tags có thể bỏ trống, chọn upload file ảnh, … rồi chọn Đăng Hệ thống sẽ báo thành công nếu mọi thông tin nhập vào hợp lệ và sẽ báo lỗi khi các trường chưa được điền đầy đủ

Hình 15 Thêm công thức mới thành công

Hình 16 Không nhập đầy đủ thông tin

4.3 Triển khai

Mã nguồn của dự án được up lên respository trên Github và thực hiện Deploy bằng Vercel Mọi dữ liệu lưu trữ đối tượng của dự án được lưu trữ trên Firestore của Firebase