Electron js – Build cross-platform desktop apps với JavaScript, HTML, and CSS #1

Nếu bạn có thể build được một web site, bạn có thể build được một app desktop, Electron js một framework có thể tạo app(window, macos,linux) với các ngôn ngữ như JavaScript, HTML, and CSS

Giới thiệu về Electron js

Trước khi bắt đầu về Electron js tôi muốn nói về các nền tảng desktop phổ biến hiện tại, hiện tại có 3 nền tàng chính và phổ biến nhật là : Window, macOs, Linux

Trên đây là sử phổ biến của các nền tảng qua các năm từ 2013 – 2019 (Tôi rất thích xem Trên Kênh Data is Beautiful 1 kênh khá hay với các con số )

Như bạn cũng thấy có khá nhiều nền tảng phát trển và để có thể xây dụng sản phẩm và được tất cả mọi người dùng bặt buộc bạn phải xây dụng trên các nền tảng chúng là lại phải tìm hiểu các ngôn ngữ khác ví dụ như:

Windows =>  C Windows API.

Mac OS X =>  Objective-C Cocoa, Swift.

Linux => C Gtk, or C++ Qt.

Nhiêu đây đã đủ để bạn đau đầu khi phát triển một ứng dụng muốn chạy trên đồng thời các nên tảng do vậy, một nền tảng mới ra đời, phù hợp hơn, và “dễ làm ăn” hơn là một open source Electron js của GitHub.

If you can build a website, you can build a desktop app. Electron is a framework for creating native applications with web technologies like JavaScript, HTML, and CSS. It takes care of the hard parts so you can focus on the core of your application.

Nói theo hướng dễ hiểu nhất, Electron js là một framework xây dựng ứng dụng Native cho nền tảng máy tính bằng công nghệ Web với HTML, CSS và JavaScript. mà chưa cần hiều nhiều về các ngôn ngũ khác như: C, Objective-C, C++ của từng nền tảng máy tính khác

Atom ứng dụng rất nổi tiếng là ứng dụng đầu tiên được xây dựng bằng Electron bên cạnh đó còn rất nhiều các giương mặt lớn khác như Visual studio code, post man, Nuclide … cũng sử dụng Electron js bạn có thể xem những sản phẩm khác như đây đã đủ để bạn muốn tìm hiểu về chứ ?

Trước khi bắt đầu tìm hiểu thêm về Electron js bạn cần biết nó được hậu thuẫn bởi NodeJS và Chromium nếu bạn chưa hiểu NodeJS hoạt động như nào thì xin mời bạn tìm hiểu sơ qua nó trước, cũng như bao gồm luôn các thư viện của Chromium project.

Cài đặt mội trường

Việc phát triển ứng dụng Electron được thực hiện trong môi trường NodeJS, và vì vậy, bạn phải có NodeJS trước. Nếu bạn chưa có NodeJS, hãy cài đặt nó tại đây https://nodejs.org/ (Trong bài này Tôi sẽ sử dụng Yarn thay vì npm) :

Project Electron js thực chất là project Node.js. Đều bắt đầu là một package.json. vậy tôi Bắt đầu tạo 1 project mới bằng

yarn init

Điền các thông tin của dự án vào:

Sau khi đã có 1 project với Nodejs bắt đầu cái đặt thêm electron có 2 cách chạy electron khi đã cài node js

Thêm trực tiếp electron js vào hệ thông , cách này thì mỗi lần bạn tạo 1 dự án mới thì không cần thiết phải add thêm electron js nữa:

yarn global add electron

2 là bạn cũng có thể thêm vào dependencies của dự án của bạn

yarn global add electron

Cấu trúc cơ bản của project electron js sẽ như sau:

your-app/
├── package.json
└── main.js

Trong file package.json bạn thên scripts để start electron js có thể chạy “electron .” hoặc có thể sử dụng “yarn s

{
  "name": "your-app",
  "version": "1.0.0",
  "main": "main.js",
  "license": "MIT",
  "scripts": {
    "s": "electron ."
  },
}

Khi bạn chạy “yarn s” bạn sẽ thấy 1 ứng dụng Electron được mở lên dưới thanh dock những sẽ không có màn hình nào hiện thỉ nên vì chưa code thêm gì tại main.js

Vậy là đã xong mội trường để bắt đầu làm việc với Electron js ta sẽ thử thêm chạy 1 demo nhanh nhé

Làm thử một app desktop với Electron js

Tôi sẽ đóng gói cái web cá nhận luulam.dev thành 1 cái app desktop để mỗi lần mở website thì chỉ cần click mở cái web nghe rất xịn sò và thêm một vài tính năng nhỏ khác. bắt đầu mở file main.js ta bắt đầu code tại đây:

Đầu tiên require electron tất cả các APIs và features đều thông qua electron

const electron = require('electron')

Trong electron vòng đời của một ứng dụng đều được quản lý thông qua electron.app, các window(các của sổ hiện thỉ giao diện với người dùng) có thể được khởi tạo bởi class electron.BrowserWindow , Ví dụ đơn gian là đợi khi app đã được khởi tạo xong thì bắt đầu mở một window,

const { app, BrowserWindow } = require('electron')

function createWindow () {
  // Tạo một cửa sổ mới với kích thước 800 * 600
  let win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  // Đây là nội dung của cửa sổ được tạo lên là file index.html
  win.loadFile('index.html')
}

app.whenReady().then(createWindow)

Đây là nội dung của file index.html

<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using node <script>document.write(process.versions.node)</script>,
    Chrome <script>document.write(process.versions.chrome)</script>,
    and Electron <script>document.write(process.versions.electron)</script>.
  </body>
</html>

Sau khi xong bạn chạy lệnh “yarn s” để bắt đầu chạy và có kết quả như sau

Tiếp theo Tôi sẽ hiện thỉ website của tôi trên app thay vì việc load file index.html mà chỉ cần đổi thành :

//   win.loadFile('index.html')
  win.loadURL('https://luulam.dev')

Và đây là kết quả :

Vậy là xong chỉ với 3 file và vài dòng code bạn đã có thể tạo ra 1 app siêu đơn giản với electron js , trên là một ví dụ đơn gian để tôi cho các bạn thấy việc làm app desktop với electron js đơn giản và nhanh gọn như nào, ngoài ra nó còn rất nhiều thứ để bạn có thể tìm hiểu tại https://www.electronjs.org/

Toàn bộ source code trên tôi để tại https://github.com/luulam/Tutorial/tree/master/Electron/luulam,

Có lên sử dụng Electron js để build app không ?

Với những ưu điểm như:

  • Nếu bạn đã biết về phát triển web và JS, Electron js rất dễ dàng để tiếp cận
  • Build được ra dễ dàng các nền tảng nhanh chóng

Thì nó cũng đi cùng những nhược điểm như:

  • Electron js khá ngốn ram
  • Size của file khi build ra cho các nền tảng nặng vì phải đóng gói thêm bộ Chromium theo cùng
  • Việc khởi động chậm chạp
  • Về bảo mật không được tốt

Đối với tôi việc sử dụng Electron js là một giải phát rất hay cho những người muốn xây dụng các app tiệt ích rất nhanh và với công sức nhỏ hơn nhiều khi muốn đưa lên các nền tảng khác nhau, và việc đều sử dụng Chromium bạn sẽ không phỉa tách biệt các module trên các lên tảng khác nhau nhiều

Các bạn quan tâm có thể để lại bình luận tôi sẽ làm nhiều bài nữa để làm thêm về electron js nhé !!

Thấy hay và hũu ích hãy share với mọi người cùng đọc nhé ! Xem thêm tại : luulam.dev