1. Trang chủ
  2. » Cao đẳng - Đại học

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)

48 60 0

Đang tải... (xem toàn văn)

Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống

THÔNG TIN TÀI LIỆU

Thông tin cơ bản

Tiêu đề Tìm hiểu về React Native và xây dựng 1 ứng dụng bán giày
Tác giả Võ Thời Đại
Người hướng dẫn TS. Nguyễn Công Hoan
Trường học Đại học Quốc gia TP. Hồ Chí Minh
Chuyên ngành Kỹ thuật phần mềm
Thể loại báo cáo đồ án
Năm xuất bản 2022
Thành phố Thành phố Hồ Chí Minh
Định dạng
Số trang 48
Dung lượng 1,91 MB

Cấu trúc

  • Chương 1. GIỚI THIỆU (6)
    • 1.1. Đặt vấn đề (6)
    • 1.2. Giải pháp (6)
    • 1.3. Mục tiêu (6)
  • Chương 2. TỔNG QUAN (7)
    • 2.1. Tổng quan về đồ án (7)
      • 2.1.1. Tên đồ án (7)
      • 2.1.2. Link github quản lý source code (7)
    • 2.2. Cơ sở lý thuyết (7)
      • 2.2.1. Nền tảng Cross Platform (7)
    • 2.3. Công nghệ sử dụng (10)
      • 2.3.1. Ngôn ngữ lập trình Java-scripts (10)
      • 2.3.2. React-Native (12)
      • 2.3.3. Phần mềm lập trình VSCode (19)
      • 2.3.4. Dịch vụ Github (22)
  • Chương 3. ỨNG DỤNG MINH HỌA (22)
    • 3.1. Cơ sở dữ liệu (22)
    • 3.2. Tổng quan ứng dụng đã phát triển (23)
    • 3.3. Product Requirement Document (23)
      • 3.3.1. Objective (23)
      • 3.3.2. Release (24)
      • 3.3.3. Features (25)
      • 3.3.4. Analytics – Phân tích (31)
      • 3.3.5. Future work – Hướng phát triển (32)
    • 3.4. Các màn hình minh họa (34)
      • 3.4.1. Màn hình giới thiệu ứng dụng (34)
      • 3.4.2. Màn hình trang chủ (34)
      • 3.4.3. Màn hình đăng nhập (35)
      • 3.4.4. Màn hình sản phẩm (36)
      • 3.4.5. Màn hình chi tiết sản phẩm (37)
      • 3.4.6. Màn hình giỏ hàng và thanh toán (39)
      • 3.4.7. Thanh điều hướng các loại sản phẩm (41)
      • 3.4.8. Màn hình các sản phẩm yêu thích (42)
      • 3.4.9. Màn hình ưu đãi (43)
      • 3.4.10. Màn hình lịch sử giao dịch (44)
  • Chương 4. KIẾN TRÚC HỆ THỐNG (45)
  • Chương 5. KẾT QUẢ ĐẠT ĐƯỢC VÀ HƯỚNG PHÁT TRIỂN (47)
  • Chương 6. TÀI LIỆU THAM KHẢO (0)

Nội dung

GIỚI THIỆU

Đặt vấn đề

Hiện nay, nhiều cửa hàng vẫn hoạt động chủ yếu theo phương thức thủ công, dựa vào kinh nghiệm của nhân viên Sự gia tăng đáng kể về lượng hàng hóa nhập xuất khiến cho công tác quản lý và mua bán trở nên tốn thời gian và công sức, đồng thời độ chính xác không cao Điều này thường dẫn đến thiệt hại cho cửa hàng.

Giải pháp

Nhóm em đã phát triển một ứng dụng hỗ trợ quản lý và bán hàng trực tuyến, mang tên "Xây dựng 1 ứng dụng bán giày" Ứng dụng này nhằm hiện đại hóa hệ thống quản lý và bán hàng, thay thế công tác quản lý thủ công bằng phần mềm, từ đó nâng cao trải nghiệm mua sắm trực tuyến cho người dùng.

Mục tiêu

Phát triển phần mềm quản lý sản phẩm và đơn hàng cho cửa hàng thời trang, giúp tối ưu hóa quy trình kinh doanh và nâng cao trải nghiệm mua sắm của khách hàng Ứng dụng này đáp ứng hiệu quả các nhu cầu đa dạng trong lĩnh vực thời trang, từ quản lý tồn kho đến theo dõi trạng thái đơn hàng.

Xây dựng giao diện phần mềm trực quan, sinh động và dễ sử dụng là rất quan trọng Việc sử dụng animation giúp các thành phần hoạt động mượt mà, mang lại trải nghiệm thú vị và tiện ích cho người dùng.

TỔNG QUAN

Tổng quan về đồ án

Tên tiếng việt: Tìm hiểu về React Native và xây dựng 1 ứng dụng bán giày

2.1.2 Link github quản lý source code https://github.com/daivo030601/Nike-Shop.git

Cơ sở lý thuyết

Trong công nghệ điện toán, đa nền tảng (cross-platform) đề cập đến phần mềm và phương thức điện toán hoạt động trên nhiều nền tảng máy tính khác nhau Phần mềm đa nền tảng được chia thành hai loại: loại đầu tiên yêu cầu thiết kế hoặc biên dịch riêng cho từng nền tảng, trong khi loại thứ hai có thể chạy trực tiếp trên bất kỳ nền tảng nào mà không cần chuẩn bị đặc biệt Ví dụ, phần mềm viết bằng ngôn ngữ thông dịch hoặc biên dịch sang mã bytecode có thể chạy thông qua trình thông dịch hoặc gói run-time tiêu chuẩn trên mọi nền tảng.

Cross platform hay Multi Platform là nền tảng cho phép sử dụng một mã nguồn duy nhất trên nhiều ứng dụng khác nhau, giúp tiết kiệm thời gian và công sức trong quá trình phát triển.

Cross platform đang trở thành lựa chọn phổ biến của nhiều lập trình viên nhờ vào những lợi thế vượt trội Khi lập trình, việc chọn lựa framework phù hợp theo ưu, nhược điểm của từng loại là rất quan trọng, vì Cross platform sử dụng các framework đa nền tảng Hiện nay, React-Native, Xamarin và Flutter là ba framework nổi bật nhất cho phát triển ứng dụng di động trên nhiều hệ điều hành khác nhau, chủ yếu là iOS và Android Với các framework này, lập trình viên chỉ cần phát triển một dự án duy nhất để tạo ra ứng dụng có thể chạy trên cả hai nền tảng smartphone này.

Ba framework phát triển mobile phổ biến

Sự ra đời của các frameworks đã tạo nên nhiều trường phái và cộng đồng phát triển ứng dụng, đồng thời dẫn đến các tranh luận về tiêu chí đánh giá và xếp hạng cho những frameworks này.

2.2.1.2 Ưu điểm, hạn chế của Cross Platform Ưu điểm:

 Có thể sử dụng một bản code trên nhiều phiên bản khác nhau

 Sử dụng Cross platform sẽ giúp tiết kiệm được lượng lớn chi phí và công sức viết code

 Cross platform thích hợp với những dự án lớn, đòi hỏi tính linh hoạt và đa dạng

Mặc dù tiết kiệm chi phí và linh hoạt cao, nhưng hiện tại chưa có khả năng khai thác thư viện từ các nền tảng lớn như Android hoặc iOS.

 Quá trình cấp phép cho công nghệ của ứng dụng Cross platform gặp nhiều khó khăn và phức tạp

Công nghệ sử dụng

2.3.1.Ngôn ngữ lập trình Java-scripts

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: 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ề của trang web

 JavaScript: Cải thiện cách hoạt động của trang web

JavaScript là ngôn ngữ lập trình dễ học và linh hoạt, phù hợp cho nhiều mục đích khác nhau như cải thiện tính năng website, phát triển game và xây dựng ứng dụng web Cộng đồng, đặc biệt là trên Github, đã đóng góp hàng ngàn mẫu template và ứng dụng JavaScript, giúp người dùng dễ dàng tiếp cận và áp dụng.

