Đề tài tìm hiểu về react native và xây dựng 1 ứng

ĐẠ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: ThS Huỳnh Hồ Thị Mộng Trinh SINH VIÊN THỰC HIỆN: Võ Thời Đại Trương Thàng Quang TP HỒ CHÍ MINH, 2022 19521307 19520884 LỜI CẢM ƠN Trong trình học tập, nghiên cứu và 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 để hoàn thành đồ án này Nhóm em xin chân thành gửi lời cảm ơn đến cô Huỳnh Hồ Thị Mộng Trinh – 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 2, tận tình hướng dẫn và giúp đỡ kiến thức, phương pháp cho chúng em suốt trình thực và hoàn thành đồ án Hi vọng với bảo và góp ý từ cơ, nhóm đề tài tiếp tục phát triển để ứng dụng ngày càng mở rộng và phục vụ tốt cho người dùng Mặc dù có nhiều cố gắng suốt 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 và nhận xét chân thành từ thầy, bạn sinh viên và người dùng trình sử dụng phần mềm để phần mềm ngày càng 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 và bạn là nguồn động lực to lớn chúng em để chúng em cải thiện phần mềm tốt và 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 22 tháng 12 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 đề .6 1.2 Giải pháp .6 1.3 Mục tiêu .6 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 10 2.3.1 Ngôn ngữ C# 10 2.3.2 Ngơn ngữ lập trình Java-scripts 12 2.3.3 React-Native 14 2.3.4 .NET core 21 2.3.5 SQL server 22 2.3.6 Phà n mềm lập trình VSCode 23 2.3.7 Dịch vụ Github 26 Chương ỨNG DỤNG MINH HỌA 26 3.1 Cơ sở liệu 26 3.1.1 Bảng Product 28 3.1.2 Bảng Color 28 3.1.3 Bảng Size 28 3.1.4 Bảng Category 28 3.1.5 Bảng Collection 29 3.1.6 Bảng Recipe 29 3.1.7 Bảng RecipeItem 29 3.1.8 Bảng Address 30 3.1.9 Bảng User 30 3.2 Product Requirement Document 30 3.2.1 Objective 30 3.2.2 Release 32 3.2.3 Features 33 3.2.4 Analytics – Phân tích 38 3.2.5 Future work – Hướng phát triển 40 3.3 Các hình minh họa 41 3.3.1 Màn hình giới thiệu ứng dụng 41 3.3.2 Màn hình trang chủ 42 3.3.3 Màn hình đăng nhập 43 3.3.4 Màn hình sản phẩm 44 3.3.5 Màn hình chi tiết sản phẩm 45 3.3.6 Màn hình giỏ hàng tốn 47 3.3.7 Thanh điều hướng loại sản phẩm 49 3.3.8 Màn hình sản phẩm yêu thích 50 3.3.9 Màn hình ưu đãi 51 3.3.10 Màn hình lịch sử giao dịch 52 Chương KIẾN TRÚC HỆ THỐNG 53 Chương KẾT QUẢ ĐẠT ĐƯỢC VÀ HƯỚNG PHÁT TRIỂN 55 Chương TÀI LIỆU THAM KHẢO 56 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 hoá nhập xuất ngày càng 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 này 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 và 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ý và 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 và 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ể là 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ị 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 và 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-app 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) là 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à 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 nào mà không cần chuẩn bị thêm đặc biệt nào - 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 là thành phần tiêu chuẩn tảng” Cross Platform Cross platform hay Multi Platform là tảng đa ứng dụng Hiểu đơn giản là với code, bạn phiên dịch và 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 và thời gian đáng kể Chính lợi mà Cross platform ưa chuộng nhiều lập trình viên Ngoà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 và Flutter theo thứ tự xem là 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 là iOS và 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 và cộng đồng phát triển app, kèm theo là tranh luận việc đánh giá xếp hạng cho frameworks này 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í và 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 và đ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í và 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 và phức tạp Màn hình giới thiệu ứng dụng 3.3.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á 42 Màn hình trang chủ 3.3.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 43 Màn hình đăng nhập 3.3.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 44 Màn hình sản phẩm 3.3.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 45 Màn hình chi tiết sản phẩm 46 Màn hình chi tiết sản phẩm 3.3.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 47 Màn hình giỏ hàng tốn Người dùng lựa chọn phương thức tốn khác nhau, đồng thời áp dụng phiếu giảm giá có ưu đãi 48 Màn hình chọn phương thức tốn chọn phiếu giảm giá 3.3.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 49 Thanh điều hướng loại sản phẩm 3.3.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 50 Màn hình sản phẩm u thích 3.3.9 Màn hình ưu đãi Màn hình chứa phiếu giảm giá mà người dùng thu nhập 51 Màn hình ưu đãi 3.3.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 52 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 Ngoài build ứng dụng chạy hệ điều hành Android IOS Hướng tiếp cận 53 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 và 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 Ngoà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) 54 Phần back-end ứng dụng viết NET C# sử dụng RestAPI để giao tiếp với front-end nhằm cải thiện độ đơn giản code và việc truy cập liệu tốc độ cao Liên kết với SQL Server thông qua framework Entity NET khiến cho việc tạo relationship class dễ dàng 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 55 Ứ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 - 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 56 ... 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 và 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-app... dùng xây dựng ứng dụng quản lý (Web Applications) • jQuery: Một thư viện mạnh hiệu ứng • ReactJS: Một thư viện viết ứng dụng web • Và nhiều thư viện khác 2.3.3 React- Native 2.3.3 .1 Tổng quan React- Native. .. thư viện dùng để xây dựng ứng dụng Single Page • NodeJS: Một thư viện phát triển phía Server dùng để xây dựng ứng dụng realtime • Sencha Touch: Một Framework dùng để xây dựng ứng dụng Mobile •