Dashboard für Ihre Kunden, Kunden oder Kollegen wird zu einem wesentlichen Bestandteil der Fähigkeiten, die von Softwareentwicklern, Datenwissenschaftlern, ML -Praktikern und Dateningenieuren erforderlich sind. Selbst wenn Sie hauptsächlich an der Again-Finish-Verarbeitung arbeiten, müssen die Daten, die Sie verarbeiten, normalerweise irgendwann für Benutzer „aufgetaucht“ werden. Wenn Sie Glück haben, hat Ihre Organisation möglicherweise ein engagiertes Entrance-Finish-Staff, das sich darum kümmert, aber oft wird es auf Sie liegen.

Ein direkter Python-Entwickler ohne Erfahrung in HTML, JavaScript usw. ist keine Entschuldigung mehr, wie viele Python-Bibliotheken wie Streamlit und Gradio in den letzten Jahren entstanden sind.

In diesem Artikel geht es jedoch nicht um sie, weil Ich bin Einer dieser direkten Python-Entwickler, und ich habe bereits das Strom und Gradio-Ding gemacht. Es warfare additionally an der Zeit, meine Ärmel hochzukrempeln und zu sehen, ob ich neue Fähigkeiten erlernen und ein Dashboard mit diesen alten Entrance-Finish-Entwicklungsstangen erstellen konnte: HTML, JavaScript und CSS.

Die Daten für unser Dashboard stammen aus einer lokalen SQLite -Datenbank. Ich habe a erstellt sales_data Tabelle in SQLite mit Dummy -Verkaufsdaten. Hier sind die Daten in tabellarischer Kind.

Im Folgenden finden Sie einen Code, den Sie verwenden können, um Ihre eigene SQLite -Datenbank und -tabelle mit den Daten wie gezeigt zu erstellen.

Falls Sie sich fragen, warum ich nur eine Handvoll Datensätze in meine Datenbank einfüge, liegt dies nicht daran, dass der Code große Datenvolumina verarbeiten kann. Es ist nur so, dass ich mich auf die Dashboard -Funktionalität konzentrieren wollte, anstatt von den Daten abgelenkt zu werden. Verwenden Sie das Skript, das ich unten zur Verfügung stelle, um dem Eingabedatensatz zusätzliche Datensätze hinzuzufügen, wenn Sie möchten.

Wir bleiben additionally nur ein bisschen länger in der Python -Welt, da wir programmgesteuert einen SQLite -DB aufbauen.

import sqlite3

# Outline the database title
DATABASE_NAME = "C:Customersthomatasksmy-dashboardsales_data.db"

# Connect with SQLite database
conn = sqlite3.join(DATABASE_NAME)

# Create a cursor object
cursor = conn.cursor()

# SQL to create the 'gross sales' desk
create_table_query = '''
CREATE TABLE IF NOT EXISTS gross sales (
    order_id INTEGER PRIMARY KEY,
    order_date TEXT,
    customer_id INTEGER,
    customer_name TEXT,
    product_id INTEGER,
    product_names TEXT,
    classes TEXT,
    amount INTEGER,
    value REAL,
    complete REAL
);
'''

# Execute the question to create the desk
cursor.execute(create_table_query)

# Pattern knowledge to insert into the 'gross sales' desk
sample_data = (
    (1, "2022-08-01", 245, "Customer_884", 201, "Smartphone", "Electronics", 3, 90.02, 270.06),
    (2, "2022-02-19", 701, "Customer_1672", 205, "Printer", "Electronics", 6, 12.74, 76.44),
    (3, "2017-01-01", 184, "Customer_21720", 208, "Pocket book", "Stationery", 8, 48.35, 386.80),
    (4, "2013-03-09", 275, "Customer_23770", 200, "Laptop computer", "Electronics", 3, 74.85, 224.55),
    (5, "2022-04-23", 960, "Customer_23790", 210, "Cupboard", "Workplace", 6, 53.77, 322.62),
    (6, "2019-07-10", 197, "Customer_25587", 202, "Desk", "Workplace", 3, 47.17, 141.51),
    (7, "2014-11-12", 510, "Customer_6912", 204, "Monitor", "Electronics", 5, 22.5, 112.5),
    (8, "2016-07-12", 150, "Customer_17761", 200, "Laptop computer", "Electronics", 9, 49.33, 443.97)
)

# SQL to insert knowledge into the 'gross sales' desk
insert_data_query = '''
INSERT INTO gross sales (order_id, order_date, customer_id, customer_name, product_id, product_names, classes, amount, value, complete)
VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
'''

# Insert the pattern knowledge
cursor.executemany(insert_data_query, sample_data)

# Commit the transaction
conn.commit()

# Shut the connection
conn.shut()

print(f"Database '{DATABASE_NAME}' has been created and populated efficiently.")

Dashboard -Funktionalität

Unser Dashboard hat die folgende Funktionalität.

• Schlüsselkennzahlen. Gesamtumsatz, Gesamtbestellungen, durchschnittlicher Bestellwert, obere Kategorie
• Verschiedene Diagrammtypen. Einnahmen im Laufe der Zeit (Zeilendiagramm), Umsatz nach Kategorie (Balkendiagramm), Prime -Produkte nach Umsatz (Horizontal -Balkendiagramm)
• Filterung. Nach Datum und Kategorie
• Datentabelle. Zeigen Sie unsere Datensätze in einem paginierten und durchsuchbaren Netzformat an.

Aufstellen unserer Umgebung

Als nächstes haben wir eine Reihe von Schritten, um unsere Umgebung einzurichten.

1/ node.js.

Node.js ist eine Laufzeitumgebung, mit der Sie JavaScript außerhalb des Browsers ausführen können, sodass Sie JavaScript verwenden können, um schnelle und skalierbare serverseitige Anwendungen zu erstellen.

Stellen Sie additionally sicher, dass Node.js in Ihrem System installiert ist, damit Sie einen lokalen Server ausführen und Pakete verwalten können. Sie können es von der herunterladen Offizielle Web site node.js.

2/ Erstellen Sie einen Hauptprojektordner und Unterordner

Öffnen Sie Ihren Befehlsterminal und führen Sie die folgenden Befehle aus. Ich benutze Ubuntu für mein Home windows-Field dafür, aber Sie können es für Ihr bevorzugter Befehlszeilen-Dienstprogramm und -system ändern.

$ mkdir my-dashboard
$ cd my-dashboard
$ mkdir shopper
% mkdir server

3/ Initialise ein Knotenprojekt

$ npm init -y

Dieser Befehl erstellt automatisch einen Customary package deal.json Datei in Ihrem Projektverzeichnis, ohne die Benutzereingabe zu verlangen.

Der -y Flagge Antworten „Ja“ zu allen Eingabeaufforderungen verwenden die Standardwerte Für Felder wie:

• Identify
• Model
• Beschreibung
• hauptsächlich
• Skripte
• Autor
• Lizenz

So sah meine Paketdatei aus.

{
  "title": "my-dashboard",
  "model": "1.0.0",
  "foremost": "index.js",
  "scripts": {
    "take a look at": "echo "Error: no take a look at specified" && exit 1"
  },
  "key phrases": (),
  "writer": "",
  "license": "ISC",
  "description": "",
  "dependencies": {
    "categorical": "^4.21.2",
    "sqlite3": "^5.1.7"
  }
}

4/ Installieren Sie Specific und SQLite

Sqlite ist eine leichte, dateibasierte relationale Datenbank-Engine, die alle Ihre Daten in einer einzigen tragbaren Datei speichert und die Notwendigkeit eines separaten Servers beseitigt.

Äußern ist ein minimales, flexibles Webanwendungs ​​-Framework für Node.js, das das Erstellen von APIs und Webservern durch Routing und Middleware vereinfacht.

Wir können beide mit dem folgenden Befehl installieren.

$ npm set up categorical sqlite3

Jetzt können wir unseren Code entwickeln. Für dieses Projekt benötigen wir vier Codedateien: eine Index.html -Datei, eine Server.js -Datei, eine Consumer.js -Datei und eine Skript.js -Datei.

Lassen Sie uns von jedem von ihnen Schritt für Schritt durchlaufen.

1) shopper/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta title="viewport" content material="width=device-width, initial-scale=1.0">
    <hyperlink rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <hyperlink rel="stylesheet" href="https://cdn.jsdelivr.internet/npm/flatpickr/dist/flatpickr.min.css">
    <hyperlink rel="stylesheet" href="model.css">
    <title>Gross sales Efficiency Dashboard</title>
</head>
<physique>
    <div class="container">
        <!-- Centered Heading -->
        <h1 class="text-center">Gross sales Efficiency Dashboard</h1>

        <!-- Filter Part -->
        <div class="filters row my-4">
            <div class="col-md-4">
                <label for="start-date">Begin Date</label>
                <enter kind="textual content" id="start-date" class="form-control" placeholder="Begin Date">
            </div>
            <div class="col-md-4">
                <label for="end-date">Finish Date</label>
                <enter kind="textual content" id="end-date" class="form-control" placeholder="Finish Date">
            </div>
            <div class="col-md-4">
                <label for="category-filter">Class</label>
                <choose id="category-filter" class="form-control">
                    <choice worth="all">All Classes</choice>
                    <!-- Choices shall be populated dynamically -->
                </choose>
            </div>
        </div>

        <!-- Key Metrics Part -->
        <h2 class="mt-5">Key Metrics</h2> <!-- Added heading for Key Metrics -->
        <div id="key-metrics" class="row text-center my-4">
            <div class="col-md-3">
                <h4>Complete Income</h4>
                <p id="total-revenue">$0</p>
            </div>
            <div class="col-md-3">
                <h4>Complete Orders</h4>
                <p id="total-orders">0</p>
            </div>
            <div class="col-md-3">
                <h4>Common Order Worth</h4>
                <p id="average-order-value">$0</p>
            </div>
            <div class="col-md-3">
                <h4>Prime Class</h4>
                <p id="top-category">None</p>
            </div>
        </div>

        <!-- Chart Part -->
        <div class="chart-section my-4">
            <label for="chart-type-selector">Choose Chart:</label>
            <choose id="chart-type-selector" class="form-control mb-3">
                <choice worth="revenueOverTime">Income Over Time</choice>
                <choice worth="revenueByCategory">Income By Class</choice>
                <choice worth="topProducts">Prime Merchandise by Income</choice>
            </choose>
            <canvas id="chart-canvas"></canvas>
        </div>

        <!-- Uncooked Knowledge Desk Part -->
        <div id="raw-data" class="my-4">
            <h3>Uncooked Knowledge</h3>
            <desk id="data-table" class="desk table-striped table-bordered"></desk>
        </div>
    </div>

    <!-- Required JS Libraries -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.datatables.internet/1.10.21/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.jsdelivr.internet/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.internet/npm/flatpickr"></script>
    <script src="script.js"></script>
</physique>
</html>

Diese HTML -Datei legt die grundlegenden visuellen Elemente unseres Verkaufs -Dashboards, einschließlich interaktiver Filter für Datum und Kategorie, ein Abschnitt mit wichtigen Verkaufsmetriken, einem Dropdown -Menü zum Auswahl von Diagrammtypen und einer Tabelle für Rohdaten fest.

Bootstrap wird zum Styling verwendet. Flatpickr wird für Datumseingänge verwendet. Diagramm.js wird für Visualisierungen verwendet und DataTables wird für die tabellarische Anzeige verwendet. Die Interaktivität wird von einem externen behandelt script.js Datei, die wir in Kürze untersuchen.

Bootstrap ist ein beliebtes Entrance-Finish-Frontwork, das ursprünglich von Twitter entwickelt wurde und mit dem Sie reaktionsschnelle und visuell konsistente Webschnittstellen leichter und schneller aufbauen können.

DataTables ist ein JQuery-basiertes Plugin, das Customary-HTML-HTML erhöht Elemente und verwandeln sie in vollständig interaktive, featurereiche Tabellen.

Flatpickr ist ein leichtes, anpassbares JavaScript -Datum und -zeitpicker. Dadurch können Benutzer Daten (und optionally available Zeiten) aus einem schlanken Popup-Kalender auswählen, anstatt sie manuell zu tippen.

Chart.js ist eine einfache, aber leistungsstarke JavaScript -Bibliothek zum Erstellen interaktiver, animierter Diagramme in Webanwendungen mithilfe des -Components.

2) shopper/model.css

/* shopper/model.css */
physique {
    background-color: #f8f9fa;
    font-family: 'Arial', sans-serif;
}

h1 {
    text-align: middle; /* Heart the heading */
    margin-top: 20px; /* Add spacing above the heading */
    margin-bottom: 40px; /* Add spacing beneath the heading */
}

.container .filters {
    margin-top: 20px;
    margin-bottom: 60px !essential; /* Guarantee bigger spacing between filters and Key Metrics */
}

.container #key-metrics {
    margin-top: 40px !essential; /* Extra spacing above the Key Metrics part */
    margin-bottom: 20px; /* Non-compulsory spacing beneath */
}

.key-metrics div {
    margin: 10px 0;
    padding: 10px;
    background-color: #f4f4f4;
    border: 1px stable #ccc;
    border-radius: 4px;
}

/* Repair for DataTables Pagination Spacing */
.dataTables_wrapper .dataTables_paginate {
    text-align: middle;
    margin-top: 10px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    margin: 0 12px;
    padding: 5px 10px;
    border: 1px stable #ddd;
    border-radius: 4px;
    background-color: #f9f9f9;
    coloration: #007bff;
    text-decoration: none;
    show: inline-block;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background-color: #007bff;
    coloration: #fff;
    border: 1px stable #007bff;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.present {
    font-weight: daring;
    coloration: #fff;
    background-color: #007bff;
    border-color: #007bff;
}

Wir verwenden ein Cascading Model Sheet (CSS), um die grundlegenden visuellen Komponenten unseres Dashboards zu stylen, z. B. Schaltfläche und Textfarben, Abstand zwischen Elementen usw.

Die Datei model.css Es ist ein sauberes, leichtes Thema mit ausreichend Abstand und Layoutanpassungen für Klarheit und Lesbarkeit. Die Datei model.csss findet auch das Erscheinungsbild der Paginationschaltflächen von DataTables an, sodass sie benutzerfreundlicher und visuell mit dem Design von Bootstrap übereinstimmen.

3) server/server.js

const categorical = require('categorical');
const sqlite3 = require('sqlite3').verbose();
const path = require('path');
const app = categorical();
const PORT = 3000;

// Full path to your SQLite database
const DB_PATH = "C:Customersthomatasksmy-dashboardsales_data.db";

// Serve static recordsdata from the shopper listing
app.use(categorical.static(path.be part of(__dirname, '..', 'shopper')));

// Path to fetch knowledge from SQLite database
app.get('/knowledge', (req, res) => {
    const db = new sqlite3.Database(DB_PATH, sqlite3.OPEN_READONLY, (err) => {
        if (err) {
            console.error("Error connecting to database:", err.message);
            res.standing(500).json({ error: "Database connection failed" });
            return;
        }
    });

    // Question the database
    const question = "SELECT * FROM gross sales;"; // Change 'gross sales' together with your desk title
    db.all(question, (), (err, rows) => {
        if (err) {
            console.error("Error operating question:", err.message);
            res.standing(500).json({ error: "Question failed" });
        } else {
            res.json(rows); // Ship the question outcome as JSON
        }
    });

    db.shut((err) => {
        if (err) {
            console.error("Error closing database:", err.message);
        }
    });
});

// Catch-all path to serve the primary HTML file
app.get('*', (req, res) => {
    res.sendFile(path.be part of(__dirname, '..', 'shopper', 'index.html'));
});

// Begin the server
app.hear(PORT, () => {
    console.log(`Server operating at http://localhost:${PORT}`);
});

Dieses Skript von Node.js enthält den JavaScript -Code, der einen grundlegenden Specific -Server einsetzt, der das Dashboard der Verkaufsleistung versorgt. Es macht zwei wichtigste Dinge:

1. Serviert statische Dateien (wie HTML, CSS und JS) aus dem Consumer -Unterordner, sodass der Frontend im Browser lädt.
2. Bietet a /Daten Endpunkt, der aus einer lokalen SQLite -Datenbank (sales_data.db) liest und die gesamte Verkaufstabelle als JSON zurückgibt, wodurch dynamische Datenvisualisierungen und -tabellen an der Frontend aktiviert werden.

4) shopper/script.js

let chartInstance = null; // World variable to retailer the present Chart.js occasion

// Wait till the DOM is totally loaded
doc.addEventListener('DOMContentLoaded', operate () {
    // Fetch gross sales knowledge from the backend API
    fetch('/knowledge')
        .then((response) => response.json())
        .then((knowledge) => {
            // Deal with case the place no knowledge is returned
            if (!knowledge || knowledge.size === 0) {
                const app = doc.getElementById('app');
                if (app) {
                    app.innerHTML = "<p>No knowledge obtainable.</p>";
                }
                return;
            }

            // Initialize filters and dashboard content material
            setupFilters(knowledge);
            initializeDashboard(knowledge);

            // Re-render charts when chart kind adjustments
            doc.getElementById('chart-type-selector').onchange = () => filterAndRenderData(knowledge);
        })
        .catch((error) => {
            // Deal with fetch error
            console.error('Error fetching knowledge:', error);
            const app = doc.getElementById('app');
            if (app) {
                app.innerHTML = "<p>Didn't fetch knowledge.</p>";
            }
        });
});

// Initialize Flatpickr date pickers and class filter
operate setupFilters(knowledge) {
    // Convert date strings to JS Date objects
    const dates = knowledge.map((merchandise) => new Date(merchandise.order_date.cut up('/').reverse().be part of('-')));
    const minDate = new Date(Math.min(...dates));
    const maxDate = new Date(Math.max(...dates));

    // Configure begin date picker
    flatpickr("#start-date", {
        defaultDate: minDate.toISOString().slice(0, 10),
        dateFormat: "Y-m-d",
        altInput: true,
        altFormat: "F j, Y",
        onChange: operate () {
            filterAndRenderData(knowledge);
        },
    });

    // Configure finish date picker
    flatpickr("#end-date", {
        defaultDate: maxDate.toISOString().slice(0, 10),
        dateFormat: "Y-m-d",
        altInput: true,
        altFormat: "F j, Y",
        onChange: operate () {
            filterAndRenderData(knowledge);
        },
    });

    // Arrange class dropdown change listener
    const categoryFilter = doc.getElementById('category-filter');
    if (categoryFilter) {
        categoryFilter.onchange = () => filterAndRenderData(knowledge);
    }
}

// Initialize dashboard after filters are set
operate initializeDashboard(knowledge) {
    populateCategoryFilter(knowledge);     // Populate class dropdown
    filterAndRenderData(knowledge);       // Preliminary render with all knowledge
}

// Apply filters and replace key metrics, chart, and desk
operate filterAndRenderData(knowledge) {
    const chartType = doc.getElementById('chart-type-selector').worth;
    const startDate = doc.getElementById('start-date')._flatpickr.selectedDates(0);
    const endDate = doc.getElementById('end-date')._flatpickr.selectedDates(0);
    const selectedCategory = doc.getElementById('category-filter').worth;

    // Filter knowledge by date and class
    const filteredData = knowledge.filter((merchandise) =>  merchandise.classes === selectedCategory)
        );
    );

    updateKeyMetrics(filteredData);                   // Replace metrics like income and orders
    drawChart(filteredData, 'chart-canvas', chartType); // Render chart
    populateDataTable(filteredData);                  // Replace desk
}

// Replace dashboard metrics (complete income, order rely, and so forth.)
operate updateKeyMetrics(knowledge) {
    const totalRevenue = knowledge.cut back((acc, merchandise) => acc + parseFloat(merchandise.complete), 0);
    const totalOrders = knowledge.size;
    const averageOrderValue = totalOrders > 0 ? totalRevenue / totalOrders : 0;

    // Calculate complete income per class to seek out high class
    const revenueByCategory = knowledge.cut back((acc, merchandise) => , {});

    // Decide class with highest complete income
    const topCategory = Object.keys(revenueByCategory).cut back(
        (a, b) => (revenueByCategory(a) > revenueByCategory(b) ? a : b),
        "None"
    );

    // Show metrics within the DOM
    doc.getElementById('total-revenue').textContent = `$${totalRevenue.toFixed(2)}`;
    doc.getElementById('total-orders').textContent = `${totalOrders}`;
    doc.getElementById('average-order-value').textContent = `$${averageOrderValue.toFixed(2)}`;
    doc.getElementById('top-category').textContent = topCategory || 'None';
}

// Draw the chosen chart kind utilizing Chart.js
operate drawChart(knowledge, elementId, chartType) {
    const ctx = doc.getElementById(elementId).getContext('second');

    // Destroy earlier chart if one exists
    if (chartInstance) {
        chartInstance.destroy();
    }

    swap (chartType) {
        case 'revenueOverTime':
            // Line chart displaying income by order date
            chartInstance = new Chart(ctx, {
                kind: 'line',
                knowledge: {
                    labels: knowledge.map((merchandise) => merchandise.order_date),
                    datasets: ({
                        label: 'Income Over Time',
                        knowledge: knowledge.map((merchandise) => parseFloat(merchandise.complete)),
                        fill: false,
                        borderColor: 'rgb(75, 192, 192)',
                        stress: 0.1,
                    }),
                },
                choices: {
                    scales: {
                        y: { beginAtZero: true },
                    },
                },
            });
            break;

        case 'revenueByCategory':
            // Bar chart displaying complete income per class
            const classes = (...new Set(knowledge.map((merchandise) => merchandise.classes)));
            const revenueByCategory = classes.map((class) => {
                return {
                    class,
                    income: knowledge
                        .filter((merchandise) => merchandise.classes === class)
                        .cut back((acc, merchandise) => acc + parseFloat(merchandise.complete), 0),
                };
            });
            chartInstance = new Chart(ctx, {
                kind: 'bar',
                knowledge: {
                    labels: revenueByCategory.map((merchandise) => merchandise.class),
                    datasets: ({
                        label: 'Income by Class',
                        knowledge: revenueByCategory.map((merchandise) => merchandise.income),
                        backgroundColor: 'rgba(255, 99, 132, 0.2)',
                        borderColor: 'rgba(255, 99, 132, 1)',
                        borderWidth: 1,
                    }),
                },
                choices: {
                    scales: {
                        y: { beginAtZero: true },
                    },
                },
            });
            break;

        case 'topProducts':
            // Horizontal bar chart displaying high 10 merchandise by income
            const productRevenue = knowledge.cut back((acc, merchandise) =>  'Unknown Product';
                acc(productName) = (acc(productName) , {});

            const topProducts = Object.entries(productRevenue)
                .type((a, b) => b(1) - a(1))
                .slice(0, 10);

            chartInstance = new Chart(ctx, {
                kind: 'bar',
                knowledge: {
                    labels: topProducts.map((merchandise) => merchandise(0)), // Product names
                    datasets: ({
                        label: 'Prime Merchandise by Income',
                        knowledge: topProducts.map((merchandise) => merchandise(1)), // Income
                        backgroundColor: 'rgba(54, 162, 235, 0.8)',
                        borderColor: 'rgba(54, 162, 235, 1)',
                        borderWidth: 1,
                    }),
                },
                choices: {
                    indexAxis: 'y', // Horizontal bars
                    scales: {
                        x: { beginAtZero: true },
                    },
                },
            });
            break;
    }
}

// Show filtered knowledge in a DataTable
operate populateDataTable(knowledge) {
    const tableElement = $('#data-table');

    // Destroy present desk if it exists
    if ($.fn.DataTable.isDataTable(tableElement)) {
        tableElement.DataTable().clear().destroy();
    }

    // Create a brand new DataTable with related columns
    tableElement.DataTable({
        knowledge: knowledge.map((merchandise) => (
            merchandise.order_id,
            merchandise.order_date,
            merchandise.customer_id,
            merchandise.product_names,
            merchandise.classes,
            `$${parseFloat(merchandise.complete).toFixed(2)}`,
        )),
        columns: (
            { title: "Order ID" },
            { title: "Order Date" },
            { title: "Buyer ID" },
            { title: "Product" },
            { title: "Class" },
            { title: "Complete" },
        ),
    });
}

// Populate the class filter dropdown with obtainable classes
operate populateCategoryFilter(knowledge) {
    const categoryFilter = doc.getElementById('category-filter');
    categoryFilter.innerHTML = '';
    categoryFilter.appendChild(new Possibility('All Classes', 'all', true, true));

    // Extract distinctive classes
    const classes = new Set(knowledge.map((merchandise) => merchandise.classes));
    classes.forEach((class) => {
        categoryFilter.appendChild(new Possibility(class, class));
    });
}

Es ist unsere komplizierteste Codedatei, aber sie muss viel tun. Diese JavaScript -Datei versorgt die Interaktivität und Datenvisualisierung für das Dashboard der Verkaufsleistung. Kurz gesagt, es …

1/ holt Verkaufsdaten ab

• Wenn die Seite geladen wird (DOMContentLoaded), es ruft eine Backend -API am /Datenendpunkt auf.
• Wenn keine Daten zurückgegeben werden, wird eine Meldung „Keine Daten verfügbar“ angezeigt.

2/ Einrichten Filter

• Verwendung Flatpickr Datumspicker auswählen ein Begin- und Enddatum basierend auf den Min/Max -Bestelldaten des Datensatzes.
• Fügt a hinzu Kategorie Dropdown, sodass Benutzer dazu führen können Filter nach Produktkategorie.
• Fügt a hinzu Diagramm -Selektor Um zwischen verschiedenen Diagramm -Visualisierungen zu wechseln.

3/ initialisiert das Armaturenbrett

• Populiert den Kategoriefilter mit verfügbaren Kategorien.
• Fährt den ersten Render mit dem vollständigen Datensatz aus.

4/ Angewendet Filter und Wiederherstellungen

• Jedes Mal, wenn der Benutzer einen Filter ändert (Datumsbereich, Kategorie oder Diagrammtyp), ist er:
  • Filtert den Datensatz nach Datumsbereich und Kategorie.
  • Aktualisierungen Schlüsselkennzahlen: Gesamtumsatz, Anzahl der Bestellungen, durchschnittlicher Bestellwert und Prime -Umsatzkategorie.
  • Zeichnet die ausgewählten neu Diagramm.JS -Diagramm.
  • Erfrischt die Datentabelle.

5/ zeichnet Diagramme mit Diagramm.js

• Einnahmen im Laufe der Zeit → Zeilendiagramm mit den Umsatztrends nach Datum.
• Einnahmen nach Kategorie → Balkendiagramm aggregiert den Gesamtumsatz professional Kategorie.
• Prime -Produkte → Horizontales Balkendiagramm mit den Prime 10 Produkten nach Einnahmen.

6/ zeigt Tabellaten an

• Verwendung DataTables (ein JQuery -Plugin) eine Tabelle mit gefilterten Bestellungen machen, Mit Spalten für Bestell -ID, Datum, Kunden -ID, Produkt, Kategorie und Gesamt.

7/ die Benutzeroberfläche synchronisiert halten

• Zerstört und erstellt Charts/Tabellen, wenn sich Filter ändern, um Duplikate zu vermeiden.
• Hält Metriken, Diagramme und Tabellen im Einklang mit den aktiven Filtern.

Ausführen unseres Armaturenbretts

Jetzt, da wir alle unseren Code sortiert haben, ist es Zeit, das Dashboard auszuführen. Gehen Sie additionally zur Server Unterordner und geben Sie den folgenden Befehl ein.

$ node server.js

Sie erhalten eine Antwort auf den obigen Befehl, so etwas wie,

Server operating at http://localhost:3000

Öffnen Sie einen Webbrowser und besuchen Sie http: // localhost: 3000. Sie sollten sehen, wie Ihr Dashboard mit Daten aus der SQLite -Datenbank besiedelt ist, wie im Bild unten gezeigt.

Alle Filter, Diagrammauswahl usw. sollten wie angekündigt funktionieren.

Zusammenfassung

In diesem Artikel habe ich Sie durch das Erstellen eines voll funktionsfähigen, interaktiven Verkaufsleistungs -Dashboards mit Core Internet Applied sciences – HTML, CSS, JavaScript, Node.js, Specific und einer lokalen SQLite -Datenbank erstellt.

Wir haben den Tech Stack & Setup besprochen. dh

• Backend: Node.js, Specific, SQLite
• Frontend: HTML, Bootstrap (für Format), Diagramm.js (für Diagramme), Flatpickr (Datumspicker), Datentables (für tabellarische Daten)
• Ordnerstruktur wie unten gezeigt.

my-dashboard/
├── shopper/
│   ├── index.html
│   ├── model.css
│   └── script.js
└── server/
    └── server.js

Ich habe Ihnen gezeigt, wie Sie eine SQLite -Datenbank in Code erstellen und füllen können, die wir als Quelldaten für unser Dashboard verwenden können. Wir haben auch das Umgebungsaufbau und sowohl die Entrance-Finish- als auch die Again-Finish-Entwicklungsprozesse erörtert und unsere Daten-Dashboard-Funktionalität kurz angesprochen.

Schließlich habe ich Sie durchgebracht und die vier Codedateien, die wir erstellen mussten, im Element erläutert, und zeigte Ihnen dann, wie Sie das Dashboard in einem Browser ausführen.

In die Frontend -Webentwicklung heute und Sie denken vielleicht: Was hat das mit dem zu tun Datenwissenschaft? Warum ist es für Information Science veröffentlicht, einen Beitrag zu Net Dev zu veröffentlichen?

Nun, weil Datenwissenschaft nicht nur darum geht, leistungsstarke Modelle zu erstellen, fortschrittliche Analysen zu betreiben oder Daten zu reinigen und zu transformieren –Die Präsentation der Ergebnisse ist auch ein wesentlicher Bestandteil unseres Jobs. Es gibt verschiedene Möglichkeiten, dies zu tun: PowerPoint -Präsentationen, interaktive Dashboards (wie Tableau) oder, wie Sie vermutet haben, über eine Web site.

Aus persönlicher Erfahrung arbeite ich täglich an der Entwicklung der Web site, mit der wir unsere datengesteuerten Ergebnisse präsentieren. Die Verwendung einer Web site anstelle von Powerpoints oder Tableau hat viele Vorteile mit Freiheit und Anpassung die größten sein.

Obwohl ich JavaScript (irgendwie) genießen kann, wird es niemals mit dem Spaß am Codieren in Python übereinstimmen. Zum Glück habe ich bei Fosdem von PyskriptUnd zu meiner Überraschung ist es nicht so Alpha, wie ich anfänglich dachte.

Aber reicht das aus, um es einen potenziellen JavaScript -Ersatz zu nennen? Genau das werden wir heute erkunden.

JavaScript ist seit Jahrzehnten der König der Webentwicklung. Es ist überall: Von einfachen Schaltflächen zu komplexen Net -Apps wie Google Mail und Netflix. Aber jetzt tritt ein Herausforderer in den Ring ein –Pyskript– Ein Framework, mit dem Sie laufen können Python im Browser Ohne ein Backend zu brauchen. Lassen Sie es uns unterhaltsam aufschlüsseln Kopf-an-Kopf-Schlacht Zwischen diesen beiden Webtechnologien, um festzustellen, ob Pyscript ein echter Konkurrent ist!

Runde 1: Was sind sie?

Dies ist wie der Kampf von Jake Paul gegen Mike Tyson: Der neue Challenger (Pyscript) gegen den Veteranen -Champion (JS). Mach dir keine Sorgen, ich sage nicht, dass der heutige Kampf auch eine Enttäuschung sein wird.

Beginnen wir mit dem Veteranen: JavaScript.

• JavaScript wurde 1995 erstellt und ist das Rückgrat der Webentwicklung.
• Läuft nativ in Browsern und steuert alles von Benutzerinteraktionen bis hin zu Animationen.
• Unterstützt von Reagieren, vue, eckigund ein massives Ökosystem von Frameworks.
• Direkt Manipulieren Sie den DomWebseiten dynamisch machen.

Nun zum Anfänger: Pyskript.

• Eingebaut Pyodid (Ein Python-to-Webassembly-Projekt) Mit Pyscript können Sie schreiben Python in einer HTML -Datei.
• Keine Notwendigkeit Backend -Server– Ihr Python -Code wird direkt im Browser ausgeführt.
• Kann Python -Bibliotheken wie Numpy, Pandas und Matplotlib importieren.
• Aber… Es entwickelt sich immer noch weiter und hat Einschränkungen.

Das letzte Aber ist ein großer, additionally gewinnt JavaScript die erste Runde!

Runde 2: Efficiency -Kampf

Wenn es um Geschwindigkeit geht, ist JavaScript wie Usain Bolt – optimiert und schnell lodern. Es läuft nativ im Browser und ist für die Leistung fein abgestimmt. Andererseits führt Pyscript Python über WebAssembly aus, was bedeutet Zusätzlicher Overhead.

Verwenden wir ein echtes Miniprojekt: eine einfache Counter-App. Wir werden es mit beiden Alternativen bauen und sehen, welche besser abschneidet.

JavaScript

<button onclick="increment()">Click on Me</button>
<p id="rely">0</p>
<script>
  let rely = 0;
  operate increment() {
    rely++;
    doc.getElementById("rely").innerText = rely;
  }
</script>

Pyskript

<py-script>
from pyscript import show
rely = 0

def increment():
    international rely
    rely += 1
    show(rely, goal="rely")
</py-script>
<button py-click="increment()">Click on Me</button>
<p id="rely">0</p>

Sie auf die Probe stellen:

• JavaScript läuft sofort.
• Pyscript hat eine spürbare Verzögerung.

Ende der Runde: JS erhöht seinen Vorteil, dass es 2: 0 macht!

Runde 3: Benutzerfreundlichkeit und Lesbarkeit

Keiner beider Sprachen ist perfekt (zum Beispiel auch ein beinhaltet statische Tippen), aber ihre Syntax ist sehr unterschiedlich. JavaScript kann ziemlich chaotisch sein:

const numbers = (1, 2, 3);
const doubled = numbers.map(num => num * 2);

Während Python ist viel einfacher zu verstehen:

numbers = (1, 2, 3)
doubled = (num * 2 for num in numbers)

Die Tatsache, dass Pyscript uns die Python -Syntax verwenden lässt, macht es ohne Zweifel zum runden Gewinner. Obwohl ich eindeutig gegenüber Python voreingenommen bin, macht die Tatsache, dass es anfängerfreundlich und normalerweise prägnanter und einfacher als JS ist, in Bezug auf die Benutzerfreundlichkeit besser.

Das Drawback für Pyscript ist, dass JavaScript bereits tief in Browser integriert ist, was es praktischer macht. Trotzdem gewinnt Pyscript die Runde mit 2: 1.

Noch eine Runde zu gehen …

Runde 4: Ökosystem & Bibliotheken

JavaScript verfügt über unzählige Frameworks wie React, Vue und Angular, was es zu einem Kraftpaket zum Aufbau dynamischer Webanwendungen macht. Die Bibliotheken sind speziell für das Net optimiert und bieten Instruments für alles, von UI -Komponenten bis hin zu komplexen Animationen.

Andererseits profitiert Pyscript von Pythons großem Ökosystem für wissenschaftliche Pc- und Datenwissenschaftsbibliotheken wie Numpy, Pandas und Matplotlib. Während diese Werkzeuge für hervorragend für die Datenvisualisierung Und Analyse sind für die Frontend -Webentwicklung nicht optimiert. Zusätzlich verlangt Pyscript, mit dem DOM zu interagieren, das JavaScript nativ und effizient behandelt.

Pyscript ist zwar ein aufregendes Werkzeug, um Python in Webanwendungen einzubetten, aber es befindet sich noch in den frühen Stadien. JavaScript bleibt die praktischere Wahl für die allgemeine Webentwicklung, während Pyscript in Szenarien glänzt, in denen Pythons Rechenleistung im Browser benötigt wird.

Hier ist eine Tabelle, die einige der Schlüsselkomponenten zusammenfasst

Besonderheit	JavaScript	Pyskript
DOM -Kontrolle	Direkt und sofortig	Benötigt JavaScript -Problemumgehungen
Leistung	Optimiert für Browser	Webassembly Overhead
Ökosystem	Riesig (reagieren, vue, eckig)	Begrenzt, immer noch wachsen
Bibliotheken	Net-Ocussed (Lodash, D3.JS)	Python ausgerichtet (Numpy, Pandas)
Anwendungsfälle	Vollständige Net -Apps	Datenbezogene Apps, interaktive Widgets

Rounds Urteil: JavaScript dominiert im Allgemeinen Net Dev, aber Pyskript glänzt für Python-zentrierte Projekte.

Abschlussfazit

Das battle ein kurzer Kampf! Wir wissen immer noch nicht, wer gewonnen hat …

Zeit, es zu enthüllen:

• Wenn Sie eine vollständige Net -App erstellen, ist JavaScript der klare Gewinner.
• Wenn Sie pythonbetriebene Interaktivität (z. B. Datenvisualisierung) hinzufügen, kann Pyscript nützlich sein.

Nachdem dies gesagt ist, ist es truthful, das zu sagen JavaScript (und seine Derivate) bleibt nach wie vor die beste Choice des Net -Frontend -Frontends. Die Zukunft von Pyscript ist jedoch eine zu sehen: Wenn sich die Leistung verbessert und es eine bessere Browserintegration erzielt, könnte Pyscript ein starkes Hybrid-Device für Python-Entwickler werden, die bereit sind, mehr datenbezogene Aufgaben in die Frontend einzubeziehen.

Gewinner: JavaScript.

Notiz. Dieser Artikel setzt bereits voraus, dass Sie mit Callbacks und Guarantees vertraut sind und über ein grundlegendes Verständnis des asynchronen Paradigmas in JavaScript verfügen.

Der asynchrone Mechanismus ist eines der wichtigsten Konzepte in JavaScript und der Programmierung im Allgemeinen. Er ermöglicht es einem Programm, sekundäre Aufgaben separat im Hintergrund auszuführen, ohne den aktuellen Thread daran zu hindern, primäre Aufgaben auszuführen. Wenn eine sekundäre Aufgabe abgeschlossen ist, wird ihr Ergebnis zurückgegeben und das Programm wird regular weiter ausgeführt. In diesem Zusammenhang werden solche sekundären Aufgaben genannt asynchron.

Zu asynchronen Aufgaben gehören typischerweise Anfragen an externe Umgebungen wie Datenbanken, Net-APIs oder Betriebssysteme.Wenn das Ergebnis einer asynchronen Operation die Logik des Hauptprogramms nicht beeinflusst, ist es viel besser, diese Zeit nicht zu verschwenden und mit der Ausführung primärer Aufgaben fortzufahren, anstatt einfach zu warten, bis die Aufgabe abgeschlossen ist.

Dennoch kommt es vor, dass das Ergebnis einer asynchronen Operation sofort in den nächsten Codezeilen verwendet wird. In solchen Fällen sollten die nachfolgenden Codezeilen erst ausgeführt werden, wenn die asynchrone Operation abgeschlossen ist.

Notiz. Bevor ich zum Hauptteil dieses Artikels komme, möchte ich die Gründe dafür darlegen, warum Asynchronität als wichtiges Thema in der Datenwissenschaft angesehen wird und warum ich JavaScript anstelle von Python verwendet habe, um die async / await Syntax.

Datentechnik ist ein untrennbarer Teil der Datenwissenschaft, die hauptsächlich aus der Entwicklung robuster und effizienter Datenpipelines besteht. Zu den typischen Aufgaben der Datentechnik gehören regelmäßige Aufrufe von APIs, Datenbanken oder anderen Quellen, um Daten abzurufen, zu verarbeiten und irgendwo zu speichern.

Stellen Sie sich eine Datenquelle vor, die Netzwerkprobleme hat und die angeforderten Daten nicht sofort zurückgeben kann. Wenn wir die Anforderung einfach im Code an diesen Dienst stellen, müssen wir ziemlich lange warten und tun nichts. Wäre das nicht Wäre es beispielsweise besser, keine kostbare Prozessorzeit zu verschwenden und stattdessen eine andere Funktion auszuführen? Hier kommt die Macht der Asynchronität ins Spiel, die das zentrale Thema dieses Artikels sein wird!

Niemand wird die Tatsache leugnen, dass Python derzeit die beliebteste Wahl für die Erstellung von Information Science-Anwendungen ist. Dennoch ist JavaScript eine weitere Sprache mit einem riesigen Ökosystem, das verschiedenen Entwicklungszwecken dient, einschließlich der Erstellung von Webanwendungen, die von anderen Diensten abgerufene Daten verarbeiten. Wie sich herausstellt, spielt Asynchronität eine der grundlegendsten Rollen in JavaScript.

Darüber hinaus verfügt JavaScript im Vergleich zu Python über eine umfassendere integrierte Unterstützung für den Umgang mit Asynchronität und dient im Allgemeinen als besseres Beispiel, um tiefer in dieses Thema einzutauchen.

Schließlich hat Python eine ähnliche async / await Konstruktion. Daher können die in diesem Artikel über JavaScript vorgestellten Informationen auch auf Python übertragen werden, um effiziente Datenpipelines zu entwerfen.

In den ersten Versionen von JavaScript wurde asynchroner Code hauptsächlich mit Callbacks geschrieben. Leider führte dies bei Entwicklern zu einem bekannten Drawback namens „Rückruf Hölle”. Asynchroner Code, der mit einfachen Callbacks geschrieben wurde, führte häufig zu mehreren verschachtelten Codebereichen, die extrem schwer zu lesen waren. Aus diesem Grund führten die JavaScript-Entwickler 2012 Folgendes ein: Versprechen.

// Instance of the "callback hell" downside
functionOne(perform () {
functionTwo(perform () {
functionThree(perform () {
functionFour(perform () {
...
});
});
});
});

Guarantees bieten eine praktische Schnittstelle für die asynchrone Code-Entwicklung. Ein Promise nimmt in einen Konstruktor eine asynchrone Funktion auf, die zu einem bestimmten Zeitpunkt in der Zukunft ausgeführt wird. Bevor die Funktion ausgeführt wird, befindet sich das Promise in einem ausstehend Zustand. Abhängig davon, ob die asynchrone Funktion erfolgreich abgeschlossen wurde oder nicht, ändert das Promise seinen Zustand entweder in erfüllt oder abgelehnt Für die letzten beiden Zustände können Programmierer .then()Und .catch() Methoden mit dem Versprechen, die Logik zu deklarieren, wie das Ergebnis der asynchronen Funktion in verschiedenen Szenarien behandelt werden soll.

Außerdem kann eine Gruppe von Guarantees durch Kombinationsmethoden wie any(), all(), race()usw.

Obwohl Guarantees eine deutliche Verbesserung gegenüber Callbacks darstellen, sind sie aus mehreren Gründen immer noch nicht ultimate:

1. Ausführlichkeit. Guarantees erfordern normalerweise das Schreiben einer Menge Boilerplate-Code. In manchen Fällen erfordert das Erstellen eines Guarantees mit einer einfachen Funktionalität aufgrund der ausführlichen Syntax ein paar zusätzliche Codezeilen.
2. Lesbarkeit. Wenn mehrere Aufgaben voneinander abhängig sind, führt dies dazu, dass Guarantees ineinander verschachtelt werden. Dieses berüchtigte Drawback ist sehr ähnlich dem „Rückrufhölle“ Dies erschwert das Lesen und Warten des Codes. Darüber hinaus ist es bei der Fehlerbehandlung normalerweise schwierig, der Codelogik zu folgen, wenn ein Fehler über mehrere Promise-Ketten propagiert wird.
3. Debuggen. Durch Überprüfen der Stacktrace-Ausgabe kann es schwierig sein, die Fehlerquelle in Guarantees zu identifizieren, da diese normalerweise keine eindeutigen Fehlerbeschreibungen liefern.
4. Integration mit älteren Bibliotheken. Viele ältere Bibliotheken in JavaScript wurden in der Vergangenheit für die Arbeit mit einfachen Callbacks entwickelt, wodurch sie nicht ohne weiteres mit Guarantees kompatibel sind. Wenn Code mithilfe von Guarantees geschrieben wird, sollten zusätzliche Codekomponenten erstellt werden, um die Kompatibilität mit alten Bibliotheken zu gewährleisten.

Zum größten Teil async / await development wurde in JavaScript als synthetischer Zucker anstelle von Guarantees hinzugefügt. Wie der Identify schon sagt, führt es zwei neue Code-Schlüsselwörter ein:

• async wird vor der Funktionssignatur verwendet und markiert die Funktion als asynchron, was immer ein Versprechen zurückgibt (auch wenn ein Versprechen nicht explizit zurückgegeben wird, da es implizit verpackt wird).
• await wird innerhalb von Funktionen verwendet, die als gekennzeichnet sind asynchron und wird im Code vor asynchronen Operationen deklariert, die ein Versprechen zurückgeben. Enthält eine Codezeile den await Schlüsselwort, dann werden die folgenden Codezeilen innerhalb der asynchronen Funktion nicht ausgeführt, bis das zurückgegebene Versprechen erfüllt ist (entweder in der erfüllt oder abgelehnt Zustand)Dadurch wird sichergestellt, dass die folgenden Zeilen nicht ausgeführt werden, wenn ihre Ausführungslogik vom Ergebnis der asynchronen Operation abhängt.

– Der await Schlüsselwort kann innerhalb einer asynchronen Funktion mehrmals verwendet werden.

– Wenn await innerhalb einer Funktion verwendet wird, die nicht als asynchron markiert ist, SyntaxErrorwird geworfen.

– Das zurückgegebene Ergebnis einer Funktion, die mit await es die aufgelöster Wert eines Versprechens.

Der async / await Ein Anwendungsbeispiel wird im folgenden Snippet gezeigt.

// Async / await instance.
// The code snippet prints begin and finish phrases to the console.
perform getPromise() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('finish');
},
1000);
});
}
// since this perform is marked as async, it should return a promise
async perform printInformation() {
console.log('begin');
const end result = await getPromise();
console.log(end result) // this line is not going to be executed till the promise is resolved
}

