Novedades de Wallet

Hola, te doy la bienvenida a Novedades en Wallet. Soy Pavel, ingeniero del equipo de Wallet. Hoy explicaré las nuevas funciones de Wallet y cómo usarlas en tus tarjetas. Mostraré cómo agregar próximos eventos a tus entradas, para un acceso fácil a los eventos cubiertos. Luego, cómo mejorar tus tarjetas de embarque con un diseño con toda la información necesaria. Por último, mostraré el uso de una API PKPassLibrary que hace que tu app iOS agregue tarjetas a Wallet con autorización. Tenemos mucho que cubrir, así que vayamos a los próximos eventos. El año pasado, Wallet presentó Poster Event Tickets con etiquetas semánticas, un diseño con información, Mapas y una guía con detalles y servicios en tu app. Este año, se agregan los próximos eventos, que permite acceso a múltiples eventos con una sola entrada.

Al tocar un próximo evento, se abre una pantalla de detalles con la estructura de Poster Event Ticket. Esta se puede configurar con ilustraciones, información del lugar, una guía del evento y otra información. Próximos eventos aprovecha la semántica de Poster Event Ticket introducida en iOS 18. Para una descripción general de cómo funciona, consulta “Novedades en Wallet y Apple Pay” de la WWDC24. Ahora te mostraré cómo configurar un próximo evento en tu pass.json. Los próximos eventos se definen en la nueva matriz “upcomingPassInformation” con los eventos que Wallet debe mostrar. Para cada objeto en la matriz, establece su tipo en “evento” e incluye un identificador único, el nombre y la fecha del evento.

Estos campos se muestran destacados en la pantalla de detalles de este próximo evento.

El objeto sigue la misma estructura que se usa para crear un Poster Event Ticket.

Incluye un objeto “semantics” para la información del evento y “additionalInfoFields” o “backFields” para datos no semánticos. Un objeto “URLs” agrupa las acciones relacionadas e “images” configura las imágenes del evento. veamos cómo estos objetos configuran la interfaz de usuario para un próximo evento. En la parte superior de la pantalla, Wallet muestra una imagen representando el evento. Por defecto, aquí se muestra la imagen de fondo de la tarjeta. Pero puedes agregar una imagen personalizada especificando la URL de la imagen.

Los próximos eventos aparecen en dispositivos iOS y watchOS, debes brindar imágenes de diferentes escalas, para que Wallet elija la mejor.

Debajo, se muestra “venueName” y permite ver este lugar en Mapas. Esto aprovecha la misma estructura semántica de las tarjetas. En mi objeto, agregué la información del lugar con “venueName”, “venuePlaceID” y “venueLocation”.

Este objeto es donde agrego la semántica que describe el evento, como los artistas o los asientos, que permite que Wallet muestre esos detalles. Por ejemplo, como agregué asientos, Wallet los enumera en la pantalla de detalles.

Algunos datos como el nombre del lugar y los asientos se muestran destacados en esta pantalla. Los demás completan la guía de próximos eventos, que es igual que la guía de tarjetas de iOS 18.

La guía de próximos eventos es específicamente para este y se completa con el contenido del objeto de próximo evento. Las guías de eventos muestran botones con acciones rápidas, Clima que usa la semántica de ubicación, un mapa del lugar y otras etiquetas.

Para configurar las URL que se ven aquí, completo el objeto de URL con las acciones que quiero mostrar. En este caso, puse un conjunto de URL diferente de las que muestro en mi guía de tarjetas. El próximo evento tiene la misma estructura que la tarjeta, pero no usa las propiedades definidas para esta. Si quiero que ambas muestren las mismas URL, debo incluir los mismos valores en mi objeto de próximos eventos.

El mapa del lugar se puede configurar especificando las URL de la imagen, tal como lo demostré anteriormente. Por defecto, Wallet no usará el mapa del lugar de la guía de tarjetas. Pero puedo usar el mismo mapa del lugar estableciendo la propiedad “reuseExisting” en verdadero. Si no proporciono una URL o configuro “reuseExisting” como verdadero, Wallet no mostrará el mapa del lugar. Los próximos eventos son una forma útil de informar a los usuarios sobre todo lo que pueden hacer con su entrada. Cuando explores agregar próximos eventos, recuerda que usan la misma estructura que la entrada del evento. Debes considerar cómo cada semántica y URL debe cambiar para el próximo evento. La documentación de Wallet es un gran recurso para ver cómo personalizar tus entradas y próximos eventos. No es necesario definir los próximos eventos cuando creas la tarjeta por primera vez. Si quieres agregar eventos luego, envía una actualización de tarjeta con los nuevos próximos eventos. “isActive” le permite a Wallet saber cuándo el evento es relevante, por lo que debes actualizarla al inicio y al final. Si el evento se cancela o ya no es relevante, considera eliminarlo de pass.json.

Esto garantiza que la lista solo muestre información relevante y actualizada. Ahora, veamos las tarjetas de embarque de este año y cómo aprovechar las funcionalidades nuevas. Las tarjetas de embarque permitieron a muchos pasajeros pasar por la seguridad del aeropuerto y abordar sus vuelos. Este año se actualizarán significativamente, con un nuevo diseño dinámico y configurable. Se integran con el servicio de vuelos de Apple y se actualizan automáticamente por cada cambio o demora. Además, hay una actividad en vivo que brinda acceso a información clave e informa durante todo el viaje. Las actividades en vivo se pueden compartir por Mensajes, para que amistades y familiares sigan el vuelo.

El seguimiento del vuelo está integrado en todas las tarjetas de embarque mejoradas. Cuando un pasajero agrega una tarjeta de embarque mejorada, Wallet se suscribe a las actualizaciones del vuelo y notifica sobre cambios. Las actualizaciones se ven en la tarjeta y en la actividad en vivo, para que tengan información actualizada en ambos.

También cuentan con integraciones de sistemas más profundas, con Mapas para ir al aeropuerto y Encontrar para rastrear el equipaje. Además, una sección de servicios y mejoras de la aerolínea brinda más información sobre el viaje. En esta sección se muestran todas las acciones que un pasajero puede realizar en su viaje, junto con un resumen de la información. Veamos cómo funcionan y cómo configurarlas en tarjetas de embarque mejoradas. Comenzando desde arriba, el encabezado muestra el número de vuelo y la fecha de salida. Siempre muestran estos campos aquí con la semántica de tu pass.json para identificar el vuelo.

Wallet usa airlineCode, flightNumber y originalDepartureDate para rastrear el vuelo cuando se agrega la tarjeta de embarque. Si es un vuelo de código compartido, es más común brindar el código de la aerolínea y el número de vuelo. Si quieres que los pasajeros vean el número del vuelo operativo, puedes incluirlo. Ambas opciones permiten que Wallet encuentre el vuelo en el servicio de vuelos de Apple. Wallet actualizará los horarios en la tarjeta con los datos del servicio de vuelos de Apple. Si envías una actualización, usa la semántica currentDepartureDate o currentArrivalDate. Las fechas originales no se actualizan a menos que el vuelo se reprograme oficialmente. Volviendo a la tarjeta, la siguiente sección muestra la ciudad, el código del aeropuerto y los horarios de salida y llegada. Salida y llegada deben indicar los horarios de puerta, ya que la hora de embarque se muestra por separado y se basa en originalBoardingDate y currentBoardingDate. Cuando actualiza los horarios de salida y llegada, la hora de embarque también cambia para reflejar esto. Al agregar o actualizar una tarjeta, Wallet compara la hora de embarque y salida para calcular la duración del embarque. Si cambia la hora de salida en el servicio de vuelos de Apple, la hora de embarque se actualiza para mantener la duración según tus semánticas. Si un vuelo se retrasa tres horas, el horario de embarque también se retrasará. Cuando actualizas la tarjeta con currentBoardingDate, Wallet volverá a calcular el embarque y actualizará si es necesario. Así es como la semántica le da a Wallet contexto sobre un vuelo sin vincularse a la IU. Wallet prioriza la información actualizada y usa tu semántica para decidir cómo actualizar los datos. Veamos cómo la semántica impulsa otras partes de la IU. Las insignias son una función nueva que permite identificar información importante en la tarjeta. Parte de la semántica del pass.json se muestra debajo del nombre del pasajero.

Las nuevas tarjetas de embarque muestran hasta dos filas de insignias con clase, equipaje de mano y accesibilidad. Wallet considera la semántica del pass.json y establece el conjunto apropiado de insignias. Para unificar las insignias, las tarjetas mejoradas admiten los códigos SSR de IATA mediante “passengerServiceSSRs”.

Wallet define el texto de la mayoría de las insignias, pero algunas permiten personalizarlo con información de tu aerolínea. Veamos un ejemplo. En el objeto, agregué los códigos de solicitud de animal de servicio y silla de ruedas a bordo con “passengerServiceSSRs”.

Agreguemos también semánticas personalizadas, como la clase del boleto y el estado de la aerolínea.

Cuando vuelvo a abrir la tarjeta de embarque, veo las nuevas insignias basadas en mi semántica. Las dos primeras insignias usan los textos que brindé, pero los códigos SSR muestran los definidos por Wallet. Las insignias son un gran ejemplo de cómo Wallet usa la semántica. En mi código, no definí un objeto de insignias explícito con cada campo. En cambio, al brindar el contexto relevante, Wallet creó insignias que priorizan la información. El uso de la semántica hace que Wallet incluya más información sin sacrificar usabilidad. El esquema expone la misma semántica a todas las aerolíneas para garantizar consistencia.

Te invito a que consultes nuestra documentación para descubrir más semántica para las tarjetas de embarque mejoradas.

Ahora quiero mostrarte cómo configurar la pantalla de servicios y mejoras de la aerolínea con acciones que llevan a los usuarios a tu app. Al incluir URL en tu pass.json para acciones como administrar, comprar Wi‑Fi o mejorar el asiento, Wallet muestra botones con las semánticas de contexto adicional.

Las URL se definen como propiedades superiores en tu pass.json. Las tarjetas de embarque mejoradas permiten acciones para realizar antes, durante y después del vuelo.

Incluye URL para todas las acciones que quieras mostrar y configura tu app para abrir la pantalla donde puedan completarlas.

Recuerda que Wallet muestra contexto adicional, así que completa la mayor cantidad posible para una experiencia completa. Veamos con otro ejemplo.

Puedo incluir “purchaseLoungeAccessURL” para un botón de compra de acceso a la sala VIP. Pero el botón se ve solitario y podría beneficiarse de más contexto. Si incluyo “airlineLoungePlaceID”, Wallet mostrará una vista previa de la ubicación de la sala. Al brindar ese contexto adicional, mejoré la experiencia e hice que la interfaz se sienta completa.

Fue una breve explicación de cómo se configura la pantalla de servicios y mejoras. Lo más importante es que Wallet usa las URL y la semántica para crear la IU. La documentación para desarrolladores detalla las semánticas y URL disponibles, así que revisa y agrega las acciones que soporte tu app.

Quiero hablar de la compatibilidad de dispositivos para las tarjetas de embarque mejoradas. Las funciones que mostré son compatibles con dispositivos con las versiones más recientes de iOS y watchOS. El esquema para tarjetas de embarque mejoradas agrega propiedades sin interferir con el esquema existente. Algunos pasajeros pueden tener sistemas anteriores donde Wallet no usa estas propiedades. La mejor forma de adoptar las tarjetas mejoradas es agregar semántica y URL a las existentes, para ofrecer una buena experiencia sin importar el sistema. Hasta ahora, te mostré cómo hacer que las entradas y tarjetas de embarque sean más dinámicas en Wallet. Ahora quiero mostrarte cómo agregarlas fácilmente a Wallet con la API PKPassLibrary. Agregar una tarjeta a Wallet siempre requirió interacción. Para agregar una tarjeta a Wallet, tu app puede mostrar un AddPassesViewController que requiere un toque adicional para agregarla. También puedes usar addPasses de PKPassLibrary, que muestra una alerta antes de agregar la tarjeta.

Estas opciones son ideales para quienes no agregan tarjetas con frecuencia, ya que les dan control total. Pero puede que algunos usuarios agreguen tarjetas con frecuencia desde tu app. Los viajeros frecuentes, por ejemplo, pueden agregar varias por semana y revisar una por una puede no ser útil. Ahora puedes solicitar la capacidad de agregar tarjetas en segundo plano, que pide al usuario autorización para que tu app las agregue automáticamente a Wallet.

Luego, usa la API addPasses y tus tarjetas se agregarán en segundo plano sin indicaciones extra. Wallet enviará una notificación para informar que tu app agregó una tarjeta. Adoptar la nueva API requiere unas pocas líneas de código. Si alguna vez solicitaste permiso para enviar notificaciones push, esto será similar. Esta es una visualización de SwiftUI que muestra un botón AddPassToWallet. Lo primero es solicitar la capacidad de agregar tarjetas en segundo plano. Lo haré en el controlador de finalización del botón para solicitar permiso tras agregar la próxima tarjeta.

Esta llamada es asíncrona, así que uso un Task para llamar a requestAuthorization (for: .backgroundAddPasses) En PKPassLibrary.

Cuando se ejecuta la acción del botón, el sistema solicita permiso para activar la función en mi app.

Este aviso aparece solo una vez, por lo que si responden, no se volverá a mostrar. Ahora, agreguemos código para verificar la autorización y agregar la tarjeta.

Cuando se carga la vista, puedo verificar mi autorización con authorizationStatus (for capability:) en PKPassLibrary. Si tengo autorización, invoco PKPassLibrary.addPasses para agregar mi tarjeta.

Esta API acepta una matriz de tarjetas, por lo que puedo agregar varias a la vez. Eso es todo. Con estas pocas líneas de código, mi app puede agregar tarjetas automáticamente. Recapitulemos cómo funciona la nueva API. Solicita agregar tarjetas en segundo plano con la nueva API requestAuthorization (for capability:). Recuerda que solo puedes pedir autorización una vez, es mejor usar esta API cuando sepas que el usuario aceptará.

Si invocas esta API más de una vez, devolverá el estado actual. Después de la autorización, en Configuración aparecerá una opción para que activen o desactiven esta funcionalidad. Puedes verificar tu autorización sin que aparezca un mensaje invocando authorizationStatus(for capability:) Para aprovechar la capacidad de agregar tarjetas en segundo plano, usa addPasses cuando agregues tarjetas. ¡Esto es lo nuevo en Wallet! Las funcionalidades de este año hacen que las entradas y tarjetas sean más dinámicas y permiten que tu app iOS se integre con Wallet. Aprovecha las funcionalidades adoptando las nuevas propiedades en tus tarjetas de embarque y entradas. La documentación es más detallada, así que asegúrate de consultarla. Como son funcionalidades nuevas, debes admitir versiones anteriores del SO para ofrecer una buena experiencia.

Recuerda que contamos con una API que facilita a los usuarios frecuentes agregar sus tarjetas, así que aprovecha la nueva funcionalidad siempre que puedas.

Gracias por acompañarbos, y que tengas una excelente WWDC.