Skip to content

Latest commit

 

History

5 Commits

Folders and files

NameName
Last commit message
Last commit date
 
 

Repository files navigation

Capacitor-Push-Notification

Uso de Push notification na Neezy

Primeiro passo:

Para instalar o plugin de Push notification:

npm install @capacitor/push-notifications
npx cap sync

Segundo passo:

Para o segundo passo precisamos entender que o Push notification usa os serviços padrões de notificação:

  • Para Android: Firebase Cloud Messaging (FCM)
  • Para iOS: Apple Push Notification Service (APNs)

🟩 Android - Configuração do Firebase para Android (FCM)

1. Crie um projeto no Firebase

Vá para https://console.firebase.google.com/

  • Clique em "Adicionar projeto"

  • Dê um nome (ex: AppBuscaImoveis)

  • Avance até finalizar o projeto (pode desmarcar Analytics se quiser)

2. Adicione o app Android ao projeto Firebase

  1. Clique em Adicionar aplicativo

  2. Escolha o ícone do Android

  3. Preencha os campos:

  • Nome do pacote Android: deve ser o mesmo usado no seu capacitor.config.ts, algo como com.seuapp.buscaimoveis
  • Apelido do app: opcional
  1. Clique em Registrar app

3. Baixe e adicione o google-services.json

  • Após registrar o app, o Firebase te fornecerá o arquivo google-services.json

  • Coloque esse arquivo na pasta do seu projeto Android:

android/app/google-services.json

4. Configure o Android para usar o FCM

4.1. Adicione o plugin no build.gradle (nível de projeto)

No arquivo android/build.gradle:

buildscript {
  dependencies {
    // ...
    classpath 'com.google.gms:google-services:4.3.15' // certifique-se de usar a versão mais recente
  }
}

4.2. Ative o plugin no build.gradle da app

No arquivo android/app/build.gradle:

apply plugin: 'com.google.gms.google-services'

dependencies {
  implementation 'com.google.firebase:firebase-messaging:23.0.0' // ou mais recente
}

5. Sincronize tudo com o Capacitor

npx cap sync android
npx cap open android

Abra o Android Studio e verifique se o google-services.json está correto e se a dependência do FCM está instalada.

6. Teste se o app registra o token

Quando seu app rodar no celular com:

PushNotifications.register()

Você verá um token FCM, o que significa que a configuração funcionou!

🍎 iOS - Configuração do iOS (APNs)

[!warning] A Apple exige uma conta de desenvolvedor paga para configurar push notifications (U$99/ano).

1. Crie um Identificador de App

  1. Acesse o Apple Developer Portal

  2. Vá em Certificates, Identifiers & Profiles

  3. Crie um App Identifier

  • Exemplo: com.seuapp.buscaimoveis

  • Habilite a opção Push Notifications

2. Gere o certificado de push (APNs)

Você pode fazer isso de duas formas:

(A) Usar chave de autenticação (p8):

  • Vá em Keys
  • Crie uma nova chave e habilite Apple Push Notifications
  • Salve a chave .p8, o ID da chave e o ID do time

(B) Usar certificado APNs tradicional (.p12):

  • Vá em Certificates
  • Gere um certificado para Apple Push Notification service SSL (Sandbox & Production)
  • Use o Keychain para exportar como .p12

3. Configure o Xcode

  1. Abra o projeto iOS com:
npx cap open ios
  1. No Xcode, vá em:
  • Project > Signing & Capabilities
  • Clique em "+" > Push Notifications
  • (Opcional) Ative também "Background Modes" > "Remote notifications"

4. Configure seu backend (FastAPI) com as credenciais

Se você estiver usando APNs diretamente (sem Firebase para iOS), pode usar a lib apns2:

pip install apns2

E usar:

from apns2.client import APNsClient
from apns2.payload import Payload

def enviar_apns(token, mensagem):
    payload = Payload(alert=mensagem, sound="default", badge=1)
    client = APNsClient('AuthKey.p8', team_id='SEU_TEAM_ID', key_id='SEU_KEY_ID', use_sandbox=True)
    client.send_notification(token, payload, topic='com.seuapp.buscaimoveis')

Terceiro passo:

Código no app para registrar o push token

Esse passo é fundamental. Aqui o app vai obter o token de push notification do dispositivo (por exemplo, do Firebase) e enviá-lo para seu backend FastAPI. Isso permite que, no futuro, o backend saiba qual cliente notificar.

Fluxo resumido desta etapa:

  • O app (Next.js com Capacitor para mobile) solicita permissão para push notification.
  • O app obtém o push token (único por dispositivo).
  • O app envia esse token para seu backend FastAPI, junto com o ID do usuário.

[!important] Um push token é um identificador único que o provedor de notificações (como o Firebase Cloud Messaging) fornece para cada dispositivo ou navegador que aceita notificações.

Código no frontend

Registro do token:

// push.ts - arquivo de serviço para lidar com push

import { PushNotifications } from '@capacitor/push-notifications';

export const initPushNotifications = async (userId: string) => {
  // 1. Solicita permissão ao usuário
  let permission = await PushNotifications.requestPermissions();
  if (permission.receive !== 'granted') {
    console.error('Permissão para notificação negada!');
    return;
  }

  // 2. Registra o dispositivo para notificações
  await PushNotifications.register();

  // 3. Escuta quando um token for gerado
  PushNotifications.addListener('registration', async (token) => {
    console.log('Token de push:', token.value);

    // 4. Envia o token para o backend
    await fetch('http://localhost:8000/push/register-token', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        user_id: userId,
        push_token: token.value,
      }),
    });
  });

  // 5. Lida com falha na geração de token
  PushNotifications.addListener('registrationError', (error) => {
    console.error('Erro no registro de push notification:', error);
  });
};

[!tip] Esse código pode ser executado quando o usuário logar no app.

Código do backend

Tabela no banco: push_token

CREATE TABLE push_tokens (
    id SERIAL PRIMARY KEY,
    user_id INTEGER NOT NULL,
    push_token TEXT NOT NULL,
    plataforma TEXT, -- opcional: android, ios, web
    atualizado_em TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

Endpoint para salvar o token:

# main.py ou routers/push.py
from fastapi import FastAPI, Depends
from pydantic import BaseModel
from sqlalchemy.orm import Session
from database import get_db
from models.push_token import PushToken

app = FastAPI()

class TokenData(BaseModel):
    user_id: int
    push_token: str
    plataforma: str = "android"

@app.post("/push/register-token")
def register_token(data: TokenData, db: Session = Depends(get_db)):
    # Verifica se o token já existe para este usuário
    existing = db.query(PushToken).filter_by(user_id=data.user_id).first()
    if existing:
        existing.push_token = data.push_token
        existing.plataforma = data.plataforma
        db.commit()
        return {"msg": "Token atualizado"}
    
    new_token = PushToken(
        user_id=data.user_id,
        push_token=data.push_token,
        plataforma=data.plataforma
    )
    db.add(new_token)
    db.commit()
    return {"msg": "Token registrado com sucesso"}

Envio da notificação depois (Exemplo com FCM)

Mais tarde, quando o filtro não encontrar imóveis e o usuário clicar em "Ativar Notificação", você poderá:

  1. Salvar o interesse no banco (com os filtros aplicados).

  2. Usar o push_token registrado para enviar a notificação.

Exemplo usando pyfcm:

pip install pyfcm
from pyfcm import FCMNotification

push_service = FCMNotification(api_key="SUA_CHAVE_FCM")

def enviar_notificacao(token: str, titulo: str, mensagem: str):
    result = push_service.notify_single_device(
        registration_id=token,
        message_title=titulo,
        message_body=mensagem
    )
    return result

[!tip] O que é pyfcm? A biblioteca pyfcm (Python FCM) é uma biblioteca Python que serve para enviar notificações push via Firebase Cloud Messaging (FCM), que é a plataforma de push notifications da Google.

Ela basicamente é uma interface em Python para facilitar o envio de notificações push para dispositivos Android, iOS e web que estejam registrados com tokens do FCM.

  • O que exatamente o pyfcm faz?

Internamente, o pyfcm:

  1. Se comunica com os servidores do FCM (usando HTTPS).

  2. Usa a sua chave do servidor (API Key) que você pega no console do Firebase.

  3. Envia:

    • Notificações (titulo + corpo visível)
    • Dados extras (payloads que sua aplicação pode tratar)
    • Para 1 ou múltiplos dispositivos

Quarto passo:

Salvando o interesse do usuário com filtros

Quando o usuário clica no botão "Ativar notificação" após uma busca sem resultados, você precisa registrar esse interesse no banco.

Estrutura da tabela: alertas_imovel:

CREATE TABLE alertas_imovel (
    id SERIAL PRIMARY KEY,
    user_id INTEGER NOT NULL,
    estado VARCHAR(100),
    cidade VARCHAR(100),
    tipo_imovel VARCHAR(50),  -- "casa" ou "apartamento"
    metragem_min INT,
    quartos_min INT,
    valor_maximo NUMERIC(12, 2),
    criado_em TIMESTAMP DEFAULT CURRENT_TIMESTAMP,

    FOREIGN KEY (user_id) REFERENCES usuarios(id) ON DELETE CASCADE
);

Endpoint FastAPI para registrar o interesse

from pydantic import BaseModel
from fastapi import APIRouter, Depends
from sqlalchemy.orm import Session
from database import get_db
from models.alerta import AlertaImovel  # você cria esse model também

router = APIRouter()

class AlertaData(BaseModel):
    user_id: int
    estado: str
    cidade: str
    tipo_imovel: str
    metragem_min: int
    quartos_min: int
    valor_maximo: float

@router.post("/alertas")
def registrar_alerta(data: AlertaData, db: Session = Depends(get_db)):
    alerta = AlertaImovel(**data.dict())
    db.add(alerta)
    db.commit()
    return {"msg": "Alerta registrado com sucesso"}

Quinto passo:

Cadastro de um novo imóvel

No painel de administração ou API de cadastro de imóveis, quando um novo imóvel é inserido no banco de dados, você deverá verificar se há algum alerta que combina com ele.

Como fazer a verificação?

Você pode criar uma função que, ao salvar um novo imóvel, faça uma query parecida com:

Em SQL:

SELECT *
FROM alertas_imovel
WHERE
 estado = :estado
 AND cidade = :cidade
 AND tipo_imovel = :tipo
 AND metragem_min <= :metragem
 AND quartos_min <= :quartos
 AND valor_maximo >= :valor

Em SQLAlchemy:

alertas = db.query(AlertaImovel).filter(
   AlertaImovel.estado == novo_imovel.estado,
   AlertaImovel.cidade == novo_imovel.cidade,
   AlertaImovel.tipo_imovel == novo_imovel.tipo,
   AlertaImovel.metragem_min <= novo_imovel.metragem,
   AlertaImovel.quartos_min <= novo_imovel.quartos,
   AlertaImovel.valor_maximo >= novo_imovel.valor
).all()

Sexto passo:

Enviando a notificação push

Agora que você sabe quais usuários têm interesse nesse tipo de imóvel, o próximo passo é enviar notificações para os tokens de push associados a cada usuário.

Relembrando a tabela push_tokens:

Você busca os tokens dos usuários:

user_ids = [a.user_id for a in alertas]
tokens = db.query(PushToken).filter(PushToken.user_id.in_(user_ids)).all()

Exemplo de envio com pyfcm:

from pyfcm import FCMNotification

push_service = FCMNotification(api_key="SUA_CHAVE_DO_FIREBASE")

def notificar_interessados(tokens: list[str], imovel):
    titulo = "Novo imóvel disponível!"
    corpo = f"{imovel.tipo} em {imovel.cidade}, {imovel.estado} por R${imovel.valor:,.2f}"

    result = push_service.notify_multiple_devices(
        registration_ids=tokens,
        message_title=titulo,
        message_body=corpo,
        data_message={"imovel_id": imovel.id}
    )
    return result

Sétimo passo:

Fluxo final do processo

Registro de interresse:

graph TD
   A[Usuário realiza busca com filtros] --> B{Imóveis encontrados?}
   B -- Sim --> C[Exibe imóveis normalmente]
   B -- Não --> D[Exibe página 'Nenhum imóvel encontrado']
   D --> E[Usuário clica em 'Ativar notificação']
   E --> F[Frontend envia dados da busca + user_id + push_token para API]
   F --> G[Backend salva token na tabela push_tokens]
   F --> H[Backend salva filtros na tabela alertas_imovel]

Loading

Cadastro de imóvel + envio de notificação:

graph TD
  A1[Admin/Usuário cadastra novo imóvel no sistema] --> B1[API salva imóvel no banco]
   B1 --> C1[Verifica alertas na tabela alertas_imovel que combinam com o imóvel]
   C1 --> D1{Existe alerta compatível?}
   D1 -- Não --> E1[Nada acontece]
   D1 -- Sim --> F1[Busca tokens dos usuários correspondentes na tabela push_tokens]
   F1 --> G1[Envia notificação push com título + corpo + dados do imóvel via pyfcm]
   G1 --> H1[Usuário recebe push no celular]
Loading

[!note] Observações:

  • A conexão entre alertas_imovel e push_tokens se dá pelo user_id.
  • A notificação é enviada apenas se o imóvel for compatível com os filtros registrados.
  • A API pyfcm faz a comunicação com o Firebase Cloud Messaging.

Oitava passo (Opcional):

Apagar alerta após notificação

Você pode definir se:

  • O alerta deve ser mantido (para novos imóveis semelhantes)

  • Ou removido após a notificação ser enviada

Exemplo de remoção após envio:

for alerta in alertas:
    db.delete(alerta)
db.commit()

🛡️ Segurança e Boas Práticas:

  • Autentique o user_id com JWT ou sessão.

  • Não permita alertas com filtros muito amplos para não gerar SPAM.

  • Monitore a validade dos push_token (às vezes expiram).

About

Push notification no Capacitor

Resources

Stars

0 stars

Watchers

1 watching

Forks

Releases

Packages

Contributors