Agência Comunica - DOCS
Agência Comunica - Marketing Digital
Sistema da Agência Comunica
Discente
Igor Leon Borges Silva Simim
igorleonsimim@gmail.com
Graduando em Análise e Desenvolvimento de Sistemas
Introdução
A Agência Comunica terá seu sistema próprio com informações e um login para seus clientes, tendo futuramente funcionalidades após o login dos mesmos.
Motivação/Justificativa
A motivação que me fez trazer este sistema como uma maneira de solucionar um problema de mercado ou de um cliente foi vista no final do ano de 2023. Onde, minha irmã, que possui uma Agência de Marketing Digital, pediu que eu fizesse um site simples para que eles pudessem fazer uma comunicação mais rápida com o cliente, no caso, que direcionassemos o cliente para o WhatsApp da agência. Porém, fui percebendo que eles utilizavam muito o Trello como um repositório de entrega de atividades para o cliente. Assim veio a ideia de criar um site web completo, que tivesse um login único para cada empresa, podendo ter uma exclusividade para cada cliente. Conseguindo também futuramente arquivar as entregas dessas atividades neste site, dentre outras diversas funcionalidades. Fazendo a unificação e implementação de um site que resolvesse ambas dores do cliente.
Objetivo Geral
Criar um sistema de uma agência que consiga integrar e simplificar as procuras dos clientes em um sistema próprio do agência.
Objetivos Específicos
- Trazer visibilidade para a agência;
- Quantificar em dados, os serviços e empresas consolidadas;
- Mostrar nossa equipe e suas individualidades;
- Gerenciamento das empresas/clientes;
- Gerenciamento dos serviços contratados pelas empresas;
- Quadro estático mostrando a nossa futura implementação, que contará com diversas funcionalidades;
- Tornar-se um sistema prazeroso para os nossos clientes, sendo limpo e bem estruturado (telas que trazem singularidade).
Projeto de Sistema
A Comunica é uma agência que surgiu da necessidade de fazer com que os clientes tivessem serviços de comunicação de marca em um lugar só. Atualmente possui pessoas da área de Social Media, Designer, Editor de Vídeo e Gestão de Tráfego Pago. Juntamos estratégias com autenticidade e gerenciamos as redes dos nossos clientes há 2 anos. Essa marca começou apenas com o Serviço de Social Media e hoje possui gestão de redes sociais, anúncios online e branding.
Requisitos
Requisitos Funcionais
| # | Requisito |
|---|---|
| RF-01 | Visualização, criação, exclusão e alteração das pessoas contratadas pela agência |
| RF-02 | Visualização, criação, exclusão e alteração das empresas que possuem contrato em vigor com a agência |
| RF-03 | Visualização, criação, exclusão e alteração dos serviços prestados pela agência |
| RF-04 | Visualização de dados cadastrados no banco da agência atráves de uma dashboard que conta com insights e gráficos |
| RF-05 | Api que redireciona o usuário para a rede social do WhatsApp, atráves de um icon |
| RF-06 | Api que redireciona o usuário para a rede social do Instagram, atráves de um icon |
| RF-07 | Api que redireciona o usuário para a rede social do Gmail, atráves de um icon |
| RF-08 | Geração de um pdf contendo um resumo das tabelas das empresas, serviços e pessoas contratadas. Bom lembrar que esse pdf é individual de cada tabela |
| RF-09 | Mapeamento de dados reais sobre serviços e pessoas contratadas nas telas do próprio cliente |
| RF-10 | Envio de email automatizado após o preenchimento e envio, de um formulário especifico na tela de contato direto com a agência |
| RF-11 | Opção da realização de login com autenticação hash, exclusivo para cada pessoa contratada pela agência |
| RF-12 | Opção da realização de login com autenticação hash, exclusivo para cada cliente/empresa que possui contrato em vigor com a agência |
Requisitos Não-Funcionais
| # | Tipo de Requisito | Requisito |
|---|---|---|
| RNF-01 | Segurança | A senha dos clientes são criptografadas |
| RNF-02 | Segurança | A senha das pessoas contratadas são criptografadas |
| RNF-03 | Desempenho | O software deverá rodar somente em dispositivos web |
| RNF-04 | Desempenho | O software deverá rodar somente em navegadores com acesso à internet |
| RNF-05 | Interoperabilidade | O site deverá fazer conexão com o banco de dados do site, no sistema em questão vai ser utilizado o MySQL |
Sistemas Similares
Escolhi duas plataformas para fazer a comparação.A primeira foi escolhida pelas telas apresentadas, e o outro por atingir o mesmo ramo, no caso, de agências.
Digital Marketing Agency Website (Projeto do Behance)
Projeto retirado do site Behance, pela clareza e ótimas telas apresentadas. Tendo em vista o meu propósito de home, me agradou, pela grande colocação de dados reais.
Link: https://www.behance.net/gallery/194831737/Digital-Marketing-Agency-Website
Agência de Marketing Digital Estação Indoor
Trata-se de uma agência de marketing digital, que tem como objetivo ajudar empresas, de todos os segmentos, a alcançar resultados online. Desenvolvem estratégias personalizadas para que as empresas/seus clientes possam decolar e ter uma visibilidade real na internet.
Link: https://estacaoindoor.com
Diagrama ER
Diagrama de casos de uso
Prototipação
Link das Telas no Figma: https://www.figma.com/design/XHuV4W4oAiF2VfOV98ZS9A/PD-I?node-id=0-1&t=hnthVOUrGc5c2hEK-1
Apresentação: https://www.canva.com/design/DAGZBWifwbg/BYUQ3HK69Fdx06iEKcaHWQ/edit?utm_content=DAGZBWifwbg&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton
Tecnologias Utilizadas
Back-end (API)
O backend foi desenvolvido em Javascript.
Javascript
Back-end (API)
Foi ultilizado a biblioteca NodeJS no backend.
NodeJS
Front-end (Web)
Foi ultilizado a biblioteca ReactJS no frontend.
ReactJS
Foi utilizado o framework de estilização Tailwind CSS no frontend.
Tailwind CSS
Banco de Dados
MySQL
Editor
Visual Studio Code
Repositório e Gestão do Projeto
GitLab
Cronograma
| Objetivo | Mar. | Abr. | Maio | Jun. | Jul. | Ago. | Set. | Out. | Nov. | Dez. |
|---|---|---|---|---|---|---|---|---|---|---|
| Escolher Orientador | ||||||||||
| Motivação e justificativa | ||||||||||
| Escrever objetivos | ||||||||||
| Definir linguagens e tecnologias | ||||||||||
| Levantamento de requisitos (MVP I) | ||||||||||
| Pesquisar sistemas similares | ||||||||||
| Milestones e Board de planejamento (MVP I) | ||||||||||
| Diagrama de Entidade Relacionamento | ||||||||||
| Diagrama de Casos de Uso | ||||||||||
| Prototipação de telas (MVP I) | ||||||||||
| Planejamento do Seminário II | ||||||||||
| Criação da home do site | ||||||||||
| Implementatação da API do WhatsApp | ||||||||||
| Implementatação da API do Instagram | ||||||||||
| Implementatação da API do Gmail | ||||||||||
| Criação da tela de login a partir do email e senha da empresa | ||||||||||
| Organização da documentação do Projeto (Readme/Wiki) | ||||||||||
| MVP do Projeto de Desenvolvimento I | ||||||||||
| Planejamento e organização do que será feito até a apresentação do PD II | ||||||||||
| Finalização de todas as rotas no backend, estando prontas pra se utilizar no frontend | ||||||||||
| Criação da tela de login por parte dos administradores | ||||||||||
| Criação das demais telas dos adminstradores | ||||||||||
| Desenvolvimento do artigo do projeto | ||||||||||
| Criação das telas em falta na parte do cliente | ||||||||||
| Desenvolvimento dos slides de apresentação para o PD II | ||||||||||
| Organização e atualização do gitlab de modo geral | ||||||||||
| Publicação do artigo do projeto no site do Medium |
Legenda
- Finalizada:
✅ - Iniciada:
🕐 - Atrasada:
❌ - Planejado:
📌