Ứng dụng AR trên ARtoolkit + Nodejs

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH
TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN
KHOA MẠNG MÁY TÍNH – TRUYỀN THÔNG
NGUYỄN HÙNG NHUẦN – 14520644
NGUYỄN VĂN TÙNG – 14521058
BÁO CÁO ĐỒ ÁN
LẬP TRÌNH ỨNG DỤNG MẠNG
XÂY DỰNG ỨNG DỤNG
THỰC TẠI ẢO TĂNG CƯỜNG
ARANIMALS
GIẢNG VIÊN HƯỚNG DẪN
ThS THÁI HUY TÂN
TP. HỒ CHÍ MINH, NĂM 2018

LỜI CẢM ƠN
Chúng em xin chân thành cảm ơn Khoa Mạng Máy Tính và Truyền Thông,
trường Đại Học Công Nghệ Thông Tin, Đại Học Quốc Gia Thành Phố Hồ Chí Minh đã
tạo điều kiện cho chúng em thực hiện đồ án này.
Chúng em xin chân thành cảm ơn thầy ThS Thái Huy Tân đã tận tình hướng
dẫn, chỉ bảo chúng em trong suốt thời gian thực hiện đồ án. Nhờ sự định hình và hướng
dẫn của thầy, chúng em đã tiếp thu vấn đề.
Đồ án này được thực hiện trong khoảng thời gian hơn 2 tháng. Bước đầu đi vào
thực tế, tìm hiểu về lĩnh vực này, kiến thức của chúng em còn hạn chế và còn nhiều bỡ
ngỡ. Do vậy, không tránh khỏi những thiếu sót là điều chắc chắn, em rất mong nhận
được những ý kiến đóng góp quý báu của quý Thầy Cô và các bạn học cùng lớp để
kiến thức của chúng em trong lĩnh vực này được hoàn thiện hơn .
Sau cùng, em xin kính chúc quý Thầy Cô trong Khoa Mạng máy tính và Truyền
thồng cùng toàn thể quý Thầy Cô tại Trường Đại Học Công Nghệ Thông Tin thật dồi
dào sức khỏe, niềm tin để tiếp tục thực hiện sứ mệnh cao đẹp của mình là truyền đạt
kiến thức cho thế hệ mai sau.
Tp. Hồ Chí Minh, tháng 01 năm 2018
Nhóm sinh viên thực hiện
Nguyễn Hùng Nhuần 14520644
Nguyễn Văn Tùng 14521058

NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN
..........................................................................................................................................
..........................................................................................................................................
..........................................................................................................................................
..........................................................................................................................................
..........................................................................................................................................
..........................................................................................................................................
..........................................................................................................................................
..........................................................................................................................................
..........................................................................................................................................
..........................................................................................................................................
..........................................................................................................................................
..........................................................................................................................................
..........................................................................................................................................
..........................................................................................................................................
..........................................................................................................................................
..........................................................................................................................................
Tp Hồ Chí Minh, ngày tháng năm 2018
Người nhận xét
(Ký tên, ghi rõ họ tên)

Mục lục
LỜI CẢM ƠN............................................................................................................................................
Mở đầu.......................................................................................................................................................
Chương 1 Tổng quan đề tài....................................................................................................................1
Chương 2 Các mô hình và lí thuyết.......................................................................................................3
2.1 Mô hình Client-Server..................................................................................................................3
2.2 Hệ điều hành Android ..................................................................................................................4
2.2.1 Tổng quan ................................................................................................................................4
2.2.2 Vòng đời một ứng dụng Android.............................................................................................5
2.2.3 NDK Android...........................................................................................................................6
2.2.4 Các thành phần giao diện.........................................................................................................8
2.2.5 Các thư viện mã nguồn mở ................................................................................................... 10
2.3 Công nghệ thực tại ảo (AR)....................................................................................................... 11
2.3.1 Theo dõi điểm quan sát ......................................................................................................... 12
2.3.2 Kết hợp nội dung thực và ảo ................................................................................................. 13
2.3.3 Tương tác thời gian thực................................................................................................ 14
2.4 Thư viện Artoolkit ..................................................................................................................... 15
2.4.1 Tổng quan ............................................................................................................................. 15
2.4.2 Tính năng .............................................................................................................................. 15
2.4.3 Công nghệ nền tảng............................................................................................................... 16
2.4.4 ARToolKit cho Android ....................................................................................................... 18
2.5 Ngôn ngữ Javascript .................................................................................................................. 18
2.5.1 Tổng quan ............................................................................................................................. 18
2.5.2 jQuery.................................................................................................................................... 19
2.5.3 Ajaxtrong jQuery .................................................................................................................. 20
2.6 File PUG...................................................................................................................................... 20
2.6.1 Tổng quan ............................................................................................................................. 20
2.6.2 Ưu điểm của PUG................................................................................................................. 21
2.7 Công nghệ NodeJs...................................................................................................................... 21
2.7.1 Tổng quan ............................................................................................................................. 21
2.7.2 Đặc điểm của Node.js .................................................................................................... 22

2.7.3 Express framework ............................................................................................................... 23
2.8 MongoDB.................................................................................................................................... 24
2.8.1 Tổng quan ............................................................................................................................. 24
2.8.2 Ưu điểm của MongoDB........................................................................................................ 25
2.9 Mô hình MVC............................................................................................................................. 26
2.9.1 Tổng quan ............................................................................................................................. 26
2.9.2. Ưu điểm của mô hình MVC................................................................................................. 26
2.10 Dịch vụ cung cấp máy chủ Heroku[13]
. ................................................................................... 27
2.10.1 Giới thiệu ............................................................................................................................ 27
2.10.2 Triển khai web server trên heroku....................................................................................... 28
2.11 MongoDBLab ............................................................................................................................ 28
Chương 3 Kiến trúc hệ thống và kết quả đạt được: ..........................................................................30
3.1 Phân tích hệ thống...................................................................................................................... 30
3.1.1 Biểu đồ phân rã chức năng.................................................................................................... 31
3.1.2 Chức năng đăng nhập cho User...................................................................................... 33
3.1.3 Chức năng User cập nhật động vật mới và khu vực mới ............................................... 34
3.1.4 Chức năng User tạo feedback ........................................................................................ 35
3.1.5 Chức năng Admin đăng nhập................................................................................................ 37
3.1.6 Chức năng Admin thêm động vật .................................................................................. 38
3.1.7 Chức năng chỉnh sửa động vật ....................................................................................... 39
3.1.8 Chức năng xóa động vật................................................................................................. 40
3.1.9 Chức năng xem danh sách động vật...................................................................................... 41
3.1.10 Chức năng xem danh sách feedback ................................................................................... 42
3.2 Thiết kế hệ thống........................................................................................................................ 43
3.3 Thiết kế Database....................................................................................................................... 44
Chương 4 Kết luận................................................................................................................................47
4.1 Môi trường cài đặt hệ thống...................................................................................................... 47
4.1.1 Môi trường phát triển ứng dụng............................................................................................ 47
4.1.2 Môi trường triển khai ứng dụng............................................................................................ 47
4.2 Cài đặt và chạy thử nghiệm....................................................................................................... 47
4.2.1 Web server ............................................................................................................................ 47

4.2.2 Một số giao diện ứng dụng Aranimal trên Android.............................................................. 51
Chương 5 Hướng phát triển.................................................................................................................55
Danh mục tài liệu tham khảo...............................................................................................................56
Phụ lục hình...........................................................................................................................................58
Phụ lục bảng..........................................................................................................................................60

Mở đầu
Lý do chọn đề tài
Hiện nay với sự phát triển nhanh chóng của Internet, việc tìm kiếm thông tin,
hình ảnh của một loài động vật không còn quá khó, người sử dụng có thể tìm thấy hàng
triệu kết quả từ Internet. Nhưng làm sao dùng có trải nghiệm thú vị hơn về động vật.
Nhu cầu này đặt ra một đề bài về công nghệ có khả năng cho phép người dùng tương
tác, làm tăng trải nghiệm người dùng. Lựa chọn thực tại ảo trên thiết bị di động là sự
kết hợp tuyệt vời.
Với mong muốn tiếp cận xu hướng mới của thế giới, mang đến những trải
nghiệm mới về các loài vật. Vì thế, nhóm em chọn đề tài “Xây dựng ứng dụng thực tại
ảo tăng cường Aranimals” ứng dụng vào thế giới động vật.
Mục đích
Xây dựng ứng dụng thực tại ảo tăng cường vào thế giới động vật để người dùng
có thể tìm kiếm, trải nghiệm từng loài động vật cụ thể.
Tiệp cận công nghệ mới, làm nền tảng phát triển công nghệ, cũng như phát triển đồ án
ngày càng hoàn thiện hơn.
Đối tượng
Trong quá trình thực hiện đề tài, nhóm đã tìm hiểu thư viện ARtoolkit hổ trợ
thực tại ảo, xây dựng ứng dụng trên nền tảng Android, kiến trúc Client-Server, công
nghệ restful services, và triển khai một ứng dụng trên Cloud Heroku.
Phạm vi nghiên cứu
Do nhiều hạn chế về thời gian và công việc, hệ thống Aranimals vẫn chưa hoàn
thiện như ý muốn của nhóm. Hiện tại chỉ dùng lại ở mức demo mô hình 3D song song
với không gian thực. Trong thời gian tới, nhóm sẽ tiếp tục hoàn thiện các tính năng,
cũng như cải thiện các tính năng thực tại ảo của thư viện Artoolkit.

1
Chương 1 Tổng quan đề tài
Thực tại ảo tăng cường (Tiếng anh: Augmented Reality) hay còn gọi tắt là AR
là công nghệ sử dụng máy tính mô phỏng và tính toán để tạo nên các hình ảnh 3D cùng
không gian thế giới thực được hiển thị trên các thiết bị điện tử chạy trên các hệ điều
hành khác nhau như Windows, Linux, Android, iOS hay một số hệ điều hành nhúng.
Nhờ đó, AR sẽ giúp chúng ta có thể nhìn thấy những thông tin vốn không thể nhìn thấy
hay tiếp cận với điều kiện bình thường.
Tiềm năng ứng dụng của công nghệ AR là rất lớn, có thể ứng dụng trong hầu
hết các lĩnh vực như: Giải trí, giáo dục, y tế, thương mại điện tử, bất động sản, động
vật học, hóa học, khảo cổ học, … Chính vì thế nhóm đã tìm hiểu phát triển công nghệ
AR trên các thiết bị Android. Vì điện thoại thông minh hiện nay rất phổ biến, có đến
55% dân số Việt Nam đang sử dụng (tính đến cuối năm 2017), và trên thế giới chiếm
44% dân số. Trong đó Android chiếm 87.7% thị phần toàn cầu (cuối năm 2017). Ngoài
ra là hệ điều hành mã nguồn mở vì thế công đồng hổ trợ phát triển AR là rất đông, các
platform cũng đa dạng.
Hiện nay, các platform AR do Google phát hành là ARcore, Apple ARKit, hay
Vuforia, Unity 3D đều có yêu cầu thiết bị phần cứng khá cao, các ứng dụng chỉ mang
tính demo, tất nhiên có những ứng dụng thương mại nhưng chưa phổ biến. Một vấn đề
nữa khi làm việc với các ứng dụng 3D là chất lượng hình ảnh và dung lượng của
chúng. Hầu hết các ứng dụng trên thị trường có dung lượng khá cao (>100MB).
Sau quá trình tìm kiếm platform phù hợp, nhóm đã chọn thư viện ARTOOLKIT
do DAQRI phát hành. Là thư viện đa nền tảng viết bằng ngôn ngữ C và C++.
ARTOOLKIT sử dụng thị giác máy tính và các thuật toán phân tính hình ảnh chuyên
sâu, đồng thời sử dụng các công nghệ 3D khác như OpenGL, OpenScenceGraph. Sau
khi tìm hiểu thì thư viên phù hợp cho việc nghiên cứu công nghệ AR hơn là ứng dụng
thương mại, tuy nhiên vẫn có thể custom và phát triển thêm để đáp ứng nhu cầu của
nhóm.

2
Trong quá trình phát triển hệ thống Aranimal, nhóm đã sử dụng mô hình Client-
Server để khắc phục nhược điểm ứng dụng có dung lượng quá lớn. Server nhóm chọn
sử dụng Cloud Heroku để cài đặt Nodejs Server với khả năng chịu tải cao. Database
MongoDB là cơ sở dữ liệu NoSQL. vấn đề tương thích công nghệ AR trên các phiên
bản Android đã do ARTOOLKIT hổ trợ.
Về phần dữ liệu nhóm chọn website có độ tin cậy cao là Wikipedia để lấy các
thông tin chi tiết về con vật. Các mô hình 3D nhóm chọn tải từ trang
polygon.google.com là trang web cung cấp mô hình 3D có tính phí và miễn phí, với
điều kiện khi sử dụng phải có credit tác giả. Hình ảnh của động vật nhóm lọc từ trang
web freepik.com là trang web cung cấp hình ảnh vector miễn phí, sau khi tải về nhóm
sẽ thiết kế lại thành các thẻ đánh dấu theo dõi hoặc avatar cho từng động vật.
Như vậy, về các phương diện từ định nghĩa, mô hình lý thuyết, mô hình ứng
dụng, kết quả của các nghiên cứu AR trước đó đã có, cách thức thu thập dữ liệu, đề
xuất mô hình giải pháp nhóm đã có đầy đủ để có thể nghiên cứu xây dựng ứng dụng
thực tại ảo tăng cường trên thiết bị di động.

3
Chương 2 Các mô hình và lí thuyết
2.1 Mô hình Client-Server
Các ứng dụng mạng thường hoạt động theo mô hình client/server như thư
điện tử, truyền nhận tập tin, game trên mạng, … Mô hình này gồm có một chương
trình đóng vai trò là client và một chương trình đóng vai trò là server. Hai chương
trình này sẽ giao tiếp với nhau thông qua mạng. Chương trình server đóng vai trò
cung cấp dịch vụ. Chương trình này luôn luôn lắng nghe các yêu cầu từ phía Client,
rồi tính toán và đáp trả kết quả tương ứng. Chương trình client cần một dịch vụ và
Hình 2. 1 Sơ đồ truyền nhận message mô hình Client-Server

4
gửi yêu cầu dịch vụ tới chương trình server và đợi đáp trả từ server. Như vậy, quá
trình trao đổi dữ liệu giữa client/server bao gồm:
- Truyền một yêu cầu từ chương trình client tới chương trình server
- Yêu cầu được server xử lý
- Truyền đáp ứng
Mô hình truyền tin này thực hiện truyền hai thông điệp qua lại giữa client và
server một cách đồng bộ hóa. Chương trình server nhận được thông điệp từ client
thì nó phát ra yêu cầu client chuyển sang trạng thái chờ (tạm dừng) cho tới khi
client nhận được thông điệp đáp ứng do server gửi về. Mô hình client/server thường
được cài đặt dựa trên các thao tác cơ bản là gửi (send) và nhận (receive).
2.2 Hệ điều hành Android
2.2.1 Tổng quan
Hệ điều hành Android[11]
dựa trên nền tảng
Linux được thiết kế dành cho các thiết bị di động,
thiết bị đeo tay, thiết bị nhúng. Android có mã nguồn
mở theo giấy phép Apache. Chính mã nguồn mở
cùng với một giấy phép không có nhiều ràng buộc đã
cho phép các nhà phát triển thiết bị, mạng di động và
các lập trình viên nhiệt huyết được điều chỉnh và
phân phối Android một cách tự do.
Android được phát triển bởi Google từ tháng
8/2005. Đến nay Android đã có 14 phiên bản chính thức, mới nhất là phiên bản 7.0
Nougat. Trong tương lai Android sẽ còn phát triển hơn nữa với những cải tiến về tốc
độ cũng như tập trung cho trải nghiệm người dùng.
Hình 2. 2 Logo hệ điều hành
Android

5
Quý 2 năm 2017, Android chiếm 87,7% thị phần điện thoại thông minh trên toàn
thế giới, với tổng cộng 2 tỷ thiết bị đã được kích hoạt và 1,3 triệu lượt kích hoạt mỗi
ngày.
2.2.2 Vòng đời một ứng dụng Android
Các Activity[3]
trong hệ thống được quản lý như 1 ngăn xếp activity (activity
stack). Khi 1 activity mới bắt đầu nó được đặt lên đầu của ngăn xếp và trở thành
Running Activity (activity đang chạy), đồng thời activity trước đó sẽ nằm ngay phía
dưới trong ngăn xếp đó, và sẽ không trở nên visible (nhìn thấy) cho đến khi activity ở
trên thoát ra khỏi ngăn xếp. 1 Activity gồm 4 trạng thái chính:
- Nếu activity ở phía trên của màn hình (hay ở trên cùng của ngăn xếp), thì nó
đang ở trạng thái active (hoạt động) / running (đang chạy
- Nếu activity không thể tương tác nhưng vẫn nhìn thấy ( khi mà bị che bởi 1
activity khác nhưng người dùng vẫn có thể nhìn thấy nó ở phía sau ) thì activity
Hình 2. 3 Sơ đồ vòng đời (Lifecycle) của một Activity trong ứng dụng Android.

6
này đang ở trạng thái paused (tạm dừng). Khi ở trạng thái này activity có thể bị
xóa bỏ bởi hệ thống khi thiết bị thiếu bộ nhớ.
- Nếu activity hoàn toàn bị che khuất bởi activity khác thì nó đang ở trạng
thái stopped (đã dừng). Activity này vẫn giữ được tất cả trạng thái và thông tin,
nhưng không còn hiển thị với người dùng và thường xuyên bị xóa bỏ bởi hệ
thống khi thiếu bộ nhớ.
- Nếu activity ở trạng thái paused (tạm dừng) hay stopped (đã dừng), hệ thống
có thể xóa bỏ activity đó khỏi bộ nhớ bằng cách yêu cầu nó tự kết thúc hoặc xóa
bỏ tiến trình của nó. Khi acitivty đó hiển thị lại với người dùng thì sẽ được khởi
tạo lại và khôi phục lại trạng thái trước đó.
Các trạng thái của activity qua từng phương thức:
- onCreate(): activity được khởi tạo
- onStart(): activity trở thành có thể nhìn thấy.
- onResume(): activity vẫn có thể nhìn thấy (nhưng có thể quay lại từ trạng thái
paused)
- onPause(): 1 activity che lên 1 phần activity hiện tại.
- onStop(): activity không còn có thể nhìn thấy.
- onDestroy(): activity bị hủy bỏ.
2.2.3 NDK Android
Native development kit
(NDK) là bộ kit để phát triển
các ứng dụng Android dựa trên
các đoạn code viết bằng mã C
hoặc C++ code (native code).
NDK sẽ build mã nguồn C và Hình 2. 4 Logo Native Development Kit Android

7
C++ thành các mã nguồn ARM, MIPS hoặc x86, điều này giúp tăng hiệu năng ứng
dụng. Tuy nhiên nhà sản xuất không khuyến khích sử dụng NDK vì tính tương thích
cũng như không đảm bảo các native code sẽ hoạt động ổn định trên thiết bị.
Về cơ chế hoạt động, ứng dụng sẽ tiến hành giao tiếp với native code thông qua
một interface gọi là Java native interface (JNI). Interface này cần dùng lệnh
System.loadLibrary để có thể tải bộ mã nguồn đã được NDK build thành binary code.
Khi ứng dụng vào đồ án, nhóm chọn sử dụng NDK cho việc xử lí hình ảnh 3D.
Một phần do thư viện Artoolkit được viết bằng mã C và C++. Ở đây, các logic code xử
lí hình ảnh, nhận diện hình ảnh, xử lí 3D được viết bằng mã C và C++, các logic
nghiệp vụ và giao diện được viết bằng mã Java. Các giao tiếp sẽ được gọi từ phía java
thông qua jni. Cách tiếp cận này thuận lợi và dễ dàng, do tận dụng được sức mạnh của
Android framework, chỉ những logic liên quan đến thư viện Artoolkit thì dùng đến
NDK.
Hình 2. 5 Sơ đồ khối Native Code và Java Framework

8
2.2.4 Các thành phần giao diện
Bảng 2. 1 Các thành phần giao diện được sử dụng
Số thứ tự Tên thành phần Mô tả Ứng dụng
1 ProgressBar
Là một thanh tiến trình thể
hiện trạng thái của một hoạt
động, tác vụ đang diễn ra đến
đâu, bao lâu thì kết thúc.
Màn hình chờ khi mở
lại camera.
2 NavigationBar
Là một NavigationBar,
nhưng được custom lại và đặt
ở cuối màn hình.
Thanh điều hướng
màn hình camera.
3 ViewPager
Là một View có thể trượt
chuyển đổi giữa các giao diện
một cách nhẹ nhàng và khá
mượt, thay vì chuyển đổi
màn hình qua một sự kiến
chớp đen như trên tivi. Màn
hình hiển thị trước nó hoặc
sau nó sẽ được hiển thị ra
ngay.
Màn hình dashboard.
4 RecyclerView
Là một View mới trong
Android giống như ListView
nhưng mạnh mẽ hơn rất
nhiều. RecyclerView cho
phép chúng ta load dữ liệu
nhiều hơn ListView, vuốt
mượt hơn, hiệu ứng đẹp hơn
Danh sách Animals.

9
và hỗ trợ đa dạng layout của
các phần tử trong danh sách.
Sử dụng RecyclerView có
thể giúp tang hiệu suất của
ứng dụng một cách đáng kể.
5 Gridview
Là một View mới trong
Android giống như ListView
nhưng mạnh mẽ hơn rất
nhiều. GridView cho phép dữ
liệu luôn đưa vào dưới dạng
hình ống (mảng, list một
chiều), nhưng dựa vào số cột
ta thiết lập mà nó tự động
ngắt hàng.
Danh sách Areas.
6 Dialog
Là một thông báo mà người
dùng có thể tương tác trực
tiếp được.
Màn hình hiển thị
thông tin chi tiết động
vật.
7 ImageView
Là một view sử dụng để hiển
thị ảnh, mà nguồn ảnh có thể
là một file ảnh trên ứng dụng,
trên thiết bị hoặc từ URL.
- Màn hình hiển thị
thông tin chi tiết động
vật.
- Màn hình danh sách
khu vực.
- Logo đăng nhập.
- Hình ảnh danh sách
động vật.

10
2.2.5 Các thư viện mã nguồn mở
2.2.5.1 Nitrite 2.0.0
NOsql Object (NO2 a.k.a Nitrite)[1]
là một sơ cở dữ liệu NoSQL nhúng mã
nguồn mở. Nó có các API tương tự MongoDB. Như SQLite, Nitrite 2.0 thích hợp làm
cơ sở dữ liệu không có Database Server.
Một số tính năng:
- Lưu trữ dạng key/value và object
- Lưu trữ trong bộ nhớ hoặc file đơn.
- Nhanh và nhẹ như các API của MongoDB.
- Lập chỉ mục tăng tốc tìm kiếm.
- Tương thích với mọi phiên bản Android.
- Đồng bộ và lưu trữ qua Nitrite DataGate server
Theo đánh giá của nhóm, với các tính năng quen thuộc và câu truy vấn dễ dàng
thư viện thích hợp với những lập trình viên muốn thao tác với NoSQL.
2.2.5.2 Volley 1.0.0
Volley[5]
là một thư viện Network được Google giới thiệu năm 2013 để quản lý
các request Network và lưu trữ những respone trên các ứng dụng Android mà không
cần lập trình phải code nhiều như trước. Các tools bên trong Volley cho phép cùng một
lúc thực hiện nhiều request trên các thread (luồng xử lý dữ liệu) khác nhau với các mức
độ ưu tiên (priority) khác nhau. Tất cả request được thực hiện và lưu trữ trong bộ nhớ
cache giúp cho việc reload lại dữ liệu nhanh hơn. Nó đặc biện hữu dụng với những dữ
Hình 2. 6 Logo Nitrite Database

11
liệu như JSON, Image, String,… Nhưng lại không thích hợp cho việc sử dụng với các
dữ liệu lớn như music hay movies.
Những class request có trong thư viện Volley này bao gồm : jsonObjectRequest,
jsonArrayRequest, StringRequest, ImageLoader kết với các constructor đi kèm như :
POST, GET, DELETE, PUT, COPY,…
Volley có thể đáp ứng được yêu cầu của nhóm là: thời gian phản hồi nhanh. Do
như cầu của nhóm chỉ thực hiện các request đơn giản, tải file ảnh có dung lượng thấp
nên thời gian thực hiện request được nhóm đặt ưu tiên.
2.2.5.3 Gson 2.2.4
Gson[4]
là thư viện Java có thể được sử dụng để chuyển đổi các đối tượng
JavaObject thành chuỗi JSON, hoặc ngược lại chuyển đổi chuỗi JSON thành
JavaObject. Gson có thể thực hiện với các JavaObject tùy ý.
2.3 Công nghệ thực tại ảo (AR)
Hình 2. 7 Ứng dụng thực tại ảo Amazon hổ trợ người dùng xem trước sản phẩm.
Trích trang: https://www.pocnetwork.net/technology-news/preview-before-
you-buy-with-augmented-reality-ar-in-amazons-app

12
Đối với một hệ thống thực tại ảo tăng cường, nó phải đáp ứng đủ ba yêu cầu chính:
Kết hợp nội dung thực và ảo.
- Tương tác thời gian thực.
- Đăng ký đối tượng 3D.
2.3.1 Theo dõi điểm quan sát
Để đăng ký nội dung ảo vào thế giới thực, cần xác định tư thế (vị trí và hướng)
của người xem đối với một số điểm theo dõi trong thế giới thực. Tùy thuộc vào công
nghệ được sử dụng, quá trình này bao gồm hai giai đoạn: (1) giai đoạn đăng ký, xác
định tư thế của người xem đối với điểm theo dõi trong thế giới thực; (2) giai đoạn theo
dõi, cập nhật góc quan sát tương đối của người xem so với điểm theo dõi. Việc này đòi
hỏi công nghệ có khả năng phân tích nhanh và ổn định. Hiện nay có một số kỹ thuật
được sử dụng phổ biến như:
- Magnetic Tracking (theo dõi bàng từ tính): các thiết bị sử dụng các đặc tính của
từ trường để tính toán hình dáng người nhận đối với máy phát.
- Vision based Tracking: các thiết bị hổ trợ càm biến quang học. Những cảm biến
này có thể là cảm biến hồng ngoại, cảm biến ánh sáng, cảm biến cấu trúc 3D.
Hình 2. 8 Kỷ thuật theo dõi các marker. Trích trang:
https://ofmechanicsandcode.wordpress.com/2014/12/26/project-4-augmented-reality-
instruction-instructar

13
- Inertial Tracking: sử dụng bộ cảm biến gia tốc, kính hiển vi và từ kế để xác định
hướng tương đối và vận tốc của một vật được theo dõi. Kỹ thuật này cho phép
đo lường độ xoay tự do, trọng lực, sự thay đổi vị trí tương đối.
- GPS Tracking: sử dụng công nghệ GPS để theo dõi vị trí trong môi trường
ngoài trời trên bề mặt trái đất. Hiện nay độ chính xác trung bình của GPS nhỏ
hơn 3m. Kỹ thuật này cần phải có sự cải tiến hoặc kết hợp cùng kỹ thuật khác để
tăng độ chính xác trong môi trường ngoài trời.
- Hybrid Tracking: là kỹ thuật sử dụng nhiều loại cảm biến, tận dụng ưu điểm của
mỗi loại cảm biến để tăng độ chính xác và tăng sự ổn định khi theo dõi điểm
quan sát trong nhiều điều kiện môi trường khác nhau.
2.3.2 Kết hợp nội dung thực và ảo
Để kết hợp hình ảnh giữa thực và ảo cần có một số loại kỹ thuật hiển thị. Công
nghệ này phải giải được bài toán hình ảnh thực và ảo hiển thị cùng lúc, độ trễ thấp,
hình ảnh ảo càng giống thật càng tốt nhưng cũng phải đảm bảo hiệu năng cao. Các kỹ
thuật hiển thị phổ biến hiện nay là: (1) Kết hợp hình ảnh của cảnh thực và ảo, (2) hình
ảnh đặc giữa mắt và thế giới thực.
Kết hợp hình ảnh của cảnh thực và ảo. Kỹ thuật này đòi hỏi một số bước bao
gồm: (1) hiệu chỉnh máy ảnh; (2) đăng ký đối tượng 3D; (3) theo dõi. Trong đó hiệu
chỉnh máy ảnh là bước quan trọng, giúp các thông số camera của máy ảnh ảo với các
thông số máy ảnh vật lý khớp với nhau, thiết bị xuất hình ảnh ảo được căn chỉnh phù
hợp với môi trường thực. Vì vậy nó ảnh hưởng trực tiếp đến chất lượng và hình ảnh thu
được từ thế giới thực.

14
Một khi máy ảo được hiệu chỉnh và không gian ảo được đăng ký vào các điểm
theo dõi vật lý, việc hiển thị hình ảnh ảo liên tục được cập nhật theo các điểm theo dõi
sẽ tạo ra hình ảnh ảo tương ứng với góc nhìn hay vị trí thực của người dùng. Kỹ thuật
này phân loại thành bốn kiểu cấu hình chủ yếu: (1) Dựa trên video, (2) Dựa vào phản
chiếu của gương, (3) chiếu trên bề mặt vật lý, (4) ghép kênh thực và ảo.
Một cách tiếp cận khác, hình ảnh ảo được đặt ngay phía trước mắt người dùng.
Không có vật thể vật lý nào khác nằm giữa mắt và hình ảnh ảo từ màn hình, đảm bảo
hình ảnh ảo không bị che khuất bởi bất kì vật thể vật lý nào khác. Kỹ thuật này khá
rộng, có thể áp dụng cho nhiều thiết bị hổ trợ màn hình hiển thị bao gồm mũ thực tại
ảo, kính Google Glass, hay điện thoại thông tin, màn hình máy tính.
2.3.3 Tương tác thời gian thực
Hệ thống AR có thể kết hợp nhiều loại phương thức tương tác từ giao diện
người dùng 2D truyền thống (UI) như bàn phím, chuột, màn hình cảm ứng, thiết bị đa
Hình 2. 9 Hiệu chỉnh máy ảnh: các thông số máy ảnh ảo phù hợp với máy ảnh thực.

15
phương tiện cầm tay, cử chỉ, … Tùy thuộc vào loại ứng dụng AR có thể phù hợp với
từng loại tương tác khác nhau. Phân loại tương tác bao gồm:
- Trình duyệt thông tin : sử dụng màn hình giao diện hiển thị AR.
- Giao diện người dùng 3D: sử dụng các kỹ thuật tương tác 3D để thao tác nội
dung trong không gian.
- Sử dụng vật thể thực: sử dụng các thực thể để tương tác với nội dung ảo.
- Giao diện người dùng cử chỉ: sử dụng cử chỉ tay, chân, hoạt động.
2.4 Thư viện Artoolkit
2.4.1 Tổng quan
ARToolKit là thư viện lập trình phát triển
các ứng dụng thực tại ảo tăng cường mã nguồn mở.
Ra đời từ năm 1999, hiện nay phiên bản
ARToolKit6 do DAQRI phát hành. Được viết bằng
ngôn ngữ C, các SDK được biên dịch cho tất cả
các nền tảng phổ biến hiện nay bao gồm Mac OS
X, Windows, Linux, Android, iOS), còn có plugin
cho Unity3D. Bằng các kỹ thuật thị giác máy tính,
thư viện có thể tính toán vị trí máy ảnh thực và
định hướng các điểm theo dõi hoặc bề mặt phẳng,
cho phép lặp trình chồng các đối tượng ảo. Thư viện hổ trợ mã vạch 2D, thẻ nhiều
chấm và theo dõi các thẻ tự nhiên (NFT).
2.4.2 Tính năng
Hiện tại ARToolKit hổ trợ các chức năng:
- Theo dõi thẻ tự nhiên.
- Hổ trợ hiệu chỉnh nhiều chuẩn Camera.
- Theo dõi đa điểm và hỗ trợ Camera Stereo
Hình 2. 10 Logo ARtoolkit

16
- Hổ trợ đa ngôn ngữ.
- Tối ưu hóa cho thiết bị di động.
- Hỗ trợ Unity3D và OpenSceneGraph.
2.4.3 Công nghệ nền tảng
Thư viện ARToolKit gồm bốn khối chính, mỗi khối sử dụng một hay nhiều
công nghệ khác nhau gồm:
2.4.3.1 Tracking
ARToolkit sử dụng thuật toán FREAK (Fast Retina Keypoint) để phát hiện các
điểm và HARRIS CORNERS để theo dõi các điểm.
FREAK là một thuật toán sử dụng trong lĩnh vực thị giác máy tính, thuật toán
này đề xuất một bộ các điểm theo dõi lấy cảm hứng từ hệ thống thị giác của con người,
cụ thể là võng mạc. Thuật toán sử dụng phân phối xác xuất Gaussian để tạo ra độ lệnh
chuẩn cho mỗi điểm mẫu theo dõi, từ đó vẽ tra các vùng chứa nhiều thông tin. Tuy
Hình 2. 11 Phân tích võng mạc trong thần kinh học. Trích: Report FREAK
author: Alexandre Alahi, Raphael Ortiz, Pierre Vandergheynst

17
nhiên thuật toán cho ra kết quả xấu đối với ảnh mờ, vì vậy FREAK không thể áp dụng
với các vật thể chuyển động.
HARRIS CORNERS là thuật toán sử dụng trong lĩnh vực thị giác máy tính để
phân tích và nhận diện hình ảnh thông qua các góc trong hình ảnh (các giao điểm của
hai cạnh hoặc biên của hai miền màu sắc).
Việc ứng dụng mỗi thuật toán cho mỗi trường hợp cụ thể sẽ khắc phục được
những điểm hạn chế của thuật toán. Từ đó cho ra những kết quả tốt hơn.
2.4.3.2 Đồ họa (Graphics)
ARToolKit sử dụng OpenGL, đây là thư
viện đồ họa. Nhận nhiệm vụ tính toán tọa độ và
vẽ hình ảnh. Hổ trợ này có sẵn trong hai thư
viện riệng biệt libARgsub_lite và LibARgsub.
Ngoài ra còn có OpenScenceGraph (OSG)
cũng là thư viện đồ họa chất lượng cao mã nguồn mở, cho phép lập trình viên xử lý đồ
họa và mô hình một cách hiệu quả, hiệu năng cao, linh hoạt. libARosg là thư viện tiện
ích nhỏ của OSG, cho phép người lập trình viên thực hiện các tác vụ cơ bản là tải và
hiển thị mô hình.
2.4.3.3 Mô hình ảo (Model)
Với việc sử dụng OpenGL, ARToolkit có thể hiển thị các model có đuôi mở
rộng là .obj, đây là file cơ bản trong 3D với đặc điểm nhẹ, đơn giản.
Thư viện OSG cung cấp khả năng hiển thị các model có đuôi mở rộng là .osg,
đây là file đồ họa chất lượng cao, file có thể chứa các các diễn hoạt của mô hình.
Hình 2. 12 Logo OpenGL
Hình 2. 13 Logo OpenSceneGraph

18
2.4.3.4 Kết xuất hình ảnh (Rendering)
Các phiên bản cũ, ARToolKit sử dụng trình renderer OpenVRML. Hiện nay,
thư viện này không còn hổ trợ tích cực, và được khuyến khích nên sử dụng OSG cho
các dự án mới.
2.4.4 ARToolKit cho Android
Để phát triển ứng dụng, Android cung cấp một SDK phong phú và các công cụ
phát triển dựa trên ngôn ngữ lập trình Java. Trong khi Java thực hiện phần nhiều ứng
dụng, thì JNI (Java Native Interface) được sử dụng để thực hiện tác vụ cần thiết bằng
C/C++. NDK (Native Development Kit) cung cấp các công cụ, headers và thư viện cần
thiết để thực hiện JNI trên Android. Có hai nguyên nhân chính để sử dụng native code:
(1) để tăng khả năng thực thi, (2) sử dụng lại các thư viện C/C++ hiện tại. Trong
trường hợp chuyển giao ARToolkit sang Android, sử dụng native code là thích hợp.
ARToolKit cung cấp một SDK được viết bằng mã C/C++ và Java cho phép phát triển
ứng dụng ARToolKit trên Android. SDK bao gồm:
- ARToolKit core là thư viện tĩnh, có thể được dùng để xây dựng thành thư viện
chia sẻ.
- ARToolKitWrapper: được viết bằng C++, cung cấp khả năng truy cập đến các
chức năng của ARToolKit và quản lí các marker.
- ARBaseLib: là thư viện Java Android gọi đến ARToolKitWrapper. Lập trình có
thể sử dụng các lớp được cung cấp bởi ARBaseLib để dễ dàng truy cập đến
chức năng của ARToolKit.
2.5 Ngôn ngữ Javascript
2.5.1 Tổng quan
JavaScript[12] (viết tắt là "js") là một ngôn ngữ lập trình mang đầy đủ tính
năng của một ngôn ngữ lập trình động. Khi được nhúng vào một tài liệu HTML,

19
JavaScript có thể đem lại sự tương tác động cho người dùng. Cha đẻ của ngôn ngữ này
là Brendan Eich, đồng sáng lập dự án Mozilla, quỹ Mozilla, và tập đoàn Mozilla.
JavaScript có thể được sử dụng để xây dựng toàn bộ một trang web nếu sử dụng
với Node.js và MongoDB (một cơ sở dữ liệu). Node.js là bất đồng bộ, điều đó làm cho
javascript có tính dễ mở rộng và rất phù hợp cho tất cả các dữ liệu lớn ở.
2.5.2 jQuery
jQuery là một bộ thư viện được viết dựa trên ngôn ngữ JavaScript giúp đơn giản
hoá việc viết mã lệnh JavaScript. jQuery là thư viện mã nguồn mở được phát triển bởi
John Resig và phiên bản đầu tiên được ra đời vào tháng 8 năm 2006.
Với dung lượng nhẹ và rất dễ sử dụng jQuery nhanh chóng được phổ biến rộng rãi
và đang được bình chọn là một trong các thư viện Javascript tốt nhất hiện nay.
Hình 2. 14 Logo Javascript
Hình 2. 15 Logo Jquery

20
Trước khi jQuery ra đời việc tương tác với phần tử HTML sử dụng Javascript là
một công việc rất gian nan và đòi hỏi lập trình viên phải viết rất nhiều các đoạn mã dài
để chỉ thực hiện một công việc đơn giản ví dụ như thay đổi nội dung bên trong một
phần tử. Sử dụng jQuery việc tương tác với phần tử HTML trở nên đơn giản hơn rất
nhiều.
2.5.3 Ajaxtrong jQuery
AJAX[10]
(tiếng Anh: "Asynchronous JavaScript and XML" - nghĩa là
"JavaScript và XML không đồng bộ") là một nhóm các công nghệ phát triển web được
sử dụng để tạo các ứng dụng web động hay các ứng dụng giàu tính Internet (rich
Internet application). Từ Ajax được ông Jesse James Garrett đưa ra và dùng lần đầu
tiên vào tháng 2 năm 2005 để chỉ kỹ thuật này, mặc dù các hỗ trợ cho Ajax đã có trên
các chương trình duyệt từ 10 năm trước. Ajax là một kỹ thuật phát triển web có tính
tương tác cao bằng cách kết hợp các ngôn ngữ:
Trong đồ án nhóm sử dụng ajax để thực hiện việc trao đổi dữ liệu( định dạng dữ
liệu là file JSON) một cách không đồng bộ với server. Cụ thể là:
- Gửi thông tin username, password lên server để thực hiện việc xác thực.
- Lấy thông tin của tất cả đông vật từ server.
- Lấy thông tin động vật theo id, theo area.
- Lấy thông tin feedback của khách hàng server.
- Gửi thông tin tạo động vật mới lên server.
- Gửi thông tin cập nhật động vật mới lên server.
2.6 File PUG
2.6.1 Tổng quan
PUG[6]
là một template engine cực kỳ mạnh được phát triển với ý tưởng dựa trên
Haml. Thực thi cùng với JavaScript và NodeJS. Thay đổi hoàn toàn cách viết HTML

21
với những cú pháp hoàn toàn mới và tức nhiên sẽ
giải quyết những vấn đề mà HTML không để
làm được.
Dù mới nhưng PUG không khó để có thể
đọc và hiểu, phương châm của các lập trình viên
ngày nay là “Write less, do more” thì PUG đã
làm được điều đó. Với PUG, chúng ta có thể
code HTML một cách nhanh hơn và sạch hơn.
2.6.2 Ưu điểm của PUG
- Template engine cực kỳ mạnh.
- Giản lược cách viết các thẻ HTML, không sợ mở thẻ ở chỗ này mà quên đóng
thẻ ở chỗ khác.
- Có thể kế thừa và tái sử dụng.
- Vì mang tính kế thừa, nên sửa một chỗ, có thể cập nhật ở những chỗ khác mà
không sợ thiếu sót.
- PUG thông minh hơn HTML.
PUG khá nhạy cảm với indent là tab hay space, chỉ nên dùng một trong hai để
tránh sự sai xót (space có thể 2-space hoặc 4-space).
2.7 Công nghệ NodeJs
2.7.1 Tổng quan
NodeJS[9]
là một nền tảng Server side
được xây dựng dựa trên Javascript Engine (V8
Engine). Node.js được phát triển bởi Ryan
Dahl năm 2009 và phiên bản cuối cùng là
v0.10.36. Định nghĩa NodeJs bởi tài liệu chính
thức như sau:
Hình 2. 16 Logo PUG template engine
Hình 2. 17 Logo Nodejs

22
Node.js là một nền tảng dựa vào Chrome Javascript runtime để xây dựng các
ứng dụng nhanh, có độ lớn. Node.js sử dụng các phần phát sinh các sự kiện (event-
driven), mô hình non-blocking I/O để tạo ra các ứng dụng nhẹ và hiệu quả cho các ứng
dụng về dữ liệu thời gian thực chạy trên các thiết bị phân tán.
NodeJs là một mã nguồn mở, đa nền tảng cho phát triển các ứng dụng phía
Server và các ứng dụng liên quan đến mạng. Ứng dụng Node.js được viết bằng
Javascript và có thể chạy trong môi trường Node.js trên hệ điều hành Window, Linux...
Node.js cũng cung cấp cho các module Javascript đa dạng, có thể đơn giản hóa sự phát
triển của các ứng dụng web sử dụng Node.js với các phần mở rộng.
2.7.2 Đặc điểm của Node.js
Các đặc điểm quan trọng biến Node.js trở thành sự lựa chọn hàng đầu trong phát
triển phần mềm:
- Không đồng bộ và Phát sinh sự kiện (Event Driven): Tất các các APIs của thư
viện Node.js đều không đồng bộ, nghĩa là không blocking (khóa). Nó rất cần
thiết vì Node.js không bao giờ đợi một API trả về dự liệu. Server chuyển sang
một API sau khi gọi nó và có cơ chế thông báo về Sự kiện của Node.js giúp
Server nhận đựa phản hồi từ các API gọi trước đó.
- Chạy rất nhanh: Dựa trên V8 Javascript Engine của Google Chrome, thư viện
Node.js rất nhanh trong các quá trình thực hiện code.
- Các tiến trình đơn giản nhưng hiệu năng cao: Node.js sử dụng một mô hình
luồng đơn (single thread) với các sự kiện lặp. Các cơ chế sự kiện giúp Server trả
lại các phản hồi với một cách không khóa và tạo cho Server hiệu quả cao ngược
lại với các cách truyền thống tạo ra một số lượng luồng hữu hạn để quản lý
request. Nodejs sử dụng các chương trình đơn luồng và các chương trình này
cung cấp các dịch vụ cho số lượng request nhiều hơn so với các Server truyền
thống như Apache HTTP Server.
- Không đệm: Ứng dụng Node.js không lưu trữ các dữ liệu buffer.

23
2.7.3 Express framework
Express[8]
là một framework nhỏ và tiện ích để xây dựng các ứng dụng web,
cung cấp một lượng lớn của tính năng mạnh mẽ để phát triển các ứng dụng web và
mobile. Nó rất dễ dàng để phát triển các ứng dụng nhanh dựa trên Node.js cho các ứng
dụng Web. Các tính năng cơ bản của Express framework.
- Cho phép thiết lập các lớp trung gian để trả về các HTTP request.
- Định nghĩ bảng routing có thể được sử dụng với các hành động khác nhau dựa
trên phương thức HTTP và URL.
- Cho phép trả về các trang HTML dựa vào các tham số truyền vào đến template.
Trong đồ án nhóm sử dụng framework express trong nodejs để thực hiện các
công việc cụ thể sau:
- Viết các api:
+ GET thông tin tất cả động vật từ database.
+ GET thông tin động vật theo id, theo area từ database.
+ GET thông tin feedback từ database.
+ GET thông tin username, password từ database.
+ GET thông tin token từ database.
+ POST thông tin động vật mới.
+ POST các feedback của người sử dụng.
+ POST file model, hình mô tả của động vật( kết hợp với thư viện multer
để uploads nhiều file cùng lúc).
- Kết nối với mongodb, tạo các cấu trúc dữ liệu( animal, feedback, token, user),
lưu dữ liệu theo cấu trúc đó vào mongodb.
- Viết các controllers tương ứng phục vụ cho các api.

24
2.8 MongoDB
2.8.1 Tổng quan
MongoDB[7]
là một trong những cơ sở dữ liệu mã nguồn mở NoSQL phổ biến
nhất được biết bằng C++. Tính đến tháng 2/2015, MongoDB được xếp thứ 4 trong số
các hệ thống cơ sở dữ liệu phổ biến nhất. Nó được pahts triển bởi công ty 10gen sau
này được biết đến với tên MongoDB Inc..
MongoDB là cơ sở dữ liệu hướng tài liệu, nó lưu trữ dữ liệu trong các document
dạng JSON với schema động rất linh hoạt. Nghĩa là bạn có thể lưu các bản ghi mà
không cần lo lắng về cấu trúc dữ liệu như là số trường, kiểu của trường lưu trữ. Tài liệu
MongoDB tương tự như các đối tượng JSON.
Nền tảng hỗ trợ: MongoDB là một cơ sở dữ liệu NoSQL hỗ trợ đa nền tảng, nó
có thể chạy trên Windows, Linux và Mac...Nó hỗ trợ hầu hết các ngôn ngữ lập trình
phổ biến như C#, Java, PHP, Javascript...và các môi trường phát triển khác nhau.
So sánh giữa SQL DB schema và Mongo DB schema
Bảng 2. 2 So sánh các schema của SQL và MongoDB
SQL DB MongoDB
Table Collection
Row Document
Column Field
Joins Embeded documents, linking
Hình 2. 18 Logo MongoDB Database.

25
SQL DB MongoDB
Primary key Primary key (mặc định là _id do chính Mongo tạo)
2.8.2 Ưu điểm của MongoDB
Như đã biết, RDBMS lưu trữ dữ liệu trong các định dạng bảng và sử dụng ngôn
ngữ truy vấn cấu trúc (SQL) để truy vấn cơ sở dữ liệu. RDBMS cũng định nghĩa sẵn
các schema theo yêu cầu và tập hợp các quy tắc để định nghĩa quan hệ giữa các trường
trong bảng.
Nhưng MongoDB lưu trữ dữ liệu trong các Document thay vì các Table. Cho
phép thay đổi cấu trúc các bản ghi (được gọi là document trong MongoDB) đơn giản
chỉ cần thêm mới các trường hoặc xóa các trường có sẵn. Khả năng này của MongoDB
giúp trình bày các quan hệ dạng thứ bậc, để lưu trữ mảng, và các cấu trúc phức tạp
khác một cách dễ dàng. MongoDB cung cấp hiệu suất cao, tính sẵn sàng cao và dễ
dàng mở rộng.
Trong đồ án nhóm sử dung MongoDB để lưu trữ các thông tin là:
- Danh sách động vật.
- Danh sách khu vực.
- Danh sách feedback.
- Danh sách token.
- Danh sách user.
Hình 2. 19 Ưu điểm của MongoDB.

26
2.9 Mô hình MVC
2.9.1 Tổng quan
MVC[2]
là chữ viết tắt của Model - View - Controller, đây là một mô hình kiến
phần mềm được tạo ra với mục đích quản lý và xây dựng dự án phần mềm có hệ thống
hơn. Mô hình này được dùng khá rộng rãi và đặc biệt là trong các ngôn ngữ lập trình
web.
Trong mô hình này thì:
- Model: có nhiệm vụ thao tác với cơ sở dữ liệu, nghĩa là nó sẽ chứa tất cả các
hàm, các phương thức truy vấn trực tiếp với dữ liệu và controller sẽ thông qua
các hàm, phương thức đó để lấy dữ liệu rồi gửi qua View.
- View: có nhiệm vụ tiếp nhận dữ liệu từ controller và hiển thị nội dung sang các
đoạn mã HTML, hiển thị ra giao diện.
- Controller: đóng vài trò trung gian giữa Model và View, có nhiệm vụ tiếp nhận
yêu cầu từ client sau đó xử lý request, load model tương ứng và gửi data
qua view tương ứng rồi trả kết quả về cho client.
2.9.2. Ưu điểm của mô hình MVC
- Hệ thống phân ra từng phần nên dễ dáng phát triển.
Hình 2. 20 Mô hình kiến trúc tổng quan MVC.

27
- Chia thành nhiều modun nhỏ nên nhiều người có thể làm chung dự án.
- Vấn đề bảo trì cũng tương đối ổn, dễ nâng cấp.
- Dễ dàng debug trong quá trình xây dựng.
Trong đồ án, nhóm có sử dụng mô hình MVC cho lập trình web server.
2.10 Dịch vụ cung cấp máy chủ Heroku
2.10.1 Giới thiệu
Heroku[13]
. là dịch vụ cung cấp máy chủ miễn phí cho người dùng,có các tiện ích
hỗ trợ cực kỳ hữu ích. Dù miễn phí nhưng nó có thể so sánh với các server trả phí.
Heroku hỗ trợ nhiều ngôn ngữ lập trình:NodeJS, Ruby, Python, PHP, Java, Scala,
Clojure, Go, Kotlin.
Những tính năng trên heroku:
- Database miễn phí.
- SSL miễn phí.
- Hỗ trợ làm việc nhóm.
- Liên kết với Github đơn giản.
Một số bất tiện khi sử dụng:
- Heroku chỉ cho người dùng 550 giờ mỗi tháng để sử dụng. Tuy nhiên có thể
tăng số lượng giờ đồng hồ sử dụng lên con số 1000 nếu như cài đặt phương thức
Hình 2. 21 Logo Heroku Cloud Application Flatform.

28
thanh toán vào trong tài khoản. Với 1000 giờ là đủ để web server của nhóm
chạy hết tháng (31 ngày * 24 giờ = 744 giờ)
- Sau 2 đến 3 giờ nếu server không có người truy cập thì server sẽ chuyển sang
trạng thái sleep. Về việc server bị tắt khi không có traffic, cách đơn giản nhất là
tự tạo traffic cho server.
2.10.2 Triển khai web server trên heroku
Có 2 cách để triển khai web server trên heroku:
- Tải code từ thư mục trong máy tính lên heroku sau đó deploy( triển khai) web
server bằng tay mỗi lần cập nhật code. Để dùng được cách này máy tính phải cài
đặt Heroku CLI.
- Kết nối với GitHub để lấy code. Sau mỗi lần cập nhật code trên GitHub, web
server sẽ tự động deploy (triển khai) trên heroku. Nhóm sử dụng cách này vì
tính tiện lợi của nó.
2.11 MongoDBLab
MLab là dịch vụ cung cấp nơi lưu trữ cơ sở dữ liệu (MongoDB) miễn phí.
MLab hoạt động như một ứng dụng quản lý cơ sử dữ liệu thông thường.
Các tính năng:
- Cho phép tạo, thêm, chỉnh sửa, xóa: Database, Collection, document, field,…
Hình 2. 22 Logo Mlab MongoDB Hosting.

29
- Cung cấp tính năng backup dữ liệu, nhập hoặc xuất dữ liệu bằng file JSON,
CSV.
- Tạo các user cho phép truy vấn dữ liệu từ xa.
Để server kết nối với database trên mlab chỉ cần import địa chỉ của database đó
vào trong code, tương tự như cách kết nối với database ở local.

30
Chương 3 Kiến trúc hệ thống và kết quả đạt được:
3.1 Phân tích hệ thống
Bài báo cáo này sử dụng phương pháp phân tích thiết kế hướng đối tượng, sử
dụng các cú pháp của UML 2.0 để mô tả các biểu đồ của hệ thống. Các bước tiến
Hình 3. 1 Sơ đồ Usecase hệ thống.

31
hành việc phân tích, thiết kế hướng đối tượng theo UML 2.0 bao gồm: phân tích,
thiết kế, xây dựng và kiểm thử chương trình. Dựa trên quy trình đó, em có đưa ra
các mô hình phân tích, mô hình thiết kế, tiến hành xây dựng hệ thống và có minh
họa bằng thực nghiệm đã xây dựng được.
Hệ thống gồm có: người quản trị (admin), khách hàng (client).
Người quản trị: Đây là bộ phận quan trọng nhất của hệ thống. Nhiệm vụ chính
của bộ phân này là thường xuyên kiểm tra lỗi và báo lỗi nếu có. Cập nhật thông tin
động vật mới, và khu vực mới vào hệ thống. Theo dõi các lượt truy cập ra vào của hệ
thống.
Khách hàng: là người dùng đã có tài khoản thông qua chức năng đăng ký của hệ
thống. Đây là bộ phận sử dụng dịch vụ của hệ thống.
3.1.1 Biểu đồ phân rã chức năng
Bảng 3. 1 Phân rã chức năng từ sơ đồ khối usecase
Chức năng khách hàng Chức năng admin
Đăng nhập và đăng xuất. Đăng nhập và đăng xuất
Tìm kiếm động vật. Thêm động vật
Cập nhật động vật mới. Chỉnh sửa động vật
Xem danh sách động vật. Xem danh sách động vật
Xem thông tin chi tiết. Tìm kiếm động vật
Hiển thị mô hình 3D. Thêm khu vực
Tương tác mô hình. Chỉnh sửa khu vực
Tạo feedback. Xem danh sách khu vực
Xem khu vực. Xem danh sách feedback
Cập nhật khu vực mới. Duyệt feedback

32
Hình3.2Biểuđồphânrãchứcnăng.

33
3.1.2 Chức năng đăng nhập cho User
Bước 1: Người dùng nhập đủ username và password, bấm vào nút “Đăng nhập”.
Bước 2: Ứng dụng Android sẽ gửi request gồm username và password đến server.
Bước 3: Server yêu cầu lấy dữ liệu từ database. Nếu không tồn tại tài khoản tương ứng
thì server sẽ đi đến bước 6. Nếu tồn tại tài khoản, thì đến bước 4.
Bước 4: Server tạo ra một token.
Bước 5: Token được lưu lại vào database với chính tài khoản đó, kèm với thời gian
token hết hiệu lực.
Bước 6: Server trả respone, nếu thành công message là success kèm data là một token.
Nếu thất bại, message là lỗi tương ứng của Database hay lỗi sai password hoặc mật
khẩu.
Bước 7: Ứng dụng Android lưu lại token của Server vừa cấp.
Hình 3. 3 Sơ đồ tuần tự miêu tả quá trình đăng nhập của User.

34
Bước 8: Ứng dụng Android thông báo cho khách hành biết là đăng nhập thành công và
chuyển sang activity khác.
3.1.3 Chức năng User cập nhật động vật mới và khu vực mới
Bước 1: Người dùng nhấp vào nút “cập nhật”, hoặc kéo trượt màn hình xuống.
Bước 2: Ứng dụng Android sẽ gửi request kèm token đã lưu lên server.
Bước 3: Tại đây server check token này có phải của chính chủ không, đã hết hạn hay
chưa. Nếu không thỏa điều kiện đi đến bước 7. Nếu cả hai điều kiện được thông qua thì
đến bước 4.
Bước 4: Server sẽ tạo lại token mới.
Hình 3. 4 Sơ đồ tuần tự miêu tả quá trình User cập nhật dữ liệu mới

35
Bước 5: Cập nhật token mới vào hệ thống, hủy đi token vừa sử dụng.
Bước 6: Lấy dữ liệu từ cơ sở dữ liệu.
Bước 7: Thực hiện respone kèm token mới.
Bước 8: Khi ứng dụng nhận được respone thành công, sẽ cập nhật lại token, sau đó ghi
dữ liệu vừa nhận được vào cơ sở dữ liệu local.
Bước 9: Cập nhật lại giao diện cho khách hàng.
3.1.4 Chức năng User tạo feedback
Hình 3. 5 Sơ đồ tuần tự miêu tả quá trình User tạo feeback

36
Bước 1: Khi khách hàng nhấp vào nút phản hồi.
Bước 2: Ứng dụng sẽ trả lại cho khách hàng một form để khách hàng điền ý kiến của
họ đối với trải nghiệm vừa qua.
Bước 3: Sau khi điền xong, khách hàng nhấn nút “gửi”.
Bước 4: Ứng dụng sẽ gửi nội dung kèm token đến server.
Bước 5: Tại đây server kiểm tra token, nếu không tồn tại token thì đến bước 7.
Bước 6: Server lưu lại dữ liệu feedback từ khách hàng.
Bước 7: Trả respone thành công cho ứng dụng.
Bước 8: Khi ứng dụng nhận được kết quả thành công sẽ thông báo cho khách hàng là
feedback của họ đã được ghi nhận.

37
3.1.5 Chức năng Admin đăng nhập
Bước 1: Admin nhập username và password, nhấn Login
Bước 2: Web browser gửi request gồm username và password về cho server
Bước 3: Server kiểm tra dưới cơ sở dữ liệu username và password, Nếu không thì
server sẽ trả respone với message “bad request”. Nếu đúng, server sẽ tạo ra một token,
token được lưu lại vào database với chính tài khoản đó, kèm với thời gian token hết
hiệu lực.
Bước 4: Server gửi thông báo về cho admin và kèm theo data gồm token và thời gian
token hết hiệu lực( nếu đăng nhập thành công)
Hình 3. 6 Sơ đồ tuần tự miêu tả quá trình Admin đăng nhập

38
3.1.6 Chức năng Admin thêm động vật
Bước 1: Admin nhập thông tin động vật, nhấn Add
Bước 2: Web browser gửi request lần đầu gồm thông tin file model và image
Bước 3: Server lưu file các model, image trên server, gửi thông tin file về browser
Bước 4: Web browser gửi request lần hai gồm thông tin các file tester
Bước 5: Server lưu các file tester, gửi thông tin file về browser
Hình 3. 7 Sơ đồ tuần tự miêu tả quá trình Admin thêm mới động vật

39
Bước 6: Web browser gửi request lần ba gồm thông tin động vật và đường dẫn của
các file model, image, tester.
Bước 7: Server check token, nếu không thì server sẽ trả respone với message “bad
request”.
Bước 8: Nếu check token thành công thì lưu thông tin vào cơ sở dữ liệu.
Bước 9: Server gửi thông báo thành công về admin, và hiển thị ra màn hình.
3.1.7 Chức năng chỉnh sửa động vật
Hình 3. 8 Sơ đồ tuần tự miêu tả quá trình Admin chỉnh sửa động vật

40
Bước 1: Admin thay đổi thông tin động vật, nhấn Edit
Bước 2: Web browser gửi request lần đầu gồm thông tin file model và image đã sửa
Bước 3: Server lưu file các model, image trên server, gửi thông tin file về browser
Bước 4: Web browser gửi request lần hai gồm thông tin các file tester đã sửa
Bước 5: Server lưu các file tester, gửi thông tin file về browser
Bước 6: Web browser gửi request lần ba gồm thông tin động vật và đường dẫn của
các file model, image, tester.
request”
Bước 8: Nếu check token thành công thì lưu thông tin vào cơ sở dữ liệu.
Bước 9: Server gửi thông báo thành công về admin, chuyển sang trang dashboard.
3.1.8 Chức năng xóa động vật
Bước 1: Admin nhân nút xóa một động vật
Hình 3. 9 Sơ đồ tuần tự miêu tả quá trình Admin xóa động vật

41
Bước 2: Web Browser gửi request và token cho server
request”.
Bước 4: Nếu server check token đúng thì thay đổi status của động vật đó thành non-
active.
Bước 5: Server gửi thông báo thành công về cho admin.
3.1.9 Chức năng xem danh sách động vật
Bước 1: Admin nhân nút View Animal
request”
Bước 4: Nếu server check token đúng thì lấy danh sách động vật từ cơ sở dữ liệu
Bước 5: Server gửi danh sách động vật về cho admin và hiển thị ra màn hình admin.
Hình 3. 10 Sơ đồ tuần tự miêu tả quá trình Admin xem danh sách động vật

42
3.1.10 Chức năng xem danh sách feedback
Bước 1: Admin nhân nút View Feedback
request”
Bước 4: Nếu server check token đúng thì lấy danh sách feedback từ cơ sở dữ liệu
Bước 5: Server gửi danh sách feedback về cho admin và hiển thị ra màn hình admin.
Hình 3. 11 Sơ đồ tuần tự miêu tả quá trình Admin xem danh sách feedback

43
3.2 Thiết kế hệ thống
Kiết trúc tổng quan của đồ án gồm 3 khối lớn:
- Ứng dụng web admin
- Cloud Application Platform gồm có Heroku, Mlab.
- Ứng dụng mobile.
Hình 3. 12 Tổng quan hệ thống
hình 2.1. 1 Tổng quan hệ thống
hình 2.1. 2 Tổng quan hệ thống

44
3.3 Thiết kế Database
Hình 3. 13 Sơ đồ khối thiết kế Database

45
Bảng Account:
Bảng 3. 2 Document của Tài khoản người dùng.
stt Tên biến Kiểu dữ liệu
Giới
hạn
Ý nghĩa
1 userName String 20 Tên tài khoàn
2 fullName String 50 Tên người sở hữu tài khoản
3 balance int max Ví của khách hàng
4 sex int 3 Giới tính khách hàng
5 password SHA256(String) 256 Mật khẩu tài khoản
6 email String 256 Email liên hệ
7 country String 256 Quốc gia đang sinh sống
Bảng Animals:
Bảng 3. 3 Document của Động vật.
stt Tên biến Kiểu dữ liệu Giới hạn Ý nghĩa
1 id String 256 Giá trị _id
2 nameAnimal String 256 Tên động vật
3 status String 256 Tình trạng của dữ liệu
“active” hay “non-active”
4 cost int max Giá trị giao dịch của động vật
5 area ArrayList<String> Lưu id của từng khu vực
6 summary String Mô tả vài nét về động vật
7 URL String Đường dẫn lưu trữ tài nguyên
liên quan được lưu tại server.

46
Bảng Area:
Bảng 3. 4 Document của Khu vực.
2 id String 256 Lưu _id
3 name String 256 Tên khu vực
4 url String 256 Đường dẫn lưu trữ tài nguyên
của khu vực
5 animalId ArrayList<String> Chưa _id của từng động vật.
Bảng Feeback:
Bảng 3. 5 Document của Phản hồi của người dùng.
2 userName String 256 Tên tài khoản
3 status String 256 Trạng thái của dữ liệu
“active” hay “non-active”
4 title String 256 Tiêu đề feedback
5 content String Nội dung feedback
Bảng Transaction:
Bảng 3. 6 Document của Giao dịch hệ thống.
2 username String 256 Tên tài khoản
3 idAnimals String 256 Id của animas
4 time Date Thời gian diễn ra giao dịch
5 amount int Giá trị giao dịch

47
Chương 4 Kết luận
4.1 Môi trường cài đặt hệ thống
4.1.1 Môi trường phát triển ứng dụng
Phần cứng:
- RAM tối thiểu: 4GB
- 500GB hard disk space + ít nhất 1GB cho Android SDKServer Ubuntu
Phần mềm:
- Android Studio
- Visual Studo Code
4.1.2 Môi trường triển khai ứng dụng
- Smartphone chạy hệ điều hành Android
- Phiên bản android đề xuất: > API 17
4.2 Cài đặt và chạy thử nghiệm
4.2.1 Web server
4.2.1.1 Tính năng xác thực
Hình 4. 1 Màn hình Admin đăng nhập

48
Mục đích: Chức năng cho phép hệ thống phân quyền người dùng, tránh những
hành động không mong muốn đối với hệ thống.
Điều hướng và tương tác người dùng: Giao diện gồm các ô text để nhập
thông tin, button “Login” để gọi đến API xác thực thông tin, sau đó điều hướng người
dùng đến trang quản lý chính tức là trang Daashboard.
4.2.1.2 Tính năng xem thông tin tất cả động vật
Mục đích: Cho phép Admin xem tổng thể các thông tin cơ bản của động vật.
Điều hướng và tương tác người dùng: Trên giao diện là bảng các thông tin,
mỗi cột là tên thông tin, mỗi hàng là giá trị của thông tin tương ứng với cột. Ngoài ra
còn có các button để điều hướng người dùng. Các button VIEW ANIMAL cho phép
admin làm mới lại dữ liệu của động vật. Button VIEW FEEDBACK chuyển hướng
người dùng đến trang xem phản hồi từ người dùng. Button ADD ANIMAL chuyển
hướng người dùng đến trang thêm động vật mới. Còn có các icon xóa và chỉnh sửa ở
cuối mỗi hàng.
Hình 4. 2 Màn hình Admin xem danh sách động vật

49
4.2.1.3 Tính năng xem feedback
Mục đích: Cho phép Admin xem tổng thể các phản hồi của người dùng.
Điều hướng và tương tác người dùng: Trên giao diện là bảng các thông tin,
mỗi cột là tên thông tin, mỗi hàng là giá trị của thông tin tương ứng với cột. Ngoài ra
còn có các button để điều hướng người dùng. Các button VIEW FEEDBACK cho phép
admin làm mới lại dữ liệu của phản hồi. Button VIEW ANIMAL chuyển hướng người
dùng đến trang xem thông tin động vật. Button ADD ANIMAL chuyển hướng người
dùng đến trang thêm động vật mới. Còn có các icon xóa và chỉnh sửa ở cuối mỗi hàng.
4.2.1.4 Tính năng thêm động vật mới
Mục đích: Cho phép Admin thêm động vật mới.
Điều hướng và tương tác người dùng: Trên giao diện là form thông tin cơ
bản của một động vật. Form cho Admin nhập thông tin dạng text và file. Button ADD
để gửi thông tin của động vật lên server.
Hình 4. 3 Màn hình Admin xem thông tin feedback

50
Hình 4. 4 Màn hình Admin thêm động vật

51
4.2.2 Một số giao diện ứng dụng Aranimal trên Android
4.2.2.1 Màn hình đăng nhập
Mục đích: Cung cấp cho User giao
diện để có thể đăng nhập vào hệ thống
ARanimals, thực hiện các chức năng nâng
cao khác.
Điều hướng và tương tác người
dùng: Trên giao diện có các ô text để điền
thông tin đăng nhập. Ứng dụng cung cấp 2
tùy chọn cho người dùng: Đăng nhập với tài
khoản hoặc Bỏ qua đăng nhập. Tất nhiên nếu
người dùng bỏ qua đăng nhập thì sẽ không
thể tải và cập nhật các dữ liệu mới. Cả 2
button đều chuyền hướng người dùng đến
màn hình Camera.
Hình 4. 5 Màn hình User đăng nhập

52
4.2.2.2 Màn hình Camera
Mục đích: Cung cấp giao diện để người dùng có thể xem mô hình 3D song
song với không gian thực.
Điều hướng và tương tác người dùng: Cung cấp giao diện camera để người
dùng hiển thị mô hình 3D dựa vào các thẻ đánh dấu được cung cấp. Ngoài ra còn có
thanh điều hướng gồm: (1) Quản lý để chuyển hướng đến màn hình danhs sách Area;
(2) Camera, button chụp màn hình; (3) Details, xem chi tiết thông tin động vật; (4)
Setting, chuyển hướng cài đặt thông số camera.
4.2.2.3 Màn hình xem thông tin chi tiết
Mục đích: Cung cấp giao diện để người dùng có thể xem thông tin chi tiết của
động vật đó.
Điều hướng và tương tác người dùng: Người dùng có thể trượt để xem nhiều
hơn, hoặc quay lại màn hình Cameara bàng button X.
Hình 4. 6 Màn hình Camera hổ trợ xem mô hình thực tại ảo.

53
4.2.2.3 Màn hình danh sách Area
Mục đích: Cung cấp giao diện để
người dùng chọn khu vực/quốc gia để lọc
động vật.
dùng: Người dùng trượt để xem nhiều quốc
gia, có thể xem thông tin cơ bản về quốc gia.
Chạm vào màn hình của quốc gia tương ứng
để chuyển sang màn hình Animal. Hoặc
người dùng trượt sang trái để chuyển sang
màn hình Animal.
Hình 4. 7 Màn hình User xem thông tin chi tiết động vật
Hình 4. 8 Màn hình User chọn khu vực hoặc quốc gia

54
4.2.2.4 Màn hình danh sách Animal
Mục đích: Cung cấp giao diện để
người dùng chọn động mà họ muốn xem.
dùng: Người dùng trượt để xem nhiều động
vật hơn. Chạm vào màn hình của động vật
tương ứng để chuyển sang màn hình Camera.
Người dùng có thể trượt sang phải để về màn
hình Area. Chạm vào thanh search phía trên
để tìm kiếm động vật.
Ngoài ra người dùng có thể xem một
đoạn mô tả về động vật bằng cách chạm vào
button I hoặc tải/cập nhật thông tin mới về
động vật bằng cách chạm button download.
Hình 4. 9 Màn hình User xem danh sách động vật

55
Chương 5 Hướng phát triển
Trong kì tới, nhóm sẽ cố gắng hoàn thiện các tính năng từ phía server-side bao gồm:
- Cải tiến tính năng download/upload các models và file liên quan.
- Hoàn thiện tính năng xác thực user, ghi nhận phản hồi người dùng, phản hồi lại
các feedback của người dùng bằng thông báo email.
- Xây dựng website dành cho admin, bổ sung các công cụ cần thiết cho admin.
- Thêm các tính năng quản lí giao dịch, nạp tiền vào tài khoản.
Về phía application Android:
- Xây dựng lại giao diện, bố trí các button cho phù hợp, dễ sử dụng.
- Hiển thị thông tin động vật bằng HTML + CSS thay vì text như hiện tại.
- Cấu trúc lại hệ thống như mục và code.
- Tìm hiểu sâu hơn về ARToolKit, hoặc chuyển sang thư viện khác.

56
Danh mục tài liệu tham khảo
[1]Anindya Chatterjee. (2017, 11 14). nitrite database. Trích nguồn www.dizitart.org:
http://www.dizitart.org/nitrite-database/
[2]freetuts. (2015, 3 21). mvc web. Trích nguồn freetuts.net: https://freetuts.net/mvc-php-mo-hinh-mvc-
la-gi-354.html
[3]Google. (2017, 1 04). Activity in Android. Trích nguồn developer.android.com:
https://developer.android.com/reference/android/app/Activity.html
[4]google. (2018, 1 4). Gson. Trích nguồn github.com: https://github.com/google/gson
[5]Google. (2018, 1 04). volley network. Trích nguồn developer.android.com:
https://developer.android.com/training/volley/index.html
[6]NGUYỄN QUỐC TUẤN. (2017, 2 24). pug html. Trích nguồn webfaver.com:
http://webfaver.com/client-side/html5/voi-jade-pug-cong-viec-cat-html-tro-nen-nhanh-hon-
phan-1.html
[7]tedu. (2016, 4 18). mongodb. Trích nguồn tedu.com.vn: https://tedu.com.vn/mongo-db/mongodb-la-
gi-tai-sao-lai-dung-mongodb-26.html
[8]vietjack. (2017, 4 29). express FW nodejs. Trích nguồn vietjack.com:
http://vietjack.com/nodejs/express_framework_trong_nodejs.jsp
[9]vietjack. (2017, 8 10). nodejs. Trích nguồn vietjack.com: http://vietjack.com/nodejs/nodejs_la_gi.jsp
[10]Wikipedia. (2017, 6 28). Ajax. Trích nguồn vi.wikipedia.org:
https://vi.wikipedia.org/wiki/Ajax_(l%E1%BA%ADp_tr%C3%ACnh)
[11]Wikipedia. (2017, 12 27). Hệ điều hành Android. Trích nguồn vi.wikipedia.org:
https://vi.wikipedia.org/wiki/Android_(h%E1%BB%87_%C4%91i%E1%BB%81u_h%C3%A
0nh)
[12]Wikipedia. (2017, 12 3). Javascript. Trích nguồn vi.wikipedia.org:
https://vi.wikipedia.org/wiki/JavaScript

57
[13]yeulaptrinh. (2017, 12 13). heroku là gì. Trích nguồn yeulaptrinh.pw:
http://yeulaptrinh.pw/1522/heroku-la-gi/

58
Phụ lục hình
Hình 2. 1 Sơ đồ truyền nhận message mô hình Client-Server.........................................3
Hình 2. 2 Logo hệ điều hành Android .............................................................................4
Hình 2. 3 Sơ đồ vòng đời (Lifecycle) của một Activity trong ứng dụng Android. .........5
Hình 2. 4 Logo Native Development Kit Android...........................................................6
Hình 2. 5 Sơ đồ khối Native Code và Java Framework...................................................7
Hình 2. 6 Logo Nitrite Database ....................................................................................10
Hình 2. 7 Ứng dụng thực tại ảo Amazon hổ trợ người dùng xem trước sản phẩm. Trích
trang: https://www.pocnetwork.net/technology-news/preview-before-you-buy-with-
augmented-reality-ar-in-amazons-app ...........................................................................11
Hình 2. 8 Kỷ thuật theo dõi các marker. Trích trang:
https://ofmechanicsandcode.wordpress.com/2014/12/26/project-4-augmented-reality-
instruction-instructar ......................................................................................................12
Hình 2. 9 Hiệu chỉnh máy ảnh: các thông số máy ảnh ảo phù hợp với máy ảnh thực...14
Hình 2. 10 Logo ARtoolkit ............................................................................................15
Hình 2. 11 Phân tích võng mạc trong thần kinh học. Trích: Report FREAK author:
Alexandre Alahi, Raphael Ortiz, Pierre Vandergheynst................................................16
Hình 2. 12 Logo OpenGL ..............................................................................................17
Hình 2. 13 Logo OpenSceneGraph................................................................................17
Hình 2. 14 Logo Javascript ............................................................................................19
Hình 2. 15 Logo Jquery..................................................................................................19
Hình 2. 16 Logo PUG template engine..........................................................................21
Hình 2. 17 Logo Nodejs.................................................................................................21
Hình 2. 18 Logo MongoDB Database. ..........................................................................24
Hình 2. 19 Ưu điểm của MongoDB...............................................................................25
Hình 2. 20 Mô hình kiến trúc tổng quan MVC..............................................................26
Hình 2. 21 Logo Heroku Cloud Application Flatform. .................................................27
Hình 2. 22 Logo Mlab MongoDB Hosting....................................................................28
Hình 3. 1 Sơ đồ Usecase hệ thống. ................................................................................30
Hình 3. 2 Biểu đồ phân rã chức năng.............................................................................32
Hình 3. 3 Sơ đồ tuần tự miêu tả quá trình đăng nhập của User. ....................................33
Hình 3. 4 Sơ đồ tuần tự miêu tả quá trình User cập nhật dữ liệu mới ...........................34
Hình 3. 5 Sơ đồ tuần tự miêu tả quá trình User tạo feeback..........................................35
Hình 3. 6 Sơ đồ tuần tự miêu tả quá trình Admin đăng nhập ........................................37
Hình 3. 7 Sơ đồ tuần tự miêu tả quá trình Admin thêm mới động vật ..........................38
Hình 3. 8 Sơ đồ tuần tự miêu tả quá trình Admin chỉnh sửa động vật ..........................39
Hình 3. 9 Sơ đồ tuần tự miêu tả quá trình Admin xóa động vật....................................40

59
Hình 3. 10 Sơ đồ tuần tự miêu tả quá trình Admin xem danh sách động vật................41
Hình 3. 11 Sơ đồ tuần tự miêu tả quá trình Admin xem danh sách feedback ...............42
Hình 3. 12 Tổng quan hệ thống......................................................................................43
Hình 3. 13 Sơ đồ khối thiết kế Database........................................................................44
Hình 4. 1 Màn hình Admin đăng nhập...........................................................................47
Hình 4. 2 Màn hình Admin xem danh sách động vật ....................................................48
Hình 4. 3 Màn hình Admin xem thông tin feedback .....................................................49
Hình 4. 4 Màn hình Admin thêm động vật ....................................................................50
Hình 4. 5 Màn hình User đăng nhập ..............................................................................51
Hình 4. 6 Màn hình Camera hổ trợ xem mô hình thực tại ảo. .......................................52
Hình 4. 7 Màn hình User xem thông tin chi tiết động vật .............................................53
Hình 4. 8 Màn hình User chọn khu vực hoặc quốc gia..................................................53
Hình 4. 9 Màn hình User xem danh sách động vật........................................................54

60
Phụ lục bảng
Bảng 2. 1 Các thành phần giao diện được sử dụng..........................................................8
Bảng 2. 2 So sánh các schema của SQL và MongoDB .................................................24
Bảng 3. 1 Phân rã chức năng từ sơ đồ khối usecase ......................................................31
Bảng 3. 2 Document của Tài khoản người dùng. ..........................................................45
Bảng 3. 3 Document của Động vật. ...............................................................................45
Bảng 3. 4 Document của Khu vực. ................................................................................46
Bảng 3. 5 Document của Phản hồi của người dùng.......................................................46
Bảng 3. 6 Document của Giao dịch hệ thống. ...............................................................46

Ứng dụng AR trên ARtoolkit + Nodejs

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Ứng dụng AR trên ARtoolkit + Nodejs

Similar to Ứng dụng AR trên ARtoolkit + Nodejs (20)

Ứng dụng AR trên ARtoolkit + Nodejs