ĐẠI HỌC ĐÀ NẴNG KHOA CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG BÁO CÁO ĐỒ ÁN CHUYÊN NGÀNH ĐỀ TÀI XÂY DỰNG HỆ THỐNG BÁN GIÀY ONLINE MỞ ĐẦU Ngày nay công nghệ thông tin đã có những bước phát triển mạnh mẽ cả[.]
ĐẠI HỌC ĐÀ NẴNG KHOA CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG BÁO CÁO ĐỒ ÁN CHUYÊN NGÀNH ĐỀ TÀI: XÂY DỰNG HỆ THỐNG BÁN GIÀY ONLINE MỞ ĐẦU Ngày cơng nghệ thơng tin có bước phát triển mạnh mẽ chiều sâu chiều rộng Máy tính điện tử khơng cịn thứ quý mà ngày trở thành công cụ làm việc giải trí người Trong năm gần đây, việc cập nhật thông tin thực giao dịch thông qua Website ứng dụng ngày trở nên phổ biến Trong đó, loại hình kinh doanh phổ biến bn bán qua mạng Hình thức kinh doanh mang lại nhiều lợi ích cho người tiêu dùng nhà cung cấp Phần lớn khách hàng có nhu cầu mua hàng phải đến siêu thị, cửa hàng hay trung tâm thương mại để lựa chọn mặt hàng phù hợp với nhu cầu Cơng việc tiêu tốn nhiều thời gian chi phí lại cho người tiêu dùng, đơi khách hàng cịn bị mua phải mặt hàng chất lượng Tất bất cập loại bỏ với đời Hệ thống bán giày trực tuyến Khi khách hàng có nhu cầu mua hàng, dù nhà, trường, cơng sở hay nơi có mạng internet, khách hàng cần vào trang bán hàng qua mạng/ứng dụng tìm kiếm mặt hàng mà muốn mua Ngồi lợi ích mà internet mang lại cho người tiêu dùng, cịn giúp cho nhà cung cấp phát triển nhiều việc mở rộng thị trường, giúp thương hiệu công ty nhiều người biết đến, từ giảm nhiều chi phí quảng cáo cho sản phẩm thuận lợi việc quản lý sản phẩm, chăm sóc khách hàng theo phương châm đặt Với mong muốn tìm hiểu học tập thơng qua tốn trên, nhóm em chọn đề tài: “XÂY DỰNG HỆ THỐNG BÁN GIÀY ONLINE” đề tài cho đồ án chun ngành Trong q trình làm đồ án, nhóm em có nhận hướng dẫn tận tình thầy Lê Văn Minh bạn lớp 17IT1 để hồn thành tốt đồ án Trong q trình thực đồ án tránh khỏi sai xót, nhóm em mong nhận quan tâm bảo thầy Nhóm xin chân thành cảm ơn! MỤC LỤC MỞ ĐẦU NHẬN XÉT Chương 1: Tổng quan đề tài 1.1 Giới thiệu 1.2 Phương pháp, kết 1.2.1 Phương pháp triển khai thực đề tài: 1.2.2 Kết đạt được: 1.3 Cấu trúc đồ án Chương 2: Nghiên cứu tổng quan 2.1 Đối tượng phạm vi nghiên cứu 2.1.1 Đối tượng nghiên cứu 2.1.2 Phạm vi nghiên cứu 2.2 Cơ sở lí thuyết thực tiễn 2.2.1 Cơ sở lý thuyết .9 2.2.2 Thực tiễn Chương 3: Cơ sở lí thuyết 10 3.1 Ngơn ngữ lập trình JavaScript .10 3.2 Thư viện ReactJS React Native 11 3.3 Một số thuật ngữ ReactJS React Native 12 3.3.1 Components .12 3.3.2 Props State .12 3.3.3 JavaScript XML (JSX) 13 3.3.4 Virtual DOM 14 Chương 4: Xây dựng ứng dụng triển khai cài đặt 15 4.1 Xây dựng môi trường làm việc .15 4.1.1 Cài đặt Reactjs: 15 4.1.2 Cài đặt React Native: 15 4.2 Thiết kế giao diện ứng dụng 16 4.2.1 Thiết kế thực ứng dụng web 16 4.2.2 Thiết kế thực ứng dụng di động 17 Chương 5: Kết luận định hướng phát triển 18 5.1 Kết luận: .18 5.2 Định hướng phát triển: 19 DANH MỤC TÀI LIỆU THAM KHẢO: 20 DANH MỤC HÌNH Hình Ví dụ component 13 Hình Ví dụ Props State 14 Hình Ví dụ JSX .15 Hình Ví dụ Virtual DOM 15 DANH MỤC CỤM TỪ VIẾT TẮT STT Cụm từ JavaScript Cơ sở liệu Viết tắt JS CSDL Chương 1: Tổng quan đề tài 1.1 Giới thiệu Ngày cơng nghệ thơng tin có bước phát triển mạnh mẽ chiều sâu chiều rộng Máy tính điện tử khơng cịn thứ quý mà ngày trở thành cơng cụ làm việc giải trí người Trong năm gần đây, việc cập nhật thông tin thực giao dịch thông qua Website ứng dụng ngày trở nên phổ biến Trong đó, loại hình kinh doanh phổ biến bn bán qua mạng Hình thức kinh doanh mang lại nhiều lợi ích cho người tiêu dùng nhà cung cấp Phần lớn khách hàng có nhu cầu mua hàng phải đến siêu thị, cửa hàng hay trung tâm thương mại để lựa chọn mặt hàng phù hợp với nhu cầu Cơng việc tiêu tốn nhiều thời gian chi phí lại cho người tiêu dùng, đơi khách hàng cịn bị mua phải mặt hàng chất lượng Tất bất cập loại bỏ với đời Hệ thống bán giày trực tuyến Khi khách hàng có nhu cầu mua hàng, dù nhà, trường, cơng sở hay nơi có mạng internet, khách hàng cần vào trang bán hàng qua mạng/ứng dụng tìm kiếm mặt hàng mà muốn mua Ngồi lợi ích mà internet mang lại cho người tiêu dùng, cịn giúp cho nhà cung cấp phát triển nhiều việc mở rộng thị trường, giúp thương hiệu công ty nhiều người biết đến, từ giảm nhiều chi phí quảng cáo cho sản phẩm thuận lợi việc quản lý sản phẩm, chăm sóc khách hàng theo phương châm đặt Trong giới hạn kiến thức theo yêu cầu đồ án chuyên ngành chúng em chọn đề tài “XÂY DỰNG HỆ THỐNG BÁN GIÀY ONLINE” nhằm giải toán yêu cầu đồ án đặt 1.2 Phương pháp, kết 1.2.1 Phương pháp triển khai thực đề tài: Đồ án sử dụng thư viện ReactJs để thiết kế Website thư viện React Native để thiết kế app với ngôn ngữ JavaScript: - JavaScript ngôn ngữ lập trình phổ biến giới suốt 20 năm qua ngơn ngữ lập trình đem lại sinh động website Nó khác với HTML (thường chuyên cho nội dung), CSS (thường chuyên dùng cho phong cách), khác hẳn với PHP (chạy server không chạy máy client) - ReactJS thư viện JavaScript tạo Facebook nhằm giải vấn đề performance khả tương thích cho ứng dụng web Tức ReactJS thư viện front – end dành cho ứng dụng web Ra đời vào năm 2011, mang đến triển vọng rendering pages, điều tạo linh động trải nghiệm responsive Nếu AngularJS Framework cho phép nhúng code JavaScript code HTML thơng qua attribute ng-model, ng-repeat… với react library cho phép nhúng code HTML code JavaScript nhờ vào JSX, bạn dễ dàng lồng đoạn HTML vào JS Tích hợp JavaScript HTML vào JSX làm cho components dễ hiểu - React Native framework mã nguồn mở phát triển Facebook, cho phép bạn sử dụng JavaScript dùng để phát triển ứng dụng cho Mobile (cụ thể Android IOS), phát hành sau ReactJS năm, sau ReactJS tràn ngập khắp giới lập trình web React Native giống React vậy, chúng sử dụng native components thay web components 1.2.2 Kết đạt được: Hồn thành chương trình với chức năng: - Xây dựng thành cơng hệ thống bán giày online - Có kho liệu đầy đủ tương đối đầy đủ hình ảnh loại giày cửa hàng - Ứng dụng hoạt động ổn định tảng website mobile - Hoàn thành chức dành cho người dùng người quản lý - Hiểu ngôn ngữ Reactjs React Native 1.3 Cấu trúc đồ án Quá trình xây dựng hoàn thành đồ án tiến hành qua quy trình sau: - Nghiên cứu tổng quan - Phân tích thiết kế hệ thống triển khai - Kết luận hướng phát triển Chương 2: Nghiên cứu tổng quan 2.1 Đối tượng phạm vi nghiên cứu 2.1.1 Đối tượng nghiên cứu Đối tượng nghiên cứu gồm: ReactJS React Native Website/App bán giày Các components… 2.1.2 Phạm vi nghiên cứu Phạm vi nghiên cứu đề tài “XÂY DỰNG HỆ THỐNG BÁN GIÀY ONLINE”: Tìm hiểu cơng cụ phát triển Tìm hiểu, nghiên cứu thư viện ReactJS, React Native ngơn ngữ JS Tìm hiểu xây dựng hệ thống tảng website mobile 2.2 Cơ sở lí thuyết thực tiễn 2.2.1 Cơ sở lý thuyết Nhằm xây dựng ứng dụng phù hợp với vấn đề đặt ra, mặt lý thuyết đề tài tìm hiểu nghiên cứu lĩnh vực sau: - Tìm hiểu ngơn ngữ JS - Tìm hiểu Components - Tìm hiểu Virtual DOM Styling - Nghiên cứu thư viện ReactJS React Native - Tìm hiểu Props State 2.2.2 Thực tiễn Từ sở lí thuyết đề tài xây dựng hệ thống bán giày online với tính năng: - Website App có nhiều loại mặt hàng, đa dạng mẫu mã, phong phú chủng loại giá - Có tính thực tiễn, đáp ứng nhu cầu người tiêu dùng - Người tiêu dùng dễ dàng truy cập, thực mua sắm, tốn thơng qua Website/App - Tổ chức CSDL cách chặt chẽ Chương 3: Cơ sở lí thuyết Trong chương tập trung nghiên cứu tìm hiểu ngơn ngữ lập trình JavaScript, thuật ngữ liên quan với hỗ trợ thư viện ReactJS React Native 3.1 Ngôn ngữ lập trình JavaScript JavaScript ngơn ngữ lập trình website, tích hợp nhúng HTML giúp website sống động JavaScript cho phép kiểm soát hành vi trang web tốt so với sử dụng HTML Vậy ứng dụng thực tiễn JavaScript gì? Các slideshow, pop-up quảng cáo tính autocomplete Google ví dụ dễ thấy cho bạn, chúng viết JavaScript JavaScript ngơn ngữ lập trình hỗ trợ tất trình duyệt Firefox, Chrome…thậm chí trình duyệt thiết bị di động JavaScript ứng dụng nhiều lĩnh vực: Lập trình website Xây dựng ứng dụng cho website máy chủ Ứng dụng di động, app, trò chơi … Đặc điểm chung JavaScript: Là ngôn ngữ lập trình bậc cao (high-level) giống như: C/C++, Java, Python, Ruby Nó gần với ngơn ngữ tự nhiên người Trong ngơn ngữ lập trình bậc thấp (low-level) như: Assembly gần với máy tính Là ngơn ngữ lập trình động (dynamic programming language): Python, Ruby, Perl Chúng tối ưu hố nhằm nâng cao hiệu suất cho lập trình viên Trong ngơn ngữ lập trình tĩnh (static programming language): C/C++ lại tối ưu hoá để nâng cao hiệu suất cho phần cứng máy tính Là ngơn ngữ lập trình kịch (scripting language): nghĩa không cần biên dịch (compile) hay liên kết (linked) giống ngơn ngữ lập trình biên dịch (C/C++, Java ) mà dịch thời điểm chạy Là ngơn ngữ dựa đối tượng (object-based): tức gần giống ngơn ngữ lập trình hướng đối tượng, ngoại trừ JavaScript khơng hỗ trợ tính kế thừa đa hình Là ngơn ngữ dựa ngun mẫu (prototype-based): kiểu lập trình hướng đối tượng, hành vi đối tượng sử dụng lại 3.2 Thư viện ReactJS React Native Thư viện ReactJS: ReactJS library javascript ReactJS sử dụng để xây dựng UI cho web theo xu hướng Single Page Applications ReactJS xây dựng kỹ sư Facebook, nhiều công ty tiếng sử dụng để phát triển sản phẩm họ Yahoo, Airbnb tất nhiên nội Facebook, Instagram ReactJS phù hợp với dự án lớn có tính mở rộng dự án nhỏ ReactJS viết JavaScript XML, gọi JSX React dễ dàng tích hợp với khung JavaScript khác Thư viện React Native: Là framework mã nguồn mở sáng tạo Facebook Nó sử dụng để phát triển ứng dụng di động Android, IOS, Web UWP cách cho phép nhà phát triển sử dụng React với môi trường ứng dụng gốc (native) Giúp tiết kiệm thời gian công sức muốn xây dựng ứng dụng đa tảng (multi-platform) Tương tự React cho Web, ứng dụng React Native viết cách sử dụng hỗn hợp JavaScripts XML, gọi JSX 3.3 Một số thuật ngữ ReactJS React Native 3.3.1 Components Components khái niệm React React Native Chính việc chia nhỏ ứng dụng thành components nhỏ tạo nên tính tái sử dụng cao khả mở rộng chúng Chúng ta tái sử dụng component nhiều nơi, với trạng thái thuộc tính khác nhau, component lại chứa thành phần khác Mỗi component có trạng thái riêng, thay đổi, React thực cập nhật component dựa thay đổi trạng thái Một react component đơn giản cần method render Có nhiều method khả dụng khác, render method chủ đạo Hình Ví dụ component 3.3.2 Props State Props Hãy bắt đầu với Props, từ viết tắt Properties Các props giúp components giao tiếp với Props truyền vào từ parent components Cũng có trường hợp có props default props không truyền từ components cha Props bất biến Nhưng thực tế code, muốn làm thay đổi giá trị Và thế, cần State State Props thay đổi, State Thơng thường components khơng có State gọi Stateless Nếu sử dụng state component gọi stateful Một state sử dụng để component theo dõi thay đổi thơng tin Khi sử dụng hàm setState(), update object state sau re-render tồn component Hình Ví dụ Props State 3.3.3 JavaScript XML (JSX) JSX loại cú pháp mở rộng dành cho ngôn ngữ JavaScript viết theo kiểu XML JSX cung cấp Syntatic Sugar để thay cho câu lệnh React.createElement() React Mã lệnh viết JSX chuyển sang JavaScript để trình duyệt hiểu Việc sử dụng hữu ích bởi: JSX giúp cho việc xây dựng ứng dụng React cách nhanh hơn, dễ tối ưu việc compile code sang JavaScript JSX dễ xem lỗi trình triển khai hầu hết lỗi hiển thị q trình compile, khơng đoạn mã HTML thừa thiếu thẻ div khiến giao diện bị hiển thị sai JSX lại hoàn tồn ngược lại, qn đóng div, hiển thị lỗi Cú pháp giống HTML nên dễ dàng cho việc viết chuyển đổi Hình Ví dụ JSX 3.3.4 Virtual DOM Virtual DOM khơng phát minh React, mà React sử dụng Virtual DOM chép trừu tượng Real DOM (HTML DOM) Hình Ví dụ Virtual DOM Chương 4: Xây dựng ứng dụng triển khai cài đặt 4.1 Xây dựng môi trường làm việc 4.1.1 Cài đặt Reactjs: Đầu tiên phải cài đặt Nodejs để tạo môi trường làm việc cho React, việc cài đặt vơ đơn giản nhanh chóng Việc cần làm truy cập vào trang web https://nodejs.org/en/download/, sau tải phiên NodeJS phù hợp tiến hành cài đặt máy tính Sau cài đặt thành công NodeJS ta tạo folder để chứa project React, ta mở cmd trỏ vào folder chứa project React gõ câu lệnh sau: npm install -g create-react-app Sau cài đặt mơi trường ban đầu hồn thành, tiếp đến, cần cài đặt project để tiến hành tạo trang web ReactJS lệnh: create-react-app my-app 4.1.2 Cài đặt React Native: Đầu tiên cần phải cài đặt Nodejs cài đặt them Expo Cli để tiện dụng Chúng ta cài đặt Expo Cli cách mở cmd lên cài câu lệnh: npm install -g expo-cli Để tạo project React Native mới, ví dụ App shoe shop ta dùng câu lệnh: Expo init Appshoeshop Như vậy, bước để cài đặt môi trường làm việc cho React Native hồn thành Để tiến hành chỉnh sửa ứng dụng theo ý muốn, cần mở tệp tin App.js chỉnh sửa dòng lệnh 4.2 Thiết kế giao diện ứng dụng 4.2.1 Thiết kế thực ứng dụng web 4.2.2 Thiết kế thực ứng dụng di động Chương 5: Kết luận định hướng phát triển 5.1 Kết luận: Sau q trình tìm hiểu ngơn ngữ JSX thư viện ReactJS React Native số kĩ thuật có liên quan, đề tài đạt mục tiêu đề xây dựng hệ thống bán giày online Các chức cài đặt hoàn chỉnh, cụ thể: Đối với khách hàng: Khách hàng tìm kiếm sản phẩm, đăng kí để mua sản phẩm, góp ý, xem tin tức Khách hàng xem lại thơng tin đăng kí mình, xem thông tin giỏ hàng, đồng thời cập nhật lại thơng tin đăng kí để mua hàng Đối với quản trị viên: Quản trị viên có tất quyền khách hàng, ngồi cịn có thêm chức năng: Quản trị viên có thể: thêm, sửa, xoá, cập nhật thống kê sản phẩm Quản lý khách hàng cập nhật thông tin khách hàng đăng ký, quản lý danh sách khách hàng Xem báo cáo tình hình doanh thu bán hàng Hệ thống sử dụng gồm giao diện Web App, giao tiếp thông dụng mà ứng dụng mạng ngày thường sử dụng Giao diện thiết kế đơn giản, dễ hiểu, rõ ràng nên dễ thích hợp với người sử dụng Về tốc độ xử lý (tìm kiếm, tra cứu, thống kê,…) nhanh chóng, kết tra cứu, tìm kiếm liệt kê rõ ràng, tiện lợi cho khách hàng sử dụng Một số hạn chế: Chưa đề cập vấn đề bảo mật, an toàn liệu Một số nghiệp vụ kế toán như: quản lý hoá đơn bán hàng,… chưa chặt chẽ 5.2 Định hướng phát triển: Để khắc phục hạn chế nêu trên, nhóm cố gắng phát triển đề tài tương lai tốt hoàn thiện thêm chức sau: Hoàn chỉnh trang Web App sinh động, đẹp mắt với người sử dụng Tăng cường tính an toàn bảo mật cho liệu xây dựng hệ thống bảo mật đường truyền Thực chức chưa cài đặt như: gửi email tự động cho khách hàng, hoàn thiện hỗ trợ q trình tốn thẻ tín dụng hệ thống ngân hàng Việt Nam phát triển Chương trình hỗ trợ nhiều ngơn ngữ lập trình DANH MỤC TÀI LIỆU THAM KHẢO: https://viblo.asia/p/cai-dat-moi-truong-de-chay-reactjs-oOVlY1Pvl8W https://reactjs.org/ https://reactnative.dev/