Merge pull request #11 from ResidenciaTICBrisa/developer

Developer

docs/Atas/ata-reuniao1.md

@@ -6,7 +6,7 @@
 
 #### 1.Membros presentes e ausentes
 
-**Presentes:** William Bernardo, Max Rohrer, Igor Brandão e Gustavo
+**Presentes:** William Bernardo, Max Rohrer, Igor Brandão
 
 **Ausentes:** 
 

docs/Atas/ata-reuniao2.md

@@ -0,0 +1,39 @@
+
+### ATA DE REUNIÃO - SPRINT 0
+15/03/2024
+
+**Redator:** William Bernardo.
+
+#### 1.Membros presentes e ausentes
+
+**Presentes:** William Bernardo, Max Rohrer, Igor Brandão
+
+**Ausentes:** 
+
+#### 2.Considerações iniciais da reunião
+
+A reunião iniciou às 08:08 horas via Discord.
+
+#### 3.Pautas da reunião
+
+**1ª Pauta - Análise do plugin protótipo**
+
+Foi verificado o plugin protótipo, verificou-se que está bem encaminhado, porém com a necessidade de algumas alterações
+como: Criação de novos campos como título, ateração da ordem dos campos (seleção no mapa ser o último), além de alterar o nome de alguns campos (Nome).
+
+**2ª Pauta - Análise da documentação do projeto**
+
+Há falha/falta na documentação das primeiras semanas do projeto, faltando documentos importantes como: wireframe, roadmap, adicionar mais issues no backlog. A falha nesses pontos traz atrasos para acompanhamentos no projeto.
+
+**3ª Pauta - Definição de etapas iniciais**
+
+- Analise de similares
+- Especificação mínima do projeto (Fluxo de interação/funcionalidades)
+- Wireframe (prototipagem de baixo nível)
+- Criar Plano de Trabalho  (issues no Kanban? agrupar por releases/lançamento? prazos estimado)
+- Documentação básica da metodologia de desenvolvimento do código/plugin/registro das reuniões/ata/etc...
+
+
+#### 4.Considerações finais
+
+A reunião se encerrou às 08:50 horas.

docs/assets/stylesheets/extra.css

@@ -1,103 +1,6 @@
 @import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Ubuntu&display=swap');
 
-p {
-	text-align: justify;
+#t2g8-plugin-wordpress{
+    color: #4051b5;
+    font-weight: 500;
 }
-
-p img {
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
-  width: 100%;
-}
-
-body{
-  color: #000000;
-  background-color: #ffffff;
-  font-family: 'Montserrat', sans-serif;
-}
-
-.container-img {
-    position: relative;
-    width: 50%;
-}
-
-.row {
-    display: flex;
-}
-
-.image {
-    opacity: 1;
-    display: block;
-    width: 80%;
-    height: auto;
-    transition: .5s ease;
-    backface-visibility: hidden;
-    border-radius: 25%;
-    border: 2px solid black;
-}
-
-.middle {
-    transition: .5s ease;
-    opacity: 0;
-    position: absolute;
-    top: 50%;
-    left: 40%;
-    transform: translate(-50%, -50%);
-    -ms-transform: translate(-50%, -50%);
-    text-align: center;
-}
-
-.container-img:hover .image {
-    opacity: 0.3;
-}
-
-.container-img:hover .middle {
-    opacity: 1;
-}
-
-.text {
-    color: black;
-    width: auto; 
-    text-decoration: none;
-}
-
-.rotulo-extra{
-    background-color: #3f6ec6;
-    color:#ffffff;
-    border-radius: 4px;
-    padding: 7px;
-    font-size: 20px;
-}
-
-.img-guia-de-estilo{
-    width: 120px;
-    height: auto;
-    display: inline-block;
-    margin-left: 10px;
-    margin-right: 10px; 
-}
-
-.img-guia-de-estilo-tipografia{
-    width: 270px;
-    height: auto;
-    display: block;
-    margin-top: 10px;
-    margin-bottom: 10px; 
-}
-
-.img-guia-de-estilo-topo-tela{
-    width: 400px;
-    height: auto;
-    display: inline-block;
-    margin-left: 10px;
-    margin-right: 10px; 
-}
-
-.img-guia-de-estilo-botao{
-    width: 250px;
-    height: auto;
-    display: inline-block;
-    margin-left: 10px;
-    margin-right: 10px; 
-}

docs/backlog.md

@@ -3,10 +3,7 @@
 | Data       | Versão | Descrição            |         Autor             |
 |:----------:|:------:|:--------------------:|:-------------------------:|
 | 10/03/2024 | 0.1 | Criação do Documento Backlog com épicos, funcionalidades | @WillxBernardo |
-
-
-
-# Versão 1
+| 13/03/2024 | 0.2 | Criação do plugin protótipo que adiciona o formulário na página | @WillxBernardo |
 
 
 ## Épicos

docs/index.md

@@ -7,7 +7,7 @@ O projeto visa o desenvolvimento de um plugin para o WordPress que facilite o co
 ## Desenvolvedores
 
 <center>
-<table style="margin-left: auto; margin-right: auto;">
+<table style="margin-left: auto; margin-right: auto;" id="table">
     <tr>
         <td align="center">
             <a href="https://github.com/Max-Rohrer20">
@@ -30,7 +30,7 @@ O projeto visa o desenvolvimento de um plugin para o WordPress que facilite o co
         <td align="center">
             <a href="https://github.com/guslnhm">
                 <img style="border-radius: 50%;" src="https://avatars.githubusercontent.com/u/143884487?v=4" width="150px;"/>
-                <h5 class="text-center">Gustavo</h5>
+                <h5 class="text-center">Gustavo Linhares Lima</h5>
             </a>
         </td>
 </table>

docs/roadmap.md

@@ -0,0 +1,32 @@
+# **Roadmap para lançamento do Plugin para wordpress LGBTQ+ Connect**
+
+## **Fase 1: Planejamento e Preparação**
+
+### **Objetivos: Definir escopo do plugin e preparar o ambiente**
+
+### **Atividades:**
+    * Preparar ambiente de desenvolvimento docker
+    * Criar documentação no repositório do projeto
+    * Definir versionamento do projeto
+
+
+## **Fase 2: Design e Prototipagem**
+
+### **Objetivos: Criar a identidade visual do aplicativo e desenvolver protótipos**
+
+### **Atividades:**
+    * Design de interface do usuário (UI) e experiência do usuário (UX).
+    * Desenvolvimento de wireframes e protótipos interativos.
+    * Estudo sobre bibliotecas de georreferenciamento (Leaflet)
+
+
+## **Fase 3: Início do plugin (Formulário)**
+
+### **Objetivos: Criar o plugin que adiciona o formulário na página + funcionalidades + BD**
+
+### **Atividades:**
+    * Criação do arquivo principal do plugin
+    * Funcionalidade de adicionar um formulário na página
+    * Adicionar configurações de plotagem do mapa + funcionalidades (Biblioteca: Leaflet)
+    * O envio dos formulários serem armazenados no BD do admin da página
+    * Estilização do formulário

mkdocs.yml

@@ -16,4 +16,6 @@ nav:
         - Atas: 
                 - ata modelo: Atas/ata-modelo.md
                 - ata reunião 1: Atas/ata-reuniao1.md
-        - Backlog do produto: backlog.md
+                - ata reunião 2: Atas/ata-reuniao2.md
+        - Backlog do produto: backlog.md
+        - Roadmap: roadmap.md

plugin-prototipo/conexao_bd.php

@@ -42,4 +42,24 @@ function obter_informacoes_bd_wordpress() {
 if (!$conexao) {
     die('Erro de conexão com o banco de dados: ' . mysqli_connect_error());
 }
+
+// Verifica se a tabela existe, se não existir, cria a tabela
+$table_name = 'formulario';
+$query = "SHOW TABLES LIKE '{$table_name}'";
+$result = mysqli_query($conexao, $query);
+
+if (mysqli_num_rows($result) == 0) {
+    $create_table_query = "CREATE TABLE {$table_name} (
+        id INT(11) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
+        nome VARCHAR(255) NOT NULL,
+        email VARCHAR(255) NOT NULL,
+        latitude FLOAT(10, 6) NOT NULL,
+        longitude FLOAT(10, 6) NOT NULL,
+        descricao TEXT NOT NULL
+    )";
+
+    if (!mysqli_query($conexao, $create_table_query)) {
+        die('Erro ao criar a tabela: ' . mysqli_error($conexao));
+    }
+}
 ?>

plugin-prototipo/index.php

@@ -2,7 +2,7 @@
 /*
 Plugin Name: LGBTQ+ Connect
 Description: Adiciona um formulário simples a uma página WordPress com um mapa Leaflet.
-Version: 1.0
+Version: 0.2.0
 Author: Will Bernardo, Igor Brandão, Max Rohrer e Gustavo Linhares
 */
 
@@ -12,12 +12,14 @@
 // Adiciona a conexão com banco de dados
 include_once('conexao_bd.php');
 
+
 // Função para carregar os estilos CSS
 function carregar_estilos() {
     // Registra o arquivo CSS
     wp_register_style('meu_formulario_css', plugins_url('style_form.css', __FILE__));
     // Enfila o arquivo CSS registrado
     wp_enqueue_style('meu_formulario_css');
+
 }
 // Adiciona um gancho para carregar os estilos
 add_action('wp_enqueue_scripts', 'carregar_estilos');
@@ -29,23 +31,24 @@ function mostrar_formulario() {
     <head>
         <!-- Carregar ícones padrão do Leaflet do CDN -->
         <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css" />
     </head>
     <form id="meu_formulario" method="post">
-        <label for="nome" id="labelnome">Nome:</label>
+        <label for="nome" id="labelnome">Nome do local:</label>
         <input type="text" name="nome" id="nome" required><br>
 
         <label for="email">Email:</label>
         <input type="email" name="email" id="email" required><br>
+
+        <label for="descricao">Descrição:</label>
+        <textarea name="descricao" id="descricao" rows="4" cols="50" placeholder="Descrição ..." required></textarea>
 
         <!-- Container para o mapa -->
         <div id="mapa" style="height: 300px;"></div>
 
         <!-- Input de latitude e longitude --> 
         <input type="hidden" name="latitude" id="latitude" required>
         <input type="hidden" name="longitude" id="longitude" required>
-
-        <label for="descricao">Descrição:</label>
-        <textarea name="descricao" id="descricao" rows="4" cols="50" placeholder="Digite sua descrição aqui..." required></textarea>
 
         <input type="submit" value="Enviar">
     </form>
@@ -64,20 +67,18 @@ function mostrar_formulario() {
             attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
         }).addTo(map);
 
-
         // Variável global para armazenar o marcador atual
         var marcador;
-
-        // DIPOSITIVOS DESK
-        // Adiciona um pin no mapa quando clicado
+
+        // Adiciona um pin no mapa quando clicado o mouse 1
         map.on('click', function(e) {
             // Remove o marcador atual, se existir
             if (marcador) {
                 map.removeLayer(marcador);
             }
 
             // Adiciona um novo marcador na posição clicada
-            marcador = L.marker(e.latlng).addTo(map);
+            marcador = L.marker(e.latlng).addTo(map);            
 
             var lat = e.latlng.lat; // Latitude
             var lng = e.latlng.lng; // Longitude
@@ -87,14 +88,17 @@ function mostrar_formulario() {
             document.getElementById('longitude').value = lng;
         });
 
-        map.on('dblclick', function(e) {
+
+        // Remove o marcador quando clicado com o mouse 2
+        map.on('contextmenu', function(e) {
         // Verifica se existe um marcador atual
         if (marcador) {
             // Remove o marcador do mapa
             map.removeLayer(marcador);
         }
         });
 
+
     </script>
 
     <?php
@@ -106,17 +110,16 @@ function mostrar_formulario() {
 // Função para processar o formulário
 function processar_formulario() {
     if (isset($_POST['nome']) && isset($_POST['email']) && isset($_POST['descricao'])) {
-        // Aqui você pode adicionar código para processar os dados do formulário, como enviar um email ou salvar no banco de dados
+
+        // Filtrando o conteúdo enviado nos formulários
         $nome = sanitize_text_field($_POST['nome']);
         $email = sanitize_email($_POST['email']);
         $descricao = sanitize_textarea_field($_POST['descricao']);
 
-        // Exemplo: enviar um email
-        $para = '[email protected]';
-        $assunto = 'Novo formulário enviado';
-        $mensagem = 'Nome: ' . $nome . "\r\n";
-        $mensagem .= 'Email: ' . $email . "\r\n";
-        $mensagem .= 'Descrição: ' . $descricao . "\r\n";
+        // enviar email
+        $para = $email;
+        $assunto = 'Confirmação de envio do formulário';
+        $mensagem = 'Olá ' . $nome . ', seu formulário foi enviado com sucesso!';
         wp_mail($para, $assunto, $mensagem);
 
     // Verifica se o formulário foi enviado
@@ -167,4 +170,3 @@ function processar_formulario() {
 
 // Adiciona um gancho para processar o formulário quando o WordPress estiver processando solicitações
 add_action('init', 'processar_formulario');
-

plugin-prototipo/style_form.css

@@ -1,4 +1,4 @@
 #meu_formulario{
     border: 3px solid black;
     border-radius: 5px;
-}
+}