scanm.art
1.0.0
Scanmart アプリは、顧客が自分で商品をスキャンしてバスケットに追加できるセルフ チェックアウト ワークフローに使用される Web アプリです。
アプリは create-react-app を利用して構築され、次のライブラリ/ツール/パッケージが追加されました。
コードは GitHub リポジトリに保存され、アプリは Netlify にデプロイされます。 Netlify は、変更があるたびに、つまりmainブランチで PR をマージするたびに、ビルドとデプロイメントのプロセスを開始します。 Firebase 設定 (アプリ ID、アプリ URL など) は環境変数として保存されます。
アプリをローカルで実行するには、下にスクロールして CRA が提供する指示に従ってください。カメラをローカルで動作させるには、プロジェクトのルートに .env ファイルを追加し、そのファイルにこの値HTTPS=trueを挿入します。アプリを再構築すると機能するはずです。
機能性とUIの研究に使用されたマテリアル:
最後に、barcoo アプリは UI と UX の最大のインスピレーションとなりました。基本的に、上記の各アプリ (利用可能な場合) のデザインを見直し、自分のアプリに最適な部分を見つけようとしました。 UI/UXの調査に満足したら、名前を考えてみました。重要なのは、意味があるが以前に使用されていないもの、つまり使用可能なドメインを持つものを見つけることでした。私は「スキャン」と「マーケット」という 2 つの単語を組み合わせたScanmartに落ち着き、その一意性を確保するために「 scanm.art 」ドメインを購入しました。
このプロジェクトは scanm.art で入手できます。
ロゴの作成に多くの時間を費やしたくなかったので、ほとんどタイポグラフィーを使用したロゴを使用しました。バーコード スキャナーのデザインをシミュレートするために、コーナーの境界線が追加されています。フォントはポピンズを使用しています。 Google フォントは無料で、ライセンスにより商用利用が許可されているため、私は Google フォントを使用しました。
 |  |
|---|---|
| メインロゴ | ファビコン |
 |  |  |  |  |
|---|---|---|---|---|
| 始める | メイン画面 | カメラエラー | スキャンモーダル | バスケット |
srcフォルダーはすべてが存在する場所です。
assetsフォルダーには、プロジェクトで使用される画像/アイコンに加え、README ファイルで使用されるカスタム スタイルとグラフィックスが含まれています。
componentsフォルダーには、その名前が示すように、このプロジェクトで使用されるコンポーネントが含まれています。それぞれ別のフォルダーに保存されます。
contextフォルダーには、アプリ全体でサイドバーとスキャンされたアイテムに関する情報を提供するために機能する Basket & Offcanvas コンテキストが含まれています。
utilsフォルダーには 1 つのユーティリティ関数が含まれています。
viewsフォルダーには、このアプリで使用されるビューが含まれています。
アプリ全体は、コンテキスト プロバイダーがルートをラップし、ルートにはビュー、つまりそのサブルートをさらに表示する 1 つのレイアウトが含まれる方法で構造化されています。
.
|-- 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使用する必要はありません。厳選された機能セットは小規模および中規模の導入に適しており、この機能を使用する義務を感じる必要はありません。ただし、準備ができたときにカスタマイズできなければ、このツールは役に立たないことは理解しています。
詳細については、Create React App のドキュメントをご覧ください。
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
