Muy buenas, les saluda Miguel y aquí les traigo otro nuevo tutorial.
Para ayudarlo a aprender a usar la API de reconocimiento óptico de caracteres (OCR) , crearemos una aplicación simple de escaneo de facturas / recibos. Hay un montón de tecnologías, como Tesseract y Google Cloud Vision.
Sin embargo, cuando estaba investigando por mi cuenta, me di cuenta de que algunas herramientas de OCR solo admiten aplicaciones web o solo React Native sin Expo, o que los recursos están demasiado desactualizados para hacer referencia.
Por lo tanto, decidí escribir este artículo para guiar a los necesitados sobre cómo integrar OCR específicamente en la aplicación React Native que se basa en Expo.
- Firebase (solo para el almacenamiento de fotos, siempre puede tener otra base de datos para otros fines).
- API de Google Cloud Vision (fácil de comenzar que admite React Native y Expo).
- Expo.
- Reaccionar nativo.
- Configura tu proyecto de Firebase
- Configura tu API de Google Cloud Vision
- Crea la aplicación
Puede encontrar una demostración en video del escáner al final de este artículo.
Configura tu proyecto de Firebase
1.- Vaya a firebase e inicie sesión con su cuenta de Google.
2.- Haga clic en «Ir a la consola» en la esquina superior derecha.
3.- Crea un proyecto e ingresa la información de tu proyecto.
4.- Después de crear el proyecto, será redirigido al panel del proyecto, elija la aplicación que desea crear, en nuestro caso, «Web».
5.- Vaya a la «configuración del proyecto».
6.- Busque la siguiente información en la configuración de su proyecto.
7.- Coloque estas llaves en un secret.js
archivo, porque no queremos exponerlos. Y también agrega secret.js
en tu .gitignore
si desea poner su aplicación en GitHub.
export const FIREBASE_API_KEY = ‘XXX’ export const FIREBASE_DATABASE_URL = “XXX” export const FIREBASE_PROJECT_ID = ‘XXX’ export const FIREBASE_MESSAGING_SENDER_ID = ‘XXX' export const FIREBASE_AUTH_DOMAIN = ‘XXX’ export const FIREBASE_STORAGE_BUCKET = ‘XXX’
8.- Cree su base de datos de almacenamiento con reglas predeterminadas (la cambiaremos más adelante)
9.- Vaya a «reglas», copie y pegue lo siguiente, luego publique. La nueva regla tarda unos minutos en propagarse. Las siguientes reglas nos permiten subir fotos a la base de datos de Firebase.
service firebase.storage match /b/bucket/o match /allPaths=** allow read, write: if request.auth == null; } } }
Configure su API de Google Vision
1.- Ir Google Cloud Platform y API de visión en la nube de búsqueda:
2.- Crea un proyecto y luego habilita la API de Cloud Vision:
3.- Cree credenciales y obtenga su clave API. Para completar este proceso de habilitación de los servicios de la API de Vision, debe agregar información de facturación a su cuenta de Google Cloud Platform.
Pero mientras no alcance los límites de la prueba gratuita, no se le cobrará. Puede encontrar el detalle de precios en este artículo más adelante.
Cree la aplicación
Ahora que ha terminado de configurar y comenzar a construir la aplicación.
1.- Instalar firebase:
npm install -save firebase
2.- Cree una nueva carpeta llamada config
y debajo de ella, cree un nuevo archivo environment.js
, importe las claves de secret.js
. Si está interesado en una explicación detallada del siguiente código, puede encontrarlo aquí.
//environment.jsimport {GOOGLE_CLOUD_VISION_API_KEY, FIREBASE_API_KEY, FIREBASE_AUTH_DOMAIN, FIREBASE_DATABASE_URL, FIREBASE_PROJECT_ID, FIREBASE_STORAGE_BUCKET, FIREBASE_MESSAGING_SENDER_ID} from “../secret.js”var environments = { staging: { FIREBASE_API_KEY, FIREBASE_AUTH_DOMAIN, FIREBASE_DATABASE_URL, FIREBASE_PROJECT_ID, FIREBASE_STORAGE_BUCKET, FIREBASE_MESSAGING_SENDER_ID, GOOGLE_CLOUD_VISION_API_KEY }, production: { // Warning: This file still gets included in your native binary and is not a secure way to store secrets if you build for the app stores. Details: https://github.com/expo/expo/issues/83 } };function getReleaseChannel() { let releaseChannel = Expo.Constants.manifest.releaseChannel; if (releaseChannel === undefined) { return ‘staging’; } else if (releaseChannel === ‘staging’) { return ‘staging’; } else { return ‘staging’; } }function getEnvironment(env) { console.log(‘Release Channel: ‘, getReleaseChannel()); return environments[env]; }var Environment = getEnvironment(getReleaseChannel()); export default Environment;
3.- Cree otro archivo nuevo firebase.js
en la carpeta de configuración:
// firebase.jsimport * as firebase from ‘firebase’; import Environment from “./environment” firebase.initializeApp({ apiKey: Environment[‘FIREBASE_API_KEY’], authDomain: Environment[‘FIREBASE_AUTH_DOMAIN’], databaseURL: Environment[‘FIREBASE_DATABASE_URL’], projectId: Environment[‘FIREBASE_PROJECT_ID’], storageBucket: Environment[‘FIREBASE_STORAGE_BUCKET’], messagingSenderId: Environment[‘FIREBASE_MESSAGING_SENDER_ID’] });export default firebase;
4.- Cree un nuevo componente Scanner.js
y pegue el código de aquí.
Puede encontrar una explicación del ejemplo anterior aquí. Una cosa a tener en cuenta es que el paquete uuid
utilizado en este ejemplo puede no ser compatible con su Expo SDK
. Por lo tanto, reemplazo el uuid
con el paquete nanoide
:
Línea 15:
//old import uuid from ‘uuid’ //new import nanoid from ‘nanoid/non-secure’
Línea 275:
//old .child(uuid.v4()); //new .child(nanoid());
No olvide instalar el paquete nanoid:
npm install — save nanoid/non-secure
5.- Cada característica aplicada a una imagen es una unidad facturable. Por ejemplo, si aplica Detección de rostro y Detección de etiqueta a la misma imagen, se le facturará por una unidad de Detección de etiqueta y una unidad por Detección de rostro.
Las primeras 1000 unidades utilizadas cada mes son gratuitas (el detalle de precios se puede encontrar aquí). Si no desea realizar llamadas adicionales sobre funciones que no necesita, puede elegir funciones y comentar / eliminar el resto de línea 214 a línea 223 en el ejemplo anterior App.js
.
Puede encontrar una demostración en video del escáner a continuación, el componente está ligeramente editado.
A continuación, se incluyen algunos recursos adicionales que pueden resultarle útiles en su viaje conectando estas tecnologías.
Cree una aplicación React Native Image Recognition con la API de Google Vision: https://blog.jscrambler.com/create-a-react-native-image-recognition-app-with-google-vision-api/
Manifestación: https://github.com/JscramblerBlog/google-vision-rn-demo.
Gracias por leer este tutorial.
Añadir comentario