scanm.art
1.0.0
Scanmart App — это веб-приложение, используемое для процесса самообслуживания, где покупатели могут сами сканировать продукты и добавлять их в свою корзину.
Приложение было создано с помощью create-react-app и дополнено следующими библиотеками/инструментами/пакетами:
Код хранится в репозитории GitHub, а приложение развертывается на Netlify. Netlify запускает процесс сборки и развертывания каждый раз, когда происходит изменение, то есть объединенный PR в main ветке. Конфигурация Firebase (идентификатор приложения, URL-адрес приложения и т. д.) хранится как переменные среды.
Чтобы запустить приложение локально, прокрутите вниз и следуйте инструкциям CRA. Чтобы камера работала локально, добавьте файл .env в корень проекта и вставьте в него это значение HTTPS=true . Пересоберите приложение, и оно должно работать.
Материалы, использованные для исследования функциональности и пользовательского интерфейса:
Наконец, приложение barcoo послужило источником вдохновения для создания пользовательского интерфейса и UX. Я в основном просмотрел дизайн каждого из вышеупомянутых приложений (там, где оно было доступно) и попытался найти наиболее подходящие части для моего приложения. Удовлетворившись исследованием UI/UX, я попытался придумать название. Хитрость заключалась в том, чтобы найти что-то, что имеет смысл, но что ранее не использовалось, т.е. имеет доступный домен. Я остановился на Scanmart , который представляет собой продукт двух слов «сканировать» и «рынок», и купил домен « scanm.art », чтобы обеспечить его уникальность.
Этот проект доступен на scanm.art.
Я не хотел терять много времени на логотип, поэтому выбрал преимущественно типографский. К нему добавлены угловые границы, имитирующие дизайн сканера штрих-кода. Используемый шрифт — Poppins. Я использовал шрифт Google, потому что они бесплатны и их лицензия разрешает коммерческое использование.
 |  |
|---|---|
| Главный логотип | Фавикон |
 |  |  |  |  |
|---|---|---|---|---|
| Начинать | Главный экран | Ошибка камеры | Модальное сканирование | Корзина |
Папка src — это место, где все находится.
Папка assets содержит изображения/значки, использованные в проекте, а также пользовательские стили и графику, используемые в файле README.
Папка 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.
В каталоге проекта вы можете запустить:
npm start Запускает приложение в режиме разработки.
Откройте http://localhost:3000, чтобы просмотреть его в браузере.
Страница перезагрузится, когда вы внесете изменения.
Вы также можете увидеть любые ошибки в консоли.
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.
