Trong đề tài này, em đã tiến hành phân tích và xây dựng một trang web bán giày với mục đích phục vụ cả nhu cầu mua sắm và nắm bắt xu hướng thị trường của người tiêu dùng hiện đại.. Em đã
Trang 1ĐẠI HỌC BÁCH KHOA HÀ NỘI TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
──────── * ────────
BÁO CÁO TIẾN ĐỘ HỌC PHẦN
PROJECT 1
TÊN ĐỀ TÀI
XÂY DỰNG WEBSITE BÁN GIÀY
Giảng viên hướng dẫn: Th.S Trần Thị Dung
Sinh viên thực hiện : Đỗ Ngọc Hiếu – 20210144P
Lớp : CNTT 1.2 - K66
Trang 2Mục Lục
Lời Cảm Ơn 3
Lời Nhận Xét Của Giáo Viên 4
Tóm Tắt Đề Tài Project 1 5
Chương 1: Đặt Vấn Đề 6
Chương 2: Tìm Hiểu Về Các Công Nghệ Hiện Nay 7
Chương 3: Trang Web Bán Giầy 12
Kết Luận 14
Tài Liệu tham Khảo 14
Trang 3LỜI CẢM ƠN
Sau khoảng thời gian ngắn cụ thể là tuần đầu tiên nghiên cứu Project I, dưới sự chỉ bảo tận tình của cô Th.s Trần Thị Dung Em không chỉ lên ý tưởng để xây dựng đề tài cho Project I mà còn học hỏi được rất nhiều kiến thức mới
Để được như vậy, em vô cùng biết ơn cô đã tận tình chỉ bảo, hướng dẫn, truyền đạt những kiến thức, kinh nghiệm quý báu cho Em trong khoảng thời gian qua.Với lòng biết
ơn chân thành, em xin gửi lời chúc sức khoẻ và những gì tốt đẹp nhất đến các thầy cô trong khoa, trong nhà trường và đặc biệt là cô Th.s Trần Thị Dung
Sinh Viên Thực Hiện Hiếu
Đỗ Ngọc Hiếu
Trang 4LỜI NHẬN XÉT CỦA GIÁO VIÊN
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
………
Chữ Ký Giảng Viên
Trang 5TÓM TẮT CHỦ ĐỀ PROJECT 1
Ngày nay với sự phát triển mạnh mẽ như vũ bão của Internet, cuộc sống của con người đã càng ngày càng trở nên phong phú và đa dạng hơn Internet cũng như mạng xã hội đã làm thay đổi đáng kể nhiều lĩnh vực, từ học tập, nghiên cứu cho đến kinh doanh và thương mại, đặc biệt là trong thị trường thương mại điện tử.Trong môi trường thị trường ngày nay, việc phát triển một trang web bán hàng là một bước quan trọng đối với các doanh nghiệp muốn nắm bắt cơ hội kinh doanh trực tuyến Trong đề tài này, em đã tiến hành phân tích và xây dựng một trang web bán giày với mục đích phục vụ cả nhu cầu mua sắm
và nắm bắt xu hướng thị trường của người tiêu dùng hiện đại
Trang web của em được thiết kế để cung cấp một trải nghiệm mua sắm trực tuyến thuận tiện và thú vị Em đã tập trung vào việc tạo ra một giao diện người dùng thân thiện, dễ sử dụng và hiệu quả để khách hàng trong thực tế có thể dễ dàng tìm kiếm và mua các sản phẩm giày mình mong muốn
Thông qua việc tìm kiếm trên mạng về những đề tài nghiên cứu thị trường và phân tích
xu hướng, em đã xác định các loại giày phổ biến và sở hữu một bộ sưu tập đa dạng để đáp ứng nhu cầu của đa dạng đối tượng khách hàng trong thực tế Đồng thời, em cũng đặc biệt chú trọng vào việc cung cấp thông tin chi tiết về sản phẩm, từ hình ảnh đến mô tả
và thông số kỹ thuật, nhằm giúp khách hàng đưa ra quyết định mua hàng chính xác và thông minh
Ngoài ra, em cũng tích hợp các tính năng tiện ích như hệ thống tìm kiếm nâng cao giúp khách hàng trong thực tế có thể tìm kiếm thông tin về sản phẩm giày một cách dễ dàng, tính năng đánh giá và nhận xét từ người dùng, tính năng đặt hàng và giao hàng online, cũng như chính sách đổi trả linh hoạt, nhằm tăng cường niềm tin và sự hài lòng của khách hàng
Với sự kết hợp giữa thiết kế chuyên nghiệp, sản phẩm đa dạng và dịch vụ khách hàng tận tình, trang web bán giày của em hướng đến mục tiêu trở thành điểm đến hàng đầu cho những người yêu thích giày dép và đam mê mua sắm trực tuyến
Được cô Th.s Trần Thị Dung tận tình giúp đỡ cùng sự cố gắng của cá nhân, Project này
đã hoàn thành đúng tiến độ của mỗi tuần Do thời gian, tài liệu và năng lực bản thân còn hạn chế nên Project này không thể tránh khỏi những sai sót Vậy kính mong cô và các bạn trong nhóm trao đổi và đóng góp thêm ý kiến để em tiếp tục hoàn thiện Project này trong thời gian tới
Trang 6Chương I : Đặt Vấn Đề
Trong thời đại số hóa ngày nay, việc có mặt trực tuyến là không thể phủ nhận trong chiến lược kinh doanh của bất kỳ doanh nghiệp nào, đặc biệt là trong lĩnh vực bán hàng Trong lĩnh vực bán giày, nhu cầu mua sắm trực tuyến đang trở nên phổ biến hơn bao giờ hết, khi người tiêu dùng trở nên thuận tiện hơn trong việc tìm kiếm và mua các sản phẩm mà
họ quan tâm chỉ qua một vài cú click chuột Trong bối cảnh này, việc xây dựng một trang web bán giày không chỉ là một cơ hội mà còn là một yêu cầu cần thiết để tồn tại và phát triển trong thị trường cạnh tranh
Tuy nhiên, việc xây dựng một trang web bán giày không chỉ đơn giản là việc tạo ra một trang web đẹp mắt và chứa đựng các sản phẩm Đó là một quy trình phức tạp đòi hỏi sự kết hợp giữa kiến thức về công nghệ, hiểu biết về thị trường và sự hiểu biết về người tiêu dùng Đầu tiên và quan trọng nhất, doanh nghiệp cần xác định mục tiêu kinh doanh cụ thể của mình khi xây dựng trang web bán giày Có thể là tăng doanh số bán hàng, mở rộng thị trường tiềm năng hoặc xây dựng thương hiệu trực tuyến mạnh mẽ Mục tiêu này sẽ định hình chiến lược phát triển trang web và các hoạt động kinh doanh đi kèm
Tiếp theo, để xây dựng một trang web bán giày thành công, việc hiểu rõ về đối tượng khách hàng là vô cùng quan trọng Việc nắm bắt được sở thích, nhu cầu mua sắm và hành
vi trực tuyến của khách hàng sẽ giúp doanh nghiệp tạo ra trải nghiệm mua sắm tối ưu và tạo ra các chiến lược marketing hiệu quả Đồng thời, việc nghiên cứu thị trường cũng là bước quan trọng để hiểu rõ về cạnh tranh và xu hướng trong ngành bán giày, từ đó đưa ra những quyết định kinh doanh đúng đắn và linh hoạt
Bên cạnh việc xác định mục tiêu kinh doanh và hiểu rõ về đối tượng khách hàng, việc lựa chọn công nghệ và bố cục cho trang web cũng đóng vai trò quan trọng Công nghệ phù hợp sẽ giúp trang web hoạt động một cách mượt mà và linh hoạt, đồng thời cung cấp trải nghiệm người dùng tốt nhất có thể Bố cục của trang web cũng cần được thiết kế sao cho hấp dẫn và dễ sử dụng, giúp người dùng dễ dàng tìm kiếm và mua sắm sản phẩm
Tóm lại, việc xây dựng một trang web bán giày là một quá trình phức tạp đòi hỏi sự chuyên nghiệp và sự hiểu biết sâu sắc về thị trường và công nghệ Tuy nhiên, nếu thực hiện đúng cách, trang web này có thể trở thành công cụ mạnh mẽ giúp doanh nghiệp tăng cường doanh số bán hàng và xây dựng thương hiệu trực tuyến một cách hiệu quả
Hướng Giải Quyết:
- Tìm hiểu về những công nghệ để xây dựng một trang web hiện nay
- Chắt lọc và lựa chọn những công nghệ để áp dụng vào đề tài của Project 1
- Nêu ra những tính năng cơ bản cần có được áp dụng vào Project 1
Trang 7- Bài Báo Cáo làm trong tuần đầu tiên.
Chương II : Tìm Hiểu Về Các Công Nghệ Hiện Nay
Nghiên cứu những công nghệ để xây dựng một trang web hiện nay
I Những bố cục cũng như công nghệ để xây dựng lên một trang web hiện nay
Sau một khoảng thời gian nghiên cứu, tìm hiểu phân tích cũng như chắt lọc thông tin từ nhiều nguồn tham khảo trên mạng, em nhận ra rằng có nhiều sự lựa chọn để xây dựng bố cục cho một trang web, dưới đây là một số bố cục mà em đã tìm hiểu :
Mô hình Static Website: Trang web tĩnh không có tính năng tương tác động
Thường được xây dựng bằng HTML và CSS Thích hợp cho các trang web thông tin cơ bản như trang giới thiệu doanh nghiệp, trang web cá nhân, trang web bảng giá
Mô hình Dynamic Website: Trang web có khả năng tương tác động, dữ liệu có
thể thay đổi theo thời gian Sử dụng ngôn ngữ lập trình back-end như PHP,
Python, Ruby, hoặc Node.js để tạo ra nội dung động Thích hợp cho các trang web như blog, diễn đàn, trang tin tức
Hình 1: So sánh giữa web tĩnh và web động
Mô hình Single Page Application (SPA): Trang web hoạt động như một ứng
dụng, tất cả nội dung được tải một lần duy nhất khi trang được truy cập lần đầu tiên Sử dụng JavaScript frameworks như React.js, Vue.js hoặc Angular để quản lý giao diện người dùng và tương tác với máy chủ thông qua API Cung cấp trải nghiệm người dùng mượt mà và nhanh chóng, phù hợp cho các ứng dụng web phức tạp như các dịch vụ trực tuyến, ứng dụng đòi hỏi tương tác cao
Trang 8Hình 2: Mô Hình SPA
Mô hình MVC (Model-View-Controller): Mô hình phát triển phổ biến trong
việc xây dựng các ứng dụng web và phần mềm Mô hình này phân chia ứng dụng thành ba thành phần chính: Model, View, và Controller Mô hình MVC tách biệt các loại nhiệm vụ khác nhau của ứng dụng, giúp làm rõ vai trò và trách nhiệm của mỗi thành phần Điều này làm cho mã nguồn trở nên dễ bảo trì, mở rộng và tái sử dụng Ngoài ra, nó cũng tạo điều kiện thuận lợi cho việc phát triển song song của ứng dụng, khi nhiều nhóm có thể làm việc trên các phần khác nhau của mô hình
mà không ảnh hưởng đến nhau
Hình 3: Mô Hình MVC
Mô hình Progressive Web Application (PWA): Kết hợp giữa tính năng của
trang web và ứng dụng di động Có khả năng hoạt động offline và có thể cài đặt trên thiết bị như một ứng dụng di động thông thường Sử dụng các công nghệ như Service Workers và Web App Manifest để cung cấp trải nghiệm người dùng tốt nhất trên nhiều nền tảng
Mô hình Content Management System (CMS): Sử dụng các hệ thống quản lý
nội dung như WordPress, Joomla, Drupal để quản lý và cập nhật nội dung của trang web một cách dễ dàng và linh hoạt Phù hợp cho các trang web có nội dung phong phú như blog, trang tin tức, trang web thương mại điện tử
II Những công nghệ dùng để xây dựng một trang web hiện nay
Trang 9Có nhiều công nghệ được sử dụng để xây dựng trang web hiện nay, bao gồm cả phía front-end và back-end Dưới đây là một số công nghệ phổ biến được sử dụng trong quá trình phát triển trang web:
Ngôn ngữ lập trình Front-end:
HTML (HyperText Markup Language): Sử dụng để định nghĩa cấu trúc và nội dung của trang web
CSS (Cascading Style Sheets): Định dạng và trang trí cho các phần tử HTML, giúp trang web trở nên hấp dẫn hơn
JavaScript: Cung cấp tính năng tương tác động, xử lý sự kiện và tạo ra các hiệu ứng động trên trang web
Hình 4: Ngôn ngữ lập trình Front-end
Framework và thư viện Front-end:
React.js: Thư viện JavaScript phổ biến được sử dụng để xây dựng giao diện người dùng động và hiệu quả
Vue.js: Framework JavaScript linh hoạt và dễ học, thích hợp cho việc xây dựng các ứng dụng web đơn trang và đa trang
Angular: Framework JavaScript được phát triển bởi Google, cung cấp cơ chế mạnh mẽ cho việc xây dựng các ứng dụng web phức tạp
Trang 10Ngôn ngữ lập trình Back-end:
Node.js: Một nền tảng phát triển web dựa trên JavaScript, cho phép viết mã
server-side bằng JavaScript
Python: Ngôn ngữ lập trình phổ biến được sử dụng cho việc phát triển web bằng các framework như Django hoặc Flask
Ruby: Sử dụng cùng với framework Ruby on Rails để phát triển các ứng dụng web nhanh chóng và hiệu quả
Hình 6: Ngôn ngữ lập trình Back-end
Cơ sở dữ liệu:
MySQL, PostgreSQL: Hệ quản trị cơ sở dữ liệu phổ biến được sử dụng để lưu trữ
dữ liệu của trang web
MongoDB: Một hệ quản trị cơ sở dữ liệu NoSQL phổ biến cho các ứng dụng web
có yêu cầu lưu trữ dữ liệu phức tạp
Hình 7: Cơ sở dữ liệu
Công cụ quản lý mã nguồn:
Git: Hệ thống quản lý phiên bản mã nguồn phổ biến, được sử dụng để theo dõi và quản lý mã nguồn của dự án trang web
Trang 11Hình 8: Công cụ quản lý mã nguồn
Công cụ tối ưu hóa và kiểm tra:
Webpack, Babel: Các công cụ giúp tối ưu hóa và biên dịch mã nguồn JavaScript
để tăng hiệu suất và tương thích của trang web
Jest, Mocha, Selenium: Các công cụ kiểm tra tự động giúp đảm bảo chất lượng và tính ổn định của trang web
Hình 9: Công cụ tối ưu hoá và kiểm tra Các công nghệ này giúp xây dựng trang web với hiệu suất cao, tương tác tốt và bảo mật đảm bảo Tùy thuộc vào yêu cầu cụ thể của dự án, các công nghệ có thể được lựa chọn và kết hợp một cách linh hoạt
Trang 12Chương III: Trang Web Bán Giày
I Giới thiệu về trang web bán giày
Trang web Hiếu Giày là một nền tảng trực tuyến cung cấp một loạt các loại giày đa dạng
từ các nhà sản xuất và thương hiệu khác nhau Trang web này là điểm đến cho những người đang tìm kiếm đôi giày mới, từ các mẫu giày thể thao đến giày đi làm và giày sandal cho mùa hè Mục đích chính của trang web là cung cấp một phương tiện thuận tiện
để người tiêu dùng có thể mua sắm các sản phẩm giày từ nhà, không cần phải đến cửa hàng truyền thống Bằng cách tận dụng sức mạnh của Internet, trang web bán giày giúp tiết kiệm thời gian và công sức cho người dùng bằng cách cho phép họ duyệt qua các mục sản phẩm và thực hiện mua sắm chỉ trong vài cú click chuột Với giao diện đơn giản
và trực quan, trang web cung cấp một trải nghiệm mua sắm dễ dàng và thuận tiện cho người dùng Họ có thể sử dụng các tính năng tìm kiếm để lọc sản phẩm theo kích cỡ, màu sắc, kiểu dáng và giá cả, giúp họ dễ dàng tìm thấy đôi giày phù hợp với nhu cầu và sở
thích của mình Tóm lại, trang web Hiếu Giày không chỉ là một cửa hàng trực tuyến đơn
thuần, mà còn là một công cụ tiện lợi giúp người tiêu dùng tìm kiếm và mua sắm các sản phẩm giày một cách thuận tiện và dễ dàng từ nhà
II Những Công Nghệ Sử Dụng
Trong quá trình phát triển trang web bán giày, chúng tôi đã quyết định sử dụng công nghệ MERN (MongoDB, Express.js, React.js, Node.js) để xây dựng nền tảng của dự án Báo cáo này sẽ trình bày về mỗi công nghệ trong bộ MERN và lý do chúng tôi chọn sử dụng chúng
- Ngôn ngữ Frameworks, Cơ sở dữ liệu, Cài Đặt Môi Trường
1 My SQL:
MySQL là một hệ thống quản lý cơ sở dữ liệu quan hệ (RDBMS) phổ biến được
sử dụng để lưu trữ dữ liệu cho trang web của chúng tôi
Em chọn MySQL vì tính ổn định, hiệu suất cao và khả năng tương thích rộng rãi với các ứng dụng web
2 Express.js:
Express.js là một framework Node.js giúp xây dựng các ứng dụng web và API một cách nhanh chóng và dễ dàng
Em sử dụng Express.js để xây dựng các API cho việc tương tác với cơ sở dữ liệu MySQL và cung cấp dữ liệu cho phía client
Trang 133 React.js:
React.js là một thư viện JavaScript phổ biến được sử dụng để xây dựng giao diện người dùng cho các ứng dụng web hiện đại và tương tác
Em đã lựa chọn React.js vì khả năng tái sử dụng các thành phần, khả năng xử lý trạng thái của ứng dụng một cách hiệu quả và khả năng tạo ra giao diện người dùng tương tác đáng tin cậy
4 Node.js:
Node.js là một môi trường chạy mã JavaScript ở phía server, giúp xây dựng các ứng dụng web có khả năng mở rộng và đa luồng
Em sử dụng Node.js để xây dựng phía server của trang web, xử lý các yêu cầu từ client và tương tác với cơ sở dữ liệu MySQL thông qua Express.js
- Những công cụ hỗ trợ để xây dựng website
1 Visual Studio Code: Visual Studio Code đã trở thành môi trường phát triển chính của
chúng tôi cho việc viết mã nguồn, kiểm thử và debug Chúng tôi đã sử dụng tính năng IntelliSense để hỗ trợ việc gợi ý mã nguồn, giúp tăng tốc độ viết mã Ngoài ra, chúng tôi cũng sử dụng tính năng Debug của VS Code để gỡ lỗi mã nguồn một cách hiệu quả
2.Git và Source Control: VS Code đã tích hợp sẵn các tính năng Git và source control,
giúp chúng tôi quản lý và theo dõi thay đổi trong mã nguồn của dự án một cách thuận tiện Chúng tôi có thể thực hiện các thao tác Git như commit, push và pull mà không cần phải rời khỏi môi trường VS Code
3.Postman: là một ứng dụng máy tính được sử dụng chủ yếu để kiểm thử API
(Application Programming Interface) Nó cung cấp một giao diện đồ họa dễ sử dụng để tạo, gửi và kiểm thử các yêu cầu HTTP đến các API và xem kết quả trả về từ server
III Các Tính Năng Của Website
1 Danh mục sản phẩm: Hiển thị các danh mục sản phẩm như giày nam, giày nữ, giày
thể thao, giày cao gót, sandal, dép, vv để người dùng dễ dàng tìm kiếm
2 Tìm kiếm sản phẩm: Cho phép người dùng tìm kiếm sản phẩm dựa trên các tiêu chí
như tên sản phẩm, loại giày, màu sắc, kích cỡ, giá cả, vv
3 Xem chi tiết sản phẩm: Cung cấp thông tin chi tiết về sản phẩm bao gồm hình ảnh,
mô tả, giá cả, thông số kỹ thuật, đánh giá của người dùng, vv
4 Thêm vào giỏ hàng: Cho phép người dùng thêm sản phẩm vào giỏ hàng để tiến hành
thanh toán sau này
5.Quản lý giỏ hàng: Cho phép người dùng xem, chỉnh sửa và xóa các mặt hàng trong giỏ
hàng trước khi thanh toán
6.Thanh toán: Cung cấp giao diện thanh toán an toàn và thuận tiện cho người dùng, bao
gồm các phương thức thanh toán như thanh toán bằng thẻ tín dụng, chuyển khoản ngân hàng, ví điện tử, vv
7 Quản lý đơn hàng: Cho phép người dùng theo dõi trạng thái của đơn hàng, cập nhật
