قم بإنشاء لوحة معلومات بيانات باستخدام HTML و CSS و JavaScript

أصبحت لوحة القيادة لعملائك أو عملائك أو زملائك العاملين جزءًا أساسيًا من مجموعة المهارات التي يتطلبها مطورو البرامج وعلماء البيانات وممارسي ML ومهندسي البيانات. حتى إذا كنت تعمل بشكل أساسي على المعالجة الخلفية ، فإن البيانات التي تقوم بمعالجتها عادة ما تكون “تبرز” للمستخدمين في مرحلة ما. إذا كنت محظوظًا ، فقد يكون لدى مؤسستك فريقًا أماميًا مخصصًا لرعاية ذلك ، ولكن غالبًا ما يكون الأمر يتعلق بك.

كونه مطور Python مباشرة مع عدم وجود خبرة في HTML ، لم يعد JavaScript ، وما إلى ذلك ، عذرًا ، حيث ظهرت العديد من مكتبات Python ، مثل STREMLIT و GRADIO ، خلال السنوات القليلة الماضية.

هذه المقالة لا تتعلق بهم ، لأن أنا أكون واحد من هؤلاء مطوري Python المستقيمين ، وقد فعلت بالفعل الشيء الانسيابي والخريجي. لذا فقد حان الوقت لتراجع عن الأكمام ومعرفة ما إذا كان بإمكاني تعلم مهارات جديدة وإنشاء لوحة معلومات مع تلك التطويرات الأمامية القديمة: HTML و JavaScript و CSS.

ستأتي بيانات لوحة القيادة الخاصة بنا من قاعدة بيانات SQLite المحلية. لقد خلقت أ sales_data جدول في sqlite يحتوي على بيانات مبيعات وهمية. هنا هي البيانات في شكل جدولي.

فيما يلي بعض التعليمات البرمجية التي يمكنك استخدامها لمتابعة وإنشاء قاعدة بيانات SQLite الخاصة بك والجدول مع البيانات كما هو موضح.

في حال كنت تتساءل عن سبب إدخال عدد قليل من السجلات في قاعدة البيانات الخاصة بي ، فهذا ليس لأنني لا أعتقد أن الكود يمكنه التعامل مع أحجام البيانات الكبيرة. لقد أردت التركيز على وظيفة لوحة القيادة بدلاً من أن تصرف انتباه البيانات. لا تتردد في استخدام البرنامج النصي الذي أقدمه أدناه لإضافة سجلات إضافية إلى مجموعة بيانات الإدخال إذا أردت.

لذلك ، نبقى في عالم Python لفترة أطول قليلاً حيث أنشأنا SQLite DB برمجيًا.

import sqlite3

# Define the database name
DATABASE_NAME = "C:\\Users\\thoma\\projects\\my-dashboard\\sales_data.db"

# Connect to SQLite database
conn = sqlite3.connect(DATABASE_NAME)

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

# SQL to create the 'sales' table
create_table_query = '''
CREATE TABLE IF NOT EXISTS sales (
    order_id INTEGER PRIMARY KEY,
    order_date TEXT,
    customer_id INTEGER,
    customer_name TEXT,
    product_id INTEGER,
    product_names TEXT,
    categories TEXT,
    quantity INTEGER,
    price REAL,
    total REAL
);
'''

# Execute the query to create the table
cursor.execute(create_table_query)

# Sample data to insert into the 'sales' table
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, "Notebook", "Stationery", 8, 48.35, 386.80),
    (4, "2013-03-09", 275, "Customer_23770", 200, "Laptop", "Electronics", 3, 74.85, 224.55),
    (5, "2022-04-23", 960, "Customer_23790", 210, "Cabinet", "Office", 6, 53.77, 322.62),
    (6, "2019-07-10", 197, "Customer_25587", 202, "Desk", "Office", 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", "Electronics", 9, 49.33, 443.97)
]

# SQL to insert data into the 'sales' table
insert_data_query = '''
INSERT INTO sales (order_id, order_date, customer_id, customer_name, product_id, product_names, categories, quantity, price, total)
VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
'''

# Insert the sample data
cursor.executemany(insert_data_query, sample_data)

# Commit the transaction
conn.commit()

# Close the connection
conn.close()

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

وظيفة لوحة القيادة

سيكون لدينا لوحة القيادة الوظائف التالية.

• المقاييس الرئيسية. إجمالي الإيرادات ، إجمالي الطلبات ، متوسط ​​قيمة الطلب ، الفئة العليا
• أنواع المخططات المختلفة. الإيرادات بمرور الوقت (مخطط الخط) ، الإيرادات حسب الفئة (BAR CHART) ، أفضل المنتجات بالإيرادات (مخطط الشريط الأفقي)
• تصفية. حسب التاريخ والفئة
• جدول البيانات. عرض سجلات البيانات الخاصة بنا بتنسيق شبكة متصفح وقابل للبحث.

إعداد بيئتنا

بعد ذلك ، لدينا سلسلة من الخطوات لمتابعة لإعداد بيئتنا.

1/ تثبيت node.js.

Node.js هي بيئة وقت تشغيل تمكنك من تشغيل JavaScript خارج المتصفح ، مما يتيح لك استخدام JavaScript لإنشاء تطبيقات سريعة وقابلة للتطوير.

لذلك ، تأكد من تثبيت Node.js على نظامك لتمكينك من تشغيل خادم محلي وإدارة الحزم. يمكنك تنزيله من موقع Node.js الرسمي.

2/ إنشاء مجلد المشروع الرئيسي والمجلدات الفرعية

افتح محطة القيادة الخاصة بك وقم بتشغيل الأوامر التالية. أنا أستخدم Ubuntu على مربع Windows الخاص بي لهذا ، ولكن يمكنك تغييره لتناسب الأداة ونظام سطر الأوامر المفضل لديك.

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

3/ قم بتهيئة مشروع العقدة

$ npm init -y

يقوم هذا الأمر تلقائيًا بإنشاء افتراضي package.json ملف في دليل المشروع الخاص بك دون الحاجة إلى إدخال المستخدم.

ال -y إجابات العلم “نعم” إلى جميع المطالبات ، باستخدام القيم الافتراضية لحقول مثل:

• اسم
• إصدار
• وصف
• رئيسي
• البرامج النصية
• مؤلف
• رخصة

إليك ما بدا عليه ملف الحزمة الخاص بي.

{
  "name": "my-dashboard",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "dependencies": {
    "express": "^4.21.2",
    "sqlite3": "^5.1.7"
  }
}

4/ تثبيت Express و SQLite

sqlite هو محرك قاعدة بيانات علائقية خفيفة الوزن قائم على الملفات يخزن جميع بياناتك في ملف واحد محمول ، مما يلغي الحاجة إلى خادم منفصل.

يعبر هو إطار تطبيق ويب مرن الحد الأدنى لـ Node.js الذي يبسط بناء واجهات برمجة التطبيقات وخوادم الويب من خلال التوجيه والأدوات الوسيطة.

يمكننا تثبيت كلاهما باستخدام الأمر أدناه.

$ npm install express sqlite3

الآن ، يمكننا البدء في تطوير الكود لدينا. لهذا المشروع ، سنحتاج إلى أربعة ملفات رمز: ملف index.html ، ملف server.js ، ملف client.js ، وملف script.js.

دعنا نذهب من خلال كل منهم خطوة بخطوة.

1) العميل/الفهرس

    
    
    
    
    
    


    

        
        

        
        

        
        
Key Metrics
 
        

        
        

            Select Chart:
            
                Revenue Over Time
                Revenue By Category
                Top Products by Revenue