2.3.1.1 Lịch sử hình thành Java-scripts

JavaScript được phát triển bởi Brandan Eich tại Netscape trong vòng mười ngày vào tháng 9 năm 1995 Ban đầu, ngôn ngữ này được gọi là Mocha, sau đó đổi tên thành Mona và LiveScript trước khi trở thành JavaScript như hiện nay Phiên bản đầu tiên của JavaScript có tính năng hạn chế và bị độc quyền bởi Netscape.

10 tiếp tục phát triển theo thời gian, nhờ một phần vào cộng đồng các lập trình viên đã liên tục làm việc với nó

Vào năm 1996, JavaScript chính thức được gọi là ECMAScript Sau đó, ECMAScript 2 được phát hành vào năm 1998, và ECMAScript 3 ra mắt vào năm 1999 Từ đó, JavaScript đã không ngừng phát triển và hiện nay hoạt động trên tất cả các trình duyệt cũng như trên nhiều thiết bị, từ di động đến máy tính bàn.

JavaScript đã phát triển mạnh mẽ và đạt tỷ lệ 92% website sử dụng vào năm 2016 Chỉ sau 20 năm, ngôn ngữ lập trình này đã trở thành công cụ quan trọng nhất trong bộ công cụ của lập trình viên web Nếu bạn sử dụng internet, chắc chắn bạn đã tiếp xúc với JavaScript.

2.3.1.2 Ưu, nhược điểm của Java-script Ưu điểm của Javascript:

JavaScript cho phép tương tác với người dùng ở phía client, đồng thời tạo ra sự tách biệt giữa các phiên làm việc của từng client Chẳng hạn, khi hai người dùng truy cập vào hai trình duyệt khác nhau, mỗi người sẽ có những phiên xử lý JavaScript độc lập, không ảnh hưởng đến nhau.

 Javascript có thể hoạt động trên nhiều nền tảng khác nhau, từ Windows, macOS cho đến các hệ điều hành trên mobile

 Javascript là một ngôn ngữ dễ tiếp cận, bạn sẽ dễ dàng học nó mà không cần phải cài đặt quá nhiều phần mềm

Ngôn ngữ lập trình dễ bị lộ mã nguồn khiến cho việc khai thác trở nên đơn giản Hacker có thể chèn mã vào console của trình duyệt, và trình duyệt sẽ coi đoạn mã đó là hợp lệ, cho phép hacker gửi các yêu cầu đến server một cách dễ dàng.

Javascript Framework là tập hợp các thư viện phát triển dựa trên ngôn ngữ Javascript, mỗi framework được thiết kế để phục vụ cho các lĩnh vực khác nhau Chẳng hạn, Angular và React chuyên về xử lý frontend, trong khi NodeJS tập trung vào backend jQuery là một thư viện mạnh mẽ hỗ trợ việc thao tác với DOM HTML và CSS.

Sức mạnh của Javascript là không thể chối cãi, bằng chứng là hiện nay có rất nhiều libraries và framework được viết bằng Javascript ra đời như:

 Angular: Một thư viện dùng để xây dựng ứng dụng Single Page

 NodeJS: Một thư viện được phát triển phía Server dùng để xây dựng ứng dụng realtime

Sencha Touch is a framework designed for developing mobile applications, while ExtJS is a framework tailored for creating web applications Additionally, jQuery is a powerful library known for its impressive effects and functionalities.

 ReactJS: Một thư viện viết ứng dụng web

 Và còn nhiều thư viện khác

2.3.2.1 Tổng quan về React-Native Được phát triển bởi Facebook, React Native là một framework hướng đến phát triển ứng dụng di động đa nền tảng Với sự trợ giúp của React Native, lập trình viên (developer) có thể sử dụng JavaScript để tạo ra mobile apps (ứng dụng di động) hỗ trợ cho cả nền tảng Android và iOS Instagram,

Facebook, Skype,… là những ứng dụng nổi bật sử dụng React Native

React Native đã chính thức trở thành mã nguồn mở vào tháng 3 năm 2015 và từ đó đến nay, nó đã được ứng dụng rộng rãi trong nhiều ứng dụng cả trong nước và quốc tế.

2.3.2.2 Các cách thức hoạt động của React-Native

React Native hoạt động được nhờ tích hợp 2 thread là Main Thread và JS Thread cho ứng dụng mobile Trong đó:

 Main Thread: cập nhật giao diện người dùng(UI) và xử lý tương tác người dùng

 JS Thread: thực thi và xử lý code Javascript

 Để truyền dữ liệu giữa các component, ReactJS cho ra đời khái niệm props (hay còn gọi là properties)

Trong ReactJS, các component con không nên thay đổi giá trị của props, vì props có thể được truyền cho nhiều component con khác nhau Việc thay đổi props trong các component con có thể gây ra sự nhầm lẫn trong quá trình kiểm thử và làm mất tính nhất quán của dữ liệu giữa các component.

Props được sử dụng để nhận dữ liệu từ component cha, trong khi state lưu trữ dữ liệu của chính component với giá trị có thể thay đổi tùy thuộc vào logic bên trong.

Khi cập nhật giá trị của state, lập trình viên cần lưu ý rằng mỗi lần state thay đổi, component sẽ được render lại Vì vậy, việc thay đổi giá trị state cần được cân nhắc kỹ lưỡng để tránh render liên tục, từ đó giảm hiệu suất của ứng dụng.

Mỗi component có các method lifecycle cho phép bạn có thể override để chạy code hiển thị lên màn hình mobile Lifecycle thường được chia làm 3 phần chính:

Bao gồm các method được gọi khi 1 instance của component được khởi tạo:

 componentDidMount() render() là bắt buộc và luôn được thực thi trong khi các method khác là optional

Một component được update khi có sự thay đổi về state hay props của nó React có 5 methods được gọi khi một component được update:

14 render() method là require và luôn được gọi trong khi các method còn lại là optional

Khi một component bị xóa khỏi DOM, các hàm trong nhóm này sẽ được thực thi để xử lý các biến thời gian như SetInterval và ngắt các yêu cầu mạng.

Hooks are functions that enable the integration of React state and lifecycle features into functional components They allow developers to utilize state and lifecycle methods without the need for ES6 classes, simplifying the code and eliminating confusion related to the 'this' keyword.

ỨNG DỤNG MINH HỌA

Cơ sở dữ liệu

Ứng dụng sử dụng cơ sở dữ liệu noSQL để lưu trữ thông tin như bộ sưu tập, sản phẩm và chủ đề dưới dạng JSON và lưu trữ cục bộ Dữ liệu về sản phẩm và ngành hàng được tạo tự động do chương trình chỉ là bản demo Thông tin giỏ hàng và đăng nhập người dùng được lưu trữ trên cơ sở dữ liệu thời gian thực (Firebase) để đảm bảo tốc độ truy xuất nhanh Để duy trì tính liên tục của các phiên đăng nhập, hành động của người dùng được lưu trong bộ nhớ cache của ứng dụng (AsyncStorage).

Product Requirement Document

Trên thị trường hiện nay, nhiều ứng dụng tương tự đã xuất hiện, tuy nhiên, hầu hết chỉ chú trọng vào hiệu năng, nhằm tạo ra ứng dụng nhẹ và nhanh Điều này dẫn đến việc ít được đầu tư vào giao diện và các hiệu ứng tương tác, khiến trải nghiệm người dùng chưa thực sự tối ưu.

NikeShop sẽ là ứng dụng thương mại điện tử tiên phong, tích hợp hiệu ứng, hoạt ảnh và tương tác người dùng, mang đến trải nghiệm mua sắm độc đáo và hấp dẫn.

Goals Là ứng dụng được nhắc đến đầu tiên khi khách hàng có nhu cầu mua các sản phẩm giày

Cập nhập lập tức giá sale của các thương hiệu giúp người dùng nắm bắt cơ hội mua giày với giá ưu đãi nhất

Để khách hàng nắm bắt giá sale thị trường từ hãng, nhóm cần liên tục theo dõi và cập nhật thông tin thị trường, đồng thời tìm kiếm nguồn hàng uy tín với mức giá ưu đãi, nhằm nhập kho nhanh chóng nhất có thể.

Nghiên cứu các chính sách đổi trả, kiểm trả thật giả, giao hàng, ưu đãi cho khách quen nhằm thu hút và tiếp cận khách hàng nhanh chóng

Tìm hiểu thêm về design, tạo poster quảng cáo bắt mắt giới thiệu tới các khách hàng tiềm năng

Vì ứng dụng đánh mạnh vào giao diện, trải nghiệm của người dùng nên luôn luôn lắng nghe feedback của người dùng và điều chỉnh hợp lí

Khách hàng tiềm năng là những người yêu thích việc săn lùng và sở hữu giày chính hãng với giá cả hợp lý từ các thương hiệu uy tín Tuy nhiên, họ gặp khó khăn trong việc trực tiếp đến cửa hàng do số lượng cửa hàng hạn chế tại Việt Nam.

Những khách hàng không am hiểu về giày muốn tìm một nơi có nhiều sự lựa chọn về loại giày cũng như mài sắc khác nhau

Date Thời gian dự kiến: 25/6/2022

Nhằm nổi bật giữa các ứng dụng bán giày dép hiện có, nhóm đã tập trung vào việc cải thiện giao diện và nâng cao trải nghiệm người dùng, tạo nên điểm mạnh và sự khác biệt độc đáo cho ứng dụng.

Nhóm đã nghiên cứu và tham khảo các buổi ra mắt sản phẩm của các doanh nghiệp nổi tiếng để phát triển ứng dụng Ứng dụng này được thiết kế như một cửa hàng online, giúp người tiêu dùng dễ dàng khám phá các bộ sưu tập và những mẫu giày mới nhất, nổi tiếng từ thương hiệu Nike trên toàn cầu.

NikeShop là một ứng dụng mẫu được phát triển để trình diễn khả năng tạo ra nhanh chóng các ứng dụng thương mại điện tử dựa trên mã nguồn mở Điều này mở ra cơ hội mở rộng cho nhiều ngành hàng và cửa hàng khác nhau.

Features 1 Đăng ký/Đăng nhập

2 Gợi ý các dòng sản phẩm nổi bật

3 Phân chia các sản phẩm theo từng phân loại

4 Thanh điều hướng tới các loại sản phẩm

6 Thanh toán sản phẩm qua thẻ ngân hàng

7 Tạo danh sách các sản phẩm yêu thích

8 Xem thông tin chi tiết sản phẩm

9 Cập nhập thông tin tài khoản

Feature Đăng ký/ Đăng nhập

Description Người dùng có thể dùng email để đăng ký và đăng nhập vào ứng dụng

Purpose Việc đăng nhập vào ứng dụng sẽ lưu lại thông tin người dùng, và giúp người dùng lưu lại những phiếu giảm giá khi mua sắm

User proplem Nếu không có chức năng đăng ký/đăng nhập người dùng sẽ phải nhập lại thông tin thanh toán và thông tin địa chỉ giao

25 hàng mỗi lần muốn mua sản phẩm

Tiết kiệm thời gian cho việc nhập lại thông tin nhiều lần giúp nâng cao trải nghiệm người dùng, đặc biệt khi họ thường xuyên kiểm tra ứng dụng để nhận các phiếu giảm giá.

3.3.3.2 Gợi ý các dòng sản phẩm nổi bật

Feature Gợi ý các dòng sản phẩm nổi bật

Description Người dùng khi mở ứng dụng sẽ nhìn thấy đầu tiên là các sản phẩm nổi bật, được nhiều người dùng chọn mua hoặc đang giảm giá

Mục đích của việc gợi ý sản phẩm là giúp người dùng dễ dàng tiếp cận thông tin về các loại giày đang được ưa chuộng trên thị trường hoặc đang có chương trình giảm giá.

Nếu không có chức năng gợi ý, người dùng sẽ mất nhiều thời gian để tìm kiếm thông tin về giày giảm giá hoặc đang được ưa chuộng Việc này không chỉ gây khó khăn cho khách hàng mà còn có thể dẫn họ đến các ứng dụng mua sắm khác, làm giảm khả năng tương tác của họ với ứng dụng hiện tại.

