Desenvolver um app do Miblo sem ter um Miblo: o simulador

Três comandos#

Para fazer um app do Miblo você não precisa ter um Miblo. O comando miblo, que vem com o Miblo instalado no computador, cria o app, mostra a tela dele num simulador no navegador e confere tudo com as mesmas regras da loja:

miblo apps new "Meu App"        # cria a pasta meu-app
miblo apps dev meu-app          # o simulador no navegador
miblo apps check meu-app        # as verificações da loja

Nada para instalar: o app é o pacote de código que a loja aceita (manifest.json e main.js, que exporta run(ctx)), e o SDK chega pelo ctx, igual aos apps oficiais. miblo apps new "Meus Alertas" --alerts cria um app que só manda alertas.

miblo apps new#

Cria uma pasta com o nome do app em minúsculas (meu-app) e três arquivos:

• manifest.json: o id, o nome e a promessa em português e inglês, uma configuração, os endereços que o app acessa (network, vazio: offline), de quanto em quanto tempo ele roda (intervalMs) e o cartão de prévia da loja;

• main.js: um app de verdade. A tela mostra a hora, um anel com quanto do expediente já foi (com o efeito sweep), a semana numa barra e um gráfico ao vivo alimentado por ctx.screen.push();

• README.md: os próximos passos.

miblo apps dev#

Abre uma página em http://127.0.0.1:<porta>/?t=<código>, que só este computador acessa. Por trás, roda o Miblo de verdade: a mesma ponte, a mesma Status API, os mesmos limites e validações, com um Miblo virtual pareado no lugar do aparelho. O seu app roda como um app instalado da loja, na mesma sandbox (só lê a própria pasta, só acessa os endereços de network). O que passa no simulador passa no Miblo.

A página tem, à esquerda, o Miblo: a tela de 240 × 240 desenhada pelo mesmo espelho do app Miblo, com o cartão, os efeitos (fx), as imagens de fundo e as animações de quadros e de tiles. O gráfico ao vivo toca os lotes como o Miblo recebe. Um alerta do app aparece por cima da tela, como no Miblo: um de cada vez, pelo tempo que pediu, com o piscar violeta quando é important. À direita ficam quatro quadros:

• Verificações da loja: verde quando a loja aceitaria o app; cada recusa com o arquivo e a linha;

• Configurações do app: o formulário que a pessoa vê no app Miblo, com as mesmas regras; salve e veja a tela mudar;

• Alertas: o "Permitir alertas deste app" (o primeiro alerta só pede permissão, como no Miblo), o alerta na tela e os que esperam;

• Log do app: o que o app escreve com ctx.log, os erros e o que a sandbox bloqueou.

Cada vez que você salva um arquivo da pasta, as verificações rodam de novo e o app recomeça. O botão "Recomeçar o app" faz o mesmo.

O que o simulador não mostra igual ao aparelho: o cartão usa as fontes do computador, não as do Miblo; Mode 7 e 3D aparecem parados (rodam só no Miblo); o desenho do alerta é uma aproximação (a ordem e os tempos são os do Miblo); e a tela App fica sempre à vista, enquanto no Miblo ela aparece quando a pessoa escolheu (miblo apps when; por padrão, depois de 60 s sem atividade).

miblo apps check#

Roda no seu computador, sem internet, as mesmas verificações que a loja faz quando você envia o app: a análise do código (módulos proibidos, eval, endereços fora de network, arquivos não aceitos, o tamanho) e as regras do Miblo para o que o app declara (as configurações e o cartão de prévia, que precisa caber nas fontes e nos ícones do Miblo). Sai com 0 quando a loja aceitaria; --json dá o resultado inteiro.

miblo apps check meu-app
# meu-app: pronto para enviar (nada que a loja recuse).

Depois, compacte os arquivos (sem as pastas ocultas) e envie em Enviar um app:

cd meu-app && zip -r ../meu-app.zip . -x '.*'

Sem o Miblo instalado#

Baixe o kit: https://miblo.ai/dl/extras/miblo-app-starter-1.27.0.zip. Ele traz os dois exemplos (examples/meu-app e examples/meus-alertas) e o simulador, e precisa só do Node 22.15+, 23.5+ ou 24+ (a sandbox dos apps usa o modelo de permissões dele). Os comandos são os mesmos:

node sim.mjs new "Meu App"
node sim.mjs dev meu-app
node sim.mjs check meu-app