Đồ án tìm hiểu cách tối ưu hóa dữ liệu cho website và xây dựng website bán hàng chuẩn seo

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM NGUYỄN PHƯỚC BÌNH – 20520143 TRẦN THANH TRÍ – 20520328 BÁO CÁO ĐỒ ÁN TÌM HIỂU CÁCH TỐI ƯU HÓA DỮ LIỆU CHO WEBSITE VÀ XÂY DỰNG WEBSITE BÁN HÀNG CHUẨN SEO GIẢNG VIÊN HƯỚNG DẪN THS HUỲNH HỒ THỊ MỘNG TRINH TP HỒ CHÍ MINH, 2023 LỜI MỞ ĐẦU Ngày nay, nhờ có kĩ thuật số sống người cải thiện nhiều, nhanh chóng thuận tiện Thương mại điện tử có xu hướng phát triển mạnh qua ngày Chúng ta đặt hàng u thích nhà vòng vài phút ứng dụng mua hàng điện thoại thông qua website bán hàng online Từ thấy giúp tiết kiệm khối lượng lớn thời gian để tập trung vào cơng việc khác Từ thấy lợi ích mà website thương mại điện tử mang lại tạo thành mạnh để phát triển kinh tế đất nước Ở đồ án này, chúng em nghiên cứu cách tối ưu hóa liệu cho website xây dựng website bán hàng hướng tới mặt hàng thiết bị điện tử chuẩn SEO Đồ án giữ lại chức quan trọng website bán hàng online, nhiên tập trung cải thiện mặt công nghệ sử dụng khối lượng liệu đầu vào, nghiên cứu cách tối ưu xử lí liệu kết hợp tuân thủ tiêu chuẩn SEO trang web Nhóm xin gửi lời cảm ơn chân thành đến cô Huỳnh Hồ Thị Mộng Trinh hỗ trợ nhiều ý tưởng kĩ thuật trình phát triển đồ án Chúng em xin chân thành cảm ơn! Nhóm thực đồ án MỤC LỤC Chương MỞ ĐẦU 1.1 Lý chọn đề tài 1.2 Mục đích chọn đề tài 1.3 Đối tượng phạm vi nghiên cứu 1.3.1 Đối tượng nghiên cứu 1.3.2 Phạm vi nghiên cứu Chương TỔNG QUAN 2.1 Một số vấn đề tồn 2.2 Vấn đề nghiên cứu Chương NGHIÊN CỨU 3.1 Các công nghệ sử dụng 3.1.1 Node.js – Express Framework 3.1.2 ReactJS Library 3.1.3 Redis 3.2 Kỹ thuật lấy nguồn liệu 3.3 Hosting website 3.4 Một số kĩ thuật tối ưu việc xử lí liệu 3.5 Tiêu chí đánh giá cho website đạt chuẩn SEO Chương CÁCH THỰC HIỆN 4.1 Phân tích cơng nghệ cách ứng dụng vào đồ án 4.2 Cơ sở liệu 4.2.1 Mô hình liệu quan hệ cho sở liệu 10 4.2.2 Danh sách chi tiết quan hệ liệu 10 4.2.3 Mô tả quan hệ 11 4.2.3.1 SANPHAM 11 4.2.3.2 LOAISANPHAM 11 4.2.3.3 THUONGHIEU 12 4.2.3.4 THONGSO 12 4.2.3.5 SP_TS 12 4.3 Kiến trúc hệ thống 13 4.3.1 Kiến trúc tổng quan 13 4.3.2 Mô tả kiến trúc 14 4.4 Kiến trúc mã nguồn 16 4.4.1 Link source code đồ án nhóm 16 4.4.2 Cấu trúc mã nguồn phía client-side 16 4.4.3 Cấu trúc mã nguốn phía server-side 16 4.4.3.1 Các thành phần trường yêu cầu 16 4.4.3.2 Cấu trúc module project 16 4.5 Cách thu thập liệu (crawl) từ website 17 4.5.1 Cấu trúc module product crawl 17 4.5.2 Phân tích tốn 17 4.6 Kiểm thử REStfull Web Server tạo 17 4.6.1 Lấy thông tin tất sản phẩm 17 4.6.2 Lấy thông tin sản phẩm theo loại sản phẩm 18 4.6.3 Lấy thông tin sản phẩm theo lọc 19 4.7 Website bán hàng chuẩn SEO 20 4.7.1 Danh sách giao diện hình 20 4.7.1.1 Màn hình trang chủ 21 4.7.1.2 Màn hình loại sản phẩm 23 4.7.1.3 Màn hình chi tiết sản phẩm 25 4.7.2 Các bước đưa website lên tìm kiếm Google 26 4.7.2.1 Các tảng công cụ để triển khai quản lý web google 26 4.7.2.2 Các bước đưa trang web lên tìm kiếm Google 26 4.7.3 Đánh giá hiệu suất trang web PageSpeed Insights 26 4.7.3.1 Đánh giá hiệu suất trang chủ 27 4.7.3.2 Đánh giá hiệu suất trang loại sản phẩm 29 4.7.3.3 Đánh giá hiệu suất trang chi tiết sản phẩm 31 4.7.4 Hiển thị website tìm kiếm Google 32 Chương KẾT LUẬN 33 5.1 Các kết đạt 33 5.2 Nhược điểm hạn chế 33 Chương HƯỚNG PHÁT TRIỂN 33 6.1 Hướng phát triển mặt tính 33 6.2 Hướng phát mặt kỉ thuật 34 Chương TÀI LIỆU THAM KHẢO 34 DANH MỤC HÌNH Hình Mơ hình liệu quan hệ cho sở liệu 10 Hình Kiến trúc luồng xử lí client-side server-side 14 Hình Kiến trúc xử lí client server 15 Hình Minh chứng request tất sản phẩm lần đầu 17 Hình Minh chứng request tất sản phẩm 18 Hình Minh chứng request tất sản phẩm loại smartphone lần đầu 19 Hình Minh chứng request tất sản phẩm loại smartphone 19 Hình Minh chứng request tất sản phẩm loại smartphone theo thông số 20 Hình Màn hình trang chủ (phần 1) 21 Hình 10 Màn hình trang chủ (phần 2) 22 Hình 11 Màn hình loại sản phẩm (phần 1) 23 Hình 12 Màn hình loại sản phẩm (phần 2) 24 Hình 13 Màn hình chi tiết sản phẩm 25 Hình 14 Minh chứng đánh giá hiệu suất trang chủ 27 Hình 15 Minh chứng đánh giá chuẩn SEO trang chủ 28 Hình 16 Minh chứng đánh giá hiệu suất trang loại sản phẩm 29 Hình 17 Minh chứng đánh giá chuẩn SEO trang loại sản phẩm 30 Hình 18 Minh chứng đánh giá hiệu suất trang chi tiết sản phẩm 31 Hình 19 Minh chứng đánh giá chuẩn SEO trang chi tiết sản phẩm 32 Hình 20 Minh chứng hiển thị website tìm kiếm Google 33 DANH MỤC BẢNG Bảng Danh sách chi tiết quan hệ 10 Bảng Mô tả quan hệ SANPHAM 11 Bảng Mô tả quan hệ LOAISANPHAM 11 Bảng Mô tả quan hệ THUONGHIEU 12 Bảng Mô tả quan hệ SANPHAM 12 Bảng Mô tả quan hệ SP_TS 13 Bảng Mô tả quan hệ PHIENBANSANPHAM 13 TÓM TẮT ĐỒ ÁN − Đồ án tập trung nghiên cứu hai vấn đề chính: cách thiết kế mơ hình ứng dụng web (ở cấp độ bản) chuẩn SEO xử lí liệu với khối lượng data lớn từ nguồn liệu thực tế − Nhóm tiếp cận thông qua việc sử dụng phân tích từ sản phẩm thực tế trang web thương mại điện tử lớn thegioididong CellphoneS, đồng thời tìm hiểu thêm số yêu cầu kĩ thuật cần có trang web bán hàng online xu hướng phát triển web đại, cộng thêm kiến thức cung cấp từ thầy cô khoa Công nghệ phần mềm để lên kế hoạch thực triển khai thực đề tài − Sau tháng nghiên cứu, phân tích, tìm hiểu bảo trì, sản phẩm nhóm có tiến đáng kể mặt xử lí khối lượng liệu lớn có khả scale với lượng data lớn từ – 10 lần đảm bảo hiệu trang web hiển thị tìm kiếm google xem thành cơng việc xây dựng đồ án nhóm − Trong trình tìm hiểu phát triển đồ án dĩ nhiên khơng thể tránh khỏi thiếu sót, nhóm mong nhận đánh giá góp ý từ thầy để có thêm kinh nghiệm việc phát triển phần mềm cần ứng dụng kiến thức kĩ thuật tương lai Chương MỞ ĐẦU 1.1 Lý chọn đề tài − Website phục vụ cho việc mua sắm trực tuyến khơng cịn q xa lạ thời đại cơng nghệ ngày Tuy nhiên việc xây dựng trang web thương mại điện tử đòi hỏi nhiều chi phí thực hiện: sử dụng template phục vụ tạo sẵn bị hạn chế nhiều tính năng, chức năng, hiệu suất trang web chi phí trì; mặt khác, cần xây dựng trang web theo ý muốn lại đòi hỏi nhiều kĩ thuật chi phí phát triển, áp dụng nhiều công nghệ cho việc phát triển website bán hàng thương mại điện tử − Tối ưu hóa liệu cho website yếu tố quan trọng để cải thiện hiệu suất tốc độ tải trang website Dữ liệu tối ưu hóa giúp giảm băng thơng mạng cần thiết cải thiện trải nghiệm người dùng, đồng thời tăng khả tìm kiếm xếp hạng website cơng cụ tìm kiếm − Xây dựng website bán hàng chuẩn SEO giúp tăng khả tiếp cận với khách hàng tiềm thông qua việc nâng cao thứ hạng trang web công cụ tìm kiếm Google Điều đem lại lợi ích lớn cho doanh nghiệp cách thu hút lưu lượng truy cập tự nhiên tăng doanh số bán hàng, thời đại công nghệ thông tin phát triển nhanh chóng, cạnh tranh website bán hàng ngày khốc liệt Hiểu áp dụng phương pháp tối ưu hóa liệu tiêu chuẩn SEO giúp website bật đạt tin tưởng từ người dùng − Các toán việc xây dựng trang web bán hàng online ln đầy tính thử thách hấp dẫn với lập trình viên, đặc biệt mặt kĩ thuật lập trình, song song thực tốt, sản phẩm trở thành khung mẫu (template) tùy biến theo đối tượng khách hàng − Trong đồ án môn học này, kết hợp kiến thức học quy trinh, tìm hiểu nghiệp vụ, công nghệ phát triển phần mềm đặc biệt kĩ thuật xây dựng website, nhóm định tìm hiểu cách tối ưu hóa liệu cho website xây dựng website bán hàng chuẩn SEO 1.2 Mục đích chọn đề tài − Bằng việc tối ưu hóa liệu, trang web có tốc độ tải trang nhanh hơn, trải nghiệm người dùng tốt cải thiện vị trí cơng cụ tìm kiếm Đồng thời, xây dựng trang web chuẩn SEO giúp thu hút lượng khách hàng tiềm lớn hơn, tăng khả tiếp cận tăng doanh số bán hàng Nhờ việc nghiên cứu áp dụng kỹ thuật tiên tiến này, giúp xây dựng trang web vượt trội, bật đám đông cạnh tranh mang lại thành công kinh doanh bền vững thị trường kỹ thuật số − Về mặt chức năng, website bán hàng đòi hỏi cần thực nhiều toán nghiệp vụ cần vận dụng kiến thức phân tích xây dựng phần mềm, đồng thời cịn u cầu phát triển tính tối ưu hóa trang web, xử lí liệu, hết đảm bảo chuẩn SEO cho trang web − Từ đó, q trình thực đồ án, nhóm thực xây dựng website bán hàng với tiêu chuẩn SEO kết hợp với nghiên cứu việc tối ưu hóa liệu cho website có đủ khả ứng dụng thực tiễn lẫn nghiên cứu áp dụng công nghệ xu phát triển web đại 1.3 Đối tượng phạm vi nghiên cứu 1.3.1 Đối tượng nghiên cứu − Một số kĩ thuật xử lí liệu website nhằm tối ưu hiệu suất trang web việc xử lí yêu cầu người dùng − Xây dựng website tuân thủ tiêu chí để đánh giá website chuẩn SEO 1.3.2 Phạm vi nghiên cứu − Vì đồ án tập trung vào việc tối ưu hóa liệu xây dựng website tuân thủ tiêu chuẩn SEO nên phần lớn nội dung trình bày thiên nhiều hướng kĩ thuật kiến trúc − Phần giao diện website xây dựng dựa thư viện Javascript Facebook phát hành ReactJS – framework phát triển giao diện web (front-end) phổ biến − Request lấy thông số ‘Dung lượng RAM’ với giá trị ‘4 GB’ tốc độ request 41ms Hình Minh chứng request tất sản phẩm loại smartphone theo thông số 4.7 Website bán hàng chuẩn SEO 4.7.1 Danh sách giao diện hình 20 4.7.1.1 Màn hình trang chủ Hình Màn hình trang chủ (phần 1) 21 Hình 10 Màn hình trang chủ (phần 2) 22 4.7.1.2 Màn hình loại sản phẩm Hình 11 Màn hình loại sản phẩm (phần 1) 23 Hình 12 Màn hình loại sản phẩm (phần 2) 24 4.7.1.3 Màn hình chi tiết sản phẩm Hình 13 Màn hình chi tiết sản phẩm 25 4.7.2 Các bước đưa website lên tìm kiếm Google 4.7.2.1 Các tảng công cụ để triển khai quản lý web google − Netlify: Netlify dịch vụ dựa đám mây (cloud) để phát triển triển khai trang web ứng dụng web Nó cung cấp tảng tích hợp để quản lý mã nguồn, xây dựng (build), phân phối (deploy) trang web tĩnh động Netlify sử dụng để lưu trữ mã nguồn trang web, hỗ trợ quản lý phiên (version control) thông qua Git tích hợp với cơng cụ phát triển phổ biến GitHub, GitLab Bitbucket Khi có thay đổi mã nguồn, Netlify tự động kích hoạt trình xây dựng triển khai lại trang web cách tự động − App Services (Azure): App Services dịch vụ quan trọng Microsoft Azure, cung cấp môi trường đám mây để phát triển, triển khai quản lý ứng dụng web, mobile API Nó cung cấp tảng quản lý đơn giản linh hoạt để triển khai ứng dụng mà không cần quan tâm đến việc quản lý sở hạ tầng − Google Search Console Tools: cơng cụ miễn phí cung cấp Google để giúp chủ sở hữu trang web theo dõi quản lý hiệu suất trang web họ kết tìm kiếm Google Cơng cụ cung cấp thông tin báo cáo liên quan đến hiển thị trang web kết tìm kiếm, tốc độ tải trang, liên kết đến trang web, phân tích từ khóa nhiều yếu tố khác 4.7.2.2 Các bước đưa trang web lên tìm kiếm Google − Bước 1: Triển khai front-end thông qua Netlify: − Bước 2: Triển khai back-end thông qua App Service cung cấp Azure − Bước 3: Khai báo website cho Google Search Console Tools 4.7.3 Đánh giá hiệu suất trang web PageSpeed Insights 26 − PageSpeed Insights cơng cụ Google cung cấp miễn phí để đánh giá tốc độ hiệu suất trang web máy tính thiết bị di động Cơng cụ đánh giá yếu tố ảnh hưởng đến tốc độ tải trang hiệu suất trang web cung cấp đề xuất để cải thiện trang web bạn − Các yếu tố trang web làm giảm số hiệu suất: • Thời gian phản hồi bên máy chủ Netlify chậm • Kích thước DOM q lớn 4.7.3.1 Đánh giá hiệu suất trang chủ Hình 14 Minh chứng đánh giá hiệu suất trang chủ 27 Hình 15 Minh chứng đánh giá chuẩn SEO trang chủ 28 4.7.3.2 Đánh giá hiệu suất trang loại sản phẩm Hình 16 Minh chứng đánh giá hiệu suất trang loại sản phẩm 29 Hình 17 Minh chứng đánh giá chuẩn SEO trang loại sản phẩm 30 4.7.3.3 Đánh giá hiệu suất trang chi tiết sản phẩm Hình 18 Minh chứng đánh giá hiệu suất trang chi tiết sản phẩm 31 Hình 19 Minh chứng đánh giá chuẩn SEO trang chi tiết sản phẩm 4.7.4 Hiển thị website tìm kiếm Google 32 Hình 20 Minh chứng hiển thị website tìm kiếm Google Chương KẾT LUẬN 5.1 Các kết đạt − Kĩ thuật lập trình, khả tìm hiểu áp dụng cơng nghệ nhóm trau dồi rút nhiều kinh nghiệm quý giá, phần nắm xu phát triển web − Xây dựng website bán thiết bị điện tử thực deploy sản phẩm lên Netlify Azure thành công − Thu thập nhiều liệu 1000 sản phẩm đảm bảo performance website 5.2 Nhược điểm hạn chế − Một số chức website chưa thực hoàn thiện − Một vài tiêu chí cho web chuẩn SEO chưa đạt − Giao diện dành riêng cho hình rộng theo cỡ laptop trở lên, chưa có giao diện tương thích với thiết bị cầm tay Chương HƯỚNG PHÁT TRIỂN 6.1 Hướng phát triển mặt tính − Hỗ trợ tốn trực tuyến − Chức trị chuyện với người quản lí (người bán hàng) (thơng qua messenger) − Chức phóng to ảnh trỏ chuột vào hình ảnh sản phẩm 33 − Chức xác thực người dùng, khôi phục mật khẩu, thơng tin đơn hàng, chương trình khuyến đến người dùng qua mail − Hệ thống thông báo đến người dùng 6.2 Hướng phát mặt kỉ thuật − Tối ưu hoá performance frontend cách giảm thiểu số lượng code CSS không cần thiết − Cải thiện cấu trúc sở liệu kỉ thuật tối ưu hiệu suất cho website − Cải thiện kỉ thuật để đạt nhiều tiêu chí cho web chuẩn SEO Chương TÀI LIỆU THAM KHẢO [1] Trang chủ React Địa chỉ: https://react.dev/ [2] Trang chủ Redis Địa chỉ: https://redis.io/ [3] Trang web hướng dẫn cách tạo website chuẩn SEO Địa chỉ: https://ahrefs.com/blog/seo-friendly-website/ [4] Trang chủ Thegioididong Địa chỉ: https://www.thegioididong.com/ [5] Trang chủ CellphoneS Địa chỉ: https://cellphones.com.vn/ 34