PONTIFÍCIA UNIVERSIDADE CATÓLICA DE GOIÁS ESCOLA DE CIÊNCIAS EXATAS E DA COMPUTAÇÃO GRADUAÇÃO EM CIÊNCIA DA COMPUTAÇÃO

(1)

PONTIFÍCIA UNIVERSIDADE CATÓLICA DE GOIÁS ESCOLA DE CIÊNCIAS EXATAS E DA COMPUTAÇÃO

GRADUAÇÃO EM CIÊNCIA DA COMPUTAÇÃO

DESENVOLVIMENTO DE UMA APLICAÇÃO PWA QUE COMPORTE OUTRAS APLICAÇÕES USANDO ARQUITETURA DE MICRO FRONTEND

AZUEL AGUIAR DA SILVA NETO

GOIÂNIA 2020

(2)

Trabalho de Conclusão de Curso apresentado à Escola de Ciências Exatas e da Computação, da Pontifícia Universidade Católica de Goiás, como parte dos requisitos para a obtenção do título de Bacharel em Ciência da Computação.

Orientador(a): Rafael Leal Martins

GOIÂNIA 2020

(3)

Trabalho de Conclusão de Curso aprovado em sua forma final pela Escola de Ciências Exatas e da Computação, da Pontifícia Universidade Católica de Goiás, para obtenção do título de Bacharel em Ciência da Computação, em _____/_____/__________.

______________________________________ Ludmilla Reis Pinheiro Dos Santos

Banca examinadora:

______________________________________ Orientador(a): Rafael Leal Martins

______________________________________

Prof. Me. Ana Flavia Marinho De Lima Garrote

______________________________________ Prof. Me. Gustavo Siqueira Vinhal

GOIÂNIA 2020

(4)

RESUMO

Este trabalho apresenta o desenvolvimento de uma aplicação World Wide Web (WEB) com suporte a dispositivos móveis que comporta outras aplicações web de estabelecimentos como mercado, padaria, loja, restaurante e outros. Essas aplicações são exibidas ao usuário com base na localização do Global Positioning System (GPS) ou pesquisando pelo nome e tipo do estabelecimento. Tem como objetivo facilitar o acesso do usuário a esses estabelecimentos e consumir os serviços oferecidos por cada um, sem precisar instalar esse aplicativo no dispositivo. O presente trabalho foi desenvolvido utilizando a arquitetura de micro frontend e Representational State Transfer (REST), com as tecnologias Web Components, iFrame, Node.js e Vue.js.

Palavras-Chave: Micro Frontend, Web Components, PWA, GPS, Vue.js, Vuetify.js, Node.js, MongoDB, REST, iFrame.

(5)

ABSTRACT

This work presents the development of a World Wide Web (WEB) application with support for mobile devices that includes other web applications from establishments such as market, bakery, store, restaurant and others. These applications are displayed to the user based on the location of the Global Positioning System (GPS) or by searching by name and type of establishment. It aims to facilitate user access to these establishments and consume the services offered by each one, without having to install this application on the device. This work was developed using the micro frontend and Representational State Transfer (REST) architecture, with the technologies of Web Components, iFrame, Node.js and Vue.js.

Keywords: Micro Frontend, Web Components, PWA, GPS, Vue.js, Vuetify.js, Node.js, MongoDB, REST, iFrame.

(6)

LISTA DE ILUSTRAÇÕES

Figura 1 - Service worker: Comunicação com servidor ... 13

Figura 2 - Service worker: Sem comunicação com a rede ... 13

Figura 3 - Service worker: Aplicação fechada ... 14

Figura 4 - Arquitetura monolítica ... 15

Figura 5 - Arquitetura frontend e backend ... 16

Figura 6 - Arquitetura de micro serviços ... 17

Figura 7 - Arquitetura de micro frontend ... 18

Figura 8 - Exemplo de funcionamento do iFrame ... 20

Figura 9 - Tipos, operações e endereços em uma arquitetura REST ... 20

Figura 10 - Arquitetura da aplicação principal ... 23

Figura 11 - Requisição ao servidor mischen-server-apps ... 23

