从零实现js开发Linux图形界面程序

前言

近期工作上收到开发需求,公司欲大肆出售运行在特殊场景下的服务器硬件(基于Linux操作系统),前端工程师需要配合开发Linux系统下的图形化应用程序一起交付.

最终需要的应用程序通过调用硬件工程师编写的shell脚本直接获取机器当前运算数据和相关参数,然后渲染界面提供给用户查看.整个过程由前端与硬件工程师对接,不需要后端参与.

由于之前拥有使用Electron在windows下开发客户端软件的经验,这一次仍然选择Electron作为技术方案实现开发目标.

Electron是一个使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生程序的框架,它内部集成了Chromium 和 Node.js,这也使得常见的浏览器具备了调用操作系统相关服务的能力.另外它最大的优势是跨平台,能够开发支持Windows、Mac和Linux系统下的客户端应用.

前端工程师一般对Linux操作系统接触较少,如何以最小的学习成本快速熟悉系统特点以及完成开发目标都是不小的挑战.整个开发流程先粗略归纳为以下几步.

• 搭建Linux操作系统和图形化桌面
• 搭建Electron项目架构,根据UI设计图完成静态页面的开发
• 静态页面完成后,编写调用shell脚本的函数,通过调用脚本拿到机器数据,再渲染到页面上
• 项目开发完毕,打包成安装程序交付

安装Linux开发环境

Linux的环境搭建非常繁琐,很多人都会选择在本地安装虚拟机和操作系统,再对环境做一些设置.为了前期能够快速并且简单的用上Linux系统,可以考虑在阿里云上花几十块钱买一台短期并且安装完备的服务器.

首先登录阿里云官网注册一个账户,然后在产品栏的下拉列表里选择轻量应用服务器(如下图);

页面进入后选择配置,应用镜像那一栏Node.js选择14.15.2版本(如下图).如果Node版本选的太低,很多软件都跑不起来.

系统镜像那一栏选择Ubuntu 16.04版本(如下图).操作系统的镜像可以根据实际需求选择,目前Linux使用较多的操作系统是CentOs和Ubuntu.

配置过程很简单,到这里基本就结束了,然后点击确认按钮付钱就能获得一台服务器了.

付款成功后点击进入管理控制台,页面上展示了自己购买的服务器的相关参数,比如公网的IP地址,CPU使用情况以及内存占用大小.

服务器信息那一栏的右侧有一个重置密码,点击设置新密码后重启应用.

重启后点击右上侧的远程连接(如下图),在黑窗口里输入node -v可以查看node版本.这个黑窗口是一个命令行工具,可以在里面输入各种命令完成系统相关操作.

命令行继续输入sudo apt-get install git,在我们的服务器上安装一个git.这句安装命令中sudo是为了以管理员权限来运行.apt-get是一个包管理工具,我们可以使用它进行软件的下载、更新、卸载等操作,类似于前端使用的npm.

安装git的过程中,命令行可能会弹出Is this ok [y/N]:的询问,输入y继续安装.安装完毕后在命令行输入git --version就可以查看安装好的git版本.

安装图形化桌面

我们的目标是为了在Linux下开发一款图形界面程序,上面只有一个黑窗口的系统是满足不了需求的.我们还需要在Linux系统再安装图形化桌面,就像Windows系统一样,这样我们开发出来的程序就能在图形化桌面上展现出来.

• 更新下载源,在命令行输入sudo apt-get update执行.

• 安装桌面环境xfce,输入命令sudo apt install xfce4执行.