CENTRO ESTADUAL DE EDUCAÇÃO TECNOLÓGICA PAULA SOUZA

Transcrição

1 CENTRO ESTADUAL DE EDUCAÇÃO TECNOLÓGICA PAULA SOUZA FACULDADE DE TECNOLOGIA DE LINS PROF. ANTÔNIO SEABRA CURSO SUPERIOR DE TECNOLOGIA COM ÊNFASE EM BANCO DE DADOS BRUNO HENRIQUE SANCHES MELIS APLICATIVO MÓVEL PARA PEDIDO E ENTREGA DE PIZZAS LINS/SP 2º SEMESTRE/2014

2 CENTRO ESTADUAL DE EDUCAÇÃO TECNOLÓGICA PAULA SOUZA FACULDADE DE TECNOLOGIA DE LINS PROF. ANTÔNIO SEABRA CURSO SUPERIOR DE TECNOLOGIA COM ÊNFASE EM BANCO DE DADOS BRUNO HENRIQUE SANCHES MELIS APLICATIVO MÓVEL PARA PEDIDO E ENTREGA DE PIZZAS Trabalho de Conclusão de Curso apresentado à Faculdade de Tecnologia de Lins para a obtenção do título de Tecnólogo em Banco de Dados. Orientador: Prof. Dr. Paulo Augusto Nardi LINS/SP 2º SEMESTRE/2014

3 M523a Melis, Bruno Henrique Sanches Aplicativo móvel para pedido e entrega de pizzas / Bruno Henrique Sanches Melis Lins, f : il. Monografia (Trabalho de Conclusão de Curso de Tecnologia em Banco de Dados) Faculdade de Tecnologia de Lins Professor Antonio Seabra, Orientador: Prof. Dr. Paulo Augusto Nardi 1.Pizzaria. 2.Entregas. 3.Pedidos. 4.Phonegap. I.Nardi, Paulo Augusto. II.Faculdade de Tecnologia de Lins Professor Antonio Seabra. III.Título. CDD Ficha elaboradora pela Biblioteca da Faculdade de Tecnologia de Lins

4 BRUNO HENRIQUE SANCHES MELIS APLICATIVO MOBILE PARA PEDIDO E ENTREGA DE PIZZAS Trabalho de Conclusão de Curso apresentado à faculdade de Tecnologia de Lins, como parte dos requisitos necessários para obtenção do título de Tecnólogo em Banco de Dados sob orientação do Prof. Dr. Paulo Augusto Nardi. Data de aprovação: / / Orientador (Prof. Dr. Paulo Augusto Nardi) Examinador 1 Examinador 2

5 Aos meus pais e aos meus pastores, que sempre estiveram presentes me apoiando e me incentivando. Aos meus colegas de classe que me auxiliaram e me deram toda ajuda necessária.

6 AGRADECIMENTOS A Deus, que proporcionou essa oportunidade de crescimento e me capacitou para a conclusão de mais essa etapa em minha vida. Aos professores Mário Pardo, Rodrigo Ayres, Adriana de Bortoli e Luciane Noronha pelo auxílio e apoio, e a toda equipe de professores que fizeram parte da minha formação. Agradeço especialmente meu orientador Professor Doutor Paulo Augusto Nardi, que me proporcionou total ajuda para o desenvolvimento desse projeto. Aos meus colegas de turma e amigos, que compartilharam seus conhecimentos e estiveram dispostos a oferecer ajuda necessária. Aos amigos Ana, Thiago, Erica, Hêrika, Karoline, Christian, Denis e Victor, que sempre estiveram ao meu lado. Certamente lembrarei de todos os momentos que passamos juntos, e de todo o conhecimento adquirido no decorrer dessa jornada.

7 RESUMO Este trabalho tem como objetivo o desenvolvimento de um sistema, que juntamente com um aplicativo de celular, proporcione o controle de pedidos e entrega de uma determinada pizzaria. Desta forma, o cliente pode realizar o pedido através do seu smartphone ou tablet, onde são disponibilizadas as informações dos produtos, juntamente com o rastreamento da entrega. Foram abordados os problemas recorrentes da pizzaria, juntamente com a análise do mercado de delivery e mobile, que apontam dados sobre o crescimento de entregas em domicílio e a popularização de dispositivos que utilizam o sistema operacional Android. Na implementação, se destaca o uso do framework Phonegap, para o desenvolvimento do aplicativo mobile, combinando o uso da linguagem de marcação HTML, com JavaScript e CSS. Para o armazenamento dos dados, foi utilizado o banco de dados PostgreSQL, que oferece um conjunto de ferramentas gratuito. Palavras-chave: pizzaria, entregas, pedidos, Phonegap.

8 ABSTRACT This work has objective to development a system, together a Mobile application, possibiliting to control orders and deliveries from a pizzeria previously establish. This way, the client can make an order with your own smartphone or tablet, where are available to see the product informations, in addiction to track the order. There were focus on existential problems about a pizzeria together the analyze of Mobile delivery applications market, where was show the grow up of delivery services and the common uses of the operacional system Android. On implant, it is detachable, the use of framework named phonegap, to development Mobile applications, also, using Html, javascript and css encoding. Was used to storage, the PostgreSQL database, which offer a set of free tools. keywords: pizzeria, delivery, order, Phonegap

9 LISTA DE ILUSTRAÇÕES Figura 1.1 Venda de Smartphones no Brasil Figura 2.1 Sintaxe de objeto JSON Figura 2.2 Esquema de funcionamento do Phonegap Figura 2.3 Acessibilidade a APis nativas disponíveis no Phonegap Figura 2.4 Diagramas Descritos pela UML Figura 2.5 Diagrama de Caso de Uso Figura 2.6 Diagrama de Classe Figura 2.7 Diagrama de Atividade. Manter Cliente Figura 2.8 Diagrama de Sequência. Manter Cliente Figura 2.9 MVC. Manter Cliente Figura 2.10 Diagrama de Atividade. Realizar Pedido Figura 2.11 Diagrama de Sequência. Realizar Pedido Figura 2.12 MVC. Realizar Pedido Figura 2.13 Diagrama de Atividade. Consultar Pedidos Anteriores Figura 2.14 Diagrama de Sequência. Consultar Pedidos Anteriores Figura 2.15 MVC. Consultar Pedidos Anteriores Figura 2.16 Diagrama de Atividade. Manter Produto Figura 2.17 Diagrama de Sequência. Manter Produto Figura 2.18 MVC. Manter Produto Figura 2.19 Diagrama de Atividade. Realizar Entrega Figura 2.20 Diagrama de Sequência. Realizar Entrega Figura 2.21 MVC. Realizar Entrega Figura 2.22 Mapeamento Relacional Figura 3.1 Tela de Login Figura 3.2 Tela Principal Figura 3.3 Controle de Entrega Figura 3.4 Confirmação de Pedido Figura 3.5 Confirmação de Entrega Figura 3.6 Tela de Cadastro de Produto Figura 3.7 Tela de Cadastro de Ingrediente Figura 3.8 Tela de Cadastro de Funcionário... 45

10 Figura 3.9 Tela de Cadastro de Cargo Figura 3.10 Tela Inicial Figura 3.11 Menu Principal Figura 3.12 Cardápio Figura 3.13 Meu Pedido Figura 3.14 Endereço Figura 3.15 Entrega Figura 3.16 Pedidos Anteriores Figura 3.17 Alterar Conta... 49

11 LISTA DE QUADROS Quadro Situação da empresa e metas a serem alcançadas Quadro Atividades desenvolvidas por pessoa na utilização do sistema... 18

12 LISTA DE SIGLAS AJAX - Asynchronous JavaScript and XML API - Application Programming Interface CSS - Cascading Style Sheets DOM - Document Object Model HTML - HiperText Markup Language IDE - Integrated Development Environment JSON - JavaScript Object Notation MVC - Model View Controller OMG - Object Management Group SGBD - Sistema Gerenciador de Banco de Dados SQL - Structured Query Language SQL - Structured Query Language UML - Unified Modeling Language XML - Xtensible Markup Language

13 SUMÁRIO INTRODUÇÃO ANÁLISE DE NEGÓCIO PROBLEMAS ANÁLISE DE MERCADO Mercado delivery Mercado mobile PAPÉIS DOS ENVOLVIDOS FUNCIONAMENTO DA EMPRESA VISÃO GERAL DO PRODUTO Características do sistema Requisitos FUNDAMENTAÇÃO TEÓRICA HTML CSS JQUERY JSON GSON AJAX PHONEGAP API DO GOOGLE MAPS POSTGRESQL UNIFIED MODELING LANGUAGE (ULM) ANÁLISE DE REQUISITOS Diagrama de Caso de Uso Diagrama de Classe Especificações de Histórias e Diagramas Manter Cliente Realizar Pedido Consultar Pedidos Anteriores Rastrear Entrega... 35

14 Manter Produto Realizar Entrega Banco de Dados IMPLEMENTAÇÃO APLICAÇÃO WEB Tela de Login Tela Principal Controle de Entrega Cadastros APLICATIVO CONCLUSÃO REFERÊNCIA BIBLIOGRÁFICA... 51

