你可能需要一個樹莓派的儀表板，以了解其效能狀況。在本文中，我將示範如何快速建立一個按需監控儀錶板，以即時查看你的樹莓派的 CPU 效能、記憶體和磁碟使用情況，並根據需要隨時添加更多視圖和操作。
如果你已經使用 Appsmith，你也可以直接匯入 範例應用程式 並開始使用。
Appsmith 是開源的 低程式碼 應用程式建置工具，可協助開發人員輕鬆快速地建立內部應用，例如儀表板和管理面板。它是一個用於儀表板的很好選擇，並減少了傳統編碼方法所需的時間和複雜性。
在此範例的儀表板中，我顯示以下統計資料：
建立一個端點你需要一個從樹莓派取得這些資料並傳遞給Appsmith 的方法。 psutil 是用於監控和分析的 Python 函式庫，而 Flask-RESTful 則是一個建立
REST API的 Flask 擴充功能。
{ "cpu_count": 4,"cpu_freq": [600.0,600.0,1200.0 ],"cpu_mem_avail": 463953920,"cpu_mem_free": 115789824,"cpu_mem_total": 971063296,"cpu_mem_used": 436252672,"cpu_percent": 1.8,"disk_usage_free": 24678121472,"disk_usage_percent": 17.7,"disk_usage_total": 31307206656,"disk_usage_used": 5292728320,"sensor_temperatures": 52.616 }1、設置REST API
如果你的樹莓派尚未安裝Python，請在樹莓派上打開終端並運行此安裝命令：$ sudo apt install python3
：
$ python -m venv PiData
接下來，啟動該環境。你必須在重新啟動樹莓派後執行此操作。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">$ source PiData/bin/activate$ cd PiData</pre><div class="contentsignin">登入後複製</div></div>為了安裝Flask、Flask-RESTful 和以後需要的依賴項，請在你的Python 虛擬環境中建立一個名為
的文件，並將以下內容新增到其中：<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">flaskflask-restfulgunicorn</pre><div class="contentsignin">登入後複製</div></div>儲存文件，然後使用
一次安裝它們。你必須在重新啟動樹莓派後執行此操作。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">(PyData)$ python -m pip install -r requirements.txt</pre><div class="contentsignin">登入後複製</div></div>接下來，建立一個名為 pi_stats.py 的檔案來存放使用 psutil 檢索樹莓派系統統計資料的邏輯。將以下程式碼貼到
檔案中：
from flask import Flaskfrom flask_restful import Resource, Apiimport psutilapp = Flask(__name__)api = Api(app)class PiData(Resource):def get(self):return "RPI Stat dashboard"api.add_resource(PiData, '/get-stats')if __name__ == '__main__':app.run(debug=True)
app = Flask(name) 来定义嵌套 API 对象的应用程序。PiData 定义为具体的 Resource 类 ，以公开每个支持的 HTTP 方法。api.add_resource(PiData, '/get-stats') 将资源 PiData 附加到 API 对象 api。/get-stats 时，将返回 PiData 作为响应。要从你的树莓派获取统计信息，你可以使用 psutil 提供的这些内置函数：
cpu_percentage、cpu_count、cpu_freq 和 sensors_temperatures 函数分别用于获取 CPU 的占用百分比、计数、时钟速度和温度。sensors_temperatures 报告了与树莓派连接的所有设备的温度。要仅获取 CPU 的温度，请使用键 cpu-thermal。virtual_memory 函数可返回总内存、可用内存、已使用内存和空闲内存的统计信息（以字节为单位）。disk_usage 函数可返回总磁盘空间、已使用空间和可用空间的统计信息（以字节为单位）。将所有函数组合到一个 Python 字典中的示例如下：
system_info_data = {'cpu_percent': psutil.cpu_percent(1),'cpu_count': psutil.cpu_count(),'cpu_freq': psutil.cpu_freq(),'cpu_mem_total': memory.total,'cpu_mem_avail': memory.available,'cpu_mem_used': memory.used,'cpu_mem_free': memory.free,'disk_usage_total': disk.total,'disk_usage_used': disk.used,'disk_usage_free': disk.free,'disk_usage_percent': disk.percent,'sensor_temperatures': psutil.sensors_temperatures()['cpu-thermal'][0].current,}下一节将使用该字典。
为了在 API 响应中看到来自树莓派的数据，请更新 pi_stats.py 文件，将字典 system_info_data 包含在 PiData 类中：
from flask import Flaskfrom flask_restful import Resource, Apiimport psutilapp = Flask(__name__)api = Api(app)class PiData(Resource):def get(self):memory = psutil.virtual_memory()disk = psutil.disk_usage('/')system_info_data = {'cpu_percent': psutil.cpu_percent(1),'cpu_count': psutil.cpu_count(),'cpu_freq': psutil.cpu_freq(),'cpu_mem_total': memory.total,'cpu_mem_avail': memory.available,'cpu_mem_used': memory.used,'cpu_mem_free': memory.free,'disk_usage_total': disk.total,'disk_usage_used': disk.used,'disk_usage_free': disk.free,'disk_usage_percent': disk.percent,'sensor_temperatures': psutil.sensors_temperatures()['cpu-thermal'][0].current, }return system_info_dataapi.add_resource(PiData, '/get-stats')if __name__ == '__main__':app.run(debug=True)你的脚本已经就绪，下面运行 PiData.py：
$ python PyData.py * Serving Flask app "PiData" (lazy loading) * Environment: production WARNING: This is a development server. Do not run this in a production environment. * Debug mode: on * Running on http://127.0.0.1:5000 (Press CTRL+C to quit) * Restarting with stat * Debugger is active!
你有了一个可以工作的 API。
你可以在本地网络中与 API 进行交互。然而，要在互联网上访问它，你必须在防火墙中打开一个端口，并将传入的流量转发到由 Flask 提供的端口。然而，正如你的测试输出建议的那样，在 Flask 中运行 Flask 应用程序仅适用于开发，而不适用于生产。为了安全地将 API 提供给互联网，你可以使用安装过程中安装的 gunicorn 生产服务器。
现在，你可以启动 Flask API。每次重新启动树莓派时都需要执行此操作。
$ gunicorn -w 4 'PyData:app'Serving on http://0.0.0.0:8000
要从外部世界访问你的树莓派，请在网络防火墙中打开一个端口，并将流量定向到你树莓派的 IP 地址，端口为 8000。
首先，获取树莓派的内部 IP 地址：
$ ip addr show | grep inet
内部 IP 地址通常以 10 或 192 或 172 开头。
接下来，你必须配置防火墙。通常，你从互联网服务提供商（ISP）获取的路由器中嵌入了防火墙。通常，你可以通过网络浏览器访问家用路由器。路由器的地址有时会打印在路由器的底部，它以 192.168 或 10 开头。不过，每个设备都不同，因此我无法告诉你需要点击哪些选项来调整设置。关于如何配置防火墙的完整描述，请阅读 Seth Kenlon 的文章 《打开端口并通过你的防火墙路由流量》。
或者，你可以使用 localtunnel 来使用动态端口转发服务。
一旦你的流量到达树莓派，你就可以查询你的 API：
$ curl https://example.com/get-stats{ "cpu_count": 4, "cpu_freq": [600.0,600.0,1200.0 ], "cpu_mem_avail": 386273280, ...如果你已经执行到这一步，那么最困难的部分已经过去了。
如果你重新启动了树莓派，你必须按照以下步骤进行操作：
source 重新激活 Python 环境pip 刷新应用程序的依赖项gunicorn 启动 Flask 应用程序你的防火墙设置是持久的，但如果你使用了 localtunnel，则必须在重新启动后启动新的隧道。
如果你愿意，可以自动化这些任务，但那是另一个教程的内容。本教程的最后一部分是在 Appsmith 上构建一个用户界面，使用拖放式小部件和一些 JavaScript，将你的树莓派数据绑定到用户界面。相信我，从现在开始很容易！
硬件监控仪表盘
要制作一个像这样的仪表盘，你需要将公开的 API 端点连接到 Appsmith，使用 Appsmith 的小部件库构建用户界面，并将 API 的响应绑定到小部件上。如果你已经使用 Appsmith，你可以直接导入 示例应用程序 并开始使用。
如果你还没有，请 注册 一个免费的 Appsmith 帐户。或者，你可以选择 自托管 Appsmith。
登录到你的 Appsmith 帐户。
localtunnel.me 地址，總是在末尾添加 /get-stats 以獲得統計資料。將其貼到頁面的第一個空白欄位中，然後點擊 “RUN” 按鈕。 確保在 “回應Response” 面板中看到成功的回應。
Appsmith 介面
#Appsmith 的介面非常直觀，但如果你感到迷失，我建議你查看 在Appsmith 上建立你的第一個應用程式 教學。
在畫布上拖曳"文字Text"、"圖像Image"和"分隔線Divider"小工具作為標題。將它們排列如下：
設定項目標題
「文字Text」 小工具包含你頁面的實際標題。鍵入比“Raspberry Pi Stats”更酷的內容。
「影像Image」 小工具用來展示儀表板的獨特標誌。你可以使用你喜歡的任何標誌。
使用 “開關Switch” 小工具來切換即時資料模式。從你建立的 API 取得數據，需要在 "屬性Property" 面板進行配置。
對於主體部分，使用來自左側的小部件庫的以下小部件創建一個CPU 統計資訊區域，使用以下小部件：
對於記憶體和磁碟統計資訊部分，重複相同的步驟。磁碟統計資訊部分不需要圖表，但如果你能找到用途，那也可以使用它。
你的最終小部件佈局應該類似於以下：
Appsmith 中的屬性設定
最後一步是將API 的數據綁定到你的小部件上。
回到畫布，並在三個類別的部分中找到你的小部件。首先設定 CPU 統計資訊。
要將資料綁定到“進度條Progress Bar” 小部件：
{{PiData.data.cpu_percent ?? 0}}。此程式碼引用了你的 API 的資料流，名稱為 PiData。 Appsmith 將回應資料緩存在 PiData 的 .data 運算子內。鍵 cpu_percent 包含了 Appsmith 用來顯示 CPU 使用率百分比的資料。 
在設定畫面中綁定資料
在 CPU 部分有三个 “统计框Stat Box” 小部件。将数据绑定到每个小部件的步骤与绑定 “进度条Progress Bar” 小部件的步骤完全相同，只是你需要从 .data 运算符中绑定不同的数据属性。按照相同的步骤进行操作，但有以下例外：
{{${PiData.data.cpu_freq[0]} ?? 0 }} 来显示时钟速度。{{${PiData.data.cpu_count} ?? 0 }} 来显示 CPU 计数。{{${(PiData.data.sensor_temperatures).toPrecision(3)} ?? 0 }} 来显示 CPU 温度数据。如果一切顺利，你将得到一个漂亮的仪表盘，如下所示：
树莓派的仪表盘
你可以使用 “图表Chart” 小部件将 CPU 利用率显示为趋势线，并使其随时间自动更新。
首先，单击小部件，在右侧找到 “图表类型Chart Type” 属性，并将其更改为 “折线图LINE CHART”。为了显示趋势线，需要将 cpu_percent 存储在数据点数组中。你的 API 目前将其作为单个时间数据点返回，因此可以使用 Appsmith 的 storeValue 函数（Appsmith 内置的 setItem 方法的一个原生实现）来获取一个数组。
在 “查询或 JSQUERIES/JS” 旁边单击 “+” 按钮，并将其命名为 “utils”。
将以下 JavaScript 代码粘贴到 “代码Code” 字段中：
export default {getLiveData: () => {//When switch is on:if (Switch1.isSwitchedOn) {setInterval(() => {let utilData = appsmith.store.cpu_util_data;PiData.run()storeValue("cpu_util_data", [...utilData, {x: PiData.data.cpu_percent,y: PiData.data.cpu_percent}]); }, 1500, 'timerId')} else {clearInterval('timerId');}},initialOnPageLoad: () => {storeValue("cpu_util_data", []);}}为了初始化 Store，你在 initialOnPageLoad 对象中创建了一个 JavaScript 函数，并将 storeValue 函数放在其中。
你使用 storeValue("cpu_util_data", []); 将 cpu_util_data 中的值存储到 storeValue 函数中。此函数在页面加载时运行。
到目前為止，每次刷新頁面時，程式碼都會將 cpu_util_data 中的一個資料點儲存到 Store 中。為了儲存一個數組，你使用了 x 和 y 的下標變量，兩者都儲存了來自 cpu_percent 資料屬性的值。
你也希望透過設定儲存值之間的固定時間間隔來自動儲存這些資料。執行 setInterval 函數：
cpu_util_data 中的值。 PiData。 cpu_percent 資料將 cpu_util_data 更新為 x 和 y# 變數。 cpu_util_data 的值儲存在鍵 utilData# 中。 getLiveData 父函數。 在「設定Settings」 標籤中，找到物件中的所有父函數，並在「頁面載入時執行RUN ON PAGE LOAD」 選項中將 initialOnPageLoad 設定為「Yes（是）」。
設定頁面載入時要執行的函數
現在重新整理頁面進行確認。
回到畫布。按一下 “圖表Chart” 小工具，並找到 “圖表資料Chart Data” 屬性。將綁定 {{ appsmith.store.disk_util_data }} 貼到其中。這樣，如果你自己多次運行物件 utils，就可以取得圖表資料。要自動運行此操作：
onChange 事件。 {{ utils.getLiveData() }}。 JavaScript 物件是 utils，而 getLiveData 是在你切換開關時啟動的函數，它會從你的樹莓派取得即時資料。但是還有其他即時數據，因此同一開關也適用於它們。繼續閱讀以了解詳情。 將資料綁定到記憶體和磁碟部分的小部件與你在 CPU 統計資訊部分所做的方式類似。
對於記憶體部分，綁定如下所示：
{{( PiData.data.cpu_mem_avail/1000000000).toPrecision( 2) \* 100 ?? 0 }}。 {{ \${(PiData.data.cpu_mem_used/1000000000).toPrecision(2)} ?? 0 }} GB 、{{ \${(PiData.data.cpu_mem_free/1000000000).toPrecision(2)} ?? 0}} GB 和 {{{ \${(PiData.data.cpu_mem_to# 和 {{{ \${(PiData.data.cpu_mem_total/1000000000 ).toPrecision(2)} ?? 0 }} GB進度條的綁定為：{{ PiData. data.disk_usage_percent ?? 0 }}三個統計框小工具的綁定分別為：{{ \${(PiData.data.disk_usage_used/1000000000).toPrecision(2)} ?? 0 }} GB 、{{ \${(PiData.data.disk_usage_free/1000000000).toPrecision(2)} ?? 0 }} GB 和 {{ \${(PiData.data.disk_usage_to# 和 這裡的圖表需要更新你為CPU 統計資料建立的 utils 對象，使用 storeValue 鍵名稱為 #disk_util_data#，嵌套在 getLiveData 下面，其邏輯與 cpu_util_data 類似。對於磁碟使用率圖表，我們儲存的
export default {getLiveData: () => {//When switch is on:if (Switch1.isSwitchedOn) {setInterval(() => { const cpuUtilData = appsmith.store.cpu_util_data; const diskUtilData = appsmith.store.disk_util_data; PiData.run(); storeValue("cpu_util_data", [...cpuUtilData, { x: PiData.data.cpu_percent,y: PiData.data.cpu_percent }]); storeValue("disk_util_data", [...diskUtilData, { x: PiData.data.disk_usage_percent,y: PiData.data.disk_usage_percent }]);}, 1500, 'timerId')} else {clearInterval('timerId');}},initialOnPageLoad: () => {storeValue("cpu_util_data", []);storeValue("disk_util_data", []);}}通过使用 utils JavaScript 对象在打开和关闭真实数据开关时触发的数据流可视化如下所示：
切换
在打开实时数据开关时，图表会变成这样：
显示实时数据
整体上，它既漂亮，又简约，而且非常有用。
当你对 psutils、JavaScript 和 Appsmith 更加熟悉时，我相信你会发现可以轻松无限地调整你的仪表板，实现非常酷的功能，例如：
psutils 扩展到另一台安装有 Python 的计算机上在下一个令人兴奋的项目中，祝你玩得愉快！
以上是在不到 30 分鐘內建立樹莓派監視器儀表板的詳細內容。更多資訊請關注PHP中文網其他相關文章！
