Đồ án xây dựng ứng dụng nhắc nhở lịch trình

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN ------ BÁO CÁO ĐỒ ÁN 2 XÂY DỰNG ỨNG DỤNG NHẮC NHỞ LỊCH TRÌNH Giảng viên hướng dẫn : ThS... CHƯƠNG 1 – TỔN

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

- -

BÁO CÁO ĐỒ ÁN 2 XÂY DỰNG ỨNG DỤNG NHẮC NHỞ LỊCH TRÌNH

Giảng viên hướng dẫn : ThS Trần Thị Hồng Yến Sinh viên thực hiện : Phạm Minh Việt

Mã số sinh viên : 18520398

Bộ môn : Phát triển phần mềm

Thành phố Hồ Chí Minh, tháng 6 năm 2022

MỤC LỤC

MỤC LỤC 2

DANH MỤC BẢNG VÀ HÌNH ẢNH 4

LỜI CẢM ƠN 5

ĐỀ CƯƠNG CHI TIẾT 6

CHƯƠNG 1 – TỔNG QUAN VỀ ĐỀ TÀI 8

1.1 Đối tượng nghiên cứu 8

1.2 Phạm vi nghiên cứu 8

1.3 Phương pháp nghiên cứu 8

CHƯƠNG 2 – CƠ SỞ LÝ THUYẾT 9

1.4 Tổng quan về Expo 9

1.5 Tổng quan về React.js và Redux 9

1.5.1 React.js 9

1.5.2 Redux 10

1.6 Tổng quan về React Native và Async Storage 11

1.6.1 React Native 11

1.6.2 Async Storage 11

1.7 Tổng quan về Expo Notifications 12

1.7.1 Các chức năng 12

CHƯƠNG 3 – PHÂN TÍCH THIẾT KẾ HỆ THỐNG 13

1.8 Mô tả yêu cầu 13

1.8.1 Yêu cầu chức năng 13

1.8.2 Yêu cầu phi chức năng 13

1.9 Kiến trúc hệ thống 14

1.9.1 Sơ đồ kiến trúc tổng quát 14

1.9.2 Mô tả kiến trúc Front-end 15

CHƯƠNG 4 – HIỆN THỰC HỆ THỐNG 17

1.10 Thiết kế dữ liệu 17

1.10.1 Danh sách các đối tượng trong hệ thống 17

1.10.2 Dữ liệu đối tượng công việc 18

1.11 Thiết kế giao diện 19

1.11.1 Danh sách các màn hình 19

1.11.2 Sơ đồ liên kết các màn hình 20

1.11.3 Giao diện các màn hình chức năng 21

CHƯƠNG 5 – KẾT LUẬN 51

1.12 Đánh giá 51

1.12.1 Thuận lợi 51

1.12.2 Khó khăn 51

1.13 Kết quả đạt được 51

1.13.1 Ưu điểm 51

1.13.2 Nhược điểm 51

1.14 Hướng phát triển 51

TÀI LIỆU THAM KHẢO 52

DANH MỤC BẢNG VÀ HÌNH ẢNH

Bảng 1.1 Mô tả chức năng của ứng dụng 13

Hình 1.1 Sơ đồ kiến trúc hệ thống 14

Hình 1.2 Sơ đồ kiến trúc front-end 15

Bảng 1.2 Mô tả thành phần kiến trúc Front-end 16

Hình 1.3 Danh sách các đối tượng trong hệ thống (thuộc tính) 18

Bảng 1.3 Mô tả dữ liệu công việc 19

Bảng 1.4 Danh sách các màn hình chức năng 20

Hình 1.4 Sơ đồ liên kết giữa các màn hình 20

Hình 1.5 Giao diện màn hình chính 27

Hình 1.6 Giao diện màn hình thêm/sửa công việc 31

Hình 1.7 Giao diện màn hình Google map 35

Hình 1.8 Giao diện màn hình lịch biểu 39

Hỉnh 1.9 Giao diện màn hình tìm kiếm 43

Hình 1.10 Giao diện màn hình thiết lập 48

Hình 1.11 VA-11 HALL-A 50

ơn cô

Đề tài được nhóm thực hiện trong khoảng thời gian 3 tháng nên bước đầu đi vào thực tế, kiến thức cũng như kinh nghiệm thực tiễn của em còn nhiều hạn chế Do vậy, chắc chắn không thể tránh khỏi những sai sót, nhóm rất mong nhận được những sự chỉ bảo, ý kiến đóng góp quý báu của cô và các bạn học cùng lớp để em có điều kiện được bổ sung, nâng cao kiến thức của mình trong lĩnh vực này, giúp hoàn thiện hơn và tích lũy thêm cho bản thân nhiều kinh nghiệm, phục vụ tốt hơn cho công việc thực tế sau này

Em xin chân thành cảm ơn cô!

Thành phố Hồ Chí Minh, ngày 07 tháng 06 năm 2022

Sinh viên thực hiện PHẠM MINH VIỆT

ĐỀ CƯƠNG CHI TIẾT

TÊN ĐỀ TÀI:

XÂY DỰNG ỨNG DỤNG NHẮC NHỞ LỊCH TRÌNH

Tên đề tài tiếng Anh:

BUILDING A REMINDER APPLICATION

Cán bộ hướng dẫn: ThS Trần Thị Hồng Yến

Thời gian thực hiện: Từ ngày 21/02/2022 đến tháng 11/06/2022

Sinh viên thực hiện:

- Tìm hiểu về React Native

- Tìm hiểu các ứng dụng nhắc lịch trình đã có trước đây, từ đó tiến hành phân tích, xác định các yêu cầu cụ thể cho đề tài

- Phân tích và thiết kế hệ thống

- Xây dựng ứng dụng cho người dùng

- Tiến hành phát triển và kiểm thử

5 Công nghệ:

- Expo

- React Native

- React Redux

6 Kết quả mong đợi:

- Nắm bắt và áp dụng được các công nghệ mới để xây dựng sản phẩm đề tài

- Áp dụng được các kiến thức đã học về phân tích và thiết kế hệ thống phần mềm, quy trình phát triển phần mềm, cũng như quản lý và triển khai dự án

- Có thể thay đổi giao diện một cách linh động, và mở rộng thêm các chức năng mới cho sản phẩm đề tài phù hợp với nhu cầu thực tiễn trong tương

lai

Kế hoạch thực hiện:

21/02/2022 – 06/03/2022 Tìm hiểu đề tài, xác định các chức năng

Phạm Minh Việt

CHƯƠNG 1 – TỔNG QUAN VỀ ĐỀ TÀI

1.1 Đối tượng nghiên cứu

Đồ án này hướng đến nghiên cứu các đối tượng sau:

❖ Các công nghệ:

o Expo

o React Native

o React Redux

❖ Đối tượng trong phạm vi đề tài hướng đến:

o Người dùng có nhu cầu cần ứng dụng nhắc nhở lịch trình làm việc

1.2 Phạm vi nghiên cứu

Đề tài tập trung vào nghiên cứu về ứng dụng nhắc nhở lịch trình Sản phẩm của đề tài là ứng dụng nhắc nhở lịch trình làm việc

1.3 Phương pháp nghiên cứu

Nhóm đã sử dụng các phương pháp nghiên cứu:

- Phương pháp đọc tài liệu

- Phương pháp phân tích các ứng dụng nhắc nhở hiện có

CHƯƠNG 2 – CƠ SỞ LÝ THUYẾT

1.4 Tổng quan về Expo

Expo là một công cụ mã nguồn mở và miễn phí được xây dựng xung quanh React Native

để giúp xây dựng các dự án iOS và Android bằng Javascript và React

Về cơ bản:

• Trong khi test, có thể tận dụng một môi trường gần giống với môi trường phát triển React.js

• Thông qua SDK Expo, chúng ta có thể chạm vào điện thoại giống như cách chúng

ta làm với code Android hoặc iOS

Khi tiếp tục phát triển, chúng ta có thể gặp phải những hạn chế của Expo Cụ thể, hiện tại

nó không hỗ trợ tích hợp Bluetooth Tất cả các công cụ của bên thứ ba trong một dự án Expo phải được xây dựng trong môi trường Expo

Sử dụng lệnh npm run eject sẽ chuyển đổi dự án thành dự án React Native, nghĩa là mỗi khi build ứng dụng từ bây giờ, nó được chuyển đổi thành code Java hoặc Objective-C Điều này cho phép chúng ta khắc phục những hạn chế được đề cập ở trên, nhưng có thể khiến việc test và build app khó khăn hơn đáng kể Lưu ý rằng eject ra là một hành động vĩnh viễn, vì vậy nên hãy chắc chắn rằng một copy của dự án được lưu trữ ở đâu đó trước khi tiến hành eject

1.5 Tổng quan về React.js và Redux

1.5.1 React.js

React (hay React.js, ReactJS) là một thư viện JavaScript hướng đến xây dựng giao diện người dùng React là mã nguồn mở được phát triển bởi Facebook và cộng đồng những nhà lập trình

React đang nổi lên trong những năm gần đây theo xu hướng Single Page Application React hỗ trợ xây dựng những thành phần giao diện (components) có tính tương tác và tái sử dụng cao Chính vì vậy mà những website khi sử dụng React chạy mượt, nhanh, có khả năng mở rộng cao và cũng không quá khó để hiện thực React cho phép nhúng code HTML, CSS trong code JavaScript nhờ vào JSX, giúp cho lập trình viên có thể dễ dàng lồng ghép HTML, CSS vào trong JavaScript một cách tự nhiên hơn Ngoài ra, còn thể sử dụng React để render dữ liệu từ người dùng

React được xây dựng dựa trên khái niệm component Một component đại điện cho một thành phần giao diện người dùng có khả năng tái sử dụng từ đơn giản đến phức tạp, các component được lồng nhau tạo nên cấu trúc phân cấp, từ các component nhỏ có thể

xây dựng nên các component lớn hơn Một component có thể nhận những tham số từ component khác và có trạng thái riêng biệt Các component còn có tổ chức phân cấp cho phép cho thể tương tác và phụ thuộc lẫn nhau

Các ưu điểm của React:

- Dễ dàng nhúng HTML, CSS vào trong React component bởi JSX

- Xây dựng giao diện từ các component, và React cũng cho phép tái sử dụng các component này, giúp việc rút gọn thời gian lập trình và dễ dàng quản lý các component hơn

- React có nhiều công cụ phát triển giúp cho việc debug code một dễ dàng hơn

- Hiệu suất tốt hơn với Virtual DOM React cho phép xây dựng các Virtual DOM, khi có sự thay đổi trong DOM thực tế thì Virtual DOM sẽ thay đổi ngay lập tức

- React triển khai luồng dữ liệu một chiều, được truyền từ cha đến con thông qua thuộc tính (props), điều này giúp chúng ta dễ dàng suy luận và kiểm soát luồng logic hơn so với kiểu ràng buộc dữ liệu truyền thống Còn giúp cho quá trình phát hiện lỗi, bảo trì và nâng cấp một cách hiệu quả hơn

1.5.2 Redux

Vấn đề quản lý trạng thái là một vấn đề khá phức tạp khi xây dựng giao diện người dùng Khi giao diện có độ phức tạp cao, các thành phần giao diện lồng nhau và rẽ nhánh nhiều khiến việc quản lý trạng thái của từng thành phần càng khó khăn hơn

Trong React.js khi một dữ liệu thay đổi sẽ ảnh hưởng tới nhiều component cùng lúc

vì trạng thái được chia sẻ từ component cha cho các component con Vấn đề xuất hiện chúng ta khi muốn chia sẻ các trạng thái qua nhiều component sẽ gây tăng độ phức tạp quản lý state, tăng tính kết dính và làm có các component khó tái sử dụng hơn

Để giải quyết vấn đề đó, Redux được xây dựng với ý tưởng tập trung hóa trạng thái của các đối tượng, từ đó giúp việc quản lý trạng thái dễ dàng và tốt hơn

Redux được xây dựng dưa trên 3 thành phần chính:

• Action: Một action là một đối tượng thuần JavaScript Một action có hai thuộc

payload chứa các thông tin cụ thể liên quan đến action Bên cạnh đó để tạo ra một action bằng cách gọi action creator, thực chất là một hàm trả về một đối tượng action

• Reducer: một reducer là một hàm nhận vào trạng thái hiện tại và đối tượng

action, cập nhật trạng thái nếu cần thiết và trả về trạng thái sau khi cập nhật Reducer không được phép chỉnh sửa trạng thái thay vào đó phải tạo một trạng thái mới

• Store: Chứa tất cả trạng thái của ứng dụng, được thay đổi bởi reducer khi nhận

về cấu trúc của React Native chúng ta cần phải có các kiến thức cơ bản với các khái niệm cơ bản của React như là JSX, components, props hay là state

1.6.1.1 Ưu điểm

• Có khả năng tái sử dụng code và các components đã được phát triển sẵn

• Có một cộng đồng phát triển hùng hậu

• Live và hot reloading

• Code có thể chạy cho cả iOS và Android

1.6.1.2 Nhược điểm

• Vẫn đòi hỏi native code

• Hiệu năng sẽ thấp hơn với app thuần native code

• Bảo mật không cao do dựa trên Javascript

• Khả năng tùy biến không thực sự tốt đối với một vài module

1.6.2 Async Storage

Async Storage là thành phần đơn giản dùng để lưu trữ dữ liệu offline Nó

hỗ trợ lưu trữ dữ liệu không mã hóa theo dạng cặp key-value và hỗ trợ bất đồng

bộ

Chúng ta có thể lưu trữ dữ liệu tùy thuộc vào bộ nhớ của máy do Async Storage sẽ tự động sử dụng “Dictionary” hoặc File để lưu giá trị (iOS) hoặc sử dụng RocksDB, SQLite (Android)

1.7 Tổng quan về Expo Notifications

expo-notifications cung cấp API để lấy các token của push notification để hiện thông tin, nhận hoặc xử lý thông báo

1.7.1 Các chức năng

- Tạo thông báo cho một ngày cụ thể, hoặc vài giờ sau

- Tạo thông báo có thể lặp đi lặp lại trong một khung thời gian nhất định

- Lắng nghe các thông báo đang tới ứng dụng

- Lắng nghe các tương tác trên thông báo

- Xử lý thông báo khi đang sử dụng ứng dụng

- Đặt icon, màu sắc cho thông báo trên Android

CHƯƠNG 3 – PHÂN TÍCH THIẾT KẾ HỆ THỐNG

1.8 Mô tả yêu cầu

1.8.1 Yêu cầu chức năng

Một số chức năng chính của ứng dụng như sau:

Công việc Hiển thị danh sách công

việc

Người dùng có thể xem được danh sách tất cả các công việc trong giao diện chính

Xem chi tiết công việc Người dùng có thể xem

được đầy đủ thông tin của công việc bao gồm: tên, chi tiết, ngày kết thúc, địa điểm

kiếm bằng các từ khóa liên quan đến tên của công việc Thêm công việc Cho phép người dùng thêm

công việc

kiếm địa điểm bằng từ khóa liên quan đến tên của địa điểm, số đường, tên nước

Quản lý Thêm, sửa, xóa công việc Cho phép người dùng

thêm, sửa, xóa công việc Giao diện và ngôn ngữ Thay đổi giao diện, ngôn

ngữ

Cho phép người dùng thay đổi màu sắc giao diện (sáng, tối), ngôn ngữ (tiếng Việt, Anh, Nhật)

Bảng 1.1 Mô tả chức năng của ứng dụng

1.8.2 Yêu cầu phi chức năng

- Tính tiện dụng: Ứng dụng dễ sử dụng, tiện lợi trong việc sử dụng để quản lý lịch trình

- Tính hiệu quả: Đảm bảo tốc độ xử lý ổn định, có thể lưu dữ liệu, tránh xảy ra lỗi ngoại lệ

1.9 Kiến trúc hệ thống

1.9.1 Sơ đồ kiến trúc tổng quát

Hình 1.1 Sơ đồ kiến trúc hệ thống

1.9.2 Mô tả kiến trúc Front-end

Hình 1.2 Sơ đồ kiến trúc front-end

Front-end được xây dựng bằng React Native và được chia thành ba thành phần chính như sau:

UI Là các thành phần giao diện hiển thị cho

người dùng thường chia thành các component Sử dụng StyleSheet để tạo giao diện và render giao diện ở phía người dùng

Action creator Giúp người dùng có thể thực hiện các

event để tương tác với ứng dụng Giúp tạo các action và nhận các giá trị chuyển đến hàm điều phối dưới dạng giá trị kết quả và tiến hành thực thi

Reducer Reducer là những action handler, nó hoạt

động kết nối giữa action và store và biến thành những thay đổi trong state Nếu chúng ta dispatch một action là

ADD_TASK vào trong store, chúng ta có thể có một reducer nhận action đó và thêm task mới vào trong state

Store Nơi lưu trữ dữ liệu và quản lý state của

Bảng 1.2 Mô tả thành phần kiến trúc Front-end

Hình 1.3 Danh sách các đối tượng trong hệ thống (thuộc tính)

1.10.2 Dữ liệu đối tượng công việc

tạo công việc

người dùng chọn tạo lịch trình mang tính cấp bách

hình thêm công việc

việc (ngày giờ, mỗi ngày, mỗi tuần, mỗi năm)

việc đã kết thúc hay không

repeats boolean Thông báo có lặp lại hay

đầu từ số 1, là ngày Chủ nhật)

Bảng 1.3 Mô tả dữ liệu công việc

1.11 Thiết kế giao diện

1.11.1 Danh sách các màn hình

Chức năng liên quan đến

lịch trình

Hiển thị danh sách công việc

Người dùng có thể xem được danh sách tất cả các công việc trong giao diện chính

Xem chi tiết công việc Người dùng có thể xem

được đầy đủ thông tin của công việc bao gồm: tên, chi tiết, ngày kết thúc, địa điểm

kiếm bằng các từ khóa liên quan đến tên của công việc Thêm công việc Cho phép người dùng thêm

Chức năng liên quan đến

quản lý

Thêm, sửa, xóa công việc Cho phép người dùng

thêm, sửa, xóa công việc Chức năng liên quan đến

giao diện, ngôn ngữ

Thay đổi giao diện, ngôn ngữ

Cho phép người dùng thay đổi màu sắc giao diện (sáng, tối), ngôn ngữ (tiếng Việt, Anh, Nhật)

Bảng 1.4 Danh sách các màn hình chức năng

1.11.2 Sơ đồ liên kết các màn hình

Hình 1.4 Sơ đồ liên kết giữa các màn hình

1.11.3 Giao diện các màn hình chức năng

Hình 1.5 Giao diện màn hình chính

Hình 1.6 Giao diện màn hình thêm/sửa công việc

Hình 1.7 Giao diện màn hình Google map

Hình 1.8 Giao diện màn hình lịch biểu

Hỉnh 1.9 Giao diện màn hình tìm kiếm

Hình 1.10 Giao diện màn hình thiết lập

Hình 1.11 VA-11 HALL-A

- Vận dụng được các kiến thức, quy trình phát triển đã được học

- Tiếp thu nhiều kiến thức mới

- Giao diện đơn giản, bố cục hợp lý, người dùng dễ dàng thao tác trên ứng dụng

- Tốc độ phản hồi thao tác nhanh, tối ưu hóa trải nghiệm của người dùng

- Sinh viên thực hiện đã nắm được cách tổ chức, xây dựng một hệ thống hoàn thiện và tạo ra được một ứng dụng nhắc nhở lịch trình để phục vụ cho nhu cầu của người dùng

- Sinh viên nắm được các công nghệ phổ biến hiện nay như React Native, Expo

- Ứng dụng được triển khai thành công trên môi trường di động

1.13.2 Nhược điểm

- Sinh viên vẫn không biết đánh số trong Word

1.14 Hướng phát triển

- Cho phép người dùng đăng nhập và đồng bộ dữ liệu trên nhiều thiết bị

- Thêm animation, hiệu ứng

- Thêm tính năng hiển thị thông tin lịch trình khi địa điểm hiện tại của người dùng có trong danh sách công việc

- Thêm chức năng theo dõi người dùng, chia sẽ lịch trình, địa điểm