Chương 1: Tổng quan 1. Mục tiêu đề tài Phần mềm ngày nay đã trở thành một phần không thể thiếu trong cuộc sống, đóng vai trò quan trọng trong việc hỗ trợ nhiều khía cạnh từ quản lý, kiểm toán đến giao tiếp và xã hội. Trong những năm gần đây, xu hướng mới nhất của phần mềm đang hướng tới mảng giao tiếp và quản lý công việc, nơi mà ứng dụng đó chính là người đồng hành quan trọng trong quá trình tìm hiểu và kết nối với công việc. Quá trình quản lý công việc và thời gian thường đi qua các bước cụ thể, bắt đầu từ việc phân chia công việc, theo đó là giai đoạn thực hiện và cuối cùng là đánh giá kết quả.
Việc ra đời của các ứng dụng ghi chú tích hợp Pomodoro giúp tối ưu hóa và đơn giản hóa quá trình này, giúp em dễ dàng theo dõi công việc, tập trung hiệu quả và đạt được kết quả mong muốn. Đối tượng nghiên cứu Đối tượng chính của nghiên cứu này là những người sử dụng ứng dụng ghi chú tích hợp Pomodoro, đặc biệt là những cá nhân đang tìm kiếm một công cụ hiệu quả để quản lý công việc và thời gian trong môi trường làm việc đa nhiệm ngày nay. Các đối tượng nghiên cứu này bao gồm: Những Người Cần Tối Ưu Hóa Quản Lý Công Việc: Các cá nhân có nhu cầu tối ưu hóa quá trình làm việc và phân chia công việc thành các đợt Pomodoro để nâng cao hiệu suất làm việc. Người Dùng Muốn Tăng Cường Khả Năng Tập Trung: Những người muốn cải thiện khả năng tập trung và giữ được sự chú ý trong công việc một cách hiệu quả.
Cộng Đồng Học Sinh và Sinh Viên: Sinh viên và học sinh đang tìm kiếm công cụ hữu ích để quản lý thời gian học tập và các nhiệm vụ liên quan. 3 Các Chuyên Gia và Người Làm Việc Tự Do: Những người làm việc tự do hoặc chuyên gia đang tìm kiếm phương tiện để tự quản lý thời gian và công việc một cách hiệu quả. Người Dùng Muốn Tạo Ra Thói Quen Làm Việc Hiệu Quả: Các cá nhân quan tâm đến việc phát triển thói quen làm việc hiệu quả và muốn sử dụng kỹ thuật Pomodoro như một công cụ hỗ trợ. Bằng cách tập trung nghiên cứu vào nhóm đối tượng này, chúng ta sẽ có cơ hội hiểu rõ hơn về cách ứng dụng ghi chú tích hợp Pomodoro có thể đáp ứng nhu cầu và mong muốn của họ, đồng thời cung cấp những giải pháp thực tế và linh hoạt nhất để họ quản lý công việc và thời gian.
Phạm vi nghiên cứu Nhóm chúng em xin đề xuất về các công nghệ cũng như đối tượng tìm hiểu trong ứng dụng như sau: Công nghệ: + Frontend: React Native + Backend: Realm Đối tượng đề tài hướng đến: + Học sinh, sinh viên, người đi làm. 4 Chương 2: Cơ sở lý thuyết và Công nghệ sử dụng 2. Front-end là gì? Front-end, hay còn được gọi là phía giao diện người dùng của ứng dụng, là một phần không thể thiếu trong quá trình phát triển ứng dụng. Nó chịu trách nhiệm xây dựng giao diện mà người dùng tương tác và trải nghiệm.
Front-end không chỉ liên quan đến việc hiển thị thông tin, mà còn đặt ra thách thức về việc tạo ra trải nghiệm người dùng mượt mà và hấp dẫn. Front-end được tích hợp và sử dụng một cách quan trọng trong nhiều trường hợp, đặc biệt là khi: Xây Dựng Giao Diện Người Dùng (UI): Front-end đóng vai trò quan trọng trong việc xây dựng giao diện người dùng hấp dẫn và dễ sử dụng cho ứng dụng và trang web. Tăng Tương Tác Người Dùng: Khi cần tạo ra trải nghiệm người dùng tích cực và tương tác cao, Front-end giúp thực hiện các chức năng như thao tác click, kéo và thả, và các hiệu ứng động. Phát Triển Ứng Dụng Di Động: Front-end chơi một vai trò quyết định trong phát triển ứng dụng di động, bao gồm cả việc tối ưu hóa giao diện cho các thiết bị di động và tích hợp các tính năng đặc biệt của điện thoại.
Xây Dựng Trang Thương Mại Điện Tử (E-commerce): Trong các dự án thương mại điện tử, Front-end làm nổi bật các sản phẩm, tối ưu hóa quá trình mua sắm và cung cấp trải nghiệm mua sắm trực tuyến linh hoạt. 5 Tích Hợp Chức Năng Xử Lý Dữ Liệu Người Dùng: Khi cần thu thập, xử lý và hiển thị dữ liệu động từ người dùng, Front-end đảm nhận vai trò chính trong việc tương tác với Back-end. Công nghệ sử dụng 2. Khái niệm React Native là một framework được phát triển bởi Facebook cho phép phát triển ứng dụng di động đa nền tảng bằng cách sử dụng JavaScript và React.
React Native cho phép các nhà phát triển sử dụng cùng một mã nguồn để phát triển ứng dụng cho cả iOS và Android, giúp tiết kiệm thời gian và công sức trong việc phát triển ứng dụng. React Native sử dụng một hệ thống giao diện dựa trên các thành phần (component-based) giống như React, cho phép các nhà phát triển xây dựng giao diện người dùng linh hoạt và dễ dàng. Ngoài ra, React Native cũng cung cấp nhiều thư viện và công cụ hỗ trợ cho việc phát triển ứng dụng di động, giúp cho quá trình phát triển trở nên nhanh chóng và hiệu quả hơn. Đặc trưng Các đặc trưng cơ bản của React Native bao gồm: Cross-platform: React Native cho phép phát triển ứng dụng cho cả iOS và Android bằng cách sử dụng cùng một mã nguồn.
Component-based: React Native sử dụng một hệ thống giao diện dựa trên các thành phần (component-based), giúp cho việc xây dựng giao diện người dùng trở nên dễ dàng và linh hoạt hơn. 6 Hot reloading: React Native hỗ trợ tính năng hot reloading, cho phép các nhà phát triển thực hiện các thay đổi trực tiếp trên ứng dụng mà không cần phải khởi động lại. Native functionality: React Native cho phép truy cập đến các tính năng của hệ điều hành như camera, định vị, và thông báo. Performance: React Native được tối ưu để đạt hiệu suất cao trên các thiết bị di động, giúp cho ứng dụng chạy mượt mà và đáp ứng tốt với các thao tác của người dùng.
Third-party library: React Native cung cấp rất nhiều thư viện và công cụ hỗ trợ cho việc phát triển ứng dụng, giúp cho quá trình phát triển trở nên dễ dàng và nhanh chóng hơn. Kiến trúc Kiến trúc mới của React Native là một sự cải tiến lớn so với kiến trúc cũ, nhằm giải quyết các vấn đề về hiệu suất, tính linh hoạt và khả năng mở rộng của nền tảng này. Kiến trúc mới bao gồm bốn thành phần chính là: JSI (JavaScript Interface): Là một lớp trừu tượng hóa giữa mã JavaScript và mã native, cho phép gọi các hàm native một cách trực tiếp từ JavaScript mà không cần thông qua bridge. JSI cũng cho phép sử dụng các công cụ JavaScript khác nhau như Hermes, V8 hay JSC.
Fabric: Là tên mới của UIManager, có trách nhiệm quản lý các thành phần giao diện người dùng (UI component) bên native. Fabric sử dụng JSI để giao tiếp với JavaScript và cải thiện hiệu suất render UI bằng cách sử dụng nhiều luồng và hỗ trợ các tính năng mới như concurrent mode hay suspense. 7 Turbo Module: Là tên mới của Native Module, là các module native được viết bằng Java, Objective-C hay Swift để cung cấp các chức năng không có sẵn trong JavaScript. Turbo Module sử dụng JSI để giao tiếp với JavaScript và được tải lười (lazy load) khi cần thiết thay vì được khởi tạo ngay từ đầu.
CodeGen: Là một công cụ để sinh ra các định nghĩa kiểu (type definition) cho các UI component và Native Module, giúp cho việc kiểm tra kiểu và tối ưu hóa mã nguồn dễ dàng hơn. Kiến trúc mới của React Native hứa hẹn mang lại nhiều lợi ích cho các nhà phát triển ứng dụng cross-platform, như tăng tốc độ khởi động, giảm dung lượng ứng dụng, cải thiện trải nghiệm người dùng và hỗ trợ các tính năng mới của React. Hiện tại, kiến trúc mới đang được triển khai dần dần trong các phiên bản mới nhất của React Native. Cách hoạt động React Native hoạt động bằng cách sử dụng các thành phần (components) và các module Native để tạo giao diện người dùng và truy cập đến các tính năng của hệ điều hành.
Khi một ứng dụng React Native được khởi động, nó sẽ thực hiện các bước sau: JavaScript thread thực thi mã nguồn JavaScript: Mã nguồn JavaScript của ứng dụng được thực thi trên JavaScript thread. JavaScript thread sẽ tạo ra các thành phần (components) và tương tác với các module Native để truy cập đến các tính năng của hệ điều hành. UI thread vẽ giao diện người dùng: UI thread là một luồng riêng biệt được sử dụng để vẽ giao diện người dùng. UI thread sử 8 dụng các thành phần được định nghĩa trong mã nguồn JavaScript để tạo và hiển thị giao diện người dùng.
Native modules truy cập tính năng của hệ điều hành: Khi cần truy cập đến các tính năng của hệ điều hành như camera, định vị, và thông báo, JavaScript thread sẽ gọi các module Native để thực hiện các thao tác này. Thay đổi trên giao diện được cập nhật: Khi người dùng tương tác với giao diện, các sự kiện sẽ được gửi đến UI thread để xử lý và cập nhật lại giao diện người dùng. Các thành phần chính Các thành phần chính của React Native bao gồm: Components: Là các thành phần cơ bản để xây dựng giao diện của ứng dụng. React Native cung cấp các components cơ bản như Text, View, Image, TextInput, Button, FlatList, ScrollView, v.
Props: Là các thuộc tính được sử dụng để truyền dữ liệu và cấu hình cho các components. State: Là trạng thái của một component, khi state thay đổi thì component sẽ được cập nhật lại. State được quản lý bởi React và có thể được sử dụng để lưu trữ các giá trị động của ứng dụng. Style: Là các thuộc tính để cấu hình kiểu dáng cho các components, tương tự như CSS trong web.
Navigator: Là các thành phần để quản lý điều hướng giữa các màn hình trong ứng dụng. 9 API: Là các phương thức và lớp được cung cấp bởi React Native để truy cập các tính năng và chức năng của thiết bị, chẳng hạn như Camera, Location, AsyncStorage, v. Native Modules: Là các module được viết bằng ngôn ngữ lập trình Native (Java hoặc Objective-C/Swift) để cung cấp các tính năng phức tạp hơn cho ứng dụng 2. Khái niệm Realm Database là một cơ sở dữ liệu di động, nhẹ và hiệu quả, được thiết kế để sử dụng trong phát triển ứng dụng di động.