Xây dựng website đặt pizza online

Về bản chất, Reactive Programming là phương pháp lập trình cho phép phát triển các ứng dụng được cấu trúc xung quanh các luồng dữ liệu không đồng bộ.. Mã trong ứng dụng phản ứng tạo ra l

TRƯỜNG ĐẠI HỌC SƯ PHẠM – ĐẠI HỌC ĐÀ NẴNG

KHOA TIN HỌC

BÁO CÁO

ĐỒ ÁN TỐT NGHIỆP

TÊN ĐỀ TÀI XÂY DỰNG WEBSITE ĐẶT PIZZA ONLINE

Giảng viên hướng dẫn : TS PHẠM ANH PHƯƠNG

Đà Nẵng, 04/2018

website bán hàng trên mạng sẽ giúp ta làm được điều đó Chính vì vậy các công

nghệ mã nguồn mở trở nên được chú ý vì các tính năng của nó Giá thành rẻ và được

hỗ trợ rất nhiều trên mạng sẽ giúp ta nhanh chóng xây dựng các website bán hàng thân thiện và dễ sử dụng với người dùng

Chính vì vậy trong đồ án này em đã chọn đề tài về: “Xây dựng website đặt pizza online” Em chọn đề tài này cũng vì lí do nhằm củng cố được những kiến thức mà 3 năm qua tôi đã tích lũy được khi ngồi trên ghế nhà trường và từ thực tế mà tôi đã trải nghiệm Tuy bản thân đã rất cố gắng tìm hiểu tài liệu từ nhiều nguồn thông tin khác nhau như là giáo trình, sách, báo, Cũng như vốn hiểu biết của mình về đề tài những nội dung đề tài không sao tránh khỏi thiếu sót Kính mong được sự đóng góp ý kiến của quý thầy cô để tôi có thể hoàn thiện hơn về báo cáo và là cơ sở vững chắc

để sau này ra trường làm việc

Xin trân trọng cảm ơn!

Đà Nẵng, ngày 25 tháng 04 năm 2018 Sinh viên thực hiện

Huỳnh Văn Cao Tín

LỜI CAM ĐOAN

Tôi xin cam đoan:

1 Những nội dung trong báo cáo này là do tôi thực hiện dưới sự hướng dẫn trực tiếp của TS Phạm Anh Phương

2 Mọi tham khảo dùng trong báo cáo này đều được trích dẫn rõ ràng tên tác giả, tên công trình, thời gian, địa điểm công bố

3 Mọi sao chép không hợp lệ, vi phạm quy chế đào tạo, hay gian trá, tôi xin chịu hoàn toàn trách nhiệm

Sinh viên thực hiện,

Huỳnh Văn Cao Tín

NHẬN XÉT CỦA CÁN BỘ HƯỚNG DẪN

Đà Nẵng, ngày tháng năm 2018

Cán bộ hướng dẫn

NHẬN XÉT CỦA HỘI ĐỒNG PHẢN BIỆN

Đà Nẵng, ngày tháng năm 2018

Hội đồng phản biện

MỤC LỤC

DANH MỤC HÌNH VẼ viii

MỞ ĐẦU 1

1 Lý do chọn đề tài 1

2 Mục tiêu đề tài 1

3 Nhiệm vụ đề tài 1

1 4 Đối tượng nghiên cứu 2

5 Phạm vi nghiên cứu 2

6 Phương pháp nghiên cứu 2

7 Bố cục đề tài 2

CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 4

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

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

1.2.1 Khái niệm về Reactive Programming 4

1.2.2 Khái niệm về TypeScript 6

1.2.3 Functional Programming là gì? 8

1.3 Nền tảng công nghệ 10

1.3.1 Giới thiệu về Angular 10

1.3.2 Amazon Web Services là gì? 15

1.3.3 Giới thiệu về visual studio code 17

1.3.4 Giới thiệu về Dynamodb 20

1.3.5 Giới thiệu về Amazon S3 20

1.3.6 Giới thiệu về AWS Lambda 21

1.3.7 Giới thiệu về Amazon API Gateway 22

CHƯƠNG 2: PHÂN TÍCH THIẾT KẾ 24

2.1 Yêu cầu chức năng 24

