Đang tải... (xem toàn văn)
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
Trang 1ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH ĐẠI HỌC CÔNG NGHỆ THÔNG TIN
ĐỒ ÁN MÔN HỌC ĐỒ ÁN 1
ĐỀ TÀI: ỨNG DỤNG GHI CHÚ TÍCH HỢP POMODORO
Giảng viên hướng dẫn: Ths Nguyễn Công Hoan
Lớp: SE121.011
Nhóm sinh viên thực hiện:
Tp Hồ Chí Minh, tháng 12 năm 2023
Trang 2Chương 3: Phân tích bài toán 14
3.1.Danh sách yêu cầu phần mềm 14
3.2.Use Case Diagram 14
3.2.1.Use case Quản lý danh sách tác vụ 14
3.2.2.Use case Quản lý danh sách công việc 15
3.2.3.Use case Cài đặt 18
3.2.4.Use case Đăng xuất 21
Chương 4: Thiết kế 26
4.1.Thiết kế giao diện 26
4.1.1.Giao diện Home 26
4.1.2.Giao diện thêm Task 28
4.1.3.Giao diện thông tin Task 29
4.1.4.Giao diện mục lục 30
4.1.5.Giao diện xóa Task 31
4.1.6.Giao diện màn hình Project 32
4.1.7.Giao diện chi tiết Project 33
4.1.8.Giao diện cài đặt 34
4.1.9.Giao diện làm việc 35
Trang 34.1.10.Giao diện nghỉ theo Pomodoro 39
4.1.11.Giao diện chỉnh sửa Pomodoro 40
Trang 4LỜI CẢM ƠN
Lời đầu tiên, em xin gửi lời cảm ơn chân thành và sự tri ân sâu sắc đến thầy Nguyễn Công Hoan là giảng viên hướng dẫn trực tiếp và trang bị cho chúng em những kiến thức căn bản vững chắc để thực hiện đồ án này
Trong khoảng thời gian thực hiện đồ án, chúng em đã học hỏi thêm được nhiều kiến thức, kinh nghiệm, biết được thêm về nhiều công nghệ mới Nhóm em đã vận dụng những kiến thức nền tảng đã tích lũy đồng thời kết hợp với việc học hỏi và nghiên cứu những kiến thức mới Từ đó, vận dụng tối đa những gì đã học hỏi được để hoàn thành báo cáo đồ án này
Mặc dù đã cố gắng hoàn thành báo cáo với tất cả nỗ lực song báo cáo của nhóm chúng em chắc chắn không tránh khỏi những thiếu sót, chúng em rất mong nhận được sự thông cảm và góp ý chân thành từ quý thầy, cô Nhóm em xin chân thành cảm ơn
Tp.HCM, ngày 30 tháng 12 năm 2023
Trang 5LỜI MỞ ĐẦU
Trong đồ án môn học này, em chọn đề tài “Ứng dụng ghi chú tích hợp Pomodoro” để tiếp tục xây dựng ứng dụng ghi chú vì đây là một ứng dụng rất phù hợp với người đi làm cũng như đi học, đặc biệt là trong thời điểm khối lượng công việc nhiều như hiện tại Với sự phát triển của công nghệ số, chúng ta cần một ứng dụng tích hợp sẵn trong điện thoại, giúp quản lí thời gian làm việc, cũng như phân chia thời gian làm việc bằng Pomodoro theo 1 cách hợp lí và khoa học nhất
Em mong muốn rằng đồ án này sẽ mang lại cho em và những người sử dụng trải nghiệm độc đáo và linh hoạt Em sẽ tập trung vào việc thiết kế giao diện người dùng thân thiện và tích hợp các tính năng quản lý công việc và thời gian một cách linh hoạt nhất Em cũng đặt sự chú ý vào việc tối ưu hóa trải nghiệm người dùng để giúp họ theo dõi và cải thiện hiệu suất làm việc theo thời gian
Ứng dụng áp dụng các công nghệ như React Native, Realm với các tính năng quan trọng như tìm kiếm người dùng, tạo hồ sơ cá nhân, gửi tin nhắn và tương tác trực tuyến Giao diện người dùng được thiết kế đẹp và thân thiện, mang lại trải nghiệm tương tác mượt mà và tiện lợi
Trang 6Chương 1: Tổng quan
1.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
1.2 Đố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
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
Trang 7 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ả
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.
Đối tượng đề tài hướng đến:
+ Học sinh, sinh viên, người đi làm.
Trang 8Chương 2: Cơ sở lý thuyết và Công nghệ sử dụng
2.1 Cơ sở lý thuyết
2.1.1 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
Trang 9 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
2.2 Công nghệ sử dụng 2.2.1 Front End
2.2.1.1 React Native a 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
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
Trang 10 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
Trang 11 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ử
Trang 12dụ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:
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.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
Trang 13 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.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.2.2 Back End 2.2.2.1 Realm
a 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 Realm Database được ưa chuộng trong cộng đồng phát triển ứng dụng di động do nó mang lại nhiều lợi ích như hiệu suất cao, tích hợp dễ dàng và khả năng đồng bộ dữ liệu linh hoạt giữa các thiết bị b Đặc trưng
Hiệu Suất Cao: Realm được tối ưu hóa để cung cấp hiệu suất đọc và ghi dữ liệu nhanh chóng, giảm thiểu độ trễ khi tương tác với cơ sở dữ liệu
NoSQL Database: Realm là một cơ sở dữ liệu NoSQL, sử dụng mô hình dữ liệu đối tượng thay vì SQL truyền thống, giúp đơn giản hóa quá trình lập trình và tương tác với dữ liệu
Dễ Dàng Điều Chỉnh Schema: Realm cho phép thay đổi cấu trúc dữ liệu mà không cần thực hiện quá trình migration phức tạp, giúp giảm thiểu các vấn đề liên quan đến sự thay đổi cấu trúc của dữ liệu
Trang 14 Tích Hợp Dễ Dàng: Realm tích hợp dễ dàng vào dự án, hỗ trợ nhiều ngôn ngữ lập trình như Swift (iOS), Kotlin và Java (Android), giảm độ phức tạp của việc tích hợp
Đồng Bộ Dữ Liệu Linh Hoạt: Cung cấp khả năng đồng bộ dữ liệu giữa các thiết bị, cho phép duy trì tính nhất quán của dữ liệu trên nhiều nền tảng
Hỗ Trợ Đa Nền Tảng: Hỗ trợ đa nền tảng, cho phép chia sẻ cơ sở dữ liệu giữa các hệ điều hành như iOS và Android
Hỗ Trợ Async Queries: Hỗ trợ truy vấn bất đồng bộ, giúp ứng dụng duy trì tính độc lập khi thực hiện các truy vấn dữ liệu Hỗ Trợ Encryption: Realm hỗ trợ mã hóa dữ liệu để bảo vệ
thông tin nhạy cảm khỏi sự truy cập trái phép
Community và Tài Liệu: Có một cộng đồng sử dụng rộng rãi và tài liệu phong phú, giúp người phát triển nhanh chóng giải quyết vấn đề và cập nhật thông tin mới nhất
Open Source: Realm là một dự án mã nguồn mở, cho phép cộng đồng tham gia phát triển và cải thiện cùng với sự hỗ trợ từ nhóm phát triển chính
c Kiến trúc
Kiến trúc của Realm Database là một kiến trúc hiệu suất cao và linh hoạt được thiết kế để đáp ứng nhu cầu lưu trữ và quản lý dữ liệu trong ứng dụng di động Dưới đây là một cái nhìn tổng quan về kiến trúc của Realm Database:
Realm Core: Realm Core là một thư viện lõi chia sẻ giữa các nền tảng (iOS, Android), đảm bảo đồng nhất trong cách dữ liệu được xử lý
Bộ Nhớ Máy Tính (Memory-Mapped Files): Realm sử dụng bộ nhớ máy tính (memory-mapped files) để cho phép
Trang 15ứng dụng truy cập trực tiếp vào cơ sở dữ liệu từ bộ nhớ, giảm bớt độ trễ và tăng hiệu suất
Transactions: Realm sử dụng giao dịch để đảm bảo tính nhất quán dữ liệu Mọi thay đổi dữ liệu đều phải nằm trong một giao dịch
Encryption: Realm hỗ trợ mã hóa dữ liệu để bảo vệ thông tin nhạy cảm khỏi sự truy cập trái phép
Bảo Mật: Cung cấp cơ chế kiểm soát truy cập và quản lý quyền để bảo vệ dữ liệu
d Ưu điểm và nhược điểm
Realm được tối ưu hóa cho hiệu suất cao, với truy xuất dữ liệu nhanh chóng và ghi dữ liệu hiệu quả Sử dụng mô hình đối
tượng giúp đơn giản hóa quá trình lập trình và tương tác với dữ liệu Hỗ trợ đồng bộ dữ liệu
giữa các thiết bị di động, giúp duy trì tính nhất quán của dữ liệu
Có khả năng thay đổi cấu trúc dữ liệu mà không cần thực hiện quá trình
migration phức tạp Hỗ trợ đa nền tảng, cho
phép chia sẻ cơ sở dữ liệu
Trong một số dự án lớn Realm có thể gặp khó khăn trong việc thích ứng
Kích thước của cơ sở dữ liệu Realm có thể tăng nhanh chóng khi có nhiều dữ liệu, ảnh hưởng đến kích thước của ứng dụng Realm không hỗ trợ một
số truy vấn phức tạp như các cơ sở dữ liệu SQL truyền thống
Có thể gặp khó khăn khi đồng bộ dữ liệu Realm với các cơ sở dữ liệu ngoại vi không sử dụng Realm
Trang 16giữa các hệ điều hành như iOS và Android
Hỗ trợ truy vấn bất đồng bộ, giúp ứng dụng duy trì tính linh hoạt và phản hồi nhanh chóng
Cung cấp tính năng mã hóa dữ liệu để bảo vệ thông tin nhạy cảm và cơ chế bảo mật cho quản lý quyền
Có một cộng đồng sử dụng rộng rãi và tài liệu phong phú, giúp người phát triển dễ dàng giải quyết vấn đề.
Do sử dụng mô hình đối tượng, việc diễn giải dữ liệu có thể trở nên khó khăn đối với những người mới tham gia dự án
Có thể gặp khó khăn khi tương tác với các thư viện hoặc công nghệ không tương thích với Realm
Trang 17Chương 3: Phân tích bài toán
3.1 Danh sách yêu cầu phần mềm
3.2 Use Case Diagram
3.2.1 Use case Quản lý danh sách tác vụ
Trang 18Tê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ụ
Tiền điều kiện (pre-conditions)
Người dùng phải đăng nhập vào ứng dụng
Hậu điều kiện (post-conditions)
Mức quan trọng Cao
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ùng3.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ã Use case UC02
Trang 19Mô tả Use case cho phép người dùng quản lý danh sách các công việc
Tiền điều kiện (pre-conditions)
Người dùng phải đăng nhập vào ứng dụng
Hậu điều kiện (post-conditions)
Mức quan trọng Cao
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
Trang 20Luồng sự kiện chính
hiện luồng sự kiện phụ S1
S1: Xác nhận hoàn thành công việc
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
4) Kết thúc
Trang 21S3: Xóa công việc
1) Chọn công việc cần xóa 2) Chọn xác nhận
3) Kết thúc
S4: Sửa công việc
1) Chọn công việc cần sửa
3) Chọn xác nhận 4) Kết thúc
Luồng sự kiện lỗi hoặc ngoại lệ
3.2.3 Use case Cài đặt
Tên Use case Cài đặt
Mã Use case UC03
Trang 22Mô tả Use case cho phép người dùng thay đổi các cài đặt về thời gian và chủ đề
Tiền điều kiện (pre-
conditions)
Người dùng phải đăng nhập vào ứng dụng
Hậu điều kiện (post-
conditions)
Mức quan trọng
Trung bình
Tác nhân chính Người dùng
Loại use case Tổng quát
Các bên liên quan
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