Es ist wichtig zu verstehen, dass await die Ausführung des Haupt-JavaScript-Threads nicht blockiert. Stattdessen unterbricht es nur die einschließende asynchrone Funktion (während anderer Programmcode außerhalb der asynchronen Funktion ausgeführt werden kann).

Fehlerbehandlung

Der async / await Konstruktion bietet eine Standardmethode zur Fehlerbehandlung mit strive / catch Schlüsselwörter. Um Fehler zu behandeln, ist es notwendig, den gesamten Code, der möglicherweise einen Fehler verursachen kann, zu umschließen (einschließlich await Erklärungen) in der strive Block und schreiben Sie entsprechende Deal with-Mechanismen in die catch Block.

In der Praxis ist die Fehlerbehandlung mit strive / catch Blöcke ist einfacher und lesbarer als das gleiche in Versprechen mit zu erreichen .catch() Ablehnungsverkettung.

// Error dealing with template inside an async perform
async perform functionOne() {
strive {
...
const end result = await functionTwo()
} catch (error) {
...
}
}

async / await ist eine großartige Different zu Guarantees. Sie beseitigen die oben genannten Nachteile von Guarantees: Der mit async / await ist normalerweise besser lesbar und wartungsfreundlicher und wird von den meisten Softwareentwicklern bevorzugt.

Es wäre jedoch falsch, die Bedeutung von Guarantees in JavaScript zu leugnen: In manchen Situationen sind sie die bessere Possibility, insbesondere beim Arbeiten mit Funktionen, die standardmäßig ein Promise zurückgeben.

Code-Austauschbarkeit

Betrachten wir den gleichen Code, geschrieben mit async / await und Versprechen. Wir gehen davon aus, dass unser Programm eine Verbindung zu einer Datenbank herstellt und im Falle einer hergestellten Verbindung Daten über Benutzer anfordert, um diese anschließend in der Benutzeroberfläche anzuzeigen.

// Instance of asynchronous requests dealt with by async / await
async perform functionOne() {
strive {
...
const end result = await functionTwo()
} catch (error) {
...
}
}

Beide asynchronen Anfragen können einfach verpackt werden, indem man await Syntax. Bei jedem dieser beiden Schritte stoppt das Programm die Codeausführung, bis die Antwort abgerufen wird.

Da bei asynchronen Anfragen immer etwas schief gehen kann (Verbindungsabbruch, Dateninkonsistenz, and many others.), sollten wir das ganze Codefragment in ein strive / catch Block. Wenn ein Fehler auftritt, zeigen wir ihn auf der Konsole an.

Schreiben wir nun dasselbe Codefragment mit Guarantees:

// Instance of asynchronous requests dealt with by guarantees
perform displayUsers() {
...
connectToDatabase()
.then((response) => {
...
return getData(information);
})
.then((customers) => {
showUsers(customers);
...
})
.catch((error) => {
console.log(`An error occurred: ${error.message}`);
...
});
}

Dieser verschachtelte Code sieht ausführlicher und schwerer lesbar aus. Außerdem können wir feststellen, dass jede await-Anweisung in eine entsprechende then() -Methode und dass sich der Catch-Block nun innerhalb der .catch() Methode eines Versprechens.

Der gleichen Logik folgend, jeder async / await Code kann mit Guarantees umgeschrieben werdenDiese Aussage belegt die Tatsache, dass async / await ist bloß synthetischer Zucker statt Versprechungen.

Mit async / await geschriebener Code kann in die Promise-Syntax umgewandelt werden, wobei jede Await-Deklaration einer separaten .then()-Methode entspricht und die Ausnahmebehandlung in der .catch()-Methode durchgeführt wird.

In diesem Abschnitt werden wir uns ein reales Beispiel ansehen, wie async / await funktioniert.

Wir verwenden die REST-Länder-API das demografische Informationen für ein angefordertes Land im JSON-Format unter der folgenden URL-Adresse bereitstellt: https://restcountries.com/v3.1/identify/$nation.

Lassen Sie uns zunächst eine Funktion deklarieren, die die wichtigsten Informationen aus dem JSON abruft. Wir möchten Informationen zum Namen des Landes, seiner Hauptstadt, seiner Fläche und seiner Bevölkerung abrufen. Das JSON wird in Type eines Arrays zurückgegeben, wobei das erste Objekt alle erforderlichen Informationen enthält. Wir können auf die oben genannten Eigenschaften zugreifen, indem wir auf die Schlüssel des Objekts mit den entsprechenden Namen zugreifen.

const retrieveInformation = perform (information) {
information = information(0)
return {
nation: information("identify")("widespread"),
capital: information("capital")(0),
space: `${information("space")} km`,
inhabitants: `{$information("inhabitants")} individuals`
};
};

Dann verwenden wir die API abrufen um HTTP-Anfragen auszuführen. Fetch ist eine asynchrone Funktion, die gibt ein Versprechen zurück. Da wir die von fetch zurückgegebenen Daten sofort benötigen, müssen wir warten, bis fetch seinen Job beendet hat, bevor wir die folgenden Codezeilen ausführen. Dazu verwenden wir den await Schlüsselwort vor dem Abrufen.

// Fetch instance with async / await
const getCountryDescription = async perform (nation) {
strive {
const response = await fetch(
`https://restcountries.com/v3.1/identify/${nation}`
);
if (!response.okay) {
throw new Error(`Unhealthy HTTP standing of the request (${response.standing}).`);
}
const information = await response.json();
console.log(retrieveInformation(information));
} catch (error) {
console.log(
`An error occurred whereas processing the request.nError message: ${error.message}`
);
}
};

Ebenso platzieren wir ein weiteres await vor dem .json() Methode zum Parsen der Daten, die unmittelbar danach im Code verwendet wird. Im Falle eines fehlerhaften Antwortstatus oder einer Unfähigkeit, die Daten zu parsen, wird ein Fehler ausgegeben, der dann im Catch-Block verarbeitet wird.

Zu Demonstrationszwecken schreiben wir den Codeausschnitt auch mithilfe von Guarantees neu:

// Fetch instance with guarantees
const getCountryDescription = perform (nation) {
fetch(`https://restcountries.com/v3.1/identify/${nation}`)
.then((response) => {
if (!response.okay) {
throw new Error(`Unhealthy HTTP standing of the request (${response.standing}).`);
}
return response.json();
})
.then((information) => {
console.log(retrieveInformation(information));
})
.catch((error) => {
console.log(
`An error occurred whereas processing the request. Error message: ${error.message}`
);
});
};

Wenn Sie eine Both-Funktion mit einem angegebenen Ländernamen aufrufen, werden dessen Hauptinformationen gedruckt:

// The results of calling getCountryDescription("Argentina")
{
nation: 'Argentina',
capital: 'Buenos Aires',
space: '27804000 km',
inhabitants: '45376763 individuals'
}

In diesem Artikel haben wir die async / await Konstruktion in JavaScript, die 2017 in der Sprache erschien. Als Verbesserung gegenüber Guarantees ermöglicht es das synchrone Schreiben von asynchronem Code, wodurch verschachtelte Codefragmente eliminiert werden. Die korrekte Verwendung in Kombination mit Guarantees ergibt eine leistungsstarke Mischung, die den Code so sauber wie möglich macht.

Schließlich sind die in diesem Artikel über JavaScript präsentierten Informationen auch für Python wertvoll, das hat das gleiche async / await Konstruktion. Wenn jemand tiefer in die Asynchronität eintauchen möchte, würde ich persönlich empfehlen, sich mehr auf JavaScript als auf Python zu konzentrieren. Wenn man sich der zahlreichen Instruments bewusst ist, die in JavaScript für die Entwicklung asynchroner Anwendungen zur Verfügung stehen, kann man die gleichen Konzepte auch in anderen Programmiersprachen leichter verstehen.

Alle Bilder stammen, sofern nicht anders angegeben, vom Autor.