NGHIÊN CỨU ANGULARJS, ANGULAR MATERIAL VÀ ỨNG DỤNG ĐỂ XÂY DỰNG WEBSITE BẢO HÀNH THIẾT BỊ TIN HỌC - Full 10 điểm

UBND TỈNH QUẢNG NAM
TRƯỜNG ĐẠI HỌC QUẢNG NAM
KHOA: CÔNG NGHỆ THÔNG TIN

----------

NGUYỄN ĐỨC NHÂN

8

NGHIÊN CỨU ANGULARJS, ANGULAR MATERIAL
VÀ ỨNG DỤNG ĐỂ XÂY DỰNG WEBSITE BẢO HÀNH

THIẾT BỊ TIN HỌC

KHOÁ LUẬN TỐT NGHIỆP ĐẠI HỌC

Quảng Nam, tháng 04 năm 2017
1

UBND TỈNH QUẢNG NAM
TRƯỜNG ĐẠI HỌC QUẢNG NAM
KHOA: CÔNG NGỆ THÔNG TIN

----------

KHÓA LUẬN TỐT NGHIỆP ĐẠI HỌC
Tên đề tài:

NGHIÊN CỨU ANGULARJS, ANGULAR MATERIAL
VÀ ỨNG DỤNG ĐỂ XÂY DỰNG WEBSITE BẢO HÀNH

THIẾT BỊ TIN HỌC

Sinh viên thực hiện
HỌ TÊN: NGUYỄN ĐỨC NHÂN

MSSV: 2113021018
CHUYÊN NGÀNH: CÔNG NGHỆ THÔNG TIN

KHÓA: 2013 – 2017
Cán bộ hướng dẫn

ThS. TRẦN THỊ DIỆU HIỀN

Quảng Nam, tháng 4 năm 2017

2

MỤC LỤC
Phần 1. MỞ ĐẦU..........................................................................................................1

1.1. Lý do chọn đề tài ................................................................................................1
1.2. Mục tiêu của đề tài..............................................................................................1
1.3. Đối tượng và phạm vi nghiên cứu ......................................................................1
1.4. Phương pháp nghiên cứu ....................................................................................1
1.5. Lịch sử nghiên cứu .............................................................................................2
1.6. Đóng góp của đề tài ............................................................................................2
1.7. Cấu trúc đề tài.....................................................................................................2
Phần 2. NỘI DUNG NGHIÊN CỨU ............................................................................3
Chương 1: TỔNG QUAN VỀ ANGULARJS, ANGULAR MATERIAL ...................3

1.1. AngularJS ...........................................................................................................3

1.1.1. Giới thiệu về AngularJS ...............................................................................3
1.1.2. Tính năng và các thành phần trong AngularJS.............................................4
1.1.3. Ưu nhược điểm của AngularJS.....................................................................6
1.2.Angular Material..................................................................................................6
1.2.1. Giới thiệu về Angular Material.....................................................................6
1.2.2. Ưu nhược điểm của Angular Material..........................................................9
1.3. Các thành phần liên quan....................................................................................9
1.3.1. Web service...................................................................................................9
1.3.2.TelerikFidder ...............................................................................................11
1.3.3. Ajax, Json....................................................................................................17
Chương 2: XÂY DỰNG WEBSITE QUẢN LÝ BẢO HÀNH THIẾT BỊ TIN HỌC21
2.1. Giới thiệu bài tốn ............................................................................................21
2.2. Phân tích và xây dựng ứng dụng ......................................................................21
2.2.1. Mơ tả bài tốn .............................................................................................21
2.2.2. Đặc tả yêu cầu.............................................................................................21
2.2.3. Xác định tác nhân của hệ thống..................................................................22
2.2.4. Các chức năng chính của hệ thống .............................................................23
3.2.5. Xác định các UC .........................................................................................24
2.2.6. Đặc tả UC....................................................................................................24
2.2.7. Biểu đồ UC .................................................................................................29
2.2.8. Biểu đồ tuần tự............................................................................................32
2.2.9. Biểu đồ lớp..................................................................................................36
2.2.10. Biểu đồ trạng thái......................................................................................37
Chương 3 : Chương trình thử nghiệm ..................................................................39
3.1. Cài đặt hệ thống:...............................................................................................39
3.2. Các module được cài đặt trong hệ thống ..........................................................39
3.3. Một số giao diện của chương trình ...................................................................39
Phần 3. KẾT LUẬN ....................................................................................................43

1. Kết luận ..................................................................................................................43
1.1. Kết quả :............................................................................................................43
1.2. Hạn chế : ........................................................................................................43
2. Hướng phát triển của đề tài...............................................................................43
PHẦN 4. TÀI LIỆU THAM KHẢO...........................................................................44
NHẬN XÉT CỦA GIẢNG VIÊN...............................................................................45

3

4

DANH MỤC HÌNH ẢNH

Hình 1.1 Các thành phần của angularjs............................................................................... 4
Hình 1.2 Responsive angular material ................................................................................ 7
Hình 1.3 Mơ tả angular material .......................................................................................... 8
Hình 1.4 Khơng gian 3 chiều angular material ................................................................... 8
Hình 1.5 Giao diện fiddler .................................................................................................. 12
Hình 1.6 Get dữ liệu trong Fiddler .................................................................................... 12
Hình 1.7 Giao diện khi nhập vào Execute ........................................................................ 13
Hình 1.8 Hiển thị kết quả dạng json .................................................................................. 13
Hình 1.9 Giao diện khi post dữ liệu .................................................................................. 14
Hình 1.10 Giao diện FUT với Fiddler............................................................................... 15
Hình 1.11 Khi dữ liệu cập nhập lên server ....................................................................... 15
Hình 1.12 Delete dữ liệu với Fiddler................................................................................. 16
Hình 1.13 Thử lại dữ liệu sau khi xóa............................................................................... 17
Hình 2.1 Biểu đồ UC tổng quát.......................................................................................... 29
Hình 2.2 Biểu đồ UC nhân viên......................................................................................... 29
Hình 2.3 Biểu đồ UC quản lý sản phẩm ........................................................................... 30
Hình 2.4 Biểu đồ UC nhà cung cấp ................................................................................... 30

Hình 2.5 Biểu đồ UC nhà sản xuất .................................................................................... 30
Hình 2.6 Biểu đồ UC quản lý khách hàng ........................................................................ 31
Hình 2.7 Biểu đồ UC tiếp nhận sản phẩm ........................................................................ 31
Hình 2.8 Biểu đồ UC bàn giao sản phẩm ......................................................................... 31
Hình 2.9 Biểu đồ UC cơng việc ......................................................................................... 32
Hình 2.10 Biểu đồ tuần tự lập phiếu.................................................................................. 32
Hình 2.11 Biểu đồ tuần tự quản lý sản phẩm ................................................................... 33
Hình 2.12 Biểu đồ tuần tự quản lý khách hàng................................................................ 33
Hình 2.13 Biểu đồ tuần tự quản lý nhà cung cấp............................................................. 34
Hình 2.14 Biểu đồ tuần tự quản lý nhà sản xuất .............................................................. 34
Hình 2.15 Biểu đồ tuần tự quản lý nhân viên................................................................... 35
Hình 2.16 Biểu đồ tuần tự quản lý lỗi ............................................................................... 35
Hình 3.17 Biểu đồ tuần tự quản lý cơng việc................................................................... 36
Hình 2.18 Biểu đồ lớp ......................................................................................................... 36
Hình 2.19 Biểu đồ trạng thái nhân viên ............................................................................ 37
Hình 2.20 Biểu đồtrạng thái tài khoản .............................................................................. 37
Hình 2.21 Biểu đồ trạng thái thanh tốn ........................................................................... 37
Hình 2.22 Biểu đồ trạng thái sản phẩm............................................................................. 38
Hình 2.23 Giao diện main di động .................................................................................... 39
Hình 2.24 Giao diện chính máy tính ................................................................................. 40
Hình 2.25 Giao diện quản lý phiếu.................................................................................... 40
Hình 2.26 Giao diện trang sản phẩm................................................................................. 41
Hình 2.27 Giao diện trang thêm sản phẩm ....................................................................... 41

5

DANH MỤC BẢNG
Bảng 1 : Chức năng tiếp nhận sản phẩm...........................................................................23
Bảng 2 : Chức năng bảo hành thiết bị ...............................................................................23
Bảng 3 : Chức năng bàn giao sản phẩm............................................................................23

Bảng 4 : Chức năng thống kê .............................................................................................23
Bảng 5 : Các UC hệ thống ..................................................................................................24

6

CÁC TỪ VIẾT TẮT

Từ viết tắt Từ viết đầy đủ
CNTT Công nghệ thông tin
CSDL Cơ sở dữ liệu
HTML HyperText Markup Language
PHP Hypertext Preprocessor
HTTP HyperText Transfer Protocol
DOM Document Object Model
XML eXtensible Markup Language
WWW World Wide Web
UC User Case
MVC
Model – View – Controller

7

LỜI CẢM ƠN
Em xin chân thành cảm ơn q thầy cơ đã giúp đỡ em thực hiện đề tài này. Đặc
biệt cô Trần Thị Diệu Hiền đã tận tình hướng dẫn, giúp đỡ, chỉ bảo em trong suốt
thời gian thực hiện khóa luận tốt nghiệp.
Đồng thời em cũng xin trân trọng cảm ơn những tình cảm q báu mà các thầy
cơ trong trường Đại Học Quảng Nam đã truyền đạt cho em, những kinh nghiệm, kỹ
thuật và cách thức trong việc xây dựng đề tài này.
Và cuối cùng tôi cũng xin được gửi lời cảm ơn đến gia đình đã luôn luôn động

viên, ủng hộ, những người bạn đã gắn bó, chia sẻ rất nhiều kinh nghiệm và những
kiến thức và nhất là trong thời gian thực hiện đề tài, để đề tài có thể hồn thành một
cách thành công nhất.

Tuy nhiên, do thời gian có hạn nên em khơng thể phát huy hết những ý tưởng,
khả năng hổ trợ của ngôn ngữ và kỹ thuật lập trình vào đề tài. Trong quá trình xây
dựng phần mềm, khơng thể tránh khỏi những sai xót, mong nhận được sự đóng góp
và cảm thơng của q thầy cơ và các bạn.

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

8

Phần 1. MỞ ĐẦU

1.1. Lý do chọn đề tài

Trong thời đại công nghệ thông tin phát triển nhanh chóng, thâm nhập sâu vào

tất cả các ngành nghề cơng việc trong xã hội, thì việc tin học hóa các cơng việc,

nghiệp vụ là điều tất yếu. Kể cả trong lĩnh vực bảo hành sản phẩm, thiết bị cũng cần

sự trợ giúp của công nghệ thông tin.

Việc xây dựng các phần mềm bảo hành lại đặt ra một vấn đề lớn là môi trường

xây dựng ứng dụng là Window hay là trên nền Web.

Môi trường Window thì chạy ứng dụng trên máy tính cá nhân, mỗi máy sẽ

được cài riêng một phần mềm. Người dùng chỉ làm việc với máy cài phần mềm. Cịn

mơi trường web thì ứng dụng được cài trên máy chủ Web, người dùng có thể truy cập

ứng dụng thơng qua trình duyệt web ở bất cứ đâu và bất cứ máy tính nào có kết nối

internet. Do tính thuận tiện và dể dàng cho người dùng nên em quyết định lựa chọn

môi trường Web là môi trường phát triển phần mềm của mình.

Trong những năm trở lại đây với sự ra đời của nhiều Framework giúp chúng ta

xây dựng các phần mềm chạy trên web chuyên nghiệp hơn, trong đó phải kể đến

AngularJS là thư viện javaScript mạnh mẽ, nó được sử dụng trong các dự án ứng

dụng trang đơn (SPA). AngularJS kế thừa HTML DOM với các thuộc tính bổ sung

và làm cho các thao tác người dùng trở nên linh hoạt hơn.

Với sự phát triển của công nghệ web kéo theo đó là sự phát triển của nhiều css

framework, nổi bật là Angular Material, hướng đến những đường nét đơn giản, sử

dụng nhiều mảng màu nổi bật, mang lại trải nghiệm mới mẻ hơn, thú vị hơn giống

với đời thực hơn.

Với lý do đó em đã chọn đề tài “Nghiên cứu AngularJS, Angular Material

và ứng dụng để xây dựng website quản lý bảo hành thiết bị tin học” làm đề tài
khóa luận của mình.

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

- Đề cập, phân tích và tìm hiểu AngularJS và Angular Material
- Giúp cho bản thân có thể hiểu rõ hơn, sâu hơn về các ngôn ngữ trên viết ứng
dụng trên web của phần mềm bảo hành thiết bị tin học, để nâng cao trình độ lập trình,
từ đó nâng cao khả năng tự học của mình.
1.3. Đối tượng và phạm vi nghiên cứu
- Nghiên cứu về AngularJS và Angular Material.
- Nghiên cứu cách tạo nên 1 ứng dụng web bằng AngularJS và Angular material.
1.4. Phương pháp nghiên cứu
- Tìm kiếm tài liệu liên quan đến AngularJS và Iconic Framwork. ở trường, thư
viện, Internet, …

1

