zapier-forms

Aplicativo de Autoavaliação: Perfil de Uso de Tecnologia com frontend web estático e backend serverless em Google Apps Script.

O respondente acessa a página, responde 12 questões em escala Likert (4 opções, 1–4 pontos), vê o resultado imediatamente e — se informar um e-mail — recebe também um relatório detalhado. As respostas ficam persistidas em uma Google Sheet do administrador.

Arquitetura

┌──────────────────┐   POST JSON    ┌────────────────────────┐
│   Frontend       │ ─────────────▶ │  Google Apps Script    │
│   (web/)         │                │  Web App (doPost)      │
│   HTML / CSS /   │ ◀───────────── │                        │
│   JS estático    │   { ok: true } │  • Valida + recomputa  │
└──────────────────┘                │  • Grava em Sheet      │
                                    │  • Envia e-mail        │
                                    └──────────┬─────────────┘
                                               │
                                               ▼
                                    ┌────────────────────────┐
                                    │  Google Sheets         │
                                    │  + Gmail (MailApp)     │
                                    └────────────────────────┘

• Frontend (web/) — HTML/CSS/JS puro, sem build. Calcula pontuação e perfil no cliente, mostra resultado na hora, envia payload ao backend de forma assíncrona.
• Backend (src/) — Google Apps Script. Publicado como Web App aceita POST com JSON, revalida a pontuação (não confia no cliente), grava na planilha e envia e-mail.
• Modo Google Form original — createForm() continua disponível para quem prefere usar Google Forms nativo; o trigger onFormSubmit compartilha o mesmo código de e-mail/scoring.

Perfis

Faixa	Perfil
12–19	🟠 Explorador Inicial
20–29	🟡 Praticante Ativo
30–39	🟢 Integrador Eficiente
40–48	🔵 Arquiteto de Soluções

Estrutura

appsscript.json            Manifest do Apps Script (escopos + webapp config)
src/
  Config.gs                Textos e constantes compartilhados
  FormSpec.gs              Questões + perfis (fonte da verdade do backend)
  CreateForm.gs            createForm() — modo Google Forms nativo
  OnSubmit.gs              Scoring, e-mail HTML/texto, escrita em sheet
  Triggers.gs              Helpers de trigger
  WebApp.gs                doGet/doPost + setupWebApp()
web/
  index.html               Marcação + templates de cada tela
  styles.css               Design do aplicativo
  data.js                  Questões + perfis (espelho de FormSpec.gs)
  app.js                   UI, navegação, pontuação, POST ao backend
  config.js                WEB_APP_URL (edite com sua URL pós-deploy)

Setup — Backend (Apps Script Web App)

1. Instalar clasp e criar o projeto

npm install -g @google/clasp
clasp login
cd zapier-forms
clasp create --type standalone --title "Zapier Forms — Autoavaliação" --rootDir ./

2. Push do código

clasp push

3. Rodar setupWebApp uma vez

Abra o editor (clasp open), selecione a função setupWebApp e execute. Ela cria a planilha de respostas e imprime o ID/URL no log. Autorize os escopos quando solicitado.

4. Publicar como Web App

No editor Apps Script:

1. Implantar → Nova implantação
2. Tipo: App da Web
3. Executar como: Eu (sua conta Google)
4. Quem tem acesso: Qualquer pessoa
5. Copie a URL que termina em /exec

5. Apontar o frontend para o backend

Edite web/config.js:

window.APP_CONFIG = {
  WEB_APP_URL: 'https://script.google.com/macros/s/AKfy.../exec'
};

Setup — Frontend

O frontend é totalmente estático. Para rodar localmente basta servir a pasta web/:

# Opção 1: Python
cd web
python3 -m http.server 5173

# Opção 2: Node (npx)
npx serve web -l 5173

Abra http://localhost:5173 e responda o questionário.

Deploy do frontend

Qualquer host de site estático serve:

• GitHub Pages — configure Pages para servir da pasta web/ (ou root se preferir mover).
• Vercel / Netlify — aponte para este repo, defina web como diretório de publicação, sem comando de build.
• Cloudflare Pages — idem.

Fluxo de submissão

1. Usuário responde as 12 questões no frontend.
2. app.js calcula total e perfil localmente e mostra o resultado imediatamente.
3. app.js envia POST JSON para WEB_APP_URL com: name, email, answers[], total, userAgent, origin.
4. doPost revalida cada resposta via pointsForAnswer (server-side scoring) para impedir adulteração.
5. Backend grava linha na planilha configurada em WEB_APP_SHEET_ID (Script Properties) e, se houver e-mail, envia relatório.
6. Se o POST falhar (offline, URL errada), o resultado continua visível — apenas não é persistido.

Sincronizar web/data.js com src/FormSpec.gs

As perguntas e perfis estão duplicados para permitir scoring client-side. Ao editar src/FormSpec.gs, atualize também web/data.js mantendo títulos, textos e pontos idênticos — o backend recusa respostas cujo texto não bate.

Modo Google Forms original

O fluxo original continua funcional — útil para distribuir via e-mail corporativo ou embedar em intranets:

1. Rode createForm() no editor.
2. URLs aparecem no log (edição, público, planilha).
3. O trigger onFormSubmit já é instalado automaticamente.

Escopos OAuth solicitados

Escopo	Uso
forms	Criar/modificar Google Form
drive	Criar planilha no Drive
spreadsheets	Escrever respostas na planilha
script.send_mail	Enviar e-mail via MailApp
script.scriptapp	Instalar triggers

Segurança

• doPost revalida scoring no backend — o cliente não pode forjar pontos.
• Validação de e-mail e limites de tamanho em nome/e-mail/user-agent.
• Web App com "Qualquer pessoa" aceita submissões anônimas; se precisar restringir, mude para "Qualquer pessoa com conta Google" no deploy.
• E-mail é enviado apenas se o respondente fornecer voluntariamente.

Limites

• MailApp.sendEmail tem cota diária (~100/dia grátis, ~1500/dia Workspace).
• Apps Script Web App tem limites de execução e URL fetch.
• Não há rate limiting próprio — considere adicionar se esperar volume alto.