Um sistema com o objetivo de simplificar e agilizar o processo de venda de comidas e bebidas em eventos, como shows, exposições e festivais, eliminando a necessidade de pontos de venda físicos por meio de cardápios digitais com fluxo de checkout. Quando um pedido é finalizado, o sistema retorna ao consumidor códigos QR (fichas digitais) referentes aos itens adquiridos, permitindo que ele os troque posteriormente pelos produtos durante o evento. As fichas são validadas pelo funcionário do evento, por meio de um aplicativo mobile que inclui uma ferramenta de escaneamento.

O processo de venda proposto moderniza a experiência tanto dos consumidores quanto dos organizadores. O uso de novas tecnologias e a gestão de estoque em tempo real contribuem para uma solução inovadora e de fácil adoção.

O planejamento e o acompanhamento das tarefas do projeto foram realizados utilizando a metodologia Kanban, implementada na aba Projects deste repositório. Essa abordagem permitiu uma visualização clara do progresso, priorização de tarefas e organização das entregas ao longo do desenvolvimento.

Acessar Projects do Repositório

A aplicação web foi implantada na plataforma Vercel, que oferece uma infraestrutura serverless otimizada para aplicações desenvolvidas com Next.js. Essa escolha permitiu um processo de deploy contínuo, com integração automática ao repositório GitHub. O acesso à versão em produção pode ser feito por meio do link abaixo:

Acessar Tuscan Web!

📦 Temos APKs prontos para você testar!

Ver builds Android

Ou baixe o APK pelo navegador

Este guia fornecerá todas as instruções necessárias para configurar e executar os dois projetos do Tuscan:

• 🌐 Web (Next.js) – Gerenciamento do evento e vendas.
• 📱 Mobile (React Native com Expo) – Validação de QR Codes pelos funcionários do bar.

Acessar pastas do código fonte

Antes de iniciar, certifique-se de ter as seguintes ferramentas instaladas:

• Node.js (Versão recomendada: LTS)
• Visual Studio Code
• Git
• Para o Mobile: Expo Go (disponível na Play Store e App Store)

Caso ainda não tenha o Node.js instalado, baixe e instale a versão LTS a partir do site oficial:

• Download Node.js

Após a instalação, verifique se o Node.js e o npm estão disponíveis:

node -v  # Exibe a versão do Node.js
npm -v   # Exibe a versão do npm

Execute o comando abaixo para clonar este repositório:

git clone https://github.com/ICEI-PUC-Minas-PPLES-TI/plf-es-2024-2-tcci-0393100-dev-bernardo-rohlfs-e-eric-jardim.git
cd plf-es-2024-2-tcci-0393100-dev-bernardo-rohlfs-e-eric-jardim

📂 Caminho do projeto: ./Codigo/my-app

Dentro da pasta do projeto web, instale as dependências necessárias:

cd Codigo/my-app
npm install

Para iniciar o ambiente de desenvolvimento do Next.js, utilize:

npm run dev

Após a execução, o projeto estará disponível em http://localhost:3000.

Se preferir evitar instalar o Node.js e dependências diretamente na sua máquina, você pode utilizar o ambiente Dockerizado com suporte a Dev Containers no VS Code.

• Docker
• Visual Studio Code
• Extensão Dev Containers instalada no VS Code

1. No terminal, dentro da raiz do projeto, execute os seguintes comandos:

docker-compose build
docker-compose up

2. Abra o Visual Studio Code na pasta do projeto (raiz que contém .devcontainer).

3. O VS Code deve sugerir automaticamente a opção:

"Reabrir no Dev Container"

📂 Caminho do projeto: ./Codigo/my-mobile-app

Dentro da pasta do projeto mobile, instale as dependências necessárias:

cd Codigo/my-mobile-app
npm install

Para rodar o app no seu celular, baixe o Expo Go:

• Android: Baixar na Play Store
• iOS: Baixar na App Store

Após instalar o Expo Go, inicie o projeto mobile com:

npm run start

Isso abrirá o Metro Bundler. Agora:

1. No Android, escaneie o QR Code usando o Expo Go.
2. No iOS, abra o Expo Go e insira a URL gerada pelo Metro Bundler.

Para melhor experiência durante o desenvolvimento, recomendamos instalar as seguintes extensões no VS Code:

• Material Icon Theme
• Color Highlight
• Tailwind CSS IntelliSense
• Tailwind Docs
• Tailwind Fold

Para compilar o projeto web e gerar uma versão otimizada para produção, execute:

npm run build

Isso realizará a verificação de TypeScript e ESLint antes da construção 💎.

Se precisar gerar um APK/IPA para distribuição, utilize o Expo EAS:

npx expo install -g eas-cli
eas build --platform android

(O comando pode variar dependendo da plataforma e configurações do Expo.)

📌 Projeto Web (Next.js):

• cd Codigo/my-app && npm install
• npm run dev → http://localhost:3000

📌 Aplicativo Mobile (React Native com Expo):

• cd Codigo/my-mobile-app && npm install
• Baixe o Expo Go e rode npm run start
• Escaneie o QR Code no Expo Go.

Agora tudo está pronto! 🚀

Veja abaixo o GIF que demonstra o funcionamento do protótipo do aplicativo mobile, especificamente a funcionalidade de leitura de um código QR usando a câmera do dispositivo, por meio do SDK do Expo.

A seguir, alguns prints das telas da interface web do projeto, desenvolvida com Next.js. Eles ilustram as principais funcionalidades e o design da aplicação.

Este projeto utiliza dois frameworks de testes para garantir qualidade e estabilidade da aplicação:

• Jest para testes unitários de lógica de negócio.
• Playwright para testes E2E (End-to-End), cobrindo os principais fluxos de usuário.

Jest é utilizado para validar funções puras e lógicas da aplicação — especialmente as funções do carrinho de compras, como:

• addItem – Adiciona um item ao carrinho.
• updateQuantity – Atualiza a quantidade de um item.
• removeItem – Remove um item do carrinho.
• clearCart – Limpa todos os itens.
• Outros...

"test": "jest",
"test:watch": "jest --watch",
"test:coverage": "jest --coverage"

• Os testes ficam na pasta: ./tests
• Os arquivos seguem o padrão: *.test.ts

Playwright é utilizado para simular o comportamento real do usuário e validar o funcionamento da aplicação ponta-a-ponta.

• Login de usuários.
• Cadastro de eventos.
• Cadastro de produtos.
• Listagem e visualização de eventos e produtos.
• Outros...

"test:e2e": "playwright test",
"test:e2e:headed": "playwright test --project=chromium --headed",
"test:e2e:debug": "playwright test --debug",
"test:e2e:ui": "playwright show-report"

• Os testes estão localizados em: ./e2e
• Arquivos seguem o padrão: *.spec.ts

Caso tenha dúvidas ou problemas, sinta-se à vontade para abrir uma issue no repositório! 🚀