Tìm hiểu về react native và xây dựng 1 ứng dụng bán giày (báo cáo cuối kì đồ án 1)

ĐẠ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 BÁO CÁO ĐỒ ÁN Đề tài: Tìm hiểu React Native xây dựng ứng dụng bán giày NGÀNH KỸ THUẬT PHẦN MỀM GIẢNG VIÊN HƯỚNG DẪN: TS Nguyễn Công Hoan SINH VIÊN THỰC HIỆN: Võ Thời Đại TP HỒ CHÍ MINH, 2022 19521307 LỜI CẢM ƠN Trong trình học tập, nghiên cứu phát triển đề tài “Tìm hiểu React Native xây dựng ứng dụng bán giày” em nhận giúp đỡ, bảo thầy để hoàn thành đồ án Nhóm em xin chân thành gửi lời cảm ơn đến thầy Nguyễn Công Hoan – Giảng viên Trường Đại học Công nghệ thông tin, Đại học Quốc gia Thành phố Hồ Chí Minh – giảng viên dạy hướng dẫn mơn Đồ án 1, tận tình hướng dẫn giúp đỡ kiến thức, phương pháp cho chúng em suốt q trình thực hồn thành đồ án Hi vọng với bảo góp ý từ thầy, nhóm đề tài tiếp tục phát triển để ứng dụng ngày mở rộng phục vụ tốt cho người dùng Mặc dù có nhiều cố gắng suốt q trình thực đề tài, song tránh khỏi hạn chế, thiếu sót Em mong nhận đóng góp nhận xét chân thành từ thầy, bạn sinh viên người dùng trình sử dụng phần mềm để phần mềm ngày hoàn thiện Mọi đóng góp xin vui lịng gửi địa email: 19521307@gm.uit.edu.vn Mỗi ý kiến đóng góp thầy bạn nguồn động lực to lớn chúng em để chúng em cải thiện phần mềm tốt xây dựng phần mềm hữu ích người dùng Chúng em xin trân trọng cảm ơn Thành phố Hồ Chí Minh, ngày 10 tháng 06 năm 2022 NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN MỤC LỤC Chương GIỚI THIỆU 1.1 Đặt vấn đề .5 1.2 Giải pháp .5 1.3 Mục tiêu .5 Chương TỔNG QUAN 2.1 Tổng quan đồ án 2.1.1 Tên đồ án: 2.1.2 Link github quản lý source code 2.2 Cơ sở lý thuyết 2.2.1 Nền tảng Cross Platform 2.3 Công nghệ sử dụng 2.3.1 Ngơn ngữ lập trình Java-scripts 2.3.2 React-Native 11 2.3.3 Phần mềm lập trình VSCode 18 2.3.4 Dịch vụ Github 21 Chương ỨNG DỤNG MINH HỌA 21 3.1 Cơ sở liệu 21 3.2 Tổng quan ứng dụng phát triển 22 3.3 Product Requirement Document 22 3.3.1 Objective 22 3.3.2 Release 23 3.3.3 Features 24 3.3.4 Analytics – Phân tích 30 3.3.5 Future work – Hướng phát triển 31 3.4 Các hình minh họa 33 3.4.1 Màn hình giới thiệu ứng dụng 33 3.4.2 Màn hình trang chủ 33 3.4.3 Màn hình đăng nhập 34 3.4.4 Màn hình sản phẩm 35 3.4.5 Màn hình chi tiết sản phẩm 36 3.4.6 Màn hình giỏ hàng toán 38 3.4.7 Thanh điều hướng loại sản phẩm 40 3.4.8 Màn hình sản phẩm yêu thích 41 3.4.9 Màn hình ưu đãi 42 3.4.10 Màn hình lịch sử giao dịch 43 Chương KIẾN TRÚC HỆ THỐNG 44 Chương KẾT QUẢ ĐẠT ĐƯỢC VÀ HƯỚNG PHÁT TRIỂN 46 Chương TÀI LIỆU THAM KHẢO 46 Chương 1.1 GIỚI THIỆU Đặt vấn đề Ngày nay, nhiều cửa hàng kinh doanh hoạt động chủ yếu mang tính thủ cơng, dựa vào kinh nghiệm hệ thống nhân viên Do đặc điểm lượng hàng hố nhập xuất ngày lớn nên cơng tác quản lí, mua bán nhiều thời gian, cơng sức mà độ xác khơng cao, điều nhiều gây thiệt hại cho cửa hàng 1.2 Giải pháp Nhận thấy tình hình trên, nhóm em lên ý tưởng xây dựng ứng dụng hỗ trợ công tác quản lý, bán hàng mua hàng trực tuyến “Xây dựng ứng dụng bán giày” đời nhằm đáp ứng nhu cầu đại hóa hệ thống quản lý bán hàng, đưa hệ thống phần mềm vào để thay công tác quản lý thủ công, nâng cao trải nghiệm mua hàng trực tuyến cho người dùng 1.3 Mục tiêu Xây dựng phần mềm hỗ trợ cửa hàng thực công tác quản lý sản phẩm trạng thái đơn hàng, cung cấp ứng dụng mua sắm đáp ứng nhu cầu khách hàng, cụ thể kinh doanh thời trang Xây dựng giao diện phần mềm cách trực quan, sinh động, dễ sử dụng, thẩm mỹ Dùng animation xử lý thành phần hoạt động cách mượt mà để mang đến trải nghiệm thú vị tiện ích cho người dùng Chương 2.1 TỔNG QUAN Tổng quan đồ án 2.1.1 Tên đồ án: Tên tiếng việt: Tìm hiểu React Native xây dựng ứng dụng bán giày 2.1.2 Link github quản lý source code https://github.com/daivo030601/Nike-Shop.git 2.2 Cơ sở lý thuyết 2.2.1 Nền tảng Cross Platform 2.2.1.1 Cross Platform “Trong cơng nghệ điện tốn, đa tảng (tiếng Anh: cross-platform hay multi platform) thuật ngữ phần mềm máy tính hay phương thức điện toán khái niệm thực thi đầy đủ vận hành nhiều tảng máy tính Phần mềm đa tảng chia thành hai loại; loại yêu cầu phải thiết kế biên dịch phiên cho tảng hỗ trợ; loại chạy trực tiếp tảng mà không cần chuẩn bị thêm đặc biệt - chẳng hạn phần mềm viết ngôn ngữ thông dịch hay biên dịch trước sang mã bytecode có khả di động trình thơng dịch hay gói run-time thường dùng thành phần tiêu chuẩn tảng” Cross Platform Cross platform hay Multi Platform tảng đa ứng dụng Hiểu đơn giản với code, bạn phiên dịch sử dụng nhiều tảng ứng dụng khác nhau, giúp bạn tiết kiệm cơng sức thời gian đáng kể Chính lợi mà Cross platform ưa chuộng nhiều lập trình viên Ngồi ra, lập trình, bạn cần phải lựa chọn tuỳ theo ưu, nhược điểm Framework Cross platform sử dụng Framework đa tảng Đến thời điểm tại, React-Native, Xamarin Flutter theo thứ tự xem frameworks phổ biến cho phép phát triển app smartphone sử dụng hệ điều hành, hay tảng khác (cross-platform mobile development), mà thông dụng iOS Android Với frameworks này, chương trình viết chạy tất tảng; cụ thể hơn, cần phát triển project tạo apps chạy smartphone sử dụng iOS, Android Ba framework phát triển mobile phổ biến Sự xuất frameworks nói hình thành trường phái cộng đồng phát triển app, kèm theo tranh luận việc đánh giá xếp hạng cho frameworks 2.2.1.2 Ưu điểm, hạn chế Cross Platform Ưu điểm:  Có thể sử dụng code nhiều phiên khác  Sử dụng Cross platform giúp tiết kiệm lượng lớn chi phí cơng sức viết code  Cross platform thích hợp với dự án lớn, địi hỏi tính linh hoạt đa dạng Nhược điểm:  Chưa có khả khai thác thư viện tảng lớn Android iOS dù tiết kiệm chi phí có tính linh hoạt cao  Q trình cấp phép cho cơng nghệ ứng dụng Cross platform gặp nhiều khó khăn phức tạp 2.3 Công nghệ sử dụng 2.3.1 Ngôn ngữ lập trình Java-scripts JavaScript ngơn ngữ lập trình phổ biến giới suốt 20 năm qua Nó số ngơn ngữ lập trình web:  HTML: Giúp bạn thêm nội dung cho trang web  CSS: Định dạng thiết kế, bố cục, phong cách, canh lề trang web  JavaScript: Cải thiện cách hoạt động trang web JavaScript học nhanh dễ dàng áp dụng cho nhiều mục đích khác nhau, từ việc cải thiện tính website đến việc chạy game tạo phần mềm web Hơn nữa, có hàng ngàn mẫu template JavaScript ứng dụng kia, nhờ vào cống hiến cộng đồng, đặc biệt Github Ngôn ngữ Javascript 2.3.1.1 Lịch sử hình thành Java-scripts JavaScript tạo mười ngày Brandan Eich, nhân viên Netscape, vào tháng năm 1995 Được đặt tên Mocha, tên đổi thành Mona LiveScript trước thật trở thành JavaScript tiếng Phiên ngôn ngữ bị giới hạn độc quyền Netscape có tính hạn chế, 3.4 Các hình minh họa 3.4.1 Màn hình giới thiệu ứng dụng Khi lần đầu sử dụng ứng dụng có hình slider để giới thiệu qua ứng dụng NikeShop Màn hình giới thiệu ứng dụng 3.4.2 Màn hình trang chủ Trang chủ NikeShop hiển thị sản phẩm bật nhiều khách hàng chọn mua tháng sản phẩm giảm giá 33 Màn hình trang chủ 3.4.3 Màn hình đăng nhập Để thực thao tác đăng nhập tài khoản đăng ký từ trước 34 Màn hình đăng nhập 3.4.4 Màn hình sản phẩm Tất sản phẩm cửa hàng phân loại hình sản phẩm, hỗ trợ việc tìm kiếm sản phẩm người dùng 35 Màn hình sản phẩm 3.4.5 Màn hình chi tiết sản phẩm Người dùng xem thông tin chi tiết sản phẩm trang trước thêm vào giỏ hàng Thông tin sản phẩm bao gồm thông tin quan sản phẩm chất liệu, size giày, giá, tên, dịng, số hình ảnh giày 36 Màn hình chi tiết sản phẩm 37 Màn hình chi tiết sản phẩm 3.4.6 Màn hình giỏ hàng tốn Người dùng sau đọc thông tin lựa chọn màu size giày thêm sản phẩm vào giỏ hàng tiếp tục mua sắm sản phẩm khác Ở hình giỏ hàng, người dùng chỉnh sửa số lượng, xóa sản phẩm khỏi giỏ hàng tốn giỏ hàng 38 Màn hình giỏ hàng tốn Người dùng lựa chọn phương thức toán khác nhau, đồng thời áp dụng phiếu giảm giá có ưu đãi 39 Màn hình chọn phương thức toán chọn phiếu giảm giá 3.4.7 Thanh điều hướng loại sản phẩm Người dùng dùng điều hướng để tới trang sản phẩm lọc loại sản phẩm người dùng chọn 40 Thanh điều hướng loại sản phẩm 3.4.8 Màn hình sản phẩm u thích Màn hình hiển thị danh sách sản phẩm yêu thích thêm người dùng 41 Màn hình sản phẩm u thích 3.4.9 Màn hình ưu đãi Màn hình chứa phiếu giảm người dùng thu nhập 42 Màn hình ưu đãi 3.4.10 Màn hình lịch sử giao dịch Màn hình hiển thị lịch sử sản phẩm mà người dùng mua ứng dụng 43 Màn hình lịch sử giao dịch Chương KIẾN TRÚC HỆ THỐNG Ứng dụng phát triển ngôn ngữ ReactNative, nhằm xây dựng ứng dụng di động thời gian nhanh nhất, với mã nguồn mở nên dễ dàng chỉnh sửa, thêm chức Ngồi build ứng dụng chạy hệ điều hành Android IOS Hướng tiếp cận 44 chương trình tạo Class Component nhằm tái sử dụng nhiều lần Mỗi hình ứng dụng View bao gồm thành phần giao diện bên Ứng dụng sử dụng Redux để quản lí state nhằm đảm bảo thống liệu ứng dụng tăng tốc độ truy cập Những thành phần dao diện cần truy xuất đến state chương trình kết nối với Store State thông qua hàm connect Redux Ngồi đặc điểm ngơn ngữ bất đồng Javascript, hành động (Actions) người dùng để thực hành động đồng đăng nhập, checkout cần phải sử dụng middleware Redux-Thunk để xếp trình tự thực hành động cho phù hợp Kiến trúc ứng dụng ReactNative sử dụng Redux Vì ứng dụng trọng vào giao diện trải nghiệm người dùng, việc thêm hiệu ứng, hoạt ảnh vào ứng dụng thông qua Animated (Một package giúp tạo hiệu ứng React Native) 45 Chương KẾT QUẢ ĐẠT ĐƯỢC VÀ HƯỚNG PHÁT TRIỂN Kết đạt Ứng dụng NikeShop hoàn thành mục tiêu đặt ban đầu tạo ứng dụng thương mại điện tử gồm chức kết hợp cải tiến giao diện người dùng với tính tương tác với người dùng thơng qua hiệu ứng, hoạt ảnh Ứng dụng kết hợp với sở liệu thời gian thực để tăng tốc độ xử lí, đồng thời có chế lưu lại hành động người dùng nhằm tăng tính trải nghiệm cho người dùng vào lại ứng dụng Bên cạnh đó, số vấn đề đặt q trình sử dụng xảy tình trạng giật lag máy có hệ điều hành phiên cũ có cấu hình thấp Nhiều nơi ứng dụng lạm dụng nhiều hiệu ứng, cần tinh chỉnh lại Hướng phát triển Trong tương lai, nhóm tập trung nghiên cứu xây dựng phần backend cho ứng dụng Đồng thời, nhóm phát triển thêm số tính nâng cao cho ứng dụng chatbot, hệ thống recommendation nhằm tăng trải nghiệm người dùng Chương TÀI LIỆU THAM KHẢO - Expo: https://expo.dev - Animation with reactnative: https://reactnative.dev/docs/animated - Các animations sử dụng: https://www.codedaily.io/courses/Master-React-Native-Animations - React Native: https://reactnative.dev 46 - React-native Lifecycle: https://viblo.asia/p/react-native-lifecyclegAm5yXY8ldb - Redux-thunk: https://viblo.asia/p/tim-hieu-ve-redux-thunkQbq5Qkm4ZD8 - Cộng đồng hỏi đáp: https://stackoverflow.com 47 ... việt: Tìm hiểu React Native xây dựng ứng dụng bán giày 2 .1. 2 Link github quản lý source code https://github.com/daivo0306 01/ Nike-Shop.git 2.2 Cơ sở lý thuyết 2.2 .1 Nền tảng Cross Platform 2.2 .1. 1... (developer) sử dụng JavaScript để tạo mobile apps (ứng dụng di động) hỗ trợ cho tảng Android iOS Instagram, Facebook, Skype,… ứng dụng bật sử dụng React Native 11 Framework React Native React Native. .. triển ứng dụng không lớn  Xây dựng ứng dụng native code cho nhiều hệ điều hành khác  Trải nghiệm người dùng tốt so sánh với ứng dụng Hybrid 17 2.3.2.9 Nhược điểm React- Native  Yêu cầu Native