Figura 12 - Instanciando aplicativo do estabelecimento ... 24

Figura 13 - Heroku: Painel principal ... 24

Figura 14 - Heroku: Variáveis de ambiente ... 25

Figura 15 - Tela de autenticação ... 26

Figura 16 - Área de trabalho do dispositivo ... 27

Figura 17 - Tela de cadastro ... 28

Figura 18 - Tela inicial ... 29

Figura 19 - Tela de envio do aplicativo: Informações ... 30

Figura 20 - Tela de envio do aplicativo: Localização ... 31

Figura 21 - Tela de envio do aplicativo: Código fonte ... 32

Figura 22 - Tela de favoritos... 33

Figura 23 - Tela do mapa ... 34

Figura 24 - Tela de configuração ... 35

Figura 25 - Aplicativo de demonstração: Tela inicial ... 36

(7)

LISTA DE SIGLAS

PWA Progressive Web App

HTML Hyper Text Markup Language

CSS Cascading Style Sheets

DOM Document Object Model

URI Uniform Resource Identifier JSON JavaScript Object Notation REST Representational State Transfer

SPA Single Page Application

WEB World Wide Web

API Application Programming Interface

SQL Structured Query Language

GPS Global Positioning System

(8)

SUMÁRIO 1 INTRODUÇÃO ... 9 1.1 Objetivos Gerais ... 9 1.2 Objetivos Específicos ... 9 1.2 Justificativa ... 10 1.3 Metodologia ... 10 2 REFERENCIAL TEÓRICO ... 11

2.1 Tipos de aplicações móveis ... 11

2.1.1 Aplicação nativa ... 11 2.1.2 Aplicação híbrida ... 11 2.1.3 Aplicação PWA ... 12 2.2 Arquitetura de Software ... 14 2.3 Web Components ... 19 2.3.1 Elemento iFrame ... 19 2.4 Arquitetura REST ... 20

2.5 Framework Vue.js e Vuetify.js ... 21

2.6 Servidor de aplicação Node.js ... 21

2.7 Banco de dados MongoDB ... 22

3 DESENVOLVIMENTO ... 23 3.1 Arquitetura da Aplicação ... 23 3.2 Hospedagem ... 24 3.3 Aplicação ... 25 3.3.1 Acesso ... 25 3.3.2 Cadastro ... 27 3.3.3 Tela inicial ... 28

3.3.4 Tela de envio do aplicativo ... 29

3.3.5 Tela de favoritos ... 32 3.3.6 Tela do mapa ... 33 3.3.7 Tela de configuração... 34 3.3.8 Aplicativo de demonstração ... 35 CONSIDERAÇÕES FINAIS ... 38 REFERENCIAS... 40

(9)

1 INTRODUÇÃO

Alguns estabelecimentos como restaurantes, mercados, lojas e padarias já utilizam alguma ferramenta digital para interagir com os clientes. Alguns contam com sites e aplicativos para dispositivos móveis com o objetivo de oferecer uma interface para os usuários interagirem com seus serviços e produtos.

Porém, em dispositivos móveis, instalar um novo aplicativo no dispositivo para cada estabelecimento não é muito prático, necessitando espaço livre considerável de armazenamento para a instalação e para atualizações futuras. Uma abordagem para contornar este problema é o uso de aplicações web com suporte a dispositivos móveis, que em geral são mais leves e é uma boa alternativa para sistemas mais simples que tem o intuito de informar e oferecer operações básicas.

1.1 Objetivos Gerais

O trabalho visa o desenvolvimento de um aplicativo web responsivo usando tecnologias modernas que oferece suporte a dispositivos móveis e conta com o recurso de geolocalização para encontrar aplicações de outros estabelecimentos próximos ao usuário.

1.2 Objetivos Específicos

O trabalho tem como objetivos específicos os seguintes itens:

• Desenvolver uma aplicação utilizando arquitetura de micro frontend responsivo com suporte a Progressive Web App (PWA) utilizando o framework Vue.js e Vuetify.js.

(10)

• Utilizar o banco de dados MongoDB para persistência dos dados.

• Desenvolver uma aplicação de um estabelecimento fictício para demonstração.

1.2 Justificativa

Diante do cenário apresentado, é relevante o desenvolvimento desta aplicação para oferecer uma opção prática na utilização dos serviços de um estabelecimento baseado na localização do usuário. De acordo com o site smashing ideas, aplicações PWA podem substituir muitos aplicativos Android. Espera-se que em breve seja capaz de substituir muitos aplicativos IOS.

1.3 Metodologia

Para a realização desse trabalho, a metodologia utilizada foi definida em quatro etapas:

1. Na primeira etapa foi feito o referencial teórico em busca de arquiteturas de software e tecnologias que possibilitasse o desenvolvimento da aplicação proposta neste trabalho.

2. Na segunda etapa foi definida a arquitetura da aplicação e plataforma para hospedagem das aplicações de frontend e backend, e hospedagem do banco de dados.

3. A terceira etapa consistiu no desenvolvimento das aplicações de frontend e backend, incluindo a aplicação de um estabelecimento fictício.

4. Na quarta etapa foram realizados os testes da aplicação para validação das funcionalidades.

(11)

2 REFERENCIAL TEÓRICO

Neste capítulo, apresenta-se as arquiteturas e tecnologias utilizadas para o desenvolvimento da aplicação.

2.1 Tipos de aplicações móveis

Há diferentes formas de se criar uma aplicação que será executada em um dispositivo móvel: a aplicação nativa, híbrida e PWA.

2.1.1 Aplicação nativa

As aplicações nativas são aquelas que são desenvolvidas na linguagem originária de determinado sistema operacional. Por exemplo, a linguagem Swift e Objective-C usada no desenvolvimento de aplicativos do sistema operacional IOS, e as linguagens Java e Kotlin para o sistema operacional Android.

A aplicação nativa consegue explorar melhor as funcionalidades de cada aparelho, tem um desempenho superior aos aplicativos híbridos e PWA e permite o acesso a todos os recursos do sistema operacional como microfone, câmera, agenda de contatos etc.

Algumas desvantagens desse tipo de aplicação é a alta demanda de tempo entre o planejamento até o seu lançamento, além de exigir o conhecimento de mais de uma linguagem para o desenvolvimento em diferentes plataformas como IOS e Android.

2.1.2 Aplicação híbrida

Os aplicativos híbridos são aqueles que mesclam as linguagens utilizadas nas aplicações nativas e tecnologias web. É possível ter acesso a quase todas as funcionalidades de uma aplicação nativa. Geralmente são desenvolvidos nas linguagens HyperText Markup Language (HTML), Cascading Style Sheets (CSS) e

(12)

JavaScript dentro de um framework, que permite o desenvolvimento único para várias plataformas. As aplicações híbridas são mais rápidas de desenvolver em relação a aplicações nativas, mas não oferece o mesmo desempenho que aplicações nativas e o desenvolvimento não é tão simples quanto aplicações PWA.

Alguns frameworks populares para o desenvolvimento de aplicações híbridas são o Ionic e Adobe PhoneGap.

2.1.3 Aplicação PWA

PWA são aplicativos da web que podem aparecer ao usuário como aplicativos tradicionais ou aplicativos móveis (nativos) no que se refere a interface. Tem como objetivo combinar recursos oferecidos pela maioria dos navegadores modernos com os benefícios de aplicações nativas.

“Os aplicativos PWA começam como sites simples, mas conforme o usuário se envolve com eles, eles adquirem novas funcionalidades progressivamente. Eles se transformam de um site em algo muito mais parecido com um aplicativo nativo tradicional.” (ALTER, 2017).

O PWA oferece recursos como:

• Envio de notificações aos usuários. • Atalho na área de trabalho do dispositivo.

• Disponível independentemente de conexão com a internet.

• Acesso a alguns recursos do sistema operacional como câmera, galeria, geolocalização e agenda de contatos.

(13)

PWA conta com a camada de service worker e é fundamental para permitir o acesso ao aplicativo mesmo sem conexão com a internet. É usado como um proxy entre a aplicação e a rede, conforme mostrado na Figura 1. “Um service worker é um script que o navegador executa em segundo plano, separado de uma página da web, possibilitando o uso de recursos que não precisam de uma página da web ou interação do usuário.” (GAUNT, 2020).

Figura 1 - Service worker: Comunicação com servidor

Fonte: ALTER, 2017.

Quando não há conexão com a rede (Figura 2), o service worker passa a responder as requisições de modo offline, interceptando e manipulando as requisições ao servidor web.

Figura 2 - Service worker: Sem comunicação com a rede

(14)

Mesmo que o aplicativo esteja fechado (Figura 3), a camada de service worker é executado em segundo plano e pode se comunicar com o servidor recebendo e exibindo notificações para o usuário.

Figura 3 - Service worker: Aplicação fechada

Fonte: ALTER, 2017.

2.2 Arquitetura de Software

Este tópico apresenta uma visão geral sobre a arquitetura monolítica até arquiteturas como micro serviços e micro frontend.

2.2.1 Arquitetura monolítica

Em uma arquitetura monolítica, todas as funções do sistema são executadas em uma mesma máquina, compartilhando recursos computacionais. “Em termos arquiteturais, funciona corretamente se as aplicações forem de tamanho reduzido, pois o desenvolvimento, testes e implementação em sistemas pequenos, que utilizem esta arquitetura, são relativamente simples” (DIOGO, 2018).

DIOGO (2018) destaca algumas desvantagens dessa arquitetura em que as aplicações tendem a ficar fortemente acoplados à medida que o aplicativo evolui. Isso dificulta isolar serviços com o objetivo de alcançar escalabilidade independente ou manutenção de código. As arquiteturas monolíticas, quando atingem uma dimensão considerável, mesmo que o código esteja bem estruturado, são muito mais difíceis de

(15)

entender, devido à existência de dependências e efeitos adversos que não são perceptíveis quando o programador está analisando determinado código.

A Figura 4 apresenta um diagrama simples da arquitetura monolítica.

Figura 4 - Arquitetura monolítica

Fonte: Elaborada pelo autor.

2.2.2 Arquitetura frontend e backend

Nesta arquitetura (Figura 5) há uma divisão da aplicação entre frontend que é a interface gráfica e o backend que é responsável em termos gerais pela regra de negócio. A vantagem dessa abordagem é a possibilidade de usar diferentes tecnologias em cada sistema, facilita manutenções e separa responsabilidades. A desvantagem é que aumenta a complexidade em relação a arquitetura monolítica.

(16)

Figura 5 - Arquitetura frontend e backend

2.2.3 Arquitetura de micro serviços

A arquitetura de micro serviços (Figura 6) é a divisão do backend em vários serviços independentes, oferece maior flexibilidade por ter baixo acoplamento, podem ser desenvolvidos, testados e escalados de forma individual. Os serviços podem ser desenvolvidos utilizando tecnologias próprias, são mais leves e tem um propósito mais específico. De acordo com a Figura 6, o acesso do frontend ao backend é feito através do gateway do backend, que é a aplicação que recebe as requisições e encaminha para o serviço correspondente.

(17)

Figura 6 - Arquitetura de micro serviços

A arquitetura conta com três princípios:

• Propósito único: cada serviço deve focar em atender a apenas um propósito e realizá-lo de forma adequada.

• Baixo acoplamento: cada serviço não deve ter muita dependência com outros serviços. Isso ajuda a manter a independência entre os serviços de forma que ao realizar uma alteração não seja necessário alterar um outro serviço.

• Alta coesão: cada serviço deve vincular todo código relacionado o mais próximo possível. Garante que ao desenvolver uma nova funcionalidade sobre o mesmo domínio. Todas as alterações devem ser localizadas em um único serviço.

A desvantagem dessa arquitetura é que à medida que o número de serviços aumenta, se torna difícil o gerenciamento da aplicação.

(18)

2.2.4 Arquitetura de micro frontend

A Figura 7 mostra a arquitetura de micro frontend em conjunto com a arquitetura de micro serviços. Ela traz a ideia da arquitetura de micro serviços aplicado ao frontend e que cada componente de interface e usuário possa ser um projeto separado, com suas próprias dependências, estrutura e equipe de desenvolvedores. “Micro frontends é uma tendência de arquitetura, liderada pelo movimento em direção à arquitetura de micro serviços para o sistema backend.” (KUMAR, 2019).

Figura 7 - Arquitetura de micro frontend

(19)

A arquitetura conta com a aplicação principal que utiliza micro aplicações em sua composição, compartilha dos mesmos princípios da arquitetura de micro serviços, mas aplicado ao frontend.

2.3 Web Components

Com web components é possível implementar a arquitetura de micro frontend na web. “Um componente é uma parte isolada da interface do usuário com uma única responsabilidade.” (RYLAN, 2018). Muitos frameworks modernos utilizam o conceito de web components como Angular, React e Vue.js. Web components ajudam a resolver problemas de fragmentação e oferece reusabilidade para utilizar em qualquer projeto web.

Web components consiste em três tecnologias separadas que são usadas juntas:

• Custom Elements: permite a criação de novos componentes HTML. Enquanto o HTML provê alguns componentes primitivos, em cenários de aplicações reais se faz necessário componentes mais customizáveis de acordo com o projeto.

• Shadow Document Object Model (DOM): faz com que todos os elementos da árvore do componente sejam encapsulados em apenas um elemento.

• HTML Templates: É um mecanismo para comportar código HTML e não é processado imediatamente quando uma página é carregada, mas pode ser instanciado posteriormente em tempo de execução usando JavaScript.

2.3.1 Elemento iFrame

iFrame é um elemento do HTML que viabiliza incluir outro documento HTML, sendo possível incorporar outra página da web na página em que o iFrame é utilizado e pode ser incluído em qualquer parte do layout. Na Figura 8 é apresentado um exemplo de uso onde a página index.html utiliza o iFrame que inclui o arquivo

(20)

home.html. Pelo fato do iFrame ser uma tag HTML é possível estilizar através do CSS e redimensionar o iFrame para se adequar a página principal (index.html).

Figura 8 - Exemplo de funcionamento do iFrame

Em conjunto com web components, é possível encapsular um iFrame contendo uma página web dentro de um web component, e desta forma utilizar como uma tag personalizada do HTML.

2.4 Arquitetura REST

REST é uma arquitetura de software, o termo foi criado por Roy Fielding em sua tese de doutorado, REST considera cada aplicação web como um conjunto de recursos, que representa um estado particular de uma aplicação. Os recursos individuais são identificados na requisição pela Uniform Resource Identifier (URI) e é possível disponibilizar mais endereços, um por operação representado na Figura 9.

Figura 9 - Tipos, operações e endereços em uma arquitetura REST

Fonte: SILVEIRA, 2011.

“REST pode ser alcançado através do protocolo HyperText Transfer Protocol (HTTP) e representações com suporte a hipermídia, mas poderia ser utilizado outra pilha de tecnologias com as mesmas características” (SILVEIRA, 2011). Cada tipo de

(21)

dado é considerado um recurso, que é acessado e manipulado através de suas representações. Um exemplo seria o recurso compra, que pode ser acessado pela URI http://exemplo.com.br/compra/159 através da operação GET e representado por um JavaScript Object Notation (JSON).

“A adoção desta arquitetura junto a outras características, como uso de uma interface uniforme, stateless, navegação entre seus recursos e estados através de controles como os de hipermídia, caracteriza uma arquitetura REST.” (SILVEIRA, 2011).

2.5 Framework Vue.js e Vuetify.js

“Vue.js é um framework baseado em componentes reativos, usado especialmente para criar interfaces web, na maioria das vezes chamadas de Single Page Application (SPA) ou aplicações de página única, com somente um arquivo HTML.” (SCHMITZ; PEDRINHA, 2017)

O Vue.js conta com o Vue Command Line Interface (CLI) que de acordo com a documentação, visa ser a linha de base de ferramentas padrão para o ecossistema Vue.js. Garante que as várias ferramentas de construção funcionem perfeitamente em conjunto com padrões razoáveis para que seja possível focar no desenvolvimento do aplicativo e não em configurações. O Vue CLI também conta com plugins que facilita o desenvolvimento de aplicações PWA.

Vuetify.js é um framework para o Vue.js e oferece diversos componentes de interface como botões, campos de formulário e vários outros, útil para o desenvolvimento de sites e sistemas de forma rápida e otimizada oferecendo recursos de responsividade.

2.6 Servidor de aplicação Node.js

O Node.js é um ambiente de execução do JavaScript no servidor, deste modo, é possível criar aplicações JavaScript que não dependem do navegador de internet e é baseado na V8 que é a máquina virtual JavaScript desenvolvida pela Google e utilizada no navegador de internet Google Chrome. Com Node.js é possível

(22)

desenvolver aplicações que serão executadas no backend e irão responder requisições do frontend seguindo a arquitetura REST, essas aplicações também são chamadas de web services.

Node.js funciona de forma assíncrona que trabalha em uma única thread de execução, por ser assíncrono, cada requisição não bloqueia o processo, fazendo com que seja atendido várias requisições em paralelo.

O Node.js tem como característica a programação orientada a eventos, utilizando de I/O assíncrono para garantir que não tenha bloqueios em sua thread, pois todos os processos são executados utilizando um único processo, fazendo com que o consumo de memória alocado por requisição seja menor. (SCHROEDER; SANTOS, 2015).

O Node.js conta com várias bibliotecas que podem ser usadas para facilitar o desenvolvimento e aumentar a produtividade, dentre elas estão o Express.js e Socket.IO.

2.7 Banco de dados MongoDB

O MongoDB é um banco de dados de documentos de código aberto, projetado para facilitar o desenvolvimento e escalabilidade. Está na categoria de NoSQL, esse tipo de banco de dados não usa o Structured Query Language (SQL) para realizar busca no banco como em um banco relacional.

Os bancos de dados não relacional não possui entidades e relacionamentos como nos bancos tradicionais. Existem diversos tipos de banco de dados não relacional, classificados de acordo com a organização dos dados, diferente dos relacionais que usam tabelas com linhas e colunas para armazenar os dados.

(23)

3 DESENVOLVIMENTO

Este capítulo apresenta aspectos essenciais da aplicação como a arquitetura, hospedagem e funcionalidade. O nome da aplicação foi definido como mischen.

3.1 Arquitetura da Aplicação

Na Figura 10 é apresentada a arquitetura da aplicação principal. O servidor mischen-server é responsável por operações como autenticação, cadastro de novo usuário, obtenção da lista de aplicativos com base na localização do usuário, pesquisa pelo nome ou por tipo do estabelecimento, aplicativos favoritos etc. Para persistência dos dados é utilizado o banco de dados mischen-db.

Figura 10 - Arquitetura da aplicação principal

Ao abrir uma aplicação de algum estabelecimento, o mischen-web realiza uma requisição HTTP ao servidor mischen-server-apps solicitando o arquivo fonte da aplicação como mostra a Figura 11.

Figura 11 - Requisição ao servidor mischen-server-apps

Ao receber o arquivo fonte da aplicação, mischen-web instancia e apresenta a aplicação ao usuário. A aplicação do estabelecimento pode acessar um servidor próprio para realizar suas operações conforme mostra a Figura 12.

(24)

Figura 12 - Instanciando aplicativo do estabelecimento

3.2 Hospedagem

Para hospedagem das aplicações foi utilizado a plataforma Heroku que conta com uma versão grátis com vários recursos. Heroku é uma plataforma como serviço com foco na aplicação e componentes de infraestrutura.

No painel principal (Figura 13) é possível visualizar as aplicações e a região em que estão hospedados.

Figura 13 - Heroku: Painel principal

(25)

O heroku conta com um painel para adicionar variáveis de ambiente, a figura abaixo mostra as variáveis de conexão com o banco de dados, desta forma, não deixa informações sensíveis no repositório, somente no servidor.

Figura 14 - Heroku: Variáveis de ambiente

Fonte: Heroku.com

A plataforma heroku também oferece o deploy automático em conjunto com o repositório de versionamento github, habilitando o deploy automático para a branch master do projeto, ao enviar um commit para o repositório remoto o heroku faz o deploy da aplicação.

Para hospedagem do banco de dados foi utilizado o MongoDB Cloud, que conta com a versão grátis de até 512 MB de armazenamento e suporte à criação de vários bancos de dados.

3.3 Aplicação

Este tópico tem como objetivo apresentar o aplicativo e suas funcionalidades.

3.3.1 Acesso

O acesso da aplicação pode ser feito pelo link https://mischen-web.herokuapp.com, ao acessar será redirecionado para a tela de login (Figura 15),

(26)

por ter suporte ao PWA é exibida uma opção de adicionar o atalho da aplicação na área de trabalho do dispositivo.

Figura 15 - Tela de autenticação

Na figura 16 é possível ver o atalho adicionado na área de trabalho do dispositivo, se parecendo mais com um aplicativo nativo do dispositivo. Desta forma não é necessário abrir o navegador para acessar a aplicação, melhorando a usabilidade para o usuário.

(27)

Figura 16 - Área de trabalho do dispositivo

3.3.2 Cadastro

O cadastro (Figura 17) é feito de forma simples, sendo necessário inserir o nome, email e senha.

(28)

Figura 17 - Tela de cadastro

3.3.3 Tela inicial

Ao realizar o login, o usuário é direcionado a tela principal (Figura 18). Nesta tela, são exibidos os aplicativos dos estabelecimentos de acordo com a localização do usuário em uma área pré-definida, o valor padrão é de 200 metros. Cada card representa uma aplicação de algum estabelecimento e tem as opções de marcar como favorito e acessar a aplicação.

É possível buscar os aplicativos pelo nome e tipo do estabelecimento que inclui restaurante, bar, padaria, mercado, loja e shopping. Ao realizar a pesquisa, a localização do usuário não é considerada, trazendo todas as aplicações que esteja de acordo com os parâmetros da pesquisa.

(29)

Figura 18 - Tela inicial

3.3.4 Tela de envio do aplicativo

Essa tela possibilita o usuário cadastrar um aplicativo em três etapas, a primeira etapa (Figura 19) é necessário informar o nome do aplicativo, uma descrição e o tipo de aplicativo.

(30)

Figura 19 - Tela de envio do aplicativo: Informações

Na segunda etapa (Figura 20), informa-se a localização do estabelecimento que esse aplicativo representa clicando no mapa. A localização do estabelecimento é representada pela marcação roxa e a do usuário pela marcação vermelha.

(31)

Figura 20 - Tela de envio do aplicativo: Localização

Na terceira etapa (Figura 21), informa-se a localização do código fonte do aplicativo através de um link HTTP que contém a página HTML da aplicação.

(32)

Figura 21 - Tela de envio do aplicativo: Código fonte

Também é possível enviar o arquivo no formato zip do código fonte marcando a opção “Upload pelo arquivo do código fonte (zip)”. Clicando no input de seleção, irá abrir o explorador de arquivos do dispositivo para selecionar o arquivo, deve conter o arquivo index.html na raiz do arquivo zipado para que seja possível apresentar a aplicação ao usuário.

3.3.5 Tela de favoritos

A tela de favoritos (Figura 22) exibe todos os aplicativos marcado como favorito pelo usuário, facilitando o acesso aos aplicativos mais usados.

(33)

Figura 22 - Tela de favoritos

3.3.6 Tela do mapa

Esta tela (Figura 23) fornece uma visão dos aplicativos próximos ao usuário através do mapa. Os aplicativos são exibidos dentro de uma área em metros definida pelo usuário. O mapa é obtido através de uma Application Programming Interface (API) fornecida pela plataforma Google Maps e permite a modificação do mapa usando camadas e estilos.

(34)

Figura 23 - Tela do mapa

3.3.7 Tela de configuração

Na tela de configuração (Figura 24), é possível alterar o valor da área de busca dos aplicativos.

(35)

Figura 24 - Tela de configuração

3.3.8 Aplicativo de demonstração

O aplicativo sanduba (Figura 25) demostra o uso e apresentação do aplicativo de um estabelecimento fictício. Este aplicativo pode ser acessado de forma externa pelo link https://azusguia.github.io/sanduba-web.

(36)

Figura 25 - Aplicativo de demonstração: Tela inicial

O aplicativo sanduba utiliza servidor e banco de dados próprio, a Figura 26 apresenta a opção “Promoções”, na qual é feito uma requisição ao servidor sanduba-server solicitando a lista de itens em promoção, o frontend que é o sanduba-web fica responsável por apresentar essas informações ao usuário.

(37)

Figura 26 - Aplicativo de demonstração: Tela de promoções

(38)

CONSIDERAÇÕES FINAIS

Muitos estabelecimentos utilizam algum tipo de serviço digital para oferecer seus serviços aos clientes, seja por meio de um aplicativo para dispositivo móvel ou página web. O trabalho aqui apresentado propôs o desenvolvimento de um aplicativo com suporte a dispositivos móveis que visa facilitar o acesso as aplicações de estabelecimentos próximos ao usuário através do GPS, não sendo necessário instalar esse aplicativo no dispositivo ou procurar por essa aplicação no navegador de internet, facilitando a interação entre o usuário e o estabelecimento.

O uso da arquitetura de micro frontend foi essencial para o desenvolvimento do aplicativo e só foi possível com a tecnologia web components. Desenvolver a aplicação usando tecnologias web em conjunto com o framework Vue.js possibilitou integrar o PWA de forma simples. O Vuetify.js ofereceu componentes de layout completos, melhorando a usabilidade nos dispositivos móveis se parecendo mais com aplicações nativas. A plataforma Heroku permitiu a hospedagem das aplicações de forma gratuita e com funcionalidades importantes que foi usado no projeto, como criação de variáveis de ambiente e deploy automático. Para hospedagem do banco de dados a plataforma MongoDB Cloud foi utilizado e apresentou um bom desempenho.

Os conhecimentos adquiridos na faculdade e no ambiente de trabalho foram fundamentais para a realização dessa pesquisa e para o desenvolvimento da aplicação. Os objetivos propostos foram atendidos e os resultados obtidos foram alcançados, conforme o esperado.

A partir da aplicação desenvolvida, as melhorias sugeridas para os trabalhos futuros são:

• Oferecer uma opção de criar um aplicativo a partir de um template de acordo com o tipo do estabelecimento.

• Criar um sistema de avaliação para classificar o estabelecimento melhorando o ranqueamento e a qualidade do serviço.

(39)

• Permitir autenticação com outras plataformas como Facebook e Google, facilitando o cadastro e acesso ao aplicativo.

(40)

REFERENCIAS

ATER, Tal. Building Progressive Web Apps. O’ Reilly Media Inc, 2017. DIOGO, José. A evolução das arquiteturas monolíticas para as arquiteturas baseadas em microserviços. 2018.

Documentação Vue CLI. Disponível em: <https://cli.vuejs.org/guide/>. Acesso em: 17 nov. 2020.

GAUNT, Matt. Service Workers: An Introduction. Disponível em: <

https://developers.google.com/web/fundamentals/primers/service-workers>. Acesso em: 17 nov. 2020.

KUMAR, Ajay. Micro Frontends Architecture. Amazon.com Services LLC, 2019. Progressive Web Apps (PWA): Source Materials. Disponível em:

<https://smashingideas.com/pwa-statistics/>. Acesso em: 16 nov. 2020.

RYLAN, Cory. Web Component Essentials: An introduction to creating reusable user interfaces with Web Components. Amazon.com Services LLC, 2018.

SCHMITZ, Daniel; PEDRINHA, Daniel. Vue.js na prática. Leanpub, 2017.

SCHROEDER, Ricardo; SANTOS, Fernando. Arquitetura e Testes de Serviços Web de Alto Desempenho com Node.JS e MongoDB. Universidade do Estado de Santa Catarina – UDESC. 2015.

SILVEIRA, Paulo. Introdução à arquitetura e design de software: Uma visão sobre a plataforma java. Elsevier, 2011.