SAP Mobile Cards – Introducción

Introducción

En la entrada de hoy crearemos de una manera rápida una tarjeta de información con el servició «SAP Mobile Cards». Este servicio está incluido en SAP Cloud Platform – Neo.

Pero antes de empezar ¿qué son las SAP Mobile Cards?

Inspiradas en las Cards de iOS, las SAP Mobile Cards nos permiten mostrar de una manera rápida información procedente del backend. Esta información se muestra en una aplicación nativa móvil (iOS/Android) sin necesidad de desarrollar aplicaciones nativas.

También nos permite ejecutar pequeñas acciones en base a la información mostrada en una tarjeta. Estas acciones podrían ser la aprobación de tareas de workflows, envio de estatus al backend, etc.

Pero el punto fuerte de este nuevo servicio, es que nos podemos valer de la aplicación «Mobile Cards» disponible en los marquets de android e iOS para realizar el despliegue de información de manera rápida.

También es posible tener notificaciones push sin necesidad de configurar ningun servicio adicional ni registrar los tokents de dispositivo. Todo ello lo realiza de manera automática la aplicación nativa.

Manos a la obra

• La API a utilizar: Utilizaremos una API que proporciona el «Ajuntament de Barcelona». Esta permite conocer el estado de las estaciones del servicio de Bicing (estaciones de alquiler). Aunque es posible utilizar cualquier servicio que retorne datos en formato JSON.

https://api.bsmsa.eu/ext/api/bsm/gbfs/v2/en/station_status

{  
   «last_updated»:1556997117,
   «ttl»:30,
   «data»:{  
      «stations»:[  
         {  
            «station_id»:1,
            «num_bikes_available»:20,
            «num_bikes_available_types»:{  
               «mechanical»:20,
               «ebike»:0
            },

• Una vez introducida la API podemos iniciar la construcción: Para ello, accederemos a SAP Cloud Platform -> Subacount Neo.
• Una vez en nuestra cuenta neo, accedemos a «Services» y a la categoria mobile.

• En caso de no tener el servicio activo lo activamos. Una vez activado vamos a «Go to Service»

• Al acceder nos mostrará un pop-up para crear tarjetas demo de manera automática. Aquí aprovecharemos para instalar la APP en nuestro mòbil. Primera mente escanearemos el codigo de la derecha para ir al market a instalar la app. Seguidamente escanearemos el QR de la derecha para registrar el servicio a la app. Una vez realizado dejamos el mòbil aparcado.

• Una vez instalada podemos cerrar este mensaje sin mas con el botón «Close».
• Mediante el menu, accedemos a «Mobile Applications» -> «SAP Mobile Cards«
• En este punto, ya podremos crear nuestra tarjeta de manera rápida. El primer paso, sera definir la destination para poder obtener los datos. de la API del Bicing. Seguiremos los pasos descritos en la imagen:

• Accedemos a Connectivity. Mediante el boton de wizard crearemos la nueva destination.

• En los pasos posteriores añadiremos los siguientes datos
  • Type: Mobil destination
  • Name: (nombre que queramos) Bicing_dest
  • Pulsamos Next
  • URL: https://api.bsmsa.eu/ext/api/bsm/gbfs/v2/en/
  • Proxy type: Internet (Al no ser una conexion con cloud connector)
  • Pulsamos «Next» hasta finalizar los pasos sin añadir ningun dato extra.

A modo resumen se muestran los datos de conectividad:

• Volvemos a la pantalla de creación de tarjetas tal y como se indica en la imagen.

• Al pulsar sobre la opcion de wizard nos apareceran las siguientes opciones

En este punto hacemos un parón para explicar las opciones disponibles al crear las tarjetas:

– Info: Permite añadir la información básica de la tarjeta y cargar plantillas o tarjetas en formato ZIP. También nos permite añadir parametros
– URLs: Se informan las fuentes de datos
– Assets: Permite añadir ficheros extra para mostrar en la tarjeta
– Editor: Editor HTML para la creación de la tarjeta
– Data Mapping: Una vez informada la URL y creado el código HTML en este punto se realiza el mapping entre los datos y el código HTML
– Actions: Permite definir acciones. Estas acciones aparecerán en forma de boton bajo al tarjeta.
– Header: Añade datos a nivel de cabecera para las distintas llamadas HTTP
– Notifications: Permite definir mensajes de envío de notificaciones PUSH
– Emulator: Previsualización de la tarjeta

• Sigamos, ya nos queda muy poco. Primeramente daremos un nombre a la tarjeta, para ello, en la opción «Info» añadiremos «Name» con el valor «Bicing», en «Destination» seleccionaremos «Bicing». En la opción «Card Template» seleccionaremos «Welcome Card»

• Pasamos a la opción «URLs» para añadir la entidad de la API que nos devolverá los datos de disponibilitat. Para ello seleccionaremos
  «Primary URL» y añadiremos en «Primary URL» el valor «/station_status». En este punto ya podríamos obtener datos, pero debido a una limitación de SAP, hasta no tener implementado el código HTML no podremos obtener los datos con «Get data».

• Saltaremos a la pestaña del editor para implementar la parte visual. En este punto vamos a utilizar código HTML para toda las partes estáticas de la tarjeta. Para mostrar los datos procedentes de las APIS crearemos variables con los caracteres «{{» «}}» . Vamos a crear un pequeño código sin estilos para mostrar el id de estación, los SLOTS disponibles, las bicicletas mecánicas y las eléctricas. Añadiremos el siguiente código:

<p>Hola,estas son las novedades de la estacion: {{idStation}}</p>
<p>Slots totales: {{Total}}</p>
<p>Disponibles mecanicas:{{Mecaniques}}</p>
<p>Dispinibles electricas:{{Electriques}}</p>

• En este punto, debemos hacer un paso un poco «absurdo», pero necesario para continuar. Tenemos que entrar en la pestaña URLs, alli pulsaremos el boton get data y obtendremos los datos de la API que en el paso anterior no hemos podido realizar.

• En este momento ya podemos realizar el mapping, para ello, pasaremos a «Data Mapping». En este punto podemos mapear las variables creadas en el punto del editor, con los datos de la API. Añadiremos los datos como en la imagen:

• Ahora solo falta añadir notificaciones para que el usuario tenga las novedades al momento. Para ello nos situaremos en la pestaña «Notifications».
  • Marcaremos la opcion «Enable push notifications for this card template».
  • En «New Card Notification» añadiremos un mensaje para notificar al usuario que tiene una nueva tarjeta disponible.
  • A demas, en «Changed Card Notification» se enviará este mensaje cada vez que se detecte un cambio en la tarjeta ya sea por modificaciones técnicas o porque el dato ha cambiado.

---

Después de estos pasos, para poder realizar la prueba deberemos seguir estos pasos en el mòbil:

• Accedemos a la aplicación instalada anteriormente.
• En la pantalla de registro añadimos nuestro mail (el registrado en SAP) y password.
• Por defecto se nos cargara la tarjeta de Bicing con los datos de la estación.

Por último y no menos importante Suscribete, me ayudaras a hacer crecer este blog 😉