Introdução

Neste tutorial, você aprenderá a desenvolver um aplicativo de lista de tarefas em tempo real utilizando JavaScript, Node.js e Socket.io. O objetivo é criar uma aplicação onde usuários possam adicionar, editar e remover tarefas instantaneamente, sem a necessidade de recarregar a página. Durante o processo, abordaremos todos os componentes necessários, incluindo a configuração do servidor Node.js, a implementação do Socket.io para comunicação em tempo real e a construção da interface do usuário com HTML e JavaScript. Além disso, vamos explorar testes básicos para garantir que a aplicação funcione conforme o esperado. Este é um guia prático que ajudará desenvolvedores a entender como construir e integrar funcionalidades em tempo real em suas aplicações web.

Etapas

  1. Configuração do Ambiente de Desenvolvimento

    Certifique-se de ter o Node.js instalado em sua máquina. Você pode baixar a versão mais recente no site oficial do Node.js. Após a instalação, verifique a versão instalada utilizando o seguinte comando:

    commands
    # Verificar versão do Node.js
    node -v

  2. Criação do Projeto Node.js

    Crie um novo diretório para o seu projeto e inicialize um novo projeto Node.js. Execute os comandos abaixo para criar o diretório e inicializar o projeto:

    commands
    # Criar diretório do projeto
    mkdir lista-de-tarefas
    cd lista-de-tarefas
    # Inicializar o projeto
    npm init -y

  3. Instalação das Dependências

    Instale as dependências necessárias, incluindo o Express para o servidor e o Socket.io para comunicação em tempo real:

    commands
    npm install express socket.io

  4. Configuração do Servidor Express

    Crie um arquivo chamado `server.js` no diretório do projeto. Este arquivo conterá a configuração do servidor Express e a integração com o Socket.io. Insira o seguinte código no arquivo:

    server.js
    const express = require('express');
const http = require('http');
const socketIo = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = socketIo(server);

app.use(express.static('public'));  

app.get('/', (req, res) => {
    res.sendFile(__dirname + '/public/index.html');
});

io.on('connection', (socket) => {
    console.log('Novo usuário conectado');

    socket.on('nova_tarefa', (tarefa) => {
        io.emit('nova_tarefa', tarefa);
    });

    socket.on('remover_tarefa', (tarefaId) => {
        io.emit('remover_tarefa', tarefaId);
    });
});

const PORT = process.env.PORT || 3000;
server.listen(PORT, () => {
    console.log(`Servidor rodando na porta ${PORT}`);
});

  5. Criação da Interface do Usuário

    Crie uma pasta chamada `public` e dentro dela, crie um arquivo `index.html`. Neste arquivo, você irá construir a interface da aplicação de lista de tarefas. Insira o seguinte código:

    index.html
    <!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lista de Tarefas</title>
    <script src="https://cdn.socket.io/4.0.0/socket.io.min.js"></script>
</head>
<body>
    <h1>Lista de Tarefas</h1>
    <input id="tarefaInput" type="text" placeholder="Adicione uma nova tarefa...">
    <button id="adicionarBtn">Adicionar</button>
    <ul id="listaTarefas"></ul>

    <script>
        const socket = io();
        const listaTarefas = document.getElementById('listaTarefas');
        const tarefaInput = document.getElementById('tarefaInput');
        const adicionarBtn = document.getElementById('adicionarBtn');

        adicionarBtn.addEventListener('click', () => {
            const tarefa = tarefaInput.value;
            if (tarefa) {
                socket.emit('nova_tarefa', tarefa);
                tarefaInput.value = '';
            }
        });

        socket.on('nova_tarefa', (tarefa) => {
            const li = document.createElement('li');
            li.textContent = tarefa;
            listaTarefas.appendChild(li);
        });
    </script>
</body>
</html>

  6. Testando a Aplicação

    Execute o servidor para iniciar sua aplicação. Utilize o comando abaixo e acesse `http://localhost:3000` no seu navegador:

    commands
    node server.js

  7. Melhorando a Aplicação com Remoção de Tarefas

    Para permitir que os usuários removam tarefas, você deve modificar o código da `index.html` para adicionar a funcionalidade de remoção. Atualize o código do arquivo `index.html` para incluir o seguinte:

    updated_index.html
    <!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lista de Tarefas</title>
    <script src="https://cdn.socket.io/4.0.0/socket.io.min.js"></script>
</head>
<body>
    <h1>Lista de Tarefas</h1>
    <input id="tarefaInput" type="text" placeholder="Adicione uma nova tarefa...">
    <button id="adicionarBtn">Adicionar</button>
    <ul id="listaTarefas"></ul>

    <script>
        const socket = io();
        const listaTarefas = document.getElementById('listaTarefas');
        const tarefaInput = document.getElementById('tarefaInput');
        const adicionarBtn = document.getElementById('adicionarBtn');

        adicionarBtn.addEventListener('click', () => {
            const tarefa = tarefaInput.value;
            if (tarefa) {
                socket.emit('nova_tarefa', tarefa);
                tarefaInput.value = '';
            }
        });

        socket.on('nova_tarefa', (tarefa) => {
            const li = document.createElement('li');
            li.textContent = tarefa;
            const btnRemover = document.createElement('button');
            btnRemover.textContent = 'Remover';
            btnRemover.onclick = () => {
                socket.emit('remover_tarefa', tarefa);
                li.remove();
            };
            li.appendChild(btnRemover);
            listaTarefas.appendChild(li);
        });
    </script>
</body>
</html>

  8. Implementação de Testes Básicos

    Para garantir a funcionalidade da aplicação, crie um arquivo de teste básico. Crie uma pasta chamada `tests` e dentro dela crie um arquivo `test.js`. Insira o seguinte código para realizar testagens manuais da aplicação:

    test.js
    // Este arquivo é para teste manual da aplicação.
// Verifique se a aplicação está respondendo como esperado usando o navegador e o console.

console.log('Teste manual: Inicie o servidor e acesse a aplicação no navegador.');

Conclusão

Neste tutorial, você aprendeu a construir um aplicativo de lista de tarefas em tempo real utilizando JavaScript, Node.js e Socket.io. Iniciamos com a configuração do ambiente e a construção do servidor, seguido pela implementação de uma interface simples onde usuários podem adicionar e remover tarefas. Além disso, abordamos a importância de testar o aplicativo. Com esse conhecimento, você está preparado para criar aplicações interativas e dinâmicas que utilizam comunicação em tempo real.

Hashtags

#JavaScript #NodeJS #SocketIO #DesenvolvimentoDeSoftware #AplicativosWeb