Aplica¸
c˜
ao Web Progressiva Aplicada ao
Problema de Responsividade e
Operacionalidade em Dispositivos
Computacionais
Altair Jussadir da Silva Pinto
CENTRO DE INFORM ´ATICA
UNIVERSIDADE FEDERAL DA PARA´IBA
Altair Jussadir da Silva Pinto
Aplica¸c˜
ao Web Progressiva Aplicada ao Problema de
Responsividade e Operacionalidade em Dispositivos
Computacionais
Monografia apresentada ao curso Engenharia de Computa¸c˜ao
do Centro de Inform´atica, da Universidade Federal da Para´ıba, como requisito para a obten¸c˜ao do grau de Bacharel em titulo Orientador: Prof. Dr. Alisson Vasconcelos de Brito
Ficha Catalográfica elaborada por Rogério Ferreira Marques CRB15/690
P659a Pinto, Altair Jussadir da Silva.
Aplicação web progressiva aplicada ao problema de responsividade e operacionalidade em dispositivos computacionais / Altair Jussadir da Silva Pinto. – João Pessoa, 2017.
79p. : il.
Monografia (Bacharelado em Engenharia de Computação) – Universidade Federal da Paraíba - UFPB.
Orientador: Profº. Dr. Alisson Vasconcelos de Brito.
1. Linguagens de programação. 2. Aplicação web progressiva. 3.
Responsividade. 4. Multiplataforma. I. Título.
DEDICAT ´
ORIA
Dedico aos meus pais, demais familiares e amigos.AGRADECIMENTOS
A conclus˜ao da minha gradua¸c˜ao n˜ao poderia ter sido concretizada sem o aux´ılio dos meus pais K´atia e Jussadir.
Agrade¸co tamb´em ao professor Alisson Brito pela orienta¸c˜ao deste trabalho, e Dangellys Cavalcanti pela orienta¸c˜ao de est´agio.
Por fim, agrade¸co aos demais familiares, amigos que s˜ao parte da fam´ılia tamb´em e a minha namorada.
RESUMO
Em diversos sistemas operacionais e dispositivos, costuma-se utilizar diferentes for-mas de implementa¸c˜ao para uma mesma aplica¸c˜ao, por´em, com as devidas ferramentas, o funcionamento de uma ´unica aplica¸c˜ao nestes dispositivos torna-se vi´avel, provendo bom desempenho e as funcionalidades da aplica¸c˜ao. A Aplica¸c˜ao Web Progressiva (PWA) ´e utilizada para poupar que uma mesma aplica¸c˜ao seja desenvolvida para diferentes plata-formas, garantindo o mesmo funcionamento independendo de sistema operacional, e com o aux´ılio de ferramentas, a auto-adapta¸c˜ao de resolu¸c˜ao trazida atrav´es da responsivi-dade. O desenvolvimento desse tipo de aplica¸c˜ao pode ser feito de v´arias formas, optando por uma aplica¸c˜ao nativa ou h´ıbrida. A partir disso ser´a desenvolvido ent˜ao o Hibridus, uma aplica¸c˜ao h´ıbrida voltada para o mercado comercial virtual, objetivando o estudo sobre esse tipo de tecnologia, abordando principalmente sua forma de resolver problemas voltado a responsividade e operacionalidade.
ABSTRACT
Different operating systems and devices use different forms of implementation for the same application, but with the right tools, the operation of a single application on these devices becomes viable, providing good performance and application functionalities. The Progressive Web Application (PWA) is used to save that the same application is de-veloped for different platforms, guaranteeing the same operation independent of operating system, and with the help of tools, the self-adaptation of resolution brought through res-ponsiveness. The development of this type of application can be done in several ways, opting for a native or hybrid application. From this will be developed the Hibridus, a hy-brid application focused on the virtual commercial market, aiming the study on this type of technology, addressing mainly its way of solving problems focused on responsiveness and operability.
LISTA DE FIGURAS
1 Usu´arios e aplicativos dos SOs Android, iOS e Windows Phone . . . 22
2 Diferen¸ca entre acesso via dispositivos computacionais . . . 23
3 Resolu¸c˜oes dos dispositivos . . . 24
4 Divis˜ao de tela no Bootstrap exemplificando a divis˜ao por grids . . . 25
5 Hello World do Web Starter Kit . . . 27
6 Dashboard usando Material Design . . . 28
7 Cabe¸calho do Hibridus . . . 30
8 Menu do Hibridus . . . 32
9 P´agina Inicial do Hibridus . . . 36
10 Categorias do Hibridus . . . 37
11 Carrinho do Hibridus . . . 38
12 Informa¸c˜oes do Cart˜ao . . . 39
13 Armazenamento de Localiza¸c˜ao . . . 40
14 Resultado Galaxy S5 . . . 42
15 Resultado Nexus 5X e 6P . . . 42
16 Resultado iPhone 5 . . . 43
17 Resultado iPhone 6 . . . 43
18 Resultado iPhone 6 Plus . . . 44
19 Resultado Desktop 1 . . . 44
20 Resultado Desktop 2 . . . 45
21 Resultado Informa¸c˜oes do cart˜ao e Localiza¸c˜ao no iPhone 6 Plus . . . 45
22 Resultado Carrinho no iPhone 6 Plus . . . 46
23 Resultado de busca por produto ”camisa” . . . 47
24 Produto adicionado ao carrinho . . . 47
25 Item adicionado ao carrinho . . . 48
26 Valida¸c˜ao de compra . . . 48
27 Compra confirmada . . . 49
29 Informa¸c˜oes no local da compra . . . 50 30 Informa¸c˜oes do cart˜ao . . . 50
LISTA DE TABELAS
1 Uso de navegadores em dispositivos m´oveis . . . 26 2 Resolu¸c˜oes dispon´ıveis para teste . . . 41
LISTA DE ABREVIATURAS
PWA - Progressive Web AppHTML - HyperText Markup Language CSS - Cascading Style Sheets
AJAX - Assyncronous Javascript And XML OS - Operating System
GUI - Graphical User Interface
HTTPS - Hyper Text Transfer Protocol Secure API - Application Programming Interface IDE - Integrated Development Environment
Sum´
ario
1 INTRODUC¸ ˜AO 17
1.1 Defini¸c˜ao do Problema . . . 17
1.2 Premissas e Hip´oteses . . . 17
1.3 Objetivo geral . . . 17
1.4 Objetivos espec´ıficos . . . 18
1.5 Estrutura da monografia . . . 18
2 CONCEITOS GERAIS E REVIS ˜AO DA LITERATURA 19 2.1 Aplicativo . . . 19 2.2 Navegador Web . . . 19 2.3 Sistema Operacional . . . 20 2.4 Responsividade . . . 20 2.5 Operacionalidade . . . 21 3 METODOLOGIA 22 3.1 Estudo do caso . . . 22 3.2 Proposta de Solu¸c˜ao . . . 26
3.3 Escolhas Tecnol´ogicas . . . 27
4 APRESENTAC¸ ˜AO E AN ´ALISE DOS RESULTADOS 29 4.1 Modelagem . . . 29 4.1.1 Barra de navega¸c˜ao . . . 29 4.1.2 Menu . . . 30 4.1.3 P´agina inicial . . . 32 4.1.4 Categorias . . . 36 4.1.5 Carrinho de compras . . . 37
4.1.6 Informa¸c˜oes do Cart˜ao . . . 38
4.1.7 Localiza¸c˜ao . . . 39
5 CONCLUS ˜OES E TRABALHOS FUTUROS 51
REFERˆENCIAS 51
APˆENDICE A 54
5.1 Funcionalidades da barra de navega¸c˜ao . . . 54 5.2 Implementa¸c˜ao do processo de compra . . . 56 5.3 Informa¸c˜oes de compra . . . 69
1
INTRODUC
¸ ˜
AO
Os aplicativos s˜ao ferramentas computacionais voltados a trazerem solu¸c˜oes, sejam elas simples como para problemas de realizar uma simples conta, como consultar fontes de pesquisa para ajudar o usu´ario a encontrar o que est´a procurando, conectar usu´arios entre si, efetuar compras em lojas, enfim, infinitas possibilidades. Existem os aplicativos nativos, que dependem do sistema operacional do dispositivo para serem executados pois ´e exigida a instala¸c˜ao do mesmo, e os h´ıbridos, os quais independem de sistema operacional pois sua execu¸c˜ao ´e feita atrav´es de navegadores web.
O uso de aplicativos nativos provˆe o exaustivo trabalho de cria¸c˜ao de vers˜oes devido a dependˆencia direta do sistema operacional utilizado no dispositivo. Por problemas de incompatibilidade do sistema, essas vers˜oes podem vir com v´arios problemas, tornando a aplica¸c˜ao inoper´avel. Aplica¸c˜oes h´ıbridas independem de sistema operacional mas sim de navegadores web, e a maneira que operam independem de requisitos de hardware ou software, sendo assim uma solu¸c˜ao para esse tipo de problema.
1.1 Defini¸c˜ao do Problema
A adapta¸c˜ao do layout do aplicativo varia de acordo com o dispositivo que est´a sendo utilizado, sendo assim necess´aria a cria¸c˜ao de v´arias vers˜oes para os diversos dis-positivos que o executar˜ao em diferentes sistema operacionais. Para alguns dispositivos n˜ao ´e feita a devida adapta¸c˜ao, o que compromete parte do seu funcionamento al´em de ser esteticamente irregular. Esse problema ´e desencadeado principalmente pela exaus-tiva produ¸c˜ao da vers˜oes para diversos dispositivos de variados sistemas operacionais, resultando em alto custo financeiro de retrabalho al´em de comprometer o lan¸camento de atualiza¸c˜oes para cada dispositivo e sistema operacional vinculado.
1.2 Premissas e Hip´oteses
Partimos da premissa de que, a adapta¸c˜ao visual e a operacionalidade correta tornam o aplicativo funcional. ´E poss´ıvel garantir isso utilizando a propriedade de res-ponsividade e multi operacionalidade.
1.3 Objetivo geral
Facilitar a garantia de funcionamento correto de aplica¸c˜oes independentemente de sistema operacional ou resolu¸c˜ao de tela do mesmo utilizando a responsividade e a multi operacionalidade providos pelos aplicativos web progressivos.
1.4 Objetivos espec´ıficos
Desenvolver uma Aplica¸c˜ao Web Progressiva (do inglˆes, Progressive Web App
-PWA) selecionando ferramentas e implementando uma solu¸c˜ao para os problemas de
responsividade e operacionalidade.
1.5 Estrutura da monografia
No pr´oximo cap´ıtulo, ser´a exibido o problema, proposta uma solu¸c˜ao e apresenta¸c˜ao das tecnologias a serem utilizadas. Em seguida ser´a apresentado e analisado o resultado obtido a partir da modelagem da aplica¸c˜ao. Por fim, ser˜ao feitas as considera¸c˜oes finais e perspectivas para trabalhos futuros.
2
CONCEITOS GERAIS E REVIS ˜
AO DA LITERATURA
Neste cap´ıtulo, ser˜ao apresentados os conceitos gerais para nivelamento de conhe-cimento voltado a ´area em quest˜ao, ou seja, os principais elementos que envolvem este trabalho.2.1 Aplicativo
”“App” pode ser a sigla para v´arias coisas no mundo, mas em se tratando do
mundo mobile app ´e uma abrevia¸c˜ao para “application”, do inglˆes, que significa aplicativo, programa, software. Esta defini¸c˜ao simples acaba por ser muito gen´erica se consideramos que existem apps para celulares, tablets, navegadores e at´e mesmo sistemas operacionais de desktop.”(BENFICA, 2012).
Segundo Alex Benfica (2012), ao se referir `as apps o mais comum ´e que o assunto seja relacionado aos v´arios softwares e programas dispon´ıveis para sistemas operacionais m´oveis. Esse tipo de pensamento se d´a devido a maneira com que as pessoas associam um aplicativo ser exclusivamente de um dispositivo m´ovel.
Por´em, softwares computacionais espec´ıficos tamb´em podem ser chamados de apli-cativos baseado em um nome atribu´ıdo para um programa computacional voltado para solu¸c˜ao de problemas. As solu¸c˜oes podem ser providas independente da escala de comple-xidade do problema, pois o desenvolvedor do mesmo pode optar pelo tipo de aplicativo, linguagem de programa¸c˜ao, dispositivos compat´ıveis e finalidade, trazendo assim um filtro para que n˜ao comprometa o funcionamento da sua solu¸c˜ao.
Os aplicativos v˜ao desde simples calend´arios em um smartphone, al´em de um sistema de com´ercio virtual ou grandes acervos de livros. Trazem solu¸c˜oes para diversos problemas e podem estar presentes em diversos dispositivos computacionais, at´e mesmo em rel´ogios inteligentes. Podem ser baixados e instalados atrav´es de lojas espec´ıficas como Play Store e Apple Store, ou apenas serem executados direto de navegadores web como Google Chrome, Mozilla Firefox, Safari, etc. Os sistemas operacionais mais comuns de apps s˜ao Android e iOS.
2.2 Navegador Web
”Tamb´em conhecidos como web browsers ou, simplesmente, browsers, os
navega-dores s˜ao uma esp´ecie de ponte entre o usu´ario e o conte´udo virtual da Internet.”(BOZZA, 2013).
De acordo com Cl´audia Bozza (2013), ”os navegadores transformam as p´aginas
seja, o papel deles ´e transmitir a informa¸c˜ao necess´aria interpretando c´odigos.
De 1990 at´e hoje, houve um grande avan¸co nas p´aginas web, a principal delas foi o uso de arquivos CSS para formata¸c˜ao da p´agina, defini¸c˜ao de aspectos visuais robustos, e o principal elemento respons´avel pela responsividade destas p´aginas. Os navegadores
processam linguagens de programa¸c˜ao como JavaScript, criando assim funcionalidades
para o usu´ario, desde uma submiss˜ao de formul´ario at´e criar telas de carregamento. Um dos grandes avan¸cos nos ´ultimos anos foi o uso da biblioteca React desenvol-vida pelos desenvolvedores do Facebook. ”Toda vez que um elemento precisa ser ren-derizado, a biblioteca identifica as atualiza¸c˜oes comparando o elemento no DOM e na mem´oria, modificando somente o que foi de fato alterado, sem precisar renderizar todo o elemento.”(FERREIRA, 2013), ou seja, reduz o consumo de dados para carregamento da p´agina.
2.3 Sistema Operacional
”O sistema operacional permite que o usu´ario execute tarefas como o gerenciamento das aplica¸c˜oes em execu¸c˜ao, do acesso `a mem´oria e dos arquivos no disco. Al´em disso, o sis-tema operacional traduz para o computador comandos dos usu´arios. Por exemplo, quando o usu´ario clica duas vezes sobre um ´ıcone, o comando ´e traduzido pelo sistema operacional
para o computador “entender” que o usu´ario deseja abrir um programa.”(BOZZA, 2013).
Existem v´arios sistemas operacionais, por´em os mais consolidados no ramo da inform´atica s˜ao: Microsoft Windows, Linux e Mac OS X. Atrav´es de uma interface gr´afica (GUI), sua principal fun¸c˜ao ´e levar ao usu´ario o que o computador entende atrav´es de suas a¸c˜oes, exibindo apenas o que ´e de interesse do mesmo, ou seja, permite que o usu´ario dˆe ordens ao computador e ele obede¸ca seus comandos. O sistema operacional mais comum em computadores ´e o Microsoft Windows que tem vers˜oes desde 1980 at´e hoje.
Al´em destes OSs, foram desenvolvidos os sistemas operacionais m´oveis e atribu´ıdos a esse tipo de dispositivos como Android, iOS, Windows Phone e Symbian, sendo destes os mais comuns Android e iOS. Do lado do Android temos marcas como Motorola, Lenovo, Samsung, Alcatel, etc. tendo diferentes vers˜oes entre si, pois cada vers˜ao depende do hardware que o dispositivo possui para que o seu OS seja atualizado. Por outro lado, temos o iOS, dispon´ıvel apenas em dispositivos da Apple que, quando descontinuados, n˜ao atualizam mais os OSs.
2.4 Responsividade
”Design Responsivo ´e uma t´ecnica de estrutura¸c˜ao HTML e CSS, que consiste em adaptar o site ao browser do usu´ario sem que seja necess´ario definir v´arias folhas de estilos
espec´ıficas para cada resolu¸c˜ao, ou seja, ´e um tipo de design onde o layout fica flu´ıdo e variante de acordo com a resolu¸c˜ao do usu´ario.”(ARRIGONI, 2015).
Tornar o design responsivo ajuda o usu´ario a ver corretamente as informa¸c˜oes, seja num site ou num aplicativo. Isso est´a totalmente ligado a quest˜ao do funcionamento correto da aplica¸c˜ao, pois quando o design se adapta a tela do usu´ario de maneira espe-rada pelo desenvolvedor, todos os elementos da p´agina ficam acess´ıveis, provendo total intera¸c˜ao e funcionamento.
Garantir que o layout da aplica¸c˜ao ocupe adequadamente o display do dispositivo m´ovel vai al´em de uma quest˜ao de beleza visual, entra na parte de funcionamento. Atrav´es de algumas preocupa¸c˜oes do desenvolvedor, ele pode garantir que n˜ao ser´a necess´ario retrabalho para outro tipo de resolu¸c˜ao, assim como a fluidez do seu aplicativo desde desktops at´e smartphones.
2.5 Operacionalidade
Segundo Fernando Manuel (2011), operacionalidade ´e ”Qualidade de o que ´e oper´ a-vel. Permite-se atrav´es de diversas opera¸c˜oes manter sua utilidade. Perante exigˆencias de qualquer ordem mant´em a sua racionalidade.”.
No caso dos aplicativos, o que vai garantir essa qualidade ´e a maneira como o soft-ware ser´a manipulado, a correta implementa¸c˜ao das funcionalidades e como essa aplica¸c˜ao se ligar´a ao hardware que est´a sendo utilizado para sua execu¸c˜ao.
Utilizando da responsividade e a correta implementa¸c˜ao do PWA, garantimos que o sistema funcionar´a corretamente, se adaptando a diversos dispositivos em diferentes resolu¸c˜oes.
3
METODOLOGIA
Neste cap´ıtulo ser´a discutida a metodologia escolhida para a resolu¸c˜ao dos proble-mas em quest˜ao. A avalia¸c˜ao de eficiˆencia ser´a baseada em: adapta¸c˜ao visual ao display dos dispositivos, garantindo que nenhum elemento ser´a sobreposto ou posicionado fora do espa¸co destinado para o mesmo, e capacidade de usabilidade total do sistema, garantindo que o usu´ario seja capaz de realizar todas as opera¸c˜oes providas.
3.1 Estudo do caso
Aplicativos m´oveis s˜ao cada vez mais requisitados no mercado, e de acordo com a demanda, vem a oferta. Isso faz com que os desenvolvedores se preocupem cada vez mais em como seu aplicativo ir´a se comportar em determinado dispositivo, tanto na parte de execu¸c˜ao correta de suas funcionalidades como a de adapta¸c˜ao de layout.
Os tipos mais comuns s˜ao os aplicativos nativos, os quais necessitam de instala¸c˜ao e um espec´ıfico sistema operacional para execut´a-lo. A Figura 1 mostra o n´umero de usu´arios ativos dos sistemas operacionais mobile mais utilizados e o n´umero de aplicativos desse tipo desenvolvidos para o mesmo.
Figura 1: Usu´arios e aplicativos dos SOs Android, iOS e Windows Phone
Fonte: https://www.tecmundo.com.br/sistema-operacional/60596-ios-android-windows-phone-numeros-gigantes-comparados-infografico.htm
Baseado nisso, temos ent˜ao uma vis˜ao geral da quantidade de vers˜oes que devem ser desenvolvidas para cada sistema operacional, vers˜ao do SO e dispositivo que o utiliza.
aplica¸c˜ao caso o desenvolvedor n˜ao volte sua aten¸c˜ao especificamente para dado dispositivo e vers˜ao do SO, podendo assim criar uma vers˜ao incompat´ıvel, o que gera todo o custo de lan¸camento de atualiza¸c˜ao tanto para ele como para os usu´arios.
Atrelado a isso, vem o problema de adapta¸c˜ao de layout. Na condi¸c˜ao nativa ela se d´a de acordo com o dispositivo em quest˜ao e sistema operacional. Numa vis˜ao mais abrangente, temos as aplica¸c˜oes h´ıbridas, ou aplica¸c˜oes web. Embora voltadas principal-mente para dispositivos m´oveis, enfrenta a dificuldade de se adaptar ao layout da tela do dispositivo em quest˜ao.
A t´ecnica de design responsivo originou-se em 2010 inicialmente para melhorar a usabilidade de p´aginas web e com o passar do tempo foi se difundindo para sistemas mais complexos. Tornou-se ent˜ao necess´aria a adapta¸c˜ao para os dispositivos computa-cionais que surgiam com os avan¸cos tecnol´ogicos como smartphones, tablets, netbooks, ultrabooks, etc.
Baseado nessa necessidade, a preocupa¸c˜ao dos desenvolvedores ficou cada vez maior em exibir corretamente seus sites nos diversos dispositivos, pois o acesso deixou de ser apenas feito em desktops com grandes monitores de escalas praticamente ´unicas e partiu para telas de pouco mais de 4 polegadas. Na Figura 2 podemos ver a diferen¸ca de acesso a sites em desktops e dispositivos m´oveis em 2010 e 2012.
Figura 2: Diferen¸ca entre acesso via dispositivos computacionais
Fonte: http://www.devmedia.com.br/responsive-design-dicas-para-tornar-seu-site-acessivel-em-qualquer-resolucao/28316
´
E importante tamb´em conhecer as resolu¸c˜oes dos dispositivos que se tem interesse em desenvolver sistemas para ele. Na Figura 3 vemos uma escala em pixel das principais resolu¸c˜oes utilizadas no mercado de dispositivos computacionais.
Figura 3: Resolu¸c˜oes dos dispositivos
Fonte: http://www.devmedia.com.br/responsive-design-dicas-para-tornar-seu-site-acessivel-em-qualquer-resolucao/28316
Para aplica¸c˜ao de responsividade, existem alguns f rameworks para resolver esse problema pro desenvolvedor, sem se preocupar em como deve organizar os elementos na tela para que se comporte de maneira correta nessas diferentes resolu¸c˜oes. Estes f rameworks dividem a tela em grids e, a partir disso, o desenvolvedor pode inserir elementos em determinadas posi¸c˜oes que se adaptam as resolu¸c˜oes.
Um dos mais famosos f rameworks para isso ´e o Bootstrap. Ele se baseia em grids que servem para orientar o tamanho e posi¸c˜ao de objetos na tela, como mostra a Figura
4, onde vemos como s˜ao feitos os posicionamentos em dispositivos como smartphones,
Figura 4: Divis˜ao de tela no Bootstrap exemplificando a divis˜ao por grids
Fonte: http://getbootstrap.com/examples/grid/
Esse tipo de divis˜ao garante que os elementos posicionados na tela n˜ao se sobre-ponham e adaptem-se as resolu¸c˜oes dos dispositivos que utilizar˜ao a aplica¸c˜ao. N˜ao ´e necess´ario que sejam grids mas que o desenvolvedor garanta que o campo de vis˜ao da aplica¸c˜ao se comporte da mesma maneira, podendo ser com espa¸camentos ou oculta¸c˜ao de informa¸c˜oes irrelevantes.
Garantindo a devida responsividade do nosso sistema, temos o correto funciona-mento do mesmo em diversos dispositivos, sem a preocupa¸c˜ao de como ser´a adaptado `a determinada resolu¸c˜ao em dado dispositivo.
Por´em, para que se execute corretamente uma aplica¸c˜ao web, deve-se observar a compatibilidade do dispositivo com os navegadores dispon´ıveis, de preferˆencia os que
possuem o HTML5. Baseado nisso, s˜ao analisados os principais navegadores utilizados
em todo o mundo para que, focado mais em um determinado navegador, se tenha uma base de completa operacionalidade da aplica¸c˜ao. A Tabela 1 mostra o percentual de uso e os respectivos navegadores em dispositivos m´oveis.
Tabela 1: Uso de navegadores em dispositivos m´oveis
Navegador Percentual de uso (mar¸co de 2017)
Chrome 54,14 % Safari 14,26 % UC Browser 8,40 % Firefox 6,21 % Internet Explorer 4,03 % Opera 3,56 % Outros (total) 9,43 % Fonte: http://gs.statcounter.com/ 3.2 Proposta de Solu¸c˜ao
Com base nas informa¸c˜oes anteriores, torna-se necess´ario utilizar uma ferramenta para solucionar os problemas de execu¸c˜ao da aplica¸c˜ao em diversos dispositivos inde-pendente de SO em quest˜ao, e para a correta adapta¸c˜ao nos mais comuns dispositivos computacionais no mercado atualmente.
A partir disso, ´e proposto o PWA, que combina o melhor da web e dos aplicativos. O PWA traz com ele as seguintes caracter´ısticas:
• Progressivo: Funciona em navegadores web independente do escolhido pelo usu´ario. • Responsivo: Se adapta a qualquer formato de tela, desde desktops a smartphones. • Baixo uso de dados: Utiliza de serviceworkers para trabalhar em redes de qualidade
baixa ou, em alguns casos, of f line. • Seguro: Certifica¸c˜ao HTTPS na conex˜ao.
• Acesso atrav´es de link: N˜ao precisa de instala¸c˜ao e permite acesso r´apido ao seu endere¸co atrav´es de atalhos.
Com essas caracter´ısticas, soluciona-se o problema de responsividade e operacio-nalidade dos aplicativos nos mais comuns dispositivos computacionais.
Para a exibi¸c˜ao de um caso real de uso do PWA, ser´a criado um sistema de e −
commerce cujo nome ser´a Hibridus, onde ser˜ao expostos alguns produtos a venda e o
3.3 Escolhas Tecnol´ogicas
Ser˜ao adotadas algumas tecnologias para desenvolvimento do PWA. Inicialmente, o uso do Web Starter Kit da Google, uma ferramenta cujo objetivo ´e simplificar o desen-volvimento web. Embora seja simples como a pr´opria defini¸c˜ao sugere, ´e um ponto de partida para o desenvolvimento web para m´ultiplos dispositivos.
Acompanha v´arios pacotes que s˜ao instalados nele, como o gulp, que serve para gerar um socket e permitir a conex˜ao a partir de um servidor local, em outros dispositivos. Traz consigo um projeto inicial, como mostra a Figura 5 contendo o endere¸co local e a p´agina inicial.
Figura 5: Hello World do Web Starter Kit
Fonte: https://webdesign.tutsplus.com/pt/tutorials/get-up-and-running-with-google-web-starter-kit–cms-21495
Para a parte visual com adapta¸c˜ao autom´atica aos diferentes layouts, ser´a utilizado o Material Design, que trata-se do padr˜ao visual da Google que est´a presente no SO Android. Cont´em cores chapadas e vibrantes, fontes personalizadas e ´ıcones, como mostra a Figura 6.
Figura 6: Dashboard usando Material Design
Fonte: https://getmdl.io/templates/index.html
Para exibi¸c˜ao de janelas modais providos pelo Material Design em todos os nave-gadores, ser´a utilizado o pacote Dialog Polyfill.
4
APRESENTAC
¸ ˜
AO E AN ´
ALISE DOS RESULTADOS
De acordo com o que foi apresentado nos cap´ıtulos 2 e 3, este cap´ıtulo apresenta o PWA proposto a fim de mostrar a solu¸c˜ao que o mesmo provˆe para as quest˜oes de responsividade e operacionalidade em diversos dispositivos computacionais.
A IDE utilizada para desenvolvimento foi o Visual Studio Code de vers˜ao 1.1,
sistema operacional Windows 10.1 x64, Notebook Acer Aspire E 15 Core i7-5500U 2.4GHz, NVIDIA GeForce 920M 2GB VRAM, 8GB Ram DDR3 e 1TB HD.
4.1 Modelagem
Aqui ser˜ao exibidos os elementos modelados para que a aplica¸c˜ao se comporte de acordo com a resolu¸c˜ao do dispositivo em quest˜ao. Todos os componentes foram baseados ou utilizados do padr˜ao visual da Google e o c´odigo utilizado ser´a exibido em seu respectivo elemento a fim de demonstrar como foi garantida a responsividade do mesmo.
4.1.1 Barra de navega¸c˜ao
A barra de navega¸c˜ao ´e fixa, ou seja, sempre posicionada no canto superior da tela, sem a necessidade de ter sua posi¸c˜ao alterada. Para desenvolvimento da mesma, foram atribu´ıdas algumas propriedades do CSS `a classe header a fim de garantir que, para todas as resolu¸c˜oes poss´ıveis, ela mantenha um comprimento de 40px e largura da tela completa, ou seja, 100%. Ela ´e fixada no topo a partir da propriedade position, que est´a definida como fixed. 1 . h e a d e r { 2 w i d t h : 1 0 0 % ; 3 h e i g h t : 40 px; 4 t e x t - a l i g n : c e n t e r ; 5 b a c k g r o u n d : d o d g e r b l u e ; 6 p o s i t i o n : f i x e d ; 7 }
Figura 7: Cabe¸calho do Hibridus
Fonte: Autor
4.1.2 Menu
Para o menu ser exibido, basta clicar no ”hamb´urguer”ao lado do nome Hibridus na barra de navega¸c˜ao. Para ser modelado, foi utilizada a classe navigation se preocupando
em manter uma margem superior de 40px e esquerda de 25px. O comprimento de 470px ´e
suficiente para que sejam exibidos todos os elementos com uma largura m´axima de 250px. A sua posi¸c˜ao foi definida fixa para que se sobreponha aos demais elementos na tela, bordas arredondadas e fundo com efeito.
Foi utilizada a propriedade de Media Queries do CSS para ajustar o menu a de-terminada resolu¸c˜ao. Tamb´em foram inseridas propriedades para os elementos do menu
baseados no tamanho m´aximo definido para o mesmo, tudo utilizando valores em %.
Tamb´em foi adicionado um bot˜ao de busca associado a um campo de texto para
preen-chimento da palavra a ser buscada. A parte do c´odigo referente a isso pode ser visto a seguir:
2 b o r d e r - t o p - l e f t - r a d i u s : 0 px; 3 b o r d e r - t o p - r i g h t - r a d i u s : 0 px; 4 b o r d e r - b o t t o m - l e f t - r a d i u s : 15 px; 5 b o r d e r - b o t t o m - r i g h t - r a d i u s : 15 px; 6 m a r g i n - t o p : 40 px; 7 m a r g i n - l e f t : 25 px; 8 h e i g h t : 470 px; 9 w i d t h : 0; 10 m a x - w i d t h : 250 px; 11 p o s i t i o n : f i x e d ; 12 z - i n d e x : 1; 13 t o p : 0; 14 l e f t : 0; 15 o v e r f l o w - x : h i d d e n ; 16 t r a n s i t i o n : 0.5 s; 17 p a d d i n g - t o p : 0 px; 18 b a c k g r o u n d : rgb (44 ,62 ,80) ; 19 b a c k g r o u n d - i m a g e : l i n e a r - g r a d i e n t ( 1 3 5 deg , rgb (3 ,8 ,12) , rgb (16 ,57 ,79) ) ; 20 } 21 22 @ m e d i a s c r e e n and ( m a x - h e i g h t : 450 px ) { 23 . n a v i g a t i o n { 24 p a d d i n g - t o p : 15 px; 25 } 26 . n a v i g a t i o n a { 27 f o n t - s i z e : 18 px; 28 } 29 } 30 31 # t x t B u s c a { 32 m a r g i n - t o p : 3 px; 33 m a r g i n - l e f t : 15 px; 34 f l o a t : l e f t ; 35 b a c k g r o u n d - c o l o r : t r a n s p a r e n t ; 36 f o n t - s t y l e : i t a l i c ; 37 f o n t - s i z e : 1 4 p x ; 38 b o r d e r : n o n e ; 39 h e i g h t : 3 0 p x ; 40 w i d t h : 6 5 %; 41 c o l o r : # e 7 e 7 e 7 ; 42 } 43 44 # b t n B u s c a { 45 f l o a t : r i g h t ; 46 b a c k g r o u n d - c o l o r : t r a n s p a r e n t ; 47 h e i g h t : 2 8 p x ;
48 c o l o r : # e 7 e 7 e 7 ; 49 } 50 51 . b u s c a { 52 w i d t h : 270 px; 53 h e i g h t : 7 0 p x ; 54 - w e b k i t - b a c k g r o u n d - s i z e : 1 0 0 % ; 55 - o - b a c k g r o u n d - s i z e : 1 0 0 % ; 56 }
O resultado obtido pode ser visto na Figura 8: Figura 8: Menu do Hibridus
Fonte: Autor
4.1.3 P´agina inicial
Para a p´agina inicial, foi utilizado o conceito de container, onde todos os elementos ser˜ao inseridos nele e assim ser´a garantido o comportamento dentro da ´area de exibi¸c˜ao. A classe container utiliza toda a largura da tela com um pequeno espa¸camento superior para que se posicione o cabe¸calho da p´agina sem interferir em seu conte´udo.
Inicialmente, ser´a posicionado abaixo do cabe¸calho um menu horizontal para as categorias dispon´ıveis. Para garantir que se comporte de maneira correta na resolu¸c˜ao em quest˜ao, foi definida uma largura m´axima de 1700px, com largura definida para ocupar toda a tela em 100%, garantindo assim que para resolu¸c˜oes pequenas, haver´a uma barra de rolagem que exibir´a os demais itens ao ser arrastada, definindo o overflow como auto e escondendo-o. Seu posicionamento deve ser relativo pois deve respeitar o espa¸co destinado para o cabe¸calho.
Haver´a tamb´em a divis˜ao por linhas de classe denominada row e colunas de
clas-ses denominadas col, col-2 e col-3, respons´aveis por organizar elementos numa mesma
coluna, independente da resolu¸c˜ao pois sua ocupa¸c˜ao estar´a definida como 100%. para apenas uma coluna e 50% para duas colunas. No caso de trˆes colunas, s˜ao ignorados os espa¸camentos entre as duas colunas.
1 . c o n t a i n e r { 2 w i d t h : 1 0 0 % ; 3 t e x t - a l i g n : c e n t e r ; 4 m a r g i n - l e f t : a u t o ; 5 m a r g i n - r i g h t : a u t o ; 6 p a d d i n g : 0 20 px; 7 } 8 9 @ m e d i a (m i n - w i d t h : 1 1 7 0 px ) { 10 . c o n t a i n e r { 11 m a x - w i d t h : 1 1 7 0 px; 12 p a d d i n g : 0; 13 } 14 } 15 16 . c o n t a i n e r - c a r d { 17 f l o a t : l e f t ; 18 m a r g i n - t o p : 1 0 % ; 19 m a r g i n - l e f t : a u t o ; 20 } 21 22 . col { 23 d i s p l a y : i n l i n e - b l o c k ; 24 v e r t i c a l - a l i g n : t o p ; 25 m i n - h e i g h t : 1 px; 26 p a d d i n g - l e f t : 5 px; 27 p a d d i n g - r i g h t : 5 px; 28 w i d t h : 5 0 % ; 29 m a r g i n - r i g h t : - 4 p x ; 30 *z o o m : 1; 31 *d i s p l a y : i n l i n e ;
32 } 33 34 @ m e d i a (m i n - w i d t h : 480 px ) { 35 . c o l - 2 { 36 w i d t h : 5 0 % ; 37 } 38 } 39 40 . c o l - 3 { 41 v e r t i c a l - a l i g n : t o p ; 42 m i n - h e i g h t : 1 px; 43 p a d d i n g - l e f t : 7 px; 44 p a d d i n g - r i g h t : 5 px; 45 w i d t h : 1 0 0 % ; 46 m a r g i n - r i g h t : - 4 p x ; 47 *z o o m : 1; 48 *d i s p l a y : i n l i n e ; 49 } 50 51 . s c r o l l m e n u { 52 m a r g i n - t o p : 40 px; 53 b a c k g r o u n d - c o l o r : # 3 3 3 ; 54 o v e r f l o w : a u t o ; 55 w h i t e - s p a c e : n o w r a p ; 56 m a x - w i d t h : 1 7 0 0 px; 57 w i d t h : 1 0 0 % ; 58 p o s i t i o n : r e l a t i v e ; 59 b o x - s h a d o w : 3 px 2 px 2 px 2 px r g b a (0 , 0 , 0 , 0 . 1 4 ) , 0 3 px 1 px - 2 p x r g b a (0 , 0 , 0 , 0 . 2 ) , 0 1 px 5 px 0 r g b a (0 , 0 , 0 , 0 . 1 2 ) ; 60 }
Ent˜ao, s˜ao inseridos no HTML da seguinte forma:
1 < d i v id=" r o d a p e "> 2 < d i v c l a s s =" s c r o l l m e n u " o n c l i c k =" c l o s e N a v () "> 3 <a h r e f =" c l o t h i n g . h t m l ">R o u p a s < / a> 4 <a h r e f =" a c c e s s o r i e s . h t m l ">A c e s s o r i o s < / a> 5 <a h r e f =" h o u s e . h t m l ">C a s a < / a> 6 <a h r e f =" d e c o r a t i o n . h t m l ">D e c o r a c a o < / a> 7 <a h r e f =" t e c h n o l o g y . h t m l ">T e c n o l o g i a < / a> 8 < / d i v > 9 < / d i v > 10 11 12 < d i v c l a s s =" c o n t a i n e r " o n c l i c k =" c l o s e N a v () "> 13 < d i v c l a s s =" row ">
14 < d i v c l a s s =" col c o l - 2 "> 15 <a h r e f =" a c c e s s o r i e s . h t m l ">< i m g c l a s s =" c a r d _ 1 " />< / a > 16 < / d i v > 17 < d i v c l a s s =" col c o l - 2 "> 18 <a h r e f =" c l o t h i n g . h t m l ">< i m g c l a s s =" c a r d _ 2 "/>< / a> 19 < / d i v > 20 < / d i v > 21 22 < d i v c l a s s =" row "> 23 < d i v c l a s s =" c o l - 3 "> 24 <a h r e f =" t e c h n o l o g y . h t m l ">< i m g c l a s s =" c a r d _ 3 "/>< / a> 25 < / d i v > 26 < / d i v > 27 < d i v c l a s s =" row "> 28 < d i v c l a s s =" col c o l - 2 "> 29 <a h r e f =" d e c o r a t i o n . h t m l ">< i m g c l a s s =" c a r d _ 4 "/>< / a> 30 < / d i v > 31 < d i v c l a s s =" col c o l - 2 "> 32 <a h r e f =" h o u s e . h t m l ">< i m g c l a s s =" c a r d _ 5 "/>< / a> 33 < / d i v > 34 < / d i v > 35 < / d i v > 36 < / d i v >
Todas as imagens atribu´ıdas aos cards s˜ao adapt´aveis ao seu tamanho, sendo definidas como background e assim se auto-ajustando. O resultado pode ser visto na
Figura 9 onde embora se tenha mais conte´udo abaixo, a barra de rolagem ´e ocultada
Figura 9: P´agina Inicial do Hibridus
Fonte: Autor
4.1.4 Categorias
As categorias seguem a mesma ideia da p´agina inicial quanto ao posicionamento de cards em colunas. Todos s˜ao adicionados a um container e, a partir disso, se comportam de maneira responsiva na resolu¸c˜ao em quest˜ao. Pode ser visto ent˜ao na Figura 10 o comportamento desses cards em apenas uma tela pois as demais s˜ao repetitivas, alterando apenas os produtos em quest˜ao.
Figura 10: Categorias do Hibridus
Fonte: Autor
4.1.5 Carrinho de compras
No carrinho ´e utilizado um grande card que envolve toda a parte da tela que ter´a os respectivos itens adicionados ao mesmo, e por fim as op¸c˜oes em um outro card menor, ambos se comportando da mesma maneira de acordo com a resolu¸c˜ao, por´em, divididos na tela por quest˜oes mais est´eticas do que funcionais.
Os itens s˜ao exibidos em formato de tabela, por´em usado um container novo cha-mado container-2. As atribui¸c˜oes dos elementos podem ser vistas no c´odigo a seguir:
1 . c o n t a i n e r - 2 { 2 w i d t h : 1 0 0 % ; 3 m a r g i n - t o p : 70 px; 4 m a r g i n - l e f t : a u t o ; 5 m a r g i n - r i g h t : a u t o ; 6 p a d d i n g : 0 20 px; 7 t e x t - a l i g n : c e n t e r ; 8 }
O resultado pode ser visto na Figura 11 onde ´e exibida a respectiva tela dividida em duas partes:
Figura 11: Carrinho do Hibridus
Fonte: Autor
4.1.6 Informa¸c˜oes do Cart˜ao
A tela contendo informa¸c˜oes do cart˜ao segue a mesma base da tela de carrinho. Sua particularidade ´e como se monta a tabela da mesma.
Um script ´e executado para gera¸c˜ao da tabela, por´em, ela ´e modelada no CSS a fim de melhorar sua exibi¸c˜ao da seguinte maneira:
1 # t a b e l a t a b l e { 2 b o r d e r : 1 px # c 0 c 0 c 0 s o l i d ; 3 w i d t h : 1 0 0 % ; 4 m a r g i n - b o t t o m : 7%; 5 } 6 # t a b e l a t a b l e th { 7 b a c k g r o u n d - c o l o r : d o d g e r b l u e ;
8 c o l o r : # f f f ; 9 } 10 # t a b e l a t a b l e td { 11 b a c k g r o u n d - c o l o r : # f 0 f 0 f 0 ; 12 c o l o r : #0 c 0 c 0 c ; 13 }
O resultado obtido pode ser visto na Figura 12:
Figura 12: Informa¸c˜oes do Cart˜ao
Fonte: Autor
4.1.7 Localiza¸c˜ao
A parte de localiza¸c˜ao ´e ainda mais simples, pois o desenvolvedor preocupa-se
ape-nas em definir o tamanho m´aximo do mapa, que nesse caso ´e o tamanho do componente
container.
1 # map {
2 h e i g h t : 9 0 % ;
4 m a r g i n : 20 px;
5 }
Portanto, na Figura 13 ´e poss´ıvel ver como se comportam os componentes no
momento de capturar a localiza¸c˜ao atual.
Figura 13: Armazenamento de Localiza¸c˜ao
Fonte: Autor
4.2 Resultados
Associando o que foi modelado em CSS, ap´os a devida integra¸c˜ao com o HTML, s˜ao expostos os resultados, resultados que foram exibidos anteriormente nas figuras
relaci-onadas ao Hibridus. Alguns componentes n˜ao precisaram ser modelados ou posicionados
pois, como dito no come¸co deste cap´ıtulo, foram usados alguns elementos do kit de de-senvolvimento da Google.
Para execu¸c˜ao da aplica¸c˜ao, foi utilizado o comando gulpserve gerando assim um socket para acesso remoto ao servidor local. Foi tamb´em utilizado o HTTPS pois o Google Maps necessita do certificado para capturar a localiza¸c˜ao atual do dispositivo. Como n˜ao
havia a chave, a conex˜ao ´e dada como insegura, por´em n˜ao apresenta problemas para o usu´ario tendo em vista que a m´aquina usada para desenvolvimento era o servidor.
Para demonstrar melhor a eficiˆencia da aplica¸c˜ao de responsividade para correta operacionalidade, ser˜ao exibidos os resultados de adapta¸c˜ao de layout em diferentes re-solu¸c˜oes. Baseado no console do Google Chrome, podemos observar as seguintes resolu¸c˜oes como mostra a Tabela 2:
Tabela 2: Resolu¸c˜oes dispon´ıveis para teste
Dispositivo Resolu¸c˜ao (largura x altura)
Galaxy S5 360 x 640 Nexus 5X e 6P 412 x 732 iPhone 5 320 x 568 iPhone 6 375 x 667 iPhone 6 Plus 414 x 736 iPad 768 x 1024 iPad Pro 1024 x 1366 Desktop 1366 x 768
Fonte: Google Chrome
No caso geral, a maioria dos dispositivos atualmente no mercado utilizam dessas resolu¸c˜oes, portanto, ser˜ao adotados como testes gerais os experimentos de acordo com essas resolu¸c˜oes. Nas figuras abaixo ser˜ao exibidos os resultados de acordo com a resolu¸c˜ao
e em comparativo tamb´em o modelo de adapta¸c˜ao diferente, que foi o do menu. A
diferen¸ca entre imagens nos cards se d´a pelo fato de que eles trocam constantemente o an´uncio atrav´es de transi¸c˜oes do CSS.
Figura 14: Resultado Galaxy S5
Fonte: Autor
Figura 15: Resultado Nexus 5X e 6P
Figura 16: Resultado iPhone 5
Fonte: Autor
Figura 17: Resultado iPhone 6
Figura 18: Resultado iPhone 6 Plus
Fonte: Autor
Figura 19: Resultado Desktop 1
Figura 20: Resultado Desktop 2
Fonte: Autor
Do mesmo modo os resultados se aplicam as telas de carrinho, cart˜ao e localiza¸c˜ao. Utilizando de uma resolu¸c˜ao intermedi´aria que ´e a do iPhone 6 Plus, ser˜ao exibidos os resultados para essas trˆes p´aginas a seguir:
Figura 21: Resultado Informa¸c˜oes do cart˜ao e Localiza¸c˜ao no iPhone 6 Plus
Figura 22: Resultado Carrinho no iPhone 6 Plus
Fonte: Autor
As funcionalidades foram todas feitas utilizando JavaScript, desde as valida¸c˜oes de compra at´e o armazenamento da posi¸c˜ao atual do dispositivo. Todo o armazenamento de informa¸c˜oes ´e feito atrav´es de Web Storage, recurso dispon´ıvel no HTML 5 que substitui
parcialmente a necessidade de um banco de dados para demonstra¸c˜ao de funcionamento
do sistema.
Todos os testes foram feitos utilizando o gulp para criar um socket e a partir disso serem testadas as compras e o comportamento de cada p´agina. Os dispositivos f´ısicos
utilizados para experimento foram: Moto G 1ª e 3ª gera¸c˜ao, Tablet Samsung Galaxy
Tab, iPhone 4S, iPhone 6S e Samsung Galaxy S7.
Para valida¸c˜ao de experimentos baseado em dispositivos f´ısicos, foi utilizado o Samsung Galaxy S7 cuja resolu¸c˜ao ´e de 1440 x 2560 pixel e ajustado automaticamente, permitindo efetuar compras e exibindo todas as funcionalidades do PWA. Ser˜ao exibidas as etapas desde a pesquisa pelo produto at´e a verifica¸c˜ao de valida¸c˜ao do procedimento.
Inicialmente, ´e feita a pesquisa pelo produto desejado e o produto ´e encontrado (Figura 23):
Figura 23: Resultado de busca por produto ”camisa”
Fonte: Autor
Em seguida, ´e selecionado o item e quantas unidades deseja comprar (Figura 24): Figura 24: Produto adicionado ao carrinho
Fonte: Autor
O usu´ario ´e redirecionado para o carrinho e n´umero de itens atualizado (Figura 25):
Figura 25: Item adicionado ao carrinho
Fonte: Autor
Durante a valida¸c˜ao da compra, foi inserido um c´odigo PIN incorreto e exibida a respectiva mensagem do erro (Figura 26):
Figura 26: Valida¸c˜ao de compra
Fonte: Autor
(Figura 27):
Figura 27: Compra confirmada
Fonte: Autor
Ap´os definir a Tag, s˜ao conferidos os dados da compra. A partir disso, ser´a gerado um marcador com essa Tag (Figura 28):
Figura 28: Verifica¸c˜ao de informa¸c˜oes da compra
Ap´os concluir a compra, ´e poss´ıvel ent˜ao observar no mapa onde foi realizada e ao clicar sob a localiza¸c˜ao, s˜ao exibidas as informa¸c˜oes da compra (Figura 29):
Figura 29: Informa¸c˜oes no local da compra
Fonte: Autor
O valor foi descontado do limite e a fatura enviada (Figura 30): Figura 30: Informa¸c˜oes do cart˜ao
5
CONCLUS ˜
OES E TRABALHOS FUTUROS
Baseado nos resultados apresentados no cap´ıtulo anterior, conclui-se que o PWA resolveu o problema de responsividade e operacionalidade em dispositivos computacio-nais, tendo em vista que houve a correta adapta¸c˜ao de layout e total funcionamento da aplica¸c˜ao.
A solu¸c˜ao foi testada em v´arios dispositivos de diferentes resolu¸c˜oes e apresentou o comportamento esperado, sem apresentar problemas quanto a execu¸c˜ao ou adapta¸c˜ao visual. Com isso, ´e um fato que a modelagem realizada atrav´es de HTML e CSS foi fun-damental para que fosse alcan¸cado o objetivo de solucionar o problema de responsividade e operacionalidade.
Para trabalhos futuros, a fim de melhorar esteticamente, utilizar de outras ferra-mentas como templates apropriados para mercado virtual. ´E interessante tamb´em obter informa¸c˜oes derivadas de banco de dados, isso se d´a atrav´es de inser¸c˜ao de um
back-end onde haja consumo de uma API voltada para esse tipo de aplica¸c˜ao. Comumente
nesse tipo de mercado, o back-end entra na parte de listar os produtos e armazenar as informa¸c˜oes ap´os a compra ser realizada, o que de fato levaria at´e a empresa o que foi comprado e subtra´ıdo de seu estoque o produto adquirido pelo usu´ario.
REFERˆ
ENCIAS
[1] PORTO, Fabiano. Aplicativos Mobile: Defini¸c˜oes, hist´oria e
pre-vis˜oes. S˜ao Paulo: Tec Triade Brasil, 2012. Dispon´ıvel em:
<http://tectriadebrasil.com.br/blog/mercado-de-midias-sociais-blog/aplicativos-mobile-definicoes-historia-e-previsoes/>. Acesso em: 5 de Junho de 2017.
[2] BENFICA, Alex. O que ´e app?. Paran´a: Telefones Celulares, 2009. Dispon´ıvel em: <https://www.telefonescelulares.com.br/o-que-e-app/>. Acesso em: 7 de Junho de 2017.
[3] BOZZA, Cl´audia. Saiba o que ´e um navegador e um sistema operacional. S˜ao
Paulo: Techtudo, 2013. Dispon´ıvel em:
<http://www.techtudo.com.br/dicas- e-tutoriais/noticia/2011/08/saiba-o-que-e-um-navegador-e-um-sistema-operacional.html>. Acesso em: 5 de Junho de 2017.
[4] ARRIGONI, Ricardo. Responsive Design: dicas para tornar seu site
acess´ıvel em qualquer resolu¸c˜ao. S˜ao Paulo: DevMedia, 2016. Dispon´ıvel em:
<http://www.devmedia.com.br/responsive-design-dicas-para-tornar-seu-site-acessivel-em-qualquer-resolucao/28316>. Acesso em: 6 de Fevereiro de 2017.
[5] MOREIRA, Eduardo. Os navegadores web mais usados em dispositivos m´oveis. S˜ao
Paulo: TargetHD, 2015. Dispon´ıvel em: <http://targethd.net/os-navegadores-web-mais-usados-em-dispositivos-moveis-em-abril-de-2015/>. Acesso em: 7 de Fevereiro de 2017.
[6] LEPAGE, Pete. Seu primeiro Progressive Web App. USA: Google, 2017.
Dispon´ıvel em:
<https://developers.google.com/web/fundamentals/getting-started/codelabs/your-first-pwapp/>. Acesso em: 14 de Novembro de 2016.
[7] CASTELLI, Ian. Material Design: um olhar aprofundado sobre o
novo estilo visual da Google . Brasil: Google, 2014. Dispon´ıvel em:
<https://www.tecmundo.com.br/google/58278-material-design-olhar-aprofundado-novo-estilo-visual-google.htm>. Acesso em: 16 de Novembro de 2016.
[8] HAMANN, Renan. iOS, Android e Windows Phone: n´umeros
dos gigantes comparados. Brasil: Tecmundo, 2014. Dispon´ıvel em:
<https://www.tecmundo.com.br/sistema-operacional/60596-ios-android-windows-phone-numeros-gigantes-comparados-infografico.htm>. Acesso em: 8 de Junho de 2017.
[9] EIS, Diego. Introdu¸c˜ao sobre Media Queries. Brasil: Tecmundo, 2009. Dispon´ıvel em: <https://tableless.com.br/introducao-sobre-media-queries/>. Acesso em: 15 de Novembro de 2016.
[10] FIRDAUS, Thoriq. Get up and Running with Google Web Starter Kit. N/A: Tuts-plus, 2014. Dispon´ıvel em: <https://webdesign.tutsplus.com/tutorials/get-up-and-running-with-google-web-starter-kit–cms-21495>. Acesso em: 15 de Novembro de 2016.
[11] ALBUQUERQUE, Rodney. Como criar p´aginas responsivas para
v´arios dispositivos. Brasil: Linhadec´odigo, 2016. Dispon´ıvel em:
<http://www.linhadecodigo.com.br/artigo/3628/como-criar-paginas-responsivas-para-varios-dispositivos.aspx>. Acesso em: 4 de Dezembro de 2016.
[12] CAPISTRANO, Daniela. Mas afinal, o que ´e um App?. Brasil: F´abrica de
Aplica-tivos, 2012. Dispon´ıvel em: <http://fabricadeaplicativos.com.br/fabrica/mas-afinal-o-que-e-um-app/>. Acesso em: 8 de Junho de 2017.
[13] FERREIRA, Davi. React: JavaScript reativo, 2013. Dispon´ıvel em:
<https://tableless.com.br/react-javascript-reativo/>. Acesso em: 8 de Junho de 2017.
APˆ
ENDICE A
5.1 Funcionalidades da barra de navega¸c˜ao
Para a barra de navega¸c˜ao associada ao menu, temos a op¸c˜ao de abrir e fechar. Toda essa funcionalidade ´e implementada no arquivo navigation.js. Ao abrir o menu, ´e inserida uma sombra nos demais elementos da tela e ao fechar essa sombra ´e eliminada e o menu recolhido. 1 f u n c t i o n o p e n N a v () { 2 var c o n t = p a r s e I n t ( w i n d o w . s e s s i o n S t o r a g e . g e t I t e m (" c o n t ") ) ; 3 if ( c o n t == 0) { 4 d o c u m e n t . g e t E l e m e n t B y I d (" m y N a v i g a t i o n ") . s t y l e . w i d t h = " 0 "; 5 d o c u m e n t . g e t E l e m e n t B y I d (" m y N a v i g a t i o n ") . s t y l e . b o x S h a d o w = '10 px 2 px 9 px 1 px r g b a (0 , 0 , 0 , 0 . 1 5 )'; 6 w i n d o w . s e s s i o n S t o r a g e . s e t I t e m (" c o n t ",1) ; 7 } 8 e l s e{ 9 d o c u m e n t . g e t E l e m e n t B y I d (" m y N a v i g a t i o n ") . s t y l e . w i d t h = " 70% "; 10 d o c u m e n t . g e t E l e m e n t B y I d (" m y N a v i g a t i o n ") . s t y l e . b o x S h a d o w = '400 px 800 px 0 px 800 px r g b a (0 , 0 , 0 , 0 . 6 )'; 11 w i n d o w . s e s s i o n S t o r a g e . s e t I t e m (" c o n t ",0) ; 12 } 13 } 14 15 f u n c t i o n c l o s e N a v () { 16 d o c u m e n t . g e t E l e m e n t B y I d (" m y N a v i g a t i o n ") . s t y l e . w i d t h = " 0 "; 17 d o c u m e n t . g e t E l e m e n t B y I d (" m y N a v i g a t i o n ") . s t y l e . b o x S h a d o w = '0px 0 px 0 px 0 px r g b a (0 , 0 , 0 , 0)'; 18 w i n d o w . s e s s i o n S t o r a g e . s e t I t e m (" c o n t ",1) ; 19 }
Para cada ´ıcone temos uma referˆencia associada para que, ao usu´ario clicar no mesmo, seja redirecionado para a respectiva p´agina.
1 f u n c t i o n o p e n H o m e () { 2 c l o s e N a v () ; 3 w i n d o w . l o c a t i o n . h r e f = " i n d e x . h t m l "; 4 } 5 6 f u n c t i o n o p e n P r o m o () { 7 c l o s e N a v () ; 8 w i n d o w . l o c a t i o n . h r e f = " p r o m o t i o n . h t m l "; 9 }
10 11 f u n c t i o n o p e n C a r () { 12 c l o s e N a v () ; 13 w i n d o w . l o c a t i o n . h r e f = " s h o p p i n g - c a r t . h t m l "; 14 } 15 16 f u n c t i o n o p e n C a r d () { 17 c l o s e N a v () ; 18 w i n d o w . l o c a t i o n . h r e f = " c a r d . h t m l "; 19 } 20 21 f u n c t i o n o p e n H i s t () { 22 w i n d o w . l o c a t i o n . h r e f = " l o c a l i z a t i o n _ l o a d . h t m l "; 23 c l o s e N a v () ; 24 }
Para a funcionalidade de busca, utiliza-se a fun¸c˜ao openBusca(inter) onde base-ado na palavra chave inserida, o usu´ario ser´a redirecionado para a p´agina da categoria do produto. 1 f u n c t i o n o p e n B u s c a ( i n t e r ) { 2 c l o s e N a v () ; 3 var t x t R e a d = d o c u m e n t . g e t E l e m e n t B y I d (" t x t B u s c a ") . v a l u e ; 4 var t x t B u s c a = t x t R e a d . s u b s t r i n g (0 ,1) . t o U p p e r C a s e () + t x t R e a d . s u b s t r i n g (1) ; 5 6 var d i a l o g _ b u s c a = w i n d o w . d o c u m e n t . g e t E l e m e n t B y I d (' busca-dialog ' ) ; 7 var b u s c a _ c o n t e n t = w i n d o w . d o c u m e n t . g e t E l e m e n t B y I d (' b u s c a - c o n t e n t') ; 8 9 if (! d i a l o g _ b u s c a . s h o w M o d a l ) { 10 d i a l o g P o l y f i l l . r e g i s t e r D i a l o g ( d i a l o g _ b u s c a ) ; 11 } 12 d i a l o g _ b u s c a . s h o w M o d a l () ; 13 14 if ( t x t B u s c a == " R o u p a " || t x t B u s c a == " R o u p a s "|| t x t B u s c a == " C a m i s a " || t x t B u s c a == " B e r m u d a " || t x t B u s c a == " C a l c a " || t x t B u s c a == " S u n g a de b a n h o ") { 15 16 b u s c a _ c o n t e n t . t e x t C o n t e n t =" P r o d u t o e n c o n t r a d o ! P r e s s i o n e OK p a r a c o n t i n u a r . . . "; 17 d o c u m e n t . q u e r y S e l e c t o r ('. close ') . a d d E v e n t L i s t e n e r ('click ', f u n c t i o n() { 18 w i n d o w . l o c a t i o n . h r e f = " c l o t h i n g . h t m l ";}) ; 19 }
20 e l s e if ( t x t B u s c a == " T e c n o l o g i a " || t x t B u s c a == " D i g i t a l " || t x t B u s c a == " T a b l e t " || t x t B u s c a == " i P h o n e " || t x t B u s c a == " S a m s u n g " || t x t B u s c a == " M u l t i m i d i a " || t x t B u s c a == " Som " || t x t B u s c a == " P r o j e t o r ") { 21 b u s c a _ c o n t e n t . t e x t C o n t e n t =" P r o d u t o e n c o n t r a d o ! P r e s s i o n e OK p a r a c o n t i n u a r . . . "; 22 d o c u m e n t . q u e r y S e l e c t o r ('. close ') . a d d E v e n t L i s t e n e r ('click ', f u n c t i o n() { 23 w i n d o w . l o c a t i o n . h r e f = " t e c h n o l o g y . h t m l ";}) ; 24 } 25 // C a s o NAO N C O N T R E 26 e l s e { 27 b u s c a _ c o n t e n t . t e x t C o n t e n t = " P r o d u t o nao e n c o n t r a d o "; 28 d o c u m e n t . q u e r y S e l e c t o r ('. close ') . a d d E v e n t L i s t e n e r ('click ' , f u n c t i o n() { 29 d i a l o g _ b u s c a . c l o s e () ;}) ; 30 d o c u m e n t . g e t E l e m e n t B y I d (" t x t B u s c a ") .v a l u e = " "; 31 } 32 }
5.2 Implementa¸c˜ao do processo de compra
Para melhor compreens˜ao do processo de compra, os c´odigos a seguir exibem como foram feitas todas as fun¸c˜oes de valida¸c˜ao do procedimento.
Para adicionar o item ao carrinho, ´e necess´ario ocupar um slot dispon´ıvel no ar-mazenamento selecionado, que foi o Session Storage, para que ao fim da navega¸c˜ao, os dados sejam exclu´ıdos. Para isso, utiliza-se a fun¸c˜ao getItemV alues(name, src, value) contendo o nome do produto, imagem e valor total (rela¸c˜ao valor x quantidade de itens). Caso a opera¸c˜ao seja cancelada, ´e ent˜ao exibida a mensagem de cancelamento atrav´es de um toast. Tamb´em h´a o tratamento para o carrinho cheio.
1 f u n c t i o n g e t I t e m V a l u e s (name, src, v a l u e) { 2 var i t e m _ n a m e = w i n d o w . s e s s i o n S t o r a g e . g e t I t e m (" n a m e _ 1 ") ; 3 if ( i t e m _ n a m e != n u l l) { 4 g e t I t e m V a l u e s _ 2 (name, src, v a l u e) ; 5 } 6 e l s e { 7 8 var c a r t _ d i a l o g = w i n d o w . d o c u m e n t . g e t E l e m e n t B y I d (' cart-dialog ') ; 9 var c a r t _ d i a l o g _ c o n t e n t = d o c u m e n t . g e t E l e m e n t B y I d (' cart-content ' ) ; 10 11 var s l i d e r _ v a l u e = d o c u m e n t . g e t E l e m e n t B y I d (' slider-value ') ;
12 var t x t _ i n p u t = d o c u m e n t . g e t E l e m e n t B y I d ('txt-input ') ; 13 14 // A t u a l i z a r o n u m e r o a b a i x o do s l i d e r 15 s l i d e r _ v a l u e . a d d E v e n t L i s t e n e r ('input ', f u n c t i o n () { 16 t x t _ i n p u t . i n n e r T e x t = s l i d e r _ v a l u e . v a l u e ; 17 } , f a l s e) ; 18 19 // C a n c e l a m e n t o de a d i c i o n a r 20 if (! c a r t _ d i a l o g . s h o w M o d a l ) { 21 d i a l o g P o l y f i l l . r e g i s t e r D i a l o g ( c a r t _ d i a l o g ) ; 22 } 23 c a r t _ d i a l o g . s h o w M o d a l () ; 24 25 c a r t _ d i a l o g . q u e r y S e l e c t o r ('. close ') . a d d E v e n t L i s t e n e r ('click ', f u n c t i o n() { 26 m s g T o a s t ('cancelada ') ; 27 c a r t _ d i a l o g . c l o s e () ; 28 }) ; 29 30 c a r t _ d i a l o g _ c o n t e n t . q u e r y S e l e c t o r ('p') . i n n e r T e x t = 'Selecione q u a n t a s u n i d a d e s de '+ n a m e +' deseja adicionar '; 31 32 c a r t _ d i a l o g . q u e r y S e l e c t o r ('. confirm-cart ') . a d d E v e n t L i s t e n e r (' c l i c k',f u n c t i o n() { 33 34 q t d e = s l i d e r _ v a l u e . v a l u e ; 35 // A r m a z e n a m e n t o dos d a d o s 36 w i n d o w . s e s s i o n S t o r a g e . s e t I t e m (" n a m e _ 1 ", n a m e) ; 37 w i n d o w . s e s s i o n S t o r a g e . s e t I t e m (" s r c _ 1 ", src) ; 38 w i n d o w . s e s s i o n S t o r a g e . s e t I t e m (" v a l u e _ 1 ", v a l u e * q t d e ) ; 39 w i n d o w . s e s s i o n S t o r a g e . s e t I t e m (" q u a n t i t y _ 1 ", q t d e ) ; 40 w i n d o w . l o c a t i o n . h r e f = " s h o p p i n g - c a r t . h t m l "; 41 }) ; 42 } 43 } 44 45 // A v i s o s p a r a c a r r i n h o c h e i o ou c a n c e l a m e n t o 46 f u n c t i o n m s g T o a s t ( s t a t u s ) { 47 48 if( s t a t u s == 'cancelada ') { 49 50 var s n a c k b a r C o n t a i n e r = d o c u m e n t . q u e r y S e l e c t o r ('# toast-clear ') ; 51 var s h o w T o a s t B u t t o n = d o c u m e n t . q u e r y S e l e c t o r ('# show-toast ') ; 52 var d a t a = { m e s s a g e : 'Cancelado '}; // # ' + ++ counter
53 s n a c k b a r C o n t a i n e r . M a t e r i a l S n a c k b a r . s h o w S n a c k b a r (d a t a) ;
55 if( s t a t u s == 'lotado ') { 56
57 var s n a c k b a r C o n t a i n e r = d o c u m e n t . q u e r y S e l e c t o r ('# toast-clear ') ;
58 var s h o w T o a s t B u t t o n = d o c u m e n t . q u e r y S e l e c t o r ('# show-toast ') ; 59 var d a t a = { m e s s a g e : 'Carrinho LOTADO ! Confira seu carrinho '}; 60 s n a c k b a r C o n t a i n e r . M a t e r i a l S n a c k b a r . s h o w S n a c k b a r (d a t a) ;
61 }
62 }
Para a tela de carrinho exibir as informa¸c˜oes armazenadas, utiliza-se da fun¸c˜ao loadCart(). 1 f u n c t i o n l o a d C a r t () { 2 3 var d i v _ n o m e 1 = d o c u m e n t . g e t E l e m e n t B y I d (" n o m e _ i t e m 1 ") ; 4 d i v _ n o m e 1 . t e x t C o n t e n t = w i n d o w . s e s s i o n S t o r a g e . g e t I t e m (" n a m e _ 1 ") ; 5 // V e r i f i c a se ta v a z i o 6 if ( d i v _ n o m e 1 . t e x t C o n t e n t != " ") { 7 8 var l o a d = new I m a g e () ; 9 l o a d . s r c = w i n d o w . s e s s i o n S t o r a g e . g e t I t e m (" s r c _ 1 ") ; 10 d o c u m e n t . g e t E l e m e n t B y I d (" i c o n e _ i t e m 1 ") . i n n e r H T M L = " < i m g s r c = \" " 11 + l o a d . s r c + " \" w i d t h = 3 5 />"; 12 13 var d i v _ v a l o r = d o c u m e n t . g e t E l e m e n t B y I d (" v a l o r _ i t e m 1 ") ; 14 d i v _ v a l o r . t e x t C o n t e n t = " R$ " + w i n d o w . s e s s i o n S t o r a g e . g e t I t e m (" v a l u e _ 1 ") ; 15 16 var d i v _ q t d e = d o c u m e n t . g e t E l e m e n t B y I d (" q t d e _ i t e m 1 ") ; 17 d i v _ q t d e . t e x t C o n t e n t = w i n d o w . s e s s i o n S t o r a g e . g e t I t e m (" q u a n t i t y _ 1 ") ; 18 } // C a s o s e j a vazio , r e t o r n a v a z i o 19 e l s e { 20 d o c u m e n t . g e t E l e m e n t B y I d (" n o m e _ i t e m 1 ") . t e x t C o n t e n t = " v a z i o "; 21 d o c u m e n t . g e t E l e m e n t B y I d (" i c o n e _ i t e m 1 ") . i n n e r H T M L = " < i m g s r c = \' i m a g e s / c a r t / e m p t y . p n g' width=35 />"; 22 d o c u m e n t . g e t E l e m e n t B y I d (" v a l o r _ i t e m 1 ") . t e x t C o n t e n t = " v a z i o "; 23 d o c u m e n t . g e t E l e m e n t B y I d (" q t d e _ i t e m 1 ") . t e x t C o n t e n t = " v a z i o "; 24 } 25 }
Para remover itens do carrinho, utiliza-se a fun¸c˜ao removeItem(item id) que re-cebe como parˆametro em que bot˜ao foi clicado para remover o respectivo item do carrinho.
1 f u n c t i o n r e m o v e I t e m ( i t e m _ i d ) { 2 3 if ( i t e m _ i d == " i t e m _ 1 ") { 4 if( w i n d o w . s e s s i o n S t o r a g e . g e t I t e m (" n a m e _ 1 ") == n u l l) { 5 c l e a r T o a s t ('clean ') ; 6 } e l s e { 7 var d i a l o g _ 1 = d o c u m e n t . g e t E l e m e n t B y I d ('remover-1 ') ; 8 var s h o w D i a l o g B u t t o n _ 1 = d o c u m e n t . q u e r y S e l e c t o r ('# show-dialog-1 ' ) ; 9 10 if (! d i a l o g _ 1 . s h o w M o d a l ) { 11 d i a l o g P o l y f i l l . r e g i s t e r D i a l o g ( d i a l o g _ 1 ) ; 12 } 13 d i a l o g _ 1 . s h o w M o d a l () ; 14 d i a l o g _ 1 . q u e r y S e l e c t o r ('. close ') . a d d E v e n t L i s t e n e r ('click ', f u n c t i o n() { 15 d i a l o g _ 1 . c l o s e () ; 16 }) ; 17 18 w i n d o w . d o c u m e n t . g e t E l e m e n t B y I d (" r e m o v e r - i t e m - 1 ") . t e x t C o n t e n t = w i n d o w . s e s s i o n S t o r a g e . g e t I t e m (" n a m e _ 1 ") ; 19 d o c u m e n t . q u e r y S e l e c t o r ('. confirm-1 ') . a d d E v e n t L i s t e n e r ('click ', f u n c t i o n() { 20 w i n d o w . s e s s i o n S t o r a g e . r e m o v e I t e m (" n a m e _ 1 ") ; 21 w i n d o w . s e s s i o n S t o r a g e . r e m o v e I t e m (" s r c _ 1 ") ; 22 w i n d o w . s e s s i o n S t o r a g e . r e m o v e I t e m (" v a l u e _ 1 ") ; 23 w i n d o w . s e s s i o n S t o r a g e . r e m o v e I t e m (" q u a n t i t y _ 1 ") ; 24 w i n d o w . l o c a t i o n . h r e f = " s h o p p i n g - c a r t . h t m l ";}) ; 25 } 26 } 27 }
Ao selecionar a op¸c˜ao comprar, s˜ao lidas as informa¸c˜oes dos itens do carrinho. Os campos que cont´em valores s˜ao considerados para que, a partir da´ı, seja iniciado o processo de conclus˜ao da compra. S˜ao permitidos no m´aximo seis itens no carrinho:
1 f u n c t i o n b u y I n f o s ( value_1 , value_2 , value_3 , value_4 , value_5 , value_6 , total , tag ) {
2 3 var n a m e _ q t d e ; 4 var d a t e = new D a t e () ; 5 var d a t a = d a t e . t o L o c a l e D a t e S t r i n g () + " " + d a t e . t o L o c a l e T i m e S t r i n g () ; 6 var g e o l o c a t i o n = w i n d o w . n a v i g a t o r . g e o l o c a t i o n ; 7 8 if ( v a l u e _ 1 != 0) {
9 n a m e _ q t d e = w i n d o w . s e s s i o n S t o r a g e . g e t I t e m (" n a m e _ 1 ") + 10 " x " + w i n d o w . s e s s i o n S t o r a g e . g e t I t e m (" q u a n t i t y _ 1 ") ; 11 var r e s u l t = ( w i n d o w . l o c a l S t o r a g e . g e t I t e m (" l i m i t e _ a t u a l " ) - v a l u e _ 1 ) ; 12 } 13 // L o c a l p a r a a r m a z e n a m e n t o 14 if ( w i n d o w . l o c a l S t o r a g e . g e t I t e m (" e x t r a t o _ i n f o s _ 1 ") != n u l l) { 15 p o s i c a o 2 () ; 16 } e l s e { 17 w i n d o w . l o c a l S t o r a g e . s e t I t e m (" e x t r a t o _ i n f o s _ 1 ", n a m e _ q t d e ) ; 18 w i n d o w . l o c a l S t o r a g e . s e t I t e m (" e x t r a t o _ t o t a l _ 1 ", t o t a l ) ; 19 w i n d o w . l o c a l S t o r a g e . s e t I t e m (" e x t r a t o _ d a t e _ 1 ", d a t a) ; 20 w i n d o w . l o c a l S t o r a g e . s e t I t e m (" l i m i t e _ a t u a l ", r e s u l t ) ; 21 w i n d o w . l o c a l S t o r a g e . s e t I t e m (" t a g _ 1 ", tag ) ; 22 } ´
E ent˜ao iniciado o processo de confirma¸c˜ao de compra. O PIN inserido ´e verificado para que seja de acordo com o pr´e-definido. Caso n˜ao seja, ´e retornada a mensagem de erro e o n´umero de tentativas restantes. Caso esse n´umero esgote ou o limite esteja estourado, a compra ´e cancelada e o cart˜ao bloqueado.
O limite dispon´ıvel para compra e status do cart˜ao ´e verificado atrav´es dos valores definidos para o cart˜ao em quest˜ao. Esses valores s˜ao pr´e-armazenados e verificados antes da conclus˜ao da compra. 1 f u n c t i o n b u y C l i c k () { 2 var s n a c k b a r C o n t a i n e r = d o c u m e n t . g e t E l e m e n t B y I d (' toast-clear ') ; 3 var s h o w T o a s t B u t t o n = d o c u m e n t . g e t E l e m e n t B y I d (' show-toast ') ; 4 // R e c e b e n d o os v a l o r e s 5 var v a l u e _ 1 = w i n d o w . s e s s i o n S t o r a g e . g e t I t e m (" v a l u e _ 1 ") ; 6 var v a l u e _ 2 = w i n d o w . s e s s i o n S t o r a g e . g e t I t e m (" v a l u e _ 2 ") ; 7 var v a l u e _ 3 = w i n d o w . s e s s i o n S t o r a g e . g e t I t e m (" v a l u e _ 3 ") ; 8 var v a l u e _ 4 = w i n d o w . s e s s i o n S t o r a g e . g e t I t e m (" v a l u e _ 4 ") ; 9 var v a l u e _ 5 = w i n d o w . s e s s i o n S t o r a g e . g e t I t e m (" v a l u e _ 5 ") ; 10 var v a l u e _ 6 = w i n d o w . s e s s i o n S t o r a g e . g e t I t e m (" v a l u e _ 6 ") ; 11 // V e r i f i c a n d o se sao n u l o s 12 if ( v a l u e _ 1 == n u l l) { 13 v a l u e _ 1 = 0; 14 } 15 if ( v a l u e _ 2 == n u l l) { 16 v a l u e _ 2 = 0; 17 } 18 if ( v a l u e _ 3 == n u l l) { 19 v a l u e _ 3 = 0; 20 }
21 if ( v a l u e _ 4 == n u l l) { 22 v a l u e _ 4 = 0; 23 } 24 if ( v a l u e _ 5 == n u l l) { 25 v a l u e _ 5 = 0; 26 } 27 if ( v a l u e _ 6 == n u l l) { 28 v a l u e _ 6 = 0; 29 } 30 // S o m a n d o os v a l o r e s 31 var t o t a l = p a r s e I n t ( v a l u e _ 1 ) + p a r s e I n t ( v a l u e _ 2 ) + p a r s e I n t ( v a l u e _ 3 ) 32 + p a r s e I n t ( v a l u e _ 4 ) + p a r s e I n t ( v a l u e _ 5 ) + p a r s e I n t ( v a l u e _ 6 ) ; 33 // V a l i d a n d o a c o m p r a 34 var P I N _ C O D E = " A 1 B 2 C 3 D 4 "; 35 var c o d e ; 36 var t a g ; 37 var l i m i t e ; 38 var t e n t a t i v a s ; 39 40 if ( t o t a l == 0) { 41 c l e a r T o a s t ('vazio ') ; 42 } e l s e { 43 t e n t a t i v a s = w i n d o w . l o c a l S t o r a g e . g e t I t e m (" t e n t a t i v a s ") ; 44 if ( t e n t a t i v a s != 0 && t e n t a t i v a s > 0) { 45 var b u y _ v a l i d a t e = w i n d o w . d o c u m e n t . g e t E l e m e n t B y I d ( ' buy-content ') ; 46 var d i a l o g _ b u y = d o c u m e n t . g e t E l e m e n t B y I d ('validate ') ; 47 48 if (! d i a l o g _ b u y . s h o w M o d a l ) { 49 d i a l o g P o l y f i l l . r e g i s t e r D i a l o g ( d i a l o g _ b u y ) ; 50 } 51 d i a l o g _ b u y . s h o w M o d a l () ; 52 53 d i a l o g _ b u y . q u e r y S e l e c t o r ('. close ') . a d d E v e n t L i s t e n e r ('click ', f u n c t i o n() { 54 c l e a r T o a s t ('cancelada ') ; 55 d i a l o g _ b u y . c l o s e () ; 56 }) ; 57
58 b u y _ v a l i d a t e . i n n e r H T M L = '<input type= " password "
id= " t x t P I N C O D E " p l a c e h o l d e r = " I n s i r a o PIN C O D E . . . " />';
59
61 d o c u m e n t . q u e r y S e l e c t o r ('. confirm-buy ') . a d d E v e n t L i s t e n e r ('click ', f u n c t i o n() { 62 // C o n c l u i r c o m p r a c a p t u r a n d o o v a l o r do i n p u t 63 c o d e = ( w i n d o w . d o c u m e n t . g e t E l e m e n t B y I d (' t x t P I N C O D E') .v a l u e) . t o U p p e r C a s e () ; 64 if ( P I N _ C O D E == c o d e) { 65 d o c u m e n t . g e t E l e m e n t B y I d ('closebtn ') . s t y l e . d i s p l a y = 'none '; 66 l i m i t e = w i n d o w . l o c a l S t o r a g e . g e t I t e m (" l i m i t e _ a t u a l ") - t o t a l ; 67 68 if ( l i m i t e >= 0) { 69 // C a s o a c o m p r a s e j a um s u c e s s o 70 c l e a r T o a s t ('sucesso ') ; 71 72 var p i n _ t x t = d o c u m e n t . g e t E l e m e n t B y I d (' t x t P I N C O D E') ; 73 74 p i n _ t x t . p a r e n t N o d e . r e m o v e C h i l d ( p i n _ t x t ) ; 75 76 d i a l o g _ b u y . q u e r y S e l e c t o r ('h5 ') . i n n e r T e x t = ' Identificacao '; 77 b u y _ v a l i d a t e . i n n e r H T M L = ' I d e n t i f i q u e e s s a c o m p r a'+ 78 '<p > </p >< i n p u t t y p e = " t e x t " id= " t x t T A G " p l a c e h o l d e r = " I n s i r a uma T A G . . . " />'; 79 80 d o c u m e n t . g e t E l e m e n t B y I d ('closebtn ' ) . s t y l e . d i s p l a y = 'none '; 81 d o c u m e n t . g e t E l e m e n t B y I d (' c o n f i r m b t n') . s t y l e . d i s p l a y = ' n o n e'; 82 d o c u m e n t . g e t E l e m e n t B y I d ('savebtn ') . s t y l e . d i s p l a y = 'inline '; 83 84 // S e g u e o f l u x o 85 d o c u m e n t . q u e r y S e l e c t o r ('. save ') . a d d E v e n t L i s t e n e r ('click ', f u n c t i o n() { 86 w i n d o w . l o c a l S t o r a g e . s e t I t e m (" t e n t a t i v a s " , 3) ; 87 tag = w i n d o w . d o c u m e n t . g e t E l e m e n t B y I d ('txtTAG ') . v a l u e ;
88 b u y I n f o s ( value_1 , value_2 , value_3 , value_4 , value_5 , value_6 , total , tag ) ;
89 c l e a r C a c h e ('comprar ') ; 90 }) ; 91 92 } e l s e{ 93 // C a s o o l i m i t e t e n h a e s t o u r a d o 94 c l e a r T o a s t ('limite ') ; 95 d i a l o g _ b u y . c l o s e () ; 96 } 97 } e l s e { 98 // C a s o o P I N _ C O D E s e j a e r r a d o 99 t e n t a t i v a s - - ; 100 c l e a r T o a s t ('pincode ') ; 101 w i n d o w . l o c a l S t o r a g e . s e t I t e m (" t e n t a t i v a s " , t e n t a t i v a s ) ; 102 t e n t a t i v a s = w i n d o w . l o c a l S t o r a g e . g e t I t e m (" t e n t a t i v a s ") ; 103 if( t e n t a t i v a s == 0) { 104 w i n d o w . l o c a l S t o r a g e . s e t I t e m (" t e n t a t i v a s " , 0) ; 105 d i a l o g _ b u y . c l o s e () ; 106 c l e a r T o a s t ('esgotada ') ; 107 c l e a r C a c h e () ; 108 } 109 } 110 }) ; 111 } e l s e { 112 // E s g o t a d a s as t e n t a t i v a s 113 c l e a r T o a s t ('esgotada ') ; 114 c l e a r C a c h e () ; 115 } 116 } 117 }
Ap´os a conclus˜ao da compra, ´e limpado o cache do Session Storage com a fun¸c˜ao clearCache(item id) ou para remover item do carrinho. Em seguida, ´e feito o armazena-mento da posi¸c˜ao atual do usu´ario.
1 f u n c t i o n c l e a r C a c h e ( i t e m _ i d ) { 2 3 var v a l u e _ 1 = w i n d o w . s e s s i o n S t o r a g e . g e t I t e m (" v a l u e _ 1 ") ; 4 var v a l u e _ 2 = w i n d o w . s e s s i o n S t o r a g e . g e t I t e m (" v a l u e _ 2 ") ; 5 var v a l u e _ 3 = w i n d o w . s e s s i o n S t o r a g e . g e t I t e m (" v a l u e _ 3 ") ; 6 var v a l u e _ 4 = w i n d o w . s e s s i o n S t o r a g e . g e t I t e m (" v a l u e _ 4 ") ;
7 var v a l u e _ 5 = w i n d o w . s e s s i o n S t o r a g e . g e t I t e m (" v a l u e _ 5 ") ; 8 var v a l u e _ 6 = w i n d o w . s e s s i o n S t o r a g e . g e t I t e m (" v a l u e _ 6 ") ; 9 10 if ( i t e m _ i d == " l i m p a r ") { 11 12 if(( v a l u e _ 1 == n u l l) || ( v a l u e _ 2 == n u l l) || ( v a l u e _ 3 == n u l l) || 13 ( v a l u e _ 4 == n u l l) || ( v a l u e _ 5 == n u l l) || ( v a l u e _ 6 == n u l l) ) { 14 c l e a r T o a s t ('vazio ') ; 15 } e l s e { 16 var c l e a r _ v a l i d a t e = w i n d o w . d o c u m e n t . g e t E l e m e n t B y I d (' c l e a r - c o n t e n t') ; 17 var d i a l o g _ c l e a r = d o c u m e n t . g e t E l e m e n t B y I d ('clear ') ; 18 19 if (! d i a l o g _ c l e a r . s h o w M o d a l ) { 20 d i a l o g P o l y f i l l . r e g i s t e r D i a l o g ( d i a l o g _ c l e a r ) ; 21 } 22 d i a l o g _ c l e a r . s h o w M o d a l () ; 23 24 d i a l o g _ c l e a r . q u e r y S e l e c t o r ('. close ') . a d d E v e n t L i s t e n e r ('click ', f u n c t i o n() { 25 c l e a r T o a s t ('cancelado ') ; 26 d i a l o g _ c l e a r . c l o s e () ; 27 }) ; 28 d i a l o g _ c l e a r . q u e r y S e l e c t o r ('. confirm-clear ') . a d d E v e n t L i s t e n e r ( 'click ',f u n c t i o n() { 29 c l e a r T o a s t ('vazio ') ; 30 w i n d o w . s e s s i o n S t o r a g e . c l e a r () ; 31 w i n d o w . l o c a t i o n . h r e f = " s h o p p i n g - c a r t . h t m l "; 32 d i a l o g _ c l e a r . c l o s e () ; 33 }) ; 34 } 35 } 36 if ( i t e m _ i d == " c o m p r a r ") { 37 38 w i n d o w . s e s s i o n S t o r a g e . c l e a r () ; 39 // S a l v a r o l o c a l a t u a l 40 w i n d o w . l o c a t i o n . h r e f = " l o c a l i z a t i o n _ s a v e . h t m l "; 41 } 42 }
As mensagens de status podem ser chamadas atrav´es da fun¸c˜ao seguir de nome clearT oast(status):
1 f u n c t i o n c l e a r T o a s t ( s t a t u s ) { 2
