Tìm hiểu về emberjs và thiết kế website bán sách

Vấn đề cơ bản là làm thế nào để có thể sử dụng các tính năng của EmberJS làm cho trang web bán sách trở nên hấp dẫn hơn, tăng cường tính linh hoạt và hiệu suất phát triển.. Bằng cách này

Trà Vinh, ngày … tháng …… năm ……

Giáo viên hướng dẫn (Ký tên và ghi rõ họ tên) NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN

Trà Vinh, ngày … tháng …… năm ……

Giáo viên hướng dẫn

(Ký tên và ghi rõ họ tên)

NHẬN XÉT CỦA THÀNH VIÊN HỘI ĐỒNG

Trà Vinh, ngày … tháng …… năm ……

Thành viên hội đồng

(Ký tên và ghi rõ họ tên)

LỜI CẢM ƠN Đầu tiên, em xin gửi lời cảm ơn chân thành đến cô Phạm Thị Trúc Mai, giảng

viên Bộ môn Công nghệ thông tin của Trường Đại học Trà Vinh, đã tận tình hướng dẫn, chỉ bảo em trong suốt quá trình thực hiện đồ án cơ sở ngành này

Do chưa có nhiều kinh nghiệm làm đề tài cũng như còn những hạn chế về kiến thức, trong quá trình thực hiện đồ án cơ sở ngành chắc chắn sẽ không tránh khỏi những thiếu sót Rất mong nhận được sự nhận xét, ý kiến đóng góp từ phía thầy cô để bài đồ án

cơ sở ngành của em được hoàn thiện hơn Lời sau cùng cho em xin gửi lời cảm ơn đến quý thầy cô, chúc quý thầy cô thật nhiều sức khỏe, thành công và hạnh phúc

Sinh viên thực hiện

MỤC LỤC

CHƯƠNG 1 TỔNG QUAN 9

CHƯƠNG 2 NGHIÊN CỨU LÝ THUYẾT 11

2.1 Cách cài EmberJS 11

2.1.1 NodeJS 19

2.1.2 Ember CLI 19

2.1.3 Tạo một app với Ember 19

2.2 Cấu trúc của một thư mục ứng dụng EmberJs 20

2.3 Các thành phần chính trong EmberJS 21

2.3.1 Template 22

2.3.2 Controller 23

2.3.3 Routing 26

2.3.4 Model 27

2.3.5 View 29

2.3.6 Component 29

2.3.7 Quy tắc đặt tên 31

2.4 Điểm mạnh và điểm yếu của EmberJS 31

2.5 Kết luận 32

CHƯƠNG 3 HIỆN THỰC HÓA NGHIÊN CỨU 33

3.1 Mô tả bài toán 33

3.2 Đặc tả yêu cầu hệ thống 33

3.2.1 Yêu cầu chức năng 33

3.2.2 Yêu cầu phi chức năng 33

3.3 Thiết kế giao diện 34

3.3.1 Giao diện trang chủ 34

3.3.2 Giao diện trang sản phẩm 35

3.3.3 Giao diện trang đăng ký 35

3.3.4 Giao diện trang đăng nhập 36

3.3.5 Giao diện trang giỏ hàng 36

CHƯƠNG 4 KẾT QUẢ NGHIÊN CỨU 38

4.1 Dữ liệu thử nghiệm 38

4.2 Kết quả thử nghiệm 38

4.2.2 Chức năng tìm kiếm 39 CHƯƠNG 5 KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 43 DANH MỤC TÀI LIỆU THAM KHẢO 45

PHỤ LỤC Error! Bookmark not defined.

DANH MỤC HÌNH ẢNH – BẢNG BIỂU

Hình 2.1.Mô hình sắp đặt trong EmberJS 22

Hình 2.2 Các khớp nối của mẫu, điều khiển và mô hình 24

Hình 3.1: Trang chủ của web bán sách 34

Hình 4.1Chức năng phân loại sách 39

TÓM TẮT ĐỒ ÁN CƠ SỞ NGÀNH Vấn đề nghiên cứu

Đồ án này tập trung vào việc nghiên cứu về EmberJS, một JavaScript framework mạnh mẽ và cách áp dụng nó trong phát triển ứng dụng web hiện nay Vấn đề cơ bản là làm thế nào để có thể sử dụng các tính năng của EmberJS làm cho trang web bán sách trở nên hấp dẫn hơn, tăng cường tính linh hoạt và hiệu suất phát triển

Hướng tiếp cận

Với vấn đề đặt ra tôi đã lựa chọn một hướng tiếp cận tổng thể bao gồm hai phần chính: tìm hiểu lý thuyết về EmberJS và áp dụng nó vào thực tế Đối với phần lý thuyết, tôi đã nghiên cứu các khái niệm như components, services và routing của EmberJs Đồng thời, tôi đã tạo ra dự án mẫu để minh họa cách sử dụng EmberJS trong thực tế

Cách giải quyết vấn đề

Để giải quyết vấn đề, tôi đã tiến hành một quá trình học tập nghiêm túc, đặt nền tảng cho việc tìm hiểu rõ về EmberJS Bằng cách này tôi có thể xác định cách sử dụng các tính năng của nó để giải quyết những yêu cầu thường gặp trong phát triển ứng dụng web Cùng với đó, việc xây dựng và triển khai dự án thực tế giúp tôi kiểm tra và xác nhận hiệu suất của EmberJS trong thực tế

Kết quả đạt được

Hiểu rõ hơn về EmberJS: Sau năm tuần thực hiện đồ án, tôi đã hiểu được về cấu trúc và các khái niệm quan trọng của EmberJS như components, services và routing Áp dụng thành công vào dự án của tôi, chứng minh khả năng ứng dụng linh hoạt của EmberJS trong môi trường phát triển ứng dụng web bán sách

MỞ ĐẦU

Lý do chọn đề tài

Với một xã hội ngày càng phát triển, Internet đã trở thành một phần không thể thiếu trong cuộc sống hàng ngày của mỗi chúng ta Từ đó việc thiết kế giao diện phù hợp trở nên không kém phần quan trọng trong việc đảm bảo sự thành công của một trang website

EmberJS đã trở thành một phần không thể thiếu trong quá trình phát triển web hiện nay Lựa chọn đề tài nghiên cứu về EmberJS là kết quả của nhận thức về sức ảnh hưởng và tầm quan trọng của nó đối với việc xây dựng ứng dụng web hiệu quả Nó được

ưa chuộng vì tính mạnh mẽ, tích hợp dễ dàng, và khả năng tạo ra trải nghiệm người dùng tốt Một số công ty lớn như Google, Netflix, Linkedin, Square, The Guardian, … đã sử dụng EmberJS để xây dựng và quản lý trang web của họ Điều này cho thấy tầm quan trọng và sự phổ biến của EmberJS Chính vì vậy, tôi quyết định thực hiện đồ án cơ sở ngành với đề tài “Tìm hiểu về EmberJS và thiết kế ứng dụng website minh họa”

Mục đích nghiên cứu

Mục đích chính của đồ án này là hiểu rõ các kiến thức cơ bản về các tính năng và lợi ích của EmberJS, đồng thời áp dụng kiến thức đó vào việc xây dựng các ứng dụng web thực tế Tôi mong muốn không chỉ có kiến thức lý thuyết mà còn có khả năng ứng dụng linh hoạt trong các dự án thực tế

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

Đối tượng nghiên cứu của tôi là những kiến thức cơ bản và các tính năng quan trọng của EmberJS, cách để áp dụng kiến thức đó vào việc xây dựng các ứng dụng web thực tế

Phạm vi nghiên cứu

Phạm vi nghiên cứu của tôi với đề tài này, tôi tập trung vào việc tìm hiểu về cấu trúc MVC của EmberJS, các khái niệm như components, routing services và emberdata

CHƯƠNG 1 TỔNG QUAN

Sự bùng nổ phát triển của các ứng dụng web đang ngày càng phát triển mạnh trong những năm gần đây Việc duy trì mã nguồn, quản lý dữ liệu và tương tác người dùng đòi hỏi một quy trình phát triển hiệu quả và linh hoạt Trong bối cảnh này, EmberJS nổi lên như một công cụ mạnh mẽ để giúp giải quyết những thách thức này và mang lại trải nghiệm người dùng mượt mà

EmberJS ( có tên thật là SproutCore MVC framework) là một framework mã nguồn mở JavaScript phía client dùng cho phát triển các ứng dụng web và sử dụng mô hình Model-View-Controller Mục tiêu của đồ án này là tìm hiểu về cách EmberJS hoạt động, cách ứng dụng nó vào quá trình phát triển một trang web Dưới đây là cách bước

để hoàn thành đồ án

Bước 1: Nghiên cứu EmberJS

Tìm hiểu EmberJS: Nghiên cứu cơ bản về EmberJS, bao gồm cấu trúc components, services routing và các tính năng quan trọng để hiểu rõ cách sử dụng EmberJS trong phát triển front-end của trang web

Bước 2: Phân tích nhu cầu và thiết kế hệ thống

Phân tích nhu cầu: Bắt đầu bằng việc xác định yêu cầu chính của dự án bao gồm chức năng của trang web, nhu cầu kinh doanh và yêu cầu về thông tin sản phẩm

Thiết kế hệ thống: Xây dựng một thiết kế hệ thống tổng quan, bao gồm cấu trúc của trang web, các chức năng chính của web như hiển thị thông tin sản phẩm, đăng ký và đăng nhập vào hệ thống, tìm kiếm sản phẩm và giỏ hàng để thêm các sản phẩm

Bước 3: Thiết kế giao diện

Thiết kế giao diện: Tập trung vào trải nghiệm trực quan, dễ nhìn và dễ sử dụng để người dùng duyệt, tìm kiếm sách và thực hiện giao dịch mua hàng.Trang chủ giới thiệu các sách mới phát hành và sách nổi bật kèm theo hình ảnh Trang sản phẩm liệt kê các loại sách theo từng danh mục sách khác nhau Nhấp vào sách có thể thêm vào giỏ hàng.Tìm kiếm sản phẩm hoạt động bằng cách nhập từ cần tìm và hiện thị ra kết quả tên sách, giá bán

Bước 4: Hiện thực hóa nghiên cứu

Cài đặt: Cài đặt NodeJs phiên bản LTS (Long-Term-Support) để có sự tương thích với EmberJs.Cài đặt Ember CLI để giúp tạo và quản lý dự án EmberJs

Hiện thực hóa Front-end: Viết mã front-end bằng Html, Css, EmberJS, áp dụng các khái niệm đã nghiên cứu như components, services và routing để xây dựng giao diện người dùng tương tác

Kiểm thử và Debug: Thực hiện kiểm thử chức năng và kiểm thử để đảm bảo tính

ổn định và an toàn của trang web

CHƯƠNG 2 NGHIÊN CỨU LÝ THUYẾT 2.1 Front-end

2.1.1 HTML

HTML là gì?

HTML (viết tắt của từ HyperText Markup Language, hay còn gọi là "Ngôn ngữ Đánh dấu Siêu văn bản") là một ngôn ngữ đánh dấu được thiết kế ra để tạo nên các trang web trên World Wide Web Nó có thể được trợ giúp bởi các công nghệ như CSS và các ngôn ngữ kịch bản giống như JavaScript

Các trình duyệt web nhận tài liệu HTML từ một web server hoặc một kho lưu trữ cục bộ và render tài liệu đó thành các trang web đa phương tiện HTML mô tả cấu trúc của một trang web về mặt ngữ nghĩa và các dấu hiệu ban đầu được bao gồm cho sự xuất hiện của tài liệu

Các phần tử HTML là các khối xây dựng của các trang HTML Với cấu trúc HTML, hình ảnh và các đối tượng khác như biểu mẫu tương tác có thể được nhúng vào trang được hiển thị HTML cung cấp một phương tiện để tạo tài liệu có cấu trúc bằng cách biểu thị ngữ nghĩa cấu trúc cho văn bản như headings, paragraphs, lists, links, quotes và các mục khác Các phần tử HTML được phân định bằng các thẻ, được viết bằng dấu ngoặc nhọn Các thẻ như <img /> và <input /> giới thiệu trực tiếp nội dung vào trang Các thẻ khác như <p> bao quanh và cung cấp thông tin về văn bản tài liệu và có thể bao gồm các thẻ khác làm phần tử phụ Các trình duyệt không hiển thị các thẻ HTML, nhưng sử dụng chúng để diễn tả nội dung của trang

