scanm.art

Aplicación Scanmart

La aplicación Scanmart es una aplicación web que se utiliza para un flujo de trabajo de autopago, donde los clientes pueden escanear los productos ellos mismos y agregarlos a su carrito.

La aplicación se construyó con la ayuda de create-react-app y se complementó con las siguientes bibliotecas/herramientas/paquetes:

1. Libro de cuentos (que presenta un componente aislado)
2. Bootstrap (utilizado para estilo general y capacidad de respuesta)
3. Quagga JS (utilizado para escanear elementos)
4. Firebase Realtime Database (utilizada para almacenar datos de la cesta)
5. más bonito (usado para formatear código)
6. PropTypes (utilizado para verificación de tipos)
7. tostado (usado para presentar brindis a través de la aplicación)
8. uuid (utilizado para generar ID únicos para cestas)
9. reaccionar-router (usado para enrutamiento)

El código se almacena en un repositorio de GitHub y la aplicación se implementa en Netlify. Netlify inicia el proceso de construcción e implementación cada vez que hay un cambio, es decir, un PR fusionado en la rama main . La configuración de Firebase (ID de la aplicación, URL de la aplicación, etc.) se almacena como variables de entorno.

Para ejecutar la aplicación localmente, desplácese hacia abajo y siga las instrucciones proporcionadas por CRA. Para que la cámara funcione localmente, agregue un archivo .env en la raíz del proyecto e inserte este valor en él HTTPS=true . Reconstruya la aplicación y debería funcionar.

Lista de tareas en orden cronológico

1. Investigar soluciones existentes
2. Encuentre el nombre apropiado y disponible
3. Compra el dominio
4. crear un logotipo
5. Crear estructuras alámbricas
6. Inicie un proyecto local y cree un repositorio de GitHub
7. Inicie un proyecto en Netlify y conecte el dominio
8. Conecte el repositorio de GitHub con el proyecto Netlify e inicie el proceso automático de compilación e implementación.
9. Instalar libro de cuentos
10. Instale Bootstrap y agregue estilo inicial
11. Instalar e implementar la biblioteca Quagga
12. Atomizar el código en componentes.
13. Instalar e implementar más bonito
14. Configure React Context para los datos y componentes de la cesta
15. Instalar e implementar el enrutador de reacción
16. Instale e implemente Firebase Realtime Database para guardar los datos de la cesta
17. Configurar la creación de sesiones de cesta anónimas
18. Agregar comentarios de código adicionales
19. Agregue y adapte algunas historias de Storybook
20. Actualizar la documentación

Investigación y denominación

Materiales utilizados para la investigación de funcionalidad e interfaz de usuario:

1. ScanPayGo
2. MishiPay
3. AckerPay
4. Aplicación de autopago RetailCloud
5. aplicación mInventory
6. Aplicación de autopago retail7.io
7. BILLA Escanear y listo
8. Escanear y listo
9. Poste de regate
10. Aplicación barcoo

Finalmente, la aplicación barcoo sirvió como la mayor inspiración para la UI y la UX. Básicamente revisé el diseño de cada una de las aplicaciones mencionadas anteriormente (donde estaba disponible) e intenté encontrar las partes más adecuadas para mi aplicación. Una vez que estuve satisfecho con la investigación de UI/UX, intenté encontrar un nombre. El truco consistía en encontrar algo que tuviera sentido, pero que no se hubiera utilizado previamente, es decir, que tuviera un dominio disponible. Me decidí por Scanmart , que es producto de dos palabras "escanear" y "mercado", y compré el dominio " scanm.art " para garantizar su singularidad.

Este proyecto está disponible en scanm.art.

Logotipo y estructuras alámbricas

Logo

No quería perder mucho tiempo con el logo, así que elegí uno principalmente tipográfico. Se le agregaron bordes en las esquinas para simular el diseño de un escáner de código de barras. La fuente utilizada es Poppins. Utilicé una fuente de Google porque son gratuitas y su licencia permite el uso comercial.

Logotipo principal	favicon

Estructuras alámbricas

Comenzar	Pantalla principal	Error de cámara	Escanear modal	Cesta

Descripción técnica del proyecto

Estructura de archivos y carpetas

La carpeta src es donde reside todo.

La carpeta de assets contiene imágenes/iconos utilizados en el proyecto, así como los estilos personalizados y los gráficos utilizados en el archivo README.

La carpeta components , como su nombre lo indica, contiene los componentes utilizados en este proyecto. Cada uno de ellos se almacena en carpetas separadas.

La carpeta context contiene el contexto Basket & Offcanvas que sirve para proporcionar información sobre la barra lateral y los elementos escaneados en toda la aplicación.

La carpeta utils contiene una función de utilidad.

La carpeta views contiene las vistas utilizadas en esta aplicación.

Toda la aplicación está estructurada de una manera en la que los proveedores de contexto envuelven las rutas y las rutas contienen un diseño que presenta aún más las vistas, es decir, sus subrutas.

 .
|-- 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

Comenzando con la aplicación Create React

Este proyecto se inició con la aplicación Create React.

Guiones disponibles

En el directorio del proyecto, puede ejecutar:

npm start

Ejecuta la aplicación en modo de desarrollo.
Abra http://localhost:3000 para verlo en su navegador.

La página se recargará cuando realice cambios.
También es posible que vea errores de pelusa en la consola.

npm test

Inicia el corredor de prueba en el modo de reloj interactivo.
Consulte la sección sobre ejecución de pruebas para obtener más información.

npm run build

Crea la aplicación para producción en la carpeta build .
Incluye correctamente React en modo de producción y optimiza la compilación para obtener el mejor rendimiento.

La compilación se minimiza y los nombres de archivos incluyen los hashes.
¡Su aplicación está lista para ser implementada!

Consulte la sección sobre implementación para obtener más información.

npm run eject

Nota: esta es una operación unidireccional. Una vez que eject , ¡no podrás regresar!

Si no está satisfecho con la herramienta de compilación y las opciones de configuración, puede eject en cualquier momento. Este comando eliminará la dependencia de compilación única de su proyecto.

En su lugar, copiará todos los archivos de configuración y las dependencias transitivas (webpack, Babel, ESLint, etc.) directamente en su proyecto para que tenga control total sobre ellos. Todos los comandos, excepto eject seguirán funcionando, pero apuntarán a los scripts copiados para que puedas modificarlos. En este punto estás solo.

No es necesario que uses nunca eject . El conjunto de funciones seleccionado es adecuado para implementaciones pequeñas y medianas, y no debería sentirse obligado a utilizar esta función. Sin embargo, entendemos que esta herramienta no sería útil si no pudiera personalizarla cuando esté listo para usarla.

Más información

Puede obtener más información en la documentación de la aplicación Create React.

Para aprender a reaccionar, consulte la documentación de React.

División de código

Esta sección se ha movido aquí: https://facebook.github.io/create-react-app/docs/code-splitting

Analizando el tamaño del paquete

Esta sección se ha movido aquí: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size

Crear una aplicación web progresiva

Esta sección se ha movido aquí: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app

Configuración avanzada

Esta sección se ha movido aquí: https://facebook.github.io/create-react-app/docs/advanced-configuration

Despliegue

Esta sección se ha movido aquí: https://facebook.github.io/create-react-app/docs/deployment

npm run build no logra minimizar

Esta sección se ha movido aquí: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify