Cómo agregar un lector de códigos QR

Lector de códigos QR

Con una sección «QR Code», tus usuarios escanean un código impreso en un cartel o en tu edición en papel, y se abre una página de tu app o una página web.

Añadir la sección

En «My App», Structure, haz clic en «Add a section»… luego busca QR para encontrar la tarjeta «QR Code».

Pasa el ratón y verás la pantalla que añade: el escáner. Haz clic en Add.

Ponle nombre a la sección. Después, haz clic en Add.

La sección se añade al final de tu menú. En la vista previa, el escáner se queda en negro: lo probarás en un teléfono.

«QR Code reader» ahora también aparece en tus extensiones, en «Extensions Store», Management.

Diseño

De vuelta en Structure, abre la sección y haz clic en «Edit the design».

En Button, elige los colores del botón redondo de la parte inferior del escáner.

Text define la fuente y el color del mensaje que ven los usuarios si rechazan la cámara. Elige un color que se lea bien sobre tu fondo.

Permiso de cámara

La sección usa la cámara del teléfono. En Settings, abre «Privacy center».

Camera, para iPhone y la app web, y «Camera view», para Android, ya están activados. La sección los mantiene activos mientras esté en tu app.

En Message, explica por qué tu app usa la cámara: las tiendas de apps pueden pedirte que lo justifiques.

Los cambios de permisos se aplican cuando recompilas tu app y la vuelves a enviar a las tiendas.

Escanear en la app

Para probarla, abre tu app en un teléfono. La sección «QR Code» está al final del menú.

La primera vez, el teléfono pide acceso a la cámara.

Apunta la cámara a un código QR, como este de un cartel de River Daily. El botón redondo lleva tus colores.

Un código con la dirección de una página de tu app la abre al instante.

Un código con una dirección web pregunta primero… y luego abre la página web. Ciérrala para volver al escáner.

Y si los usuarios rechazan la cámara, la sección muestra este mensaje, con tu estilo de Text.

Tu sección «QR Code» llega a tu app al publicarla, con «Publish my project».