Πώς να δημιουργήσετε έναν πίνακα ελέγχου που βασίζεται στον ιστό με Django, MongoDB και Pivot Table

Γεια, η κοινότητα του FreeCodeCamp!

Σε αυτό το σεμινάριο, θα ήθελα να μοιραστώ μαζί σας μια προσέγγιση στην οπτικοποίηση δεδομένων στο Python, την οποία μπορείτε να εφαρμόσετε περαιτέρω στην ανάπτυξη του Django.

Εάν αντιμετωπίσατε ποτέ την ανάγκη δημιουργίας ενός διαδραστικού πίνακα ελέγχου ή θέλετε να το κάνετε, μπορείτε να ακολουθήσετε τα βήματα από αυτό το σεμινάριο.

Εάν έχετε ερωτήσεις σχετικά με τη διαδικασία, ρωτήστε τους στα σχόλια. Θα χαρώ να σας βοηθήσω.

Εδώ είναι η λίστα των δεξιοτήτων που θα αποκτήσετε μετά την ολοκλήρωση του σεμιναρίου:

  • Πώς να δημιουργήσετε μια βασική εφαρμογή Django
  • Πώς να φιλοξενήσει την απομακρυσμένη MongoDB δεδομένων MongoDB Atlas
  • Τρόπος εισαγωγής δεδομένων JSON και CSV στο MongoDB
  • Πώς να προσθέσετε ένα εργαλείο αναφοράς στην εφαρμογή Django

Ας αρχίσουμε! ?? ‍ ??? ‍;

Προαπαιτούμενα

  • Βασικές γνώσεις ανάπτυξης ιστοσελίδων
  • Αυτοπεποίθηση γνώση του Python
  • Βασική εμπειρία με βάσεις δεδομένων NoSQL (π.χ. MongoDB)

Εργαλεία

  • Django - ένα διαδικτυακό πλαίσιο Python υψηλού επιπέδου.
  • MongoDB Atlas - μια υπηρεσία βάσης δεδομένων cloud για σύγχρονες εφαρμογές. Εδώ θα φιλοξενήσουμε τη βάση δεδομένων MongoDB.
  • Flexmonster Pivot Table & Charts - ένα στοιχείο ιστού JavaScript για αναφορά. Θα χειριστεί εργασίες οπτικοποίησης δεδομένων από την πλευρά του πελάτη.
  • Η σύνδεση MongoDB για το Flexmonster - ένα εργαλείο διακομιστή για γρήγορη επικοινωνία μεταξύ Pivot Table & MongoDB.
  • PyCharm Community Edition - ένα IDE για την ανάπτυξη Python.
  • Kaggle δεδομένων

Δημιουργήστε ένα έργο Django

Εάν είστε νέοι στην ανάπτυξη του Django, αυτό είναι εντάξει. Κατά βήμα-βήμα, θα ρυθμίσουμε τα πάντα για να κάνουμε την εφαρμογή μας εξαιρετική.

  • Βεβαιωθείτε ότι έχετε εγκαταστήσει προηγουμένως το Django στον υπολογιστή σας.
  • Αρχικά, ανοίξτε τον κατάλογο στον οποίο θέλετε να δημιουργηθεί το έργο σας. Ανοίξτε την κονσόλα και εκτελέστε την ακόλουθη εντολή για να δημιουργήσετε ένα νέο λαμπερό έργο Django:

django-admin startproject django_reporting_project

  • Στη συνέχεια, μεταβείτε σε αυτό το έργο:

cd django_reporting_project

  • Ας δούμε αν όλα λειτουργούν όπως αναμενόταν. Εκτελέστε τον διακομιστή Django:

python manage.py runserver

Εκτός αν ορίζεται διαφορετικά, ο διακομιστής ανάπτυξης ξεκινά από τη θύρα 8000 . Ανοίξτε //127.0.0.1:8000/στο πρόγραμμα περιήγησής σας. Εάν μπορείτε να δείτε αυτόν τον δροσερό πύραυλο, είμαστε στο σωστό δρόμο!

Δημιουργήστε μια εφαρμογή

Τώρα ήρθε η ώρα να δημιουργήσουμε την εφαρμογή μας με δυνατότητες αναφοράς.

Εάν δεν αισθάνεστε σίγουροι για τη διαφορά μεταξύ έργων και εφαρμογών στο Django, εδώ είναι μια γρήγορη αναφορά που θα σας βοηθήσει να το καταλάβετε.
  • Ας το ονομάσουμε dashboard:

python manage.py startapp dashboard

  • Στη συνέχεια, ανοίξτε το έργο στο αγαπημένο σας IDE. Συνιστώ ανεπιφύλακτα τη χρήση του PyCharm αφού καθιστά την όλη διαδικασία προγραμματισμού στο Python ευδαιμονία. Διαχειρίζεται επίσης βολικά τη δημιουργία ενός απομονωμένου εικονικού περιβάλλοντος για συγκεκριμένο έργο.
  • Μετά τη δημιουργία μιας εφαρμογής, είναι απαραίτητο να την καταχωρίσετε στο επίπεδο του έργου. Ανοίξτε το django_reporting_project/settings.pyαρχείο και προσθέστε το όνομα της εφαρμογής στο τέλος της INSTALLED_APPSλίστας:
INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'dashboard', ]

Ζήτω! Τώρα το έργο γνωρίζει την ύπαρξη της εφαρμογής σας και είμαστε έτοιμοι να προχωρήσουμε στη διαμόρφωση της βάσης δεδομένων.

Ρύθμιση βάσης δεδομένων MongoDB χρησιμοποιώντας το MongoDB Atlas

Ας αφήσουμε την εφαρμογή στην άκρη μέχρι να ολοκληρώσουμε τη ρύθμιση της βάσης δεδομένων μας Προτείνω να εξασκηθούμε στη δημιουργία της απομακρυσμένης βάσης δεδομένων MongoDB φιλοξενώντας τη στο MongoDB Atlas - μια υπηρεσία βάσης δεδομένων cloud για εφαρμογές. Εναλλακτικά, μπορείτε να προετοιμάσετε μια τοπική βάση δεδομένων και να εργαστείτε με αυτήν με οποιονδήποτε βολικό τρόπο (π.χ. μέσω του MongoDB Compass ή του mongo shell).

  • Αφού συνδεθείτε στο λογαριασμό σας στο MongoDB, δημιουργήστε το πρώτο μας έργο. Ας το ονομάσουμε ECommerceData:
  • Στη συνέχεια, προσθέστε μέλη (εάν χρειάζεται) και ορίστε δικαιώματα. Μπορείτε να προσκαλέσετε χρήστες να συμμετάσχουν στο έργο σας μέσω διεύθυνσης email.
  • Δημιουργήστε ένα σύμπλεγμα:
  • Επιλέξτε το σχέδιο. Εφόσον βρισκόμαστε στο δρόμο μάθησης, το απλούστερο δωρεάν πρόγραμμα θα είναι αρκετό για τις ανάγκες μας.
  • Επιλέξτε έναν πάροχο cloud και μια περιοχή. Οι προτεινόμενες περιοχές συνάγονται μέσω της τοποθεσίας σας και επισημαίνονται με αστέρια.
  • Δώστε ένα σημαντικό όνομα στο ολοκαίνουργιο σύμπλεγμα μας. Σημειώστε ότι δεν μπορεί να αλλάξει αργότερα. Ας το ονομάσουμε ReportingData:

Προετοιμάστε δεδομένα

Ενώ περιμένετε να δημιουργηθεί το σύμπλεγμα, ας ρίξουμε μια πιο προσεκτική ματιά στα δεδομένα με τα οποία εργαζόμαστε. Για αυτό το σεμινάριο, θα χρησιμοποιήσουμε το σύνολο δεδομένων Kaggle με συναλλαγές από βρετανικό κατάστημα λιανικής. Χρησιμοποιώντας αυτά τα δεδομένα, θα προσπαθήσουμε να δημιουργήσουμε μια ουσιαστική αναφορά που μπορεί να χρησιμεύσει για διερευνητική ανάλυση δεδομένων σε έναν πραγματικό οργανισμό.

Επιπλέον, θα χρησιμοποιήσουμε πλαστά δεδομένα JSON σχετικά με το μάρκετινγκ. Θα μας βοηθήσει να επιτύχουμε τον στόχο της δημιουργίας διαφορετικών εργαλείων αναφοράς στην ίδια εφαρμογή. Μπορείτε να επιλέξετε οποιαδήποτε δεδομένα της προτίμησής σας.

Συνδεθείτε στο σύμπλεγμα

Τώρα που το σύμπλεγμα μας είναι έτοιμο, ας συνδεθούμε μαζί του!

  • Επιτρέψτε την τρέχουσα διεύθυνση IP σας στη λίστα επιτρεπόμενων ή προσθέστε μια άλλη.
  • Δημιουργήστε έναν χρήστη MongoDB. Το πρώτο θα έχει δικαιώματα atlasAdmin για το τρέχον έργο που σημαίνει ότι διαθέτει τους ακόλουθους ρόλους και ενέργειες προνομίων. Για λόγους ασφαλείας, συνιστάται η αυτόματη δημιουργία ισχυρού κωδικού πρόσβασης.
  • Επιλέξτε μια μέθοδο σύνδεσης που σας ταιριάζει καλύτερα. Για να ελέγξουμε τη σύνδεση, μπορούμε πρώτα να χρησιμοποιήσουμε τη συμβολοσειρά σύνδεσης για το κέλυφος mongo. Αργότερα θα χρησιμοποιήσουμε επίσης μια συμβολοσειρά σύνδεσης για μια εφαρμογή.
  • Συνδεθείτε σε αυτό μέσω του κελύφους mongo. Ανοίξτε τη γραμμή εντολών και εκτελέστε τα εξής:

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

Το διαδραστικό μήνυμα θα σας ζητήσει έναν κωδικό πρόσβασης για έλεγχο ταυτότητας.

Ελέγξτε τις μετρήσεις συμπλέγματος

Φτου! Σχεδόν φτάσαμε.

Now get back to the page with the cluster summary and see how it came to life! From now, we can gain insights into write and read operations of the MongoDB database, the number of active connections, the logical size of our replica set - all this statistical information is at your hand. But most importantly now it’s possible to create and manage databases and collections.

Create a database

Create your first database and two collections. Let’s name them ecommerce,transactions, and marketing correspondingly.

Here’s how our workspace looks like now:

Looks quite empty, doesn’t it?

Import data to MongoDB

Let’s populate the collection with data. We’ll start with the retail data previously downloaded from 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

Ακολουθεί μια επιπλέον ενότητα για τα περίεργα μυαλά!

Για να προωθήσουμε τους υπότιτλους των ιεραρχιών και να ορίσουμε τύπους πεδίων, θα προσθέσουμε αντιστοίχιση - ένα ειδικό αντικείμενο στη διαμόρφωση προέλευσης δεδομένων της αναφοράς. Η χαρτογράφηση μας βοηθά να καθορίσουμε τον τρόπο εμφάνισης των ονομάτων πεδίων, ορίζοντας λεζάντες Επιπλέον, μπορείτε να ορίσετε ρητά τους τύπους πεδίων (αριθμοί, συμβολοσειρές, διαφορετικοί τύποι ημερομηνιών). Κάθε κομμάτι διαμόρφωσης εξαρτάται από τη λογική της επιχείρησής σας.

Σε γενικές γραμμές, η χαρτογράφηση δημιουργεί ένα επιπλέον επίπεδο αφαίρεσης μεταξύ της πηγής δεδομένων και της αναπαράστασής της.

Ακολουθεί ένα παράδειγμα για το πώς μπορεί να οριστεί για το σύνολο δεδομένων λιανικής:

"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" } }