ANA PÉROLA SIMÕES INÊS BEST FOOD: APLICATIVO ...Guia Front-End: O Caminho das pedras para ser um...

18
CURSO BACHARELADO EM SISTEMAS DE INFORMAÇÃO ANA PÉROLA SIMÕES INÊS BEST FOOD: APLICATIVO MOBILE DELIVERY Apucarana 2020

Transcript of ANA PÉROLA SIMÕES INÊS BEST FOOD: APLICATIVO ...Guia Front-End: O Caminho das pedras para ser um...

Page 1: ANA PÉROLA SIMÕES INÊS BEST FOOD: APLICATIVO ...Guia Front-End: O Caminho das pedras para ser um dev Front-End. São Paulo: Casa do Código, 2015. CARVALHO, Marly Monteiro; JUNIOR,

CURSO BACHARELADO EM SISTEMAS DE INFORMAÇÃO

ANA PÉROLA SIMÕES INÊS

BEST FOOD: APLICATIVO MOBILE DELIVERY

Apucarana 2020

Page 2: ANA PÉROLA SIMÕES INÊS BEST FOOD: APLICATIVO ...Guia Front-End: O Caminho das pedras para ser um dev Front-End. São Paulo: Casa do Código, 2015. CARVALHO, Marly Monteiro; JUNIOR,

ANA PÉROLA SIMÕES INES

BEST FOOD: APLICATIVO MOBILE DELIVERY

Trabalho de Conclusão de Curso apresentado ao Curso de Sistema de Informação da Faculdade de Apucarana – FAP, como requisito parcial à obtenção do título de Bacharel em Sistema. Orientador: Prof. Vinicius Pereira Campos.

Apucarana 2020

Page 3: ANA PÉROLA SIMÕES INÊS BEST FOOD: APLICATIVO ...Guia Front-End: O Caminho das pedras para ser um dev Front-End. São Paulo: Casa do Código, 2015. CARVALHO, Marly Monteiro; JUNIOR,

ANA PÉROLA SIMÕES INES

BEST FOOD: APLICATIVO MOBILE DELIVERY

Trabalho de Conclusão de Curso II apresentado ao

Curso de Bacharelado em Sistemas de Informação

da Faculdade de Apucarana – FAP, como requisito

para obtenção do título de Bacharel em Sistemas de

Informação, com nota final igual a _______,

conferida pela Banca Examinadora formada pelos

professores:

COMISSÃO EXAMINADORA

_________________________________________

Prof

Faculdade de Apucarana

_________________________________________

Prof

Faculdade de Apucarana

_________________________________________

Prof

Faculdade de Apucarana

Apucarana, ___ de ___________ de 2020.

Page 4: ANA PÉROLA SIMÕES INÊS BEST FOOD: APLICATIVO ...Guia Front-End: O Caminho das pedras para ser um dev Front-End. São Paulo: Casa do Código, 2015. CARVALHO, Marly Monteiro; JUNIOR,

Dedico e agradeço a Deus por este trabalho a

que me ofereceu a oportunidade de superar

desafios e obstáculos com muita paciência e

conhecimento.

Aos meus pais Cleber Braga e Anita

Simões pelo carinho e apoio, como também pelo

incentivo contínuo de nunca desistir dos meus

objetivos, visando sempre alcançar novas metas.

Page 5: ANA PÉROLA SIMÕES INÊS BEST FOOD: APLICATIVO ...Guia Front-End: O Caminho das pedras para ser um dev Front-End. São Paulo: Casa do Código, 2015. CARVALHO, Marly Monteiro; JUNIOR,

AGRADECIMENTOS

A Deus, pela minha vida, e por me ajudar a ultrapassar todos os obstáculos ao longo

do curso.

Aos meus pais, meus irmãos pelo carinho, incentivo e paciência, pois nas horas

difíceis sempre estiveram ao meu lado.

Ao orientador Vinicius Pereira Campos, ao professor Éder Yvan Gomes pelas

correções e ensinamentos que me permitiram apresentar um melhor desempenho no

meu processo deste trabalho.

A todos os professores que participaram, direta ou indiretamente do desenvolvimento

deste trabalho de pesquisa, enriquecendo o meu processo de aprendizado.

Às pessoas com quem convivi ao longo desses anos de curso, que me incentivaram

e que certamente tiveram impacto na minha formação acadêmica.

Page 6: ANA PÉROLA SIMÕES INÊS BEST FOOD: APLICATIVO ...Guia Front-End: O Caminho das pedras para ser um dev Front-End. São Paulo: Casa do Código, 2015. CARVALHO, Marly Monteiro; JUNIOR,

INES, Ana Pérola Simões. BEST FOOD – Aplicativo Mobile Delivery (3). Trabalho

de Conclusão de Curso (Monografia). Graduação em Sistema de Informação da

Faculdade de Apucarana. Apucarana-PR. 2020.

RESUMO

O objetivo do aplicativo Best Food seria saciar a demanda de consumidores de um

restaurante, permitindo que seus clientes consigam solicitar pedidos, utilizando

apenas um smartphone conectado à internet. Através de uma reunião formal com os

proprietários do estabelecimento, foi acordado os objetivos e detalhes do aplicativo.

O Best Food será um aplicativo para compra de determinados alimentos de um

restaurante especifico. Afim de proporcionar maior comodidade para os clientes, o

Best food será o primeiro aplicativo delivery desenvolvido para estar em real produção

no município de Faxinal - PR.

Palavras-chave: Restaurante. Aplicativo. Delivery.

ABSTRACT

The objective of the Best Food application would be to satisfy the demand of

consumers of a restaurant allowing your customers to be able to request orders, using

only a smartphone connected to the internet. Through a formal meeting with the

owners of the establishment, the objectives and details of the application were agreed.

The Best Food will be an application to purchase determined foods from a specific

restaurant. In order to provide greater convenience for customers, Best food will be the

first delivery application developed to be in real production in the municipality of

Faxinal-PR.

Keywords: Restaurant. Application. Delivery.

Page 7: ANA PÉROLA SIMÕES INÊS BEST FOOD: APLICATIVO ...Guia Front-End: O Caminho das pedras para ser um dev Front-End. São Paulo: Casa do Código, 2015. CARVALHO, Marly Monteiro; JUNIOR,

LISTA DE FIGURAS

FIGURA 1 – TELA HOME..........................................................................................8

FIGURA 2 – TELA LOGIN.........................................................................................9

FIGURA 3 – TELA DE CADASTRO GERAL............................................................10

FIGURA 4 – TELA DE RECADASTRO DE SENHA.................................................11

FIGURA 5 – TELA DE MENU(CARDAPIO).............................................................12

FIGURA 6 – TELA DE OPÇÕES..............................................................................13

FIGURA 7 – TELA DE PERFIL.................................................................................14

FIGURA 8 – TELA DE PEDIDO...............................................................................15

Page 8: ANA PÉROLA SIMÕES INÊS BEST FOOD: APLICATIVO ...Guia Front-End: O Caminho das pedras para ser um dev Front-End. São Paulo: Casa do Código, 2015. CARVALHO, Marly Monteiro; JUNIOR,

SUMÁRIO

1 INTRODUCAO ......................................................................................................... 7

1.1 Identificações do Sistema / Área de atuação do Sistema ................................. 7

1.2 Principais Características do Sistema ............................................................ 7

1.3 Equipamento necessário ................................................................................ 7

2 FUNDAMENTAÇÃO TEÓRICA ............................................................................... 8

2.1 Informações Básicas .......................................................................................... 8

2.2 Executar o Sistema ............................................................................................ 8

2.3 Efetuar o Login no Sistema ................................................................................ 9

2.4 Cadastro de Clientes ........................................................................................ 10

2.5 Cadastro de Senha .......................................................................................... 11

2.6 Visualização do Cardápio................................................................................. 12

2.7 ......................................................................................................................... 13

2.8 Visualização de Perfil .................................................................................... 14

2.9 Visualização do pedido criado .......................................................................... 15

3 REFERÊNCIAS ...................................................................................................... 16

Page 9: ANA PÉROLA SIMÕES INÊS BEST FOOD: APLICATIVO ...Guia Front-End: O Caminho das pedras para ser um dev Front-End. São Paulo: Casa do Código, 2015. CARVALHO, Marly Monteiro; JUNIOR,

7

1 INTRODUÇÃO

1.1 Identificações do Sistema / Área de atuação do Sistema

Este projeto irá atender as necessidades empregadas no estabelecimento

comercial localizado no centro da cidade, denominado como “Sr. Botequim” que tem

como objetivo atender ao município de Faxinal. A partir das informações coletadas, o

aplicativo desenvolvido é intitulado como “Best Food” que possibilita a compra de

lanches e outros alimentos disponibilizados no cardápio da empresa, fazendo com

que o próprio cliente monte e encaminhe seu pedido para que a lanchonete prepare-

o e realize a entrega de acordo com a informações inseridas pelo cliente.

1.2 Principais Características do Sistema

Dentre as principais características que marcam a identidade do aplicativo

BEST FOOD, podemos destacar:

• Facilidade de uso: O aplicativo foi desenvolvido, de uma maneira muito fácil,

para que o usuário tenha facilidade de utiliza-lo e com todas as especificações

necessárias para a satisfação do usuário.

• Maior comodidade: Este aplicativo será o primeiro dentro do município de

faxinal, pois até então o processo para solicitar e entregar comida, aconteceria de

forma mais burocrática.

1.3 Equipamento necessário

O BEST FOOD foi desenvolvido sob plataforma do sistema operacional Ubuntu

19.10 "Eoan Ermine", no quesito de desenvolvimento a linguagem de programação é

Ruby e JavaScript. Ruby é utilizado em conjunto com o framework Ruby on Rails que

implementa a regra de negócio (Backend), a linguagem de JavaScript é utilizada em

conjunto com o framework React Native que é responsável pela interface do aplicativo

(Frontend). O Sistema Gerenciador de Banco de Dados (SGBD) será o PostgreSQL

12.2, a ferramenta de modelagem utilizado é o software Draw.io.

Page 10: ANA PÉROLA SIMÕES INÊS BEST FOOD: APLICATIVO ...Guia Front-End: O Caminho das pedras para ser um dev Front-End. São Paulo: Casa do Código, 2015. CARVALHO, Marly Monteiro; JUNIOR,

8

2 FUNDAMENTAÇÃO TEÓRICA

2.1 Informações Básicas

Para começar a utilizar o aplicativo, o usuário precisará de um smartphone

que tenha acesso a internet, desta forma ele poderá baixar o app na ferramenta

Play-Store ou App Store.

2.2 Executar o Sistema

Após o download o cliente precisará clicar no ícone do App para utiliza-lo

normalmente.

FIGURA 1 – TELA HOME

Fonte: Autor da pesquisa, 2020.

Situado no canto inferior da tela o usuário deverá clicar no botão

denominado como “acessar” para dar continuidade ao processo de utilização.

Page 11: ANA PÉROLA SIMÕES INÊS BEST FOOD: APLICATIVO ...Guia Front-End: O Caminho das pedras para ser um dev Front-End. São Paulo: Casa do Código, 2015. CARVALHO, Marly Monteiro; JUNIOR,

9

2.3 Efetuar o Login no Sistema

FIGURA 2 – TELA DE LOGIN

Fonte: Autor da pesquisa, 2020.

Para que o cliente consiga utilizar o aplicativo com êxito, precisará realizar o

login com “e-mail” e “senha. Após inserir os dados solicitados, o cliente deverá clicar

em LOGIN, para dar continuidade ao processo de utilização do aplicativo.

Caso o cliente não tenha os dados solicitados, poderá clicar no botão “cadastre-

se” e assim será redirecionado para preencher um formulário.

Page 12: ANA PÉROLA SIMÕES INÊS BEST FOOD: APLICATIVO ...Guia Front-End: O Caminho das pedras para ser um dev Front-End. São Paulo: Casa do Código, 2015. CARVALHO, Marly Monteiro; JUNIOR,

10

2.4 Cadastro de Clientes

FIGURA 3 – TELA DE CADASTRO GERAL

Fonte: Autor da pesquisa, 2020.

Após o cliente clicar no botão “cadastre-se” da tela anterior, o mesmo precisará

preencher todos os campos obrigatórios para efetivar seu cadastro e poder realizar o

login no aplicativo na tela anterior.

Após o cadastro, se todos os campos forem preenchidos corretamente será

enviado um e-mail de confirmação.

O cliente poderá voltar a tela de login e clicar novamente no botão chamado

“login”, aguardar a validação para dar continuidade ao processo de utilização do

aplicativo.

Page 13: ANA PÉROLA SIMÕES INÊS BEST FOOD: APLICATIVO ...Guia Front-End: O Caminho das pedras para ser um dev Front-End. São Paulo: Casa do Código, 2015. CARVALHO, Marly Monteiro; JUNIOR,

11

2.5 Cadastro de Senha

FIGURA 4 – TELA DE RE-CADASTRO DE SENHA

Fonte: Autor da pesquisa, 2020.

Caso o cliente de alguma forma, em qualquer momento, queira redefinir a sua

senha por esquecimento ou qualquer outro motivo, o mesmo poderá clicar no botão

“enviar”.

Page 14: ANA PÉROLA SIMÕES INÊS BEST FOOD: APLICATIVO ...Guia Front-End: O Caminho das pedras para ser um dev Front-End. São Paulo: Casa do Código, 2015. CARVALHO, Marly Monteiro; JUNIOR,

12

2.6 Visualização do Cardápio

FIGURA 5 – TELA DE MENU

Fonte: Autor da pesquisa, 2020.

Após o login ser efetuado com sucesso, o cliente é redirecionado para tela de

menu, onde poderá visualizar os produtos do estabelecimento em questão.

O cliente visualizará primeiramente varias imagens rolando de forma lateral,

com informação das categorias de produtos que é oferecido pelo estabelecimento.

Caso haja interesse por parte do cliente, o mesmo poderá clicar em qualquer uma das

imagens e será redirecionado para uma listagem de produtos apenas daquela

categoria selecionada.

Nesta tela de menu ficará disponível uma área de pesquisa, para que o cliente

possa digitar um produto especifico que gostaria para o momento. Logo abaixo

podemos rolar vários produtos em destaques do dia, desta forma se o cliente se

interessar por qualquer produto o mesmo deverá clicar em Adicionar e assim será

incrementado no pedido este produto.

Page 15: ANA PÉROLA SIMÕES INÊS BEST FOOD: APLICATIVO ...Guia Front-End: O Caminho das pedras para ser um dev Front-End. São Paulo: Casa do Código, 2015. CARVALHO, Marly Monteiro; JUNIOR,

13

2.7 Visualizando Opções

FIGURA 6 – TELA DE OPÇÕES

Fonte: Autor da pesquisa, 2020.

Na mesma tela de Menu é possível clicar no ícone de opções e assim uma

palheta de opções aparecerá para que o cliente possa se dirigir a cada pagina

especifica.

Na primeira Opção vemos o titulo “Home” após clicar neste ícone você é

redirecionado a tela inicial “Login”.

Na primeira Opção vemos o título “Perfil” após clicar neste ícone você é

redirecionado a tela inicial “Perfil”.

Na primeira Opção vemos o título “Configurações” após clicar neste ícone você

é redirecionado a tela inicial “Configurações”.

Na primeira Opção vemos o título “Duvidas” após clicar neste ícone você é

redirecionado a tela inicial “Duvidas”.

Page 16: ANA PÉROLA SIMÕES INÊS BEST FOOD: APLICATIVO ...Guia Front-End: O Caminho das pedras para ser um dev Front-End. São Paulo: Casa do Código, 2015. CARVALHO, Marly Monteiro; JUNIOR,

16

Na primeira Opção vemos o título “Sair” após clicar neste ícone você é

deslogado do aplicativo e voltará a tela Home.

2.8 Visualização de Perfil

FIGURA 7 – TELA DE PERFIL

Fonte: Autor da pesquisa, 2020.

Nesta tela de Perfil o cliente visualizará todos os dados cadastrados

anteriormente e poderá alterar não somente os dados descritos, como também sua

senha caso dentro do aplicativo (com o cliente ainda logado) o mesmo queira refazer

sua senha, desta forma ele será redirecionado a tela de “redefinir senha”.

Abaixo dos dados cadastrados, é possível clicar nos botões:

Cupons: Neste botão o cliente será redirecionado para a tela de Cupons

disponíveis para seu CPF.

Pagamentos: Neste botão o cliente será redirecionado para a listagem de

pagamentos já realizados para o estabelecimento, através do aplicativo.

Page 17: ANA PÉROLA SIMÕES INÊS BEST FOOD: APLICATIVO ...Guia Front-End: O Caminho das pedras para ser um dev Front-End. São Paulo: Casa do Código, 2015. CARVALHO, Marly Monteiro; JUNIOR,

15

Endereços: Neste botão o cliente será redirecionado para a listagem de

endereços cadastrados pelo mesmo no aplicativo.

Ajuda: Neste botão o cliente será redirecionado para informações sobre o

estabelecimento, onde o mesmo poderá visualizar formas de contato, como também

a missão, visão e valores do estabelecimento.

Logout: Neste botão o cliente será deslogado do aplicativo, sendo

redirecionado para a tela “Home” tela de início.

2.9 Visualização do pedido criado

FIGURA 8 – TELA DE PEDIDO

Fonte: Autor da pesquisa, 2020.

Nesta tela de Pedido o cliente visualizará onde será realizado a entrega do

pedido em questão, caso queira trocar de endereço, ou ir buscar seu pedido

pessoalmente no estabelecimento. Desta forma abaixo é possível visualizar todos os

produtos já selecionados anteriormente, onde o cliente poderá verificar, excluir, ou até

mesmo inserir outros produtos contidos no cardápio (na tela de Menu).

Page 18: ANA PÉROLA SIMÕES INÊS BEST FOOD: APLICATIVO ...Guia Front-End: O Caminho das pedras para ser um dev Front-End. São Paulo: Casa do Código, 2015. CARVALHO, Marly Monteiro; JUNIOR,

16

3 REFERÊNCIAS

ESCUDELARIO, Bruna; PINHO, Diego. React Native: Desenvolvimento de

aplicativos mobile com React. São Paulo: Casa do Código, 2020.

EIS, Diego. Guia Front-End: O Caminho das pedras para ser um dev Front-End. São

Paulo: Casa do Código, 2015.

CARVALHO, Marly Monteiro; JUNIOR, Rabechini Roque. Fundamentos de Gestão

de Projetos: Construindo Competências para Gerenciar Projetos. São Paulo: Atlas 5ª

Edição, 2018