Xây dựng apptrang web Đọc truyện

Giới thiệu về React Native Hình 1.1: React Native React Native là một framework được tạo bởi Facebook, cho phép các lập trình viên sử dụng JavaScript để làm mobile apps trên cả Android v

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN &

TRUYỀN THÔNG VIỆT HÀN

Khoa Khoa Học Máy Tính

TÊN ĐỀ TÀI ABC

Xây dựng apptrang web đọc truyện

NgaAAA

Đà Nẵng, tháng 0 năm 20245 21

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN &

TRUYỀN THÔNG VIỆT HÀN

Khoa Khoa Học Máy Tính

Xây dựng app trang web đọc truyệnTÊN ĐỀ TÀI ABC

Sinh viên thực hiện: Hoàng Lê Huy ABC Mã:

Đà Nẵng, tháng 0405 năm 20221

NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN

3

LỜI CẢM ƠN

Trong thời gian làm báo cáo, chúng em đã nhận được nhiều sự giúp đỡ, đóng góp ý kiến và chỉ bảo nhiệt tình của thầy cô và bạn bè Chúng em xin gửi lời cảm ơn chân thành đến thầy ThS Lương Khánh Tý cô Nguyễn Thị Hạnh

đã tận tình hướng dẫn, chỉ bảo chúng em trong suốt quá trình làm báo cáo Chúng em cũng xin chân thành cảm ơn các thầy cô giáo trong trường Đại học công nghệ thông tin và truyền thông Việt Hàn nói chung, các thầy cô trong Khoa công nghệ thông tin nói riêng đã dạy dỗ cho chúng em kiến thức về các môn đại cương cũng như các môn chuyên ngành, giúp chúng em có được cơ

sở lý thuyết vững vàng và tạo điều kiện giúp đỡ chúng em trong suốt quá trình học tập Cuối cùng, chúng em xin chân thành cảm ơn gia đình và bạn

bè, đã luôn tạo điều kiện, quan tâm, giúp đỡ, động viên em trong suốt quá trình học tập và hoàn thành báo này

Do điều kiện thời gian có hạn và kinh nghiệm làm báo cáo chưa có nhiều nên

em không thể tránh khỏi những thiếu sót trong lúc trình bày cũng như làm báo cáo, kính mong nhận được những ý kiến đóng góp từ quý thầy cô.

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

Sinh viên

Hoàng Lê Huy

Em xin trân trọng cảm ơn

4

Sinh viên,

ABC

5

MỤC LỤC

DANH MỤC CÁC TỪ VIẾT TẮT .6

DANH MỤC HÌNH ẢNH 7

Chương 1 Tổng quan về đề tài .9

1.1 Tên đề tài……… 9

1.2 Tổng quan về các công cụ thực hiện………9

Chương 2 Quy trình phân tích thiết kế hệ thống ……….12

2.1 Phát biểu bài toán………12

2.2 Xây dựng biểu đồ use - case……… 12

2.3 Xây dựng biểu đồ hoạt động……… 15

Chương 3 Một số hình ảnh và mô tả về trang web…… 18

Chương 4 Kết luận và hướng phát triển.……… …26

DANH MỤC CÁC TỪ VIẾT TẮT 6

DANH MỤC HÌNH ẢNH .7

Chương 1 Tổng quan về đề tài 9

ABC .iv

DANH MỤC CÁC TỪ VIẾT TẮT .vii

DANH MỤC HÌNH VẼ .viii

MỞ ĐẦU .1

1 Giới thiệu 1

2 Mục tiêu của đề tài 1

3 Nội dung và kế hoạch thực hiện 1

4 Bố cục báo cáo 1

Chương 1 TỔNG QUAN VỀ … .2 6

1 AAAAAAA 2

1.1 aaaaaaaa111 2

1.2 aaaaaaa222 2

2 BBBBBBBBBBB 2

1.1 bbbbbbbbbb111 2

1.2 bbbbbbbbbb22222 2

3 Kết chương 1 2

Chương 2 PHÂN TÍCH … .3

1 AAAAA

