Professional Documents
Culture Documents
CSN NguyenDucThinh EmberJs Ver1
CSN NguyenDucThinh EmberJs Ver1
............................................................................................................
........................................................................................................................
........................................................................................................................
........................................................................................................................
........................................................................................................................
........................................................................................................................
........................................................................................................................
........................................................................................................................
........................................................................................................................
........................................................................................................................
........................................................................................................................
........................................................................................................................
........................................................................................................................
........................................................................................................................
........................................................................................................................
........................................................................................................................
........................................................................................................................
........................................................................................................................
........................................................................................................................
........................................................................................................................
........................................................................................................................
........................................................................................................................
........................................................................................................................
........................................................................................................................
........................................................................................................................
........................................................................................................................
........................................................................................................................
........................................................................................................................
........................................................................................................................
........................................................................................................................
........................................................................................................................
........................................................................................................................
........................................................................................................................
........................................................................................................................
........................................................................................................................
........................................................................................................................
........................................................................................................................
........................................................................................................................
........................................................................................................................
............................................................................................................
........................................................................................................................
........................................................................................................................
........................................................................................................................
........................................................................................................................
........................................................................................................................
........................................................................................................................
........................................................................................................................
........................................................................................................................
........................................................................................................................
........................................................................................................................
........................................................................................................................
........................................................................................................................
........................................................................................................................
........................................................................................................................
........................................................................................................................
........................................................................................................................
........................................................................................................................
........................................................................................................................
........................................................................................................................
........................................................................................................................
........................................................................................................................
........................................................................................................................
........................................................................................................................
........................................................................................................................
........................................................................................................................
........................................................................................................................
........................................................................................................................
........................................................................................................................
........................................................................................................................
........................................................................................................................
........................................................................................................................
........................................................................................................................
........................................................................................................................
........................................................................................................................
........................................................................................................................
........................................................................................................................
........................................................................................................................
........................................................................................................................
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 xó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. Lời cuối 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.
MỤC LỤC
(SV trình bày tóm tắt vấn đề nghiên cứu, các hướng tiếp cận, cách giải quyết vấn
đề và một số kết quả đạt được)
Đồ án này tập trung vào việc nghiên cứu về EmberJS, một framework JavaScript
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.
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á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ế.
Để giải quyết vấn đề, tôi đã tiến hành một quá trình học tập chặt chẽ, đặ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 các 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ế.
Hiểu rõ hơn về EmberJS: Tôi đã hiểu 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
(Trình bày lý do chọn đề tài, mục đích, đối tượng và phạm vi nghiên cứu)
Lý do chọn đề tài
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 AngularJS. 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ề AngularJS và thiết kế ứng dụng website minh họa”.
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 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 của 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.
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à.
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.
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.
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ừ khoá cần tìm và hiện thị ra kết
quả tên sách giá bán.
Nguyễn Đức Thịnh 8
Tìm hiểu về EmberJs và thiết kế website bán sách
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.
2.1.1 NodeJS.
Đầu tiên cần cài môi trường NodeJS vì Ember.js là một framework JavaScript, và
để chạy được các ứng dụng Ember.js, bạn cần có môi trường JavaScript runtime. Node.js
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.
Ember CLI(Command Line Interface) là giao diện dòng lệnh là cách chính thức để
tạo, xây dựng, kiểm tra và phục vụ các tệp tạo nên ứng dụng hoặc addon Ember.
CLI được thiết kế để tương thích ngược với các ứng dụng Ember cũ hơn và duy trì
lịch phát hành 6 tuần, tạo điều kiện thuận lợi cho việc cập nhật và mở rộng. Mục tiêu của
CLI là giúp nhà phát triển tập trung vào việc xây dựng các ứng dụng tuyệt vời mà không
cần lo lắng về việc phối hợp các thành phần với nhau trong quá trình phát triển ứng dụng.
Điều này giúp ứng dụng dễ bảo trì và dễ tiếp cận, nhờ vào việc thiết lập mẫu kiến trúc
giữa các cá nhân, nhóm và công ty.
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.
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.Ember CLI 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.2 Cấu trúc của một thư mục ứng dụng EmberJs.
ember-project/
|- app/
| |- adapters/
| |- components/
| |- controllers/
| |- helpers/
| |- models/
| |- routes/
| |- styles/
| |- templates/
| |- app.js
| |- router.js
|
|- config/
| |- environment.js
|
|- public/
|
|- tests/
| |- acceptance/
| |- helpers/
| |- integration/
| |- unit/
|
|- vendor/
|
|- .ember-cli
|- .eslintrc.js
|- .gitignore
|- ember-cli-build.js
|- package.json
|- README.md
đây là thư mục chưa các models, components, routes, templates and styles được
lưu trữ. Đa số tất cả code của một developer sẽ được phát triển trong thư mục này.
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.
2.2.3 Config.
2.2.4 Dist.
Khi xây dựng một ứng dung web, thì tất cả các file đầu ra sẽ được lưu trong thư
mục này.
Ember js là một framwork 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.
2.2.6 Public.
Thư mục này chưa tất cả phần liên quan tới fonts, images, ....
2.2.7 Vendor.
Thư mục này chứa các file như javascript, css mà không được quản lý bỏi bower.
Thư mục chưa các output của phần auto test trong Ember.
2.2.9 Ember-cli-build.js.
tập tin mô tả Ember CLI tạo dưng một ứng dụng Ember.
Để có thể sử dụng các mã code trong EmberJs, bạn cần phải hiểu nó hoạt động
như thế nào và các phần tạo ra nó. EmberJs có 6 phần sau:
2.3.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:
Thêm vào đó, Emberjs cũng hỗ trợ cho các biểu hiện thường xuyên và tự động cập nhật
các biểu thức.
Application Template
Nếu người dùng không xác định mẫu trong ứng dụng của người dùng,
Ember.js sẽ mặc định tạo một mẫu ứng dụng . Ember.js mẫu được đặt
trong <script> . Người dùng phải xác định ít nhất một vị trí: {{outlet}} để router điền
các mẫu thích hợp.
<script type="text/x-handlebars">
<div>
{{outlet}}
</div>
<h2>{{App.name}}</h2>
</script>
Trong đoạn code trên, tôi sử dụng các handlebar template. Nó được khai báo
bên trong thẻ script giúp hiển thị các thuộc tính name của ứng dụng.
Handlebars Basics
Ember.js sử dụng handlebar template để xây dựng UI. Nó là giống như HTML
và cũng có khả năng nhúng các biểu thức. Các handlebar expression có một bộ điều
khiển hiển thị các giá trị cập nhật của các thuộc tính.
<script type="text/x-handlebars">
Hi, <h2>{{App.firstName}} {{App.lastName}}</h2>
</script>
Đoạn code trên hiển thị các giá trị của firstName và lastName.
Conditionals
Các Ember.js định nghĩa hai câu điều kiện, giúp kiểm soát chương trình. Đây
là bắt đầu với # (Hash) . 2 kiểu câu điều kiện là: #if và #unless.
2.3.2 Controller
Controller về cơ bản được dùng để quản lý logic hiển thị của model và cũng kiểm
soát các hoạt động giữa các routes, model, và view. Chúng hoạt động theo cách giúp truy
xuất vào các thuộc tính của model và cho phép template truy xuất các thuộc tính đó để
xuất ra phần hiển thị. Vì vậy, template và controller luôn có sự kết nối với nhau. EmberJs
tạo ra bộ điều khiển tự động.
Hình 2.2 Các khớp nối của mẫu, điều khiển và mô hình
Các mẫu có liên quan đến các bộ điều khiển và nhận được tài sản của họ từ nó.
Các giao dịch mẫu với các bộ điều khiển và bộ điều khiển giao dịch với các mô hình.
Một mô hình không biết về bộ điều khiển được trang trí nó và điều khiển không biết về
quan điểm đó được đại diện cho các thuộc tính của nó.
Representing Models
Bộ điều khiển Ember.js có các thuộc tính proxy, vì vậy mà người dùng có thể
trực tiếp gọi các thuộc tính trong mẫu của người dùng. Templates tài sản từ các mô
hình và luôn luôn kết nối với bộ điều khiển, không phải mô hình riêng biệt. Ví dụ,
người dùng có thể mất {{name}} tài sản chứ không phải là {{ model.name}} trong đó
tài sản Ember.js proxy từ mô hình. Các Ember.ArrayConroller cung cấp proxy từ một
mảng và Ember.ObjectConroller cung cấp proxy từ một đối tượng.
Đôi khi người dùng cần phải tiết kiệm tài sản của các ứng dụng trên máy chủ
của người dùng. Người dùng có thể lưu trữ thời gian tính ứng dụng cuộc sống bằng
cách lưu trữ nó trên một bộ điều khiển.
Đại diện cho các mô hình duy nhất, bạn có thể tận dụng các
Ember.ObjectController . Thiết lập mô hình tài sản của ObjectController trong những
tuyến đường setupController để đại diện cho các mô hình mà bạn đang sử dụng. Các
mẫu hình cho một ObjectController cho giá trị của một tài sản và bộ điều khiển sẽ cho
một tài sản có cùng tên trong mô hình.
Ember.ObjectController.extend({
//put your properties
});
Representing Multiple Models with Arraycontroller
Đại diện cho các mảng của các mô hình, người dùng có thể tận dụng các
Ember. ArrayController . Thiết lập mô hình tài sản của ArrayController trong những
tuyến đường setupController để đại diện cho các mô hình mà bạn đang sử dụng.use.
Ember.ArrayController.extend({ //do the logic });
Trong thời gian làm tổ các nguồn lực người dùng cần phải thiết lập kết nối
giữa hai bộ điều khiển và bạn cũng có thể kết nối nhiều bộ điều khiển với nhau bằng
cách sử dụng một mảng của bộ điều khiển.
Ember.Controller.extend({
nameofArray: ['value1', 'value2']
});
Trong đoạn code trên, nameofArray là một tên mảng tùy chỉnh được đưa ra bởi
người dùng và value1 và value2 là nội dung của mảng.
2.3.3 Routing
Mỗi route là một đại diện URL của đối tượng ứng dụng và chuyển nó thành nested
templates. Router có nhiệm vụ quản lý các trạng thái và tài nguyên cần thiết khi người
dùng điều hướng ứng dụng.
Để thực hiện việc này bạn cần tạo ra một route và xác định vị trí cụ thể của nó
trong ứng dụng. Các route sẽ xác định được các phần của ứng dụng và URL ( identifier
chủ chốt của Ember) sẽ tương tác với chúng.
Router truy vấn tới các model từ móc mô hình của chúng để cung cấp sẵn trong
controller và trong template. Router được khai báo trong các đối tượng Router singleton.
Là một ứng dụng phát triển phức tạp, ghi lại quá trình của router.
ENV.APP.LOG_TRANSITIONS = true;
Đoạn code trên chuyển các sự kiện chuyển đổi sang các sửa đổi.
Nếu EmberJs domain có nhiều ứng dụng web, Trong trường hợp đó người
dùng cần phải xác định các URL gốc để chỉ ra các routers.
Ember.Router.extend({
rootURL: 'Path'
});
Đoạn code trên mô tả làm thế nào để xác định các URL gốc. Những 'Path' là
đường dẫn URL gốc.
Defining Routes
Các router phù hợp với URL hiện tại với các routes đó là trách nhiệm hiển thị
mẫu, tải dữ liệu và thiết lập application state. Bản đồ các phương thức router được sử
dụng để định nghĩa các ánh xạ URL mà pass qua một chức năng mà có tham số như
một đối tượng để tạo ra các toutes. Các {{link-to}} helper điều hướng các bộ định
tuyến.
Router.map(function() {
this.route('link-page', { path: '/PathTolinkpage' });
this.route('link-page', { path: '/PathTolinkpage' });
});
Đoạn code trên mô tả làm thế nào để liên kết các trang khác nhau bằng cách sử
dụng bản đồ router. Nó lấy tên linkpage và path như một tham số.
Generated Objects
Nếu người dùng không xác định các đối tượng Route, Controller, View và
Template classes Ember.js sẽ tự động tạo ra các đối tượng này vào ứng dụng của người
dùng.
Generated Routes
Các Ember.js sẽ tự động tạo ra các route nếu bạn không xác định trong ứng
dụng của người dùng.
Generated Controllers
Các Ember.js sẽ tự động tạo ra các controller cho các route thích hợp, nếu nó
không được định nghĩa trong ứng dụng của người dùng.
2.3.4 Model
Model là đại diện của đối tượng liên quan đến data.Model và route có liên quan
đến nhau bởi vì model thực thi các routes bởi một tham số để gọi một route. Nó điều
khiển các dữ liệu được lưu trữ trong cơ sở dữ liệu. Thông qua Model để mở rộng các
chức năng của Ember Data. Ember data là một thư viện kết hợp chặt chẽ với Ember.js để
điều khiển với dữ liệu được lưu trữ trong cơ sở dữ liệu.
Store
Các store là kho lưu trữ trung ương và bộ nhớ cache của tất cả các hồ sơ có sẵn
trong một ứng dụng. Các tuyến đường và các bộ điều khiển có thể truy cập dữ liệu
được lưu trữ trong ứng dụng của người dùng. Các DS.Store được tạo ra tự động để
chia sẻ dữ liệu giữa các toàn bộ đối tượng.
this.store.find('model_type', id)
Ember.Route.extend({
model: function() {
return this.store.find();
}
});
this.store.find('model_type', id)
Models
Một mô hình là một lớp trong đó xác định các dữ liệu thuộc tính và hành vi.
Khi một người sử dụng làm mới trang, nội dung của trang sẽ được đại diện bởi một mô
hình. this.store.find('model_type', id)
DS.Model.extend({
birthday: DS.attr('date')
});
this.store.find('model_type', id)
Records
Một kỷ lục là một thể hiện của một mô hình trong đó có chứa thông tin đó
được tải từ một máy chủ và nó được xác định duy nhất bởi loại mô hình của nó và id.
this.store.find('model_type', id)
Adapter
Một bộ chuyển đổi là một đối tượng có trách nhiệm cho việc dịch hồ sơ yêu
cầu vào các cuộc gọi thích hợp cho riêng máy chủ phụ trợ.
Serializer
Một serializer có trách nhiệm chuyển dữ liệu JSON thành đối tượng kỷ lục.
Automatic Caching
Các hồ sơ lưu trữ bộ nhớ cache tự động và nó trả lại ví dụ cùng một đối tượng
khi các bản ghi lấy từ máy chủ cho lần thứ hai. Điều này cải thiện hiệu suất của ứng
dụng của người dùng.
2.3.5 View
Chức năng của view trong Ember.js là quản lý sự kiện xung quanh tương tác của
người dùng và chuyển chúng thành các sự kiện có ý nghĩa trong ứng dụng.
Các sự kiện người dùng khi cần xử lý gặp vấn đề quá khó và phức tạp
Người dùng có thể tạo ra một thành phần tái sử dụng được. View chịu trách nhiệm
xử lý các sự kiện người dùng và cập nhật các DOM. Các Handlebars templates được
đánh giá để tạo ra view. Trong đánh giá của các templates, view con sẽ được thêm vào.
Nó giúp giữ cho hệ thống ứng dụng mạnh mẽ bằng cách cung cấp các giao diện người
dùng phong phú.
2.3.6 Component
Ember.js components sử dụng W3C đặc tả thành phần web và các thành phần
cung cấp đúng đóng gói giao diện widget. Nó chứa các đặc điểm kỹ thuật chính như
templates, shadow DOM và các yếu tổ tùy chỉnh. Các thành phần được khai báo bên
trong data-template-name có tên đường dẫn thay vì một chuỗi. Các thành phần được bắt
đầu với "components/".
<script type="text/x-handlebars">
//component name
{{my-name}}
</script>
Trong đoạn code trên, my-name là tên của thành phầncđược khai báo bên trong
data-template-name như components/my-name.
Rất dễ dàng để xác định thành phần trong Ember.js bằng cách tạo 1 template có
tên bắt đầu với components/. Các thành phần phải có dấu gạch ngang trong tên. Ember.js
có sức mạnh của việc xác định các lớp con phần bằng cách sử dụng một
Ember.Component class.
<script type="text/x-handlebars">
//component name
{{my-comp}}
</script>
Trong đoạn code trên, my-comp là thành phần khai báo như components/my-
comp trong thẻ script tiếp theo. Bạn cũng có thể mở rộng Ember.Component class để có
nhiều hiệu ứng.
Người dùng cũng có thể định nghĩa một thành phần giúp để kết thúc các nội dung
được cung cấp bởi các mẫu khác và cũng vượt qua các thuộc tính cho mẫu khác.
Component cũng hỗ trợ cho khối và được bắt đầu bằng # trong mẫu.
<script type="text/x-handlebars">
//component name
{{my-comp title=title body=body}}
</script>
Trong đoạn code trên, chúng ta pass quá các tiêu đề và body properties với mẫu
khác.
Người dùng cũng có thể tùy chỉnh các thành phần Ember.js. Điều này có thể
được thực hiện bằng cách tạo ra các lớp con Ember.Component bằng cách bao gồm các
thuộc tính của nó và tên lớp.: Bảng sau đây liệt kê xuống các thuộc tính tùy biến các
thành phần: 1 Tùy biến thành phần Tùy chỉnh tên tag HTML theo nhu cầu phát triển. 2
Tùy biến lớp Names Tùy chỉnh tên lớp các tag HTML theo nhu cầu phát triển. 3 Tùy biến
thuộc tính Bạn có thể ràng buộc các thuộc tính đến các yếu tố DOM bằng cách sử dụng
attributeBindings.
Quy tắc đặt tên trong Emberjs giúp giảm thiểu lượng coder và ngầm xử lý mọi thứ.
Cách xác định và đặt tên các tài nguyên ảnh hưởng đến đặt tên các phần còn lại
( controller, model, view và template)
Template: product.
Nó cho người dùng một mối quan hệ ngữ nghĩa giữa các thành phần.
Về Điểm mạnh:
Kiến trúc MVC rõ ràng: Ember.js tuân thủ nghiêm ngặt mô hình MVC giúp tách
biệt logic xử lý và trình bày giao diện. Điều này làm cho code được tổ chức tốt hơn, dễ
bảo trì và mở rộng hơn.
Hỗ trợ các Component mạnh: Ember hỗ trợ xây dựng các Component độc lập, có
thể tái sử dụng dễ dàng. Điều này giúp giảm thiểu duplicating code, tăng khả năng mở
rộng và bảo trì cho ứng dụng.
LiveReload nhanh chóng: Ember hỗ trợ tính năng LiveReload giúp lập trình viên
có thể thấy ngay sự thay đổi khi code thay đổi, đặc biệt hữu ích trong quá trình phát triển
nhanh ban đầu.
Cộng đồng đông đảo và nhiều tài liệu học tập: EmberJs có một cộng đồng rộng lớn
trên toàn cầu, luôn cập nhật những kiến thức và phát triển mới nhất. Điều này giúp người
dùng mới dễ học và tiếp cận với framework.
Về điểm yếu:
Khởi tạo dự án phức tạp: Quá trình khởi tạo ban đầu của Ember yêu cầu nhiều cấu
hình và cài đặt thư viện hơn so với các framework nhẹ hơn.
Tạo ra nhiều callback phức tạp: Khi không quản lý tốt, Ember có thể dẫn đến
nhiều callback lồng nhau và logic phức tạp.
Tốc độ xử lý chậm hơn: So với các framework nhẹ hơn như Vue, tốc độ xử lý của
Ember thường chậm hơn do phụ thuộc nhiều dependency.
Dung lượng bundle lớn: Nếu không tối ưu hóa, kích thước bundle của các ứng
dụng Ember thường lớn hơn so với các framework khác.
Học quá nhiều thứ cho lần đầu: Để làm quen hoàn toàn với Ember, lập trình viên
phải học đủ kiến thức về MVC cũng như các thành phần riêng của Ember.
Cập nhật chậm hơn so với các framework mới: Ember đã ra mắt lâu năn nên tốc
độ cập nhật và phát triển các tính năng mới có phần chậm hơn so với các framework mới
như React, Angular,...
EmberJS là một framework JavaScript của SproutCore giúp xây dựng ứng dụng
web động. Nó sử dụng mô hình MVC để quản lý dữ liệu và tương tác với người dùng, kết
hợp với khả năng liên kết dữ liệu giúp tối ưu hóa hiệu suất phát triển. Có thể xây dựng
nên một trang web linh hoạt mang lại trải nghiệm tốt cho người dùng và quản lý dữ liệu
một cách hiệu quả.
Bài toán có thể được mô tả như sau: Xây dựng một trang web giới thiệu các sản
phẩm sách trong đó sử dụng EmberJs để hiển thị danh sách các sản phẩm sách và cung
cấp thông tin chi tiết cho mỗi cuốn sách khi người dùng chọn. Website gồm có 4 trang:
Trang chủ dùng để hiển thị sơ lược các cuốn sách để người dùng có thể hình dung được
nội dung mà trang web hướng đến.. Ở trang Sản phẩm sẽ hiển thị đầy đủ tất cả các cuốn
sách người dùng có thể tìm hiểu những thông tin cụ thể hơn bằng cách click vào bất kì
một cuốn sách nào đó sẽ được hiển thị thông tin như tên và giá bán, ngoài ra trang sản
phẩm cũng có thêm chức năng tìm kiếm giúp người dùng có thể tìm kiếm một cuốn sách
nào đó nhanh hơn. Trang đăng ký và đăng nhập giúp người dùng tạo tài khoản và đăng
nhập vào web 1 dễ dàng và nhanh chóng.Cuối cùng là trang giỏ hàng giúp người dùng có
thể thêm những sản phẩm sách có thể cập nhật số lượng và đặt hàng.
Hiển thị danh sách và chi tiết sản phẩm: Chức năng là hiển thị danh sách các
sản phẩm và cho phép người dùng xem chi tiết từng sản phẩm như tên và giá bán.
Tìm kiếm và lọc sản phẩm: Chức năng là người dùng có thể tìm kiếm sản phẩm
theo tên hoặc danh mục và cũng có thể lọc sản phẩm theo giá, phân loại hoặc các tiêu chí
khác.
Thêm sản phẩm giỏ hàng: Chức năng thêm sản phẩm là có thể thêm mới sản
phẩm vào giỏ hàng, có thể tăng và giảm số lượng sản phẩm và hiển thị hình ảnh của sản
phẩm, có thể xóa sản phẩm khỏi giỏ hàng, tính tổng các sản phẩm hiện có trong giỏ hàng
và thanh toán.
Giao diện người dùng thân thiện: Yêu cầu một giao diện người dùng phải dễ sử
dụng và thân thiện giúp người dùng dễ dàng tìm kiếm, lọc và xem thông tin chi tiết của
sản phẩm.
Hiệu suất và tốc độ: Đảm bảo trang web hoạt động mượt mà và có thời gian phản
hồi nhanh nhằm cung cấp trải nghiệm người dùng tốt nhất có thể.
Tính năng tương tác mạnh mẽ: Cung cấp tính năng thực hiện các hành động mà
không cần tải lại trang giúp tăng trải nghiệm người dùng.
Kiểm thử đầy đủ: Tiến hành kiểm thử chất lượng để đảm bảo tính ổn định và hiệu
suất của trang web cũng như xác nhận rằng tất cả các chức năng hoạt động đúng như
mong đợi.
Đây là một website bán sách có tính chuyên nghiệp cao với giao diện thiết kế bắt
mắt, trải nghiệm người dùng thân thiện. Các trang chủ, sản phẩm, tìm kiếm,giỏ hàng
được thiết kế gọn gàng, dễ dàng sử dụng.
Các chức năng cốt lõi của một website bán sách như xem sản phẩm, tìm kiếm,
thêm vào giỏ hàng, thanh toán,...đều hoạt động ổn định, thuận tiện cho người dùng.
Phân loại sách theo thể loại là tạo ra các ngăn để phân chia sách thành từng nhóm
chính như: Tâm lý,Sách kinh doanh, Sách phát triển bản thân, Truyền cảm hứng,... Theo
sở thích và đối tượng độc giả khác nhau.
Chức năng tìm kiếm sách theo tên là một tính năng cốt yếu trên một website bán
sách. Nó cho phép người dùng dễ dàng tìm thấy sách mình cần bằng cách nhập từ khóa
tìm kiếm.
Có một ô nhập liệu để người dùng đánh tên sách hoặc bất kỳ từ khóa nào liên
quan đến sách cần tìm.
Website sẽ trả về kết quả tìm kiếm là danh sách các sách có chứa từ khóa đã
nhập,hiển thị ra thông tin chi tiết của từng cuốn sách.
Chức năng thêm sách vào giỏ hàng là tính năng quan trọng trong quy trình mua
hàng trực tuyến. Nó cho phép người dùng chọn sách và lưu trữ tạm thời các mặt hàng
muốn mua.
Trên trang chi tiết sản phẩm, người dùng có thể thấy nút "Thêm vào giỏ ".
Khi nhấp vào, sách đó sẽ được lưu vào giỏ hàng tạm thời trên trình duyệt.
Nguyễn Đức Thịnh 30
Tìm hiểu về EmberJs và thiết kế website bán sách
Giỏ hàng có thể xem được ở mọi nơi trên website thông qua icon giỏ hàng.
Hiển thị được tổng cộng số lượng, tổng tiền các mặt hàng đã chọn.
Có thể cập nhật, xóa sản phẩm hoặc thanh toán giỏ hàng.
Giúp người dùng tiện lợi lưu trữ và quyết định mua hàng dễ dàng hơn.
Chức năng đăng ký/đăng nhập cho phép người dùng có thể tạo tài khoản cá nhân
trên website để:
Đăng ký:
Đăng nhập:
Kiểm tra xác thực và cho phép đăng nhập vào tài khoản.
Đăng nhập thành công sẽ chuyển đến trang chủ của website.
Phân loại sách: Cho phép phân chia sản phẩm ra nhiều nhóm phù hợp giúp người
dùng dễ dàng tìm kiếm sách cần mua.
Tìm kiếm sách: Cung cấp ô tìm kiếm để khách hàng nhập tên hoặc từ khóa liên
quan để nhanh chóng tìm thấy sách cần mua.
Đăng ký/Đăng nhập: Cho phép khách hàng tạo tài khoản cá nhân để quản lý
thông tin, lịch sử đơn hàng, tiện thanh toán sau này.
Giỏ hàng: Lưu trữ tạm thời các sách đã chọn mua, cập nhật số lượng, tổng tiền
trước khi thanh toán.
Những chức năng này đem đến cho người dùng trải nghiệm mua sách thuận tiện,
nhanh chóng từ tìm kiếm, lựa chọn đến thanh toán, góp phần mang đến cho người dùng
website.
Kết quả đạt được sau khi tìm hiểu về EmberJs một framework JavaScript mạnh
mẽ và linh hoạt để phát triển ứng dụng web động tôi đã thực hành tạo website bán sách
với giao diện dễ nhìn và các chức năng chính như tìm kiếm phân loại và giỏ hàng.
Hệ thống đánh giá, bình luận sách: Người dùng đánh giá sách, đọc bình luận của
người khác để có cái nhìn toàn diện hơn.
Quản lý danh sách mong muốn: Lưu trữ danh sách sách mong muốn mua sau, khi
có ưu đãi sẽ thông báo.
So sánh sản phẩm: Chọn 2-3 sách cùng loại để so sánh thông số kỹ thuật, đánh
giá người dùng.
Đặt hàng và thanh toán: Các tùy chọn thanh toán như thẻ tín dụng, chuyển khoản
ngân hàng...
Hệ thống ưu đãi, khuyến mãi: Mã giảm giá, tặng quà khi đạt mức đơn hàng.
Thông tin sự kiện: Thông báo chương trình khuyến mãi, triển lãm sách sắp diễn
ra.
http://www.en.w3eacademy.com/emberjs/emberjs_model.htm
PHỤ LỤC