Quick BI:Getting started

It is recommended to learn ES2015 before you begin. The official guide assumes that you already have intermediate knowledge of HTML, CSS, and JavaScript. If you're just starting to learn about front-ends, it may not be the best idea to Quick BI custom components as your first step. You can develop custom components in Online Development or Local Development mode.

Mode 1. Online development

The latest version of Quick BI (>=V4.6.1) supports the online development mode. In this mode, the development and debugging of custom components will be carried out on the page, without the need to install the development environment, which is suitable for most scenarios. Before you begin, you need to log in to the Quick BI with an organization administrator account.

I. Register components

First, you need to register a custom component.

Go to the Open Platform page and choose Custom Components > Register Component. In the Development Mode section, select Online Edit. In the dialog box that appears, enter the required information and click OK.

II. Debugging Components

After the component is registered, click the Debug Component icon on the component card to debug the component.

In the dialog box that appears, select the Debug Scope, Workspace, and dashboard that you want to debug, and click Debug.

On the dashboard editing page that appears, you can develop custom components.

Mode 2. Local development

In this mode, the development and debugging of custom components will be carried out in the local environment. You need to install and configure the local environment first, which is suitable for more professional scenarios.

one. Installation environment

Before development, you will need to install the following software:

1. node.js

   Go to the nodeJS official website, download and install the Node environment. Make sure that the node version is greater than or equal to 10. After the installation is complete, you can run the following command to verify whether the installation is successful.

   node -v

2. git

   Go to the Git official website to download and install Git. After the installation is complete, you can run the following command to verify whether the installation is successful.

   git --version

3. yarn

   Quick BI, we recommend that you use YARN to install dependencies. You can use one of the following methods to install the permission package:

   npm i -g yarn

   3.1 YARN images

   The default image download speed of YARN in China may be slow. We recommend that you use Taobao images.

   yarn config set registry https://registry.npm.taobao.org/

4. vscode

   Quick BI, we recommend that you use Visual Studio Code as the IDE. Quick BI seed projects use TypeScript features, we recommend that you use vscode to improve your development experience.

II. Create Development Project

1. First, open the terminal or powerShell and navigate to the folder where you want to create the project.

2. Run the following command to create a project:

   npm init qbi-app test

   After you run the command, you are prompted to select a template, as shown in the following figure.

   

   • Custom chart templates start with the chart.

   • Custom Menu menu starts with the template.

   You can add parameter -t to select template creation.

   # Create a custom chart template.
   npm init qbi-app test -t chart

3. Go to the directory and install dependencies.

   cd test
   yarn

4. Start the local service.

   yarn run start

   After the startup is successful, you can see the following message.

   

   • If Google Chrome does not open automatically, you may not have installed it. We recommend that you install Chrome and then manually open the localhost:8001/ using the Chrome browser.

   • If you see a port occupancy conflict, it is possible that your 8001 port is being used by another application.

   • If the browser opens the localhost:8001/ and shows that this service is not available, it may be that your computer is not configured with hosts localhost pointing to 127.0.0.1. You can access the 127.0.0.1:8001/ in Chrome browser to preview the components.

   • You may encounter https certificate issues when you open it for the first time.

5. Open the local browser input 127.X.X.1:8001/.

   If you see the following interface, the local service is started.

   Note

   Keep the local service running during debugging.

three. Debug components in the Quick BI dashboard

1. Register a component

   First, you need to register a custom component.

   Go to the Open Platform page and choose Custom Components > Register Component. In the Development Mode section, select Professional Mode. In the dialog box that appears, enter the required information and click OK.

   
   Note

   Dependent on Third-Party Libraries: Optional. If the component has no performance problems, leave this field empty.

2. Debug components

   Click the Debug Component icon on the component card.

   

   In the dialog box that appears, select the Debugging Scope, Workspace, and the corresponding dashboard page, and click Go to Debug.

   

   On the dashboard edit page that appears, click Add Chart and select Custom. The custom widget you created is displayed.

   Now you are ready to develop and debug your custom components according to your needs.