Tiết kiệm thời gian tìm kiếm sản phẩm phù hợp giúp người dùng nâng cao khả năng tương tác và mua sắm trên ứng dụng.

3.3.3.3 Phân chia các sản phẩm theo từng phân loại

Feature Phân chia các sản phẩm theo từng phân loại

Description Mỗi sản phẩm sẽ được phân chia theo từng loại, ví dụ như: giày cho Nam, Nữ hoặc Trẻ em…

Việc phân chia sản phẩm giúp người dùng dễ dàng tìm kiếm mặt hàng phù hợp với nhu cầu mua sắm của mình, đồng thời hỗ trợ việc so sánh giá, chất lượng và mẫu mã giữa các sản phẩm tương tự.

Nếu sản phẩm không được phân chia rõ ràng, người dùng sẽ phải nhấn vào từng sản phẩm để xem thông tin chi tiết, điều này không chỉ tốn thời gian mà còn mang lại trải nghiệm kém cho người dùng Việc phân loại sản phẩm giúp người dùng dễ dàng tìm kiếm và lựa chọn sản phẩm phù hợp với nhu cầu của họ.

User value Tiết kiếm được nhiều thời gian trong việc tìm kiếm sản phẩm phù hợp với nhu cầu của người dùng, nâng cao trải nghiệm của người dùng

3.3.3.4 Thanh điều hướng tới các loại sản phẩm

Feature Thanh điều hướng tới các loại sản phẩm

Description Tất cả các loại sản phẩm do NikeShop cung cấp đều được hiển thị ở thanh điều hướng để tìm kiếm sản phẩm một cách nhanh chóng

Việc sắp xếp các loại sản phẩm và cung cấp khả năng chuyển tới trang tương ứng sẽ giúp người dùng tiết kiệm thời gian trong việc tìm kiếm và lọc sản phẩm Nếu không có thanh điều hướng, người dùng sẽ gặp khó khăn khi phải tự tìm kiếm và lọc theo các tiêu chí cần thiết cho sản phẩm.

User value Tiết kiếm được thời gian trong việc tìm kiếm sản phẩm cùng loại

Description Cho phép khách hàng có thể thêm các sản phẩm muốn mua vào giỏ hàng, và tiến hành đặt hàng một cách nhanh chóng

Mục đích của ứng dụng là tăng tốc độ mua sắm, giúp người dùng dễ dàng quản lý các mặt hàng mong muốn thông qua danh sách giỏ hàng.

User proplem Nếu không có giỏ hàng, khách hàng sẽ gặp khó khăn trong việc quản lý những món hàng muốn mua tại cửa hàng

Các màn 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 sẽ có các màn hình slider để giới thiệu qua về ứng dụng NikeShop

Màn hình giới thiệu ứng dụng

Trang chủ của NikeShop sẽ hiển thị các sản phẩm nổi bật được nhiều khách hàng chọn mua trong tháng hoặc các sản phẩm đang giảm giá

3.4.3 Màn hình đăng nhập Để thực hiện thao tác đăng nhập bằng tài khoản đã được đăng ký từ trước

Màn hình đăng nhập

Tất cả sản phẩm của cửa hàng sẽ được phân loại tại màn hình sản phẩm, hỗ trợ việc tìm kiếm sản phẩm của người dùng

3.4.5 Màn hình chi tiết sản phẩm

Người dùng có thể xem thông tin chi tiết của sản phẩm trên trang này trước khi thêm vào giỏ hàng Thông tin bao gồm chất liệu, kích thước giày, giá cả, tên sản phẩm, dòng sản phẩm và một số hình ảnh minh họa của giày.

Màn hình chi tiết sản phẩm

Màn hình chi tiết sản phẩm

3.4.6 Màn hình giỏ hàng và thanh toán

