scanm.art
1.0.0
Scanmart App é um aplicativo da web usado para um fluxo de trabalho de auto-checkout, onde os próprios clientes podem digitalizar os produtos e adicioná-los ao carrinho.
O aplicativo foi construído com a ajuda de create-react-app e complementado com as seguintes bibliotecas/ferramentas/pacotes:
O código é armazenado em um repositório GitHub e o aplicativo é implantado no Netlify. O Netlify inicia o processo de construção e implantação sempre que há uma mudança, ou seja, um PR mesclado na filial main . A configuração do Firebase (ID do aplicativo, URL do aplicativo etc.) é armazenada como variáveis de ambiente.
Para executar o aplicativo localmente, role para baixo e siga as instruções fornecidas pelo CRA. Para fazer a câmera funcionar localmente, adicione um arquivo .env na raiz do projeto e insira este valor nele HTTPS=true . Recrie o aplicativo e ele deverá funcionar.
Materiais usados para funcionalidade e pesquisa de UI:
Por fim, o app barcoo serviu de maior inspiração para UI e UX. Basicamente revisei o design de cada um dos aplicativos mencionados acima (onde estavam disponíveis) e tentei encontrar as partes mais adequadas para meu aplicativo. Quando fiquei satisfeito com a pesquisa UI/UX, tentei encontrar um nome. O truque foi encontrar algo que fizesse sentido, mas que não tenha sido utilizado anteriormente, ou seja, que tenha um domínio disponível. Optei pelo Scanmart , que é um produto de duas palavras “scan” e “market”, e comprei o domínio “ scanm.art ” para garantir sua exclusividade.
Este projeto está disponível em scanm.art.
Eu não queria perder muito tempo com o logotipo, então optei por um mais tipográfico. Existem bordas de canto adicionadas a ele, para simular o design de um leitor de código de barras. A fonte usada é Poppins. Usei uma fonte do Google, pois são gratuitas e sua licença permite uso comercial.
 |  |
|---|---|
| Logotipo principal | Favicon |
 |  |  |  |  |
|---|---|---|---|---|
| Começar | Tela principal | Erro de câmera | Modalidade de digitalização | Cesta |
A pasta src é onde tudo reside.
A pasta assets contém imagens/ícones usados no projeto, bem como os estilos personalizados e os gráficos usados no arquivo README.
A pasta components , como o próprio nome indica, contém os componentes usados neste projeto. Cada um deles é armazenado em pastas separadas.
A pasta context contém o contexto Basket & Offcanvas que serve para fornecer informações sobre a barra lateral e os itens digitalizados em todo o aplicativo.
A pasta utils contém uma função de utilitário.
A pasta views contém as visualizações usadas neste aplicativo.
Todo o aplicativo é estruturado de forma que os provedores de contexto envolvam as rotas e as rotas contenham um layout que apresenta ainda mais as visualizações, ou seja, suas subrotas.
.
|-- README.md
|-- netlify.toml
|-- package-lock.json
|-- package.json
|-- public
| |-- index.html
| |-- manifest.json
| |-- miniLogo.png
| `-- robots.txt
`-- src
|-- App.css
|-- App.js
|-- App.test.js
|-- assets
| |-- docs
| | |-- Basket.png
| | |-- CameraError.png
| | |-- MainScreen.png
| | |-- ScanModal.png
| | |-- Start.png
| | |-- faviconPresentation.png
| | |-- logo.ai
| | `-- logoPresentation.png
| |-- img
| | |-- bag.svg
| | |-- barcode.svg
| | |-- box.svg
| | `-- logo.png
| `-- scss
| |-- custom.css
| |-- custom.css.map
| `-- custom.scss
|-- components
| |-- BarcodeScanner
| | `-- BarcodeScanner.js
| |-- CartItem
| | |-- CartItem.js
| | `-- CartItem.stories.js
| |-- Controls
| | |-- Controls.js
| | `-- Controls.stories.js
| |-- Header
| | `-- Header.js
| |-- ItemModal
| | `-- ItemModal.js
| |-- Offcanvas
| | `-- OffcanvasComponent.js
| `-- VideoComponent
| `-- VideoComponent.js
|-- context
| |-- BasketContext.js
| `-- OffcanvasContext.js
|-- firebase.js
|-- index.js
|-- logo.svg
|-- reportWebVitals.js
|-- setupTests.js
|-- stories
| |-- Configure.mdx
| `-- assets
| |-- accessibility.png
| |-- accessibility.svg
| |-- addon-library.png
| |-- assets.png
| |-- avif-test-image.avif
| |-- context.png
| |-- discord.svg
| |-- docs.png
| |-- figma-plugin.png
| |-- github.svg
| |-- share.png
| |-- styling.png
| |-- testing.png
| |-- theming.png
| |-- tutorials.svg
| `-- youtube.svg
|-- utils
| `-- removeVideoElement.js
`-- views
|-- Main
| `-- Main.js
`-- Start
`-- Start.js
Este projeto foi inicializado com Create React App.
No diretório do projeto, você pode executar:
npm start Executa o aplicativo no modo de desenvolvimento.
Abra http://localhost:3000 para visualizá-lo em seu navegador.
A página será recarregada quando você fizer alterações.
Você também pode ver erros de lint no console.
npm test Inicia o executor de teste no modo de observação interativo.
Consulte a seção sobre execução de testes para obter mais informações.
npm run build Cria o aplicativo para produção na pasta build .
Ele agrupa corretamente o React no modo de produção e otimiza a construção para obter o melhor desempenho.
A compilação é reduzida e os nomes dos arquivos incluem os hashes.
Seu aplicativo está pronto para ser implantado!
Consulte a seção sobre implantação para obter mais informações.
npm run eject Nota: esta é uma operação unilateral. Depois de eject , você não pode voltar!
Se não estiver satisfeito com a ferramenta de compilação e as opções de configuração, você poderá eject a qualquer momento. Este comando removerá a dependência de compilação única do seu projeto.
Em vez disso, ele copiará todos os arquivos de configuração e as dependências transitivas (webpack, Babel, ESLint, etc) diretamente no seu projeto para que você tenha controle total sobre eles. Todos os comandos, exceto eject , ainda funcionarão, mas apontarão para os scripts copiados para que você possa ajustá-los. Neste ponto você está sozinho.
Você nunca precisa usar eject . O conjunto de recursos selecionados é adequado para implantações pequenas e médias e você não deve se sentir obrigado a usar esse recurso. No entanto, entendemos que esta ferramenta não seria útil se você não pudesse personalizá-la quando estiver pronto para isso.
Você pode aprender mais na documentação do Create React App.
Para aprender o React, verifique a documentação do React.
Esta seção foi movida para aqui: https://facebook.github.io/create-react-app/docs/code-splitting
Esta seção foi movida para aqui: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
Esta seção foi movida para aqui: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
Esta seção foi movida para aqui: https://facebook.github.io/create-react-app/docs/advanced-configuration
Esta seção foi movida para aqui: https://facebook.github.io/create-react-app/docs/deployment
npm run build falha ao minificarEsta seção foi movida para aqui: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify
