scanm.art
1.0.0
Scanmart App ist eine Web-App für einen Self-Checkout-Workflow, bei dem Kunden die Produkte selbst scannen und in ihren Warenkorb legen können.
Die App wurde mit Hilfe von create-react-app erstellt und um folgende Bibliotheken/Tools/Pakete ergänzt:
Der Code wird in einem GitHub-Repository gespeichert und die App wird auf Netlify bereitgestellt. Netlify startet den Build- und Bereitstellungsprozess jedes Mal, wenn es eine Änderung gibt, z. B. eine zusammengeführte PR im main . Die Firebase-Konfiguration (App-ID, App-URL usw.) wird als Umgebungsvariablen gespeichert.
Um die App lokal auszuführen, scrollen Sie bitte nach unten und befolgen Sie die Anweisungen von CRA. Damit die Kamera lokal funktioniert, fügen Sie eine .env-Datei im Stammverzeichnis des Projekts hinzu und fügen Sie diesen Wert HTTPS=true ein. Erstellen Sie die App neu und es sollte funktionieren.
Für die Funktionalitäts- und UI-Forschung verwendete Materialien:
Schließlich diente die Barcoo-App als größte Inspiration für die Benutzeroberfläche und UX. Ich habe grundsätzlich das Design jeder der oben genannten Apps (sofern verfügbar) überprüft und versucht, die am besten geeigneten Teile für meine App zu finden. Nachdem ich mit der UI/UX-Recherche zufrieden war, habe ich versucht, einen Namen zu finden. Der Trick bestand darin, etwas zu finden, das Sinn macht, aber noch nicht verwendet wurde, also über eine verfügbare Domain verfügt. Ich habe mich für Scanmart entschieden, das aus den beiden Wörtern „scan“ und „market“ besteht, und habe die Domain „ scanm.art “ gekauft, um ihre Einzigartigkeit sicherzustellen.
Dieses Projekt ist auf scanm.art verfügbar.
Ich wollte nicht viel Zeit mit dem Logo verlieren und habe mich daher für ein überwiegend typografisches Logo entschieden. Es wurden Eckränder hinzugefügt, um das Design eines Barcodescanners zu simulieren. Die verwendete Schriftart ist Poppins. Ich habe eine Google-Schriftart verwendet, da diese kostenlos ist und ihre Lizenz eine kommerzielle Nutzung erlaubt.
 |  |
|---|---|
| Hauptlogo | Favicon |
 |  |  |  |  |
|---|---|---|---|---|
| Start | Hauptbildschirm | Kamerafehler | Modal scannen | Korb |
Im Ordner src befindet sich alles.
Der assets -Ordner enthält die im Projekt verwendeten Bilder/Symbole sowie die benutzerdefinierten Stile und Grafiken, die in der README-Datei verwendet werden.
Der Ordner components enthält, wie der Name schon sagt, die in diesem Projekt verwendeten Komponenten. Sie werden jeweils in separaten Ordnern gespeichert.
context enthält den Korb- und Offcanvas-Kontext, der dazu dient, Informationen über die Seitenleiste und die gescannten Elemente in der gesamten App bereitzustellen.
Der Ordner utils enthält eine Dienstprogrammfunktion.
Der Ordner views enthält die in dieser App verwendeten Ansichten.
Die gesamte App ist so strukturiert, dass Kontextanbieter die Routen umschließen und die Routen ein Layout enthalten, das die Ansichten, dh ihre Unterrouten, weiter darstellt.
.
|-- 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
Dieses Projekt wurde mit Create React App gebootstrappt.
Im Projektverzeichnis können Sie Folgendes ausführen:
npm start Führt die App im Entwicklungsmodus aus.
Öffnen Sie http://localhost:3000, um es in Ihrem Browser anzuzeigen.
Die Seite wird neu geladen, wenn Sie Änderungen vornehmen.
Möglicherweise werden auch Flusenfehler in der Konsole angezeigt.
npm test Startet den Testläufer im interaktiven Überwachungsmodus.
Weitere Informationen finden Sie im Abschnitt zum Ausführen von Tests.
npm run build Erstellt die App für die Produktion im build -Ordner.
Es bündelt React im Produktionsmodus korrekt und optimiert den Build für die beste Leistung.
Der Build wird minimiert und die Dateinamen enthalten die Hashes.
Ihre App ist bereit zur Bereitstellung!
Weitere Informationen finden Sie im Abschnitt zur Bereitstellung.
npm run eject Hinweis: Dies ist ein einseitiger Vorgang. Sobald Sie eject , können Sie nicht mehr zurück!
Wenn Sie mit dem Build-Tool und den Konfigurationsoptionen nicht zufrieden sind, können Sie es jederzeit eject . Dieser Befehl entfernt die einzelne Build-Abhängigkeit aus Ihrem Projekt.
Stattdessen werden alle Konfigurationsdateien und die transitiven Abhängigkeiten (Webpack, Babel, ESLint usw.) direkt in Ihr Projekt kopiert, sodass Sie die volle Kontrolle darüber haben. Alle Befehle außer eject funktionieren weiterhin, verweisen jedoch auf die kopierten Skripte, sodass Sie sie optimieren können. An diesem Punkt sind Sie auf sich allein gestellt.
Sie müssen niemals eject verwenden. Der kuratierte Funktionsumfang eignet sich für kleine und mittlere Bereitstellungen, und Sie sollten sich nicht verpflichtet fühlen, diese Funktion zu verwenden. Wir verstehen jedoch, dass dieses Tool nicht nützlich wäre, wenn Sie es nicht anpassen könnten, wenn Sie dazu bereit sind.
Weitere Informationen finden Sie in der Dokumentation zum Erstellen einer React-App.
Um React zu lernen, schauen Sie sich die React-Dokumentation an.
Dieser Abschnitt wurde hierher verschoben: https://facebook.github.io/create-react-app/docs/code-splitting
Dieser Abschnitt wurde hierher verschoben: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
Dieser Abschnitt wurde hierher verschoben: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
Dieser Abschnitt wurde hierher verschoben: https://facebook.github.io/create-react-app/docs/advanced-configuration
Dieser Abschnitt wurde hierher verschoben: https://facebook.github.io/create-react-app/docs/deployment
npm run build kann nicht minimiert werdenDieser Abschnitt wurde hierher verschoben: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify
