> ## Documentation Index
> Fetch the complete documentation index at: https://docs.replit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Comece seu primeiro app mobile

> Crie o PixelGames, um app de jogos em estilo retrô, como um app nativo para iOS e Android com o Agent.

export const PromptActions = ({prompt = "", campaign = "docs-prompt-actions"}) => {
  const LZ_SRC = "https://cdnjs.cloudflare.com/ajax/libs/lz-string/1.5.0/lz-string.min.js";
  const ensureLZString = () => {
    if (typeof document === "undefined") return;
    if (window.LZString) return;
    if (document.querySelector(`script[src="${LZ_SRC}"]`)) return;
    const s = document.createElement("script");
    s.src = LZ_SRC;
    s.async = true;
    document.head.appendChild(s);
  };
  const handleCopy = async e => {
    const btn = e.currentTarget;
    if (!prompt) return;
    try {
      await navigator.clipboard.writeText(prompt);
    } catch {
      const ta = document.createElement("textarea");
      ta.value = prompt;
      document.body.appendChild(ta);
      ta.select();
      try {
        document.execCommand("copy");
      } catch {}
      document.body.removeChild(ta);
    }
    const original = btn.dataset.label || btn.innerText;
    btn.dataset.label = original;
    btn.innerText = "Copied!";
    setTimeout(() => {
      if (btn.isConnected) btn.innerText = original;
    }, 1500);
  };
  const handleBuild = () => {
    if (!prompt || typeof window === "undefined") return;
    const utm = `utm_source=replit-docs&utm_medium=docs&utm_campaign=${encodeURIComponent(campaign)}&utm_content=prompt-actions`;
    let url;
    if (window.LZString) {
      const encoded = window.LZString.compressToEncodedURIComponent(prompt);
      url = `https://replit.com/?prompt=${encoded}&referrer=replit-docs&${utm}`;
    } else {
      url = `https://replit.com/?prompt=${encodeURIComponent(prompt)}&referrer=replit-docs&${utm}`;
    }
    window.open(url, "_blank", "noopener,noreferrer");
  };
  ensureLZString();
  const baseButtonStyle = {
    display: "inline-flex",
    alignItems: "center",
    gap: "6px",
    padding: "8px 16px",
    borderRadius: "8px",
    fontSize: "14px",
    fontWeight: 500,
    cursor: "pointer",
    lineHeight: 1.2,
    fontFamily: "inherit",
    textDecoration: "none"
  };
  return <div style={{
    display: "flex",
    gap: "12px",
    margin: "16px 0",
    flexWrap: "wrap",
    alignItems: "center"
  }}>
      <button type="button" onClick={handleCopy} style={{
    ...baseButtonStyle,
    background: "transparent",
    color: "inherit",
    border: "1px solid rgba(127,127,127,0.4)"
  }}>
        Copy the prompt
      </button>
      <button type="button" onClick={handleBuild} style={{
    ...baseButtonStyle,
    background: "#F26207",
    color: "#FFFFFF",
    border: "1px solid #F26207"
  }}>
        Build on Replit ↗
      </button>
    </div>;
};

export const AiPrompt = ({children}) => {
  return <CodeBlock className="relative block max-w-full overflow-x-hidden font-sans !whitespace-pre-wrap !break-words" style={{
    overflowWrap: "anywhere",
    wordBreak: "break-word"
  }}>
      <div className="pr-7" style={{
    whiteSpace: "pre-wrap",
    overflowWrap: "anywhere",
    wordBreak: "break-word"
  }}>
        {children}
      </div>
    </CodeBlock>;
};

export const pixelGamesPrompt = "Create a mobile app called PixelGames: a retro handheld console UI styled like a classic Game Boy, cream plastic shell, grey screen bezel, olive-green LCD screen with grid lines. Add a D-pad and two round A/B buttons, plus MENU and START buttons below the screen. Show a menu with four games: Blocks, Snake, Racer, and Pinball.";

Criar um app mobile no Replit funciona da mesma forma que criar um app web: você descreve o que
quer, e o Agent escreve o código. Este guia percorre esse processo com um exemplo, para que você
veja o padrão antes de aplicá-lo à sua própria ideia.

<Frame caption="Resultado final: o menu do PixelGames e o jogo Blocks rodando em um celular.">
  <img src="https://mintcdn.com/replit/WuaQIOfW5oxRlxex/images/pixelgames/mobile/pixelgames-home-screen.webp?fit=max&auto=format&n=WuaQIOfW5oxRlxex&q=85&s=dfae6a8f1698297aeda472c149fe9610" alt="Menu do PixelGames listando Blocks, Snake, Racer e Pinball, com Blocks selecionado" width="420" height="420" data-path="images/pixelgames/mobile/pixelgames-home-screen.webp" />
</Frame>

<PromptActions prompt={pixelGamesPrompt} campaign="docs-mobile-first-app" />

## Antes de começar

Tudo de que você precisa é uma [conta do Replit](https://replit.com/), gratuita para criar.

O objetivo é completar um ciclo inteiro:

* Criá-lo com o [Agent](/pt/features/agent/overview)
* Testá-lo como um app mobile
* Publicá-lo e compartilhá-lo

O Agent é o construtor de IA do Replit. Você descreve o que quer, e ele cria o app, explica o
que fez e corrige o que estiver quebrado.

## 1. Peça ao Agent para criar o app

Abra o Replit e inicie um novo app. Descreva o que você quer criar e então selecione **Mobile app**
como o tipo de app.

<AiPrompt>
  {pixelGamesPrompt}
</AiPrompt>

<Frame caption="O Agent configurando o projeto mobile e a interface do console.">
  <img src="https://mintcdn.com/replit/WuaQIOfW5oxRlxex/images/pixelgames/mobile/pixelgames-scaffolding.png?fit=max&auto=format&n=WuaQIOfW5oxRlxex&q=85&s=f65c88aa83300af9e0aca0528175646a" alt="O prompt de criação do PixelGames inserido na página inicial do Replit, com o modo Mobile selecionado" data-path="images/pixelgames/mobile/pixelgames-scaffolding.png" width="877" height="411" data-path="images/pixelgames/mobile/pixelgames-scaffolding.png" />
</Frame>

## 2. Confirme que funciona na visualização

O Replit simula o PixelGames como iOS ou Android diretamente no painel de visualização. Essa é
a forma mais rápida de verificar uma alteração.

<Steps>
  <Step title="O simulador inicia automaticamente">
    O Replit inicia a simulação assim que o PixelGames está pronto, sem nenhuma configuração.
  </Step>

  <Step title="Alterne entre plataformas com o menu suspenso">
    Use o menu suspenso **Simulate on...** na barra de ferramentas do painel de visualização
    (ao lado dos ícones de chave inglesa e de atualizar) para alternar entre **iOS**,
    **Android** e **Web**.
  </Step>
</Steps>

<Frame caption="O menu suspenso Simulate on... no painel de visualização do Replit.">
  <img src="https://mintcdn.com/replit/wpDFPJulnZRpqmW6/images/pixelgames/mobile/replit-simulate-dropdown.png?fit=max&auto=format&n=wpDFPJulnZRpqmW6&q=85&s=261e1358d3acd58025b1f4f00d779a5b" alt="Painel de visualização do Replit com o menu suspenso Simulate on Web, iOS ou Android aberto" data-path="images/pixelgames/mobile/replit-simulate-dropdown.png" width="1920" height="992" data-path="images/pixelgames/mobile/replit-simulate-dropdown.png" />
</Frame>

### Verifique se realmente funciona

Use o PixelGames como um jogador usaria:

* Veja a tela de **MENU** com **Blocks** selecionável e os outros três jogos marcados como "SOON".
* Abra o Blocks e jogue algumas peças com o D-pad e os botões A/B.
* Confirme que a pontuação, o nível e as linhas no HUD são atualizados conforme você joga.

Se algo parecer errado, descreva o que você viu ao Agent, você não precisa encontrar o bug
sozinho.

## Você colocou o PixelGames para rodar

Você foi de um único prompt a um jogo jogável, visualizado dentro do próprio Replit.

## Solução de problemas

<AccordionGroup>
  <Accordion title="O painel de visualização continua em branco">
    O primeiro build leva um minuto ou dois, então dê um tempo antes de presumir que travou.
    Se ainda estiver em branco depois disso, verifique se há um erro no console e compartilhe-o
    com o Agent.
  </Accordion>

  <Accordion title="As alterações não aparecem na visualização">
    Pressione **R** no console para recarregar o PixelGames e, se ainda parecer desatualizado,
    use o ícone de atualizar na barra de ferramentas do painel de visualização.
  </Accordion>

  <Accordion title="Tela de erro vermelha na visualização">
    Isso geralmente significa um erro de JavaScript ou um pacote ausente. Leia a mensagem, ela
    costuma apontar o arquivo e a linha exatos, depois compartilhe-a com o Agent e peça uma
    correção.
  </Accordion>

  <Accordion title="O app funciona na web, mas quebra no iOS ou no Android (ou vice-versa)">
    Alguns pacotes se comportam de forma diferente entre plataformas, um que funciona na web
    pode não oferecer suporte ao nativo, ou exigir uma configuração diferente. Pergunte ao
    Agent "Esse pacote tem suporte a nativo?" antes de depender dele.
  </Accordion>

  <Accordion title="O build demora muito">
    O primeiro build é sempre mais lento, pois nada está em cache ainda, os seguintes devem ser
    mais rápidos. Se continuar lento, peça ao Agent para verificar se há pacotes desnecessários
    no projeto.
  </Accordion>

  <Accordion title="Erros de módulo não encontrado">
    Isso significa que um pacote não está instalado, ou está instalado mas o cache está
    desatualizado. Peça ao Agent para instalá-lo ou limpar o cache e confira se o nome do pacote
    não está escrito errado.
  </Accordion>
</AccordionGroup>

## Próximos passos

<CardGroup cols={2}>
  <Card title="Teste no seu celular" icon="mobile" href="/pt/build/mobile-preview-testing">
    Sinta o PixelGames como um app de celular de verdade: botões sob o polegar, vibração
    háptica, o tamanho real da tela.
  </Card>

  <Card title="Adicione login" icon="right-to-bracket" href="/pt/build/mobile-login">
    Permita que os jogadores entrem e salvem o progresso.
  </Card>

  <Card title="Armazene imagens no seu app mobile" icon="image" href="/pt/build/mobile-store-images">
    Salve fotos de perfil no App Storage.
  </Card>

  <Card title="Envie notificações push" icon="bell" href="/pt/build/mobile-push-notifications">
    Avise os jogadores quando um novo jogo for lançado.
  </Card>

  <Card title="Adicione pagamentos" icon="credit-card" href="/pt/build/mobile-payments">
    Cobre dos jogadores por conteúdo no PixelGames.
  </Card>
</CardGroup>