Drag & Drop 的重要性
https://www.youtube.com/watch?v=eCKVFfYGJfs&feature=youtu.be 之前的 ArOZ Online 系統一直都不支援 Drag & Drop,在使用起來雖然說沒甚麼大不了,就是有一點點的不方便,好像說選擇 File 要在 File Selector 裡面做,要移動 File 不是需要使用 Menu 就是需要使用 Hotkey 如 Ctrl C + Ctrl V 之類的。 AOB 大更新,支援 Drag Drop File Object 的 File Explorer 最新版本(v 20-3-2020)之後的 AOB 將會全面支援 File Drag Drop 。這到底是甚麼意思呢?簡單來說,這就是容許 File Explorer 對其他模組或另一個 File Explorer 視窗進行基於 Drag drop 的檔案移動。例如說你要把檔案由 A File Explorer 移動到 B File Explorer,這個時候你只需要把檔案由 A 拉到 B 即可,就像 Windows 一樣完全不用煩惱設定的問題,使用起來非常的直觀。 詳細的例子你可以看上面的 Youtube 影片了解更多。
網頁上的硬碟 SMART 檢測
ArOZ Online 雖然表面看上去是一個 NAS 作業系統,然而它並不是。說它是 NAS 作業系統倒不如說它是一個真正能用的 Web 桌面系統還比較好? 說實話 ArOZ Online 上面有很多不知為甚麼會出現的功能,由踩地雷到小畫家,跟 XP 的距離就只欠一個 3D彈珠台而已。而這次終於到了硬碟 SMART 檢測器了。這個是由 @alanyeung 開發的一個 ArOZ Online 系統組件,這是使用 smartctl 的多平台版本寫出來的,查詢結果在 json 化之後再經過 kernel 傳到 PHP 作顯示,雖然說上去滿簡單的東西,卻讓系統馬上變得更像 NAS 作業系統了。 SMART 檢測界面及硬碟的詳細數據 每一塊硬碟都能夠看到由 smartctl 回報的仔細的數據 這功能可以在 系統設定 > 檔案與儲存器 > 硬碟 SMART 裡面找到 就是這樣,ArOZ Online 又多了幾十 MB 的源碼了,整個系統現在包含著各種各樣的 binary 檔案現在差不多要到 780MB 了。之後在加入 Clustering 相關的代碼之後應該會更大吧?
OAO – 開源版本的 ArOZ Online 個人雲端平台
宣傳海報 自從 2016 年開發 ArOZ Online 系統之後就不斷有人跟我說這系統的價值和用途,當然這也是各有各的說法,從商業管理系統,多媒體創作平台,個人醫療管理到網絡硬碟等都有人提出過。當然,這對我來說是很榮幸的事情,畢竟這麼多人提出這麼多個用途,即是說這系統已經具有多周途的特點,可以隨個人需要而更改上面安裝的模塊以配合自己的需求。 現有的 ArOZ Online 版本 自這篇文章開始寫的今天開始計算,之前發佈的版本主要有以下幾個: 版本號代號發佈類型< dev-1.1.4Aloplex內部測試版< dev-1.2.8 Sempervivum Tectorum 內部測試版 1.0aCloud穩定版1.1aCloud - Oryza Sativa 內部測試版 1.2aCloud - Bombax Ceiba內部測試版 所以,如果要開源的話有兩個方向是可行的 使用獨立發行版本開源 使用獨立版本發行,即是說之後的 ArOZ Online 會分為兩個版本:1. ArOZ Online LTS (Long Term Support)2. Open ArOZ Online 這裡的好處就是我們可以透過 Long Term Support 的版本確保資金來源,再者確保開發進度和方向,然而不好的部分當然就是要分開兩個版本發行,由於系統組建不一樣,就結論來說組建的時候也會有很多問題,而且由 Open Source Community 提出的更改也很難直接進到主要的源碼庫,最後導致難以創造一個新的開源社群。 使用模組化方式開源 使用模組化開源的方式就比較特別,而且也應該比較少 Open Source Project 會使用這做法,畢竟這很容易導致版本不兼容的問題,但是我還是在這裡說一下這種開源方式的原理 模組開源方案 這種設計比較像 RedHat 之類的商業用 Linux 方案,然而要維護一點都不容易,再者,要實現這種開源的模組化設計還需要以下幾個系統功能: 模組安裝器(使用 Git 倉庫的 URL 來安裝)自動更新模組,用作更新 Open ArOZ Online 的基層架構開源模組的安裝需求及版本控制器(有點像 npm 的東西?) 所以,就現在的開發進度來說這種開源方式還是未能實現的。 結論 就開原模式來說的確使用模組化開源方案是比較合適的。然而,這會需要加入新的系統架構來作支援。看來在整個開源生態圈成熟之前還是只能用第一種方案:分成兩個組建的方式來開源會比較方便和符合成本效益了。
WordPress 與 ArOZ Online 模組
話說有一天我發現了你可以在側欄加入自定義的 HTML 代碼,試著試著,想不到連 Javascript 也能放進去 自定義的 HTML 欄位 於是我試了一下,果然真的能執行起來。 所以之後簡單的寫了一個轉接器把 ArOZ Online 上面的雲模組轉接過來 Wordpress 界面上使用,想不到居然真的能用。 NotepadA 模組在 Wordpress 上面啟動了 AirMusic 模組同樣也能在 Wordpress 界面上播放 果然 ArOZ Online 模組去到哪裡都能用真是有夠方便欸
一切都是 Windows 的錯:為甚麼 ArOZ Online 會出現 UM檔案 及 HEX資料夾 名命法
這甚麼爛東西,為甚麼要把一般的檔名全部編碼起來?那我用 Samba 的時候怎樣知道這個檔案是甚麼檔案?某 Beta 測試用家 沒錯,這一篇文章就是用來介紹到底為甚麼 ArOZ Online 要使用一個這麼麻煩的編碼方法來儲存檔案名稱及資料夾名稱。先由結論說起:這一切都是 Windows 的錯! 在這裡我先解釋一下甚麼是 UMFilename 跟 HexFoldername。這兩個是 ArOZ Online 用來給檔案及資料夾名稱編碼的方法,簡單來說就是把檔案名字使用 "inith" + bin2hex(原檔名) + "." + 原副檔名 和把資料夾使用 bin2hex(原資料夾名稱) 來編碼的一個神奇儲存方法。一般如果你在用 ArOZ Online 的檔案管理員你會看到有一些使用者自行上載的檔案會出現 綠色 或 藍色 底色的,那就是經編碼後的資料名稱。 HexFoldername 在 File Explorer 上顯示為綠色 UMFilename 在 File Explorer 上顯示為 藍色 故事起源: ArOZ Online Alpha ArOZ Online Alpha 是一套使用 PHP 5 編寫的影音串流系統,本來是用於 Windows + WAMP 的網頁伺服器架構上。而開發者我使用的 Windows 7 本身是 Big-5 編碼的,因此對中文的支援是完全 OK 的,但是我除了中文音樂之外也有聽日文的音樂,而問題就出在了這裡: PHP5 在讀取日文檔案名稱的時候出現亂碼。 ArOZ Online Alpha 的音樂播放界面 對於這個問題,基本上一般人想到的就只有這幾個解決方案: 把伺服器重灌,裝個 Unicode 版的 Windows 或者使用 Linux使用 Linux VM 並在 VM 裡面運行系統把檔案名稱全部放到 Database 裡,然後根據檔案路徑找到 Unicode 編碼的檔案名字。 然而,由於這套系統的無 DB 特性,第 3 點就不能用了;第 1, 2 點也太麻煩了完全不附合成本效益,所以最後的解決方法是:上載的時候使用 PHP 把檔名編碼成一個只使用 ASCII 的字串,然後以編碼字串來儲存,要讀取的時候從系統讀取檔名然後解碼出原本的檔名就好了。 可是,另一個問題就出現了。如果檔案名字本身就是以我編碼的方式儲存怎辦?例子: 音樂.mp3 -> abc.mp3 然後又剛好出現一個 abc.mp3?所以就乾脆直接在編碼後的檔案名字前加上 "inith" (Initiate with Hex Value),用以分辨是我方編碼的還是原本已經編碼的檔案,就是這樣,這種 UMFilename 的初型就出現了。 那為甚麼這種編碼方式叫做 UMFilename? 在剛開發 ArOZ Online Beta 的時候,最基礎的模組只有 Audio,Video 跟 Photo。基本上就是用以代替 ArOZ Online Alpha 的基本功能。 然而,這三個模組都需要上載功能,而由於 ArOZ Online Beta 的模組化設計原則,一個新的模塊被設計了出來: Upload Manager。 ArOZ Online Beta Audio 模組裡的 Upload Manager 界面 由於這個 Upload Manager 同樣遇上跟之前 Alpha 版本時的系統編碼問題,於是就直接把 Alpha 版的檔案名編碼方式搬過來了。而本來並沒有特別名稱的這種編碼方式也跟著這個模塊的名字改了起來,變成了 Upload Manager special File Naming Method,簡稱 UMFilename(或有人稱為 inith 命名法 或 inith filename)。 那 Hex Foldername 又是哪裡出來的? 在 ArOZ Online Beta 檔案管理員開發中的時候,一個 Bug 出現了。由於系統內的資料夾全部都是英文,直到桌面模組出現了之後才有機會因使用者新增資料夾的關系出現中文的資料夾名稱。到了中文的部分其實還是不大問題,因為中文還可以透過 PHP 的 mbstring 解決,然而日文的資料夾名稱就無法載入了。就結果而言,資料夾的命名需要另一個特別的編碼方法。 其實到發現這個問題的時候已經是滿後期的了,之前已經發生過不少因檔案名字過長而無法開啟的情況。(因為…
ArOZ Online 檔案選擇器
說到要在 WebApp 上讓使用者選擇檔案你會怎樣設計? 不少開發者都直接在 WebApp 裡面創建一個可以點選的列表就算數,能用但是不完美;所以在 ArOZ Online Base 系統架構裡面,我們在設計 File System 的時候就設計了一個可以輕易讓開發者使用的 檔案選擇器 ( File Selector ) 了。 ArOZ Online 系統下的 File Selector 所以,為啥我要用 FIle Selector?我自己幹一個就好了啊? 對,你也可以自己幹一個檔案選擇器,可是系統內建的 File Selector 有幾點用起來真的滿方便的。 預設支援 UM-FILENAME 及 HEX-FOLDERNAME 由於內建的檔案選擇器內建了 UM-Filename 跟 Hex-Foldername 的轉換程式,所以寫起來不必要特別自行處理這些特別的檔案命名方式。 Hex-foldername 顯示方法 UM-Filename 顯示方法 支援新增文件或資料夾 如果你需要新增一個文件或資料夾的時候,你可能要在 WebApp 裡面多加一個 <form> 元素,之後又需要增加一個處理的 php 甚麼的不是很麻煩嗎?用系統內置的 File Selector 就能直接省略這些問題,使用 Javascript callback 來取得使用者新建的文件名或資料夾名稱及位置。 新建文件的 File Selector 界面 使用方法 一般來說我們會建議使用者使用 Float Window 模式啟用 File Selector。然而,在一般網頁模式下啟動 File Selector 也是可以的,只不過使用體驗上會感覺到有點奇怪。首先,我們先從由 Float Window Mode 啟動 File Selector 的教學開始: 在 Float Window 模式下啟動檔案選擇器 先假設我們有這麼一個 function 來接收使用者選擇的檔案 function addFileFromSelector(fileData){ result = JSON.parse(fileData); for (var i=0; i < result.length; i++){ var filename = result[i].filename; var filepath = result[i].filepath; //DO SOMETHING HERE } } 以下是功能的啟動參數 ao_module_openFileSelector(uid,callBackFunctionName, windowWidth = 1080, windowHeight = 645, allowMultiple = false, selectMode = "file", newfname = "newfile.txt", umf = true) allowMultiple : 充許選擇多個檔案selectMode : (file / folder / mix / new),其意思為:只選擇檔案 / 只選擇資料夾 / 可選擇資料夾或檔案 / 新增文件或資料夾newfname : 新增檔案的預設名字(只在 selectMode = new 時有效)umf : 使用 UM-Filename 編碼檔案名字(只在 selectMode = new 時有效) //最基本的例子 var uid = ao_module_utils.getRandomUID(); ao_module_openFileSelector(uid,"addFileFromSelector",undefined,undefined,true); //自定義選擇器大小 var uid = ao_module_utils.getRandomUID(); ao_module_openFileSelector(uid,"addFileFromSelector",720,480,true); 你也可以透過 File Selector 為建立新的檔案名命,例子如下: var uid…
ArOZ Online 的 WebSocket 伺服器與 JWT 登入方法
ArOZ Online 一向也被人吐槽說沒有 Database 只能用 PHP 怎樣做即時通訊的 Web APP 呢?對,這真是一個好問題。 現在處理即時資料的方法 現在的 Web Desktop 模式即時更新方式 沒錯,這可能比你想像中的還要簡單,現在在 ArOZ Online 上處理即時資料的方法就是每隔一段時間做一次 AJAX Request 問伺服器的 php script 要一次資料。簡單來說就是每一個需要即時資料的模塊裡都會出現一段類似這樣的代碼: setInterval(function(){ $.ajax({url: url, success: function(data){ doSomething(data); }}); },1000); 這有甚麼不好嗎? 不好,這十分不好。首先, ArOZ Online 系統並沒有標準的 Database,所以 SQL 甚麼的都不能用。而且大部分模組開發者也不會這麼有空把 SQLite 塞進去,不少模塊也是直接拿 JSON 或 CSV 檔來儲存資料,就結果而言這種存取方法只會讓系統被 IO 速度卡住,想快也快不了。 所以 AOBWS 就出現了 甚麼是 aobws? aobws 就是 ArOZ Online 基礎系統的 WebSocket 伺服器。這系統有以下幾個特點: 支援 ArOZ Cluster 的 JWT 登入模式類 Minecraft 式指令模式以 Channel 分隔的 Broadcast 模式支援單用家多視窗登入 要用它的話跟一般 WebSocket 的使用方法很接近,簡單來說就是使用 ao_module 的 ws 模塊進行 init() 即可。以下是一個簡單的例子 aobws 網頁端啟動 function 例子 完整例子: https://github.com/aroz-online/aobws_demo/blob/master/index.php 那作為開發者 JWT 的部分我要怎樣處理? 這系統的好處就是你可以不用處理,只要填入 token = "" 即可自動彈出視窗讓使用者輸入 JWT token 值,是不是滿方便呢? JWT 請求授權界面 就是這樣,你的模組就能很方便的使用 aobws 作即時通訊了。 備注:如果我想用 aobws 作其他用途怎辦? 可以喔,你也可以在同一個 aob 主系統下使用多個 aobws 作其他用途。你可以在 SystemAOB/system/aobws 下找到啟動檔然後自行更改啟動設定。(主要是更改啟動的 port 跟 登入授權檢查的 URL)。以下為 aobws 的啟動參數: Usage of aobws.exe: -cert string Certification for TLS encription (default "server.crt") -endpt string ShadowJWT Validation Endpoint (default "http://localhost/AOB/SystemAOB/system/jwt/validate.php") -key string Server key for TLS encription (default "server.key") -port string HTTP service address (default "8000") -tls Enable TLS support on websocket (aka wss:// instead of ws://). Reqire -cert and -key