15 14 INTRODUÇÃO O sistema de delivery é um serviço de entrega em domicílio, no qual utiliza-se meios de comunicação como telefone e internet para a entrega dos pedidos dos clientes. O benefício de adotar esse sistema de entrega em domicílio é a fidelização do consumidor, que pode trazer um crescimento nas vendas (SALZANO, 2010). Várias franquias de fast food e restaurantes utilizam sistemas de delivery para realizar suas entregas, tais como Pizza Hut, McDonald s e Baby's Gula. Devido à comodidade e facilidade de fazer pedidos, sem a necessidade do cliente se deslocar até o estabelecimento, o mercado de delivery cresceu consideravelmente nos últimos anos no Brasil. E, como consequência desse crescimento, foram movimentados nesse setor R$ 191,8 milhões em 2012, gerandose um aumento de 10% em relação a 2011 (Estadão PME, 2013). No método tradicional de delivery, é utilizado o telefone como o meio para realizar o pedido. Tal método ocasionalmente gera problemas como telefones ocupados, pedidos anotados incorretamente, demora no atendimento e estimativa imprecisa do tempo que levará para um pedido ser entregue. Em 2014, foram registradas 1975 reclamações para a franquia Habibs envolvendo pedidos incorretos, problemas no atendimento e demora na entrega. (RECLAME AQUI, 2014) Dado o crescimento deste sistema de entrega, os benefícios ao consumidor anteriormente descritos e os inconvenientes do meio tradicional de comunicação, este projeto tem como objetivo o desenvolvimento de um aplicativo para realização de pedidos por meio de dispositivos móveis. Espera-se, com isso, intensificar a agilidade do processo de entrega. Ainda, pretende-se reduzir os erros provenientes de anotações incorretas, além da promoção do rastreamento do pedido tanto para o controle do estabelecimento como para o conforto do cliente. Para tal, foram utilizadas as seguintes tecnologias: (1) Jquery: biblioteca Javascript usada na manipulação de documentos HTML, manipulação de eventos e Asynchronous Javascript and XML (AJAX); (2) JSON: formato de arquivo leve para troca de informações integrado ao AJAX; (3) AJAX: combinação de tecnologias como Javascript e XML (Extensible Markup Language), capazes de fazer solicitações assíncronas com o servidor; (4) Phonegap: framework livre e de código aberto para desenvolvimento de aplicações móveis, utilizando Application

16 15 Programming Interface (API)s web padronizadas, como o HTML5; (5) API do Google Maps: permite incorporar o Google Maps em páginas web, oferecendo utilitários para a manipulação de mapas. A metodologia utilizada para o desenvolvimento deste trabalho baseia-se no levantamento de requisitos coletados da pizzaria, além de um estudo de formas para fidelização dos clientes, para melhor embasamento no desenvolvimento do trabalho. O trabalho é estruturado em quatro capítulos. No primeiro capítulo, encontrase os problemas dos tradicionais métodos de delivery e as formas de solução para esses problemas, juntamente com o levantamento de requisitos, além de se abordar um estudo sobre o mercado de delivery e mobile. No segundo capítulo, são apresentadas as tecnologias e linguagens utilizadas no desenvolvimento do projeto, como também as análises e os diagramas utilizados. No terceiro, são apresentados os detalhes do desenvolvimento da aplicação e no quarto capitulo, é apresentada a conclusão, que oferece os resultados alcançados com o desenvolvimento do trabalho.

17 16 1 ANÁLISE DE NEGÓCIO Neste capítulo, são abordados os principais problemas da pizzaria, bem como as possíveis soluções para saná-los com a utilização do sistema desenvolvido para a empresa. É ainda apresentado o papel de cada usuário na utilização do sistema. 1.1 PROBLEMAS Durante o processo diário de entregas, ocorrem ocasionalmente problemas de pedidos anotados incorretamente e atrasos na entrega dos mesmos. Devido à necessidade de agilização, controle mais preciso das entregas e melhor conforto ao cliente, foi proposto o desenvolvimento de um sistema mobile, juntamente com um sistema web, voltado para o gerenciamento de pedidos e entregas. A seguir é apresentado o quadro que relaciona a situação atual da empresa e as metas que devem ser alcançadas com o uso do sistema. Quadro Situação da empresa e metas a serem alcançadas Situação Atual Metas Pedidos realizados por telefone Reduzir o uso dos telefones para fins de pedidos dos clientes, já que os mesmos ocasionalmente estão ocupados. Anotação de pedidos feitos manualmente Com a utilização do sistema, haverá uma redução de pedidos anotados incorretamente pelos atendentes, dessa forma tem-se a disponibilização de funcionários para outras tarefas. Falta de controle de clientes O sistema proporcionará à empresa um controle de seus clientes, para analisar melhor suas preferências e assim estreitar a relação com o cliente. Estimativa imprecisa de entregas Proporcionar ao cliente melhor estimativa de tempo de entrega, por meio da geolocalização do seu pedido.

18 17 Falta de informação ao cliente Fonte: Elaborado pelo autor, 2014 Reduzir perguntas ao atendente sobre quais os itens do cardápio, já que o mesmo será disponibilizado a partir do aplicativo, assim o cliente será melhor informado sobre os sabores de pizza. 1.2 ANÁLISE DE MERCADO Nesta subseção são apresentadas as características e avanços do mercado mobile e de entregas em domicílio, que o sistema desenvolvido atua Mercado delivery O mercado de delivery vem se desenvolvendo ao longo dos anos. Estimativas revelam que o delivery brasileiro movimentado na internet, crescerá cerca de 100% até 2015 (FIORAVANTE, 2013). O autor ainda completa dizendo que Os consumidores podem otimizar o tempo comparando cardápios, pratos e preços em um único canal, seja na web ou nos aplicativo móveis Mercado mobile Pesquisas da IDC (empresa de consultoria nas indústrias de tecnologia da informação, telecomunicações, e mercados de consumo em massa de tecnologia), revelam que o mercado de smartphones cresceu rapidamente no Brasil, e ultrapassou a venda de celulares comuns com 54% contra 46% em unidades vendidas em Obteve também um crescimento de 110% no segundo trimestre em relação ao mesmo período de 2012 (UOL, 2013). Juntamente com esse crescimento, o Sistema Operacional Android se popularizou nos smartphones, como mostrado na Figura 1.1:

19 18 Figura 1.1 Venda de Smartphones no Brasil Fonte: IDC, 2011 Com esse crescimento, é possível observar que o sistema operacional Android tem se expandido no mercado de smartphones. Segundo o IDC, em 2013, ele alcançou 90% dos aparelhos vendidos (UOL, 2013). Essa evolução ocorre devido às várias funções e recursos que o sistema oferece, juntamente com sua portabilidade, podendo funcionar em diversos modelos de smartphones. 1.3 PAPÉIS DOS ENVOLVIDOS Abaixo se observa os papéis das pessoas envolvidas no processo de pedido e entrega da pizzaria. Quadro Atividades desenvolvidas por pessoa na utilização do sistema Pessoa Atividades Cliente a) Realizar o cadastro de cliente para o uso do aplicativo b) Realizar o pedido c) Realizar consulta de tempo estimado de entrega d) Realizar consulta de pedidos feitos anteriormente Atendente a) Responsável por receber os pedidos a partir do sistema b) Responsável solicitar a produção do pedido c) Responsável por atualizar o status do pedido quando o mesmo sair da pizzaria Gerente d) Responsável por manter o controle de funcionários e cargos Fonte: Elaborado pelo autor, 2014

20 FUNCIONAMENTO DA EMPRESA A pizzaria conta com atendentes, cozinheiros e entregadores que trabalham de segunda a sábado. O controle dos pedidos é feito por telefone que registra o nome do cliente, o endereço, o telefone e a forma de pagamento. É papel do sistema desenvolvido, gerenciar de forma segura e ágil o processo de entrega. 1.5 VISÃO GERAL DO PRODUTO O aplicativo conta com o histórico dos últimos pedidos feitos, além disso é possível utilizá-lo como forma de realizar novas solicitações. Conta também com o cardápio dos produtos, a fim de informar aos clientes os sabores, preços e ingredientes utilizados. Possui, também, a opção do usuário cadastrar endereços de entrega, que servirão de alternativa para o usuário selecionar o destinatário. Ao enviar o pedido, o atendente recebe a solicitação no sistema da pizzaria e realiza os passos para o envio do produto solicitado. O cliente ainda pode acompanhar seu pedido por meio do aplicativo, de forma, a saber, se o mesmo já saiu do estabelecimento e qual seu tempo estimado de entrega Características do sistema Com o aplicativo, espera-se que os clientes tenham mais conforto e segurança ao realizarem seus pedidos, obtendo-se acesso rápido às informações dos produtos e, como consequência, promover uma melhor satisfação. O aplicativo possui as seguintes funcionalidades: (1) Cadastro de cliente: permite o usuário se cadastrar para utilizar o aplicativo; (2) Cadastro de endereços de entrega: possibilidade de manter endereços dos clientes para entrega dos produtos; (3) Histórico de pedidos: possibilidade de visualizar pedidos anteriores; (4) Rastreamento do pedido: permite que o cliente possa visualizar o momento em que o pedido será entregue. Com o sistema web, é possível manter o cadastro de produto, ingrediente, funcionário, cargo e realizar o controle de entregas.

21 Requisitos Não haverá a necessidade de aquisição de novos equipamentos, visto que a pizzaria já conta com uma boa estrutura de computadores. Será preciso o uso de um Sistema de Gerenciamento de Banco de Dados (SGBD), com a opção de utilizar-se do PostgreSQL que é um conjunto de ferramentas gratuito. Opta-se também pelo uso do sistema operacional Windows, porém o sistema pode ser utilizado em outra plataforma. Quanto ao aplicativo, será disponibilizado para dispositivos com Sistema Operacional Android e haverá necessidade de conexão com a internet. Neste capítulo, foram descritos os problemas recorrentes de pedidos realizados manualmente e a proposta de solução. No próximo capítulo, será apresentada a fundamentação teórica, bem como a análise do projeto.

22 21 2 FUNDAMENTAÇÃO TEÓRICA Neste capítulo, são apresentadas as tecnologias e os conceitos que foram utilizados no desenvolvimento do aplicativo. 2.1 HTML5 É a versão mais recente do HiperText Markup Language (HTML), concebido para proporcionar um conteúdo mais rico em relação a seu antecessor HTML4. Com a inclusão de novas tags, que são as marcações que indicam ao navegador como o documento deve se comportar o HTML5 dispensa diversos plug-ins antes utilizados, por exemplo, player de vídeos (W3SCHOOLS, 2014). Possui suporte à animações, música, vídeo e ao CSS3, além de ser possível a construção de aplicações web complexas. Um de seus principais objetivos é facilitar a manipulação de elementos, que possibilitam o desenvolvedor modificar as características dos objetos, de maneira que seja transparente para o usuário final. (FERREIRA; EIS, 2014) 2.2 CSS Cascading Style Sheets (CSS) é um mecanismo simples para adicionar estilo, por exemplo, fontes, cores, espaçamento a documentos web (ETAMAD, 2014). É uma forma de estilização de páginas escritas em HTML ou XML. Ao longo de sua evolução, foi dividido em três níveis. A cada nível, melhorias foram realizadas e novos recursos adicionados. No nível um, são definidas as propriedades, valores, regras, e utilizam as especificações do CSS1. O CSS2 foi uma recomendação da W3C até que, ao ser disponibilizado, notaram-se várias falhas que foram corrigidas posteriormente no CSS2.1. (ETAMAD, 2011) No último nível, o CSS3, que é baseado no CSS2, houve mudanças significativas para a manipulação e transição visual dos elementos do HTML em relação ao seu antecessor. (EIS; FERREIRA, 2012) O CSS utiliza regras para a estilização de documentos. As regras são compostas por seletores e declarações. Declarações são compostas por propriedades e valores. As regras podem ser incorporadas ao documento por meio

23 de um documento externo com o formato CSS, ou inserido diretamente no documento com a tag <style> JQUERY JQuery é uma biblioteca de JavaScript, utilizada para manipulação de elementos HTML e animações para criação de páginas de qualidade. Os projetos que utilizam JQuery estão sob os termos da Licença MIT, que é uma licença de software livre, que possibilita utilizar qualquer projeto JQuery em qualquer outro projeto, desde que seja mantido o cabeçalho do autor. O JQuery disponibiliza algumas bibliotecas com objetivos específicos como o JQuery UI, que fornece um conjunto de efeitos, temas e widgets. Outra biblioteca JQuery é o Sizzle, que é um motor de seletores CSS implementados em Javascript. A biblioteca JQuery que foi utilizada neste projeto é o JQuery Mobile, que é uma interface baseada no HTML5, que utiliza a técnica do design responsivo. (JQUERY, 2014) Segundo Arrigoni(2013) Design Responsivo é uma técnica de estruturação HTML e CSS, que consiste em adaptar o site ao browser do usuário sem que seja necessário definir várias folhas de estilos específicas para cada resolução. Por este motivo, a integração do design responsivo ao JQuery Mobile torna o aplicativo acessível em grande parte dos smartphones e tablets, pois o layout se adequa em diferentes resoluções de tela. 2.4 JSON JavaScript Object Notation (JSON) é uma formatação leve de troca de dados, independente de linguagem, pois utiliza convenções familiares às linguagens C, C++, C#, Java, JavaScript, Perl, Python, entre outras (JSON, 2014). É utilizado para ser o mediador da aplicação com o banco de dados. Sua sintaxe para representar informações é definida por um nome e seu respectivo valor, sendo separados por dois pontos. Todo nome e valor que seja do tipo string deve possuir aspas, desta forma: nome : Bruno. O JSON possui três tipos básicos de valores: numéricos (inteiro ou real), booleanos, e string, como mostrado anteriormente. (GONÇALVES, 2012)

24 23 Segundo Gonçalves(2012), para a representação do tipo numérico, não se utiliza aspas no valor, desta forma: numero : 3, real : Ainda é possível construir outros tipos mais complexos que são arrays e objetos. Para delimitar um array, utiliza-se colchetes e os valores são separados por vírgula, como neste exemplo: [ RJ, SP, MG, ES ]. Para objetos, os blocos são delimitados por chaves, e podem conter múltiplos pares de nome e valor, arrays e outros objetos como mostrado na Figura 2.1. Figura 2.1 Sintaxe de objeto JSON Fonte: Elaborado pelo autor, GSON É uma biblioteca JavaScript utilizada para converter objetos Java em representação JSON. Também é possível converter uma cadeia de JSON para um objeto Java equivalente. (GSON,2014) A biblioteca foi utilizada no auxilio da necessidade de comunicar objetos em Java com funções JavaScript, como obter uma listagem de produtos, por exemplo. 2.6 AJAX Asynchronous JavaScript and XML (AJAX) utiliza HTML Document Object Model (DOM), XMLHttpRequest e CSS, além JavaScript e XML, como é descrito no próprio nome. É importante destacar que o AJAX não é uma linguagem de programação, mas sim um método de se programar em ambiente WEB (PAVANELLO, 2011). Tem o objetivo de trocar informações entre o cliente e o servidor de forma mais eficiente, em que são enviadas somente as informações desejadas, e sua resposta é apenas do que foi solicitado.

25 24 Segundo Pavanello (2011), o HTML DOM pode ser definido como um conjunto de regras que estabelece métodos de acesso e alteração, de modo dinâmico, de objetos HTML e fornece uma lista de eventos desses elementos e regras para utilizar esses eventos. As solicitações assíncronas do AJAX permitem que o usuário interaja com o sistema mesmo enquanto ocorre troca de informações com o cliente e servidor. O objeto responsável por essa troca é o XMLHttpRequest, e suas operações são realizadas por meio da programação JavaScript. 2.7 PHONEGAP Phonegap é um framework de desenvolvimento de código-aberto disponibilizado pela empresa Adobe Systems, que possibilita a criação de aplicativos multi-plataforma, sendo funcionais em ambiente online ou offline, que utiliza HTML5, Javascript e CSS, para as principais plataformas mobile hoje conhecidas como Android, IOS, Windows Phone, entre outras. Uma ferramenta multi-plataforma permite que o mesmo código possa ser executado em diferentes sistemas operacionais (JERN, 2014). É importante salientar que para este trabalho, o sistema operacional escolhido para geração do aplicativo é o Android. As páginas podem ser desenvolvidas com o auxilio de uma Integrated Development Environment (IDE). Para este trabalho a IDE escolhida foi o NetBeans para o desenvolvimento do sistema web, e a IDE Adobe Dreamweaver para o desenvolvimento do aplicativo mobile. Para que um aplicativo seja gerado com o Phonegap, as páginas são compactadas por meio de dos plug-ins Phonegap instalados, e enviados para um servidor na nuvem, de forma a gerar os aplicativos para as diferentes plataformas como mostrado na Figura 2.2.

26 25 Figura 2.2 Esquema de funcionamento do Phonegap O Phonegap também possibilita que recursos nativos do dispositivo sejam acessados pela aplicação. Para este trabalho foi utilizado o recurso de geolocalização. Na Figura 2.3 é mostrada a disponibilidade de acesso as APis nativas de cada plataforma. Figura 2.3 Acessibilidade a APis nativas disponíveis no Phonegap Fonte: Elaborada pelo autor, 2013

27 26 À esquerda da Figura 2.4, estão os recursos nativos que podem ser acessados e nas colunas seguintes estão as plataformas de sistemas operacionais mobile e a disponibilidade de acesso oferecida pelo Phonegap a cada recurso. 2.8 API DO GOOGLE MAPS A API do Google Maps permite a incorporação de mapas tanto em aplicações desktop quanto mobile. Com ela é possível manipular mapas e adicionar conteúdo aos mesmos (GOOGLE DEVELOPERS, 2013). Foi utilizada esta API no sistema instalado na pizzaria, para a localização e melhor visualização do endereço de entrega dos pedidos. Para a incorporação da API na aplicação, é preciso possuir uma chave que é obtida por meio de uma conta na Google. A utilização da API pode ser feita puramente com JavaScript, ou utilizar bibliotecas JQuery. 2.9 POSTGRESQL O PostgreSQL é um Sistema Gerenciador de Banco de Dados objetorelacional, que permite ao desenvolvedor integrar seus próprios tipos de dados e métodos ao banco de dados. Foi desenvolvido pelo Departamento de Ciência da Computação da Universidade da Califórnia em Berkeley, baseado no POSTGRES versão 4.2. Além de suportar grande parte do padrão Structured Query Language (SQL), oferece outras funcionalidades modernas tais como comandos complexos, chaves estrangeiras, gatilhos, visões, integridade transacional, controle de simultaneidade multiversão. Devido à sua licença aberta, o PostgreSQL pode ser utilizado, modificado e distribuído por qualquer pessoa para qualquer finalidade, seja particular, comercial ou acadêmica, livre de encargos. (POSTGRESQL, 2014) Um Sistema Gerenciador de Banco de Dados (SGDB) é um sistema para gerenciar dados armazenados em relações. Relação é um termo matemático para tabela. Cada tabela é uma coleção nomeada de linhas. Toda linha de uma tabela, possui o mesmo conjunto de colunas nomeadas, e cada coluna possui um tipo específico de dados. As tabelas são agrupadas em bancos de dados, e uma coleção

28 de bancos de dados gerenciados por uma única instância do servidor PostgreSQL forma um agrupamento de bancos de dados. (POSTGRESQL, 2014) UNIFIED MODELING LANGUAGE (ULM) A UML é uma linguagem criada para visualizar, especificar, construir e documentar os artefatos de um sistema de software (PIMENTEL, 2007). Adotada em 1997, passou a ser um padrão internacional pelo Object Management Group (OMG), que prevê um conjunto de diagramas e seus componentes, com notações e comportamentos bem definidos. Na Figura 2.4 são mostrados os diagramas que são descritos pela UML 2.0. Figura 2.4 Diagramas Descritos pela UML 2.0 Fonte: Pimentel, 2007 Observa-se que os diagramas são divididos em diagramas estruturais e comportamentais, e cada um com suas subseções. Para este trabalho foram desenvolvidos os diagramas de caso de uso, classes, atividades, sequência e Model View Controller (MVC).

29 ANÁLISE DE REQUISITOS Nesta subseção são apresentadas as histórias que envolvem a interação do usuário com o sistema, juntamente com as analises estruturais do projeto Diagrama de Caso de Uso Figura 2.5 Diagrama de Caso de Uso

30 Diagrama de Classe Figura 2.6 Diagrama de Classe Especificações de Histórias e Diagramas Nesta subseção são abordadas as interações do usuário com o sistema web e o aplicativo mobile, onde apresenta suas funcionalidades. Estão representados por meio dos diagramas de atividade, sequência e MVC, respectivamente Manter Cliente Para que o cliente tenha acesso as funcionalidades do aplicativo, é necessário que ele possua um cadastro no sistema. O cadastro é realizado por meio de um formulário com algumas informações essenciais para sua identificação.

31 30 Figura 2.7 Diagrama de Atividade. Manter Cliente Figura 2.8 Diagrama de Sequência. Manter Cliente

32 31 Figura 2.9 MVC. Manter Cliente Realizar Pedido A partir da lista de produtos apresentada, é possível selecionar os produtos desejados para realizar o pedido. Feito isso, o aplicativo disponibiliza as opções de endereço de entrega para finalizar o pedido.

33 Figura 2.10 Diagrama de Atividade. Realizar Pedido 32

34 33 Figura 2.11 Diagrama de Sequência. Realizar Pedido Figura 2.12 MVC. Realizar Pedido

35 Consultar Pedidos Anteriores O cliente pode obter uma listagem de seus pedidos feitos anteriormente, com a opção de consultar uma data especifica de pedido. Figura 2.13 Diagrama de Atividade. Consultar Pedidos Anteriores Figura 2.14 Diagrama de Sequência. Consultar Pedidos Anteriores

36 35 Figura 2.15 MVC. Consultar Pedidos Anteriores Rastrear Entrega O cliente recebe uma confirmação após o pedido ser enviado da pizzaria. Assim é possível a visualização do trajeto de entrega com sua respectiva hora prevista Manter Produto O funcionário pode adicionar produtos, e realizar a consulta, alteração e exclusão dos mesmos. Os controles de ingredientes, funcionário e cargo, seguem o mesmo padrão de estrutura, por este motivo não foram representados.

37 Figura 2.16 Diagrama de Atividade. Manter Produto 36

38 37 Figura 2.17 Diagrama de Sequência. Manter Produto Figura 2.18 MVC. Manter Produto

39 Realizar Entrega O sistema fornece uma lista com os pedidos do dia, e o funcionário pode confirmar a realização do pedido. Feita a confirmação, ao sair do estabelecimento, o funcionário seleciona o entregador e autoriza a entrega. Figura 2.19 Diagrama de Atividade. Realizar Entrega

40 39 Figura 2.20 Diagrama de Sequência. Realizar Entrega Figura 2.21 MVC. Realizar Entrega

41 Banco de Dados Nesta subseção é apresentado o diagrama de mapeamento para modelo relacional, para expressar a organização dos dados no projeto. Figura 2.22 Mapeamento Relacional

42 41 3 IMPLEMENTAÇÃO Neste capítulo, são apresentadas as interfaces da aplicação web e do aplicativo mobile. 3.1 APLICAÇÃO WEB É responsável pelo controle de funcionários, produtos e entregas, em que é possível consultar, cadastrar, alterar e excluir os controles Tela de Login Na Figura 3.1 é mostrada a tela inicial da aplicação com os campos e senha, para a validação de entrada no sistema. Figura 3.1 Tela de Login

43 Tela Principal Na Figura 3.2 é mostrada a tela principal do sistema, que conta com um menu lateral, que separa os cadastros, controles e a parte administrativa. Ao entrar no sistema, o funcionário visualiza primeiramente a tela de controle de entrega. Figura 3.2 Tela Principal Controle de Entrega Na Figura 3.3 é mostrada a tela para que sejam efetuadas as entregas a partir de cada pedido realizado no dia. Figura 3.3 Controle de Entrega Ao receber o pedido, o funcionário pode realizar a confirmação do recebimento como mostrado na Figura 3.4.

44 43 Figura 3.4 Confirmação de Pedido Para a confirmação de entrega, o funcionário informa o nome do entregador como mostrado na Figura 3.5. Figura 3.5 Confirmação de Entrega Cadastros As telas de cadastro possuem funcionamento similar, que separa em abas a consulta e o cadastro. Para uma consulta, é necessário selecionar uma opção de busca e informar no campo ao lado, o valor a ser buscado. Após a busca ser

45 realizada, o funcionário tem as opções de alteração e exclusão como mostrado na Figura Figura 3.6 Tela de Cadastro de Produto A Figura 3.7, Figura 3.8 e Figura 3.9 seguem o mesmo padrão da tela de cadastro de produto. Figura 3.7 Tela de Cadastro de Ingrediente

46 45 Figura 3.8 Tela de Cadastro de Funcionário Figura 3.9 Tela de Cadastro de Cargo 3.2 APLICATIVO A tela inicial do aplicativo solicita a inserção do usuário e senha do cliente, possibilitando também a criação de novos cliente como mostrado na Figura 3.10.

47 46 Figura 3.10 Tela Inicial A Figura 3.11 apresenta o menu principal do aplicativo, com suas funcionalidades. Figura 3.11 Menu Principal

48 Ao acessar o menu cadastro, o cliente tem a disponibilidade de escolher pizzas, pizzas doces e bebidas como mostrado na Figura Figura 3.12 Cardápio Após o cliente selecionar o produto desejado, o mesmo é redirecionado à tela do pedido, onde são exibidos todos os produtos selecionados, com seus respectivos valores e quantidade. É possível realizar alteração e exclusão de um produto incluso ao selecioná-lo. Ao selecionar a opção de alteração, o cliente pode alterar a quantidade desejada como mostrado na Figura Figura 3.13 Meu Pedido

49 48 Ao realizar o encerramento, o cliente seleciona o endereço de entrega, podendo realizar o cadastro de um novo endereço, e seleciona a opção de pagamento que pode ser em dinheiro ou cartão. Após o cliente informar o cep, o aplicativo faz a busca online do endereço, como mostrado na Figura Figura 3.14 Endereço Após a confirmação de entrega do funcionário, o cliente tem a disponibilidade de visualizar o tempo estimado para receber seu pedido, com base no endereço de partida da pizzaria e o endereço de entrega informado pelo cliente como mostrado na Figura3.15. Figura 3.15 Entrega

50 O cliente ainda pode visualizar os pedidos anteriores realizado por ele como mostrado na Figura Figura 3.16 Pedidos Anteriores Por fim, é possível realizar a alteração dos dados cadastrais do cliente como mostrado na Figura Figura 3.17 Alterar Conta Ao termino deste capítulo, foi relatado todo o processo de desenvolvimento do sistema web e do aplicativo, e a seguir são apresentadas as conclusões.

51 50 CONCLUSÃO Este trabalho teve como objetivo o desenvolvimento de um aplicativo de pedidos por meio de smartphones e tablets, juntamente com o sistema de entregas de uma pizzaria, fornecendo maior comodidade aos clientes, e melhor controle nos registros de pedidos da pizzaria. Para o desenvolvimento do aplicativo, foi utilizado o framework Phonegap, que faz uso de códigos HTML, CSS e JavaScript, para que sejam gerados aplicativos em diferentes plataformas mobile. Foi utilizada a biblioteca JQuery Mobile para o layout, que apesar de ser semelhante a biblioteca de desenvolvimento web, possui propriedades específicas para a utilização, que requereram pesquisas em sua documentação. Com o desenvolvimento do trabalho, notou-se que havia a possibilidade de implementação de novos módulos, que podem ser considerados como trabalhos futuros. São eles: adição de fotos das pizzas, utilização da localização atual do aparelho para escolha de endereço, rastreamento em tempo real do pedido e utilização dos ingredientes para possibilitar o cliente escolher adicionais das pizzas.

52 51 REFERÊNCIA BIBLIOGRÁFICA ARRIGONI, R. Responsive Design: dicas para tornar seu site acessível em qualquer resolução, DevMedia, São Paulo, 14 jun Disponível em < Acesso em 16 mai ESTADÃO PME. FATURAMENTO das redes de delivery no Brasil chega a R$ 191,8 milhões no ano passado. ESTADÃO PME, São Paulo, 01 mar Disponível em < Acesso em: 12 fev ETAMAD, E. J. W3C Working Group Note 12 May 2011, W3C. Disponível em < Acesso em 16 mai FERREIRA, E; EIS, D. HTML5 Curso W3C Escritório Brasil, E-book. p 10. Disponível em < Acesso em 15 mai FERREIRA, E; EIS, D. HTML5 e CSS3, E-book. p 137. Disponível em < > Acesso em 16 mai FIORAVANTE, F. Delivery online de comida deve crescer 100% ao ano até E- COMMERCE BRASIL, São Paulo, 05 abr Disponível em < Acesso em: 12 fev GONÇALVES, E. C. Introdução ao formato JSON, DevMedia, São Paulo, 27 jul Disponível em < Acesso em 14 mai GSON, G. A Java library to convert JSON to Java objects and vice-versa, Google- Gson, 19 out Disponível em < Acesso em 19 out JERN, M. The only mobile app cross-platform solution that works, Mobile Marketing Universe, 04 abr Disponível em < Acesso em 15 mai

53 JSON. Introducing JSON, JSON, 19 out Disponível em < Acesso em 19 out NUNES, F. Desenvolvendo aplicativos móveis multiplataforma, IMasters, São Paulo, 15 ago Disponível em < Acesso em 15 mai PAVANELLO, M. A. AJAX Asynchronous JavaScript and XML, Centro de ciências e tecnologias Universidade do Estado de Santa Catarina (UDESP), Santa Catarina. Disponível em < Acesso em 15 mai PHONEGAP, A. Take the pain out of developing mobile apps., Phonegap Build, 15 mai Disponível em < Acesso em 15 mai SALZANO, W. Como criar um sistema de delivery? Olhar Empreendedor, São Paulo, 10 jun Disponível em < > Acesso em 20 fev SERIOUSLY cross-platform with HTML5. JQuery Mobile.Disponível em < Acesso em: 14 mai SYSTEMS, A. Phonegap, Phonegap, 15 mai Disponível em < Acesso em 15 mai UOL. BRASIL: venda de smartphones cresce 110% no ano e supera celulares comuns. UOL, São Paulo, 28 ago Disponível em < Acesso em: 15 abr W3TECHS. USAGE of JavaScript libraries for websites. W3Techs.Disponível em < Acesso em: 08 mai WHAT is jquery?. JQuery.Disponível em < Acesso em: 13 mai