3

2 BBBBBBB

3

3 Kết chương 2

3

Chương 2 XÂY DỰNG … .4

1 AAAAA

4

2 BBBBBBB

4

3 Kết chương 3

4

KẾT LUẬN .5

1. Kết quả đạt được

5

2. Hướng nghiên cứu

5

Với những hạn chế và tồn tại nêu trên, hướng nghiên cứu …dự kiến như sau: 5

PHỤ LỤC .i

Error! Hyperlink reference not valid.ABC iv

Error! Hyperlink reference not valid.DANH MỤC CÁC TỪ VIẾT TẮT vii

Error! Hyperlink reference not valid.DANH MỤC HÌNH VẼ viii

Error! Hyperlink reference not valid.MỞ ĐẦU 1

Error! Hyperlink reference not valid.1 Giới thiệu 1

Error! Hyperlink reference not valid.2 Mục tiêu của đề tài 1

Error! Hyperlink reference not valid.3. 1

7

Error! Hyperlink reference not valid.Nội dung và kế hoạch thực hiện 1

Error! Hyperlink reference not valid.4 Bố cục báo cáo 1

Error! Hyperlink reference not valid.Chương 1 TỔNG QUAN VỀ … 2

Error! Hyperlink reference not valid.1 AAAAAAA 2

Error! Hyperlink reference not valid.1.1 aaaaaaaa111 2

Error! Hyperlink reference not valid.1.2 aaaaaaa222 2

Error! Hyperlink reference not valid.2 BBBBBBBBBBB 2

Error! Hyperlink reference not valid.1.1 bbbbbbbbbb111 2

Error! Hyperlink reference not valid.1.2 bbbbbbbbbb22222 2

Error! Hyperlink reference not valid.3 Kết chương 1 2

Error! Hyperlink reference not valid.Chương 2 PHÂN TÍCH … 3

Error! Hyperlink reference not valid.1 AAAAA

3

Error! Hyperlink reference not valid.2 BBBBBBB

3

Error! Hyperlink reference not valid.3 Kết chương 2

3

Error! Hyperlink reference not valid.Chương 2 XÂY DỰNG … 4

Error! Hyperlink reference not valid.1 AAAAA

4

Error! Hyperlink reference not valid.2 BBBBBBB

4

Error! Hyperlink reference not valid.3 Kết chương 3

4

Error! Hyperlink reference not valid.KẾT LUẬN 5

Error! Hyperlink reference not valid.1. .Kết quả đạt được

5

Error! Hyperlink reference not valid.2. Hướng nghiên cứu

5

Error! Hyperlink reference not valid.Với những hạn chế và tồn tại nêu trên, hướng nghiên cứu …dự kiến như sau: 5

Error! Hyperlink reference not valid.TÀI LIỆU THAM KHẢO i

Error! Hyperlink reference not valid.PHỤ LỤC i

Error! Hyperlink reference not valid Danh mục các từ viết tắt vi

8

Error! Hyperlink reference not valid Danh mục hình vẽ vii

Error! Hyperlink reference not valid MỞ ĐẦU 1

Error! Hyperlink reference not valid 1. Giới thiệu

1

Error! Hyperlink reference not valid 2 Mục tiêu, nhiệm vụ của đề tài 1

Error! Hyperlink reference not valid 3 Đối tượng, phạm vi và phương pháp tiếp cận 1

Error! Hyperlink reference not valid 4 Đóng góp của đề tài 1

Error! Hyperlink reference not valid 5 Bố cục của luận văn 1

Error! Hyperlink reference not valid Chương 1 TỔNG QUAN VỀ … 2

Error! Hyperlink reference not valid 1 AAAAAAA 2

Error! Hyperlink reference not valid.1.1 aaaaaaaa111 2

Error! Hyperlink reference not valid.1.2 aaaaaaa222 2

Error! Hyperlink reference not valid 2 BBBBBBBBBBB 2

Error! Hyperlink reference not valid.1.1 bbbbbbbbbb111 .2

Error! Hyperlink reference not valid.1.2 bbbbbbbbbb22222 2

Error! Hyperlink reference not valid 3 Kết chương 1 2

Error! Hyperlink reference not valid Chương 2 PHÂN TÍCH … 3

Error! Hyperlink reference not valid 1 AAAAA

3

Error! Hyperlink reference not valid 2 BBBBBBB

3

Error! Hyperlink reference not valid 3. Kết chương 2

3

Error! Hyperlink reference not valid Chương 2 XÂY DỰNG … 4

Error! Hyperlink reference not valid 1 AAAAA

4

Error! Hyperlink reference not valid 2 BBBBBBB

4

Error! Hyperlink reference not valid 3. Kết chương 3

4

Error! Hyperlink reference not valid KẾT LUẬN 5

9

Error! Hyperlink reference not valid 1. Kết quả đạt được 5 Error! Hyperlink reference not valid 2 Hướng nghiên cứu 5 Error! Hyperlink reference not valid TÀI LIỆU THAM KHẢO i

10

DANH MỤC CÁC TỪ VIẾT TẮT

VIẾT TẮT NỘI DUNG

11

DANH MỤC HÌNH ẢNHVẼ

No table of figures entries found Error! Hyperlink reference not valid.Hình 1.1.

aaaaaaa 11

Error! Hyperlink reference not valid.Hình 1.2 bbbbbbbbbbbb 12

Error! Hyperlink reference not valid.Hình 1.3 ccccccccccccccccc .17

Error! Hyperlink reference not valid.Hình 2.1.ddddddd 24

Error! Hyperlink reference not valid.Hình 2.2 eeeeeeeeeee .28

12

MỞ ĐẦU

1 Giới thiệu

Thế kỷ XXI, xã hội đề cao tầm quan trọng và sự kết nối của Khoa học, Kỹ thuật, Công nghệ

2 Mục tiêu, nhiệm vụ của đề tài

Mục tiêu của đề tài nhằm tìm hiểu……

3 Nội dung và kế hoạch thực hiện

3 Đối tượng, phạm vi và phương pháp tiếp cận

Dựa trên hướng tiếp cận

54 Bố cục của đề tàibáo cáo

Sau phần Mở đầu, báo cáo được trình bày trong ba chương, cụ thể như sau:

10

Chương 1 Tổng quan về … Trong chương này, báo cáo trình bày các khái niệm, đặc điểm,

Chương 2 Phân tích thiết kế … Nội dung chương bao gồm các

Chương 3 Xây dựng … Chương này đề xuất…

Cuối cùng là Kết luận Tài liệu tham khảo, và Phụ lục liên quan đến đề tài.

11

KẾT LUẬN

Nêu những gì mình học được, đạt được qua quá trình làm đồ án

về mặt lý thuyết, về mặt thực nghiệm, trải nghiệm…

Bên cạnh …

Với những hạn chế và tồn tại nêu trên, hướng nghiên cứu …dự kiến như sau:

- Tìm hiểu

- Khai thác…

15

TÀI LIỆU THAM KHẢO

"http://thoibaotaichinhvietnam.vn/pages/quoc-te/2015-12-08/10-[15] [

8]

[16] "http://truonghocketnoi.edu.vn/data/thuvien/DongPhD/hoclieu_36 50611_1446867073.pdf".

[25] [

13

]

[26] stem".

"https://hocvienkhampha.edu.vn/hieu-sao-cho-dung-ve-giao-duc-9

PHỤ LỤC Chương 1 Tổng quan về đề tài

- Xây dựng app đọc truyện.

1.2.1 Giới thiệu về React Native

Hình 1.1: React Native

React Native là một framework được tạo bởi Facebook, cho phép

các lập trình viên sử dụng JavaScript để làm mobile apps trên cả

Android và IOS với có trải nghiệm và hiệu năng như native React

9

Native vượt trội ở chỗ chỉ cần viết một lần là có thể build ứng dụng cho

1.2.2 Giới thiệu về Framework ExpressJS

Hình 1.2: ExpressJS

