我如何用JavaScript为iPad建立一个仪表板在这篇文章中，我将向你展示我是如何为JavaScript Maste

在这篇文章中，我将向你展示我是如何为JavaScript Masterclass课程建立一个报名计数器的，这样我就可以看到有多少人报名参加了这个课程（报名时间为11月15日至11月22日！）。

这个计数器是一个完全多余的东西，是我在拖延和想逃避重要工作时做的那些。

我一直在想不同的方法，比如用JavaScript创建一个iOS小部件，使用Scriptable。

但后来我想，好吧，我们还是做一个网页吧。一个我可以在iPad上保持打开的网页，我把iPad放在桌子旁边，或者放在我可以时常看的地方。

我可以把iPad设置为永远不把显示器放在睡眠状态，而且我可以把页面设置为每2分钟自动刷新一次。

制作一个简单的网页的好处是，我可以在任何地方访问它。从iPad、iPhone、Mac。

我做了一个Node.js程序来获取我需要的数据。

第一步是写一个获取数据的函数。

const getData = async () => {
  return new Promise((resolve, reject) => {
    let count = 0
    //retrieve the count
    resolve(count)
  })
}

我把它做成了一个异步函数，因为我使用的是获取请求，而且很可能你也会需要它。

如果你感到好奇，我把所有的注册都存储在一个Airtable记录中，所以在getData() ，我把所有需要的代码都放在了Airtable中，以获取计数。

然后我做了一个非常简单的Express服务器，为一个HTML页面提供服务，在页面中央显示大的计数。

const express = require('express')
const app = express()

app.get('/', async (req, res, next) => {
  const count = await getData()
  const html = `
  <html>
  <head>
    <!-- refresh every 2 minutes -->
    <meta http-equiv="refresh" content="120"> 
    <!-- allow full screen on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">

    <link href="https://fonts.googleapis.com/css2?family=Arvo:wght@400;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)

这就是结果。

这里是iPhone上的同一页面。

你可以在你的电脑上本地运行这个程序，只要电脑在运行，你就可以从同一个wi-fi网络上的设备上访问它，如果你愿意，你可以使用localhost隧道服务，但你也可以把这个放在互联网上的某个地方。

我把这个应用程序放在我用于Node脚本的服务器上，所以我可以从任何地方访问它，即使我在4G网络上。

如果我愿意，我也可以在苹果电视上进行AirPlay，这样我就可以在电视大屏幕上看到报名人数。