Đồ án Kỹ thuật: tốt nghiệp xây dựng ứng dụng web tạo website bán hàng

Đồ án nghiên cứu tốt nghiệp xây dựng ứng dụng web tạo website bán hàng, áp dụng công nghệ tiên tiến, tối ưu giải pháp kỹ thuật cho bài toán kỹ thuật.

• Tác giả: Mai Đức Tuấn
• Người hướng dẫn: ThS. Nguyễn Minh Đạo
• Trường học: Trường Đại Học Sư Phạm Kỹ Thuật Thành Phố Hồ Chí Minh
• Chuyên ngành: Công Nghệ Phần Mềm
• Đề tài: Xây Dựng Ứng Dụng Web Tạo Website Bán Hàng
• Loại tài liệu: Khóa Luận Tốt Nghiệp
• Năm xuất bản: 2020
• Địa điểm: Thành Phố Hồ Chí Minh

Tóm tắt

I. Giới thiệu về Đồ án Tốt nghiệp Xây dựng Ứng dụng Web Tạo Website Bán hàng

Đồ án tốt nghiệp xây dựng ứng dụng web tạo website bán hàng là một dự án học tập toàn diện, được thực hiện bởi nhóm sinh viên ngành Công nghệ Thông tin tại Trường Đại học Sư phạm Kỹ Thuật Thành phố Hồ Chí Minh dưới sự hướng dẫn của ThS. Nguyễn Minh Đạo. Dự án này kết hợp nhiều công nghệ hiện đại như VueJS, NuxtJS, NodeJS, MongoDB và Docker để tạo ra một nền tảng ứng dụng web chuyên nghiệp. Mục tiêu chính là phát triển một công cụ cho phép người dùng tạo website bán hàng thông qua giao diện kéo thả trực quan, với khả năng xem trước và triển khai tự động lên subdomain. Ứng dụng này đáp ứng tiêu chí Responsive Web Design và cung cấp các tính năng quản lý sản phẩm cũng như đơn hàng hiệu quả.

1.1. Khái niệm về Ứng dụng Web Tạo Website

Ứng dụng web tạo website là công cụ trực tuyến cho phép người dùng không có kiến thức lập trình xây dựng website. Với giao diện kéo thả thân thiện, người dùng có thể tạo các trang bán hàng chuyên nghiệp. Công cụ này hỗ trợ tính năng xem trước trong thời gian thực và deploy tự động lên server. Đây là giải pháp tiết kiệm thời gian và chi phí cho các chủ doanh nghiệp nhỏ và vừa.

1.2. Tầm quan trọng trong Bối cảnh Thương mại Điện tử

Trong era thương mại điện tử hiện đại, có website bán hàng là yêu cầu không thể thiếu. Ứng dụng web này giúp giảm rào cản kỹ thuật, cho phép các tiểu thương dễ dàng tham gia kinh tế số. Công cụ cung cấp quản lý sản phẩm toàn diện và hỗ trợ Responsive Design, đảm bảo trải nghiệm người dùng tối ưu trên mọi thiết bị.

II. Công nghệ Chính và Stack Phát triển

Đồ án sử dụng một technology stack hiện đại và mạnh mẽ để xây dựng ứng dụng web. VueJS được lựa chọn cho phía frontend nhờ tính chất linh hoạt và dễ học, trong khi NuxtJS cung cấp server-side rendering và tối ưu hóa SEO. NodeJS đảm nhiệm backend, xử lý logic nghiệp vụ phức tạp, còn MongoDB là cơ sở dữ liệu NoSQL linh động lưu trữ dữ liệu sản phẩm và đơn hàng. Docker được sử dụng để containerize ứng dụng, đảm bảo nhất quán môi trường phát triển và production. NGINX hoạt động như reverse proxy và web server, tối ưu hiệu suất ứng dụng web.

2.1. Frontend VueJS và NuxtJS

VueJS là framework JavaScript tiến tiến, cung cấp giao diện người dùng động và phản ứng. NuxtJS mở rộng VueJS với khả năng server-side rendering, tối ưu SEO và hiệu suất. Kết hợp này cho phép xây dựng ứng dụng web nhanh, mượt mà với trải nghiệm người dùng xuất sắc trên mọi nền tảng.

2.2. Backend và Cơ sở Dữ liệu

