日本語
EnglishPhát triển GAS bằng Typescript
Giới thiệu
Trước đây, GAS (Google App Script) chỉ có thể được phát triển bằng Javascript, và không có bất kỳ một công cụ phát triển chính thức trên PC nào từ Google, vì thế các nhà phát triển chỉ có thể làm việc trực tiếp trên Cloud, họ không thể sử dụng các công cụ quản lý source code như Git chẳng hạn.
Tuy nhiên, vào năm 2018, Google đã cung cấp một công cụ mới tên là Clasp, mà có thể clone source javascript xuống local và có thể push chúng lên lại cloud.
Các nhà phát triển có thể tải trực tiếp công cụ GAS từ Google Cloud, và quản lý source code trên bất kỳ một server Git nào, và cuối cùng release chương trình của mình lên Google App.
Hơn nữa, nó hỗ trợ cho việc nhiề u nhà phát triển có thể tham gia và phát triển cùng 1 lúc và trên cùng 1 dự án.
Thêm vào, có thể chỉnh sửa chương trình bằng Typescript, push chúng và chạy trực tiếp trên Google cloud. Nếu họ đang chỉ phát triển bằng Javascript, thì họ sẽ nghĩ là đang phát triển với một công nghệ cũ kỹ. Điều đó có thể dẫn đến việc giảm động lực. Phát triển bằng Typescript sẽ giúp cho các nhà phát triển tăng động lực hơn khi chỉ phát triển bằng javascript và giúp cho họ có thể luyện tập khi muốn tìm hiểu về nó.
Lần này, tôi xin giới thiệu về quy trình build một môi trường phát triển local và upload chương trình lên GAS, sẽ rất hữu dụng cho những bạn muốn bắt đầu GAS development.
Lưu ý: Tôi sẽ bỏ qua việc diễn giải cài đặt node.js hoặc npm, v.v…
Môi trường phát triển
- iOS Version 10.15.1
- VSCode Version: 1.41.1
- Node.js Version: 11.9.0
- npm Version: 6.13.4
- TSlint Version: 5.20.1
Cài đặt Clasp
Mở cửa sổ console trên máy của mình, và thực hiện command bên dưới.
npm i @google/clasp -g
Tạo Git repository và clone
Tạo một repository ở một server Git mà bạn muốn sử dụng.
Tạo một folder project và thực hiện clone git vào trong folder đó.
* Nếu bạn không muốn dùng git, bạn có thể bỏ qua bước này.
Tạo môi trường phát triển GAS và project solution
- Bật ON tính năng “configure Google Apps Script API”.
Có thể kiểm tra và chỉnh sửa ở trang này.
https://script.google.com/home/usersettings
- Đăng nhập vào GAS thông qua Clasp.
Thực hiện chạy command bên dưới ở cửa sổ terminal trên local
clasp login
Sau đó mở trang login của Google bằng trình duyệt web của bạn.
Nhập thông tin và đăng nhập
(Có thể tắt trang sau khi đăng nhập bằng trình duyệt web) - Tạo GAS project. Tạo một project mang tên là “TS-sample”. Thực hiện chạy command bên dưới.
clasp create TS-sample - Sau khi hiển thị message. Chọn “standalone”. Bởi vì đây là chương trình giới thiệu cho nên tôi tạo đơn giản mà thôi.
- Trong trường hợp hiển thị message bên dưới thì có nghĩa là bạn đã chạy command thành công.
“Created new standalone script: https://script.google.com/d/xxx-j_FUBeR4nTw7CK5gAkOOrmOzk8vi7Iud3szJX6mplzt1if3e4swBV/edit”
Bên trong URL, có bao gồm luôn cả “scriptId”
“xxx-j_FUBeR4nTw7CK5gAkOOrmOzk8vi7Iud3szJX6mplzt1if3e4swBV” - Thực hiện chạy command bên dưới để tạo file “package.json”
npm init -y - Thực hiện chạy command bên dưới để cài đặt calsp của tslint
npm install @google/clasp tslint -D - Thực hiện chạy command bên dưới để cài đặt GAS library definition.
npm install @types/google-apps-script -S - Thực hiện chạy command bên dưới để tạo file định nghĩa tslint.
tslint --init - Thực hiện chạy command bên dưới để cài đặt prettier.
npm install prettier tslint-config-prettier tslint-plugin-prettier -D - Chỉnh sửa file “tslint.json” để định nghĩa lại tslint và prettier. Mở file “tslint.json” và chỉnh sửa theo bên dưới.
{
"defaultSeverity": "error",
"extends": [
"tslint:recommended",
"tslint-config-prettier"
],
"jsRules": {},
"rules": {
"prettier": true,
"interface-name": [false]
},
"rulesDirectory": ["tslint-plugin-prettier"]
}
Thiết lập code format của Visual Studio Code
- Mở VSCode và mở màn hình ”Setting”
- Chọn vào icon file như hình, thì các file setting có định dạng json sẽ được hiển thị.
- Chỉnh sửa như bên dưới để thực hiện format lại code chỉ khi edit các file typescript. File thiết lập là các file có dạng json. Lưu lại sau khi chỉnh sửa xong.
{
"[typescript]": {
"editor.formatOnSave": false,
"editor.codeActionsOnSave": {
"source.fixAll.tslint": true
}
}
}
Phát triển
- Sau khi hoàn thành xong các thiết lập môi trường, thì mình bắt đầu tạo chương trình.
Đầu tiên, là tạo file “Code.ts”
※Nếu đã tồn tại file “Code.js”, thì đổi tên file thành”Code.ts”. - Tạo chương trình có xử lý là khởi tạo chuỗi bằng việc sử dụng “const” và xuất ra log.
function myFunction() {
const text = "Hello World";
Logger.log(text);
}
Push lên Google Cloud
Sau khi hoàn thành xong, push chương trình lên Google App.
Thực hiện chạy command bên dưới.
clasp push
Khi đó chương trình sẽ tự động chuyển đổi sang GAS javascript và nó sẽ hiển thị như bên dưới.
Chúng ta có thể thu được kết quả giống như khi thực hiện phát triển chỉ trên GAS
Push lên Git
Có thể quản lý chương trình và tham gia vào việc phát triển nếu bạn commit và push những file này.
- Typescript files cho chương trình GAS
- appsscript.json cho việc cấu hình GAS
- package.json cho việc cấu hình npm
- tslint.json cho coding rules
Kết luận
Cung cấp Clasp và hỗ trợ Typescript dẫn đến việc phát triển GAS app dễ dàng hơn trước rất nhiều.
Việc cảm giác phát triển như macro của Microsoft Excel sẽ biến mất. Thay vào đó, GAS có thể quản lý Gmail, Google sheet, G-drive và các chương trình Google khác dễ dàng hơn. Bạn có cơ hội thực hiện quản lý các tasks tự động nếu như sử dụng những dịch vụ này thường xuyên.
Tôi sẽ rất vui nếu bạn có thể ứng dụng được nó.
Tham khảo
Google Clasp Guide
GASをClaspとTypescriptでローカル開発してみた。(Clasp / Typescript / TSLint / Prettier)