Đồ Án Tốt Nghiệp Ngành Công Nghệ Thông Tin Xây Dựng Phần Mềm Xử Lý Ảnh Trực Tuyến.pdf

Với mong muốn phát triển một phần mềm đề người dùng thay đổi, xử lý hình ảnh cá nhân một cách nhanh chóng và thuận tiện nhất theo mong muốn của người sử dụng, chính vì thế, trong đồ án n

KHOA CONG NGHE THONG TIN

DO AN TOT NGHIEP

CHUYEN NGANH KHOA HOC MAY TINH UNG DUNG

DE TAI XAY DUNG PHAN MEM XU LY ANH TRUC TUYEN

SINH VIEN THUC HIEN CAN BQ HUONG DAN _ NGUYEN TIEN DUNG THS NÔNG THỊ OANH _ LÓP KHMT ỨNG DỤNG B-K63_ BỘ MÔN KHOA HỌC MÁY TÍNH

HÀ NỘI - 2022

Lời đầu tiên, em xin gửi lời trí ân tới toàn thế các Thầy Cô trong Khoa Công nghệ thông tin —- Chuyên ngành Khoa học Máy tính ứng dụng — Trường Đại học Mỏ Địa chất, những người đã truyền hết tâm huyết và lòng nhiệt tình của mình cho chúng em trong suốt bốn năm học vừa qua tại ngôi trường này Những kiến thức mà Thầy Cô đã truyền thụ cho chúng em là vô giá và sẽ là hành trang cho chúng em trong suốt đường đời

Em xin gửi lời cảm ơn sâu sắc tới Cô Nông Thị Oanh đã trực tiếp hướng dẫn, nhận xét, tận tình giúp đỡ em trong suốt quá trình thực hiện đồ án tốt nghiệp

Cuối cùng em xin gửi lời cảm ơn đến gia đình, người thân, người dùng bè đã giúp đỡ, động viên em rất nhiều trong quá trình học tập và thực hiện Đồ án tốt nghiệp

Sinh viên Nguyễn Tiến Dũng

Mục lục

DANH MUC BANG BIEU 5

TONG QUAN VE DE TAI 7 1.1 Lý do chọn đề tài 7 1.2 Mục tiêu đề tài 7

1.3 Nội dung nghiên cứu 8 1.4 Phạm vi nghiên cứu 8

1.5 Bố cục đồ án 8 CHUONG 2 CO SO LY THUYET VÀ CÔNG NGHỆ - 5 5-55 cc<e 9

2.1 Ngôn ngữ HTML 9

2.2 CSS là gì? 10

2.3 Ngôn ngữ Typescrip 11 2.4 Angular 12

3.!I.L Quy trình xử lÿ hình ảnh 23

3.1.2 Ý móng thiết ké website 23 3.2 Phân tích hệ thống 25

3.2.1 Các tic nhin 25 3.2.2 Dac ta ca sir dung 25 3.3 Biéu dé ca sir dung 32

CHUONG 4 THIET KE HE THONG 37 4.1 Thiết kế kiến trúc hệ thống 37 4.2 Thiết kế cơ sở dữ liệu 38 4.3 Xây dựng biểu đồ triển khai 39 4.4 Kiểm thử hệ thống 39 CHƯƠNG 5 KET QUA THUC NGHIEM 41 5.1 Môi trường phát triển 4I

5.2 Giao diện Trang chủ 41 5.2.1 Giao dién Dang ki/ Dang nhap 41 5.2.2 Giao điện trang chủ 42 5.2.3.Giao dién cac tinh nang 44 5.4 Giao dién ADMIN 52 5.4.1 Giao dién quan Ip tai khoan 52 5.4.2 Giao dién quản Ïÿ người dùng 32

TÀI LIỆU THAM KHẢO 54

DANH MỤC HÌNH VẾ

Hinh 2.1 Cách thức hoạt động của HTTÌMLL, - L2 2221222122211 12312531 12211551 xe, 9 Hình 2.2 RESTful API Design - 5 2c 0 221122111211 1121112211 1118111111122 1 112v 15 Hình 2 3 Cách hoạt động của RESTTMl API 2 2 222111212211 11 15211111222 kk2 16 Hinh 3.1 Biéu dé ca str dung cua hé thống deveneesaaseeaaeeeeeseceeseecseseseeessececesautesttseeeesenes 31 Hinh 3.2 Biéu dé tuan tu ca sử dụng Đăng nhập - - 2 2222221222 sss 32

Hình 3.3 Biểu đồ tuần tự ca sử dụng Quản lý tài khoản - 25c S2 czrsrscez 33

Hình 3 4 Biêu đỗ tuần tự ca sử dụng Chính kích thước dụng lượng ảnh 33

Hình 3.5 Biểu đồ tuần tự ca sử dụng J)ow?#loadl ảnh Ẳ Sen n SA S12 111 1 v2 34 Hinh 4.1 Thanh phan của kiến trúc hệ thống ¬— 35

Hình 4 2 Lược đổ CĐDL 2-¿-222¿22%1222111221112211121211211111211121112112012 c6 37 Hình 4.3 Biểu đồ triển khai 52 222 2221112211121111221127112111121211 021 1 tre 37

Hình 5.I Giao diện đăng ký 0 2 0020102201110 11111 1111111111111 1111111111111 xx5 39 Hình 5.2 Giao diện nhập ỌTT - 5 G2212 2211 1111121112111 1211118211111 11 82111111224 40 Hình 5.3 Giao diện đăng nhập - 2 0 221112211 12211 1211112111111 11181111112 40 Hình 5.4 Giao diện trang chủ - c c2 211212111211 112111 1111111111111 121111811 4l Hinh 5.5 Giao diện trang chủ đưới -. - c1 2 112211112111 1221 11182211 1111122111122 4I Hình 5.6 Giao diện chỉnh sửa ảnh tơng -5- 2c S1 1 2111111111111111211 11 1E te 42 Hiình5.7 Chèn thêm ảnh vào ảnh đã upload -: 222 2221222211 122221 1222x232 42 Hinh 5.8 Giao diện chèn fext ccccccccccseececessesesetttectetsvanseeceseceusausasseesecs 43 Hình 5 9 Thêm icons cĩ sẵn/ tải lên cho ảnh 5 2 s1 E22125E5E11257222221 1z 43 Hình 5 I0 Vẽ lên ảnh đã upload - c1 221222111211 112211 1111182111112 11 1128 x12 43 Hinh 5 11 Koay athe ẢẢŸẳẲẮẮ 44

008 y0o n 44

Hình 5.13 Restze ảnh c0 202 221121112112 112211011 1511111 11111111111 1111101511115 ca 45 Hình 5 14 Điều chỉnh các thơng số trên ảnh 5-5 2211222151121 111121 7112 ce 45 Hinh 5 15 Giao diện nén ảnh ccc eccccccccseveseesetteettetsvacseseeseceusauaaesseseecs 46 Hình 5.6 Giao diện thay đổi kích thước ảnh 5 SE E1 115121211152 2t 46

