Evento: XXVII Jornada de Pesquisa

DESENVOLVIMENTO DE UM FRONTEND PARA UM SISTEMA DE CLÍNICA

VETERINÁRIA1

DEVELOPMENT OF A FRONTEND FOR A VETERINARY CLINIC SYSTEM

Maikon Cismoski Dos Santos2, Rubia De Pellegrin3 , Ricardo Vanini Dallasen4, André
Fernando Rollwagen5, Daniel Delfini Ribeiro6, Vanessa Lago Machado7

1
Pesquisa desenvolvida no IFSUL - Instituto Federal de Educação Ciência e Tecnologia Sul Rio-Grandense,
Câmpus Passo Fundo.
2
Docente do Curso de Bacharelado em Ciência da Computação do IFSUL - Câmpus Passo Fundo
3
Discente do Curso de Bacharelado em Ciência da Computação do IFSUL - Câmpus Passo Fundo
4
Docente do Curso de Bacharelado em Ciência da Computação do IFSUL - Câmpus Passo Fundo
5
Docente do Curso de Bacharelado em Ciência da Computação do IFSUL - Câmpus Passo Fundo
6
Docente do Curso de Bacharelado em Ciência da Computação do IFSUL - Câmpus Passo Fundo
7
Docente do Curso de Bacharelado em Ciência da Computação do IFSUL - Câmpus Passo Fundo

RESUMO
A saúde animal tornou-se importante após a domesticação de animais, bem como as clínicas
veterinárias que focam no cuidado da saúde animal. Este trabalho propõe o desenvolvimento
da parte gráfica de um sistema de clínica veterinária, denominada frontend, a qual foi
projetada para permitir a automação de tarefas de uma clínica, tais como controle de
consultas, exames, internações e o gerenciamento do ambiente dos animais, possibilitando a
centralização das informações em um único local. O frontend foi desenvolvido com base em
uma análise de requisitos realizada e é composto por sete telas, a tela inicial listando as
atividades recentes no sistema, a tela de cadastro e as telas das páginas de animais, gaiolas,
internações, exames e consultas.

Palavras-chave: Saúde Animal. Frontend. Gaiola. Ambiente, Clínica veterinária.

ABSTRACT
Animal health became important after the domestication of animals, as well as veterinary
clinics that focus on animal health care. This work proposes the development of the graphic
part of a veterinary clinic system, called frontend, which was designed to allow the
automation of tasks of a clinic, such as control of consultations, exams, hospitalizations and
the management of the animals' environment, allowing centralization of information in a
single location. The frontend was developed based on a requirements analysis carried out and
is composed of seven screens, the home screen listing recent activities in the system, the
registration screen and the screens for the pages of animals, cages, hospitalizations, exams
and consultations.

Keywords: Animal health. Frontend Cage. Environment, Veterinary Clinic.

1
INTRODUÇÃO
Após os animais começarem a serem domesticados sob domínio do homem, muitos
mamíferos foram domesticados. Atualmente, os mais desejados são animais menores como
cães e gatos (MADELLA-OLIVEIRA, QUIRINO, RUIZ-MIRANDA, FONSECA, 2011).
Como todo ser vivo, os animais também possuem fragilidades, uma delas é a saúde.
Para isso existem clínicas que cuidam da saúde do animal. Onde os animais podem ser
examinados, medicados e mantidos em ambientes higienizados sob cuidado médico de um
profissional de saúde animal. A domesticação pode-se referir ao convívio de um animal em
casa sob o domínio do homem ou criado e reproduzido (HEMMER,1990).
Atualmente, o mercado está competitivo entre as empresas, existe a necessidade de
maior produção, qualidade e menor custo. Uma das melhores maneiras de melhorar essa
gestão é o uso de uma tecnologia que realizará parte da gestão e análise dos recursos.
A tecnologia está muito presente no mundo, o gerenciamento através de sistemas em
empresas de pequeno e grande porte, vem chamando a atenção de administradores de
empresas. O uso de software já vem sendo usado para gestão e está em constante crescimento
no quesito e adesão das empresas, gerando melhor gerenciamento. Dessa forma, faz-se
necessário um sistema de clínica veterinária que atende animais domésticos. Um projeto de
sistema de gestão irá automatizar processos como direcionamento das consultas e
gerenciamento do ambiente, permitindo agilizar processos, aumentar a possibilidade de
redução de gastos e aumentar a produção. Um sistema que permite centralizar as informações,
permitindo localizar as informações e evitar gastos com material impresso.
O objetivo principal deste trabalho é o desenvolvimento da parte visual do sistema,
chamada de frontend, a qual foi projetada para atender um sistema de gerenciamento de uma
clínica veterinária de animais domésticos. A implementação do frontend foi concebida com
base na análise de requisitos realizada e no projeto e modelagem do sistema.