NodeJS cung cấp môi trường JavaScript phía server, xử lý request hiệu quả. MongoDB là cơ sở dữ liệu linh động, phù hợp với cấu trúc dữ liệu không cố định của website bán hàng. Kiến trúc này đảm bảo khả năng mở rộng và bảo trì dễ dàng cho ứng dụng.

2.3. Triển khai với Docker và NGINX

Docker containerize toàn bộ ứng dụng, đảm bảo deployment nhất quán. NGINX quản lý routing requests và cải thiện hiệu suất. Cách tiếp cận này cho phép tự động deploy website lên subdomain, đơn giản hóa quy trình triển khai cho người dùng cuối.

III. Chức năng Chính của Ứng dụng Web

Ứng dụng web được phát triển với ba chức năng chính: giao diện editor kéo thả, công cụ quản lý backend và tính năng triển khai tự động. Editor cho phép người dùng xây dựng website bán hàng mà không cần code, với các thành phần giao diện sẵn có. Quản lý sản phẩm và đơn hàng được thực hiện thông qua dashboard intuitif. Website được tạo ra đáp ứng tiêu chí Responsive Web Design, hiển thị hoàn hảo trên điện thoại, tablet và máy tính. Tính năng xem trước cho phép người dùng kiểm tra kết quả trước khi publish. Cuối cùng, deploy tự động lên subdomain tiết kiệm thời gian cấu hình phức tạp.

3.1. Editor Kéo thả và Xem trước

Giao diện editor với chức năng kéo thả cho phép người dùng tạo layout website một cách trực quan. Tính năng xem trước thời gian thực giúp người dùng kiểm tra thiết kế ngay khi thay đổi. Responsive Design được áp dụng tự động, đảm bảo website hoạt động tốt trên mọi kích thước màn hình.

3.2. Quản lý Sản phẩm và Đơn hàng

Dashboard quản lý cung cấp giao diện toàn diện cho quản lý sản phẩm, từ thêm, sửa, xóa đến quản lý hình ảnh. Quản lý đơn hàng cho phép theo dõi trạng thái, cập nhật thông tin giao hàng. Công cụ này giúp chủ doanh nghiệp hoạt động kinh doanh hiệu quả hơn.

3.3. Triển khai Tự động lên Subdomain

Tính năng deploy tự động publish website lên subdomain được cấp phát sẵn. Quy trình này được tự động hóa với Docker và NGINX, giảm độ phức tạp. Người dùng có thể có website chạy trực tuyến chỉ trong vài click.

IV. Ý nghĩa Học tập và Ứng dụng Thực tiễn

Đồ án tốt nghiệp này đại diện cho sự tích hợp các kỹ năng lập trình hiện đại mà sinh viên Công nghệ Thông tin phải nắm vững. Quá trình thực hiện giúp sinh viên hiểu sâu về full-stack development, từ frontend lớp giao diện đến backend xử lý logic, cơ sở dữ liệu và triển khai. Ứng dụng web này có giá trị thực tiễn cao cho các nhóm kinh doanh nhỏ và vừa muốn xây dựng sự hiện diện trực tuyến mà không cần thuê developer. Dự án chứng tỏ khả năng áp dụng kiến thức lý thuyết vào thực tiễn, xây dựng sản phẩm có giá trị. Ngoài ra, nó mở ra nhiều hướng phát triển trong tương lai như tích hợp payment gateway, tối ưu SEO nâng cao, hoặc mở rộng các template website.

4.1. Kỹ năng Phát triển Full Stack

Đồ án yêu cầu sinh viên nắm vững full-stack development bao gồm frontend, backend, cơ sở dữ liệu và DevOps. Học tập thực hành các công nghệ như VueJS, NodeJS, MongoDB giúp sinh viên sẵn sàng cho việc làm chuyên nghiệp. Kinh nghiệm này là nền tảng vững chắc cho sự nghiệp kỹ sư phần mềm.

4.2. Giá trị Thương mại Điện tử

Ứng dụng web giải quyết nhu cầu thực của thị trường thương mại điện tử Việt Nam. Nhiều doanh nghiệp nhỏ muốn có website nhưng thiếu nguồn lực lập trình. Công cụ này giúp họ dễ dàng tạo website bán hàng chuyên nghiệp, thúc đẩy kinh tế số.

4.3. Hướng Phát triển Tương lai

Dự án có tiềm năng mở rộng với nhiều tính năng như payment gateway integration, advanced SEO optimization, email marketing tools, hoặc multi-language support. Những nâng cấp này sẽ làm cho ứng dụng web trở thành công cụ toàn diện cho thương mại điện tử hiện đại.

Trích đoạn nội dung tài liệu

PHẦN MỞ ĐẦU 1. TÍNH CẤP THIẾT CỦA ĐỀ TÀI Tốc độ phát triển của xã hội ngày càng nhanh. Công nghệ ngày càng phát triển. Và đây cũng là điều kiện thuận lợi để thương mại điện tử ngày càng phát triển hơn.

Đối với những nhà kinh doanh, doanh nghiệp, từ khi thương mại điện tử xuất hiện thì chi phí sản xuất, chi phí tìm kiếm khách hàng, chi phí bán hàng, chi phí tiếp thị được giảm mạnh. Quy mô khách hàng mở rộng hơn. Dễ dàng tìm kiếm khách hàng và đối tác. Quá trình kinh doanh diễn ra nhanh hơn.

Theo đó, năng suất bán hàng, lợi nhuận cũng tăng nhiều hơn. Đối với khách hàng, các kênh thương mại điện tử luôn mở 24/7 nên việc tìm hiểu và mua sản phẩm có thể diễn ra bất cứ lúc nào. Tiết kiệm được thời gian, chi phí đi lại. Ngoài ra, khách hàng có thể lựa chọn, so sánh trong nhiều loại sản phẩm để chọn sản phẩm tốt nhất cho mình.

Tuy nhiên, để tạo được một kênh thương mại điện tử cần phải có nhiều hiểu biết về công nghệ, tốn nhiều thời gian và công sức. Nắm bắt được xu hướng và tiếp cận vấn đề đó, nhóm quyết định chọn đề tài “Xây dựng ứng dụng tạo website bán hàng” làm đề tài nghiên cứu và đồng thời ứng dụng thực tế. MỤC TIÊU CỦA ĐỀ TÀI Đề tài ra đời với mục đích giúp sinh viên tổng hợp lại các kiến thức đã tiếp thu được trong quá trình, đồng thời có cái nhìn tổng quan về ngành lập trình web. Là cơ hội để sinh viên tìm hiểu các công nghệ mới nhất và ứng dụng chúng vào thưc tiễn.

Xây dựng được ứng tạo website bán hàng một cách đơn giản nhanh chóng giúp người dùng chỉ trong vài phút thiết kế đã có được một website bán hàng, cho phép người dùng xem trước và deploy website tự động, các website được tạo đáp ứng được tiêu chí “Responsive Web Design” có các chức năng cơ bản của một website bán hàng, đồng thời có một công cụ quản lý giúp người dùng dễ dàng quản lý các sản phẩm và các đơn hàng. 6 Khóa luận tốt nghiệp kỹ sư CNTT GVHD: ThS. Nguyễn Minh Đạo 1. CÁCH TIẾP CẬN VÀ PHƯƠNG PHÁP NGHIÊN CỨU 1.

Đối tượng nghiên cứu - Nghiên cứu và sử dụng ngôn ngữ JavaScript, framework VueJS, nền tảng NodeJS, docker, NGINX để xây dựng ứng dụng. - Sử dụng hệ quản trị cơ sở dữ liệu MongoDB để xây dựng database lưu trữ dữ liệu. - Nghiên cứu nhu cầu sử dụng, tạo website bán hàng của người dùng. Phạm vi nghiên cứu - Nghiên cứu sử dụng VueJS, NodeJS, docker, NGINX để tạo ra ứng dụng web tạo website bán hàng bằng cách kéo thả, tạo ra website có các tính năng cơ bản của một website bán hàng, cho phép deoploy tự động lên subdomain.

