Real Time Updates for Displays

English:

Bem-vindo e breve introdução ao tópico de atualizações em tempo real para aplicações web, cruciais para melhorar a interatividade e a capacidade de resposta do usuário.

Français:

Bienvenue et brève introduction au sujet des mises à jour en temps réel des applications Web, cruciales pour améliorer l'interactivité et la réactivité des utilisateurs.

Outline

Visualizações de Dados em Tempo Real

Português:

Dados em tempo real desempenham um papel crucial no desenvolvimento web moderno devido à sua capacidade de fornecer informações imediatas, aprimorando a experiência do usuário e permitindo aplicações web dinâmicas e interativas. Aqui estão alguns pontos-chave:

Experiência do Usuário *🧑‍💻: Dados em tempo real podem melhorar significativamente a experiência do usuário.
Análise em Tempo Real *📊: A análise em tempo real permite que as empresas tomem decisões imediatas com base nos dados atuais.
Ferramentas Colaborativas *🤝: Dados em tempo real são essenciais para ferramentas colaborativas como o Google Docs, onde múltiplos usuários podem editar um documento simultaneamente.
Notificações *🔔: Dados em tempo real permitem notificações imediatas.
Atualizações ao Vivo *📡: Em aplicações de notícias ou financeiras, dados em tempo real fornecem atualizações ao vivo sobre eventos atuais ou preços de ações, mantendo os usuários informados o tempo todo.
Dispositivos IoT *🌐: Dispositivos da Internet das Coisas (IoT) dependem fortemente de dados em tempo real para funcionar eficazmente. Por exemplo, um termostato inteligente precisa saber a temperatura em tempo real para ajustar o aquecimento ou resfriamento em uma casa.

Français:

Les données en temps réel jouent un rôle crucial dans le développement Web moderne en raison de leur capacité à fournir des informations immédiates, à améliorer l'expérience utilisateur et à permettre des applications Web dynamiques et interactives. Voici quelques points clés :

Expérience utilisateur *🧑‍💻 : Les données en temps réel peuvent améliorer considérablement l'expérience utilisateur.
Análises em tempo real 📊: As análises em tempo real permitem que as empresas tomem decisões imediatas com base nos dados atuais.
Ferramentas colaborativas 🤝: Os dados em tempo real são essenciais para ferramentas colaborativas como o Google Docs, onde vários usuários podem editar um documento simultaneamente.
Notificações 🔔: Os dados em tempo real permitem notificações imediatas.
Atualizações ao vivo 📡: Em aplicativos de notícias ou financeiros, os dados em tempo real fornecem atualizações ao vivo sobre eventos atuais ou preços de ações, mantendo os usuários informados a todo momento.
Dispositivos IoT 🌐: os dispositivos da Internet das Coisas (IoT) dependem fortemente de dados em tempo real para funcionar de forma eficiente. Por exemplo, um termostato inteligente precisa saber a temperatura em tempo real para ajustar o aquecimento ou o ar condicionado de uma casa.

Arquitetura

Português:

Backend FastAPI: FastAPI é um framework web moderno, rápido (de alto desempenho), para construir APIs com Python 3.6+ baseado em dicas de tipo padrão do Python. Ele é projetado para tornar o início rápido e fácil, com a capacidade de escalar para aplicações complexas. Nesta configuração, o FastAPI é usado para lidar com todas as operações de backend, incluindo servir páginas web, lidar com requisições e interagir com o banco de dados.
PostgreSQL como o sistema de banco de dados *: PostgreSQL é um sistema de banco de dados objeto-relacional poderoso e de código aberto. É conhecido por sua robustez, funcionalidade e conformidade com padrões. Nesta configuração, o PostgreSQL é usado para armazenar e recuperar dados para a aplicação.
SQLAlchemy para operações de banco de dados *: SQLAlchemy é um kit de ferramentas SQL e um sistema de Mapeamento Objeto-Relacional (ORM) para Python. Ele oferece um conjunto completo de padrões de persistência de nível empresarial bem conhecidos, projetados para acesso eficiente e de alto desempenho ao banco de dados. Nesta configuração, o SQLAlchemy é usado para interagir com o banco de dados PostgreSQL de forma 'Pythonic'.
SSE para enviar atualizações para o frontend *: Server-Sent Events (SSE) é um padrão que permite a um servidor web enviar atualizações para o cliente via HTTP. Nesta configuração, o SSE é usado para enviar atualizações em tempo real do servidor (aplicativo Flask) para o cliente (navegador web).
HTMX para lidar com atualizações no frontend com JavaScript mínimo *: HTMX é uma biblioteca moderna, HTML-first e JavaScript-second, para construir aplicações web orientadas a AJAX. Ele permite que você acesse AJAX, Transições CSS, WebSockets e Server Sent Events diretamente em HTML, usando atributos, para que você possa construir interfaces de usuário modernas com a simplicidade e o poder do hipertexto. Nesta configuração, o HTMX é usado para lidar com as atualizações enviadas do servidor e atualizar o conteúdo HTML dinamicamente.
Modelos Jinja2 para renderizar HTML inicial com dados de Python *: Jinja2 é uma linguagem de template moderna e amigável para designers para Python. É usada para criar templates HTML que podem ser renderizados com dados de Python. Nesta configuração, Jinja2 é usado para renderizar o HTML inicial das páginas web, preenchendo dados do aplicativo Flask.

