Viết desktop app bằng Electron
Các bạn có biết đến trình soạn thảo Atom của Github không nhỉ. Atom là một dự án mã nguồn mở khá giống Sublime nhưng có thêm những chức năng vượt trội. Atom được xây dựng trên Atom Shell , hay bây giờ gọi là Electron cũng được open source bởi Github, cho phép viết desktop app chạy trên mọi ...
Các bạn có biết đến trình soạn thảo Atom của Github không nhỉ. Atom là một dự án mã nguồn mở khá giống Sublime nhưng có thêm những chức năng vượt trội. Atom được xây dựng trên Atom Shell, hay bây giờ gọi là Electron cũng được open source bởi Github, cho phép viết desktop app chạy trên mọi nền tảng (Mac, Window) dựa trên công nghệ web (nodejs).
Một sản phẩm nổi bật xây dựng bằng Atom phải kể đến Slack app trên Win và trên Mac.
Mình sẽ ghi lại những bước cơ bản để cài đặt và sử dụng Electron dựa trên thử nghiệm cá nhân
Trên window mình dùng npm có trong bộ cài nodejs của Window. Để dễ làm việc thì mình dùng phần mềm Git bash (tương tự như Cygwin). Sau khi đã cài nodejs/npm và sử dụng Git bash/Cygwin thì cách cài đặt và sử dụng Electron như sau
$ npm install electron-prebuilt -g
Tạo folder mới và init
$ mkdir mdpreview $ cd mdpreview $ npm init -y
Câu lệnh npm init sẽ hướng dẫn từng bước tạo file package.json, là file định nghĩa cơ bản nhất của app đang xây dựng.
$ npm init -y
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sane defaults.
See `npm help json` for definitive documentation on these fields
and exactly what they do.
Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
name: (mdpreview)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to C:workspacemdpreviewpackage.json:
{
"name": "mdpreview",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"author": "",
"license": "ISC"
}
Is this ok? (yes) yes
Thêm vào file package.json một dòng "main": "app.js" để chỉ định file xử lý chính
{
"name": "mdpreview",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"author": "",
"license": "ISC",
"main": "app.js"
}
Bây giờ đến phần bắt đầu xây dựng app.js. Mình để nội dung đơn giản nhất
'use strict';
var app = require('app');
var BrowserWindow = require('browser-window');
var mainWindow = null;
app.on('window-all-closed', function() {
if (process.platform != 'darwin')
app.quit();
});
app.on('ready', function() {
mainWindow = new BrowserWindow({awidth: 800, height: 600});
mainWindow.loadUrl('file://' + __dirname + '/index.html');
mainWindow.on('closed', function() {
mainWindow = null;
});
});
Tiếp theo là tạo template bằng HTML
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Sample Markdown Preview</title> </head> <body> <h2>Electron hello the world</h2> </body> </html>
Như vậy với 3 file nói trên, ta có thể bật app lên và xem thành quả
$ pwd /c/workspace/mdpreview $ electron .
Bài đầu tiên có lẽ dừng ở đây. Mình sẽ dành thời gian viết tiếp cách tạo menu, thay icon và các thao tác nâng cao tiếp theo trong các bài viết tới.
