I.

Tổng Quan
1. Khảo sát thực trạng
Mặc dù đời sống của con người trong xã hội hiện đại được nâng cao, nhưng các vấn
đề về sức khỏe lại không ngừng phát sinh phức tạp. Chính vì vậy ngoài các nhu cầu thiết
yếu khác, mọi người đã quan tâm nhiều hơn tới việc duy trì một lối sống lành mạnh, đặc
biệt là chế độ dinh dưỡng hợp lý.
Thống kê cho thấy khoảng 82% người dùng hiện đã có ý thức hơn trong việc lựa
chọn thực phẩm hữu cơ hoặc thực phẩm tự làm. Tuy nhiên, số người mắc bệnh béo phì,
thừa cân vẫn không ngừng tăng lên theo thời gian. Tự nấu ăn không phải là một phương
án hữu hiệu mà cần lên thực đơn dinh dưỡng phù hợp và cân đối giữa các loại thực phẩm.
Hàng loạt nhà đầu tư từ tổ chức đến cá nhân bắt đầu xây dựng mô hình kinh doanh đồ ăn
vặt giảm cân để khởi nghiệp.
Trong thời kỳ công nghệ 4.0 như hiện nay, các doanh nghiệp và ngành hàng ở khắp
mọi nơi đều bắt đầu quá trình chuyển đổi số, chuyển mình dần sang nền tảng online.
Không ngoại lệ, F&B (ngành hàng đồ ăn và thức uống) cũng chuyển mình vào dòng chảy
đó. Đặc biệt nơi đón đầu các xu thế về làm đẹp và sức khỏe chính là internet và mạng xã
hội, điều này lại càng khiến các doanh nghiệp kinh doanh thực phẩm dinh dưỡng quan
tâm đến việc xây dựng các kênh bán hàng online hơn bao giờ hết.
Theo kết quả bản “Khảo sát thị trường về nhu cầu tiêu dùng ngành ẩm thực Việt
Nam” do Kantar thực hiện năm 2020, có đến 43% người dân TpHCM và 34% người dân
Hà Nội đặt đồ ăn trực tuyến ít nhất một lần mỗi tuần. Chính bởi xu thế mạnh mẽ đó, hiện
nay không ít doanh nghiệp cho ra đời các mô hình kinh doanh đồ ăn trực tuyến và đạt
được nhiều thành công.

2. Lý do chọn đề tài
Với thị trường đầy tiềm năng cùng sự quan tâm đặc biệt đến xu hướng ăn uống lành
mạnh, chúng tôi đã xây dựng ECOHEAL, một dự án xây dựng mô hình chuyên cung cấp
những món ăn vặt healthy, chuẩn eat clean, đáp ứng xu hướng hiện nay. Với câu slogan
"Healthy food for healthy life", ECOHEAL mong muốn trở thành công ty chuyên kinh
doanh thực phẩm tươi, sạch, lành mạnh hàng đầu và uy tín tại thị trường.
Hiện nay, người dùng chủ yếu sử dụng các ứng dụng giao đồ ăn, các sàn thương mại
điện tử như: Shoppe, Lazada... Tuy nhiên để tạo nên một thương hiệu uy tín hay mở rộng
quy mô thì bất kì doanh nghiệp nào cũng nên có cho riêng mình một website. Chúng tôi
tin rằng, việc xây dựng website ECOHEAL là điều cần thiết và quan trọng trong vấn đề
tăng trưởng doanh thu, tạo dựng thương hiệu và nâng cao chất lượng phục vụ khách
hàng. Đó cũng chính là lý do của đề tài “Xây dựng website bán thực phẩm lành mạnh –
ECOHEAL”

3. Giới thiệu doanh nghiệp

ECOHEAL là công ty chuyên cung cấp những món ăn vặt healthy, chuẩn eat clean,
đáp ứng xu hướng hiện nay. Với câu slogan "Healthy food for healthy life", ECOHEAL
mong muốn trở thành công ty chuyên kinh doanh thực phẩm tươi, sạch, lành mạnh hàng
đầu và uy tín tại thị trường.
Chúng tôi đã không ngừng cho ra đời các sản phẩm không chỉ dừng lại là những bữa
ăn, mà hướng đến sự đa dạng cho các bữa ăn, tiết kiệm thời gian và bổ sung đầy đủ chất
cho một sức khỏe toàn diện. ECOHEAL khẳng định được vị thế của mình trên thị trường,
đặc biệt một số dòng sản phẩm từ thương hiệu ECOHEAL còn trở thành xu hướng yêu
thích và sự lựa chọn hàng đầu cho các khách hàng theo lối sống xanh ở các dòng sản
phẩm như yến mạch, granola, bánh biscotti,…
Với sứ mệnh thiêng liêng, chúng tôi cam kết mang đến cho cộng đồng nguồn dinh
dưỡng và chất lượng cao cấp hàng đầu bằng chính sự trân trọng, tình yêu và trách nhiệm
cao của mình với cuộc sống con người và xã hội. ECOHEAL luôn cố gắng nghiên cứu để
mang đến những sản phẩm dinh dưỡng và có hương vị tuyệt vời để đồng hành cùng sức
khỏe của khách hàng.

4. Yêu cầu website

4.1. Thể hiện giá trị mà ECOHEAL mong muốn mang lại cho khách hàng.
- Dễ dàng sử dụng
- Tốc độ tải nhanh chóng
- Sản phẩm chất lượng
- Thân thiện với khách hàng
- Cung cấp nhiều thông tin hữu ích
- Thuận tiện trong việc theo dõi sản phẩm và đặt hàng
4.2. Yêu cầu về các chức năng cơ bản
- Trang chủ
Thể hiện bao quát toàn bộ hệ thống và sẽ chủ yếu là hình ảnh, thông tin về cửa
hàng bao gồm: các danh mục, banner, tin tức, sản phẩm nổi bật,... Giao diện này sẽ
là nơi tạo ấn tượng đầu tiên của website.
Trình bày đơn giản, thu hút, tạo thiện cảm với khách hàng từ cái nhìn đầu tiên
Sử dụng màu sắc theo phong cách của doanh nghiệp, để khách hàng có thể dễ
dàng nhận diện thương hiệu.
- Giới thiệu
Viết bài giới thiệu về cửa hàng/ hệ thống cửa hàng.
Đưa ra các chứng nhận ( nếu có ) để tăng độ uy tín trong tâm trí khách hàng
Đưa ra các thông tin liên hệ
- Profile:
Đăng nhập hoặc đăng ký
Đăng xuất
Thông tin tài khoản khách hàng: Tên, Số điện thoại, Địa chỉ, Membership
- Tìm kiếm:
Thanh tìm kiếm đặt ở vị trí nổi bật
Tìm kiếm sản phẩm, tin tức
- Menu
Hiển thị các sản phẩm theo danh mục, bao gồm các thông tin chi tiết sau:
Tên sản phẩm/ mã sản phẩm
Giá niêm yết sản phẩm
Hình ảnh chân thực, rõ nét
Nêu rõ nguồn gốc xuất xứ của sản phẩm
Mô tả sản phẩm, thông tin chi tiết về sản phẩm
- Tin tức
Viết các bài, hoạt động về doanh nghiệp, đội ngũ nhân viên nhân viên
Cập nhật các tin tức về đồ ăn tốt cho sức khỏe
Chia sẻ những kinh nghiệm chế biến đồ ăn theo cách lành mạnh
Chia sẻ các tip lựa chọn thực phẩm
Các sự kiện sắp diễn ra, các chương trình khuyến mãi
- Giỏ hàng
Nút mua hàng được hiển thị nổi bật dễ nhìn
Lưu trữ được nhiều sản phẩm
Có thể lựa chọn nhiều hình thức thanh toán, tích hợp lựa chọn giao hàng
nhanh
Có thể tra cứu đơn hàng
- Liên hệ (Footer)
 Bao gồm các thông tin liên hệ tới doanh nghiệp, form gửi thông tin qua
