Building WBProp
The WBProp project was initiated to analyze and visualize properties used in Wikidata, and more broadly, within the Wikibase ecosystem. As Wikidata grows in scale and complexity, it becomes essential to have tools that provide insights into the use, frequency, and structure of properties. This is where WBProp comes in — as a lightweight dashboard that helps developers, researchers, and data curators explore Wikibase properties.
Setup
The first step is to create a working directory for the project:
$ mkdir wbprop
$ cd wbprop
Initialize the project with npm init. This command creates a
package.json file that describes the project's metadata and dependencies.
$ npm initYou will be prompted for several inputs. Here’s an example session:
package name: (wbprop) wbprop
version: (1.0.0) 0.1.0
description: Everything about Wikibase properties
entry point: (index.js) index.html
test command: webpack-dev-server
git repository: https://github.com/johnsamuelwrites/wbprop
keywords: Wikidata, Properties, Dashboard
author: John Samuel
license: (ISC) GPL-3.0-or-later
This will result in the following package.json file:
{
"name": "wbprop",
"version": "0.1.0",
"description": "Everything about Wikibase properties",
"main": "index.html",
"scripts": {
"test": "webpack-dev-server"
},
"repository": {
"type": "git",
"url": "git+https://github.com/johnsamuelwrites/wbprop.git"
},
"keywords": [
"Wikidata",
"Properties",
"Dashboard"
],
"author": "John Samuel",
"license": "GPL-3.0-or-later",
"bugs": {
"url": "https://github.com/johnsamuelwrites/wbprop/issues"
},
"homepage": "https://github.com/johnsamuelwrites/wbprop#readme"
}
Installing Dependencies
Next, install Webpack and the development server:
$ npm install --save-dev webpack webpack-cli webpack-dev-server
Creating the Frontend
Create a basic HTML file called index.html:
<!DOCTYPE html>
<html>
<head>
<title>WBProp: Everything about Wikibase Properties</title>
</head>
<body>
<p>WBProp: Everything about Wikibase Properties</p>
<script src="main.js"></script>
</body>
</html>
Create a simple JavaScript file named wbprop.js to serve as the project entry:
console.log("WBProp: Hello!");
To specify the entry point for Webpack, create a file named webpack.config.js:
const path = require('path');
module.exports = {
entry: './wbprop.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
},
devServer: {
static: {
directory: __dirname,
},
port: 8080
},
mode: 'development'
};
Running the Development Server
Start the development server using:
$ npm test
> wbprop@0.1.0 test
> webpack-dev-server
ℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: Content not from webpack is served from /home/john/contributions/wbprop
Open http://localhost:8080/ in your browser. You should see the WBProp message
displayed on the page and in the developer console.
Adding Loaders and Babel Support
To support additional web technologies such as CSS, Sass, and modern JavaScript (ES6+), install the following loaders:
$ npm install --save-dev css-loader sass-loader sass extract-loader file-loader
$ npm install --save-dev autoprefixer postcss-loader
$ npm install --save-dev @babel/core babel-loader @babel/preset-env
With these tools in place, WBProp is ready to evolve from a basic interface to a powerful dashboard that can parse, visualize, and analyze data from Wikidata SPARQL queries, property statistics, and more.
Next Steps
After setting up the base environment, the WBProp project evolved to include real-time SPARQL querying, property analysis, and visualizations using libraries such as D3.js. Its modular and open-source architecture ensures that contributors can extend the dashboard to support various Wikibase-compatible installations.
Conclusion
WBProp is an initiative to make the complex property structure of Wikidata (or Wikibase) more accessible and transparent. By building a simple and extensible framework, WBProp invites developers and data enthusiasts to contribute to the ever-expanding landscape of linked open data.