Unlock Affordable Tele-consultation with Q-Consultation Lite: An Introduction

We already know, when it comes to providing all the features required to build a full-fledged messaging solution, QuickBlox has got us covered, but what’s even better is, QuickBlox believes in giving back to the community. Introducing Q-Consultation lite, A full-fledged open-source consultation application, that can be modified and used as per the needs.

Q-Consultation Lite is a high-quality web application written in react js, which provides various features like:
- User authentication🔒
- Audio/Video calling 🎙️
- Messaging ✉️
- File sharing 📂
and many more.

Want to know more? Head over to the official blog.

In this article, we are going to see how we can configure and set up Q-Consultation Lite to build a complete consultation application in minutes.

Here is an index of the sections we will be covering. Please read throughout for maximum value. 😃

• Install NodeJS
• Create and Configure QuickBlox application
• Install dependencies
• Configure Q-consultation application
• Configure appointments
• Run project
• Next Steps

Install NodeJS

To build or run this project, we need NodeJS and npm installed in our system. To download NodeJS, we can head over to their official website and download the latest LTS version.

Note: Npm is already shipped with NodeJS, so we don’t need to download it seperately.

Create and Configure QuickBlox application

To create a QuickBlox application, we first need to have a QuickBlox account. Create a new account following this link. We can also use our Google or GitHub accounts to sign in.

Once we have a QuickBlox account, we can create a new application by following these steps:

1. Head over to the QuickBlox dashboard and click the “+” sign to create a new application.

Quickblox dashboard

1. Fill in all the required fields like App title and App type and create app.

QuickBlox create app dialog

Once this is done, we will be redirected to the overview page of our new application where we will find all the necessary application credentials required to connect the Q-Consultation application with the QuickBlox server.

Overview page of our QuickBlox application

We will see the steps to connect Q-Consultation with Quickblox in the later sections of this article.

Install Dependencies

First, we need to download the source code of the Q-Consultation application, we can do it by cloning the repository.
Let’s open the terminal in our system and head over to the directory where we would like to clone the code, now let’s run the following command:

git clone https://github.com/QuickBlox/q-consultation.git

Note: We need to have git installed to run this command.

Now we have the Q-Consultation code with us, to install dependencies, we need to simply run the below command in the project directory:

npm install

Depending on your internet speed, it might take a few moments to install the necessary dependencies.

Once this is done, you might also see some warnings in the console, which you can safely ignore for now.

Configure Q-consultation application

We now have the Quickblox application ready to be connected with Q-Consultation, so in this section let’s configure the Q-Consultation application to complete the loop.

In order for Q-Consulation to communicate with Quickblox, we will need those credentials which we got in the previous section of the article when we created the Quickblox application. Let’s add those credentials to the Q-Consultation config file.

We can either configure it by running the script or manually, let’s see both methods.

Configure by running the script

You can create a configuration file by running this command and following the instructions in the terminal:

npm run init:config

Config file initialization script

It will ask us to enter all these fields one by one, press enter after entering the value for every field.

Note: If the field isn’t annotated by an optional tag at the end, then it is a required field and its value must be entered.

Configure manually

In the project directory, go to qconsultation_config folder and open the config.json file. It will look like this (without comments):

{
 // [Required] QuickBlox application Id
 "QB_SDK_CONFIG_APP_ID": -1,
 // [Required] QuickBlox application Auth Key
 "QB_SDK_CONFIG_AUTH_KEY": "",
 // [Required] QuickBlox application Auth Secret
 "QB_SDK_CONFIG_AUTH_SECRET": "",
 // [Required] QuickBlox account key
 "QB_SDK_CONFIG_ACCOUNT_KEY": "",
 // Should QuickBlox JS SDK work in debug mode (logging enabled)
 "QB_SDK_CONFIG_DEBUG": false,
 // [Optional if you use QuickBlox Shared Cloud Plan] QuickBlox JS SDK custom API endpoint
 "QB_SDK_CONFIG_ENDPOINT_API": "",
 // [Optional if you use QuickBlox Shared Cloud Plan] QuickBlox JS SDK custom chat endpoint
 "QB_SDK_CONFIG_ENDPOINT_CHAT": "",
 // [Optional if you use QuickBlox Shared Cloud Plan] QuickBlox JS SDK custom ICE servers
 "QB_SDK_CONFIG_ICE_SERVERS": [],
​
 // Enable redux-logger
 "ENABLE_REDUX_LOGGER": false,
 // URL of the client application. Used by Share Link modal. (If not set, then Share Link will not be displayed in the application)
 "CLIENT_APP_URL": "",
 // [Required] Default language (en / ua)
 "DEFAULT_LANGUAGE": "en",
 // [Required] File upload limit in bytes
 "FILE_SIZE_LIMIT": 10485760,
 // [Required] Available for upload expansion files
 "FILE_EXTENSIONS_WHITELIST": "gif jpeg jpg mov mp4 png csv docx pdf pptx txt xls xlsx zip webm heic heif"
}

[Required] denotes that these variables must be set. Without them, the application will not work correctly.

