English 中文TürkçeРусскийFrançaisTiếng ViệtEspañol日本語

Vista previa de flows

Tienes dos formas de previsualizar tu flow en distintos tipos de pantalla:

  • Vista previa en dispositivos: Comprueba cómo se ve tu flow en dispositivos reales en cualquier etapa del desarrollo.
  • Vista previa en el Adapty Dashboard: Previsualiza tu flow mientras lo diseñas.

Vista previa en dispositivos

Para previsualizar tu flow en un dispositivo real:

  1. Descarga la app móvil de Adapty para iOS o Android.
  2. En el constructor de flows, haz clic en Test on device.
Botón Test on device en el constructor de flows
  1. Selecciona el idioma del flow.
  2. Escanea el código QR con la cámara del dispositivo o abre el enlace. Esto abrirá tu flow en la app móvil de Adapty.
Note

En el modo de prueba, Adapty no puede acceder a tus productos en los stores, por lo que los precios mostrados en el flow no son reales.

Selector de idioma y código QR en el diálogo Probar en dispositivo

Solución de problemas

Si el flow no se abre en la vista previa, la causa habitual es una acción incompleta, una pantalla vacía o un producto sin asignar. Consulta Problemas comunes para ver la lista completa.

Vista previa en el Adapty Dashboard

Tip

Para asegurarte de que tu flow está listo para publicar, pruébalo en un dispositivo real y confirma que se muestra sin errores.

Puedes previsualizar tu flow en distintos tipos de pantalla desde el área de vista previa del flow builder. Esto te ayuda a comprobar que el flow se ve bien en diferentes dispositivos y tamaños de pantalla.

Con los controles de vista previa que aparecen debajo de la previsualización, puedes:

  • Seleccionar el dispositivo en el que previsualizar tu flow.
  • Cambiar entre los modos de vista horizontal y vertical.
  • Cambiar entre los modos claro y oscuro.
  • Cambiar entre idiomas.
Tip
  • Previsualiza siempre diferentes idiomas, ya que pueden tener palabras de distinta longitud y el diseño de la pantalla puede verse diferente en cada uno.
  • Para previsualizar variables personalizadas, establece valores iniciales para ellas. Por ejemplo, si añades una variable name, puedes establecer el valor inicial como Jane Doe para previsualizarla.
preview-paywall.gif

Vista previa de productos y ofertas

La vista previa lee las variables de producto de tu catálogo de Adapty, que cubre solo una parte de lo que resuelve un dispositivo:

  • prod_title muestra el título del producto tal como está almacenado en Adapty. prod_price y las variables prod_price_per_* muestran el precio almacenado en Adapty, en dólares estadounidenses — los usuarios ven el precio localizado del store.
  • offer_price, offer_billing_period y offer_full_duration permanecen sin resolver, por lo que la vista previa muestra el nombre de la variable entre llaves — por ejemplo, {{products.selectedProduct.offer_price}}. Estos valores llegan al flow cuando el SDK lo renderiza en tu app.
  • is_free_trial, is_pay_up_front e is_pay_as_you_go siguen la oferta seleccionada en la tarjeta del producto. Sin oferta, los tres son false. Con una oferta, la vista previa la trata como pago por uso.

Las condiciones sobre el tipo de oferta cambian en la vista previa, pero por defecto solo aparece la rama de pago por uso. Para ver las otras ramas, simula el modo de pago:

  1. En el lienzo, selecciona la tarjeta del producto que tiene la oferta.
  2. En el panel derecho, en Product, abre el desplegable de la oferta.
  3. En Preview as, selecciona Free trial, Pay up front o Pay as you go.

Cada condición sobre esas tres variables se vuelve a renderizar en el modo seleccionado para esa tarjeta. Preview as se aplica a una tarjeta de producto a la vez, no modifica nada en el flow que publicas y se restablece cuando cambias la oferta de la tarjeta.