scanm.art
1.0.0
Scanmart 应用程序是一款用于自助结账工作流程的网络应用程序，客户可以自行扫描产品并将其添加到购物篮中。
该应用程序是在 create-react-app 的帮助下构建的，并补充了以下库/工具/包：
代码存储在 GitHub 存储库中，应用程序部署在 Netlify 上。每次发生更改（即main分支上合并 PR）时，Netlify 都会启动构建和部署过程。 Firebase 配置（应用 ID、应用 URL 等）存储为环境变量。
要在本地运行该应用程序，请向下滚动并按照 CRA 提供的说明进行操作。为了让相机在本地工作，请在项目的根目录中添加一个 .env 文件，并在其中插入此值HTTPS=true 。重建应用程序，它应该可以工作。
用于功能和 UI 研究的材料：
最后，barcoo 应用程序是 UI 和 UX 的最大灵感来源。我基本上审查了上述每个应用程序的设计（如果可用），并尝试找到最适合我的应用程序的部分。一旦我对 UI/UX 研究感到满意，我就尝试想出一个名字。诀窍是找到一些有意义的东西，但以前没有使用过，即有一个可用的域。我选择了Scanmart ，它是“扫描”和“市场”两个词的产物，我购买了“ scanm.art ”域名以确保其独特性。
该项目可在 scanm.art 上获取。
我不想在徽标上浪费太多时间，所以我选择了一个主要是印刷的徽标。添加了角边框，以模拟条形码扫描仪设计。使用的字体是 Poppins。我使用了谷歌字体，因为它们是免费的，并且它们的许可证允许商业使用。
 |  |
|---|---|
| 主标志 | 网站图标 |
 |  |  |  |  |
|---|---|---|---|---|
| 开始 | 主屏幕 | 相机错误 | 扫描模态 | 篮子 |
src文件夹是所有内容所在的位置。
assets文件夹包含项目中使用的图像/图标，以及自述文件中使用的自定义样式和图形。
正如其名称所示， components文件夹包含该项目中使用的组件。它们各自存储在单独的文件夹中。
context文件夹包含 Basket & Offcanvas 上下文，用于提供有关侧边栏和整个应用程序中扫描项目的信息。
utils文件夹包含一个实用函数。
views文件夹包含此应用程序中使用的视图。
整个应用程序的结构是这样的，上下文提供者包装了路由，并且路由包含一个进一步呈现视图的布局，即它的子路由。
.
|-- 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
该项目是通过 Create React App 启动的。
在项目目录中，您可以运行：
npm start在开发模式下运行应用程序。
打开 http://localhost:3000 在浏览器中查看。
当您进行更改时，页面将重新加载。
您还可能在控制台中看到任何 lint 错误。
npm test在交互式监视模式下启动测试运行程序。
有关详细信息，请参阅有关运行测试的部分。
npm run build将用于生产的应用程序构建到build文件夹。
它在生产模式下正确捆绑 React 并优化构建以获得最佳性能。
构建被缩小，文件名包含哈希值。
您的应用程序已准备好部署！
有关详细信息，请参阅有关部署的部分。
npm run eject注意：这是一种单向操作。一旦eject ，就无法再返回！
如果您对构建工具和配置选择不满意，可以随时eject 。此命令将从您的项目中删除单个构建依赖项。
相反，它会将所有配置文件和传递依赖项（webpack、Babel、ESLint 等）复制到您的项目中，以便您可以完全控制它们。除eject之外的所有命令仍然有效，但它们将指向复制的脚本，以便您可以调整它们。此时你只能靠自己了。
您不必使用eject 。精选的功能集适合中小型部署，您不应该觉得有义务使用此功能。但是我们知道，如果您在准备好使用时无法对其进行自定义，则该工具将没有用处。
您可以在创建 React 应用程序文档中了解更多信息。
要学习 React，请查看 React 文档。
本节已移至此处：https://facebook.github.io/create-react-app/docs/code-splitting
本节已移至此处：https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
本节已移至此处：https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
本节已移至此处：https://facebook.github.io/create-react-app/docs/advanced-configuration
本节已移至此处：https://facebook.github.io/create-react-app/docs/deployment
npm run build无法缩小本节已移至此处：https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify
