TRƯỜNG ĐẠI HỌC ĐIỆN LỰCKHOA CÔNG NGHỆ THÔNG TIN BÁO CÁO CHUYÊN ĐỀ HỌC PHẦN LẬP TRÌNH TRÊN THIẾT BỊ DI ĐỘNG ĐỀ TI: XÂY DỰNG ỨNG BÁN ĐỒ NỘI THẤT Hà Nội tháng 12 năm 2023 Giảng viên hướng
GIỚI THIỆU LẬP TRÌNH DI ĐỘNG VÀ REACT NATIVE
Giới thiệu về lập trình di động
1.1.1 Khái quát về lập trình trên thiết bị di động
Lập trình trên thiết bị di động là quá trình phát triển ứng dụng và phần mềm cho điện thoại di động và máy tính bảng, với nhu cầu ngày càng tăng do sự phổ biến của thiết bị di động trong cuộc sống hàng ngày Các thiết bị này hoạt động trên các hệ điều hành di động như Android, iOS và Windows Phone Ứng dụng di động đa dạng, từ mạng xã hội, trò chơi, đến ứng dụng văn phòng và thương mại điện tử, đều cần được thiết kế và tối ưu hóa cho màn hình nhỏ và tương tác cảm ứng.
Giao diện người dùng (UI) và trải nghiệm người dùng (UX) đóng vai trò quan trọng trong lập trình di động, với mục tiêu tạo ra một môi trường thân thiện và dễ sử dụng Việc thiết kế các thành phần giao diện như nút, hình ảnh và thao tác cảm ứng không chỉ giúp nâng cao tính hấp dẫn mà còn đảm bảo trải nghiệm người dùng mượt mà và hiệu quả.
Lập trình di động thường yêu cầu kết nối mạng để truy cập dữ liệu từ máy chủ hoặc dịch vụ web, bao gồm việc gửi, nhận và đồng bộ hóa dữ liệu, đồng thời quản lý bảo mật hiệu quả.
Lập trình viên di động cần thực hiện các thử nghiệm kỹ thuật để đảm bảo ứng dụng hoạt động hiệu quả trên nhiều thiết bị khác nhau Sau khi hoàn tất thử nghiệm, họ sẽ tiến hành triển khai ứng dụng lên các cửa hàng ứng dụng như Google Play Store và Apple App Store.
Sau khi ứng dụng được triển khai, việc cập nhật và duy trì là bước quan trọng tiếp theo Lập trình viên phải liên tục kiểm tra và sửa lỗi, đồng thời thêm tính năng mới để cải thiện trải nghiệm người dùng Ngoài ra, họ cũng phải đảm bảo tính tương thích của ứng dụng với các phiên bản mới của hệ điều hành di động để tránh sự cố và lỗi không mong muốn.
1.1.2 Các đặc điểm của lập trình di động
- Dễ tiếp cận, dễ tìm hiểu và dễ học.
- Giúp lập trình viên tạo ra ứng dụng cho người sử dụng.
- Giúp hiện thực hóa ý tưởng của lập trình viên.
Lập trình viên có thể phát triển ứng dụng để kết nối mọi người trên toàn cầu, thông qua số lượng tải xuống và người dùng của ứng dụng đó.
1.1.3 Xu hướng công nghệ tương lai về lập trình di động Đa dạng về phương pháp phát triển: Lập trình di động có nhiều phương pháp khác nhau như web app, hybrid app và native app, nhưng tất cả đều cần chạy trên mã gốc của một nền tảng cụ thể.
Khi các tổ chức muốn phát triển ứng dụng cho một nền tảng cụ thể, họ thường tìm kiếm những ứng viên có hiểu biết sâu sắc về nền tảng đó Việc sở hữu kiến thức chuyên môn không chỉ giúp tối ưu hóa quy trình phát triển mà còn đảm bảo chất lượng và hiệu quả của sản phẩm cuối cùng.
Quản lý dự án không chỉ là nhiệm vụ của các nhà quản lý; lập trình viên cũng cần nắm vững quy trình phát triển phần mềm và có khả năng làm việc hiệu quả trong các phương pháp như Agile để tối ưu hóa quy trình làm việc.
Quy trình Agile là một phương pháp hiệu quả giúp tối ưu hóa và rút ngắn thời gian phát triển phần mềm Trong Agile, có nhiều phương pháp khác nhau như Scrum, Kanban và XP, cho phép lập trình viên lựa chọn phương pháp phù hợp nhất với yêu cầu của dự án.
Các công cụ hỗ trợ Agile như Pivotal và Trello giúp lập trình viên phát triển phần mềm một cách hiệu quả, tối ưu hóa quy trình làm việc và nâng cao năng suất.
Giới thiệu về React Native
React Native là một framework cho phép lập trình viên phát triển ứng dụng Native chỉ bằng ngôn ngữ Javascript Điều này có nghĩa là bạn không cần phải sử dụng nhiều ngôn ngữ lập trình khác nhau để tạo ra ứng dụng Native, mà chỉ cần tập trung vào Javascript React Native đã thay đổi cách nhìn nhận về phát triển ứng dụng native, mang lại sự đơn giản và hiệu quả cho lập trình viên.
Sự ra đời của React Native đã mang lại cơ hội cho lập trình viên web tạo ra ứng dụng native, khắc phục những hạn chế của ứng dụng web và hybrid Với chỉ một kỹ sư thành thạo JavaScript, doanh nghiệp có thể phát triển sản phẩm trên nhiều nền tảng như web, desktop, server và mobile, giúp tiết kiệm nhân lực và tối ưu hóa quy trình phát triển.
Khi xây dựng ứng dụng với React Native, tính năng Live Reload được tích hợp sẵn, cho phép tải lại chỉ những phần mã đã thay đổi, khác với tính năng Reload tải lại toàn bộ mã nguồn Điều này giúp tăng hiệu suất phát triển Bên cạnh đó, bạn có thể dễ dàng debug JavaScript trên Chrome và Safari, trong khi các lỗi liên quan đến Native cần sử dụng XCode cho iOS hoặc Android Studio cho Android.
1.2.2 Tại sao nên dùng React Native
- Có thể tái sử dụng code
React Native cho phép các lập trình viên tái sử dụng mã nguồn trong quá trình phát triển ứng dụng đa nền tảng, với khả năng tái sử dụng lên đến 80-90% đoạn mã Điều này giúp tiết kiệm thời gian và công sức so với việc viết mã riêng biệt cho từng nền tảng, mang lại lợi ích lớn cho người dùng.
Tiết kiệm thời gian và giảm chi phí phát triển của một ứng dụng.
Tận dụng nguồn nhân lực tốt hơn
Duy trì ít code hơn, ít bugs hơn
Các tính năng trong cả 2 platforms cũng tương tự nhau.
- Cộng đồng người dùng lớn
React Native là một trong những framework được ưa chuộng nhất, theo khảo sát của Stack Overflow năm 2019 Với cộng đồng người dùng rộng lớn toàn cầu, bạn dễ dàng tìm kiếm sự hỗ trợ khi gặp phải lỗi.
- Tính ổn định và tối ưu Được phát triển bởi Facebook, React Native có hiệu năng ổn định khá cao
Mã React Native giúp đơn giản hóa quá trình xử lý dữ liệu
Đội ngũ phát triển ứng dụng không quá lớn.
Xây dựng ứng dụng ít native code nhất cho nhiều hệ điều hành khác nhau.
Trải nghiệm người dùng tốt hơn khi so sánh với ứng dụng Hybrid.
1.2.3 Cách hoạt động React Native Ứng dụng viết bằng React Native được chia làm 2 phần: phần view (hiển thị) và phần xử lý.
Phần hiển thị được biên dịch từ JavaScript sẽ tương ứng với các thành phần của hệ thống như điều hướng, tab và touch Cấu trúc view này được lấy cảm hứng từ Virtual DOM của React JS, nơi mọi thao tác trên view được thực hiện trên một cây DOM ảo, trước khi được React Native chuyển đổi và hiển thị bằng native view.
Phần xử lý vẫn được thực hiện trực tiếp bằng ngôn ngữ javascript: ví dụ
“1+1=2”, biểu thức này được xử lý dưới bộ core thực thi Javascript, không phải thông dịch qua Java hay Swift/Objective-C rồi mới làm phép tính
APP BÁN ĐỒ NỘI THẤT FURNITUREHUB
Giới thiệu đề tài
"FurnitureHub" là ứng dụng di động lý tưởng cho việc mua sắm và khám phá các sản phẩm nội thất đa dạng và hấp dẫn Ứng dụng này mang đến nền tảng tiện lợi giúp người dùng dễ dàng tìm kiếm, nhận tư vấn và mua sắm đồ nội thất, nhằm nâng cao không gian sống của họ.
Chức năng và tính năng:
Danh mục đa dạng: Hiển thị các danh mục sản phẩm nội thất, bao gồm nội thất phòng khách, phòng ngủ, phòng bếp, và nhiều loại nội thất khác.
Tìm kiếm và lọc: Cho phép người dùng tìm kiếm sản phẩm theo từ khóa, mức giá, màu sắc, kích thước và thương hiệu.
Thông tin chi tiết sản phẩm bao gồm hình ảnh, mô tả, giá cả và đánh giá từ người dùng khác, giúp người tiêu dùng có cái nhìn tổng quan và chính xác hơn về sản phẩm.
Tích hợp thanh toán là tính năng quan trọng, cho phép người dùng thực hiện giao dịch mua sắm một cách dễ dàng và an toàn Người tiêu dùng có thể lựa chọn nhiều phương thức thanh toán khác nhau, bao gồm thẻ tín dụng, ví điện tử và hình thức thanh toán khi nhận hàng (COD).
Giỏ hàng và đặt hàng: Cho phép người dùng thêm sản phẩm vào giỏ hàng, kiểm tra đơn hàng, và theo dõi tình trạng giao hàng.
Công nghệ thực tế ảo tăng cường (AR) cho phép người dùng xem trước sản phẩm trong không gian thực của họ, giúp họ hình dung rõ hơn về cách sản phẩm sẽ phù hợp với môi trường sống trước khi quyết định mua hàng.
Trải nghiệm mua sắm trực tuyến mang lại sự thuận tiện và linh hoạt cho người dùng, đồng thời tạo cơ hội cho các nhà sản xuất và thương hiệu nội thất tiếp cận khách hàng dễ dàng hơn Điều này không chỉ tăng cường cơ hội bán hàng và doanh thu mà còn hỗ trợ khách hàng trong việc tìm kiếm và lựa chọn sản phẩm phù hợp Hơn nữa, nền tảng này còn khuyến khích việc chia sẻ đánh giá và kết nối cộng đồng yêu thích nội thất, tạo ra một môi trường giao lưu và học hỏi.
Phân tích thiết kế hệ thống
2.2.1 Sơ đồ UseCase tổng quát
Hình 2 1 Biểu đồ usecase tổng quát
Hình 2 2 Biểu đồ usecase đăng nhập
UseCase Tìm kiếm sản phẩm:
Hình 2 3 Biểu đồ usecase tìm kiếm sản phẩm
Hình 2 4 Biểu đồ usecase mua hàng
UseCase Chỉnh sửa hồ sơ
Hình 2 5 Biểu đồ usecase chỉnh sửa hồ sơ
Biểu đồ tuần tự chức năng đăng nhập
Hình 2 6 Biểu đồ tuần tự chức năng đăng nhập
Biểu đồ tuần tự chức năng tìm kiếm sản phẩm
Hình 2 7 Biểu đồ tuần tự chức năng tìm kiếm sản phẩm
Biểu đồ tuần tự chức năng mua hàng
Hình 2 8 Biểu đồ tuần tự chức năng mua hàng
Biểu đồ tuần tự chức năng chỉnh sửa hồ sơ
Hình 2 9 Biểu đồ tuần tự chức năng chỉnh sửa hồ sơ
Layout các trang
Hình 2 10 Giao diện trang chính
Hình 2 11 Layout trang sản phẩm
2.3.3 Layout trang chi tiết sản phẩm
Hình 2 12 Layout trang chi tiết sản phẩm
Hình 2 13 Layout trang đăng nhập
Hình 2 14 Layout trang đăng ký
Hình 2 15 Layout trang giới thiệu
Hình 2 16 Layout trang giỏ hàng
Hình 2 17 Layout trang tìm kiếm
XÂY DỰNG ỨNG DỤNG
Trang chủ
Hình 3 1 Giao diện trang chính
Trang sản phẩm
Hình 3 2 Giao diện sản phẩm
Trang chi tiết sản phẩm
Hình 3 3 Giao diện chi tiết sản phẩm
Đăng nhập
Hình 3 4 Giao diện đăng nhập
Đăng ký
Hình 3 5 Giao diện đăng ký
Hồ sơ
Hình 3 6 Giao diện hồ sơ
Giỏ hàng
Hình 3 7 Giao diện giỏ hàng
Giao diện tìm kiếm
Hình 3 8 Giao diện tìm kiếm