Trong hướng dẫn sau, tôi sẽ chỉ cho bạn cách tạo bảng điều khiển phân tích cơ bản với Node, Express và Cube. js. Là một cơ sở dữ liệu, chúng tôi sẽ sử dụng MongoDB với MongoDB BI Connector. Nếu bạn chưa quen với nó, tôi thực sự khuyên bạn nên xem qua hướng dẫn Xây dựng Bảng điều khiển MongoDB. Nó bao gồm các khái niệm cơ bản về thiết lập Mongo và Trình kết nối BI của nó
CẢNH BÁO KHÔNG DÙNG. Kể từ tháng 11 năm 2020, nhúng Cube. js vào ứng dụng Express không được khuyến khích mạnh mẽ do các cân nhắc về hiệu suất và độ tin cậy. Vui lòng xem hướng dẫn triển khai để tìm hiểu thêm về cách chạy một Cube độc lập. js trong bộ chứa Docker, dưới dạng chức năng không có máy chủ, v.v. Ngoài ra, hãy xem thiết lập serverless được mô tả bên dưới trong hướng dẫn này
Đây là bảng điều khiển cuối cùng sẽ trông như thế nào
Lấy một tập dữ liệu mẫu
Bạn có thể bỏ qua bước này nếu bạn đã có một số dữ liệu cho trang tổng quan của mình
Nếu bạn không có phiên bản MongoDB cục bộ, vui lòng tải xuống tại đây. Có thể tải xuống BI Connector tại đây
Có một kho lưu trữ tốt trên Github với danh sách các bộ dữ liệu JSON/BSON được tuyển chọn từ web để thực hành trong MongoDB. Chúng tôi sẽ chọn một tập dữ liệu tweet cho trang tổng quan của chúng tôi
Tải xuống dữ liệu thử nghiệm và nhập nó bằng lệnh sau trong thư mục MongoDB của bạn
Bản sao
$ bin/mongorestore Your-Downloads-Folder/dump/twitter/tweets.bson
Bây giờ hãy đảm bảo cả hai tiến trình MongoDB và MongoDB BI Connector đang chạy
Bản sao
# Run from MongoDB directory
$ bin/mongod
# Run from MongoDB BI Connector directory
$ bin/mongosqld
Thiết lập phụ trợ
Chúng tôi sẽ sử dụng trình tạo ứng dụng nhanh để tạo khung ứng dụng
Bản sao
# Install it if you don’t have it already
$ npm install express-generator -g
Tiếp theo, tạo một ứng dụng cấp tốc mới với công cụ xem được đặt thành Tay cầm [hbs]
Bản sao
$ express --view=hbs express-analytics-dashboard
Chúng tôi sẽ sử dụng một khung mã nguồn mở, Cube. js làm phụ trợ phân tích của chúng tôi. Nó tạo và thực thi các truy vấn SQL, cũng như cung cấp bộ nhớ đệm, tổng hợp trước dữ liệu, bảo mật và API để truy vấn kết quả và xây dựng trực quan hóa. Bạn có thể tìm hiểu thêm về nó ở đây
khối lập phương. js có thể dễ dàng nhúng vào ứng dụng Express. Hãy thêm nó vào phần phụ thuộc dự án của chúng ta
Bản sao
$ npm install --save @cubejs-backend/server-core @cubejs-backend/mongobi-driver dotenv
Chúng tôi đã thêm gói máy chủ lõi cho Cube. js và khối lập phương. trình điều khiển js MongoBI. Chúng tôi cũng đã thêm gói
5 để quản lý thông tin đăng nhập của mình. Hãy tạo một tệp# Run from MongoDB directory
$ bin/mongod
# Run from MongoDB BI Connector directory
$ bin/mongosqld
6 với thông tin đăng nhập sau; . js cách kết nối với Mongo# Run from MongoDB directory
$ bin/mongod
# Run from MongoDB BI Connector directory
$ bin/mongosqld
Bản sao
CUBEJS_DB_HOST=localhost
CUBEJS_DB_NAME=twitter
CUBEJS_DB_PORT=3307
CUBEJS_DB_TYPE=mongobi
CUBEJS_API_SECRET=SECRET
Bây giờ, hãy gắn Cube. js Server vào ứng dụng cấp tốc của chúng tôi. Thêm đoạn mã sau ngay sau phần khai báo routes trong
7 của bạn# Run from MongoDB directory
$ bin/mongod
# Run from MongoDB BI Connector directory
$ bin/mongosqld
Bản sao
var CubejsServerCore = require['@cubejs-backend/server-core'];
// ...
app.use['/', indexRouter];
require['dotenv'].config[];
CubejsServerCore.create[].initApp[app];
// ...
Với 2 dòng code trên ta đã load hết config yêu cầu từ file
6 và mount Cube. js vào ứng dụng Express của chúng tôi. Theo mặc định, nó được gắn vào không gian tên đường dẫn# Run from MongoDB directory
$ bin/mongod
# Run from MongoDB BI Connector directory
$ bin/mongosqld
9. Nhưng bạn có thể thay đổi nó và nhiều thứ khác bằng cách chuyển phương thức sang phương thức# Run from MongoDB directory
$ bin/mongod
# Run from MongoDB BI Connector directory
$ bin/mongosqld
0. Chúng tôi sẽ giữ các cài đặt mặc định cho hướng dẫn của chúng tôi# Install it if you don’t have it already
$ npm install express-generator -g
Bây giờ, hãy tạo một Cube. js Schema cho bảng tweet của chúng tôi. khối lập phương. js sử dụng Lược đồ dữ liệu để tạo và thực thi SQL;
Tạo một thư mục,
1, bên trong có tệp# Install it if you don’t have it already
$ npm install express-generator -g
2 với nội dung sau# Install it if you don’t have it already
$ npm install express-generator -g
Bản sao
5# Run from MongoDB directory
$ bin/mongod
# Run from MongoDB BI Connector directory
$ bin/mongosqld
trong khối. js, bạn có thể mô tả các truy vấn của mình bằng Javascript và sau đó chúng sẽ được biên dịch thành SQL và được thực thi bên trong cơ sở dữ liệu của bạn. Nó sử dụng
3 và# Install it if you don’t have it already
$ npm install express-generator -g
4 làm đơn vị cơ bản để mô tả các truy vấn phân tích khác nhau. Hướng dẫn này là một nơi tốt để bắt đầu với Cube. lược đồ js# Install it if you don’t have it already
$ npm install express-generator -g
Bây giờ, hãy chuyển sang xây dựng bảng điều khiển trên giao diện người dùng
Thiết lập thay thế. chạy khối lập phương. js ở Chế độ không có máy chủ
Nếu bạn muốn chạy nó dưới dạng microservice hoặc chức năng không có máy chủ - hãy sử dụng Cube. js CLI. Đoạn mã dưới đây cho thấy cách bạn có thể tạo một Cube mới. ứng dụng js với Cube. js CLI
Bản sao
8# Run from MongoDB directory
$ bin/mongod
# Run from MongoDB BI Connector directory
$ bin/mongosqld
Nó sẽ tạo một dự án mới được định cấu hình sẵn để triển khai lên AWS Lambda với Serverless framework. Bạn có thể tìm hiểu thêm về Cube. triển khai máy chủ js tại đây
Xây dựng bảng điều khiển phân tích
Chúng tôi sẽ sử dụng Bootstrap để tạo kiểu, Cube. js để tải dữ liệu và Biểu đồ. js để hiển thị nó. Thay thế nội dung của
5 bằng nội dung sau# Install it if you don’t have it already
$ npm install express-generator -g
Bản sao
0# Install it if you don’t have it already
$ npm install express-generator -g
Hãy chia nhỏ điều này thành từng mảnh. Đầu tiên, chúng tôi đang tải các thư viện cần thiết. khối lập phương. js có thể được cài đặt theo nhiều cách khác nhau, ở đây chúng tôi chỉ đang tải bản dựng UMD từ CDN. Chúng tôi cũng đang tải Bootstrap, Biểu đồ. js và số. js để định dạng số từ CDN
Bản sao
0# Run from MongoDB directory
$ bin/mongod
# Run from MongoDB BI Connector directory
$ bin/mongosqld
Phần tiếp theo chỉ là một đánh dấu HTML đơn giản với lưới Bootstrap
Phần cuối cùng là nơi chúng tôi tải và hiển thị dữ liệu trong các tiện ích bảng điều khiển của mình. Vì lợi ích của hướng dẫn này, chúng tôi không sử dụng bất kỳ thư viện lối vào nào. Nhưng, nếu bạn muốn, Cube. js có các liên kết cho tất cả các khung giao diện người dùng phổ biến, chẳng hạn như React
Đầu tiên, chúng tôi đang khởi tạo Cube. js và chuyển Mã thông báo API và URL API. Trong môi trường phát triển, Cube. js không thực thi việc sử dụng mã thông báo để ủy quyền truy vấn, vì vậy bạn có thể sử dụng bất kỳ chuỗi nào cho mã thông báo của mình tại đây. Bạn có thể tìm hiểu thêm về cách sử dụng và tạo mã thông báo trong môi trường sản xuất tại đây trong tài liệu. URL phải giống nhau
Bản sao
1# Run from MongoDB directory
$ bin/mongod
# Run from MongoDB BI Connector directory
$ bin/mongosqld
Tiếp theo, chúng tôi đang tải và hiển thị dữ liệu cho hàng trên của bảng điều khiển, phần KPI. Ở đây chúng tôi chỉ hiển thị các số đơn giản với một số định dạng được thực hiện bằng chữ số. js
Bản sao
2# Run from MongoDB directory
$ bin/mongod
# Run from MongoDB BI Connector directory
$ bin/mongosqld
Hàng có một biểu đồ hình tròn và một biểu đồ thanh, được vẽ bằng Biểu đồ. js. Để hiển thị biểu đồ thanh, chúng tôi đang yêu cầu thước đo
6 và nhóm nó theo thứ nguyên# Install it if you don’t have it already
$ npm install express-generator -g
7. Chúng tôi cũng đang áp dụng bộ lọc để loại trừ các tweet có vị trí trống. Cuối cùng, chúng tôi đang đặt giới hạn thành 5 để chỉ lấy 5 vị trí hàng đầu# Install it if you don’t have it already
$ npm install express-generator -g
Bạn có thể tìm hiểu thêm về Cube. js Định dạng truy vấn tại đây
Đối với biểu đồ thanh, chúng tôi đang thực hiện một nhóm tương tự, nhưng thay vì vị trí, chúng tôi đang nhóm theo thứ nguyên
8# Install it if you don’t have it already
$ npm install express-generator -g
Bản sao
3# Run from MongoDB directory
$ bin/mongod
# Run from MongoDB BI Connector directory
$ bin/mongosqld
Bây giờ, để xem bảng điều khiển đang hoạt động, hãy khởi động máy chủ của bạn
Bản sao
4# Run from MongoDB directory
$ bin/mongod
# Run from MongoDB BI Connector directory
$ bin/mongosqld
Và truy cập http. //máy chủ cục bộ. 3000 để xem bảng điều khiển phân tích của bạn đang hoạt động. Ngoài ra, chúng tôi có bản demo trực tiếp của ứng dụng tại đây. Mã nguồn đầy đủ có sẵn trên Github
tại sao khối lập phương. js
Tại sao lại sử dụng Cube. js tốt hơn là đánh trực tiếp MongoDB bằng các truy vấn SQL? . js giải quyết rất nhiều vấn đề khác nhau mà mọi ứng dụng phân tích sẵn sàng sản xuất cần giải quyết. tạo SQL phân tích, lưu trữ kết quả truy vấn và điều phối thực thi, tổng hợp trước dữ liệu, bảo mật, API để tìm nạp kết quả truy vấn và trực quan hóa
Các tính năng này cho phép bạn xây dựng các ứng dụng phân tích cấp sản xuất có khả năng xử lý hàng nghìn người dùng đồng thời và hàng tỷ điểm dữ liệu. Chúng cũng cho phép bạn thực hiện phân tích trên bản sao chỉ đọc MongoDB sản xuất hoặc thậm chí là nút chính MongoDB do khả năng giảm số lượng truy vấn thực tế được đưa ra cho một phiên bản MongoDB