Local Installation

Prerequisites

You will need to download:

Installation

  1. In Terminal/Command Line run: git clone https://github.com/KainosSoftwareLtd/Whiteboard.git

  2. In the whiteboard folder run npm install to download all required dependencies.

  3. Change directory to the bin folder and run node www

  4. You now can access the site at http://localhost:3000/

Configuration

XirSys

This project requires you to create a XirSys account in order to allow you to communicate with other computers on internal networks. XirSys provides the STUN and TURN servers needed to make this possible. An account can be created via their website: https://xirsys.com/

Once you have created an account you will need to enter the following details to the “user.json” file in the format outlined below:

{   
    "form": 
    {
         "ident": "UserName",
         "secret": "API_Authentication_Key",
         "domain": "YourDomain",
         "application": "YourApplication",
         "room": "YourRoom",
         "secure": 1
    },
    "json": true
}

NOTE: This project also provides functionality whereby an email can be sent to notify someone of a planned online meeting however for now this has been disabled for the initial configuration of the project. If you would like to enable this feature please see the Invite Functionality section below.

Testing

To run associated tests Karma must be installed. To do this follow the instructions on the Karma website.

Run karma start karma.conf.js from the whiteboard folder in terminal. Test output will be displayed in the terminal.

NOTE: If you wish to enable the invite functionality then alterations to some tests will need to be made. Please see the Testing Invite Functionality section below for more details.

Connecting Another Computer To LocalHost

Once you have whiteboard running on your local machine, others will be able to join meetings that you host. To do this they must enter the IP address of your machine into their web browser in the following format:

http://IPADDRESS:3000

From here the user will be able to enter a meeting room pin or they can directly connect to a meeting by entering ammending their browser URL to the following:

http://IPADDRESS:3000/board/ROOMPIN

NOTE: Some browsers (such as the latest version of Google Chrome) may prevent access to a computer's camera and microphone and thus prevent real-time communication. If this is the case please follow the instructions below to utilise ngrok in order to bypass this issue.

Ngrok

This project makes use of webRTC, allowing a camera and microphone to be accessed through your browser. Some browsers will therefore want to ensure that information is handled securely.

Ngrok enables you to "Instantly create a public HTTPS URL for a web site running locally on your development machine."

This will allow to bypass security issues with modern versions of browsers such as Google Chrome by allowing you to connect to a HTTPS URL. To begin please download ngrok from the site found here and save the zip file to your "whiteboard" folder

Next you will need to unzip the downloaded file. If you are using a Windows machine please double click ngrok.zip. To do this on Linux or OSX please run the following command in terminal: unzip /path/to/ngrok.zip

In order to then create a public HTTPS URL please run the following command ./ngrok http 3000

If you have the project running in another terminal window i.e. by running the node www command, your configuration of the whiteboard project will then be accessible on a URL similar to the following example: https://08ff56sd.ngrok.io

Pushing to Heroku

Once you are happy with your whiteboard configuration it may be useful to push it to Heroku to make it easier to access. By pushing your configuration to Heroku you will be able to access your specific Whiteboard setup from any device that is connected to the internet.

To do this you will need to create a free Heroku account. This can be done here.

Once your free account is set up you will be able to push your code to a personal app by following the instructions found here. You will then be able to access your site at
https://YOURDOMAINNAME.herokuapp.com

Invite Functionality

Currently access to the invite functionality has been disabled. In order to enable access to the "Create New Meeting" page you will need to delete the comments surrounding the "Create New Meeting" button in index.hbs (Whiteboard/views/index.hbs).

To do this, please navigate to index.hbs and identify the following code:

               
<!--<div class="row">
                    <div class="text-center col-xs-12">
                        <h3>or</h3>
                        <br>
                    </div>
                </div>

                <div class="row">
                    <div class="col-xs-offset-4">
                        <button type="button" ng-click="newMeeting()" class="btn btn-primary">Create new meeting</button>
                    </div>
                </div>-->

Then delete the comment tags surrounding the code so that it looks like this:

               <div class="row">
                    <div class="text-center col-xs-12">
                        <h3>or</h3>
                        <br>
                    </div>
                </div>

                <div class="row">
                    <div class="col-xs-offset-4">
                        <button type="button" ng-click="newMeeting()" class="btn btn-primary">Create new meeting</button>
                    </div>
                </div>

This will enable the "Create New Meeting" button on the main page of the project.

SMTP

In order to make use of the invite email functionality you will also need to add an SMTP server.

A gmail account provides an SMTP server. This will need to be added to the invite.js file (whiteboard/routes/invite.js) as shown below:

var transporter = nodemailer.createTransport('smtps://<YourDomain>%40gmail.com:<YourPassword>@smtp.gmail.com');

A default SMTP server is currently utilised in the code. It is the following: var transporter = nodemailer.createTransport('smtps://whiteboardtest1%40gmail.com:Wh1t3board@smtp.gmail.com');

If you wish to add your own SMTP server this must be replaced.

Adding New Contacts

Currently displaying people that are available to invite is handled as part of InviteCtrl.js (whiteboard/public/js/controllers/InviteCtrl.js) as shown below:

    {
         id: 1,
         userImage: 'http://placehold.it/150x150',
         name: 'Test Name',
         department: 'Test Department',
         email: 'testdepartment@kainos.com'
    }

In order to add people to invite for this meeting their details will need to be added to this file in the appropriate format and each person must have a unique id. Therefore, if I wanted to add a second potential invitee I would add:

    {
         id: 1,
         userImage: 'http://placehold.it/150x150',
         name: 'Test Name',
         department: 'Test Department',
         email: 'testdepartment@kainos.com'
    },
    {
         id: 2,
         userImage: 'http://placehold.it/150x150',
         name: 'Test Name2',
         department: 'Test Department2',
         email: 'testdepartment2@kainos.com'
    }

Testing Invite Functionality

You will need to edit the data stored in the variable "mockTableTestData" by replacing any existing contacts with the contacts you have added. The information must be entered in the following format and must match the information you have added to InviteCtrl.js:

   [
    {
         id: 1,
         userImage: 'http://placehold.it/150x150',
         name: 'Test Name',
         department: 'Test Department',
         email: 'testdepartment@kainos.com'
    },
    {
         id: 2,
         userImage: 'http://placehold.it/150x150',
         name: 'Test Name2',
         department: 'Test Department2',
         email: 'testdepartment2@kainos.com'
    }
   ];

You will also need to remove the comment block enclosing one of the tests in InviteCtrlTests.js (Whiteboard/test/unit/InviteCtrlTests.js) To do this please navigate to InviteCtrlTests.js and identify the following code:

        /*it('$scope.removeUserFromInviteesList() should remove the specified user from the invitee list and add them ' +
            'back to the table', function(){
            $scope.addUserToInviteesList = mockTableTestData[1];

            $scope.removeUserFromInviteesList(mockTableTestData[1]);

            expect($scope.invitees).not.toContain(mockTableTestData[1]);
            expect($scope.mockTableData).toContain(mockTableTestData[1]);
        });*/

Then remove the comment markers so that the code looks like this:

      it('$scope.removeUserFromInviteesList() should remove the specified user from the invitee list and add them ' +
            'back to the table', function(){
            $scope.addUserToInviteesList = mockTableTestData[1];

            $scope.removeUserFromInviteesList(mockTableTestData[1]);

            expect($scope.invitees).not.toContain(mockTableTestData[1]);
            expect($scope.mockTableData).toContain(mockTableTestData[1]);
        });

This will enable another test in the suite and provide greater test coverage for the project's invite functionality.