CHƯƠNG I : CƠ SỞ LÝ THUYẾT 1.1 TỔNG QUAN VỀ ANDROID 1.1 Định nghĩa Android là hệ điều hành mã nguồn mở, dựa trên Linux Kernel, dành cho các thiết bị di động nói chung (điện thoại, máy tính bảng, đồng hồ thông minh, máy nghe nhạc,…). Ban đầu, Android được phát triển bởi Tổng công ty Android, với sự hỗ trợ tài chính từ Google và sau này được chính Google mua lại vào năm 2005 và ra mắt vào năm 2007. Chiếc điện thoại đầu tiên chạy Android được bán vào tháng 10 năm 2008.2 Kiến trúc của Android Hệ điều hành Android là 1 ngăn xếp các thành phần phần mềm, được chia thành 5 phần và 4 lớp chính: Linux Kernel Libraries Application Framework Applications Hình 1 - 1: Kiến trúc của Android 1.3 Phiên bản mới nhất hiện tại của Android 3 do an Tại hội nghị dành cho các nhà lập trình viên của mình diễn ra ở California (I/O 2019), Google đã giới thiệu hệ điều hành Android phiên bản mới nhất, Android 10 Q. Hỗ trợ smartphone màn hình gập, thêm giao diện tối màu, tích hợp sâu AI.
là những nét nổi bật trên hệ điều hành này.2 FRAMEWORK REACT NATIVE 1.1 Định nghĩa React Native là framework xây dựng ứng dụng di động native sử dụng Javascript do Facebook phát hành. Sử dụng React Native để xây dựng ứng dụng iOS và AndroidAndroid chỉ cần 1 ngôn ngữ javascript duy nhất. Để hiểu rõ về React Native là gì, chúng ta cần phân biệt sự khác nhau giữa ứng dụng Native và Hybrid.2 Ứng dụng Hybrid Là chương trình phần mềm trên điện thoại di động được viết dựa trên nền tảng web (html5, css3, javascript), bản chất hoàn toàn là ứng dụng web nhưng có thêm được các tính năng thao tác phần hệ điều hành như tập tin, truy cập máy ảnh, GPS hoặc các cảm biến như con quay hồi chuyển, gia tốc kế…Toàn bộ những thứ này đều được bao bọc bởi một lớp ứng dụng Native mà nổi bật là Phonegap/Cordova. Phần web được xử lý hiển thị bởi webview, phần tính năng truy cập hệ thống được cung cấp bởi các hàm API.
Ứng dụng gọi hàm bằng Javascript thông qua API thì chương trình Phonegap/Cordova bao bọc sẽ gọi trực tiếp Native xuống hệ điều hành. Bằng cách này, ứng dụng web có thêm những tính năng cao cấp của ứng dụng 4 do an Native, và do được tính hợp mã nguồn sẵn nên tốc độ của ứng dụng hybrid nhanh hơn ứng dụng web.3 Ứng dụng Native Là ứng dụng được phát triển trực tiếp bằng ngôn ngữ của hệ điều hành đó cung cấp. Ví dụ với iOS là Objective-C, Swift và Android là Java, Window phone là C++ hoặc C#. Các ứng dụng viết bằng ngôn ngữ này được biên dịch ra ngôn ngữ máy trên điện thoại và có toàn bộ tính năng mà hệ điều hành đó cung cấp.
Do là ngôn ngữ trực tiếp cũng như không phải thông qua ứng dụng nào khác nên tốc độ là nhanh nhất. Tốc độ ở đây bao gồm tốc độ hiển thị (độ mượt), và tốc độ xử lý. Nếu để ý kỹ bạn sẽ thấy các thao tác của ứng dụng native như chuyển trang, điều hướng, cuộn trang đều rất mượt. Với việc hơn hẳn về tốc độ xử lý, nên ứng dụng hybrid khó có thể làm được ứng dụng nặng đồ hoạ như game, mặc dù vẫn có thể làm được nhưng không mượt mà nên hầu như hiếm ai dùng hybrid cho lập trình game cho điện thoại di động (ngoại trừ một số game đơn giản như xếp hình, giải câu đố, 2048…) 1.4 Công dụng React Native là framework giúp lập trình viên viết ứng dụng Native chỉ bằng Javascript.
React Native giúp cho lập trình viên web có thể viết ứng dụng native để khắc phục các điểm yếu của ứng dụng web và hybrid. Chỉ với một lập trình viên thành thạo javascript, bạn có thể chiến đấu trên mọi mặt trận web, desktop, server và bây giờ là mobile. Điều này không những có lợi cho lập trình viên web mà nó giúp cho các doanh nghiệp phát triển sản phẩm đầu cuối với ít nhân lực hơn. Khi xây dựng React Native, điều tuyệt vời là đã được tích hợp tính năng Live Reload – tương tự tính năng Hot Replacement Module trong Webpack.
Tính năng Live Reload khác tính năng Reload, trong khi Live Reload chỉ tải lại chức năng/tập tin nào thay đổi, thì Reload sẽ tải lại toàn bộ mã nguồn. Ngoài ra, bạn cũng dễ dàng debug javascript trong Chrome và Safari. Đối với những lỗi thuộc Native thì phải cần đến XCode cho iOS hoặc Android Studio cho Android.5 Cách hoạt động của 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ý. 5 do an Phần hiển thị được biên dịch từ javascript sẽ map với những component của hệ thống ví dụ: điều hướng, tab, touch…Phần view này được lấy cảm hứng từ Virtual DOM của React JS, mọi xử lý view được thực hiện trên một cây DOM ảo, sau đó được React Native render lại 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.6 Khuyết điểm của React-native React Native là một giải pháp tuyệt vời cho phát triển ứng dụng trên điện thoại di động, tuy nhiên đến thời điểm hiện tại, vẫn còn tồn tại một số khuyết điểm: Vẫn còn thiếu các component view cho Android: Map, Modal, Slider, Spinner hoặc các module như Camera Roll, Media, PushNotificationIOS. Không hỗ trợ Window Phone: đây sẽ là điểm trừ lớn nếu so với ứng dụng hybrid. Tuy nhiên, nếu bạn chỉ tập trung cho iOS và Android thì tất nhiên đây không phải là vấn đề lớn. Không build được ứng dụng iOS trên Window và Linux: tất nhiên đây không phải là điểm yếu kém của bản thân React Native, mà đó là do yêu cầu từ Apple.
React Native không thể build được ứng dụng “quá phức tạp” nếu bạn không biết Swift/Objecive-C, Java – tính phức tạp ở đây là ứng dụng của bạn cần phải chỉnh sửa các component. Bạn nên nhớ là để viết được 1 ứng dụng native bằng javascript “luôn luôn” có sẵn các component đã được viết từ Swift/Objective-C (iOS) và Java (Android) với tính chất 1-1. Trường hợp bạn muốn chỉnh sửa 1 component nào đó: thay đổi thành phần hoặc thêm API thì bạn phải “tự viết” bằng chính ngôn ngữ tương ứng của iOS hoặc Android. Tin vui cho bạn là cũng nhiều lập trình viên khác đã viết nhiều component cần thiết cho hầu hết ứng dụng (đây cũng là lý do vì sao Facebook biến React Native thành mã nguồn mở).
Không nên dùng để viết game có tính đồ họa và cách chơi phức tạp. Dùng ES2015/ES6 (bạn đọc thêm ở bài ES2015 là gì): đây là cấu trúc mới cho Javascript từ 2015, vì khá là mới nên những cấu trúc của nó có thể bạn chưa quen, dẫn tới việc khó khăn trong việc tiếp cận. Bạn có thể phải mất nhiều thời gian để theo hết hệ sinh thái của React, tuy nhiên tất cả là để làm cho đời lập trình viên fullstack đẹp đẽ và những sản phẩm chất 6 do an lượng hơn, bao gồm: React Js, React Native, Flux, Relay, GraphQL. Bạn không cần phải quan tâm những thứ này chỉ để viết ứng dụng với React native.3 XAMPP XAMPP là một chương trình tạo máy chủ web (Web Server) được tích hợp sẵn Apache, PHP, MySQL, FTP Server, Mail Server và các công cụ như phpMyAdmin.
Với chương trình quản lý tiện dụng, cho phép bạn chủ động bật tắt hoặc khởi động lại dịch vụ máy chủ bất cứ lúc nào. XAMPP cung cấp cho các nhà phát triển ứng dụng web trực tuyến, những người lập trình một cách thức dễ dàng, thoải mái để kiểm tra các trang web động mà không cần truy cập vào Internet. Nó cũng bao gồm các phiên bản mới nhất của Mercury và Tomcat.1 Khái niệm Nodejs là một nền tảng (Platform) phát triển độc lập được xây dựng ở trên Javascript Runtime của Chrome mà chúng ta có thể xây dựng được các ứng dụng mạng một cách nhanh chóng và dễ dàng mở rộng. Phần Core bên dưới của Nodejs được viết hầu hết bằng C++ nên cho tốc độ xử lý và hiệu năng khá cao.
Nodejs tạo ra được các ứng dụng có tốc độ xử lý nhanh, realtime thời gian thực. Nodejs áp dụng cho các sản phẩm có lượng truy cập lớn, cần mở rộng nhanh, cần đổi mới công nghệ, hoặc tạo ra các dự án Startup nhanh nhất có thể.2 Các đặc tính của Node js Không đồng bộ: Tất cả các API của NodeJS đều không đồng bộ (none-blocking), nó chủ yếu dựa trên nền của NodeJS Server và chờ đợi Server trả dữ liệu về. Việc di chuyển máy chủ đến các API tiếp theo sau khi gọi và cơ chế thông báo các sự kiện của Node.js giúp máy chủ để có được một phản ứng từ các cuộc gọi API trước (Realtime). Chạy rất nhanh: NodeJ được xây dựng dựa vào nền tảng V8 Javascript Engine nên việc thực thi chương trình rất nhanh.
Đơn luồng nhưng khả năng mở rộng cao: Node.js sử dụng một mô hình luồng duy nhất với sự kiện lặp. cơ chế tổ chức sự kiện giúp các máy chủ để đáp ứng một cách không ngăn chặn và làm cho máy chủ cao khả năng mở rộng như trái ngược 7 do an với các máy chủ truyền thống mà tạo đề hạn chế để xử lý yêu cầu.js sử dụng một chương trình đơn luồng và các chương trình tương tự có thể cung cấp dịch vụ cho một số lượng lớn hơn nhiều so với yêu cầu máy chủ truyền thống như Apache HTTP Server. Không đệm: NodeJS không đệm bất kì một dữ liệu nào và các ứng dụng này chủ yếu là đầu ra dữ liệu. Có giấy phép: NodeJS đã được cấp giấy phép bởi MIT License.5 CÁC THƯ VIỆN SỬ DỤNG - React-native-community/async-storage:https://github.com/react-native- community/async-storage.
- React-number-format : https://github.com/s-yadav/react-number-format. - React-native-flash-message: https://www.com/package/react-native-flash- message. - React-native-router-flux : https://github.com/aksonov/react-native-router-flux. - Native-base : https://nativebase.
- React-native-tab-navigator : https://www.com/package/react-native-tab- navigator. - React-native-snap-carousel : https://github.com/archriss/react-native-snap- carousel. - Redux : https://github.com/reduxjs/react-redux. - React-native-gifted-chat : https://github.com/FaridSafi/react-native-gifted-chat.
8 do an CHƯƠNG 2 : KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU 2.1 KHẢO SÁT HIỆN TRẠNG 2.1 Khảo sát tình hình thực tế Bảng 2 - 1: Bảng so sánh các App thức tế. STT Hình Lazada Tiki Shoppee thức so sánh 1 Ưu - Sản phẩm - Sản phẩm -Sản phẩm điểm phong phú, đa phong phú, đa phong phú, đa dạng. - Người dùng - Người dùng có - Người dùng có có thể dễ dàng thể dễ dàng tìm thể dễ dàng tìm tìm kiếm sản kiếm sản phẩm kiếm sản phẩm phẩm họ cần. họ cần (có thể họ cần( tìm - Thanh toán dễ tìm theo tên sản bằng thanh tìm dàng qua ví phẩm hoặc có thể kiếm và bộ lọc, điện tử.