Πώς να δημιουργήσετε έναν πίνακα ελέγχου αναλυτικών στοιχείων σε μια εφαρμογή Django

Γεια σας!

Η Python , η οπτικοποίηση δεδομένων και ο προγραμματισμός είναι τα θέματα στα οποία αφιερώνω βαθιά. Γι 'αυτό θα ήθελα να μοιραστώ μαζί σας τις ιδέες μου καθώς και τον ενθουσιασμό μου για την ανακάλυψη νέων τρόπων παρουσίασης δεδομένων με ουσιαστικό τρόπο.

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

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

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

Για να περπατήσετε με σιγουριά στα βήματα, χρειάζεστε μια βασική γνώση του πλαισίου Django και λίγη δημιουργικότητα . ✨

Για να ακολουθήσετε, μπορείτε να κατεβάσετε το δείγμα GitHub.

Ακολουθεί μια σύντομη λίστα εργαλείων που θα χρησιμοποιήσουμε:

  • Python 3.7.4
  • Τζάνγκο
  • Virtualenv
  • Flexmonster Pivot Table & Charts (βιβλιοθήκη JavaScript)
  • SQLite

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

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

Ξεκινώντας με το Django

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

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

django-admin startproject analytics_project

Τώρα υπάρχει ένας νέος κατάλογος που ονομάζεται analytics_project. Ας δούμε αν κάναμε τα πάντα σωστά. Μεταβείτε analytics_projectκαι ξεκινήστε τον διακομιστή με μια εντολή κονσόλας:

python manage.py runserver

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

Στη συνέχεια, δημιουργήστε μια νέα εφαρμογή στο έργο σας. Ας το ονομάσουμε dashboard:

python manage.py startapp dashboard

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

Ορίστε. Τώρα βλέπουμε έναν νέο κατάλογο στο έργο. Περιέχει τα ακόλουθα αρχεία:

__init__.py για να κάνει το Python να το αντιμετωπίζει ως πακέτο

admin.py - ρυθμίσεις για τις σελίδες διαχειριστή Django

apps.py - ρυθμίσεις για τις ρυθμίσεις της εφαρμογής

models.py - τάξεις που θα μετατραπούν σε πίνακες βάσεων δεδομένων από το ORM του Django

tests.py - τάξεις δοκιμής

views.py - συναρτήσεις & κλάσεις που καθορίζουν τον τρόπο εμφάνισης των δεδομένων στα πρότυπα

Στη συνέχεια, είναι απαραίτητο να καταχωρήσετε την εφαρμογή στο έργο.

Μεταβείτε analytics_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', ]

Τώρα το έργο μας γνωρίζει την ύπαρξη της εφαρμογής.

Προβολές

Στο dashboard/views.py, θα δημιουργήσουμε μια συνάρτηση που θα κατευθύνει έναν χρήστη στα συγκεκριμένα πρότυπα που ορίζονται στο dashboard/templatesφάκελο. Οι προβολές μπορούν επίσης να περιέχουν μαθήματα.

Δείτε πώς το ορίζουμε:

from django.http import JsonResponse from django.shortcuts import render from dashboard.models import Order from django.core import serializers def dashboard_with_pivot(request): return render(request, 'dashboard_with_pivot.html', {})

Μόλις κληθεί, αυτή η λειτουργία θα αποδώσει dashboard_with_pivot.html- ένα πρότυπο που θα ορίσουμε σύντομα. Θα περιέχει τα στοιχεία του συγκεντρωτικού πίνακα και των συγκεντρωτικών διαγραμμάτων.

Λίγα ακόμη λόγια για αυτήν τη λειτουργία. Το requestεπιχείρημά του, μια παρουσία HttpRequestObject, περιέχει πληροφορίες σχετικά με το αίτημα, π.χ. τη χρησιμοποιούμενη μέθοδο HTTP (GET ή POST). Η μέθοδος renderαναζητά πρότυπα HTML σε έναν templatesκατάλογο που βρίσκεται μέσα στον κατάλογο της εφαρμογής.

Πρέπει επίσης να δημιουργήσουμε μια βοηθητική μέθοδο που στέλνει την απόκριση με δεδομένα στον συγκεντρωτικό πίνακα στο front-end της εφαρμογής. Ας το ονομάσουμε pivot_data:

def pivot_data(request): dataset = Order.objects.all() data = serializers.serialize('json', dataset) return JsonResponse(data, safe=False)

Πιθανόν, IDE σας σας λέει ότι δεν μπορείτε να βρείτε μια αναφορά Orderστο models.py. Κανένα πρόβλημα - θα το αντιμετωπίσουμε αργότερα.

Πρότυπα

Προς το παρόν, θα εκμεταλλευτούμε το σύστημα προτύπων Django.

Ας δημιουργήσουμε έναν νέο κατάλογο templatesμέσα dashboardκαι δημιουργήστε το πρώτο πρότυπο HTML που ονομάζεται dashboard_with_pivot.html. Θα εμφανίζεται στον χρήστη κατόπιν αιτήματος. Εδώ προσθέτουμε επίσης τα σενάρια και τα κοντέινερ για στοιχεία οπτικοποίησης δεδομένων:

  Dashboard with Flexmonster 

Αντιστοίχιση λειτουργιών προβολών σε διευθύνσεις URL

Για να καλέσουμε τις προβολές και να εμφανίσουμε πρότυπα HTML που αποδίδονται στον χρήστη, πρέπει να αντιστοιχίσουμε τις προβολές στις αντίστοιχες διευθύνσεις URL.

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

Go to analytics_app/urls.py and add relevant configurations for the dashboard app at the project's level.

from django.contrib import admin from django.urls import path, include urlpatterns = [ path('admin/', admin.site.urls), path('dashboard/', include('dashboard.urls')), ] 

Now the URLs from the dashboard app can be accessed but only if they are prefixed by dashboard.

After, go to dashboard/urls.py (create this file if it doesn’t exist) and add a list of URL patterns that are mapped to the view functions:

from django.urls import path from . import views urlpatterns = [ path('', views.dashboard_with_pivot, name="dashboard_with_pivot"), path('data', views.pivot_data, name="pivot_data"), ]

Model

And, at last, we've gotten to data modeling. This is my favorite part.

As you might know, a data model is a conceptual representation of the data stored in a database.

Since the purpose of this tutorial is to show how to build interactive data visualization inside the app, we won’t be worrying much about the database choice. We’ll be using SQLite - a lightweight database that ships with the Django web development server.

But keep in mind that this database is not the appropriate choice for production development. With the Django ORM, you can use other databases that use the SQL language, such as PostgreSQL or MySQL.

For the sake of simplicity, our model will consist of one class. You can create more classes and define relationships between them, complex or simple ones.

Imagine we're designing a dashboard for the sales department. So, let's create an Order class and define its attributes in dashboard/models.py:

from django.db import models class Order(models.Model): product_category = models.CharField(max_length=20) payment_method = models.CharField(max_length=50) shipping_cost = models.CharField(max_length=50) unit_price = models.DecimalField(max_digits=5, decimal_places=2)

Working with a database

Now we need to create a database and populate it with records.

But how can we translate our model class into a database table?

This is where the concept of migration comes in handy. Migration is simply a file that describes which changes must be applied to the database. Every time we need to create a database based on the model described by Python classes, we use migration.

The data may come as Python objects, dictionaries, or lists. This time we'll represent the entities from the database using Python classes that are located in the models directory.

Create migration for the app with one command:

python manage.py makemigrations dashboard

Here we specified that the app should tell Django to apply migrations for the dashboard app's models.

After creating a migration file, apply migrations described in it and create a database:

python manage.py migrate dashboard

If you see a new file db.sqlite3 in the project's directory, we are ready to work with the database.

Let's create instances of our Order class. For this, we'll use the Django shell - it's similar to the Python shell but allows accessing the database and creating new entries.

So, start the Django shell:

python manage.py shell

And write the following code in the interactive console:

from dashboard.models import Order >>> o1 = Order( ... product_category="Books", ... payment_method="Credit Card", ... shipping_cost=39, ... unit_price=59 ... ) >>> o1.save()

Similarly, you can create and save as many objects as you need.

Connecting data to Flexmonster

And here's what I promised to explain.

Let's figure out how to pass the data from your model to the data visualization tool on the front end.

To make the back end and Flexmonster communicate, we can follow two different approaches:

  • Using the request-response cycle. We can use Python and the Django template engine to write JavaScript code directly in the template.
  • Using an async request (AJAX) that returns the data in JSON.

In my mind, the second one is the most convenient because of a number of reasons. First of all, Flexmonster understands JSON. To be precise, it can accept an array of JSON objects as input data. Another benefit of using async requests is the better page loading speed and more maintainable code.

Let's see how it works.

Go to the templates/dashboard_pivot.html.

Here we've created two div containers where the pivot grid and pivot charts will be rendered.

Within the ajax call, we make a request based on the URL contained in the data-URL property. Then we tell the ajax request that we expect a JSON object to be returned (defined by dataType).

Once the request is completed, the JSON response returned by our server is set to the data parameter, and the pivot table, filled with this data, is rendered.

The query result (the instance of JSONResponse) returns a string that contains an array object with extra meta information, so we should add a tiny function for data processing on the front end. It will extract only those nested objects we need and put them into a single array. This is because Flexmonster accepts an array of JSON objects without nested levels.

function processData(dataset) { var result = [] dataset = JSON.parse(dataset); dataset.forEach(item => result.push(item.fields)); return result; }

After processing the data, the component receives it in the right format and performs all the hard work of data visualization. A huge plus is that there’s no need to group or aggregate the values of objects manually.

Here's how the entire script in the template looks:

function processData(dataset) { var result = [] dataset = JSON.parse(dataset); dataset.forEach(item => result.push(item.fields)); return result; } $.ajax({ url: $("#pivot-table-container").attr("data-url"), dataType: 'json', success: function(data) { new Flexmonster({ container: "#pivot-table-container", componentFolder: "//cdn.flexmonster.com/", width: "100%", height: 430, toolbar: true, report: { dataSource: { type: "json", data: processData(data) }, slice: {} } }); new Flexmonster({ container: "#pivot-chart-container", componentFolder: "//cdn.flexmonster.com/", width: "100%", height: 430, //toolbar: true, report: { dataSource: { type: "json", data: processData(data) }, slice: {}, "options": { "viewType": "charts", "chart": { "type": "pie" } } } }); } });

Don't forget to enclose this JavaScript code in tags.

Phew! We’re nearly there with this app.

Fields customization

Flexmonster provides a special property of the data source that allows setting field data types, custom captions, and defining multi-level hierarchies.

This is a nice feature to have - we can elegantly separate data and its presentation right in the report's configuration.

Add it to the dataSource property of the report:

mapping: { "product_category": { "caption": "Product Category", "type": "string" }, "payment_method": { "caption": "Payment Method", "type": "string" }, "shipping_cost": { "caption": "Shipping Cost", "type": "number" }, "unit_price": { "caption": "Unit Price", "type": "number" } }

Dashboard's design

To make the dashboard, we’ve rendered two instances of Flexmonster (you can create as many as you want, depending on the data visualization goals you want to reach). One is for the pivot table with summarized data, and the other is for the pivot charts.

Both instances share the same data source from our model. I encourage you to try making them work in sync: with the reportchange event, you can make one instance react to the changes in another one.

You can also redefine the ‘Export’ button’s functionality on the Toolbar to make it save your reports to the server.

Results

Let’s start the Django development server and open //127.0.0.1:8000/dashboard/ to see the resulting dashboard:

Looks nice, doesn't it?

Feedback

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

Ελπίζω να απολαύσατε το σεμινάριο!

Αφήστε τα σχόλιά σας παρακάτω - εκτιμάται ιδιαίτερα τυχόν σχόλια σχετικά με τη βελτίωση του κώδικα.

βιβλιογραφικές αναφορές

Ο πηγαίος κώδικας για το σεμινάριο βρίσκεται στο GitHub.

Και εδώ είναι το έργο με την ενσωμάτωση Flexmonster & Django που με ενέπνευσε για αυτό το σεμινάριο.

Επιπλέον, προτείνω να διαβάσετε σημαντικές έννοιες στην τεκμηρίωση για να μάθετε τον Django:

  • Μεταναστεύσεις στο Τζάνγκο
  • Σύνολο ερωτημάτων
  • Σειριοποίηση αντικειμένων Django