Viết desktop app bằng Electron
Javascript
193
Electron
5
nodejs
64
White

Mạnh Mẽ lên viết ngày 27/05/2015

Electron và Atom

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.

Cài đặt và sử dụng Electron

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:\workspace\mdpreview\package.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

Tạo xử lý đầu tiên

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({width: 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 .

alt text

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.

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Mạnh Mẽ lên

7 bài viết.
26 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
45 6
(Ảnh) Flux trong giới Javascript không chỉ là chủ đề nổi tiếng nhất mà còn là chủ đề khó nắm bắt nhất. Bài viết này sẽ cố gắng giải thích một cách...
Mạnh Mẽ lên viết hơn 2 năm trước
45 6
White
21 9
(Ảnh) Bạn có biết Javascript, ngôn ngữ lập trình web mà chúng ta vẫn sử dụng còn có một tên gọi khác là ECMAScript ? ECMAScript hiện nay không phả...
Mạnh Mẽ lên viết hơn 2 năm trước
21 9
White
16 3
(Ảnh) Ở 2 phần trước mình đã tổng lại app desktop đầu tiên viết bằng framework (Link) của Github. Các bạn có thể theo dõi lại (Link) của 2 bài viế...
Mạnh Mẽ lên viết hơn 2 năm trước
16 3
Bài viết liên quan
White
39 7
Tăng sức mạnh cho javascript với lodash Lần này mình sẽ giới thiệu 1 thư viện javascript vô cùng bá đạo có tên là "lodash]1]", có thể nói nó là LI...
Huy Hoàng Phạm viết 2 năm trước
39 7
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
7 bài viết.
26 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!