UNIVERSIDADE REGIONAL DE BLUMENAU CENTRO DE CIÊNCIAS EXATAS E NATURAIS CURSO DE SISTEMAS DE INFORMAÇÃO BACHARELADO INTEGRAÇÃO DO SISTEMA VALE PIZZA PARA AS REDES SOCIAIS DANIEL ÉRICO PONTES SANDOR BLUMENAU 2015 2015/1-08
DANIEL ÉRICO PONTES SANDOR INTEGRAÇÃO DO SISTEMA VALE PIZZA PARA AS REDES SOCIAIS Trabalho de Conclusão de Curso submetido à Universidade Regional de Blumenau para a obtenção dos créditos na disciplina Trabalho de Conclusão de Curso II do curso de Sistemas de Informação Bacharelado. Prof. Wilson Pedro Carli, Mestre - Orientador BLUMENAU 2015 2015/1-08
SISTEMA DE INTEGRAÇÃO PARA VENDAS EM MÍDIAS SOCIAIS Por DANIEL ÉRICO PONTES SANDOR Trabalho aprovado para obtenção dos créditos na disciplina de Trabalho de Conclusão de Curso II, pela banca examinadora formada por: Presidente: Membro: Membro: Prof. Wilson Pedro Carli, Mestre - Orientador, FURB Prof. Marcel Hugo, Mestre - FURB Prof. Mauro Marcelo Mattos, Doutor - FURB Blumenau, 01 de julho de 2015.
Dedico este trabalho a todos que de alguma forma me incentivaram e apoiaram durante a sua elaboração, especialmente minha família e a minha namorada.
Meus filhos terão computadores, sim, mas antes terão livros. Sem livros, sem leitura, os nossos filhos serão incapazes de escrever inclusive a própria história. Bill Gates
AGRADECIMENTOS A Deus, pelo imenso amor, graça e por sempre estar cuidando de mim. À minha família, principalmente aos meus pais Waldemar Bruno Sandor e Pedrina Pedroso Pontes, por me dar vida e serem meus primeiros mestres, além do carinho, amor, apoio, incentivo e acesso à educação. À minha namorada, Pricila Pawlak, por sempre estar me apoiando em todos os momentos e não me deixar desistir. Aos meus sogros, Ivo Pawlak e Mariane Leila Kazmirski Pawlak, pelo apoio e pelo incentivo na conclusão deste trabalho. Aos meus amigos, que entenderam a minha ausência necessária para a realização deste trabalho. Ao meu orientador, professor Wilson Pedro Carli, por ter contribuído com suas sugestões e incentivado na conclusão deste trabalho. Aos professores do Departamento de Sistemas e Computação da Universidade Regional de Blumenau por suas contribuições durante os semestres letivos.
RESUMO Este trabalho apresenta o desenvolvimento de um sistema web para venda de pizzas através da rede social Facebook. O sistema desenvolvido é integrado com um web service da empresa Vale Pizza que dispõe de um sistema para pedidos. Para o desenvolvimento do sistema foi utilizado o padrão de arquitetura Model View Controller (MVC), e as linguagens de programação Hypertext Preprocessor (PHP), HyperText Markup Language (HTML), Cascading Style Sheets (CSS) e JavaScript. Também foi utilizado o framework Zend para o PHP, o JQuery como framework para o JavaScript e foi utilizado uma biblioteca externa, o Software Development Kit (SDK) para o PHP disponibilizada pelo Facebook. Como base de dados foi utilizado o banco de dados MySql. O sistema desenvolvido possibilita a escolha das pizzarias dos munícipios do Vale do Itajaí em um único local na internet. Desta forma os consumidores podem efetuar seus pedidos sem sair do conforto de sua casa e com a facilidade de estar integrado dentro da rede social Facebook. Palavras chaves: Pedido de Pizza. Facebook. Web Service.
ABSTRACT This paper presents the development of a web system for selling pizzas through the Facebook social media network. The developed system is integrated with a web service provided by Vale Pizza company and is connected to its ordering system. To develop the system we used the architectural pattern Model View Controller (MVC), and programming languages Hypertext Preprocessor (PHP), HyperText Markup Language (HTML), Cascading Style Sheets (CSS) and JavaScript. was Zend Framework used as a framework for PHP, JQuery as a framework for JavaScript and an external library Software Development Kit (SDK) for PHP provided by Facebook was used. As database MySql was used. The developed system enables the choice of pizzerias of Itajai Valley region in just one place on the Internet. In this way consumers can make their orders without leaving the comfort of their home and with the ease of being integrated into the Facebook social network. Key-Words: Pizza order. Facebook. Web service.
LISTA DE FIGURAS Figura 1 - Utilização FacebookRequest... 18 Figura 2 - Exemplo de utilização da classe FacebookSession... 19 Figura 3 - Exibição dos nome do usuário... 20 Figura 4 - Utilização FacebookResponse... 20 Figura 5 - Autenticação do aplicativo... 21 Figura 6 - Utilização FacebookCanvasLoginHelper... 21 Figura 7 - Página inicial Vale Pizza... 24 Figura 8 - Escolha do endereço de entrega... 25 Figura 9 - Escolha da pizzaria... 25 Figura 10 - Escolha dos tamanhos e promoções... 26 Figura 11 - Escolha dos sabores... 26 Figura 12 - Escolha dos adicionais... 27 Figura 13 - Troca de pontos... 27 Figura 14 - Confirmação do pedido... 28 Figura 15 - Acompanhamento do Pedido... 28 Figura 16 - Avaliação do Pedido... 29 Figura 17 - Informações para entrega... 30 Figura 18 - Representação visual da rota... 30 Figura 19 - Página das pizzarias... 31 Figura 20 - Fluxo de atividade de pedido... 33 Figura 21 - Caso de uso controle de acesso... 36 Figura 22 - Caso de uso pedido... 37 Figura 23 - Modelo Entidade Relacionamento... 37 Figura 24 - Diagrama de classes... 38 Figura 25 - Portal do desenvolvedor Facebook... 39 Figura 26 - Eclipse estrutura do projeto... 40 Figura 27 - Classe PHP de conexão com banco de dados... 40 Figura 28 - Arquivo application.ini... 42 Figura 29 - Diretório library com subdiretórios... 42 Figura 30 - Diretório public com subdiretórios... 43 Figura 31 - Classe manipula SDK... 43
Figura 32 - Classe conexão web service... 44 Figura 33 - Função para realizar o login... 45 Figura 34 - Consulta web service método login... 45 Figura 35 - Retorno método login array... 46 Figura 36 - Busca Facebook... 46 Figura 37 - Permissão de acesso à informação... 47 Figura 38 - Vincular Conta... 47 Figura 39 - Cadastrar conta Vale Pizza... 48 Figura 40 - Recuperar Senha... 48 Figura 41 - Seleciona pizzaria... 49 Figura 42 - Seleciona tamanho... 50 Figura 43 - Seleciona promoção... 51 Figura 44 - Seleciona sabor... 52 Figura 45 - Extrato do pedido... 53 Figura 46 - Selecionar borda... 54 Figura 47 - Apresenta sabor... 54 Figura 48 - Seleciona adicionais... 55 Figura 49 - Extrato pedido adicional... 56 Figura 50 - Finalizar pedido... 57 Figura 51 - Continuação finalizar pedido... 58 Figura 52 - Acompanhar pedido... 58 Figura 53 - Visualizar detalhe do pedido... 59 Figura 54 - Compartilhar pedido... 59 Figura 55 - Linha do tempo... 60
LISTA DE QUADROS Quadro 1 - Requisitos Funcionais... 34 Quadro 2 - Requisitos não funcionais... 35 Quadro 3 - Regras de negócio... 35 Quadro 4 - Retorno web service método login... 45 Quadro 5 - Comparativo entre o trabalho atual e correlatos... 60 Quadro 6 - Descrição do caso de uso UC01... 65 Quadro 7 - Descrição do caso de uso UC02... 66 Quadro 8 - Descrição do caso de uso UC03... 66 Quadro 9 - Descrição do caso de uso UC04... 67 Quadro 10 - Descrição do caso de uso UC05... 67 Quadro 11 - Descrição do caso de uso UC06... 68 Quadro 12 - Tabela de usuário... 70 Quadro 13 - Tabela usuário log... 71
LISTA DE SIGLAS API - Application Programming Interface CSS - Cascading Style Sheets DDKs - Device Driver Development Kits HTML - HyperText Markup Language HTTP - Hypertext Transfer Protocol IDE - Integrated Development Environment JSON - JavaScript Object Notation MER Modelo Entidade Relacionamento PHP - Hypertext Preprocessor SDK - Software Development Kit SOAP - Simples Object Access Protocol UDDI - Universal Discovery Description Integration WSDL - Web Services Definition Language XML - extensible Makup Language
SUMÁRIO 1 INTRODUÇÃO... 14 1.1 OBJETIVOS DO TRABALHO... 15 1.2 ESTRUTURA DO TRABALHO... 15 2 FUNDAMENTAÇÃO TEÓRICA... 16 2.1 FACEBOOK... 16 2.1.1 PLATAFORMA DE DESENVOLVIMENTO FACEBOOK... 17 2.1.2 SOFTWARE DEVELOPMENT KIT FACEBOOK... 17 2.2 FRAMEWORK ZEND... 22 2.3 WEB SERVICE... 23 2.4 SISTEMA ATUAL... 24 2.5 TRABALHOS CORRELATOS... 29 3 DESENVOLVIMENTO DO SISTEMA... 32 3.1 LEVANTAMENTO DE INFORMAÇÕES... 32 3.2 ESPECIFICAÇÃO... 33 3.2.1 REQUISITOS FUNCIONAIS... 33 3.2.2 REQUISITOS NÃO FUNCIONAIS... 35 3.2.3 REGRAS DE NEGÓCIO... 35 3.2.4 DIAGRAMA DE CASOS DE USO... 36 3.2.5 MODELO DE ENTIDADE RELACIONAMENTO... 37 3.2.6 DIAGRAMA DE CLASSES... 38 3.3 IMPLEMENTAÇÃO... 38 3.3.1 TÉCNICAS E FERRAMENTAS UTILIZADAS... 38 3.3.1.1 Eclipse... 39 3.3.1.2 Zend Framework e PHP... 40 3.3.1.3 SDK PHP Facebook... 43 3.3.1.4 Web service... 43 3.3.2 OPERACIONALIDADE DA IMPLEMENTAÇÃO... 46 3.4 RESULTADOS E DISCUSSÃO... 60 4 CONCLUSÕES... 62 4.1 EXTENSÕES... 62 REFERÊNCIAS... 63 APÊNDICE A Descrição dos Casos de Uso... 65
APÊNDICE B Dicionário de Dados... 70
14 1 INTRODUÇÃO Os sítios de redes sociais como o Facebook, o Twitter e o Linkedin passaram de novidades a fenômeno global nos últimos anos (RUSSEL, 2011). Com o crescimento do número de pessoas que utilizam as redes sociais, as empresas viram um novo meio de conseguir uma melhor exposição de seus produtos, atingindo um número maior de pessoas e consequentemente aumentando suas vendas. Segundo Agência Natural (2013), o Facebook atingiu no ano de 2013, a marca de 665 milhões de usuários ativos diariamente ao redor do mundo. Desta forma a internet está cada vez mais presente no dia-a-dia das organizações e nas vidas das pessoas. Para Costa (2007), a internet é um dos mais importantes canais de negócios do século XXI. Desde o seu surgimento, ela vem revolucionando a vida das pessoas e influenciando as instituições de todos os tipos. Observando-se informalmente o mercado de empresas de pizzaria na região do Vale do Itajaí, são poucas as empresas que utilizam de redes sociais como o Facebook para o atendimento de pedidos de seus consumidores. Contudo nos últimos anos, com a utilização de dispositivos móveis, grande parte dos usuários está conectada às redes sociais (AGÊNCIA NATURAL, 2013). Desta forma, a Vale Pizza é uma empresa com sede no município de Blumenau, estado de Santa Catarina, que dispõe de um sistema via internet para gerenciamento de pedidos de pizzas para várias pizzarias da cidade e região do Vale do Itajaí. O gerenciamento dos pedidos dessas pizzarias acontece através de seu sítio, cujo endereço é http:www.valepizza.com (VALE PIZZA, 2011). Devido à necessidade de crescimento e expansão da área de atuação, a empresa Vale Pizza observou a necessidade de criação de um sistema para utilização da rede social Facebook. As pizzarias que hoje utilizam o sistema da Vale Pizza também não dispõe de atendimento através de redes sociais. Desta forma, a maioria dos pedidos para as pizzarias ainda são efetuados através de ligações telefônicas e ou através do sítio de gerenciamento da Vale Pizza. Isto acarreta numa sobrecarga da linha telefônica, onde muitas vezes a pizzaria não consegue atender ao cliente, pois a mesma está com o telefone ocupado. Sendo assim, a empresa Vale Pizza, face às questões orçamentárias e conforme as características do projeto, entendeu que o melhor seria a criação de um sistema integrador
15 entre o sistema gerenciador de pedidos atual e a rede social Facebook. Baseado nessas informações viu-se a necessidade de criação de um sistema que irá receber as informações através do Facebook e converte-las em informações válidas. Para tanto faz-se necessário o uso de um web service, sob responsabilidade da empresa Vale Pizza. 1.1 OBJETIVOS DO TRABALHO O objetivo deste trabalho é apresentar o desenvolvimento de um sistema de pedidos via Facebook para a empresa Vale Pizza. Como objetivos secundários tem-se: a) disponibilizar através do Facebook promoções das pizzarias; b) possibilitar aos clientes o acompanhamento e comentários sobre o andamento de pedido através do Facebook; c) disponibilizar aos clientes o compartilhamento do pedido realizado através do Facebook, com os seus amigos. 1.2 ESTRUTURA DO TRABALHO No primeiro capítulo tem-se a introdução ao tema principal deste trabalho com a apresentação da justificativa e dos objetivos. No segundo capítulo apresenta-se a fundamentação teórica pesquisada sobre o Facebook, a plataforma de desenvolvimento do Facebook, Software Development Kit (SDK) Facebook, web service, o sistema atual e os trabalhos correlatos. O terceiro capítulo apresenta o desenvolvimento do sistema iniciando-se com o levantamento de informações, tendo na sequência a especificação, a implementação com as técnicas e operacionalidade do sistema, além dos resultados. No quarto capítulo tem-se as conclusões deste trabalho bem como apresentam-se sugestões para trabalhos futuros.
16 2 FUNDAMENTAÇÃO TEÓRICA Este capítulo aborda assuntos a serem apresentados nas seções a seguir, tais como o Facebook, a plataforma de desenvolvimento do Facebook, o Software Development Kit do Facebook, Framework Zend, web service o sistema atual e os trabalhos correlatos. 2.1 FACEBOOK Facebook é uma rede social da internet lançada em 4 de fevereiro de 2004. Foi concebida por Mark Zuckerberg e por seus colegas de faculdade, Eduardo Saverin, Dustin Moskovitz e Chris Hughes, estudantes da Universidade de Harvard. O nome Facebook se origina de um livro criado artesanalmente, que era usado por estudantes das universidades americanas, o qual continha a foto com algumas informações de colegas de instituição. Antes de se chamar Facebook, o nome da rede social era Facemash e dispunha duas fotos lado a lado que permitia ao usuário decidir qual delas era mais atraente sexualmente (MEZRICH, 2010). Com a popularidade do site, os usuários começaram a trocar as suas fotos de perfis por imagens apresentando alguma posição política ou algum protesto, o que elevou ainda mais o sucesso do site. Zuckerberg percebendo o potencial resolveu então ampliar o cadastramento de usuários. Para isto então montou uma equipe onde cada um seria o responsável por uma área. Neste momento, o fundador do Napster, Sean Parker se aproximou de Zuckerberg, tomando a posição de investidor e presidente da empresa, mudando o nome para Facebook, após a compra em 2005, do domínio Facebook.com, por US$ 200 mil (MEZRICH, 2010). Do ponto de vista das redes sociais, o Facebook é verdadeiramente uma maravilhosa criação capaz de tudo. Considerando que seus mais de 500 milhões de usuários podem atualizar seus status públicos e informar aos seus amigos o que estão fazendo/pensando/etc., trocar mensagens mais longas, de modo semelhante a uma comunicação por e-mail, participar de chats em tempo real, organizar e compartilhar fotos, fazer check in em locais físicos, e mais uma dúzia de outras ações por meio do site, não é nenhuma surpresa que o Facebook tenha superado o Google (http://techcrunch.com/2010/12/29/hitwise-facebook-overtakes-google-to-becomemost-visited-website-in-2010/). (RUSSELL, 2011, p. 299). Segundo Gomes (2013), o Brasil aparece como o segundo país com mais usuários que acessam diariamente o Facebook, ficando atrás apenas dos Estados Unidos. Ainda segundo o mesmo autor, o Facebook tem um projeto de lançar um novo programa de desenvolvimento de talentos para suportar novos negócios para pequenas e micro empresas. A rede social quer mostrar que pode ser uma plataforma para a concretização de negócios. O Brasil possui 76
17 milhões de usuários da rede social, ficando em terceiro lugar, sendo que a Índia vem em segundo e os Estados Unidos em primeiro. Destes usuários brasileiros, 44 milhões acessam o site em smartphones ou em tablets. 2.1.1 PLATAFORMA DE DESENVOLVIMENTO FACEBOOK A plataforma de desenvolvimento do Facebook é uma extensão do Facebook, cuja missão é permitir o mundo mais aberto e conectado. Esta plataforma é uma coleção de Application Programming Interface (API) e plug-ins que a própria equipe do Facebook disponibiliza para que os desenvolvedores possam criar novas aplicações utilizando algumas funções já desenvolvidas pelo Facebook. A partir das APIs e dos plug-ins os desenvolvedores podem criar novas experiências para seus usuários, como por exemplo, efetuar login usando a mesma identidade do usuário do Facebook. Uma vez conectado, os usuários podem se comunicar com os amigos e interagir com os seus perfis do Facebook através do seu sistema (FACEBOOK, 2015). A plataforma de desenvolvimento do Facebook é composta por alguns componentes padrões: a) autenticação: método onde é possível utilizar a mesma identidade do Facebook em um sistema, e também gerar uma inscrição onde os usuários possam se inscrever para poder usar o sistema; b) plugins sociais: método onde é possível adicionar em um sistema as opções de compartilhar conteúdo, curtir, recomendar e realizar comentários entre outras funcionalidades; c) diálogos: método onde é possível visualizar os feeds e listar todos os amigos; d) API de Gráficos: onde é possível gerar diversos gráficos através das informações do Facebook; e) atualização em tempo real. 2.1.2 SOFTWARE DEVELOPMENT KIT FACEBOOK Segundo Blog do Iphone (2008), Software Development Kit (SDK) é um pacote de desenvolvimento disponibilizado por empresas ou projetos de código fonte aberto, para que programadores externos consigam desenvolver aplicações de acordo com um padrão de desenvolvimento oferecido.
18 O Facebook é uma empresa que disponibiliza vários SDKs para que os programadores externos consigam desenvolver integrações com seus sistemas. Um exemplo de SDK que o Facebook disponibiliza é o SDK para o Hypertext Preprocessor (PHP). O SDK para PHP é composto por várias classes, onde cada classe foi criada para facilitar a integração com os sistemas externos. Um exemplo de utilização de uma classe pode ser vista na Figura 1 onde é realizada a utilização da classe FacebookRequest, e são retornadas as informações do usuário autenticado ao Facebook (FACEBOOK, 2015). Figura 1 - Utilização FacebookRequest Fonte: Facebook (2015). O SDK para o PHP é composto por algumas classes padrões: a) FacebookSession: classe utilizada para autenticação, criação e manipulação de usuário (Figura 2); b) FacebookRequest: classe responsável para realizar requisições para o Facebook (Figura 3);
19 c) FacebookResponse: classe responsável para tratar o retorno da solicitação resultante da classe FacebookRequest (Figura 4); d) FacebookRequestException: classe responsável para tratar erro gerado após a utilização da classe FacebookRequest. A classe FacebookRequestException possui ainda algumas subclasses: FacebookClientException, FacebookServerException, FacebookAuthorizationException, FacebookPermissionException, FacebookThrottleException, FacebookOtherException (Figura 3); e) GraphObject: a classe representa um objeto retornado pela API de gráficos (seção 2.1.1 item d); f) FacebookRedirectLoginHelper: classe auxiliar para chegar a classe FacebookSession usando o protocolo OAuth (Figura 5); g) FacebookCanvasLoginHelper: classe auxiliar para chegar a classe FacebookSession a partir do Facebook Canvas (Figura 6). Na Figura 2 é possível observar um trecho de código do SDK para PHP onde é utilizada a classe FacebookSession. É possível observar ainda que são definidas as chaves de acesso do aplicativo ao Facebook. As chaves são geradas pelo Facebook e são únicas. Figura 2 - Exemplo de utilização da classe FacebookSession Fonte: Facebook (2015). Na Figura 3 é possível observar um trecho de código do SDK onde são utilizadas as classes FacebookRequest, GraphUser e FacebookRequestException. Ainda é possível observar como é realizada a captura de informações do usuário tais como o nome.
20 Figura 3 - Exibição dos nome do usuário Fonte: Facebook (2015). Na Figura 4 é possível observar um trecho de código do SDK onde é utilizado o FacebookResponse. Figura 4 - Utilização FacebookResponse Fonte: Facebook (2015). Na Figura 5 é possível observar um código de exemplo do SDK onde é realizada a autenticação de aplicativo ao Facebook. Ainda é possível observar a utilização da classe FacebookRedirectLoginHelper.
21 Figura 5 - Autenticação do aplicativo Fonte: Facebook (2015). Na Figura 6 é possível observar um código de exemplo do SDK onde é utilizado o FacebookCanvasLoginHelper. Figura 6 - Utilização FacebookCanvasLoginHelper Fonte: Facebook (2015). Segundo OAUTH (2015), o Facebook utiliza o protocolo OAuth que é um padrão aberto de autenticação. O OAuth especifica um processo para os proprietários de recursos autorizarem o acesso de terceiros aos recursos do servidor sem compartilhar as suas respectivas credenciais. É especificamente projetado para trabalhar com Hypertext Transfer Protocol (HTTP), são permitos tokens de acesso a serem emitidos aos clientes de terceiros através de um servidor de autorização, com a aprovação do proprietário do recurso ou do usuário final. O OAuth é comumente utilizado na realização de login em sites de terceiros
22 usando contas Microsoft, Google, Facebook ou Twitter. Com a utilização do protocolo OAuth não são expostas as credenciais do internauta e com isto não há risco de ser comprometida. 2.2 FRAMEWORK ZEND Segundo Müller (2008), framework é uma abstração que une códigos comuns entre vários projetos de software provendo uma funcionalidade genérica. Um framework pode atingir uma funcionalidade específica, por configuração, durante a programação de uma aplicação. A utilização de um framework é útil no momento em que é construído ou que é utilizado um componente mais de uma vez. Segundo Evans (2008), o framework Zend é um framework híbrido, e, como tal, pode ser usado em uma faixa muito mais ampla de projetos do que framewoks de aplicação estrita. Enquanto muitos componentes no Zend podem ser usados sozinhos como uma biblioteca de componentes, ele é, em seu núcleo, uma implementação do padrão Model View Controller (MVC). Ainda segundo o mesmo autor, o Zend se destaca dos demais frameworks em PHP, ao permitir que o programador tire pedaços dele e os use independentemente. A maioria dos componentes que não é parte do núcleo MVC pode ser retirada e usada como componente autônomo em sua aplicação. Um exemplo de componentes que podem ser implementados independente do próprio framework são as classes: Zend_Cache, Rest_Client, Zend_Feed e Zend_Log. O Framework Zend foi projetado e construído para aumentar a produtividade do desenvolvedor. Ao contrário de outros frameworks que requerem grandes arquivos de configuração para que funcionem, a maioria dos aspectos de uma aplicação de Framework Zend pode ser definida em tempo de execução usando simples comandos PHP. Isso economiza tempo do desenvolvedor porque em vez de arquivos de configuração complexos, controlando todo aspecto da aplicação, você configura apenas as partes que desviam da norma. (EVANS, 2008, p. 3). O Zend Framework é um framework de desenvolvimento para aplicações web o qual foi desenvolvido com PHP 5. Em função disto somente versões superiores ao PHP 5 são suportadas (ZEND FRAMEWORK, 2015). por exemplo: Segundo o Evans (2008), o Zend foi construído com vários conceitos-chaves, como a) melhores práticas;
23 b) guiado pela comunidade; c) capacidade de extensão; d) simplicidade extrema. O Zend Framework é um framework focado no desenvolvimento de aplicações pra web 2.0. Ele tem um grande número de seguidores, fontes de suporte e uma comunidade cheia de usuários ativos e participativos. O Zend é o framework mais famoso hoje em dia, ele é robusto e permite a criação de aplicações enterprise (de grande porte), mas seu uso exige um conhecimento vasto do PHP (BELEM, 2009). Uma de suas importantes características é a reutilização de código, ou seja, o desenvolvedor utiliza não só o seu próprio código, mas também aproveita os códigos já escritos da ferramenta (SENS, 2009). 2.3 WEB SERVICE Devido aos avanços tecnológicos, e ao surgimento das aplicações distribuídas, aumenta-se cada vez mais a necessidade de compartilhar informações entre aplicações. O web service surge então como uma solução para uma melhor comunicação entre os sistemas distribuídos (RECKZIEGEL, 2006). Ainda segundo o mesmo autor, é através de um conjunto de novos conceitos de interoperabilidade como o extensible Makup Language (XML), o Simples Object Access Protocol (SOAP), o Web Services Definition Language (WSDL), e o Universal Discovery Description Integration (UDDI), que os web services facilitam a comunicação entre aplicações que residem em múltiplas plataformas. Segundo Oficina da Net (2007), web service é um sistema de integração que permite que sistemas desenvolvidos em plataformas diferentes possam se comunicar. Isso ocorre porque os web services utilizam-se do protocolo XML. Com isso qualquer sistema que utiliza os mesmos padrões poderá trocar informações. Web service é um aplicativo servidor que disponibiliza um ou mais serviços para seus clientes, de maneira fracamente acoplada. Este expõe sua interface para os usuários usando um documento XML (SAMPAIO, 2006).
24 2.4 SISTEMA ATUAL A empresa Vale Pizza iniciou suas atividades no mês de outubro de 2009, onde foi lançada sua primeira versão do sistema gerenciador, decorrente de um trabalho desenvolvido na disciplina de Administração III do curso de Ciências da Computação da Universidade Regional de Blumenau (FURB). Com base neste trabalho, surgiu a necessidade de otimização das rotas de entregas para apresentar um plano de entrega para as pizzarias. Essa ideia foi aproveitada para o desenvolvimento do Trabalho de Conclusão de Curso (TCC) de Sens (2009). O objetivo do TCC era apresentar um sistema para a internet de uma rede de distribuidoras, buscando a melhor rota para a entrega (SENS, 2009). Hoje o sistema gerenciador tem por objetivo receber os pedidos vindos do cliente final através de uma interface web (Figura 7). Figura 7 - Página inicial Vale Pizza Fonte: Vale Pizza (2011). O processo de pedido é dividido em nove passos que serão descritos a seguir, intercalando-se com a apresentação das respectivas telas. O primeiro passo é a escolha do endereço de entrega (Figura 8).
25 Figura 8 - Escolha do endereço de entrega Fonte: Vale Pizza (2011). Na sequência, é apresentado ao cliente a lista de todas as pizzarias que utilizam o sistema gerenciador de pedidos do Vale Pizza e cabe ao mesmo escolher aquela que mais agradar (Figura 9). Figura 9 - Escolha da pizzaria Fonte: Vale Pizza (2011). Figura 10. Na sequência, tem-se a escolha dos tamanhos e promoções, conforme apresentado na
26 Figura 10 - Escolha dos tamanhos e promoções Fonte: Vale Pizza (2011). Após a escolha do tamanho, é necessário informar os sabores (Figura 11), e verificar a necessidade de informar os produtos adicionais desejados (Figura 12). Para troca de pontos (caso o cliente já tenha efetuado um pedido anteriormente) ou cadastro do endereço e informações de login (caso o cliente nunca tenha utilizado o serviço) é apresentada a tela conforme a Figura 13. Figura 11 - Escolha dos sabores Fonte: Vale Pizza (2011).
27 Figura 12 - Escolha dos adicionais Fonte: Vale Pizza (2011). Figura 13 - Troca de pontos Fonte: Vale Pizza (2011). Após a troca de pontos, o sistema solicita ao cliente que confirme o pedido e selecione algumas opções (Figura 14). Na sequência é apresentada uma tela com a confirmação e acompanhamento da situação do seu pedido (aberto, andamento, entregue, avaliado) conforme a Figura 15. Por último é apresentada a tela de avaliação do pedido (Figura 16).
28 Figura 14 - Confirmação do pedido Fonte: Vale Pizza (2011). Figura 15 - Acompanhamento do Pedido Fonte: Vale Pizza (2011).
29 Figura 16 - Avaliação do Pedido Fonte: Vale Pizza (2011). 2.5 TRABALHOS CORRELATOS Pode-se citar como trabalhos correlatos, as monografias de Sens (2009), Wolff Júnior (2010) e Agnoli (2012) respectivamente para a conclusão dos cursos de Ciência da Computação, Sistemas de Informação e Publicidade e Propaganda na FURB. O trabalho de Sens (2009) consiste em desenvolver um projeto de um sistema para a internet de logística de entrega para uma rede de distribuidoras, buscando a melhor rota para a entrega. O trabalho foi desenvolvido na linguagem de programação PHP, utilizando o framework Zend e MySql como banco de dados. Na Figura 17 é possível observar a tela que foi desenvolvida por Sens (2009) onde aparece o endereço do consumidor e também o extrato do pedido para confirmar os dados. Logo após o consumidor ter efetuado o pedido, aparecerão para a pizzaria as informações para a entrega, juntamente com a melhor rota (Figura 18).
30 Figura 17 - Informações para entrega Fonte: Sens (2009). Figura 18 - Representação visual da rota Fonte: Sens (2009). O trabalho de Wolff Júnior (2010) consiste em desenvolver um portal web para integração de pizzarias do município de Rio do Sul. Neste trabalho foi utilizada a linguagem de programação PHP, utilizando para o armazenamento das informações o banco de dados MySql (WOLFF JÚNIOR, 2010). A Figura 19 apresenta o portal Pizzarias Rio do Sul.
31 Figura 19 - Página das pizzarias Fonte: Wolff Júnior (2010). O trabalho de Agnoli (2012) foi analisar a utilização do Facebook no varejo de Blumenau. Ficou constatado que redes sociais como o Facebook, tornaram-se um diferencial para os lojistas de Blumenau, aumentando o número de clientes e expandindo suas vendas para fora da cidade e até do estado, além de estreitar o relacionamento com o cliente (AGNOLI, 2012).
32 3 DESENVOLVIMENTO DO SISTEMA Neste capítulo estão descritos os aspectos técnicos utilizados no desenvolvimento do sistema, bem como o levantamento de informações, os requisitos funcionais e os não funcionais. São apresentados os diagramas utilizados no desenvolvimento tais como o diagrama de casos de uso, modelo entidade e relacionamento o diagrama de atividades. Estão descritas também as técnicas e ferramentas utilizadas, a operacionalidade da implementação e os resultados obtidos. 3.1 LEVANTAMENTO DE INFORMAÇÕES Com base nas informações obtidas em entrevistas com o responsável pela Vale Pizza e conforme pode ser visto na seção 2.4 observa-se que a empresa necessitava aderir a rede social Facebook para aumentar o raio de atuação e consequentemente, aumentar o número de consumidores. Para atender a esta necessidade, foi desenvolvido um sistema que será integrado ao sistema atual. Está integração ocorrerá por meio de um web service que a Vale Pizza já utiliza, e que será readequado para que seja possível acessa-lo a partir de outras plataformas, como a plataforma do Facebook. O sistema desenvolvido integra as informações dos usuários do Facebook com as informações dos consumidores da Vale Pizza. A Figura 20 apresenta o fluxo de atividades proposto para a realização de um pedido. O fluxo inicia com a solicitação ao cliente para selecionar uma pizzaria. Após é solicitado ao cliente que confirme o endereço para entrega do pedido, e caso o endereço não esteja cadastrado, é solicitado ao cliente que realize o cadastro do endereço desejado. Após é solicitado ao cliente que informe o tamanho da pizza, e se necessário, adicionar mais pizzas deverá e novos tamanhos. Após a seleção da pizzaria, do endereço de entrega e do tamanho da pizza, é necessário selecionar os sabores das pizzas e respectivamente, a seleção de alguma bebida. Logo após é apresentado um resumo do pedido, sendo possível ao cliente confirmar ou voltar às etapas anteriores. Caso o resumo do pedido seja confirmado então é registrado o pedido e é finalizado o fluxo de pedido.
33 Figura 20 - Fluxo de atividade de pedido Para a construção do sistema foi necessária a utilização das seguintes ferramentas: a) Eclipse para criação do código PHP do desenvolvimento; b) MySql para armazenamento das informações; c) HeidiSQL para gerenciamento do MySql. 3.2 ESPECIFICAÇÃO Esta seção apresenta os requisitos funcionais e não funcionais do sistema, além do diagrama de casos de uso e o modelo de entidade relacionamento (MER). Para gerar o diagrama de casos de uso foi utilizada a ferramenta Enterprise Architect e para desenvolver o MER foi utilizado o software MySql Workbench na versão 6.3.3. 3.2.1 REQUISITOS FUNCIONAIS Nesta subseção são apresentadas as características principais do sistema. Elas foram desenvolvidas com base nas informações apuradas (seção 2.4) e em entrevista com o responsável pela Vale Pizza onde foram elucidados os requisitos funcionais para atender as necessidades levantadas atualmente.
34 O Quadro 1 apresenta os requisitos funcionais previstos para o sistema e sua rastreabilidade, ou seja, vinculação com o(s) caso(s) de uso associado(s). Quadro 1 - Requisitos Funcionais REQUISITOS FUNCIONAIS CASO DE USO RF01: O sistema deverá permitir ao consumidor conceder acesso às informações do Facebook. UC01 RF02: O sistema deverá permitir ao consumidor vincular uma conta do Vale Pizza com a do Facebook UC02 RF03: O sistema deverá permitir ao consumidor recuperar a senha de acesso a conta do Vale Pizza UC03 RF04: O sistema deverá permitir ao consumidor se cadastrar-se no sistema da Vale Pizza UC04 RF05: O sistema deverá permitir ao consumidor atualizar suas informações tais como adicionar novos endereços para entrega de seus pedidos. UC05 RF06: O sistema deverá permitir ao consumidor realizar pedidos. UC06 RF07: O sistema deverá permitir ao consumidor acompanhar o andamento do pedido. UC07 RF08: O sistema deverá permitir ao consumidor visualizar pedidos realizados. UC08 RF09: O sistema deverá permitir ao consumidor visualizar os detalhes dos pedidos realizados tais como os sabores. UC09 RF10: O sistema deverá permitir ao consumidor comentar pedidos. UC10 RF11: O sistema deverá permitir ao consumidor compartilhar pedidos. UC11
35 3.2.2 REQUISITOS NÃO FUNCIONAIS Os Requisitos Não Funcionais (RNF) foram definidos levando em consideração o sistema atual (Quadro 2). Quadro 2 - Requisitos não funcionais REQUISITOS NÃO FUNCIONAIS RNF01: O sistema deverá utilizar a linguagem de programação PHP. RNF02: O sistema deverá utilizar o banco de dados MySql. RNF03: O sistema deverá utilizar o framework Zend. RNF04: O sistema deverá utilizar o SDK do Facebook. 3.2.3 REGRAS DE NEGÓCIO As regras de negócio foram definidas levando em consideração o sistema atual (Quadro 3). Quadro 3 - Regras de negócio REGRAS DE NEGÓCIO RN01: Todas as funções relacionadas ao pedido devem ser efetuadas em uma única janela. RN02: Os pedidos devem ser identificados através de código único. RN03: O acompanhamento dos pedidos deverá ser atualizado a cada 60 segundos.
36 3.2.4 DIAGRAMA DE CASOS DE USO Esta subseção apresenta os diagramas de caso de uso necessários para o entendimento do sistema desenvolvido. Os casos de uso detalhados são descritos no Apêndice A. É apresentado na Figura 21 o diagrama que demonstra a autorização do consumidor para permitir o compartilhamento de algumas informações do Facebook com o sistema. Também é possível notar os casos de uso para realizar o vínculo da conta do consumidor do Facebook com a Vale Pizza. Tem-se o caso de uso para criação de uma conta na Vale Pizza, caso o consumidor não possua uma ainda, o caso de uso para recuperação da senha de acesso ao sistema da Vale Pizza e por fim é apresentado o caso de uso que mostra como será realizada a atualização dos dados cadastrais, tais como o endereço e telefone para contato. Figura 21 - Caso de uso controle de acesso Na Figura 22 é apresentado os casos de uso relacionado a realização de pedidos pelo sistema desenvolvido.
37 Figura 22 - Caso de uso pedido 3.2.5 MODELO DE ENTIDADE RELACIONAMENTO Esta subseção apresenta o Modelo Entidade Relacionamento (MER) do sistema desenvolvido (Figura 23). Figura 23 - Modelo Entidade Relacionamento
38 A seguir é apresentado uma breve descrição das entidades criadas para o desenvolvimento do sistema: a) usuario: entidade que armazena os dados referentes ao usuário da Vale Pizza e do Facebook; b) usuário_log: entidade que armazena o log de acesso do usuário ao sistema. 3.2.6 DIAGRAMA DE CLASSES O diagrama de classes representado na Figura 24 exibe as principais classes encontradas no sistema com seus devidos atributos e métodos. Figura 24 - Diagrama de classes 3.3 IMPLEMENTAÇÃO A seguir são mostradas as técnicas e ferramentas utilizadas e a operacionalidade da implementação. 3.3.1 TÉCNICAS E FERRAMENTAS UTILIZADAS Para o desenvolvimento do sistema foi utilizada a Integrated Development Environment (IDE) Eclipse (versão Luna). Foi utilizado o framework Zend juntamente com a
39 linguagem de programação PHP na versão 5.5. Foi necessário vincular uma conta do Facebook como desenvolvedor, para que fosse possível criar um aplicativo no Facebook onde é executado o sistema desenvolvido. Para criar a conta como desenvolvedor é necessário ter efetuado o login no Facebook e acessar o link: https://developers.facebook.com. Também foi necessário realizar o download da SDK do Facebook para o PHP na versão 4.0.0 (Figura 25). Foi utilizado o web service como meio de comunicação entre o sistema desenvolvido com o sistema da Vale Pizza. O web service é responsável por receber as informações e converte-las em informações válidas para a Vale Pizza. Figura 25 - Portal do desenvolvedor Facebook Fonte: Facebook (2013). 3.3.1.1 Eclipse A Figura 26 mostra uma tela do Eclipse onde é possível notar a estrutura de arquivos criada no desenvolvimento do sistema. A correta criação da estrutura do projeto facilita o entendimento da arquitetura do sistema visando manutenções futuras.
40 Figura 26 - Eclipse estrutura do projeto 3.3.1.2 Zend Framework e PHP A linguagem de programação PHP com o framework Zend foi utilizada em todo o desenvolvimento do sistema. Na Figura 27 é possível observar a classe PHP que realiza a conexão com o banco de dados. É possível observar também o uso de algumas classes do Zend framework, como por exemplo, a classe Zend_Db_Adapter_Exception que trata o erro quando o adaptador do banco de dados apresentar falhas. Figura 27 - Classe PHP de conexão com banco de dados
41 Conforme o padrão estabelecido no framework Zend os diretórios e arquivos se dividem da seguinte maneira: a) application: este diretório contém o código fonte do aplicativo sendo desenvolvido. Está dividido em subdiretórios como pode-se perceber na Figura 26. O subdiretório configs é responsável por conter os arquivos de configurações do sistema, como por exemplo, o arquivo application.ini onde residem todas as informações do banco de dados, as bibliotecas de acesso das suas configurações caso o sistema esteja em produção ou em teste, entre outras configurações. O subdiretório controller é responsável por conter os arquivos controladores, como por exemplo uma consulta ao banco de dados, onde são recebidos os dados enviados de formulários entre outros. O subdiretório layouts é responsável por conter os arquivos de layouts padrões de todo o sistema, como por exemplo o cabeçalho e rodapé do sistema sendo desenvolvido. O subdiretório model é responsável por conter os arquivos de consultas ao banco de dados do sistema como por exemplo a tabela usuário. Para realizar uma consulta nesta tabela é necessário da criação de arquivo controlador dentro da pasta model para que seja possível acessá-la. O subdiretório view é responsável por conter todos os arquivos de visão do sistema, é onde ficam todas as telas do sistema; b) application.ini: este arquivo pode ser considerado o mais importante do sistema pois nele reside a declaração de como acessar as bibliotecas externas, os controladores, os layouts padrões e a configuração para exibição de erros em produção ou em desenvolvimento e também possui as informações de acesso ao banco de dados (Figura 28);
42 Figura 28 - Arquivo application.ini c) library: diretório onde as bibliotecas externas são adicionadas, como por exemplo, o SDK do Facebook para PHP, que é responsável por permitir a integração com o Facebook (Figura 29); Figura 29 - Diretório library com subdiretórios
43 d) public: neste diretório se encontram todos os arquivos públicos, tais como as imagens utilizadas no sistema, os arquivos de execução por parte do usuário como por exemplo os arquivos JavaScript, CSS (Figura 30). Figura 30 - Diretório public com subdiretórios 3.3.1.3 SDK PHP Facebook Para realizar a integração do sistema desenvolvido com o Facebook, foi necessário utilizar o SDK para o PHP que o Facebook disponibiliza aos desenvolvedores. Este SDK contém as classes padrões (seção 2.1.2). Na Figura 31 é possível observar a classe VPAPP_AbstractFacebook criada para manipular as informações do SDK. É possível observar o método getinfusuario o qual tem como parâmetro a sessão do consumidor autenticado no Facebook e no sistema, o protocolo (GET ou POST,) e o tipo de retorno estabelecido pelo SDK. Figura 31 - Classe manipula SDK 3.3.1.4 Web service Para o desenvolvimento da integração entre o sistema desenvolvido com o sistema da Vale Pizza, foi necessário a criação da classe VPAPP_AbstractWebService, onde é feita a conexão com o servidor onde está o web service (Figura 32).
44 Figura 32 - Classe conexão web service O web service da Vale Pizza foi desenvolvido com framework para PHP Symfony e foi utilizado a linguagem para a comunicação entre os sistemas o JavaScript Object Notation (JSON). Ainda foram criados alguns métodos para a comunicação entre os sistemas, onde os principais são: a) endereço: envia como parâmetro o código do consumidor da Vale Pizza e retorna os endereços; b) extrato: envia como parâmetro o código do consumidor da Vale Pizza e retorna os pedidos realizados; c) login: método utilizado para realizar o vínculo entre os sistemas. Envia como parâmetro o e-mail e a senha do consumidor da Vale Pizza e retorna o código do consumidor (Quadro 4); d) pedido/inserir: método utilizado para criar um pedido. Envia como os parâmetros todos os dados do pedido como por exemplo, os tamanhos, os sabores e o valor total do pedido. É retornado o código do pedido; e) tamanho: método que retorna todos os tamanhos disponíveis pela pizzaria. Envia como parâmetro o código da pizzaria e retorna os tamanhos. Segundo Martins (2010), JSON é um padrão para o formato de dados derivado da sintaxe de objetos em JavaScript. E apesar de estar diretamente direcionado a JavaScript, ele é um padrão com vários parsers em diferentes linguagens, podendo servir para diferentes
45 propósitos. O principal uso atualmente é ser uma alternativa ao XML na transmissão de dados entre cliente e servidor, que foi popularizado com o uso de AJAX. Ainda segundo o mesmo autor, o JSON costuma ser menor que o equivalente em XML, e isso é uma vantagem quando é necessário que os dados sejam transmitidos pela rede. Mas a vantagem principal é que o formato do JSON é mais simples de ser interpretado. Na Figura 33 é possível observar o trecho de código onde é realizado a consulta ao método getlogin da classe VPAPP_AbstractWebService criada para realizar a comunicação com o método login do web service (Figura 34). No Quadro 4 é possível observar o retorno JSON do método login consultado. Figura 33 - Função para realizar o login Figura 34 - Consulta web service método login Quadro 4 - Retorno web service método login {"nome_pessoa":"daniel Sandor outlook", "telefone":"(47) 9125-6970", "telefone2":"(47) 9125-6970", "email":"dsandor@hotmail.com", "data_nascimento":{"date":"1989-07-25 00:00:00", "timezone_type":3, "timezone":"america\/sao_paulo"}, "marketing":true, "ref_pessoa":"46eca3b55b6bd8994da65a316b1b88c320c979b6"} Para melhor manipulação das informações do web service foi utilizada a função do PHP json_decode para transformar o JSON em array e o json_encode para transformar o array em JSON (Figura 35).
46 Figura 35 - Retorno método login array 3.3.2 OPERACIONALIDADE DA IMPLEMENTAÇÃO Nesta subseção são apresentadas as principais telas do sistema e suas funcionalidades, assim como trechos de código fonte de rotinas desenvolvidas. Inicialmente, é necessário que o consumidor encontre o sistema no Facebook (Figura 36). Após, é necessário permitir que o sistema acesse algumas informações do consumidor que estão cadastradas no Facebook (Figura 37). Na sequência o consumidor deve vincular a conta da Vale Pizza com a conta do Facebook (Figura 38). Caso o consumidor não possua conta no sistema da Vale Pizza é possível criar uma nova conta (Figura 39). Ainda é permitido recuperar a senha de acesso a conta da Vale Pizza (Figura 40). Figura 36 - Busca Facebook Após, é necessário que o consumidor permita que o sistema possa acessar as suas informações pessoais através do Facebook. Para isto são apresentadas as informações as quais o sistema necessita acesso (Figura 37). Caso o usuário decida não conceder a permissão, então, o sistema retorna para a tela anterior.
47 Figura 37 - Permissão de acesso à informação Devido a política de segurança da Vale Pizza, é necessário realizar um vínculo entre a conta de acesso do Facebook com a conta da Vale Pizza. Este vínculo é solicitado somente no primeiro acesso do consumidor ao sistema desenvolvido. Para vincular as contas é necessário informar o e-mail e senha de acesso à conta da Vale Pizza (Figura 38). Caso ocorra tudo certo, o consumidor é redirecionado para a tela de selecionar pizzaria para prosseguir com o pedido (Figura 41). Figura 38 - Vincular Conta
48 Caso o consumidor não seja cadastrado no sistema da Vale Pizza, é solicitado ao mesmo que realize um cadastro simples. Para isto são solicitadas as informações: nome, telefone, data de nascimento, e-mail e a senha para acessar o sistema da Vale Pizza (Figura 39). Após é efetuado o cadastro e se ocorrer tudo correto, o consumidor é redirecionado para a tela de selecionar pizzaria para dar continuidade ao andamento do pedido. Figura 39 - Cadastrar conta Vale Pizza Caso o consumidor possua uma conta na Vale Pizza e não lembrar a senha de acesso, é possível solicitar uma nova senha a qual será enviada através do e-mail cadastrado a conta do mesmo (Figura 40). Figura 40 - Recuperar Senha Após realizado o vínculo, o consumidor é redirecionado para a tela onde deverá selecionar uma pizzaria para começar o pedido. Como pode ser visto na Figura 41, é possível
49 pesquisar pelas cidades do Vale do Itajaí e os seus respectivos bairros para localizar a pizzaria que mais agrada o consumidor. Nesta tela ainda é possível observar se a pizzaria está atendendo e a média das avaliações da pizzaria com base em outros pedidos realizados. Figura 41 - Seleciona pizzaria Para começar um pedido de pizza, o consumidor deve escolher uma pizzaria que esteja atendendo e clicar no botão Peça sua pizza. Após, o consumidor é redirecionado para outra tela onde deverá selecionar o tamanho da pizza. A Figura 42 mostra a tela onde é solicitado ao consumidor selecionar o tamanho da pizza. Neste caso o sistema apresenta o valor, a quantidade de sabores possíveis, a quantidade de pessoas e a quantidade de ponto. Além disto, é possível selecionar uma promoção (caso exista promoção ativa pela pizzaria selecionada). Para o consumidor visualizar o tamanho visualizar o tamanho que está na promoção da pizzaria é necessário clicar na aba promoções (Figura 43).
50 Figura 42 - Seleciona tamanho Ao selecionar a aba promoções, é apresentado ao consumidor o tamanho que está em promoção, se existe algum item como brinde, o valor do tamanho, a quantidade de sabores possíveis, a quantidade sugerida de pessoas que o tamanho satisfaz e a quantidade de pontos que o tamanho da pizza irá gerar ao consumidor (Figura 43).
51 Figura 43 - Seleciona promoção Para selecionar um tamanho o consumidor deve clicar no botão adicionar, e o sistema redirecionará para a tela de escolha dos sabores do tamanho selecionado. O consumidor pode selecionar quantos tamanhos achar necessários, já que não existe limite ou bloqueio para a seleção dos tamanhos. Após, é exibida a tela para seleção do sabor (Figura 44) onde é possível selecionar os sabores dentro do limite de sabores pré-estabelecidos. Também é possível observar o nome do sabor e os ingredientes que compõem o sabor.
52 Figura 44 - Seleciona sabor Ainda nesta tela, é possível acompanhar o extrato do pedido onde é apresentado o nome da pizzaria, o tamanho, o sabor, o total de pontos e o valor do pedido. O valor e os pontos do pedido são atualizados a cada tamanho selecionado. Ainda é possível remover um tamanho clicando no botão x no canto direito onde é apresentado o nome do tamanho. Também é possível remover o sabor clicando no x que é apresentado ao passar o mouse no nome do sabor (Figura 45).
53 Figura 45 - Extrato do pedido Ainda nesta tela, é possível observar que além de selecionar o sabor da pizza é possível também selecionar o tipo da borda. Para isto, é necessário acessar a aba Bordas que está do lado direito para melhor separação (Figura 46).
54 Figura 46 - Selecionar borda Para adicionar um sabor ao pedido é necessário que o consumidor clique no botão de adicionar na pizza. Após a seleção é possível observar que o sabor selecionado aparecerá no extrato do pedido, conforme pode ser observado na Figura 47. Figura 47 - Apresenta sabor
55 Ainda na Figura 47, é possível remover um sabor selecionado clicando no botão X que é exibido quando o mouse estiver sobre um sabor na listagem dos sabores no extrato do pedido. Ainda na tela de seleção de sabores, é possível que o consumidor queira selecionar mais tamanhos de pizza ao pedido. Para isto o consumidor pode ir para a tela de seleção dos tamanhos de três maneiras. A primeira maneira seria o consumidor clicar no botão de voltar, a segunda maneira seria clicar no menu tamanhos e a terceira maneira seria pelo botão + pizza que aparece no extrato do pedido (Figura 46). Ainda na tela de seleção de sabores, se o consumidor não desejar adicionar mais sabores é necessário que seja clicado no botão de avançar para que o mesmo seja redirecionado para a tela da seleção dos itens adicionais do pedido (Figura 48). Figura 48 - Seleciona adicionais Na tela de seleção dos adicionais, é possível observar os itens que a pizzaria dispõe para seleção pelo consumidor. É possível notar ainda que para acessar a mais tipos de
56 adicionais, é necessário que o consumidor clique na aba desejada como por exemplo a aba refrigerante. Para a seleção de um adicional é necessário que o consumidor clique no botão de adicionar. Após a seleção o item é apresentado no extrato do pedido (Figura 49). Ainda é possível observar no extrato do pedido que o valor do mesmo é atualizado a cada alteração realizada. Para remover um item adicional, é necessário que o consumidor clique no X que é apresentado ao passar o mouse sobre um item no extrato do pedido (Figura 49). Figura 49 - Extrato pedido adicional Para dar continuidade ao processo do pedido é necessário que o consumidor clique no botão de avançar para avançar para a tela onde será finalizado o pedido. Nesta tela é solicitado ao consumidor algumas informações: a) se deseja a pizza fatiada; b) se gostaria de agendar a entrega do pedido para um horário específico;
57 c) se deseja retirar o pedido no balcão da pizzaria ou se deseja que o pedido seja entregue no endereço selecionado; d) se deseja cadastrar um novo endereço para a entrega do pedido; e) se deseja informar alguma observação ao pedido; f) a forma de pagamento e se é necessário que o entregador leve troco; g) se permite que outras pessoas possam visualizar o pedido que o consumidor está efetuando. Caso o consumidor desejar alterar o pedido é necessário clicar no botão de voltar, ou clicar no menu de pedidos. Se o consumidor estiver de acordo com todos os itens do pedido é necessário clicar no botão de finalizar pedido (Figura 50). Figura 50 - Finalizar pedido
58 Figura 51 - Continuação finalizar pedido Finalizado esta etapa, o consumidor é direcionado para a tela de acompanhamento dos pedidos (Figura 52). Nesta tela o mesmo pode acompanhar todos os pedidos que estejam com a situação em aberto e também é possível visualizar todos os pedidos realizados pelo sistema através do Facebook e também os pedidos realizados pelo sítio da Vale Pizza. Também é possível visualizar toda a informação do pedido clicando no botão + detalhes (Figura 53). Figura 52 - Acompanhar pedido
59 Figura 53 - Visualizar detalhe do pedido Na tela de acompanhamento de pedido, também é possível compartilhar um pedido no Facebook clicando no botão compartilhar pedido. Após, será aberto um pop-up para que o consumidor confirme o compartilhamento (Figura 54). Depois de clicar no botão de compartilhar link é exibido na linha do tempo do consumidor (Figura 55). Figura 54 - Compartilhar pedido