QuickStart Guide for Q‑Consultation Lite

Step 1. Install NodeJS

In order to run this project, you will need NodeJS and npm (shipped with NodeJS). We suggest NodeJS version 16+

Step 2. Install Dependencies

Next, you will need to visit the QuickBox GitHub Repository and clone the repository or download it as a zip archive.

Once this has been completed, you need to install dependencies by running the following command in cmd:

Step 3. Sign-in to your QuickBlox Account

To run the source code you will need a QuickBlox account. Sign-in to your existing account, or if you don’t have one, register for free.

Step 4. Create a QuickBlox Application

Once you are in your QuickBlox account, you need to create a QuickBlox application. This will allow you to connect the Q-Consultation Lite application to the QuickBlox server.

On the main page of the QuickBlox account, create an application by clicking the “New app” button

Fill in the required fields including app "Title" and app "Type", and select “Create app”

On the “Overview” page of your newly created application, you will find application credentials necessary to connect the Q-Consultation Lite application to the QuickBlox server. We will get back to this later.

Step 5. Configure the Application

Now, let’s get back to your application credentials which you can find in the QuickBlox admin panel. In order to work correctly, your application needs to know a set of configs.

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

You can also manually update the "config.json" variables in the "qconsultation_config" folder.

You will need to update the following keys with your credentials.

[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 do not need to be set when using the QuickBlox Basic/ Starter/ Growth/ HIPPA Cloud Plan. If you are on the Enterprise plan, these variables are required.

“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.

Contact our sales team if you wish to upgrade plan

If you have a QuickBlox Basic/ Starter/ Growth/ HIPPA Cloud Plan (Shared server), you can skip the following step.

If you have a QuickBlox Enterprise plan, to specify custom Ice Servers instead of default ones you can set value for key "QB_SDK_CONFIG_ICE_SERVERS":

For more details on the format, see RTCIceServerdocs.

Step 6. Import Appointment Schema

To make online appointments work in the Q-Consultation app, it’s necessary to import an appointment schema file to the QuickBlox admin panel.

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

You can also add a scheme manually through the Admin Panel. (If you've created a QuickBlox account via Google or GitHub and you don't have a password, then you will need to use this manual method.)

You will find the "schema.yml" file in the "q-consultation_config" folder of the project directory.

To import this file to the QuickBlox admin panel, follow the steps below:

• 1.  If you have the QuickBlox application open in the admin panel, go to the “Custom” tab.
• 2.  In the top-right corner, you will find the “Import” tab.
• 3.  There, click “Browse” for the “Import schema File”.
• 4.  Once the file is added, click “Import Schema”.

If something goes wrong, you can also manually create a custom class in the way described below:

• 1.  In the top-right corner, choose “List” of the “Custom” tab.
• 2.  There, click “Add” and choose “Add new class” from the drop-down menu.
• 3.  A modal window will appear where you need to specify the class name “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
  
• 4.  After all the fields have been added, click “Create class”.
• 5.  Once done, the modal window will close. You need to choose “Edit permission”, set the permissions as shown on the screenshot below, and click “Edit permissions”
  • **provider_id** - QuickBlox user Id to whom Appointment is assigned to
  • **dialog_id** - QuickBlox dialog Id created for this Appointment
  • **records** - array of QuickBlox Content object Ids (call records for this Appointment)

Step 7. Customize Style Settings & Logo

You can fully customize the application style settings and logo and you may wish to do this at this stage before you run the code. For full instructions, see the Integration Guide.

Step 8. Create Users

In order to test how the Q-Consultation Lite application works after the launch, you can now create users - a Provider and a Client.

A Client user can be registered directly via the Q-Consultation application via the “sign-up” option.

However, the app does not provide a self-registration option for the Provider user. Instead the Provider needs to be created by the QuickBlox admin user via the admin panel.

Currently, you need to create one Provider as the default Provider. If there is no default Provider, then the Client web application will constantly send API requests to the QuickBlox server for the Provider to show as a default. Later, you can change this logic.

Follow the steps below to create a Provider:

1.  Open your QuickBlox application, and go to the ‘Users’ tab.

2.  Select “Add new user”.

3.  Fill in user data (Full Name, Email, Password, Confirm) and set a Tag “provider”, choose “Yes” for “I’m over 16”, and click “Add user”.

Now you will be able to log into the Q-Consultation Lite provider app with this user.
Each newly created user is assigned a unique ID. You will need this user_id later.

Step 9. Run the Code

Once you have completed the preparation steps listed above you are now able to run the project.

We provide the following scripts in the project directory to help you run the project.

Start dev server

This script runs the app in development mode.
The application will automatically open in the browser after running the `npm start` script.

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

The page will reload if you make edits.

NOTE: The Q-Consultation application uses a self-signed ssl certificate, so your web-browser will likely warn you about untrusted certificates.

Build application for production

This script builds the app for production. Artifacts will appear in the `build` folder.

See the section about deployment for more information.

NOTE: Be sure to use HTTPS on the server, otherwise video calls will not work for you.

Launch integration pages

This script allows you to run integration pages on http://localhost:8000. You can read more about how to work with integration pages here.

​Check code

This will run code linting using ESlint which will analyze code to find problematic patterns or code that doesn't adhere to certain style guidelines.