Un CRM o (Customer Relationship Manager) es una aplicación de software para el apoyo de marketing y ventas.

Hay bastantes variantes de CRM, en esta ocasión construiremos uno orientado al funnel de ventas que nos ayude a visualizar a nuestros prospectos, en que etapa de la conversación están, en este tutorial aprenderás como crear un CRM como el que se ve como el en la portada.

El modelo de datos

Partiremos con un modelo sencillo que resuelva el core del problema, o sea almacenar los usuarios y la etapa respectiva.

Modelo de datos de un CRM

Modelo de datos básico del CRM

Para empezar rápido los crearemos con scaffolds.

Primero el de stage

luego el de lead

Finalmente migraremos la base de datos

Agregando datos al modelo

El paso siguiente es tener datos para probarlo, por lo que dentro del archivo seeds crearemos un par de datos falsos para poblar nuestra base de datos y hacer pruebas.

Para agregar datos ocuparemos la gema faker, agregamos al gemfile

Luego dentro del archivo seed.rb

La página de inicio

Para configurar la página de inicio iremos al archivo routes.rb

dentro del archivo pondremos

Preparando la página para agregar el gráfico

Primero vamos a pasar la página a SLIM, lo podemos hacer manualmente, copiarlo de aquí, o ocupando el plugin de sublime HTML2SLIM

Para que la página función con SLIM tenemos que agregar la gema SLIM al gemfile, luego hacer bundle y finalmente reiniciar el servidor.

En lugar de @data pondremos los datos para graficar, y donde dice render @leads se cargará la vista parcial. utilizamos render para mostrar la colección de leads, puesto que después vamos a necesitar actualizarlos vía AJAX y de esta forma es más fácil trabajarlos.

Leads controller

dentro del leads controller en el método index debemos seleccionar los datos para el gráfico, lo que espera d3-funnel es un arreglo del tipo

Para poder seleccionar estos datos de nuestra base de datos tenemos que hacer un join entre ambas tablas, como solo nos interesa el arreglo y los datos específicos en lugar de los objetos ocuparemos pluck

Para aprender más sobre group, count y pluck puedes seguir este artículo http://blog.desafiolatam.com/contando-con-rails/

La vista parcial para lead

Crear el archivo _lead.html.slim dentro de la carpeta app/views/leads

Agregando bootstrap

En el archivo application.html.slim (si, lo se, me SLIM) tenemos que cambiar el head por

 

Mostrando el gráfico

Necesitamos agregar dos archivos javascript.

d3.js y d3funnel.js, los podemos descargar desde https://d3js.org/ y https://github.com/jakezatecky/d3-funnel

Ambos archivos deben ir dentro de app/assets/javascripts, es importante que se cargue d3.js primero y luego d3funnel, podemos hacer los requires manualmente dentro del manifiesto o simplemente renombrar d3-funnel.js a d3funnel.

Con los javascript cargados lo único que nos queda es utilizarlos para hacer el gráfico, para eso dentro de la mima vista index.html.slim, agregaremos al final:

Al recargar la página ya tendremos.

funnel básico

Podemos darle un efecto 3d al el gráfico utilizando las opciones.

Como habrás podido darte cuenta, hacer proyectos con Ruby on Rails es realmente ágil y se necesitan muchas personas que manejen este framework, por lo que si te interesa introducirse de lleno a desarrollo con Rails te invito a participar a Desafío Latam en tu país. 

Share Button

Director de DesafíoLatam. Ingeniero Civil Informático de la Universidad Federico Santa María. Emprendedor lean, dedicado al desarrollo de una mejor web con ruby on rails. Fanático de los números y las métricas, la música y la fotografía.