Hình 5.17 Giao diện cắt ảnh ¿-25:-222222112221112711122111222112121121102110211 2 c6 47 Hình 5.18 Giao diện sau khi cắt ảnh - 22:22 22212222222127312231271271 22 xe 47

Hình 5 I9 Giao điện chuyển ảnh sang đen trắng s2 21111122211 111112 1 xe2 48 Hinh 5.20 meme ảnh 1 2 22112211211 121 111111112 111 1111111111111 151 11 TH HH Hy 49 Hình 5.21 Giao diện xoay ảnh - 5 2 0 2111121111211 1211 1121111211101 11111011111 gà 49

Hình 5.22 Giao diện chuyền đổi ảnh - 5 111111 111111E111111111 1212111111112 xe 50 Hinh 5.23 Giao diện chèn khung ảnh - 5 5222222222222 1 1222211222221 1222x%2 50 Hình 5.24 Giao diện sau khi đã lựa chọn khung - 5 22 225222225232 <2ss+2 51 Hinh 5.25 Giao dién sau khi chén ane ceceececcecenseseeceeseeseeeeeeseeeeees 51 Hình 5.26 Giao dién sau khi chèn khung vào ảnh thành công 32 Hình 5.27 Giao diện thông tin tài khoản - 5 - c0 2212222111211 1 121111211 12111 112222 32 Hinh 5 28 Giao diện adimin ceecccecceececccccccccceccceccesceeseteesetttttttttssauseeceseees 53 Hinh 5.29 Giao diện quan ly người dùng 5.0 5 0 2111221112111 1211112111211 33

DANH MUC BANG BIEU

Bảng l: Ca sử dựng Đăng Ký tài khOỞẲIH c cv HT HH 11111111111 11kg 26 Bảng 2 Ca sử dựng Quản lý đăng nhẬP TT TH HH HH ke 26 Bảng 3 Ca sử dựng Chính kích thước dung lƯỢng đHỈ cà co che 27 Bảng 4 Ca sử dựng Chèn lên ẢHỈH À TT HH SH HS HT v TH ng tk Hku 28 Bảng 5 Ca sử dụng Chuyến đối định dạng đnh 1 s1 1112111 111g 28 Bảng 6 Ca sử dụng Thay đôi hướng đHÌ S111 E111 2121212111212 rg 29 Bảng 7 Ca sử dụng Thay đồi màu đHÌ 5 TT E11 1211212121111 reo 30 s08 Ẵ60/8.7/07.// J-089001 //(2-.8.,.,N000Nnn08 adẢẢ 30 Bảng 9 Quản lý thông tÌH HGHỜI (Hà Q à LH HHn HH HH TH HH vn khe 31 Bang 10 Bang thanh phan kiến trúc - c s S1 2 EE12111121121111211111111 11 xxx 37 Bảng | Í SeT Q.2 02202212 222021111211 1115311111211 1 5111118111119 TH g1 1H kh kg 38

LỜI NÓI ĐẦU

Ngày nay, trước sự phát triển mạnh mẽ của khoa học - công nghệ, xuất hiện ngày càng nhiều các trang mạng xã hội đã chia sẻ hình ảnh kết nói cộng đồng đề dễ dàng bảy tỏ tình cảm cũng như đáp ứng nhu cầu công việc, chính vì vậy xử lý ảnh

dé tạo ra những bức ảnh phù hợp nhằm lưu lại những khoảnh khắc đẹp trong cuộc sống dé có thê lan tỏa, chia sẻ với mọi người trên các nền tảng trên mạng xã hội là thực sự cần thiết Đặc biệt là với các nhiếp ảnh gia, là những người khao khát đem lại nhiều bức ảnh đẹp chia sẻ tới mọi người thì nhu cầu có một công cụ xử lý hình ảnh nhanh chóng và tiện ich lại càng lớn Với mong muốn phát triển một phần mềm

đề người dùng thay đổi, xử lý hình ảnh cá nhân một cách nhanh chóng và thuận tiện nhất theo mong muốn của người sử dụng, chính vì thế, trong đồ án này, em đã lựa chọn đề tài phát triển một phần mềm chuyên dụng với các tính năng phô biến chỉnh sửa và xử lý ảnh trực tuyến mà không nhất thiết phải download phần mềm về máy tốn nhiều thời gian cũng như dung lượng bộ nhớ

Trong quá trình nghiên cứu và thực hiện đồ án với quyết tâm cao nhưng do hạn chế về kinh nghiệm vả kiến thức nên đỗ án của em chắc chắn sẽ không thé tránh khỏi những thiếu xót Em rất mong nhận được ý kiến đóng góp từ Thầy Cô và các người dùng đề đồ án được hoàn thiện hơn

Sinh viên Nguyễn Tiến Dũng

xã hội thì nhu cầu chia sẻ thông tin của con người ngày cảng cao Nắm bắt được vấn

đề đó, đã có rất nhiều các phần mềm xử lý ảnh cũng như hàng loạt các website chỉnh sửa ảnh trực tuyến đã ra đời, giúp người dùng tiết kiệm băng thông, lưu trữ, đáp ứng chất lượng của ảnh trước khi chia sẻ hình ảnh lên mạng xã hội và hơn thế nữa là kết nối cộng đồng người dùng Internet, giúp người dùng chia sẻ những hình ảnh đẹp, khoảnh khắc đẹp trong cuộc sông Mỗi một phần mềm xử lý ảnh đều có những điểm mạnh, điểm khác biệt nhưng tất cả đều hướng tới lợi ích của người sử dụng, đáp ứng nhu cầu của người dùng là sử dụng các công cụ hỗ trợ đề thay đôi ảnh so với ảnh gốc, có thê lưu trữ, chia sẻ với người dùng bè, người thân, gia đình, cộng đồng trên các nền tảng mạng xã hội như Facebook, Intagram

Hiện nay, trên thế giới cũng như ở Việt Nam có nhiều phần mềm xử lý ảnh có thê cài đặt trên máy tính hoặc sử dụng trực tuyến như Photoshop, Corel PaintShop Pro, Paint.NET, Pixlr.com, img2go.com Nhìn chung các phần mềm này có những công cụ với giao diện phức tạp, yêu cầu người sử dụng phải có chuyên môn và kiến thức về nhiếp ảnh, rất khó cho người mới bắt đầu sử dụng Muốn sử dụng đầy đủ các tính năng thì người dùng phải trả phí khá cao

Với mong muốn áp dụng các kiến thức đã học trên ghế Nhà trường và khi đi thực tập ở các công ty CNTT đề phát triển một phần mềm xử lý ảnh trực tuyến miễn phí có giao diện thân thiện với người Việt, có các tính năng chỉnh sửa ảnh chuyên nghiệp giúp người dùng có thể biên tập ảnh theo nhu cầu một cách nhanh chóng em

