sistema de gerenciamento para empresa de manutenÇÃo de...
TRANSCRIPT
UNIVERSIDADE FEDERAL DE ITAJUBÁ – UNIFEI
SISTEMA DE GERENCIAMENTO PARA
EMPRESA DE MANUTENÇÃO DE COMPUTADORES
Ramon Martins Rodrigues
UNIFEI
Itajubá
2018
SISTEMA DE GERENCIAMENTO PARA
EMPRESA DE MANUTENÇÃO DE COMPUTADORES
Ramon Martins Rodrigues
Monografia apresentada como trabalho
final de graduação, requisito parcial para
obtenção do título de Bacharel em
Sistemas de Informação sob orientação
do Prof. Roberto Claudino da Silva.
UNIFEI
Itajubá
2018
“Epígrafe”
“A ciência nunca resolve um problema sem criar pelo menos outros dez”.
(George Bernard Shaw)
AGRADECIMENTOS
Agradeço primeiramente à Deus por tudo, em especial por ter me guiado em momento
extremamente difíceis em minha vida. Sem o seu apoio não teria forças para continuar em minha
jornada.
Agradeço ao meu orientador Roberto Claudino da Silva por estar sempre me incentivando e
apoiando em todo processo de desenvolvimento do meu TFG.
E um agradecimento eterno a minha insubstituível Mãe Cida, por sempre me incentivar aos
estudos e pelo seu intenso amor e carinho por mim, mesmo depois de sua partida.
Também um agradecimento a toda minha família, por me fazer ser o que sou hoje, uma
pessoa humilde, batalhadora e sonhadora.
Um agradecimento especial ao meu grande amigo Rafael Castilho, com seu
companheirismos e ideias para a finalização deste trabalho.
Enfim, agradeço a todas as pessoas que contribuíram para o termino dessa etapa em minha
vida.
RESUMO
As prestadoras de serviços informais em TI estão ganhando espaço no mercado de trabalho, assim
surgiu a necessidade de apresentar uma plataforma de TI para auxilia-los em seus serviços. Este
presente trabalho tem como objetivo desenvolver um protótipo de um sistema para gerenciamento
de ordens de serviços, integrado a um website para uma empresa fictícia denominada “Mech
Informática”, onde a mesma tem como principal atividade a manutenção de hardware e software.
O desenvolvimento do protótipo propôs a melhoria do marketing e atendimento dos pedidos
solicitados pelos clientes da empresa prestadora de serviços em TI.
Palavras-Chave: TI, Aplicação Web, Marketing, Serviços em TI.
ABSTRACT
Informal IT service providers are gaining space in the job market, so the need arises to present an IT
platform to assist them in their services. This work aims to develop a prototype of a system for the
management of service orders, integrated into a website for a fictitious company called "Mech In-
formática", where the main activity is the maintenance of hardware and software.
The development of the prototype proposed the improvement of the marketing and fulfillment of
the requests requested by the clients of the company that provides services in IT.
Key Words: IT, Web Application, Marketing, IT Services.
LISTA DE FIGURAS
FIGURA 1.2 - Conceitos de Sistemas de Informação ....................................................................... 14
FIGURA 2.2 - Forças concorrentes sob o efeito da Tecnologia da Informação ................................ 17 FIGURA 3.2 - Ciclo de vida de um software ..................................................................................... 20
FIGURA 4.2 - Modelo em Cascata .................................................................................................... 22 FIGURA 5.2 - Modelo de Prototipação ............................................................................................. 24 FIGURA 6.2 - Aplicação do Ajax ...................................................................................................... 26 FIGURA 7.2 - Arquitetura Cliente-Servidor ...................................................................................... 29 FIGURA 8.3 - Casos de uso do administrador ................................................................................... 34
FIGURA 9.3 - Diagrama de casos de uso do usuário. ....................................................................... 35 FIGURA 10.3 - Modelo Entidade e Relacionamento Conceitual ...................................................... 38 FIGURA 11.3 - Diagrama Entidade e Relacionamento Lógico ......................................................... 39 FIGURA 12.3 - Atributos do servidor da hostgator ........................................................................... 40 FIGURA 13.3 - Painel de controle do WordPress .............................................................................. 42
FIGURA 14.3 - Construtor das páginas do WordPress ...................................................................... 43
FIGURA 15.3 - Itens para construção de páginas no WordPress....................................................... 43
FIGURA 16.3 - Construção dos slides no WordPress. ....................................................................... 44 FIGURA 17.3 - Editor de layout no WordPress. ................................................................................ 45 FIGURA 18.3 - Interface do Wise Chat. ............................................................................................ 45 FIGURA 19.3 - Página inicial da home-page .................................................................................... 46
FIGURA 20.3 - Página história do Mech ........................................................................................... 47 FIGURA 21.3 - Página Serviços ........................................................................................................ 48
FIGURA 22.3 - Página Contatos........................................................................................................ 49 FIGURA 23.3 - Estrutura de pastas do Mech .................................................................................... 50 FIGURA 24.3 - Subpastas de Módulos do Mech............................................................................... 51
FIGURA 25.3 - Formulário de cadastro de usuários no Mech .......................................................... 53 FIGURA 26.3 - Tela de login do Mech .............................................................................................. 54
FIGURA 27.3 - Tela para redefinição de senha ................................................................................. 54
FIGURA 28.3 - Tela inicial do Mech ................................................................................................. 55
FIGURA 29.3 - Tela de Perfil ............................................................................................................ 55 FIGURA 30.3 - Funcionalidade Pedidos ........................................................................................... 56 FIGURA 31.3 - Modal Pedidos.......................................................................................................... 56
FIGURA 32.3 - Tabela Pedidos do cliente ......................................................................................... 57
FIGURA 33.3 - Modal para edição de Pedidos ................................................................................. 57 FIGURA 34.3 - Ação de envio de e-mail ........................................................................................... 58 FIGURA 35.3 - Tela inicial Administradores .................................................................................... 59 FIGURA 36.3 - Tela de edição e cadastro da empresa matriz ........................................................... 60 FIGURA 37.3 - Tela de cadastro de perfis de usuário ....................................................................... 60
FIGURA 38.3 - Tela permissões de perfil .......................................................................................... 61 FIGURA 39.3 - Organização do menu ............................................................................................... 61 FIGURA 40.3 - Tela de gestão de usuários ........................................................................................ 62
FIGURA 41.3 - Tela para cadastro de serviços .................................................................................. 62 FIGURA 42.3 - Tela ordens de serviços ............................................................................................ 63 FIGURA 43.3 - Cadastro de ordens de serviço .................................................................................. 64
LISTA DE TABELAS TABELA 1.3 - Caso de Uso Detalhado – Cadastrar .......................................................................... 36
TABELA 2.3 - Casos de Uso Detalhado - Realizar Pedidos ............................................................. 36 TABELA 3.3 - Casos de Uso Detalhado - Gerar ordens de Serviço .................................................. 37
LISTA DE ABREVIATURAS E SIGLAS
TI – Tecnologia da Informação.
SI – Sistemas de Informação.
WWW – World Wide Web.
MG – Minas Gerais.
CMS – Content Management System.
CSS – Cascading Style Sheet.
JS – JavaScript.
DOM – Document Object Model.
HTML – Hypertext Markup Language.
JSON – JavaScript Object Notation.
HTTP - Protocolo de Transferência de Hipertexto
SUMÁRIO 1. INTRODUÇÃO ........................................................................................................................................... 12
1.1. Justificativa ........................................................................................................................................... 13
1.2 Objetivos ................................................................................................................................................ 13
2. REFERENCIAL TEÓRICO ............................................................................................................................ 14
2.1 Sistemas de Informação ........................................................................................................................ 14
2.2 Tecnologia da Informação - TI ............................................................................................................... 16
2.3 O uso das Tecnologias da Informação na Prestação de Serviços de TI ................................................. 18
2.4 Modelagem de um Sistema de Gerenciamento em TI .......................................................................... 19
2.5 Tecnologias e Ferramentas para criar uma Aplicação Web .................................................................. 25
3. DESENVOLVIMENTO ................................................................................................................................ 30
3.1 Concepção de Protótipo de um Sistema de Gerenciamento ................................................................ 30
3.1.1 Atores ................................................................................................................................................. 31
3.1.2 Requisitos Funcionais ......................................................................................................................... 31
3.1.3 Requisitos Não-Funcionais ................................................................................................................. 33
3.1.4 Diagramas de Casos de Uso ................................................................................................................ 34
3.1.5 Banco de Dados .................................................................................................................................. 38
3.2 Desenvolvimento do Mech .................................................................................................................... 40
3.2.1 Ferramentas Utilizadas ....................................................................................................................... 41
3.2.2 Website Mech..................................................................................................................................... 42
3.2.3 O protótipo Mech ............................................................................................................................... 50
3.3 Sistema de Gestão do Mech .................................................................................................................. 53
3.3.1 Ambiente Cliente ................................................................................................................................ 53
3.3.2 Ambiente Administrador .................................................................................................................... 59
4. IMPLANTAÇÃO E TESTES.......................................................................................................................... 65
5. CONCLUSÃO ............................................................................................................................................. 67
ANEXO A – Código de Configuração do Banco de Dados ............................................................................ 68
ANEXO B – Código em PHP e HML do Módulo Pedidos .............................................................................. 70
ANEXO C – Telas do Website e Protótipo em Celulares .............................................................................. 71
12
1. INTRODUÇÃO
Com o crescente aumento da procura por serviços voltados a manutenção de computadores e
celulares, o atendimento desses serviços necessita ser dinâmico. A tecnologia está sempre em
avanço e os meios de comunicação mais rápidos e flexíveis, levando as pessoas a querer uma
resposta e solução cada vez mais ágil de seus problemas. Porém muitas prestadoras de serviços de
tecnologia da informação (TI) ainda não possuem uma ferramenta ou procedimento que agilize o
atendimento de seus clientes.
"O avanço tecnológico dos últimos tempos tem impulsionado grandes mudanças na forma
como utilizamos a internet" (DEITEL, 2003) e, portanto, ela "tem permitido cada vez mais uma
desvinculação entre localidade e sociabilidade, incentivando relações não limitadas pela distância"
(CASTELLS, 2003).
O intuito desse trabalho é fazer integração de pequenas empresas/prestadoras de serviços,
que ainda não fazem uso de meios tecnológicos para o atendimento ou prospecção de seus clientes.
Será desenvolvido um protótipo de um sistema web integrado a um website, onde as
prestadoras de serviços terão um melhor controle de suas atividades e das preferências de seus
clientes, o sistema também precisará garantir uma interação de serviços em tempo ágil para os
clientes, com isso, acelerando o atendimento e resolução de problemas. O Sistema de
Gerenciamento, contará com cadastro de clientes, solicitação de serviços, geração de ordens de
serviço, chat online através do website e terá um design responsivo que poderá ser utilizado em
desktops e dispositivos móveis.
13
1.1. Justificativa
O modo de atendimento de prestadores de serviços de TI, na maioria das empresas de pe-
queno porte não utiliza uma aplicação dedicada ao cadastro, registro e facilidades nos contatos e
atendimentos às solicitações dos clientes. Em geral tem-se o uso de aplicações adaptadas ou apenas
a atuação pessoal do prestador de serviços. Do lado do cliente isso pode levar a uma queda no ren-
dimento dos serviços prestados por tais estabelecimentos. Mesmo em prestadoras de serviços que
possuem lojas físicas ou websites, o atendimento pode ser demorado e ineficiente pela falta de um
sistema dedicado.
Com essas considerações, uma interação com clientes, como um canal de comunicação via
página web e/ou sistemas de solicitação de serviços ou duvidas online, melhoraria em muito os con-
tatos. Também a divulgação das empresas, seria facilitada pela exposição do portfólio no espaço
virtual da web. Assim, a empresa poderá se programar, coordenar e agir mais rapidamente com
seus clientes na medida em que a comunicação for mais dinâmica.
1.2 Objetivos
O objetivo geral é o desenvolvimento de uma aplicação web integrado a um website para o
gerenciamento de uma empresa de manutenção de computadores, onde os administradores podem
ter a gestão de clientes, o controle de pedidos e ordens de serviços.
Visando a obtenção desse objetivo, faz-se necessário percorrer as etapas:
Analisar as necessidades de uma empresa prestadora de TI;
Modelar a estrutura computacional que permita que a aplicação leva a empresa a um avanço
tecnológico;
Desenvolver a arquitetura do sistema de gerenciamento de pedidos e ordens de serviços, de
forma que a empresa e os clientes possam utilizá-lo com praticidade e eficiência de qualquer
dispositivo conectado à web;
Realizar a implementação do sistema administrativo e website.
14
2. REFERENCIAL TEÓRICO
O presente trabalho aborda todo processo de desenvolvimento de uma aplicação web,
visando uma melhor compreensão deste, serão apresentados os conceitos básicos de sistemas de
informação, tecnologia da informação, tecnologias, ferramentas e informações que foram utilizados
no seu desenvolvimento.
Na seção 2.1 abordaremos o conceito de sistemas de informação e seus objetivos. A
tecnologia da informação será abordada na seção 2.2, seguindo pelo uso de tecnologias de
informação em pequenas prestadoras de serviços de TI na seção 2.3, a modelagem conceitual da
aplicação na seção 2.4 e por último as tecnologias utilizadas para a criação de uma aplicação web na
seção 2.5.
2.1 Sistemas de Informação
Segundo Stairs e Reynolds (2012), Sistemas de Informação é a estrutura de relacionamento
entre as entradas, o processamento de dados e a saída, também chamada de resultados, com o
intuito de alcançar o objetivo final.
O conceito básico de Sistemas de Informação é uma relação que analisa os insumos
(entradas), injetados na estrutura do Sistema, onde seus componentes irão processa-los em conjunto
produzindo resultados em um processo organizado e não necessariamente linear de transformação.
Levando esses resultados para uma análise e empregabilidade dessa informação para fins
específicos, de acordo com o esquema da FIGURA 1.2 (TURBAN, VOLORINO, 2013).
FIGURA 1.2 - Conceitos de Sistemas de Informação
FONTE: Adaptado de Turban, Volorino (2013)
15
Ainda segundo os autores, e sobre a FIGURA 1.2, temos as definições a seguir.
Entrada: são todos os dados (insumos), ou seja, informações que ainda serão processadas
pelo sistema, gerando os resultados esperados.
Processamento: os dados entrarão em uma estrutura lógica definida pela regra de negócio do
sistema, onde serão processadas e geram o resultado esperado.
Saída: após o processamento dos dados, gera uma informação útil ao usuário do sistema,
mostrando relatórios de gestão, novas entradas do sistema que retornará ao sistema e
produzirá novos dados para um novo processamento.
Realimentação: toda saída do processamento, poderá resultar em novas entradas assim,
realimentando o sistema novamente, formando um ciclo de entradas e saídas do sistema.
Objetivos de Sistemas de Informação
Turban e Volonino (2013) abordam a utilização das tecnologias existentes, como meio para
alcançar os objetivos, e aborda como ela é espalhada através do uso da Web. As tecnologias
utilizadas estão apresentadas abaixo.
Hardware são os instrumentos e dispositivos usados que auxiliam na interação homem e
máquina.
Software são aplicações de processamento onde obedecem ao controle dos usuários e
máquinas.
Dados são um conjunto de valores em um estado bruto, onde serão processados e
transformados em informações úteis.
Rede é a interação do hardware com o meio externo a ele.
Procedimentos é a forma lógica onde os dados serão transformados em informações
dependendo da regra de negócio do Sistema.
Pessoas usuários que utilizam as ferramentas e as informações captadas por elas.
16
2.2 Tecnologia da Informação - TI
Segundo Rezende e Abreu (2002), Tecnologia da Informação são recursos tecnológicos para
o processamento e uso das informações recebidas.
Cruz (2000) define TI como qualquer dispositivo que trata informações de forma sistêmica
ou esporádica, e que esteja aplicado a um produto ou processo específico.
Para Turban e Volonino (2013), "TI representam os sistemas computacionais de uma
organização, trabalhando em conjunto. O termo SI e TI podem ser sinônimos em alguns casos".
A TI é uma importante ferramenta para o sucesso de uma organização, com ela os processos
tornam-se fáceis e dinâmicos. Há uma necessidade dos membros desta organização de sempre
estarem atualizados sobre a TI, pois ela está se tornando cada vez mais necessária, de acordo com a
evolução da tecnologia (TURBAN, RAINER, POTTER, 2005).
Para cada área funcional de uma organização, a TI se torna vital, e os sistemas de TI sempre
serão usados pelos gerentes de cada setor (TURBAN, RAINER, POTTER, 2005).
TI e seu papel nos negócios
Primeiramente, antes de analisarmos os papeis da tecnologia da informação, devemos
apresentar algumas definições importantes para o entendimento das mesmas.
Tecnologia da Informação: corresponde a instrumentos (hardware) e processos (software)
destinados para a criação de um Sistema de Informação (SI);
Sistemas de Informação: são os resultados da implementação da TI, através da utilização
dos instrumentos e processos para o resultado esperado;
Internet: é a rede mundial de comunicação (WWW – World Wide Web), também conhecida
mundialmente como web, tornando o caminho entre cliente/empresa fácil e rápido;
Extranet: é uma rede de comunicação externa que possui acesso controlado, muito utilizada
em negócios específicos;
Intranet: é uma rede de comunicação interna, direcionada para a comunicação dos usuários
internos ao sistema;
Comércio Eletrônico (e-commerce): são transações entre cliente/empresa feitas através da
Internet, através da interação dos mesmos.
17
A TI, segundo Porter (2005), tem o propósito de analisar o contexto das organizações e chegar a
um propósito em comum entre elas, visando destacar as forças que dirigem a competição, seguindo
o modelo da FIGURA 2.2.
FIGURA 2.2 - Forças concorrentes sob o efeito da Tecnologia da Informação
FONTE: Adaptado de Porter (2005).
Porter (2005) ressalta, "A essência da formulação de uma estratégia competitiva é relacionar
uma companhia ao seu meio ambiente”. O modelo de análise apresentado na FIGURA 2.2 represen-
ta as interações de forças externas à empresa, com o propósito de analisar o impacto do uso das tec-
nologias da informação em seu negócio.
18
2.3 O uso das Tecnologias da Informação na Prestação de Serviços de TI
Essa sessão aborda as estratégias que as empresas prestadoras de serviços de TI podem
aplicar em sua rotina de atendimento à sua clientela.
O perfil do cliente atendido por essas empresas de suporte de TI abrange pequenos
comércios, escritórios contábeis ou de despachos, escolas, etc., cuja estrutura organizacional não
comporta um setor ou profissional especializado em TI.
Podemos resumir o conjunto de estratégias geralmente utilizadas em:
Contato direto com o cliente.
Atendimento por telefone.
Mensagem pelo whatsapp
Marketing por página de facebook e boca a boca entre os clientes.
Conforme Solomon (1986), uma certa tecnologia não é imediatamente boa ou má para a
pequena empresa. O bom resultado dependerá de como ela será utilizada. Na verdade, o aumento da
produtividade da organização, auxiliada por sistemas de informação, trará maior eficiência na
gerência dos seus trabalhos, e maior eficácia na obtenção de resultados previamente estabelecidos.
Um software de gestão geralmente é presente em pequenas empresas, mas a forma como é
utilizado, não os auxiliam na prospecção de clientes e consequentemente o aumento do seu negócio.
Fizemos um levantamento de dados referente ao atendimento aos clientes das pequenas
prestadoras de serviços em Itajubá - MG, e constatamos o uso de um sistema para a gestão de
ordens de serviços, onde os seus administradores o utilizam para o controle de clientes,
equipamentos e ordens de serviço.
O atendimento dos clientes por essas pequenas empresas é realizado por contato direto,
telefone e alguns casos por mensagens de whatsapp. Para o marketing, são utilizados panfletos,
boca à boca entre os clientes e páginas no facebook.
19
2.4 Modelagem de um Sistema de Gerenciamento em TI
O Produto e os Processos de Software
Toda criação necessita de um planejamento adequado. O desenvolvedor gasta esforços,
tempo e dinheiro e após a finalização descobre que o sistema não atende a necessidade do usuário
ou existem problemas na estrutura do software, são situações que nenhum criador de sistemas
deseja passar.
A Engenharia de Software, são práticas de gerenciamento de projetos, que auxiliam os
desenvolvedores a diminuir as chances de erros em todo processo de desenvolvimento.
Conforme Sommerville (2011), o objetivo da Engenharia de Software é apoiar todo processo
de desenvolvimento profissional de um software. Ela nos mostra técnicas de especificação do
software, e consequentemente a evolução do projeto que normalmente não são usados por todos os
gerenciadores de projeto.
Todo Engenheiro de Software se preocupa em desenvolver um produto de software (ou seja,
softwares que são comercializados). Existem dois tipos de produtos de softwares:
Produtos genéricos: São produtos fabricados por desenvolvedoras e são vendidos
para clientes interessados em adquiri-los, inclusos nessa lista, softwares para
desktops, aplicativos, aplicações web, etc.
Produtos sob encomenda: São produtos encomendados por um cliente específico,
onde o mesmo detalha todas as suas necessidades e aplicabilidade no seu negócio.
Como todo produto comercial, o produto de software tem seu ciclo de vida:
Ele é desenvolvido para atender a uma necessidade;
É especificado, quando sua necessidade é traduzida por requisitos viáveis;
É desenvolvido, o conjunto de requisitos são transformados em código, diagramas,
documentos e dados transformados em informação;
Tem a aceitação e a entrega ao seu cliente;
Ao ser entregue, passa pelo processo de testes e posteriormente realiza-se a
manutenção;
Ao final da vida útil, pode ser atualizado ou encerrado.
20
Para o sucesso de um software, é importante a preocupação com todas as fases do seu
desenvolvimento como: comunicação, análise de requisitos, modelagem da aplicação, construção
do software, suporte ao cliente e manutenção caso necessário.
FIGURA 3.2 - Ciclo de vida de um software
FONTE: Adaptado de Pressman 2011
Para desenvolver qualquer tipo de sistema, os Engenheiros de Software utilizam os
processos de software, para a coordenação das atividades no decorrer do desenvolvimento. Em
engenharia de software, processos podem ser definidos como práticas de desenvolvimento,
manutenção, aquisição e uso do software.
De acordo com Sommerville (2011), processo de software é uma soma de atividades
coordenadas para o desenvolvimento de um produto de software, desde o início ou até mesmo por
extensão e modificação de softwares existentes.
21
De acordo com Pressman (2011), há diversos modelos de softwares existentes, mas todos
devem seguir quatro atividades fundamentais para a Engenharia de Software:
1. Especificação de software. O propósito do software e suas especificações devem ser
definidas.
Engenharia de sistema: garantir uma solução geral para o problema
Análise de Requisitos: após a definição da solução é necessário um levantamento de
requisitos do software.
Especificação de sistema: descrição funcional do sistema.
2. Projeto e implementação de software. Deve ser produzido para atender um público.
Projeto arquitetural: aqui é construído o modelo conceitual, detalhando cada módulo
separadamente.
Projeto de interface: aqui é definido e estudado todo processo de comunicação entre
os módulos do sistema.
Projeto detalhado: onde os módulos são verdadeiramente definidos e serão
codificados.
Codificação: após todo processo de detalhamento e requisitos prontos, começa a
codificação propriamente dita do sistema.
3. Validação de software. Deve ser validado pelo cliente.
Teste de unidade e módulo: todos os módulos são testados e há uma verificação de
todos as funcionalidades inicialmente propostas.
Integração: A fusão de todos os módulos trabalhando em conjunto, produzindo um
único produto de software.
4. Evolução de software. Ele deve ser capaz de ser reutilizado ou modificado.
Essa fase pode ser chamada de looping, pois é um processo de execução e retorno das fases
anteriores.
Essas atividades descrevem todo processo do software, desde a sua ideia inicial até a sua
finalização, a definição de cada atividade é de suma importância para a eficácia do seu
desenvolvimento.
22
Modelos Teóricos para Desenvolvimento do Software
A Engenharia de Software nos mostra alguns modelos teóricos de como essas atividades
devem ser seguidas. Estes nos indicam de forma simplificada como um processo de software deve
ser implementado, mas não uma forma única e não modificável de desenvolvimento.
De acordo com Sommerville (2011), estes modelos não são definitivos, mas abstrações de
conceitos para a utilização dessa abordagem para o desenvolvimento de um produto de software.
Os principais modelos abordados são:
Modelo em Cascata: o estudo desse modelo teve início na década de 70 por Royce e
tem como principal vertente a sequencialidade das atividades de desenvolvimento,
ela sugere que as fases de desenvolvimento devem ser sequenciais, não havendo a
possibilidade de interação entre elas. Toda atividade completada serve de insumo
para a próxima, não havendo reutilização da fase anterior. Royce (1970), propôs
laços de feedback para o modelo, mas o cascata é geralmente considerado sequencial.
Na FIGURA 4.2 é mostrado a estrutura do modelo.
FIGURA 4.2 - Modelo em Cascata
FONTE: Sommerville 2011
23
Modelo Espiral: este método chegou como uma evolução do modelo em cascata, a
sua principal característica é a prototipação dos modelos, onde estes são
incrementados até a chegada do resultado final, onde sua inovação é fazer uma
análise de riscos e planejamento durante toda fase de desenvolvimento do software.
Os riscos podem ser definidos por uma variedade de problemas que ocorrem durante
a execução de uma fase, como perca de mão-de-obra, falta de capital, ferramentas
que se tornaram obsoletas entre outros. O modelo espiral pode ser definido em
quatro estágios distintos:
o Definição dos objetivos: neste estágio é definido o objetivo geral do software,
o que ele poderá ou não executar, se ele é ou não capaz de se adaptar a
mudanças ou incrementos.
o Análise de riscos: determinar quais os riscos do projeto e definir saídas para
os mesmos, prototipagem para verificar a evolução do software e analisar se
é possível ou não prosseguir.
o Desenvolvimento: codificação do software, analisando todos os requisitos
anteriores, integração de seus módulos e torna-lo homogêneo.
o Revisão de etapas e planejamento: Aqui todas as fases anteriores são
analisadas e cabe a equipe decidir o modelo para prosseguir com o
desenvolvimento, optando por modelos lineares como cascata, evolutivo ou
transformação.
Estes modelos incrementais, auxiliam os desenvolvedores quando os requisitos não estão
totalmente definidos ou há mudanças em partes do escopo do projeto.
24
Modelo de Prototipação: este modelo é utilizado, quando o cliente sabe do objetivo
do seu produto, mas não define especificamente os requisitos a funcionalidades do
software. Conforme ilustrado na FIGURA 5.2, o método de prototipagem inicia com
uma comunicação entre cliente e desenvolvedor, onde é feito o levantamento e
refinamento dos requisitos, após essa etapa, em plano rápido, um protótipo do
sistema é criado e mostrado ao cliente para avaliação onde é considerado o layout,
usabilidade entre outros, após o feedback os requisitos são redefinidos,
sucessivamente até o ideal para o cliente.
FIGURA 5.2 - Modelo de Prototipação
FONTE: Pressman(2010)
25
2.5 Tecnologias e Ferramentas para criar uma Aplicação Web
WordPress
Muito utilizado nos dias atuais para a criação de sites, blogs e e-commerce. Trata-se de uma
plataforma CMS (sistema de gerenciamento de conteúdo), onde sua funcionalidade é montar, editar
e configurar todo conteúdo de um site sem a necessidade de linguagens de programação. A
plataforma proporciona uma forma simples e intuitiva a inserção de textos, arquivos de mídia,
criação de formulários, edição do layout e variadas funcionalidades.
No WordPress, são utilizados plug-ins úteis que proporcionam uma experiência agradável
para o usuário criador de conteúdo. (WordPress, 2018).
Metronic
É um framework de CSS e Angular JS, utilizado para a criação de sistemas administrativos,
ele conta com um vasto acervo de funções que moldam toda a estrutura do sistema e o torna
responsivo para a utilização em plataformas desktop e dispositivos móveis. (Metronic, 2016).
JavaScript
É uma linguagem de programação baseada em scripts interpretados pelo browser do usuário,
manipulando a arvore DOM (Document Object Model) de um documento HTML o JavaScript
fornece uma dinâmica para a aplicação, tornando a utilização prática e de fácil interação pelo
usuário. (JavaScript, 2016).
JQuery
É uma biblioteca Javascript, com o propósito de facilitar o uso da linguagem, ele torna mais
simples a implementação de animações, efeitos, manipulação de eventos e seleção de elementos da
arvore DOM (Document Object Model), utilizando funções pré-definidas que processam as
informações diretamente do browser. (JQuery, 2018).
26
Ajax
A palavra AJAX vem da expressão Asynchronos Javascript and XML é o uso da linguagem
Javascript e XML ou JSON entre outras ferramentas para tornar o browser mais interativo para o
usuário, utilizando requisições assíncronas, a comunicação entre cliente e servidor torna-se
dinâmica, podendo resgatar informações do banco de dados sem precisar recarregar a página que
estamos solicitando a atualização. (JQuery-Ajax, 2018).
O modelo de aplicação do AJAX está representado na FIGURA 6.2
FIGURA 6.2 - Aplicação do Ajax
FONTE: martinsfontespaulista – novatec
Json
A palavra JSON vem de Javascript Object Notation, é um formato de arquivo de fácil leitura
e escrita pelos humanos, a cada ano vem sendo mais utilizada e deixando o formato XML de fora
em diversas aplicações web, por ser mais rápido e fácil de analisar. O sistema Mech utiliza o JSON
para as requisições assíncronas, onde o AJAX utiliza este formato de texto para resgatar o response
das informações de chegada ou saída do banco de dados. (Json, 2017).
27
Bootstrap
É um framework de estilização, utilizando a sua folha de estilos, as aplicações web se
tornam responsivas e com uma interface agradável aos olhos do usuário. Este framework poupa
tempo de codificação, pois, permite ao desenvolvedor a utilização de toda estrutura do CSS sem a
necessidade de poluição do código, utilizando suas classes pré-definidas. (Bootstrap, 2017).
MySQL
O MySQL é um SGBD (Sistema de Gerenciamento de Banco de Dados) do tipo relacional,
permite a definição, construção e manipulação do banco de dados para aplicações. Muito popular e
utilizado na maioria das aplicações hoje em dia. O banco de dados MySQL é responsável por
gerenciar as informações de todo o sistema, como cadastro de usuários, listagem de pedidos, envio
de e-mails para os clientes entre várias outras interações entre usuários e aplicação. O Banco de
dados será mais detalhado na seção 3.5. (MySQL, 2018).
PhpMyAdmin
O phpMyAdmin é uma ferramenta de código aberto escrita em PHP, que lida com à
administração do banco e pode gerenciar até mesmo um servidor MySQL inteiro. Essa ferramenta
suporta operações MySQL e sua utilização facilita o gerenciamento de banco de dados, desde a
criação do banco até a criação de tabelas, procedimentos, gatilhos, e várias outras funções que
podem ser utilizadas em um banco de dados (Dantas, Lordelo e Cunha).
Sublime
Sublime Text é um editor de texto e código fonte multiplataforma, ele permite que o
desenvolvedor escreva seu código de forma simples e objetiva, possui uma interface amigável e
intuitiva, possuindo teclas de atalho que facilitam a edição dos códigos, também possui mecanismos
para atualização do software direto para o servidor (Sublime, 2018).
28
HTML
A linguagem adotada no desenvolvimento é o HTML (Hipertex Markup Language) e
consiste numa linguagem de marcação que se baseia no hipertexto, que podem ser palavras,
imagens, vídeos ou áudios (FERREIRA, EIS, 2010)
A estruturação do HTML é feita através de tags, que fazem a definição sobre o que é texto,
gráficos, vídeos, sons e links, que serão escritos no documento (LAUDON, 2001).
As tags, por sua vez, descrevem dados e comandos que serão interpretados por um navegador
(browser), desta forma o documento desenvolvido exibe os dados nas telas dos dispositivos
(SOUZA, ALVARENGA, 2004).
PHP
O PHP (Hypertext Preprocessor) é uma linguagem de script open source de uso geral, seus
códigos são embutidos dentro do HMTL delimitado pelas Tags <? php? > onde a distinção do
JavaScript é que esses códigos rodam no lado servidor, realizando as buscas no banco de dados.
(Manual PHP, 2018).
29
Ambiente de hospedagem do Sistema de Gerenciamento
Para atender as necessidades do protótipo desenvolvido nesse trabalho, foi utilizado a
arquitetura cliente e servidor, essa tecnologia funciona com uma troca de informações entre
servidores e clientes, denominado requisições (BATTISTI, 2001).
As requisições são enviadas pelos clientes e são recebidas pelo servidor, onde serão
processadas e enviadas de volta.
“É uma abordagem da computação que separa os processos em plataformas independentes
que interagem, permitindo que os recursos sejam compartilhados enquanto se obtém o máximo de
benefício de cada dispositivo diferente, ou seja, Cliente/Servidor é um modelo lógico”.
(VASKEVITCH, 1995). Representação na FIGURA 7.2.
FIGURA 7.2 - Arquitetura Cliente-Servidor
Servidores: Os servidores são computadores geralmente com um grande espaço de
armazenamento e poder de armazenamento, ele é responsável pelo gerenciamento do
banco de dados, busca e persistência dos dados contidos nele. O servidor deve estar
sempre disponível, atender diversas requisições simultâneas e não tem a função de
iniciar ou fechar a comunicação com o cliente.
Clientes: Os clientes são computadores de pequeno porte ligados em rede, são
responsáveis pelo envio de requisições para o servidor, também deve abrir e fechar a
comunicação com os servidores e responsável pela entrada e saída de dados e não se
comunica com outros clientes.
30
3. DESENVOLVIMENTO
Neste capitulo serão apresentadas as informações do desenvolvimento do protótipo, a
pesquisa de campo que balizou o desenvolvimento e definição dos atores, requisitos funcionais e
não funcionas e a definição do banco de dados, seguindo pelas ferramentas utilizadas, o website
construído ilustrando o processo de construção e por último o teste e avaliação.
3.1 Concepção de Protótipo de um Sistema de Gerenciamento
Iniciando o processo de desenvolvimento, foi realizado um levantamento de informações em
empresas prestadoras de serviços, com o foco em analisar como é feito o atendimento ao cliente, o
marketing das empresas e a interação entre empresa e clientes.
Em pesquisa na região de Itajubá/MG, observou-se a existência de sete empresas no
segmento de prestação de serviços em TI, algumas integrando também o comércio de hardware e
treinamento. O levantamento de informações empregou um questionário que obteve respostas de
quatro das sete empresas citadas.
A pesquisa fez a prospecção do funcionamento dessas empresas a partir das respostas às
seguintes questões:
Pergunta 1: Como funciona o atendimento?
Pergunta 2: Qual o segmento dos seus serviços?
Pergunta 3: Como é feito o contato e prospecção dos clientes?
Pergunta 4: Como é o Marketing da empresa?
Pergunta 5: Essa empresa possui um sistema de gestão?
Pergunta 6: Como os dados são armazenados?
Entre as quatro empresas, que participaram da pesquisa, utiliza-se de um software para a
gestão de clientes, equipamentos e ordens de serviço, contudo esses sistemas não fornecem um
contato direto dos clientes, tornando o atendimento moroso. Também se notou a dificuldade na
divulgação do negócio, efetivado em panfletagens e recomendação dos próprios clientes -
esperando sua satisfação com os serviços e como se espera incerta e de alcance não previsível.
Elencados os pontos que precisam ser melhorados tanto em marketing quanto em
atendimento em cada uma das empresas, foi definido o processo de desenvolvimento do protótipo
para um sistema de gestão para serviços de TI.
31
Para identificar o projeto nas próximas seções, definiu-se uma empresa fictícia prestadora de
serviços de TI, a “Mech Informática”, que utilizaria esse protótipo denominado “Mech”.
3.1.1 Atores
Nesta seção será mostrado e detalhado o papel de cada ator do protótipo Mech, inicialmente
representados pelos usuários e administrador do sistema.
Administrador: O administrador é o responsável pela empresa, ele gerenciará toda demanda de
clientes e os pedidos recebidos, esse ator terá todas permissões de acesso ao sistema, desde
gerenciamento de permissões de perfil, cadastro de clientes e funcionários, gerenciamento dos
serviços solicitados e do website, podendo atualizar informações e suporte ao chat online.
Usuário: Os usuários serão os clientes da empresa, poderão se cadastrar no sistema através de um
link no website, solicitar e editar as solicitações de serviços no sistema e envio de e-mail para os
administradores.
3.1.2 Requisitos Funcionais
Os requisitos funcionais são as definições dos serviços que o sistema pode oferecer, a reação
do sistema com a entrada de dados específicos e como é o seu comportamento em determinadas
situações, em certos casos os requisitos funcionais podem definir o que o sistema não deve fazer
(SOMMERVILLE,2011).
Cadastro de Usuários (RF1): O Mech deve disponibilizar uma área para o cadastro de clientes.
Redefinição de Senha (RF2): O sistema deve ser capaz de redefinir a senha dos usuários, tanto no
próprio perfil do mesmo no sistema quanto enviando um link para o e-mail do usuário para a
definição de uma nova senha, caso esse tenha perdido a anterior.
Autenticação (RF3): O sistema deve disponibilizar uma tela de login, para a autenticação no
sistema, após a digitação de suas credenciais e ter acesso as funcionalidades de acordo com o seu
papel no sistema (cliente ou administrador).
32
Adicionar Perfis (RF4): O sistema deve disponibilizar uma opção para que o administrador
consiga adicionar novos perfis de usuários para o acesso ao sistema.
Permissões (RF5): O sistema deve disponibilizar uma área de permissões para que o administrador
possa definir as funcionalidades que cada perfil de usuário poderá acessar no sistema.
Cadastro de Pedidos de Serviços (RF6): O sistema deve disponibilizar uma opção para que os
usuários e administradores consigam adicionar novos pedidos de serviços.
Listagem de Pedidos de Serviços (RF7): O sistema deve listar todos os pedidos realizados pelo
usuário, separados por: 1) pedidos em andamento, são aqueles pedidos que ainda não foram
atendidos pela empresa; 2) pedidos finalizados, são aqueles pedidos que foram atendidos pela
empresa.
Detalhamento de Pedidos de Serviços (RF8): O sistema deve disponibilizar uma opção para que o
cliente e administrador visualize todas as informações de seus pedidos.
Edição de Pedidos de Serviços (RF9): O sistema deve disponibilizar uma opção para que os
clientes consigam editar detalhes de seus pedidos.
Exclusão de Pedidos de Serviços (RF10): O sistema deve disponibilizar uma opção para que os
administradores consigam excluir pedidos se necessário.
Geração de Ordens de Serviços (RF11): O sistema deve disponibilizar uma opção para que o
administrador consiga gerar uma ordem de serviço.
Cancelamento de Ordens de Serviços (RF12): O sistema deve disponibilizar uma opção para que
o administrador consiga cancelar uma ordem de serviço.
Bloqueio de Desbloqueio de usuários (RF13): O sistema deve disponibilizar uma opção para que
o administrador consiga bloquear um usuário quando conveniente e da mesma forma desbloquear
quando necessário.
33
3.1.3 Requisitos Não-Funcionais
Os requisitos não-funcionais são aqueles que não estão relacionados com os serviços
específicos oferecidos aos usuários pelo sistema, eles estão relacionados às propriedades de
performance do sistema, como plataformas utilizadas para o acesso, tempo de resposta dos
comandos, representação de dados na interface (SOMMERVILLE,2011).
Os requisitos não funcionais, como proteção, desempenho ou disponibilidade são de
extrema importância para o desenvolvimento do sistema, pois são eles que restringem as
características de todo o sistema, pois, se a falta de qualquer um requisito não-funcional todo o
sistema será inutilizado (SOMMERVILLE,2011).
Plataformas de uso (RNF1): O sistema possui compatibilidade em desktops e dispositivos móveis.
Compatibilidade com navegadores (RNF2): O sistema possui compatibilidade com os principais
navegadores do mercado, incluindo o Google Chrome, Mozila Firefox, Microsoft Edge e Opera.
Processo Operacional (RNF3): O sistema pode ser usado para diversos ramos de negócios.
Disponibilidade Operacional (RNF4): O sistema deve estar disponível 24 (vinte e quatro) horas e
durante todos os dias da semana, sem interrupções.
34
3.1.4 Diagramas de Casos de Uso
O diagrama de casos de uso, descreve as ações que cada perfil de usuário pode exercer no
sistema, considerado a técnica simples e eficaz de mostrar ao cliente a interação do ator com cada
funcionalidade do sistema (GERI SCHNEIDER & JASON WINTERS, ADILSON-WESLEY,
1998).
Os casos de uso demonstrados nas FIGURAS 8.3 e 9.3, apresentam o fluxo de
funcionalidades dos atores administradores e usuários, onde o acesso a cada funcionalidade do
sistema é definido por permissões liberadas pelo administrador.
FIGURA 8.3 - Casos de uso do administrador
De acordo com a FIGURA 8.3, o diagrama de casos de uso do administrador, aponta as
ações que ele pode executar no sistema. Após o login, esse ator pode cadastrar, visualizar, bloquear
e desbloquear clientes, outra ação será de cadastrar novos perfis de usuários e posteriormente
definir as permissões de acesso, além de poder cadastrar, gerenciar os pedidos de serviços gerando
ordens de serviços e finalizá-las.
35
FIGURA 9.3 - Diagrama de casos de uso do usuário.
De acordo com a FIGURA 9.3, temos as ações que os usuários clientes podem executar no
sistema, após o cadastro, o usuário terá acesso ao sistema e poderá realizar, editar os seus pedidos
de serviços com a opção de enviar um e-mail direto ao administrador com detalhes do seu pedido.
Caso de Uso Detalhado
. Nos diagramas apresentados nas FIGURAS 8.3 e 9.3, são observados os atores e as
funcionalidades, mas não mostram detalhadamente como o fluxo do processo deve funcionar.
Porém para demonstrar todo processo e seu fluxo de dados são utilizados os casos de uso detalhados.
Não existe um padrão único a ser seguido no desenvolvimento dos casos de uso. Neste
projeto foi escolhido o padrão que contém, nome, descrição, atores e fluxo básico
36
Na TABELA 1.3, ilustra o cenário onde o cliente faz o cadastro no sistema.
Nome Cadastrar
Descrição Usuários se cadastram no sistema
Atores Usuários visitantes
Pré-condições -
Fluxo Básico 1. Usuário acessa a home-page.
2. No menu principal há a opção cadastrar.
3. Usuário preenche todos os campos obrigatórios do formulário.
4. Usuário clica no botão cadastrar.
5. Sistema redireciona para o início da home-page
6. Caso de uso encerrado.
TABELA 1.3 - Caso de uso detalhado – cadastrar
Na TABELA 2.3, ilustra o cenário onde clientes e administrador realizam pedidos de
serviços.
Nome Realizar Pedidos
Descrição Usuários e Administradores realizam pedidos de serviços
Atores Usuários e Administradores
Pré-condições -
Fluxo Básico 1. Usuário e Administrador acessa o sistema
2. No menu há um módulo pedidos.
3. Usuários ou Administradores clicam no botão cadastrar
pedidos.
4. Modal de pedidos é aberto.
5. Usuários ou administradores preenchem os campos do
formulário.
6. Usuários ou Administradores clicam no botão cadastrar
7. Tabela de pedidos é atualizada com o novo pedido.
8. Caso de uso encerrado
TABELA 2.3 - Casos de uso detalhado - realizar pedidos
37
Na TABELA 3.3, ilustra o cenário onde o Administrador gera uma ordem de serviço.
Nome Gerar ordem de serviço
Descrição Administrador gera uma ordem de serviço
Atores Administrador
Pré-condições -
Fluxo Básico 1. Administrador acessa o sistema.
2. No menu há um módulo Administração com uma opção de
submenu ordens de serviços.
3. Administrador acessa o submenu.
4. Administrador clica no botão gerar OS
5. Modal para cadastro de ordens de serviços é aberto.
6. Administrador preenche os campos do formulário.
7. Clica no botão gerar.
8. Modal é fechado.
9. Listas de ordens de serviço atualizada.
10. Caso de uso encerrado.
TABELA 3.3 - Casos de uso detalhado - gerar ordens de serviço
Para este trabalho foi proposto o detalhamento dos casos de uso com mais interações entre
cliente e sistema, sendo assim os outros não serão necessários o detalhamento.
38
3.1.5 Banco de Dados
Para a continuação do desenvolvimento do Mech, após a análise das necessidades das
empresas e a definição dos casos de uso, foi definido a modelagem do banco de dados, pois os
dados enviados pelos usuários serão armazenados no sistema através deste.
O modelo escolhido para esse sistema, foi o banco de dados relacional.
Diagrama Entidade e Relacionamento Conceitual
O diagrama entidade e relacionamento, mostrado na FIGURA 10.3, fornece informações do
relacionamento entre as entidades do banco de dados, essa abordagem é independente da
implementação do sistema gerenciador de banco de dados (SGBD), pois possui um alto grau de
abstração de dados, onde o torna de fácil entendimento.
FIGURA 10.3 - Modelo Entidade e Relacionamento Conceitual
39
Diagrama Entidade e Relacionamento Lógico
O modelo lógico do diagrama entidade e relacionamento demonstrado na FIGURA 11.3, nos
mostra além dos relacionamentos entre as entidades, nos fornece os atributos com seus tipos de
dados, tornando a modelagem do banco mais detalhada.
FIGURA 11.3 - Diagrama Entidade e Relacionamento Lógico
40
3.2 Desenvolvimento do Mech
Para a implantação do Mech, foi escolhido uma provedora de hospedagem, a Hostgator
(www.hostgator.com.br), com seu plano ela fornece, servidores compartilhados, criador de sites
incluso, gerenciador de banco de dados, hospedagem de contas de e-mail e um painel de controle,
onde provê um gerenciador de pastas, controladores de banda e espaço utilizado em disco. Nesta
hospedagem já estão inclusos o servidor HTTP Apache, versão recente do PHP e MySQL. Como
estamos lidando com um protótipo o número de acessos simultâneos de usuários é baixo, então
optou-se por uma hospedagem compartilhada, contendo 7GB disponíveis para a utilização.
Na FIGURA 12.3, é mostrado as informações do servidor da hostgator.
FIGURA 12.3 - Atributos do servidor da hostgator
41
3.2.1 Ferramentas Utilizadas
Materializando a concepção do protótipo Mech como um sistema de gestão, foram
utilizados: o WordPress para a construção Do website, o framework Metronic para um layout
responsivo do sistema administrativo, a linguagem Javascript e a biblioteca jQuery para interação
com usuário, para comunicação cliente-servidor foi utilizado PHP e AJAX com JSON, o filezila
para envio de arquivos ao servidor através do protocolo FTP, no front-end foi utilizado o Bootstrap
com CSS 4, e para o banco de dados o MySQL, para manutenção do Banco de dados foi utilizando
a ferramenta phpMyadmin e, o editor de texto sublime para realizar toda a codificação do Mech.
42
3.2.2 Website Mech
Pensando em um marketing de baixo custo e atrativo para os clientes, foi construído um
website, onde os mesmos podem interagir com a empresa ao utilizar o chat online e também
promover o acesso ao cadastro e login no Mech.
Toda construção foi feita em WordPress, por possuir uma interface de fácil aprendizado,
edição e codificação dos componentes.
Ao construir o website, alguns pontos foram considerados, a interface deve ser amigável,
atrativa e intuitiva, as informações e o propósito da empresa deverão ser visualizados facilmente,
figuras amigáveis e profissionais, cores suaves e agradáveis e caixas de texto separadas por
conteúdo evitando a confusão de informações.
Após a instalação do WordPress no servidor, deu-se início a construção do site propriamente
dita, posteriormente foi escolhido um tema, e também definidos os plug-ins necessários.
Na FIGURA 13.3, é mostrando a painel de controle do WordPress, onde à sua esquerda é
mostrado todas as funcionalidades que ele dispõe aos criadores de sites.
FIGURA 13.3 - Painel de controle do WordPress
Ingressando ao painel, temos opções de adição de páginas onde lá foram adicionadas e
montadas de acordo com as necessidades propostas por esse projeto.
43
Na FIGURA 14.3, é mostrado o construtor da página home, sendo ela a principal vitrine
para as informações da empresa.
FIGURA 14.3 - Construtor das páginas do WordPress
Para a construção da página, primeiramente é definido as seções, dentro delas são inseridos
os grupos e nestes são determinados itens que compõem todo layout da página.
Na FIGURA 15.3, é mostrado a palheta de itens que podem ser adicionados à página, nesta
foi utilizado colunas, caixas de ícones, botões e imagens, onde estas foi necessário realizar uploads
na seção mídias no painel.
FIGURA 15.3 - Itens para construção de páginas no WordPress.
44
Ainda na página home, foi adicionado sliders, um plug-in do WordPress, sua instalação é
feita no próprio editor de temas, encontrado no menu do painel, neste podemos definir imagens,
vídeos e editar seus componentes, como botões, textos e etc.
A tela de construção e edição do slider do website é mostrada na FIGURA 16.3.
FIGURA 16.3 - Construção dos slides no WordPress.
Por fim todas as páginas foram construídas e interligadas, seguindo um layout padrão, onde
cores, textos e objetos foram estruturados para atender toda a demando do projeto. Para obter um
design igualitário a edição é feita em aparência encontrado no painel, onde se pode incluir códigos
em CSS ou JavaScript independentes para compor toda a estrutura do site.
45
Na FIGURA 17.3, temos a tela para a edição do layout, onde são encontradas as opções de
configuração e edição, sendo essas mudanças aplicado em todo website Mech.
FIGURA 17.3 - Editor de layout no WordPress.
No website, foi instalado o plugin para um chat online, chamado wise chat foi implementado
pela empresa Kainex, o messenger foi configurado no rodapé do site, um lugar de fácil percepção e
localização, nesse chat os usuários poderão se comunicar diretamente com o administrador.
Na FIGURA 18.3, é mostrado a disposição do wise chat no rodapé, mostrando um exemplo
de interação entre cliente e servidor.
FIGURA 18.3 - Interface do Wise Chat.
46
Toda o website, é constituída por quatro páginas, são elas: home, história, serviços e contato,
as suas telas serão detalhadas abaixo.
A página inicial do site mostrada na FIGURA 19.3, fornece toda informação da empresa,
além de possuir um menu interativo, contendo links de redirecionamento para as demais páginas,
acesso ao cadastro e login de usuários e em sua parte inferior encontra-se o rodapé contendo o chat
online juntamente com o contato da empresa.
FIGURA 19.3 - Página inicial da home-page
47
Na FIGURA 20.3, é mostrado a página história no site, contendo as informações da empresa.
FIGURA 20.3 - Página história do Mech
48
Na FIGURA 21.3 temos a página de serviços, onde são descritos as atividades e habilidades
da empresa.
FIGURA 21.3 - Página Serviços
49
Na FIGURA 22.3, é mostrado a página contato, aqui encontramos um formulário para
contato via e-mail, informações sobre sua localização, telefone endereço e e-mail.
FIGURA 22.3 - Página Contatos
50
3.2.3 O protótipo Mech
De acordo com a proposta desse projeto, foi feita a criação de um protótipo, onde ele será
capaz de executar o gerenciamento de ordens de serviços da Mech.
A sua codificação foi feita utilizando o conceito de requisição e resposta, nele as páginas
construídas em HTML são ligadas aos scripts feitos em JavaScript e JQuery, onde nestes são
construídos o AJAX que provê a requisição assíncrona, ou seja, atualização de informações sem o
refresh na página, chamando os arquivos com a codificação em PHP interagidos com a busca no
banco de dados.
Na FIGURA 23.3, é mostrado a estrutura de pastas do Mech, onde a codificação foi dividida
em quatro pastas e arquivos de configuração de banco de dados, denominadas: extensões, file,
funções e módulos.
FIGURA 23.3 - Estrutura de pastas do Mech
Extensões: Nesta pasta foram inseridos, arquivos para o uso dos frameworks como o metronic,
bootstrap, a biblioteca JQuery para a utilização do datatable e os scripts em JavaScript.
File: Aqui estão as pastas onde foram guardados os arquivos de mídia, como as fotos dos perfis e
ícones utilizados no Mech.
51
Funções: Nessa pasta estão as bibliotecas de funções padrões codificados pelo próprio
desenvolvedor, são encontrados quatro arquivos dentro dela, são eles:
fc_funcoes: onde são definidas as funções para a validação de datas;
fc_funcoesbd: neste arquivo são encontradas funções para conexão e buscas no banco de
dados;
fc_seguranca aqui foram feitas as funções de autenticação, permissão de usuários e
verificação de sessão;
fc sistema: E por último esse arquivo carrega funções para a filtragem de resultados no
banco, montagem de resultados, métodos que geram senhas seguras e funções para
validação de formulários no servidor.
Módulos: Aqui está a codificação de todas as funcionalidades do Mech, a pasta módulos foi
subdividida em oito subpastas, onde cada subpasta representa uma funcionalidade do Mech. A
FIGURA 24.3 detalha como foi realizada essa divisão.
FIGURA 24.3 - Subpastas de Módulos do Mech
52
Administração: Aqui, estão os códigos das funcionalidades do administrador, entre elas estão a
definição do menu e submenus, permissões de perfil para acesso de usuários, gestão dos clientes
cadastrados.
Configurações: Foi desenvolvido o cadastro de serviços oferecidos pela empresa.
Dashboard: Definição da tela principal do sistema, onde é exibido uma mensagem de boas-
vindas, imagem da empresa e exibição do menu para navegação nos módulos.
Layout: Nesta pasta estão definidos o starter, header, footer e end para compor as telas padrões
de todo o Mech.
Login: Fora feitos códigos de cadastro para clientes, login e logout.
Ordensservicos: Tem-se toda a codificação para a criação, edição, visualização e finalização das
ordens de serviços.
Pedidos: São encontrados os códigos para a criação, edição e finalização dos pedidos.
Usuários: Estão os códigos de inserção, edição, visualização e bloqueio de usuários.
Em anexo A, encontra-se o código utilizado para a configuração do banco de dados, já em
anexo B, estão os códigos do módulo pedidos, em linguagem PHP e HTML.
53
3.3 Sistema de Gestão do Mech
De acordo com a proposta deste trabalho, foi construído um protótipo do produto para
gerenciamento de ordens de serviço. Serão mostradas as telas do Mech capturadas diretamente do
sistema.
3.3.1 Ambiente Cliente
No ambiente do cliente, tem-se o formulário para cadastro dos usuários que terão o perfil de
cliente no Mech, Na FIGURA 25.3 mostra o layout e os campos que devem ser preenchidos,
ressaltando que todos eles são obrigatórios para a realização do cadastro.
FIGURA 25.3 - Formulário de cadastro de usuários no Mech
54
Após o cadastro uma mensagem de confirmação é mostrada em forma de alerta e o usuário
será redirecionado para a tela de login, mostrada na FIGURA 26.3.
FIGURA 26.3 - Tela de login do Mech
Se o usuário esquecer a sua senha de autenticação, clicando no link “Esqueceu a senha? ”, o
sistema redirecionará para a tela de solicitação de uma nova senha, onde um formulário de
recadastro de senha é enviado para e-mail do usuário, tela mostrada na FIGURA 27.3.
FIGURA 27. 3 - Tela para redefinição de senha
55
Após a autenticação no sistema o usuário será redirecionado para a tela inicial do Mech, tela
mostrada na FIGURA 28.3. Nesta tela de boas-vindas é exibido o nome do cliente, o seu perfil e
menu de acesso para a funcionalidade pedidos.
FIGURA 28.3 - Tela inicial do Mech
A FIGURA 29.3, mostra a tela de perfil do usuário, onde ele poderá editar seus dados e fazer
upload de foto.
FIGURA 29.3 - Tela de Perfil
56
No módulo pedidos o usuário cliente poderá solicitar e editar serviços, também foi
implementado a função para o envio de e-mails para o administrador. Na FIGURA 30.3 é mostrado
a tela da funcionalidade.
FIGURA 30.3 - Funcionalidade Pedidos
Ao clicar em solicitar uma página modal é aberta, exibindo um formulário para cadastro do
pedido, neste é solicitado os dados para o agendamento do serviço, esse modal é mostrado na
FIGURA 31.3.
FIGURA 31.3 - Modal Pedidos
57
Ao cadastrar, a solicitação de serviço é atualizada dinamicamente na tabela, através do
AJAX.
FIGURA 32.3 - Tabela Pedidos do cliente
Na FIGURA 32.3, tem-se a tabela pedidos, onde é mostrado as informações do serviço e as
ações que o cliente poderá executar, como, visualizar, editar e enviar e-mail para o administrador,
avisando da sua solicitação.
Na FIGURA 33.3 é mostrado o modal para a edição de pedidos, já na FIGURA 34.3 é
mostrado a ação de envio de e-mail.
FIGURA 33.3 - Modal para edição de Pedidos
58
FIGURA 34.3 - Ação de envio de e-mail
59
3.3.2 Ambiente Administrador
O cadastro do administrador foi feito diretamente no banco de dados, e um único usuário
tem acesso a este perfil.
O login é realizado de acordo com usuários com perfil clientes, após a autenticação, o
administrador tem acesso a todas funcionalidades do Mech, sendo elas: administração, permissão de
acesso de perfis, edição e cadastro da empresa matriz, cadastro de novas opções de menu, gestão de
clientes, cadastro de serviços, controle à demanda de pedidos e o gerenciamento das ordens de
serviços.
A FIGURA 35.3, é mostrada a tela inicial para os usuários de perfil administrador.
FIGURA 35.3 - Tela inicial Administradores
60
No módulo administração, as funcionalidades para o cadastro e edição da empresa matriz,
foi implementado. A FIGURA 36.3 mostra essa tela.
FIGURA 36.3 - Tela de edição e cadastro da empresa matriz
Ainda neste módulo, estão as permissões para o acesso em cada módulo, onde o
administrador poderá cadastrar novos perfis de usuário e também declarar o que cada um destes
poderá utilizar no Mech.
A tela para o cadastro de perfil é mostrada na FIGURA 37.3, e as permissões na FIGURA
38.3.
FIGURA 37.3 - Tela de cadastro de perfis de usuário
61
FIGURA 38.3 - Tela permissões de perfil
Na FIGURA 39.3 é mostrado a tela para organização do menu, nessa funcionalidade o
administrador é capaz de cadastrar novos módulos e definir sua posição no Menu.
FIGURA 39.3 - Organização do menu
62
Na última funcionalidade do módulo administração, o administrador tem o controle de
clientes cadastrados e poderá realizar a edição de dados, bloqueio e desbloqueio de usuários. A
FIGURA 40.3 mostra a tela de gestão de usuários.
FIGURA 40.3 - Tela de gestão de usuários
No módulo configurações, foi implementado o cadastro, edição e bloqueio de serviços
oferecidos pela empresa, a tela é mostrada na FIGURA 41.3.
FIGURA 41.3 - Tela para cadastro de serviços
63
No módulo pedidos o administrador tem acesso a todos os pedidos realizados, podendo
visualizar, editar, enviar e-mail e finalizá-los, a tela dessa funcionalidade foi mostrada na seção
3.3.1 deste trabalho.
Já em ordens de serviços o administrador, poderá analisar os pedidos feitos pelos clientes e
caso desejar, confirma-los para a execução gerando uma ordem de serviço, definindo o pedido,
responsável, valor, data de busca e anotações referentes ao trabalho.
Neste protótipo as ordens de serviços estão separadas em quatro status: 1) aguardando. 2) Em
Andamento. 3) canceladas. 4) finalizadas A tela é mostrada na FIGURA 42.3.
FIGURA 42.3 - Tela ordens de serviços
64
Ao clicar em gerar ordens de serviço um modal de cadastro é aberto. O administrador deverá
selecionar e preencher todos os campos obrigatórios, o primeiro campo é para seleção de pedidos
em aberto, o segundo campo define o responsável pelo serviço, já no terceiro campo é definido o
valor seguindo pela data de busca do equipamento e anotações desejáveis. Após a confirmação dos
dados a ordem de serviço será alocada na tabela dinamicamente. O modal de cadastro é mostrado na
FIGURA 43.3.
FIGURA 43.3 - Cadastro de ordens de serviço
Após o cadastro, a ordem de serviço irá para a aba aguardado, onde o administrador poderá
visualizá-la, editá-la, liberá-la para execução ou cancelá-la caso desejar.
Na aba em andamento estão as ordens de serviços liberadas para a execução, onde o
administrador pode visualizar, editar, cancelar e finalizar o serviço.
Já na aba canceladas, o administrador poderá visualizar ou desbloquear a ordem de serviço,
sendo que ela retornará para a tabela de aguardando.
Em finalizadas o administrador poderá visualizar os dados da ordem de serviços e também
poderá enviar um e-mail para o usuário, agradecendo pela escolha da empresa.
Em anexo C, serão mostradas as telas do website e do protótipo nos dispositivos móveis.
65
4. IMPLANTAÇÃO E TESTES
Neste capítulo será abordado como foi feito a implantação, avaliação e sugestões para
evolução do Mech, após o processo de desenvolvimento, sendo as etapas detalhadas a seguir.
Implantação do Mech: Nesta etapa todo o fluxo de processamento das funcionalidades do Mech
foi avaliado, as 4 pessoas escolhidas foram os proprietários das quatro empresas participantes do
processo de levantamento de requisitos apresentadas na seção 3.1 deste trabalho. Os participantes
tiveram o acesso a home-page e sistema, onde realizaram o papel de cliente e também o papel de
administrador.
Avaliação: Após os testes de processamento do Mech, foi realizado uma entrevista para a
avaliação da experiência e usabilidade do protótipo, onde foram submetidos a um formulário com
as seguintes perguntas:
Pergunta 1: A interface do Mech é atrativa para os clientes?
Dos 4 entrevistados, todos avaliaram como ótimo, sendo 1 destes que ressaltou a escolha das cores,
onde achou agradáveis e não chamativas aos olhos, outro entrevistado disse que as imagens estão de
fácil entendimento e mostra claramente o propósito da empresa.
Pergunta 2: Os objetos despostos estão intuitivos?
Entre os entrevistados 2 deles disseram que os objetos estão dispostos corretamente e são facilmente
perceptíveis e 2 deles disseram que os ícones do sistema de gestão são de difíceis de percepção, pois
tiveram dificuldades de entendimento dos ícones.
Pergunta 3: Você acha que este protótipo pode alavancar o seu negócio?
Dos 4 entrevistados, 3 deles disseram que sim, ressaltando a interatividade e comodidade do
software para o cliente, também disseram que este protótipo poderia abranger mais pessoas que
procuram pelos seus serviços por ser um ambiente web, 1 dos entrevistados disse que não pretende
aumentar seu negócio.
66
Pergunta 4: Você usaria o software na gestão da sua empresa?
Dos 4 entrevistados, 3 disseram que sim, pois este promoverá um marketing de baixo custo e
comodidade na gestão de seus serviços, 1 destes disse que não pretende por não querer aumentar o
leque de clientes.
Sugestões para Evolução do Mech: No processo de avaliação do Mech os 4 participantes
foram convidados a darem sugestões para melhoria e evolução do protótipo, as sugestões serão
listadas a seguir:
Interface: A sugestão para o layout foi para a substituição dos ícones por botões maiores e
com descrição;
Login: Ao solicitar as credenciais, ao invés de e-mail, o usuário poderá ter a opção de
utilizar um nickname para login;
Cadastrar: Ao realizar o cadastro o usuário segue com a interação na home-page ao invés de
redirecionar para a tela de login;
Chat: O chat na home-page deveria estar mais visível;
Pedidos: Quando o cliente solicitar um pedido ele poderá receber uma mensagem
automática no celular;
A partir das sugestões dos avaliadores, essas foram incorporadas ao projeto, restando a
implantação do SMS e sistema financeiro para trabalhos futuros.
67
5. CONCLUSÃO
O presente trabalho foi realizado com o intuito de automatizar e melhorar o atendimento dos
clientes pelas pequenas empresas prestadoras de serviços em TI, empregando conceitos de
Engenharia de Software, desenvolvendo um protótipo de sistema que facilita a interação e agilidade
no processo de atendimento. A elaboração exigiu um estudo de linguagens de programação,
frameworks, ferramentas, banco de dados e novas técnicas de codificação, contribuindo para a
pratica do desenvolvimento completo de um sistema de informação atrativo, funcional e responsivo.
O sistema de gerenciamento Mech desenvolvido, mostrou-se atrativo, de fácil manuseio e
seria adotado pelas pequenas prestadoras de serviços em TI, como verificado nos testes de campo,
portanto com potencial para o mercado deste segmento de negócio.
Para trabalhos futuros, partindo das sugestões recebidas pela pesquisa de campo, para um
atendimento mais ágil poderia agregar ao sistema:
Criação de uma funcionalidade para o envio de mensagens por SMS, facilitando o
atendimento do administrador.
Criação de um módulo financeiro, com controle de finanças, tornando o Mech um
sistema de controle para a gestão financeira.
Em conclusão o sistema desenvolvido mostrou um grande potencial de mercado, agregando
habilidades em desenvolver sistemas de informação, configurando-se no produto inicial do portfólio
do autor.
68
ANEXO A – Código de Configuração do Banco de Dados
69
70
ANEXO B – Código em PHP e HML do Módulo Pedidos
71
ANEXO C – Telas do Website e Protótipo em Celulares
Telas da página home do website e menu para o acesso ao protótipo Mech.
72
Telas de login e menu principal no protótipo.
73
Formulário de cadastro no dispositivo móvel.
74
Referências Bibliográficas
Ajax, 2018; disponível em http://api.jquery.com/jquery.ajax/ acesso em 02/03/2018.
BATTISTI, J. SQL Server 2000: Administração e Desenvolvimento – Curso Completo. 2ª ed. Rio
de Janeiro. 2001.
Bootstrap, 2017; disponível em bootstrap : https://getbootstrap.com/ acesso em 10/02/2018.
CASTELLS, Manuel. A Galáxia da Internet. Ed. Zahar. Rio de Janeiro, 2003.
CRUZ, Tadeu Sistemas de Informações Gerenciais – Tecnologia da Informação e a Empresa do
Século XXI, São Paulo: Atlas, 2000.
DANTAS, J. B.; LORDELO, C. C.; CUNHA, F. Marketing cultural para uma instituição de
ensino superior.
DEITEL, Harvey M.; DEITEL, Paul J.; NIETO, T.R. Internet World Wide Web: Como
Programar. Ed. Bookman, 2ª ed., Porto Alegre, 2003.
FERREIRA, Élcio; EIS, Diego. HTML5: Curso W3C Escritório Brasil. Curso de HTML 5.
2010. p. 1-14. Disponível em http://www.w3c.br/pub/Cursos/CursoHTML5/html5-web.pdf,
Acessado em 01/03/2018.
GERI SCHNEIDER & JASON WINTERS, ADILSON-WESLEY: Applying use cases: a pratical
guide. 1998.
JavaScript, 2016; disponível em https://www.javascript.com/ acesso em 01/03/2018.
JQuery, 2018; disponível em https://jquery.com/ acesso em 02/03/2018.
Json, 2017; disponível em https://www.json.org/ acesso em 30/04/2018.
LAUDON, Kenneth C.; LAUDON, Jane P. Gerenciamento de Sistema de Informação. Ed. LTC,
3º ed. Rio de Janeiro, 2001
LAUDON, K.; LAUDON, Jane. Sistemas de informação gerenciais.9. ed. São Paulo: Pearson,
2011.
Metronic, 2016; disponível em https://keenthemes.com/metronic/ acesso em 21/02/2018.
MySQL, 2018; disponível em https://dev.mysql.com/ acesso em 01/02/2018.
PHP, 2018; disponível em https://secure.php.net/manual/pt_BR/intro-whatis.php acesso em
20/03/2018.
PRESSMAN, R, S. Engenharia de Software uma abordagem profissional, 7ª ed. AMGH Editora
ltda.2011.
REZENDE, D.A Tecnologia da Informação integrada à inteligência empresarial: alinhamento
estratégico e análise da prática nas organizações. São Paulo: Atlas, 2002.
75
ROYCE, W. W.: Managing the development of large software systems; em: Proceedings of IEEE
Wescon. 1970.
SOLOMON, S. A grande importância da pequena empresa: a pequena empresa nos Estados
Unidos no Brasil e no mundo. Rio de Janeiro: Editorial Nórdica.1986.
SOMMERVILLE, I. Software Engineering, 9ª ed., Person Education do Brasil, 2011.
SOUZA, Renato Rocha; ALVARENGA, Lídia. A Web Semântica e suas contribuições para a
ciência da informação. Ciência da Informação Print version ISSN 0100-1965 Ci. Inf. vol.33 no.1
Brasília Jan./Apr. 2004. Disponível em http://www.scielo.br/ acesso em 11/02/2018.
STAIR, R. M.; REYNOLDS, George W. Princípios de sistemas de informação. 9. ed.São Paulo:
Cengage Learning, 2012.
Sublime, 2018; disponível em https://www.sublimetext.com/ acesso em 31/01/2018.
TURBAN, E.; RAINER JR.; R. Kelly; POTTER, Richard E. Administração de tecnologia da
informação: teoria e prática. Rio de Janeiro: Elsevier, 2005.
TURBAN, E.; VOLONINO, Linda. Tecnologia da informação para gestão: em busca do melhor
desempenho estratégico e operacional. 8. ed. Porto Alegre: Bookman, 2013.
VASKEVITCH: Estratégias Cliente Servidor: Um guia para a Reengenharia da Empresa. 1995.
Wordpress, 2018; disponível em https://br.wordpress.com acesso em 20/02/2018.