# Clientes Rio Claro — app de celular (PWA) Este é um aplicativo web instalável (PWA) para **consultar e editar** os dados de clientes da sua planilha direto do **celular e do tablet**, com login Google e destravamento por **digital** (com PIN de reserva). Ele lê e grava na **mesma planilha** que o HUD do desktop usa. No aparelho, a ideia é usá-lo em **tela dividida** ao lado do WhatsApp. > Por que não é o HUD flutuando sobre o WhatsApp? Porque no Android o Chrome não > roda extensões e o WhatsApp é um app nativo — nada web consegue sobrepor a ele. > Este PWA resolve o essencial: ver e editar os dados do cliente rapidamente. --- ## Visão geral do que precisa ser feito uma única vez 1. Criar uma credencial OAuth do tipo **Aplicativo Web** no Google Cloud (no mesmo projeto "HUD-RC" que a extensão já usa). 2. Publicar a pasta `mobile/` num endereço `https://` (o caminho mais simples é o **GitHub Pages** do próprio repositório). 3. Abrir esse endereço no celular, fazer o onboarding dentro do app e **instalar na tela inicial**. Depois disso, no dia a dia é só tocar no ícone e destravar com a digital. --- ## Passo 1 — Criar a credencial "Aplicativo Web" no Google Cloud A extensão de desktop usa uma credencial do tipo *Extensão do Chrome*, que **não serve** para a web. Precisamos de uma nova, do tipo *Aplicativo Web*, no mesmo projeto. 1. Acesse o Google Cloud Console: e selecione o projeto **HUD-RC** (o mesmo da extensão). 2. Clique em **Criar credenciais → ID do cliente OAuth**. 3. Em **Tipo de aplicativo**, escolha **Aplicativo da Web**. 4. Dê um nome (ex.: `Clientes RC — mobile`). 5. Em **Origens JavaScript autorizadas**, adicione o endereço onde o app vai ficar hospedado (veja o Passo 2). Por exemplo: - `https://rioclaro-dev.github.io` (se usar GitHub Pages) - `http://localhost:8000` (opcional, só para testar no computador) > Observação: em "Origens JavaScript", entra **só** o domínio (`https://host`), > **sem** o caminho `/HUD.../mobile`. O caminho não entra aqui. 6. **Não** é preciso preencher "URIs de redirecionamento" — este app usa o fluxo de token do Google Identity Services, que dispensa redirect. 7. Clique em **Criar**. O Google mostra o **ID do cliente** (algo como `980339621568-xxxxxxxx.apps.googleusercontent.com`). **Copie esse ID** — é ele que você vai colar dentro do app, no onboarding. A tela de consentimento continua a mesma da extensão (modo **Interno**), então só contas **@rioclaro.com.br** conseguem entrar. O app ainda confere isso por conta própria como reforço. --- ## Passo 2 — Publicar o app num endereço https O app precisa de um endereço `https://` fixo (a digital e o login Google só funcionam em conexão segura). A opção gratuita mais simples é o **GitHub Pages**: 1. No repositório `rioclaro-dev/HUDdoPlanejador` (o mesmo do HUD), vá em **Settings → Pages**. 2. Em **Build and deployment → Source**, escolha **Deploy from a branch**. 3. Escolha a branch (ex.: `main`) e a pasta **/(root)**, e salve. 4. Após alguns minutos, o site fica disponível em algo como `https://rioclaro-dev.github.io/HUDdoPlanejador/mobile/`. 5. Volte ao Passo 1 e confira que a **origem** desse endereço (`https://rioclaro-dev.github.io`) está nas Origens JavaScript autorizadas. > Alternativa de teste no computador (opcional): dentro da pasta `mobile/`, rode um > servidor local com `python -m http.server 8000` e abra `http://localhost:8000`. > O `localhost` é aceito pelo Google e pela digital para testes. --- ## Passo 3 — Onboarding no celular e instalação 1. Abra o endereço do app no **Chrome do Android** (ou Safari no iPhone/iPad). 2. No **Passo 1** do app, cole o **ID do cliente** do Passo 1 e toque em *Salvar e conectar Google*. Faça login com a sua conta **@rioclaro.com.br**. 3. No **Passo 2**, cole o **link da sua planilha** e toque em *Buscar abas*. Escolha a aba dos clientes (normalmente **Resumo**) e confirme. 4. No **Passo 3**, crie um **PIN** (mínimo 4 dígitos) e, se quiser, toque em *Ativar entrada por digital*. Conclua. 5. **Instalar na tela inicial:** - **Android/Chrome:** menu **⋮ → Instalar app** (ou *Adicionar à tela inicial*). - **iPhone/iPad/Safari:** botão **Compartilhar → Adicionar à Tela de Início**. Pronto: aparece um ícone da Rio Claro como se fosse um app nativo, abrindo em tela cheia e pedindo a digital. --- ## Como usar junto com o WhatsApp No Android e no tablet, use **tela dividida**: abra o WhatsApp, chame a tela de apps recentes, segure o ícone do WhatsApp e escolha *Tela dividida* (o nome varia por fabricante), e selecione o app **Clientes RC** para a outra metade. Assim você conversa de um lado e consulta/edita os dados do cliente do outro. --- ## Segurança — como os dados são protegidos - O **token do Google** (o que dá acesso à planilha) vive **só na memória** do app; nunca é gravado no aparelho. Ao fechar e reabrir, ele é renovado em silêncio apenas se a sua sessão Google ainda estiver ativa no navegador. - No aparelho, guardamos só: o **Client ID** (que é público), o **ID/aba da planilha**, o **hash** do PIN (nunca o PIN em texto) e o identificador da **digital** registrada. Nada disso, sozinho, dá acesso à planilha. - A **digital/PIN** é uma trava de conveniência local. A barreira real de acesso é o **login Google restrito ao domínio @rioclaro.com.br**. - Todo o tráfego vai direto do seu navegador para a **API do Google** — não existe servidor intermediário nesta solução. --- ## Estrutura dos arquivos ``` mobile/ index.html layout das telas (trava, onboarding, busca, detalhe, config) styles.css identidade visual Rio Claro (turquesa/petróleo) manifest.webmanifest metadados do PWA (nome, ícones, cor) sw.js service worker (torna instalável / abre offline) js/ config.js constantes e chaves de armazenamento auth.js login Google (Google Identity Services) + trava de domínio lock.js digital (WebAuthn) + PIN (hash PBKDF2) sheets.js leitura/escrita da planilha (portado do HUD) match.js busca por nome/conta app.js orquestra as telas icons/ ícones do app ``` ## Magnetis (tarefas e tickets) — v2 O app agora fala com o CRM Magnet Customer pela mesma ponte da extensão (relé no n8n). Para ativar: **Configurações → Magnetis → cole o segredo do relé** (o mesmo do arquivo "Dados Magnetis.txt" usado na extensão). Com o segredo salvo: - botão **"☑ Minhas tarefas do Magnetis"** na tela de busca → central de tarefas (atrasadas + hoje por padrão; concluir com confirmação; criar tarefa/ticket para qualquer cliente com busca por nome no CRM); - no **detalhe do cliente**, chip **"☑ Magnetis: tarefas & tickets"** → tudo daquele cliente + criação já vinculada (o modelo de RESGATE puxa a conta para resgates e a conta BTG da própria linha da planilha e escreve o valor por extenso); - tickets vão SEMPRE para a área **Mesa**, com modelo, prioridade e prazo opcional (só para agendamentos futuros); - em toda lista, o botão **Remarcar** (ou **Definir prazo**) troca a data de vencimento sem sair da tela — tarefas mudam o `dateOfExpires` e tickets o `expectedCloseDate`, exatamente como na extensão. ## Painel do dia — v3 Quando a busca está vazia, a tela inicial mostra um **painel do dia** com a mesma ordem de prioridade da home da extensão: 1. **Termômetro** — mostradores de calor com o total de tarefas pendentes e de clientes esquecidos (verde até 10, vermelho a partir de 50); 2. **Aniversariantes de hoje**, em destaque (usa a coluna de aniversário/nascimento da planilha, se existir); 3. **Tarefas de hoje** no Magnetis (todas, com Concluir e Remarcar); 4. **Tarefas atrasadas** (as mais atrasadas primeiro); 5. **Clientes há 30+ dias sem contato** (usa a coluna de último contato). As partes do Magnetis só aparecem com o segredo do relé salvo; as partes da planilha funcionam sempre. O botão ⟳ da busca atualiza tudo (planilha + CRM). ### Personalização do painel — v4 O painel é montável: em **Configurações → Painel do dia** dá para reordenar as seções com as setas ↑/↓, ligar e desligar cada uma com o interruptor e, nas seções de lista, escolher quantos cartões aparecem (3, 5, 10, 15 ou Todos). A escolha fica salva só no aparelho (localStorage, chave `rc.homeLayout`) e o botão **Restaurar padrão** volta ao layout original. As mudanças passam a valer na próxima vez que o painel é montado — ao voltar das Configurações, por exemplo, ele já abre do jeito novo.