Análise de Tecnologias para Desenvolvimento Web Produtivo

Paulo Henrique Nogueira Candido
ANÁLISE DE TECNOLOGIAS PARA

DESENVOLVIMENTO WEB PRODUTIVO
São João da Boa Vista - SP

2017
Instituto Federal de Educação, Ciência e
Tecnologia de São Paulo
Campus São João da Boa Vista


2017

Trabalho de Conclusão de Curso

apresentado ao Instituto Federal de
São Paulo, como parte dos requisitos
para a obtenção do grau de Tecnólogo
em Sistemas para Internet.
Área de Concentração: Ciências

Exatas e da Terra
Orientador: Prof. Everton Rafael da

Silva
Coorientador: Prof. Breno Lisi Romano

2017
Folha destinada à inclusão da Catalogação na Fonte - Ficha Catalográfica (a ser solicitada à
Biblioteca IFSP – Câmpus São João da Boa Vista e posteriormente impressa no verso da Folha de Rosto
(folha anterior).
Catalogação na Fonte preparada pela Biblioteca Comunitária “Wolgran Junqueira Ferreira” do IFSP –
Câmpus São João da Boa Vista

ANÁLISE DE TECNOLOGIAS PARA DESENVOLVIMENTO WEB PRODUTIVO/
Paulo Henrique Nogueira Candido. – São João da Boa Vista - SP, 2017-
64 p. : il. (algumas color.) ; 30 cm.
Orientador: Prof. Everton Rafael da Silva
Tipo – Instituto Federal de Educação, Ciência e Tecnologia de São Paulo

Campus São João da Boa Vista , 2017.
1. Palavra-chave 1. 2. Palavra-chave 2. 3. Palavra-chave 3. I. Orientador. II.
Instituto Federal de Educação, Ciência e Tecnologia de São Paulo. III. Título

Trabalho de Conclusão de Curso apresentado

ao Instituto Federal de São Paulo, como
parte dos requisitos para a obtenção do
grau de Tecnólogo em Sistemas para Internet.
Área de Concentração: Ciências Exatas

e da Terra
Aprovado em DIA(número) de MÊS(por extenso) de ANO(Número).
Everton Rafael da Silva

Orientador
Titulação
Instituição
Professor Convidado 1
Titulação
Instituição
Professor Convidado 2
Titulação
Instituição

2017
AGRADECIMENTOS
Agradeço imensamente a todos os envolvidos na produção do Trabalho de Conclusão

de Curso, bem como a oportunidade de concluir um grande objetivo pessoal e profissional
que fora a vida acadêmica no Instituto Federal de Educação, Ciências e Tecnologia de
São Paulo, Câmpus São João da Boa Vista. A motivação foi possível graças ao incentivo
familiar, colegas de classe e principalmente dos Orientadores Prof. Everton Rafael da Silva
e Prof. Breno Lisi Romano, muito obrigado por serem espelhos para aqueles que aspiram
ser grandes profissionais da educação.
“Você pode encarar um erro
como uma besteira a ser
esquecida, ou como um resultado
que aponta uma nova direção”.
Steve Jobs
CANDIDO, Paulo Henrique Nogueira. Análise de Tecnologias para desenvolvimento
Web produtivo. 2017. Trabalho de Conclusão de Curso (Monografia) – Insti-
tuto Federal de Educação, Ciências e Tecnologia, Câmpus São João da Boa
Vista, São João da Boa Vista - SP. 2017.
RESUMO
Na pesquisa serão abordadas tecnologias que auxiliam no desenvolvimento de aplicações
web com a finalidade de obtenção de códigos mais organizados, de fácil manutenção e escrita
ágil, trazendo como resultado um processo de desenvolvimento de software produtivo. A
principal motivação foi a “correção” de um sistema web informatizado denominado UNIF,
criado por uma turma do Curso Técnico Integrado em Informática do ano de 2014, para
solucionar a problemática na gestão da Coordenadoria de Extensão do Instituto Federal
de Educação, Ciência e Tecnologia Câmpus São João da Boa Vista, desencadeando um
ambiente informatizado nas atividades corriqueiras como divulgação de atividades de
extensão, eventos, palestras e minicursos ofertados pelo câmpus, com auxílio de Tecnologia
da Informação. Esta pesquisa foi elaborada em um modelo de análise qualitativa dos
códigos produzidos que busca observar os ganhos da utilização de tecnologias como HTML5
e CSS3 para desenvolvimento front-end, Laravel Framework PHP no desenvolvimento
back-end e MySQL para persistência de dados no software intitulado UNIF, resultado do
trabalhos destes alunos do curso integrado.
Palavras-chave: aplicações web. css3. frameworks. html5. laravel. php.

CANDIDO, Paulo Henrique Nogueira. Análise de Tecnologias para desenvolvimento
Web produtivo. 2017. Trabalho de Conclusão de Curso (Monografia) – Insti-
tuto Federal de Educação, Ciências e Tecnologia, Câmpus São João da Boa
Vista, São João da Boa Vista - SP. 2017.
ABSTRACT
In the research will be approached technologies that help in the development of web
applications for the purpose of obtaining more organized codes, easy maintenance and agile
writing, resulting in a process of development of productive software. The main motivation
was the "correction" of a computerized web system called UNIF, created by a group of the
Technical Course Integrated in Informatics of the year 2014, to solve the problem in the
management of the Extension Coordination of the Federal Institute of Education, Science
and Technology Campus São João da Boa Vista, triggering a computerized environment in
everyday activities such as dissemination of extension activities, events, lectures and mini
courses offered by the campus, with the help of Information Technology. This research was
elaborated on a qualitative analysis model of the produced codes seeking to observe the
gains of using technologies such as HTML5 and CSS3 for front-end development, Laravel
PHP Framework in the back-end development and MySQL for data persistence in the
software titled UNIF, Result of the work of these students of the integrated course.
Keywords: css3. frameworks. html5. laravel. php. web applications.

LISTA DE ILUSTRAÇÕES
Figura 1 – Comparação de estruturas do HTML nas versões 4 e 5, respectivamente. 26

Figura 2 – Estrutura de pastas do Bootstrap. . . . . . . . . . . . . . . . . . . . . 30
Figura 3 – Funcionamento da linguagem PHP. . . . . . . . . . . . . . . . . . . . . 31
Figura 4 – Fluxo de uma aplicação web com Laravel. . . . . . . . . . . . . . . . . 32
Figura 5 – Guia de Instalação do Laravel Framework. . . . . . . . . . . . . . . . . 37
Figura 6 – Página inicial do Bootstrap Framework. . . . . . . . . . . . . . . . . . 38
Figura 7 – Desenvolvimento das aplicações com Código Puro e Código utilizando
Frameworks. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
Figura 8 – Interface do software Postman. . . . . . . . . . . . . . . . . . . . . . . 42
Figura 9 – Página de Login da aplicação. . . . . . . . . . . . . . . . . . . . . . . . 43
Figura 10 – Página de Cadastro da aplicação. . . . . . . . . . . . . . . . . . . . . . 44
Figura 11 – Página de Cadastro dos cursos da aplicação. . . . . . . . . . . . . . . . 45
Figura 12 – Modelo Lógico da base de dados. . . . . . . . . . . . . . . . . . . . . . 46
Figura 13 – Contagem de Linhas de Código na codificação para cadastro de usuário. 51
Figura 14 – Contagem de Linhas de Código na codificação para login de usuário. . 52
Figura 15 – Contagem de Linhas de Código na codificação para logout de usuário. . 53
Figura 16 – Contagem de Linhas de Código na codificação para cadastro de cursos. 54
Figura 17 – Contagem de Linhas de Código na codificação para listagem de cursos. 55
Figura 18 – Contagem de Linhas de Código na codificação para atualização de cursos. 56
Figura 19 – Contagem de Linhas de Código na codificação para exclusão de cursos. 57
Figura 20 – Contagem de Linhas de Código em ambas as aplicações (Código Puro e
Código Laravel). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
Figura 21 – Tempos de resposta da Interação Cliente-Servidor em mile segundos. . 59
LISTA DE ABREVIATURAS E SIGLAS
API Application Programming Interface
CDN Content Delivery Network
CRUD Create, Read, Update e Delete
CSS Cascading Style Sheets
FTP File Transfer Protocol
HTML Hypertext Markup Language
HTTP Hypertext Transfer Protocol
LDC Linhas de Código
IDE Integrated Development Environment
IFSP-SBV Instituto Federal de São Paulo - São João da Boa Vista
MVC Model View Controller
SASS Syntactically Awesome Style Sheets
TCC Trabalho de Conclusão de Curso
PHP PHP Hypertext Preprocessor
REST Representational State Transfer
URL Uniform Resource Locator
SQL Structured Query Language
W3C World Wide Web Consortium

SUMÁRIO
1 INTRODUÇÃO . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
1.1 Justificativa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
1.2 Objetivos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
1.2.1 Objetivo Geral . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
1.2.2 Objetivos Específicos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
1.3 Organização Deste Trabalho . . . . . . . . . . . . . . . . . . . . . . . 23
2 REFERENCIAL TEÓRICO . . . . . . . . . . . . . . . . . . . . . . . 25
2.1 HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
2.2 CSS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
2.3 FRAMEWORKS FRONT-END . . . . . . . . . . . . . . . . . . . . . . 27
2.3.1 SASS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
2.3.2 BOOTSTRAP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
2.4 PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
2.4.1 FRAMEWORKS BACK-END E LARAVEL . . . . . . . . . . . . . . . . . . 31
2.5 POSTMAN E UNIVERSAL CODE LINES COUNTER . . . . . . . . 32
2.6 TRABALHOS RELACIONADOS . . . . . . . . . . . . . . . . . . . . . 33
3 METODOLOGIA . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
3.1 Passo 1 - Definição e redução de escopo do estudo de caso adotado
(Projeto UNIF) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
3.2 Passo 2 - Escolha das tecnologias a serem adotadas . . . . . . . . . 36
3.3 Passo 3 - Aplicar os Frameworks escolhidos no Projeto UNIF . . . . 38
4 RESULTADOS E DISCUSSÃO . . . . . . . . . . . . . . . . . . . . . 41
4.1 Passo 4 - Definição das métricas para aplicação da análise . . . . . 41
4.2 Passo 5 - Análise quantitativa e qualitativa dos códigos produzidos 42
4.2.1 Ambiente de aplicação da codificação e análises . . . . . . . . . . . . . . . 42
4.2.2 Desenvolvimento Front-End (Lado Cliente) . . . . . . . . . . . . . . . . . 43
4.2.3 Desenvolvimento Back-End (Lado Servidor) . . . . . . . . . . . . . . . . . 45
4.2.3.1 Modelo Lógico e Físico do Banco de Dados . . . . . . . . . . . . . . . . . . . 45
4.2.3.2 Linhas de Código . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
4.2.3.3 Interação Cliente-Servidor . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
4.3 Passo 6 - Discussão sobre as principais vantagens e desvantagens
com a adoção das tecnologias selecionadas . . . . . . . . . . . . . . . 59
4.3.0.1 Aplicação desenvolvida com Laravel. . . . . . . . . . . . . . . . . . . . . . . 59
4.3.0.2 Aplicação desenvolvida com PHP puro. . . . . . . . . . . . . . . . . . . . . . 60
5 CONCLUSÃO . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
5.1 Sugestões para Trabalhos Futuros . . . . . . . . . . . . . . . . . . . . 61
REFERÊNCIAS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
21
1 INTRODUÇÃO
O sistema no ambiente web escolhido para a aplicação da proposta da pesquisa

chama-se UNIF. O responsável pela autorização do projeto e gerente do mesmo foi o
Professor Breno Lisi Romano, que apresentou no ano de 2015, um conjunto de requisitos
para o sistema almejando a capacidade de administrar os eventos que virão a ocorrer no
Instituto Federal e seus participantes a partir do lançamento oficial e também manter
os usuários e seus cadastros, armazenando-os em banco de dados, possuindo controle de
acesso dos usuários, notificações e cadastro pessoal, assim como disponibilizando a opção
do envio de sugestões e contato, sendo possível efetuar o agendamento de eventos a partir
do sistema. Tais eventos englobam Congressos, Palestras, Semana da Tecnologia, Visitas
Técnicas e Projetos de Extensão, Monitoria e Iniciação Científica. No mesmo ano, os alunos
do último período do curso Técnico Integrado em Informática do câmpus, com o propósito
de obterem aprendizado no desenvolvimento de aplicações e técnicas de programação,
ficaram responsáveis pelo desenvolvimento do software UFIF.
Obtiveram como resultado um sistema funcional, porém necessitando de diversas
correções, ajustes e acréscimos de funcionalidades por se tratar de ser um protótipo
desenvolvido por alunos com pouca familiaridade e tempo de contato com programação
de sistemas e possuírem domínio restrito em características de linguagens e sua sintaxe,
experiência baixa em tratamento de erros, suas soluções e curva de aprendizagem ao
conhecerem algo novo.
Devido a estes fatos, nos anos de 2016 e 2017 respectivamente, foi montado um
grupo de alunos do curso de Graduação em Tecnologia em Sistemas para a Internet, e
um aluno do curso de Pós-Graduação em Desenvolvimento para Dispositivos Móveis, para
participarem (um como bolsista, e os demais voluntários) de um Projeto de Extensão
chamado Informatização das Ações de Extensão no Campus São João da Boa Vista, para
dar continuidade ao software UFIF.
A necessidade do software UNIF também se justifica na Portaria No 2.968 de 24
de Agosto de 2015, contemplando os Projetos de Extensão com a finalidade de educação
profissional e tecnológica, em articulação com o mundo do trabalho e os segmentos
sociais e com ênfase na produção, desenvolvimento e difusão de conhecimentos científicos
e tecnológicos (BRASIL, 2015). Sendo assim, o projeto Informatização das Ações de
Extensão propõe a capacidade de analisar o software, adicionar correções e melhorias na
estruturação com base em materiais e métodos como migração do código fonte total da
aplicação, para Frameworks front-end e Frameworks back-end, respeitando padrões de
projeto e principalmente, utilizando tecnologias para desenvolvimento web produtivo.
22 Capítulo 1. Introdução
1.1 JUSTIFICATIVA
É de grande importância o objetivo do projeto UNIF, que almeja melhora na
coordenadoria de extensão do campus, para fins de maior e melhor exposição das atividades
que a mesma oferta ao decorrer dos semestres e anos letivos, atividades essas como:
minicursos, viagens, vistas técnicas, dentre outras. Como consequência, a falta de um
veículo central para canalização dessas informações e principalmente em ambiente web,
torna este trabalho limitado no sentido de nível de exposição daquilo que a coordenadoria
deseja divulgar. A premissa do software é justa e uma necessidade real, com base no relato
anterior indicando fatores que a aplicação web criada pelos alunos do ensino integrado
como a não ideal em ambiente de produção e um projeto de extensão destinado para
evolui-la, a pesquisa tem como motivação análise das tecnologias também mencionadas
anteriormente para adequar este software para internet pensando em desenvolvimento
produtivo. O desenvolvimento produtivo torna o processo de criação de software em
diversas ocasiões mais adequados para adotar como metodologia, pois gera acerca da
aplicação uma expectativa maior no que diz respeito à entrega funcional dentro do prazo
estipulado, tendo em vista, a pesquisa levanta quais as vantagens e desvantagens da adoção
de tal técnica.
1.2 OBJETIVOS
Nesta seção serão apresentados os objetivos gerais e específicos desta pesquisa.
1.2.1 Objetivo Geral

Analisar por meio da pesquisa, tecnologias para desenvolvimento web produtivo,
apontando através de discussão com os resultados obtidos, as vantagens e desvantagens da
adoção destas tecnologias. em um projeto desenvolvido para gerenciar as ações de extensão
no IFSP-SBV.
1.2.2 Objetivos Específicos

Para cumprir o objetivo geral desta pesquisa, as seguintes etapas serão realizadas:
• Realizar um levantamento bibliográfico das principais tecnologias envolvidas;
• Definir o escopo do estudo de caso adotado (Projeto UNIF);
• Escolher as tecnologias a serem adotadas na pesquisa;
• Aplicar os Frameworks escolhidos no Projeto UNIF;

1.3. Organização Deste Trabalho 23
• Realizar uma análise quantitativa e qualitativa dos códigos produzidos com as

tecnologias;
• Discutir sobre as principais vantagens e desvantagens com a adoção das tecnologias

escolhidas.
1.3 ORGANIZAÇÃO DESTE TRABALHO

Esta pesquisa possui 5 capítulos. No capítulo 1, faz-se uma introdução ao software
escolhido como estudo de caso para aplicação de tecnologias a fim de obter resultados
através de uma análise quantitativa e qualitativa para fomento e discussão de suas vantagens
e desvantagens ao adotá-las.
No capítulo 2, são apresentadas as tecnologias através do referencial teórico, base-
ando em demais trabalhos acadêmicos e publicações para discorrer sobre HTML5, CSS3,
PHP, Postman, Universal Code Lines Counter e Frameworks como Boostrap e Laravel para
ganho de produtividade na escrita dos códigos destas linguagens. Também são apresentados
trabalhos relacionados à pesquisa.
Já o capítulo 3, discorre sobre a metodologia que será aplicada na pesquisa, tornando
presentes as técnicas e propósitos para o desenvolvimento da proposta, em uma análise
quantitativa e qualitativa, apresentando os três primeiros passos de um total de seis passos,
para alcance dos objetivos da pesquisa.
No capítulo 4 são descritos os três últimos passos, resultados e discussões após o
desenvolvimento do software web e aplicação da análise proposta.
Por fim, o capítulo 5 aponta a conclusão obtida após o termino do trabalho e
sugestões de trabalhos futuros.
25
2 REFERENCIAL TEÓRICO
Os Frameworks, são uma coleção de códigos-fonte, classes, funções, técnicas e

metodologias que facilitam o desenvolvimento de novos softwares (MINETTO, 2007), este
motor de desenvolvimento pode ser em diferentes linguagens de programação. Para esta
pesquisa foram escolhidos o Laravel para back-end por apresentar alta produtividade de
desenvolvimento, ser gratuito e possuir comunidade relevante acerca dos desenvolvedores
atuais e Bootsatrp para front-end. Esta produtividade, dá-se ao fato do Framework criar
através de comandos classes e controladores do sistema.
O Laravel utiliza a linguagem PHP (Sigla para Hypertext Preprocessor, Linguagem
de Programação para Servidores) que tem similaridade com as linguagens C e Java.
Para confrontos nas análises e nos resultados, as mesmas linguagens citadas acima serão
codificadas em IDE’s (ambientes de desenvolvimento de softwares) sem o auxílio dos
Frameworks, em seu modo mais próximo do "cru", criando classes, funções e controladores
sem usar a facilidade de possuir bibliotecas específicas que geram esses códigos. Dos
materiais utilizados para o desenvolvimento da aplicação, alguns são tecnologias e recursos
livres para programadores ou também chamadas de Open Source, sendo eles: NetBeans IDE
(para codificação da aplicação) e phpMyAdmin (SGBD SQL para persistência dos dados).
O sistema operacional utilizado que abrigará os softwares citados será uma distribuição
Linux Ubuntu 16.10.
Diante do contexto apresentado, este capítulo irá apresentar algumas tecnologias
que serão adotadas na metodologia desta pesquisa.
2.1 HTML5
É a última versão estável do HTML (HyperText Markup Language), tecnologia
responsável pela marcação e estruturação dos elementos que serão expostos na página de
um web site ou web app, fundamental em sua existência para o que será visualizado pelo
usuário final, ou seja, o resultado que aparecerá em sua tela.
A versão 5 da linguagem vem com novos elementos, atributos, comportamentos e
um conjunto maior de tecnologias que permite o desenvolvimento de aplicações e web sites
mais diversos e poderosos(EIS e FERREIRA, 2012). Um dos objetivos para a criação desta
versão, que surgira no início do ano de 2008, provida pelo World Wide Web Consortium
(W3C), era criar um padrão universal para desenvolvimento das páginas e com maior
compreensão por parte dos desenvolvedores no que diz respeito a formatação do seu código
fonte, tornando os resultados da marcação (utilizando tags da linguagem) menos plurais.
26 Capítulo 2. Referencial Teórico
Determinar palavras reservadas da tecnologia para um escopo específico referente a uma

área da página, como por exemplo, a tag “nav” abrigará apenas conteúdos referentes a
navegação, segundo as recomendações do W3C, seriam delimitadas a liberdade que o
programador teria em uma versão anterior, podendo identificar uma tag “div” genérica
como nav, navigation, menu, entre outros nomes. Com o surgimento dessa nova tecnologia,
a marcação toma padrões mais concisos e semânticos que contribuem para um melhor
desenvolvimento quando usados corretamente.
A Figura 1 mostra as diferenças entres as versões anteriores e seu problema
de direcionamento específico da tag na programação com relação ao avanço na nova
padronização presente no HTML5:
Figura 1 – Comparação de estruturas do HTML nas versões 4 e 5, respectivamente.
Fonte: Elaborada pelo autor com base na W3C.
2.2 CSS3
Também é a versão mais recente da tecnologia, sendo desenvolvido constantemente
após o início dos anos 2000, por Eric A. Meyer e Bert Bos no W3C. Engloba o resultado
que será exibido na tela do usuário da aplicação, mas com uma finalidade de “estilizar” os
elementos contidos nas páginas, tais quais: posicionamento de textos, imagens, cor e serifa
das fontes, famílias das fontes, formatações do conteúdo em si ligados a esquema de cores
e etc.
O CSS (Cascading Style Sheets) possui sua sintaxe de organização no espoco do có-
digo assim como o HTML e outras linguagens possuem os seus, e sentiu-se uma necessidade
2.3. FRAMEWORKS FRONT-END 27
por parte dos desenvolvedores para aprimorar uma importante etapa do desenvolvimento
de aplicações para melhores resultados na tecnologia, focando principalmente padronização,
produtividade, reaproveitamento de código (questão importante para desenvolvimento de
softwares de alto desempenho) e inovações no sentido de melhorar a iteração e velocidade
de apresentação dos layouts nos web apps e sites disponíveis para os usuários. Sendo o
responsável por formatar a informação que é entregue pelo HTML como imagens, textos,
vídeos, áudios entre outros elementos, a versão 3 da tecnologia trouxe a possibilidade de
seleção de elementos específicos, gradientes em textos, bordas arredondadas, controle de
rotação, controle de perspectiva, animações, controle básico 3D e demais features (EIS e
FERREIRA, 2012).
O código abaixo deixa claro a evolução da usabilidade do CSS3 com relação as
versões antigas, tornando possível a simples adição de um círculo em uma página web sem
a necessidade da importação de um arquivo de imagem na tag "img"do HTML, criando o
próprio apenas com uma classe CSS usando o recurso de arredondamento border-radius:
1
2 . circle {
3 width : 200 px ;
4 height : 200 px ;
5 line - height : 200 px ;
6 border - radius : 50%; /* arredondamento */
7 -moz - border - radius : 50%;
8 - webkit - border - radius : 50%;
9 float : none ;
10 margin : 0 auto ;
11 }
2.3 FRAMEWORKS FRONT-END

Atrelado aos recursos tecnológicos inovadores, possuímos soluções para melhorar
ainda mais a questão de organização, reuso de código e fácil implementação de elementos
no desenvolvimento dos projetos, neste ponto, surge a ideia da utilização de Frameworks
front-end para auxiliar e tornar mais prático e produtivo o trabalho do programador. A
vantagem da grande parte dos mesmos, é que tarefas repetitivas podem ser automatizadas.
É o conceito conhecido como DRY (Don’t Repeat Yourself ), que pode ser traduzido para
“não se repita” (MINETTO, 2007), tornando tarefas repetitivas padronizadas e pré-criadas
com fácil acesso para alteração ou adição de códigos, no caso das linguagens de marcação
como HTML e CSS, um Framework tem a função de já possuir escrito em sua estrutura de
código fonte, estruturas e classes básicas que são definidas como “padrões” em quaisquer
projetos, assim, não só agilizam mas também auxiliam na padronização de projetos.
Aspectos de design e layout devem seguir conceitos pré-definidos pelos criadores das
aplicações, a versão 3 do CSS contribui muito para isto, e trata de tornar mais interativo o
resultado final do front-end que será apresentado para o usuário (HTML combinado com
CSS). Outra particularidade da tecnologia é a implementação do conceito de orientação a
objetos para facilitar o desenvolvimento e a futura manutenção das aplicações, tornando o
desenvolvimento mais produtivo.
2.3.1 SASS
Com o objetivo de tornar o CSS ainda mais dinâmico, a partir do ano de 2006, foram
criadas formas para auxiliar e estender a linguagem tornando seus recursos ainda mais
fáceis de manuseio. Para esta etapa de desenvolvimento, são indicados os pré-processadores,
tecnologia para alinhamentos de regras CSS, reaproveitamento de escrita e uso de variáveis
e funções no mesmo (SOUZA, s.d.).
A importância de aderir estes novos recursos, como o SASS (Syntactically Awesome
Style Sheets) para funcionalidades padrões na criação das aplicações é necessariamente
recomendável. O SASS trabalha com a ideia de escrita do código em um arquivo .scss,
que por sua vez não pode ser interpretado pelos navegadores de internet, e posteriormente
serem compilados em um terminal com o auxílio da lingugem Ruby para ser processado e
ter como saída um arquivo .css
Sendo assim, o código abaixo exemplifica a ganho poderoso de manutenibilidade
do CSS em aplicações web de grande porte:
1
2 /* Arquivo SASS ( input ) : */
3
4 $primary - color : #3 bbfce
5 $margin : 16 px
6
7 . content - navigation
8 border - color : $primary - color
9 color : darken ( $primary - color , 10%)
10
11
12 /* Arquivo CSS ( output ) : */
13
14 . content - navigation {
15 border - color : #3 bbfce ;
16 color : #2 b9eab ;
17 }
2.3. FRAMEWORKS FRONT-END 29
2.3.2 BOOTSTRAP
Criado em meados de 2011 por Mark Otto e Jacob Thornton, desenvolvedores
do Twitter, este Framework é a junção das tecnologias front-end citadas anteriormente,
alinhado com a filosofia mobile first, possibilita aos desenvolvedores agilidade e facilidade
no processo de criação das páginas HTML e folhas de estilo CSS (SILVA, 2015). Esta
biblioteca pode ser adquirida gratuitamente no site: http://getbootstrap.com/, e precisa
ser importada na página principal da aplicação para ser utilizada.
O Bootsatrp trabalha com um sistema de grid possuindo 12 colunas, os grids são
conjuntos de classes CSS que definem a posição dos elementos dispostos no layout da
aplicação de acordo com a resolução ou dispositivo que irá acessa-la (SILVA, 2015). Com
esta tecnologia, a criação se torna veloz por possuir um arquivo denominado bootstrap.css
no diretório "css"da biblioteca, com milhares de classes pré-definidas já estilizadas de
acordo com as necessidades genéricas de uma aplicação web, viabilizando a possibilidade da
criação de sites responsivos, páginas com habilidade de se adequar a qualquer dispositivos
que irá acessa-la apresentando seu conteúdo. Este Framework também possui integração
com jQuery, uma biblioteca da linguagem de scripts JavaScript usada para deixar as
aplicações mais dinâmicas com controle de eventos e interação dos usuários ainda melhores.
Será apresentada a estrutura de pastas da biblioteca na Figura 2:
Figura 2 – Estrutura de pastas do Bootstrap.
Fonte: SILVA, 2015, p. 25.
2.4 PHP
Não menos importante, após as etapas de criação do front-end da aplicação,
chegamos ao “motor” que fica por trás de toda parte visual e trata do funcionamento dos
web apps e sites que necessitam destes recursos. A linguagem de programação utilizada
para esse dever é o PHP, iniciando com o significado de Personal Home Page Tools, criada
por Rasmus Lerdorf em 1994, costumava ser usada em projetos pessoais, alguns anos
depois, teve seu código aberto e possou a adotar características de diversos desenvolvedores
que contribuíram ao projeto para torna-la com a nomenclatura que conhecemos hoje, um
acrônimo recursivo de PHP: Hypertext Preprocessor (DALL’OGLIO, 2015).
O PHP é uma linguagem interpretada no server-side(lado servidor), é necessário
que o servidor possua um interpretador devidamente configurado (MILETTO e BERTAG-
NOLLI, 2014). A Figura 3 ilustra seu funcionamento, as classes e controladores codificados
no back-end recebem requisições do client-side (lado cliente), que por sua vez terão sua
codificação em PHP interpretadas no servidor e retornarão uma resposta ao client:
2.4. PHP 31
Figura 3 – Funcionamento da linguagem PHP.
Fonte: MILETTO e BERTAGNOLLI, 2014, p. 172.
Esta linguagem foi escolhida por ser simplificada no que diz respeito a sua usabili-
dade para solucionar problemas em softwares web, trazendo consigo uma fácil adaptação do
desenvolvedor no domínio da mesma para implementar sua lógica e algoritmos direcionados
a proposta do projeto.
2.4.1 FRAMEWORKS BACK-END E LARAVEL

Como dissertado nos tópicos anteriores desta pesquisa, assim como nas tecnologias
para desenvolvimento de layouts, também existem Frameworks para agregar produtividade
no desenvolvimento bkack-end, os códigos que serão produzidos para serem interpretados no
server-side, reduzindo a reescrita de código fonte ou forçar a adoção de Padrões de Projetos
como o Model, View, Controller (GABARDO, 2017). Criado por Taylor Otwell em 2011,
o Laravel, The PHP Framework For Web Artisans, possui um conjunto de funcionalidades
como fábrica de conexão com os mais diversos tipos de bancos de dados, versionamento de
banco de dados, disparo de e-mails e módulo de autenticação de usuários pré-configurados
(TURINI, s.d.). Também possui vantagens do ponto de vista de produção, sendo uma
ferramenta que não irá cobrar o tempo todo que o desenvolvedor declare como cada item
dos componentes serão utilizados (SILVA, 2015).
O padrão de projeto MVC incorporado na tecnologia Laravel possui o papel de
separar a aplicação em camadas para a facilitação do desenvolvimento e organização dos
códigos para manutenção e escalabilidade em futuras adições, oferecendo vantagem na
separação da camada lógica (Models e Controllers) da camada de apresentação (View). A
Figura 4 demonstra o fluxo de uma aplicação desenvolvida através do Laravel:
Figura 4 – Fluxo de uma aplicação web com Laravel.
Fonte: GABARDO, 2017, p. 33.
Exemplificado na Figura 4, o caminho para input e output dos dados em uma

aplicação Laravel são iniciados através de um requisição HTTP (Hypertext Transfer
Protocol). As rotas mapeiam e encaminham para um determinado controller que processará
esta requisição, e se encarregará de buscar ou enviar dados para um model, o controller
também poderá enviar dados para uma view ou apresentar páginas estáticas pré-definidas
em um controller, (GABARDO, 2017) o MVC no Laravel possui:
Routes (rotas) - responsável por definir os caminhos das requisições HTTP, não são
especificamente uma camada do modelo MVC, porém, no Laravel e em alguns Frameworks
definem quais métodos serão acionados nos controllers a partir de sua nomenclatura e
parâmetros.
Models (modelos) - representam as entidades definidas da aplicação, bem como
seus atributos e relacionamentos para persistência ou obtenção de dados.
Views (visões) - carregam a utilidade da apresentação das páginas da aplicação,
podendo receber dados dinâmicos ou serem estáticas, possuem uma notação específica de
tags para seu sistema de template a fim de manter o padrão e não poluir a camada com
códigos PHP.
Controllers (controladores) - recebem através das rotas, parâmetros para acionarem
métodos, e dependendo da lógica de negócio, entregam ou recebem dados, manipulam
arquivos, fazem chamada de API’s (Application Programming Interface) e demais recursos
de uma aplicação web.
2.5 POSTMAN E UNIVERSAL CODE LINES COUNTER

A tecnologia Postman torna-se de grande auxílio para os desenvolvedores com
relação a testes de requisições e fluxo com retornos esperados com o Protocolo HTTP. Para
a facilitação de situações reais do comportamento de requisições em API ou aplicações
2.6. TRABALHOS RELACIONADOS 33
web convencionais, o software Postman simula através de sua interface uma interação com
a URL (Uniform Resource Locator) das aplicações criadas para envio de parâmetros dos
quais a requisição aguarda, exibindo o status para a requisição, podendo simular envios
de parâmetros com os métodos GET, POST, PUT, DELETE entre outros (POSTMAN,
2017).
O software Universal Code Lines Counter é uma aplicação para contagem de
linhas dos códigos fontes resultantes em um processo de desenvolvimento de software,
Com este aplicativo é possível obter um relatório detalhado com as linhas, espaços em
branco, comentários e linhas de código mescladas com comentários. Possui uma simples
instalação e é compatível com linguagens de programação como: AutoIt, C, CSS, COBOL,
Delphi/Pascal, Fortran, HTML, Java, JavaScript, MetaQuotes Language 4/5 (MQL),
Modula 2/3, MySQL, Perl, PHP, Prolog, Python, Ruby, VBScript/ASP, Visual Basic e
XML (AB-TOOLS, 2017).
2.6 TRABALHOS RELACIONADOS

Esta seção irá apresentar trabalhos acadêmicos relacionados com o objetivo principal
desta pesquisa, o ganho de produtividade no processo de desenvolvimento de aplicações web
utilizando tecnologias dotadas de Frameworks. Segundo Eder, Márcio e Renata (FRANCO,
PIEDADE e RÊGO, 2014) através do trabalho, é apresentada uma proposta de criação
de um pequeno Framework desenvolvido pelos autores, com o objetivo de possuir sua
biblioteca de classes e métodos reduzida e menos extensas para atender projetos de pequeno
escopo. Obtiveram como resultado melhoria de 51,1% no tempo de desenvolvimento de
um website de pequeno porte.
Já para Alexandre (DUARTE, 2016), a resolução para a problemática no o Curso de
Luteria da Universidade Federal do Paraná, de que os instrumentos musicais construídos no
mesmo, ou expostos ali, não serem catalogados, são selecionadas para resolução, Frameworks
semelhantes como Laravel, Angular e Material Design, para a criação de uma plataforma
que atenda à necessidade do registro destes instrumentos, atingindo um sistema bem
recebido e aceitado por seus usuários necessitando futuramente de correções do layout e
melhorias de usabilidade.
Para Pablo (SILVA, 2011), a proposição de maneira teórica e a utilização de um
Framework PHP semelhante ao Laravel na busca por soluções ágeis e produtivas na criação
de Web Services, conseguiu demonstrar integração entre linguagens através do estudo do
Zend Framework.
Para Peterson e Juliano (BEZERRA e SCHIMIGUEL, 2015), a demonstração do
exemplo de um projeto real de curto prazo com a utilização de Framework, porém desta
vez, para aplicações mobiles alcançam o objetivo desta aplicação para dispositivos móveis
compatíveis com sistemas operacionais Android e Windows Phone.

Para Paulo, Jocimar, Luiz e Everton (CANDIDO, SILVA, APARECIDO e SILVA,
2016) a utilização de tecnologias como HTML5, Bootstrap, CSS3 e Laravel Framework,
demostram resultados propícios para softwares web que buscam organização de códigos,
fácil leitura e manutenção e desenvolvimento de uma aplicação respeitando Padrões de
Projeto.
35
3 METODOLOGIA
Para realizar o objetivo da pesquisa de analisar as tecnologias para desenvolvimento

web produtivo, com base no Referencial Teórico apresentado no capítulo anterior, selecio-
nando tecnologias e trabalhos relacionados, foram definidos seis passos para a realização
da metodologia proposta nesta pesquisa, sendo eles:
• Passo 1 - Definição e redução de escopo do estudo de caso adotado (Projeto UNIF);
• Passo 2 - Escolha das tecnologias a serem adotadas;
• Passo 3 - Aplicar os Frameworks escolhidos no Projeto UNIF;
• Passo 4 -Definição das métricas para aplicação da análise;
• Passo 5 - Análise qualitativa dos códigos produzidos;
• Passo 6 - Discussão sobre as principais vantagens e desvantagens com a adoção das

tecnologias selecionadas.
3.1 PASSO 1 - DEFINIÇÃO E REDUÇÃO DE ESCOPO DO ES-

TUDO DE CASO ADOTADO (PROJETO UNIF)
O projeto denominado Informatização das Ações de Extensão no Câmpus São João
da Boa Vista, surgira para remodelar a aplicação web UNIF, requisitada pela Coordenadoria
de Extensão do IFSP-SJBV no ano de 2015, como projeto de conclusão de curso para
os alunos do Curso Técnico em Informática Integrado. A ação de extensão prima por
dar continuidade no software, corrigindo e acrescentando funcionalidades com base nos
requisitos da coordenadoria, requisitos estes aspirados em um web app capaz de gerenciar
cursos ofertados pelo IFSP-SJBV, cadastro de membros da comunidade interna e externa
em atividades, gerência de viagens, visitas técnicas e demais necessidades incorporadas
na coordenadoria. Sendo assim, demonstra-se como software web ideal para aplicar o uso
das tecnologias citadas no capítulo anterior a fim de resultar na análise proposta nesta
pesquisa.
Após a leitura da documentação fornecida pelo gerente do projeto UNIF, o Professor
Breno Lisi Romano, foi definido a utilização de duas funcionalidades do sistema para
sofrerem a aplicação da pesquisa, sendo elas: controle de acesso dos usuários, cadastro e
manutenção de cursos. Foram escolhidas por se tratarem de comportamentos presentes na
maioria das soluções em software presentes nos mercados de desenvolvimento tradicionais
36 Capítulo 3. Metodologia
e acadêmicos. Os códigos produzidos envolvendo as funcionalidades implementarão o

comportamento de CRUD (Create, Read, Update e Delete, responsáveis pela persistência
de dados em Bancos de Dados) para análise e discussão. O escopo reduzindo especificamente
para estas funcionalidades citadas foram analisados e extraídos da documentação do Projeto
UNIF, através dos documentos de Termo de Abertura do Projeto, Solicitação dos Principais
Envolvidos, Documento de Visão e Modelo de Casos de Uso. Com base nas documentações
citadas, foram reduzidos para atender as expectativas propostas na pesquisa referente à
análise.
3.2 PASSO 2 - ESCOLHA DAS TECNOLOGIAS A SEREM ADO-

TADAS
Cada uma das tecnologias citadas na pesquisa foram escolhidas por se tratarem de
recursos Open Source, estarem em uma crescente evidência na comunidade de desenvolvi-
mento web, e por apresentarem um conjunto de funcionalidades para solucionar paradigmas
e problemáticas apontadas pela Engenharia de Software. A organização de códigos escritos
e facilidades dispostas pelos fomentam a motivação das escolhas do ponto de vista do
propósito de alcance em produtividade.
A proposta está fundamentada na utilização dos Frameworks Laravel e Bootstrap,
pois, segundo citado no livro Laravel Para Ninjas escrito por Ademir Cristiano Gabardo
os mesmos nos ajudam enquanto desenvolvedores para aproveitar métodos, classes e
adotarmos um padrão de projeto presente em sua estrutura.
O Framework Laravel é mencionado por Peterson Tubini Bezerra, no trabalho
Desenvolvimento de Aplicações Mobile Cross-Plataform Utilizando Phonegap, como sendo
um dos melhores Open-Source voltado para aplicações web, de fácil escrita, aprendizagem
de suas características e disponibilidade de comunidade ativa na internet para feedbacks.
A obtenção e instalação do Laravel para ser incluso tanto em projetos individuais,
quanto nesta pesquisa, é feita através do endereço de web: https://laravel.com/. Após o
carregamento da página o desenvolvedor deverá acessar a aba Documentation e seguir as
instruções fornecidas na página, como Requisitos do Servidor, Instalação e Configuração
do Laravel e Configuração do Servidor Web. A Figura 5 abaixo exemplifica o guia de
instalação:
3.2. Passo 2 - Escolha das tecnologias a serem adotadas 37
Figura 5 – Guia de Instalação do Laravel Framework.
Fonte: Elaborado pelo autor com base no site oficial do Laravel.
O Framework Bootstrap utilizado, é o mais popular dentre os disponíveis no

mercado (BOOTSTRAP, 2017), para desenvolvimento de interfaces, alinhando tecnologias
como HTML5, CSS3 e jQuery, filosofia mobile first, de fácil manuseio por programadores
nos mais diversos níveis de conhecimento e projetos com variados escopos. Sua obtenção e
instalação também é feita através do site oficial no link: https://getbootstrap.com/. A
Figura 6 demostra sua página inicial contento links para obtenção da biblioteca através de
download do código fonte, ou obtenção remota via CDN (Content Delivery Network) e
documentação para uso dos recursos da Interface do Usuário das aplicações:
38 Capítulo 3. Metodologia
Figura 6 – Página inicial do Bootstrap Framework.
Fonte: Elaborado pelo autor com base no site oficial do Bootsatrp.
Os testes propostos no decorrer da análise serão para averiguação e obtenção

de dados com propósito de observar uma análise quantitativa e qualitativa dos códigos
produzidos utilizando os Frameworks para codificação, como também analisar uma co-
dificação sem o auxílio dos mesmos na camada de Back-End, e com o auxílio em ambas
as aplicações na camada Front-End para estudo da viabilidade da escrita de softwares
utilizando as ferramentas, como dizem Emerson Rios e Trayahú Moreira Filho, no livro
Teste de Software, também nos referir à qualidade do software, para definir um ótimo
produto final, que dependa do processo de desenvolvimento deste software.
3.3 PASSO 3 - APLICAR OS FRAMEWORKS ESCOLHIDOS NO

PROJETO UNIF
Após os passos anteriores serem finalizados, a pesquisa chega em seu estágio de
desenvolvimento e aplicação das tecnologias selecionadas, a Figura 7 exemplifica o processo
de criação dos softwares web propostos para a análise quantitativa e qualitativa dos códigos
produzidos:
3.3. Passo 3 - Aplicar os Frameworks escolhidos no Projeto UNIF 39
Figura 7 – Desenvolvimento das aplicações com Código Puro e Código utilizando Fra-
meworks.
Fonte: Elaborado pelo autor.
Os próximos passos indicados na Metodologia tratarão de explicar e desenvolver

cada etapa exposta na Figura 7 e serão apresentados no capítulo de Resultados e Discussão
por se tratarem de resultados.
41
4 RESULTADOS E DISCUSSÃO
4.1 PASSO 4 - DEFINIÇÃO DAS MÉTRICAS PARA APLICAÇÃO

DA ANÁLISE
As métricas adotadas para a realização das análises quantitativa e qualitativa serão
Linhas de Código e Interação Cliente-Servidor. A codificação realizada na camada de
Back-End com o auxílio das ferramentas e a realizada sem o auxílio das mesmas, serão
submetidas a duas estratégias para comparação e fomentação da análise e discussão. A
primeira métrica, Linhas de Código, de acordo com JONES (2009, apud ZAPALOWSKI,
2011, p. 27) surge quando houve a necessidade de se medir a produtividade, qualidade e
custo do desenvolvimento de software, sendo assim, a produtividade do desenvolvimento
será medida em linhas de código por unidade de tempo. A contagem de linhas será feita
através da ferramenta Universal Code Lines Counter.
A segunda métrica, Interação Cliente-Servidor, será responsável por medir o tempo
da requisição entre o cliente (Navegador de Internet) e o servidor (Aplicação e Banco de
Dados) dos códigos produzidos através do software Postman, uma ferramenta que pode
ser instalada como extensão do navegador web Google Chrome ou com um instalador
executável para Desktops com a finalidade criar testes para API REST interagindo como
um cliente enviando requisições via protocolo HTTP, simulando o fluxo através dos métodos
e definindo tempo de resposta das interações. A figura 8 demonstra a interface intuitiva
do programa e um exemplo de envio de requisição para uma aplicação web:
42 Capítulo 4. Resultados e Discussão
Figura 8 – Interface do software Postman.
Fonte: Elaborado pelo autor com base no software oficial Postman.
4.2 PASSO 5 - ANÁLISE QUANTITATIVA E QUALITATIVA DOS

CÓDIGOS PRODUZIDOS
Os códigos produzidos serão analisados e confrontados, sendo exibidos a partir de
gráficos os números do comportamento da aplicação em seus dois modelos de desenvolvi-
mento (com o auxílio e sem o auxílio dos Frameworks) para servirem como referência à
discussão da pesquisa e apontarem os resultados obtidos. Também serão fornecidos trechos
de código da aplicação para exemplificar a diferença das estruturas e tecnologias.
4.2.1 Ambiente de aplicação da codificação e análises

Para a realização das análises de ambas as aplicações, tanto o programa web com a
importação dos Frameworks, quanto o sem, será criado um conjunto de amostras baseado
em 15 repetições, para definir uma média aritmética dos mesmos testes das requisições
para a verificação do tempo de resposta, pelo fato de estarem sendo executados em uma
máquina pessoal localmente, podendo sofrer variações de tempo da resposta do Sistema
Operacional, ou cache. Sendo assim, os resultados que serão apresentados foram obtidos
através da seguinte máquina com as configurações de hardware e software durante o período
de codificação e testes:
• Processador - AMD Athlon II X2 270 3.4GHz ;
• Placa Mãe - ASUS M5A78L-M LX/BR 2;
• Mémória - Vengeance 8GB (2x4GB) DDR3 DRAM 1600MHz C9 ;

4.2. Passo 5 - Análise quantitativa e qualitativa dos códigos produzidos 43
• Disco de Estado Sólido - Sandisk Plus 240GB;
• Sistema Operaciona - Windows 10 Education de 64 bits;
• Servidor Local - XAMPP para Windows com Apache + MariaDB + PHP 7.0.25;
• Ambiente de Desenvolvimento - NetBeans IDE.
4.2.2 Desenvolvimento Front-End (Lado Cliente)

As interfaces que serão visualizadas pelos usuários da aplicação, para interação
com o que chamamos de cliente na arquitetura de desenvolvimento dos softwares, foram
desenvolvidas e codificadas utilizando o Framework Bootstrap, as Figuras 9 e 10, respecti-
vamente, mostram o resultado final da codificação das interfaces com a tecnologia HTML
responsável pela marcação e disposição dos elementos das telas, bem como a estilização
através dos códigos CSS inclusos na biblioteca Bootstrap para as páginas de controle dos
usuários definidas no escopo:
Figura 9 – Página de Login da aplicação.

Figura 10 – Página de Cadastro da aplicação.
Um trecho do código que será interpretado por navegadores de internet para a

renderização destas páginas apresentadas anteriormente pode ser visualizado abaixo:
1
2 <! DOCTYPE html >
3 < html lang ="{{ app () -> getLocale () }}" >
4 < head >
5 < meta charset =" utf -8" >
6 < meta http - equiv =" X - UA - Compatible " content =" IE = edge " >
7 < meta name =" viewport " content =" width = device - width , initial - scale =1" >
8
9 < title > UNIF </ title >
10
11 < link href ="{{ asset ( ’ css / bootstrap . css ’) }}" rel =" stylesheet " >
12 </ head >
13 < body >
O software web possui um total de cinco interfaces para à aplicação dos testes
sugeridos nesta pesquisa, sendo elas páginas para autenticação do usuário como mostrado
anteriormente, e mais três para a aplicação dos testes de CRUD envolvendo o módulo de
cadastro de cursos extraído da documentação, A Figura 11 exposta demostra o resultado
de uma das três telas direcionadas para este propósito:
Figura 11 – Página de Cadastro dos cursos da aplicação.
4.2.3 Desenvolvimento Back-End (Lado Servidor)

O desenvolvimento da camada Back-End, está atrelado à codificação utilizando a
linguagem de programação PHP, para interpretação e a aplicação das regras de negócio na
manipulação dos dados que serão inclusos nos campos das interfaces expostas anteriormente
e a linguagem de manipulação SQL, para persistência e manuseio dos dados nas operações
de CRUD. Os testes para análise utilizando as métricas Linhas de Código e Interação
Cliente-Servidor serão feitos baseados na codificação PHP e SQL com a utilização e sem a
utilização do Framework Laravel.
4.2.3.1 Modelo Lógico e Físico do Banco de Dados
O software com escopo reduzido possui duas tabelas para a persistência e aplicação
da análise, sendo elas uma tabela usuários e outra cursos, elas representam duas entidades
do aplicativo para a manipulação de objetos a fim de serem definidos e manipulados na
linguagem de programação, para serem posteriormente persistidos na base de dados. A
Figura 12 exposta demonstra o Modelo Lógico da base de dados utilizada nos testes:
Figura 12 – Modelo Lógico da base de dados.
Fonte: Gerado pelo software phpMyadmin.
O Modelo Físico é apresentado através da linguagem SQL que será escrita em um

Sistema de Gerenciamento de Banco de Dados, ou através do Laravel, com a finalidade
de criar a base de dados, juntamente com suas tabelas contendo colunas e linhas para o
armazenamento de dados.
O trecho de código exemplificado abaixo mostra a criação deste modelo através do
software phpMyadmin:
1
2
3 CREATE TABLE ‘ cursos ‘ (
4 ‘id ‘ int (10) UNSIGNED NOT NULL ,
5 ‘ status ‘ smallint (6) NOT NULL ,
6 ‘ titulo ‘ varchar (60) COLLATE ut f8 mb 4_ un ic od e_c i NOT NULL ,
7 ‘ descricao ‘ text COLLATE ut f8 mb 4_ un ic ode _c i NOT NULL ,
8 ‘ max_participantes ‘ smallint (6) NOT NULL ,
9 ‘ data ‘ date NOT NULL ,
10 ‘ hora ‘ time NOT NULL ,
11 ‘ local ‘ varchar (100) COLLATE ut f8 mb 4_ un ic od e_c i NOT NULL ,
12 ‘ usuario_id ‘ int (10) UNSIGNED NOT NULL ,
13 ‘ criado_em ‘ datetime NULL DEFAULT NULL ,
14 ‘ atualizado_em ‘ datetime NULL DEFAULT NULL
15
16 ) ENGINE = InnoDB DEFAULT CHARSET = utf8mb4 COLLATE = u tf 8m b4 _u ni co de _c i ;
17
18 ALTER TABLE ‘ cursos ‘
19 ADD CONSTRAINT ‘ cursos_usuario_id_foreign ‘ FOREIGN KEY ( ‘ usuario_id ‘)

REFERENCES ‘ usuarios ‘ ( ‘ id ‘) ;
Já o próximo trecho exemplifica a criação deste modelo através do Framework Lara-

vel, com sua funcionalidade denominada Migrations um controle de versão para banco de
dados, fornecendo para os desenvolvedores facilidade para modificação e compartilhamento
do esquema dos bancos de dados das aplicações:
1
2
3 public function up ()
4 {
5 Schema :: create ( ’ cursos ’ , function ( Blueprint $table ) {
6
7 $table - > increments ( ’ id ’) ;
8 $table - > smallInteger ( ’ status ’) ;
9 $table - > string ( ’ titulo ’ ,60) ;
10 $table - > text ( ’ descricao ’) ;
11 $table - > smallInteger ( ’ max_participantes ’) ;
12 $table - > date ( ’ data ’) ;
13 $table - > time ( ’ hora ’) ;
14 $table - > string ( ’ local ’ ,100) ;
15 $table - > integer ( ’ usuario_id ’) -> unsigned () ;
16 $table - > foreign ( ’ usuario_id ’) -> references ( ’ id ’) -> on ( ’ usuarios ’) ;
17 $table - > timestamps () ;
18
19 }) ;
20 }
4.2.3.2 Linhas de Código
A métrica Linhas de Código será aplicada aos blocos de códigos das linguagens
PHP e SQl para confronto da quantidade de escrita que cada método de desenvolvimento
proporciona seguindo regras de sintaxe e lógica de programação para o funcionamento do
fluxo da aplicação. O trecho de código abaixo demonstra um bloco para autenticação do
usuário na aplicação desenvolvida apenas com scrptis PHP fora de um padrão de projeto
e isento do paradigma de Programação Orientada a Objetos:
1
2 <? php
3
4 require ’ banco . php ’;
5 $pdo = Banco :: conectar () ;
6
7 session_start () ;
8 error_reporting (0) ;
9 $var = $_SESSION [ ’ name ’];

10 $var2 = $_SESSION [ ’ id ’];
11
12 if ( $var != null && $var2 != null ) {
13
14 header ( ’ Location : http :// localhost / tcc / ’) ;
15 exit ;
16
17 }
18
19 if (! empty ( $_POST ) ) {
20
21
22 $email = $_POST [ ’ email ’];
23 $password = hash ( ’ sha256 ’ , $_POST [ ’ password ’]) ;
24
25
26 $select = $pdo - > query (" SELECT * FROM ‘ usuarios ‘ WHERE ‘
email ‘ LIKE ’ $email ’ AND ‘ password ‘ LIKE ’ $password ’
") ;
27
28
29 $result = $select - > fetch ( PDO :: FETCH_OBJ ) ;
30
31 if (! empty ( $result ) ) {
32
33 session_start () ;
34 $_SESSION [ ’ name ’] = $result - > name ;
35 $_SESSION [ ’ id ’] = $result - > id ;
36 header ( ’ Location : http :// localhost / tcc / ’) ;
37 exit ;
38
39 } else {
40
41 echo ’< html lang =" pt - Br " >
42 < head >
43 < meta charset =" utf -8" >
44 < meta http - equiv =" X - UA - Compatible " content =" IE = edge " >
45 < meta name =" viewport " content =" width = device - width ,
initial - scale =1" >
46
47 < title > UNIF </ title >
48 < style type =" text / css " >
49 . error { color :# a94442 ! important ;}
50 </ style >
51
52 <! - - Styles -->
53 < link href =" css / bootstrap . css " rel =" stylesheet " >
54 </ head > ’;
55 echo ’< div class =" container " >
56 < div class =" row " >
57 < div class =" col - md -8 col - md - offset -2" >
58 < div class =" alert alert - danger alert - dismissable " >
59 <a href ="#" class =" close " data - dismiss =" alert " aria -
label =" close " >& times ; </a > </ div >
60 </ div >
61 </ div >
62 </ div > ’;
63 exit ;
64 }
65 }
66 ?>
O próximo trecho de código demonstra a mesma funcionalidade para a autenticação

do usuário na aplicação, porém, desenvolvido através do Laravel, o próprio Framework
implementa um Padrão de Projeto MVC e paradigmas de Programação Orientada a
Objetos, tornando a Classe responsável pelo controle de autenticação estendendo métodos
de uma Super Classe superior mantendo o código mais organizado, menor e separando
lógica de programação dos elementos HTML como mostrado abaixo:
1
2 <? php
3
4 namespace App \ Http \ Controllers \ Auth ;
5
6 use App \ Http \ Controllers \ Controller ;
7 use Illuminate \ Foundation \ Auth \ Au th en ti ca te sU se rs ;
8
9 class LoginController extends Controller {
10
11 use Au th en ti ca te sU ser s ;
12
13 /**
14 * Where to redirect users after login .
15 *
16 * @var string
17 */
18 protected $redirectTo = ’/ index ’;
19
20 /**
21 * Create a new controller instance .
22 *
23 * @return void
24 */
25 public function __construct () {

26
27 $this - > middleware ( ’ guest ’) -> except ( ’ logout ’) ;
28 }
29 }
30
31 ?>
A partir da Figura 13 até a Figura 19 serão apresentados os resultados da análise

da contagem de linhas dos códigos produzidos em ambas as aplicações, com uma aplicação
PHP de código puro e com o auxílio do Framework Laravel, respectivamente.
Figura 13 – Contagem de Linhas de Código na codificação para cadastro de usuário.
Fonte: Elaborado pelo autor com base no software Universal Code Lines Counter.
Figura 14 – Contagem de Linhas de Código na codificação para login de usuário.
Figura 15 – Contagem de Linhas de Código na codificação para logout de usuário.
Figura 16 – Contagem de Linhas de Código na codificação para cadastro de cursos.
Figura 17 – Contagem de Linhas de Código na codificação para listagem de cursos.
Figura 18 – Contagem de Linhas de Código na codificação para atualização de cursos.
Figura 19 – Contagem de Linhas de Código na codificação para exclusão de cursos.
Na Figura 20 serão representados todos os dados fornecidos entre o intervalo da

Figura 13 até a Figura 19 em uma única tabela:
Figura 20 – Contagem de Linhas de Código em ambas as aplicações (Código Puro e Código

Laravel).
4.2.3.3 Interação Cliente-Servidor
Os resultados obtidos relacionados a métrica Interação Cliente-Servidor serão

apresentados na Figura 21:
4.3. Passo 6 - Discussão sobre as principais vantagens e desvantagens com a adoção das tecnologias
selecionadas 59
Figura 21 – Tempos de resposta da Interação Cliente-Servidor em mile segundos.
4.3 PASSO 6 - DISCUSSÃO SOBRE AS PRINCIPAIS VANTA-

GENS E DESVANTAGENS COM A ADOÇÃO DAS TECNO-
LOGIAS SELECIONADAS
Com base nos resultados obtidos após análise feita ao aplicar a produção da
codificação, será discorrida uma discussão acerca para analisar as vantagens e desvantagens
da adoção de tais tecnologias em um projeto de ambiente web com os requisitos do UNIF.
Os critérios selecionados para a discussão frente ao comportamento das aplicações
desenvolvidas serão produtividade na escrita de código e desempenho das aplicações.
4.3.0.1 Aplicação desenvolvida com Laravel.
Referente a produtividade na escrita de código, o Framework Laravel demonstrou-se

vantajoso com relação à aplicações que não utilizam bibliotecas para agilidade no tempo
de desenvolvimento e simplificação de escopos de códigos, podendo serem visualizados
os resultados na Figura 19. Sua regra de sintax, adoção do paradigma de Programação
Orientada à Objetos e estrutura de diretórios para organização das camadas definidas em
um Padrão de Projetos, tornam as aplicações web e sites desenvolvidas através do Laravel
mais compreensivas para manutenção de códigos, organização das responsabilidades das
camadas e fazem a escrita mais reduzida, através do seu sistema de Facades que fornecem
uma interface "estática"para classes que estão disponíveis no contêiner de serviços do Laravel.
Outras vantagens estão relacionadas com seu sistema de Migrations para versionamento,
controle e criação de base de dados. O Route do Laravel proporciona maior flexibilidade
e facilidade para passagem de parâmetros e escrita de URL’s amigáveis no processo de
tratamento das requisições e respostas no fluxo de uma aplicação.
Já em termos de desempenho, por se tratar de um Framework e possuir inúmeros
Superclasses com milhares de linhas de códigos e as mesmas serem estendidas nas Classes
que criamos para tratamento das regras de negócio das aplicações, seu desempenho
referente a tempo de requisição e resposta, demonstra-se inferior ao de aplicações criadas
com código PHP puro, podendo tornar-se um problema ao ser adotada em aplicações
de grande porte, que demande disponibilidade para inúmeros usuários simultaneamente,
necessitando ser repensado a adoção de facilidades e recursos que o tornam ágil no processo
de desenvolvimento.
4.3.0.2 Aplicação desenvolvida com PHP puro.
As aplicações desenvolvidas sem o auxílio de uso das bibliotecas para agilidade,

organização ou quaisquer outras vantagens apontadas pelas tecnologias, possuem um
manuseio e liberdade de implementação de regras de negócio maiores e mais flexíveis para
os desenvolvedores. As quantidades de linhas de códigos produzidas, na maioria dos casos,
são maiores e demandam mais tempo de desenvolvimento, tornando a finalização do projeto
menos ágil. Todavia, seu desempenho relacionado a tempo das requisições e respostas são
superiores por não implementarem camadas adicionas em Classes e Superclasses criadas
no projeto (podendo ser ou não utilizadas).
A manutenção de aplicações com essas características, entendimento da lógica
implantada e organização estrutural das mesmas, são o ponto fraco da adoção de tal
método, pois a liberdade e flexibilidade dos desenvolvedores acarretam em estruturas que
misturam regras de negócio com camada de cliente, scripts sendo iniciados em quaisquer
lugares da aplicação e esta falta de adoção de padrões prejudica a qualidade da estrutura
do software.
61
5 CONCLUSÃO
Este trabalho teve como objetivo reunir um conjunto de informações que possam ser
relevantes para a comunidade de desenvolvimento de softwares no ambiente web, cujo foco
principal foi informar baseado em pesquisa acadêmica de cunho científico, qual tomada de
decisão se enquadra em determinados projetos, quais tecnologias ou tendências podem ser
utilizadas e como fazê-las de modo a respeitar padrões e primar pela qualidade do produto
final. A relevância da aprendizagem e valor do conhecimento também são importantes
e foram discutidos na pesquisa a fim de contribuir não somente com os envolvidos mas
também os estudantes acadêmicos para cursos relacionados a Tecnologia da Informação,
fomentando debates de forma sadia e argumentativa com o objetivo único de explorar o
que tecnologias e métodos possuem de vantagens e desvantagens
Esta pesquisa possui um conjunto de objetivos atingidos nas seguintes seções:
• No capítulo 2, foram levantadas as referências acadêmicas disponíveis na literatura e

nos sites oficiais das ferramentas e tecnologias utilizadas para o desenvolvimento da
proposta desta pesquisa.
• No capítulo 3, os passos definidos para início e sustentação da analise puderam ser

organizados e executados baseado na documentação fornecida pelo Professor Breno
Lisi Romano.
• No capítulo 4, as aplicações foram desenvolvidas, submetidas aos testes através das

ferramentas Postman e Universal Code Lines Counter para fomento das discussões
através dos resultados da análise. As aplicações estão disponíveis no repositório de
versionamento de projetos GitHub através do link: goo.gl/R6KYn2.
5.1 SUGESTÕES PARA TRABALHOS FUTUROS

A partir da finalização desta pesquisa, apresenta-se como sugestão de trabalhos
futuros uma continuidade de comparações entre aplicações desenvolvidas com o auxílio
e sem o auxílio de bibliotecas para produtividade através de outras métricas, adoção de
um Padrão de Projetos na aplicação PHP de código puro e aumento de escopo para um
conjunto de amostras maior dos resultados.
Também podendo ser feito, análises e comparações das tecnologias Front-End
utilizadas nesta pesquisa com o Scaffolding de JavaScript e CSS oferecido pelo Laravel em
sua camada de recursos para o lado do cliente.
63
REFERÊNCIAS
AB-TOOLS. Universal Code Lines Counter 1.1.6. Disponível em: <http://www.ab-

tools.com/en/software/universalcodelinescounter/>. Acesso em: 16 Nov. 2017.
BEZERRA, Peterson Tubini; SCHIMIGUEL, Juliano. Desenvolvimento de Aplica-
ções Mobile Cross-Plataform Utilizando Phonegap.
BOOTSTRAP. The most popular HTML, CSS, and JS library in the world.
Disponível em: <https://getbootstrap.com/>. Acesso em: 10 Dez. 2017.
BRASIL. Portaria n. 2.968, de 25 de ago. de 2015. Regulamento das Ações de
Extensão do IFSP, São Paulo,SP, ago 2015.
CANDIDO, Paulo Henrique Nogueira; Silva, Jocimar Roberto; APARECIDO, Luiz
Gabriel Pigato; SILVA, Everton Rafael Da. Informatização das Ações de Extensão no
Campus São João da Boa Vista. Congresso de Inovação, Ciência e Tecnologia do IFSP,
2016.
DALL’OGLIO, Pablo. PHP Programando com Orientação a Objetos 3a Edição.
Novatec Editora, 2015.
DUARTE, Alexandre. Museu virtual do curso de luteria da Universidade Federal
do Paraná. 2016.
EIS, Diego; FERREIRA, Elcio. HTML5 e CSS3 com farinha e pimenta. Lulu. com,
2012.
FRANCO, Eder Martins; PIEDADE, Márcio Palheta; RÊGO, Renata Magalhães.
Protótipo de um framework MVC para aplicações PHP de pequeno porte.
GABARDO, Ademir Cristiano. Laravel para Ninjas. Novatec Editora, 2017.
MILETTO, Evandro Manara; DE CASTRO BERTAGNOLLI, Silvia. Desenvolvi-
mento de Software II: Introdução ao Desenvolvimento Web com HTML, CSS, JavaScript
e PHP-Eixo: Informação e Comunicação-Série Tekne. Bookman Editora, 2014.
MINETTO, Elton Luís. Frameworks para Desenvolvimento em PHP. Novatec
Editora, 2007.
POSTMAN. Developing APIs is hard Postman makes it easy. Disponível em:
<https://www.getpostman.com/>. Acesso em: 13 Nov. 2017.
RIOS, Emerson; MOREIRA, Trayahú. Teste de software. Alta Books Editora, 2006.
SILVA, Maurício Samy .Laravel 5 Essencial - Alta produtividade no mundo real.
64 Referências
Leanpub, 2015.
SILVA, Pablo Henrique. Estudo e implementação de web services utilizando Zend
Framework. 2011. Trabalho de Conclusão de Curso. Universidade Tecnológica Federal do
Paraná.
SILVA, Wesley Willians Ramos da. Bootstrap 3.3. 5: Aprenda a usar o framework
Bootstrap para criar layouts CSS complexos e responsivos. 1. Novatec Editora, 2015.
SOUZA, Natan. Sass - Aprendendo pré-processadores CSS. Casa do Código - Série
Caleum.
TURIN, Rodrigo. PHP e Laravel - Crie aplicações web como um verdadeiro artesão.
Casa do Código - Série Caleum.
ZAPALOWSKI, Vanius. Análise quantitativa e comparativa de linguagens de
programação. 2011.

Análise de Tecnologias para Desenvolvimento Web Produtivo

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Análise de Tecnologias para Desenvolvimento Web Produtivo

Enviado por

Direitos autorais:

Formatos disponíveis

Paulo Henrique Nogueira Candido

ANÁLISE DE TECNOLOGIAS PARA

São João da Boa Vista - SP

Paulo Henrique Nogueira Candido

ANÁLISE DE TECNOLOGIAS PARA

São João da Boa Vista - SP

ANÁLISE DE TECNOLOGIAS PARA

Trabalho de Conclusão de Curso

Área de Concentração: Ciências

Orientador: Prof. Everton Rafael da

Coorientador: Prof. Breno Lisi Romano

São João da Boa Vista - SP

Paulo Henrique Nogueira Candido

Orientador: Prof. Everton Rafael da Silva

Tipo – Instituto Federal de Educação, Ciência e Tecnologia de São Paulo

ANÁLISE DE TECNOLOGIAS PARA

Trabalho de Conclusão de Curso apresentado

Área de Concentração: Ciências Exatas

Aprovado em DIA(número) de MÊS(por extenso) de ANO(Número).

Everton Rafael da Silva

São João da Boa Vista - SP

Agradeço imensamente a todos os envolvidos na produção do Trabalho de Conclusão

Palavras-chave: aplicações web. css3. frameworks. html5. laravel. php.

Keywords: css3. frameworks. html5. laravel. php. web applications.

Figura 1 – Comparação de estruturas do HTML nas versões 4 e 5, respectivamente. 26

API Application Programming Interface

CDN Content Delivery Network

CRUD Create, Read, Update e Delete

CSS Cascading Style Sheets

FTP File Transfer Protocol

HTML Hypertext Markup Language

HTTP Hypertext Transfer Protocol

LDC Linhas de Código

IDE Integrated Development Environment

IFSP-SBV Instituto Federal de São Paulo - São João da Boa Vista

MVC Model View Controller

SASS Syntactically Awesome Style Sheets

TCC Trabalho de Conclusão de Curso

PHP PHP Hypertext Preprocessor

REST Representational State Transfer

URL Uniform Resource Locator

SQL Structured Query Language

W3C World Wide Web Consortium

O sistema no ambiente web escolhido para a aplicação da proposta da pesquisa

1.2.1 Objetivo Geral

1.2.2 Objetivos Específicos

• Realizar um levantamento bibliográfico das principais tecnologias envolvidas;

• Definir o escopo do estudo de caso adotado (Projeto UNIF);

• Escolher as tecnologias a serem adotadas na pesquisa;

• Aplicar os Frameworks escolhidos no Projeto UNIF;

• Realizar uma análise quantitativa e qualitativa dos códigos produzidos com as

• Discutir sobre as principais vantagens e desvantagens com a adoção das tecnologias

1.3 ORGANIZAÇÃO DESTE TRABALHO

Os Frameworks, são uma coleção de códigos-fonte, classes, funções, técnicas e

Determinar palavras reservadas da tecnologia para um escopo específico referente a uma

Figura 1 – Comparação de estruturas do HTML nas versões 4 e 5, respectivamente.

Fonte: Elaborada pelo autor com base na W3C.

2.3 FRAMEWORKS FRONT-END

Figura 2 – Estrutura de pastas do Bootstrap.

Fonte: SILVA, 2015, p. 25.

Figura 3 – Funcionamento da linguagem PHP.

Fonte: MILETTO e BERTAGNOLLI, 2014, p. 172.

2.4.1 FRAMEWORKS BACK-END E LARAVEL