Scribd Logo
Carregar

Bem-vindo(a) ao Scribd!

  • 1 visualizações

    Projecto Aplicativo de Conversa

    Enviado por

    kylefamor9

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato TXT, PDF, TXT ou leia online no Scribd

    Projecto Aplicativo de Conversa

    Enviado por

    kylefamor9
    1 visualizações7 páginas

    Direitos autorais

    © © All Rights Reserved

    Formatos disponíveis

    TXT, PDF, TXT ou leia online no Scribd

    Você considera este documento útil?

    Este conteúdo é inapropriado?

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato TXT, PDF, TXT ou leia online no Scribd
    Fazer download em txt, pdf ou txt
    1 visualizações7 páginas

    Projecto Aplicativo de Conversa

    Enviado por

    kylefamor9

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato TXT, PDF, TXT ou leia online no Scribd
    Fazer download em txt, pdf ou txt
    de 7

    **Projecto: Aplicativo de Conversa**

    * Implementação da Interface de Conversa


    * Integração com a Lógica de Negócios
    * Testes e Depuração
    * Deploy
    * Monitoramento e Suporte
    * Personalização
    * Integração com outras funcionalidades (Redes Sociais, Aplicativos Móveis,
    Inteligência Artificial)
    * Segurança
    * Melhoria Contínua
    * Acessibilidade
    * Análise de Dados
    * Suporte ao Multilanguagem
    * Integração com Plataformas de Colaboração
    * Notificações
    * Sistema de Recompensas

    Como o aplicativo é um sistema de conversa, vamos começar a implementar as


    funcionalidades da interface de conversa. Vamos usar uma abordagem de arquitetura
    do software que combine as seguintes tecnologias:

    * Front-end: HTML, CSS e JavaScript


    * Back-end: Node.js com Express.js
    * Banco de dados: MongoDB

    Vamos começar a implementar o front-end do aplicativo.

    **Página de Conversa**

    Vamos criar uma página de conversa que exiba as mensagens enviadas e recebidas
    entre os usuários. Vamos usar HTML e CSS para criar a estrutura da página.

    ```html
    <!-- index.html -->
    <!DOCTYPE html>
    <html>
    <head>
    <title>Aplicativo de Conversa</title>
    <link rel="stylesheet" href="styles.css">
    </head>
    <body>
    <div class="container">
    <h1>Conversa</h1>
    <ul id="messages"></ul>
    <input id="input" type="text" placeholder="Digite sua mensagem...">
    <button id="send">Enviar</button>
    </div>

    <script src="script.js"></script>
    </body>
    </html>
    ```

    ```css
    /* styles.css */
    body {
    font-family: Arial, sans-serif;
    }

    .container {
    width: 80%;
    margin: 40px auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }

    #messages {
    list-style: none;
    padding: 0;
    margin: 0;
    }

    #messages li {
    padding: 10px;
    border-bottom: 1px solid #ccc;
    }

    #input {
    width: 80%;
    height: 30px;
    padding: 10px;
    font-size: 16px;
    }

    #send {
    width: 20%;
    height: 30px;
    padding: 10px;
    font-size: 16px;
    background-color: #4CAF50;
    color: #fff;
    border: none;
    border-radius: 5px;
    }
    ```

    **JavaScript**

    Vamos usar JavaScript para criar a lógica de interação da página de conversa. Vamos
    criar um objeto `Message` que represente as mensagens enviadas e recebidas.

    ```javascript
    // script.js
    const messageList = document.getElementById('messages');
    const input = document.getElementById('input');
    const sendButton = document.getElementById('send');

    let messages = [];

    class Message {
    constructor(text, from) {
    this.text = text;
    this.from = from;
    this.date = new Date();
    this.id = Math.random();
    return this;
    }
    }

    function addMessage(message) {
    const messageHTML = `
    <li>
    <span style="font-weight: bold;">${message.from}</span>: ${message.text}
    <span style="font-size: small;">
    (${message.date.toLocaleTimeString()})</span>
    </li>
    `;
    messageList.innerHTML += messageHTML;
    }

    function send() {
    const text = input.value.trim();
    if (text !== '') {
    const message = new Message(text, 'Você');
    messages.push(message);
    addMessage(message);
    input.value = '';
    sendButton.disabled = true;
    setTimeout(() => {
    sendButton.disabled = false;
    }, 1000);
    }
    ```

    Essa é a parte inicial do aplicativo. Vamos continuar implementando as


    funcionalidades do back-end e do banco de dados.

    Aqui está o código do backend completo atualizado para usar o banco de dados MySQL
    com SQL:

    **database.js**
    ```javascript
    const mysql = require('mysql');

    const db = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: 'your_password',
    database: 'conversa'
    });

    db.connect((err) => {
    if (err) {
    console.error('Erro ao se conectar ao banco de dados:', err);
    return;
    }
    console.log('Conectado ao banco de dados');
    });

    module.exports = db;
    ```
    **server.js**
    ```javascript
    const express = require('express');
    const app = express();
    const db = require('./database.js');

    // Rota para receber mensagens


    app.post('/messages', (req, res) => {
    const message = req.body;
    const query = `INSERT INTO messages (text, from, date) VALUES (?, ?, ?)`;
    db.query(query, [message.text, message.from, new Date()], (err, results) => {
    if (err) {
    console.error(err);
    res.status(500).send({ message: 'Erro ao enviar mensagem' });
    } else {
    res.send({ message: 'Mensagem enviada com sucesso' });
    }
    });
    });

    // Rota para obter todas as mensagens


    app.get('/messages', (req, res) => {
    const query = `SELECT * FROM messages`;
    db.query(query, (err, results) => {
    if (err) {
    console.error(err);
    res.status(500).send({ message: 'Erro ao obter mensagens' });
    } else {
    res.send(results);
    }
    });
    });

    // Rota para obter mensagem por id


    app.get('/messages/:id', (req, res) => {
    const id = req.params.id;
    const query = `SELECT * FROM messages WHERE id = ?`;
    db.query(query, [id], (err, results) => {
    if (err) {
    console.error(err);
    res.status(500).send({ message: 'Erro ao obter mensagem' });
    } else {
    res.send(results[0]);
    }
    });
    });

    // Iniciar servidor
    app.listen(3000, () => {
    console.log('Servidor iniciado na porta 3000');
    });
    ```

    Criar a base de dados

    Inicialize o WAMP Server e abra o phpMyAdmin.


    Clique em "New" para criar uma nova base de dados.
    Digite o nome da base de dados (por exemplo, "conversa") e clique em "Create".
    Criar a tabela de mensagens

    Clique na base de dados recém-criada e clique em "SQL" para executar um comando


    SQL.
    Digite o comando SQL para criar a tabela de mensagens:

    CREATE TABLE messages (


    id INT PRIMARY KEY AUTO_INCREMENT,
    text TEXT,
    from VARCHAR(255),
    date DATE
    );

    Clique em "Go" para executar o comando SQL.

    Vamos começar a implementar as funcionalidades do aplicativo.

    **Implementar a lógica de negócios**

    Vamos começar criando um arquivo `message.js` para lidar com as mensagens. Nele,
    vamos criar uma classe `Message` que representará as mensagens:
    ```javascript
    // message.js
    class Message {
    constructor(id, text, from, date) {
    this.id = id;
    this.text = text;
    this.from = from;
    this.date = date;
    }
    }

    module.exports = Message;
    ```
    Agora, vamos criar um arquivo `messageService.js` para lidar com as operações de
    mensagens. Nele, vamos criar uma classe `MessageService` que irá lidar com as
    operações de mensagens:
    ```javascript
    // messageService.js
    const Message = require('./message.js');
    const db = require('../database.js');

    class MessageService {
    async getAllMessages() {
    const query = `SELECT * FROM messages`;
    const results = await db.query(query);
    return results.map((row) => new Message(row.id, row.text, row.from, row.date));
    }

    async getMessageById(id) {
    const query = `SELECT * FROM messages WHERE id = ?`;
    const results = await db.query(query, [id]);
    return results[0] && new Message(results[0].id, results[0].text,
    results[0].from, results[0].date);
    }

    async sendMessage(message) {
    const query = `INSERT INTO messages (text, from, date) VALUES (?, ?, ?)`;
    await db.query(query, [message.text, message.from, new Date()]);
    }
    }

    module.exports = MessageService;
    ```
    **Implementar a autenticação e autorização**

    Vamos criar um arquivo `auth.js` para lidar com a autenticação e autorização. Nele,
    vamos criar uma função `authenticate` que verificará se o usuário é válido:
    ```javascript
    // auth.js
    const db = require('../database.js');

    async function authenticate(username, password) {


    const query = `SELECT * FROM users WHERE username = ? AND password = ?`;
    const results = await db.query(query, [username, password]);
    return results.length > 0;
    }

    module.exports = { authenticate };
    ```
    Agora, vamos atualizar o arquivo `server.js` para utilizar a autenticação e
    autorização:
    ```javascript
    // server.js
    const express = require('express');
    const app = express();
    const db = require('./database.js');
    const MessageService = require('./messageService.js');
    const auth = require('./auth.js');

    app.use(express.json());

    app.post('/messages', (req, res) => {


    const message = req.body;
    if (!auth.authenticate(req.headers.username, req.headers.password)) {
    res.status(401).send({ message: 'Unauthorized' });
    } else {
    MessageService.sendMessage(message).then(() => {
    res.send({ message: 'Mensagem enviada com sucesso' });
    }).catch((err) => {
    res.status(500).send({ message: 'Erro ao enviar mensagem' });
    });
    }
    });

    app.get('/messages', (req, res) => {


    if (!auth.authenticate(req.headers.username, req.headers.password)) {
    res.status(401).send({ message: 'Unauthorized' });
    } else {
    MessageService.getAllMessages().then((messages) => {
    res.send(messages);
    }).catch((err) => {
    res.status(500).send({ message: 'Erro ao obter mensagens' });
    });
    }
    });
    app.get('/messages/:id', (req, res) => {
    if (!auth.authenticate(req.headers.username, req.headers.password)) {
    res.status(401).send({ message: 'Unauthorized' });
    } else {
    MessageService.getMessageById(req.params.id).then((message) => {
    res.send(message);
    }).catch((err) => {
    res.status(404).send({ message: 'Mensagem não encontrada' });
    });
    }
    });

    app.listen(3000, () => {
    console.log('Servidor iniciado na porta 3000');
    });
    ```
    Isso é um começo! Agora você tem uma estrutura básica para lidar com as mensagens e
    a autenticação e autorização.

    Você também pode gostar