- Đọc và nghiên cứu tài liệu, chọn những công cụ cần thiết cho việc xây dựng phần
mềm.

- Khảo sát, phỏng vấn để tìm tư liệu liên quan đến chương trình.
- Phân tích và thiết kế hệ thống.
1.5. Lịch sử nghiên cứu
- Nội dung đã được nhiều lập trình viên nghiên cứu, tuy nhiên để nâng cao kiến
thức của bản thân đồng thời biết thêm những công cụ xây dựng ứng dụng Web tôi lựa
chọn đề tài và đi sâu tìm hiểu về AngularJS và Angular Masterial để tạo ra một ứng
dụng web.
1.6. Đóng góp của đề tài
- Xây dựng được một tài liệu tương đối hoàn chỉnh về Angual JS, Angular

Material, Http Method và các vấn đề liên quan để mọi người có thể tham khảo và học
tập.
- Xây dựng ứng dụng bảo hành thiết bị tin học trên web có ứng dụng thực tiễn.
1.7. Cấu trúc đề tài
Đề tài này sẽ phân làm 3 chương:

Chương 1: Trình bày về AngularJS, Angular material và các thành phần liên
quan.

Chương 2: Bài tốn ứng dụng: vận dụng những ngơn ngữ và phương thức trên
viết phần mềm bảo hành thiết bị tin học trên web.

Chương 3: Chương trình thử nghiệm.

2

Phần 2. NỘI DUNG NGHIÊN CỨU
Chương 1: TỔNG QUAN VỀ ANGULARJS, ANGULAR MATERIAL
1.1. AngularJS
1.1.1. Giới thiệu về AngularJS
A. Lịch Sử của AngularJS

AngularJS là một dự án mã nguồn mở được phát triển đầu tiên bởi Miško
Hevery một nhân viên của Google. Hevery bắt đầu nghiên cứu và phát triển dự án
vào năm 2009 và phiên bản 1.0 được cho ra mắt vào năm 2012.

Do sự hữu ích của dự án này nên Google quyết định là cơng ty chính thức đứng
đằng sau hỗ trợ sự phát triển của AngularJS. Phiên bản hiện tại của AngularJS vào
thời điểm của bài viết này được công bố trên trang www.angularjs.org là phiên
bản v.4.0.

B. AngularJS là gì

- AngularJS là một Framework phát triển mạnh mẽ dựa trên JavaScript để tạo
các ứng dụng RICH Internet Application (RIA).

- AngularJS cung cấp cho lập trình viên những tùy chọn để viết các ứng dụng
client-side trong mơ hình MVC (Model View Controller) một cách rõ ràng.

- Các ứng dụng được viết bởi AngularJS tương thích với nhiều phiên bản trình
duyệt web. AngularJS tự động xử lý mã JavaScript để phù hợp với mỗi trình
duyệt.

- AngularJS có mã nguồn mở, miễn phí hồn toàn, được sử dụng bởi hàng
ngàn lập trình viên trên thế giới. Nó hoạt động dưới giấy phép Apache License
version 2.0.

AngularJS không chỉ đơn giản là một thư viện mà nó cịn là một framework.
Khác với các thư viện Javascript như jQuery, AngularJS đưa ra hướng dẫn cụ thể
hơn cách cấu trúc mã lệnh HTML và Javascript. Ví dụ khi sử dụng AngularJS, mã
lệnh HTML thường được viết theo cấu trúc như sau:
<div ng-app=””>

<input type=”text” ng-model=”name”>

</div>

3

Ở ví dụ trên chúng ta thấy trong một số thẻ HTML có các thuộc tính lạ với tiền
tố ng như ng-app, ng-model và ng-name. Trong AngularJS chúng được gọi là các

chỉ dẫn hay directives. Các chỉ dẫn này có ý nghĩa như sau:

- Chỉ dẫn ng-app=”” được dùng để giúp AngularJS đánh dấu ứng dụng sẽ được
bắt đầu từ bằng nào trong HTML.

- Chỉ dẫn ng-model =”name” được dùng để kết nối giá trị của trường
<input> với giá trị của biến name trong ứng dụng AngularJS.

- Chỉ dẫn ng-bind=”name” dùng để gắn giá trị của biến name ở trên trở thành
giá trị <innerHTML> của thẻ

.
C. Hoạt động của AngularJS

Sau khi AngularJS được nhúng vào trang nó sẽ phân tích mã lệnh HTML.
Trong mã lệnh HTML này thẻ <div> với thuộc tính ng-app=”” sẽ được sử dụng
để bắt đầu khởi tạo một ứng dụng AnglarJS.

