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.. Phát Triển Ứng Dụng Di Động: Front-end chơi m
Tổng quan
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
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:
Đối tượng đề tài hướng đến:
+ Học sinh, sinh viên, người đi làm.
Cơ sở lý thuyết và Công nghệ sử dụng
Cơ sở lý thuyết
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
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
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 b Đặ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
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 c 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
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 d 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ử
9 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 e Các thành phần chính
Các thành phần chính của React Native bao gồm:
Phân tích bài toán
Danh sách yêu cầu phần mềm
Use Case Diagram
3.2.1 Use case Quản lý danh sách tác vụ
Tên Use case Quản lý danh sách tác vụ
Mô tả Use case cho phép người dùng quản lý danh sách các tác vụ
Người dùng phải đăng nhập vào ứng dụng
Tác nhân chính Người dùng
Loại use case 1 Chi tiết
Các bên liên quan Người dùng: tìm kiếm, thêm, xóa, sửa tác vụ
Admin: tạo các bài viết
Mối quan hệ Liên hệ: tác nhân Người dùng
3.2.2 Use case Quản lý danh sách công việc
Tên Use case Quản lý danh sách công việc
Mô tả Use case cho phép người dùng quản lý danh sách các công việc
Người dùng phải đăng nhập vào ứng dụng
Tác nhân chính Người dùng
Loại use case Chi tiết
Các bên liên quan Người dùng: xác nhận hoàn thành , thêm, xóa, sửa công việc Admin: tạo các bài viết
Mối quan hệ Liên hệ: tác nhân Người dùng
Mở rộng: use case Thêm công việc, use case Sửa công việc, use case Xóa công việc, use case Xác nhận hoàn thành công việc
1) Người dùng chọn Danh sách công việc
2) Nếu người dùng chọn Xác nhận hoàn thành: thực hiện luồng sự kiện phụ S1
3) Nếu người dùng chọn Thêm công việc: thực hiện luồng sự kiện phụ S2
4) Nếu người dùng chọn Xóa công việc: thực hiện luồng sự kiện phụ S3
5) Nếu người dùng chọn Sửa công việc: thực hiện luồng sự kiện phụ S4
S1: Xác nhận hoàn thành công việc 1) Chọn công việc cần xác nhận 2) Xác nhận đã hoàn thành 3) Kết thúc
S2: Thêm công việc 1) Chọn thêm công việc 2) Nhập các thông tin công việc 3) Chọn xác nhận
S3: Xóa công việc 1) Chọn công việc cần xóa 2) Chọn xác nhận
S4: Sửa công việc 1) Chọn công việc cần sửa 2) Nhập các thông tin mới cho công việc 3) Chọn xác nhận
Luồng sự kiện lỗi hoặc ngoại lệ
Tên Use case Cài đặt
Mô tả Use case cho phép người dùng thay đổi các cài đặt về thời gian và chủ đề
Người dùng phải đăng nhập vào ứng dụng
Tác nhân chính Người dùng
Loại use case Tổng quát
Người dùng: thay đổi theme, cài đặt chu kỳ pomodoro, cài đặt thời gian cho một pomodoro, cài đặt thời gian nghỉ ngắn và thời gian nghỉ dài
Mối quan hệ Liên hệ: tác nhân Người dùng
Mở rộng: use case Thay đổi theme ứng dụng, use case Cài đặt chu kỳ pomodoro, use case Cài đặt thời gian cho một pomodoro, use case Cài đặt thời gian nghỉ ngắn và thời gian nghỉ dài
1) Người dùng chọn nút Settings
2) Nếu người dùng chọn Thay đổi theme: thực hiện luồng sự kiện phụ S1
3) Nếu người dùng chọn Cài đặt chu kỳ pomodoro: thực hiện luồng sự kiện phụ S2
4) Nếu người dùng chọn Cài đặt thời gian cho một pomodoro: thực hiện luồng sự kiện phụ S3
5) Nếu người dùng chọn Cài đặt thời gian nghỉ ngắn và thời gian nghỉ dài: thực hiện luồng sự kiện phụ S4
S1: Thay đổi theme 1) Chọn 1 trong 3 chủ đề: System, Light, Dark 2) Hiển thị chủ đề đã chọn
S2: Cài đặt chu kỳ pomodoro 1) Chọn chu kỳ pomodoro 2) Chọn xác nhận
S3: Cài đặt thời gian cho một pomodoro 1) Chọn thời gian cho một pomodoro 2) Chọn xác nhận
S4: Cài đặt thời gian nghỉ ngắn và thời gian nghỉ dài 1) Chọn thời gian nghỉ ngắn
2) Chọn xác nhận 3) Chọn thời gian nghỉ dài 4) Chọn xác nhận
Luồng sự kiện lỗi hoặc ngoại lệ
S2.1: Cài đặt chu kỳ không hợp lệ, có thể thực hiện:
1) Thông báo chu kỳ không hợp lệ và nhập lại, kết thúc
S3.1: Cài đặt thời gian cho pomodoro không hợp lệ, có thể thực hiện:
1) Thông báo thời gian không hợp lệ và nhập lại, kết thúc
S4.1: Cài đặt thời gian nghỉ ngắn hoặc/và thời gian nghỉ dài không hợp lệ, có thể thực hiện:
1) Thông báo thời gian không hợp lệ và nhập lại, kết thúc
Tên Use case Quản lý thời gian bằng pomodoro
Mô tả Use case cho phép người dùng thay đổi các cho phép người dùng thay đổi, tương tác với bộ dụng cụ đếm thời gian pomodoro để họ có thể thực hiện đếm thời gian công việc
Người dùng phải đăng nhập vào ứng dụng
Tác nhân chính Người dùng
Loại use case Chi tiết
Người dùng: Người dùng cài đặt thay đổi số pomodoro cần thiết cho một công việc, người dùng cũng có thể sử
23 dụng các nút bắt đầu, tạm ngừng, tiếp tục, và kết thúc để bắt đầu thực hiện công việc
Mối quan hệ Liên hệ: tác nhân Người dùng
Mở rộng: Khởi tạo số pomodoro ban đầu cho người dùng, Hiển thị thời gian đếm ngược chi tiết đến giây cho người dùng quan sát, Hiển thị số pomodoro đã thực hiện trong mỗi task và thời gian công việc còn lại cần thực hiện, Chỉnh số pomodoro cần để thực hiện công việc, Chức năng bắt đầu, tạm ngừng, tiếp tục và dừng đếm thời gian
1) Người dùng chọn vào trang chính của danh sách công việc
2) Nếu người dùng chọn Khởi tạo số pomodoro ban đầu: Thực hiện luồng sự kiện phụ S1
3) Nếu người dùng chọn Hiển thị thời gian đếm ngược chi tiết đến giây: thực hiện luồng sự kiện phụ S2 4) Nếu người dùng chọn Chỉnh pomodoro cần để thực hiện công việc: thực hiện luồng sự kiện phụ S3
S1: Khởi tạo số pomodoro ban đầu TH1: Khởi tạo công việc mới 1) Khởi tạo công việc
2) Chọn số pomodoro tương ứng Hình hiển thị tối đa 5 nhưng nếu muốn nhiều hơn nữa thì nhấn vào nút
> bên cạnh để để chuyển sang số
3) Chọn số pomodoro làm việc tương ứng 4) Chọn Done
TH2: Công việc đã được khởi tạo 1) Chọn vào công việc đã khởi tạo
2) Chọn vào mục pomodoro number và chọn số pomodoro tương ứng để thực hiện công việc 3) Nhấm Done
S2: Hiển thị thời gian đếm ngược chi tiết đến giây 1) Để bắt đầu nhấn vào nút Play kế bên công việc 2) Nếu muốn dừng lại thì nhấn vào nút Pause 3) Tiếp tục thì nhấn vào nút Play
4) Kết thúc thì nhấn vào Stop
S3: Chỉnh pomodoro cần để thực hiện công việc 1) Chọn vào công việc đã khởi tạo
2) Chọn vào mục pomodoro number và chọn số pomodoro tương ứng để thực hiện công việc 3) Nhấm Done
Luồng sự kiện lỗi hoặc ngoại lệ
S1.1: Khởi tạo số pomodoro không hợp lệ, có thể thực hiện:
1) Thông báo số pomodoro không hợp lệ và nhập lại, kết thúc
S3.1: Điều chỉnh số pomodoro không hợp lệ, có thể thực hiện:
1) Thông báo số pomodoro không hợp lệ và nhập lại, kết thúc
Thiết kế
Thiết kế giao diện
4.1.3 Giao diện thông tin Task
4.1.6 Giao diện màn hình Project
4.1.7 Giao diện chi tiết Project
4.1.10 Giao diện nghỉ theo Pomodoro
4.1.11 Giao diện chỉnh sửa Pomodoro
Tổng kết
Kết quả đạt được
Việc sử dụng ứng dụng ghi chú tích hợp Pomodoro đã đem lại những cải thiện đáng kể trong cuộc sống hàng ngày của tôi Khả năng tập trung của tôi đã tăng mạnh nhờ vào chu kỳ làm việc 25 phút, kèm theo những khoảnh khắc nghỉ ngơi ngắn giúp tôi duy trì sự sảng khoái và sức mạnh tinh thần Quản lý thời gian trở nên linh hoạt hơn, giúp tôi phối hợp công việc hiệu quả và giảm áp lực Việc ghi chú linh hoạt, kết hợp với Pomodoro, không chỉ làm tăng sự hiệu quả mà còn giúp tôi duy trì sự sắp xếp và kiểm soát đối với công việc, đồng thời giảm căng thẳng và mang lại sự cân bằng trong cuộc sống.
Khó khăn
Khó khăn Cách giải quyết
Nhóm một thành viên Ứng dụng được viết bởi cá nhân nên có thể gặp nhiều thiết sót cũng như không được đẹp
Bị trễ deadline Điều chỉnh giao các task phù hơp với năng lực từng thành viên.
Hướng phát triển
Phát Triển Tính Năng Mở Rộng: Đưa ra những tính năng mới và hấp dẫn để cung cấp giá trị gia tăng cho người dùng Xem xét tích hợp các tính năng mới như tích hợp với các dịch vụ khác, quản lý nhóm, tích hợp với lịch, và nhiều hơn nữa
Tối Ưu Hóa Hiệu Suất và Tương Tác: Tăng cường hiệu suất ứng dụng để đảm bảo nó chạy mượt mà và nhanh chóng trên mọi thiết bị Tối ưu hóa giao diện người dùng để tạo ra trải nghiệm tương tác tốt hơn
Đa Nền Tảng và Đồng Bộ Dữ Liệu: Xem xét mở rộng ứng dụng để hỗ trợ các nền tảng web Đảm bảo đồng bộ dữ liệu giữa các thiết bị để người dùng có thể chuyển đổi dễ dàng
Cải Thiện Bảo Mật và Quyền Riêng Tư: Liên tục theo dõi và nâng cao các biện pháp bảo mật để bảo vệ thông tin người dùng Cung cấp quyền riêng tư rõ ràng và kiểm soát cho người dùng.