Kết nối ứng dụng web của bạn với công cụ hiện đại
Giới thiệu
Allo’. Bất kỳ ai viết ứng dụng web đều biết tầm quan trọng của việc tự làm việc hiệu quả. Đó là một thách thức khi bạn phải lo lắng về các công việc tẻ nhạt như tìm đúng mã nguyên mẫu, thiết lập quy trình phát triển và kiểm thử cũng như rút gọn và nén tất cả các nguồn.
Thật may là công cụ giao diện người dùng hiện đại có thể giúp tự động hoá phần lớn việc này, nhờ đó bạn có thể tập trung vào việc viết một ứng dụng mạnh mẽ. Bài viết này sẽ hướng dẫn bạn cách dùng Yeoman, một quy trình công cụ cho các ứng dụng web để đơn giản hoá việc tạo ứng dụng bằng Polymer, một thư viện polyfills và đường để phát triển ứng dụng bằng Thành phần web.
Gặp gỡ Yo, Grunt và Bower
Yeoman là một người đàn ông đội mũ mang 3 công cụ giúp bạn cải thiện năng suất làm việc:
- yo là một công cụ scaffold (giàn giáo) cung cấp một hệ sinh thái gồm những khung cụ thể, được gọi là generators (trình tạo có thể được dùng để thực hiện một số công việc tẻ nhạt mà tôi đề cập trước đó).
- grunt được dùng để tạo, xem trước và kiểm thử dự án của bạn, nhờ có sự trợ giúp của các nhiệm vụ do nhóm Yeoman và grunt-contrib tuyển chọn.
- bower được dùng để quản lý phần phụ thuộc. Nhờ đó, bạn không còn phải tải xuống và quản lý tập lệnh theo cách thủ công nữa.
Chỉ cần một vài lệnh, Yeoman có thể viết mã nguyên mẫu cho ứng dụng của bạn (hoặc từng phần như Mô hình), biên dịch Sass, giảm thiểu và nối CSS, JS, HTML và hình ảnh, đồng thời kích hoạt một máy chủ web đơn giản trong thư mục hiện tại của bạn. Hộp cát về quyền riêng tư cũng có thể chạy các bài kiểm thử đơn vị của bạn và nhiều hoạt động khác.
Bạn có thể cài đặt các trình tạo từ Node Packaged Module (Mô-đun được đóng gói Node) (npm) và hiện có hơn 220 trình tạo, nhiều trình tạo trong số đó đã được cộng đồng nguồn mở viết. Các trình tạo phổ biến bao gồm generator-angular, generator-back xương và generator-ember.
Khi đã cài đặt phiên bản Node.js gần đây, hãy đến thiết bị đầu cuối gần nhất và chạy:
$ npm install -g yo
Vậy là xong! Giờ đây, bạn đã có Yo, Grunt và Bower và có thể chạy các công cụ này trực tiếp từ dòng lệnh. Dưới đây là kết quả chạy yo:
Máy phát điện polyme
Như tôi đã đề cập trước đó, Polymer là một thư viện gồm các polyfills và đường cho phép sử dụng Thành phần web trong các trình duyệt hiện đại. Dự án này cho phép các nhà phát triển xây dựng ứng dụng sử dụng nền tảng của ngày mai và thông báo cho W3C biết những nơi có thể cải tiến thông số kỹ thuật trong tiến trình.
generator-polymer là một trình tạo mới giúp bạn xây dựng các ứng dụng Polymer bằng Yeoman, cho phép bạn dễ dàng tạo và tuỳ chỉnh các phần tử Polymer (tuỳ chỉnh) thông qua dòng lệnh và nhập chúng bằng cách sử dụng tính năng Nhập HTML. Việc này giúp bạn tiết kiệm thời gian bằng cách viết mã nguyên mẫu.
Tiếp theo, hãy cài đặt trình tạo của Polymer bằng cách chạy:
$ npm install generator-polymer -g
Vậy là xong. Giờ đây, ứng dụng của bạn đã sở hữu siêu năng lực cho Thành phần web!
Trình tạo mới được cài đặt của chúng tôi có một số thông tin cụ thể mà bạn sẽ có quyền truy cập vào:
polymer:elementđược dùng để tạo các thành phần polymer riêng lẻ mới. Ví dụ:yo polymer:element carouselpolymer:appđược dùng để xây dựng (scaffold) ban đầu của bạn, một Gruntfile.js chứa cấu hình thời gian tạo bản dựng cho dự án cũng như các tác vụ Grunt và cấu trúc thư mục được đề xuất cho dự án. Bạn cũng có thể sử dụng Sass Tự thân khởi nghiệp cho các phong cách của dự án.
Hãy cùng tạo một ứng dụng Polymer
Chúng ta sẽ xây dựng một blog đơn giản bằng cách sử dụng một số thành phần Polymer tuỳ chỉnh và trình tạo mới.
Để bắt đầu, hãy chuyển đến cửa sổ dòng lệnh, tạo một thư mục mới và cd vào thư mục đó bằng mkdir my-new-project && cd $_. Giờ đây, bạn có thể khởi động ứng dụng Polymer bằng cách chạy:
$ yo polymer
Công cụ này sẽ tải phiên bản Polymer mới nhất của Bower và thiết lập index.html, cấu trúc thư mục và tác vụ Grunt cho quy trình làm việc của bạn. Còn chần chờ gì mà không uống một tách cà phê trong khi chờ ứng dụng hoàn tất?
Được rồi, tiếp theo, chúng ta có thể chạy grunt server để xem trước giao diện của ứng dụng:
Máy chủ này hỗ trợ LiveReload, nghĩa là bạn có thể kích hoạt trình chỉnh sửa văn bản, chỉnh sửa phần tử tuỳ chỉnh và trình duyệt sẽ tải lại khi lưu. Nhờ đó, bạn có thể xem trạng thái hiện tại của ứng dụng theo thời gian thực.
Tiếp theo, hãy tạo một phần tử Polymer mới để đại diện cho một bài đăng trên blog.
$ yo polymer:element post
Yeoman hỏi chúng tôi một vài câu như liệu chúng ta muốn thêm hàm khởi tạo hay dùng tính năng Nhập HTML để đưa phần tử bài đăng vào index.html. Bây giờ, hãy nói Không với hai lựa chọn đầu tiên và để trống lựa chọn thứ ba.
$ yo polymer:element post
[?] Would you like to include constructor=''? No
[?] Import to your index.html using HTML imports? No
[?] Import other elements into this one? (e.g 'another_element.html' or leave blank)
create app/elements/post.html
Thao tác này sẽ tạo một phần tử Polymer mới trong thư mục /elements có tên post.html:
<polymer-element name="post-element" attributes="">
<template>
<style>
@host { :scope {display: block;} }
</style>
<span>I'm <b>post-element</b>. This is my Shadow DOM.</span>
</template>
<script>
Polymer('post-element', {
//applyAuthorStyles: true,
//resetStyleInheritance: true,
created: function() { },
enteredView: function() { },
leftView: function() { },
attributeChanged: function(attrName, oldVal, newVal) { }
});
</script>
</polymer-element>
Bảng này gồm có:
- Mã tạo sẵn cho phần tử tuỳ chỉnh của bạn, cho phép bạn sử dụng loại phần tử DOM tuỳ chỉnh trong trang của mình (ví dụ:
<post-element>) - Thẻ mẫu dành cho mẫu phía máy khách "gốc" và kiểu theo phạm vi mẫu để đóng gói các kiểu của phần tử
- Mẫu nguyên mẫu đăng ký và sự kiện trong vòng đời của phần tử.
Làm việc với một nguồn dữ liệu thực
Blog của chúng tôi cần một nơi để viết và đọc bài đăng mới. Để minh hoạ cách làm việc với dịch vụ dữ liệu thực, chúng ta sẽ sử dụng API Bảng tính Google Apps. Điều này cho phép chúng tôi dễ dàng đọc nội dung của bất kỳ bảng tính nào được tạo bằng Google Tài liệu.
Hãy cùng thiết lập:
Trong trình duyệt (đối với các bước này, bạn nên dùng Chrome) để mở Bảng tính Google Tài liệu này. Tệp này chứa dữ liệu bài đăng mẫu trong các trường sau:
- Mã nhận dạng
- Tiêu đề
- Tác giả
- Nội dung
- Ngày
- Từ khoá
- Email (của tác giả)
- Slug (cho URL slug của bài đăng)
Chuyển đến trình đơn Tệp rồi chọn Tạo bản sao để tạo bản sao bảng tính của riêng bạn. Bạn có thể tuỳ ý chỉnh sửa nội dung, thêm hoặc xoá bài đăng.
Chuyển đến trình đơn Tệp một lần nữa, rồi chọn Xuất bản lên web.
Nhấp vào bắt đầu xuất bản
Trong mục Lấy đường liên kết đến dữ liệu đã xuất bản, từ hộp văn bản cuối cùng, hãy sao chép phần khoá của URL được cung cấp. Nó trông như thế này: https://docs.google.com/spreadsheet/ccc?key=0AhcraNy3sgspdDhuQ2pvN21JVW9NeVA0M1h4eGo3RGc#gid=0
Dán khoá vào URL sau đây có dòng chữ your-key-goes-here: https://spreadsheets.google.com/feeds/list/your-key-goes-here/od6/public/values?alt=json-in-script&callback=. Ví dụ về cách dùng khoá ở trên có thể có dạng như https://spreadsheets.google.com/feeds/list/0AhcraNy3sgspdDhuQ2pvN21JVW9NeVA0M1h4eGo3RGc/od6/public/values?alt=json-in-script
Bạn có thể dán URL vào trình duyệt và chuyển tới trình duyệt đó để xem phiên bản JSON của nội dung blog. Sau đó, hãy ghi lại URL và dành chút thời gian để xem xét định dạng của dữ liệu này, vì bạn sẽ phải lặp lại để hiển thị URL trên màn hình sau này.
Thông tin đầu ra JSON trong trình duyệt của bạn có thể hơi khó khăn, nhưng bạn đừng lo lắng! Chúng tôi thực sự chỉ quan tâm đến dữ liệu bài đăng của bạn.
API Bảng tính Google xuất ra từng trường trong bảng tính blog của bạn với một tiền tố đặc biệt post.gsx$. Ví dụ: post.gsx$title.$t, post.gsx$author.$t, post.gsx$content.$t, v.v. Khi lặp lại từng "hàng" trong đầu ra JSON, chúng ta sẽ tham chiếu các trường này để trả về các giá trị liên quan cho từng bài đăng.
Bây giờ, bạn có thể chỉnh sửa phần tử bài đăng mới được thiết lập để bind các phần đánh dấu vào dữ liệu trong bảng tính của mình. Để làm như vậy, chúng tôi ra mắt thuộc tính post. Thuộc tính này sẽ đọc cho tiêu đề bài đăng, tác giả, nội dung và các trường khác mà chúng ta đã tạo trước đó. Thuộc tính selected (chúng ta sẽ điền sau) được dùng để chỉ hiện bài đăng nếu người dùng di chuyển đến đúng sên của bài đăng đó.
<polymer-element name="post-element" attributes="post selected">
<template>
<style>
@host { :scope {display: block;} }
</style>
<div class="col-lg-4">
<template if="[[post.gsx$slug.$t === selected]]">
<h2>
<a href="#[[post.gsx$slug.$t]]">
[[post.gsx$title.$t ]]
</a>
</h2>
<p>By [[post.gsx$author.$t]]</p>
<p>[[post.gsx$content.$t]]</p>
<p>Published on: [[post.gsx$date.$t]]</p>
<small>Keywords: [[post.gsx$keywords.$t]]</small>
</template>
</div>
</template>
<script>
Polymer('post-element', {
created: function() { },
enteredView: function() { },
leftView: function() { },
attributeChanged: function(attrName, oldVal, newVal) { }
});
</script>
</polymer-element>
Tiếp theo, hãy tạo một phần tử blog chứa cả tập hợp bài đăng và bố cục cho blog bằng cách chạy yo polymer:element blog.
$ yo polymer:element blog
[?] Would you like to include constructor=''? No
[?] Import to your index.html using HTML imports? Yes
[?] Import other elements into this one? (e.g 'another_element.html' or leave blank) post.html
create app/elements/blog.html
Lần này, chúng ta nhập blog vào index.html bằng cách sử dụng tính năng nhập HTML theo cách chúng ta muốn blog đó xuất hiện trên trang. Riêng đối với câu lệnh thứ ba, chúng ta chỉ định post.html làm phần tử mà chúng ta muốn đưa vào.
Như trước đây, một tệp phần tử mới được tạo (blog.html) và thêm vào /element, lần này nhập post.html và bao gồm <post-element> bên trong thẻ mẫu:
<link rel="import" href="post.html">
<polymer-element name="blog-element" attributes="">
<template>
<style>
@host { :scope {display: block;} }
</style>
<span>I'm <b>blog-element</b>. This is my Shadow DOM.</span>
<post-element></post-element>
</template>
<script>
Polymer('blog-element', {
//applyAuthorStyles: true,
//resetStyleInheritance: true,
created: function() { },
enteredView: function() { },
leftView: function() { },
attributeChanged: function(attrName, oldVal, newVal) { }
});
</script>
</polymer-element>
Khi chúng tôi đã yêu cầu nhập phần tử blog bằng cách sử dụng tính năng nhập HTML (một cách để bao gồm và sử dụng lại tài liệu HTML trong các tài liệu HTML khác) vào chỉ mục, chúng tôi cũng có thể xác minh rằng phần tử đó đã được thêm đúng cách vào tài liệu <head>:
<!doctype html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="styles/main.css">
<!-- build:js scripts/vendor/modernizr.js -->
<script src="bower_components/modernizr/modernizr.js"></script>
<!-- endbuild -->
<!-- Place your HTML imports here -->
<link rel="import" href="elements/blog.html">
</head>
<body>
<div class="container">
<div class="hero-unit" style="width:90%">
<blog-element></blog-element>
</div>
</div>
<script>
document.addEventListener('WebComponentsReady', function() {
// Perform some behaviour
});
</script>
<!-- build:js scripts/vendor.js -->
<script src="bower_components/polymer/polymer.min.js"></script>
<!-- endbuild -->
</body>
</html>
Quá tuyệt!
Thêm phần phụ thuộc bằng Bower
Tiếp theo, hãy chỉnh sửa phần tử để sử dụng phần tử tiện ích Polymer JSONP để đọc trong posts.json. Bạn có thể tải bộ chuyển đổi bằng cách git nhân bản kho lưu trữ hoặc cài đặt polymer-elements thông qua Bower bằng cách chạy bower install polymer-elements.
Khi bạn có tiện ích, bạn cần đưa tiện ích đó vào dưới dạng nhập trong phần tử blog.html của mình với:
<link rel="import" href="../bower_components/polymer-jsonp/polymer-jsonp.html">
Tiếp theo, hãy gắn thẻ cho thẻ đó và cung cấp url vào bảng tính bài đăng trên blog của chúng ta từ trước, thêm &callback= vào cuối:
<polymer-jsonp auto url="https://spreadsheets.google.com/feeds/list/your-key-value/od6/public/values?alt=json-in-script&callback=" response="[[posts]]"></polymer-jsonp>
Do vậy, giờ đây, chúng ta có thể thêm mẫu để lặp lại bảng tính sau khi bảng tính được đọc. Thao tác đầu tiên sẽ xuất ra mục lục, với tiêu đề được liên kết cho một bài đăng chỉ vào con ốc sên.
<!-- Table of contents -->
<ul>
<template repeat="[[post in posts.feed.entry]]">
<li><a href="#[[post.gsx$slug.$t]]">[[post.gsx$title.$t]]</a></li>
</template>
</ul>
Phần thứ hai hiển thị một thực thể của post-element cho mỗi mục nhập tìm được, chuyển nội dung bài đăng đến thực thể tương ứng. Xin lưu ý rằng chúng ta đang truyền thuộc tính post biểu thị nội dung bài đăng cho một hàng trong bảng tính và thuộc tính selected (sẽ được điền bằng một tuyến đường).
<!-- Post content -->
<template repeat="[[post in posts.feed.entry]]">
<post-element post="[[post]]" selected="[[route]]"></post-element>
</template>
Thuộc tính repeat mà bạn thấy đang được sử dụng trong mẫu của chúng tôi sẽ tạo và duy trì một thực thể có [[ bindings ]] cho mọi phần tử trong tập hợp mảng của các bài đăng khi nó được cung cấp.
Bây giờ, để có thể điền [[route]] hiện tại, chúng ta sẽ gian lận và sử dụng thư viện có tên là Flatiron Director (Thư viện) liên kết với [[route]] bất cứ khi nào hàm băm URL thay đổi.
Rất may là chúng ta có phần tử Polymer (một phần trong gói nhiều thành phần hơn). Sau khi sao chép vào thư mục /element, chúng ta có thể tham chiếu thư mục này bằng <flatiron-director route="[[route]]" autoHash></flatiron-director>, chỉ định route làm thuộc tính mà chúng ta muốn liên kết và yêu cầu nó tự động đọc giá trị của mọi thay đổi về hàm băm (autoHash).
Giờ đây, khi kết hợp các yếu tố lại với nhau, chúng ta sẽ có:
<link rel="import" href="post.html">
<link rel="import" href="polymer-jsonp/polymer-jsonp.html">
<link rel="import" href="flatiron-director/flatiron-director.html">
<polymer-element name="blog-element" attributes="">
<template>
<style>
@host { :scope {display: block;} }
</style>
<div class="row">
<h1><a href="/#">My Polymer Blog</a></h1>
<flatiron-director route="[[route]]" autoHash></flatiron-director>
<h2>Posts</h2>
<!-- Table of contents -->
<ul>
<template repeat="[[post in posts.feed.entry]]">
<li><a href="#[[post.gsx$slug.$t]]">[[post.gsx$title.$t]]</a></li>
</template>
</ul>
<!-- Post content -->
<template repeat="[[post in posts.feed.entry]]">
<post-element post="[[post]]" selected="[[route]]"></post-element>
</template>
</div>
<polymer-jsonp auto url="https://spreadsheets.google.com/feeds/list/0AhcraNy3sgspdHVQUGd2M2Q0MEZnRms3c3dDQWQ3V1E/od6/public/values?alt=json-in-script&callback=" response="[[posts]]"></polymer-jsonp>
</template>
<script>
Polymer('blog-element', {
created: function() {},
enteredView: function() { },
leftView: function() { },
attributeChanged: function(attrName, oldVal, newVal) { }
});
</script>
</polymer-element>
Tuyệt vời! Giờ đây, chúng ta đã có một blog đơn giản chuyên đọc dữ liệu từ JSON và sử dụng hai phần tử Polymer được xây dựng với Yeoman.
Làm việc với các phần tử của bên thứ ba
Gần đây, hệ sinh thái phần tử xung quanh Thành phần web đã phát triển với các trang web thư viện thành phần như customelements.io bắt đầu xuất hiện. Xem qua các phần tử do cộng đồng tạo ra, tôi đã tìm thấy một phần tử để tìm nạp hồ sơ gravatar và chúng tôi thực sự cũng có thể lấy và thêm phần tử đó vào trang blog của mình.
Sao chép các nguồn phần tử xử lý vào thư mục /elements của bạn, đưa vào thư mục đó qua tính năng nhập HTML trong post.html rồi thêm
<link rel="import" href="gravatar-element/src/gravatar.html">
<polymer-element name="post-element" attributes="post selected">
<template>
<style>
@host { :scope {display: block;} }
</style>
<div class="col-lg-4">
<template if="[[post.gsx$slug.$t === selected]]">
<h2><a href="#[[post.gsx$slug.$t]]">[[post.gsx$title.$t]]</a></h2>
<p>By [[post.gsx$author.$t]]</p>
<gravatar-element username="[[post.gsx$email.$t]]" size="100"></gravatar-element>
<p>[[post.gsx$content.$t]]</p>
<p>[[post.gsx$date.$t]]</p>
<small>Keywords: [[post.gsx$keywords.$t]]</small>
</template>
</div>
</template>
<script>
Polymer('post-element', {
created: function() { },
enteredView: function() { },
leftView: function() { },
attributeChanged: function(attrName, oldVal, newVal) { }
});
</script>
</polymer-element>
Hãy cùng tìm hiểu những lợi ích mà công cụ này mang lại:
Xin chúc mừng!
Trong một thời gian tương đối ngắn, chúng tôi đã tạo một ứng dụng đơn giản bao gồm một số thành phần web mà không phải lo lắng về việc viết mã nguyên mẫu, tải các phần phụ thuộc xuống theo cách thủ công hoặc thiết lập máy chủ cục bộ hoặc xây dựng quy trình công việc.
Tối ưu hoá ứng dụng của bạn
Quy trình công việc của Yeoman bao gồm một dự án nguồn mở khác có tên Grunt – một trình chạy tác vụ có thể chạy một số tác vụ dành riêng cho bản dựng (được xác định trong Gruntfile) để tạo ra một phiên bản tối ưu hoá cho ứng dụng của bạn. Việc tự chạy grunt sẽ thực thi tác vụ default mà trình tạo đã thiết lập để tìm lỗi mã nguồn, kiểm thử và xây dựng:
grunt.registerTask('default', [
'jshint',
'test',
'build'
]);
Tác vụ jshint ở trên sẽ kiểm tra tệp .jshintrc để tìm hiểu các lựa chọn ưu tiên của bạn, sau đó chạy tệp đó trên tất cả các tệp JavaScript trong dự án. Để xem thông tin chi tiết về các tuỳ chọn bằng JSHint, hãy xem tài liệu.
Tác vụ test có dạng như sau và có thể tạo và phân phát ứng dụng của bạn cho khung kiểm thử mà chúng tôi đề xuất ngay từ đầu, Mocha. Nền tảng này cũng sẽ thực thi các chương trình kiểm thử cho bạn:
grunt.registerTask('test', [
'clean:server',
'createDefaultTemplate',
'jst',
'compass',
'connect:test',
'mocha'
]);
Vì ứng dụng trong trường hợp này khá đơn giản, nên chúng ta sẽ tuỳ ý viết mã kiểm thử thành một bài tập riêng. Có một vài việc khác mà chúng ta cần có đối với quy trình xây dựng, vì vậy hãy xem tác vụ grunt build được xác định trong Gruntfile.js sẽ làm những gì:
grunt.registerTask('build', [
'clean:dist', // Clears out your .tmp/ and dist/ folders
'compass:dist', // Compiles your Sassiness
'useminPrepare', // Looks for <!-- special blocks --> in your HTML
'imagemin', // Optimizes your images!
'htmlmin', // Minifies your HTML files
'concat', // Task used to concatenate your JS and CSS
'cssmin', // Minifies your CSS files
'uglify', // Task used to minify your JS
'copy', // Copies files from .tmp/ and app/ into dist/
'usemin' // Updates the references in your HTML with the new files
]);
Chạy grunt build và một phiên bản ứng dụng đã sẵn sàng phát hành công khai sẽ được tạo và sẵn sàng để bạn phát hành. Hãy thử xem.
Thành công!
Nếu gặp khó khăn, bạn có thể tham khảo phiên bản tạo sẵn của blog polymer-blog để xem tại https://github.com/addyosmani/polymer-blog.
Chúng tôi còn có gì khác trong cửa hàng?
Các Thành phần web vẫn đang trong giai đoạn phát triển và công cụ xung quanh các Thành phần web đó cũng vậy.
Chúng tôi hiện đang xem xét cách người dùng có thể nối với các lệnh nhập HTML để cải thiện hiệu suất tải thông qua các dự án như Vulcanize (một công cụ của dự án Polymer) và cách hệ sinh thái dành cho các thành phần có thể hoạt động với một trình quản lý gói như Bower.
Chúng tôi sẽ thông báo cho bạn khi có câu trả lời phù hợp hơn cho các câu hỏi này. Tuy nhiên, phía trước còn rất nhiều thời gian thú vị.
Cài đặt Polymer độc lập bằng Bower
Nếu muốn khởi động nhẹ hơn so với Polymer, bạn có thể cài đặt ứng dụng độc lập trực tiếp từ Bower bằng cách chạy:
bower install polymer
Thao tác này sẽ thêm đối tượng đó vào thư mục ware_component. Sau đó, bạn có thể tham chiếu mã này trong chỉ mục ứng dụng của mình theo cách thủ công và cải tiến trong tương lai.
Bạn cảm nhận như thế nào?
Bây giờ, bạn đã biết cách xây dựng ứng dụng Polymer bằng Thành phần web với Yeoman. Nếu bạn muốn phản hồi về trình tạo, vui lòng cho chúng tôi biết trong phần bình luận hoặc báo cáo lỗi hay đăng lên công cụ theo dõi lỗi của Yeoman. Chúng tôi rất muốn biết có điều gì khác mà bạn muốn thấy trình tạo này hoạt động tốt hơn không vì chúng tôi chỉ có thể cải thiện thông qua việc sử dụng và phản hồi của bạn :)