2.1.1 Chức năng public 24

2.1.2 Chức năng trong admin 24

2.2 Yêu cầu phi chức năng 24

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

2.3.1 Sơ đồ case sử dụng (Usecase diagram) 25

2.3.1.1 Case sử dụng user 25

2.3.1.2 Case sử dụng cho admin 26

2.3.2 Đặc tả Use-case 26

2.3.3 Thiết kế cơ sở dữ liệu 28

2.3.4 Cấu trúc bảng và ràng buộc 29

CHƯƠNG 3: TRIỂN KHAI VÀ KẾT QUẢ ĐẠT ĐƯỢC 33

3.1 Môi trường triển khai 33

3.2 Kết quả triển khai 33

3.2.1 Giao diện trang chủ 33

3.2.2 Giao diện trang danh sách sản phẩm 34

3.2.3 Giao diện trang chi tiết sản phẩm 34

3.2.4 Giao diện phần bình luận sản phẩm 35

3.2.5 Giao diện trang đặt sản phẩm 36

3.2.6 Giao diện trang đăng nhập 37

3.2.7 Giao diện trang chính của dashboard 37

3.2.8 Giao diện trang quản lý sản phẩm 38

3.2.9 Giao diện trang setting dashboard 38

KẾT LUẬN VÀ KIẾN NGHỊ 39

2 TÀI LIỆU THAM KHẢO 40

DANH MỤC CÁC BẢNG

Bảng 1: Bảng mô tả sử dụng web của khách vãng lai 26

Bảng 2 : Bảng mô tả sử dụng hệ thống của người dùng 27

Bảng 3: Bảng mô tả sử dụng hệ thống của Admin 27

Bảng 5: Bảng User 29

Bảng 6: Bảng Product 30

Bảng 7: Bảng Images 30

Bảng 8: Bảng Price 31

Bảng 9: Bảng Comment 31

Bảng 10: Bảng Categories 31

Bảng 11: Bảng Order detail 32

Bảng 12: Bảng Order Item 32

DANH MỤC HÌNH VẼ

Hình 1: Giới thiệu Visual studio code 18

Hình 3: Case sử dụng cho user 25

Hình 4: Case sử dụng cho admin 26

Hình 8: Sơ đồ cơ sở dữ liệu 29

Hình 9: Giao diện trang chủ 33

Hình 10: Giao diện trang danh sách sản phẩm 34

Hình 11: Giao diện trang chi tiết sản phẩm 34

Hình 12: Giao diện phần bình luận sản phẩm 35

Hình 13: Giao diện trang đặt sản phẩm 37

Hình 14: Giao diện trang đăng nhập 37

Hình 15: Giao diện trang chính của dashboard 37

Hình 16: Giao diện trang quản lý sản phẩm 38

Hình 18: Giao diện trang setting dashboard 38

MỞ ĐẦU

1 Lý do chọn đề tài

Hiện nay, sự phát triển của Công nghệ Thông tin ở nước ta đang bước vào thời

kì mới với việc triển khai rộng rãi các ứng dụng tin học cho các tổchức và xã hội Không ai còn nghi ngờ gì về vai trò của Công nghệ Thông tin trong đời sống, trong khoa học kỹ thuật, kinh doanh, cũng như trong mọi mặt của xã hội, ngay cả đối với một cá nhân

Công nghệ Thông tin đang từng bước đi vào cuộc sống của chúng ta như một người bạn đồng hành, nó có vai trò rất lớn trong sự phát triển của đất nước và trong đời sống của con người

Để đáp ứng nhu cầu ăn uống và giảm chi phí, thời gian đi lại thì viêc đặt thức

ăn và giao hàng tận nơi không còn xa lạ với người dùng Chính vì ưu điểm đó nên

em quyết định xây dựng một Website đặt pizza online

Mong rằng website này có thể giúp người dùng lựa chọn Pizza theo sở thích của mình một cách dễ dàng và thuận tiện nhất

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

➢ Thiết kế một trang web hoàn chỉnh với angular, Amazon web services

➢ Xây dựng website order pizza hoàn chỉnh giúp người dùng thuận tiện trong việc mua sản phẩm

➢ Website cung cấp những tính năng phù hợp với người dùng

3 Nhiệm vụ đề tài

➢ Tìm hiểu các vấn đề được nhiều người quan tâm

➢ Mô hình hóa website

➢ Nghiên cứu và cài đặt môi trường phục vụ xây dựng website

➢ Xây dựng các chức năng cần thiết của website

➢ Xây dựng trang quản lý với đầy đủ chức năng của admin

➢ Kiểm thử và đưa vào sử dụng

1 4 Đối tượng nghiên cứu

➢ Hướng đến người thích ăn pizza

➢ Áp dụng thực hiện cho các khách hàng và nhà hàng

5 Phạm vi nghiên cứu

Thành phố Đà Nẵng

6 Phương pháp nghiên cứu

• Tham khảo và học hỏi cách làm của hệ thống

• Đề xuất các yêu cầu cần thiết để đáp ứng nhu cầu của người dùng

• Nghiên cứu tài liệu liên quan để nâng cao kĩ năng lập trình

• Tìm hiểu, khảo sát các ứng dụng có chức năng tương tự, nghiên cứu và ứng dụng vào đề tài

• Tham khảo cách tổ chức, bố cục của giao diện hướng đến sự đơn giản, thân thiện, dễ sử dụng

• Đề xuất các chức năng cho ứng dụng, tham khảo góp ý của GVHD, từ đó đưa ra các giải pháp hợp lý phù hợp với xu thế phát triển của website

• Ngoài ra sử dụng các phương pháp nghiên cứu khác như nghiên cứu tài liệu, giáo trình hay các tài liệu tham khảo có liên quan đến website cần xây dựng

7 Bố cục đề tài

• Mở đầu

➢ Giới thiệu lý do chọn đề tài, khách thể và đối tượng nghiên cứu trong đề tài, giới hạn phạm vi nghiên cứu của đề tài, nhiệm vụ và phương pháp nghiên cứu của đề tài

• Chương 1: Cơ sở lý thuyết

➢ Nghiên cứu lý thuyết liên quan

• Chương 2: Phân tích thiết kế

➢ Trình bày phân tích thiết kế hệ thống và phân tích cơ sở dữ liệu

• Chương 3: Triển khai và kết quả đạt được

➢ Các kết quả đã đạt được

• Kết luận và kiến nghị

➢ Đánh giá kết quả đã đạt được, hướng phát triển và các kiến nghị nếu có

CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 1.1 Phân tích thiết kế hệ thống

Để xây dựng một website đặt pizza thành công và đạt yêu cầu, cần tiến hành phân tích thiết kế hệ thống website Đây là bước quyết định đến tính thành công, bền vững của dự án với các ưu điểm như:

• Có một cái nhìn đầy đủ, đúng đắn và chính xác về hệ thống thông tin website được xây dựng trong tương lai

• Tránh sai lầm trong thiết kế và cài đặt

• Dễ sửa chữa, bổ sung và phát triển hệ thống website trong quá trình sử dụng

hoặc khi hệ thống website yêu cầu

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

1.2.1 Khái niệm về Reactive Programming

Rất nhiều ứng dụng được xây dựng dựa trên việc có đúng luồng dữ liệu vào ứng dụng tại đúng thời điểm, nhưng điều gì xảy ra nếu những luồng dữ liệu đó không đến khi bạn cần Reactive Programming là một cách để giải quyết vấn đề này

Về bản chất, Reactive Programming là phương pháp lập trình cho phép phát triển các ứng dụng được cấu trúc xung quanh các luồng dữ liệu không đồng bộ Điều này được thực hiện để cải thiện trải nghiệm người dùng

Reactive Programming được thực hiện để làm cho các ứng dụng phản ứng nhanh hơn Bạn sẽ không muốn ứng dụng đóng băng để chờ một luồng dữ liệu xuất hiện trực tuyến

Các sự kiện, tin nhắn, cuộc gọi và thậm chí cả các lỗi sẽ được thực hiện bởi các luồng dữ liệu Khi các luồng dữ liệu này xuất hiện, Reactive Programming cho

phép ứng dụng phản ứng với chúng bằng cách sử dụng hộp công cụ để lọc, tạo, chuyển đổi và kết nối bất kỳ luồng nào trong số đó

Mã trong ứng dụng phản ứng tạo ra luồng dữ liệu của bất kỳ thứ gì và từ bất kỳ thứ gì, chẳng hạn như yêu cầu HTTP, thư, thông báo, thay đổi đối với biến, sự kiện

bộ nhớ đệm, số đo cảm biến và nhấp chuột khiến cho ứng dụng trở nên không đồng

bộ về bản chất

Reactive Programming có thể chuyển đổi hầu hết mọi thứ thành luồng để quản

lý không đồng bộ Nó cũng làm cho việc xử lý lỗi được thực hiện dễ dàng hơn,

đồng thời giúp cho mã linh hoạt hơn, dễ đọc hơn, có thể hỗ trợ và dễ viết hơn Trừu

tượng hóa (abstraction): trong phương pháp hướng đối tượng, các thực thể phần

mềm được mô hình hóa dưới dạng các đối tượng Các đối tượng này được trừu tượng hóa ở mức cao hơn dựa trên thuộc tính và phương thức mô tả đối tượng để tạo thành các lớp Các lớp cũng sẽ được trừu tượng hóa ở mức cao hơn nữa để tạo thành một sơ đồ các lớp được kế thừa lẫn nhau Trong phương pháp hướng đối

tượng có thể tồn tại những lớp không có đối tượng tương ứng, gọi là lớp trừu tượng

Như vậy, nguyên tắc cơ bản để xây dựng các khái niệm trong hướng đối tượng là

sự trừu tượng hóa theo các mức độ khác nhau

• Bốn nguyên tắc để tuân thủ khi tạo các ứng dụng phản ứng

Đầu tiên là đáp ứng Nó cần phải nhanh chóng phản ứng với tất cả người dùng Thứ hai là linh hoạt Điều này có nghĩa nó phải áp dụng các nguyên tắc thiết kế

và kiến trúc phù hợp để đảm bảo đáp ứng trong mọi điều kiện

Thứ ba là có thể mở rộng Nó cần dễ dàng nâng cấp theo yêu cầu để đảm bảo đáp ứng trong điều kiện tải trọng lớn

Cuối cùng, nền tảng của một hệ thống có khả năng mở rộng, linh hoạt và đáp ứng là kiến trúc hướng thông điệp (message-driven) Ứng dụng hướng tin nhắn có

thể được định hướng theo sự kiện (event-driven), dựa trên tác nhân (actor-based)

hoặc cả hai

• Reactive Extensions

Reactive Programming như một khái niệm đã tồn tại trong hơn 20 năm nhưng

đã không phát triển cho đến Reactive Extensions ra đời Reactive Extension (còn được gọi là ReactiveX) là giao diện lập trình ứng dụng (Application Programming Interface-API) hoặc lập trình không đồng bộ với các luồng có thể quan sát được ReactiveX có hai lớp: lớp có thể quan sát (Observable) và lớp quan sát (Observer) Observable là nguồn dữ liệu của các luồng hoặc các sự kiện và Observer là lớp sử dụng (hoặc phản ứng lại) các phần tử được tạo ra

Một Observable có thể có nhiều Observer để mỗi mục dữ liệu được tạo ra sẽ được nhận bởi một Observer Trong ReactiveX, một Observer theo dõi một Observable Sau đó, Observable tạo ra các luồng dữ liệu, Observer sẽ lắng nghe và phản ứng lại Điều này tạo ra một loạt các hoạt động trên luồng dữ liệu Một chủ thể vừa có thể hoạt động như Observer vừa có thể đóng vai trò là Observable Chúng ta cũng có thể áp dụng toán tử cho các luồng Các toán tử xác định cách thức và thời điểm Observable sẽ tạo luồng Hầu hết các toán tử thực thi các hàm trên Observable và trả về một Observable

1.2.2 Khái niệm về TypeScript

TypeScript là một dự án mã nguồn mở được phát triển bởi Microsoft, nó có thể được coi là một phiên bản nâng cao của Javascript bởi việc bổ sung tùy chọn kiểu tĩnh và lớp hướng đối tượng mà điều này không có ở Javascript TypeScript có thể

sử dụng để phát triển các ứng dụng chạy ở client-side (Angular2) và server-side (NodeJS)

TypeScript sử dụng tất cả các tính năng của của ECMAScript 2015 (ES6) như classes, modules Không dừng lại ở đó nếu như ECMAScript 2017 ra đời thì mình tin chắc rằng TypeScript cũng sẽ nâng cấp phiên bản của mình lên để sử dụng mọi

kỹ thuật mới nhất từ ECMAScript Thực ra TypeScript không phải ra đời đầu tiên

mà trước đây cũng có một số thư viện như CoffeScript và Dart được phát triển bởi Google, tuy nhiên điểm yếu là hai thư viện này sư dụng cú pháp mới hoàn toàn, điều này khác hoàn toàn với TypeScript, vì vậy tuy ra đời sau nhưng TypeScript vẫn đang

nhận được sự đón nhận từ các lập trình viên

Tại sao nên sử dụng TypeScript?

• Dễ phát triển dự án lớn: Với việc sử dụng các kỹ thuật mới nhất và lập trình

hướng đối tượng nên TypeScript giúp chúng ta phát triển các dự án lớn một

cách dễ dàng

• Nhiều Framework lựa chọn: Hiện nay các Javascript Framework đã dần

khuyến khích nên sử dụng TypeScript để phát triển, ví dụ như AngularJS 2.0

và Ionic 2.0

• Hô trợ các tính năng của Javascript phiên bản mới nhất: TypeScript luôn

đảm bảo việc sử dụng đầy đủ các kỹ thuật mới nhất của Javascript, ví dụ như

version hiện tại là ECMAScript 2015 (ES6)

• Là mã nguồn mở: TypeScript là một mã nguồn mở nên bạn hoàn toàn có thể

sử dụng mà không mất phí, bên cạnh đó còn được cộng đồng hỗ trợ

• TypeScript là Javscript: Bản chất của TypeScript là biên dịch tạo ra các đoạn

mã javascript nên ban có thê chạy bất kì ở đâu miễn ở đó có hỗ trợ biên dịch Javascript Ngoài ra bạn có thể sử dụng trộn lẫn cú pháp của Javascript vào bên trong TypeScript, điều này giúp các lập trình viên tiếp cận TypeScript dễ

dàng hơn

1.2.3 Functional Programming là gì?

Functional Programming có nghĩa tiếng việt là lập trình hàm

Theo nguồn wikimedia: Trong ngành khoa học máy tính, lập trình hàm là một

mô hình lập trình xem việc tính toán là sự đánh giá các hàm toán học và tránh sử dụng trạng thái và các dữ liệu biến đổi

Procedural Programming: hay còn gọi là lập trình thủ tục là kiểu lập trình mà

việc tính toán trong chương trình dựa trên việc ước lượng giá trị của các thủ tục hay procedure (bao gồm một tập hợp các câu lệnh khác nhau) theo một thứ tự xác định từ trên xuống dưới

Object Oriented Programming: là kỹ thuật lập trình nhằm vào sự tương tác

của các đối tượng Mỗi đối tượng có những thuộc tính (thông tin lưu trữ), những phương thức xác định chức năng của đối tượng Bên cạnh đó, đối tượng có khả năng phát sinh ra các sự kiện khi thay đổi thông tin, thực hiện một chức năng hay khi đối tượng khác tác động vào Tất cả những thuộc tính, phương thức và sự kiện tạo nên cấu trúc hướng đối tượng

Meta Programming: Lập trình meta hay còn gọi là siêu lập trình là việc tiến

• Công việc viết một chương trình máy tính mà chương trình này lại điều chỉnh hay soạn thảo một chương trình khác (hay điều chỉnh chính nó) như

là dữ liệu của lập trình meta

• Công việc viết một chương trình máy tính mà một phần của công việc này chỉ hoàn tất trong thời gian dịch mã

Imperative Pattern: Tập trung vào mô tả cách chương trình hoạt động, nó bao

gồm các lệnh cho máy tính thực hiện

Declarative Pattern: Tập trung vào những gì chương trình sẽ hoàn thành mà

không chỉ định cách chương trình sẽ đạt được kết quả

Mathematical Function hoặc Pure Function

• Trong toán học, một hàm là một mối quan hệ giữa một tập hợp các đầu vào và một tập các đầu ra cho phép với thuộc tính mà mỗi kết hợp đầu vào có liên quan đến chính xác một đầu ra

• Trong Functional Programming (lập trình hàm), các hàm này được gọi là hàm thuần túy chỉ phụ thuộc vào dữ liệu đầu vào nhận được vào hàm và không thay đổi dữ liệu đầu vào ngoại trừ dữ liệu trả về

Math.random() không phải là một pure function bởi vì nó luôn trả về một giá trị mới trên mọi lần gọi hàm

Math.min(1,2) là một ví dụ của pure function vì nó luôn luôn trả về giá trị ứng với thiết lập đầu vào

Tại sao nên sử dụng Functional Programming?

• Với Pure Function, cung cấp sự tự tin không thay đổi mọi thứ bên ngoài phạm vi của nó

• Nó làm giảm sự phức tạp, không cần phải lo lắng về cách nó đang làm

nó, tập trung sẽ chỉ vào những gì nó đang làm

• Dễ kiểm tra, bởi vì nó không phụ thuộc vào trạng thái của ứng dụng và xác minh kết quả cũng sẽ dễ dàng

• Nó làm cho code dễ đọc hơn

• Functional Programming còn giúp cho code dễ hiểu hơn nữa

1.3 Nền tảng công nghệ

1.3.1 Giới thiệu về Angular

Nếu đã từng xây dựng một vài ứng dụng Web, chắc hẳn bạn đã từng nghe đến cái tên Angular, một Frameworks Javascript giúp chúng ta xây dựng ứng dụng Web đầy đủ tính năng từ phía Client Angularlần đầu được phát hành bởi gã khổng lồ Google vào năm 2010 với phiên bản AngularJS, sau đó đã có chỗ đứng khá vững chắc trong một thời gian dài, phiên bản Angular 2 phát hành năm 2016 mang đến một bước chuyển mình vượt bậc, một công cụ thực sự mạnh mẽ cho việc phát triển ứng dụng Web trên cả nền tảng Mobile và Desktop Hiện nay chúng ta đang có phiên bản Angular 6

Hiện giữa vô vàn các thư viện và frameworks Javscript, Angular có gì nổi bật

và tại sao chúng ta nên chọn Angular cho ứng dụng tiếp theo của mình ?

Angular giúp nâng cao năng suất của các lập trình viên

Việc phát triển Web đã có bước thay đổi đáng kể trong vài năm qua Với phiên bản ECMAScript (ES) 2015 - chúng ta quen thuộc với cái tên ES6, với những class

hay arrow function Angular 2+ ứng dụng những tính năng mới này giúp việc code với Angular trở nên rõ ràng và dễ học hơn rất nhiều

Thêm vào đó, với việc ứng dụng Typescript - một ngôn ngữ - hay là một bản nâng cấp đáng giá của Javascript, Angular kết hợp với Typescript, chúng ta có một công cụ tuyệt vời giúp xử lý các vấn đề hạn chế của JS như kiểm tra kiểu dữ liệu, refactor code an toàn hơn, từ đó cũng hỗ trợ tốt hơn cho việc Debug cũng như giúp các Dev thực sự hiểu rõ mã nguồn của họ hơn

(model-Angular sử dụng class trong ES6 với một loạt các thuộc tính để xây dựng toàn

bộ các cấu trúc chủ chốt, giả sử bạn muốn tạo một Angular component - Tạo một class và thêm vào các thuộc tính cần thiết Hay bạn muốn tạo một Angular module

- Hãy tạo một class và thêm vào đó các thuộc tính cần thiết Về cơ bản sẽ là như vậy, Angular cung cấp một cấu trúc rõ ràng để xây dựng từng tính năng cho ứng dụng của bạn

Các dependency mạnh mẽ được sử dụng trong ứng dụng khi cần thiết, và khi cần tích hợp bất kì dependency nào, như HTTP hay Router, chúng ta chỉ cần thêm

nó vào bên trong constructor của class

Mô hình MVVM cũng giúp Angular chiếm lợi thế trong xây dựng ứng dụng client-side, thường ta sẽ có 3 điều cần quan tâm chính: đó là giao diện người dùng,

mã nguồn điều khiển giao diện và mô hình dữ liệu (data) cho giao diện Angular với MVVM phân biệt hoàn toàn rõ ràng các yếu tố trên nhờ mô hình MVVM:

• Phần giao diện (view) được định nghĩa trong một template bao hàm

HTML dành cho một component nhất định Template có thể là toàn bộ Layout hoặc bất cứ mảnh ghép nào trong Layout đó

• Model được định nghĩa như là các thuộc tính của component class Có

thể hiểu là dữ liệu, dựa vào đó để phần View sử dụng để thực thi

• View/model là class quản lý cả view cũng như model Là phần code sẽ xử

lý việc truy xuất dữ liệu, đồng thời thực thi các tương tác của người dùng trên view Với việc ứng dụng các điểm tích cực của các thành phần trên, Angular khiến việc phát triển ứng dụng trở nên dễ dàng và hiệu quả hơn

Extensive binding

Rất nhiều ứng dụng Web làm việc với dữ liệu (data) App sẽ truy xuất dữ liệu từ Server và hiển thị dữ liệu đó tới người dùng trên view, sử dụng template Và các tương tác của người dùng sẽ được khiến dữ liệu thay đổi, được view ghi nhận và lưu lại trên server Data Binding trong Angular giúp bạn thực thi tiến trình trên rất dễ dàng Đơn thuần từ việc ràng buộc thành phần HTML trong template với các thuộc tính trong class và dữ liệu sẽ tự động xuất hiện trên màn hình Với các tương tác của người dùng đòi hỏi thay đổi dữ liệu, Angular sử dụng phương pháp two-way binding Bất kì thay đổi dữ liệu đến từ view sẽ tự động cập nhật thuộc tính

"model" bên trong class

Thêm vào đó, Angular cũng hỗ trợ property binding - cho phép chúng ta điều khiển DOM bằng cách ràng buộc thuộc tính HTML với thuộc tính của component class, data sẽ tự động xuất hiện bên trong view Ví dụ, chúng ta ràng buộc thuộc tính hidden đối với một thẻ img với thuộc tính hideImg bên trong class Khi thuộc tính hideImg nhận giá trụ true, img sẽ tự động hidden và ngược lại khi hideImg nhận giá trị false, thẻ img sẽ tự động hiển thị tới người dùng

Cuối cùng, Angular hỗ trợ event binding, có nghĩa là chúng ta có thể xử lí bất

kì event nào từ phía view, như HTML event Về cơ bản chúng ta sẽ gắt event với một method bên trong class Mỗi khi event xuất hiện, method tương ứng sẽ được thực thi

Extensive binding giúp quá trình hiển thị dữ liệu, điều khiển DOM, thực thi các event một cách trơn tru và dễ dàng

Hỗ trợ đầy đủ tính năng điều hướng (routing)

Đa số các ứng dụng Web không chỉ có 1 view hay một page duy nhất, mà sẽ cung cấp nhiều view khác nhau tương ứng với với các chức năng chính Ví dụ như một trang web với các trang giới thiệu, trang nội dung, trang chi tiết, trang đăng nhập, đăng ký, Chúng ta sẽ cần hiển thị đúng view vào đúng thời điểm Đó là mục đích của điều hướng (routing) Và Angular cung cấp đầy đủ tính năng cho việc này, chúng ta định nghĩa các đường dẫn (route) cho mỗi page view của ứng dụng Và chúng ta sẽ kích hoạt route dựa trên tương tác của người dùng (user) Chúng ta có thể truyền thêm dữ liệu vào các route, giúp view hiển thị nội dung một cách dynamic, có thể bảo vệ route để người dùng chỉ có thể truy cập sau khi đã đăng nhập hoặc có quyền truy cập, có thể ngăn chặn việc người dùng ngay lập tức rời một trang khi các thao tác còn dang dở cho đến khi họ thực sự xác nhận việc rời đi hoặc lưu lại tiến trình sử dụng, Angular đồng thời cũng hỗ trợ child-route cho việc điều hướng bên trong một route Việc điều hướng giữa các view bên trong ứng dụng Angular thực sự rất linh hoạt và mạnh mẽ

Angular giúp giảm tối đa kích thước và tăng tối đa hiệu suất của ứng dụng

Kích thước và hiệu năng có mối liên quan mật thiết khi chúng ta làm việc trên nền tảng Web Một component nhỏ hơn sẽ giúp nâng cao hiệu suất khởi động - giảm cả thời gian download cũng như thời gian cũng như thời gian compile trên

trình duyệt Giảm kích thước component và giúp tăng hiệu suất là một ưu điểm cũng như mục tiêu mà Angular mong muốn mang đến cho các lập trình viên Giảm kích thước ứng dụng có thể thực hiện bằng nhiều cách Đầu tiên chúng ta

có thể giảm tối đa kích thước của từng component tới mức tối thiểu có thể Tiếp theo các component sẽ được sắp xếp bên trongtrong Angular Module bằng 1 cách

đề cho các nhóm logic có liên quan đến nhau sẽ được download cùng với nhau Và bước thứ ba, lazy loading bên trong các route sẽ chỉ downloaad những module cần thiết cho việc hiển thị nội dung cần thiết tới người dùng, và sẽ không bao giờ download những nội dung không cần thiết

Chúng ta có một trình biên dịch tên là AOT, trình biên dịch này sẽ chạy một lần trong thời gian build ứng dụng Trình duyệt sau đó sẽ download phiên bản chưa được biên dịch của ứng dụng và render ứng dụng tới người dùng ngay lập tức mà không cần biên dịch nó lần đầu trong trình duyệt Thêm nữa là sẽ koong cần download trình biên dịch Angular, giúp làm giảm đáng kể kích thước (size) của ứng dụng cần tải về

Document và cộng đồng (community)

Document cho Angular 2+ - angular.io - rất đầy đủ và chi tiết, bao hàm giới thiệu cơ bản giúp bạn làm quen nhanh chóng với Angular, giới thiệu chi tiết, từ cơ bản đến nâng cao các API của Angular, cũng như có hẳn một Tutorial Basic được xây dựng nên bởi Angular team, cung cấp cho bạn nhanh chóng nắm bắt các thuộc tính cơ bản của Framework

Angular cũng có một cộng đồng sử dụng rất lớn, đồng thời được phát triển bởi

gã khổng lồ Google, khiến Angular không ngừng trưởng thành với các phiên bản luôn được cập nhật, hiện chúng ta đã có phiên bản Angular 6+ mới cam kết LTS

từ Google

Angular không thật sự dễ để làm quen, nhưng rất đáng để áp dụng cho ứng dụng của bạn, trên đây là những lí do chúng ta nên sử dụng Angular, được tham khảo và dịch từ bài viết Why learn Angular, hi vọng sẽ hữu ích

1.3.2 Amazon Web Services là gì?

Amazon Web Services (AWS) là nền tảng dịch vụ đám mây an toàn, mang đến khả năng tính toán, lưu trữ cơ sở dữ liệu, phân phối nội dung và các chức năng khác nhằm giúp các doanh nghiệp mở rộng và phát triển Khám phá cách hàng triệu khách hàng đang tận dụng sản phẩm và giải pháp đám mây của AWS để xây dựng các ứng dụng phức tạp với tính linh hoạt, khả năng mở rộng và độ tin cậy cao

Đặc trưng của Amazon Web Services:

• Nền tảng cho hầu hết mọi trường hợp sử dụng

Từ lưu trữ dữ liệu đến các công cụ triển khai, thư mục để phân phối nội dung, hơn 50 dịch vụ sẽ sẵn sàng chỉ sau một vài cú nhấp chuột bằng AWS Các dịch vụ mới được cung cấp nhanh chóng, không cần chi phí vốn trả trước, cho phép các doanh nghiệp, các doanh nghiệp mới thành lập, các doanh nghiệp vừa và nhỏ cũng như khách hàng trong 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 chuyên sâu và ngày càng chuyên sâu hơn

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

và MLB, Đám mây AWS cho phép khách hàng cộ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ư một loạt 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 bạn tập trung vào hoạt động kinh doanh cốt lõi của mình, chứ không phải là tập trung vào cơ sở hạ tầng bảo vệ hay hệ thống làm mát