HTML có thể nhúng các chương trình được viết bằng JavaScript, điều này ảnh hưởng đến hành vi và nội dung của các trang web Việc bao gồm CSS xác định giao diện

và bố cục của nội dung

Hiện nay phiên bản phổ biến nhất là HTML5, được phát triển nhằm hỗ trợ tính năng tương tác và đa phương tiện trên các trình duyệt web hiện đại

Các tag thông dụng của HTML

HTML tags được sử dụng chủ yếu là 2 loại chính: block-level tags và inline tags Elements Block-level : đây là loại tag cấp cao nhất, sẽ sử dụng toàn không gian trang web và luôn bắt đầu dòng mới của trang web.Ba block-level tags mà tất cả các trang HTML có: <html></html>, <head></head> và <body></body>

Inline elements chỉ chiếm phần nhỏ không gian web và không bắt đầu dòng mới của trang web Chúng thường dùng để định dạng nội dung bên trong của block level elements

Inline Tags

Inline tags thường được dùng để định dạng, tạo bố cục cho nội dung bên trong của block-level tags Ví dụ tag <strong></strong> sẽ định dạng chữ in đậm, trong khi đó tag <em></em> sẽ định dạng chữ in nghiên

Hyperlinks cũng là yếu tố element mà cần tag <a></a> và attributes href để xác định link cụ thể: <a href="https://topdev.vn/">Click me!</a>

Ảnh cũng là element inline Người dùng có thể thêm ảnh bằng cách sử dụng tag <img> mà không cần tag đóng Nhưng người dùng cũng cần sử dụng attribute src để xác định nguồn ảnh, ví dụ như:

<img src="/images/example.jpg" alt="Example image">

2.1.2 CSS CSS là gì?

CSS là viết tắt của Cascading Style Sheets, là một ngôn ngữ thiết kế được sử dụng nhằm mục đích đơn giản hóa quá trình tạo nên một website CSS được ra mắt vào năm 1996 bởi World Wide Web Consortium (W3C)

CSS xử lý một phần giao diện của trang web Sử dụng CSS, bạn có thể kiểm soát màu sắc của văn bản, kiểu phông chữ, khoảng cách giữa các đoạn văn, cách các cột được đặt kích thước và bố cục, hình ảnh hoặc màu nền nào được sử dụng, thiết kế bố cục, 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 cũng như hàng loạt các hiệu ứng khác

Cách CSS hoạt động đó chính là tìm kiếm dựa trên vùng chọn chẳng hạn như thẻ HTML, ID, class Sau đó, nó sẽ áp dụng những thuộc tính buộc phải thay đổi lên các vùng đã chọn

CSS cung cấp khả năng kiểm soát mạnh mẽ việc trình bày tài liệu HTML Thông thường CSS được kết hợp với các ngôn ngữ đánh dấu HTML hoặc XHTML

HTML và CSS có mối quan hệ gắn bó mật thiết với nhau Nếu HTML là nền tảng của một trang web thì CSS là tất cả tính thẩm mỹ của toàn bộ trang web đó

Mối quan hệ của CSS và HTML

CSS và HTML có mối quan hệ mật thiết trong việc xây dựng một website Nếu HTML là các thành phần động cơ của một chiếc xe hơi thì CSS sẽ là kiểu dáng và màu sắc của chiếc xe

Một trang web có thể chạy mà không cần CSS, nhưng nó chắc chắn sẽ không có tình thẩm mỹ CSS làm cho giao diện người dùng của một trang web mang đến trải nghiệm người dùng tốt nhất Nếu không có CSS, các trang web sẽ kém bắt mắt hơn và có thể khó điều hướng hơn nhiều Ngoài bố cục và định dạng, CSS chịu trách nhiệm về màu chữ, kích thước hình ảnh, khoảng cách giữa các đoạn và hơn thế nữa

Cấu trúc của một đoạn CSS

