用了三年時間寫網頁桌面作業系統的故事
Toby
Toby

這是一個想找地方儲存他的音樂、影片跟圖片的窮學生與他的 Raspberry Pi 的故事。

如果你想直接下載來玩,這裡是傳送門:
https://github.com/tobychui/arozos

開始時候的樣子

由 2016 年開始,我就一直在寫這套自用的系統。這系統主要是用來存放音樂、影片檔案等等的媒體文件,這樣我就可以很方便的在課堂跟課堂之間的休息時間聽到自己的音樂或是看一套短劇。這是這套系統於 2016 年的時候的樣子

這個版本是使用 PHP5 開發,後來升級到了 PHP 7 + Apache 伺服器。雖然同一台主機(當時我還是在用我的主機來當伺服器)上面有安裝到資料庫,但是它本身是不需要連接到 MySQL 資料庫的。這系統基本上是使用膠水語言黏起來的,運作原理就是後台的一個 VB.net 程式定時把硬碟上的音樂檔案掃描,並產生一個音樂列表讓 php 去 render 一個網頁界面。當有需要的時候再從硬碟裡搬出來到網頁伺服器的資料夾再進行串流。

你現在依然能夠在我的 Github 找到最原始版本的 ArOZ Online 系統(後來才改名為 ArozOS 作業系統),但是拜托 不!要!用!它!
https://github.com/tobychui/ArOZ-Omega-Online

由 PHP 到 Go:開發難度與效能的平衡

這個非常簡單的 PHP 版本使用一兩年之後,因為我開始在上面放越來越多的檔案,單一頁面已經無法應付所有檔案的列表,所以開始加入檔案管理器、模組化的播放器到最後的網頁桌面

不過兩年後,PHP 的系統還是無法應付很多大型檔案(特別是現在的檔案都越長越大,由以前幾 MB 的 mp3 到現在隨時到 50 – 60MB 的 flac 檔案),加上桌面系統做得越來越像本地端的桌面,而需要大量而且高反應速度的資料回傳,因此 PHP 已經沒辦法再成為這系統的主力語言,而需要轉移到另一種語言繼續開發。有興趣了解更多關於這部分的技術問題可以看這篇:

http://imuslab.com/wordpress/2020/03/29/%E7%B7%A8%E7%A8%8B%E8%AA%9E%E8%A8%80%E7%9A%84%E6%A5%B5%E9%99%90%EF%BC%9Aphp/

最後經過一點研究之後,我決定轉移到 Go 語言,並把 ArOZ Online Beta (AOB)正名為 ArozOS 。

3 年後的 ArozOS 系統

經過 3 年的開發,它終於成為了一個類本地作業系統的網頁系統。首先就讓我們由桌面開始介紹吧!

網頁桌面

ArozOS 的桌面基本上就是 Ubuntu 20.04 混 Windows 的風格。你可以看到類似 Ubuntu GNOME 的通知欄

也能夠在右上角看到電源開關(可以透過啟動參數關閉這功能),還有一些方便的捷徑

就像 Windows 一樣,如果你要建立一個新檔案也只需要右鍵即可。你也可以透過右鍵選單來更改桌面背景

開始功能表也是如此,看著有沒有一點熟悉的感覺?

在結束桌面的介紹之前最後一定要說的:桌面版的重新命名界面!

看到沒有彈出視窗的感覺是不是非常有桌面的感覺呢?是不是有那種回到家對著主機螢幕的那種安心感(不對

檔案管理員

在使用原本的系統一段時間之後,我開始需要上載其他東西到我的系統裡。而最通用的界面去查看不同類型的檔案當然是?沒錯,就是檔案管理員。所以我就自己寫了一個進去我的系統啦

我的檔案管理員有兩種模式,為別是「列表」模式跟「縮圖」模式

在縮圖模式下,檔案管理只會嘗試從檔案中提取預覽圖片。這功能適用於音樂、影片,照片甚至 3D 模型檔案

檔案管理員最初並沒有分類和排序的功能。可是由於上載到系統的檔案數目日益增加,所以去到一個地步我還是需要把排序功能加進去才有辦法找到我的檔案(

之後還加入了支援 regex 的檔案尋找功能

噢,如果你是喜歡 dark theme 的使用者,檔案管理員也提供 dark theme 模式,不過這最初只是方便我在晚上找電影來看而已

檔案管理功能

檔案管理員提供很多不同的檔案功能。你可以在右鍵選單中找到所有的功能。

就如作業系統一樣,你也可以選擇以某一個 WebApp 開啟指定的檔案

為了讓自己在收拾和清理資料夾的時候比較方便,所以系統也加入了支援 drag & drop (拖放)的功能。要移動檔案的時候只要很簡單的把檔案由一個視窗拖放到另一個視窗即可。

由於 Golang 本身提供 async 模式以處理要求(request),因此這樣的功能比起 PHP 更容易開發。這個即時的進度顯示是使用 websocket 技術,讓後端一邊複制檔案一邊回傳進度。

檔案分享

間中我也會有需要透過 ArozOS 分享檔案的功能。因此我就順便把這個功能加進去了。

(這裡只是一個例子,乖孩子不要把 localhost 的網址分享給別人喔)

別人就可以透過 QR Code 或是分享的連接來下載到檔案

回到原點:音樂與影片播放

當然這些功能現在還存在吧!經過三年的開發,這些功能已經比之前的好用很多了。使用 PWA 技術,現在的音樂播放器大約長這樣

這個界面甚至可以在 Android 手機上顯示獨立的播放界面(如果你是工程師,這個叫 MediaSession API)

影片播放模組亦是如此。使用 HTML5 技術,它能夠串流影片和電影,不再需要好像以前的版本那樣先下載才能看了。

系統設定

基本設定

由於這套系統已經長這麼大,這麼複雜了,要管理這套系統亦會需要一個很複雜的設定界面。我嘗試把設定界面做得簡單易用,所以就設計了一個分類,讓不同的設定放在不同的子分類裡,然後下面再有不同功能設定的細分類。

首先,你可以在系統設定看到系統的基本資料與處理器、記憶體使用量。

WebApp (網頁應用程式)及 Subservice (子服務)

當然,作為一個網頁桌面系統,當然也需要一個安裝應用的界面吧?所以我就弄了一套應用系統出來了。以下是一堆我寫出來自用的應用程式

WebApp 都是一些簡單,只需要檔案存取的應用程式。這些 WebApp 使用 JavaScript 編寫,並使用 Otto VM 作沙盒隔離。而 Subservice 則是一些比較複雜,需要直接與 OS 連接的程式。

你可以輕易的透過設定界面安裝和移除 WebApp

可是 Subservice 只能設定啟用和禁用。畢竟有一些 subservice 是跟系統運作穩定性相關的,理論上應該是由裝置的 OEM 廠商設定。使用者如果需要移除 subservice 便需要透過 terminal 才能夠把 subservice 完整移除。

當然,就如一般的作業系統一樣,你可以預設以某個 WebApp 來打開某種檔案副檔名。

網絡與連接

除了網頁界面之後,在一些特別的情況下,我也可能需要選擇以 FTP 或是 WebDAV 連接到我的伺服器。所以我就乾脆做了一個界面方便自己開啟這些功能了。

由於在 Windows 上掛載沒有 TLS 加密,卻有使用者隔離的 WebDAV 比較難,所以這裡使用了一些奇怪方法來做到這個效果。缺點就是設定過程會比 Mac 複雜一點。

至於擁有 WiFi 的裝置(如 Raspberry Pi),你也可以直接透過 ArozOS 更改 WiFi 設定。

如果你啟動了 UPnP,你也可以設定 Port Forward 功能以開放更多端口給其他應用程式。

使用者系統

首先,每一位使用者都可以控制他們的帳戶圖像跟更改密碼

ArozOS 裡面使用類似 Linux 的設計,使用「使用者」+ 「權限小組」的形式來管理。所以你能夠看到使用者設定與權限小組兩種不同的權限設置系統。

你也可以透過開啟這功能來邀請朋友來你的雲端桌面

儲存管理

最後,要管理這麼多的檔案,我們當然會需要一個硬碟管理器吧?系統設定內有內置的顯示工具、大檔案尋找器等等。更有一些把 ArozOS 用作 NAS 作業系統的開發者加入了 SMART 功能。

檔案類型分佈圖表
硬碟容量顯示 (Windows)
SMART

為了讓我可以安排使用者可使用的容量和空間,這裡採用了權限小組 + 儲存群組的分組方式。雖然這應該不是最簡單的架構,但是如果之後需要加入支援 Google Drive 或是 One Drive 連接的話這個功能應該會用得上。

這系統還有一個特別功能,可以讓使用者在 Linux 上像 Windows 那樣格式化硬碟呢

其他

其實這套系統還有很多不同的 WebApp 和功能我想分享,可是我並沒有這麼多時間在這裡一一把他們都描述出來。如果我將來有時間的話或許我會再寫一篇文章跟大家分享吧?在這裡我先放幾張截圖讓你們看看系統的其他功能:

類似 Visual Studio Code 的編輯器
IoT 控制器、時計等工具

了解更多

如果你想了解更多關於 ArozOS 或是純粹想試試看,歡迎來到我的 Github repo 留個星星,然後下載個版本到 Windows / Raspberry Pi 上安裝看看喔!

https://github.com/tobychui/arozos