đã lựa chọn đề tài: “Xây dựng phần mềm xứ lý ảnh trực tuyến” làm đề tài nghiên cứu cho đồ án tốt nghiệp của mình

1.2 Mục tiêu đề tài

Xây dựng được phần mềm xử lý hình ảnh trực tuyến sử dụng thư viện Angular và ngôn ngữ lập trình Typescript, hoạt động tốt trên mọi trình duyệt, có các chức năng chỉnh sửa ảnh cơ bản sau:

s* Nhóm tính năng chỉnh kích thước,dung lượng ảnh gồm: cắt ảnh, thay đổi kích thước ảnh, nén ảnh, chỉnh sửa ảnh tổng hợp

s* Nhóm tính năng chuyên đổi ảnh: chuyên đổi định đạng ảnh sang JPG, chuyến đôi ảnh sang PNG

s* Nhóm thay đối hướng ảnh: Xoay ảnh, chỉnh sửa ảnh tông hợp

s* Nhóm tính năng chỉnh màu sắc ảnh: chuyển đổi ảnh sang đen trăng, chỉnh sửa ảnh tông hợp (điều chỉnh các thông số màu sắc)

s* Nhóm tính năng chèn lên ảnh: Lồng khung ảnh, Tạo meme ảnh, chỉnh sửa ảnh tông hợp

1.3 Nội dung nghiên cứu

© Tìm hiểu quy trình chỉnh sửa ảnh

s Phân tích vả thiết hệ thống

e Nghiên cứu ngôn ngữ lập trình và các công nghệ đề triên khai hệ thông

©_ Tiến hành cài đặt, lập trình và chạy thử nghiệm chương trình

1.4 Phạm vi nghiền cứu

Xây dựng phần mềm xử lý ảnh trực tuyến có các chức năng chỉnh sửa ảnh cơ bản như: Kích thước ảnh, chuyến đổi định đạng ảnh, chỉnh sửa màu sắc, độ sáng ảnh, lồng khung ảnh, tạo meme ảnh

1.5 Bồ cục đồ án

Đồ án được cấu trúc thành 5 chương như sau:

Chương l: Tông quan của dé tài

Chương 2: Cơ sở lý thuyết và công nghệ: giới thiệu công nghệ sử dụng trong

đề tài và giải thích lí đo lựa chọn công nghệ đó

Chương 3: Phân tích hệ thống: mô tả quy trình của hệ thống, xác định các

thông tin và chức năng xử lí của hệ thống

Chương 4: Thiết kế hệ thống: đựa vào kết quả của phân tích hệ thống, đưa ra

đặc tả thiết kế hệ thông chỉ tiết

Chương 5: Kết quả thực nghiệm: trình bày kết quả xây dựng ứng dụng

Tài liệu HTML có đuôi file dạng html hoặc htm Có thể xem chúng bằng các trình duyệt web hiện hành như Google Chrome, Firefox, Safari Nhiệm vụ của trình duyệt là đọc những file HTML này và “biến đổi” chúng thành một dạng nội dung visual trên Internet sao cho người dùng có thể xem và hiểu được chúng

Thông thường, một Website sẽ có nhiều HTML document (ví dụ: trang chủ, trang blog, trang liên hệ ) và mỗi trang con như vậy sẽ có một tệp HTML riêng Mỗi tài liệu HTML bao gồm l bộ tag (hay còn gọi là phần tử) Nó tạo ra một câu trúc tương tự như cây thư mục với các heading, section, paragraph và một số khối nội dung khác Hầu hết tất cả các HTML element đều có một tap mở

va mot tag dong voi cau tric <tag></tag>

2.1.2 Ưu điểm và nhược điểm của HTML

Uu điểm:

HTML được sử dụng để tạo bố cục, cấu trúc trang web Nó có một sỐ ưu điểm sau:

® Có nhiều tài nguyên hỗ trợ với cộng đồng người dùng vô cùng lớn

© Có thể hoạt động mượt mà trên hầu hết mọi trình duyệt hiện nay

® Học HTML khá đơn giản

®_ Các markup sử dụng trong HTML thường ngắn gọn, có độ đồng nhất cao

©_ Sử dụng mã nguồn mở, hoàn toàn miễn phí

® HTML là chuẩn web được vận hành bởi W3C

e Dé dang để tích hợp với các loại ngôn ngữ backend (ví dụ như: PHP, Node.Js )

®_ Mỗi trang HTML cần được tạo riêng biệt, ngay có khi có nhiều yếu tô trùng lặp như header, footer

© Khó để kiểm soát cách đọc và hiến thị ñle HTML của trình duyệt (ví dụ, một số trình duyệt cũ không render được tag mới Do đó, dù trong HTML document c6 sử dụng các tag nay thi trinh duyệt cũng không đọc được)

® Một vài trình duyệt còn chậm cập nhật đề hỗ trợ tính năng mới của HTML

2.2 CSS là gì?

CSS là ngôn ngữ chúng tôi sử dụng để tạo kiểu cho một trang web CSS

mô tả cách hiến thị các phần tử HTML CSS là viết tắt của Cascading Style

Sheets CSS mô tả cách các phần tử HTML được hiển thị trên màn hình, giấy

hoặc trong các phương tiện khác CSS tiết kiệm rất nhiều công việc Nó có thé kiêm soát bô cục của nhiêu trang web cùng một lúc Cac bang định kiêu bên

ngoài được lưu trữ trong các tệp CSS CSS được sử dụng đề xác định kiêu cho các trang web của người dùng, bao gồm thiết kế, bố cục và các biến thể hiển thị cho các thiết bị và kích thước màn hình khác nhau

Vai tro quan trong cia CSS

Với HTML không bao giờ có ý định chứa các thẻ dé định dạng một trang web HTML được tạo ra để mô tả nội dung của một trang web, như:

<hI> Đây là một tiêu đề </hl>

<p> Đây là một đoạn văn </p>

Khi các thẻ như <font> và các thuộc tính màu được thêm vào đặc tả HTML, nó bắt đầu một cơn ác mộng đối với các nhà phát triển web Việc phát triển các trang web lớn, trong đó phông chữ và thông tin màu sắc được thêm vào

từng trang, đã trở thành một quá trình lâu dài và tốn kém

Dé giai quyét van dé nay, World Wide Web Consortium (W3C) đã tạo

CSS CSS đã xóa định dạng kiểu khỏi trang HTMLI

2.3 Ngôn ngữ Typescrip

TypeScript là một siêu tập cú pháp của JavaScript bô sung thêm tính năng nhập tĩnh Về cơ bản, điều này có nghĩa là TypeScript thêm cú pháp vào đầu JavaScript, cho phép các nhà phát triển thêm các loại TypeScript là một

"Svntactic Superset" có nghĩa là nó chia sẻ cú pháp cơ sở giống như JavaScript, nhưng thêm một số thứ vào nó

TypeScript cho phép chỉ định các loại đữ liệu được truyền xung quanh trong mã và có khả năng báo cáo lỗi khi các loại không khớp Ví dụ, TypeScript

sẽ báo lỗi khi truyền một chuỗi vào một hàm đợi một số còn JavaScript thì không

TypeScript sử dụng kiêm tra kiêu thời gian biên dịch Có nghĩa là nó sẽ kiêm tra xem các loại được chỉ định có khớp nhau hay không trước khi chạy mã, chứ không phải trong khi chạy mã

JavaScript Phần tiếp theo trình bày cách thiết lập trình biên địch cho một dự án cục bộ

Một số trình soạn thảo mã phổ biến, chăng hạn như Visual Studio Code, có

hỗ trợ TypeScript tích hợp và có thê hiển thị lỗi khi người dùng viết ma! 2.4 Angular

Angular là một JavaScript amework dùng để viết giao diện web (Front- end) Day là một sản phâm được viết bởi Misko Hevery và một người người dùng của anh là Adam Abrons Sau đó, chính thức “ra mắt” vào 20/10/2010 Hiện tại, sản phẩm này đang được Google duy trì Hiểu đơn giản, Angular là một khung làm việc của JavaScript MVC phía máy khách (client) nhăm phát triển ứng dụng web động AngularJS là từ đùng để nói về Angular | (ra doi nam 2009), được viết bằng JavaScript Angular là từ gọi chung cho Angular 2 trở lên (ra đời năm 2016), được viết bằng TypeScript - phiên bản nâng cao của JavaScript

Angular được thay đổi rất nhiều từ AngularJS Angular đã thiết kế lại từ đầu nên có nhiều khái niệm đã thay đôi từ AngularJS Kiến trúc của Angular và Angular]S hoàn toàn khác nhau Hiện tại AngularJS cũng không con được Google hỗ trợ nâng cấp nữa

Angular có những lợi ích sau:

- Angular được “chống lưng” bởi Google, giúp cho Developer có cảm giác được đảm bảo Mặc nhiên, họ sẽ ám thị rằng framework này khó

mà bị “khai tử”, vỉ vậy cứ yên tâm sử dụng

-_ Cộng đồng người dùng lớn nên nếu có thắc mắc gì cũng sẽ nhanh chóng được giải đáp

-_ Giúp phát triển Ứng dụng trang don (Single-page Application) Day la ứng dụng chạy trên browser mà không bắt buộc phải tải lại trang khi sử dụng

xuất thành các phần có thê tái sử dụng Nó cũng hoạt động tốt với các component của web

Y Data Binding: Angular cho phép nguwoi ding dé dang di chuyén di liéu tir

mã JavaScript sang view và phản hồi với các sự kiện của người đùng mà không cần phải viết bất kỳ mã nào theo cách thủ công

* Dependeney Injecfion: Angular cho phép người dùng viết các service mô- dun và đưa chúng vào bất cứ nơi nào họ cần Điều này cải thiện khả năng kiểm tra và khả năng tái sử dụng của các service giống nhau

Y Testing: Newoi ding co thé dé dang Unit test moi phan trong ứng dụng của minh

Y Comprehensive: Angular 1a mét full-fledged Framework va co thé cung cấp các giải pháp tiện ích cho giao tiếp máy chủ, định tuyến trong ứng dụng của người dùng và hơn thê nữa

Y Browser Compatfibilifp: Angular cung cấp đa nền tảng và tương thích với nhiều trình duyệt Một ứng dụng Angular thường có thê chạy trên tất cả các

trình duyệt (Ví dụ: Chrome, Firefox) và hệ điều hành, chăng hạn như

Windows, macOS va Linux

*Nhuge diém:

Không an foàn: Thông thường, bản chất của Angular là một trong những Framework Front End, mà Front end này thường vốn không thể bảo mật bằng Back-end Chính vì vậy, khi sử dụng API thì người dùng cần xây dựng cho một hệ thống kiểm tra dữ liệu sao cho việc trả về được tốt nhất Với một

số trình duyệt sở hữu tính năng Disable JavaScript nên có nghĩa là website sẽ không hoàn toàn có thé str dụng được dựa trên những trình duyệt đó nữa 2.5 NodeJS

Node1S là một môi trường runtime chạy JavaScript đa nền tảng và có mã nguồn mở, được sử dụng để chạy các ứng dụng web bên ngoài trình duyệt của client Nền tảng này được phát triển bởi Ryan Lienhart Dahl vào năm 2009, được xem là một giải pháp hoàn hảo cho các ứng dụng sử dụng nhiều đữ liệu nhờ vào mô hình hướng sự kiện (event-driven) không đồng bộ

Uu điểm:

JO hướng sự kiện không đồng bộ, cho phép xử lý nhiều yêu cầu đồng thời

Y Su dung JavaScript — một ngôn ngữ lập trình dễ học

* Chia sẻ cùng code ở cả phía client và server

NPM(Node Package Manager) va module Node dang ngay cang phat triển manh mé

Khó thao tác với cơ sử dữ liệu quan hệ

Mỗi callback sẽ đi kèm với rất nhiều callback lỗng nhau khác

Cần có kiến thức tốt về JavaScript

# Không phù hợp với các tác vụ đòi hỏi nhiều CPU

Những ứng dụng nên viết bằng Node.JS

Ứng dụng trò chuyện trong thời gian thực: Nhờ vào câu trúc không đồng

bộ đơn luỗng, Node.JS rất thích hợp cho mục đích xử lý giao tiếp trong thời gian thực Nền tảng này có thê đễ dàng mở rộng quy mô và thường dùng để tạo

ra các chatbot Bên cạnh đó, các tính năng liên quan đến ứng dụng trò chuyện như: chat nhiều người, thông báo đây cũng có thê đễ dàng được bổ sung nhờ NodeJS

Internet of Things (IoT): Cac tng dung IoT thuong bao g6m nhiều bộ cảm biến phức tạp đề gửi những phần dữ liệu nhỏ Node.JS là một lựa chọn lý tưởng

đề xử lý các yêu cầu đồng thời này với tốc độ cực nhanh

Truyền đữ liệu: Netflix là một trong số những công ty lớn trên thế giới chuyên sử dụng Node.JS cho mục đích truyền dữ liệu Sở đĩ vì đây là một nên tảng nhẹ và cực nhanh, đồng thời còn cung cấp một API chuyên dùng dé stream Các SPA (Single-page application) phức tạp: Trong SPA, toàn bộ ứng dụng được load vào trong một trang duy nhất, do đó sẽ có một số request được

thực hiện trong nền Vòng lặp sự kiện (event loop) của Node.JS cho phép xử lý các request theo hướng non- blocking

Các une dung REST dua trén API: JavaScript duoc su dung trong ca frontend lan backend cua trang Do do mét server co thé dé dang giao tiếp với frontend qua REST API bằng Node.js Bên cạnh đó, Node.JS còn cung cấp nhiều package nhu Express.js hay Koa để việc xây dựng ứng dụng web trở nên dễ dàng hơn bao giờ hết

2.6 RESTEUL API

Sự quan trọng của API trong các ứng đụng ngày nay là điều ko thê bàn cãi Một ứng dụng mà không có API thì như một cỗ máy tính không kết nối internet vậy Và như một điều hiển nhiên, mọi thứ sau khi phát triển một thời gian sẽ

hình thành những chuân mực chung và đối với API, nó chính là RESTful [5]

Có thê nói nguyên lí REST và cấu trúc đữ liệu RESTful được biết đến rộng rãi trong giới lập trình web nói chung và lập trình ứng dụng nói riêng

Có thể nói bản thân REST không phải là một loại công nghệ Nó là phương thức tạo API với nguyên lý tô chức nhất định Những nguyên lý này nhằm hướng dẫn lập trình viên tạo môi trường xử lý API request được toàn diện

RESTful API la gi?

RESTful API 1a mét tiéu chudn ding trong viéc thiét ké API cho cac img dụng web (thiết kế Web services) đề tiện cho việc quan ly cac resource No chu trọng vào tài nguyên hệ thống (tệp văn bản, ảnh, âm thanh, video, hoặc dữ liệu động ), bao gồm các trạng thái tài nguyên được định dạng và được truyền tải qua HTTP

REST API

GET asks - display all tasks lam” POST \asks - create a new task = | GET ltasks/{ld} - display a task by ID DB data PUT fhasks/{id) - update a task by iD

DELETE /tasks/{id) - delete a task by ID

Client Hinh 2.2 RESTful API Design

% Các thành phần của RESTƒfil API:

API (Application Programming Interface) là một tập các quy tắc và cơ chế

mà theo đó, một ứng dụng hay một thành phần sẽ tương tác với một ứng dụng hay thành phần khác API có thê trả về đữ liệu mà người đùng cần cho ứng dụng của

mình ở những kiểu đữ liệu phô biến như JSON hay XML

REST (REpresentational State Transfer) la mét dang chuyén déi cau tric dir liệu, một kiêu kiến trúc đề viết API Nó sử dụng phương thức HTTP đơn giản để tạo cho giao tiếp giữa các máy Vì vậy, thay vì sử dụng một URL cho việc xử lý một số thông tin người dùng, REST gửi một yêu cầu HTTP như GET, POST,

DELETE, vv đến một URL đề xử lý đữ liệu

RESTful API là một tiêu chuân dùng trong việc thiết kế các API cho các ứng đụng web đề quản lý các resource RESTful là một trong những kiểu thiết kế API được sử dụng phô biến ngày nay để cho các ứng đụng (web, mobile ) khác nhau giao tiếp với nhau

Chức năng quan trọng nhất của REST là quy định cách sử đụng các HTTP method (nhu GET, POST, PUT, DELETE ) va cach dinh dang cac URL cho tng dụng web dé quan cac resource RESTful khéng quy dinh logic code tmg dung va không giới hạn bởi ngôn ngữ lập trình ứng dụng, bất kỳ ngôn ngữ hoặc framework nảo cũng có thé str dung dé thiét ké mét RESTful API

& RESTful API hoat dong nhw thé nao?

; ê Application

Application ra tat API HTTP Client

/entrypoint /collection1 - "

L > resourcel > Client App

< resource2 <= REST Library

+ to resource /collection2 application/x-collectior optional)

L tạm soesurce resourcel resrouce2 peplicationhe-reseurce HTTP Library

Application

Data Model Resource Model

Server Client

Hinh 2 3 Cach hoat déng cua RESTful API

REST hoạt động chủ yếu dựa vào giao thức HTTP Các hoạt động cơ bản nêu trên sẽ sử dụng những phương thức HTTP riêng

GET (SELECT): Trả về một Resource hoặc một danh sách Resource POST (CREATTE): Tạo mới một Resouree

PUT (UPDATE): Cập nhật thông tin cho Resouree

DELETE (DELETE): Xoá một Resource

Những phương thức hay hoạt động này thường được gọi là CRUD tương ung voi Create, Read, Update, Delete — Tao, Doc, Sửa, Xóa

2.7 Tim hiéu vé amazon web service

2.7.1 Amazon web services la gi?

Amazon web services là một nền tảng điện toán đám mây phát triển toàn diện được cung cấp bởi Amazon.com Dịch vụ Web đôi khi được gọi là dich vu đâm mây hoặc các dịch vụ điện toán từ xa Các dịch vụ AWS đầu tiên đã được đưa ra vào năm 2006 đề cung cấp các dịch vụ trực tuyến cho các trang web và các ứng dụng phía máy khách Để giảm thiểu việc bị mất điện đột ngột và đảm bảo tính mạnh mẽ của hệ thống, AWS đa dạng về địa lý theo khu vực Các khu vực này có trung tâm ở Đông Mỹ, Tây Mỹ (hai địa điểm), Brazil, Ireland, Singapore, Nhật Bản và Úc Mỗi khu vực bao gồm nhiều khu vực địa lý nhỏ hơn được gọi là vùng sẵn có

Bộ sưu tập AWS đang phát triển cung cấp hơn ba chục địch vụ đa dạng bao

x x

gom:

« CloudDrive cho phép người dùng tải và truy cập nhạc, video, tài liệu và ảnh

từ các thiết bị kết nối Web Dịch vụ này cũng cho phép người dùng phát nhạc trực tuyến tới thiết bị của họ

« CloudSearch, một dịch vụ tìm kiếm có thê mở rộng được sử dụng đề tích hợp khả năng tìm kiếm tùy chỉnh vào các ứng dụng khác

« Cơ sở dữ liệu Dynamo (còn gọi là DynamolDB hoặc DDB), một dịch vụ cơ

sở dữ liệu NoSQL được quản lý đầy đủ được biết đến với độ trễ và khả năng

mở rộng thấp

» Elastic Compute Cloud, cho phép các thuê bao kinh doanh chạy ứng dụng

» ElastiCache, dịch vụ bộ nhớ đệm được quản lý day đủ, tương thích với Memecached, một hệ thống lưu trữ bộ nhớ đối tượng được phân phối, mã nguồn mở, hiệu năng cao để tăng tốc các ứng đụng Web động bang cách giảm tải cơ sở đữ liệu

¢ Mechanical Turk, mét giao diện chương trình ứng dụng (API) cho phép các nhà phát triển tích hợp trí thông minh con người vào các cuộc gọi thủ tục từ