Thông thường, một đoạn CSS sẽ bao gồm các phần:

vùng chọn {thuộc tính: giá trị; thuộc tính: giá trị;… }

Đoạn CSS sẽ được khai báo bằng vùng chọn, các thuộc tính, giá trị nằm trong dấu ngoặc nhọn Mỗi thuộc tính là một giá trị riêng ở dạng số, hoặc chính là tên của các giá trị đã có trong danh sách của CSS

Quy tắc khai báo đó chính là: thuộc tính và giá trị cần cách nhau bằng dấu hai chấm, mỗi dòng khai báo thuộc tính cần có dấu chấm phẩy cuối cùng Các thuộc tính không bị giới hạn ở một vùng chọn

Thuộc tính id, class của phần tử

Các phần tử có mối liên quan với các phần tử khác trong hệ thống cây phân cấp tài liệu

Khai báo (Declaration): Khối khai báo có thể chứa một hoặc nhiều khai báo và chúng được phân tách với nhau bằng dấu chấm phẩy Mỗi khai báo lại bao gồm tên & giá trị đặc tính CSS, dược phân tách với nhau bằng dấu phẩy Quy tắc khai báo CSS là chúng luôn phải kết thúc bằng dấu chấm phẩy, và khối khai báo phải nằm trong các dấu ngoặc móc

Thuộc tính (Properties): Thuộc tính là các cách thức mà bạn có thể tạo kiểu cho một phần tử HTML Vì vậy, với CSS, bạn chỉ cần lựa chọn thuộc tính mà bạn muốn tác động nhất trong bộ quy tắc bạn đã tạo ra

Giá trị thuộc tính: Được nằm ở bên phải của thuộc tính Việc lựa chọn một thuộc tính trong số đó phụ thuộc vào số lần xuất hiện của thuộc tính

Ưu điểm của ngôn ngữ CSS

Ngôn ngữ CSS có một số ưu điểm như sau:

Tăng tốc độ tải trang: CSS cho phép người dùng sử dụng ít đoạn mã vì vậy tốc

độ tải trang sẽ được cải thiện đáng kể Ngoài ra, người dùng còn có thể sử dụng một quy

tắc CSS và áp dụng nó cho tất cả các lần xuất hiện của một thẻ nhất định trong tài liệu HTML

Cải thiện trải nghiệm người dùng: CSS không chỉ làm cho các trang web dễ nhìn hơn, nó còn giúp các website có định dạng thân thiện với người dùng Khi các nút và văn bản ở vị trí hợp lý và được sắp đặt tốt, trải nghiệm người dùng sẽ được cải thiện

Thời gian phát triển nhanh: Với CSS, bạn có thể áp dụng các quy tắc và kiểu định dạng cụ thể cho nhiều trang bằng một chuỗi mã Một biểu định kiểu xếp tầng có thể được sao chép trên một số trang web Ví dụ: nếu người dùng có các trang sản phẩm tất cả phải có cùng định dạng, giao diện, thì việc viết quy tắc CSS cho một trang sẽ đủ cho tất

cả các trang cùng loại

Thay đổi định dạng dễ dàng: Nếu người dùng cần thay đổi định dạng của một nhóm trang cụ thể, người dùng có thể dễ dàng thực hiện việc này với CSS mà không cần phải sửa từng trang riêng lẻ Chỉ cần chỉnh sửa biểu định kiểu CSS tương ứng và người dùng sẽ thấy các thay đổi được áp dụng cho tất cả các trang đang sử dụng biểu định kiểu

đó

Khả năng tương thích trên các thiết bị: Thiết kế web đáp ứng là một vấn đề cần được chú trọng Trong thời đại ngày nay, các trang web phải hiển thị đầy đủ và có thể điều hướng dễ dàng trên tất cả các thiết bị Cho dù thiết bị di động hay máy tính bảng, máy tính để bàn hay thậm chí là TV thông minh, CSS kết hợp với HTML để tạo ra thiết

kế đáp ứng

2.1.3 JavaScript JavaScript là gì?

JavaScript là ngôn ngữ lập trình website phổ biến hiện nay, nó được tích hợp và nhúng vào HTML giúp website trở nên sống động hơn JavaScript đóng vai trò như là một phần của trang web, thực thi cho phép Client-side script từ phía người dùng cũng như phía máy chủ (NodeJS) tạo ra các trang web động

JavaScript là một ngôn ngữ lập trình thông dịch với khả năng hướng đến đối tượng Là một trong 3 ngôn ngữ chính trong lập trình web và có mối liên hệ lẫn nhau để xây dựng một website sống động, chuyên nghiệp:

HTML: Hỗ trợ trong việc xây dựng layout, thêm nội dung dễ dàng trên website CSS: Hỗ trợ việc định dạng thiết kế, bố cục, style, màu sắc

JavaScript: Tạo nên những nội dung “động” trên website

Lịch sử phát triển của Javascript

Brendan Eich chính là người đã phát triển JS tại Netscape với tiền thân là Mocha Sau đó, Mocha được đổi thành LiveScript và cuối cùng mới đổi thành JavaScript

Năm 1998, JavaScript với phiên bản mới nhất là ECMAScript 2 phát hành và đến năm 1999 thì ECMAScript 3 được ra mắt

Năm 2016, ứng dụng JavaScript đã đạt kỷ lục lên tới 92% website sử dụng, đồng thời cũng được đánh giá là một công cụ cực kỳ quan trọng đối với lập trình viên

Javascript dùng để làm gì?

Bên cạnh việc tìm hiểu javascript là ngôn ngữ gì được sử dụng để làm gì rất quan trọng Việc nắm bắt được mục đích của ngôn ngữ đặc biệt này sẽ giúp người dùng

dễ dàng sử dụng chúng hơn trong công việc Cụ thể như sau:

Thay đổi nội dung HTML: Một trong số nhiều phương thức HTML JavaScript chính là getElementById () Người dùng sử dụng để tìm một phần tử của HTML với id

=”demo” và dùng để thay đổi nội dung của phần từ (Internal HTML) sang thành “Hello JavaScript”

Thay đổi giá trị thuộc tính HTML: Tổng quan về javascript còn có thể sử dụng để thay đổi các giá trị của thuộc tính Ví dụ: thay đổi thuộc tính src (source) của tag<img>

Thay đổi kiểu HTML: Đây chính là một hoạt động biến thể của việc thay đổi thuộc tính của HTML ở trên Ví dụ: document.getElementById(‘demo’).style.fontSize =

’35px;

Ẩn các phần tử HTML: Một hoạt động tiếp theo là Javascript có thể ẩn được các phần tử HTML Chúng có thể được thực hiện thông qua hoạt động thay đổi kiểu hiển thị các phần tử HTML

Hiển thị các phần tử HTML: Một điểm đặc biệt là JavaScript có thể hiển thị được các yếu tố HTML ẩn Đồng thời, cũng có thể thực hiện được thông qua cách thay đổi kiểu hiển thị phần tử

Ưu điểm của ngôn ngữ lập trình Javascript

Những lỗi Javascript rất dễ để phát hiện, từ đó giúp người dùng sửa lỗi một cách nhanh chóng hơn

Những trình duyệt web có thể dịch thông qua HTML mà không cần sử dụng đến một compiler

JS có thể hoạt động ở trên nhiều nền tảng và các trình duyệt web khác nhau Được các chuyên gia đánh giá là một loại ngôn ngữ lập trình nhẹ và nhanh hơn nhiều so với các ngôn ngữ lập trình khác

JS còn có thể được gắn trên một số các element hoặc những events của các trang web

Những website có sử dụng JS thì chúng sẽ giúp cho trang web đó có sự tương tác cũng như tăng thêm nhiều trải nghiệm mới cho người dùng

Người dùng cũng có thể tận dụng JS với mục đích là để kiểm tra những input thay vì cách kiểm tra thủ công thông qua hoạt động truy xuất database

Giao diện của ứng dụng phong phú với nhiều thành phần như Drag and Drop, Slider để cung cấp đến cho người dùng một Rich Interface (giao diện giàu tính năng)

Giúp thao tác với người dùng phía Client và tách biệt giữa các Client với nhau

Nhược điểm của ngôn ngữ lập trình Javascript

