Por muito tempo, eu quis aprender o framework Django, mas sempre surgia algum projeto mais urgente que acabava tomando prioridade. Como muitos desenvolvedores, eu uso Python para projetos de machine learning, mas quando comecei a aprender programação para web, o PHP ainda dominava. Então, quando precisei escolher um framework mais robusto para criar aplicações web e publicar meu trabalho de machine learning, acabei voltando para o PHP. Durante um tempo, utilizei o framework Laravel para construir meus sites, e foi com ele que conheci o padrão Model-View-Controller (MVC) moderno de programação

Olá, desenvolvedores!

Este será um artigo bem curto, pois em abril de 2025, com o Lovable e outras ferramentas Prompt-to-UI, tornou-se possível construir o frontend com prompting. Até mesmo para pessoas como eu, que não estão nem um pouco familiarizadas com as técnicas modernas de UI.

Bem, eu conheço pelo menos as palavras javascript, typescript e ReactJS, então, neste artigo bem curto, construiremos a UI ReactJS para o servidor InterSystems FHIR com Lovable.ai.

Vamos lá!

Introdução

Olá Comunidade,

Esse é um passo a passo detalhado e claro sobre a plataforma IRIS AI Studio. Eu penso alto enquanto tento diferentes exemplos, alguns dos quais falham em devolver os resultados esperados - o que eu acho que é uma necessidade para que um plataforma desse tipo explore diferentes modelos, configurações e limitações. Esse vídeo será útil se está interessado em como construir o "Chat with PDF" (conversa com PDF) ou sistema de recomendações de dados usando a IRIS DB (DataBase - base de dados) e modelos LLM (Large Language Model -  grande modelo de lingugagem).

Neste artigo, vou abordar o teste e a depuração dos aplicativos da Web Caché (principalmente REST) com ferramentas externas. A segunda parte abrange ferramentas de Caché.

Você escreveu um código do servidor e quer testar em um cliente ou já tem um aplicativo da Web e ele não funciona. É aqui que entra a depuração. Neste artigo, vou mostrar desde as ferramentas mais fáceis de usar (navegador) até as mais completas (analisador de pacotes). Porém, primeiro, vamos falar um pouco sobre os erros mais comuns e como eles podem ser resolvidos.

Erros

401 Não Autorizado

Acho que é o erro encontrado com mais frequência ao implantar para a produção. O servidor de desenvolvimento local geralmente tem uma configuração de segurança mínima ou normal, mas convencional. No entanto, o servidor de produção pode ter um esquema mais restritivo. Portanto:

• Confira se você fez login
• Confira se o usuário tem acesso ao banco de dados/tabela/procedimento/linha/coluna que você quer acessar
• Confira se a solicitação OPTIONS pode ser realizada por um usuário não autorizado

404 Não Encontrado

Confira:

• Se o url está correto
• Caso seja um aplicativo novo e você esteja usando um servidor da Web externo, recarregar o servidor da Web pode ajudar

Erros do aplicativo

De certa forma, é o mais fácil de encontrar — o stack trace ajuda. A resolução é completamente específica ao aplicativo.

Ferramentas de depuração

Navegador da Web

A principal ferramenta de depuração sempre disponível é o navegador da Web, de preferência o Chrome, mas o Firefox também é suficiente. As solicitações GET podem ser testadas ao inserir o URL na barra de endereço, todas as outras solicitações exigem um aplicativo da Web ou a escrita de código js. A abordagem geral é:

• Pressione F12 para abrir as ferramentas de desenvolvedor.
• Acesse a guia Network (Rede).
• Marque a caixa de seleção "Preserve Log" (Preservar registro), se não estiver selecionada.
• Exiba apenas solicitações XHR.
• Realize a ação com problemas no aplicativo da Web.

Depois, você pode examinar as solicitações e reenviá-las. O Firefox também pode editar as solicitações antes de repeti-las.

Vantagens:

• Sempre disponível
• Fácil de usar (os usuários finais podem enviar capturas de tela das guias Network e Console)
• É um ambiente de usuário final

Desvantagens:

• Não mostra respostas parcialmente enviadas/corrompidas/etc.
• Lento para respostas grandes
• Lento para um número grande de respostas
• Tudo é feito manualmente

Cliente REST

O cliente REST é um aplicativo da Web independente ou um complemento do navegador da Web criado especificamente para testar aplicativos da Web. Eu uso Postman, mas há muitos outros. Veja como é a depuração no Postman:

O Postman trabalha com solicitações agrupadas em coleções. A solicitação pode ser enviada no ambiente. O ambiente é uma coleção de variáveis. Por exemplo, no meu ambiente CACHE@localhost, a variável do host está definida como localhost e o usuário como _SYSTEM. Quando a solicitação é enviada, as variáveis são substituídas pelos seus valores para o ambiente escolhido e a solicitação é enviada.

Confira um exemplo de coleção e ambiente para o projeto MDX2JSON.

Vantagens:

• Escreva uma única vez e use em todos os lugares
• Melhor controle sobre a solicitação
• Embelezamento das respostas

Desvantagens:

• <s>A depuração de solicitações em cadeia (a resposta à request1 pode forçar a request2 ou request 2B) ainda é manual</s> (Atualização de 22 de fevereiro: possível no Postman)
• Às vezes, falha com respostas parcialmente enviadas/corrompidas/etc.

Proxy de depuração HTTP

Um aplicativo independente que registra tráfego HTTP(S). As solicitações registradas podem ser modificadas e reenviadas. Eu uso Charles e Fiddler.

Vantagens:

• Processa respostas parcialmente enviadas/corrompidas/etc.
• Embelezamento das respostas
• Melhor suporte para tráfego HTTPS (do que no analisador de pacotes)
• Consegue capturar sessões

Desvantagens:

• Algo (aplicativo da Web/cliente REST/código JS) é necessário para enviar a solicitação

Analisador de pacotes

Um programa de computador consegue interceptar e registrar o tráfego transmitido por uma rede. Com os fluxos de dados fluindo em toda a rede, o sniffer captura cada pacote e, se necessário, decodifica os dados brutos do pacote. Essa é a opção mais completa, mas também exige um pouco de habilidade para a operação adequada. Eu uso o WireShark. Veja um breve guia sobre a instalação e o uso:

1. Se você quiser capturar pacotes locais, leia sobre o loopback e instale o software de pré-requisito (npcap para windows)
2. Instale o WireShark
3. Configure filtros de captura (por exemplo, um filtro para só capturar tráfego na porta 57772: port 57772
4. Inicie a captura
5. Configure filtros de exibição (por exemplo, um filtro para só exibir tráfego http para um ip específico: ip.addr == 1.2.3.4 && http

Confira um exemplo de captura de tráfego http (filtro de exibição) na porta 57772 (filtro de captura):

 Vantagens:

• Processa respostas parcialmente enviadas/corrompidas/etc.
• Consegue capturar uma grande quantidade de tráfego
• Consegue capturar qualquer coisa
• Consegue capturar sessões

Desvantagens:

• Algo (aplicativo da Web/cliente REST/código JS) é necessário para enviar a solicitação

O que usar

Bem, isso depende da finalidade. Primeiro, podemos ter como objetivo registrar (proxy de depuração, analisador de pacotes) ou gerar (navegador, cliente REST) solicitações.

Se você estiver desenvolvendo uma API Web REST, o cliente REST é a maneira mais rápida de testar o funcionamento.

No entanto, se as solicitações do cliente REST funcionarem, mas o aplicativo da Web cliente não, talvez seja necessário o proxy de depuração http e o analisador de pacotes.

Se você tiver clientes e precisar desenvolver uma API do lado do servidor para trabalhar com eles, precisará do proxy de depuração http ou do analisador de pacotes.

É melhor estar familiarizado com todos os 4 tipos de ferramentas e mudar rapidamente entre eles se o atual não der conta do trabalho.

Às vezes, a ferramenta ideal é óbvia.

Por exemplo, recentemente, desenvolvi uma API do lado do servidor para um protocolo de extensão http popular. Os requisitos eram:

• Os clientes já estavam escritos e o código não podia ser alterado
• Clientes diferentes têm comportamentos diferentes
• O comportamento no http e https varia
• O comportamento com diferentes tipos de autenticação varia
• Até cem solicitações por segundo para cada cliente
• Todos ignoram o RFC

Há só uma solução aqui: o analisador de pacotes.

Ou, se estou desenvolvendo uma API REST para consumo de JS, o cliente REST é uma ferramenta perfeita para testes.

Ao depurar o aplicativo da Web, comece com o navegador.

Na Parte 2, vamos discutir o que pode ser feito (muita coisa) para a depuração da Web no lado do Caché.

Quais são suas abordagens para depurar a comunicação no lado do cliente?

Veremos a seguir como o InterSystems IRIS aliado com Machine Learning pode transformar para melhor a educação do Brasil e do mundo

. .

O video de apresentação:

Educação Integrada com InterSystems IRIS

A ideia é integrar a educação usando InterSystems IRIS para permitir a criação de uma plataforma completa para gestão, análise, melhoria e transformação da educação. Com o InterSystems IRIS, seria possível integrar dados de diferentes fontes, como informações sobre alunos, professores, diretores, escolas, faculdades, cursos, entre outros, em um único lugar.

Nós sabemos que a educação é um setor de extrema importância para a sociedade, e pode ser considerado um negócio lucrativo não só financeiramente, mas também em termos de desenvolvimento social e econômico, por isso escolhi este caso de negócio. A pricinpal abordagem tecnólogica usada aqui é o Machine Learning, pois a ideia é que ferramentas de IA sejam usadam para melhorar a educação humana e não o contrário.

O projeto envolve combinar InterSystems IRIS e Machine Learning, além de outras abordagens técnologicas para criar uma plataforma de educação completamente integrada, onde todas as instituições de ensino do país estaram ligadas a plataforma, para permitir a integração de milhares de dados educacionais, que seriam usados para se servir ferramentas de ensino, análise e gestão da educação de um jeito nunca visto antes, utilizando do Machine Learning para se prever problemas e apresentar soluções que seriam capazes de melhorar completamente o ensino do Brasil.

Usar e desenvolver ferramentas de IA para colaborar com a evolução humana, não para se aproveitar de suas fraquezas.

É um fato que tecnologias relacionadas à Inteligência Artificial estão em constante evolução, desta forma se torna cada vez mais necessário melhorar a eficiência da educação humana, para que humanos evoluam junto e não fiquem para trás. Sendo assim, em um mundo tão cheio de informações e conhecimento, precisamos de ferramentas poderosas de processamento de dados, integração e análise em tempo real, e é ai que entra o InterSystems IRIS.

Graças ao InterSystems IRIS podemos criar uma plataforma global de educação, integrar dados de diferentes fontes, executar análises em tempo real e fornecer insights acionáveis para tomada de decisão rápida e precisa. Poderemos usar diferentes abordagens tecnológicas em conjunto com o InterSystems IRIS, esta plataforma seria usada por escolas, faculdades e outras instituições de ensino, abrindo caminho para trazer a gamificação na sua forma máxima em todas as fases da educação, aumentando o engajamento das pessoas no ensino e na educação de qualidade.

Graças ao InterSystems IRIS e o Machine Learning podemos mudar a realidade de países como o Brasil, um país que sofre com uma educação de péssima qualidade há muitos anos, desta forma vamos criar uma plataforma colaborativa e integrada de educação, que vai salvar a educação do Brasil.

Arquitetura

A arquitetura (modelo lógico) da plataforma Educação Integrada InterSystems IRIS vai envolver combinar diferentes componentes tecnológicos para atender às necessidades específicas deste projeto. Em termos gerais, a plataforma tem a seguinte arquitetura:

InterSystems IRIS:

Nossa plataforma é construida em cima do InterSystems IRIS, o que facilita a criação de aplicativos habilitados para aprendizado de máquina de alto desempenho que conectam dados e silos de aplicativos.

Com ele vamos ter gerenciamento de banco de dados de alto desempenho, interoperabilidade e recursos de análise, todos integrados desde o início para acelerar e simplificar os aplicativos com uso intensivo de dados mais exigentes e integra-se perfeitamente a infraestrutura existente.

Front-end:

O front-end é construído usando o framework Angular, que vai permitir que se desenvolva uma interface amigável e intuitiva para os usuários finais da plataforma, incluindo professores, alunos, pais, diretores, empresas e funcionários públicos e privados e etc.

Back-end:

O back-end é construído usando InterSystems API Manager e ObjectScript. Sabendo que O API Manager usa contêineres, precisaremos trabalhar com contêineres e Docker também.

Observação: O InterSystems API Manager (IAM) é um componente independente que a InterSystems fornece para uso com os produtos InterSystems IRIS. Ele permite que se monitore, controle e administre o tráfego de API baseado em HTTP, o InterSystems API Manager (IAM) permite que se aproveite ao máximo os microsserviços e APIs que são expostos ou consumidos por aplicativos InterSystems IRIS.

O InterSystems API Manager é uma solução de gerenciamento de API que oferece recursos de segurança, autenticação, autorização e monitoramento de API em tempo real, enquanto o ObjectScript é uma linguagem de programação multi-paradigma que é usada para desenvolver aplicativos para a plataforma InterSystems IRIS. No caso também podemos trazer mais do Machine Learning caso haja necessidades especifícas, pois o InterSystems IRIS também oferece suporte integrado para Python e outras linguagens externas.

O API Manager fornece uma interface para gerenciar, autenticar e monitorar as APIs desenvolvidas em ObjectScript ou em outras linguagens, já o ObjectScript fornece a lógica de negócios para as APIs. Quando uma solicitação é feita a uma API gerenciada pelo API Manager, o API Manager encaminha a solicitação para o serviço ObjectScript correspondente. Depois que o serviço processa a solicitação, ele retorna uma resposta ao API Manager, que por sua vez manda a resposta de volta ao cliente. Isso permite que o ObjectScript se concentre na lógica de negócios, enquanto o API Manager gerencia a autenticação, autorização, segurança e monitoramento de API. Além de ser excelente para definir os consumidores para alunos, professores, pais e etc; Eles representam “aplicativos diferentes” que farão chamadas de API para o API Manager.

Banco de dados:

O banco de dados é hospedado no InterSystems IRIS. A plataforma de dados InterSystems IRIS fornece uma arquitetura multimodelo que permite usar o modelo de dados que melhor se adapta a cada tarefa ( relacional, de objeto ou até mesmo acesso direto/nativo ) tudo acessível por meio do idioma escolhido. que oferece alta escalabilidade, segurança e disponibilidade para o banco de dados.

Hoje o InterSystems IRIS também permite a integração direta com o Kafka, o que nos permite ter aplicativos de streaming em tempo real de alto desempenho.

Machine Learning:

Nossa plataforma também utiliza o InterSystems IntegrateML, que oferece recursos avançados de Machine Learning para análise de dados e previsão de tendências. IntegratedML é um novo recurso do InterSystems IRIS que permite que os desenvolvedores SQL desenvolvam facilmente modelos de aprendizado de máquina com apenas alguns comandos semelhantes a SQL. Os modelos de aprendizado de máquina podem ser integrados perfeitamente em aplicativos e produções para serem executados em tempo real em resposta a eventos e transações. Desta forma vamos poder oferecer para todos os usuários da plataforma uma ferramenta poderosa de IA para colaborar com o progresso da evolução humana, oferecendo análises de desempenho, dicas e permitindo que se ofereça uma atenção individual para as dificuldades em particular de cada indivíduo.

IoT:

A plataforma é integrada com sensores IoT, para rastrear o desempenho dos alunos em tempo real. Isso é usado para análise, gamificação, previsões do IntegrateML, planos de segurança, melhora da experiência dos alunos, monitoramento de energia, monitorar temperatura e umidade, gerenciar presença, monitorar o uso das instalações e etc. Como nosso modelo de comunicação terá uma arquitetura centralizada, teremos várias instâncias InterSystems IRIS, desta forma cada instituição terá sua própria infraestrutura IoT de forma independente.

Blockchain:

A plataforma poderá também ser integrada com a tecnologia Blockchain para garantir a segurança dos dados dos usuários e a transparência em todo o sistema educacional. A blockchain poderá, será utilizada para garantir a integridade e a segurança dos registros e transações realizadas pelos usuários, como alunos, professores, pais e outros. Por exemplo a blockchain poderá ser utilizada para registrar a emissão de diplomas e certificados digitais, garantindo a autenticidade dos documentos e prevenindo fraudes.

Com essa arquitetura vamos poder combinar diferentes tecnologias e abordagens tecnológicas para fornecer uma plataforma robusta e escalável para gerenciamento, análise, controle e melhoria da educação no país. Ainda poderemos integra-la com outras plataformas e serviços externos, como empresas e o governo federal, para permitir que a plataforma Educação Integrada InterSystems IRIS ofereça uma experiência de usuário ainda mais abrangente e enriquecedora.

Observação: Pode haver a necessidade de se trabalhar com outras linguagens e tecnologias, por isso na imagem abaixo podemos ter uma ideia melhor do que é possivel com InterSystems IRIS

Funcionalidades do InterSystems IRIS que são de extrema importância para o funcionamento desta plataforma:

1. Ferramentas de colaboração: Algo muito importante é o trabalho em equipe, que é crucial para um projeto como esse. E como o InterSystems IRIS oferece várias ferramentas de colaboração, como mensagens, notificações e bate-papo, que permitem que as equipes trabalhem juntas de maneira mais eficiente seria possível com toda certeza desenvolver um projeto tão grande como este.

2. Armazenamento de dados: Precisamos de um armazenamento de dados muito bom e como o InterSystems IRIS tem um armazenamento de dados de alto desempenho e escalável que permite armazenar dados de várias fontes em um único local teremos o necessário, com toda certeza.

3. Acesso a dados em tempo real: O setor da Educação demanda uma tomada de decisão muito precisa e inteligente. Desta forma temos aqui mais um motivo para escolher o InterSystems IRIS, pois ele nos permite ter o acesso a dados em tempo real de várias fontes, incluindo dados estruturados e não estruturados. Isso permite se tomar decisões informadas em tempo real com base em insights valiosos.

4. Integração com outros sistemas: Não pode parar, não pode perder, precisa integrar. O InterSystems IRIS pode ser facilmente integrado com sistemas de terceiros. Desta forma as instituições vão poder estender soluções existentes e aumentem sua eficiência operacional. O que é muito importante, pois hoje já temos muitos sistemas em uso no setor educacional, então poderemos aumentar a eficiência de grande parte deles e/ou liberar mais informações valiosas de tomada de decisão.

5. Monitoramento e gerenciamento de desempenho: O MEC e as instituições vão precisar de ferramentas de monitoramento e gerenciamento de desempenho que permitem que se monitore e otimize o desempenho dos sistemas em tempo real, o que é outra funcionalidade do InterSystems IRIS.

6. Desenvolvimento de aplicativos móveis: Uma das ideias é que pais possam acompanhar o desempenho de seus filhos em qualquer lugar, usando um smartphone por exemplo e como o InterSystems IRIS permite o desenvolvimento de aplicativos móveis de alta qualidade e seguros que podem ser facilmente integrados com outros sistemas, nossa plataforma poderá oferecer aplicativos móveis para todos: pais, professores, alunos e outros.

7. Segurança avançada: Precisamos de total segurança em uma platforma como esta, é um setor muito importante. InterSystems IRIS oferece recursos de segurança avançados, como autenticação, autorização e criptografia de dados, garantindo que os dados sejam mantidos seguros.

8. Escalabilidade: Nossa plataforma precisa ser altamente escalável, ou seja, tem que ter condições para crescer de forma uniforme ou para suportar um aumento de carga e ser capaz de lidar com grandes volumes de dados e tráfego de aplicativos, permitindo que a plataforma cresça e se adapte às necessidades em constante mudança do setor educacional. Algo que é totalmente possível no InterSystems IRIS.

9. Processamento de fluxo de dados em tempo real: O InterSystems IRIS permite o processamento de fluxo de dados em tempo real, o que é ideal para este projeto que exige análise de dados em tempo real, esta plataforma seria uma grande ferramenta de mudança, e teria grande importância na sociedade, além de trabalhar com muitas tecnologias e processar grandes quantidades de dados, então com toda certeza esta capacidade do InterSystems IRIS é crucial.

10. Business Intelligence (BI) e análise avançada: O InterSystems IRIS oferece recursos avançados de BI e análise, permitindo que a plataforma crie relatórios, dashboards e análises avançadas de seus dados. Isso ajudaria as instituições e orgãos responsáveis a tomar decisões informadas com base em insights valiosos.

11. Integração de sistemas legados: O InterSystems IRIS oferece recursos de integração que permitem que as instituições integrem facilmente seus sistemas legados com sistemas modernos e em nuvem, aumentando a eficiência operacional e reduzindo custos.

12. Desenvolvimento de aplicações web: Como vimos na arquitetura, a principal tecnologia de front-end escolhida foi o Angular e apesar de no diagrama apresentarmos uma arquitetura de um cliente web externo ao servidor, também podemos ter um cliente web servido pelo InterSystems IRIS. O InterSystems IRIS permite o desenvolvimento de aplicações web de alta qualidade e seguras, utilizando tecnologias modernas como Angular, React, Vue.js e outros.

13. Automação de processos empresariais: Educação também é negócio, um negócio lucrativo, desta forma serão necessários recursos de automação de processos empresariais (BPM) que permitem que as instituições automatizem e gerenciem seus processos de negócios de forma mais eficiente. O InterSystems IRIS oferece!

14. Suporte para múltiplos idiomas e regiões: O InterSystems IRIS suporta múltiplos idiomas e regiões, permitindo que a plataforma atenda clientes e usuários em todo o mundo.

15. Regras de Negócios(Business Rules): Com esta funcionalidade, o InterSystems IRIS permite que usuários não técnicos alterem o comportamento dos processos de negócios em pontos de decisão específicos. Sendo possível alterar a lógica da regra instantaneamente, usando o editor de regras no portal de gerenciamento. Imagine que uma instituição de ensino que está em todo o Brasil acaba de lançar um programa de bolsas de estudo, mas cada "filial" desta instituição tem seus próprios critérios de aceitação de alunos, com as regras de negócios suportamos essa divisão de responsabilidade. Portanto, é possível que analistas de negócios em vários locais regionais executem o Editor de Regras para modificar suas cópias da regra para fornecer diferentes critérios específicos apropriados para suas localidades.

16. Encryption (Criptografia): Uma plataforma como esta vai lidar com muitos dados valiosos, por isso precisamos protege-lá contra acesso não autorizado a dados em disco, por isso está funcionalidade do InterSystems IRIS de criptografia é muito importante. O InterSystems IRIS fornece criptografia de chave gerenciada , um conjunto de tecnologias que protegem os dados em repouso.

17. Mirroring and High Availability: Outra funcionalidade muito importante do InterSystems IRIS é o espelhamento e alta disponibilidade, está pode ser considerada uma plataforma de missão crítica e precisa estar disponível 24 horas por dia, 7 dias por semana. O espelhamento da plataforma de dados IRIS da InterSystems fornece failover automático rápido, confiável e robusto com base na replicação lógica de dados. Caso o pior aconteca e um grande evento derrube um aplicativo ou serviço da nossa plataforma, o espelhamento oferece uma rápida recuperação de desastres.

Mais ferramentas e funcionalidades InterSystems IRIS interessantes que seram úteis para a plataforma:

InterSystems IRIS Adaptive Analytics:

• O InterSystems IRIS Adaptive Analytics é uma extensão opcional que fornece uma camada de modelo de dados virtual orientada para os negócios entre o InterSystems IRIS e as populares ferramentas de cliente Business Intelligence (BI) e Artificial Intelligence (AI). O BI pode ser usado para criar painéis de controle e relatórios personalizados.

InterSystems DeepSee:

• Esta ferramenta pode ser usada para criar visualizações de dados interativas e em tempo real, permitindo que os usuários do sistema explorem os dados de forma mais aprofundada e tomem decisões mais informadas.

InterSystems HealthShare:

• O HealthShare, que é muito mais do que uma funcionalidade, pode ser usado para integrar dados de saúde dos alunos, permitindo que os médicos e os professores monitorem o bem-estar físico e mental dos alunos e ajudem a identificar e tratar problemas de saúde. Isso aqui só se o Brasil der mais um passo para o futuro utilizando InterSystems na saúde também, mas mesmo que não, sabemos que continua sendo possível graças a capacidade de integração com outros sistemas do InterSystems IRIS.

System Alerting and Monitoring:

• System Alerting and Monitoring ( SAM ) é um componente independente que a InterSystems fornece para monitorar os produtos da InterSystems. Com este, mesmo que nossa plataforma seja executada em um par espelhado local ou na nuvem com vários aplicativos e servidores de dados, poderemos usar o SAM para monitorar as instâncias InterSystems IRIS. Usando o aplicativo da web SAM para visualizar métricas de desempenho em tempo real para clusters e instâncias.

InterSystems Reports

• Como estamos lidando aqui com uma área de grande importância para a sociedade, com papel direto do governo precisamos de uma uma solução de relatórios moderna e robusta para garantir eficiência e segurança da plataforma e dar todo respaldo burocratico necessário. Que torna se possível graças ao InterSystems Reports, que é uma ferramenta de geração de relatórios para a plataforma de tecnologia InterSystems IRIS. Com o InterSystems Reports, é possível criar relatórios com gráficos, tabelas, imagens e outros elementos personalizados, além de definir layouts específicos para diferentes tipos de relatórios. A ferramenta também oferece suporte para relatórios em vários formatos, incluindo PDF, HTML, Excel e CSV, entre outros.

InterSystems IRIS® Natural Language Processing (NLP)

• Análise de Texto (Processamento de Linguagem Natural), com esta tecnologia o InterSystems IRIS permite que se execute análise de texto em fontes de dados não estruturadas em uma variedade de linguagens naturais sem qualquer conhecimento prévio de seu conteúdo. Algo muito útil para as instituições de ensino que muitas vezes podem precisar de informações sobre o conteúdo de textos diversos, isso permite que se descubra informações úteis sobre o conteúdo de um grande número de documentos de texto sem nenhum conhecimento prévio do conteúdo dos textos.

A ferramenta InterSystems IRIS SQL Search

• Esta ferramenta integra-se com o InterSystems IRIS Natural Language Processor (NLP) para executar operações de pesquisa de texto com reconhecimento de contexto em dados não estruturados, com recursos como pesquisa difusa, expressões regulares, lematização e decomposição. Esse recurso é fundamental para acessar o conteúdo de grandes volumes de texto armazenados em SQL.

PMML (Predictive Modeling Markup Language)

• Como nossa plataforma servirá várias instituições de ensino que precisam trabalhar com análise e ciência de dados de forma otimizada, precisamos de um padrão que possibilite que modelos de mineração de dados e estatísticos possam ser compartilhados entre as aplicações de diferentes fornecedores. A maneira de fazer isso é usando PMML, que é suportado pela plataforma de dados InterSystems IRIS.

AutoML

• Nossa! Cada vez mais imprecionado com o InterSystems IRIS, agora temos aqui mais uma funcionalidade super legal que será muito útil para uma plataforma como está, intimamente ligada ao machine learning. O AutoML é um sistema automatizado de aprendizado de máquina desenvolvido pela InterSystems, alojado na plataforma de dados InterSystems IRIS. Ele foi projetado para criar rapidamente modelos preditivos precisos, automatizando vários componentes-chave do processo de aprendizado de máquina. Depois de treinar o modelo com o AutoML, vamos poder implantá-lo facilmente usando a sintaxe SQL fornecida pelo IntegratedML. Isso é muito útil, imagine quanto tempo vamos economizar, vamos poder treinar diversos modelos relacionados a educação como: Modelo preditivo de desempenho acadêmico, Modelo preditivo de retenção de alunos, Modelo preditivo de engajamento, Modelo preditivo de recomendação de conteúdo, Modelo preditivo de detecção de plágio, Modelo preditivo de detecção de uso de IA na geração de textos e etc. tudo de forma automatizada. Para poder oferecer diversas ferramentas incríveis para transformar a educação totalmente.

Agora que vimos muitas funcionalidades do InterSystems IRIS que serão essenciais para este caso, vamos tentar vislumbrar como esta ideia pode transformar a educação:

Precisamo integrar em uma única plataforma toda a educação do país, escolas (públicas e privadas), faculdades (públicas e privadas), enfim todas as Instituições Credenciadas no MEC - Ministério da Educação, a ideia é que esta plataforma seja cedida pelo MEC, assim cada instituição teria sua própria instância.

Será preciso configurar as instâncias do IRIS para se comunicarem por meio de APIs e trocarem informações relevantes, como informações do aluno ou do professor.

A autenticação pode ser implementada para permitir que os usuários finais visualizem apenas os dados aos quais têm acesso, dependendo de seus perfis e funções (InterSystems API Manager). Por exemplo, um professor só poderia acessar os dados dos alunos que estão em suas turmas, enquanto um diretor poderia ter acesso a todos os dados dos alunos em sua escola.

Assim configurando de forma adequada as instâncias do InterSystems IRIS podemos fazer com que elas se comuniquem e troquem informações para fornecer uma visão unificada e completa do sistema educacional, permitindo que os usuários finais acessem facilmente as informações de que precisam, independentemente de sua localização física.

Vejamos:

Vamos integrar as instituições de todo o país para oferecer ferramentas de análise, educação, supervisão e outras. Teremos dados de alunos e instituições como por exemplo notas, perfil, ocorrências escolares, faltas, dados de IoT e etc; para por meio de Inteligência Artificial oferecer análises de desempenho e de pontos a melhorar, entre outras.

Será dividido entre interfaces especificas:

• Pais - Teriam acesso à informações referentes aos seus filhos.
• Professores - Teriam acesso à informações de todos seus alunos, podendo adicionar dados como notas.
• Alunos - Poderiam acompanhar seu desempenho, receber dicas, tarefas e etc.
• Diretores - Teriam uma grande ferramenta de Acompanhamente e análise.
• Orgãos Responsáveis - Teriam uma visão geral da educação no país.

Com isso podemos dar a sociedade, uma ferramenta completa de educação, para acompanhar, receber dicas, análises, para oferecer materias de apoio com base no desempenho particular de cada um, podendo dar atenção específica para cada pessoa.

Também será algo gameficado, com pontuação, prêmios para os melhores desempenhos, incentivando o aprendizado e o bom comportamento, onde as pontuações e os dados de cada individuo seriam importantes para toda a vida profissional, sendo usado como complemento de notas obtidas em provas de admissão de faculdades e para seletivas de oportunidades de emprego.

Aqui temos um adendo:

• Podemos integrar também dados das empresas, referente à vagas de emprego, permitindo que as empresas tenha acesso a uma interface de seleção de candidatos, com varios filtros, IA para seleção dos candidatos que mais se encaixam no perfil procurado.

• E do lado dos alunos, estes poderiam fazer buscas por oportunidades, receber propostas de emprego e estágios, receber uma análise indicando onde ele precisa melhorar para aumentar suas chances na vaga que ele almeja.

Sabemos que emprego é o que não falta, o que falta é mão de obra qualificada, assim com esta plataforma, que só é possível graças ao InterSystems IRIS, podemos integradar os dados valiosos para tomada de decisão tanto de empresas na hora de escolher um candidato, como de instituições de ensino na hora de selecionar o que será ensinado em sala de aula e também claro do cidadão na hora de traçar seus objetivos para seu futuro profissional.

Assim temos em mãos a oportunidade de mudar tudo, inclusive o entusiasmo das crianças na hora de estudar, pois está será uma plataforma cheia de gamificação, sabemos que o mundo de hoje oferece muitas distrações para as crianças, por isso precisamos urgentemente atrair as crianças para um ambiente saudável, educativo e ao mesmo tempo divertido. Por isso nossa plataforma terá também a gamificação na sua forma máxima, com emblemas, pontuações, jogos educativos, prêmios e etc. Daremos valor ao bom comportamento, as boas notas, ao trabalho em equipe, tudo que um ser humano precisa para viver bem em uma sociedade saudável pode e deve ser desenvolvido nas escolas e é preciso mostrar para as crianças que isso tem valor, e não tem jeito melhor que com gameficação.

Outra coisa importante são os pais, que muitas vezes negligenciam ou delegam a educação dos seus filhos, com esta plataforma mudamos isso, trazendo os pais para mais perto da escola, dos professores e da educação dos seus filhos, com dicas, análises, comunicação e claro gameficação. Que tal também dar prêmios aos pais pelo desempenho de seus filhos? que tal descontos em supermercados? equipamentos tecnológicos?

Como estamos falando aqui de uma plataforma ligada diretamente aos governos municipais, estaduais e federal, esta parte de prêmios poderia vir integrada ao Cadastro Único para Programas Sociais (CadÚnico), no caso do Brasil, que é um instrumento de coleta de dados e informações que objetiva identificar todas as famílias de baixa renda existentes no país para fins de inclusão em programas de assistência social e redistribuição de renda. Integrar esses dados à plataforma para que os governos valorizem pais dedicados à educaçãos de seus filhos e alunos com ótimo desempenho.

Desafios

Sabendo que o caso de negócio escolhido aqui foi no setor da educação e que este caso foi escolhido pois é um setor de extrema importância para sociedade, listo abaixo os desafios encontrados:

1. O primeiro desafio que podemos perceber em um projeto como este, está no fato de termos diferentes tipos de instituições de ensino no país, públicas, privadas e sem fins lucrátivos. E elas precisam estar, ao mesmo tempo, integradas e independentes. Por isso o InterSystems IRIS é tão importante, pois permite configurar as várias instâncias de forma que o usuário final terá uma visão unificada da plataforma, mesmo que cada instituição tenha sua própria instância InterSystems IRIS. Assim poderemos ter uma instância central ligada ao MEC que além de ter dados que são de responsábilidade do MEC, poderá consumir APIs das outras instâncias para obter os dados necessários e fornecer uma camada adicional de segurança e gerenciamento de acesso para as diferentes instâncias. Desta forma o front-end se comunica com a instância central, que é responsável por receber as solicitações do usuário final, processá-las e buscar as informações necessárias nas instâncias independentes e em si mesma em alguns casos. A instância central então retorna a resposta ao front-end, que apresenta as informações ao usuário final de forma unificada e amigável. Assim nosso modelo de comunicação terá uma "arquitetura centralizada".

2. O segundo desafio se trata do fato de que hoje nas instituições provavelmente existem sistemas de diferentes fornecedores e com diferentes estruturas de dados que precisam ser integrados na plataforma, o que pode levar a muitos desafios relacionados a identificação de sistemas que precisam ser atualizados ou substituídos. O que é algo que pode ser resolvido de forma objetiva se levarmos em conta que o modelo educacional que temos hoje está obsoleto e precisamos substituir, se não todos, grande parte desses sistemas, para integrar tudo na nova plataforma, além claro do fato desta nova plataforma ser construido em cima do InterSystems IRIS que nos oferece uma interoperabilidade sem igual. Desafios aparecem, mas o InterSystems IRIS tem a solução.

3. O terceiro é a questão da segurança, nossa plataforma precisa ser altamente segura para garantir que as informações pessoais de alunos, professores e outros estejam protegidas, além de garantir que apenas usuários autorizados tenham acesso a informações confidenciais. O que é algo que mais uma vez é facilitado pelo InterSystems IRIS. Mais abaixo vamos falar um pouco mais sobre isso.

Segurança, APIs e Modelo de Comunicação

Precisamos que nossa plataforma seja muito segura, saiba lidar com diferentes instâncias e que ao mesmo tempo, na percepção do usuário final, seja unificada.

Sabemos até aqui que está plataforma terá uma instância central que ficará sobre responsabilidade do MEC, e várias instâncias independentes e padronizadas sobre responsabilidade das instituições, desta forma vamos exemplificar abaixo como isso vai funcionar:

Para isso será preciso definir uma estrutura padronizada de APIs ao implementar as instâncias das instituições, para que a integração com a instância central seja realizada de maneira eficiente.

Assim ao cadastrar uma nova instituição na plataforma, será necessário incluir as informações referentes à API dessa instituição no banco de dados da instância central, permitindo que a comunicação entre as instâncias seja realizada de maneira adequada.

Outra coisa, é importante criar uma lógica de busca das informações de endpoint no banco de dados central, para que as informações sejam atualizadas automaticamente e o usuário final tenha acesso às informações da instituição correta.

Para implementar essa solução, será necessário utilizar o InterSystems API Manager e o ObjectScript para realizar a comunicação e integração entre as instâncias e o banco de dados central, a ideia é que o cadastro do usuário seja realizado na instância central, que poderá se comunicar também com outros serviços do governo para validar o cadastro, hoje no Brasil isso pode ser feito usando o gov.br que oferece um ambiente de autenticação digital único do usuário aos serviços públicos digitais, ou seja, com um único usuário e senha você poderá utilizar todos os serviços públicos digitais que estejam integrados com a plataforma GOV.BR. Fornece um nível de segurança compatível com o grau de exigência, natureza e criticidade dos dados e das informações pertinentes ao serviço público solicitado, assim, uma vez cadastrado, o usuário poderá ter acesso a todas as instituições do país diretamente na plataforma, podendo acessar seus dados de instituições onde está matriculado.

Desta forma quando uma pessoa realizar a matrícula em uma determinada instituição, um novo cadastro é gerado na instância local dessa instituição que vai validar os dados do aluno na instância central que por sua vez vai salvar a nova instituição nos dados do aluno para autenticação posterior.

Com esta lógica, precisamos que as instâncias das instituições disponibilizem as suas APIs e forneçam as credenciais de acesso para a instância central, teremos assim APIs especifícas e outras que possam vir a ser implementadas pelas instituições, também precisamos que cada instância das instituições de ensino forneça um serviço de autenticação integrado à plataforma central. Isso poderia ser feito usando um protocolo padrão, como OAuth 2.0, que permitiria que a instância central se autenticasse na instituição de ensino em nome do usuário, que poderá ser um diretor, um professor, aluno ou pai/mãe, funcionários e outros.

Uma vez autenticado, o sistema iria verificar em quais instituições o usuário tem acesso e mostrar apenas as informações relevantes para ele. Isso será implementado em ObjectScript usando uma combinação de APIs RESTful e lógica de negócios personalizada.

Supondo que um usuário faça login na plataforma central e seja autenticado com sucesso em uma instituição de ensino. A plataforma poderia então consultar um serviço RESTful na instituição para obter uma lista de cursos nos quais o usuário está matriculado. Essa solução garante que os usuários tenha acesso somente às informações relevantes para eles.

Com base nessa lista, a plataforma poderia exibir apenas os cursos relevantes para o usuário e ocultando todas as informações de outras instituições de ensino. O mesmo princípio poderia ser aplicado a outras informações, como notas, horários de aulas, calendários etc.

Observação: Como cada instituição terá sua própria instância InterSystems IRIS de forma independente isso abre possibilidade para que as instituições implementem novas APIs e desenvolvam outros aplicativos, além dos padronizados, que seriam disponibilizados na plataforma como numa loja de APPs. Como podemos ver o InterSystems IRIS abre um leque de oportunidades, onde podemos usar diversas abordagens tecnológicas para transformar a educação do país.

Agora o Machine Learning

Nossa plataforma é construida em cima do InterSystems IRIS, como já sabemos, e a principal abordagem tecnológica usada em conjunto é o Machine Learning, por isso veremos a seguir como o Machine Learning muda tudo aqui e nos dar uma capacidade incrível de transformação da educação.

Para esta parte vamos precisar do IntegrateML e do autoML, dois recursos imprecionantes presentes no InterSystems IRIS, com eles vamos poder treinar e implantar modelos preditivos facilmente. Vamos agora verificar tipos de modelos que poderemos treinar que serão de estrema importância para dar a esta plataforma o poder de transformar a educação:

1. Modelo preditivo de desempenho acadêmico: Usando o autoML para criar rapidamente modelos preditivos precisos usando dados, como por exemplo notas de teste, vamos poder criar um modelo para prever o desempenho dos alunos em testes futuros. Ele pode ser usado para identificar os alunos que estão em risco de falhar em uma determinada disciplina e fornecer intervenções personalizadas para ajudá-los a melhorar.

2. Modelo preditivo de retenção de alunos: Usando dados históricos de desempenho acadêmico, frequência, participação e outros, vamos poder criar um modelo para prever a probabilidade de um aluno abandonar a escola ou faculdade. Ele pode ser usado para identificar os alunos que correm maior risco de desistir e fornecer intervenções personalizadas para ajudá-los.

3. Modelo preditivo de recomendação de conteúdo: Se lembra do que foi falado sobre atenção indívidual para acada aluno? Então, aqui podemos ter um modelo preditivo para a plataforma poder recomendar conteúdo específico com base nas preferências e desempenho acadêmico do aluno. Ele pode ser usado para oferecer conteúdo personalizado para cada aluno com base em suas necessidades individuais.

4. Modelo preditivo de detecção de plágio: Algo muito importante para uma platforma como esta, que abre portas para se aumentar ainda mais o uso de computadores na realização de muitas tarefas, como entrega de trabalhos, provas e testes. Com Este modelo vamos poder detectar a ocorrência de plágio em trabalhos escritos de alunos. Ele pode ser usado para identificar trabalhos que possam ter sido plagiados evitando assim que os alunos copiem conteúdo da internet.

5. Modelo preditivo de detecção de texto gerado por IA: Já que falamos de plágio, no ano de 2023 surgiu mais uma questão, o uso de IA para gerar texto para trabalhos acadêmicos, desta forma este modelo poderia identificar se um texto foi produzido por um ser humano ou por uma inteligência artificial. Isso seria útil em várias situações, como detecção de plágio, verificação de autenticidade de documentos, entre outros.

6. Modelo preditivo de desempenho em testes padronizados: No Brasil temos ums prova chamada ENEM, que é muito importante na vida profissional, pois abre portas para a entrada em universidades públicas e privadas. Aqui podemos criar um modelo para prever o desempenho dos alunos em provas como o ENEM, imagine esta plataforma cheia de dados, como notas, análises grámaticas de textos feitos pelos alunos, dados de testes práticos gerados pela plataforma, provas anteriores do ENEM e outros. Com o autoML usamos esses dados para criar um modelo preditivo que será capaz de prever o desempenho do aluno no ENEM e identificar os alunos que precisam de mais suporte para melhorar seu desempenho. Imagina só, provas como estas estariam integradas a plataforma também, para que as pessoas recebam seus resultados direto na plataforma, juntamente com uma análise de desempenho e de pontos a melhorar, até porque a ideia é que toda a vida acadêmica da pessoa seja usada como parâmetro para ingressar numa faculdade ou receber uma oportunidade de emprego.

7. Modelo preditivo de planejamento de carreira: Por falar em oportunidade de emprego, que tal um modelo que ajude no planejamento de carreira? Podemos usar dados de desempenho acadêmico e interesses pessoais para prever as carreiras mais adequadas para os alunos. Ele pode ser usado para oferecer sugestões personalizadas de carreira para os alunos e ajudá-los a planejar sua trajetória acadêmica e profissional.

8. Modelo preditivo de personalização de ensino: Para um modelo como este poderemos utilizar dados de desempenho acadêmico, interesses e habilidades dos alunos para personalizar o conteúdo de ensino e atividades para cada aluno individualmente. Assim esta plataforma poderá criar experiências de aprendizado mais eficazes e personalizadas para os alunos, melhorando assim seu desempenho e engajamento.

9. Modelo preditivo de avaliação de professores: Não podemos esquecer dos professores. Aqui temos um modelo que usa feedback dos alunos, dados de testes gerados pela plataforma para professores e etc, para avaliar a eficácia dos professores e identificar áreas de melhoria. Ele pode ser usado para fornecer informações úteis para os professores e administradores da escola e melhorar a qualidade do ensino.

10. Modelo preditivo de análise de dados de engajamento dos pais: Já falamos aqui sobre pais que delegam a educação de seus filhos, então, com este modelo, que pode utilizar dados de engajamento dos pais, como comparecimento a reuniões escolares e comunicação com professores e até de pequenos testes gerados pela plataforma para verificar o conhecimento que os pais tem sobre os filhos, como por exemplo: qual foi a nota de joãozinho na prova de matemática da semana passada? para prever o envolvimento dos pais na educação de seus filhos. Ele pode ser usado para identificar áreas de oportunidade para aumentar o engajamento dos pais e melhorar a qualidade da educação.

11. Modelo preditivo de análise de dados de IoT para segurança dos alunos: Aqui temos algo de extrema importância, um modelo que utiliza dados de dispositivos de segurança IoT, como câmeras e detectores de movimento, para prever possíveis ameaças à segurança dos alunos e prevenir incidentes. Por exemplo, o sistema pode detectar um comportamento suspeito em um indivíduo não identificado ou reconhecer padrões de tráfego para alertar a equipe de segurança sobre possíveis pontos de vulnerabilidade.

12. Modelo preditivo de monitoramento de indicadores educacionais: Bom, neste caso teriamos um modelo preditivo construido com base em dados de diversas fontes, como avaliações de desempenho, taxas de abandono escolar e outros, para monitorar os indicadores educacionais em diferentes áreas e níveis educacionais. Com base nessas previsões o MEC e as instituições poderiam tomar decisões informadas sobre políticas e investimentos educacionais.

Bom existem milhares de modelos que podemos criar e implantar para esta plataforma usando AutoML e IntegrateML, com os modelos apresentados aqui podemos ver que esta plataforma tem a capacidade de transformar totalmente a educação de paises inteiros. Podemos também ter outros modelos relacionados à gestão e acompanhamento, para servir ferramentas para diretores, professores e orgãos responsáveis que iram auxiliá los na tomada de decisão.

Conclusão

Enfim, assim solucionamos este caso de negócio, tão grande e importante para a sociedade, pudemos ver aqui que com o uso de InterSystems IRIS aliado principalmente ao Machine Learning podemos solucionar milhares de problemas no setor educacional, dando a capacidade de se servir soluções inovadoras que podem transformar completamente a educação do Brasil.

A plataforma de educação integrada, a educação de um jeito que você nunca viu. A educação transforma e uma plataforma como esta é capaz de transformar países interios, pois tem o poder de levar a educação a um nível nunca visto antes.

Olá! Hoje, eu quero falar sobre um dos padrões arquiteturais mais importantes no Angular.

O próprio padrão não está diretamente relacionado ao Angular, mas, como o Angular é um framework baseado em componentes, esse padrão é um dos mais essenciais para desenvolver aplicativos Angular modernos.

Padrão contêiner-apresentação

Acredita-se que bons componentes devem ser pequenos, focados, independentes, testáveis e, acima de tudo, reutilizáveis.

Se o componente está fazendo chamadas de servidor, contém lógica de negócio, está estreitamente acoplado a outros componentes, sabe muito sobre o funcionamento interno de outros componentes ou serviços, então ele fica maior e mais difícil de testar, ampliar, reutilizar e modificar. Para resolver esses problemas, existe o padrão "contêiner-apresentação".

Geralmente, todos os componentes podem ser divididos em dois grupos: contêiner (inteligente) e apresentação (burro).

Os componentes contêiner podem receber dados de serviços (mas não devem chamar APIs diretamente), contêm lógica de negócio e veiculam dados para serviços ou componentes filhos. Frequentemente, os componentes contêiner são aqueles que especificamos como componentes roteados na configuração de roteamento (mas, claro, nem sempre).

Os componentes de apresentação só podem receber dados e mostrar de alguma maneira na tela. Eles podem reagir com base nas entradas do usuário, mas só mudando o estado isolado local. Todas as comunicações com o resto do app devem ser feitas ao emitir eventos personalizados. Esses componentes são altamente reutilizáveis.

Para ilustrar, vou nomear alguns exemplos de componentes contêiner e de apresentação:

Contêiner: AboutPage, UserPage, AdminPanel, OrderPage, etc.

Apresentação: Button, Calendar, Table, ModalDialog, TabView, etc.

Exemplo de um botão maluco

Vamos analisar um péssimo exemplo de uso inadequado da abordagem de componentes que encontrei em um projeto real.

@Component({
  selector: 'app-button',
  template: `<button class="className" (click)=onClick()>{{label}}</button>`
})
export class ButtonComponent {
  @Input() action = '';
  @Input() className = '';
  @Input() label = '';

  constructor(
    private router: Router,
    private orderService: OrderService,
    private scanService: ScanService,
    private userService: UserService
  ) {}

  onClick() {
    if (this.action === 'registerUser') {
      const userFormData = this.userService.form.value;
      // some validation of user data
      // ...
      this.userService.registerUser(userFormData);
    } else if (this.action === 'scanDocument') {
      this.scanService.scanDocuments();
    } else if (this.action === 'placeOrder') {
      const orderForm = this.orderService.form.values;
      // some validation and business logic related to order form
      // ...
      this.orderService.placeOrder(orderForm);
    } else if (this.action === 'gotoUserAccount') {
      this.router.navigate('user-account');
    } // else if ...
  }
}

Simplifiquei para melhorar a legibilidade, mas, na realidade, estava muito pior. Esse é um componente de botão que contém todas as ações possíveis que o usuário pode invocar ao clicar no botão — realizar chamadas de API, validar formulários, buscar informações de serviços e muito mais. Você pode imaginar a rapidez com que esse componente pode se tornar um inferno até em um aplicativo relativamente pequeno. O código desse componente de botão que encontrei (e depois refatorei) tinha mais de 2 mil linhas. Insano!

Quanto eu perguntei ao desenvolvedor que escreveu o código por qual motivo ele decidiu colocar toda essa lógica em um único componente, ele disse que era um "encapsulamento" 🙀

Vamos lembrar das qualidades que um bom componente deve ter:

Pequeno - esse botão com mais de 2 mil linhas de código não é pequeno. Além disso, ele aumentará sempre que alguém precisar de outro botão para uma ação diferente.

Focado - esse botão faz várias coisas sem qualquer relação e não pode ser chamado de focado.

Independente - esse botão é estreitamente acoplado a vários serviços e formulários, e qualquer mudança neles afetará o botão.

Testável - sem comentários.

Reutilizável - ele não é nada reutilizável. Você precisará modificar o código do componente sempre que quiser usá-lo para uma ação que ele não tiver e lidará com todas as ações desnecessárias e dependências desse botão.

Além disso, esse componente de botão oculta o botão HTML nativo, bloqueando o acesso do desenvolvedor às propriedades. Esse é um ótimo exemplo de como não escrever o código de componentes.

Vamos ver um exemplo bastante simples que usa esse componente de botão e tentar refatorá-lo com o padrão contêiner-apresentação.

@Component({
  selector: 'app-registration-form',
  template: `<form [formGroup]="userService.form">
  <input type="text" [formControl]="userService.form.get('username')" placeholder="Nickname">
  <input type="password" [formControl]="userService.form.get('password')" placeholder="Password">
  <input type="password" [formControl]="userService.form.get('passwordConfirm')" placeholder="Confirm password">
  <app-button className="button accent" label="Register" action="registerUser"></app-button>
</form>
`
})
export class RegistrationFormComponent {
  constructor(public userService: UserService) {}
}

Você pode ver que não há lógica nesse componente — o formulário está armazenado em um serviço, e o botão contém toda a invocação da lógica ao clicar nele. Portanto, agora, nosso botão tem toda a lógica não relacionada ao comportamento e é mais inteligente do que o componente pai, que está diretamente relacionado às ações processadas pelo botão.

Refatorar componente de botão com padrão contêiner-apresentação

Vamos separar as funções desses dois componentes. O botão deve ser um componente de apresentação — pequeno e reutilizável. O formulário de registro que contém o botão pode ser um componente contêiner com toda a lógica de negócio e as comunicações com a camada de serviços.

Não abordarei a parte com o botão nativo visível (provavelmente em um artigo futuro), mas focarei principalmente no aspecto arquitetural da relação entre esses dois componentes.

Componente de botão refatorado (apresentação)

@Component({
  selector: 'app-button',
  template: `<button class="className" (click)=onClick()>{{label}}</button>`
})
export class ButtonComponent {
  @Input() className = '';
  @Input() label = '';

  @Output() click: EventEmitter = new EventEmitter();

  onClick() {
     this.click.emit();
  }
}

Como você pode ver, nosso botão refatorado é bastante simples. Só possui duas entradas e uma saída. As entradas são usadas para o recebimento de dados do componente pai e a exibição deles para o usuário (modifique a aparência do botão com classes e exiba o rótulo do botão). A saída é usada para o evento personalizado que será acionado sempre que o usuário clicar no nosso botão.

Esse componente é pequeno, focado, independente, testável e reutilizável. Ele não contém lógica não relacionada ao comportamento do próprio componente. Ele não tem ideia do funcionamento interno do aplicativo e pode ser importado com segurança e usado em qualquer parte do aplicativo ou até em outros aplicativos.

Componente de formulário de registro refatorado (contêiner)

@Component({
  selector: 'app-registration-form',
  template: `<form [formGroup]="userService.form">
  <input type="text" [formControl]="userService.form.get('username')" placeholder="Nickname">
  <input type="password" [formControl]="userService.form.get('password')" placeholder="Password">
  <input type="password" [formControl]="userService.form.get('passwordConfirm')" placeholder="Confirm password">
  <app-button className="button accent" label="Register" (click)="registerUser()"></app-button>
</form>
`
})
export class RegistrationFormComponent {
  constructor(public userService: UserService) {}

  registerUser() {
    const userFormData = this.userService.form.value;
    // some validation of user data
    // ...
    this.userService.registerUser(userFormData);
  }
}

Você pode ver que nosso formulário de registro agora usa botões e reage ao evento de clique com o método de chamada registerUser. A lógica desse método está estreitamente relacionada a esse formulário, então é recomendável incluir aqui.

Esse é um exemplo bastante simples e a árvore de componentes só possui dois níveis. Esse padrão apresenta alguns perigos quando a árvore de componentes tiver mais níveis.

Exemplo mais sofisticado

Esse não é um exemplo do mundo real, mas espero que ajude a entender possíveis problemas com esse padrão.

Imagine uma árvore de componentes desta forma (de cima para baixo):

user-orders - componente de nível superior. É o componente contêiner que fala com a camada de serviços, recebe os dados sobre o usuário e as ordens, transmite adiante na árvore e renderiza a lista de ordens.

user-orders-summary - componente de nível médio. É o componente de apresentação que renderiza a barra acima da lista de ordens do usuário com o número total de ordens.

cashback - componente de nível inferior (folha). É o componente de apresentação que exibe o valor total de cashback do usuário e tem um botão para transferir para a conta bancária.

Componente de contêiner de nível superior

Vamos analisar nosso componente de contêiner user-orders de nível superior.

@Component({
  selector: 'user-orders',
  templateUrl: './user-orders.component.html'
})
export class UserOrdersComponent implements OnInit {
  user$: Observable<User>;
  orders$: Observable<Order[]>;

  constructor(
    private ordersService: OrdersService,
    private userService: UserService
  ) {}

  ngOnInit() {
      this.user$ = this.userService.user$;
      this.orders$ = this.ordersService.getUserOrders();
  }

onRequestCashbackWithdrawal() {
    this.ordersService.requestCashbackWithdrawal()
      .subscribe(() => /* notification to user that cashback withdrawal has been requested */);
    }
}

<div class="orders-container">
    <user-orders-summary
        [orders]="orders$ | async"
        [cashbackBalanace]="(user$  | async).cashBackBalance"
        (requestCashbackWithdrawal)="onRequestCashbackWithdrawal($event)"
    >
    </user-orders-summary>

    <div class="orders-list">
      <div class="order" *ngFor="let order of (orders$ | async)"></div>
    </div>
</div>

Como você pode ver, o componente user-orders define 2 observables: user$ e orders$, usando async pipe no modelo para fazer a inscrição. Além de transmitir os dados para o componente de apresentação user-orders-summary, renderiza uma lista de ordens. Também se comunica com a camada de serviço reagindo ao evento personalizado requestCashbackWithdrawal emitido de user-orders-summary.

Componente de apresentação de nível médio

@Component({
  selector: 'user-orders-summary',
  template: `
    <div class="total-orders">Total orders: {{orders?.length}}</div>
    <cashback [balance]="cashbackBalanace" (requestCashbackWithdrawal)="onRequestCashbackWithdrawal($event)"></cashback>
    `, 
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class UserOrdersSummaryComponent {
    @Input() orders: Order[];
    @Input() cashbackBalanace: string;

    @Output() requestCashbackWithdrawal = new EventEmitter();

    onRequestCashbackWithdrawal() {
        this.requestCashbackWithdrawal.emit();
    }
}

Esse componente é projetado de maneira bastante semelhante ao componente de botão refatorado. Ele renderiza os dados recebidos pelas entradas e emite o evento personalizado com base em uma ação do usuário. Ele não chama serviços nem contém lógica de negócio. Portanto, é um componente de apresentação puro que usa outro componente de apresentação de cashback.

Componente de apresentação de nível inferior

@Component({
    selector: 'cashback',
    template: `
<div class="cashback">
  <span class="balance">Your cashback balance: {{balance}}</span>
  <button class="button button-primary" (click)="onRequestCashbackWithdrawal()">Withdraw to Bank Account</button>
</div>
`,
    styleUrls: ['./cashback.component.css']
})
export class CashackComponent {
    @Input() balance: string;

    @Output() requestCashbackWithdrawal = new EventEmitter();

    onRequestCashbackWithdrawal() {
        this.requestCashbackWithdrawal.emit();
    }
}

Esse é outro componente de apresentação que só recebe dados por entrada e gera eventos com saída. Bastante simples e reutilizável, mas há alguns problemas na árvore de componentes.

Você provavelmente percebeu que o componente user-orders-summary e cashback têm entradas semelhantes (cashbackBalanace e balance) e a mesma saída (requestCashbackWithdrawal). Isso ocorre porque nosso componente contêiner está muito longe do componente de apresentação mais profundo. Quanto mais níveis de árvore com esse design, pior será o problema. Vamos analisar os problemas mais a fundo.

Problema 1 - Propriedades extrínsecas em componentes de apresentação de nível médio

O user-orders-summary recebe a entrada cashbackBalanace para transmitir à parte inferior da árvore, mas não usa ela sozinha. Se você se deparar com essa situação, esse é um dos indicadores de que você provavelmente tem um design de árvore de componentes com falhas. Componentes na vida real podem ter várias entradas e saídas e com esse design você terá várias entradas de "proxy", que deixará os componentes de nível médio ainda menos reutilizáveis (conforme você une a componentes filhos), e repetições de código.

Problema 2 - Bubbling de eventos personalizados de componentes de nível inferior a superior

Esse problema é muito parecido com o anterior, mas está relacionado às saídas do componente. Como você pode ver, o evento personalizado requestCashbackWithdrawal está repetido nos componentes cashback e user-orders-summary. Novamente, isso ocorre porque o componente contêiner está muito longe do componente de apresentação mais profundo. Isso também impede que o componente médio seja reutilizado sozinho.

Existem pelo menos duas soluções possíveis para esses problemas.

1º – torne os componentes de nível médio mais agnósticos a conteúdo usando ngTemplateOutlet e revele os componentes mais profundos diretamente aos componentes contêiner. Pularemos isso hoje, já que merece um artigo separado.

2º – reformule a árvore de componentes.

Refatorando a árvore de componentes

Vamos refatorar nosso código para ver como podemos resolver os problemas com as propriedades extrínsecas e o bubbling de eventos no componente de nível médio.

Componente de nível superior refatorado

@Component({
  selector: 'user-orders',
  templateUrl: './user-orders.component.html'
})
export class UserOrdersComponent implements OnInit {
  orders$: Observable<Order[]>;

  constructor(
    private ordersService: OrdersService,
  ) {}

  ngOnInit() {
      this.orders$ = this.ordersService.getUserOrders();
  }
}

<div class="orders-container">
    <user-orders-summary [orders]="orders$ | async"></user-orders-summary>

    <div class="orders-list">
      <div class="order" *ngFor="let order of (orders$ | async)"></div>
    </div>
</div>

Removemos o observable user$ e o método onRequestCashbackWithdrawal() do componente contêiner de nível superior. Está muito mais simples agora e só transmite os dados necessários para renderizar o próprio componente user-orders-summary, mas não o componente filho cashback.

Componente de nível médio refatorado

@Component({
  selector: 'user-orders-summary',
  template: `
    <div class="total-orders">Total orders: {{orders?.length}}</div>
    <cashback></cashback>
    `, 
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class UserOrdersSummaryComponent {
    @Input() orders: Order[];
}

Também está bastante simplificado. Agora, só tem uma entrada e renderiza o número total de ordens.

Componente de nível inferior refatorado

@Component({
    selector: 'cashback',
    template: `
<div class="cashback">
  <span class="balance">Your cashback balance: {{ (user$ | async).cashbackBalance }}</span>
  <button class="button button-primary" (click)="onRequestCashbackWithdrawal()">Withdraw to Bank Account</button>
</div>
`,
    styleUrls: ['./cashback.component.css']
})
export class CashackComponent implements OnInit {
  user$: Observable<User>;

  constructor(
     private ordersService: OrdersService,
     private userService: UserService
  ) {}

  ngOnInit() {
    this.user$ = this.userService.user$;
  }

  onRequestCashbackWithdrawal() {
    this.ordersService.requestCashbackWithdrawal()
      .subscribe(() => /* notification to user that cashback withdrawal has been requested */);
    }
  }
}

Uau. Como você pode ver, não é mais de apresentação. Agora, é bastante semelhante ao componente de nível superior, então o componente contêiner está na parte inferior da árvore. Essa refatoração permitiu simplificar o design inteiro da árvore de componentes e as APIs e a lógica dos nossos dois componentes no topo da árvore.

E quanto à reusabilidade do novo componente cashback? Ainda é reutilizável, já que contém apenas a lógica relacionada ao próprio componente, então permanece independente.

O novo design da nossa árvore de componentes parece ser mais fácil de manter, mais otimizada e atomizada. Não há mais bubbling de eventos e entradas repetidas na árvore de componentes, e o design geral está muito mais simples. Conseguimos isso ao colocar o componente contêiner adicional na parte inferior da árvore de componentes. Esse método pode ser usado para simplificar o design da sua árvore de componentes, mas você precisa ter uma boa compreensão de quais componentes na árvore podem ser contêineres sem grande perda na reusabilidade e quais devem ser apenas componentes de apresentação. Essa é sempre uma questão de equilíbrio e escolhas design ao criar a arquitetura do app.

É muito fácil entender errado o padrão contêiner-apresentação e pensar que componentes contêiner só podem ser de nível superior (intuitivamente, eles contêm todos os outros componentes na árvore de componentes local). No entanto, esse não é o caso. Os componentes contêiner podem estar em qualquer nível da árvore de componentes e, como você viu, até no nível da folha. Gosto de chamá-los de componentes inteligentes, porque, para mim, é muito claro que eles terão lógica de negócio e poderão estar em qualquer lugar da árvore de componentes.

Palavras finais

Espero que agora você tenha uma visão melhor do padrão contêiner-apresentação e dos possíveis problemas da implementação.

Tentei manter o mais simples possível, mas há muitas informações disponíveis relacionadas a esse padrão.

Em caso de dúvidas ou observações, não hesite em entrar em contato nos comentários.

O próximo artigo será sobre changeDetectionStrategy no Angular (que tem grande relação com esta postagem).

Até mais!

Olá! Meu nome é Sergei Sarkisian e crio o front-end do Angular há mais de 7 anos trabalhando na InterSystems. Como o Angular é um framework bastante popular, ele é geralmente escolhido pelos nossos desenvolvedores, clientes e parceiros como parte da pilha para seus aplicativos.

Quero começar uma série de artigos sobre diferentes aspectos do Angular: conceitos, instruções, práticas recomendadas, tópicos avançados e muito mais. Essa série será destinada às pessoas que já estão familiarizadas com o Angular e não abordará conceitos básicos. Como ainda estou no processo de planejamento dos artigos, queria começar destacando alguns recursos importantes da versão mais recente do Angular.

Formulários com tipos estritos

Provavelmente, esse é um dos recursos mais desejados do Angular nos últimos anos. Com o Angular 14, os desenvolvedores agora podem usar toda a funcionalidade de verificação de tipos estritos do TypeScript com os formulários reativos do Angular.

A classe FormControl é agora genérica e assume o tipo do valor que detém.

/* Antes do Angular 14 */
const untypedControl = new FormControl(true);
untypedControl.setValue(100); // o valor está definido, sem erros

// Agora
const strictlyTypedControl = new FormControl<boolean>(true);
strictlyTypedControl.setValue(100); // você receberá a mensagem de erro de verificação de tipo aqui

// Também no Angular 14
const strictlyTypedControl = new FormControl(true);
strictlyTypedControl.setValue(100); // você receberá a mensagem de erro de verificação de tipo aqui

Como você pode ver, o primeiro e o último exemplos são quase iguais, mas têm resultados diferentes. Isso ocorre porque, no Angular 14, a nova classe FormControl deduz tipos do valor inicial informado pelo desenvolvedor. Portanto, se o valor true foi fornecido, o Angular define o tipo boolean | null para FormControl. O valor anulável é necessário para o método .reset(), que anula os valores se nenhum for fornecido.

Uma classe FormControl antiga e sem tipo foi convertida para UntypedFormControl (isso também se aplica para UntypedFormGroup, UntypedFormArray e UntypedFormBuilder), que é basicamente um codinome para FormControl<any>. Se você estiver fazendo upgrade de uma versão anterior do Angular, todas as menções à classe FormControl serão substituídas pela classe UntypedFormControl pela CLI do Angular.

As classes sem tipo* são usadas com metas específicas:

1. Fazer seu app funcionar da mesma maneira como era antes da transição da versão anterior (lembre-se de que o novo FormControl deduzirá o tipo a partir do valor inicial).
2. Verificar se todos os usos de FormControl<any> são desejados. Portanto, você precisará mudar qualquer UntypedFormControl para FormControl<any> por conta própria.
3. Dar aos desenvolvedores mais flexibilidade (abordaremos isso abaixo).

Lembra-se de que, se o valor inicial for null, você precisará especificar explicitamente o tipo FormControl. Além disso, o TypeScript tem um bug que exige que você faça o mesmo se o valor inicial for false.

Para o grupo do formulário, você também pode definir a interface e transmitir essa interface como um tipo para FormGroup. Nesse caso, TypeScript deduzirá todos os tipos dentro de FormGroup.

interface LoginForm {
    email: FormControl<string>;
    password?: FormControl<string>;
}

const login = new FormGroup<LoginForm>({
    email: new FormControl('', {nonNullable: true}),
    password: new FormControl('', {nonNullable: true}),
});

O método .group() do FormBuilder agora tem um atributo genérico que pode aceitar sua interface predefinida, como no exemplo acima, em que criamos manualmente o FormGroup:

interface LoginForm {
    email: FormControl<string>;
    password?: FormControl<string>;
}

const fb = new FormBuilder();
const login = fb.group<LoginForm>({
    email: '',
    password: '',
});

Como nossa interface só tem tipos primitivos não anuláveis, ela pode ser simplificada com a nova propriedade nonNullable do FormBuilder (que contém a instância da classe NonNullableFormBuilder, também criada diretamente):

const fb = new FormBuilder();
const login = fb.nonNullable.group({
    email: '',
    password: '',
});

❗ Se você usar o FormBuilder nonNullable ou definir a opção nonNullable no FormControl, quando chamar o método .reset(), ele usará o valor inicial do FormControl como um valor de redefinição.

Além disso, também é muito importante observar que todas as propriedades em this.form.value serão marcadas como opcionais. Desta forma:

const fb = new FormBuilder();
const login = fb.nonNullable.group({
    email: '',
    password: '',
});

// login.value
// {
//   email?: string;
//   password?: string;
// }

Isso ocorre porque, quando você desativa qualquer FormControl dentro do FormGroup, o valor desse FormControl será excluído do form.value

const fb = new FormBuilder();
const login = fb.nonNullable.group({
    email: '',
    password: '',
});

login.get('email').disable();
console.log(login.value);

// {
//   password: ''
// }

Para obter todo o objeto do formulário, você precisa usar o método .getRawValue():

const fb = new FormBuilder();
const login = fb.nonNullable.group({
    email: '',
    password: '',
});

login.get('email').disable();
console.log(login.getRawValue());

// {
//   email: '',
//   password: ''
// }

Vantagens de formulários com tipos estritos:

1. Qualquer propriedade e método que retorna valores do FormControl / FormGroup é agora estritamente tipado. Por exemplo: value, getRawValue(), valueChanges.
2. Qualquer método de mudança do valor do FormControl é agora seguro para os tipos: setValue(), patchValue(), updateValue()
3. Os FormControls têm agora tipos estritos. Isso também se aplica ao método .get() do FormGroup. Isso evitará que você acesse FormControls inexistentes no momento da compilação.

Nova classe FormRecord

A desvantagem da nova classe FormGroup é que ela perdeu sua natureza dinâmica. Após a definição, você não poderá adicionar ou remover FormControls dela rapidamente.

Para resolver esse problema, o Angular apresenta uma nova classe — FormRecord. FormRecord é praticamente igual ao FormGroup, mas é dinâmico e todos os seus FormControls devem ter o mesmo tipo.

folders: new FormRecord({
  home: new FormControl(true, { nonNullable: true }),
  music: new FormControl(false, { nonNullable: true })
});

// Adicione o novo FormContol ao grupo 
this.foldersForm.get('folders').addControl('videos', new FormControl(false, { nonNullable: true }));

// Isso gerará um erro de compilação, já que o controle tem um tipo diferente
this.foldersForm.get('folders').addControl('books', new FormControl('Some string', { nonNullable: true }));

Como você pode ver, há uma outra limitação — todos os FormControls precisam ter o mesmo tipo. Se você realmente precisar de um FormGroup dinâmico e heterogêneo, deverá usar a classeUntypedFormGroup para definir seu formulário.

Componentes sem módulos (individuais)

Apesar de ainda ser considerado experimental, esse é um recurso interessante. Ele permite definir componentes, diretivas e pipes sem incluí-los em qualquer módulo.

O conceito ainda não está totalmente pronto, mas já conseguimos desenvolver um aplicativo sem ngModules.

Para definir um componente individual, você precisa usar a nova propriedade standalone no decorator Component/Pipe/Directive:

@Component({
  selector: 'app-table',
  standalone: true,
  templateUrl: './table.component.html'
})
export class TableComponent {
}

Nesse caso, o componente não pode ser declarado em qualquer NgModule. No entanto, ele pode ser importado em NgModules e outros componentes individuais.

Cada componente/pipe/diretiva individual agora tem um mecanismo para importar as dependências diretamente no decorator:

@Component({
  standalone: true,
  selector: 'photo-gallery',
  // um módulo existente é importado diretamente em um componente individual
  // CommonModule é importado diretamente para usar diretivas padrão do Angular como *ngIf
  // o componente individual declarado acima também é importado diretamente
  imports: [CommonModule, MatButtonModule, TableComponent],
  template: `
    ...
    <button mat-button>Next Page</button>
    <app-table *ngIf="expression"></app-table>
  `,
})
export class PhotoGalleryComponent {
}

Como mencionei acima, você pode importar componentes individuais em qualquer ngModule existente. Não é mais necessário importar todo o sharedModule. Podemos importar somente o que é realmente necessário. Essa também é uma boa estratégia para começar a usar novos componentes individuais:

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, HttpClientModule, TableComponent], // import our standalone TableComponent
  bootstrap: [AppComponent]
})
export class AppModule {}

Você pode criar um componente individual com a CLI do Angular ao digitar:

ng g component --standalone user

Aplicativo Bootstrap sem módulos

Se você quiser se livrar de todos os ngModules do seu aplicativo, você precisa usar o bootstrap de maneira diferente. O Angular tem uma nova função para isso que você precisa chamar no arquivo main.ts:

bootstrapApplication(AppComponent);

O segundo parâmetro dessa função permitirá definir os fornecedores necessários em todo o app. Como a maioria dos fornecedores geralmente existe em módulos, o Angular (por enquanto) exige o uso de uma nova função de extração importProvidersFrom para eles:

bootstrapApplication(AppComponent, { providers: [importProvidersFrom(HttpClientModule)] });

Rota de componente individual de lazy load:

O Angular tem uma nova função loadComponent de rota de lazy loading, que serve exatamente para o carregamento de componentes individuais:

{ 
  path: 'home',
  loadComponent: () => import('./home/home.component').then(m => m.HomeComponent)
}

Agora, loadChildren não só permite o lazy load de ngModule, mas também carrega rotas filhas diretamente do arquivo de rotas:

{ 
  path: 'home',
  loadChildren: () => import('./home/home.routes').then(c => c.HomeRoutes)
}

Algumas observações no momento da redação do artigo

• O recurso de componentes individuais ainda está em fase experimental. Ela receberá melhorias no futuro com a migração para Vite builder em vez de Webpack, ferramentas otimizadas, tempos de desenvolvimento mais rápidos, arquitetura de app mais robusta, testes mais fáceis e muito mais. Por enquanto, várias dessas coisas estão faltando, então não recebemos o pacote completo, mas pelo menos podemos começar a desenvolver nossos apps com o novo paradigma do Angular em mente.
• Os IDEs e ferramentas do Angular ainda não estão totalmente prontos para analisar estatisticamente novas entidades individuais. Já que é necessário importar todas as dependências em cada entidade individual, se você deixar algo passar, o compilador pode também não perceber e falhar no tempo de execução. Isso melhorará com o tempo, mas agora as importações exigem maior atenção dos desenvolvedores.
• Não há importações globais no Angular no momento (como em Vue, por exemplo), então você precisa importar cada uma das dependências em todas as entidades individuais. Espero que isso seja solucionado em uma versão futura, já que o principal objetivo desse recurso a meu ver seja reduzir o boilerplate e facilitar as coisas.

Isso é tudo por hoje. Até mais!

Antes de começarmos com alguns tópicos intermediários e avançados, gostaria de resumir alguns pontos mais gerais. Eles são subjetivos, é claro, então ficarei feliz em discuti-los se você tiver outra opinião ou argumentos melhores para qualquer um deles.

A lista não é abrangente e isso é intencional, pois abordarei alguns tópicos em artigos futuros.

Dica 1. Siga o guia de estilo oficial

Angular é bastante rigoroso em termos de limitação da arquitetura possível de um aplicativo, mas ainda há muitos lugares nele que permitem que você faça as coisas do seu jeito. A imaginação dos desenvolvedores é ilimitada, mas às vezes dificulta o trabalho de quem trabalha no projeto com você ou depois de você.

A equipe Angular faz um bom trabalho mantendo a própria arquitetura Angular e suas bibliotecas, então eles definitivamente sabem como criar uma base de código estável e suportável.

Eu recomendo seguir seu guia de estilo oficial e se desviar dele apenas se as coisas não funcionarem dessa maneira. Isso tornará as coisas mais fáceis quando você chegar a um novo projeto ou se alguém entrar em seu projeto.

Lembre-se, código e arquitetura de aplicativo com suporte, estável e fácil de entender são mais importantes do que soluções inteligentes, mas enigmáticas, do que ninguém será capaz de acompanhar (possivelmente até você no futuro).

Guia oficial de estilo Angular: https://angular.io/guide/styleguide

Dica 2. Considere comprar o livro Angular Ninja

Você pode pensar que isso é um anúncio, mas é o seguinte: esse é um livro muito bom com todos os principais conceitos de Angular cobertos e o preço fica a seu critério. Você também pode escolher quanto dinheiro irá para escritores e quanto irá para caridade.

Um dos autores deste livro é membro do time Angular, então esta é definitivamente a fonte de informação mais confiável sobre o Angular após a documentação oficial. Você pode ver os capítulos do livro na página do livro e ler capítulos de amostra para decidir se vale a pena seu investimento.

Além disso, o livro é atualizado com o lançamento de uma nova versão do Angular e você obtém todas as atualizações do livro gratuitamente.

O próprio blog do Ninja Squad é uma fonte muito boa de informações sobre Angular, com artigos e notícias sobre novas versões, melhores práticas, recursos experimentais e muito mais.

Livro Angular Ninja: https://books.ninja-squad.com/angular

Dica 3. Leia a documentação oficial

Antes de mergulhar na escrita de algum código do seu aplicativo, é uma boa ideia ler a documentação e os guias oficiais, especialmente se você iniciar seu projeto em uma versão do Angular que não usou antes. As coisas continuam sendo obsoletas o tempo todo, tutoriais e guias na Internet podem estar desatualizados e você pode acabar aumentando sua dívida técnica em vez de usar novas práticas e funcionalidades recomendadas.

Também é um bom hábito verificar para qual versão o guia foi escrito. Se for a versão 2+ atrás da que você está usando, é melhor verificar se as coisas mudaram desde então.

Documentação oficial: https://angular.io

Dica 4. Considere usar o Angular CDK mesmo que você não use o Angular Material

Falarei melhor em artigos futuros, mas sei que muitos desenvolvedores Angular nem conhecem o Angular CDK.

Angular CDK é uma biblioteca de diretivas úteis e classes base que podem ajudá-lo a desenvolver melhores aplicativos. Por exemplo, tem coisas como FocusTrap, Drag & Drop, VirtualScroll e muito mais, que podem ser facilmente adicionados aos seus componentes

CDK angular: https://material.angular.io/cdk/categories

Dica 5. Corrija suas dependências no package.json

Não está particularmente relacionado ao Angular e pode ser importante em qualquer projeto. Quando você faz npm install --save <something> , ele será adicionado ao seu package.json com ^ ou ~ no início da versão do pacote. Isso significa que seu projeto poderá usar qualquer versão secundária/patch da mesma versão principal da dependência. Isso vai dar errado no futuro com quase 100% de probabilidade. Eu enfrentei esse problema em diferentes projetos tantas vezes. Tempo passando e nova versão menor de alguma dependência saindo e seu aplicativo não será mais compilado. Porque um autor desta dependência atualizou suas dependências em versão menor (ou mesmo patch) e agora elas estão em conflito com sua compilação. Ou pode haver um novo bug apresentado em uma nova versão menor de sua dependência e você não tem problemas em seu código (porque você instalou suas dependências antes da nova versão aparecer), mas qualquer outra pessoa tentando instalar e compilar seu projeto a partir do repositório irá enfrente o bug que você nem conhece (e não poderá reproduzi-lo em sua máquina).

O package-lock.json existe para resolver esse problema e ajudar os desenvolvedores a ter o mesmo conjunto de dependências em todo o projeto. Idealmente, ele deve ser comprometido com o repositório, mas muitos desenvolvedores estão decidindo adicionar esse arquivo ao .gitignore. E se acabou, você pode acabar com os problemas acima. Portanto, é melhor não confiar cegamente na resolução de suas dependências e corrigi-la na versão específica, escaneá-la regularmente em busca de vulnerabilidades (com npm audit) e depois atualizá-la e testá-la manualmente.

Dica 6. Tente atualizar seu aplicativo para a nova versão do Angular assim que puder

Angular está evoluindo continuamente e novas versões são lançadas a cada 6 meses ou mais. Manter seu aplicativo atualizado permitirá que você use todos os novos recursos, incluindo compilações mais rápidas e outras otimizações. Além disso, atualizar para a próxima versão principal do Angular não deve ser um grande problema neste caso. Mas se você está 5 versões atrás e seu aplicativo é de tamanho médio ou grande, o processo de atualização para a última versão pode ser difícil, pois o Angular não possui esquemas para atualizar aplicativos pulando versões intermediárias do Angular. Você precisará atualizar todas as versões intermediárias uma a uma, verificando se o aplicativo funciona em cada versão. A atualização direta sem os esquemas da CLI do Angular é possível, mas também pode ser complicada, então sugiro manter seu aplicativo atualizado e atualizado.

Dica 7. Tente reduzir sua lista de dependências

É fácil cair no hábito de trazer novas dependências em seu aplicativo, pois você precisa de novas funcionalidades. Mas com cada dependência, a complexidade do seu aplicativo está crescendo e o risco de uma avalanche de dívida técnica repentina está aumentando.

Se você decidiu adicionar uma nova dependência em seu aplicativo, pense nisso:

• Quão bem suportada é a dependência?
• Quantas pessoas estão usando?
• Qual o tamanho da equipe de desenvolvimento?
• Com que rapidez eles estão fechando os problemas do GitHub?
• Como a documentação da dependência está escrita?
• Com que rapidez ele é atualizado após o lançamento do novo major de Angular?
• Qual o impacto dessa dependência no desempenho e no tamanho do pacote do seu aplicativo?
• Quão difícil será substituir essa dependência se ela for abandonada ou preterida no futuro?

Se algumas dessas perguntas tiverem resposta de tom negativo, considere se livrar dela ou pelo menos substituí-la por algo mais maduro e bem fundamentado.

Dica 8. Não use <any> como seu tipo “temporário”

Novamente, é fácil começar a usar qualquer um enquanto você escreve sua lógica de negócios, porque escrever tipos apropriados pode ser demorado e você precisa terminar sua tarefa neste sprint. Os tipos podem ser adicionados mais tarde, é claro. Mas é escorregadio aumentar a dívida técnica.

Uma arquitetura de seu aplicativo e tipos devem ser definidos antes de escrever qualquer lógica de negócios. Você deve entender claramente quais objetos você terá e onde eles serão usados. Especificação antes do código, certo? (Tom Demarco escreveu um livro sobre isso antes de se tornar popular: [https://www.amazon.com/Deadline-Novel-About-Project-Management/dp/0932633390](https://www.amazon.com/Deadline -Novel-About-Project-Management/dp/0932633390)).

Se você estiver escrevendo o código sem tipos predefinidos, poderá acabar com a pior arquitetura de aplicativo e funções que usam objetos muito semelhantes, mas diferentes. Portanto, você precisará criar tipos diferentes para cada função (o que fará as coisas ainda piores) ou gastar seu tempo escrevendo especificações, tipos de refatoração E , o que é uma perda de tempo comparado a se tivesse sido feito antes.

Dica 9. Gaste seu tempo para entender o processo de construção

Angular faz um ótimo trabalho para facilitar o trabalho do desenvolvedor em relação à construção do projeto. Mas as opções padrão nem sempre são as melhores para todos os casos.

Gaste seu tempo para entender como o processo de compilação funciona no Angular, quais as diferenças entre as compilações de Desenvolvimento e Produção, quais opções o Angular tem para compilações (como otimizações, mapas de origem, agrupamento e muito mais).

Dica 10. Investigue o que está dentro do seu pacote

Nem todas as bibliotecas fornecem trepidação de árvores e nem sempre importamos da maneira certa, então sempre há uma chance de que algo redundante seja empacotado com nosso aplicativo.

Portanto, é um bom hábito investigar o conteúdo do seu pacote de tempos em tempos.

Existem bons artigos descrevendo o processo usando webpack-bundle-analyzer , então não vou abordar aqui, mas aqui está um link para um deles: https://www.digitalocean.com/community/tutorials/angular-angular-webpack-bundle-analyzer

Abordarei este tópico mais detalhadamente mais adiante na série.

Dica 11. Use a propriedade services providedIn ao invés de importar o serviço no módulo

Muitos exemplos de código Angular na Internet usam a importação dos serviços nos módulos. Mas não é a maneira preferida de declarar serviços desde o Angular 6 ou 7. Devemos usar a propriedade do decorador @InjectableprovidedIn para habilitar o tree-shake e melhor agrupamento de nossos aplicativos. Angular é inteligente o suficiente para entender em qual pacote o serviço deve ser incluído, quando deve ser inicializado e quantas instâncias do serviço devem ser criadas.

Existem três valores que providedIn aceita. Na maioria das vezes root é suficiente, mas existem mais dois:

• root: o serviço será singleton no escopo de aplicação
• any: uma instância do serviço será criada para todos os módulos carregados ansiosamente, com uma instância diferente criada para cada módulo lento
• plataforma: o serviço será singleton para todas as aplicações rodando na mesma página

Dica 12. Não esqueça das principais regras de desempenho

• Use trackBy para coleções para reduzir operações de redesenho e execução de JavaScript
• Use a estratégia de detecção de alterações onPush em todos os lugares que puder (abordarei no artigo dedicado)
• Realize cálculos pesados fora do ngZone
• Use padrões de aceleração e debounce com seus eventos para evitar chamadas de servidor desnecessárias e inundação de eventos
• Use a rolagem virtual para exibir conjuntos de big data
• Use tubos puros para transformação de dados em seus modelos
• Use a compilação AoT
• Carregar lentamente as partes do seu aplicativo que não são necessárias para o início do aplicativo
• Evite cálculos e chamadas de função condicionais em seus templates (chamadas de função devem ser usadas apenas para eventos)

Obrigado por ler! Espero que algumas dessas dicas tenham sido úteis para você. Se você tiver quaisquer comentários e observações, por favor, deixe-me saber nos comentários, ficarei feliz em discutir 😃

Até mais!

Oi pessoal!

Só queria compartilhar aqui um post rápido sobre meu projeto para o Grand Prix :)

O FHIR Patient Viewer é uma ferramenta de renderização reativa de página única construída no Vue.js que exibe de maneira amigável os dados retornados de uma chamada /Patient/{id}/$everything feita para um servidor FHIR da InterSystems. No readme, incluí 3 coisas principais: 1. Uma demonstração em vídeo conectando o FHIR Patient Viewer a um servidor sandbox IRIS FHIR (a maneira mais rápida de testá-lo); 2. Um segundo vídeo mostrando como eu usaria o FHIR Patient Viewer em um ambiente de produção (usando um backend personalizado para lidar com as chamadas da API, escrito em PHP/Laravel no meu exemplo, mas transferível para outras linguagens/frameworks); e 3. instruções para modificar os componentes, criar sua própria versão da ferramenta e construir seus próprios arquivos dist.

Obrigado a todos! Qualidade incrível nos projetos do concurso!

Dan

Olá e sejam bem vindos ao 21º concurso de programação InterSystems! 

🏆 Concurso Full Stack InterSystems 2022 🏆

Duração: de 27 de Junho a 17 de Julho de 2022

Em prêmios: US$10.000

Olá pessoal!

O @José Pereira e @Henrique Dias propuseram uma nova forma de visualizar mensagens no IRIS Interoperability em uma atualização recente do MessageViewer. Nessa atualização, tentaram dar aos usuários uma visualização baseada em um diagrama de sequência UML. Você pode obter mais informações no artigo anterior.

A fim de obter todos os cálculos de geometria complicados para desenhar esse diagrama, usaram a incrível biblioteca de código aberto mermaid JS. E o que eles gostariam de compartilhar com você neste artigo, é como usar esta biblioteca. Vamos nos concentrar apenas no diagrama de sequência, mas esteja ciente de que essa biblioteca permite que você faça muito mais.

O Mermaid usa uma sintaxe inspirada no Markdown para definir diagramas. É super intuitivo, então acho que é melhor mostrar um exemplo em vez de escrever muito texto chato:

sequenceDiagram
Alice->>John: Hello John, how are you?loopHealthcheck    John->>John: Fight against hypochondriaendNoterightofJohn: Rational thoughts!John-->>Alice: Great!John->>Bob: How about you?

Eu escrevi um tutorial passo a passo no repositório qewd-howtos  sobre como você pode escrever aplicativos da web Node.js de última geração de várias páginas usando o  QEWD-Up WebSocket/REST api back-end integrado com um framework da web como NuxtJS e Vue.js. Em particular com o mais recente framework NuxtJS/Vue.js , escrever aplicativos da web torna-se divertido novamente, permitindo que você escreva seus aplicativos de forma muito eficiente, ocultando todo o código template de você.

O tutorial deve ser muito fácil de fazer em sua máquina de desenvolvimento e consiste em duas partes:

• Instruções para criar uma configuração básica QEWD-Up setup Node.js com WebSocket e REST endpoints usando um banco de dados InterSystems IRIS/Caché.
• Instruções para criar um app demo front-end  NuxtJS 3 (para a última versão beta do Nuxt 3) ou - alternativamente - instruções para um app demo front-end  NuxtJS 2  (a versão de produção atual do Nuxt 2.x)

Você pode simplesmente clonar as configurações de demonstração do GitHub e executá-las em sua máquina de desenvolvimento usando Visual Studio Code onde sua instância de desenvolvimento IRIS / Caché está rodando. A demonstração é mantida o mais fácil possível, mas contém todas as etapas principais de que você precisa para começar a escrever aplicativos da vida real..

Esta postagem tem como objetivo guiá-lo através dos novos recursos JSON que introduzimos no Caché 2016.1.JSON surgiu para um formato de serialização usado em muitos lugares.A web começou, mas hoje é utilizada em todos os lugares.Temos muito o que abordar, então vamos começar. 

Introdução

A maior parte da comunicação servidor-cliente na web é baseada em uma estrutura de solicitação e resposta. O cliente envia uma solicitação ao servidor e o servidor responde a esta solicitação. O protocolo WebSocket fornece um canal bidirecional de comunicação entre um servidor e um cliente, permitindo que os servidores enviem mensagens aos clientes sem primeiro receber uma solicitação. Para obter mais informações sobre o protocolo WebSocket e sua implementação no InterSystems IRIS, consulte os links abaixo.

• Protocolo WebSocket

• WebSockets na documentação do InterSystems IRIS

Este tutorial é uma atualização de "Asynchronous Websockets - um tutorial rápido" para Caché 2016.2+ e InterSystems IRIS 2018.1+.

Operação assíncrona vs síncrona

No InterSystems IRIS, uma conexão WebSocket pode ser implementada de forma síncrona ou assíncrona. O modo como a conexão WebSocket entre o cliente e o servidor opera é determinado pela propriedade “SharedConnection” da classe %CSP.WebSocket.

• SharedConnection=1 : operação assíncrona

• SharedConnection=0: operação síncrona

Uma conexão WebSocket entre um cliente e um servidor hospedado em uma instância do InterSystems IRIS inclui uma conexão entre a instância IRIS e o Web Gateway. Na operação síncrona de WebSocket, a conexão usa um canal privado. Na operação assíncrona de WebSocket, um grupo de clientes WebSocket compartilha um conjunto de conexões entre a instância IRIS e o Web Gateway. A vantagem de uma implementação assíncrona de WebSockets se destaca quando se tem muitos clientes se conectando ao mesmo servidor, pois esta implementação não exige que cada cliente seja tratado por uma conexão exclusiva entre o Web Gateway e a instância IRIS.

Neste tutorial, implementaremos WebSockets de forma assíncrona. Portanto, todas as janelas de bate-papo abertas compartilham um conjunto de conexões entre o Web Gateway e a instância IRIS que hospeda a classe do servidor WebSocket.

Visão geral da aplicação de chat

O “hello world” do WebSockets é uma aplicação de chat em que um usuário pode enviar mensagens que são transmitidas a todos os usuários logados na aplicação. Neste tutorial, os componentes da aplicação de chat incluem:

• Servidor: implementado em uma classe que estende %CSP.WebSocket

• Cliente: implementado por uma página CSP

A implementação desta aplicação de chat irá realizar o seguinte:

• Os usuários podem transmitir mensagens para todas as janelas do chat abertas

• Os usuários on-line aparecerão na lista “Usuários on-line” de todas as janelas de chat abertas

• Os usuários podem alterar seu nome de usuário compondo uma mensagem começando com a palavra-chave “alias” e esta mensagem não será transmitida, mas atualizará a lista de “Usuários On-line”

• Quando os usuários fecham a janela de chat, eles são removidos da lista de “Usuários on-line”

Para ver o código fonte da aplicação de chat, visite este repositório no GitHub.

O Cliente

O lado do cliente da nossa aplicação de chat é implementado por uma página CSP contendo o estilo para a janela do chat, a declaração da conexão WebSocket, eventos do WebSocket e métodos que tratam da comunicação de e para o servidor, e funções auxiliares que empacotam mensagens enviadas para o servidor e processam as mensagens de entrada.

Primeiro, veremos como a aplicação inicia a conexão WebSocket usando uma biblioteca Javascript WebSocket.

    ws = new WebSocket(((window.location.protocol === "https:")? "wss:":"ws:")
                    + "//"+ window.location.host + "/csp/user/Chat.Server.cls");

new cria uma nova instância da classe WebSocket. Isso abre uma conexão WebSocket com o servidor usando o protocolo "wss" (indica o uso de TLS para o canal de comunicação WebSocket) ou "ws". O servidor é especificado pelo número da porta do servidor web e nome do host da instância que define a classe Chat.Server (essas informações estão contidas na variável window.location.host). O nome de nossa classe no servidor (Chat.Server.cls) está incluído no URI de abertura do WebSocket como uma solicitação GET para o recurso no servidor.

O evento ws.onopen é disparado quando a conexão WebSocket é estabelecida com êxito, fazendo a transição de um estado de conectando para um estado aberto.

    ws.onopen = function(event){
        document.getElementById("headline").innerHTML = "CHAT - CONNECTED";
    };

Este evento atualiza o cabeçalho da janela do chat para indicar que o cliente e o servidor estão conectados.

Enviando mensagens

A ação de um usuário enviando uma mensagem aciona a função de envio. Essa função atua como um invólucro em torno do método ws.send, que contém a mecânica de envio da mensagem do cliente ao servidor pela conexão WebSocket.

function send() {
    var line=$("#inputline").val();
    if (line.substr(0,5)=="alias"){
        alias=line.split(" ")[1];
        if (alias==""){
            alias="default";
        }
        var data = {}
        data.User = alias
        ws.send(JSON.stringify(data));
        } else {
        var msg=btoa(line);
        var data={};
        data.Message=msg;
        data.Author=alias;
        if (ws && msg!="") {
            ws.send(JSON.stringify(data));
        }
    }
    $("#inputline").val("");
}

send envia pacotes as informações a serem enviadas ao servidor em um objeto JSON, definindo pares de chave/valor de acordo com o tipo de informação que está sendo enviada (atualização de alias ou mensagem geral). btoa traduz o conteúdo de uma mensagem geral em uma string ASCII codificada em base 64.

Recebendo mensagens

Quando o cliente recebe uma mensagem do servidor, o evento ws.onmessage é acionado.

ws.onmessage = function(event) {
    var d=JSON.parse(event.data);
    if (d.Type=="Chat") {
        $("#chat").append(wrapmessage(d));
            $("#chatdiv").animate({ scrollTop: $('#chatdiv').prop("scrollHeight")}, 1000);
    } else if(d.Type=="userlist") {
        var ul = document.getElementById("userlist");
        while(ul.firstChild){ul.removeChild(ul.firstChild)};
        $("#userlist").append(wrapuser(d.Users));
    } else if(d.Type=="Status"){
        document.getElementById("headline").innerHTML = "CHAT - connected - "+d.WSID;
    }
};

Dependendo do tipo de mensagem que o cliente recebe (“Chat”, “userlist” ou “status”), o evento onmessage chama wrapmessage ou wrapuser para popular as seções apropriadas da janela de chat com os dados de entrada. Se a mensagem recebida for uma atualização de status, o cabeçalho de status da janela do chat é atualizado com o ID do WebSocket, que identifica a conexão WebSocket bidirecional associada à janela do chat.

Componentes adicionais do cliente

Um erro na comunicação entre o cliente e o servidor aciona o método WebSocket onerror, que emite um alerta que nos notifica do erro e atualiza o cabeçalho de status da página.

ws.onerror = function(event) {
    document.GetElementById("headline").innerHTML = "CHAT - error";
    alert("Received error"); 
};

O método onclose é disparado quando a conexão WebSocket entre o cliente e o servidor é fechada, e atualiza o cabeçalho de status.

ws.onclose = function(event) {
    ws = null;
    document.getElementById("headline").innerHTML = "CHAT - disconnected";
}

O servidor

O lado do servidor da aplicação de chat é implementado pela classe Chat.Server, que estende de %CSP.WebSocket. Nossa classe de servidor herda várias propriedades e métodos de %CSP.WebSocket, alguns dos quais discutirei abaixo. Chat.Server também implementa métodos personalizados para processar mensagens de entrada e transmitir mensagens para o(s) cliente(s).

Antes de iniciar o servidor

OnPreServer() é executado antes de o servidor WebSocket ser criado e é herdado da classe %CSP.WebSocket.

Method OnPreServer() As %Status
{
    set ..SharedConnection=1
    if (..WebSocketID '= ""){ 
        set ^Chat.WebSocketConnections(..WebSocketID)=""
    } else {
        set ^Chat.Errors($INCREMENT(^Chat.Errors),"no websocketid defined")=$HOROLOG 
    }
    Quit $$$OK
}

Este método define o parâmetro da classe SharedConnection em 1, indicando que nossa conexão WebSocket será assíncrona e suportada por vários processos que definem conexões entre a instância InterSystems IRIS e o Web Gateway. O parâmetro SharedConnection só pode ser alterado em OnPreServer(). O OnPreServer() também armazena o ID WebSocket associado ao cliente no ^Chat.WebSocketConnections global.

O método do servidor

O corpo principal da lógica executada pelo servidor está contido no método Server().

Method Server() As %Status
{
    do ..StatusUpdate(..WebSocketID)
    for {       
        set data=..Read(.size,.sc,1) 
        if ($$$ISERR(sc)){
            if ($$$GETERRORCODE(sc)=$$$CSPWebSocketTimeout) {
                //$$$DEBUG("no data")
            }
            if ($$$GETERRORCODE(sc)=$$$CSPWebSocketClosed){
                kill ^Chat.WebSocketConnections(..WebSocketID)
                do ..RemoveUser($g(^Chat.Users(..WebSocketID))) 
                kill ^Chat.Users(..WebSocketID)
                quit  // Client closed WebSocket
            }
        } else{
            if data["User"{
                do ..AddUser(data,..WebSocketID)
            } else {
                set mid=$INCREMENT(^Chat.Messages)
                set ^Chat.Messages(mid)=data
                do ..ProcessMessage(mid)
            }
        }
    }
    Quit $$$OK
}

Este método lê as mensagens recebidas do cliente (usando o método Read da classe %CSP.WebSockets), adiciona os objetos JSON recebidos ao ^Chat.Messages global e chama o ProcessMessage() para encaminhar a mensagem a todos os outros clientes de chat conectados. Quando um usuário fecha sua janela de chat (encerrando assim a conexão WebSocket com o servidor), a chamada do método Server() para Read retorna um código de erro que avalia a macro $$$CSPWebSocketClosed e o método prossegue para tratar o encerramento de acordo.

Processamento e distribuição de mensagens

ProcessMessage() adiciona metadados à mensagem de chat recebida e chama o SendData(), passando a mensagem como um parâmetro.

ClassMethod ProcessMessage(mid As %String)
{
    set msg = ##class(%DynamicObject).%FromJSON($GET(^Chat.Messages(mid)))
    set msg.Type="Chat"
    set msg.Sent=$ZDATETIME($HOROLOG,3)
    do ..SendData(msg)
}

ProcessMessage() recupera a mensagem formatada em JSON do ^Chat.Messages global e a converte em um objeto do InterSystems IRIS usando a classe %DynamicObject e o método '%FromJSON. Isso nos permite editar facilmente os dados antes de encaminharmos a mensagem para todos os clientes de chat conectados. Adicionamos um atributo Type com o valor “Chat”, que o cliente usa para determinar como lidar com a mensagem recebida. SendData() envia a mensagem para todos os outros clientes de chat conectados.

ClassMethod SendData(data As %DynamicObject)
{
    set c = ""
    for {
        set c = $order(^Chat.WebSocketConnections(c))
        if c="" Quit
        set ws = ..%New()
        set sc = ws.OpenServer(c)
        if $$$ISERR(sc) { do ..HandleError(c,"open") } 
        set sc = ws.Write(data.%ToJSON())
        if $$$ISERR(sc) { do ..HandleError(c,"write") }
    }
}

SendData() converte o objeto do InterSystems IRIS de volta em uma string JSON (data.%ToJSON()) e envia a mensagem para todos os clientes de chat. SendData() obtém o ID WebSocket associado a cada conexão cliente-servidor do ^Chat.WebSocketConnections global e usa o ID para abrir uma conexão WebSocket por meio do método OpenServer da classe %CSP.WebSocket. Podemos usar o método OpenServer para fazer isso porque nossas conexões WebSocket são assíncronas - extraímos do pool existente de processos do IRIS-Web Gateway e atribuímos um ID WebSocket que identifica a conexão do servidor a um cliente de chat específico. Por fim, o método Write()%CSP.WebSocket envia a representação da string JSON da mensagem para o cliente.

Conclusão

Esta aplicação de chat demonstra como estabelecer conexões WebSocket entre um cliente e um servidor hospedado pelo InterSystems IRIS. Para continuar lendo sobre o protocolo e sua implementação no InterSystems IRIS, dê uma olhada nos links na introdução.

Este artigo apresenta o InterSystems iKnow Entity Browser, uma aplicação web que permite visualizar dados de texto extraídos e organizados obtidos de um grande número de textos, alimentado pela tecnologia InterSystems iKnow, também conhecida como InterSystems Text Analytics no InterSystems IRIS. Sinta-se à vontade para experimentar a demonstração dessa ferramenta ou aprender mais sobre ela no InterSystems Open Exchange.

Comecei o desenvolvimento deste projeto no final de 2016. De agora em diante, o meu iKnow Entity Browser é usado em todo o mundo por aqueles que usam a tecnologia InterSystems e por aqueles que fazem extração de texto. Este artigo deveria ter aparecido antes, entretanto, nunca é tarde para contar algo sobre coisas úteis!

Sobre o que é o InterSystems Text Analytics

InterSystems iKnow (ou InterSystems Text Analytics) é uma tecnologia de NLP incorporável que permite extrair dados significativos de textos. Bem, não apenas para extrair esses dados, mas também para coletá-los, vinculá-los, filtrá-los e priorizá-los. Como resultado, o InterSystems iKnow fornece uma base sólida para a construção de aplicações de dados para mineração de dados.

Do ponto de vista da programação, o iKnow fornece uma API rica que permite incorporar essa tecnologia a qualquer aplicação, independentemente de sua linguagem de programação. O iKnow Entity Browser usa esta API para visualizar os dados processados na forma de uma árvore de conceitos e relações.

Antes do lançamento do InterSystems iKnow Entity Browser, a única solução pronta para uso disponível para exploração de dados era o visualizador incorporado do iKnow, que é enviado junto com os produtos baseados no InterSystems Caché e IRIS. Este visualizador apresenta muitas ferramentas úteis principalmente para pesquisar algo no texto processado (no iKnow é chamado de domínio), enquanto o iKnow Entity Browser é criado também para visualizar e organizar conceitos em um texto.

Visualização do Portal de Conhecimento iKnow

iKnow Entity Browser

O iKnow Entity Browser é um projeto de código aberto, o que significa que qualquer pessoa pode contribuir com seu núcleo. Aqui está a lista de recursos que foram desenvolvidos:

Demonstração de gráfico do iKnow Entity Browser

Instalação

A instalação do iKnow Entity Browser é bastante direta. Baixe a versão mais recente (arquivo XML) da aplicação e importe-a para o namespace habilitado para iKnow (por exemplo, SAMPLES). Isso funciona com todos os lançamentos mais recentes dos produtos InterSystems, incluindo a plataforma de dados InterSystems IRIS. Para importar o arquivo XML, você pode arrastar e soltar o arquivo na janela do Studio (Atelier). Alternativamente, você pode importar o arquivo usando o portal de gerenciamento de sistemas, no explorador de sistemas - classes. Em seguida, abra o seu navegador na página web http://localhost:57772/EntityBrowser/ (altere o host/porta respectivamente para a configuração do seu servidor e lembre-se de colocar uma barra / no final da URL).

Para excluir a aplicação, basta excluir o pacote EntityBrowser do Studio/Atelier. A aplicação web instalada será excluída automaticamente da mesma forma que foi criada durante a instalação, se não foi modificada desde então.

Atualmente, para usar o iKnow Entity Browser em diferentes namespaces, você precisa importá-lo para cada namespace habilitado para iKnow e configurar manualmente a aplicação web (por exemplo, você pode clonar a aplicação /EntityBrowser e renomeá-la). Nesse caso, altere as configurações dentro da aplicação web para as correspondentes (leia o guia de personalização abaixo).

Se você instalou o iKnow Entity Browser no servidor e tornou a aplicação web pública, pode se conectar a esse servidor a partir de qualquer front-end, até mesmo a partir desta aplicação de demonstração, por exemplo.

Personalização

O menu de configuração da aplicação, localizado no canto superior direito da interface do usuário, permite personalizar a aparência e a fonte de dados. No menu de configurações, você pode especificar o seguinte (veja a imagem abaixo):

Configurações do iKnow Entity Browser

O Gráfico

Uma vez que o conceito de seed é especificado nas configurações, o iKnow Entity Browser constrói um gráfico de conceitos semelhantes ou relacionados ao conceito de seed. Você pode brincar com este gráfico arrastando seus nós, no entanto, a força física sempre tentará organizá-lo na forma de um diagrama de floco de neve.

O gráfico pode ser editado usando os controles na parte inferior da tela. Isso inclui os botões desfazer/refazer, aumentar/diminuir o zoom e redefinir os botões de zoom, redefinir o botão de seleção, desvincular e excluir botões de seleção. Passar o mouse sobre qualquer um desses botões exibe uma dica de ferramenta.

Menu com controles

Caso precise de uma lista de conceitos selecionados, você pode alternar uma visualização tabular pressionando o botão correspondente no canto superior direito. Tudo o que você faz no gráfico fica sincronizado com a visualização tabular e vice-versa.

Na visualização tabular, quando você passa o mouse sobre uma das linhas, o nó correspondente é destacado no gráfico. Se você clicar na linha, a visualização do gráfico se concentra automaticamente no nó correspondente. Assim como no gráfico, você pode clicar nos botões nas linhas da tabela para selecionar/desmarcar os nós.

Visualização Tabular

Depois de ter uma seleção de nós, você pode exportá-los como uma tabela no formato *.csv. Pressione o botão de visualização tabular no canto superior direito para que a tabela apareça e então você encontrará o botão "Exportar". Isso exportará todos os nós selecionados na forma de uma tabela, a mesma tabela que você tem em uma visualização tabular.

Tem Mais

iKnow Entity Browser é apenas um dos vários projetos que fiz para a corporação InterSystems. Aqui estão alguns, se você ainda não viu esses projetos: WebTerminal, Visual Editor, Class Explorer, Light Pivot Table, GlobalsDB Admin. Encontre esses e outros projetos relacionados à InterSystems no InterSystems Marketplace.

Todos os meus projetos são de código aberto, permitindo que outros contribuam. O código desses projetos está disponível no GitHub. Você também pode usar seu código como um exemplo para construir sua própria aplicação sobre os produtos da InterSystems. Se você der uma olhada mais de perto, descobrirá que a maioria deles são pacotes instaláveis, enviados em um único arquivo XML. Se você está curioso em usar a mesma estratégia para seus pacotes, confira este artigo.

Espero que você ache o iKnow Entity Browser e outros projetos úteis! Aproveite!