Français:

Backend FastAPI: FastAPI est un framework Web moderne et rapide (haute performance) pour créer des API avec Python 3.6+ basé sur le type Python standard. astuces. Il est conçu pour faciliter et accélérer le démarrage, avec la possibilité d'évoluer vers des applications complexes. Dans cette configuration, FastAPI est utilisé pour gérer toutes les opérations backend, y compris la diffusion de pages Web, la gestion des demandes et l'interaction avec la base de données.
PostgreSQL como sistema de banco de dados: PostgreSQL é um sistema de banco de dados relacional objeto poderoso e de código aberto. É conhecido por sua robustez, funcionalidade e conformidade com os padrões. Nesta configuração, o PostgreSQL é usado para armazenar e recuperar dados para o aplicativo.
SQLAlchemy para operações de banco de dados: SQLAlchemy é um kit de ferramentas SQL e um sistema de mapeamento objeto-relacional (ORM) para Python. Ele fornece um conjunto completo de modelos de persistência bem conhecidos no nível empresarial, projetados para acesso eficiente e de alto desempenho a bancos de dados. Nesta configuração, o SQLAlchemy é usado para interagir com o banco de dados PostgreSQL de maneira Pythonica.
SSE para o envio de atualizações para o frontend: Server-Sent Events (SSE) é um padrão que permite a um servidor web enviar atualizações para o cliente via HTTP. Nesta configuração, SSE é usado para enviar atualizações em tempo real do servidor (aplicativo Flask) para o cliente (navegador web).
HTMX para gerenciar atualizações no frontend com o mínimo de JavaScript: HTMX é uma biblioteca moderna, primeiro HTML, depois JavaScript, para criar aplicações web baseadas em AJAX. Ele permite que você acesse AJAX, transições CSS, WebSockets e eventos enviados pelo servidor diretamente em HTML, usando atributos, para que você possa criar interfaces de usuário modernas com a simplicidade e o poder do hipertexto. Nesta configuração, o HTMX é usado para gerenciar as atualizações enviadas do servidor e atualizar o conteúdo HTML dinamicamente.
Modelos Jinja2 para renderizar HTML inicial com dados Python: Jinja2 é uma linguagem de modelagem moderna e amigável para Python. É usada para criar modelos HTML que podem ser renderizados com dados Python. Nesta configuração, Jinja2 é usado para renderizar o HTML inicial das páginas da web, preenchendo os dados do aplicativo Flask.

Ilustração

graph LR
A [FastAPI] -->|Fetches Data| B [PostgreSQL]
A -->|Sends Updates| C [SSE]
B -->|Database Operations| D [SQLAlchemy]
C -->|Updates Frontend| E [HTMX]
A -->|Renders Initial HTML| F [Jinja2]

Python 🐍

Inglês:

Python é uma linguagem de programação de alto nível, interpretada, criada por Guido van Rossum e lançada pela primeira vez em 1991. A filosofia de design do Python enfatiza a legibilidade do código com seu notável uso de indentação significativa. Ele suporta múltiplos paradigmas de programação, incluindo estruturado (particularmente, procedural), orientado a objetos e programação funcional.

Casos de Uso *: Python é usado em uma ampla variedade de aplicações, incluindo:

Desenvolvimento Web *: A legibilidade e simplicidade do Python, juntamente com frameworks poderosos como Django e Flask, o tornam uma escolha popular para o desenvolvimento web.
Análise e Visualização de Dados *: Bibliotecas como Pandas, NumPy e Matplotlib tornam o Python uma ferramenta poderosa para análise e visualização de dados.
Aprendizado de Máquina e IA *: Python é uma das linguagens líderes em aprendizado de máquina, com bibliotecas como TensorFlow, PyTorch e Scikit-learn.
Scripting e Automação *: A simplicidade do Python o torna uma ótima linguagem para scripting e automação de tarefas.

Prós *:

Legibilidade *: A sintaxe do Python é projetada para ser legível e direta, o que a torna uma ótima linguagem para iniciantes.
Versatilidade *: Python é usado em muitas áreas de desenvolvimento, desde aplicações web até análise de dados.
Comunidade Forte *: Python possui uma comunidade grande e ativa de usuários e desenvolvedores que contribuem para uma vasta biblioteca de bibliotecas e frameworks de código aberto.

Contras *:

Velocidade *: Python é uma linguagem interpretada e pode ser mais lenta do que linguagens compiladas como C ou Java.
Desenvolvimento Móvel *: Embora seja possível desenvolver aplicativos móveis em Python, não é tão direto quanto usar uma linguagem especificamente projetada para desenvolvimento móvel, como Swift ou Java.
Consumo de Memória *: A flexibilidade do Python pode levar a um maior consumo de memória em comparação com outras linguagens.

Français:

Python est un langage de programmation interprété de haut niveau créé par Guido van Rossum et publié pour la première fois en 1991. La philosophie de conception de Python met l'accent sur la lisibilité du code avec son utilisation notable d'une indentation significative. Il prend en charge plusieurs paradigmes de programmation, notamment la programmation structurée (en particulier procédurale), orientée objet et fonctionnelle.

Cas d'utilisation: Python est utilisé dans une grande variété d'applications, notamment :

Desenvolvimento Web: a legibilidade e simplicidade do Python, juntamente com frameworks poderosos como Django e Flask, o tornam uma escolha popular para o desenvolvimento web.
Análise e Visualização de Dados: bibliotecas como Pandas, NumPy e Matplotlib tornam o Python uma ferramenta poderosa para análise e visualização de dados.
Machine Learning e IA: Python é uma das principais linguagens para aprendizado de máquina, com bibliotecas como TensorFlow, PyTorch e Scikit-learn.
Scripts e Automação: a simplicidade do Python o torna uma excelente linguagem para a criação de scripts e automação de tarefas. ** Vantagens**:
Legibilidade: a sintaxe do Python é projetada para ser legível e simples, o que o torna uma excelente linguagem para iniciantes.
Versatilidade: Python é usado em muitas áreas de desenvolvimento, desde aplicações web até análise de dados.
Comunidade forte: Python possui uma comunidade vasta e ativa de usuários e desenvolvedores que contribuem para uma vasta biblioteca de bibliotecas e frameworks de código aberto.

As desvantagens *:

Velocidade: Python é uma linguagem interpretada e pode ser mais lenta que linguagens compiladas como C ou Java.
Desenvolvimento móvel: embora seja possível desenvolver aplicações móveis em Python, não é tão simples quanto usar uma linguagem projetada especificamente para desenvolvimento móvel, como Swift ou Java.
Consumo de memória: a flexibilidade do Python pode resultar em um consumo de memória mais alto em comparação com outras linguagens.

FastAPI

Inglês:

Visão Geral *: FastAPI é um framework web moderno, rápido (de alto desempenho), para construir APIs com Python 3.6+ baseado em type hints padrão do Python. Ele é projetado para facilitar e agilizar o início, com a capacidade de escalar para aplicações complexas. Tornou-se um dos frameworks de aplicação web Python mais populares.

Casos de Uso *: FastAPI é usado em uma variedade de aplicações, incluindo:

Desenvolvimento Web *: A simplicidade do FastAPI e a documentação interativa automática da API o tornam uma ótima escolha para construir aplicações e serviços web.
Desenvolvimento de API *: FastAPI pode ser usado para construir APIs RESTful com documentação interativa automática da API.
Microsserviços *: O design leve e modular do FastAPI o torna uma boa opção para arquiteturas de microsserviços.

Prós *:

Simplicidade *: FastAPI é simples de usar e começar. Não requer nenhum projeto ou layout de código específico, então é fácil começar pequeno e escalar.
Flexibilidade *: FastAPI pode ser usado para construir uma variedade de aplicações web, desde aplicativos simples de página única até sites complexos e orientados a banco de dados.
Extensível *: FastAPI pode ser estendido com "plugins" que adicionam funcionalidade às suas aplicações. Existem plugins para validação de formulários, manipulação de uploads, várias tecnologias de autenticação aberta e várias ferramentas comuns relacionadas a frameworks.

Contras *:

Falta de Convenções *: FastAPI deixa muitas decisões e detalhes de implementação para o desenvolvedor, o que pode levar a problemas ao construir aplicações maiores ou trabalhar em equipe.
Escalabilidade *: Embora o FastAPI seja ótimo para pequenas aplicações, ele pode ser menos adequado para aplicações grandes e complexas.
Suporte Assíncrono *: O tratamento de requisições do FastAPI é assíncrono. Outros frameworks como Node.js podem ser uma escolha melhor para aplicações que exigem o tratamento de muitas conexões simultâneas.

Français:

Présentation: FastAPI est un framework Web moderne et rapide (hautes performances) permettant de créer des API avec Python 3.6+, basé sur des astuces de type Python standard. Il est conçu pour faciliter et accélérer le démarrage, avec la possibilité d'évoluer vers des applications complexes. Il est devenu l’un des frameworks d’applications Web Python les plus populaires.

Cas d'utilisation: FastAPI est utilisé dans diverses applications, notamment :

Desenvolvimento Web: a simplicidade do FastAPI e a documentação interativa automática da API o tornam uma excelente escolha para criar aplicações e serviços web.
Desenvolvimento de API: O FastAPI pode ser usado para criar APIs RESTful com documentação de API interativa automática.
Microsserviços: o design leve e modular do FastAPI o torna uma boa escolha para arquiteturas de microsserviços.

Vantagens *:

Simplicidade: O FastAPI é simples de usar e começar. Não requer nenhum projeto ou layout de código particular, por isso é fácil começar pequeno e escalar.
Flexibilidade: O FastAPI pode ser usado para criar uma variedade de aplicações web, desde aplicações simples de página única até sites complexos baseados em banco de dados.
Extensível: FastAPI pode ser estendido com "plugins" que adicionam funcionalidades às suas aplicações. Existem plugins para validação de formulários, gerenciamento de upload, várias tecnologias de autenticação abertas e várias ferramentas comuns relacionadas ao framework.

As desvantagens *:

Falta de convenções: FastAPI deixa muitas decisões e detalhes de implementação para o desenvolvedor, o que pode levar a problemas ao criar aplicações maiores ou trabalhar em equipe.
Escalabilidade: embora o FastAPI seja ideal para pequenas aplicações, ele pode ser menos adequado para aplicações grandes e complexas.
Support asynchrone: la gestion des requêtes de FastAPI est asynchrone. D'autres frameworks comme Node.js pourraient être un meilleur choix pour les applications nécessitant la gestion de nombreuses connexions simultanées.

HTMX

Português:

HTMX é uma ferramenta moderna que permite aceder a AJAX, WebSockets, Server Sent Events e outros comportamentos dinâmicos diretamente em HTML, sem a necessidade de escrever qualquer JavaScript. É uma ferramenta poderosa para desenvolvedores que desejam criar páginas web interativas com menos complexidade.

Contexto e Casos de Uso *: HTMX encontra sua utilidade em cenários onde os desenvolvedores querem manter a simplicidade do HTML renderizado no servidor, mas também precisam da interatividade tipicamente associada a Single Page Applications (SPAs). É ótimo para adicionar recursos como atualizações em tempo real, carregamento preguiçoso e rolagem infinita às suas páginas web.

Vantagens *:

Simplicidade *: HTMX mantém as coisas simples. Você não precisa escrever JavaScript, apenas HTML.
Leveza *: É uma biblioteca pequena, então não adiciona muito aos tempos de carregamento da sua página.
Compatibilidade *: Funciona com qualquer back-end que possa servir HTML, tornando-o altamente versátil.

Contras *:

Comunidade Limitada *: Como uma ferramenta relativamente nova, a comunidade em torno do HTMX ainda está crescendo. Isso pode tornar a busca por soluções para problemas específicos mais desafiadora.
Curva de Aprendizagem *: Embora o HTMX simplifique muitos aspectos do desenvolvimento web dinâmico, ainda há uma curva de aprendizagem envolvida, especialmente para desenvolvedores acostumados a SPAs pesados em JavaScript.
Não é uma Substituição Completa *: Para aplicações complexas com lógica pesada do lado do cliente, JavaScript tradicional ou um framework ainda pode ser necessário. HTMX é melhor para aprimorar páginas renderizadas no servidor com recursos interativos. Simplificando a Interatividade Web: Como o HTMX Facilita as Complexidades do JavaScript *

JavaScript, embora poderoso, pode às vezes introduzir complexidade e desafios no desenvolvimento web. HTMX visa aliviar algumas dessas dores.

Simplicidade *: JavaScript, especialmente quando usado com frameworks modernos, pode se tornar complexo e difícil de gerenciar. HTMX, por outro lado, permite adicionar comportamento dinâmico diretamente no HTML, reduzindo a necessidade de código JavaScript complexo.
Tempos de Carregamento Reduzidos *: Arquivos JavaScript, particularmente para grandes aplicações, podem ser grandes e impactar os tempos de carregamento da página. Como uma biblioteca leve, HTMX minimiza este problema.
Facilidade de Aprendizagem *: JavaScript tem uma curva de aprendizado íngreme, especialmente para iniciantes. HTMX simplifica isso, permitindo que os desenvolvedores trabalhem com a sintaxe HTML familiar.
Compatibilidade *: JavaScript pode, por vezes, ter problemas de compatibilidade entre diferentes navegadores. HTMX funciona com qualquer back-end que possa servir HTML, tornando-o altamente versátil e menos propenso a problemas de compatibilidade.
Renderização no Lado do Servidor *: Em aplicações pesadas em JavaScript, grande parte da lógica de renderização é movida para o lado do cliente, o que pode ser intensivo em recursos. HTMX permite a renderização no lado do servidor, o que pode ser mais eficiente e fácil de gerenciar.

No entanto, é importante notar que, embora o HTMX possa aliviar algumas das dores associadas ao JavaScript, não é um substituto completo. Para aplicações complexas com lógica pesada do lado do cliente, JavaScript ou um framework JavaScript ainda podem ser necessários. O HTMX é melhor utilizado para aprimorar páginas renderizadas no servidor com recursos interativos.

Français:

HTMX est un outil moderne qui vous permet d'accéder à AJAX, WebSockets, aux événements envoyés par le serveur et à d'autres comportements dynamiques directement en HTML, sans avoir besoin d'écrire du JavaScript. C'est un outil puissant pour les développeurs qui souhaitent créer des pages Web interactives avec moins de complexité.

Contexto e Casos de Uso: HTMX é utilizado em cenários onde os desenvolvedores desejam manter a simplicidade do HTML renderizado pelo servidor, mas também precisam da interatividade geralmente associada a Single Page Applications (SPAs). É ideal para adicionar funcionalidades como atualizações em tempo real, carregamento preguiçoso e rolagem infinita às suas páginas web.

Vantagens *:

Simplicidade: HTMX simplifica as coisas. Você não precisa escrever JavaScript, apenas HTML.
Leve: É uma biblioteca pequena, então não adiciona muito aos tempos de carregamento de suas páginas.
Compatibilidade: Funciona com qualquer back-end capaz de servir HTML, tornando-o muito versátil.

Desvantagens *:

Comunidade limitada: como uma ferramenta relativamente nova, a comunidade em torno do HTMX continua a crescer. Isso pode tornar mais difícil encontrar soluções para problemas específicos.
Curva de aprendizado: embora o HTMX simplifique muitos aspectos do desenvolvimento web dinâmico, ainda há uma curva de aprendizado, especialmente para desenvolvedores acostumados com SPAs pesados em JavaScript.
Não é um substituto completo: para aplicações complexas com lógica pesada no lado do cliente, JavaScript tradicional ou um framework ainda pode ser necessário. O HTMX é ideal para aprimorar páginas renderizadas pelo servidor com funcionalidades interativas. ** Simplificando a Interatividade Web: Como o HTMX Facilita as Complexidades do JavaScript** *

JavaScript, embora poderoso, pode às vezes introduzir complexidade e desafios no desenvolvimento web. HTMX visa aliviar algumas dessas dores.

Simplicidade: JavaScript, especialmente quando usado com frameworks modernos, pode se tornar complexo e difícil de gerenciar. HTMX, por outro lado, permite adicionar comportamento dinâmico diretamente no HTML, reduzindo a necessidade de código JavaScript complexo.
Tempos de carregamento reduzidos: arquivos JavaScript, especialmente para grandes aplicações, podem ser volumosos e impactar os tempos de carregamento da página. Como uma biblioteca leve, HTMX minimiza esse problema.
Facilidade de aprendizado: JavaScript tem uma curva de aprendizado íngreme, especialmente para iniciantes. HTML simplifica isso, permitindo que os desenvolvedores trabalhem com uma sintaxe HTML familiar.
Compatibilidade: JavaScript pode, às vezes, encontrar problemas de compatibilidade entre diferentes navegadores. HTMX funciona com qualquer back-end capaz de servir HTML, tornando-o muito versátil e menos propenso a problemas de compatibilidade.
Renderização no lado do servidor: com aplicativos pesados em JavaScript, grande parte da lógica de renderização é movida para o lado do cliente, o que pode ser intensivo em recursos. HTMX permite a renderização no lado do servidor, o que pode ser mais eficiente e fácil de gerenciar.

Cependant, il est important de noter que même si HTMX peut atténuer certains des problèmes associés à JavaScript, il ne s'agit pas d'un remplacement complet. Pour les applications complexes avec une logique côté client lourde, JavaScript ou un framework JavaScript peut toujours être nécessaire. HTMX est mieux utilisé pour améliorer les pages rendues par le serveur avec des fonctionnalités interactives.

Server Sent Events

English:

Server Sent Events (SSE) é um padrão que permite a um servidor web enviar atualizações em tempo real para o cliente. Esta tecnologia faz parte da especificação HTML5 e foi projetada para aprimorar o modelo tradicional de solicitação-resposta, permitindo que o servidor envie novos dados ao cliente sempre que estiverem disponíveis.

Français:

Server Sent Events (SSE) é um padrão que permite a um servidor web enviar atualizações em tempo real para o cliente. Esta tecnologia faz parte da especificação HTML5 e foi projetada para melhorar o modelo tradicional de solicitação-resposta, permitindo que o servidor envie novos dados ao cliente sempre que estiverem disponíveis.

Ilustração

sequenceDiagram
participant Client
participant Server
Client->>Server: GET /stream
Note over Client: Header: Accept: text/event-stream
Note over Server: Establishes stream connection
loop Streaming data
Server-->>Client: data: {"event": "message", "data": "JSON payload"}
Note over Server: Header: Content-Type: text/event-stream
end
Note over Client: Processes each received event

Inglês:

Contexto *: Antes do SSE, os desenvolvedores frequentemente usavam long-polling ou WebSockets para alcançar comunicação em tempo real. No entanto, esses métodos podem ser complexos e intensivos em recursos. O SSE foi introduzido como uma alternativa mais simples e eficiente para comunicação unidirecional em tempo real do servidor para o cliente.

Implementação *: Para implementar o SSE, o servidor envia uma resposta com o tipo MIME text/event-stream. O cliente escuta esses eventos usando a API EventSource em JavaScript. O servidor pode então enviar eventos para o cliente sempre que houver novos dados disponíveis.

Vantagens *:

Simplicidade *: O SSE é mais fácil de implementar do que os WebSockets, pois não requer uma conexão full-duplex.
Eficiência *: O SSE é mais eficiente do que o long-polling, pois não exige que o cliente verifique constantemente novos dados.
Reconexão Integrada: Se a conexão for perdida, o SSE tenta automaticamente reconectar.

Contras:

Comunicação Unidirecional: O SSE suporta apenas comunicação unidirecional do servidor para o cliente. Se for necessária comunicação bidirecional, outras tecnologias como WebSockets podem ser mais adequadas.
Suporte Limitado a Navegadores: Nem todos os navegadores suportam SSE. Por exemplo, o Internet Explorer não suporta SSE.
Sobrecarga: Cada conexão SSE requer uma conexão HTTP separada, o que pode adicionar sobrecarga se houver muitas conexões.

Mais informações MDN Web Docs

Português:

Contexto: Antes do SSE, os desenvolvedores frequentemente usavam long polling ou WebSockets para estabelecer comunicação em tempo real. No entanto, esses métodos podem ser complexos e consumir muitos recursos. O SSE foi introduzido como uma alternativa mais simples e eficiente para a comunicação unidirecional em tempo real do servidor para o cliente.

Implementação: Para implementar o SSE, o servidor envia uma resposta com o tipo MIMEtext/event-stream. O cliente escuta esses eventos usando a APIEventSourceem JavaScript. O servidor pode então enviar eventos ao cliente sempre que novos dados estiverem disponíveis.

Vantagens:

Simplicidade: O SSE é mais fácil de implementar do que os WebSockets porque não requer uma conexão full-duplex.
Eficiência: SSE é mais eficiente que o long polling porque não obriga o cliente a verificar constantemente novos dados.
Reconexão integrada: se a conexão for perdida, o SSE tenta se reconectar automaticamente.

As desvantagens *:

Comunicação unidirecional: SSE suporta apenas comunicação unidirecional do servidor para o cliente. Se for necessária comunicação bidirecional, outras tecnologias como WebSockets podem ser mais adequadas.
Suporte limitado do navegador: Nem todos os navegadores suportam SSE. Por exemplo, o Internet Explorer não suporta SSE.
Sobrecarga: cada conexão SSE requer uma conexão HTTP separada, o que pode adicionar uma sobrecarga se houver muitas conexões.

Mais informações MDN Web Docs

Geradores Python

Português: Geradores Python são um tipo especial de função em Python que permite criar um iterador de forma rápida, fácil e limpa. Eles foram introduzidos como parte da Proposta de Melhoria do Python (PEP) 255.

Contexto *: Em Python, um iterador é um objeto que pode ser iterado (percorrido). Um objeto que retornará dados, um elemento por vez. Geradores fornecem uma maneira conveniente de implementar o protocolo do iterador.

Implementação *: Um gerador Python é implementado como uma função, mas em vez de retornar valores usando a instruçãoreturn, ele usayield. Quando a função geradora é chamada, ela retorna um objeto gerador sem sequer iniciar a execução da função. Quandonext()é chamado pela primeira vez, a função começa a ser executada até atingir a instruçãoyield, que retorna o valor gerado. A execução da função é interrompida neste ponto e o controle é retornado ao chamador.

Français:

Os Geradores Python são um tipo especial de função em Python que permite criar um iterador de forma rápida, simples e limpa. Eles foram introduzidos como parte da Python Enhancement Proposal (PEP) 255.

Contexto: em Python, um iterador é um objeto que pode ser iterado (percorrido). Um objeto que retornará dados, um elemento por vez. Geradores são uma maneira conveniente de implementar o protocolo iterador.

Implementação: um gerador Python é implementado como uma função, mas em vez de retornar valores usando a instruçãoreturn, ele usayield. Quando a função geradora é chamada, ela retorna um objeto gerador sem sequer iniciar a execução da função. Quandonext()é chamado pela primeira vez, a função começa a ser executada até atingir a instruçãoyield, que retorna o valor obtido. A execução da função é pausada neste ponto e o controle é devolvido ao chamador.

def count_up_to(n):
  count = 1
  while count <= n:
    yield count
    count += 1

# Criar um gerador
counter = count_up_to(5)

# Usar o gerador
for num in counter:
  print(num)

Português:

Caso de Uso *: Geradores são particularmente úteis ao lidar com grandes conjuntos de dados que você não deseja armazenar na memória de uma só vez. Também são bastante úteis ao lidar com séries extremamente grandes ou até infinitas.

Prós *:

Eficiência de Memória *: Geradores são uma ótima maneira de otimizar a memória. Como eles produzem um item por vez, não precisam carregar tudo na memória.
Preguiça *: Geradores são preguiçosos, o que significa que geram valores em tempo real. Essa preguiça pode levar a melhorias significativas de desempenho para grandes conjuntos de dados.
Código Limpo *: Geradores ajudam a escrever código limpo e legível.

Contras *:

Uso Único *: Geradores só podem ser iterados uma vez. Depois de ter percorrido os valores, não pode iterá-los novamente.
Complexidade *: Geradores podem tornar o código mais complexo e difícil de entender para iniciantes.

Français:

Cas d'utilisation: les générateurs sont particulièrement utiles lorsque vous traitez de grands ensembles de données que vous ne souhaitez pas stocker en mémoire d'un seul coup. C’est également très utile lorsqu’il s’agit de séries extrêmement grandes, voire infinies.

Avantages *:

Efficacité de la mémoire: les générateurs sont un excellent moyen d'optimiser la mémoire. Puisqu’ils génèrent un élément à la fois, ils n’ont pas besoin de tout charger en mémoire.
Preguiça: os geradores são preguiçosos, o que significa que eles geram valores sob demanda. Essa preguiça pode levar a melhorias significativas de desempenho para grandes conjuntos de dados.
Clean Code: os geradores ajudam a escrever código limpo e legível.

As desvantagens *:

Uso único: os geradores só podem ser iterados uma vez. Depois de percorrer os valores, você não pode percorrê-los novamente.
Complexidade: os geradores podem tornar o código mais complexo e difícil de entender para iniciantes.

SQLAlchemy

Português:

SQLAlchemy é um kit de ferramentas SQL e sistema de Mapeamento Objeto-Relacional (ORM) para Python. Ele fornece um conjunto completo de padrões de persistência de nível empresarial bem conhecidos, projetados para acesso eficiente e de alto desempenho a bancos de dados.

Visão Geral: Introduzida em 2005, SQLAlchemy é uma biblioteca abrangente para trabalhar com bancos de dados SQL em Python. Inclui um ORM de alto nível, acesso SQL direto de baixo nível e muito mais.

Casos de Uso: SQLAlchemy é usado em uma variedade de aplicações para:

Interagir com Bancos de Dados: SQLAlchemy fornece uma API consistente e unificada para interagir com diferentes sistemas de banco de dados.
Mapeamento de Dados: O ORM do SQLAlchemy permite que os usuários mapeiem classes Python para tabelas de banco de dados, proporcionando uma maneira mais intuitiva de interagir com bancos de dados.
Análise de Dados: SQLAlchemy pode ser usado com bibliotecas como Pandas para tarefas de análise de dados.

Prós:

Versatilidade: SQLAlchemy suporta uma ampla gama de bancos de dados SQL, não apenas SQLite.
Eficiência: O ORM e a linguagem de expressão do SQLAlchemy permitem operações de banco de dados eficientes.
Maturidade: Como uma biblioteca bem estabelecida, o SQLAlchemy possui suporte robusto e uma grande comunidade.
Contras:
Complexidade: A ampla gama de recursos e a flexibilidade do SQLAlchemy podem torná-lo complexo de aprender, especialmente para iniciantes.
Desempenho: Embora o ORM do SQLAlchemy torne as operações de banco de dados mais convenientes, ele pode ocasionalmente levar a um desempenho mais lento em comparação com SQL puro.
Sobrecarga: A abstração fornecida pelo SQLAlchemy introduz alguma sobrecarga, o que pode não ser ideal para aplicações que exigem desempenho máximo.

Français:

SQLAlchemy est une boîte à outils SQL et un système de mappage objet-relationnel (ORM) pour Python. Il fournit une suite complète de modèles de persistance bien connus au niveau de l'entreprise, conçus pour un accès efficace et performant aux bases de données.

Apresentação: introduzida em 2005, SQLAlchemy é uma biblioteca completa para trabalhar com bancos de dados SQL em Python. Inclui um ORM de alto nível, acesso SQL direto de baixo nível e muito mais.

Casos de uso: SQLAlchemy é usado em diversas aplicações para :

Interagir com bancos de dados: SQLAlchemy fornece uma API consistente e unificada para interagir com diferentes sistemas de bancos de dados.
Mapeamento de dados: o ORM do SQLAlchemy permite que os usuários mapeiem classes Python para tabelas de banco de dados, oferecendo uma maneira mais intuitiva de interagir com bancos de dados.
Análise de dados: SQLAlchemy pode ser usado com bibliotecas como Pandas para tarefas de análise de dados.

Vantagens *:

Versatilidade: SQLAlchemy suporta uma ampla gama de bancos de dados SQL, não apenas SQLite.
Eficiência: o ORM e a linguagem de expressão do SQLAlchemy permitem operações de banco de dados eficientes.
Maturidade: como uma biblioteca bem estabelecida, o SQLAlchemy possui suporte robusto e uma grande comunidade.

Desvantagens *:

Complexidade: a ampla gama de recursos e a flexibilidade do SQLAlchemy podem tornar seu aprendizado complexo, especialmente para iniciantes.
Desempenho: embora o ORM do SQLAlchemy torne as operações de banco de dados mais convenientes, ele pode ocasionalmente levar a um desempenho mais lento em comparação com o SQL bruto.
Sobrecarga: a abstração fornecida pelo SQLAlchemy introduz uma certa sobrecarga, que pode não ser ideal para aplicações que exigem desempenho máximo.

class EnergyDataTable(Base):
    __tablename__ = "energy_data"
    id = Column(Integer, primary_key=True, autoincrement=True)
    period = Column(DateTime, nullable=False)
    respondent = Column(String, nullable=True)
    respondent_name = Column(String, nullable=True)
    type = Column(String, nullable=True)
    type_name = Column(String, nullable=True)
    value = Column(Float, nullable=True)
    value_units = Column(String, nullable=True)

__table_args__ = (
        UniqueConstraint(
            "period", "respondent", "type", name="uix_period_respondent_type"
        ),
    )

def __repr__(self):
        return f"{self.id}, period={self.period}, respondent={self.respondent}, respondent_name={self.respondent_name}, type={self.type}, type_name={self.type_name}, value={self.value}, value_units={self.value_units})>"

Jinja2

Português: Jinja2 é um poderoso motor de template para Python que permite gerar HTML, XML ou outros formatos de marcação dinâmicos. Ele oferece uma maneira flexível e eficiente de renderizar dados no lado do servidor e gerar conteúdo dinâmico para aplicações web.

Jinja2 é inspirado no motor de template do Django e é amplamente utilizado no desenvolvimento web com frameworks como Flask e Django. Ele separa a lógica de apresentação da lógica de negócios, tornando mais fácil manter e atualizar o frontend da sua aplicação.

Caso de Uso: Jinja2 é comumente usado em cenários onde você precisa renderizar conteúdo dinâmico no lado do servidor. É particularmente útil para gerar páginas HTML com dados dinâmicos, como exibir informações do usuário, gerar relatórios ou renderizar atualizações em tempo real.

Prós:

Flexível e Expressivo: Jinja2 oferece um rico conjunto de recursos, incluindo condicionais, loops, filtros e macros, permitindo criar modelos complexos com facilidade.
Separação de Preocupações: Ao separar a lógica de apresentação da lógica de negócios, Jinja2 promove uma arquitetura de código limpa e manutenibilidade.
Extensibilidade: Jinja2 permite definir filtros, funções e tags personalizados, dando-lhe controle total sobre o processo de renderização do modelo.
Integração com Python *: Como Jinja2 é escrito em Python, ele se integra perfeitamente com o código Python, facilitando a passagem de dados do backend para os templates.

Contras *:

Curva de Aprendizagem *: Jinja2 tem sua própria sintaxe e conceitos, então há uma curva de aprendizado envolvida para entendê-lo e usá-lo efetivamente.
Interatividade Limitada no Frontend *: Jinja2 é focado principalmente na renderização do lado do servidor, então pode não ser a melhor escolha para componentes de frontend altamente interativos que exigem atualizações frequentes sem recarregar a página. Nesses casos, um framework JavaScript como React ou Vue.js pode ser mais adequado.

Português: Jinja2 é um poderoso motor de modelagem para Python que permite gerar HTML, XML ou outros formatos de marcação dinâmicos. Ele fornece uma maneira flexível e eficiente de renderizar dados do lado do servidor e gerar conteúdo dinâmico para aplicações web.

Jinja2 é inspirado no motor de modelos do Django e é amplamente utilizado no desenvolvimento web com frameworks como Flask e Django. Ele separa a lógica de apresentação da lógica de negócios, facilitando a manutenção e a atualização do frontend da sua aplicação.

Casos de uso: Jinja2 é comumente usado em cenários onde você precisa renderizar conteúdo dinâmico no lado do servidor. É particularmente útil para gerar páginas HTML com dados dinâmicos, como exibir informações do usuário, gerar relatórios ou renderizar atualizações em tempo real.

Vantagens *:

Flexível e expressivo: Jinja2 oferece um rico conjunto de funcionalidades, incluindo condições, loops, filtros e macros, permitindo que você crie modelos complexos facilmente.
Separação de preocupações: ao separar a lógica de apresentação da lógica de negócios, Jinja2 promove uma arquitetura de código limpa e a manutenibilidade.
Extensibilidade: Jinja2 permite que você defina filtros, funções e tags personalizadas, dando-lhe controle total sobre o processo de renderização do template.
Integração com Python: Como Jinja2 é escrito em Python, ele se integra perfeitamente ao código Python, facilitando a transmissão de dados do backend para os templates.

As desvantagens *:

Curva de aprendizado: Jinja2 tem sua própria sintaxe e conceitos, então há uma curva de aprendizado envolvida para entendê-lo e usá-lo de forma eficaz.
Interatividade limitada do frontend: Jinja2 foca principalmente na renderização do lado do servidor, portanto, pode não ser a melhor escolha para componentes de frontend altamente interativos que exigem atualizações frequentes sem recarregar a página. Nesses casos, um framework JavaScript como React ou Vue.js pode ser mais adequado.

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="{{ url_for('index') }}">
            <i class="bi bi-lightning-charge-fill me-2">i</i>Painel de Energia
        a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon">span</span>
        button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link" href="{{ url_for('index') }}">Inícioa</a>
                li>
                <li class="nav-item">
                    <a class="nav-link" href="{{ url_for('instruct') }}">Instruir (com Energia LLM)a</a>

li>
            ul>
        div>
    div>
nav>

Que tal usar LLMs para gerar consultas SQL?

Português:

Primeiro, vamos obter o script DDL da nossa Tabela de Dados de Energia do SQLAlchemy:

Français:

Tout d'abord, obtenons le script DDL de notre table de données énergétiques auprès de SQLAlchemy :

def get_energy_data_schema() -> str:
    """
    Get the schema of the Database
    """
    schema_ddl = CreateTable(EnergyDataTable.__table__).compile(engine)
    log.info(schema_ddl)
    return schema_ddl

Português:

Em seguida, vamos aproveitar a capacidade de chamada de função dos nossos LLMs configurados através do Instructor para nos fornecer a Consulta SQL:

Français:

Em seguida, avançamos e aproveitamos a capacidade de chamada de função de nossos LLMs configurados via Instructor para nos fornecer a consulta SQL:

def gen_select_query(
    ai_client: Instructor, schema, parametre: str, model=LLMModel.GPT4_Omni
) -> SqlSelectQuery:
    system_msg = f"""
    Emita uma instrução SQL válida com base no seguinte esquema de tabela:
    '''sql
    {schema}
    '''
    """
    log.info(f"system_msg: {system_msg}")
    log.info(f"parametre: {parametre}")
    query = ai_client.chat.completions.create(
        model=model,
        response_model=SqlSelectQuery,
        messages= [
            {"role": "system", "content": system_msg},
            {"role": "user", "content": parametre},
        ],
    )
    return query

Português:

Com a seguinte estrutura Pydantic:

Francês:

Com a estrutura Pydantic seguinte:

class SqlSelectQuery(BaseModel):
    select_stmt: str = Field(..., description="The select statement for the query")
    explain_stmt: str = Field(..., description="The explain statement for the query")
    start_date: str = Field(..., description="The start date for the data")
    end_date: str = Field(..., description="The end date for the data")

Referências

HTMX *

Eventos Enviados pelo Servidor (SSE) *

Python *

SQLAlchemy

Jinja2

Bokeh