Đóng gói ứng dụng Electron thành desktop app
Electron
5
White

Mạnh Mẽ lên viết ngày 17/07/2015

Trước đây mình có viết 3 phần về cách dùng Electron (Atom Shell) của Github để xây dựng một desktop app, các bạn có thể theo dõi chi tiết tại Electron tag Phần cuối này mình sẽ tóm tắt lại cách đóng gói và ship sản phẩm cuối cùng

Sản phẩm hoàn thành

Chúng ta sẽ lấy đơn giản là sản phẩm làm xong từ 3 phần trước : app hiển thị markdown và preview mô phỏng Kipalog :

'use strict';
var app = require('app');
var BrowserWindow = require('browser-window');
var Menu = require('menu');
var mainWindow = null;
app.on('window-all-closed', function() {
if (process.platform != 'darwin')
app.quit();
});
app.on('ready', function() {
createApplicationMenu();
openWindow();
});
var openWindow = function(){
mainWindow = new BrowserWindow({width: 800, height: 600});
mainWindow.loadUrl('file://' + __dirname + '/index.html');
mainWindow.on('closed', function() {
mainWindow = null;
});
}
var createApplicationMenu = function() {
var menuTemplate = [
{
label: 'Mdpreview',
submenu: [
{
label: 'Quit',
accelerator: 'Ctrl+Q',
click: function () {app.quit();}
}
]
}, {
label: 'View',
submenu: [
{
label: 'Reload',
accelerator: 'Ctrl+R',
click: function() {
BrowserWindow.getFocusedWindow().reloadIgnoringCache();
}
},
{
label: 'Toggle DevTools',
accelerator: 'Alt+Ctrl+I',
click: function() {
BrowserWindow.getFocusedWindow().toggleDevTools();
}
}
]
}
];
var menu = Menu.buildFromTemplate(menuTemplate);
Menu.setApplicationMenu(menu)
}
view raw app.js hosted with ❤ by GitHub
'use strict';
var remote = require('remote');
var Menu = remote.require('menu');
var MenuItem = remote.require('menu-item');
var menu = new Menu();
menu.append(new MenuItem({
label: 'ping',
click: function() {
console.log('ping');
}
}));
menu.append(new MenuItem({
type: 'separator'
}));
menu.append(new MenuItem({
label: 'pong',
type: 'checkbox', checked: true,
click: function() {
console.log('pong');
}
}));
window.addEventListener('contextmenu', function (e) {
e.preventDefault();
menu.popup(remote.getCurrentWindow());
}, false);
angular.module('mdPreview', ['ngSanitize'])
.controller('MainController', function ($scope) {
$scope.preview = function(){
if ($scope.md == undefined ) {
return '';
} else {
return marked($scope.md);
}
}
});
view raw context.js hosted with ❤ by GitHub
<!DOCTYPE html>
<html ng-app="mdPreview">
<head>
<meta charset="UTF-8">
<title>Sample Markdown Preview</title>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/marked/lib/marked.js"></script>
<script src="context.js"></script>
</head>
<body ng-controller="MainController">
<h2>Electron hello the world</h2>
<textarea ng-model="md" rows="4" cols="50"></textarea>
<!-- <div>{{md}}</div> -->
<div ng-bind-html="preview()"></div>
</body>
</html>
view raw index.html hosted with ❤ by GitHub

Asar

Một công cụ đơn giản để đóng gói và phân phối app viết bằng Electron là asar, có thể download từ npm

npm install -g asar

Sử dụng asar rất đơn giản, bạn chỉ cần gõ câu lệnh để tạo ra file nén

asar pack . ~/mdpreview.asar

Và người dùng có thể khởi động file nén này bằng Electron

electron ~/mdpreview.asar

Tuy vậy cách này đòi hỏi người dùng đầu cuối phải cài đặt Electron sẵn, mà trường hợp này thì hiếm xảy ra. Vì thế chúng ta cần phải đóng gói cả bộ Electron thành một app hoàn chỉnh. Bạn sẽ cần

  • Vào Github Release của Electron để down bộ Electron và giải nén
  • Copy file mdpreview.asar trên kia vào thư mục
    • Mac OSX: (thư mục giải nén ở bước trên)/Electron.app/Contents/Resources/
    • Window/Linux: (thư mục giải nén ở bước trên)/resources/

Việc còn lại là kiếm một bộ tạo ra installer cho cả folder Electron (một trong những cách đó sẽ trình bày ở phần dưới). Bây giờ người dùng chỉ cần click vào file Electron.app hoặc Electron.exe là có thể khởi động được app của chúng ta.

grunt-electron-installer

Phần này là về công cụ tạo installer: grunt-electron-installer. Cài đặt bằng npm:

npm install --save-dev grunt-electron-installer

Nếu bạn đã quen với grunt - tool tạo task tự động cho các node package của JS thì bạn sẽ thêm dòng sau vào Gruntfile.js

grunt.loadNpmTasks('grunt-electron-installer')

Sau đó định nghĩa một grunt task như là

'create-windows-installer': {
  appDirectory: '(thư mục giải nén ở phần trên)',
  outputDirectory: '~/',
  authors: 'TH Inc.',
  exe: 'mdpreview.exe'
}

ở đây appDirectory là thư mục giải nén của Electron mà đã có file asar của bạn trong folder chỉ định ở phần trên. Như vậy chúng ta sẽ có file mdpreview.exe thành bộ cài đặt.

Theo như hướng dẫn tại grunt-electron-installer github thì để thực sự phân phối được app một cách chuyên nghiệp, chúng ta sẽ còn cần tạo chữ ký điện tử Authenticode Code Signing Certificate. Cái này có lẽ phải mua của Symantec hoặc Digicert. Trong phạm vi bài viết về ứng dụng thử nghiệm mình không có điều kiện làm thử và hướng dẫn được đến bước này. Nếu bạn nào đã từng làm thì chia sẻ mình biết với nhé !

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
31 14
Electron và Atom (Ảnh) 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 Mẽ lên viết gần 3 năm trước
31 14
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
Bài viết liên quan
White
31 14
Electron và Atom (Ảnh) 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 Mẽ lên viết gần 3 năm trước
31 14
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
White
9 2
Menu trong Electron app (Ảnh) Ở phần 1 mình đã giới thiệu về Electron và những bước cơ bản để tạo một app desktop chạy được trên môi trường Windo...
Mạnh Mẽ lên viết gần 3 năm trước
9 2
{{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á!