Curso intermedio de Stripe #9. Creamos nuestro propio panel de métricas

En la novena clase del curso intermedio de Stripe creamos nuestro propio panel o dashboard de métricas (JS, HTML, PHP).

Para empezar vamos a reutilizar el código que hicimos en la lección 5, aquel en el que construimos una página con Bootstrap en la que mostramos los ingresos y un listado de cargos.

A partir de ahí vamos a evolucionarlo para crear un panel de métricas que se actualice automáticamente (cada X segundos) y nos muestre tres datos: Clientes, suscripciones e ingresos totales. ¡A por ello!

¡Ya lo tenemos! Ahora ya sabemos cómo construir nuestros paneles de métricas con datos de Stripe. Todo adornado con Bootstrap para que quede más chulo. La idea es hacerlo con PHP con nuestra clase Stats para obtener la información de Stripe con su wrapper y en JavaScript crearemos una función muy sencilla que realizará peticiones Ajax a nuestro PHP para refrescar la información en pantalla.

Ojo, la actualización no va a ser en tiempo real, sino que vamos a refrescar la información cada dos segundos, pero se puede configurar cualquier cantidad de tiempo determinada. Todo sin librerías de terceros, PHP y JavaScript puro o vanilla.

Esto da mucho juego ya que con cierta imaginación y teniendo claro que KPIs queremos utilizar podemos montar dashboards en relativamente poco tiempo. Además a nivel visual todo es cuestión de lo que quieras recrearte porque hay infinidad de librerías y frameworks CSS/JS para darle un estilo chulo y con efectos.

Nosotros nos hemos enfocado en utilizar Bootstrap por su sencillez para el ejemplo y además tenéis cursos de Bootstrap en Boluda.com para que veáis todas sus bondades :)

Como siempre, si tenéis cualquier duda o pregunta, podéis mandarla a través del formulario de soporte de la intranet de suscriptor. ¡Nos vemos en la siguiente lección!

• Curso intermedio de Stripe #1. La API de Stripe
• Curso intermedio de Stripe #2. API dura y API JS
• Curso intermedio de Stripe #3. Creando los tokens
• Curso intermedio de Stripe #4. Realizamos un cobro
• Curso intermedio de Stripe #5. Listado de cobros
• Curso intermedio de Stripe #6. Crear un cliente y modificar sus datos
• Curso intermedio de Stripe #7. Realizamos un cargo a un cliente existente
• Curso intermedio de Stripe #8. Devolución de dinero mediante API
• Curso intermedio de Stripe #9. Creamos nuestro propio panel de métricas
• Curso intermedio de Stripe #10. Seguridad en la API ¿Qué tener en cuenta?