Cómo construir un tablero basado en web con Django, MongoDB y Pivot Table

¡Hola, la comunidad freeCodeCamp!

En este tutorial, me gustaría compartir contigo un enfoque para la visualización de datos en Python que puedes aplicar en el desarrollo de Django.

Si alguna vez se encontró con la necesidad de crear un tablero interactivo o si desea intentar hacerlo, puede seguir los pasos de este tutorial.

Si tiene alguna pregunta sobre el proceso, hágala en los comentarios. Estaré feliz de poder ayudarte.

Aquí está la lista de habilidades que dominará al completar el tutorial:

  • Cómo crear una aplicación básica de Django
  • Cómo alojar datos remotos de MongoDB en MongoDB Atlas
  • Cómo importar datos JSON y CSV a MongoDB
  • Cómo agregar una herramienta de informes a la aplicación Django

¡Empecemos! ?? ‍ ??? ‍?

Prerrequisitos

  • Conocimientos básicos de desarrollo web
  • Conocimiento seguro de Python
  • Experiencia básica con bases de datos NoSQL (por ejemplo, MongoDB)

Herramientas

  • Django: un marco web de Python de alto nivel.
  • MongoDB Atlas: un servicio de base de datos en la nube para aplicaciones modernas. Aquí alojaremos nuestra base de datos MongoDB.
  • Flexmonster Pivot Table & Charts : un componente web de JavaScript para informes. Manejará tareas de visualización de datos en el lado del cliente.
  • El conector MongoDB para Flexmonster : una herramienta del lado del servidor para una comunicación rápida entre la tabla dinámica y MongoDB.
  • PyCharm Community Edition : un IDE para el desarrollo de Python.
  • Datos de Kaggle

Establecer un proyecto de Django

Si eres nuevo en el desarrollo de Django, está bien. De manera paso a paso, configuraremos todo para que nuestra aplicación sea sobresaliente.

  • Asegúrese de haber instalado previamente Django en su máquina.
  • Primero, abra el directorio donde desea que se cree su proyecto. Abra la consola y ejecute el siguiente comando para crear un nuevo proyecto brillante de Django:

django-admin startproject django_reporting_project

  • A continuación, navegue hasta este proyecto:

cd django_reporting_project

  • Comprobemos si todo funciona como se esperaba. Ejecute el servidor Django:

python manage.py runserver

A menos que se especifique lo contrario, el servidor de desarrollo comienza en el puerto 8000 . Abra //127.0.0.1:8000/en su navegador. Si puedes ver este genial cohete, ¡estamos en el camino correcto!

Crea una aplicación

Ahora es el momento de crear nuestra aplicación con funciones de informes.

Si no se siente seguro acerca de la diferencia entre proyectos y aplicaciones en Django, aquí hay una referencia rápida para ayudarlo a resolverlo.
  • Llamémoslo dashboard:

python manage.py startapp dashboard

  • A continuación, abra el proyecto en su IDE favorito. Recomiendo encarecidamente usar PyCharm ya que hace que todo el proceso de programación en Python sea una bendición. También gestiona convenientemente la creación de un entorno virtual aislado específico del proyecto.
  • Una vez creada una aplicación, es necesario registrarla al nivel del proyecto. Abra el django_reporting_project/settings.pyarchivo y agregue el nombre de la aplicación al final de la INSTALLED_APPSlista:
INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'dashboard', ]

¡Hurra! Ahora, el proyecto conoce la existencia de su aplicación y estamos listos para pasar a la configuración de la base de datos.

Configurar la base de datos de MongoDB con MongoDB Atlas

Dejemos la aplicación a un lado hasta que terminemos de organizar nuestra base de datos. Sugiero que practiquemos la creación de la base de datos remota de MongoDB alojándola en MongoDB Atlas, un servicio de base de datos en la nube para aplicaciones. Alternativamente, puede preparar una base de datos local y trabajar con ella de cualquier manera conveniente (por ejemplo, a través de MongoDB Compass o el shell mongo).

  • Una vez que haya iniciado sesión en su cuenta de MongoDB, cree nuestro primer proyecto. Vamos a nombrarlo ECommerceData:
  • A continuación, agregue miembros (si es necesario) y establezca permisos. Puede invitar a los usuarios a participar en su proyecto a través de la dirección de correo electrónico.
  • Crea un clúster:
  • Elige el plan. Dado que estamos en nuestro camino de aprendizaje, el plan gratuito más simple será suficiente para nuestras necesidades.
  • Seleccione un proveedor de nube y una región. Las regiones recomendadas se infieren a través de su ubicación y se marcan con estrellas.
  • Dé un nombre significativo a nuestro nuevo clúster. Tenga en cuenta que no se puede cambiar más tarde. Vamos a nombrarlo ReportingData:

Preparar datos

Mientras espera que se cree su clúster, echemos un vistazo más de cerca a los datos con los que trabajaremos. Para este tutorial, usaremos el conjunto de datos de Kaggle con transacciones de un minorista del Reino Unido. Con estos datos, intentaremos construir un informe significativo que pueda servir para el análisis de datos exploratorios dentro de una organización real.

Además, usaremos datos JSON simulados sobre marketing. Nos ayudará a lograr el objetivo de establecer diferentes herramientas de informes dentro de la misma aplicación. Puede elegir cualquier dato de su preferencia.

Conéctese a su clúster

Ahora que nuestro clúster está listo, ¡ conectémonos a él!

  • Incluya en la lista blanca su dirección IP actual o agregue una diferente.
  • Cree un usuario de MongoDB. El primero tendrá permisos de atlasAdmin para el proyecto actual, lo que significa poseer los siguientes roles y acciones de privilegio. Por razones de seguridad, se recomienda generar automáticamente una contraseña segura.
  • Elija el método de conexión que más le convenga. Para probar la conexión, primero podemos usar la cadena de conexión para el shell mongo. Más adelante también usaremos una cadena de conexión para una aplicación.
  • Conéctese a él a través del shell mongo. Abra la línea de comando y ejecute lo siguiente:

mongo "mongodb+srv://reportingdata-n8b3j.mongodb.net/test"  --username yourUserName

El mensaje interactivo le pedirá una contraseña para autenticarse.

Verifique las métricas del clúster

¡Uf! Casi estámos allí.

Ahora regrese a la página con el resumen del clúster y vea cómo cobró vida. A partir de ahora, podemos obtener información sobre las operaciones de escritura y lectura de la base de datos MongoDB, el número de conexiones activas, el tamaño lógico de nuestro conjunto de réplicas: toda esta información estadística está a su alcance. Pero lo más importante ahora es que es posible crear y administrar bases de datos y colecciones.

Crea una base de datos

Crea tu primera base de datos y dos colecciones. Vamos a nombrarlos como comercio electrónico, transacciones y marketing .

Así es como se ve nuestro espacio de trabajo ahora:

Parece bastante vacío, ¿no?

Importar datos a MongoDB

Completemos la colección con datos . Comenzaremos con los datos minoristas descargados previamente de Kaggle .

  • Unzip the archive and navigate to the directory where its contents are stored.
  • Next, open the command prompt there and import the data to the transactions collection of the ecommerce database using the mongoimportcommand and the given connection string for the mongo shell:

mongoimport --uri "mongodb+srv://username:[email protected]/ecommerce?retryWrites=true&w=majority" --collection transactions --drop --type csv --headerline --file data.csv

❗Please remember to replace username and password keywords with your credentials.

Congrats! We’ve just downloaded 541909 documents to our collection. What’s next?

  • Upload the dataset with marketing metrics to the marketing collection. Here’s the JSON file with the sample data we’re going to use.

Import the JSON array into the collection using the following command:

mongoimport --uri "mongodb+srv://username:[email protected]/ecommerce?retryWrites=true&w=majority" --collection marketing --drop --jsonArray marketing_data.json

If this data is not enough, we could dynamically generate more data using the mongoengine / PyMongo models. This is what our next tutorial of this series will be dedicated to. But for now, we’ll skip this part and work with the data we already have.

Now that our collections contain data, we can explore the number of documents in each collection as well as their structure. For more insights, I’d recommend using MongoDB Compass which is the official GUI tool for MongoDB. With it, you can explore the structure of each collection, check the distribution of field types, build aggregation pipelines, run queries, evaluate and optimize their performance. To start, download the application and use the connection string for Compass provided by MongoDB Atlas.

Map URL patterns to views

Let’s get back to Django.

  • Create urls.py in the app’s folder (inside dashboard). Here we’ll store URL routes for our application. These URL patterns will be matched with views defined indashboard/views.py:
from django.urls import path from . import views urlpatterns = [ path('report/retail', views.ecommerce_report_page, name="retail_report"), path('report/marketing', views.marketing_report_page, name="marketing_report"), ] 
  • The application’s URLs need to be registered at the project’s level. Open django-reporting-project/urls.py and replace the contents with the following code:
from django.contrib import admin from django.urls import path, include urlpatterns = [ path('admin/', admin.site.urls), path('', include('dashboard.urls')), ]

Create views

A view is simply a function that accepts a web request and returns a web response. The response can be of any type. Using the render() function, we’ll be returning an HTML template and a context combined into a single HttpResponse object. Note that views in Django can also be class-based.

  • In dashboard/views.py let’s create two simple views for our reports:
from django.shortcuts import render def ecommerce_report_page(request): return render(request, 'retail_report.html', {}) def marketing_report_page(request): return render(request, 'marketing_report.html', {}) 

Create templates

  • Firstly, create the templates folder inside your app’s directory. This is where Django will be searching for your HTML pages.

  • Next, let’s design the layout of our application. I suggest we add a navigation bar that will be displayed on every page. For this, we’ll create a basic template called base.htmlwhich all other pages will extend according to business logic. This way we'll take advantage of template inheritance - a powerful part of the Django’s template engine. Please find the HTML code on GitHub.

As you may have noticed, we’re going to use Bootstrap styles. This is to prettify our pages with ready-to-use UI components.

Note that in the navigation bar, we’ve added two links that redirect to the report pages. You can do it by setting the link's hrefproperty to the name of the URL pattern, specified by the name keyword in the URL pattern. For example, in the following way:

href="{% url 'marketing_report' %}"

  • It's time to create pages where the reports will be located. Let me show you how to create a retail report first. By following these principles, you can create as many other reporting pages as you need.
  1. In templates, create marketing_report.html.
  2. Add an extends tag to inherit from the basic template: {% extends "base.html" %}
  3. Add a block tag to define our child template's content:{% block content %}

    {% endblock %}

  4. Within the block, add Flexmonster scripts and containers where the reporting components will be placed (i.e., the pivot table and pivot charts):

  5. Add tags where JavaScript code will be executed. Within these tags, instantiate two Flexmonster objects using init API calls.
var pivot = new Flexmonster({ container: "#pivot", componentFolder: "//cdn.flexmonster.com/", height: 600, toolbar: true, report: {} }); var pivot_charts = new Flexmonster({ container: "#pivot_charts", componentFolder: "//cdn.flexmonster.com/", height: 600, toolbar: true, report: {} });

You can place as many Flexmonster components as you want. Later, we’ll fill these components with data and compose custom reports.

Set up the MongoDB connector

To establish efficient communication between Flexmonster Pivot Table and the MongoDB database, we can use the MongoDB Connector provided by Flexmonster. This is a server-side tool that does all the hard work for us, namely:

  1. connects to the MongoDB database
  2. gets the collection’s structure
  3. queries data every time the report’s structure is changed
  4. sends aggregated data back to show it in the pivot table.

To run it, let’s clone this sample from GitHub, navigate to its directory, and install the npm packages by running npm install.

  • In src/server.tsyou can check which port the connector will be running on. You can change the default one. Here, you can also specify which module will handle requests coming to the endpoint ( mongo.ts in our case).
  • After, specify the database credentials in src/controller/mongo.ts. Right there, add the connector string for application provided by MongoDB Atlas and specify the database’s name.

Define reports

Now we’re ready to define the report’s configuration on the client side.

  • Here’s a minimal configuration which makes the pivot table work with the MongoDB data via the connector:
var pivot = new Flexmonster({ container: "#pivot", componentFolder: "//cdn.flexmonster.com/", height: 600, toolbar: true, report: { "dataSource": { "type": "api", "url": "//localhost:9204/mongo", // the url where our connector is running "index": "marketing" // specify the collection’s name }, "slice": {} } });
  • Specify a slice - the set of hierarchies that will be shown on the grid or on the chart. Here’s the sample configuration for the pivot grid.

"slice": { "rows": [ { "uniqueName": "Country" } ], "columns": [ { "uniqueName": "[Measures]" } ], "measures": [ { "uniqueName": "Leads", "aggregation": "sum" }, { "uniqueName": "Opportunities", "aggregation": "sum" } ] }

Run your reporting app

Now that we’ve configured the client side, let’s navigate to the MongoDB connector’s directory and run the server:

npm run build

npm run start

  • Next, return to the PyCharm project and run the Django server:

    python manage.py runserver

  • Open //127.0.0.1:8000/report/marketing. To switch to another report, click the report’s name on the navigation bar.

It’s time to evaluate the results! Here you can see the report for the marketing department:

Try experimenting with the layout:

  • Slice & dice the data to get your unique perspective.
  • Change summary functions, filter & sort the records.
  • Switch between classic and compact form to know what feels better.

Enjoy analytics dashboard in Python

Congratulations! Excellent work. We’ve brought our data to life. Now you have a powerful Django application enabled with reporting and data visualization functionality.

The thing your end-users may find extremely comfy is that it’s possible to configure a report, save it, and pick up where you left off later by uploading it into the pivot table. Reports are neat JSON files that can be stored locally or to the server. Also, it’s possible to export reports into PDF, HTML, Image, or Excel files.

Feel free to tailor the app according to your business requirements! You can add more complex logic, change the data source (e.g., MySQL, PostgreSQL, Oracle, Microsoft Analysis Services, Elasticsearch, etc), and customize the appearance and/or the functionality of the pivot table and pivot charts.

Further reading

  • Full code on GitHub
  • A comprehensive guide on how to get started with MongoDB Atlas
  • Getting started with Flexmonster Pivot Table & Charts
  • Getting started with Django
  • Introduction to the MongoDB connector
  • The MongoDB connector API
  • How to change report themes
  • How to localize the pivot table component

Extra settings to prettify your report

Here's an additional section for curious minds!

To prettify the hierarchies’ captions and define field types, we’ll add mapping - a special object in the data source configuration of the report. Mapping helps us define how to display field names by setting captions. Plus, it’s possible to explicitly define types of fields (numbers, strings, different types of dates). Every piece of configuration depends on your business logic.

Generally speaking, mapping creates an additional level of abstraction between the data source and its representation.

Here’s an example of how it can be defined for the retail dataset:

"mapping": { "InvoiceNo": { "caption": "Invoice Number", "type": "string" }, "StockCode": { "caption": "Stock Code", "type": "string" }, "Description": { "type": "string" }, "Quantity": { "type": "number" }, "InvoiceDate": { "type": "string", "caption": "Invoice Date" }, "UnitPrice": { "type": "number", "caption": "Unit Price" }, "CustomerID": { "type": "string", "caption": "Customer ID" }, "Country": { "type": "string" } }