[ElectronJS] Bài 1 - Khởi Tạo Ứng Dụng Native Cho Windows + Linux + Mac

Đây là bài viết đầu tiên của Series Tự Học Lập Trình App Một Cách Thật Tự Nhiên - khởi hành với vốn kiến thức nền tảng ít ỏi mà mình nghiệm thu được sau chặng đường tự học lập trình đầu tiên bao gồm những hiểu biết cơ bản về HTML, CSS, JavaScript, jQuery, NodeJS, ExpressJS, EJS, và một chút về Database.

Mục tiêu của Series mới này là chúng ta sẽ tìm hiểu thêm những kiến thức lập trình mới, để có thể tạo ra được những ứng dụng có tính năng đa dạng hơn so với một trang blog đơn giản; Và hơn thế nữa... là để có khả năng tham gia đóng góp vào các dự án FOSS.

Từ từ đã. FOSS là cái gì thế?

FOSS - là tên viết tắt của Free Open-Source Software - dịch nôm na là Phần Mềm Mã Nguồn Mở Miễn Phí. Đây là những project được đăng tải public tại Github.com kèm theo bản quyền phân phối và sử dụng miễn phí 100% cho bất kỳ ai nghe thấy tên phần mềm.

Một số project FOSS phổ biến có thể kể tên là:

• LibreOffice | bộ ứng dụng văn phòng tương thích với Microsoft Office.
• GIMP, InkScape, và Scribus | bộ ứng dụng đồ họa tương thích với Adobe Photoshop, illustrator, và inDesign.
• OBS Studio | thu âm, quay phim màn hình desktop, streaming, v.v...
• HandBrake | chuyển đổi kiểu tệp video.
• Blender | ứng dụng tạo hình 3D - animation - chỉnh sửa video.
• Và... tất nhiên là còn nữa, nhưng mình không sử dụng tới nên không biết hết để mà liệt kê.

Đó là những project FOSS phổ biến được duy trì bởi một cộng đồng lớn và đang được sử dụng bởi nhiều người dùng cá nhân và các tổ chức. Ngoài ra thì còn vô số các project FOSS khác đang được đăng tải code tại Github.com. Nếu bạn nhập từ khóa foss trên thanh tìm kiếm của trang web sẽ thấy cái danh sách kết quả kéo dài vô hạn luôn.

Tham gia vào các project FOSS có khó không?

Không. Nhưng mà cũng Không dễ dàng.

Bạn có thể Fork (sao chép) toàn bộ code của một project FOSS về tài khoản Github của bạn và thực hiện những chỉnh sửa mà bàn muốn. Sau đó gửi một Pull Request (yêu cầu sát nhập) cho tài khoản đại diện của cộng đồng đang duy trì.

Không hề khó đúng không?

Nhưng để đọc hiểu được bộ code của một project FOSS bất kỳ thì lại là một chuyện không hề dễ dàng. Chúng ta sẽ phải học khá nhiều thứ tính từ cột mốc quan sát hiện tại. Và đó là một đích đến khá xa so với cột mốc đầu tiên mà chúng ta đang hướng đến trong Series này.

Cột mốc đầu tiên

Chúng ta sẽ học cách tạo ra một ứng dụng native - ứng dụng có thể được cài đặt trên thiết bị của người dùng và không cần phải nhờ vào logic vận hành do một server cung cấp qua mạng Internet.

Do được cài đặt trên thiết bị của người dùng, các ứng dụng native sẽ có khả năng sử dụng những công cụ mà hệ điều hành đang chạy trên thiết bị của người dùng cung cấp; Ví dụ như lưu trữ, chỉnh sửa, và xóa các tệp dữ liệu trên thiết bị của người dùng, hay gửi tương tác với các phần mềm khác đang chạy trên cùng thiết bị nếu phần mềm kia có cung cấp giao diện lập trình hỗ trợ.

Và chúng ta sẽ khởi đầu với cột mốc tạo ra một ứng dụng đơn giản có thể cài đặt trên Windows, Linux, và Mac.

Tạo native app với ElectronJS

ElectronJS là một framework có thể giúp chúng ta tạo ra các ứng dụng đa nền tảng cross-platform.

Ví dụ điển hình là các trình soạn thảo code Atom và Visual Studio Code mà chúng ta đang sử dụng đều được xây dựng bằng ElectronJS. Bạn cũng có thể tìm thấy thêm nhiều ứng dụng Electron khác nữa được liệt kê tại mục Apps của trang ElectronJS.com với đủ các hạng mục khác nhau từ ứng dụng tiện ích cho người dùng máy tính thông thường, ứng dụng đồ họa, ứng dụng tiện ích cho các lập trình viên, v.v...

Cụm từ "đa nền tảng" hay cross-platform có thể được hiểu nôm na là chúng ta chỉ cần viết một bộ code và có thể đóng gói thành các gói phần mềm phù hợp với các hệ điều hành khác nhau. Ví dụ như chúng ta tạo ra một project kiểu như electron-word thì chúng ta sẽ có thể viết code tạo giao diện người dùng và code xử lý logic một lần duy nhất, sau đó đóng gói thành các tệp cài đặt hoặc tệp chạy trực tiếp:

• electron-word.msi hay electron-word.exe cho Windows
• electron-word.deb hay electron-word.rpm cho Linux
• electron-word.pkg hay electron-word.app cho Mac.

Và... framework này được xây dựng trên nền móng của NodeJS kèm theo một số công nghệ khác nữa. Chúng ta sẽ nói đến những chi tiết cần thiết sau khi hiển thị được một cửa sổ phần mềm "Hello World".

Đầu tiên chúng ta cần tải về bộ code thiết lập sẵn tại https://github.com/electron/electron-quick-start.

Giải nén và di chuyển thư mục electron-quick-start tới đâu đó để đặt bên cạnh thư mục express-blog của Series cũ. Mình để ở thư mục Documents và trong cửa sổ dòng lệnh sẽ cần di chuyển tới đó để khởi chạy bằng npm.

Tuy nhiên trước hết thì chúng ta sẽ mở trình soạn thảo code để xem bộ code "Hello World" của ElectronJS có những gì đã.

Cũng giống với các project NodeJS khác thôi. Chúng ta có một tệp package.json đã được khai báo sẵn với một package hỗ trợ:

"devDependencies": { "electron": "^18.2.3"
}

Bây giờ trong cửa sổ dòng lệnh, chúng ta sẽ di chuyển tới thư mục của project và chạy npm íntall để cài đặt package hỗ trợ trước khi chạy npm start.

cd Documents && cd electron-quick-start
npm install && npm start

Tuyệt... phần mềm "Hello World" trên nền ElectronJS đã chạy và chúng ta đang có một cửa sổ ứng dụng với một thanh Menu như những ứng dụng native khác. Ở bên dưới tiêu đề "Hello World" chúng ta đang có một vài thông tin gì đó:

Chúng ta đang sử dụng Node.js 16.13.2, Chromium 100.0.4896.143, và Electron 18.2.3.

Trong số mấy thứ được liệt kê thì có cái Chromium là một FOSS: https://www.chromium.org/. Đây là một trình duyệt web được phân phối miễn phí, và Google đã sử dụng để làm nền tảng tạo ra Google Chrome, và Microsoft sử dụng để tạo ra Microsoft Edge.

Ồ... như vậy là một ứng dụng ElectronJS sử dụng một trình duyệt web để làm môi trường vẽ giao diện người dùng. Và tệp index.html mà chúng ta nhìn thấy khi lướt qua cấu trúc thư mục của project có lẽ chứa template để hiển thị giao diện này.

<!DOCTYPE html>
<html>
<head> <meta charset="UTF-8"> <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'"> <link href="./styles.css" rel="stylesheet"> <title>Hello World!</title>
</head>
<body> <h1>Hello World!</h1> We are using Node.js <span id="node-version"></span>, Chromium <span id="chrome-version"></span>, and Electron <span id="electron-version"></span>. <!-- You can also require other files to run in this process --> <script src="./renderer.js"></script>
</body>
</html>

Tuyệt... như vậy là chúng ta không cần phải học thêm một phương thức vẽ giao diện người dùng khác. Tất cả vẫn sẽ là HTML, CSS, và JavaScript.

Tuy nhiên bạn đừng vội ngó vào các tệp JavaScript để xem code nhé. Chúng ta cần quay lại Sub-Series NodeJS của Series Web một chút để có thể tiếp tục thảo luận về nội dung code đang được thiết lập sẵn trong các tệp này.

(Sắp đăng tải) [NodeJS] Bài 8 - Event && Emitter

(Sắp đăng tải) [NodeJS] Bài 9 - Process && Child

Và trong bài viết tiếp theo, chúng ta sẽ tìm hiểu tổng quan về việc sử dụng ElectronJS với tài liệu được cung cấp tại trang chủ của framework.

(Sắp đăng tải) [ElectronJS] Bài 2 - Từ Từ Để Mình Nghĩ Tên Tiêu Đề Cho Bài Này Đã