Pairxдля разработчиков

Быстрый старт

Самое короткое приложение — один HTML-файл со встроенными стилями и скриптами, до 512 КиБ. Ни сборки, ни сервера, ни аккаунта разработчика не нужно.

1. Страница#

Сохраните это как hello.html. Приложение считает, сколько раз участники чата нажали кнопку: у каждого свой вклад, сумма общая.

<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Привет, чат</title>
<script type="application/pairx+json">{"stores": {"taps": {"type": "counter"}}}</script>
<style>
  :root { color-scheme: light dark; }
  body { font: 17px -apple-system, system-ui, sans-serif; padding: 16px; text-align: center; }
  #total { font-size: 64px; font-weight: 700; margin: 24px 0 4px; }
</style>
</head>
<body>
<div id="total">0</div>
<p id="mine">Нажмите кнопку внизу</p>
<script>
  let me = null, seq = 0;

  function show(total, mine) {
    document.getElementById("total").textContent = total;
    document.getElementById("mine").textContent = "Ваших нажатий: " + mine;
  }

  pairx.on("storage.changed", ({ changes }) => {
    for (const c of changes) {
      if (c.seq <= seq || c.store !== "taps") continue;
      seq = c.seq;
      if (c.user === me) show(c.total, c.mine);
      else document.getElementById("total").textContent = c.total;
    }
  });
  pairx.on("ui.mainButton.clicked", () => {
    pairx.call("storage.write", { op: "counter.add", store: "taps", key: "all", amount: 1 });
  });

  (async () => {
    me = (await pairx.call("user.get")).id;
    const snapshot = await pairx.call("storage.snapshot");
    seq = snapshot.seq;
    const taps = snapshot.stores.taps;
    show(taps.totals.all ?? 0, taps.mine.all ?? 0);
    await pairx.call("ui.mainButton", { text: "Нажать" });
    pairx.call("app.ready");
  })();
</script>
</body>
</html>

Что здесь происходит:

  • <script type="application/pairx+json"> — манифест внутри страницы: хранилище taps типа counter. Его тип и права проверяет сервер, а не приложение.
  • storage.snapshot отдаёт всё состояние, а событие storage.changed — изменения всех участников по порядку seq; изменения, которые снимок уже учёл, пропускаются.
  • user.get — кто открыл приложение: изменение счётчика несёт user и mine того, кто нажал.
  • ui.mainButton — нативная кнопка Pairx внизу экрана; нажатие приходит событием.
  • app.ready убирает заставку Pairx — вызывайте, как только нарисован первый экран.

2. Проверка#

Без телефона приложение можно открыть в эмуляторе: рядом несколько участников одного чата, та же защита и тот же мост, что в Pairx.

npm install -g https://dev.pairx.org/download/pairx-apps-cli.tgz
pairx dev hello.html

pairx check hello.html делает те же проверки, что сервис при отправке. Подробнее — в разделе Инструменты.

3. Отправка в чат#

  1. В чате Pairx нажмите «+» → «Приложение» → «Новое из кода».
  2. «Вставить» — код из буфера обмена, или «Выбрать файл .html».
  3. «Предпросмотр» открывает приложение только для вас: данные предпросмотра в чат не попадают.
  4. «Отправить» — приложение появится в чате карточкой; участники открывают его кнопкой на ней.

Название приложения берётся из <title>. Если проверка нашла что-то подозрительное, версия уходит на ручную проверку — обычно до суток; что именно её вызывает, сказано в разделе Публикация и версии.

Дальше#

  • Общие данные — какой тип хранилища выбрать и как не потерять изменения.
  • Песочница — чего в приложении нет и чем это заменить.
  • Примеры — три законченных приложения.