Báo cáo Đồ Án môn học công nghệ lập trình Đa nền tảng cho Ứng dụng di Động Đề tài Ứng dụng mobile chia sẻ nội dung nền tảng trực tuyến techub blog app

Võ Ngọc Tân là giảng viên hướng dan dé tài chuyên ngành của chúng em trong quá trình thực hiện đồ án bộ môn học Công nghệ lập trình đa nền tảng cho ứng dụng di động.. Sau đây, nhóm chúng

BAO CAO DO AN MON HOC CONG NGHE LAP TRINH DA NEN TANG CHO UNG DUNG DI DONG

tai:

D

Ứng dụng mobile Chia sẻ nội dung nền tảng trực tuyến

TechuB Blog App

GVHD: ThS V6 Ngoc Tan Sinh viên thực hiện:

1 Nguyễn Hồng Phúc MSSV: 21521291

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

, HOỜY tháng năm 2

Người nhận xét

(Kỹ tên và ghỉ rõ họ tên)

BANG PHAN CONG, DANH GIA THANH VIEN

Bang phan công công việc, đánh giá thành viên

Họ và tên Công việc thực hiện Đánh giá

- Hiệu chỉnh và bỗ sung, hoàn thiện file Word

va PowerPoint bao cáo đồ ân

- Thuyết trình đemo sản phẩm ứng dụng

Link Github: https://github.com/billythephes/TechuB -Blog-App.git

LOI CAM ON

Loi dau tién, chúng em xin gửi lời cảm ơn chân thành đến Trường Đại học Công nghệ Thông tin — ĐHQG TP Hồ Chí Minh đã tạo cơ hội cho chúng em được học tập tại một ngôi trường có cơ sở vật chất hàng đầu, với chất lượng giảng dạy vô cùng chuyên nghiệp và chiều sâu kiến thức chuyên ngành, và quan trọng nhất là trên tỉnh thần giảng dạy kiến thức thực tiễn cho chúng em

Chúng em gửi lời cảm ơn đặc biệt đến thầy Th§ Võ Ngọc Tân là giảng viên hướng dan dé tài chuyên ngành của chúng em trong quá trình thực hiện đồ án bộ môn học Công nghệ lập trình đa nền tảng cho ứng dụng di động Nhờ sự giảng dạy nhiệt tình, nhẫn nại dành thời gian hướng dẫn, chỉ bảo, giúp đỡ và trả lời những thắc mắc trong suốt quá trình học tập là điều kiện quý báu nhất để chúng em có thê đạt được kết quả thực hiện đồ

án tốt nhất

Tuy nhiên, vì còn nhiều hạn chế về quỹ thời gian và kinh nghiệm thực hành nên kết

quả báo cáo đồ án này sẽ không thê tránh được những thiếu sót Chúng em rất mong nhận được sự cảm thông, nhận xét đóng góp từ các Quý Thầy Cô để chúng em có điều kiện bổ sung, điều chỉnh và nâng cao kiến thức chuyên môn đề phục vụ tốt hơn cho công tác thực tế sau nảy

Chúng em xin chân thành cảm ơn!

Sau đây, nhóm chúng em sẽ trình bày tông quan báo cáo kết quả thực hiện đồ án kết thúc môn học Công nghệ lập trình đa nền tảng cho ứng dụng di động với đề tài Xây dựng ứng dụng di động Chia sẻ nội dung nên tảng trực tuyến TechuB Blog App

DANH MỤC HÌNH ẢNH

Hình 1: Trang øiới thiệu ứng dụng - 2 2c 2212211221121 1121 12 112011011 1811111 11111111 11 g1 18x kg 8 Hình 2: Trang đăng ký tài khoản - 2 2 121122112211 251 12111211111 2111 2011181201111 111 1111118 kg 8 Hình 3: Trang đăng nhập tài khoản L2 2 222122112211 251 1511111111111 11 E1 1211011201110 25 11821 H2 ceg 9 Hình 4: Trang chủ ứng dụng - - 2L 2 10201012011211 1121115211111 1 1111115111111 1 115111 kg x KH kh hai 9 Hinh 5: tr 0á 0n 10 Hình 6: Trang bài viết người dùng - 5 S1 E11 121111211211112 111112121 12121 dyu 10 Hình 7: Trang tạo bài ViẾT 5: s2 E11211211211 121111121 1121212121111 10 1 ng 1 n1 ng 11 Hinh 8: Trang chinh stra bai Vidt.i coc ccccccccccccseeccecessessecsessesseseesssssesseseeseetsesesscsesesessetesesiess HH Hình 9: Trang cải đặt - 0 Q.00 2011110111211 1121111111011 1101 1110111011111 1011101111111 12 Hinh 10: Trang thông báo - 2 2 22012111221 121 11511111 1111111 11111011 1110111111111 6111111111 HH 12 s00 82-0: 0n e 13 I8 V228: 0o 1117 13 Hình 13: Trang bài viết và comimei 2s St 9E15E92111111111111211211111111 2111212121 1u 14 Hình 14: Trang follow - L2 020111211 122111211 1121115211 19111 1011191911111 19g11 11H T011 011101 kk 14 Hinh 15: Giao diện trang web tải NodeJs 0 0 0201221111211 1211 1121112211 1112 2111111811112 17 Hình 16: Các bước đăng ký và cài đặt MongolDB 0 0201120111211 121 1 1121111111181 1x nay 23 Hinh 17: Tao Cluster với tuy chọn Thiét lap tu d6ng hodc thu) c6ng cece eects 24 Hình 18: Chọn gói dung lượng lưu trữ và nhà cung cấp cho Cluster - 5-5522 czs2z£sze2 24 Hình 19: Thêm Database User và cấp quyền Read & Write cho tất cả các database 25 Hinh 20: Kết quả được user với quyền readWriteAnyDatabase(@admin -22+22+zczeze2 25 Hình 21: Thêm địa chỉ IP và cấp quyền truy cập mọi nơi 5 c1 E11 1152111 1111121 1E re 26 Hình 22: Kết quả được địa chỉ IP Default Getway có thê truy cập mọi nơi c2 26 Hình 23: Chọn Deployment > Database đề xem thông tin CSIDL 5-5522 222222122222 £2e4 27 Hình 24: Chọn Browe Collection > Collection để xem thông tin và truy cập CSDL 27

MỤC LỤC

CHƯƠNG I: GIỚI THIỆU VÀ MINH HOẠ TECHUB BLOG APP -.2:2222222222zxc2 7

IINWv ii cv 7 1.2 Mơ tả tương tác từng trang chức năng -.-L- L0 2011201112111 1221 111111511111 181 111111 2x 8

CHƯƠNG 2: CÁC CƠNG NGHỆ ÁP DỤNG -¿- 22222 2221222112222112221122211222122211222 e6 15

PIN ae Ă 15 2.1.1 Téng quan vé React Native ccccccccccccecccsesessesscsessesessessesessesessesisesecssissesesveveesnes 15 2.1.2 Cac nén tang va thu vién str dung trong d6 an ccc ecccsesecsesseseesessesteseseseeees 16

VN \V (0ì: 5o) b:: aaaaiiiiiiậđaầáđaẢÃÝ 21

2.2.1 Téng quate cecccccccsccsesecsescseseesessesecsesscsessesessesevseseesevnsevsesevevestesesesvesessviese 21

2.2.2 MongoDB Compass 00.0ccccccceccccccccseccecteeecenseeseseeecensesesseeceeesenstseesseeeessnnaneaes 22 2.2.3 Cách đăng ký và cài đặt MongolDB c1 111121112211 1211 112111221110 111g te 22

CHƯƠNG 3: ĐÁNH GIÁ VÀ KẾT LUẬN 22:-2222222222221122211222212221112211122112211 211 28

3.1 Những điều làm được và chưa được - 2n S221 10 1111 11111111511 1 151121 15H 28 3.2 Hướng phát triển và mở rộng của đỗ án -+s- s21 xEE12211121111 1112112111111 2 tran 29

3.3 Kết luận 22 1,2 102121 21.22112111 10 rờ 30

DANH MỤC NGUỊN THAM KHẢO - 52: 2222 222222221222111222112211221122121 112 6 31

CHƯƠNG 1: GIỚI THIỆU VÀ MINH HOẠ TECHUB BLOG APP

1.1 Giới thiệu ứng dụng

Đề giúp người dùng có thể diễn đạt ý kiến, chia sẻ kiến thức, truyền tải thông điệp và tương tác với cộng đồng trực tuyến Vì thế, các ứng dụng - đặc biệt là ứng dụng

di động - dần trở nên phô biến

Ứng dụng Chia sẻ nội dung trên nền tảng thương mại điện tử ứng dụng di động cũng không ngoại lệ Với ngôn ngữ thiết kế React Native và các plug-in, thư việc hỗ trợ, một ứng dụng tiện ích đã được nhóm chúng em tạo ra như là một kênh mua bán, trao đổi các sản phẩm thiết bị điện tử của nhà Apple, nhằm phục vụ nhu cầu bán sản phẩm của người bán và lựa chọn mua sản phẩm của người mua

Với giao diện đầy đủ các chức năng trong quy trình từ tìm kiếm nhu cầu đến thanh toán và giao đến tay người tiêu dùng những sản phẩm apple, ứng đụng Blog này được kỳ vọng không chỉ đáp ứng được những yêu cầu của môn học Công nghệ lập trình đa nền tảng cho ứng dụng di động đặt ra, mà nó còn có triển vọng được khai thác, đầu tư, tiếp tục phát triển, mở rộng thành một ứng dụng thực thụ trên thị trường trong tương lai gần

Các đối tượng mà ứng dụng hướng đến phục vụ và quản lý bao gồm:

" Danh sách người dùng: Khách hàng:

1.2 Mô tả tương tác từng trang chức năng

1.2.1 Trang giới thiệu ứng dụng

1705 @ OE Bal GD

TechuB

Login New here?

lel bls

Hinh 1: Trang giới thiêu ứng dụng

1.2.2 Trang đăng ký tài khoản

1705 @ sảc S «S2

Hinh 2: Trang đăng ký tài khoản

1.2.3 Trang đăng nhập tài khoản

For you Technology Sports

2023 chơi mê cung eu

@ ran #ồ phan

Thâng chặt vặt Aston Villa ở vòng 19 Premier

cải chết được cự bảo từ lầu ca céing Lightning trí như poker, cờ vöy, cờ vue Giờ đây, chúng còn lỗ &m bao trùm sản Olđ Trafford

h những ví dụ điển hình cho các ác công nghé quan trong bị khai tử trorsg nấm:

Mô hình ngôn ngữ lớn là tương lai của AI?

thế rèn luyên đế vượt qua chúng ta tong các trò

chơi thực tế

Cảnh giác với quảng cáo làm nhanh căn Garnacho di vào lịch sử Premier League

jay Boxing Day Premier

Oy

Chuyên gen nhận định các mô hình ngôn ngữ lớn (LLM) có thể thay đối mnột số lĩnh vi Từ quả sống, nhị ae 9 dán giá hoặc L Ti quyết

G-Dragon rời YG vì quá thất vọng

Hinh 4: Trang chu ung dung

Ronaldo ghi bàn bằng cả đội MU cộng lại năm 2023

1.2.5 Trang profile người dùng

Hinh 5: Trang profile

1.2.6 Trang bài viết người dùng

Your Posts

Hello

@ Proc Novyen

How are you ?

Hinh 6: Trang bài viết người dùng

10

1.2.7 Trang tạo bài viết

Create Post Phúc Nguyễn

@phes Title

Brady Hinh 7: Trang tao bai viết

1.2.8 Trang chỉnh sửa bài viết

< <

Edit Post Edit Post Genoral Comment Genera Comment Phúc Nguyễn : Robin Hood

® Goku comment on your post

"Kernel"

Hinh 10: Trang théng bdo

12

® Youread Train's post

oe FH ut GD

Commenied

“S7 biến mất đét ngột của thương hiệu TưuFter *

1709 @ 222% DD Your Favorites

Những công nghệ bị khai tử trong năm

2023

BD tran

Su bin mat abt of của thương hiệu Twitter hey

cái chết được dự bảo từ lâu của Gu areas

là những vi dụ đưaNhhcho các trọng bị khai tử trong năm nấy:

Mô hình ngôn ngữ lớn là tương laí của AI?

ồ Nguyễn

'Ghuyên qia nhận định cac mo hinh ngôn ngữ lớn

(LLU) có Sines đối một số lĩnh vực trong cube

‘ng, \ạ vân còn nhiêu thách thức căn giái

G-Dragon réi YG vi quá thất vọng

"8y biến mất đội ngột cúa thương hiệu Twitter * S/ biển mới đột rhgội cúa thương hiệu Taster

Hình 12: Trang hoạt động

13

1.2.13 Trang bai viết

Từ sợ hãi đến vui mừng, từ la ó đến cổ vũ Hojlund

trẻ người Đan Mạch mới để lại được dấu ấn Đỏ là khoảnh khác tuyết vời đối với Hojlund, nhưng cho thấy MU lẽ ra có thể thoát khỏi tình cảnh khốn cùng

như hiện tại, nếu nghe những lời khuyên tử không

it chuyên gia am hiểu trước đó Nếu Hojlund hay:

Alejandro Garnacho (cti đủp) không ghi bản, MU

dừng mơ có điếm trước Aston Yilla Thậm chí đội chủ nhà nó thể thua đậm, khi đội hóng của Unai Emery qhủ hai bàn chỉ sau 5 phút giữa hiệp một Không đội

CHƯƠNG 2: CÁC CÔNG NGHỆ ÁP DỤNG

2.1 React Native

2.1.1 Tổng quan vé 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 xây dựng các ứng dụng di động chạy trên cả hệ điều hành Android va iOS, còn gọi là lập trình đa nền tảng bằng việc sử dụng JavaScript và React, thư viện phô biến cho người dùng là Javascript

Lịch sử phát trién cua React Native:

Tháng | nam 2015: Facebook céng b6 React Native théng qua mot bai viét trên blog công ty Họ giới thiệu React Native là một cách để xây dựng ứng dung di déng su dung React và JavaScript

Tháng 3 năm 2015: Facebook phát hành phiên bản đầu tiên của React Native cho iOS, cho phép nhà phát triển xây dựng ứng dụng di động ¡iOS bằng React Native

Tháng 9 nam 2015: Facebook phat hanh phién ban React Native cho Android, mở rộng khả năng phát triển ứng dụng đa nền tang

Tháng 4 năm 2016: Facebook công bố việc chuyển React Native vào mã nguồn mở hoàn toàn, cho phép cộng đồng tham gia phát triển và cải tiến framework

Nam 2017: React Native tro nén phổ biến và được sử dụng bởi nhiều công

ty và dự án lớn, bao gồm Airbnb, Instagram, và nhiều ứng dụng khác Năm 2018: Microsoft công bố dự án "React Native for Windows" dé hé tro phat trién ing dung Windows 10 bang React Native

Năm 2019: Facebook công bố phiên bản alpha của React Native Fabric, một phiên bản cải tiên của React Native voi hiéu suat tot hon

Nam 2020: Microsoft thông báo hợp tác với Facebook dé hỗ tro React Native trên nền tảng Windows và công bố "React Native for macOS" dé phát triên ứng dụng máy tính Mac

15

e Nam 2021 - nay: Cộng đồng React Native tiếp tục phát triển và đóng góp cho framework, với nhiêu phiên bản và cải tiên liên tục được công bô React Native da trải qua nhiều sự phát triển và cải tiến trong suốt quá trình lịch

sử của nó, và nó vẫn là một lựa chọn phổ biến cho việc phát triển ứng dụng di động đa nên tảng vào thời điểm hiện tại

2.1.2 Các nền tảng và thư viện sử dụng trong đồ án

2.1.2.1 BACK END

2.1.2.1.1 | Backend platform Node.js là một nền tảng phát triển dựa trên JavaScript runtime có thể chạy trên máy chủ, được xây dựng trên mã nguồn mở Chrome V§ JavaScript engine, và thường được sử dụng cho các ứng dụng web, APIs, và các loại ứng dụng server-side khác

Một số đặc điểm và tính năng nồi bật của Node.js:

e JavaScript Everywhere: Node.js cho phép sử dụng JavaScript để phát triển cả phía máy chủ và phía người dùng, giúp thống nhất mã nguồn và kiến trúc ứng dụng

© Asynchronous and Event-Driven Node.js su dung m6 hinh xu ly khéng déng bé (asynchronous) va su kién (event-driven) dé xtr ly nhiéu yéu cau

mà không gây blocking Điều này làm cho Node.js phù hợp cho các ứng dụng có thê mở rộng tốt

¢ Single-Threaded, Non-Blocking I/O Model: Node.js là mô hình single- threaded, nhưng có khả năng xử lý hàng nghìn kết nối cùng một lúc bằng cách sử dụng event loop va không gian làm việc non-blocking I/O

e Nên tảng mã nguồn mở (Open source): Node.js là một dự án mã nguồn

mở, có nghĩa là mã nguồn của nó có thể được xem và sửa đổi theo nhu cầu, và cộng đồng phát triển nó rộng lớn

* Module Ecosystem (npm): Node.js su dung npm (Node Package Manager)

dé quan lý các thu vién va module, gitp dé dang chia sẻ và tái sử dụng mã

nguồn

¢ Cross-Platform: Node.js có sẵn trên nhiều hệ điều hành khác nhau như Windows, macOS, và Linux, giúp phát triển và triển khai trên nhiều môi trường

® Real-Time Applcafions: Node.s được sử dụng rộng rãi cho việc phát

16