Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. FusionCharts
Webdesign

Cómo construir un tablero SaaS en React con Google Sheets y FusionCharts

by
Difficulty:BeginnerLength:LongLanguages:
Sponsored Content

This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.

Spanish (Español) translation by Ana Paulina Figueroa Vazquez (you can also view the original English article)

En este tutorial explicaré el proceso de creación de un tablero (o dashboard, en inglés) SaaS obteniendo datos de Google Sheets a través del uso de la API de Google Sheets. Para crear este tablero usaremos React, una biblioteca de JavaScript para generar interfaces de usuario; FusionCharts, una biblioteca de generación de gráficos basada en JavaScript, y Bulma, un framework CSS basado en Flexbox.

A continuación

Esto es lo que vamos a cubrir:

  1. Configuración
  • React
  • FusionCharts y el componente para React de FusionCharts
  • El framework CSS Bulma
  • Configuración de la API de Google Sheets
  • Conectando con la API de Google Sheets y recuperando información
  • Creando el diseño del tablero SaaS
  • Creando KPIs
  • Creando gráficos
  • Conclusión
  • Antes de continuar e instalar, quiero mostrarte una vista previa del tablero SaaS que podrás crear una vez que hayas leído este tutorial. Este es un enlace en vivo de lo que vamos a construir.

    what well be building

    1. Configuración

    Para seguir el tutorial necesitarás configurar tu proyecto con las siguientes dependencias:

    1. React
    2. El Paquete Core de FusionCharts y su componente para React
    3. Bulma

    Incluyendo a React

    El boilerplate para React de Facebook nos permitirá comenzar en un santiamén. Este configurará React junto con todas las utilidades que necesitaremos para nuestra aplicación de tablero. Por lo tanto, en la terminal de tu elección (iTerm con Zsh en mi caso) puedes continuar y escribir:

    Puedes aprender más sobre create-react-app, el boilerplate que hemos usado aquí.

    saas-dashboard es el directorio de trabajo en el que será instalado el boilerplate de React junto con todas las herramientas y dependencias, y agregaremos algunas más que necesitaremos para este tutorial, como se explica a continuación.

    Incluyendo el Paquete Core de FusionCharts y su componente para React

    Usaremos FusionCharts para mostrar gráficos en nuestra aplicación de tablero. Puedes ir y leer más acerca de FusionCharts en fusioncharts.com.

    Existen varias maneras de instalar FusionCharts; para obtener instrucciones generales puedes consultar esta página de documentación.

    Descarga directa de FusionCharts

    Puedes descargar directamente archivos de JavaScript desde el sitio web de FusionCharts e incluirlos en tu aplicación usando una etiqueta <script> en /public/index.html de la aplicación de tablero.

    Usando NPM

    Vamos a usar NPM en este tutorial. Por lo tanto, en la terminal navega al directorio de trabajo, es decir saas-dashboard, y escribe:

    FusionCharts proporciona un componente ligero y fácil de usar para React que puede ser empleado para añadir gráficos de JavaScript en aplicaciones React sin ningún problema. Lo usaremos en nuestra aplicación, así que vamos a instalarlo usando el siguiente comando:

    Puedes aprender más sobre el componente para React de FusionCharts desde el repositorio de FusionCharts.

    Incluyendo Bulma

    Para crear el diseño y la IU de nuestra aplicación de tablero usaremos el framework CSS Bulma. Por lo tanto, ve a la terminal y escribe:

    Ahora que hemos añadido todas las dependencias para nuestra aplicación de tablero, podemos ir y configurar la API de Google Sheets.

    Configuración de la API de Google Sheets

    Vamos a crear un proyecto nuevo para nuestra aplicación de tablero en la consola API de Google Developer para consumir datos de Google Sheets. Le daré el nombre "gsheets-dashboard". Puedes crear un nuevo proyecto usando este vínculo.

    Una vez que hayas creado el proyecto, serás redireccionado al tablero de la API de Google Developer. Ahora, para habilitar la API de Google Sheets para nuestra aplicación, haz clic en Go to APIs overview (Ir al resumen de APIs). Una vez que hayas hecho clic en Enable APIs and Services (Habilitar APIs y Servicios) aparecerá la biblioteca de APIs, así que ve y busca "Google Sheets API”.

    Cuando la encuentres haz clic en Enable (Habilitar), y después de ser procesada podrás ver la página como se muestra a continuación:

    En la barra lateral ve a Credentials (Credenciales) y haz clic en el botón Create credentials (Crear credenciales), luego selecciona API Key (Clave API). Haz clic en Restrict Key (Restringir clave) y dale un nombre (yo le he asignado el nombre "SaasDashboardAPIKey").

    Guarda la clave generada, ya que la necesitaremos para obtener datos de nuestra hoja de cálculo de Google Sheets posteriormente.

    Dentro de API Restrictions (Restricciones de API) selecciona Google Sheets API y guarda. Ahora estamos listos para nuestro siguiente paso, en el que conectaremos con la API de Google Sheets y obtendremos información.

    2. Conectando con la API de Google Sheets y recuperando información

    Vamos a ir a la hoja de Google Sheets que estaremos usando para nuestra aplicación de tablero. Esta es una captura de pantalla de su aspecto, llena de datos de ejemplo que he recolectado para un negocio SaaS ficticio. Verás que hay datos mensuales para tres años, enfocándose en algunos indicadores clave de desempeño (KPIs, o Key Performance Indicators en inglés) de un negocio SaaS. Entre estos se encuentran los ingresos, los clientes y otros indicadores de crecimiento.

    Our Google sheet

    Ahora necesitamos compartir la hoja para que cualquier persona pueda verla. para esto, en el menú File (Archivo) haz clic en Share (Compartir). Luego haz clic en Get shareable link (Obtener vínculo para compartir) y, después de que haya sido procesado, la hoja habrá sido compartida con el acceso "Anyone with link can view" ("Cualquiera que tenga el vínculo puede ver") de forma predeterminada.

    Ya que queremos que la hoja sea pública, ve a "Anyone with link can view" y haz clic en la opción More (Más) del menú desplegable. Selecciona la opción "On - Public on the web" ("En línea - Público en la web") y guarda.

    Puedes acceder a la hoja que voy a usar a través de este vínculo.

    Anotaremos el ID de la hoja de cálculo (puedes encontrarlo en el URL de Google Sheets, en mi caso es 1QZ3vKssyG9xEG-RJklQlBezIR8WqCfML4EfO2qe5vbw).

    Vamos a usar el método batchGet para nuestra aplicación de tablero. Este devolverá uno o más rangos de valores de una hoja de cálculo. Puedes aprender más sobre él aquí. Teniendo la clave API y el ID de la hoja de cálculo, vayamos al explorador de la API de Google Sheets para probarlo (también puedes usar el navegador/postman (¡yo lo usé!) para probar y obtener una respuesta JSON que se ve más o menos así):

    test

    He censurado la clave API - tú puedes colocar tu propia clave API en su lugar.

    Ahora vamos a abrir nuestro directorio de trabajo (saas-dashboard en mi caso) en un editor de código y vamos a crear un nuevo archivo llamado config.js. Agrega tu clave API y el ID de tu hoja de cálculo como se muestra a continuación.

    A continuación vayamos al archivo App.js. Vamos a agregar todo lo que nuestro boilerplate nos ha dado directamente en App.js. Idealmente esta no es la mejor arquitectura, pero es simplemente una demostración de los conceptos.

    Los pasos siguientes muestran la forma en la que voy a conectar nuestra aplicación tablero a la API de Google Sheets y a recuperar datos de esta última:

    1. Importa config.js que creamos usando el código siguiente y declara una variable con un URL de solicitud para la API de Google Sheets.

    2. Ahora vamos a asignar un arreglo vacío a this.state como se muestra en el siguiente código:

    3. Obtén los datos JSON del método componentDidMount del ciclo de vida de React:

    ¡Excelente! ahora que hemos establecido una conexión con Google Sheets, podemos comenzar a generar el diseño de nuestro tablero.

    Nota: Puedes verificar la conexión registrando el estado interior de la variable items.

    3. Creando el diseño del tablero SaaS

    Vamos a usar Bulma para crear el diseño de nuestra aplicación de tablero. Bulma es un framework CSS basado en Flexbox y nos proporciona muchos elementos y componentes pre-integrados y personalizables.

    Así es como se verá. Para obtener más información sobre lo que estos KPIs significan para un negocio, lee Métricas SaaS que verdaderamente importan: los KPIs que debes monitorear. Una vez que hayas creado el tablero, la versión final se verá como la de la siguiente captura de pantalla:

    También puedes revisar el tablero en funcionamiento aquí:

    Ahora vamos a dividir el diseño de nuestro tablero en tres partes:

    1. La sección de navegación
    2. La sección de KPIs
    3. La sección de gráficos

    También vamos a sobrescribir algunos de los estilos predeterminados proporcionados por Bulma usando nuestro propio CSS, que estará presente en el archivo App.css.

    Creando la sección de navegación

    Para crear la navegación vamos a usar el componente Navbar de Bulma. El siguiente es el fragmento de código HTML resultante:

    Ahora que nuestra sección de navegación está lista, vamos a crear un container para albergar las siguientes dos secciones de nuestro tablero. Este es el fragmento de código HTML:

    Puedes aprender más sobre contenedores aquí.

    Creando la sección de KPIs

    Para crear la sección de KPIs vamos a usar una etiqueta HTML <section> y a usar los componentes Columns y Card proporcionados por Bulma. El siguiente es el fragmento de código HTML:

    El código anterior creará una tarjeta KPI. De manera similar, vamos a crear tarjetas para los cuatro KPIs que queremos desplegar.

    Creando la sección de gráficos

    Para crear la sección de gráficos nuevamente usaremos una <section> de HTML con componentes Columns y Card proporcionados por Bulma. Vamos a dejar un <div> vacío con el ID único del gráfico.

    El siguiente es el fragmento de código HTML:

    Vamos a agregar todas las tarjetas de gráficos en un solo componente columna para que nuestro tablero sea responsivo, agregando diferentes puntos de quiebre proporcionados por Bulma en cada columna. Puedes aprender más sobre estos puntos de quiebre responsivos en la documentación de Bulma.

    El código anterior creará una tarjeta con un gráfico. De manera similar, vamos a crear tarjetas para los seis gráficos que queremos mostrar. Si has seguido los pasos anteriores debes tener un diseño similar al de la imagen anterior. De lo contrario no te preocupes, voy a añadir el vínculo del repositorio de Github para este tablero al final del tutorial.

    4. Creando KPIs para el tablero SaaS

    Ahora que nuestro diseño está listo, vamos a definir la funcionalidad de algunos de los elementos y a alimentarlos con datos de Google Sheets. Vamos a comenzar definiendo una función llamada getData en nuestro componente, que recibirá el año como argumento para quitar la estructura de los datos de Google Sheets presentes en el estado de la aplicación.

    Ahora vamos a recorrer los datos con un ciclo para calcular los valores según sea necesario para los KPIs. A continuación se muestra el código para crear el KPI de "Usuarios renovados".

    De manera similar vamos a definir variables para otros KPIs y a asignarles un valor después de recorrer los datos usando el código anterior.

    5. Creando gráficos para el tablero SaaS

    A continuación vamos a generar datos JSON para los gráficos y usaremos FusionCharts y su componente de React para mostrarlos.

    En la función getData que creamos en el paso anterior, vamos a definir un arreglo vacío que tendrá datos para el gráfico. El siguiente es el código necesario:

    Vamos a usar el gráfico "Gráfico de combinación multi-serie 2D Y única” (mscombi2d) en nuestro tablero. FusionCharts proporciona una gran cantidad de atributos que pueden ser usados para personalizar la apariencia de tus gráficos.

    Ahora vamos a crear un archivo llamado "chartCosmetics.js" que tendrá opciones cosméticas para nuestro gráfico, de manera que no tengamos que definirlas cada vez que generemos un gráfico. Se ve de esta manera:

    Ahora vamos a crear un arreglo de datos JSON para cada gráfico y usaremos las opciones cosméticas anteriores:

    Nota: Tienes que declarar una variable nula en el estado de la aplicación para cada gráfico, de manera que pueda ser usada posteriormente como lo hicimos antes con los datos de Google Sheets.

    Ahora que los datos JSON están listos para nuestros gráficos, vamos a enviarlos al componente para React de FusionCharts dentro del elemento <div> que creamos para cada gráfico.

    Para aprender más sobre el uso del componente para React de FusionCharts, puedes consultar esta página de documentación para desarrolladores.

    Puedes seguir los pasos anteriores para crear el resto de los gráficos. Ahora vamos a invocar a la función getData con el valor 2018 como argument desde el método componentDidMount, para que nuestro tablero cargue los datos del año 2018 de forma predeterminada. Si has seguido los pasos anteriores hasta aquí, deberás poder ver un tablero funcional como el de la siguiente imagen:

    final dashboard

    Conclusión

    Este tutorial te ayudará a crear un tablero SaaS usando Google Sheets. Habiendo seguido los pasos, ahora puedes hacer magia añadiendo más elementos a la IU, gráficos, KPIs y características adicionales. Yo mismo he agrega un poco de estilo y funcionalidad y puedes ver el tablero final aquí.

    Como referencia, puedes consultar el código fuente en el repositorio de Github. Si tienes alguna pregunta o sugerencia, ¡deja un comentario a continuación o grítame en Twitter!

    Advertisement
    Advertisement
    Looking for something to help kick start your next project?
    Envato Market has a range of items for sale to help get you started.