xa (RPC) sử đụng mạng con người để thực hiện các tác vụ mà máy tính không thích hợp

« RedShif, dịch vụ kho dữ liệu quy mô petabyte được thiết kế cho các khối lượng công việc phân tích, kết nối với các người dùngdựa trên SQL chuan va các công cụ thông minh kinh doanh

« Dịch vụ Lưu trữ Đơn giản (S3), một địch vụ có tốc độ cao, tốc độ thấp được thiết kế để sao lưu và lưu trữ trực tuyến các đữ liệu và các chương trình ứng dụng

Amazon web services hoat dong dya trén nén tang cloud computing (dién toán đám mây) vậy điện toán đâm mây là gì ? Điện toán đám mây thường được gọi là "đám mây", là việc phân phối các tài nguyên máy tính theo yêu cầu - tất cả mọi thứ từ các ứng dụng đến các trung tâm đữ liệu-qua internet trên cơ sở trả cho

Amazon EC2 cung cap cho người dùng cho người dùng khả năng thay đổi được sức chưa trên điện tốn đám mây AWS Sử dụng amazon EC2 s1úp người dùng khơng cần phải đầu tư phần cứng vì vậy giúp người dùng phát triển và triển khai các ứng dụng nhanh hơn Người dùng cĩ thể sử dụng amazon EC2 đề khởi tạo nhiều hoặc ít máy chủ nếu người dùng cần, cấu hình bảo mật và mạng, quản

lý bộ nhớ Amazon EC2 cho phép người dùng tăng quy mơ lên hoặc xuống đề xử

lý các thay đối trong yêu cầu hoặc tăng đột biến, giảm nhu cầu dự báo lưu lượng Đặc điểm:

« Mơi trường tính tốn ảo được gọi là instances Các template được cấu hình sẵn cho các instances của người dùng, được gọi là amazon machine imàes Các gĩi biết cần thiết cho máy chủ của người dùng(bao gồm hệ điều hành và phần mềm bồ sung)

« Các cầu hình khác nhau của CPU, bộ nhớ, dung lượng lưu trữ, và khả năng kết nối mạng cho các instances của người đùng được gọi là các instance type

« Bảo mật thơng tin login cho instances của người dùng bằng cách sử dụng key par AWS lưu key publie và người dùng lưu trữ key private Dữ liệu tạm thời

bị xĩa khi người dùng dừng hoặc chấm đứt instance của người đùng được gọi

la instance store volumes + Dung luong lwu tri liên tục cho đữ liệu của người dùng bằng Amazon Elastic Block Store (Amazon EBS) được goi la Amazon EBS volumes Nhiéu vi tri thực tế cho tài nguyên của người dùng ví dụ như cho các instance va Amazon EBS volumes duce goi la regions and Availability Zones

« Một bức tường lửa cho phép người dùng chỉ định các giao thức, cơng, và các giải íp nguồn mà cĩ thể tiếp cận các instance của người dùng sử dụng security groups Dia chi IPv4 tinh cho điện tốn đám mây động được gọi là Elastic IP addresses

« Siêu đữ liệu, được gọi là các thẻ, mà người dùng cĩ thể tạo và gán cho tài nguyén Amazon EC2 Các mạng ảo người dùng cĩ thể tạo được logic tách biệt với phần cịn lại của đám mây AWS và người dùng cĩ thê tùy ý kết nối với mạng của riêng người dùng được goi la virtual private clouds (VPCs)

Lưu trữ với Amazon S3

Là bệ lưu trữ đôi tượng có thê mở rộng an toàn, bảo mật và khả năng có thê mở rộng cao trong đám mây Nó được sử dụng đề lưu trữ và truy suất bất ký

số lượng dữ liệu bất kỳ lúc nào và ở đâu Amazon S3 giúp người dùng để dang lưu trữ đữ liệu cảng nhiều cảng tốt và truy cập bằng bất cư khi nào họ cần Điều này cho phép các tổ chức tránh mua phần cứng và thanh toán cho các bộ nhớ mà không được sử dụng Amazon S3 là một dịch vụ rất phải chăng theo AWS, dé lưu trữ dữ liệu trên web bởi vì người dùng chỉ trả tiền cho bộ nhớ và băng thông

mà họ thực sự sử dụng Các tổ chức chủ yếu sử dụng Amazon S3 để sao lưu và lưu trữ, để chạy các ứng dụng, lưu trữ các trang web lưu lượng truy cập cao, hoặc sao lưu đữ liệu dữ liệu trang web của người dùng theo những khoảng thời gian đều đặn Ví dụ nêu người dùng mốn lưu trữ cho một trang web cho doanh nghiệp của mình người dùng có thê lưu trữ các tập tin va assets tại Amazon S3 đề thu hồi nhanh hơn và chỉ phí lưu trữ thấp hơn Nó cũng cho phép phiên bản - người dùng

có thê ghi lại các thay đối và có thê rollback đến một phiên bản trước đó bất cứ khi nào cần Amazon S3 rất đễ sử đụng và cung cấp nhiều cách khác nhau dé được truy cập, quản lý và quản lý Nó cung cấp các API dich vu web REST va

SOAP để lưu trữ, truy xuất và quản lý đữ liệu

Cúc đặc trưng của AWS là gì?

Nền tảng AWS đáp ứng hẳu hết mọi nhu câu sử dụng

Hơn 60 dịch vụ sẽ sẵn sảng chỉ sau một vải thao tác với AWS, từ việc lưu trữ dữ liệu đến các công cụ triển khai, thư mục dé phân phối nội dung, Cac dịch vụ mới được cung cấp nhanh chóng, không cần chỉ phí vốn trả trước, cho phép các doanh nghiệp đã hoạt động lâu năm, các doanh nghiệp mới thành lập, các doanh nghiệp vừa và nhỏ cũng như người dùngtrong khu vực nhà nước tiếp cận các khối hợp nhất cần thiết đề đáp ứng nhanh chóng các yêu cầu kinh doanh

thay đồi

Tĩnh năng võ cùng chuyên sâu của 1WS là gì?

Sau gần một thập kỷ hợp tác chặt chẽ với nhiều tổ chức như Pinterest, GE

va MLB, Amazon Web Services cho phép người dùngcộng tác theo cách hoàn

toàn mới Các tính năng chuyên sâu chăng hạn như hệ thống các công cụ cơ sở

dữ liệu, cấu hình máy chủ, mã hóa và công cụ dữ liệu mạnh mẽ cho phép người dùng tập trung vào hoạt động kinh doanh cốt lõi của mình chứ không phải tập trung vào cơ sở hạ tầng bảo vệ hay hệ thống làm mát Nếu chưa rõ về AWS là gì hay các tính năng chuyên sâu liên quan, người dùng có thê liên hệ nhà cung cấp dịch vụ và sẽ nhanh chóng nhận được câu trả lời