Phương pháp nghiên cứu - Phương pháp tổng hợp lý thuyết: nghiên cứu và tìm hiểu các tài liệu, ứng dụng liên quan đến công nghệ đang tìm hiểu. - Phương pháp chuyên gia: tham khảo ý kiến của thầy hướng dẫn cùng các anh chị, bạn bè có kinh nghiệm liên quan đến các vấn đề của tiểu luận tạo độ chính xác và khoa học cho đề tài. - Phương pháp mô hình hóa: mô phỏng ứng dụng các bước từ thiết kế cài đặt cho đến kết quả thành phẩm của ứng dụng. KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC - Tạo công cụ hỗ trợ kéo thả giao diện, tùy biến các thành phần website (màu sắc, style, theme, font chữ, bố cục) - Cho phép preview và deploy website tự động trên subdomain - Các website được tạo đáp ứng được tiêu chí “Responsive Web Design” - Tạo công cụ quản lý database cho các website được tạo ra - Website được tạo ra có các chức năng cơ bản của một website bán hàng: o Tìm kiếm, lọc sản phẩm o Tính năng giỏ hàng, đặt hàng, o Thông báo email khi trạng thái đơn hàng thay đổi o Xem lịch sử mua hàng 7 Khóa luận tốt nghiệp kỹ sư CNTT GVHD: ThS.

Nguyễn Minh Đạo PHẦN NỘI DUNG CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 1. NGÔN NGỮ LẬP TRÌNH JAVASCRIPT JavaScript là ngôn ngữ lập trình phổ biến nhất trên thế giới trong suốt 20 năm qua. Nó cũng là một trong số 3 ngôn ngữ chính của lập trình web (HTML, CSS, JS). JavaScript có rất nhiều ưu điểm khiến nó vượt trội hơn so với các đối thủ, đặc biệt trong các trường hợp thực tế.

Sau đây chỉ là một số lợi ích của JavaScript: - Không cần một compiler vì web browser có thể biên dịch nó bằng HTML - Lỗi dễ phát hiện hơn và vì vậy dễ sửa hơn - Nó có thể được gắn trên một số element của trang web hoặc event của trang web như là thông qua click chuột hoặc di chuột tới - JS hoạt động trên nhiều trình duyệt, nền tảng, … - Bạn có thể sử dụng JavaScript để kiểm tra input và giảm thiểu việc kiểm tra thủ công khi truy xuất qua database - Nó giúp website tương tác tốt hơn với khách truy cập - Nó nhanh hơn và nhẹ hơn các ngôn ngữ lập trình khác 1. HỆ QUẢN TRỊ CƠ SỞ DỮ LIỆU MONGODB 1. Giới thiệu - MongoDB là một hệ quản trị cơ sở dữ liệu mã nguồn mở, là CSDL thuộc NoSql và được hàng triệu người sử dụng. - MongoDB là một database hướng tài liệu (document), các dữ liệu được lưu trữ trong document kiểu JSON thay vì dạng bảng như CSDL quan hệ nên truy vấn sẽ rất nhanh.

- Với CSDL quan hệ chúng ta có khái niệm bảng, các cơ sở dữ liệu quan hệ (như MySQL hay SQL Server.) sử dụng các bảng để lưu dữ liệu thì với MongoDB chúng ta sẽ dùng khái niệm là thay vì bảng - So với RDBMS thì trong MongoDB collection ứng với table, còn document sẽ ứng với row , MongoDB sẽ dùng các document thay cho row trong RDBMS. 8 Khóa luận tốt nghiệp kỹ sư CNTT GVHD: ThS. Nguyễn Minh Đạo - Các collection trong MongoDB được cấu trúc rất linh hoạt, cho phép các dữ liệu lưu trữ không cần tuân theo một cấu trúc nhất định. - Thông tin liên quan được lưu trữ cùng nhau để truy cập truy vấn nhanh thông qua ngôn ngữ truy vấn MongoDB 1.

Ưu điểm - Do MongoDB sử dụng lưu trữ dữ liệu dưới dạng Document JSON nên mỗi một collection sẽ có các kích cỡ và các document khác nhau, linh hoạt trong việc lưu trữ dữ liệu, nên bạn muốn gì thì cứ insert vào thoải mái. - Dữ liệu trong MongoDB không có sự ràng buộc lẫn nhau, không có join như trong RDBMS nên khi insert, xóa hay update nó không cần phải mất thời gian kiểm tra xem có thỏa mãn các ràng buộc dữ liệu như trong RDBMS. - MongoDB rất dễ mở rộng (Horizontal Scalability). Trong MongoDB có một khái niệm cluster là cụm các node chứa dữ liệu giao tiếp với nhau, khi muốn mở rộng hệ thống ta chỉ cần thêm một node với vào cluster: - Trường dữ liệu “_id” luôn được tự động đánh index (chỉ mục) để tốc độ truy vấn thông tin đạt hiệu suất cao nhất.

- Khi có một truy vấn dữ liệu, bản ghi được cached lên bộ nhớ Ram, để phục vụ lượt truy vấn sau diễn ra nhanh hơn mà không cần phải đọc từ ổ cứng. - Hiệu năng cao: Tốc độ truy vấn (find, update, insert, delete) của MongoDB nhanh hơn hẳn so với các hệ quản trị cơ sở dữ liệu quan hệ (RDBMS). Nhược điểm - Một ưu điểm của MongoDB cũng chính là nhược điểm của nó. MongoDB không có các tính chất ràng buộc như trong RDBMS nên khi thao tác với mongoDB thì phải hết sức cẩn thận.

- Tốn bộ nhớ do dữ liệu lưu dưới dạng key-value, các collection chỉ khác về value do đó key sẽ bị lặp lại. Không hỗ trợ join nên dễ bị dữ thừa dữ liệu. - Khi insert/update/remove bản ghi, MongoDB sẽ chưa cập nhật ngay xuống ổ cứng, mà sau 60 giây MongoDB mới thực hiện ghi toàn bộ dữ liệu thay đổi từ RAM xuống ổ cứng điêù này sẽ là nhược điểm vì sẽ có nguy cơ bị mất dữ liệu khi xảy ra các tình huống như mất điện. 9 Khóa luận tốt nghiệp kỹ sư CNTT GVHD: ThS.

Nguyễn Minh Đạo 1. NỀN TẢNG NODEJS 1. Giới thiệu NodeJS là một mã nguồn được xây dựng dựa trên nền tảng Javascript V8 Engine, nó được sử dụng để xây dựng các ứng dụng web như các trang video clip, các forum và đặc biệt là trang mạng xã hội phạm vi hẹp. NodeJS là một mã nguồn mở được sử dụng rộng bởi hàng ngàn lập trình viên trên toàn thế giới.

NodeJS có thể chạy trên nhiều nền tảng hệ điều hành khác nhau từ WIndow cho tới Linux, OS X nên đó cũng là một lợi thế. NodeJS cung cấp các thư viện phong phú ở dạng Javascript Module khác nhau giúp đơn giản hóa việc lập trình và giảm thời gian ở mức thấp nhất. Đặc điểm - Không đồng bộ: Tất cả các API của NodeJS đều không đồng bộ, nó chủ yếu dựa trên nền của NodeJS Server và chờ đợi Server trả dữ liệu về. Việc di chuyển máy chủ đến các API tiếp theo sau khi gọi và cơ chế thông báo các sự kiện của Node.js giúp máy chủ để có được một phản ứng từ các cuộc gọi API trước (Realtime).

- Tốc độ rất nhanh: NodeJ được xây dựng dựa vào nền tảng V8 Javascript Engine nên việc thực thi chương trình rất nhanh. - Đơn luồng nhưng khả năng mở rộng cao: Node.js sử dụng một mô hình luồng duy nhất với sự kiện lặp. cơ chế tổ chức sự kiện giúp các máy chủ để đáp ứng một cách không ngăn chặn và làm cho máy chủ cao khả năng mở rộng như trái ngược với các máy chủ truyền thống mà tạo đề hạn chế để xử lý yêu cầu.js sử dụng một chương trình đơn luồng và các chương trình tương tự có thể cung cấp dịch vụ cho một số lượng lớn hơn nhiều so với yêu cầu máy chủ truyền thống như Apache HTTP - Không đệm: NodeJS không đệm bất kì một dữ liệu nào và các ứng dụng này chủ yếu là đầu ra dữ liệu. - Có giấy phép: NodeJS đã được cấp giấy phép bởi MIT License.

FRAMEWORK VUEJS - Vue là một framework Javascript tiên tiến trong xây dựng giao diện người dùng, không giống như các framework khác, Vue được xây dựng từ những dòng code cơ bản nhất nhằm tối ưu tốc độ. Thư viện của Vue chỉ tập trung vào lớp hiển thị, rất đơn giản để tiếp cận và dễ dàng tích hợp vào các hệ thống khác. Vue cũng có khả năng 10 Khóa luận tốt nghiệp kỹ sư CNTT GVHD: ThS. Nguyễn Minh Đạo cung cấp các ứng dụng web đơn trang Single Page Application (toàn bộ website chỉ là một trang) cho phép kết hợp với nhiều các công cụ hiện đại, như Laravel chẳng hạn.