[Optional if you use QuickBlox Shared Cloud Plan] denotes that these variables may not be set only for the QuickBlox Shared Cloud Plan, otherwise they are required.

NOTE: FILE_SIZE_LIMIT is used to initially check the size of uploaded files and display an error if it is exceeded. Modify it according to the limitations of your QuickBlox Plan.

After filling in all the details, our config.json file looks like this:

{
  "QB_SDK_CONFIG_APP_ID": 11111,
  "QB_SDK_CONFIG_AUTH_KEY": "*************",
  "QB_SDK_CONFIG_AUTH_SECRET": "*************",
  "QB_SDK_CONFIG_ACCOUNT_KEY": "*************",
  "QB_SDK_CONFIG_DEBUG": false,
  "QB_SDK_CONFIG_ENDPOINT_API": "",
  "QB_SDK_CONFIG_ENDPOINT_CHAT": "",
  "QB_SDK_CONFIG_ICE_SERVERS": [],
  "ENABLE_REDUX_LOGGER": false,
  "CLIENT_APP_URL": "https://localhost:3001",
  "DEFAULT_LANGUAGE": "en",
  "FILE_SIZE_LIMIT": 10485760,
  "FILE_EXTENSIONS_WHITELIST": "gif jpeg jpg mov mp4 png csv docx pdf pptx txt xls xlsx zip webm heic heif"
}

Now, if you use the QuickBlox Shared Cloud plam, you can skip the following steps, but if you have the QuickBlox Enterprise plan, to specify custom Ice Servers instead of default ones you can set value for key QB_SDK_CONFIG_ICE_SERVERS:

[
  {
    "urls": "stun:stun.services.mozilla.com",
    "username": "louis@mozilla.com",
    "credential": "webrtcdemo"
  },
  {
    "urls": ["stun:stun.example.com", "stun:stun-1.example.com"]
  }
]

For more details on the format see RTCIceServer docs.

And with this, we have completed the configuration required to establish the connection between QuickBlox and Q-Consultation.

Configure appointments

Now to make online appointments work in the Q-Consultation app, we need to import the appointment schema in the QuickBlox admin panel, because Appointment utilizes the power of QuickBlox Custom objects. So to support them, our application should know what an Appointment object is.

We can do this by either running the script or by manually importing the schema, let’s see both ways:

Configure by running the script

We can add the schema automatically by running this command and following the instructions in the terminal.

npm run init:schema

It will ask for the QuickBlox account credentials (email and password), enter them one by one and press enter.

Schema initialize script

Note: If you have created a QuickBlox account via Google or GitHub and you do not have a password, then this option for adding a schema is not suitable, and you need to add it manually (as shown in next part).

Configure manually

In the project directory, head over to qconsultation_config folder, there we have the schema.yml file that we need to upload. To import it into the QuickBlox admin panel, follow these steps:

• Head over to the QuickBlox admin panel of your application and go to the Custom tab.
• Switch to the import view from the top right corner.
• Now in the Import schema file section, click the Browse button.
• Locate and select the schema.yml file, and click Import Schema button once the file is uploaded.

Import schema in the Custom tab

If something goes unexpected in the above process, we can also create the custom object manually. To do so, follow the below steps:

• In the Custom tab, chose the List view from the top right corner.
• Click the Add button and choose Add new class button from the drop-down menu.

Add custom object

• A modal window will come which will have a form, where we need to specify the class name as Appointment and create the following fields:

  provider_id: Integer
  description: String
  priority: Integer
  notes: String
  dialog_id: String
  records: Integer_add
  conclusion: String
  language: String
  date_end: Date
  client_id: Integer
  date_start: Date

Add new class dialog

• Once all the fields are added, click Create class button.
• Now to be able to modify this custom object, we need to set the relevant permissions, so we need to choose Edit permission, set the permissions as shown in the below screenshot and click Edit permissions button:

Edit permissions dialog

With this, we have everything required ready to make the Appointments functionality work.

Run project

Now, we have everything necessary set up to finally run the project. Here are the different scripts that Q-Consultation provides to run/build the project in different modes.

Run the project by starting dev server:

To run the project in development mode, run the following command in the terminal:

npm start

The application will automatically open in the browser after running the npm start script. The application will run on the following URLs:

• Provider: https://localhost:3000
• Client: https://localhost:3001

Running in dev mode also means that the page will reload if you make edits.

Note: It is using self-signed certificate so your web-browser will likely warn you about untrusted certificate.

Build application for Production:

To build the application in production mode, run the following command in the terminal:

npm run build

This will build the application for production and artifacts will appear in the build folder.

Voila! With this we now have a full-fledged consultation application running, we can now modify it as per our needs and deploy it.

Next Steps

• Want to modify the application and/or integrate it? refer to the Integration Guide.
• Want to contribute to make this open-source project even better? Read Contributing Guide.
• Found an issue? Please report it here by creating a new issue.
• Stuck somewhere and need help? Join our discord community and we will help you out.
• You let us know. 😉

References

Build a teleconsultation app in minutes with Q-Consultation Lite, free, open source software

GitHub - QuickBlox/q-consultation

Add chat and video calling using QuickBlox chat API and SDK

PixelApps: Flutter Startup Studio.