Detalhe das tecnologias utilizadas

Como demonstrado anteriormente, algumas tecnologias foram utilizadas para dar suporte e tornar possível o desenvolvimento da plataforma. Porém, antes mesmo do início da implementação foram utilizados protótipos para fundamentar a ideia principal e definir as principais funcionalidades da aplicação.

Inicialmente, foi utilizado da técnica de Storyboards para passar a ideia principal da aplicação. De acordo com Lucena et al (apud Bastos 2016), os

Storyboards são pequenas cenas ou marcos em formato de desenho que

descrevem a sequência lógica que determinada atividade deve seguir, sendo o caso do primeiro protótipo da aplicação, onde a sequência lógica das telas foram explicados por meios de rabiscos das telas que ele deveria ter.

Após isso, no protótipo 2 foi utilizado uma ferramenta mais visual, o Adobe XD. Explicado de maneira breve anteriormente, essa ferramenta conhecida também com Adobe Experience Design, é a ferramenta da Adobe Systems voltada para a criação e organização de design de aplicações móveis e Desktop, sendo útil desde a etapa de concepção até a fase de protótipo, permitindo visualizar e compartilhar seu resultado com mais pessoas. A aplicação já vem com 3 modelos pré-definidos para facilitar o trabalho do projetista, sendo eles para as telas dos iPhone 6, iPad e monitores com 1920 x 1280 de resolução10_.

Atualmente já existem versões compatíveis com outras plataformas, como Windows e Android, onde os protótipos podem ser visualizados normalmente.

Falando agora sobre as ferramentas utilizadas para desenvolvimento da plataforma, a primeira preocupação foi em dar suporte as características relativas a recuperação e visualização da informação, para embasar uma busca agradável e rápida para o usuário. Se tratando da interface, o framework Bootstrap foi o escolhido após uma pesquisa rápida e análise das suas principais características. Ele se trata de uma ferramenta para dar suporte à criação de projetos responsivos para dispositivos mobile na web, possuindo uma vasta gama de componentes front-end bastante populares no desenvolvimento web do mundo inteiro11_.

Esse framwork se trata de uma ferramenta gratuita para criação de aplicações em HTML, CSS e JS (representados na base do Cliente Page Figura 40), possibilitando desde a criação de protótipos funcionais a grandes aplicações, utilizando das variáveis de mixins Sass, sistemas de grid responsivos, componentes já implementados e plugins bastante robustos utilizando jQuery12_.

Contudo, em alguns setores da aplicação foi necessário utilizar uma folha de estilos diferente das definidas nas classes do Bootstrap, com isso foi necessário adicionar alguns componentes de estilo novos utilizando CSS3.

O CSS é uma linguagem utilizada em folha de estilo com o objetivo de deixar a página web exibida mais apresentável e elegante, estando diretamente relacionada com design e aparência. Ou seja, é a camada estética da página que está sendo desenvolvida. É através dele que os componentes HTML são modificados e ganham cor, deixando a experiência do usuário final mais agradável13_.

O CSS, está diretamente ligado com o HTML (Hypertext Markup

Language), que nada mais é que a estrutura da página. Ele permite que os

desenvolvedores criem seções, parágrafos, cabeçalhos e links, tanto para a mesma página como para páginas externas a da aplicação. O HTML não é definido como uma linguagem de programação, sendo assim, não pode ser

11 _{https://getbootstrap.com.br/} 12 _{https://getbootstrap.com.br/}

utilizada para criar funções e deixar a página mais dinâmica, sendo esse um papel geralmente feito com a utilização de JavaScript14_.

O JavaScript, ou JS como também é chamado, é uma linguagem de script para página web, leve, interpretada e baseada em objetos com funções em primeira classe. Ela também pode ser utilizada em ambientes fora da web, como node.js, Apache CouchDB e Adobe Acrobat. Além disso, ela também é uma linguagem com base em protótipo, dinâmica e multi-paradigma, dando suporte a orientação a objetos, estilos imperativos e declarativos15_.

No funcionamento da aplicação, em algumas vezes o JS não funcionou sozinho, mas junto a outro recurso bastante importante para que algumas atividades pudessem ser implementadas. O Ajax, acrônimo de Asynchronous

Javascript and XML, ou do português “javascript e XML assíncronos” é uma

chamada de algum determinado recurso ao servidor através de código javascript no navegador web. O resultado dessa chamada deve atualizar apenas um setor em específico da página, não sendo preciso atualizar a página por completo. Por ser uma chamada assíncrona (o script que fez a chamada continua sendo executado sem esperar a resposta), quando a resposta do servidor acontece uma função JS faz o tratamento dos dados retornados, atualizando o a parte da página que é especificada16_.

Como exemplo de como o Ajax foi utilizado, temos a Figura 42, onde são encaminhados os dados do campo com o ID “ID_Busca_Item2” para a página ‘ControleBuscaComparar.php’, e o retorno dessa página é jogado dentro da div com ID “resultCampo2”. Com isso, apenas essa seção da página é atualizada, o sobrescrevendo com o conteúdo retornado na operação success.

14 _{https://www.hostinger.com.br/tutoriais/o-que-e-html-conceitos-basicos/} 15 _{https://developer.mozilla.org/pt-BR/docs/Web/JavaScript}

Fonte: Próprio autor

Figura 42- Trecho de código Ajax utilizado

Passando agora para a camada de back-end da aplicação, chegamos ao PHP, que apesar de estar presente também no Cliente Page, se encontra em sua grande maioria do Server Page. O PHP é um acrônimo recursivo para

Hypertext Preprocessor, e se trata de uma língua script de código livre que

possui várias funcionalidades, bastante utilizada no mundo todo e especialmente utilizada para programação web, tendo a possibilidade de ser inserida no meio do HTML. Apensar no PHP estar também relacionada na camada do Cliente

Page, toda sua execução é feita no servidor, gerando o HTML que depois é

enviado para o navegador, ou seja, o navegador apenas recebe o resultado, mas não tem conhecimento sobre seu código fonte17_.

Além disso, o PHP também é utilizando para manipular as funções de conexão com o banco de dados (BD), realizando os procedimentos desde o início até o fim das transições no BD. Nesse projeto, o banco utilizado foi o MySQL, banco de dados de código aberto mais conhecido do mundo.