Sau khi người dùng đã lựa chọn màu sắc và kích thước giày, họ có thể thêm sản phẩm vào giỏ hàng và tiếp tục mua sắm các mặt hàng khác Trên màn hình giỏ hàng, người dùng có khả năng chỉnh sửa số lượng sản phẩm, xóa sản phẩm không mong muốn và thực hiện thanh toán cho giỏ hàng của mình.

Màn hình giỏ hàng và thanh toán

Người dùng có nhiều lựa chọn về phương thức thanh toán và có thể sử dụng các phiếu giảm giá trong ưu đãi của mình.

Màn hình chọn phương thức thanh toán và chọn phiếu giảm giá

3.4.7 Thanh điều hướng các loại sản phẩm

Người dùng có thể dùng thanh điều hướng để tới trang sản phẩm được lọc bởi loại sản phẩm người dùng chọn

Thanh điều hướng các loại sản phẩm

3.4.8 Màn hình các sản phẩm yêu thích

Màn hình hiển thị danh sách các sản phẩm yêu thích được thêm bởi người dùng

Màn hình các sản phẩm yêu thích

Màn hình chứa các phiếu giảm giá mà người dùng đã thu nhập được

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ử các sản phẩm mà người dùng đã mua trên ứng dụng

Màn hình lịch sử giao dịch

KIẾN TRÚC HỆ THỐNG

Ứng dụng được phát triển bằng React Native, cho phép xây dựng ứng dụng di động nhanh chóng với mã nguồn mở dễ dàng chỉnh sửa và thêm chức năng mới Nó hỗ trợ việc xây dựng ứng dụng cho cả hai hệ điều hành Android và iOS.

45 chương trình sẽ là tạo ra các Class Component nhằm tái sử dụng nhiều lần

Mỗi màn hình trong ứng dụng được xem như một View, bao gồm các thành phần giao diện con bên trong Ứng dụng áp dụng Redux để quản lý state, đảm bảo tính nhất quán của dữ liệu và tăng tốc độ truy cập Các thành phần giao diện cần truy xuất state sẽ được kết nối với Store State thông qua hàm connect của Redux.

Do tính chất bất đồng bộ của Javascript, các hành động của người dùng như đăng nhập và thanh toán cần sử dụng middleware Redux-Thunk để sắp xếp trình tự thực hiện một cách hợp lý.

Kiến trúc của một ứng dụng ReactNative sử dụng Redux

Ứng dụng chú trọng vào giao diện và trải nghiệm người dùng, vì vậy việc tích hợp các hiệu ứng và hoạt ảnh trở nên quan trọng Animated là một package hữu ích giúp tạo ra các hiệu ứng trong React, nâng cao tính tương tác và thu hút người dùng.

KẾT QUẢ ĐẠT ĐƯỢC VÀ HƯỚNG PHÁT TRIỂN

Ứng dụng NikeShop đã hoàn thành mục tiêu tạo ra một nền tảng thương mại điện tử với các chức năng cơ bản, cải tiến giao diện người dùng và tăng cường tương tác thông qua hiệu ứng và hoạt ảnh Ứng dụng sử dụng cơ sở dữ liệu thời gian thực để nâng cao tốc độ xử lý và lưu lại hành động của người dùng, mang lại trải nghiệm tốt hơn khi quay lại Tuy nhiên, vẫn tồn tại một số vấn đề như tình trạng giật lag trên thiết bị có hệ điều hành cũ hoặc cấu hình thấp, và việc lạm dụng hiệu ứng cần được tinh chỉnh để cải thiện hiệu suất.

Trong tương lai, nhóm sẽ chú trọng vào việc phát triển phần backend cho ứng dụng, đồng thời cải tiến trải nghiệm người dùng thông qua việc tích hợp các tính năng nâng cao như chatbot và hệ thống gợi ý.

Chương 6 TÀI LIỆU THAM KHẢO

- Animation with reactnative: https://reactnative.dev/docs/animated

- Các animations được sử dụng: https://www.codedaily.io/courses/Master-React-Native-Animations

- React Native: https://reactnative.dev

Ngày đăng: 16/06/2022, 20:34

TRÍCH ĐOẠN

TÀI LIỆU CÙNG NGƯỜI DÙNG

TÀI LIỆU LIÊN QUAN

w