Tính bảo mật mạnh mẽ hơn nên tảng máy chủ vật ly

Tính bảo mật trong đám mây được công nhận là tốt hơn so với nền tảng máy chủ vật lý Sự công nhận và chứng nhận bảo mật rộng rãi, mã hóa đữ liệu

khi ngừng hoạt động lẫn khi chuyên tiếp, các mô đun bảo mật phần cứng và bảo

mật vật lý mạnh mẽ đều góp phần tạo ra một cách quản lý cơ sở hạ tầng CNTT của doanh nghiệp an toản hơn

Tâm nhìn sâu rộng về tuân thủ và quản lý

Kiểm soát, kiểm tra và quản lý định danh, cầu hình và cách sử dụng là một phan quan trọng trong cấu trúc hạ tang CNTT ngay nay Voi Amazon Web Services, những tính năng này được tích hợp sẵn trong nền tảng giúp người dùng

đáp ứng các yêu cầu về tuân thủ, quản lý và luật định của mình

Tinh năng tích hợp

Lựa chọn giữa đầu tư vào cơ sở hạ tầng như hiện tại với chuyền sang đám mây không phải là một quyết định đễ dàng Nhiều doanh nghiệp thậm chí còn chưa rõ AWS là gì và AWS có ứng dụng như thế nào cho doanh nghiệp Các tính năng chuyên sâu, kết nỗi chuyên biệt, liên kết danh tính và các công cụ tích hợp cho phép doanh nghiệp chạy các ứng dụng “lai” trên các dịch vụ tại chỗ và đâm mây, vô cùng hữu ích cho doanh nghiệp

Mang lưới AWS các khu vực và vị trí máy chủ trên toàn cẩu

AWS lan truyền các dịch vụ của mình trên khắp thế giới và có hàng triệu khách hàng Cơ sở hạ tầng toàn cầu của AWS đang mở rộng để người dùnghoặc người dùng cuối cùng có khả năng nhận được kết quả với thông lượng cao hơn

và độ trễ thấp hơn và cũng để đảm bảo răng đữ liệu người dùngvẫn còn trong không gian hoặc khu vực mong muốn mà họ chỉ định Các khu vực AWS và các

Vùng sẵn có có số lượng lớn trên toàn thế giới Mỗi khu vực bao gồm nhiều địa

điểm, được đặt tên là Vùng sẵn có AWS có 42 Vung san có ở l6 vị trí địa lý

trên toàn cầu

Những lợi ích của phạm vi địa lý rộng lớn của AWS là gì?

Y Tang tinh khả dụng: Nhiều Vùng sẵn có và trung tâm dữ liệu được thiết

lập ở mỗi vị trí địa lý được kết nối với chất lượng cao, nhanh, riêng tư và được kết nối bằng cáp quang Liên kết mạnh mẽ này cho phép các ứng dụng chạy trơn tru và mượt mả

# Dịch vụ tốt hơn: AWS cho phép người dùng tăng khả năng dự phòng và khả năng xử lý đữ liệu khi có vấn đề xảy ra băng cách sao chép đữ liệu giữa các vị trí địa lý cho phép tốc độ truy cập cao hơn và độ trễ thấp hơn

# Kiểm soát khu vực: Công ty nằm ở một vị trí địa lý cụ thê có quyền kiểm soát khu vực đó giúp công ty để đàng có được tài nguyên tốt hơn

CHƯƠNG 3 PHAN TICH HE THONG

3.1 Mô tả hệ thống

3.!.I Quy trình xử lÿ hình ảnh

+ Bước 1: Truy cập vào công cụ xứ lý ảnh Người dùng đăng nhập vào hệ thống, sau đó lựa chọn công cụ xử lý ảnh muốn sử đụng

% Buéc 2: Upload hình anh

Sau khi truy cập vào công cụ xử lý hình ảnh, người dùng chọn upload hình ảnh vào khung chỉnh sửa đã có sẵn trong thiết bị Trình chỉnh sửa ảnh trực

tuyến của DUNGIMG hỗ trợ các định dang PNG, JPG, GIF

+ Bước 3: Xử] hmh ảnh Trên thanh công cụ bên dưới, người dùng nhấp chuột vào l trong những công

cụ chỉnh sửa anh Tại đây, người đùng tiễn hành xử lý hình ảnh với các công cụ

như cắt ảnh, xoay ảnh, nén ảnh,

4 Bude 4: Download anh Sau khi thực hiện xử lý ảnh thành công, người dùng chọn download đề tải hình ảnh về máy

3.1.2 Ý trởng thiết kế website

Website được thiết kế để có thê hiển thị hình ảnh, nội dung một cách khoa học, trực quan nhất Menu các trình chỉnh sửa, xử lý hình ảnh nôi bật nhất, rõ rang nhat dé người thực hiện dễ dàng tìm kiếm công cụ chỉnh sửa một cách nhanh nhất,

tiện lợi nhất

Đối với người dùng bình thường, họ có thể chỉnh sửa trên website một cách nhanh nhất Đề sử dụng được nhiều chức năng của hệ thống, người dùng cần đăng

ký thành viên và đăng nhập vào hệ thông Đối với mỗi thành viên, họ sẽ thực hiện

chức năng upload hình ảnh trực tiếp lên chỉnh sửa, xử lý bằng các công cụ chỉnh sửa ảnh và download về máy

Về front-end gồm các chức năng:

® Chính sửa kích thước, dung lượng ảnh:

+ Quản lý công cụ chỉnh sửa ảnh tông hợp: Chứa tính năng thay đổi kích thước, nén ảnh, cắt ảnh

+ Quản lí công cụ thay đổi kích thước: : Thay đỗi kích thước JPG, PNG hoặc GIF bằng cách xác định các pixel chiều cao và chiều rộng mới Thay đối kích thước hình ảnh theo số lượng lớn

+ Quản lí công cụ nén ảnh: Nén ảnh JPG, PNG và GIF để tiết kiệm dung lượng nhưng vẫn đảm bảo chất lượng và hỗ trợ ngưởi dùng đổi tên file

e© Thay đổi hướng ảnh:

+ Quản lý công cụ chỉnh sửa ảnh tổng hợp: Chứa tính năng xoay ảnh, lật ảnh (Lật ngược trái phải cho ảnh)

+ Xoay ảnh: Chọn và xoay hình ảnh với định hướng chân dung hoặc cảnh quan cùng một lúc

© Chỉnh màu sắc ảnh:

+ Quản lý công cụ chuyền đôi ảnh màu thành ảnh đen trắng: Người dùng

có thê chuyên đổi dễ dàng chế độ ảnh có màu sắc thành ảnh đen trang + Quản lý công cụ chính sửa ảnh tổng hợp: Chứa tính năng chỉnh màu sắc,

độ sắc nét, độ sáng, thêm backround va điều chỉnh các thông số cho bức

ảnh

s® Chèn lên ảnh:

+ Quan lý céng cu tao meme: Tao meme trực tuyên chỉ với một bước đơn giản Chọn mẫu của riêng người dùng hoặc từ những mẫu phô biến + Chèn khung ánh: Lựa chọn từ những khung ảnh có sẵn và chèn khung ảnh trực tuyến

+ Quản lý Chỉnh sửa ảnh tích hợp: Chứa tính năng : Vẽ lên ảnh: Dùng biểu

tượng bút vẽ tô màu lên tùy màu sắc người đùng mong muốn; Chèn icon cho ảnh: Thêm các biểu tượng cho ảnh băng các biểu tượng có san va tly chỉnh kích thước; Chèn text: Thêm văn bản vào ảnh; Chèn thêm ảnh: Thêm ảnh khác vào ảnh đã upload trước đó

Về phía Backend của website là phần quản trị nội dung đo adminstrator quản

lý Ở đây, họ sẽ có thê thực hiện các chức năng quản lý người dùng (đổi mật khâu/bật tắt kích hoạt, đôi thông tin cá nhân của người dùng)

“ Upload ảnh

„ Chỉnh sửa kích thước, dung lượng ảnh

* Chuyén đôi định dạng ảnh

z Thay đôi hướng ảnh

„ Chỉnh stra mau anh

3.2.2.1 Ca sur dung Dang ky tai khoản

Tén Use Case: Dang ky tai khoan Tác nhân: Người dùng

Mô tả: Cho phép người dùng nhập các thông tin đăng ký tài khoản

Tiền điều kiện: N/A

Hậu điều kiện: Đăng ký tài khoản thành công Luồng sự kiện chính:

Hành động tác nhân Phản ứng của hệ thống

1 Người dùng truy cập vào hệ thống | 2 Website hiện ra màn hình giao

và chọn đăng ký điện đăng ky tải khoản

3 Điền đầy đủ các trường thông tin | 4 Xác định yêu cầu của người

đăng ký tài khoản và nhấn nút dùng và gửi ma OTP về email dé

“Đăng ký” xác thực tài khoản

5 Verify thong tin dang ky tai 6 Xac nhan dang ky tai khoan khoan thành công

Bang 1: Ca str dung Dang ky tai khoản 3.2.2.2 Quản ly đăng nhập

Tén Use Case: Dang nhap

Tác nhân: Admin, người dùng

Mô tả: Cho phép người dùng đăng nhập hệ thống đề thực hiện các chức năng được phân quyên trong hệ thống

Tiền điều kiện: Người dùng được cấp tài khoản/ đăng ký thành công vào hệ thống

Hậu điều kiện: Use case thực hiện xong sẽ cho đăng nhập vào hệ thống Luồng sự kiện chính:

A2 Đăng nhập thành công Hiển thị

màn hình làm việc của người dùng

3.2.2.3 Ca sử dụng Chỉnh kích thước dung lượng ảnh

Tên Use Case: Chỉnh kích thước dung lượng ảnh Tác nhân: Người dùng

Mục đích: Người dùng sử đụng các nhóm tính năng đề chỉnh sửa ảnh

Mô tả khái quát: Người dùng đăng nhập hệ thống và truy cập vào một công

cụ chỉnh sửa ảnh tùy mục đích cá nhân Tại đây, người dùng nhấn chọn “Upload hình ảnh” để tải ảnh lên và lựa chọn công cụ chỉnh sửa kích thước dung lượng ảnh

có săn trên hệ thông

Tiền điều kiện: Người dùng đã đăng nhập vào hệ thống Luồng sự kiện chính:

Bảng 3 Ca sử dựng Chính kích thước dung lượng ảnh

1 Người dùng sau khi đăng nhập chọn , 4 ; ; ;

2 Hệ thông hiện thị lên giao diện Chỉnh

tính năng chỉnh sửa kích thước dung

kích thước dung lượng ảnh

lượng ảnh

3 Người dùng tiễn hành upload ảnh và 4 Hệ thống xử lý ảnh và trả về kết quả

3.2.2.4 Ca sử dụng Chèn lên ảnh

Tên Use Case: Chèn lên ảnh Tác nhân: Người dùng Mục đích: Người dùng sử đụng các nhóm tính năng đề chỉnh sửa ảnh

Mô tả khái quát: Người dùng đăng nhập hệ thống và truy cập vào một công

cụ chỉnh sửa ảnh tùy mục đích cá nhân Tại đây, người dùng nhấn chọn “Upload hình ảnh” để tải ảnh lên và lựa chọn công cụ chỉnh sửa kích thước dung lượng ảnh

1 Người dùng sau khi đăng nhập chọn|2 Hệ thống hiến thị lên giao diện Chèn

tính năng Chèn lên ảnh lên ảnh

4 Người dùng tiến hành upload ảnh và 4 Hệ thống xử lý ảnh va tra về kết quả

Mục đích: Người dùng sử đụng các nhóm tính năng đề chỉnh sửa ảnh

Mô tả khái quát: Người dùng đăng nhập hệ thống và truy cập vào một công

cụ chỉnh sửa ảnh tùy mục đích cá nhân Tại đây, người dùng nhấn chọn “Upload hình ảnh” để tải ảnh lên và lựa chọn công

có săn trên hệ thông

cụ chỉnh sửa kích thước dung lượng ảnh

Tiền điều kiện: Người dùng đã đăng nhập vào hệ thống Luồng sự kiện chính:

Bảng 5 Ca sử dựng Chuyên đổi định dạng ánh

Hành động của tác nhân Hành động của hệ thống

1 Người dùng sau khi đăng nhập chọn

tính năng Chuyên đổi định đạng ảnh

2 Hệ thống hiển thị lên giao diện

Chuyến đổi định dạng ảnh

5 Người dùng tiến hành upload ảnh và

chỉnh sửa ảnh

3.2.2.6 Ca sử dụng Thay đôi hướng ảnh như người dùng đã chỉnh sửa 4 Hệ thống xử lý ảnh và trả về kết quả

Tên Use Case: Thay đổi hướng ảnh Tác nhân: Người dùng

Mục đích: Người dùng sử đụng các nhóm tính năng đề chỉnh sửa ảnh

Mô tả khái quát: Người dùng đăng nhập hệ thống và truy cập vào một công

cụ chỉnh sửa ảnh tùy mục đích cá nhân Tại đây, người dùng nhắn chọn “Upload hình ảnh” để tải ảnh lên và lựa chọn công cụ chỉnh sửa kích thước dung lượng ảnh

có săn trên hệ thông

Tiền điều kiện: Người dùng đã đăng nhập vào hệ thống Luồng sự kiện chính:

Bảng 6 Ca sử dựng Thay đôi hướng anh

Hành động của tác nhân

Hành động của hệ thống

Nguyễn Tiến Dũng 28 Lớp DCCTKH63B