CHƯƠNG 1: CƠ SỞ CỦA ĐỀ TÀI 1.1 Các công nghệ sử dụng Front-end 1.1 Framework ReactJS ReactJS là một front-end JavaScript framework được phát triển bởi Facebook, ReactJS hỗ trợ xây dựng giao diện thành những thành phần nhỏ (component) có thể được tái sử dụng trong quá trình phát triển và xây dựng phần mềm ứng dụng. ReactJS hoạt động ở trên client và trên server. ReactJS sẽ tự so sánh sự thay đổi của các giá trị tại lần render gần nhất với lần render tiếp theo để quyết định xem component nào sẽ được render lại, chính vì điều này tiết kiệm rất nhiều thời gian khi render trang web. ReactJS giới thiệu công nghệ Virtual DOM hay còn gọi là DOM ảo.
Virtual DOM chính là một đại diện ảo cho DOM thật. Như DOM thật Virtual DOM cũng có cấu trúc cây mỗi element chính là một nút trên cây. Nếu trạng thái của một nút trong cây bị thay đổi thì một cây Virtual DOM mới được tạo. Virtual DOM sẽ tính toán sao cho việc thay đổi lên DOM thật tiếc kiệm chi phí một cách tối đa nhất từ đó cải thiện hiệu năng của ứng dụng.
16 Hình 1: Virtual DOM và DOM ReactJS giới thiệu cơ chế one-way data binding, dữ liệu được truyền từ component cha xuống các component con thông qua props và trong mỗi component sẽ có các state để quản lý dữ liệu của chính component ấy. Chính vì sự rằng buộc rõ ràng này nên khi làm việc với ReactJS chúng ta rất khó để gây ra việc sai lệch dữ liệu do hạn chế từ cơ chế one-way data binding và cũng như dể dàng quản lý và sửa lỗi. Hình 2: One-way data binding trong ReacJS ReactJS cũng giới thiệu JSX, cho phép viết tag HTML trong file JavaScript. Việc này cho phép người lập trình khai thác tối đa sức mạnh của JavaScript khi sử lý giao diện web với các tag HTML.2 Redux Redux là một thư viện JavaScript được tạo ra để quản lý trạng thái của ứng dụng.
Redux được tạo dựa trên nền tảng tư tưởng kiến Flux của Facebook đưa ra, chính vì thế Redux hoạt động rất tốt khi kết hợp với ReactJS. - Nguyên lý hoạt động của Redux: 17 + Nguyên lý 1: Trong một ứng dụng web có rất nhiều dữ liệu như dữ liệu trạng thái của giao diện hoặc dữ liệu hiển thị, các loại dữ liệu này có nguồn góc khác nhau, phụ thuộc vào rất nhiều yếu tốt khác nhau dẫn đến việc quản lý, theo dõi từng thành phần dữ liệu chở nên khó khăn. Chính vì thế để giải quyết vấn đề phức tạp này, Redux tạo thành một nguồn dữ liệu duy nhất giúp quản lý và theo dõi dễ dàng hơn. + Nguyên lý 2: Dữ liệu state của Redux chỉ được phép đọc, cách duy nhất để thay đổi state của ứng dụng phải thông qua Action.
Với Redux, trạng thái chỉ được phép thay đổi khi có một sự kiện diễn ra, khi đấy state của Redux sẽ được cập nhật dẫn tới sự Re-render của UI, làm cho giao diện được cập nhật. + Nguyên lý 3: Việc thay đổi trạng thái của ứng dụng được thực hiện thông qua các hàm thuần tuý (pure function) nhận 2 tham số đầu vào là state trước đó và action và sẽ trả về state sau đó. Các hàm này rất nhẹ nên khả năng scale rất tốt. - Cấu trúc của Redux: Hình 3: Cấu trúc của Redux 18 - Tất cả các trạng thái dữ liệu được lưu trong Store, Store được tạo ra bởi hàm Redux.createStore, store được coi là cầu nối giữa 3 nguyên lý hoạt động của Redux.
Store lưu trạng thái hiện tại của ứng dụng, cho phép dispatch một action. Khi tạo ra store, phải xác định hàm reducer để xác định state sẽ thay đổi như thế nào. + getState(): trả về trạng thái hiện tại của store. + dispatch(): gửi đi một action để cập nhật lại state.
+ Subscirbe(): phương thức để theo dõi state.3 Material UI Material UI là một thư viện cung cấp React component ứng dụng thư viện Material Design của Google. Material UI cung cấp số lượng lớn pre-built component như Button, Stack, Grid để giúp Developer tăng tốc độ phát triển ứng dụng. Material UI được thiết kế để hỗ trợ người dùng tuỳ chỉnh các component theo ý của mình hoặc thiết kế các component khác dựa trên các component base của Material UI. Material UI có thể sử dụng cùng với các Framework Javascript khác, một vài framework tiêu biểu như Angular JS, Vue JS hay ReactJS, hỗ trợ dựng giao diện đẹp đẽ và Responsive.
Với 35,000 lượt sao trên Github, Material UI là một trong những thư viện giao diện tốt nhất cho React.4 Các thư viện hỗ trợ khác 1.1 Axios - Axios là một thư viện HTTP Client dựa trên cơ chế promise cho NodeJS và trình duyệt. Axios được thiết kế đồng đẳng có thể chạy trên trình duyệt và trên NodeJS với cùng đoạn code. Trên phía server Axios sử dụng code native HTTP của NodeJS còn trên trình duyệt sử dụng XMLHttpRequests. - Có các chức năng: + Tạo XMLHttpRequest từ trình duyệt.
+ Tạo http request từ NodeJS. + Hỗ trợ Promise API. + Hỗ trợ “Intercept” request và response. + Hỗ trợ biến đổi request và response.
19 + Huỷ bỏ request. + Tự biến đổi dữ liệu JSON. + Hỗ trợ bảo vệ trình duyệt trước XSRF.2 Moment - Moment là một thư viện mạnh hỗ trợ trong việc tạo, parsing, validate và thao tác các Object Date của moment. - Moment hỗ trợ các hàm như moment() để lấy thời gian hiện tại, hay moment.unix() để chuyển sang dạng unix phù hợp cho việc hiển thị trên URL.3 React-toastify - React-toastify hỗ trợ việc tạo các toast nhanh chóng và dễ dàng với nhiều style khác nhau.
- React-toastify rất dễ dàng cài đặt và set-up cũng như hỗ trợ customize rất tốt cho Developer.2 Các công nghệ sử dụng Back-end 1.1 NodeJS NodeJS là một môi trường thực thi code Javascript đa nền tảng, được phát triển và xây dựng theo hướng Open-Source. NodeJS được xây dựng dựa trên V8 JavaScript Engine, core chính của trình duyệt Google Chrome điều này cho phép NodeJS có hiệu năng rất tốt. NodeJS thường được sử dụng để xây dựng các back-end service như APIs hoặc ứng dụng web hoặc Mobile. NodeJS cũng được sử dụng bởi các công ty lớn như Paypal, Uber, Netflix, Walmart,… - Các đặc tính của NodeJS: + Dễ dàng bắt đầu, có thể sử dụng để dựng cái ứng dụng mẫu hoặc trong mô hình phát triển agile.
+ Cung cấp các dịch vụ nhanh chống và có khả năng scale tốt. + Sử dụng ngôn ngữ Javascript vậy nên dễ dàng cho các lập trình viên Javascript xây dựng các back-end service. + Code đẹp và gọn gàng hơn. + Cộng đồng lớn với nhiều thư viện tiện ích hỗ trợ.
20 + Lập trình bất đồng bộ, tránh các tác vụ gây nghẽn. - Các điểm mạnh của NodeJS: + Dễ dàng mở rộng: Các nhà phát triển ứng dụng lựa chọn sử dụng NodeJS bởi khả năng mở rộng cả về mặt phần cứng và phần mềm. Dễ dàng thêm tài nguyên trong quá trình mở rộng của ứng dụng. + Các ứng dụng Real-times: NodeJS có tốc độ đồng bộ hoá nhanh hơn các framework khác nên được sử dụng rất nhiều trong các ứng dụng web real-times như game hoặc các chat-apps.
+ Nhanh chóng: NodeJS được chạy trên công nghệ V8 được phát triển bởi Google. Các event vòng lập sẽ xử lý các tác vụ bất đồng bộ vậy nên các tác vụ như đọc, viết database, kết nối network hoặc file đều được xử lý nhanh chống. + Dễ học và dễ code: NodeJS sử dụng ngôn ngữ JavaScript. Nếu bạn đã là một Front- end developer có kinh nghiệm thì việc chuyển đổi sang NodeJS rất dễ dàng.
+ Caching: NodeJS hỗ trợ cache lưu trữ một module bất kỳ. Mỗi khi có request yêu cầu một module, module ấy sẽ được lấy từ cache trong bộ nhớ ứng dụng nên module không cần phải được execute để chạy. + Data streaming: Trong NodeJS HTTP request và respone được coi là 2 sự kiện độc lập. Khi xử lý các file, thời gian xử lý sẽ được rút gọn.
NodeJS còn cho phép stream audio và video nhanh chóng. + Hosting: NodeJS dễ dàng được host ở các dịch vụ cung cấp Platform as a Service ví dụ như là Heroku. - Các ứng dụng sử dụng NodeJS: + Ứng dụng chat Real-time. + Các ứng dụng single-page phức tạp.
+ Các ứng dụng làm việc nhóm Real-time. + Các ứng dụng dựa vào API.2 ExpressJS 21 ExpressJS là framework nổi tiếng nhất để xây dựng ứng dụng web của NodeJS và là thư viện nền tảng cho nhiều thư viện nổi tiếng khác của NodeJS. ExpressJS cung cấp cơ chế để: + Cung cấp cơ chế để định nghĩa các phương thức để xử lý các HTTP request khác nhau như (GET, POST, PUT, DELETE, UPDATE). + Cung cấp cơ chế để re-render, chèn dữ liệu vào template.
+ Tinh chỉnh các thông số như port, địa chỉ template để phản hồi dựa trên request. + Cung cấp cơ chế middleware để intercept các request để xác thực.3 Mongoose - Mongoose là một thư viện ORM, cung cấp công cụ hỗ trợ mapping object thành document cho NodeJS làm việc với MongoDB. Mongoose hỗ trợ quan hệ giữa data, cung cấp schema validate, dùng để biến đổi các object trong code thành dữ liệu đại diện cho object đó trong MongoDB. Hình 4: Mongoose với NodeJS.
- MongoDB là database không có cấu trúc (schema-less) NoSQL. Có thể lưu trữ dữ liệu JSON trong database và cấu trúc của một record có thể tuỳ biến mà không bị rằng buộc bởi một quy luật cụ thể. Đây là điểm mạnh của MongoDB, hỗ trợ quá trình phát triển và giảm thời gian phát triển ứng dụng. 22 - Các thuộc ngữ: + Collection: thuộc ngữ collection mang ý nghĩa như table trong cơ sở dữ liệu SQL truyền thống.
+ Document: tương ứng với dòng hoặc record trong cơ sở dữ liệu SQL truyền thống. + Field: Các trường, thuộc tính, tương tự như cột trong cơ sở dữ liệu SQL.4 Cloudinary - Cloudinary là một nền tảng cung cấp Software as a Service cung cấp giải pháp để quản lý các dữ liệu hình ảnh, video trên cloud. Cloudinary cung cấp giải pháp cho mọi video, hình ảnh từ việc upload, lưu trữ, quản lý, biến đổi. Việc upload, xử lý được xử lý trên server riêng của Cloudinary có sử dụng công nghệ tự động mở rộng trong trường hợp lượng truy cập tăng đột ngột.
- Cloudinary hỗ trợ nhiều nền tảng ngôn ngữ khác nhau như PHP, Java, NodeJS,… Hình 5: Các nền tảng Cloudinary hỗ trợ 1.2 KHẢO SÁT HIỆN TRẠNG 1.1 ZoomCar 23 Hình 6: Ứng dụng ZoomCar - Giới thiệu: “Zoomcar ra mắt nền tảng cho thuê xe hơi đầu tiên tại Ấn Độ vào năm 2013 và trở thành công ty dẫn đầu trong hệ sinh thái cho thuê ôtô.000 xe trên nền tảng trên khắp châu Á và khu vực MENA (Trung Đông và Bắc Phi), Zoomcar cho phép các cá nhân thuê nhiều loại xe khác nhau theo giờ hoặc theo ngày.” (Nguồn: https://vnexpress.net/ong- lon-cho-thue-xe-an-do-tham-nhap-viet-nam-4396880.html ) Link: https://www.