Начать

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

Копировать страницу

Работающее приложение Lia за несколько минут. Разместите страницу, загрузите SDK, вызовите Lia.init() и Lia.ready(), и откройте его в Lia как тестировщика.

#Что вам нужно

Веб-страница на https. Любой фреймворк, размещенный где угодно, при условии, что он'ваш сервер Lia через https. Lia открывает только страницы https.
Аккаунт Lia с именем пользователя. Людям нужен логин, чтобы открыть приложения, и вам тоже.
Ваше приложение добавлено в Lia. The Lia команда добавляет его с вашей страницей's адрес и делает вас разработчиком, так что вы можете открыть его, пока оно'в тесте. См. Получение доступа.

#1. Загрузите SDK

Загрузите SDK из Lia, а не из копии. Lia предоставляет его так, чтобы исправления достигли всех приложений одновременно.

index.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
  <script src="https://api.lialabs.org/sdk/lia-apps-v1.js"></script>
  <style>
    body {
      margin: 0;
      font-family: system-ui, sans-serif;
      background: var(--lia-bg-color, #fff);
      color: var(--lia-text-color, #0b0b0f);
      padding-bottom: var(--lia-safe-area-inset-bottom, 0px);
    }
  </style>
</head>
<body>
  <main id="app">Opening…</main>
  <script src="app.js"></script>
</body>
</html>

Демо SDK размещает один объект на странице, window.Lia. За пределами приложения Lia оно все еще загружается, но каждый вызов завершается с кодом not_in_lia, поэтому вы можете показать дружелюбное сообщение в обычном браузере.

#2. Поздоровайтесь

Вызов Lia.init() первым. Он отвечает игроком, токеном сессии для вашего сервера, человек'язык и тема, и многое другое. Когда ваша страница рисуется, вызовите Lia.ready(): пока не наступит время, Lia показывает собственный загрузчик поверх вашего приложения.

app.js

Lia.init().then(
  function (me) {
    // me.player.id is this person's id in your app; me.player.name is their Lia username.
    document.getElementById("app").textContent = "Hello, @" + me.player.name;
    Lia.ready();
  },
  function (error) {
    document.getElementById("app").textContent =
      error.code === "not_in_lia" ? "Open this app inside Lia." : "Something went wrong: " + error.code;
  }
);

Если вы предпочитаете async и await:

try {
  const me = await Lia.init();
  render(me);
  Lia.ready();
} catch (error) {
  if (error.code === "not_in_lia") showOpenInLia();
}

#3. Откройте его в Lia

Пока ваше приложение находится в тестовом режиме, только вы и тестировщики, которых добавила команда Lia, могут его увидеть. Откройте приложение Lia, перейдите в Центр приложений и откройте ваше приложение. В заголовке будет написано Тест рядом с вашим именем, и все, что он продает, стоит фальшивые $LIA.

#4. Попробуйте что-нибудь

Несколько вещей, которые можно попробовать один раз init() ответил:

// A toast in Lia's own style.
Lia.toast("Welcome in");

// A tap you can feel.
Lia.haptic("success");

// Lia's main button under your app.
Lia.mainButton.setText("Start").show().onClick(function () {
  Lia.mainButton.showProgress();
  startGame().finally(function () { Lia.mainButton.hide(); });
});

// Keep a best score and see the top 50.
Lia.submitScore(1280).then(function () { return Lia.leaderboard(); }).then(console.log);

#5. Добавьте ваш сервер

Для чего-либо, что имеет значение (предметы, за которые люди платили, $LIA, которые вы выплачиваете), вашему серверу нужно проверить, что говорит страница. Он получает сессионный токен с страницы и проверяет его с помощью вашего секретного ключа:

server.js

const res = await fetch("https://api.lialabs.org/api/apps/v1/session/verify", {
  method: "POST",
  headers: { Authorization: `Bearer ${process.env.LIA_KEY}`, "Content-Type": "application/json" },
  body: JSON.stringify({ session }),
});
const { valid, playerId } = await res.json();

Проверьте на своём сервере проходит его по шагам.

#Далее

Как работают приложения в Lia: рамка, три вида и правила, под которыми работает ваша страница.
Продать предмет: Lia'платежная ведомость, конец в конец.
SDK справка: каждый метод, свойство и событие.
Демо SDK на https://api.lialabs.org/sdk/demo пытается каждый вызов. Он открывается внутри Lia для тестеров, которых команда Lia добавляет в него.

Автоматически переведено. Английский — источник истины. Читать на английском