Expressjs là một framework mã nguồn mở miễn phí cho Node.js Expressjs được sử dụng trong thiết kế và xây dựng các ứng dụng web

một cách đơn giản và nhanh chóng.

Vì Expressjs chỉ yêu cầu ngôn ngữ lập trình Javascript nên việc xây dựng các ứng dụng web và API trở nên đơn giản hơn với các lập trình viên và nhà phát triển.Expressjs cũng là một khuôn khổ của Node.js do đó hầu hết các mã code

đã được viết sẵn cho các lập trình viên có thể làm việc.

Nhờ có Expressjs mà các nhà lập trình có thể dễ dàng tạo các ứng dụng 1 web, nhiều web hoặc kết hợp Do có dung lượng khá nhẹ, Expressjs giúp cho việc tổ chức các ứng dụng web thành một kiến trúc MVC có tổ chức hơn.Để có thể sử dụng được mã nguồn này, chúng ta cần phải biết về Javascript và HTML Expressjs cũng là một phần của công nghệ giúp quản lý các ứng dụng web một cách dễ dàng hơn hay còn được gọi là ngăn xếp phần mềm MEAN Nhờ có thư 10

viện Javascript của Express js đã giúp cho các nhà lập trình xây dựng nên các ứng dụng web hiệu quả và nhanh chóng hơn Expressjs cũng được sử dụng để nâng cao các chức năng của Node.js.

Trên thực tế, nếu không sử dụng Express.js, bạn sẽ phải thực hiện rất nhiều bước lập trình phức tạp để xây dựng nên một API hiệu quả Express js đã giúp cho việc lập trình trong Node.js trở nên dễ dàng hơn và có nhiều tính năng mới bổ sung.

1.2.3 Giới thiệu về hệ quản trị cơ sở dữ liệu MongoDB

Hình 1.3: MongoDB

MongoDB là một mã nguồn mở và là một tập tài liệu dùng cơ chế

+ nên nó có khả năng tính toán với tốc độ cao chứ không giống như các hệ quản trị CSDL hiện nay Mỗi một table (bảng dữ liệu) trong SQL sử dụng thì trong MongoDB gọi là collection (tập hợp) Mỗi một record (bản ghi) trong MongoDB được gọi là document (tài liệu) Một bản ghi của MongoDB được lưu trữ dưới dạng document (tài liệu), nó được ghi xuống với cấu trúc field (trường) và value (giá trị) Nó giống như là một đối tượng JSON có dạng như sau:

11

Điều này có thể dễ dàng ép kiểu sang array (mảng) để lập trình các ứng dụng một cách dễ dàng hơn Nói một cách dễ hiểu thì mỗi một bản ghi của MongoDB là một mảng dữ liệu riêng biệt bao gồm các cặp key, value khác nhau do đó cách lưu trữ của MongoDB là phi cấu trúc dữ liệu.

Chương 2: Quy trình phân tích thiết kế hệ thống

2.1 Phát biểu bài toán.

xem các quyển, tập truyện mà người đọc mong muốn Tất cả mọi người dùng đều có thể đọc những quyển, tập truyện mà mình mong muốn mà không phân biệt việc người dùng đó đã có tài khoản hay chưa Tất cả mọi người dùng đều có thể thực hiện việc tìm kiếm truyện mà mình mong muốn Một số chức năng khác ví dụ như Like truyện hoặc Comment truyện bắt buộc người dùng phải có tài khoản mới có thể thực hiện được chức năng này và bắt buộc người dùng phải tạo mới một tài khoản cho riêng mình nếu họ không có tài khoản và muốn được thực hiện hai chức năng trên.

Quản trị viên thực hiện các công việc như quản lý truyện, thêm truyện,

cập nhật tập mới cho truyện, xóa truyện, quản lý người dùng và các quản trị viên bắt buộc phải có tài khoản của riêng mình mới được phép sử dụng các tài nguyên của phía quản trị…

2.2 Xây dựng biểu đồ Use – Case.

12

o Người đọc: Tìm truyện, đọc truyện, like truyện, comment

truyện.

cho truyện, xóa truyện, quản lý người dùng.

https://drive.google.com/file/d/1FI01Mxcd8iUWtjFC9NUq ADzN2vyUcDtz/view?usp=sharing

Hình 2.1: Sơ đồ Use – Case

vào hệ thống và thực hiện các chức năng trong hệ thống.

 Bước 2: Nhập tài khoản và mật khẩu.

công, người dùng sẽ được trả về trang chủ, ngược lại, người dùng sẽ phải đăng nhập lại.

khoản để sử dụng các chức năng trong hệ thống.

 Bước 1: Người dùng truy cập vào trang đăng ký.

 B ước 2: Nhập các thông tin bắt buộc.

 Bước 3: Nhấn nút đăng ký.

đăng ký thành công cho người dùng khi các thông tin đã thật sự chính xác và hợp lệ.

kiến, quan điểm của mình về truyện mà họ đã và đang đọc.

sử dụng được chức năng bình luận.

luận, kéo xuống phần bình luận.

dùng sẽ được đăng tải.

trang web.

14

o Các bước thực hiện:

thể sử dụng được chức năng thêm truyện.

 Bước 2: Truy cập vào trang thêm truyện.

 Bước 3: Nhập đầy đủ có thông tin bắt buộc để có thể

đăng tải truyện.

cho quản trị viên nếu việc đăng tải diễn ra thành công.

2.3 Xây dựng biểu đồ hoạt động.

2.3.1 Biểu đồ hoạt động mô tả việc người dùng truy cập và đọc truyện.

https://drive.google.com/file/d/1TbFdHcjJ0HU7f-wqxDmixMoq_BnzmItN/view?usp=sharing

15

2.3.2 Biểu đồ hoạt động mô tả việc người dùng sử dụng chức năng bình luận (Tương tự với chức năng like).

https://drive.google.com/file/d/1k4iKC6tmOY07ME_D2HDhmXcWl HVelKZt/view?usp=sharing

16

2.3.3 Biểu đồ hoạt động mô tả chức năng thêm truyện của quản trị viên (Các chức năng cập nhật truyện, xóa truyện… tương tự).

TKFq4XB60D/view?usp=sharing

https://drive.google.com/file/d/1LVvA4pGtZlA12Z8xRFijg-17

Chương 3: Một số hình ảnh về app.

18

19

20

21

22

23

Chương 4 Kết luận và hướng phát triển

- Tuy thời gian thực hiện đề tài có hạn chế, nhưng nhìn chung các chức năng cơ bản của một trang app đọc truyện đã hoàn thiện, app đã thực hiện tốt các chức năng như sau:

o Người dùng đã có thể tìm kiếm, đọc truyện, like, comment, thực hiện đăng ký tài khoản người dùng và xác thực danh tính người dùng.

- Giao diện còn đơn giản.

- Dung lượng app lớn, chưa tối ưu.

- Xử lý trạng thái cho chức năng Like truyện còn gặp nhiều lỗi và chưa thể khắc phục.

- D ung lượng hình ảnh chưa tối ưu, dẫn đến việc thu hẹp nhanh chống dung lượng lưu trữ (Cloudinary chỉ cho phép sử dụng ở hạn mức dung lượng là 15gb trong khi các hình ảnh đều chiếm giao động ở mức dung lượng 3 đến 6mb).

- Tính bảo mật còn hạn chế.

- Tiếp tục khắc phục và phát triển các chức năng cho app.

- Gia tăng trải nghiệm người dùng về mặt giao diện và chức năng.

- Tăng tính đa dạng về việc xác thực người dùng (Sử dụng tài khoản google, facebook… ).

- Tăng tính bảo mật cho app.

Tài liệu tham khảo

1 ReactJS official documentation: https://reactjs.org/

2 CharkraUI official documentation: https://chakra-ui.com/

3 ExpressJS official documentation: https://expressjs.com/en/guide/routing.html

4 Mongoose (MongoDB library) official documentation: https://mongoosejs.com/

5 StackOverflow community: https://stackoverflow.com/

24