Um site imobiliário completo e aberto que roda sobre a Express API: veja funcionando, publique em minutos e modifique como quiser.

A wiki documenta as 21 ações uma por uma. Esta página responde à outra pergunta, a que aparece primeiro: como eu monto um site com isso?

1. Veja funcionando

express.mapaprop.com é o site rodando sobre uma conta real de Mapaprop, com a Express API de produção. O que você vê ali é o que é publicado: não é uma maquete.

O código está em github.com/Mapaprop/mapaprop-express-starter, com licença MIT.

2. O que é

Um site completo —início, destaques, busca, ficha do imóvel, empreendimentos, blog, contato e captação de proprietários— escrito em HTML e JavaScript, sem framework e sem etapa de compilação. Você abre, edita e vê a mudança.

Não é um exemplo de código solto: é a implementação que mantemos a cada mudança da Express API, e a mesma que usamos para mostrar a API funcionando.

3. Do zero ao publicado

1. Tenha o seu plano. A Express API está incluída a partir do Mapaprop Pro+.
2. Ative o seu token em Configurações > Token de API. Guia passo a passo: Express API Token.
3. Publique o site. O repositório tem um botão da Vercel que clona o projeto e pede o token durante o processo; ele fica guardado como a variável de ambiente MAPAPROP_API_TOKEN.
4. Edite public/js/config.js com os seus dados de reserva e publique de novo.

Também funciona no seu próprio servidor: é um servidor Node sem dependências, que sobe atrás do nginx ou do Apache como qualquer outra aplicação. O que não basta é uma hospedagem apenas de arquivos estáticos, porque é preciso executar a função que guarda o token.

4. Testar sem conta e sem token

git clone https://github.com/Mapaprop/mapaprop-express-starter
cd mapaprop-express-starter
npm run dev:mock                  # http://localhost:3000

Isso inicia o site com as fixtures do repositório, que são respostas reais da API anonimizadas. É a forma de olhar, de trabalhar o design e de mandar uma mudança sem ser cliente da Mapaprop. No modo mock os formulários não enviam nada para lugar algum.

Com o seu token, o modo real:

cp .env.example .env.local        # e cole o seu token dentro
npm run dev                       # http://localhost:3000
npm test                          # a suíte completa

5. O mapa do código

Para a pessoa que vai modificá-lo, o que cada coisa resolve:

6. Por que o token fica do lado do servidor

É a decisão de arquitetura mais importante do projeto, e a que vale entender antes de mudar.

A sua conta tem um único API Token, esse token carrega todas as permissões que o seu plano dá e não vence. Se você contratou o adicional de Property API, o mesmo token também pode criar imóveis e publicá-los nos portais. Colocado no JavaScript do site, qualquer visitante o leria pelas ferramentas de desenvolvimento do navegador e ficaria com uma credencial permanente da sua conta.

Por isso ele vive em uma variável de ambiente do servidor, e o navegador fala com uma função que é a única que o conhece. Essa função também:

• deixa passar apenas as ações que o site usa, por uma lista explícita. Sem essa lista, uma rota montada à mão poderia chegar com o seu token a outra parte da API.
• filtra o corpo dos dois formulários contra os campos que cada ação documenta.
• recorta settings-v2 para o que o site usa. Além do seu nome e dos seus dados de contato, essa ação devolve os seus dados fiscais e as chaves de Mapbox e reCAPTCHA da sua conta. Tudo o que a função devolve fica público, então o que o site não precisa não sai.
• completa o IP, o navegador e o referer de cada consulta: são dados de que a ação de consultas precisa e que o navegador não pode declarar sobre si mesmo.
• faz cache dos catálogos para não gastar chamadas a mais.

O site também declara uma Content-Security-Policy e três outros cabeçalhos, e o servidor Node os lê do mesmo arquivo que a Vercel: assim a defesa não depende de onde você publicou.

7. As consultas voltam para o seu CRM

O formulário de cada ficha envia para messages, então a consulta entra no seu Inbox da Mapaprop como um lead: você atribui a um corretor, faz o acompanhamento, ela fica nos seus relatórios e dispara as suas automações.

Se você trocar por um formulário que só manda um e-mail, o círculo se rompe: você continua cadastrando os imóveis na Mapaprop e atende os clientes fora, onde a consulta não existe para o seu CRM.

O formulário de captação de proprietários usa seller-submissions: cria o contato no seu CRM e manda um e-mail com os anexos. Essa ação precisa de um site vinculado ao seu token.

8. O que não cobre

9. Como colaborar

O repositório é público e aceita pull requests.

• Se faltar algo —um filtro, um bloco, um idioma—, abra uma issue em github.com/Mapaprop/mapaprop-express-starter/issues e vamos olhar.
• Se você já resolveu, mande o seu PR. O modo mock existe justamente para que você possa trabalhar e testar sem uma conta.
• Se encontrar um problema de segurança, como reportá-lo está escrito no SECURITY.md do repositório.

10. Continuar lendo

• Express API: as 21 ações
• Primeiros passos com a API
• Express API Token: como ativá-lo