Comece agora

Início rápido

Copiar página

Um app Lia funcional em alguns minutos. Hospede uma página, carregue o SDK, chame Lia.init() e Lia.ready(), e abra-o no Lia como um testador.

#O que você precisa

Uma página web em https. Qualquer framework, hospedado em qualquer lugar, desde que'servido por meio de https. Lia abre apenas páginas https.
Uma conta Lia com um nome de usuário. Pessoas precisam de um nome de usuário para abrir apps, e você também.
Seu app foi adicionado a Lia. A equipe Lia o adiciona com sua página's endereço e faz de você seu desenvolvedor, então você pode abri-lo enquanto ele's no documento. Removê-lo (ou um pai) oculta o botão ou encerra a retenção. Elementos dentro de um Obtendo acesso.

#1. Carregue o SDK

Carregue o SDK de Lia, não de uma cópia. Lia o serve para que as correções atinjam todos os aplicativos de uma só vez.

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>

O SDK coloca um objeto na página, window.Lia. Fora do app Lia ele ainda carrega, mas toda chamada falha com o código not_in_lia, então você pode mostrar uma mensagem amigável em um navegador normal.

#2. Diga oi

Chamada Lia.init() primeiro. Ele responde com o jogador, um token de sessão para o seu servidor, a pessoa's idioma e tema, e muito mais. Quando sua página for desenhada, chame Lia.ready(): até então, Lia mostra seu próprio carregador sobre seu app.

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;
  }
);

Se você preferir async e await:

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

#3. Abra-o no Lia

Enquanto seu aplicativo estiver em teste, apenas você e os testadores que a equipe Lia adicionou poderão vê-lo. Abra o aplicativo Lia, vá para o Centro de Aplicativos e abra seu aplicativo. Seu cabeçalho diz Teste ao lado do seu nome, e tudo que ele vende custa $LIA fictícios.

#4. Tente algo

Algumas coisas para tentar depois init() respondeu:

// 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. Adicione seu servidor

Para qualquer coisa que importa (itens que as pessoas pagaram, $LIA que você paga), o seu servidor precisa verificar o que a página lhe diz. Ele recebe um token de sessão da página e o verifica com a sua chave secreta:

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();

Verifique no seu servidor passa por ele passo a passo.

#Próximo

Como os apps funcionam no Lia: o quadro, os três looks e as regras sob as quais sua página roda.
Vender um item: Lia'sua folha de pagamento, de ponta a ponta.
Referência SDK: cada método, propriedade e evento.
O demo SDK em https://api.lialabs.org/sdk/demo tentativas a cada chamada. Ele abre dentro de Lia para testadores a equipe Lia adiciona a ele.

Traduzido automaticamente. O inglês é a fonte de verdade. Leia em inglês