Documento técnico
Guia rápido: Consumindo o Web Component via NPM (Angular e React)
Quer integrar o sistema de avisos à sua aplicação de forma simples? Através do nosso pacote distribuído via NPM, você pode utilizar o Web Component oficial do Avisos PDPJ mantendo a consistência visual do Programa Justiça 4.0. Este guia foi criado para ajudar você a configurar o ambiente em Angular e React, superando as particularidades de cada framework na manipulação de elementos customizados.
Pré-requisitos
Para consumir o Web Component Avisos PDPJ serão necesários os seguintes atributos:
- Sigla do Sistema: Para possuir a sigla do sistema (O sistema consumidor precisa ter cadastro ativo no controle de Avisos. 2.Access Token: O sistema consumidor deve passar o token do usuário logado para o Web Component. 3.Env: O ambiente em que o Web Component deve apontar, valores aceitos: ‘DEV’, ‘STG’ e ‘PRD’.
Localize o seu arquivo de configuração “.npmrc” e aponte para o registro do cnj:
@cnj:registry=https://nexus.cnj.jus.br/repository/npm-internal/
Baixe o componente utilizando o seguinte comando de Instalação:
npm i --save-dev @cnj/pdpj-sistema-aviso@latest
Ou baixe o tgz contendo o arquivo JS com a seguinte URL:
https://nexus.cnj.jus.br/repository/npm-internal/@cnj/pdpj-sistema-aviso/-/pdpj-sistema-aviso-0.0.0.tgz
Consulte com nosso time qual a última versão disponível do componente.
Após a istalação: Você terá uma estrutura como essa na sua pasta node_modules. E usaremos o JS minificado para os próximos passos.
|
Angular (carregando o .js via angular.json > scripts)
Abra angular.json no seu projeto angular e inclua o caminho do seu arquivo dentro de architect > build > options > scripts e também em test > options > scripts como mostra a imagem abaixo:
{
"projects": {
"app": {
"architect": {
"build": {
"options": {
"scripts": [
"./node_modules/@cnj/pdpj-sistema-aviso/pdpj-sistema-aviso.umd.js"
]
}
},
"test": {
"options": {
"scripts": [
"./node_modules/@cnj/pdpj-sistema-aviso/pdpj-sistema-aviso.umd.js"
]
}
}
}
}
}
}
Ao fazer essa confuguração no angular.json, o build injeta o script no index.html da aplicação em tempo de compilação. O Elemento do Web Component será registrado nos Custom Elements do Angular antes do Boostrap da aplicação.
Adicione a configuração que habilita o uso de Custom Elements no componente que irá renderizar o Web Component Avisos PDPJ, por padrão os sistemas no CNJ têm o componente de Header para posicionar o Web Component:
Se o Componente Angular não for standalone, essa configuração precisa ser feita no módulo que o componente está declarado.
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrl: './header.component.scss',
imports: [
... imports aqui
],
schemas: [CUSTOM_ELEMENTS_SCHEMA] <---- aqui a configuração
})
export class HeaderComponent {
... código do componente
}
Depois disso basta utilizar a tag do componente no HTML:
<pdpj-sistema-aviso [accessToken]="keycloakService.kc.token" sigla-sistema="JUSBR"></pdpj-sistema-aviso>
React (carregando o .js de forma global)
Após a instalação do componente: importe o script no index.html na raiz do projeto:
Index.html:
<!doctype html>
<html>
<head>
<script src="/node_modules/@cnj/pdpj-sistema-aviso/pdpj-sistema-aviso.umd.js"></script>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
Depois, basta usar no seu componente de Header, ou no componente que preferir:
<pdpj-sistema-aviso accessToken={token} siglaSistema={siglaSistema}></pdpj-sistema-aviso>
Como dito anteriormente, o componente precisa receber como parâmetros o access token do usuário logado e a sigla do sistema, uma forma fácil de fazer isso é utilizando-se do useEffect como mostra a figura abaixo:
import { useEffect, useRef } from "react";
export default function AvisoWrapper({ token }: { token: string }) {
const avisoRef = useRef<HTMLElement | null>(null);
useEffect(() => {
const el = avisoRef.current as any;
if (!el) return;
// Define propriedades diretamente
el.accessToken = token;
el.siglaSistema = "JUSBR";
}, [token]);
return <pdpj-sistema-aviso ref={avisoRef}></pdpj-sistema-aviso>;
}
Depois basta chamar o AvisoWrapper para renderizar o Web Component.
Sistema Vanilla – HTML + CSS
No HTML, basta fazer a importação do script e utilizar o componente, como mostra a figura abaixo:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>PdpjSistemaNotificacao</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script type="module" src="pdpj-sistema-notificacao.umd.js"></script>
</head>
<body>
<h1>HTML de teste</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.</p>
<pdpj-sistema-aviso access-token="jwt-token-example" sigla-sistema="PDPJ"></pdpj-sistema-aviso>
</body>
</html>
Como assegurar que o token está sendo passado: Se você precisa passar o token por meio de uma variável, de forma assíncrona, o Web Componente pode não interpretar essa variável em um primeiro momento, se passada diretamente no atributo access-token, mas existe uma forma de assegurar que o token está sendo passado:
Basta criar um script no HTML e inserir via Javascript assim que o compoente carregar em tela:
<script>
document.addEventListener('DOMContentLoaded', () => {
customElements.whenDefined('pdpj-sistema-aviso').then(() => {
const el = document.querySelector('pdpj-sistema-aviso');
if (el) el.accessToken = 'SEU_TOKEN_AQUI';
});
});
</script>