/

如何使用JavaScript在iPad上建立儀表板

如何使用JavaScript在iPad上建立儀表板

在本篇文章中，我將向您展示我如何使用JavaScript為JavaScript課程建立一個註冊計數器，以便我可以看到有多少人註冊了這個課程（註冊時間為11月15日至11月22日！）

這個計數器是一個完全多餘的東西，是我在拖延時做的，想要避免重要的工作。

我一直在思考不同的方法來實現這個功能，比如使用Scriptable創建一個JavaScript的iOS小工具。

但後來我想，嗯，那就只做一個網頁好了。一個我可以在iPad上保持打開的網頁，我將iPad放在桌子旁邊或其他可以不時看到它的地方。

我可以設置iPad永不進入睡眠狀態，並將網頁設置為每2分鐘自動刷新。

做一個簡單的網頁的好處是我可以在任何地方訪問它。無論是在iPad上、iPhone上還是Mac上。

我創建了一個Node.js程序來獲取我所需的數據。

第一步是編寫一個獲取數據的函數：

1
2
3
4
5
6
7
const getData = async () => {
 return new Promise((resolve, reject) => {
 let count = 0
 //獲取計數
 resolve(count)
 })
}

我將其設置為async函數，因為我使用了fetch請求，而且很可能你也需要它。

如果你感興趣，我將所有的註冊信息存儲在Airtable紀錄中，所以在getData()內部，我放置了從Airtable獲取計數所需的所有代碼。

然後，我創建了一個非常簡單的Express服務器，該服務器提供了一個HTML頁面，該頁面在頁面的中央顯示了計數。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
const express = require('express')
const app = express()

app.get('/', async (req, res, next) => {
 const count = await getData()
 const html = `
 <html>
 <head>
 <!-- 每2分鐘自動刷新 -->
 <meta http-equiv="refresh" content="120">
 <!-- 在iOS上允許全屏顯示 -->
 <meta name="apple-mobile-web-app-capable" content="yes">

 <link href="https://fonts.googleapis.com/css2?family=Arvo:[[email protected]](/cdn-cgi/l/email-protection);500;600;700&amp;display=swap" rel="stylesheet" media="all">
 <style>
 html,
 body {
 font-family: Arvo,Helvetica,Apple Color Emoji,Segoe UI Emoji,NotoColorEmoji,Noto Color Emoji,Segoe UI Symbol,Android Emoji,EmojiSymbols,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Noto Sans,sans-serif;
 margin: 0;
 font-size: 200px
 }
 h1 {
 display: grid;
 place-items: center;
 height: 100vh;
 }
 @media (prefers-color-scheme: dark) {
 body {
 filter: invert(100%);
 background-color: #000;
 }
 }
 </style>
 </head>
 <body>
 <h1>${count}</h1>
 </body>
 </html>
 `
 res.end(html)
})

const listener = app.listen(3000)

這是結果：

图片1

图片2

這是iPhone上同一個頁面的樣子：

图片3

您可以在本地計算機上運行程序，並可以從同一個Wi-Fi網絡上的設備訪問它，只要計算機在運行，或者如果您更喜歡，您也可以使用本地主機隧道服務，但您也可以將其放在互聯網上。

我將該應用程序放在我用於我的Node腳本的服務器上，這樣我就可以從任何地方訪問它，即使我是在4G網絡上。

如果我想的話，我也可以通過AirPlay將其投放到Apple TV上，這樣我就可以在大電視屏幕上看到註冊數量了。

tags: [“JavaScript”, “iPad”, “dashboard”, “web page”, “Node.js”]