Exemplos de Código¶

Este documento demonstra o syntax highlighting disponível na documentação.

Python¶

import requests

# Configuração da API
API_KEY = 'sua-api-key-aqui'
BASE_URL = 'https://api.atendeaqui.com/public'

def obter_estrutura_onboarding(flow_id):
    """
    Busca a estrutura completa do fluxo de onboarding.
    """
    url = f'{BASE_URL}/{API_KEY}/structure/{flow_id}/'

    response = requests.get(url)

    if response.status_code == 200:
        estrutura = response.json()

        print(f"Fluxo: {estrutura['name']}")
        print(f"Descrição: {estrutura['description']}")
        print(f"\nEtapas ({len(estrutura['steps'])}):")

        for step in estrutura['steps']:
            print(f"  - {step['title']}")
            print(f"    Chave: {step['step_key']}")
            print(f"    Opcional: {step['is_optional']}")

        return estrutura
    else:
        print(f"Erro: {response.status_code}")
        return None

def iniciar_onboarding(flow_id, client_id):
    """
    Inicia o onboarding para um cliente.
    """
    url = f'{BASE_URL}/{API_KEY}/start/'

    payload = {
        'flow_id': flow_id,
        'client_id': client_id
    }

    response = requests.post(url, json=payload)

    if response.status_code == 201:
        progresso = response.json()
        print(f"Onboarding iniciado!")
        print(f"Etapa atual: {progresso['current_step_key']}")
        return progresso
    else:
        print(f"Erro ao iniciar: {response.json()}")
        return None

# Exemplo de uso
estrutura = obter_estrutura_onboarding(1)
if estrutura:
    progresso = iniciar_onboarding(1, 'CLI-12345')

JavaScript / React¶

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const OnboardingFlow = ({ flowId, clientId }) => {
    const [flowData, setFlowData] = useState(null);
    const [currentStep, setCurrentStep] = useState(null);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        const loadFlow = async () => {
            try {
                // Buscar estrutura do fluxo
                const structureRes = await axios.get(`/api/onboarding/structure/${flowId}/`);
                setFlowData(structureRes.data);

                // Iniciar progresso do usuário
                const progressRes = await axios.post('/api/onboarding/start/', {
                    flow_id: flowId,
                    client_id: clientId
                });

                setCurrentStep(progressRes.data.current_step_key);
            } catch (error) {
                console.error('Erro ao carregar onboarding:', error);
            } finally {
                setLoading(false);
            }
        };

        loadFlow();
    }, [flowId, clientId]);

    const completeStep = async () => {
        try {
            const response = await axios.post('/api/onboarding/complete-step/', {
                flow_id: flowId,
                client_id: clientId
            });
            setCurrentStep(response.data.current_step_key);
        } catch (error) {
            console.error('Erro ao completar etapa:', error);
        }
    };

    if (loading) return <div>Carregando...</div>;

    return (
        <div className="onboarding-container">
            <h2>{flowData?.name}</h2>
            <p>{flowData?.description}</p>

            <div className="steps-list">
                {flowData?.steps.map(step => (
                    <div 
                        key={step.step_key} 
                        className={step.step_key === currentStep ? 'active' : ''}
                    >
                        <h3>{step.title}</h3>
                        <p>{step.description}</p>
                    </div>
                ))}
            </div>

            <button onClick={completeStep}>
                Próxima Etapa
            </button>
        </div>
    );
};

export default OnboardingFlow;

SQL¶

-- Consulta para obter progresso de onboarding por organização
SELECT 
    o.name AS organization_name,
    f.name AS flow_name,
    COUNT(DISTINCT ufp.id) AS total_users,
    COUNT(DISTINCT CASE WHEN ufp.completed_at IS NOT NULL THEN ufp.id END) AS completed_users,
    ROUND(
        100.0 * COUNT(DISTINCT CASE WHEN ufp.completed_at IS NOT NULL THEN ufp.id END) / 
        NULLIF(COUNT(DISTINCT ufp.id), 0), 
        2
    ) AS completion_rate
FROM 
    onboarding_userflowprogress ufp
    INNER JOIN onboarding_flow f ON ufp.flow_id = f.id
    INNER JOIN accounts_organization o ON f.organization_id = o.id
WHERE 
    ufp.started_at >= '2026-01-01'
GROUP BY 
    o.id, o.name, f.id, f.name
ORDER BY 
    completion_rate DESC;

HTML / CSS¶

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Onboarding - AtendeAqui</title>
    <style>
        .onboarding-step {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 12px;
            padding: 2rem;
            color: white;
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
        }

        .onboarding-step:hover {
            transform: translateY(-5px);
        }

        .step-title {
            font-size: 1.5rem;
            font-weight: bold;
            margin-bottom: 1rem;
        }

        .progress-bar {
            width: 100%;
            height: 8px;
            background: rgba(255,255,255,0.3);
            border-radius: 4px;
            overflow: hidden;
        }

        .progress-fill {
            height: 100%;
            background: #4ade80;
            transition: width 0.5s ease;
        }
    </style>
</head>
<body>
    <div class="onboarding-container">
        <div class="onboarding-step">
            <div class="step-title">Bem-vindo ao AtendeAqui!</div>
            <p>Configure sua conta em poucos passos.</p>
            <div class="progress-bar">
                <div class="progress-fill" style="width: 60%;"></div>
            </div>
        </div>
    </div>
</body>
</html>

JSON¶

{
  "flow_id": 1,
  "flow_key": "client_onboarding",
  "name": "Onboarding de Clientes",
  "description": "Processo completo de integração de novos clientes",
  "steps": [
    {
      "step_key": "welcome",
      "title": "Boas-vindas",
      "description": "Apresentação do sistema",
      "order": 1,
      "is_optional": false,
      "content": {
        "video_url": "https://example.com/video.mp4",
        "checklist": [
          "Assistir vídeo de boas-vindas",
          "Ler termos de serviço"
        ]
      }
    },
    {
      "step_key": "company_setup",
      "title": "Configuração da Empresa",
      "description": "Dados cadastrais e configurações iniciais",
      "order": 2,
      "is_optional": false,
      "fields": [
        {
          "name": "company_name",
          "type": "text",
          "required": true,
          "label": "Nome da Empresa"
        },
        {
          "name": "cnpj",
          "type": "text",
          "required": true,
          "label": "CNPJ",
          "mask": "99.999.999/9999-99"
        }
      ]
    }
  ],
  "metadata": {
    "estimated_duration": "15 minutes",
    "difficulty": "beginner",
    "tags": ["setup", "configuration", "client"]
  }
}

Bash / Shell¶

#!/bin/bash

# Script para atualizar e executar migração do onboarding

echo "=== Atualização do Sistema de Onboarding ==="

# Ativar ambiente virtual
source venv/bin/activate

# Instalar dependências
pip install -r requirements.txt

# Executar migrações
python manage.py makemigrations onboarding
python manage.py migrate onboarding

# Coletar arquivos estáticos
python manage.py collectstatic --noinput

# Reiniciar serviço
sudo systemctl restart atendeaqui

echo "✓ Atualização concluída com sucesso!"

Código Inline¶

Você pode usar código inline como UserFlowProgress.objects.filter(completed_at__isnull=False) para destacar comandos ou funções específicas no meio do texto.

Variáveis importantes: flow_key, current_step_key, client_id

Tabelas com Código¶

Blocos de Destaque¶

Dica Profissional: Use python manage.py create_default_flows para criar fluxos de exemplo automaticamente.

Atenção: Sempre valide o flow_key antes de processar etapas para evitar erros de referência.

Este documento demonstra a variedade de estilos de código suportados pela documentação.