JavaScript không có khả năng đa luồng hoặc đa dạng xử lý

Những thiết bị khác nhau có thể sẽ thực hiện JavaScript khác nhau, từ đó dẫn đến

Tại sao nên sử dụng Ember

EmberJS là một framework mã nguồn mở JavaScript theo MIT license

Linh hoạt cho các trang web tốc độ cao, tăng hiệu suất của ứng dụng mà không cần reload trang

Có các thư viện handlebars templating tương tự như HTML

Có kích thước nhỏ hơn các thư viện Javascript khác

Data binding được hỗ trợ đầy đủ Có sự liên kết giữa 2 thuộc tính, khi một thuộc tính thay đổi mà tác động đến thuộc tính còn lại thì thuộc tính còn lại cũng được update theo

Tính năng

EmberJS được sử dụng cho việc tạo và bảo trì các ứng dụng web

View của EmberJS được tạo bởi các handlebars templates nên rất thuận tiện cho việc thiết kế font-end

Tự động xác định route và controller

Loại bỏ những khuôn mẫu cũ và thay bằng các kiến trúc ứng dụng tiêu chuẩn Ember.js có HTML và CSS là cốt lõi của mô hình phát triển

Routes là tính năng cốt lõi để quản lý URL

Hỗ trợ chuyên sâu nhiều loại view

2.3 Cách cài EmberJS

2.3.1 NodeJS

Đầu tiên cần cài môi trường NodeJS vì EmberJS là một JavaScript framework, và

để chạy được các ứng dụng EmberJS, người dùng cần có môi trường JavaScript runtime NodeJS là một môi trường chạy mã JavaScript ngoài trình duyệt, và nó cung cấp các tính năng và thư viện hỗ trợ phát triển ứng dụng web

2.3.3 Tạo một app với Ember

Khi CLI đã được cài đặt, tiến hành tạo ứng dụng mới Bằng cách sử dụng lệnh tạo mới, có thể tạo một ứng dụng với cú pháp như sau: "ember new [app_name]" Đây là nơi

có thể đặt tên cho ứng dụng mới

ember new [app_name]

Ví dụ: ember new ember-project

Sau khi gõ lệnh tạo mới, CLI sẽ bắt đầu quá trình tải xuống các phụ thuộc, cấu hình môi trường và tạo cấu trúc cơ bản cho ứng dụng Quá trình này có thể mất một thời gian tùy thuộc vào kích thước của ứng dụng và tốc độ mạng.Chạy lệnh new app thành công sẽ tạo ra một thư mục ember-project.Tiếp theo di chuyển đến thư mục ember-project và khởi động server bằng các lệnh sau:

cd ember-project

ember server

Tạo một ứng dụng mới bằng EmberCLI rất đơn giản và tiện lợi.EmberCLI giúp tối

ưu hóa quy trình phát triển và triển khai các ứng dụng, giúp người dùng tập trung vào việc xây dựng các ứng dụng mà không cần lo về việc phối hợp các thành phần với nhau

2.4 Cấu trúc của một thư mục ứng dụng EmberJs

Bower_components / bower.json

Bower là một thư viện quản lý suorce code phụ thuộc của thư viện js(phần này có thể so sánh như composer trong PHP hoặc file gem trong ruby on rails) Tất cả các install

sẽ được lưu trong thư mục bower_components.Và để cài đặt khai báo trong file bower.json

EmberJS là một framework chạy trên nền tảng nodeJS vì vậy khi thấy thư mục này

sẽ không thấy gì lạ Nó là thư mục quản lý tất cả thư viện của nodeJS

Hình 2.1.Mô hình hoạt động trong EmberJS

2.5.1 Template

Template là một phần thiết yếu để định nghĩa giao diện người dùng.Vì vậy template có giao diện người dùng mạnh mẽ Cũng giống như HTML thông thường, EmberJS cung cấp các thư viện handlebar template để xây dựng các ứng dụng front-end Trong Ember thì Handlebars là thư viện phía máy khách có chức năng cung cấp các biểu thức Một ví dụ về thư viện Handlebars:

<script type="text/x-handlebars"> <h2><strong>{{firstName}}