vLineRails Example

The vLineRails Example shows you how to create a Rails app that can be used with the low-level vLine API and also used to launch the vLine Web Client that uses the users you provide.

Before you begin

1. Sign up for a [vLine developer account] (https://vline.com/developer/).
2. Sign up for Forward and install the gem: gem install forward.
3. Install ruby version 1.9.3 or newer.
4. Clone this repository.
5. Optional: Install rvm.

Create your vLine Service

Create a service in the vLine Developer Console.

Create your Rails app (Rails 3.x)

1. Change into the directory where you cloned this repository.

2. Install all dependencies:

    bundle install
   

3. Create an app directory and change into it:

    mkdir ../vline
    cd ../vline
   

   The following instructions walk you through creating the Rails app from scratch. If you'd rather use the pre-generated one, you can skip to the Configure your app step. Make sure you have configured the values in config/initializers/vline.rb.

4. Create the new app:

    rails new vline-demo-app -m https://raw.github.com/RailsApps/rails-composer/f9d885977ad345dd90f07e6dcdac17407cf9b3a7/composer.rb -T
   

5. You will get several prompts. Choose the following:

   • 4) rails-3-bootstrap-devise-cancan
   • 1) WEBrick (default)
   • 1) Same as development
   • 1) ERB
   • 1) None
   • Set a robots.txt file to ban spiders:: You choose
   • Create a GitHub repository?: You choose
   • Use or create a project-specific rvm gemset?: y

6. At the end of the setup, you should see Your bundle is complete!. If you get any error messages during this process, take a look at this page.

7. Change into the app directory:

    cd vline-demo-app
   

8. The email and password for the admin account is in config/application.yml. It is probably [email protected] and changeme.

9. Create some extra users by adding the following to the db/seeds.rb file:

    for i in 2..5
        user = User.find_or_create_by_email :name => "User #{i}", :email => "user#{i}@example.com", :password => 'changeme', :password_confirmation => 'changeme'
        puts 'user: ' << user.name
        user.add_role :user
    end
   

Install vLineRails Plugin in your application

1. Add gem "vline-rails" to your Gemfile and run bundle install to install it.

2. Find your service in the vLine Developer console and make note of the Service ID and API Secret.

3. Use the values from the last step to generate the vLine provider by running the following command:

    rails generate vline_provider --service-id=Your-Service-Id --provider-secret=Your-Service-API-Secret
   

   Make note of the Client ID and Client Secret output by the command.

4. Check your config.ru file and verify that it has:

    require 'rack/jsonp'
    use Rack::JSONP
   

Add presence to your Rails app

1. At the top of app/views/home/index.html.erb, add the following, which includes vline.js:

    <% content_for :head do %>
      <script src="https://static.vline.com/vline.js" type="text/javascript"></script>
    <% end %>
   

2. In the same file, replace:

    <p>User: <%=link_to user.name, user %></p>
   

   with

    <div>
          User: <%= user.name %>,
          Presence: <span id="<%= user.id %>">offline</span>,
          <%= vline_launch "Launch Web Client", user %>
          <span id="call-<%= user.id %>" style="display:none">
            , <a onclick="call('<%= user.id %>')" href="javascript:void(0)">Call</a>
          </span>
      </div>
   

3. In the same file, add the following JavaScript at the bottom of the file:

    <script type="text/javascript">
        var loginToken = "<%= Vline.create_login_token(current_user.id) %>";
        var serviceId = "<%= Vline.service_id %>";
        var authId = "<%= Vline.provider_id %>";
        var profile = {"displayName" : "<%= current_user.name %>"};
   
        var people = [
            <% @users.each do |user| %>
            "<%= user.id %>",
            <% end %>
        ];
   
        var client = vline.Client.create({"serviceId": serviceId, "ui": true});
   
        var session;
   
        function call(userId) {
            if (session) {
                session.getPerson(userId)
                        .done(function(person) {
                            person.startMedia();
                        });
            }
        }
   
        client.on('login', function(e) {
            session = e.target;
   
            for (var i=0; i < people.length; i++) {
                session.getPerson(people[i])
                        .done(function(person) {
                            var updatePresence = function(e) {
                                var person = e.target;
                                var presenceState = person.getPresenceState();
                                var shortId = person.getShortId();
                                var elem = document.getElementById(shortId);
                                elem.innerHTML = presenceState;
   
                                // Show/hide the call link based on presence
                                elem = document.getElementById('call-' + shortId);
                                if (presenceState === "online" && shortId !== "<%= current_user.id %>") {
                                    elem.style.display = "";
                                } else {
                                    elem.style.display = "none";
                                }
                            };
   
                            updatePresence({target: person});
                            person.on('change:presenceState', updatePresence);
                        });
            }
        });
   
        client.login(authId, profile, loginToken);
    </script>
   

4. In the home controller (app/controllers/home_controller.rb), force the user to login to see the page with:

    before_filter :authenticate_user!
   

   at the beginning of the class (class HomeController < ApplicationController)

   Also, add:

    require 'vline'
   

   to the top of the file.

Configure your app

1. Make sure all dependencies are installed:

    bundle install
   

2. Prepare the database:

    rake db:migrate
    rake db:seed
   

3. Generate a secret token:

    rake secret
   

4. Add the generated token to config/initializers/secret_token.rb.

5. Start Forward by running the following command in your app directory:

    forward 3000
   

   Make a note of the URL that it prints so that you can use it in the next steps.

6. Open up the vLine Developer Console and choose Service Settings.

7. Click the Edit button and select Custom OAuth in the Authorization dropdown:

   • Add the Client ID and Client Secret from the rails generate command you previously ran.
   • Set the Provider URL to : https://your-forward-url/_vline/api/v1/
   • Set the OAuth URL to: https://your-forward-url/_vline/api/v1/oauth/

8. Further customization of the Web Client can be done by providing custom images in the Web Client Settings.

Run your app

1. Run the rails server in your app directory (make sure Forward is still running):

    rails server
   

2. Go to http://localhost:3000 in your browser.

3. Log in as [email protected].

4. Open up a Chrome incognito window.

5. Log in as [email protected].

6. You should see both "First User" and "User 2" online.

7. Click Launch Web Client to launch the Web Client for a specific user.

8. A Call link will show up next to online users and will initiate a call directly from the page.