email, bản đồ liên hệ.
4.3. Những lưu ý khi thiết kế website đồ ăn healthy
- Giao diện của website về đồ ăn cần được chú trọng về màu sắc và giao diện. Giao
diện cần được thiết kế hài hòa với đặc tính của sản phẩm.
- Website đồ ăn về những thực phẩm lành mạnh cần thể hiện sự tươi mới của rau củ
sạch, thịt sạch.
- Không nên chọn quá nhiều màu sắc gây rối mắt. Không đưa ra quá nhiều màu sắc
mạnh gây chói mắt.
- Tên miền website nên đặt là tên thương hiệu để có thể tìm kiếm một cách dễ dàng
II. Cơ sở lý thuyết
1. Tổng quan Website
Website là một tập hợp các trang web (webpages) bao gồm văn bản, hình ảnh, video,
flash,v.v… thường chỉ nằm trong một tên miền (domain name) hoặc tên miền phụ
(subdomain) trên World Wide Web của Internet. Trang web được lưu trữ (web hosting)
trên máy chủ web (web server) có thể truy cập thông qua Internet.
Website chính là công cụ quảng cáo hiệu quả nhất với chi phí nhỏ. Khi mà muốn
quảng bá thương hiệu hay giới thiệu sản phẩm tới người dùng thì website chính là
phương án tốt nhất.
Quảng cáo không giới bạn: chỉ cần sở hữu website thì bạn có thể thoải mái quảng cáo
sản phẩm của mình mà không sợ bị gò bó về số lượng.
Chăm sóc khách hàng online: đây chính là điểm nổi bật bởi đối với các website bán
hàng thì bạn có thể dễ dàng chăm sóc, tư vấn cho khách hàng về sản phẩm, việc này
không tốn quá nhiều thời gian của bạn, khi đó bạn có thể đi ra ngoài mà vẫn có thể chốt
được đơn hàng nhanh chóng.
Giúp tìm kiếm được khách hàng tiềm năng hiệu quả.
2. Ngôn ngữ sử dụng
2.1. HTML
HTML là ngôn ngữ đánh dấu siêu văn bản là mã được sử dụng để cấu trúc một
trang web và nội dung của nó. Ví dụ: nội dung có thể được cấu trúc trong một tập hợp các
đoạn văn, một danh sách các dấu đầu dòng hoặc sử dụng hình ảnh và bảng dữ liệu. Như
tiêu đề đã gợi ý, bài viết này sẽ cung cấp cho bạn những hiểu biết cơ bản về HTML và
các chức năng của nó.
HTML chỉ là ngôn ngữ đánh dấu, cú pháp tương đối đơn giản được trình bày qua
các cặp thẻ (tag) và thuộc tính (attribute) chính vì vậy nó không thể khiến cho trang web
chuyển động hoặc quá thu hút với người dùng. Tại thời điểm ra mắt, HTML chỉ bao gồm
18 tags và không có thẻ để hiển thị hình ảnh. Trải qua nhiều năm nghiên cứu và phát
triển, các phiên bản mới hơn của HTML ngày càng được hoàn thiện và nâng cấp. Phiên
bản mới nhất cũng là thông dụng nhất hiện nay là HTML5 ra đời năm 2014 với hơn 140
tags, giúp người dùng xây dựng trang web bắt mắt và dễ dàng hơn. HTML5 cung cấp cho
người dùng nhiều tùy chỉnh giúp người dùng tạo ra các ứng dụng web nâng cao mà
không cần phải cải thêm bất cứ tiện ích mở rộng nào khác như Flash Player.
2.2. CSS
CSS (hay Cascading Style Sheet) được định nghĩa là ngôn ngữ tạo phong cách cho
trang web. CSS sẽ tạo phong cách và định kiểu cho các yếu tố được viết dưới dạng ngôn
ngữ đánh dấu (HTML). Nó giúp người dùng tiết kiệm thời gian và công sức viết web nhờ
khả năng điều khiển định dạng của nhiều trang web cùng lúc. Cho đến hiện tại (2021) thì
CSS đã được cập nhật lên phiên bản CSS3 với nhiều tính năng mới cho phép linh hoạt
hơn với bố cục và trình bày trang.
HTML và CSS có mối tương quan mật thiết. HTML là nền tảng của site và CSS
giúp định hình phong cách (tất cả những gì tạo nên giao diện website). Hai yếu tố này
hoàn toàn không thể tách rời. HTML đóng vai trò cung cấp cấu trúc nội dung và xác định
nội dung đó. Các nội dung này có thể kể đến như tiêu đề, đoạn văn hoặc hình ảnh. 
2.3. JavaScript
JavaScript là một ngôn ngữ lập trình website, được tích hợp và nhúng trong HTML
giúp website sống động hơn. JavaScript cho phép kiểm soát các hành vi của trang web tốt
hơn so với khi chỉ sử dụng mỗi HTML. Ứng dụng thực tiễn của JavaScript chúng ta
thường thấy là các trình chiếu ảnh, cửa sổ quảng cáo hay tính năng tự động điền của
Google.
2.4. Framework hỗ trợ trong lập trình giao diện website
2.4.1. Framework là gì?
Framework dịch ra tiếng Việt có nghĩa là bộ khung, nguyên bản với ý nghĩa là bộ
khung đỡ của một kết cấu bằng bê tông, thép, gỗ hay vật liệu khác. Trong lĩnh vực công
nghệ thông tin, framework cũng được dùng rất phổ biến mang hàm ý là một tập hợp các
thư viện phần mềm, các trình biên dịch, diễn dịch hoặc các API, nhằm cung cấp một môi
trường giúp cho việc lập trình ứng dụng trở lên nhanh chóng. Trong lập trình ứng dụng,
lập trình web có rất nhiều vấn đề mà chúng ta gặp lại nhiều lần, thậm chí ở những công ty
khác, mọi người cũng gặp phải vậy phải có cách nào đó giúp tiết kiệm thời gian, công sức
khi xử lý cùng một vấn đề, thì framework đã giúp cho mọi việc phức tạp trở lên đơn giản
và chúng ta chỉ cần tập trung vào các công việc chính để hoàn thành dự án.
2.4.2. Framework trong lập trình giao diện website
Framework được sử dụng trong lập trình giao diện cung cấp các mô-đun, gồm nhiều
đoạn mã được viết sẵn có thể tái sử dụng, lập trình giao diện người dùng được chuẩn hóa
với các khối giao diện làm sẵn, tên lớp (class), ID được tuân theo quy tắc nhất định, giúp
các nhà phát triển tạo các ứng dụng web bền vững nhanh hơn và dễ dàng hơn. 
Việc sử dụng Framework không chắc sẽ là phương án tốt nhất với mọi dự án, tuy
nhiên các lập trình viên vẫn tin tưởng sử dụng bởi vì tính tái sử dụng và hỗ trợ nhanh
trong một số tình huống, một số Framework hỗ trợ lập trình CSS phổ biến có thể kể đến
như Bootstrap (của hãng Twitter), TailwindS,.. hay các Framework Javascript như:
ReactJS (do Facebook phát triển), Angular (do Google phát triển) và Vue,...
Ngoài ra việc sử các framework nhằm đảm bảo cho DOM luôn được cập nhật
ngay khi có bất kỳ sự thay đổi trạng thái, giúp giao diện người dùng hiển thị một cách
trực quan và hiệu quả hơn. Nó giúp cho việc phát triển ứng dụng được nhanh chóng có
cấu trúc chặt chẽ và ổn định.Các framework hiện nay được thiết kế với kiến trúc gồm
nhiều module, có thể bảo trì và mở rộng bất cứ lúc nào mà không ảnh hưởng tới các
thành phần khác của ứng dụng. Framework đảm nhận việc duy trì giao diện người dùng
được cập nhật thông tin liên tục, không bị gián đoạn, thời gian tải trang nhanh hơn và tối
ưu hóa SEO tốt hơn. 
3. Giao diện người dùng và trải nghiệm người dùng (UI/UX)
3.1. Thiết kế giao diện là gì?
Thiết kế giao diện người dùng (UI) là một quy trình thiết kế và xây dựng giao diện
phần mềm hoặc giao diện một thiết bị, mà ở đó nhà thiết kế tập trung hướng tới
phong cách cũng như vẻ bề ngoài. Thiết kế giao diện người dùng còn đề cập đến
giao diện người dùng đồ họa và một số dạng liên quan khác như giao diện điều
khiển bằng giọng nói. Tất cả những công việc đó đều hướng tới việc tạo ra các
giao diện mà người dùng cảm thấy dễ sử dụng và hài lòng. 
3.2. Tư duy thiết kế
Tư duy thiết kế (Design Thinking) là quá trình tìm ra giải pháp cho một vấn đề nào
đó dựa trên tư duy hình ảnh để hữu hình hóa và cụ thể hóa giải pháp. Design
Thinking giúp chúng ta giải quyết những vấn đề trừu tượng hay khó hình dung
bằng cách nhìn nhận toàn diện các vấn đề liên quan đến con người, tiếp cận thực tế
bằng tư duy hình ảnh và các phương thức kiểm tra khác. Nó dựa vào rất nhiều
những phương pháp và quy trình mà các nhà thiết kế sử dụng, thậm chí là cả
những lĩnh vực như kiến trúc, kỹ thuật hay kinh doanh. Chính vì vậy tư duy thiết
kế có thể áp dụng cho nhiều lĩnh vực khác nhau.
3.3. Quy trình tư duy thiết kế:
Empathize - Thấu cảm người dùng
Define - Xác định vấn đề người dùng gặp phải
Ideate - Lên ý tưởng
Prototype - Thiết kế nguyên mẫu đầu tiên
Test - Thử nghiệm thiết kế
3.4. Trải nghiệm người dùng (User Experience): 
User Experience (UX) có nghĩa là trải nghiệm người dùng. Đơn giản hơn thì UX là
những đánh giá của người dùng khi sử dụng sản phẩm, như website hay app của bạn có
dễ sử dụng hay không, việc bố trí sắp xếp bố cục như vậy đã được hay chưa? Sản phẩm
đó có đạt được mục đích đề ra không (Hậu, 2019).
Trải nghiệm người dùng (UX) góp phần quan trọng để doanh nghiệp/tổ chức đạt được
mục đích. Mọi tổ chức đều nỗ lực cải thiện trải nghiệm tổng thể của sản phẩm và cung
cấp dịch vụ chất lượng để đáp ứng sự hài lòng của người dùng. Mặt khác, họ sử dụng các
chiến lược khác nhau để nâng cao trải nghiệm người dùng. Theo Gomes (2019) có 7 yếu
tố ảnh hưởng đến trải nghiệm người dùng của một dự án: Có ích, có thể sử dụng, đáng tin
cậy, có thể tìm thấy, mong muốn, có thể truy cập và có giá trị lớn.
3.5. Thiết kế lấy người dùng làm trung tâm (User-centered Design):
Là cơ cấu của các quy trình (không giới hạn trong các giao diện hoặc công nghệ),
trong đó các mục đích sử dụng, đặc tính người dùng, môi trường, nhiệm vụ và quy trình
công việc trong sản xuất, dịch vụ hoặc quá trình được bao quát chú trọng ở từng giai đoạn
của quá trình thiết kế. Thiết kế lấy người dùng làm trung tâm có thể được mô tả như là
một quá trình giải quyết vấn đề đa giai đoạn mà không chỉ đòi hỏi các nhà thiết kế phải
phân tích và hình dung cách người dùng tiêu thụ sản phẩm mà còn để xác nhận độ chính
xác của những giả định về hành vi của người dùng trong các thí nghiệm thực tế.
III. Phân tích và thiết kế
1. Mô tả website
1.1. Site Map
1.2. BPMN (tổng quát)
1.3. DFD
1.4. Use case
1.5. Sơ đồ SQL
2. Chi tiết website
1.6. Wireframe
1.7. MockUp
IV. Kết luận