XÂY DỰNG ỨNG DỤNG BÁN GIÀY THE WOLF đa NỀN TẢNG

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN & TRUYỀN THÔNG VIỆT – HÀN Khoa Khoa Học Máy Tính ĐỒ ÁN CHUYÊN NGÀNH ĐỀ TÀI: XÂY DỰNG ỨNG DỤNG BÁN GIÀY THE WOLF ĐA NỀN TẢNG Sinh viên thực hiện: NGUYỄN MINH CẢNH LÊ THỊ MỸ DUYÊN Lớp : 17IT3 Giảng viên hướng dấn: TS NGUYỄN VĂN LỢI Đà Nẵng, tháng năm 2021 TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN & TRUYỀN THÔNG VIỆT – HÀN Khoa Khoa Học Máy Tính ĐỒ ÁN CHUYÊN NGÀNH ĐỀ TÀI: XÂY DỰNG ỨNG DỤNG BÁN GIÀY THE WOLF ĐA NỀN TẢNG Sinh viên thực hiện: NGUYỄN MINH CẢNH LÊ THỊ MỸ DUYÊN Lớp : 17IT3 Giảng viên hướng dấn: TS NGUYỄN VĂN LỢI Đà Nẵng, tháng năm 2021 NHẬN XÉT (Của giảng viên hướng dẫn) LỜI CẢM ƠN Việc nghiên cứu xây dựng ứng dụng điện thoại kỳ trước tạo tiền đề để chúng em tìm hiểu cách chuyên sâu ứng dụng đa tảng, React Native, AWS Amplify, GraphQL sử dụng thục ngôn ngữ công cụ hỗ trợ lập trình Trong trình tìm hiểu làm đồ án này, chúng em cố gắng hoàn thiện cách tốt hồn thiện mặt kiến thức tránh khỏi thiếu sót Chúng em xin gửi lời cảm ơn chân thành đến tất thầy cô giảng viên Trường Đại học Công nghệ thông tin truyền thông Việt - Hàn nói chung thầy Nguyễn Văn Lợi nói riêng cung cấp cho chúng em kiến thức, kỹ cần thiết, hướng dẫn cho chúng em hoàn thành tốt đồ án Em xin trân trọng cảm ơn Sinh viên Nguyễn Minh Cảnh Lê Thị Mỹ Duyên MỤC LỤC MỞ ĐẦU 1 Giới thiệu Mục tiêu đề tài Nội dung kế hoạch thực .1 Bố cục báo cáo .2 Chương NGHIÊN CỨU TỔNG QUAN TÌM HIỂU VỀ GRAPH QUERY LANGUAGE (GRAPHQL) 1.1 Tổng quan GraphQL 1.2 Những tính GraphQL 1.3 Các yếu tố quan trọng GraphQL 1.4 Cấu trúc GraphQL TÌM HIỂU VỀ AWS AMPLIFY .6 2.1 Tổng quan AWS Amplify 2.2 Amazon Cognito 2.3 AppSync .9 FRAMEWORK REACT NATIVE 11 3.1 Tổng quan React Native 11 3.2 Các thành phần React Native .13 3.3 Cách thức hoạt động React Native .13 STRIPE .14 4.1 Stripe gì? 14 4.2 Ưu nhược điểm Stripe 15 Chương PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG .17 CÁC TÁC NHÂN 17 BIỂU ĐỒ USECASE .17 2.1 Tài khoản khách hàng 17 2.2 Tài khoản người bán 18 BIỂU ĐỒ HOẠT ĐỘNG 20 3.2 Biểu đồ hoạt động người bán .21 3.3 Biểu đồ hoạt động khách hàng .22 BIỂU ĐỒ TRIỂN KHAI 23 Chương XÂY DỰNG VÀ KẾT QUẢ ĐẠT ĐƯỢC .24 CÀI ĐẶT MÔI TRƯỜNG 24 CÀI ĐẶT VÀ CONFIG AMPLIFY CLI .24 KẾT QUẢ ĐẠT ĐƯỢC 26 3.1 Ứng dụng dành cho người bán 26 3.2 Ứng dụng dành cho khách hàng 27 KẾT LUẬN 29 KẾT QUẢ ĐẠT ĐƯỢC 29 HƯỚNG NGHIÊN CỨU 29 TÀI LIỆU THAM KHẢO 30 DANH MỤC CÁC TỪ VIẾT TẮT VIẾT TẮT GraphQL NỘI DUNG Graph query language DEV Developer Amplify CLI Amplify Command Line Interface DANH MỤC CÁC BẢNG Bảng 1.1.Kế hoạch thực .1 Bảng 1.2 Đặc tả Usecase Khách hàng .17 Bảng 1.3 Đặc tả Usecase Khách hàng (tiếp theo) .18 Bảng 1.4 Đặc tả Usecase Khách hàng (tiếp theo) .19 Bảng 1.5 Đặc tả Usecase Người bán 19 Bảng 1.6 Đặc tả Usecase Người bán (tiếp theo) 20 DANH MỤC HÌNH ẢNH Hình 1.1 Tổng quan GraphQL .3 Hình 1.2 Cấu trúc GraphQL Hình 1.3 Sơ đồ hoạt động React Native 14 Hình 1.4 Usecase khách hàng 17 Hình 1.5 Usecase người bán .18 Hình 1.6 Biểu đồ hoạt động đăng nhập, đăng ký .20 Hình 1.7 Biểu đồ hoạt động người bán 21 Hình 1.8 Biểu đồ hoạt động khách hàng 22 Hình 1.9 Biểu đồ triển khai 23 Hình 1.10 Cài đặt Amplify CLI 24 Hình 1.11 Tạo user với option AdministratorAccess 24 Hình 1.12 Yêu cầu từ Amplify 25 Hình 1.13 Sử dụng Amplify CLI để tạo project .25 MỞ ĐẦU Giới thiệu Cuộc cách mạng công nghiệp lần thứ tư bùng nổ với phát triển vượt bậc khoa học kỹ thuật, gia tăng ứng dụng di động làm cho giới nhỏ Hơn nữa, công nghệ IoT, AR AI bắt đầu cho thấy phát triển họ lĩnh vực phát triển ứng dụng Tự động hóa đơn giản hóa quy trình phức tạp đạt thơng qua ứng dụng doanh nghiệp giàu tính Sự phổ biến ngày tăng tính di động cạnh tranh ngày tăng lĩnh vực công nghiệp khác buộc doanh nghiệp phải mang ứng dụng cho nhiều tảng khác Phát triển ứng dụng đa tảng giúp tay cho phép công ty đưa ứng dụng hoạt động trơn tru chạy nhiều thiết bị tảng khác Nắm bắt xu hướng cơng nghệ nhìn nhận vào nhu cầu thực tế chúng em tiến hành nghiên cứu xây dựng ứng dụng đa tảng với đề tài “Xây dựng ứng dựng bán giày The Wolf đa tảng” Mục tiêu đề tài Mục tiêu đề tài nhằm tạo ứng dụng đa tảng đáp ứng nhu cầu khách hàng việc mua giày online qua ứng dụng mà không cần phải đến tận cửa hang để mua Nội dung kế hoạch thực Thời gian Tuầ n thứ từ 05/4 đến 11/4 Tuầ n thứ từ 12/4 đến 18/4 Tuầ n thứ 3, từ 19/4 đến 2/5 Tuầ n thứ Nội dung thực Phâ n tích, thiết kế hệ thố ng Tìm hiểu GraphQL, AWS Amplify Triển khai xâ y dự ng đề tà i Tiếp tụ c phá t triển hoà n thiện từ 3/5 đến 9/5 Tuầ n thứ Hoà n thiện ứ ng dụ ng, kiểm thử n c nă ng, m từ 10/5 đến 16/5 bá o cá o, slide Tuầ n thứ từ 17/5 đến 20/5 Hoà n thiện bá o cá o, slide, mã nguồ n nộ p lên hệ thố ng Bảng 1.1.Kế hoạch thực Bố cục báo cáo Sau phần Mở đầu, báo cáo trình bày ba chương, cụ thể sau: Chương 1: Nghiên cứu tổng quan Trong chương này, báo cáo trình bày khái niệm, đặc điểm, kiến thức, ngơn ngữ lập trình cơng cụ sử dụng Chương 2: Phân tích thiết kế hệ thống Trong chương này, báo cáo trình bày việc phân tích đề tài, thiết kế sở liệu, bước thiết kế Chương 3: Xây dựng kết đạt Chương trình bày q trình cài đặt cơng cụ, xây dựng ứng dụng kết đạt đề tài Cuối Kết luận, Tài liệu tham khảo Phụ lục liên quan đến đề tài Chương NGHIÊN CỨU TỔNG QUAN TÌM HIỂU VỀ GRAPH QUERY LANGUAGE (GRAPHQL) 1.1 Tổng quan GraphQL GraphQL ngôn ngữ thao tác truy vấn liệu nguồn mở cho API, cung cấp cho client cách thức dễ dàng để request xác họ cần, giúp việc phát triển API dễ dàng theo thời gian GraphQL Facebook phát triển nội vào năm 2012 trước phát hành công khai vào năm 2015 GraphQL bao gồm điểm đặc trưng: - Cho phép client xác định xác liệu họ cần - GraphQL làm cho việc tổng hợp liệu từ nhiều nguồn dễ dàng - Sử dụng type system để khai báo liệu Hình 1.1 Tổng quan GraphQL 1.2 Những tính GraphQL 1.2.1 Thay cho REST Vấn đề mà REST gặp phải việc phản hồi liệu REST trả nhiều Trong trường hợp hiệu suất ứng dụng bị ảnh hưởng nhiều Giải pháp mà GraphQL đưa cho phép khai báo liệu nơi mà client xác định xác liệu mà cần từ API 10 – Chấp nhận thẻ tín dụng, ví điện tử phương thức tốn quốc gia cách an toàn – Chấp nhận giao dịch nhiều đơn vị tiền tệ sau quy đổi tiền tệ mặc định – Có nhiều biểu mẫu tốn nhúng vào ứng dụng khác bạn  Connect Connect công cụ thiết kế đặc biệt cho thị trường tảng khác kết nối vào nó. Stripe hỗ trợ 100 loại tiền tệ tự động chuyển đổi chúng. Bạn sử dụng cơng cụ Connect để xác minh người bán hàng quốc tế, tự động toán cho người bán tạo lịch toán tùy chỉnh Atlas Atlas cho phép doanh nghiệp quốc tế liên kết để thiết lập tài khoản ngân hàng Hoa Kỳ nhận hướng dẫn thuế pháp lý. Stripe cho biết họ có nghìn cơng ty khởi nghiệp áp dụng 120 quốc gia họ thêm 100 đối tác vào mạng lưới kể từ mắt Radar Radar giải pháp Stripe để phòng chống gian lận thương mại điện tử, họ áp dụng trí tuệ nhân tạo để xác định tốt ngăn chặn gian lận thẻ tín dụng giao dịch Relay Tính Relay cho phép người bán liên kết danh mục sản phẩm với ứng dụng điện thoại thông minh. Relay tạo nút mua ứng dụng chuyển tiếp tất thông tin bán hàng cho người bán để hoàn thành đơn đặt hàng  Ngoài Stripe dịch vụ cao cấp khác như: Sigma, Terminal, Issuing… Những dịch vụ nằm lĩnh vực mà quan tâm nên tơi khơng chia sẻ 23 Chương PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG CÁC TÁC NHÂN - Khách hàng - Người bán BIỂU ĐỒ USECASE 2.1 Tài khoản khách hàng Hình 1.4 Usecase khách hàng Đặc tả: Mã Tên A1 Đăng ký A2 Đăng nhập A3 Xem thông tin tài khoản Mô tả Mục đích Đăng ký tài khoản Đăng nhập vào ứng Xem thông tin tài để sử dụng ứng dụng để sử dụng khoản cá nhân Username, mật khẩu, khách hành Tên, địa chỉ, số dụng Username, mật Dữ liệu Xử lý khẩu, email, số điện email, số điện thoại điện thoại, email, thoại Đăng ký … Xem thông tin Đăng nhập Bảng 1.2 Đặc tả Usecase Khách hàng Mã Tên Thanh tốn A4 Qn mật 24 Mơ tả Khách hàng tốn tiền mua Mục đích hàng Phương thức Khách hàng thực toán, số tiền yêu cầu cấp lại mật cho Dữ liệu tài khoản Username, email, Thanh toán mật khẩu, số điện Xử lý thoại Quên mật Thanh toán Bảng 1.3 Đặc tả Usecase Khách hàng (tiếp theo) 2.2 Tài khoản người bán Hình 1.5 Usecase người bán Đặc tả: Mã Tên B1 Đăng ký B2 Đăng nhập 25 Mô tả Mục đích Dữ liệu Xử lý Đăng ký tài khoản Đăng nhập để sử dụng để sử dụng ứng ứng dụng dụng Username, email, Username, email, mật mật khẩu, số điện khẩu, số điện thoại thoại Đăng ký Đăng nhập Bảng 1.4 Đặc tả Usecase Người bán Mã Tên Mơ tả Mục đích Dữ liệu Xử lý B3 Xem order B4 Từ chối order B5 Chấp nhận order Xem order Từ chối order từ chấp nhận khách hàng khách hàng order từ khách Tên khách hàng, thời Tên khách hàng, hàng Tên khách hàng, gian, vị trí, số tiền, thời gian, vị trí, số thời gian, vị trí, số phương thức tiền, phương thức tiền, phương thức toán Xem order toán Từ chối order toán Chấp nhận order Bảng 1.5 Đặc tả Usecase Người bán (tiếp theo) Mã Tên Mô tả Mục đích B15 Quên mật yêu cầu cấp lại mật Dữ liệu cho tài khoản Username, email, mật Xử lý khẩu, số điện thoại Quên mật 26 Bảng 1.6 Đặc tả Usecase Người bán (tiếp theo) BIỂU ĐỒ HOẠT ĐỘNG 3.1 Biểu đồ hoạt động đăng nhập, đăng ký Hình 1.6 Biểu đồ hoạt động đăng nhập, đăng ký Mô tả biểu đồ hoạt động đăng nhập, đăng ký: - Khi thực đăng nhập thông tin yêu cầu gồm: tài khoản, mật khẩu; - Thông tin tài khoản, mật hệ thống kiểm tra; - Thông tin đăng nhập đúng, người dùng sử dụng chức khác hệ thống; - Thông tin đăng nhập sai, báo sai thông tin đăng nhập; - Người dùng chọn quên mật để đặt lại mật tạo tài khoản chưa có tài khoản; - Người dùng chọn đăng ký tài khoản: nhập tên tài khoản, mật khẩu, nhập email; - Hệ thống xác thực email, thành cơng tạo tài khoản, đưa người dùng đăng nhập 27 3.2 Biểu đồ hoạt động người bán Hình 1.7 Biểu đồ hoạt động người bán Mô tả biểu đồ hoạt động người dùng: Đăng nhập hệ thống, đăng nhập thất bại tiến hành đăng nhập lại, đăng nhập thành cơng sử dụng chức tương ứng gồm: xem thống kê thu nhập, xem thông tin thu nhập, chỉnh sửa trạng thái hoạt động, xem thông tin sp, xem order 28 3.3 Biểu đồ hoạt động khách hàng Hình 1.8 Biểu đồ hoạt động khách hàng Mô tả biểu đồ hoạt động khách hàng: Đăng nhập hệ thống, thông tin đăng nhập hệ thống kiểm tra Nếu thông tin đăng nhập đúng, khách hàng sử dụng chức như: Xem thông tin tài khoản, xem sản phẩm tiến hành đặt mua BIỂU ĐỒ TRIỂN KHAI Hệ thống triển khai gồm thành phần: - Back-end 29 - User App - Driver App - Mobile: Android, IOS Hình 1.9 Biểu đồ triển khai 30 Chương XÂY DỰNG VÀ KẾT QUẢ ĐẠT ĐƯỢC CÀI ĐẶT MÔI TRƯỜNG Bước 1: Download NodeJS cài đặt Bước 2: Tiến hành cài đặt React Native App cú pháp: npm install –g create-react-native-app Bước 3: Tạo run project: create-react-native-app Don cd Don npm start Bước 4: Chạy project điện thoại CÀI ĐẶT VÀ CONFIG AMPLIFY CLI Bước 1: Cài đặt Hình 1.10 Cài đặt Amplify CLI Bước 2: Tạo user với option Administrator Access để cung cấp tài nguyên AppSync, Cognito v.v Hình 1.11 Tạo user với option AdministratorAccess 31 Bước 3: Sau tạo xong Amplify yêu cầu accessKeyId secretAccessKey để kết nối với IAM user vừa tạo Hình 1.12 Yêu cầu từ Amplify Bước 4: Sử dụng Amplify CLI để tạo project Hình 1.13 Sử dụng Amplify CLI để tạo project 32 KẾT QUẢ ĐẠT ĐƯỢC 3.1 Màn hình dành cho người bán Hình 1.12 Thêm sửa xóa sản phẩm Hình 1.13 Thơng tin order Hình 1.14 OrderProduct 33 3.2 Ứng dụng dành cho khách hàng Hình 1.15 Chi tiết sản phẩm Hình 1.16 Chi tiết sản phẩm 34 Hình 1.17 Giỏ hàng Hình 1.18 Thanh tốn 35 KẾT LUẬN KẾT QUẢ ĐẠT ĐƯỢC Đi sâu bám sát mục tiêu nghiên cứu đặt ra, sở vận dụng tổng hợp phương pháp nghiên cứu khoa học từ lý thuyết đến thực tiễn, báo cáo đồ án với đề tài “Xây dựng ứng dụng bán giày The Wolf đa tảng” nhóm đồ án đạt kết sau đây: - Hiểu cách sâu React Native, GraphQL AWS Amplify quy trình phát triển ứng dụng - Xây dựng ứng dụng cho khách hàng - Xây dựng ứng dụng cho người bán - Nâng trau dồi kiến thức kỹ chuyên môn - Sử dụng thành thạo công cụ ngơn ngữ lập trình HƯỚNG NGHIÊN CỨU Hiện tại, ứng dụng bán giày đa tảng giai đoạn phát triển, nhiều chức chưa hồn thiện Vẫn cịn gặp số lỗi trình hoạt động Vì vậy, hướng phát triển tương lai gần bán giày hoàn thiện chức ứng dụng Hướng phát triển tương lai xa, nhóm tiếp tục phát triển thêm chức hỗ trợ cho việc tìm kiếm phù hợp với thơng tin người dùng, tối ưu thuật toán, cải thiện chức giao diện người dùng 36 TÀI LIỆU THAM KHẢO AWS Amplify: https://aws.amazon.com/vi/amplify React Native: https://reactnative.dev/docs/performance GraphQL: https://graphql.org Một số tài liệu khác từ internet 37 ... tiến hành nghiên cứu xây dựng ứng dụng đa tảng với đề tài “Xây dựng ứng dựng bán giày The Wolf đa tảng” Mục tiêu đề tài Mục tiêu đề tài nhằm tạo ứng dụng đa tảng đáp ứng nhu cầu khách hàng việc... Khách hàng (tiếp theo) .18 Bảng 1.4 Đặc tả Usecase Khách hàng (tiếp theo) .19 Bảng 1.5 Đặc tả Usecase Người bán 19 Bảng 1.6 Đặc tả Usecase Người bán (tiếp theo) 20... THÔNG VIỆT – HÀN Khoa Khoa Học Máy Tính ĐỒ ÁN CHUYÊN NGÀNH ĐỀ TÀI: XÂY DỰNG ỨNG DỤNG BÁN GIÀY THE WOLF ĐA NỀN TẢNG Sinh viên thực hiện: NGUYỄN MINH CẢNH LÊ THỊ MỸ DUYÊN Lớp : 17IT3 Giảng viên hướng