Tiếp theo thẻ <input> với thuộc tính ng-model =”name sẽ tạo ra biến
name trong ứng dụng AngularJS trên và giá trị của biến này luôn bằng với giá trị
của trường <input>. Cuối cùng thẻ

thứ 2 với thuộc tính ng-bind=”name” được
dùng mỗi khi ứng dụng phát hiện ra có sự thay đổi trong giá trị của biến name và
nó sẽ gắn giá trị này trở thành nội dung HTML đặt bên trong thẻ

thứ 2 này.
1.1.2. Tính năng và các thành phần trong AngularJS
Dưới đây là các tính năng cốt lõi của AngularJS:

Hình 1.1 Các thành phần của angularjs
4

- Data-binding: Nó tự động đồng bộ hóa dữ liệu giữa thành
phần model và view.

- Scope: Là những đối tượng hướng đến model, nó hoạt động như là cầu nối
giữa controller và view.

- Controller: Đây là những tính năng của AngularJS mà được giới hạn tới
một scope cụ thể.

- Service: AngularJS hoạt động với một vài dịch vụ (service) có sẵn , ví
dụ $http để tạo XMLHttpRequests. Nó là các singleton object mà được khởi tạo
duy nhất một lần trong ứng dụng.

- Filter: Nó lựa chọn (hay là lọc) các tập con từ tập item trong các mảng và trả
về các mảng mới.

- Directive: Directive là các marker trong các phần tử DOM (như các phần tử,
thuộc tính, css và nhiều hơn thế). Nó có thể dùng để tạo các thẻ HTML riêng phục
vụ những mục đích riêng. AngularJS có những directive có sẵn như
ngBind,ngModel…

- Template: Là các rendered view với các thơng tin từ controller và model. Nó
có thể được sử dụng trong các file riêng rẽ (ví dụ như index.jsp) hoặc nhiều view
với một trang sử dụng "partials".

- Routing: Là khái niệm của sự chuyển dịch qua lại các view.

- Model View Controller: MVC là một mơ hình thiết kế để phân chia các ứng
dụng thành nhiều phần khác nhau (gọi là Model, View và Controller), một phần
sử dụng với một nhiệm vụ nhất định. AngularJS không triển khai MVC theo cách
truyền thống, mà gắn liền hơn với Model-View-ViewModel. Nhóm phát triển
AngularJS đã đặt tên vui cho mơ hình này là Model View Whatever.

- Deep Linking: Cho phép bạn mã hóa trạng thái các ứng dụng trên địa chỉ
URL để nó có thể được bookmark. Các ứng dụng có thể được phục hồi lại từ các
địa chỉ URL với cùng một trạng thái.

- Dependency Injection: AngularJS có sẵn một hệ thống con dependency
injection để giúp các lập trình viên tạo ra các ứng dụng dễ phát triển, dễ hiểu và
kiểm tra.

- Các thành phần của AngularJS

AngularJS framework có thể được chia thành ba phần chính sau:

+ ng-app: directive này định nghĩa và liên kết một ứng dụng AngularJS tới
HTML.

5

+ ng-model: directive này gắn kết giá trị của dữ liệu ứng dụng AngularJS đến
các điều khiển đầu vào HTML.

+ ng-bind: directive này gắn kết dữ liệu ứng dụng AngularJS đến các thẻ
HTML.

1.1.3. Ưu nhược điểm của AngularJS

A. Ưu điểm của AngularJS

- AngularJS cung cấp khả năng tạo ra các Single Page Application một cách rất
rõ ràng và dễ dàng để duy trì.

- AngularJS cung cấp khả năng Data binding tới HTML do đó giúp người dùng
cảm giác linh hoạt, thân thiện.

- AngularJS code dễ dàng khi unit test.

- AngularJS sử dụng dependency injection.

- AngularJS cung cấp khả năng tái sử dụng các component (thành phần).

- Với AngularJS, lập trình viên sẽ viết ít code hơn, với nhiều chức năng hơn.

-Với AngularJS, view là thành phần trong trang HTML thuần, trong khi
controller được viết bởi JavaScript với quá trình xử lý nghiệp vụ.

- Và trên tất cả, ứng dụng AngularJS có thể chạy trên hầu hết các trình duyệt
web, trên các nền tảng Android và IOs.

B. Nhược điểm của AngularJS
Mặc dù AngularJS có thể kể đến rất nhiều các ưu điểm, nhưng đến thời điểm

này, nó vẫn có một số điểm yếu sau:

- Khơng an tồn: Là một JavaScript framework, ứng dụng được viết bởi
AngularJS khơng an tồn. Phải có các tính năng bảo mật và xác thực phía server
sẽ giúp ứng dụng trở nên an toàn hơn.

- Nếu người sử dụng ứng dụng của bạn vơ hiệu hóa JavaScript thì họ chỉ nhìn
được trang cơ bản, khơng thấy gì thêm.

1.2.Angular Material

1.2.1. Giới thiệu về Angular Material

Material Design là một phong cách thiết kế mới được Google giới thiệu vào
năm 2014

Phong cách thiết kế Material nhắm đến những đường nét đơn giản, sử dụng
nhiều mảng màu đậm nổi bật, các đối tượng đồ họa trong giao diện dường như:

6

“trơi nổi” lên. Ngồi ra, nó cịn bao gồm cả những hiệu ứng chuyển động tự
nhiên khi các nút, menu hiện diện trên màn hình. Tất cả đều nhằm mang lại
cho người dùng trải nghiệm mới mẻ hơn, thú vị hơn và gần giống đời thực hơn.

Hình 1.2 Responsive angular material
A . Các đặc điểm của angular material :

- Sử dụng các màu nổi bật, thường có một mảng màu chủ đạo nằm ở cạnh trên
ứng dụng.

- Các biểu tượng phẳng, đơn giản nhưng dễ hiểu.
- Một số ứng dụng sẽ có một nút trịn to nằm ở góc dưới bên phải, thường có
chức năng tạo mới.
- Giao diện phẳng, ít hoặc khơng có hiệu ứng chuyển màu, có hoặc khơng có
hiệu ứng đổ bóng đen.
- Menu, nút nhấn, chữ viết… có nhiều khoảng cách trắng nên trơng thống
đãng.
- Có các hiệu ứng chuyển động tự nhiên, dễ hiểu, có thể gợi ý cho một tính
năng nào đó.

B . Ngun tắc:
Material đang dần phổ biến để trở thành một xu hướng, một tiêu chuẩn mới
trong thiết kế UI.Trong thời gian qua, chúng tôi nhận được khá nhiều lời yêu cầu về
việc cung cấp Material resources chất lượng.
Tuy nhiên, resource sẽ không thể được sử dụng hiệu quả nếu không nắm được
những ngun tắc thiết kế mới. Chính vì vậy, để đáp ứng yêu cầu của mọi người,

7

loạt bài viết này sẽ song song cung cấp những nguyên tắc đồng thời tổng hợp
những resources tốt nhất hiện tại.
Anguar material có các yếu tố căn bản :

- Khơng gian: khơng gian dưới lớp kính màn hình được mơ phỏng như một
khơng gian 3 chiều Oxyz với chiều sâu là trục Oz .

- Ánh sáng: là yếu tố môi trường được sử dụng nhằm thể hiện tính 3 chiều của
khơng gian. Hệ quả của ánh sáng, hiệu ứng bóng đổ, sẽ phân định vị trí các lớp
Material trong khơng gian theo trục Oz.
Có 2 loại nguồn sáng được kết hợp:

Nguồn sáng chiếu trực tiếp: nguồn sáng này rất quan trọng. Giống như nguồn
sáng từ đèn pin, hiệu ứng của nó sẽ là Drop shadow. Nguồn sáng này cùng chiều
nhưng có hướng nghiêng một chút so với trục Oz.

Ánh sáng mơi trường: ánh sáng của tồn khơng gian, nguồn sáng không rõ
hướng. Hệ quả ở đây sẽ là một viền bóng nhẹ xung quanh Material.

Material Design kết hợp 2 nguồn sáng này để tạo nên một hiệu ứng bóng tổng
hợp mơ phỏng thế giới trực quan.

Hình 1.3 Mơ tả angular material
Material Là những mặt phẳng có độ dày đồng nhất 1dp, Material nằm song
song với mặt phẳng Oxy.

Hình 1.4 Không gian 3 chiều angular material

8

Các mặt phẳng Material sắp xếp chồng lên nhau theo trục Oz. Thơng qua việc
thay đổi kích thước của bóng, bạn sẽ dễ dàng mơ tả vị trí tương đối của mỗi lớp so
với các lớp khác.

Trên mỗi Material là nội dung được thiết kế theo nguyên tắc Flat Design.

Material là một “vật chất vô định hình”, nó có thể thay đổi hình dáng kích
thước,có thể tách thành nhiều phần, cũng có thể gộp lại thành một.

Material có thể xuất hiện và biến mất từ bất kỳ đâu trong không gian. Điều này
không thuận với cơ chế trong vật lý nhưng tạm thời chúng ta có thể coi tính chất
này gần giống với tính chất Material có thể thay đổi kích thước.

Material có thể di chuyển song song với mặt phẳng Oxy. Khi người dùng tương
tác với Material, nó sẽ di chuyển dọc theo trục Oz (nâng lên, hạ xuống).

1.2.2. Ưu nhược điểm của Angular Material

Google muốn mang lại trải nghiệm thống nhất cho người dùng trong hệ sinh thái
của hãng. Người dùng cuối như chúng ta sẽ có cảm giác quen thuộc hơn, dành ít thời
gian để học hỏi hơn khi sử dụng cùng một app nhưng trên nhiều máy khác nhau. Các

lập trình viên thì có thể đảm bảo rằng cách người dùng trải nghiệm app của họ là như
nhau khơng quan trọng thiết bị đang chạy là gì.

Material cũng giống như một hơi thở mới cho nền tảng 7 năm tuổi này và tránh đi
sự nhàm chán mà chúng ta đã phải nhìn thấy trong vịng nhiều năm liên tục. Nhờ có
các màu sắc vui vẻ và sinh động hơn, hiệu ứng chuyển động mượt mà hơn.

1.3. Các thành phần liên quan

1.3.1. Web service

Web service (Web Service) được coi là một công nghệ mang đến cuộc cách
mạng trong cách thức hoạt động của các dịch vụ B2B (Business to Business) và
B2C (Business to Customer). Giá trị cơ bản của Web service dựa trên việc cung
cấp các phương thức theo chuẩn trong việc truy nhập đối với hệ thống đóng gói và
hệ thống kế thừa.

A . Giới thiệu về Web service
Theo định nghĩa của W3C (World Wide Web Consortium), Web service là một

hệ thống phần mềm được thiết kế để hỗ trợ khả năng tương tác giữa các ứng dụng
trên các máy tính khác nhau thơng qua mạng Internet, giao diện chung và sự gắn
kết của nó được mơ tả bằng XML.

Web service là tài nguyên phần mềm có thể xác định bằng địa chỉ URL, thực
hiện các chức năng và đưa ra các thông tin người dùng yêu cầu.

9

Một Web service được tạo nên bằng cách lấy các chức năng và đóng gói chúng

sao cho các ứng dụng khác dễ dàng nhìn thấy và có thể truy cập đến những dịch vụ
mà nó thực hiện, đồng thời có thể u cầu thơng tin từ Web service khác.

Nó bao gồm các mơ đun độc lập cho hoạt động của khách hàng và doanh
nghiệp và bản thân nó được thực thi trên server.

Trước hết, có thể nói rằng ứng dụng cơ bản của Web service là tích hợp các hệ
thống và là một trong những hoạt động chính khi phát triển hệ thống.

Trong hệ thống này, các ứng dụng cần được tích hợp với cơ sở dữ liệu (CSDL)
và các ứng dụng khác, người sử dụng sẽ giao tiếp với CSDL để tiến hành phân tích
và lấy dữ liệu.

Trong thời gian gần đây, việc phát triển mạnh mẽ của thương mại điện tử và
B2B cũng địi hỏi các hệ thống phải có khả năng tích hợp với CSDL của các đối
tác.

B. Đặc điểm của Web service

- Web service cho phép client và server tương tác được với nhau ngay cả trong
những mơi trường khác nhau. Ví dụ, đặt Web server cho ứng dụng trên một máy
chủ chạy hệ điều hành Linux trong khi người dùng sử dụng máy tính chạy hệ điều
hành Windows, ứng dụng vẫn có thể chạy và xử lý bình thường mà khơng cần
thêm u cầu đặc biệt để tương thích giữa hai hệ điều hành này.

- Phần lớn kĩ thuật của Web service được xây dựng dựa trên mã nguồn mở và
được phát triển từ các chuẩn đã được công nhận.

- Một Web service bao gồm có nhiều mơ-đun và có thể cơng bố lên mạng
Internet.

- Là sự kết hợp của việc phát triển theo hướng từng thành phần với những lĩnh
vực cụ thể và cơ sở hạ tầng Web, đưa ra những lợi ích cho cả doanh nghiệp, khách
hàng, những nhà cung cấp khác và cả những cá nhân thông qua mạng Internet.

- Một ứng dụng khi được triển khai sẽ hoạt động theo mơ hình client-server. Nó
có thể được triển khai bởi một phần mềm ứng dụng phía server ví dụ như PHP,
Oracle Application server hay Microsoft.Net…

- Ngày nay Web service đang rất phát triển, những lĩnh vực trong cuộc sống có
thể áp dụng và tích hợp Web service là khá rộng lớn như dịch vụ chọn lọc và phân
loại tin tức (hệ thống thư viện có kết nối đến web portal để tìm kiếm các thơng tin
cần thiết); ứng dụng cho các dịch vụ du lịch (cung cấp giá vé, thông tin về địa
điểm…), các đại lý bán hàng qua mạng, thông tin thương mại như giá cả, tỷ giá
hối đoái, đấu giá qua mạng…hay dịch vụ giao dịch trực tuyến (cho cả B2B và
B2C) như đặt vé máy bay, thông tin thuê xe…

10

- Các ứng dụng có tích hợp Web service đã khơng cịn là xa lạ, đặc biệt trong
điều kiện thương mại điện tử đang bùng nổ và phát triển không ngừng cùng với sự
lớn mạnh của Internet. Bất kì một lĩnh vực nào trong cuộc sống cũng có thể tích
hợp với Web service, đây là cách thức kinh doanh và làm việc có hiệu quả bởi thời
đại ngày nay là thời đại của truyền thông và trao đổi thông tin qua mạng. Do vậy,
việc phát triển và tích hợp các ứng dụng với Web service đang được quan tâm phát
triển là điều hoàn toàn dễ hiểu.

C. Ưu và nhược điểm

- Ưu điểm:

Web service cung cấp khả năng hoạt động rộng lớn với các ứng dụng phần
mềm khác nhau chạy trên những nền tảng khác nhau.

Sử dụng các giao thức và chuẩn mở. Giao thức và định dạng dữ liệu dựa trên
văn bản (text), giúp các lập trình viên dễ dàng hiểu được.

Nâng cao khả năng tái sử dụng.

Thúc đẩy đầu tư các hệ thống phần mềm đã tồn tại bằng cách cho phép các tiến
trình/chức năng nghiệp vụ đóng gói trong giao diện Web service.

Tạo mối quan hệ tương tác lẫn nhau và mềm dẻo giữa các thành phần trong hệ
thống, dễ dàng cho việc phát triển các ứng dụng phân tán.

Thúc đẩy hệ thống tích hợp, giảm sự phức tạp của hệ thống, hạ giá thành hoạt
động, phát triển hệ thống nhanh và tương tác hiệu quả với hệ thống của các doanh
nghiệp khác.

- Nhược điểm:

Những thiệt hại lớn sẽ xảy ra vào khoảng thời gian chết của Web service, giao
diện không thay đổi, có thể lỗi nếu một máy khách khơng được nâng cấp, thiếu các
giao thức cho việc vận hành.

Có quá nhiều chuẩn cho Web service khiến người dùng khó nắm bắt.
Phải quan tâm nhiều hơn đến vấn đề an toàn và bảo mật.

1.3.2.TelerikFidder

Đây là một tool của Telerik dùng để ghi lại các dữ liệu vào ra giữa máy tính và
internet. Bên cạnh việc xem được các dữ liệu,bạn cịn có thể thay đổi các thơng tin
vào ra giữa máy tính một cách rất dễ dàng.

Fiddler hỗ trợ rất nhiều loại browser khác nhau từ Internet Explorer, Google
Chrome cho đến Safari, Firefox, Opera…

11

Để sử dụng đầu tiên bạn download tại đường dẫn sau
sau khi cài đặt bạn có thể chạy và bắt các
request/response vào ra giữa máy tính .

Hình 1.5 Giao diện fiddler
A. GET dữ liệu bằng Fiddler :

Với các GET service thì ngồi cách test sử dụng browser như bài trước thì chúng
ta cũng có thể sử dụng Fiddler. VD nếu muốn test api trả về danh sách khách hàng
chúng ta chỉ cần mở solution, chạy ứng dụng lên rồi từ browser navigate đến đường
dẫn http://localhost:33753/api/Customers.

Sau đó ta quay lại Fiddler sẽ thấy 1 request đã được capture. Doucle-click request
này chúng ta sẽ xem được chi tiết thông tin Request cũng như Response dạng JSON
như

Hình 1.6 Get dữ liệu trong Fiddler
- Bước 1: nhập vào URL http://localhost:33753/api/Customers/ALFKI

12