這是一個想找地方儲存他的音樂、影片跟圖片的窮學生與他的 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 是跟系統運作穩定性相關的，理論上應該是由裝置的…