Salutare oameni buni!

Piton, vizualizarea datelor, și programare sunt subiectele cărora le-am dedicat profund. De aceea aș dori să vă împărtășesc ideile mele, precum și entuziasmul meu pentru a descoperi noi modalități de prezentare a datelor într-un mod semnificativ.

Cazul pe care îl voi acoperi este destul de obișnuit: aveți date în partea din spate a aplicației și doriți să îi dați formă în partea din față. Dacă o astfel de situație vi se pare familiară, atunci acest tutorial poate fi util.

După ce îl finalizați, veți avea un Aplicație Django cu interactiv tabele pivot & diagrame.

Condiții prealabile

Pentru a parcurge cu încredere pașii, aveți nevoie de o cunoaștere de bază a cadrului Django și un pic de creativitate. ✨

Pentru a continua, puteți descărca fișierul Eșantion GitHub.

Iată o scurtă listă a instrumentelor pe care le vom folosi:

Dacă ați configurat deja un proiect Django și vă simțiți încrezător în fluxul de bază al creării de aplicații, puteți să treceți direct la Conectarea datelor la Flexmonster secțiune care explică cum să adăugați componente de vizualizare a datelor.

Să începem!

Noțiuni introductive despre Django

Mai întâi, să ne asigurăm că ați instalat Django pe computer. Regula generală este instalarea acestuia în mediul virtual configurat anterior – un instrument puternic pentru a vă izola proiectele unul de celălalt.

De asemenea, asigurați-vă că ați activat într-un director nou creat. Deschideți consola și porniți un proiect Django cu această comandă:

django-admin startproject analytics_project

Acum există un nou director numit analytics_project. Să verificăm dacă am făcut totul bine. Mergi la analytics_project și porniți serverul cu o comandă de consolă:

python manage.py runserver

Deschis http://127.0.0.1:8000/ în browserul dvs. Dacă vedeți această rachetă minunată, atunci totul este în regulă:

Cum sa creati un tablou de bord analitic intr o aplicatie

Apoi, creați o aplicație nouă în proiectul dvs. Să-l numim dashboard:

python manage.py startapp dashboard

Iată un sfat: dacă nu sunteți sigur de diferența dintre conceptele de aplicații și proiecte în Django, luați ceva timp pentru a afla despre aceasta pentru a avea o imagine clară a modului în care sunt organizate proiectele Django.

Începem. Acum vedem un nou director în cadrul proiectului. Conține următoarele fișiere:

__init__.py pentru a-l face pe Python să-l trateze ca pe un pachet

admin.py – setări pentru paginile de administrare Django

apps.py – setări pentru configurațiile aplicației

models.py – clase care vor fi convertite în tabele de baze de date de către ORM-ul lui Django

tests.py – clase de testare

views.py – funcții și clase care definesc modul în care datele sunt afișate în șabloane

Ulterior, este necesar să înregistrați aplicația în proiect.
Mergi la analytics_project/settings.py și adăugați numele aplicației la INSTALLED_APPS listă:

INSTALLED_APPS = [
	'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'dashboard',
]

Acum proiectul nostru este conștient de existența aplicației.

Vizualizări

În dashboard/views.py, vom crea o funcție care direcționează un utilizator către șabloanele specifice definite în dashboard/templates pliant. Vizualizările pot conține și clase.

Iată cum o definim:

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', {})

Odată apelată, această funcție va fi redată dashboard_with_pivot.html – un șablon pe care îl vom defini în curând. Acesta va conține componentele tabelului pivot și ale diagramelor pivot.

Câteva cuvinte despre această funcție. Este request argument, un exemplu de HttpRequestObject, conține informații despre cerere, de exemplu, metoda HTTP utilizată (GET sau POST). Metoda render caută șabloane HTML într-un templates director situat în directorul aplicației.

De asemenea, trebuie să creăm o metodă auxiliară care trimite răspunsul cu date la tabelul pivot de pe front-end-ul aplicației. Să-i spunem pivot_data:

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

Probabil, IDE-ul dvs. vă spune că nu poate găsi o referință Order în models.py. Nicio problemă – ne vom ocupa mai târziu.

Șabloane

Deocamdată, vom profita de sistemul de șabloane Django.

Să creăm un nou director templates interior dashboard și creați primul șablon HTML numit dashboard_with_pivot.html. Acesta va fi afișat utilizatorului la cerere. Aici adăugăm și scripturile și containerele pentru componentele de vizualizare a datelor:

<head>
  <meta charset="UTF-8">
  <title>Dashboard with Flexmonster</title>
  <script src="https://cdn.flexmonster.com/flexmonster.js"></script>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <link rel="stylesheet" href="https://cdn.flexmonster.com/demo.css">
</head>
<body>
<div id="pivot-table-container" data-url="{% url 'pivot_data' %}"></div>
<div id="pivot-chart-container"></div>
</body>

Maparea funcțiilor vizualizărilor la adresele URL

Pentru a apela vizualizările și afișarea șabloanelor HTML redate utilizatorului, trebuie să mapăm vizualizările la adresele URL corespunzătoare.

Iată un sfat: unul dintre principiile de proiectare a adreselor URL ale Django spune despre cuplarea liberă, nu ar trebui să creăm adrese URL cu aceleași nume ca funcțiile Python.

Mergi la analytics_app/urls.py și adăugați configurații relevante pentru dashboard aplicație la nivelul proiectului.

from django.contrib import admin
from django.urls import path, include

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

Acum, adresele URL din dashboard aplicația poate fi accesată, dar numai dacă sunt prefixate de dashboard.

După, du-te la dashboard/urls.py (creați acest fișier dacă nu există) și adăugați o listă de modele URL care sunt mapate la funcțiile de vizualizare:

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

Și, în sfârșit, am ajuns modelarea datelor. Aceasta este partea mea preferată.

După cum știți, un model de date este o reprezentare conceptuală a datelor stocate într-o bază de date.

Deoarece scopul acestui tutorial este de a arăta cum să construim vizualizarea interactivă a datelor în interiorul aplicației, nu ne vom îngrijora prea mult despre alegerea bazei de date. Vom folosi SQLite – o bază de date ușoară livrată împreună cu serverul de dezvoltare web Django.

Dar rețineți că această bază de date nu este alegerea potrivită pentru dezvoltarea producției. Cu Django ORM, puteți utiliza alte baze de date care utilizează limbajul SQL, cum ar fi PostgreSQL sau MySQL.

Din motive de simplitate, modelul nostru va consta dintr-o singură clasă. Puteți crea mai multe clase și defini relații între ele, complexe sau simple.

Imaginați-vă că proiectăm un tablou de bord pentru departamentul de vânzări. Deci, să creăm un Ordin clasă și definește atributele sale în 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)

Lucrul cu o bază de date

Acum trebuie să creăm o bază de date și să o populăm cu înregistrări.

Dar cum putem traduce clasa noastră de model într-un tabel de baze de date?

Aici se află conceptul de migrație vine la îndemână. Migrația este pur și simplu un fișier care descrie ce modificări trebuie aplicate bazei de date. De fiecare dată când trebuie să creăm o bază de date bazată pe modelul descris de clasele Python, folosim migrarea.

Datele pot veni sub formă de obiecte Python, dicționare sau liste. De data aceasta vom reprezenta entitățile din baza de date folosind clasele Python care se află în models director.

Creați migrarea pentru aplicație cu o singură comandă:

python manage.py makemigrations dashboard

Aici am specificat că aplicația ar trebui să îi spună lui Django să aplice migrații pentru dashboard modelele aplicației.

După crearea unui fișier de migrare, aplicați migrațiile descrise în acesta și creați o bază de date:

python manage.py migrate dashboard

Dacă vedeți un fișier nou db.sqlite3 în directorul proiectului, suntem pregătiți să lucrăm cu baza de date.

Să creăm instanțe din clasa noastră de Comenzi. Pentru aceasta, vom folosi shell-ul Django – este similar cu shell-ul Python, dar permite accesarea bazei de date și crearea de noi intrări.

Deci, porniți shell-ul Django:

python manage.py shell

Și scrieți următorul cod în consola interactivă:

from dashboard.models import Order

>>> o1 = Order(
... product_category='Books',
... payment_method='Credit Card',
... shipping_cost=39,
... unit_price=59
... )
>>> o1.save()

În mod similar, puteți crea și salva câte obiecte aveți nevoie.

Conectarea datelor la Flexmonster

Și iată ce am promis să explic.

Să ne dăm seama cum să trimiți datele din modelul tău către instrumentul de vizualizare a datelor din partea frontală.

Pentru a face back-end-ul și Flexmonster să comunice, putem urma două abordări diferite:

  • Utilizarea ciclului de solicitare-răspuns. Putem folosi Python și motorul de șabloane Django pentru a scrie cod JavaScript direct în șablon.
  • Utilizarea unei solicitări asincronizate (AJAX) care returnează datele în JSON.

