Hướng dẫn sử dụng Electron xây dựng nên tập tin cài đặt cho Odoo trên hệ điều hành Window

Tóm tắt: Odoo là một nền tảng mã nguồn mở được xây dựng để chạy được trên website. Nhưng đôi khi người dùng muốn đơn giản để mở ứng dụng mà không cần phải mở trình duyệt web mà chỉ cần nhấn vào biểu tượng được đặt trên màn hình desktop. Bài viết này hướng dẫn cách tạo ra tập tin cài đặt trên window bằng Electron

1. Cài đặt Node trên Window

Electron được xây dựng từ Node. Do đó ta cần cài đặt Node trên Window. Nếu trên Linux ta có thể cài đặt đơn giản Node bằng mỗi 1 dòng lệnh. Nhưng trên Window thì cần phải tải tập tin cài đặt về và cài đặt giống như các phần mềm thông thường. Thật đơn giản do đó trong bài viết tôi sẽ không đề cập đến nó.

Sau khi cài đặt xong. Ta có thể vào Terminal để kiểm tra. Nhấn vào phím Window ð gõ CMD để mở Terminal.

npm –v      // npm version
node –v     // node version

Hai dòng lệnh trên giúp ta thấy được phiên bản của npm và node hiện tại đã được cài đặt trong máy tính hiện tại.

Chúng ta nên sử dụng phiên bản mới nhất của node và npm vì có vài ứng dụng phụ thuộc vào phiên bản của chúng. Các ứng dụng nếu đã nổi tiếng thì điều muốn hỗ trợ phiên bản mới nhất.

2. Cài đặt Electron trên Window

Electron giúp ta xây dựng nên một ứng dụng trên Desktop từ Javascript, CSS, HTML. Nó được hiểu là những bước cao hơn của một webview trong các nền tảng khác. Vì Electron giúp ta vài tính năng tương tác đến hệ điều hành và những thao tác về giao diện tốt hơn webview bình thường.

Cài đặt phiên bản mới nhất của Electron.

npm install –g electron@latest

Trong dòng lệnh trên latest nói cho npm biết là phải tải phiên bản mới nhất trên Electron. Còn phiên bản mới nhất là phiên bản nào thì do Electron trên npm thiết lập.

electron –v

Dòng lệnh trên cho phép ta biết được phiên bản hiện tại được cài đặt trong máy tính.

3. Thiết lập dự án cho Odoo

Như đã đề cập ở trên. Electron giúp ta xây dựng một tập tin cài đặt trên Window từ HTML, CSS, Javascript. Nguồn của nó có thể là tập tin chưa trên máy tính hoặc một đường dẫn dạng HTTP. Điều đó có nghĩa là ta có thể tạo tập tin HTML hoặc lấy một đường dẫn ( chẳn hạn http://google.com) để tạo.

Trong Electron để tạo tập tin cài đặt có 3 gói được kiến nghị
để sử dụng: electron-forge, electron-builder, electron-packager. Chúng ta có thể dùng một trong 3 gói đó. Nhưng trong bài viết này tôi sử dụng electron-package để thực hiện.

Đối với Odoo. Chúng ta sử dụng các tạo bằng cách sử dụng HTTP.

2.1. Thiết lập tập tin package. json

Tạo một thư mục chứa mã nguồn ứng dụng. Trong thư mục này ta cần

npm init

Một tập tin package. json được tạo ra giúp ta thiết lập dự án.

{
  "name": "app-name",
  "productName": "Application Name",
  "version": "1.0.0",
  "description": "Descrtion of Application",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron .",
    "build": "electron-packager . --out=dist/win --platform=win32 \n
--arch=x64 --icon=assets/icons/favicon.ico --asar --overwrite"
  },
  "keywords": [
    "PoS",
    "Sems.vn"
  ],
  "author": "VTS Space",
  "license": "LGPL-3.0",
  "dependencies": {
    "custom-electron-titlebar": "^3.0.8",
    "node-notifier": "*",
    "request": "*",
    "request-promise": "*"
  },
  "devDependencies": {
    "electron": "^5.0.2",
    "electron-packager": "^13.1.1",
    "electron-winstaller": "^3.0.4"
  }
}

Trong đoạn JSON trên ta cần tập trung vào 3 điểm chính.

  1. devDependenciesdependencies: Nơi ta cần cài đặt các gói cộng thêm trong Node để phục vụ quá trình xây dựng ứng dụng.  Với devDependencies sẽ cài đặt những gói cộng thêm trong môi trường developer. Nó sẽ không đi kèm theo trong sản phẩm cuối.
  2. script. start: Dòng lệnh để chạy từ npm. Trong đoạn mã trên khi ta chạy npm run start. Tương đương với lệnh electron .  (“.” Chạy mã nguồn trong thư mục mà nó đang đứng).
  3. script. build: Ta sử dụng lệnh này để xây dựng nên tập tin cài đặt cuối bằng electron-packager.
  4. --out=dist/bin (xuất ra tập tin cài đặt ở thư mục dist/bin trong thư mục hiện tại).
  5. --platform=win32 (xuất tập tin cài đặt trên window. Ta có thể xuất tập tin cài đặt trên Linux hay MacOS chỉ cần thay đổi giá trị này).
  6. --arch=x64 (xuất tập tin trên window 64 bit)
  7. --icon=assets/icons/icon.ico (sử dụng tập tin icon.ico trong thư mục assets/icons để làm biểu tượng cho ứng dụng).
  8. --asar mã nguồn được đóng gói trong tập tin “.asar`.
  9. --overwrite (ghi đè vào tập tin đã được xây dựng nếu nó tồn tại).

Trong JSON ta thấy có thuộc tính main với giá trị main.js. Ta cần tạo tập tin main.js để thực thi

3.2. Thiết lập tập tin main.js

Tập tin này được khai báo trong trong thuộc tính main của package. json. Ta có thể thay đổi với tên khác nếu muốn.

const rq = require('request-promise');
const notifier = require('node-notifier');
const {app, BrowserWindow} = require('electron');

let mainWindow;
app.on('window-all-closed', function () {
    app.quit();
});

app.on('ready', function () {
    var mainAddr = 'http://cafepos.sems.vn:8069';
    var openWindow = function () {
        mainWindow = new BrowserWindow({
            show: false,
            fullscreen: false,
            toolbar: false,
            title: 'PoS Cafe Sems.vn',
            icon: __dirname + '/assets/icons/icon.png',
            width: 800,
            height: 600,
            backgroundColor: '#37b8fb',
            'auto-hide-menu-bar': true,
            webPreferences: {
                nodeIntegration: false
            }
        });
        mainWindow.maximize();
        mainWindow.loadURL(mainAddr);
        mainWindow.setMenuBarVisibility(false);
        mainWindow.setAutoHideMenuBar(true);
//     mainWindow.webContents.openDevTools();

        mainWindow.once('ready-to-show', () => {
            mainWindow.show();
        });

        mainWindow.on('closed', function () {
            notifier.notify({
                title: 'PoS Sems.vn',
                message: "Bạn đang thoát PoS Sems.vn",
                sound: true
            });
            mainWindow = null;
        });
    };

    console.log('System load PoS Sems.vn from ' + mainAddr);

    var startUp = function () {
        rq(mainAddr)
            .then(function (htmlString) {
                console.log('Máy chủ đang khởi động...!');
                notifier.notify({
                    title: 'Thông tin',
                    message: 'PoS Sems.vn đã kết nối thành công.',
                    sound: true
                });

                openWindow();
            })
            .catch(function (err) {
                t = new Date().toUTCString();
                console.log('đợi cho máy chủ khởi động...' + t);
                notifier.notify({
                    title: 'Cảnh báo',
                    message: 'Đang cố gắn kết nối đến máy chủ...',
                    sound: true,
                    wait: true
                });
                setTimeout(startUp, 10000)
            });
    };

    // lets fire!
    startUp();
});

Ta sử dụng 3 thư viện: request-promise, node-notifierelectron với 2 hành vi window-all-close và ready.

Trong ready chúng tạo một đối tượng BrowserWindow để mở đường dẫn web được giá giá trị trong mainAddr.

Tôi không giải thích thêm chi tiết mã nguồn này vì tên và giá trị của nó ta có thể đoán được dùng để làm gì. Ta nên chạy thử nếu nghi ngời chúng để cũng cố vững chắc sự hiểu biết của ta. Nó chạy rất nhanh, sẽ không mất nhiều thời gian cho bạn đâu.

3.3. Đóng gói dự án bằng electron-packager

Trong phần package. json ta đã thấy được đoạn mã lệnh dùng để xây dựng nên ứng dụng.

electron-packager . --out=dist/win --platform=win32 --arch=x64 \n
--icon=assets/icons/favicon.ico --asar –overwrite

Ở đây ta dùng gói cộng thêm trong electron đó là electron-packager. Vì thế ta cần cài đặt nó trước khi sử dụng. Nhưng ta đã khai báo nó trong devDependencies trong package. json. Nó sẽ tự động cài đặt nếu ta chạy npm install. Nhưng nếu muốn sử dụng nó ở dạng toàn cục (global) ta có thể cài đặt bằng dòng lệnh bên dưới.

npm install –g electron-packager

Nếu muốn sử dụng chuyên sâu hơn ta có thể tham khảo nó trên github

3.4. Xây dựng tập tin cài đặt

Để tạo nên tập tin cài đặt ta cần chạy dòng lệnh được đề cập trong 3.3. Tuy nhiên, dòng lệnh này đã được đóng gói thành build trong package. json. Do đó ta có thể thực thi nó từ npm.

npm run build

Kiểm tra kết quả ta sẽ thấy tập tin cài đặt ta cần tạo nằm trong ./dist/bin mà ta đã thiết lập trong --out từ thuộc tính trong khi chạy lệnh electron packager.

4. Xây dựng ra tập tin cài đặt trên Window

Ở phần 3.4 ta đã có tập tin .exe có thể chạy trên Window bằng cách double click vào nó. Để chạy nó một cách tiện lợi ta có thể nhấp phải chuột để tạo ra một shortcut của nó trên desktop. Sau này khi dùng người dùng có thể chỉ double click vào biểu tượng trên desktop

Nếu triển khai ứng dụng ta chỉ cần sao chép thư mục ./dist/bin đến khách hàng. Điều này rất tiện lợi trong quá trình triển khai ứng dụng từ xa hay trên internet.

5. Chạy ứng dụng với Odoo

Đến thời điểm này không có nghĩa là ta có thể chạy được ứng dụng Odoo. Mà chỉ mới tạo được một ứng dụng có thể khởi chạy trên Window. Điều quan trọng là Odoo cần được chạy trước.

var mainAddr = 'http://cafepos.sems.vn:8069';

Ở phần 3.2 ta thấy dòng lệnh trên. Điều này có nghĩa là URL trên phải được chạy. URL này thuộc về Odoo. Việc làm sao để triển khai Oddo thì có tham khảo từ Docker
Odoo 11 trên Ubuntu 16.04
Deploy Odoo
11 trên Ubuntu 14.04
.

6. Tóm lược

Để khởi chạy Odoo bằng cách double click vào biểu tượng ứng dụng chạy như một ứng dụng thường dùng trên Window. Ta cần xây dựng tập tin khởi chạy .exe. Electron giúp ta dể dàng làm việc này với gói mở rộng electron-packager.

Sau khi tạo xong ta chỉ cần sao chép thư mục dist/bin để triển khai trên các máy tính khác nếu cần. Nếu muốn triển khai trên internet ta cần phải nén thư mục này để người dùng có thể tải về để chạy trên máy cá nhân của họ.

Nhưng nếu ta tạo ứng dụng mà Odoo không được khởi chạy thì ta vẫn không thể chạy được ứng dụng. Do đó ta cần phải khởi chạy Odoo trước khi mở ứng dụng.

7. Tài liệu tham khảo

  1. Electron. Electron Documentation 5.0.2. Electron.
    [Online] 05 2019. https://electronjs.org/docs.

  2. Tiển, Nguyễn Văn. Deploy Odoo 11 in Ubuntu 14.04. Blog Nguyễn Văn Tiển. [Online]
    http://nguyenvantien2009.com/deploy-odoo-11-in-ubuntu-14-04/.

  3. Phạm, Khoa.
    Change Electron App Icon. Medium. [Online] 05 2019.
    https://medium.com/fantageek/changing-electron-app-icon-acf26906c5ad.

  4. Electron. Write your first Electron App. Electron
    Documentation.
    [Trực tuyến] 05 2019. https://electronjs.org/docs/tutorial/first-app.

  5. —. Application
    Distribution. Electron Document. [Online] 05 2019.
    https://electronjs.org/docs/tutorial/application-distribution.

  6. —. Application
    Packaging. Electron Document. [Online] 05 2019.
    https://electronjs.org/docs/tutorial/application-packaging.

  7. repodevs.
    Main.js Code. Github. [Online] 05 2019.
    https://gist.github.com/repodevs/5bf21514a79b577d88b799e0d937ee78.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *