Victor Hugo Benevides Sobrinho

8/19/2019 Victor Hugo Benevides Sobrinho

1/73

PONTIFÍCIA UNIVERSIDADE CATÓLICA DE GOIÁS

CIÊNCIA DA COMPUTAÇÃO

SISTEMA MOBILE MULTIPLATAFORMA: CARDÁPIO E COMANDA PARARESTAURANTES

VICTOR HUGO BENEVIDES SOBRINHO

Goiânia

2014

1


2/73


CIÊNCIA DA COMPUTAÇÃO

SISTEMA MOBILE MULTIPLATAFORMA: CARDÁPIO E COMANDA PARA

RESTAURANTES


Trabalho de conclusão de curso orientado pelo

professor Iamar Zuza Araujo e apresentado à


– PUC GOIÁS, como parte dos requisitos para a

conclusão do curso de Bacharelado em Ciência da

Computação.

Goiânia

2014

2


3/73

SISTEMA MOBILE MULTIPLATAFORMA: CARDÁPIO E COMANDA PARA

RESTAURANTES


Trabalho de conclusão de curso orientado pelo professor Iamar Zuza Araujo e apresentado à

PONTIFÍCIA UNIVERSIDADE CATÓLICA DE GOIÁS – PUC GOIÁS, como parte dos

requisitos para a conclusão do curso de Bacharelado em Ciência da Computação.

3


4/73

Dedicatória

Dedico este trabalho a todos aqueles qυе dе alguma forma estiveram е estão próximos dе mim, fazendo esta vida valer cada vеz mais а pena.

4


5/73

"Um passo à frente e você

não está mais no mesmo lugar"

( Chico Science)

5


6/73

SUMÁRIO

Lista de Tabelas......................................................................................................................11

Lista de abreviaturas.............................................................................................................13

Lista de figuras........................................................................................................................14

Resumo.....................................................................................................................................16

Abstract.....................................................................................................................................17

Introdução................................................................................................................................19

1. Tipos de aplicações moveis............................................................................................20

1.1 Aplicações nativas....................................................................... ...........................20

1.2 Aplicações web.......................................................................................................22

1.3 Aplicações hibridas................................................................................................23

2. Phonegap.............................................................................................................................24

2.1 Descrição................................................................................................................25

6


7/73

3. Linguagens..........................................................................................................................26

3.1 HTML........................................................................................................................26

3.1.1 Descrição.................................................................................................26

3.1.2 Evolução do HTML5................................................................................27

3.2 CSS..........................................................................................................................28

3.2.1 Descrição.................................................................................................28

3.2.2 CSS linguagem de estilos......................................................................29

3.2.3 Bootstrap..................................................................................................30

3.3 JavaScript................................................................................................................30

3.3.1. Descrição...............................................................................................30

3.3.2. JavaScript a linguagem de programação...........................................31

3.3.2.1. Ajax.......................................................................................................32

3.3.2.2. Json.......................................................................................................33

3.3.2.3. Jquery...................................................................................................34

7


8/73

3.4 Java..........................................................................................................................34

3.4.1. Descrição................................................................................................34

3.4.2. Servlet......................................................................................................35

3.5 MySQL.....................................................................................................................36

3.6 Tomcat.....................................................................................................................36

4. Estrutura Geral do Sistema..............................................................................................37

4.1. Exemplo de funcionamento de todo o sistema..................................................37

4.2. Recursos.................................................................................................................38

4.2.1. Cliente e Funcionário.............................................................................38

4.2.2. Servidor...................................................................................................39

5. Sistema Mobile....................................................................................................................39

5.1 Documentação do projeto.....................................................................................39

5.1.1. Documento de especificação de requisitos........................................39

5.1.1.1 Proposito...................................................................................40

5..1.1.2 Escopo.....................................................................................40

8


9/73

5.1.2. Perspectivas do produto....................................................................................40

5.1.2.1. Interface do sistema............................................................................40

5.1.2.1.1. Interface com usuário...........................................................40

5.1.2.1.1.1. Interface do cliente................................................40

5.1.2.1.1.2. Interface do funcionário........................................41

5.1.1.2. Requisitos............................................................................................42

5.1.1.2.1 Requisitos Funcionais..........................................................42

5.1.1.2.2 Requisitos Não Funcionais..................................................45

5.1.1.3. Caso de uso.........................................................................................48

5.1.1.3.1 Diagrama de caso de uso...................................................48

5.1.1.3.1.1 Cliente.....................................................................48

5.1.1.3.1.2 Funcionário.............................................................48

5.1.1.3.2 Descrição de caso de uso...................................................49

5.1.1.3.2.1 Cliente.....................................................................49

9


10/73

5.1.1.3.2.2 Funcionário.............................................................62

5.1.1.4. Modelo De Entidade e Relacionamento..........................................67

Conclusão................................................................................................................................68

Referências Bibliograficas...................................................................................................69

10


11/73

LISTA TABELAS

Tabela 5.1 - RF001-Acesso aos recursos do sistema

Tabela 5.2 - RF002-Divisão de contas.

Tabela 5.3 - RF003-Solicitar participação de Conta Mesa

Tabela 5.4 - RF004-Fazer pedido somente com a conta da mesa aberta

Tabela 5.5 - RF005-Divisão de pedido

Tabela 5.6 - RF006-Finalizar conta

Tabela 5.7 - RF007-Não permitir nome de usuário igual a um existente

Tabela 5.8 - RNF001- Ambiente mobile

Tabela 5.9 - RNF002- Campos numéricos

Tabela 5.10 - RNF003- Quantidade de caracteres no campo

Tabela 5.11 - RNF004- Dividir produtos em categorias e subcategorias

Tabela 5.12 - RNF005-Mascara de Telefone

11


12/73

Tabela 5.13 - RNF006-Mascara de Email

Tabela 5.14 - RNF007-Cadastramento de Senha

Tabela 5.15 - UC-001-Fazer Login

Tabela 5.16 - UC-002-Fazer Cadastrar Usuário

Tabela 5.17 - UC-003-Abrir Conta Mesa

Tabela 5.18- UC-004-Solicitar Dividir Conta Mesa

Tabela 5.19- UC-005-Aceitar/Recusar Usuário na Conta Mesa

Tabela 5.20- UC-006-Fazer Pedidos

Tabela 5.21- UC-007-Dividir Pedidos

Tabela 5.22- UC-001-Manter Pedidos

Tabela 5.23- UC-002-Encerrar Conta Cliente

12


13/73

LISTA ABREVIATURAS

AJAX (Asynchronous JavaScript and XML)

API (Application Programming Interface)

CSS (Cascading Style Sheets)

FTP (File Transfer Protocol)

GPS (Global Positioning System)

HTML (HyperText Markup Language)

HTTP (HiperText Transfer Protocol)

JSON (JavaScript Object Notation)

RF (Requisito Funcional)

RNF (Requisito Não Funcional)

SDK (Software Development Kit)

SGDB (Sistema de Gerenciamento de Banco de Dados)

SQL (Structured Query Language)

UC (Use Case)

UI (User interface)

13


14/73

XAML (eXtensible Application Markup Language)

XML (eXtensible Markup Language)

WEBAPP (Aplicações web)

LISTA FIGURAS

Figura 1.1 - Representação das aplicações nativas, web e hibridas em um aparelho celular.

Figura 2.1 - Tabela que mostra os recursos disponíveis via Phonegap para cada plataforma.

Figura 3.1 - Figura construída através do exemplo de um tutorial no website.

Figura 3.2- Estrutura de uma regra de CSS.

Figura 3.3- Arvore de influência de uma folha de estilo sob documentos HTML.

Figura 3.4- Código HTML com um script de javascript embutido.

Figura 3.5 - Código ajax comunicação simples com um servidor.

Figura 3.6- Arquivo Json.

Figura 3.7- Sintaxe JavaScript e Jquery

Figura 3.8 - sintaxe de um código java.

14

http://www.google.com/url?q=http%3A%2F%2Fwww.developergarden.com%2Fen%2Fblog%2Farticles%2Farticle%2Fnative-vs-web-app-vs-hybrid-what-is-the-optimal-developer-strategy%2F&sa=D&sntz=1&usg=AFQjCNHwvB8fpo3cb-5p6lLm3Y0MEyQFUghttp://www.google.com/url?q=http%3A%2F%2Fwww.developergarden.com%2Fen%2Fblog%2Farticles%2Farticle%2Fnative-vs-web-app-vs-hybrid-what-is-the-optimal-developer-strategy%2F&sa=D&sntz=1&usg=AFQjCNHwvB8fpo3cb-5p6lLm3Y0MEyQFUghttp://www.google.com/url?q=http%3A%2F%2Fwww.developergarden.com%2Fen%2Fblog%2Farticles%2Farticle%2Fnative-vs-web-app-vs-hybrid-what-is-the-optimal-developer-strategy%2F&sa=D&sntz=1&usg=AFQjCNHwvB8fpo3cb-5p6lLm3Y0MEyQFUghttp://www.google.com/url?q=http%3A%2F%2Fwww.developergarden.com%2Fen%2Fblog%2Farticles%2Farticle%2Fnative-vs-web-app-vs-hybrid-what-is-the-optimal-developer-strategy%2F&sa=D&sntz=1&usg=AFQjCNHwvB8fpo3cb-5p6lLm3Y0MEyQFUg


15/73

Figura 3.9 - Servidor em java usando a biblioteca Servlet

Figura 4.1 - ilustra a estrutura geral do projeto.

Figura 5.1 - Diagrama de Caso de Uso do sistema do Cliente.

Figura 5.2 Diagrama de Caso de Uso sistema do Funcionário.

Figura 5.3 Tela de login.

Figura 5.4 Tela de cadastro.

Figura 5.5 Tela de seleção de mesas.

Figura 5.6 Solicitar Dividir Conta Mesa.

Figura 5.7 Tela de informações de usuários.

Figura 5.8 Tela de lista de produtos.

Figura 5.9 Tela de divisão de pedidos.

Figura 5.10 Tela de atualização de status de pedidos.

Figura 5.11 Tela de finalização de conta.

Figura 5.12 Diagrama de Entidade e Relacionamento.

15


16/73

RESUMO

A aplicação proposta por este trabalho visa facilitar o gerenciamento de contas nos bares

automatizando a parte de anotação de pedidos, divisão da conta entre os usuários da mesa e dando a oportunidade dos clientes visualizarem todas as informações de pedidos feitos, lista

de produtos e totalização da conta pelo seu celular particular, a aplicação visa também evitar a

efetuação de pedidos indevidos por parte do garçom, a perda de comandas, cálculo não

precisos e qualquer outra falha humana possível.

O Sistema Mobile Multiplataforma de Cardápio e Comanda para Restaurante utiliza

ferramentas com as devidas caraterísticas de portabilidade de forma que o seu o desenvolvimento possa atender a uma parcela significativa do mercado, já que os usuários de

um restaurante usam uma grande variedade de celulares com sistemas operacionais

diferentes.

Com o grande desenvolvimento tecnológico voltado a aparelhos mobile , abrem-se novas

oportunidades para informatizar atividades que, há pouco tempo, seriam consideradas

inviáveis. Ainda existe muita confusão para se fazer um pedido ao garçom e pagar e dividir

conta nos bares e restaurantes onde turmas de amigos se reúnem. Visando essa carência

percebemos a oportunidade de criar um sistema que automatiza esta atividade.

A variedade de aparelhos com sistemas operacionais diferentes, dificulta o

desenvolvimento de aplicações que atendam todo o mercado, já que na fabricação de um

software nativo é necessário ter conhecimento sobre o sistema operacional e a linguagem de

programação específicos de cada equipamento. O tempo de desenvolvimento é extenso e os

custos são altos para atender todo o mercado, pois é necessário um profissional especializado para desenvolver as aplicações para cada um dos sistemas operacionais.

16


17/73

Então para resolver essas dificuldades, surgiram os webapps , que são aplicativos

desenvolvidos para smartphones , mas que rodam via navegador web. Com esse novo modo

de atender o mercado houve uma grande evolução de tempo e redução de gastos, já que é

nessessário somente um desenvolvedor com conhecimentos web para desenvolver as

aplicações. A princípio o problema de falta de acesso aos recursos nativos do sistema limitava muito o tipo de aplicações, então criaram ferramentas para fazer a junção dos aplicativos

nativos e os web , assim nasceu o aplicativo hibrido.

Palavras chave:

Mobile, Restaurante, Bares, Multiplataforma, Cardápio.

ABSTRACT

The application proposed in this work aims to facilitate the account management on bars automating part of order taking, splitting the bill between the users table and giving the

opportunity for clients to view all information requests, list of products and aggregation of

account for your particular phone, the application also seeks to avoid effecting solicitations by

the waiter, the loss can command, not precise calculations and any other possible human error.

The Mobile Multiplatform System for Restaurant Menu Commands and tools with the

necessary characteristics of portability so that their development can meet a significant portion of the market, since users of a restaurant using a variety of mobile operating systems with

different.

17


18/73

With the great technological development aimed at mobile devices, opening new

opportunities to computerize activities that not long ago would be considered viable. There is still

much confusion to make a request to the waiter and pay and divide bill in bars and restaurants

where groups of friends gather. Aiming at this shortage realize the opportunity to create a

system that automates this activity.

A variety of devices with different operating systems, hampers the development of

applications that address the entire market, as in the manufacture of a native software is

necessary to have knowledge about the operating system and programming language specific

to each device. The development time is long and the costs are high to meet the entire market,

as a professional expert is needed to develop applications for each of the operating systems.

So to solve these difficulties, webapps, which are applications developed for smartphones,

but that run came via web browser. With this new way to meet the market there was a great

evolution of time and cost reduction, since it is only one nessessário with web developer to

develop applications knowledge. At first the problem of lack of access to native system

resources very limited type of applications, then created tools to make the junction of the web

and native applications, thus was born the hybrid application.

Keywords:

Mobile, Restaurant, Bar, Multiplatform, Menu.

18


19/73

INTRODUÇÃO

O Sistema de cardápio e comanda é um aplicativo multiplataforma desenvolvido para

gerenciar os pedidos do cliente em um restaurante através de dispositivos móveis, celulares

smartphones, tablets e similares.

Com o grande desenvolvimento tecnológico voltado a aparelhos mobile , abrem-se novas

oportunidades para informatizar atividades que, há pouco tempo, seriam consideradas

inviáveis. Ainda existe muita confusão para se fazer um pedido ao garçom e pagar e dividir

conta nos bares e restaurantes onde turmas de amigos se reúnem. Visando essa carência

percebemos a oportunidade de criar um sistema que automatiza esta atividade.

O processo atual consiste em ter, em cada mesa do restaurante, uma comanda de papel

onde o cliente faz o pedido diretamente para o garçom, então, ele anota o pedido no papel do

cliente e em uma comanda avulsa para, então, buscar o conteúdo do pedido. Neste momento

iniciam-se os problemas, pois, o garçom pode anotar o pedido errado, esquecer de detalhes,

fazer anotações indevidas, o papel do cliente pode se perder, ficar danificado, e caso tenha

mais de um cliente na mesa, a divisão de contas fica bem mais difícil, pois, todos pedem na

mesma comanda da mesa. Pensando em resolver este problema e considerando a conjuntura

atual dos aparelhos móveis e tecnologias de desenvolvimento disponíveis, optou-se pelo

desenvolvimento de uma aplicação Web Mobile que possibilite o fácil acesso ao cardápio e à

realização de pedidos de forma rápida e descomplicada.

O propósito do sistema é gerenciar a consulta ao cardápio, a realização dos pedidos e

flexibilizar e facilitar o rateio da conta entre os clientes de uma mesa. Além disso, promover

facilidades para o acompanhamento da conta e do andamento dos pedidos feitos pelo cliente,

até a chegada do pedido à mesa e a atualização do status destes pedidos que são feitos por um funcionário do restaurante.

19


20/73

Este trabalho se divide em cinco capítulos. O capitulo um descreve a evolução dos

aplicativos, falando dos seus diferentes tipos, vantagens e desvantagens. O capitulo dois fala

das ferramentas que ajudam a tornar o desenvolvimento das aplicações multiplataforma e

enfatiza o Phonegap . O capitulo três é referente as linguagens utilizadas no desenvolvimento

mobile . O capitulo quatro fala da estrutura geral do sistema desenvolvido. E o capitulo cinco é referente a documentação e construção dos diagramas para especificar o projeto.

1 - Tipos de aplicações moveis.

A cada dia que passa é visível o crescimento de pessoas que usam smartphones , pode-se constatar esse fato observando nas ruas, onde boa parte da população utiliza as

funcionalidades de seus aparelhos à medida em que esperam em uma fila, o ônibus chegar ou

até mesmo enquanto caminham.

Em consequência desse crescimento, as aplicações móveis estão se tornando cada vez

mais relevantes e necessárias no dia-a-dia, pois elas entretêm, ajudam no desenvolvimento de

tarefas, agilizam a comunicação entre pessoas, registram informações, reproduzem vídeos,

músicas, livros, entre outras.

Por trás dessas aplicações amigáveis há estruturas de desenvolvimento que são

seccionadas em:

1.1 Aplicação Nativa

Aplicações nativas são sistemas desenvolvidos em cima de uma linguagem de

programação especifica para uma plataforma, por exemplo para Windows Phone utiliza-se

20


21/73

XAML e o C#, para o IOS o COCOA Touch e o Object-C e para Android o XML e o Java. Ao

desenvolver a aplicação em uma dessas plataformas você o submete em uma das lojas

especificas para cada sistema operacional e o usuário transfere e instala no aparelho

acessando assim a aplicação por um ícone na tela principal. [5]

As vantagens de uma aplicação nativa são:

1. A velocidade, já que eles tem acesso direto ao sistema operacional e são

programados especificamente na linguagem nativa do dispositivo [3].

2. Acesso aos recursos disponíveis para o sistema operacional como câmera, GPS,

acelerômetro, bússola, lista de contatos entre outros. [3]

3. Um SDK que facilita no desenvolvimento e na realização de testes e debug. [3]

4. Ter diagnósticos do dispositivo como nível de bateria e status da internet. [3]

Como desvantagem temos:

1. A incompatibilidade entre plataformas. [3]

2. A tempo, pois terá que desenvolver uma versão para cada sistema operacional. [3]

3. O alto custo do desenvolvimento já que para cada plataforma tem que ter alguém

com o conhecimento especifico dela. [3]

4. A manutenção que quando feita, tem que ser para todas as plataformas desenvolvidas, isso gastaria muito tempo e recursos dos desenvolvedores. [3]

21


22/73

1.2 Aplicação Web

Webapps são websites que possuem aparência e comportamento equivalente aos

aplicativos nativos e são executados por navegadores de internet como o Chrome ou Firefox.

Essas aplicações também podem ser acessadas através de um ícone na tela inicial quando colocados como favoritos nesta mesma tela e funcionam normalmente online. [5]

As vantagens de uma aplicação web são:

1. O desenvolvimento de uma aplicação que funcione em qualquer plataforma que

tenha suporte a algum navegador web. [3]

2. Atualizações rápidas e que não tem a necessidade da interação do usuário para

acontecer, pois a aplicação funcionam em um servidor e não no aparelho. [2]

3. O usuário pode acessar a aplicação de várias maneiras como: tablet,

smarthphone, Desktop entre outros com suporte a web. [2][3]

4. É muito mais barata por não ter que contratar vários desenvolvedores com

conhecimento especifico para cada plataforma. [3]

5. Os erros podem ser corrigidos em tempo real. [3]

Como desvantagem temos:

1. O suporte a aplicações que rodam offline são limitadas em alguns navegadores

web. [5]

2. É mais lenta por rodar por trás de um navegador web. [5]

22


23/73

3. Tem limitações de acesso aos recursos de hardware que o sistema operacional

oferece, pois são limitadas aos recursos que o navegador tem acesso. [5]

Com a evolução do HTML5 algumas dessas desvantagens desapareceram, como as aplicações que precisavam de internet para rodar, podem agora rodar offline e também

apareceram novas APIs que disponibilizam acesso a mais recursos como acelerômetro,

geolocalização, câmera e microfone. O que significa que a evolução das aplicações tendem

para o desenvolvimento web, já que é possível acessar boa parte dos recursos nativos do

sistema por este tipo de aplicação, tem-se então bem mais vantagens se desenvolvermos via

web. [5]

1.3 Aplicações Hibridas

Aplicação hibrida é a junção dos aplicativos nativos com os web, aproveitando todas as

vantagens de uma aplicação web e alguns recursos das aplicações nativas, elas rodam como

um aplicativo nativo e tem seu desenvolvimento em linguagens web preparadas para a

plataforma mobile. Um bom exemplo de ferramenta que faz a conversão de um web app para

uma aplicação hibrida é o phonegap. [5]

A figura 1.1 ilustra as três estruturas de uma aplicação, mostrando que a nativa e a hibrida

conseguem facilmente comunicar com os recursos da aplicação, enquanto a web é carente

desses recursos.

23


24/73

Figura 1.1 - Representação das aplicações nativas, web e hibridas em um aparelho celular. [4]

2 - PhoneGap

Com o intuito de viabilizar o desenvolvimento de aplicações multiplataformas para

atender todo o mercado mobile, algumas empresas criaram frameworks onde o programador

desenvolve uma aplicação e esse frameworks converte a aplicação para funcionar como um

aplicativo nativo em várias plataformas como Windows Phone, Android, IOS, entre outras.

Algumas das ferramentas que estão no mercado são Rhodes, Appcelerator, XUI e

PhoneGap que iremos abordar neste capítulo.

24


25/73

2.1 Descrição

Phonegap é uma ferramenta para o desenvolvimento de aplicações mobile, onde o

programador desenvolve um webapp e ele o transforma em uma aplicação que funciona como

nativa.

A ferramenta foi projetada para tornar o desenvolvimento de aplicações mobile mais

rápido e fácil já que utilizada tecnologias já existentes no mercado a muito tempo como CSS,

HTML5 e o JavaScript, as interfaces são construídas através do HTML, a lógica de

programação e os recursos mobile são tratados com o JavaScript, possibilitando também o

uso de vários scripts como Jquery, JqueryMobile e dentro desta logica do JavaScript que é

feita a comunicação com a API do phonegap. E devido as várias telas dos diferentes aparelhos temos um grande problema de ajuste de resolução que é suprido com o CSS que são

encarregados de ajustar a tela de acordo com o aparelho e outros detalhes de UI.

Além dos recursos básicos que o HTML proporciona, phonegap também tem suporte a alguns

recursos importantes nativos de cada plataforma como acelerometro, câmera, bússola,

contatos, geolocalização, notificações, media e internet. [16]

A figura 2.1 ilustra os recursos disponíveis para acessar pela aplicação com o phonegap

de acordo com cada plataforma.

25


26/73

Figura 2.1 - Tabela que mostra os recursos disponíveis via Phonegap para cada plataforma.

[16]

3 - Linguagens

Para o desenvolvimento de um webapp temos que usar algumas ferramentas que são

essenciais para o bom funcionamento e aparência do sistema, são elas: HTML, CSS e

JavaScript. Onde HTML faz toda a apresentação da informação na tela, o CSS faz todos os

ajustes de cores, tamanhos de telas e outras aparências e o JavaScript fica por conta de toda a logica do sistema, como cálculos, conexões e armazenamento de informações.

3.1 HTML

3.1.1 Descrição

HTML foi criada em 1990 por um cientista com o nome de Tim Berners-Lee e tinha o propósito inicial de tornar possível a troca e acesso de informações entre cientistas de várias

universidades, pois antes dessa invenção a visualização era feita através de textos via email,

26


27/73

FTP entre outros. Tim Berners-Lee projetou a linguagem para rodar em um servidor central e

ser acessada através de navegadores de internet em uma estação de trabalho. [8]

O significado das siglas são “Linguagem de Marcação de HiperTexto”, HTML é uma

linguagem de marcação de texto e através dela, o navegador sabe como exibir as informações, separando o conteúdo entre imagem, vídeos, músicas entre outros. E ela

reconhece essas estruturas sob um conjunto pré definido de informações que são chamadas

de tags. [7]

As tags são definitas pelos símbolos de maior e menor e para a tag de finalização a tag é

prefixada por uma barra.

A figura 3.1 ilustra um código HTML e seu resultado lido por um navegador web, onde

significa colocar o texto em modo itálico, significa colocar o texto em

negrito e

significa um parágrafo.

Figura 3.1 - Figura construída através do exemplo de um tutorial no website [7]

3.1.2 Evolução do HTML5

Com a evolução do HTML4 para o HTML5 novas tags apareceram e houve mudanças de

outras já existentes, pois as versões antigas não tinham um padrão para a criação de seções comuns e distintas como rodapé, cabeçalho, sidebar, menus, entre outras. E assim

conseguimos dividir a área de conteúdo indicado onde exatamente estará o texto.

27


28/73

Essas mudanças tornam o desenvolvimento mais simples e sistemas como os de

buscadores conseguem minerar informações mais facilmente já que as informações estão bem

seccionadas.

Já pode ser perceptível a grande quantidade de sites que utilizam a tecnologia, como exemplo tem o youtube que já deixam que os usuários verem os vídeos via html5. [9] [10]

3.2 CSS

3.2.1 Descrição

Com a evolução do HTML surgiram novos aplicativos, facilidades, softwares entre outros,

as informações em modo texto já não eram o suficiente para a construção de páginas da web

interativas, pois visualmente o html não era nada flexível. Então novas tags foram inventadas

como e e então surgiu um começo da estilização.

O HTML passou a ser algo além de estrutura de conteúdo através de marcação e passou

a fazer também uma estrutura de aparência, porém com duas funções surgiu também o

problema de estrutura de documentação, pois eles passaram a ser extensos, sofisticados e

estavam fugindo do controle de seus criadores.

E então a solução foi dividir a Estrutura de marcação da de estilização, assim nasceu o

CSS.

28


29/73

3.2.2 CSS Linguagem de Estilos

CSS é uma linguagem para definir estilos de layout de documentos HTML, ele controla

fontes, cores, margens, linhas, alturas, larguras, imagens de fundo, posicionamentos entre

outros.

As vantagens do CSS para aplicações web são uma revolução para a área de web

design, pois ele controla o layout de vários documentos em uma simples página de estilos, tem

uma melhor precisão no controle do layout e pode ser aplicado para várias mídias como

impressoras, telas e etc.

A figura 3.2 ilustra umseletor que é o alvo da regra do css, a declaração que determina os parâmetros responsáveis pelo estilo e dentro da da declaração temos a propriedade que

define qual será a característica do seletor a receber o estilo e o valor que quantifica ou

qualifica a propriedade.

Figura 3.2- Estrutura de uma regra de CSS. [12]

A figura 3.3 ilustra como uma folha de estilos css pode influenciar vários documentos

HTML, fazendo assim um reuso e uma facilidade para fazer a manutenção de uma página, já

que só precisa modificar um documento para fazer uma manutenção do visual, diferentemente

do HTML que precisaria editar seletor por seletor.

29


30/73


31/73

uma linguagem que tornasse a aplicação web mais dinâmica. Então foi criado em 1995 o

JavaScript pela netscape com parceria da sun microsystem, javascript é uma linguagem de

script incorporada ao HTML e permite executar comandos via cliente, ou seja via navegador e

não servidor web.

3.3.2 JavaScript a linguagem de programação

JavaScript funciona como pequenos programas embutidos em um documento HTML e é

capaz de gerar números, processar dados, gerenciar formulários, manipular valores no

documento HTML e até criar novos elementos para a exibição. Todos esses processos rodam

no cliente, evitando que o servidor fique sobrecarregado com vários processamentos e trafego

de informações na rede . [13]

A linguagem torna as páginas web mais dinâmica, com recursos interativos como

mudança de cor de botões após algum evento, exibir horário atual, validar formulários,

comunicação com servidores entre outras, javascript tem uma vasta usabilidade e várias

ferramentas projetadas para facilitar o desenvolvimento como Ajax que faz as requisições web

de uma forma simples e Json que estabelece um padrão de comunicação entre por exemplo

um cliente e um servidor. [14]

A figura 3.4 ilustra um código HTML e embutido neste código através das tags

um pequeno javascript onde a variávela recebe o valor 2, a variávelb recebe

o valor 9, c recebe a soma dos valores de a e b e então emite um alerta com o resultado

armazenado em c;

31


32/73

Figura 3.4- Código HTML com um script de javascript embutido. [6]

3.3.2.1 Ajax

Foi criada para agilizar e simplificar as requisições web, sendo totalmente transparente

para o usuário. Ajax faz com que as atualizações de informações sejam somente onde precisa

e não na página inteira, economizando assim banda e processamento do navegador para

recarregar uma página, pois só se atualiza os dados que receber na requisição. [22]

A figura 3.5 ilustra uma função ajax passando uma informação na variável “data” e

mostrando na tela um resultado qualquer retornado do servidor com a função “alert()”.

32

http://www.google.com/url?q=http%3A%2F%2Fwww.developergarden.com%2Fen%2Fblog%2Farticles%2Farticle%2Fnative-vs-web-app-vs-hybrid-what-is-the-optimal-developer-strategy%2F&sa=D&sntz=1&usg=AFQjCNHwvB8fpo3cb-5p6lLm3Y0MEyQFUghttp://www.google.com/url?q=http%3A%2F%2Fwww.developergarden.com%2Fen%2Fblog%2Farticles%2Farticle%2Fnative-vs-web-app-vs-hybrid-what-is-the-optimal-developer-strategy%2F&sa=D&sntz=1&usg=AFQjCNHwvB8fpo3cb-5p6lLm3Y0MEyQFUghttp://www.google.com/url?q=http%3A%2F%2Fwww.developergarden.com%2Fen%2Fblog%2Farticles%2Farticle%2Fnative-vs-web-app-vs-hybrid-what-is-the-optimal-developer-strategy%2F&sa=D&sntz=1&usg=AFQjCNHwvB8fpo3cb-5p6lLm3Y0MEyQFUghttp://www.google.com/url?q=http%3A%2F%2Fwww.developergarden.com%2Fen%2Fblog%2Farticles%2Farticle%2Fnative-vs-web-app-vs-hybrid-what-is-the-optimal-developer-strategy%2F&sa=D&sntz=1&usg=AFQjCNHwvB8fpo3cb-5p6lLm3Y0MEyQFUg


33/73

Figura 3.5 - Código ajax comunicação simples com um servidor.

3.3.2.2 Json

Json é um modelo de armazenamento e transmissão de informações no formato texto, é muito simples de usar e mais rápido do que o XML para ser consumido por uma aplicação, já

que seu formato é bem compacto.

A sintaxe do Json é um subconjunto do javaScript sendo colocada no formato

“Nome:Valor” , onde os dados são separados por virgula ”,” , as chaves “{ }” significam um

objeto e os colchetes “[ ]” matrizes. [15]

A figura 3.6 ilustra um arquivo Json com três objetos dentro de um vetor com informações de id, Name e Email.

Figura 3.6- Arquivo Json [23]

33

http://www.google.com/url?q=http%3A%2F%2Fwww.developergarden.com%2Fen%2Fblog%2Farticles%2Farticle%2Fnative-vs-web-app-vs-hybrid-what-is-the-optimal-developer-strategy%2F&sa=D&sntz=1&usg=AFQjCNHwvB8fpo3cb-5p6lLm3Y0MEyQFUghttp://www.google.com/url?q=http%3A%2F%2Fwww.developergarden.com%2Fen%2Fblog%2Farticles%2Farticle%2Fnative-vs-web-app-vs-hybrid-what-is-the-optimal-developer-strategy%2F&sa=D&sntz=1&usg=AFQjCNHwvB8fpo3cb-5p6lLm3Y0MEyQFUg


34/73

3.3.2.3 Jquery

Após a frustração com JavaScript por ser uma linguagem de difícil desenvolvimento para se

obter os resultados pretendidos John Resig, um desenvolvedor com profundos conhecimentos

em JavaScript, publicou resultados de seus estudos que visava simplificar a linguagem, assim nasceu o Jquery, um framework do JavaScript que reúne métodos, classes e namespaces

prontos e compilados em um arquivo, que visa simplificar a implementação. [18]

A figura 3.7 ilustra uma tabela onde mostra a sintaxe de acesso a elementos utilizada em

JavaScript mais complicada e em Jquery uma forma mais simples. Vale lembrar que mesmo

utilizando este framework a utilização da sintaxe em javascript é disponível, ou seja, jquery não

substitui e sim complementa o desenvolvimento.

Figura 3.7 Sintaxe JavaScript e Jquery. [18]

3.4 Java

3.4.1 Descrição

Java é uma linguagem de alto nível desenvolvida pela Sun Microsystem e que teve

bastante aceitação graças a vantagens como orientação a objeto, ser multiplataforma,

multitarefa, robusta, segura e distribuída. Criada em meados de 1995, supriu a necessidade de

comunicação entre aplicações heterogênias. [20]

A figura 3.8 ilustra um documento com código em Java, onde a função principal “main” da

classe “Exemplo1” chama uma função “Imprime_Msg” que imprime uma mensagem na tela do

usuário.

34


35/73

Figura 3.8 sintaxe de um código java. [20]

3.4.2 Servlet

Servlet é basicamente uma biblioteca da linguagem Java direcionada a pequenos

servidores que tem o objetivo de receber e processar as informações de uma requisição

HTTP. [21]

O funcionamento do servlet é basicamente o seguinte:

1. Cliente envia uma requisição ao servidor. [21]

2. O servidor servlet responsável trata a requisição e responde ao cliente. [21]

3. O cliete recebe a informação processada. [21]

A figura 3.9 ilustra um exemplo de um servidor servlet que retorna uma página HTML com o

texto “Hello World”.

35


36/73

Figura 3.9 Servidor em java usando a biblioteca Servlet. [21]

3.5 MySQL

MySQL é um SGDB ou seja, um sistema gerenciamento de banco de dados que utiliza a

linguagem SQL, Sua utilização é muito simplificada e tem bons recursos de gerencia, além de

ser multiusuário, multitarefa e tem compatibilidade com a maioria dos sistemas operacionais

disponíveis no mercado o que o torna bem utilizado. MySQL é de código aberto, e permite que os usuários enriqueçam ele com novos recursos. [24]

3.6 Tomcat

Tomcat foi desenvolvido pela fundação Apache e é um servidor web ou pode funcionar

integrado a um servidor web dedicado como Apache ou o ISS, responsável pela execução de

aplicações para web, sua principal característica e estar centrada na linguagem de

programação Java, especificamente nas tecnologias de Servlet e Java Server Pages. [25]

36


37/73

Capitulo 4 - Estrutura Geral do Sistema

O sistema é composto por 3 subprojetos, dois que são mobile, sendo um utilizado pelo

cliente do restaurante e o outro pelo funcionário responsável pela elaboração e entrega do

medido a mesa. E por ultimo um web service que é responsável por obter e fornecer os dados do sistema mobile.

4.1 Exemplo de funcionamento de todo o sistema

O cliente tem duas forma de efetuar um pedido, uma é pelo aplicativo mobile

desenvolvido para o cliente e a outra é através da comanda tradicional de papel.

O cliente que usar o aplicativo mobile, deve estar devidamente cadastrado e ter um nome

de usuário e senha. Caso não tenha cadastro o sistema possibilita um cadastramento de

clientes. Após fazer a autenticação, o usuário pode abrir uma mesa disponível ou solicitar um

usuário de uma mesa ocupada para dividir a conta daquela mesa. Com uma conta aberta em

alguma mesa o cliente faz seus pedidos através de um cardápio incluso no sistema que já faz o

registro no sistema informando valor ao cliente, o funcionário analisa o pedido e entrega na

mesa do cliente. Para encerrar a conta do cliente ele se dirige a algum funcionário, informa seu

nome de usuário e mesa, o funcionário informa o valor a pagar, cliente paga a conta de

pedidos que ele fez e o funcionário encerra a conta dele naquela mesa, deixando a conta da

mesa aberta para outros usuários na mesa ainda fazer novos pedidos.

O cliente que usar a comanda tradicional, chama o funcionário para abrir a mesa, o

funcionário preenche o formulário da comanda de papel e cada pedido que o cliente fizer o

funcionário tem que ser solicitado e ele tem que anotar na comanda o pedido feito pelo cliente.

Para finalizar uma conta, o cliente chama o funcionário e deve ser calculado o valor que o cliente consumiu e então ele paga sua parte e fecha a conta parcialmente.

37


38/73

A figura 4.1 ilustra a estrutura geral do projeto.

Figura 4.1 ilustra a estrutura geral do projeto.

4.2 Recursos

4.2.1 Cliente e Funcionário

Para o desenvolvimento das aplicações de cliente e funcionários fo utilizado HTML para a

marcação das informações, CSS com Bootstrap para auxiliar em um melhor visual, Jquery para

o processamento de informações juntamente com json que padroniza o tipo de comunicação

das informações entre o servidor e os clientes e Ajax que faz a comunicação e atualização das

informações como valores da conta, mesas disponíveis no momento, pedidos feitos, lista de

produtos e qualquer outra informação que venha a necessitar de uma atualização em tempo

real.

38

https://www.google.com.br/search?safe=off&es_sm=122&q=necessitar&spell=1&sa=X&ei=1wOaU9HmPOXjsAT7noGoDA&ved=0CBsQvwUoAA


39/73

4.2.2 Servidor

Por parte do servidor foi utilizado a linguagem java juntamente com a biblioteca servlet

que fica responsável por receber as informações dos clientes, processa las e as responder,

para o banco de dados responsável por armazenar as informações dos pedidos, dados pessoais feitos pelo cliente e informações de produtos foi utilizado o SGDB MYSQL e foi

utilizado o TOMCAT que é responsável por manter o servidor ativo para as aplicações cliente o

acessar.

Capitulo 5 - Sistema Mobile

O sistema mobile consiste em duas aplicações uma para o funcionário e outra para o cliente, onde a aplicação do funcionário terá uma lista de pedidos que o cliente já fez com as

informações da mesa e detalhes do pedidos para que ele possa atualizar o status do pedido.

A aplicação do cliente terá uma lista de produtos que ele pode pedir, podendo escolher a

quantidade e outros clientes pareados com a mesa podem também participar da divisão deste

pedido.

5.1. Documentação do projeto

5.1.1. Documento de especificação de requisitos

Este documento expõe os requisitos de engenharia de software no qual foram estudados

e que visam proporcionar uma documentação de qualidade dos requisitos do sistema de

software a ser desenvolvido.

39


40/73

5.1.1.1. Proposito

O proposito do sistema é gerenciar a conta da mesa através de contas mobile, dividindo

pedidos de acordo com cada usuário pareado na mesa. Dando a oportunidade de dividir

também um pedido para várias contas mobile, além do acompanhamento da conta, do andamento dos pedidos feitos pelo cliente até a chegada do pedido a mesa e a atualização do

status destes pedidos que são feitas por um funcionário do restaurante..

5.1.1.2. Escopo

Este documento tem o intuito de demostrar com clareza as especificações dos requisitos

levantados, os elementos e funções do produto de software, facilitando o entendimento dos interessados.

5.1.2. Perspectivas do produto

5.1.2.1. Interface do sistema

A interface do sistema tem um papel importante de simplificar e ter uma forma comum

para que o usuário se interaja bem com o mesmo, possibilitando um uso de forma intuitiva.

5.1.2.1.1. Interface com usuário

A interface do usuário estará presente nas duas aplicações sendo cada uma delas

referente a um operador do sistema.

5.1.2.1.1.1. Interface do cliente

● A 1ª interface contém o login e senha do usuário.

40


41/73

● A 2ª interface contém o formulário de cadastro do usuário, caso ainda não esteja

cadastrado no sistema.

● A 3ª interface contém uma lista de mesas com os botões “Abrir” ou“Solicitar” referentes

a conta da mesa da lista. Contêm também na parte superior os botões “Home”, “Produtos” e

“Pedidos” que é comum para todas as interfaces adiante.● A 4ª interface contém os valores “Total a Pagar”, “Total Celular a Pagar” e “Total pago”

referente a conta da mesa. Contém também uma lista de usuários vinculados a mesa com o

nome e o status dele na mesa.

● A 5ª interface contém a lista de categorias dos produtos.

● A 6ª interface contém uma lista de subcategorias dos produtos da categoria

selecionada na interface anterior.

● A 7ª interface contém uma lista de produtos da subcategorias selecionada na interface anterior, com o nome, descrição, um campo para preencher a quantidade e os botões

“Comprar” e “Comentários”.

● A 8ª interface contém uma lista de pedidos feitos com o status do pedido ou um botão

“Aceitar”.

5.1.2.1.1.2. Interface do funcionário

● A 1ª interface contém uma lista de pedidos com número da mesa, o produto, a

quantidade e uma série de botões com o nome de “Processar”, “Produzir” e “Entregar”.

Contém também na parte superior os botões “Pedidos”, “Contas” e “Outros”.

● A 2ª interface contém uma lista de mesas com status aberto.

● A 3ª interface contém uma lista de Usuários da mesa selecionada na interface anterior.

● A 4ª interface contém as informações de “Total a pagar” e “Total Celular a pagar”,

contém um campo pata preencher com o total que o usuário quer pagar e um botão com o nome “Pagar”.

41


42/73


43/73

Razão Para que cada cliente pague somente o que consumiu na mesa e

facilite no fechamento da conta de forma que o cliente não tenha que

fazer cálculos e se esforce a lembrar do que pediu na conta.

Tabela 5.2 - RF002-Divisão de contas.

ID RF003

Nome Solicitar participação de Conta Mesa

Descrição Em uma mesa com uma conta já aberta, um cliente pode solicitar a

algum usuário a participação da divisão desta conta mesa.

Razão Para não ocorrer pedidos indevidos de pessoas não autorizadas a

mesa, os clientes que abriram a mesa são os que autorizam novos

usuários a acessar a conta mesa e fazer pedidos.

Tabela 5.3 - RF003-Solicitar participação de Conta Mesa

ID RF004

Nome Fazer pedido somente com a conta da mesa aberta

Descrição O cliente só pode efetuar o pedido quando o usuário dele estiver ativo

em alguma conta da mesa que esteja aberta.

Razão Para que o funcionário saiba onde ele tem que entregar o pedido e para

o cálculo do pagamento da conta o cliente deve estar com alguma conta

da mesa aberta.

Tabela 5.4 - RF004-Fazer pedido somente com a conta da mesa aberta

ID RF005

43


44/73


45/73

Tabela 5.7 - RF007-Não permitir nome de usuário igual a um existente

5.1.1.2.2 Requisitos Não Funcionais

ID RNF001

Nome Ambiente mobile

Descrição As aplicações dos clientes vão rodar em smartphones.

Razão Para uma boa mobilidade o sistema irá rodar em smartphones

particulares dos usuários.

Tabela 5.8 - RNF001- Ambiente mobile

ID RNF002

Nome Campos numéricos

Descrição Limitar os campos que devem receber números para receber somente

números.

Razão Para não ocorrer erro de tipo de dados no sistema é importante limitar

os campos para receber somente o esperado.

Tabela 5.9 - RNF002- Campos numéricos

ID RNF003

Nome Quantidade de caracteres no campo

Descrição Limitar a quantidade de caracteres dos campos que recebem valores.

45


46/73

Razão Para não ocorrer erro de tipo de dados no sistema é importante limitar

os campos para receber somente o esperado.

Tabela 5.10 - RNF003- Quantidade de caracteres no campo

ID RNF004

Nome Dividir produtos em categorias e subcategorias

Descrição Na tela de produtos para localizar um produto primeiro se escolhe a

categoria dele e sua respectiva subcategorias, para depois escolher o

produto desejado.

Razão Ao dividir os produtos a localização e organização de produtos do

mesmo grupo facilitam para tornar mais eficiente a busca do cliente

pelo que deseja.

Tabela 5.11- RNF004- Dividir produtos em categorias e subcategorias

ID RNF005

Nome Mascara de Telefone

Descrição Ter uma máscara para validar telefones digitados de forma incorreta.

Razão Para garantir que os usuários não digite telefones errados, validar com

uma máscara os telefones no cadastro.

Tabela 5.12- RNF005-Mascara de Telefone

ID RNF006

Nome Máscara de Email

Descrição Ter uma máscara para validar emails digitados de forma incorreta.

46


47/73

Razão Para garantir que os usuários não digite emails errados, validar com

uma máscara os emails no cadastro.

Tabela 5.13- RNF006-Mascara de Email

ID RNF007

Nome Cadastramento de Senha

Descrição Para cadastramento de senha o tamanho mínimo da senha é de 6

dígitos.

Razão Para não ocorrer problemas com senhas fáceis e para garantir a

segurança e confiabilidade dos pedidos feitos pelo usuário toda senha

deve ter 6 ou mais dígitos.

Tabela 5.14 - RNF007-Cadastramento de Senha

47


48/73

5.1.1.3. Caso de uso

5.1.1.3.1 Diagrama de caso de uso

5.1.1.3.1.1 Cliente

A figura5.1 ilustra o Diagrama de Caso de uso do sistema do cliente.

Figura 5.1 Diagrama de Caso de Uso do sistema do Cliente

5.1.1.3.1.2 Funcionário

A figura5.2 ilustra o Diagrama de Caso de uso do sistema do Funcionário.

Figura 5.2 Diagrama de Caso de Uso sistema do Funcionário

48


49/73


50/73

Tela

Figura 5.3 Tela de login.

Tabela 5.15 - UC-001-Fazer Login

ID UC-002

Nome Cadastrar Usuário

Atores Cliente

Descrição Para que o usuário consiga fazer a autenticação ele precisa ter

um nome de usuário e senha cadastrado no sistema.

Pré-condições Ter o sistema instalado no smartphone

Pós-condições Ter o registro do usuário cadastrado no sistema

50


51/73

Campos ● Nome de usuário

● Senha

● Telefone

● Email

Fluxo Normal 1) Digitar Nome de usuário

2) Digitar Senha

3) Digitar Telefone

4) Digitar Email

5) Clicar no botão “Cadastrar”

Fluxo Exceção 1) E1 Nome de usuário já existente no sistemaa) Informa ao usuário que o nome de usuário não está

disponível.

b) Volta para a ação 1 do fluxo principal

Requisitos

Relacionados

● RF007

● RNF003

● RNF005

● RNF006

● RNF007

51


52/73

Tela

Figura 5.4 Tela de cadastro.

Tabela 5.16- UC-002-Fazer Cadastrar Usuário

ID UC-003

Nome Abrir Conta Mesa

Atores Cliente

Descrição Para fazer pedido o cliente deve estar com uma conta aberta em

alguma mesa

52


53/73


54/73

Tela

Figura 5.5 Tela de seleção de mesas.

Tabela 5.17 - UC-003-Abrir Conta Mesa

ID UC-004

Nome Solicitar Dividir Conta Mesa

Atores Cliente

54


55/73

Descrição Para que mais de um cliente use a conta da mesa para facilitar

na hora da divisão de pedidos, o sistema dá a opção do cliente

solicitar a divisão da conta mesa.

Pré-condições 1. Estar autenticado no sistema2. Ter uma conta aberta por outro usuário

Pós-condições Ter acesso a efetuação de pedidos da conta mesa aberta

Fluxo Normal 4. O sistema mostra uma lista de mesas disponíveis para

solicitar divisão de conta.

5. O usuário escolhe a mesa que quer dividir a conta

6. O usuário clica no botão “Solicitar” para dividir a conta7. Usuário aguarda alguém da conta mesa liberar acesso a

ele

8. Usuário é aceito na conta mesa

Fluxo Exceção 1) E1 Usuário ativo na conta mesa recusa solicitação

a) Informa ao usuário que algum usuário rejeitou o

pedido dele.

b) Volta para a ação 1 do fluxo principal

Requisitos

Relacionados

● RF001

● RF004

55


56/73

Tela

A figura 5.6 Solicitar Dividir Conta Mesa.

Tabela 5.18- UC-004-Solicitar Dividir Conta Mesa

ID UC-005

Nome Aceitar/Recusar Usuário na Conta Mesa

Atores Cliente

Descrição Aceita/recusar o usuário na conta mesa caso algum solicite entrar

56


57/73


58/73

Tela

A figura 5.7 Tela de informações de usuários.

Tabela 5.19- UC-005-Aceitar/Recusar Usuário na Conta Mesa

ID UC-006

Nome Fazer Pedidos

Atores Cliente

Descrição Passos para efetuar um pedido através do sistema

Pré-condições 3. Estar autenticado no sistema

58


59/73

4. Estar em um grupo ativo de uma conta mesa

Pós-condições Ter o pedido cadastrado no sistema

Fluxo Normal

1. O usuário clica no botão “Produtos”

2. O sistema retorna uma lista de categorias de produtos

3. O usuário escolhe uma categoria de produtos

4. O sistema retorna uma lista de sub-categorias

5. O usuário escolhe uma sub-categoria

6. O sistema retorna uma lista de produtos com os campos

de quantidade para digitar

7. O usuário escolhe o produto, digita a quantidade e clica no botão “Comprar”

Requisitos

Relacionados

● RF001

● RF004

● RNF002

● RNF003

● RNF004

Tela

59


60/73

A figura 5.8 Tela de lista de produtos.

Tabela 5.20- UC-006-Fazer Pedidos

ID UC-007

Nome Dividir Pedidos

Atores Cliente

Descrição Passos para efetuar a divisão de um pedido através do sistema

60


61/73

Pré-condições 1. Estar autenticado no sistema

2. Estar em um grupo ativo de uma conta mesa

3. Ter um pedido no qual o cliente não faz parte

Pós-condições Ter o pedido dividido no sistema

Fluxo Normal

1. O usuário clica no botão “Pedidos”

2. O sistema retorna uma lista de pedidos efetuados

3. O usuário escolhe um pedido e clica no botão “Aceitar”

Requisitos

Relacionados

● RF001

● RF004

● RF005

● RNF002

● RNF003

Tela

61


62/73

Figura 5.9 Tela de divisão de pedidos.

Tabela 5.21- UC-007-Dividir Pedidos

5.1.1.3.2.2 Funcionário

ID UC-001

Nome Manter Pedidos

Atores Funcionário, Cliente

62


63/73

Descrição Para o cliente ficar ciente da situação do pedido que ele fez o

sistema do funcionário dá a opção de informar qual o status do

pedido até chegar na mesa.

Fluxo Normal

1. Processar Pedido

a. O sistema retorna uma lista de pedidos a processar

b. O funcionário escolhe o pedido que quer processar e

aperta no botão “Processar”

2. Produzir pedido

a. O sistema retorna uma lista de pedidos a produzirb. O funcionário escolhe o pedido que quer produzir e aperta

no botão “Produzir”

3. Entregar Pedido

a. O sistema retorna uma lista de pedidos a produzir

b. O funcionário escolhe o pedido que quer entregar e aperta

no botão “Entregar”

Tela

63


64/73

Figura 5.10 Tela de atualização de status de pedidos.

Tabela 5.22- UC-001-Manter Pedidos

ID UC-002

Nome Encerrar Conta Cliente

Atores Funcionário, Cliente

Descrição Quando o cliente quer encerrar a conta ele se dirige a um

funcionário e faz o pedido de encerramento de conta.

Pré-condições O usuário tem que estar com a conta aberta no sistema.

64


65/73

Pós-condições Conta do usuário solicitante estar como encerrada no sistema

Fluxo Normal

1. Cliente se dirige ao funcionário com numero da mesa e

nome de usuário.2. Funcionário clica no botão “Contas”

3. O sistema retorna uma lista de mesas “em aberto”.

4. Funcionário escolhe a mesa que foi lhe informado.

5. O sistema retorna uma lista de usuários ativos na mesa.

6. O funcionário escolhe o nome de usuário que foi lhe

informado

7. O sistema retorna os valores “Total a pagar”, “Total celular a pagar” e um campo com opção de colocar o valor que o cliente

deseja pagar.

8. O funcionário abate o valor que o cliente pagou e clica no

botão “Pagar”

RequisitosRelacionados

1. RF0062. RNF002

3. RNF003

Tela

65


66/73

A figura 5.11 Tela de finalização de conta.

Tabela 5.23 - UC-002-Encerrar Conta Cliente

66


67/73

5.1.1.4. Modelo De Entidade e Relacionamento

A figura 5.12 ilustra um ilustra um diagrama de entidade e relacionamento referente a

organização do banco de dados do sistema Mobimenu .

A figura 5.12 Diagrama de Entidade e Relacionamento.

67


68/73

Conclusão

Ao perceber a evolução dos smartphones e quão grande era seu potencial na

automatização de pedidos em um restaurante surgiu o tema deste projeto, pois até então o

sistema de cardápio e comandas eram separados e feitos de papel o que desgasta com o

tempo, se molhar e pode se perder. Com a aplicação desenvolvida o cliente que possuir um

smartphone com os sistemas operacionais mais comuns como Windows phone, Android e ios,

tem a vantagem de poder fazer o pedido através de seus aparelhos, agilizando e deixando ele mais informado sobre a situação do mesmo.

Até então a plataforma testada foi a Android, para desenvolver para as outras plataformas

seria necessário aparelhos e ferramentas especificas, para adicionar a biblioteca do

phonegap e chamar o webapp.

O desenvolvimento desta aplicação proporcionou um aprendizado sobre novas

tecnologias e conhecimentos na área de desenvolvimento web e mobile mostrando que

aplicações web tendem a evoluir e se adaptar cada vez mais a recursos nativos dos variados

smartphones.

No estudo de novas tecnologias foi encontrado um problema quanto ao servidor,

primeiramente foi escolhido o Node.js, uma ferramenta nova e bastante interessante para

criação do servidor feita em javascript, porem não tinha gerência de thread, fazendo com que

as informações chegassem ao servidor de forma não ordenada com a solicitação, deixando os

valores desatualizados e como a aplicação exigia valores atualizados e corretos, houve a necessidade de procurar outra ferramenta.

68


69/73

Também foi notado uma lentidão quanto ao processamento de dados comparada com

uma aplicação nativa, portanto para aplicações pequenas que não utilizam muitos cálculos é

viável o uso da ferramenta.

E mesmo com os problemas constatados o desenvolvimento da aplicação ocorreu muito

bem e todos os requisitos do projeto foram atendidos, nos testes não houve problema de travamento.

Trabalhos futuros

Pretende-se adquirir ferramentas e aparelhos para testar a aplicação em novas

plataformas, e que esteja disponível para download a aplicação do cliente nas lojas especificas

de cada sistema operacional no qual a aplicação foi adaptada.

Também pretende-se desenvolver novas partes da aplicação, como reserva de mesas,

um sistema de comentário de pratos disponíveis, sistema de bate-papo entre o grupo da

mesma mesa e de mesas separadas, um sistema de geração de captcha em tempo real para

que o usuário só possa acessar a mesa do local especifico do restaurante, um histórico de

pedidos anteriores para que o cliente possa consultar e implementar algumas técnicas de

seguranças para evitar ataques ao sistema..

Referências Bibliograficas

[1] Web Apps ou aplicativos nativos? Disponível em: (4 de maio de 2014)

[2] Aplicações mobile: Web ou Nativa?Disponível em: (4 de maio de 2014)

69

http://www.google.com/url?q=http%3A%2F%2Fwww.mobits.com.br%2F2010%2F11%2F26%2Fweb-apps-ou-aplicativos-nativos&sa=D&sntz=1&usg=AFQjCNH2RQKxtDVcgs5CGMe6uExW9DsJ2whttp://www.google.com/url?q=http%3A%2F%2Fwww.mobits.com.br%2F2010%2F11%2F26%2Fweb-apps-ou-aplicativos-nativos&sa=D&sntz=1&usg=AFQjCNH2RQKxtDVcgs5CGMe6uExW9DsJ2w


70/73

[3] Desenvolvimento Mobile: Web App vs Native App.Disponível em: (4 de maio de 2014)

[4] Native vs. web app vs. hybrid – what is the optimal developer strategy?

Disponível em: (4 de maio de 2014)

[5] Diferença entre Aplicativos Nativos, Híbridos e Mobile Web Apps.Disponível em:

(6 de maio de 2014)

[6] Exemplo básico, manipulação de variável - JavaScript.Disponível em: (9 de maio 2014)

[7] Introdução ao HTML.

Disponível em: (9 de maio de 2014)

[8] O que é HTML?Disponível em:


71/73

[13] Javascript - Introdução à linguagem Javascript.Disponível em: (12 de maio de 2014)

[14] Aprendendo JavaScript.Disponível em: (12de maio 2014)

[15] O que é JSON, como e quando utilizar?Disponível em: (13 de maio de 2014)

[16] Setyo Pamungkas, Zainul . PhoneGap Build Starter. leanpub, 2014

[17] About the Project Phonegap.Disponível em: (16 de maio de 2014)

[18] Introdução a Jquery.

Disponivel em: (11 de

junho de 2014)

[19] O que é bootstrap?

Disponivel em:

(11 de junho de 2014)

[20] Introdução à linguagem Java

Disponivel em: (12 de junho de

2014)

[21] Introdução à Servlets em Java

Disponivel em: (12 de

junho de 2014)

71


72/73

[22] O que é o Ajax e como ele pode ajudar nos seus projetos?

Disponivel em:


[23] ASP.NET Web API melhorando o retorno JSON dos seus serviços REST.

Disponivel em:


[24] Introdução ao MySQL.

Disponivel em: (12 de junho de 2014)

[25] Conheça o Apache Tomcat.

Disponivel em:


72


73/73

Victor Hugo Benevides Sobrinho

Documents

Transcript of Victor Hugo Benevides Sobrinho