PDF - VERSÃO DE IMPRESSÃO

Lição 4 - Paradigma orientado a eventos: formulários e uso de dados

objetivo

Olá, estudante! Agora que você já tem um bom conhecimento sobre back-end, IDEs e o que são as tão famosas APIs, chegou a hora de ver um pouco sobre o paradigma orientado a eventos. Sendo assim, o objetivo desta lição é apresentar a você o conceito que diz respeito a um estilo de programação, que se concentra em eventos que ocorrem em um sistema e como eles são tratados. Esse paradigma é amplamente utilizado no desenvolvimento de software para criar interfaces de usuário interativas e aplicações que respondem a ações e eventos específicos.

Em um sistema orientado a eventos, diferentes ações podem disparar uma variedade de respostas, ou seja, os eventos podem ser acionados por várias ações, como cliques do mouse, pressionamento de teclas, alterações em dados, chegada de mensagens de rede e muito mais. Cada evento é identificado por um nome e pode conter informações ou dados relevantes associados a ele.

Você também aprenderá que formulários e uso de dados são elementos fundamentais nesse paradigma, pois permitem interações com o usuário e manipulação dos dados associados aos eventos. Isso resulta em aplicações interativas, reativas e responsivas que melhoram a experiência do usuário.

problematização

Um problema que a programação orientada a eventos resolve é a criação de interfaces de usuários interativas e responsivas em aplicações de software. Esse paradigma é particularmente útil quando a aplicação precisa lidar com múltiplas interações do usuário, eventos e ações em tempo real. No desenvolvimento de aplicações web, onde a interação do usuário é constante e variada, envolve cliques do mouse, pressionamentos de teclas, preenchimento de formulários, rolagem de páginas entre outros eventos são exemplos clássicos do uso do paradigma.

A programação orientada a eventos também permite que os desenvolvedores respondam a esses eventos de forma ágil e eficiente, criando interfaces que respondem instantaneamente às ações do usuário. Em vez de esperar que o usuário clique em um botão de envio de formulário para processar os dados, a aplicação pode responder imediatamente a cada entrada de dados em tempo real. Além disso, esse paradigma permite que a aplicação seja mais modular e reativa, pois os eventos podem ser tratados em diferentes partes do código, o que simplifica a manutenção e o desenvolvimento contínuo, muito útil em sistemas complexos, onde várias funcionalidades e componentes precisam trabalhar juntos de forma coesa.

Se você ainda não se convenceu de que a programação orientada a eventos é para você, saiba que ela resolve o desafio de criar interfaces do usuário interativas, responsivas e dinâmicas, permitindo que a aplicação responda imediatamente a eventos e ações do usuário, melhorando significativamente a experiência do usuário e a eficiência do sistema. Te convenci?

case

Na lição de hoje, irei apresentar um case fictício sobre a empresa TaskMaster Tech que é uma startup que desenvolve uma plataforma de gerenciamento de tarefas para equipes de projetos. A plataforma permite que equipes colaborem de forma eficiente, atribuindo tarefas, definindo prazos e compartilhando atualizações em tempo real.

O grande desafio enfrentado pela equipe da empresa foi o de criar uma interface de usuário altamente interativa e responsiva para sua plataforma de gerenciamento de tarefas, pois, eles queriam que os usuários pudessem adicionar, editar e concluir as tarefas de forma rápida e fácil, enquanto visualizam atualizações em tempo real feitas por outros membros da equipe.

A solução foi a programação orientada a eventos, com foco na utilização de formulários e dados em tempo real com formulários interativos, atualizações em tempo real e sincronização colaborativa que permite que múltiplos membros da equipe trabalhassem simultaneamente na mesma lista de tarefas, com todas as mudanças sendo refletidas instantaneamente em todas as interfaces dos usuários. Com isso a empresa criou uma plataforma altamente eficiente e colaborativa de gerenciamento de tarefas. Os usuários experimentaram uma experiência de usuário suave, onde suas ações eram respondidas instantaneamente, e as atualizações em tempo real permitiram que todos os membros da equipe estivessem sincronizados e atualizados sobre o status das tarefas em tempo real.

Esse case demonstra de forma clara como a aplicação efetiva da programação orientada a eventos contribuiu significativamente para a popularidade e o sucesso da plataforma entre as equipes de negócio.

Conceitualização

Para entender a Programação Orientada a Eventos primeiro você precisa entender o que seria um evento. Segundo Yeager (2014), um evento é uma condição que surge durante o tempo de vida de um programa, que requer o início de ações do programa pelo sistema em tempo de execução. O evento pode simplesmente fazer com que as informações sejam lidas do estado da máquina e exibidas na tela, ou pode fazer com que um cálculo seja executado ou pode resultar em uma mudança no estado da informação.

Os eventos geralmente são representados em tempo de execução por uma estrutura de dados chamada mensagem, que fornece informações detalhando primeiro, o tipo de evento e segundo, os parâmetros necessários para lidar com o evento. Um manipulador de eventos é uma unidade de programa ativa que é chamada em resposta ao evento. Uma fila de eventos ou fila de mensagens é uma fila de mensagens que representam eventos que ocorreram, mas que ainda não foram tratados.

Dito isso, consigo agora lhe apresentar o conceito de programação orientada a eventos, que é um estilo de programação que se baseia na ocorrência de eventos e como eles são tratados em um sistema de software. Nesse paradigma, o fluxo de controle do programa é determinado pelos eventos que ocorrem em vez de seguir uma sequência linear de execução.

Em vez de um código que executa uma série de instruções sequencialmente, na programação orientada a eventos, o programa aguarda e responde a eventos específicos que podem ser acionados por ações do usuário, alterações de estado do sistema, interações com dispositivos externos, ou outros acontecimentos do ambiente. As principais características do paradigma são:

Assincronismo: A execução do programa é não sequencial, pois os eventos podem ocorrer a qualquer momento, e o sistema aguarda a ocorrência dos eventos para responder a eles.
Modularidade: Os manipuladores de eventos são funções ou blocos de código independentes que podem ser reutilizados em várias partes do sistema, tornando o código mais modular e de fácil manutenção.
Reatividade: O sistema responde dinamicamente aos eventos, atualizando a interface do usuário ou executando tarefas em tempo real conforme os eventos ocorrem.
Interatividade: O paradigma orientado a eventos é frequentemente utilizado em interfaces de usuários interativas, onde as ações do usuário acionam eventos que atualizam a interface e fornecem feedback imediato.

Eventos em interfaces de Usuário

Em programação, os eventos são acontecimentos ou ações que ocorrem dentro de um sistema ou aplicação em resposta a interações do usuário, mudanças de estado do sistema ou ocorrências externas. Essas ações podem incluir cliques em botões, pressionamentos de teclas, envio de formulários, movimentos do mouse entre outros eventos.

Ouvintes de Eventos e Callbacks

Os ouvintes (listeners) são funções ou blocos de código que são registrados para “ouvir” ou monitorar a ocorrência de eventos específicos. Eles estão vinculados a um evento e são acionados automaticamente quando o evento ocorre. Eles são os responsáveis por capturar o evento e decidir qual ação ou conjunto de ações devem ser executadas em resposta a esse evento. Eles permitem que o sistema aguarde eventos e reaja a eles de forma assíncrona, tornando o código mais modular e responsivo.

Já os callbacks, são funções que são passadas como argumentos para outras funções, permitindo que essas funções sejam executadas após a conclusão de uma determinada tarefa ou evento. Em relação aos eventos e ouvintes, um callback é a função que é acionada quando um evento específico ocorre e é tratado pelo ouvinte associado a esse evento. O callback é executado para lidar com o evento e realizar as ações necessárias em resposta a ele. A utilização de callbacks é uma forma de programação assíncrona, onde o fluxo de execução do código não é bloqueado pelo evento. Em vez disso, o sistema continua executando outras tarefas, e quando o evento ocorre e o ouvinte é acionado, o callback é chamado para responder ao evento.

Formulários interativos

O uso de formulários é uma das maneiras mais comuns de coletar dados do usuário em uma aplicação. Os formulários são elementos essenciais em aplicações web e em muitos outros tipos de software, permitindo que os usuários forneçam informações e interajam com o sistema. Um formulário é uma coleção de campos interativos que podem incluir elementos como campos de texto, caixas de seleção, botões de rádio, botões de envio e muito mais. Cada campo do formulário representa um tipo específico de dado que o usuário deve fornecer ou selecionar.

Ao apresentar um formulário, a aplicação pode solicitar aos usuários informações como nome, e-mail, senha, endereço, data de nascimento, preferências ou qualquer outra informação relevante para o propósito da aplicação. As etapas normalmente utilizadas para esse tipo de coleta de dados são: apresentação do formulário, preenchimento pelo usuário, validação dos dados finalizando com envio e processamento.

O uso de formulários é essencial para interações com o usuário em diferentes aplicações, incluindo sites de e-commerce, sistemas de gerenciamento de conteúdo, redes sociais, aplicativos de registro e muitos outros. Eles fornecem uma maneira intuitiva e estruturada de coletar dados do usuário, permitindo que a aplicação obtenha as informações necessárias para oferecer uma experiência personalizada e atender às necessidades específicas de cada usuário.

Manipulação de dados

A manipulação de dados é um aspecto fundamental em qualquer aplicação de software. Ela envolve a coleta, armazenamento, processamento e apresentação de informações relevantes para o funcionamento e interação do sistema. Através da manipulação de dados, as aplicações podem coletar informações dos usuários, realizar operações complexas, exibir resultados e fornecer feedback em tempo real. Existem várias formas de manipular dados em uma aplicação, incluindo:

Coleta de dados.
Armazenamento de dados.
Processamento de dados.
Apresentação de dados.
Atualização de dados em tempo real.

A manipulação de dados é uma habilidade essencial no desenvolvimento de aplicações de sucesso. Ela permite que as aplicações sejam eficientes, precisas, seguras e proporcionem uma experiência do usuário aprimorada. Além disso, garante a privacidade e segurança das informações dos usuários, bem como fornece insights valiosos para a tomada de decisões em diversos contextos como negócios, pesquisa científica, análise de dados, entre outros.

Atualização de interfaces em tempo real

Refere-se à capacidade do sistema de exibir e atualizar informações de forma dinâmica, instantânea e contínua, sem a necessidade de recarregar a página ou tomar ações adicionais do usuário. Essa funcionalidade é especialmente valiosa para criar experiências interativas e responsivas para os usuários.

Existem várias abordagens para implementar a atualização em tempo real em uma aplicação, mas a programação orientada a eventos é uma das mais comuns e eficazes. Veja uma visão geral de como a atualização de interfaces em tempo real pode ser introduzida em uma aplicação:

Uso de eventos: Identifique eventos relevantes que podem acionar a atualização em tempo real. Eles podem ser desencadeados por ações do usuário, como cliques em botões, envio de formulários, alterações de campos de entrada, ou eventos ocorridos no servidor, como atualizações de banco de dados ou notificações de outros sistemas.
Ouvintes de eventos: Registre ouvintes (listeners) para os eventos identificados. Esses ouvintes serão responsáveis por “ouvir” a ocorrência dos eventos e desencadear ações em resposta a eles.
Callbacks: Defina os callbacks, que são funções que serão acionadas quando os eventos ocorrerem. Esses callbacks serão responsáveis por atualizar a interface com as informações mais recentes e relevantes.
Atualização dinâmica: No momento que um evento ocorre, o ouvinte associado ao evento invoca o callback apropriado. Que por sua vez, atualiza a interface com os dados ou informações atualizadas, refletindo as mudanças em tempo real.
Técnicas assíncronas: Em muitos casos, a atualização em tempo real envolve a obtenção de dados do servidor ou de outras fontes externas. Nesses cenários, é importante utilizar técnicas assíncronas, como chamadas AJAX, para buscar os dados sem bloquear o fluxo de execução do programa. Isso permite que a interface continue sendo responsiva durante a atualização.
Experiência do usuário: Certifique-se de projetar a atualização em tempo real para proporcionar uma experiência de usuário agradável e intuitiva. Evite atualizações excessivas e certifique-se de que as informações sejam apresentadas de forma clara e concisa.

A atualização de interfaces em tempo real é uma funcionalidade poderosa que aumenta a interatividade e a usabilidade de uma aplicação, proporcionando aos usuários uma experiência mais imersiva e envolvente. Essa abordagem é amplamente utilizada em aplicativos de mensagens, redes sociais, aplicativos colaborativos, dashboards em tempo real e muitos outros casos de uso onde informações em tempo real são cruciais para a experiência do usuário.

saiba aplicar

O estudo sobre o paradigma orientado a eventos capacita o técnico em análise e desenvolvimento de sistemas a criar sistemas de software mais interativos, responsivos e eficientes, melhorando a experiência do usuário e a qualidade geral do software desenvolvido. Isso é fundamental em um campo em constante evolução, onde a adaptação a novas tecnologias e a entrega de soluções de alta qualidade são essenciais.

Para que você consiga compreender como isso funciona na prática, vamos juntos fazer uma programação orientada a eventos! Utilizando o site CodePen, você irá criar um código simples que responde a um evento de clique em um botão e exibe uma mensagem na página. Siga os passos a seguir para criar o código:

Acesse o site “CodePen”. Clique aqui para acessar o site.
No painel de edição do projeto na aba HTML, adicione o código presente na figura 01.

Figura 1 - Código HTML
Fonte: o autor.

#PraCegoVer: na linha 1 tem <!DOCTYPE html> na linha 2 tem <html> na linha 3 tem <head> e na linha 4 tem <title> Exemplo de Programação Orientada a Eventos </title> na linha 5 </head> e na linha 6 <body> na linha 7 <button id=”btnClique”>Clique Aqui</button> na linha 8 <div id=”mensagem”></div> e na linha 9 </body> finalizando com a linha 10 </html>.

Já na aba JavaScript, adicione o código presente na figura 02.

Figura 2 - Código HTML
Fonte: o autor.

#PraCegoVer: na linha temos o código const btnClique = document.getElementById(“btnClique”); na linha 2 const mensagem = document.getElementById(“mensagem”); a linha 3 está vazia, na linha 4 temos function exibirMensagem() { na linha 5 temos mensagem.textContent = “Você clicou no botão!”; na linha 6 } e a linha 7 vazia e finalizamos com a linha 8 com btnClique.addEventListner(“click”, exibirMensagem);.

Por fim, na aba CSS, adicione o código presente na figura 03 para estilizar o botão e a mensagem.

Figura 3 - Código CSS
Fonte: o autor.

#PraCegoVer: na linha 1 button { na linha 2 padding: 10px 20px; na linha 3 font-size: 16px; na linha 4 background-color: #007bff; na linha 5 color:#fff; na linha 6 border: none; na linha 7 cursor: pointer; e na linha 8 } com a linha 9 vazia. na linha 10 #mensagem { na linha 11 margin-top: 20px; na linha 12 font-size: 18px; e na linha 13 color: #007bff; e finalizando com a linha 14 com }.

Nesta prática, você utilizou a programação orientada a eventos para criar uma funcionalidade simples em que, ao clicar no botão “Clique Aqui”, a mensagem “Você clicou no botão!” é exibida abaixo do botão. Isso é possível através do uso do método “addEventListener”, que adiciona uma função de callback (“exibirMensagem”) para o evento de clique do botão. Essa prática é amplamente utilizada em desenvolvimento web para criar interfaces interativas e responsivas, garantindo uma melhor experiência do usuário e facilitando a manutenção e extensão do código.

REFERÊNCIAS

YEAGER, D. P. Object-Oriented Programming Languages and Event-Driven Programming. 1. ed. Boston: Mercury Learning & Information, 2014.

Page updated

Google Sites

Report abuse