2
REFERENCIAL TEÓRICO
Nesta seção são abordadas as linguagens e ferramentas que podem ser empregadas
para o desenvolvimento da parte externa, visual para o usuário, conhecida como frontend,
mostrando os conceitos e características dos recursos.

HTML
Em 1994 ocorreu a maior conferência mundial sobre conteúdo web da qual surgiu a
ideia da versão 2.0 do HTML e neste momento então é criado o W3C. O W3C é uma
organização de padronização da World Wide Web, um consórcio com 450 membros com a
finalidade de estabelecer padrões para web. Oficialmente o HTML 2.0 foi lançado em 1995.
Em 1996 o W3C começa o desenvolvimento de uma nova versão do HTML e indo para a
versão HTML 3.2 . Após isso veio a versão 4.0 e 4.01 com a inclusão de folhas de
estilos(css). E atualmente o HTML está na versão 5.0 proposto pela empresa Opera Software
suportado por muitos navegadores como o Chrome, Safari, Konqueror do Linux e dispositivos
com sistema android.( Flatschart, Fábio, 2011)
O HTML é uma linguagem de programação principalmente usada para construção de
páginas web. Com objetivo de modificar textos através de tags de forma que satisfaça a
necessidade do usuário, permitindo também usar imagens e documentos.
Os documentos HTML são arquivos de texto em formato ASCII, não possui
diferenciação entre maiúsculas e minúsculas e possui extensão “.html” ou “.htm”. Neste tipo
de linguagem as instruções são escritas em forma de marcação chamadas tags em pares. Esses
pares de tags delimitam textos a serem modificados a tag identificam o tipo de comando.
Essas tags podem conter parâmetros específicos.
O HTML possui uma estrutura padrão que é o cabeçalho e o corpo do texto. E todo o
documento HTML deve ser iniciado com a tag “<html>” e finalizado com “</html>”. O
cabeçalho de um documento HTML é feito dentro das tags “<head>” e “</head>”. Dentro do
cabeçalho é definido o título e as importâncias caso necessário. O corpo do documento é
delimitado pela tag “<body>” e “</body>”.

3
 Documentos HTML podem ser criados e editados em qualquer editor de texto. Um
modo de testar é criando um documento com as tags padrões descritas anteriormente em um
editor de texto, salvando com a extensão “.html”, abrindo-o em um navegador e visualizar o
texto formatado no navegador.

CSS
O CSS é uma linguagem de modificação das tags do documento web. Podendo
formatar textos, listas, imagens ou qualquer outro elemento contigo no HTML. Realizando a
manipulação visual dos elementos. Sua sintaxe é simples, primeiro define o elemento a ser
formatado e dentro de chaves são inseridas as modificações. Essas instruções são salvas em
arquivos de texto também com extensão “.css”.
Essas instruções são colocadas em um documento que possui regras e um esquema.
O CSS também é conhecido como a folha de estilo. Também pode ser inserido dentro do
documento HTML com as tags “<style>” e “</style>” dentro das tags.
O CSS foi lançado inicialmente em 1994 por Hakon Lie para facilitar a programação
e estilização de sites. No ano seguinte ocorreu a criação do WC3 que se interessou pela
ferramenta de edição. Pois o HTML tornava mais difícil e complexa a edição visual. Em 1996
foi lançado o CSS 1 com recomendação da W3C e dois anos depois foi lançado o CSS 2. O
CSS atualmente encontra-se na versão 3.0 onde as alterações serão em módulos ao invés de
atualizar todo CSS. Enquanto o HTML estrutura o conteúdo da página, o CSS formata esse
conteúdo. Alguns navegadores que suportam a versão 3.0 do CSS são Firefox, Chrome, Opera
e Safari (Guimarães M. O. de Barros, Isabelle e Araujo dos Santos,Carlos Felipe, 2008).

JAVASCRIPT
A linguagem Javascript é usada para a criação de scripts para páginas web que
permite criar funcionalidades, verificar e modificar formulários e outros. Criada em 1994 por
Brendan Eich na empresa Netscape. Fica dentro do HTML que permite funcionalidades que o
HTML não possui. Esses scripts são escritos em formato de texto e executados pelo
navegador. Permite criar pequenas instruções dentro do código HTML, gerar números,

