CENTRO UNIVERSITÁRIO AUGUSTO MOTTA (UNISUAM)

GRADUAÇÃO EM ANÁLISE E DESENVOLVIMENTO DE

SISTEMAS

GRUPO 013

GABRIEL DA SILVA ROCHA, ROBERT GABRIEL DO NASCIMENTO

CORREA, FABIO SUED DE MELO ROMÃO NETO, LUCAS DA SILVA DE
MOURA, FLÁVIO MARTINS DOS SANTOS JÚNIOR

TELECALL

Rio de Janeiro
2025
 GRUPO 013

GABRIEL DA SILVA ROCHA, ROBERT GABRIEL DO NASCIMENTO

CORREA, FABIO SUED DE MELO ROMÃO NETO, LUCAS DA SILVA DE
MOURA, FLÁVIO MARTINS DOS SANTOS JÚNIOR

TELECALL

Trabalho apresentado ao curso de

Análise e desenvolvimento de Sistemas
do Centro Universitário Augusto Motta
(UNISUAM) para a avaliação do
primeiro semestre.

Prof. Charles Sebastião Bastos.

Rio de Janeiro
2025
Sumário
[Link]ÇÃO ..................................................................................... 4
2. METODOLOGIA ............................................................................ 4
3. TECNOLOGIAS UTILIZADAS ........................................................ 5
5. CONCLUSÃO .................................................................................. 6
6. REFERÊNCIAS ............................................................................. 7
[Link]ÇÃO
O trabalho apresentado tem como objetivo o desenvolvimento de um site
Front-End1 para a empresa de telefonia, telecomunicações e serviços de
internet dedicada, banda larga e Wi-Fi, a Telecall. Com o propósito de melhorar
a comunicação e acesso aos serviços, a empresa decidiu criar uma Plataforma
de Comunicação como Serviço (CPaaS2).

A proposta busca atender às necessidades que a empresa precisa

atender, que apontam a criação de um ambiente virtual interativo e informativo
como solução para promover seus produtos e serviços. Assim, estruturado em
diferentes funcionalidades, o site visa a eficiência, a usabilidade e experiência
do usuário.

2. METODOLOGIA
O desenvolvimento do trabalho seguiu uma abordagem dividida nas
etapas descritas abaixo, de forma a garantir a organização, cumprimento dos
requisitos e o alinhamento as expectativas finais da Telecall.

1. Análise de Requisitos:
• Foi realizado um levantamento detalhando os requisitos exigidos
pela empresa que precisavam ser implementados.
• As funcionalidades priorizadas foram as de cadastro de usuário,
autenticação, navegação e a integração dos serviços CPaaS.

2. Planejamento e Estrutura:
• Definimos a estrutura do site em seis telas principais:
1. Tela principal: Responsável por exibir nossos
produtos e serviços para o usuário.
2. Tela de Login: Ponto de acesso dos usuários ao
sistema e opção para cadastro de novos usuários.
3. Tela de Cadastro de Usuário: Responsável pela
coleta de informações para a prospecção de novos
usuários da plataforma.
4. Tela de Suporte: Oferecido uma aba para suporte
para sanar as dúvidas dos clientes e usuários.
5. Tela de Quem somos: Aqui exibimos um pouco de
nossos feitos, feedback de clientes e um pouco de
como a empresa foi fundada.

1
Front-end corresponde a parte visual de sites e aplicações.
2
Sistema projetado para facilitar o tempo e esforço das empresas integrando suas
comunicações.
 6. Tela de Serviços: Por fim, caso queira entrar em
contato ou acessar diretamente pela plataforma
digital, tem a tela de serviços onde se vê os diversos
produtos para os clientes.

3. Desenvolvimento:
• O desenvolvimento começou a partir do brainstorm de como seria
o visual de cada seção do site e cores.
• Depois, foi feito um protótipo usando Figma3 e as condições de
designs discutidas no brainstorm.
• As telas foram desenvolvidas utilizando HTML e CSS, tendo
responsividade e interatividade.
• A validação dos formulários foi implementada com scripts feitos
por Javascript para atender os critérios.

3. TECNOLOGIAS UTILIZADAS
Para a execução do projeto, adotamos várias ferramentas para
viabilizar o desenvolvimento colaborativo. Organizar as etapas e a criação das
interfaces e a comunicação entre os membros. As tecnologias utilizadas foram:

1. Discord4 e Whatsapp5:
• Ferramentas essenciais para a comunicação dos membros,
utilizando-as para organizar pensamento, reunir para reuniões,
compartilhar pensamentos e discussões técnicas.
2. Visual Studio Code6:
• O Visual Studio Code (VS Code) foi o ambiente de
desenvolvimento de códigos utilizado pela equipe. Essa
ferramenta nos permitiu criar um código limpo e padronizado.
3. Figma:
• O Figma foi utilizado no processo de design da interface das
páginas do site. Ele permite a criação de protótipos e mockups
interativos que mostram clareza e identidade do visual antes de
serem implementadas em código.
4. Trello7:

3
Plataforma colaborativa para construção de design de interfaces e protótipos.
4
Discord é uma plataforma de chats de texto, vídeo conferências e chamadas de voz.
5
Whatsapp é um aplicativo de mensagens instantâneas de texto, imagens, vídeos e
áudios.
6
Editor de códigos para a criação de aplicações desenvolvidos pela Microsoft.
7
Trello é uma ferramenta de gestão de projetos em quadros.
 • O Trello foi utilizado como ferramenta de gestão do projeto para
organizar as tarefas e acompanhar o fluxo de trabalho. Utilizamos
por meio de quadros e listas para detalhar a ordem de objetivo de
cada tarefa.

Essas tecnologias foram escolhidas por sua acessibilidade, eficiência e

capacidade. Sua utilização contribuiu significativamente para o êxito do projeto,
a otimização da comunicação e ao planejamento da proposta.

5. CONCLUSÃO
A realização deste projeto permitiu colocar em prática os conteúdos
estudados em sala, reforçando os conceitos de HTML, CSS, JavaScript e
design de interface. A experiência contribuiu para o amadurecimento técnico,
especialmente no planejamento e construção de páginas web com foco em
usabilidade. Com a entrega do trabalho, foi possível observar a importância da
organização, da lógica aplicada no código e da escolha de ferramentas
adequadas para alcançar um resultado funcional e visualmente coerente.
 6. REFERÊNCIAS
1. ALURA. O QUE É FRONT-END E BACK-END? Disponível em:
[Link] Acessado em: 9
de maio de 2025.

2. SOPRANO DESIGN. O QUE É UMA CPAAS? – Plataforma de

Comunicação como Serviço. Disponível em:
[Link] Acesso
em: 9 maio. 2025.
3. ALURA. FIGMA: o que é a ferramenta, Design e uso. Disponível
em: [Link] Acessado em: 9 de maio de 2025.

4. DISCORD. O QUE É O DISCORD? Disponível em:

[Link] Acessado
em: 9 de maio de 2025.
5. WHATSAPP. ACERCA DO WHATSAPP. Disponível em:
[Link] Acessado em: 9 de
maio de 2025.
6. TREINAWEB. VS CODE: O que é e por que você deve usar?
Disponível em: [Link]
por-que-voce-deve-usar. Acessado em 9 de maio de 2025.

7. ALURA. TRELLO: o que é, como funciona e os principais

recursos. Disponível em: [Link] Acessado em
9 de maio de 2025.