În mintea mea, al doilea este cel mai convenabil din mai multe motive. În primul rând, Flexmonster înțelege JSON. Pentru a fi precis, poate accepta o serie de obiecte JSON ca date de intrare. Un alt avantaj al utilizării cererilor asincronizate este viteza mai bună de încărcare a paginii și codul mai ușor de întreținut.

Să vedem cum funcționează.

Du-te la templates/dashboard_pivot.html.

Aici am creat două div containere în care vor fi redate grila pivot și diagramele pivot.

În cadrul apelului ajax, facem o cerere pe baza adresei URL conținute în data-URL proprietate. Apoi îi spunem cererii ajax că ne așteptăm ca un obiect JSON să fie returnat (definit de dataType).

Odată ce solicitarea este finalizată, răspunsul JSON returnat de serverul nostru este setat la data parametru, iar tabelul pivot, completat cu aceste date, este redat.

Rezultatul interogării (instanța de JSONResponse) returnează un șir care conține un obiect matrice cu metainformații suplimentare, așa că ar trebui să adăugăm o funcție minusculă pentru prelucrarea datelor pe front-end. Acesta va extrage numai acele obiecte imbricate de care avem nevoie și le va pune într-o singură matrice. Acest lucru se datorează faptului că Flexmonster acceptă o serie de obiecte JSON fără niveluri imbricate.

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

După procesarea datelor, componenta le primește în formatul potrivit și efectuează toată munca grea de vizualizare a datelor. Un plus imens este că nu este nevoie să grupați sau să agregați manual valorile obiectelor.

Iată cum arată întregul script din șablon:

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: "https://cdn.flexmonster.com/",
            width: "100%",
            height: 430,
            toolbar: true,
            report: {
                dataSource: {
                    type: "json",
                    data: processData(data)
                },
                slice: {}
            }
        });
        new Flexmonster({
            container: "#pivot-chart-container",
            componentFolder: "https://cdn.flexmonster.com/",
            width: "100%",
            height: 430,
            //toolbar: true,
            report: {
                dataSource: {
                    type: "json",
                    data: processData(data)
                },
                slice: {},
                "options": {
                    "viewType": "charts",
                    "chart": {
                        "type": "pie"
                    }
                }
            }
        });
    }
});

Nu uitați să atașați acest cod JavaScript în <script> Etichete.

Phew! Suntem aproape acolo cu această aplicație.

Personalizarea câmpurilor

Flexmonster oferă o proprietate specială a sursei de date care permite setarea tipurilor de date de câmp, subtitrări personalizate și definirea ierarhiilor pe mai multe niveluri.

Aceasta este o caracteristică plăcută – putem separa elegant datele și prezentarea lor chiar în configurația raportului.

Adăugați-l la dataSource proprietatea raportului:

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

Designul tabloului de bord

Pentru a realiza tabloul de bord, am redat două instanțe de Flexmonster (puteți crea câte doriți, în funcție de obiectivele de vizualizare a datelor pe care doriți să le atingeți). Una este pentru tabelul pivot cu date rezumate, iar cealaltă este pentru diagramele pivot.

Ambele instanțe partajează aceeași sursă de date din modelul nostru. Vă încurajez să încercați să le faceți să funcționeze sincronizat: cu reportchange eveniment, puteți face o instanță să reacționeze la modificările din alta.

De asemenea, puteți redefini funcționalitatea butonului „Export” din Bara de instrumente pentru a-l salva rapoartele pe server.

Rezultate

Să începem serverul de dezvoltare Django și să deschidem http://127.0.0.1:8000/dashboard/ pentru a vedea tabloul de bord rezultat:

1612169291 499 Cum sa creati un tablou de bord analitic intr o aplicatie

Arată frumos, nu-i așa?

Părere

De data aceasta am învățat cum să creați o aplicație Django simplă și afișați datele din partea clientului sub forma unui tabloul de bord analitic.

Sper că v-a plăcut tutorialul!

Vă rugăm să lăsați comentariile dvs. mai jos – orice feedback cu privire la îmbunătățirea codului este foarte apreciat.

Referințe

Codul sursă pentru tutorial poate fi găsit pe GitHub.

Și iată proiectul cu Integrare Flexmonster și Django care m-a inspirat pentru acest tutorial.

Mai departe, vă recomand să parcurgeți concepte importante din documentație pentru a stăpâni Django: