ĐỒ ÁN CƠ SỞ - TÊN ĐỀ TÀI: XÂY DỰNG ỨNG DỤNG IMAGE FILTER - BỘ LỌC HÌNH ẢNH CHO ANDROID

ĐẠI HỌC ĐÀ NẴNG
KHOA CÔNG NGHỆ THÔNG TIN & TRUYỀN THÔNG
----------

ĐỒ ÁN CƠ SỞ 5

ĐỀ TÀI

XÂY DỰNG ỨNG DỤNG
IMAGE FILTER – BỘ LỌC HÌNH
ẢNH CHO ANDROID

Sinh Viên Thực Hiện:

Nguyễn Quang Hoàng Vu

Mã sinh viên – Lớp:

18IT118 - 18IT2

Giảng Viên Hướng Dẫn: TS. Nguyễn Đức Hiển

Đà Nẵng, tháng 05 năm 2021


ĐẠI HỌC ĐÀ NẴNG
KHOA CÔNG NGHỆ THÔNG TIN & TRUYỀN THÔNG
----------

ĐỒ ÁN CƠ SỞ 5

ĐỀ TÀI

XÂY DỰNG ỨNG DỤNG
IMAGE FILTER – BỘ LỌC HÌNH
ẢNH CHO ANDROID

Đà Nẵng, tháng 05 năm 2021

Đờ án cơ sở 5

Ngũn Quang Hồng Vũ – 18IT118


MỞ ĐẦU
Trong một xã hội hiện đại như ngày nay, có thể thấy con người ta thường rất ít khi
dành thời gian để vui chơi giải trí, tận hưởng khoảnh khắc vui vẻ bên gia đình, bạn be
rất ít, mọi người luôn phải tấp nập, bận rộn để mưu sinh. Một trong những cách mà
mọi người thường chọn để lưu giữ những kỹ niệm vui vẻ, cười đùa với nhau là bằng
cách lưu lại những bức ảnh, những video chơi đùa bên nhau, lưu giữ những khoảnh
khắc, những kỷ niệm,…
Hơn nữa, một bức ảnh đẹp có thể khiến cho chúng ta tự tin hơn, làm hình ảnh đại
diện cho bản thân, một tấm ảnh hài hước có thể khiến cho chúng ta cảm thấy vui vẻ
mỗi khi nhớ lại,…
Với mục tiêu để mọi người có thể tận hưởng những phút giây cười đùa vui vẻ bên
nhau, lưu giữ những khoảnh khắc đáng nhớ và trên hết tận dụng những gì đã và đang
học, vận dụng tính ham tim tòi và thử thách bản thân, đề tài đồ án này em lựa chọn xây
dựng một ứng dụng trí tuệ nhân tạo để nhận diện khuông mặt, xử lí hình ảnh trên điện
thoại android, cụ thể là ứng dụng bô lọc khuôn mặt, hình ảnh.
Bắt đầu với các ý tưởng trên, em thực hiện đồ án:
“XÂY DỰNG ỨNG DỤNG IMAGE FILTER – BỢ LỌC HÌNH ẢNH CHO

ANDROID”
Cấu trúc đờ án bao gờm:
Chương 1: Tổng quan
Chương 2: Phân tích và thiết kế hệ thống
Chương 3: Xây dựng back-end
Chương 4: Xây dựng ứng dụng android
Chương 5: Kết ḷn

Đờ án cơ sở 5

Ngũn Quang Hồng Vũ – 18IT118


LỜI CẢM ƠN
Lời đầu tiên, em xin trân trọng gửi lời cảm ơn sâu sắc nhất tới giảng viên hướng dẫn
bộ môn Đồ Án Cơ Sở 5 thầy Nguyễn Đức Hiển đã nhiệt tình đóng góp ý kiến và
hướng dẫn chúng em hồn thành tớt đờ án này.
Em xin chân thành cảm ơn các thầy cô giáo đang giảng dạy tại Trường Đại học công
nghệ thông tin và truyền thông Việt Hàn – Đại học Đà Nẵng đã nhiệt tình ủng hộ, cung
cấp tài liệu và đưa ra những ý kiến góp ý quý báu.
Cuối cùng, em xin chân thành cảm ơn tới bạn be đã động viên, khuyến khích và tạo
điều kiện cho chúng tơi hồn thành tớt đề tài của mình.
Chúng em xin chân thành cảm ơn!

Sinh viên thực hiện
Nguyễn Quang Hoàng Vu – 18IT118
Đà Nẵng, tháng 05 năm 2021

Đờ án cơ sở 5

Ngũn Quang Hồng Vũ – 18IT118


MỤC LỤC
Trang
Chương 1 Tổng quan lý thuyết và công cụ.....................................................1
1.1 Android studio:.......................................................................................1
1.2 Flutter:....................................................................................................1
1.2.1 Ngôn ngữ Dart:.................................................................................1
1.3 Visual Studio Code (VSCode):..............................................................1
1.4 Laravel Framework:..............................................................................1
1.4.1 Laravel Framework:.........................................................................1
1.4.2 Mô hình MVC:.................................................................................2
1.5 Camera_deep_ar:...................................................................................2
1.6 Opensource codenameakshay/image-editor:........................................2
Chương 2 Phân tích & thiết kế hệ thống........................................................4
2.1 Giới thiệu bài toán:................................................................................4
2.1.1 Đề tài: 4
2.1.2 Mục tiêu:..........................................................................................4
2.1.3 Phương pháp:....................................................................................4
2.2 Tìm hiểu một vài ứng dụng:..................................................................5
2.2.1 Messenger:........................................................................................5
2.2.2 Instagram:.........................................................................................5
2.2.3 Adobe photoshop lightroom:............................................................5
2.2.4 Đúc kết:............................................................................................6
2.3 Biểu đồ Use-case:....................................................................................7
2.4 Cơ sở dữ liệu:..........................................................................................8
2.4.1 Phân tích:..........................................................................................8
2.4.2 Mô tả một số bảng chính:.................................................................8
2.4.3 Cơ sở dữ liệu:.................................................................................10

Chương 3 Xây Dựng Back-end.....................................................................10
3.1 Yêu cầu chức năng:..............................................................................10
3.2 Thiết kế (Mô hình MVC):....................................................................11
3.2.1 Model:.............................................................................................11
3.2.2 Routes:............................................................................................11
Đồ án cơ sở 5

Nguyễn Quang Hoàng Vũ – 18IT118


3.2.3 Controllers:.....................................................................................13
3.2.4 Views:13
3.3 Tạo API:................................................................................................15
3.4 Kết quả thực hiện:................................................................................17
Chương 4 Xây dựng ứng dụng android........................................................25
4.1 Thiết kế:................................................................................................25
4.1.1 Logo ứng dụng:..............................................................................25
4.1.2 Cấu trúc project:.............................................................................25
4.1.3 Yêu cầu ứng dụng:..........................................................................26
4.2 Sử dụng thư viện camera_deep_ar:....................................................26
4.2.1 Tận dụng tối đa thư viện.................................................................28
4.3 Chỉnh sửa hình ảnh:.............................................................................29
4.4 Giao tiếp với back-end qua API:.........................................................32
4.5 Shared Preferences:.............................................................................34
4.6 Hình ảnh kết quả:.................................................................................36
4.6.1 Camera screen:...............................................................................36
4.6.2 Image Enhance:..............................................................................36
4.6.3 Home screen:..................................................................................37
4.6.4 Library screen:................................................................................38
4.6.5 Login và register:............................................................................39

Chương 5 Kết luận.........................................................................................40
5.1 Kết quả đạt được:.................................................................................40
5.2 Khó khăn và hạn chế:..........................................................................40
5.3 Định hướng phát triển:........................................................................41
TÀI LIỆU THAM KHẢO............................................................................42

Đờ án cơ sở 5

Ngũn Quang Hồng Vũ – 18IT118


DANH MỤC HÌNH ẢNH
Trang
Hình 2.1 Biểu đồ Use-case...............................................................................8
Hình 2.2 Cơ sở dữ liệu...................................................................................10
Hình 3.3 Lưu trữ thông tin trên bảng friend................................................11
Hình 3.4 Routes..............................................................................................12
Hình 3.5 Laravel controller...........................................................................13
Hình 3.6 View.................................................................................................14
Hình 3.7 Laravel blade..................................................................................14
Hình 3.8 @extend @include @yield @section.............................................15
Hình 3.9 Json API..........................................................................................17
Hình 3.10 Welcome Page, Home Page, Login Page, Register Page............18
Hình 3.11 Not have permission......................................................................19
Hình 3.12 User Manager................................................................................19
Hình 3.13 User manager – Edit.....................................................................20
Hình 3.14 User Image....................................................................................20
Hình 3.15 User Image – Filter.......................................................................21
Hình 3.16 Social Post Management..............................................................21
Hình 3.17 Social Post – Filter........................................................................21

Hình 3.18 Read Post.......................................................................................22
Hình 3.19 Read Post – comment...................................................................22
Hình 3.20 Add Post........................................................................................22
Hình 3.21 Friend List.....................................................................................23
Hình 3.22 Friend List – Filter.......................................................................23
Hình 3.23 Friend List - filter 2......................................................................23
Hình 3.24 Comment.......................................................................................24
Hình 3.25 Comment – filter...........................................................................24
Hình 4.26 Logo...............................................................................................25
Hình 4.27 Camera_deep_ar...........................................................................27
Hình 4.28 camera upgrade............................................................................29
Hình 4.29 Supported......................................................................................29
Hình 4.30 Image_enhance.............................................................................30
Đồ án cơ sở 5

Nguyễn Quang Hoàng Vũ – 18IT118


Hình 4.31 Camera_screen..............................................................................36
Hình 4.32 image enhance screen...................................................................37
Hình 4.33 Home screen..................................................................................37
Hình 4.34 Upload post...................................................................................38
Hình 4.35 Library Screen..............................................................................38
Hình 4.36 Login và register screen................................................................39

Đờ án cơ sở 5

Ngũn Quang Hồng Vũ – 18IT118

DANH MỤC CÁC BẢNG
Trang
Bảng 2-1 Cấu trúc bảng – Users.....................................................................9
Bảng 2-2 Cấu trúc bảng – Social Post.............................................................9

Đồ án cơ sở 5

Nguyễn Quang Hoàng Vũ – 18IT118


Chương 1

...........Tổng quan lý thuyết và công cụ

1.1 Android studio:
Android Studio là một phầm mềm bao gồm các bộ công cụ khác nhau dùng để
phát triển ứng dụng chạy trên thiết bị sử dụng hệ điều hành Android như các loại điện
thoại smartphone, các tablet... Android Studio được đóng gói với một bộ code editor,
debugger, các công cụ performance tool và một hệ thống build/deploy (trong đó có
trình giả lập simulator để giả lập môi trường của thiết bị điện thoại hoặc tablet trên
máy tính) cho phép các lập trình viên có thể nhanh chóng phát triển các ứng dụng từ
đơn giản tới phức tạp.

1.2 Flutter:
Flutter là nền tảng phát triển ứng dụng đa nền tảng cho iOS và Android do Google
phát triển. Flutter sử dụng ngôn ngữ DART cũng do Google phát triển và flutter cũng
đã được sử dụng để tạo ra các ứng dụng native cho Google.

1.2.1 Ngôn ngữ Dart:
Ngôn ngữ DART là ngôn ngữ thuần hướng đối tượng được Google giới thiệu từ

năm 2011, với mục đích cung cấp sự lựa chọn hiện đại hơn nhưng không thay thế
Javascript.
Ngôn ngữ DART được hỗ trợ khá tốt ở Visual Studio Code, và trong Android
Studio.

1.3 Visual Studio Code (VSCode):
Là một trình biên tập lập trình code miễn phí dành cho Windows, Linux và macOS,
Visual Studio Code được phát triển bởi Microsoft. Nó được xem là mợt sự kết hợp
hồn hảo giữa IDE và Code Editor.
Visual Studio Code hỗ trợ chức năng debug, đi kem với Git, có syntax highlighting,
tự hồn thành mã thơng minh, snippets, và cải tiến mã nguồn. Nhờ tính năng tùy
chỉnh, Visual Studio Code cũng cho phép người dùng thay đổi theme, phím tắt, và các
tùy chọn khác.

1.4 Laravel Framework:
1.4.1 Laravel Framework:
Laravel là một PHP Framework mã nguồn mở và miễn phí, được phát triển bởi
Image Filter – FiAR

1|Page


Taylor Otwell và nhắm mục tiêu hổ trợ phát triển các ứng dụng dụng web theo cấu trúc
model-view-controller (MVC).
Laravel được phát hành theo giấy phép MIT, với mã nguồn được lưu trữ tại Github.

1.4.2 Mô hình MVC:
MVC là từ viết tắt bởi 3 từ Model – View – Controller. Đây là mô hình thiết kế sử
dụng trong kỹ thuật phần mềm. Mô hình source code thành 3 phần, tương ứng. Mỗi từ
tương ứng với một hoạt động tách biệt trong một mô hình.

-

Model: Chịu trách nhiệm quản lý dữ liệu, nó lưu trữ và truy xuất các thực thể từ
cơ sở dữ liệu như mysql, sql server, postresSQL,… đồng thời chưa các logic
được thực thi bởi ứng dụng

-

View: Chịu trách nhiệm hiển thị dữ liệu đã được truy xuất từ model theo một
format nào đó theo ý đồ của lập trình viên. Cách sử dụng của View tương tự như
các module templates thường thấy trong các ứng dụng web phổ biến như
WordPress, Joomla,…

-

Controller: trung gian, làm nhiệm vụ xử lý cho model và view tương tác với
nhau. Controller nhận request từ client, sau đó gọi các model để thực hiện các
hoạt đợng được u cầu và gửi ra ngồi View. View sẽ chịu trách nhiệm format
lại data từ controller gửi ra và trình bày dữ liệu theo 1 định dạng đầu ra (html).

Laravel Framework hỗ trợ lập trình theo mô hình MVC khá mạnh mẽ. Ngoài các
thành phần chính Model, View, Controller thì Routes được sử dụng định tuyến người
dùng theo đúng Urls.
Ở đây, mọi Request từ phía người dùng đều phải qua Route, dữ liệu được gửi
xuống Controller để xử lý, cần dữ liệu sẽ lấy từ Model lên hoặc cập nhật dữ liệu
xuống Model, kết quả gửi ra View cho người sử dụng.

1.5 Camera_deep_ar:
Thư viện camera_deep_ar là một thư viện flutter dành riêng cho các ứng dụng có sử
dụng bộ lọc hình ảnh, khuông mặt sử dụng công nghệ AR của DeepAR cung cấp thông

qua api.
Để sử dụng thư viện camera_deep_ar dành cho android ta cần phải cài đặt thư viện
và lấy api key từ trang web deepar.io.

1.6 Opensource codenameakshay/image-editor:
Là một opensource do codenameaksahy viết nên sử dụng các thư viện chỉnh sửa ảnh
của flutter: image_editor, image_picker.
Image Filter – FiAR

2|Page


Chức năng:
-

Chọn ảnh từ thư viện

-

Chỉnh sửa ảnh
o Cắt ảnh
o Chỉnh độ sáng
o Độ tương phản
o Độ bão hòa
o Xoay ảnh và lật ảnh

-

Khôi phục gốc và lưu ảnh.

Để sử dụng ta source code này phải cài đặt các thư viện đi kem để lấy ảnh, lưu ảnh,
chỉnh sửa,…:
-

gallery_saver: Để lưu hình ảnh vào thư viện

-

image_picker: Để lấy hình ảnh

-

photo_view: Xem lại ảnh trước khi lưu

-

cached_network_image: cache hình ảnh

-

image_editor: Để chỉnh sửa hình ảnh

-

extended_image: Để cắt ảnh

Image Filter – FiAR

3|Page

Chương 2

Phân tích & thiết kế hệ thống

2.1 Giới thiệu bài toán:
2.1.1 Đề tài:
Xây dựng ứng dụng Image Filter – Bộ lọc hình ảnh cho Android

2.1.2 Mục tiêu:
− Xây dựng được ứng dụng giúp người dùng chỉnh sửa hình ảnh theo mong
muốn trước khi chụp lại.
− Ứng dụng có được các chức năng lọc và xử lý ảnh khác nhau, như màu nền,
hình động,….
− Ứng dụng có thể lưu trữ ảnh và chia sẻ trên các phương tiện truyền thông
− Áp dụng được kiến thức đã học để thực hiện tự động nhận diện khuôn mặt
của người dùng đã đăng ký tài khoản và được lưu dữ liệu vào cơ sở dữ liệu.

2.1.3 Phương pháp:
− Tìm hiểu về framework flutter, ngôn ngữ Dart và học để thiết kế và lập trình
ứng dụng cho android
− Tìm hiểu về một số phương pháp, tḥt tốn xử lí ảnh kết hợp với cơng nghệ
AI để đưa vào xây dựng chức năng nhận diện khuôn mặt cho ứng dụng
− Tìm tòi và học hỏi về công nghệ, kỹ thuật thực tế ảo tăng cường và áp dụng
vào ứng dụng
− Tham khảo các chức năng, các điểm ưu nhược của các ứng dụng đã có, từ đó
quyết định các ứng dụng và hướng phát triển
− Tìm hiểu và tham khảo các thư viện cần thiết cho việc hỗ trợ phát triển ứng
dụng
− Tham khảo và lập trình giao diện cho ứng dụng

− Lập trình các chức năng theo định hướng đã định sẵn
− Kiểm thử phần mềm, sửa chữa và phát triển thêm các ý tưởng mới (nếu có)
− Xây dựng báo cáo hoàn chỉnh

Image Filter – FiAR

4|Page


2.2 Tìm hiểu một vài ứng dụng:
2.2.1 Messenger:
− Chụp ảnh và quay video với các bộ lọc khuôn mặt và video
− Có sử dụng công nghệ AI và AR để phát hiện khuôn mặt trực tiếp trước khi
chụp
− Chụp ảnh tự sướng (selfie)
− Quay video bomerang (lặp liên tục)
− Các hình động đa dạng, thú vị, được cập nhật liên tục
− Có thể chỉnh sửa ảnh sau khi chụp (Thêm nhãn dán, thêm chữ, cắt ảnh, lọc
màu nền, độ sáng, tương phản,…)
− Lưu ảnh vào máy hoặc gửi tin nhắn đi trực tiếp
− Đăng ảnh hoặc video ngắn thành story
− Khi gọi video có các hoạt động chơi game hoặc sử dụng bộ lọc hình ảnh trực
tiếp giữa những người gọi với nhau

2.2.2 Instagram:
− Các bộ lọc khuông mặt, hình nền, màu nền, sticker đa dạng, thư viện hiệu
ứng
− Các tùy chọn chỉnh sửa hình ảnh khuôn mặt đa dạng, nhiều chức năng, nhiều
cấp độ khác nhau
− Chỉnh sửa ảnh từ thư viện máy hoặc sau khi chụp

− Thêm chữ, bố cục, nhiều khung hình, superzoom, chế độ rảnh tay
− Chia sẻ hình ảnh (đăng tin, story, post,….)
− Mạng xã hội, trang cá nhân,….
− Khám phá cộng đồng ảnh, video,…
− Giao diện đẹp bắt mắt

2.2.3 Adobe photoshop lightroom:
− Công cụ mạnh mẽ hiện đại với giao diện bắt mắc dễ nhìn
− Chỉnh sửa hình ảnh, lọc màu nền, môi trường,…
− Chỉnh sửa trực tiếp hoặc chọn ảnh từ máy
− Có thể đồng bộ hóa thiết bị với Adobe Creative Cloud để sao lưu hình ảnh và
Image Filter – FiAR

5|Page


truy cập từ bất cứ đâu
− Chức năng lọc tất cả hình ảnh có người (AI)
− Thông báo
− Mục hướng dẫn cụ thể
− Cộng đồng chia sẻ ảnh riêng (trending, hot…..)
− Chia sẻ hình ảnh, video,…
− Nhược điểm phải trả phí ứng dụng để được sử dụng đầy đủ các chức năng
của ứng dụng thay vì hạn chế chỉ một số chức năng như ở bản miễn phí

2.2.4 Đúc kết:
− Yêu cầu về giao diện:
o Bắt mắt, dễ nhìn
o Dễ sử dụng, tương tác tốt, thân thiện với người dùng
o Các phần giao diện hoạt động “mượt mà”

− Yêu cầu về chức năng:
o Hoạt động tốt
o Có thể chỉnh sửa hình ảnh được chọn từ thư viện hoặc sau khi đã chụp
o Bộ lọc hình ảnh tương tác tốt, nhận diện được vị trí khuôn mặt người
dùng, có thể cùng lúc nhận diện nhiều khuôn mặt một lúc
o Có thể đăng nhập bằng cả username – password và cả bằng nhận diện
khuôn mặt đã được đăng ký
o Có nhiều bộ lọc khác nhau như khuôn mặt, hoạt động, màu sắc, màu
nền, hình nền,…
o Đa dạng chức năng chỉnh sửa hình ảnh (màu sắc, độ sáng, xử lí ảnh cơ
bản,….)
− Ý tưởng phát triển cho ứng dụng:
o Chia sẻ hình ảnh giống như một mạng xã hội
o Cập nhật phát triển các chức năng xử lí ảnh (thêm chữ, nhãn dán,…)
o Thêm vào các hoạt động xử dụng công nghệ AR
o Phát triển mạng xã hội
o Phát triển thêm các nhãn dán
o Người dùng có thể sử dụng chính hình ảnh của mình (hay tạo ra) để
Image Filter – FiAR

6|Page


đưa vào bộ lọc
o Website tạo nhãn dán cho người dùng (miễn phí để tạo và tải về
nhưng hạn chế hình vẽ có sẵn và tính phí để sử dụng được đa dạng và
nhiều chức năng hơn)

2.3 Biểu đồ Use-case:
− Actor và chức năng:

o Người dùng:


Chụp ảnh, quay video



Chỉnh sửa hình ảnh sau khi chụp



Chính sửa hình ảnh từ thư viện



Sử dụng bộ lọc trực tiếp



Lưu hình ảnh vào tài khoản



Đăng ký tài khoản



Đăng nhập (bằng password, bằng nhân diên khuôn mặt)



Tạo kho lưu trữ riêng (trang cá nhân)



Chia sẻ hình ảnh



Xem hình ảnh của người dùng khác (nếu được chia sẻ)

− Biểu đồ:

Image Filter – FiAR

7|Page


Hình 2.1 Biểu đồ Use-case

2.4 Cơ sở dữ liệu:
2.4.1 Phân tích:
-

Các chức năng cần được lưu trữ trên cơ sở dữ liệu:
o Dữ liệu người dùng:
 Tài khoản (username, password, thông tin cá nhân)
 Khuôn mặt (nhận diện khuôn mặt) (sẽ sao lưu thông tin của người
dùng đã đăng nhập vào trong máy điện thoại đang sử dụng)
 Hình ảnh đã chụp hoặc chỉnh sửa (Nếu người dùng sao lưu)

o Dữ liệu ứng dụng:
 Các bộ lọc (Một số sẽ được lưu mặc định trên hệ thống và người
dùng có thể tìm kiếm thêm và tải về máy)
 Hình ảnh người dùng chia sẻ qua mạng xã hội
 Các bài viết, poster (sau này)
 Hướng dẫn sử dụng (sau này)

2.4.2 Mô tả một số bảng chính:
2.4.2.1 Bảng User:
Tên
Image Filter – FiAR

Kiểu

Độ dài

Mô tả
8|Page


us_id

char

9

ID người dùng (User ID)

name

varchar

50

Họ tên đầy đủ

username

varchar

30

Tên tài khoản

email

varchar

30

Email của người dùng

password

int

Giới tính

birthday

date

Ngày sinh

level

integer

Quyền truy cập

created_at

datetime

Ngày tham gia/tạo tài khoản

update_at

datetime

Thời gian chỉnh sửa/cập nhập tài
khoản gần nhất
Bảng 2-1 Cấu trúc bảng – Users

2.4.2.2 Bảng Social Post():
Tên

Kiểu

Độ dài

Mô tả

id

char

9

ID bài viết

User_id

char

100

Id tác giả

Image_id

char

9

Id hình ảnh

Contents

text

Nội dung

Like

int

Sô lượt like

Created_at

datetime

Thời gian tạo

Updated_at

datetime

Thời gian cập nhật lần cuối

Bảng 2-2 Cấu trúc bảng – Social Post

Image Filter – FiAR

9|Page


2.4.3 Cơ sở dữ liệu:

Hình 2.2 Cơ sở dữ liệu

Chương 3

Xây Dựng Back-end

3.1 Yêu cầu chức năng:
-

Sử dụng laravel Framework để thiết kế một hệ thống back and cho ứng dụng.

-

Sử dụng ứng dụng xampp để tiến hành deploy và kiểm thử trên môi trường local
(trên máy)

-

Hệ thống back-end có chức năng quản lí dành cho admin với các quyền chỉnh
sửa, thay đổi trực tiếp đến cơ sở dữ liệu

-

Hệ thống back-end hiển thị trực quan thông tin trên cơ sở dữ liệu và sắp xếp

-

Hệ thống chỉ cho phép admin đăng nhập các trang quản trị

-

Hệ thống phải trả về được các api chứa các thông tin dữ liệu, và giao tiếp với
ứng dụng để thực hiện các chức năng.

-

Có khả năng lưu trữ những hình ảnh mà người dùng muốn đăng tải.

Image Filter – FiAR

10 | P a g e


3.2 Thiết kế (Mô hình MVC):
3.2.1 Model:
Trong dự án này, sử dụng mô hình MVC của laravel để thiết kế cho hệ thống
backend
Dựa vào cơ sở dữ liệu đã được thiết kế từ trước, trong dự án này ta sẽ thiết kế các
model như sau:
-

User: Tượng trưng cho bảng “users” trong cơ sở dữ liệu, thực hiện việc truy vấn
các thông tin của người dùng (id, name, email, password, level, birthday)

-

UserImage: Tượng trưng cho bảng “user_images” chứa đường dẫn đến nơi lưu
trữ các hình ảnh được người dùng đăng tải lên.

-

SocialPost: Tượng trưng cho bảng “social_posts” chứa các thông tin về bài đăng
hình ảnh của người dùng (người đăng, hình ảnh – được lấy từ bảng
“user_images”, nội dung, số lượt yêu thích)

-

Friend: là tượng trưng cho bảng “friends”, bảng này có tác dụng lưu giữ thông
tin về việc ai theo dõi ai, và được ai theo dõi, các bản ghi trước khi đưa vào lưu
trữ đều đã xử lí để tránh trùng lập thông tin. Cách lưu trữ ví dụ:

Hình 3.3 Lưu trữ thông tin trên bảng friend

-

Like: là bảng “likes”, chỉ đơn giản là lưu trữ ai thích bài viết nào bằng cách lưu
trữ id của người dùng đó và id của bài viết đó.

-

Comment: “comments”, lưu trữ các bình luận của ai, dành cho bài viết nào và
khi nào.

3.2.2 Routes:
Sau khi đã có các model để thực hiện các truy vấn đến cơ sở dữ liệu, để ta có thể
chuyển hướng đến các trang web của website hay là thực hiện các request hoặc điều
hướng trang web, đầu tiên, ta cần tạo các route cho chúng, mở file web.php ở trong thư
mục route và tiến hành khai báo.

Image Filter – FiAR

11 | P a g e


Hình 3.4 Routes

Các route này nhận nhận diện cấu trúc url của website rồi sau đó gọi đến hàm được
khai triển trong controller được đi kem với route, thông thường route có 4 loại để thực
hiện 4 request http cơ bản như:
-

Route::get(): để lấy dữ liệu

-

Route::post(): để thực hiện tạo mới dữ liệu (upload ảnh, video, tệp tin ,..)

-

Route::put(): Có thể để thực hiện tạo mới dữ liệu hoặc cập nhật

-

Route::delete(): Dùng để xóa

Và để tiện lợi cho quá trình viết route, laravel hỗ trợ thêm Route::group để nhóm
các route giống nhau lại thành một cụm.
ví dụ:
Route::group(['prefix'=>'users','as'=>'user.'], function(){
Route::get('/','AdminController@index')->name('index');

Route::put('/{id}','AdminController@update')->name('update');
Route::get('/{id}/edit','AdminController@edit')->name('edit');
Route::delete('/{id}','AdminController@denied')->name('denied');
});

Trong group của users:
-

Prefix là tiền tố trong url: http://192.168.0.102:8000/users

-

‘as’ => ‘user.’: giống như một cách đặt tên để gọi tắt url.

-

Các route::get, put, delete thực hiện các chức năng khác nhau nhưng mục đích
chung đều là xử lí các resquest để trả về hiển thị view:
o Route::get đầu tiên với name là “index” sẽ thực hiện các request lấy dữ
liệu ra từ cơ sở dữ liệu thông qua truy vấn model, route này sẽ hướng đến
hàm index trong controller AdminController. Để gọi route này từ trong
view ta chỉ cần gọi “user.index” là có thể gọi thực thi route này
o Các route còn lại đều có cấu trúc và cách làm tương tự như trên
o Ngoài ra để có thể truyền biến vào các hàm ở controller thì có thể đặt tên
biến bằng cách để tên biến vào trong {} và đặt một tên biến ở hàm tỏng
controller giống hệt tên được đặt trong {} là có thể sử dụng.

Trong đồ án này sử theo mục tiêu ban đầu, nên thiết kế các nhóm group như sau:
-

Group admin: bao phủ tồn bợ các group con bên trong

Image Filter – FiAR

12 | P a g e


-

Group user: thực hiện các truy vấn liên quan đến user

-

Group images: thực hiện các truy vấn liên quan đến images

-

Group social: thực hiện cá truy vấn liên quan đến các social_posts

-

Group friends: thực hiện các truy vấn liên quan đến friends

-

Group comment: thực hiện các truy vấn liên quan đến comments

3.2.3 Controllers:
Tùy theo mỗi quan điểm, kỹ năng, phong cách và yêu cầu thực hiện, sô lượng
controller của mỗi project sẽ khác nhau với những chức năng khác nhau:

Trong đồ án này:
Ví dụ:
Route::get('/home', 'HomeController@index')->name('home');

Route này khi đọc url với kết thúc đuôi là /home sẽ chuyển đến thực thi hàm index()
ở class HomeController.
public function index(){
return view('home');
}

-

Comment controller:

Hình 3.5 Laravel controller

Ở trong hàm index sẽ trả về view home được tạo ở mục view, ngoài việc trả về các
view ta có thể truyền các biến dữ liệu đến trang view hoặc ta có thể thực hiện các truy
vấn và thực thi các đoạn code để giải quyết vấn đề dữ liệu mong muốn và trả về kết
quả.

3.2.4 Views:
Các view trong laravel hiểu đơn giản là các tệp blade.php chứa các code html, css,
Image Filter – FiAR

13 | P a g e


js để xây dựng giao diện UI. Các view này được lưu trong thư mục resources/view và
chỉ có thể được gọi đến thông qua route và controller.

Hình 3.6 View

Trong view, ta có thể soạn các đoạn mã code html, css, js để thực thi xây dựng giao
diện người dùng. Ngoài ra có thể sử dụng các câu lệnh php xen kẽ với code html bằng
các khai báo @php <mã code> @endphp, hoặc ta có thực hiện các vòng lặp(@for,
@foreach) hoặc câu lệnh @if để kiểm tra các điều kiện.

Hình 3.7 Laravel blade

Ngồi ra để hỡ trợ cho việc tránh ghi lại một đoạn mã nhiều lần, laravel cung cấp
cho chúng ta các hàm chức năng có thể sử dụng trong blade
-

@extends: kế thừa một giao diện

-

@include: chen đoạn code vào vị trí khai báo @include

-

@yield: khai báo vị trí có thể chen code

-

@section @endsection: chen đoạn code và nơi khai báo @yield.

Image Filter – FiAR

14 | P a g e


Hình 3.8 @extend @include @yield @section

3.3 Tạo API:
Để một back-end có thể giao tiếp với ứng dụng đích và xử lí các kết quả trả về thì ta
sẽ cần các api như là một kết nối trung gian giữa server và app để có thể giao tiếp qua
lại giữa chúng.
Cũng giống như khi làm việc với front-end, ta cũng sử dụng phương thức tương tự
mô hình MVC nhưng đầu ra ở đây là sẽ trả về các chuỗi JSON hoặc XML. Ta cũng sẽ
khai báo các route cần thiết, tạo và thực hiện các đoạn code hoặc truy vấn đề xử lí dữ
liệu và đưa vào các resource để trả về dữ liệu.
Trong dự án này ta sẽ xử dụng các api trả về ở chuỗi JSON, để có thể trả về dữ liệu
theo JSON hay nói đúng hơn là thực hiện các API trả về, ta phải có các Resource, các
resource này đảm nhiệm nhiệm vụ chuyển các dữ liệu được lưu trữ thành các chuỗi ,
hoặc mảng json để làm dữ liệu trả về. Ta có thể xử lí hoặc truy vấn dữ liệu ở cả
controller và resource.
Trước tiên, để tạo một resources ta sẽ nhập câu lệnh:
php artisan make:resource CommentResources
Câu lệnh trên sẽ tạo một tệp mang tên CommentResources.php trong thư mục
app/http/resource/. Trong đó, ta sẽ tiến hành xác định cách chuỗi json được trả về.
class CommentResources extends JsonResource
{

Image Filter – FiAR

15 | P a g e

/**
* Transform the resource into an array.
*
* @param \Illuminate\Http\Request $request
* @return array
*/
public function toArray($request)
{
$user = User::find($this->uid);
return [
'id'=>$this->id,
'post'=>$this->spid,
'username'=> $user->name,
'comment'=>$this->comment,
'when'=>$this->updated_at
];
}
}

Sau đó, để sử dụng resource này, ta cần phải khai báo resource muốn sử dụng trong
controller:
Có hai cách để có thể sử dụng resource:
Cách thứ nhất là yêu cầu trả về dưới dạng collection, tức là một chuỗi các mảng của
nhiều giá trị dữ liệu bằng cách khai báo thêm ::collection sau tên resource.
public function getComment($pid){
$comment = DB::table('comments')->where('spid',$pid)->get();
return CommentResources::collection($comment);
}

Cách thứ 2 là khi dữ liệu được trả về chỉ có một node dữ liệu, tức là dữ liệu đơn thì

ta sẽ khai báo khởi tạo một resource mới.
public function getPost($id){
$social = SocialPost::find($id);
return new SocialResources($social);
}

Cuối cùng, ta sẽ khai báo route cho api để app có thể gửi các request http đến server
theo các url được điều hướng và khai báo.
// get all the shared post - user dont need to login to view them
Route::get('social','API\APISocialController@getSocialPost');
Route::get('social/{id}','API\APISocialController@getPost');
Route::get('social/{id}/comment','API\APISocialController@getComment');

Cách khai báo cũng sẽ tương tự như cách khai báo route trên web, và việc thực
hiện ta sẽ chỉnh sử trong tệp api.php của thư mục routes.
Kết quả: url: “<server_url>/api/social”

Image Filter – FiAR

16 | P a g e