Configuração

Habilitando a biblioteca Cloudsupport

As funcionalidades da biblioteca Cloudsupport for React são habilitadas e configuradas através do componente EnableCloudsupport, que deve abraçar as páginas da aplicação. O projeto de arquétipo exemplifica isso no arquivo de layout app/(pages)/(client)/layout.js:

const options = {
    networking: {
        appName: "atendimento-web"
    },
    reloadBanner: {
        actionLabel: "Nova versão disponível! Clique aqui para atualizar",
        confirmText: "Esta aplicação será reiniciada. Conclua sua atividade antes de continuar."
    }
};

export default function Layout({ children }) {
    return (
        <EnableCloudsupport options={options}>
            {children}
        </EnableCloudsupport> 
    );
}

A tag EnableCloudsupport habilita os recursos da arquitetura, que objetivam oferecer maior produtividade, pois dispensam o programador da necessidade de resolver aspectos estrutuais como segurança (OIDC), gerenciamento de configuração (profile), aviso de nova versão de aplicação, tratamentos gerais em webservices (como injeção de JWT e controle de timeout) e UI básica (Toast global e indicador de processamento global).

Os parâmetros mínimos de EnableCloudsupport estão exemplificados acima. Normalmente não é necessário configurar outros parâmetros. Consulte mais detalhes na Documentação da API.

A seção Segurança contém configurações específicas para essa camada da aplicação.

Entenda Mais:

Internamente o componente EnableCloudsupport inclui:

1. GlobalProvider: Fornece um contexto para uso geral, disponível via Hook useGlobal.

2. ProfileProvider:

   • Habilita o carregamento automático do profile. Vide Propriedades por Ambiente.

   • Habilita o Hook useProfile, que dá acesso às propriedades da aplicação.

   • Habilita o Hook useProfileStatus, que sinaliza mudança nos dados do profile.

   • Habilita a detecção automática de mudanças no profile, que ativa o ReloadBanner. Vide Aviso de Atualização.

3. ToastProvider: Habilita o Hook useToast(), que permite emitir notificações de info/warn/error a partir de qualquer página ou componente.

4. ProcessingProvider: Habilita o Hook useProcessing, que fornece uma API para que páginas e componentes possam sinalizar início e fim de processamentos.

5. AuthProvider:

   • Habilita a integração OIDC. Por padrão são consideradas as propriedades do profile. Vide Propriedades por Ambiente.

   • Habilita o Hook useAuth(), que dá acesso aos dados do usuário autenticado.

   • Habilita a propagação automática de logout todas as abas do browser.

   • Habilita o redirect automático de pós login, em que usuário volta para a página desejada.

   • Habilita o redirect automático de pós logout, em que o usuário é direcionado para a página definida na propriedade defaultLogoutSuccessUrl do profile.

6. DefaultConfiguredNetworking: Habilita o controle de timeout do Networking.fetch e log de requisições quando o projeto é executado localmente.

7. ProfileAwareNetworking: Habilita a inclusão automática do parâmetro de URL &appOrigin=<nomeAplicacao>;<versao> nas requisições webservices. A versão é obtida da propriedade appVersion do profile.

8. AuthAwareNetworking: Habilita a injeção automática do token JWT nas requisições webservice.

9. ReloadBanner: Componente de UI que exibe aviso de atualização pendente, integrado ao ProfileProvider.

10. ProcessingIndicator: Componente de UI que exibe um indicador de processamento integrado ao ProcessingProvider.

Próximos Passos

Você concluiu o capítulo sobre frontend web!

A seção Documentação da API contém a referência completa de todos os módulos e componentes da arquitetura.

Consulte o capítulo Microsserviços ou Frontend Mobile, caso deseje implementar um serviço de backend ou app móvel.