4
processar dados, verificar e manipular dados, alterar elementos e seus valores, criar elementos
HTML. Muitas dessas funcionalidades o próprio HTML o permite realizar deixando a
aplicação limitada e estática. O Javascript é uma linguagem que possibilita desenvolvimento
estruturado e orientado a objetos (GRILLO, 2008).
Para inserir código Javascript é necessário colocá-las dentro das tags “<script>” e
“</script>”. O Javascript é orientado a objeto, por isso usa sintaxe “document”. Como o CSS,
o Javascript também permite criar arquivos individuais com a linguagem com a extensão “.js”
e importando dentro do documento HTML. O Javascript permite principalmente a criação de
métodos e nesses métodos podem ser definidas modificações. Os métodos podem conter
estruturas de condição, repetição, operadores, operadores de comparação, tratamento de
exceções, validação de formulários, adicionar e remover elementos, usar cookies e etc.
A primeira versão da linguagem foi desenvolvida em 1996 para usar no navegador
Netscape Navigator e Internet Explorer. Devido a problemas de marca registrada, em 1997 foi
lançada uma versão com o nome ECMAScript. Alguns recursos da linguagem eram
destinados para usar no navegador Mozilla e depois removidos nas últimas versões. Foram
seis versões lançadas ao todo, a última versão foi lançada em 2018 a versão 2.0 com o padrão
ECMA-262 (GRILLO, 2008).

FRAMEWORK BOOTSTRAP
O framework Bootstrap disponibiliza muitos recursos para o desenvolvimento da
parte visual do sistema como estilos e templates para melhorar o desenvolvimento web e
desenvolvimento de interfaces responsivas. Os templates são documentos que apresentam
apenas o conteúdo visual. As interfaces responsivas são sistemas que se adaptam ao tamanho
de tela dos dispositivos que acessam ao sistema de forma que fique organizado e que tudo
fique aparecendo.
O Bootstrap pode ser baixado e usado gratuitamente, realizando a importação do
arquivo no HTML ou incluir diretamente o link do Bootstrap na tag de importação dentro do
HTML. Para usar o Bootstrap é indicado ter uma noção de HTML, CSS e Javascript pois

5
possui componentes com essas linguagens. Com o Bootstrap é possível definir os campos e já
definir a estilização e deixar responsivo apenas editando as tags (SILVA, 2015).
O bootstrap permite criar um padrão visual, resumidamente é um grande arquivo
CSS com muita documentação e possui muitos componentes prontos e reutilizáveis.
Desenvolver diretamente com CSS tornaria mais trabalhoso e mais demorado (SOUZA,
2018).

TRABALHOS RELACIONADOS
Nesta seção é realizada a análise de sistemas de clínicas veterinárias destacando suas
funcionalidades, vantagens e desvantagens. A análise foi feita em dois sistemas, o
SGPET(Software para gestão de pet shop e clínica veterinária) e o WebVeterinária.
O SGPET é um sistema desktop para gerenciamento e controle de caixa, cadastros,
serviços, vendas, produtos e relatórios. Desenvolvido por Priscila Alves de Lima como
requisito para conclusão de curso de graduação em Informática e cidadania. Todo
desenvolvido em linguagem de programação Delphi e banco de dados Firebird orientado a
objetos (Alvez, 2015).
Na parte visual possui um menu principal, campo de pesquisa, um calendário, hora e
por fim a tabela com as informações. Todo esse sistema é acessado após acessar a tela de
login. Na página inicial do software existem várias opções a escolha: atendimento, agenda,
animais, clientes, produtos, extrato dos clientes e opção de atualização do sistema. O software
SGPET é bem intuitivo com foco principal na parte financeira e nas informações dos animais,
com um design simples (Alvez, 2015).
O sistema web WebVeterinária é um sistema focado em armazenar informações dos
animais como consultas, vacinas e exames. O sistema foi desenvolvimento em linguagem de
programação Java para Web, tendo como objetivo principal auxiliar o médico veterinário em
consultas. O cliente (proprietário do animal) também pode ter acesso ao sistema com
credenciais a informações como características físicas, comportamentais, peso, vacinas,
diagnósticos e consultas realizadas. O software também permite criar relatórios das
informações dos animais (RIOS, 2010).

6
 O WebVeterinaria foi desenvolvido por Gabriel Fernandes Rios como trabalho de
conclusão de curso de graduação, em linguagem de programação Java com bibliotecas JSP,
JSF, JasperReports e o framework Hibernate. O WebVeterinária tem por objetivo principal a
consulta e análise das informações dos animais. Como o SGPET, o WebVeterinária também
realiza o armazenamento de informações dos clientes e dos animais. Seu diferencial é possuir
um design com padrões mais atuais.
Cada um dos sistemas descritos com funcionalidades específicas em comum. Porém
nenhum deles possui gerenciamento do ambiente da clínica com foco no conforto e
disponibilidade de ambiente para o animal. O segundo sistema possui o design mais atual e
percepção dos componentes de fácil compreensão.

PROJETO DO SISTEMA
Nesta seção é descrito o projeto do sistema proposto. Com o objetivo de descrever as
funcionalidades, foi realizada a análise e o levantamento dos requisitos do sistema, a qual foi
baseada em pesquisas de sistemas relacionados. A Figura 1 ilustra o diagrama de casos de uso
criado, contendo as funcionalidades e os usuários do sistema.
O administrador do sistema é responsável pelo cadastro, alteração e exclusão dos
clientes, dos animais, das consultas, dos agendamentos de exames. Após o cadastro do cliente
e do animal é possível realizar o agendamento da consulta ou exame. Em caso de internações,
os animais são alocados nas gaiolas disponíveis, conforme seu tamanho.
O cliente fica encarregado pela confirmação da consulta, exame ou internação,
autorização de exames e da disponibilização de contatos. Os médicos podem alterar o
cadastro dos animais, inserir informações das consultas, adicionar resultados de diagnósticos,
solicitar o agendamento de exames e receitar medicamentos. Além disso, o médico pode
consultar informações dos animais, como seu histórico.

7
 Figura 1: Diagrama de caso de uso

Fonte: Do autor (2022)

Para o melhor entendimento e modelagem do sistema, foi criado um diagrama de
classes para a representação da estrutura com classes, atributos, métodos, relacionamentos e
cardinalidades, conforme mostra a Figura 2.
Figura 2: Diagrama de classes

Fonte: Do autor (2022)

8
 Primeiramente, as informações do cadastro de pessoas são herdadas para os médicos
e para o cliente. As consultas herdam algumas informações obtidas no agendamento, tais
como data, horário, médico, cliente e animal. Conforme é definido na consulta é realizado o
agendamento dos exames e a colocação do animal em internação. O administrador do sistema
fica responsável pela criação do login para acesso ao sistema, sendo que este login é
vinculado a uma pessoa que deve estar cadastrada. O cadastro do animal é vinculado à
internação e à gaiola onde ficaram alocadas.

METODOLOGIA
O desenvolvimento do frontend do sistema foi embasado na análise e levantamento de
requisitos realizada. O framework Bootstrap foi empregado no desenvolvimento dos
componentes da interface de usuário, pois este framework permite o uso do sistema em
dispositivos de tamanho de telas variados, uma vez que a o Bootstrap possibilita a criação de
interfaces com responsividade dos componentes, como botões, campos de texto, formato de
estruturas, formulários, formatação de links e fontes.
Além do uso do framework, foram utilizadas as linguagens HTML, Javascript e CSS.
O HTML foi empregado na estruturação da página web, dividindo a página em cabeçalho,
conteúdo e rodapé. Já o CSS foi usado para estilização dos elementos da interface, como
cores, fonte, tamanhos e localização. A implementação da parte dinâmica dos menus e
colocação de data e hora local foram implementadas usando JavaScript.

RESULTADOS
Nesta seção são apresentados os resultados obtidos com o desenvolvimento do
frontend do sistema por meio da metodologia proposta. Foram desenvolvidos sete telas do
sistema, a página inicial, a página de cadastros, listagem das gaiolas, listagem das internações,
listagem dos animais, listagem dos exames e a listagem das consultas. A página inicial do
sistema é ilustrada na Figura 3. Cada página web do sistema é dividida em cabeçalho,
conteúdo e rodapé. No cabeçalho da página inicial foi incluído uma imagem de logo e um

9
menu vertical principal. Já no conteúdo da página inicial foram inseridos as atividades
recentes das internações, consultas, exames e animais recentemente cadastrados. No rodapé
da página inicial foi inserido apenas o ano e o nome do autor.

Figura 3: Tela inicial do sistema

Fonte: Do autor (2022)

10
 Na página de cadastros, o cabeçalho e o rodapé são os mesmos da página inicial, pois
são fixos, mudando apenas o conteúdo da página. No conteúdo da página de cadastros tem um
menu para escolher entre realizar cadastro de animais, clientes, gaiolas, internações, exames e
consultas, como ilustrado na Figura 4. Clicando em uma destas opções é aberto um formulário
de cadastro das informações como mostra a Figura 5.

Figura 4: Tela de cadastros

Fonte: Do autor (2022)

Figura 5: Tela de cadastro do animal

Fonte: Do autor (2022)

Na página da listagem das gaiolas, as informações das gaiolas cadastradas são exibidas
Esta página contém dois botões, um para a edição dos campos da gaiola e outro para remoção

11
da gaiola cadastrada. E ao final da listagem um botão para inserção de um novo cadastro de
gaiola.
Na página de listagem de internações, a listagem das internações são exibidas,
permitindo visualizar mais detalhes da internação, editar e remover. Também possui um botão
ao final da listagem para um novo cadastrado de internação.
Seguindo o mesmo padrão foi criado a página de listagem dos animais, conforme
mostra a Figura 6, com a listagem dos animais cadastrados, contendo botões de visualização
dos detalhes, edição das informações dos animais, remoção do cadastro e um botão ao final da
listagem para criação de novo cadastro. Seu diferencial é a existência de um filtro para
mostrar animais cadastrados por cliente. Nas páginas de listagem de exames e consultas
também possuem o mesmo formato, mudando apenas os filtros usados para a listagem, sendo
o de exames o filtro de tipo e o de consultas o filtro por médico.

Figura 6: Tela de listagem de animais

Fonte: Do autor (2022)

CONSIDERAÇÕES FINAIS
Os sistemas de gestão servem para gerenciar tarefas, possibilitando organizar e
centralizar as informações. Com base nisso, este trabalho teve por objetivo o desenvolvimento
da parte visual do sistema, em que foram construídas sete telas, as quais possibilitam o
gerenciamento de uma uma clínica veterinária em diferentes aspectos, como cadastro de

12
animais, gaiolas, internações, exames e consultas, bem como a listagem das informações
cadastradas com filtros, além de possibilitar a edição e remoção das informações.
Para os trabalhos futuros pretende-se desenvolver a parte estrutural do sistema,
chamada de backend, permitindo o agendamento de exames e consultas, alteração,
modificação e exclusão de clientes. Além disso, será implementado um sistema de
gerenciamento de gaiolas com base no tamanho dos animais e gaiolas disponíveis.

REFERÊNCIAS BIBLIOGRÁFICAS
FONSECA, Prof. O Dr. George Henrique Godim da. Ciência de dados. 2020. Universidade
Federal de Ouro preto. Disponível em:
<http://professor.ufop.br/sites/default/files/george/files/2020-2_apostila_cdd003.pdf>. Acesso
em 19 Abr. 2022.
PEDROSO, Robertha Pereira. Programa de Educação Tutorial. Junho. 2007. Apostila HTML.
Disponível em: <http://www.telecom.uff.br/pet/petws/downloads/apostilas/HTML.pdf>.
Acesso em: 23 Abr. 2022.
JUNIOR, Vilson Heck. Programação para internet: Introdução ao Javascript. Disponível em:
<https://docente.ifsc.edu.br/vilson.junior/pi/04_Introducao_JavaScript.pdf>. Acesso em: 24
Abr. 2022.
FURTADO, Prof. O Dr. Daniel A. Programação para internet: Introdução ao framework
Bootstrap. Disponível em:
<http://www.daniel.prof.ufu.br/teaching/PPI/PPI-Modulo6-Bootstrap.pdf>. Acesso em 25
Abr. 2022.
OLIVEIRA, A.F.M. et al. O processo de domesticação no comportamento dos animais de
produção. PUBVET, Londrina, V. 5, N. 31, Ed. 178, Art. 1204, 2011. Disponível em:
<https://www.pubvet.com.br/uploads/afc14860fcc882c396e11c92feded0cd.pdf>. Acesso em:
02 Mai. 2022.
CADEIRA, Carlos Pampulim. Introdução aos sistemas de gestão da informação. Setembro.
2011.Departamento de informática. Disponível em:
<https://dspace.uevora.pt/rdpc/bitstream/10174/4167/1/ISI.pdf>. Acesso em 07 Mai. 2022.

13
FLATSCHART, Fábio. HTML 5: Embarque imediato. v. 2. Rio de Janeiro. Brasport Livros e
Multimidia Ltda. 2011.
BARROS, Isabelle Guimarães M. O.; SANTOS, Carlos Felipe Araújo. Apostila de introdução
ao CSS. Rio de Janeiro. 2008. Universidade Federal Fluminense Centro Tecnológico. Escola
de Engenharia Curso de Engenharia de Telecomunicações. Programa de Educação Tutorial.
Grupo PET-Tele. Disponível em:
<http://www.telecom.uff.br/pet/petws/downloads/tutoriais/css/css2k80912.pdf>. Acesso em:
17 Mai. 2022.
SOUZA, Natan. Bootstrap 4: Conheça a biblioteca mais usada no mundo para frontend. Mai.
2018. Casa do código. Alura.

14