Photo Credit: Floobits.com

A Guide for Setting Up Collaborative Coding Workspaces with Floobits

For the past few months, I’ve been a Student Leader for the Grow With Google Scholarship Community while finishing up my Advanced Android Development Nanodegree offered through Udacity.

Collaborating with other leaders to motivate and technically support fellow students on a daily basis along with working through more strenuous coding roadblocks every other Saturday with some 150+ peers on Slack across four different tracks (Android Basics Development, Advanced Android Development, Mobile Web Specialist, and Front End Development) has been incredibly rewarding but slightly overwhelming at times.

I like the adrenalin rush, though, so I also applied to be a 1-on-1 Mentor to help students on the Front End track make progress and get caught up on their coursework.

After the first week of mentoring, I realized the need to pair program with my mentees to significantly improve the user experience of our sessions and reduce the time spent on sending files/repos or sending snippets of code via direct message. Plus, pair programming is a useful skill for every developer to cultivate.

Enter Floobits — a real-time collaborative editor!

The following is a guide for mentors and mentees (and anyone else, for that matter) to quickly get Floobits going in a web browser (the easy way) or with a popular text editor/IDE (the alternative way).


The Easy Way: Creating A Project Workspace in the Browser

It’s easy to get Floobits set up in the browser. Here are the steps:

Photo Credit: Floobits.com

Step 1: Sign Up for Floobits Account with Your GitHub

Visit the Floobits website and sign up for an account. They have a GitHub authorization option that’ll get you synced with your repos in minutes.

Step 2: Create a Workspace from Your Dashboard

This will bring you to your dashboard:

You have two options: (1) Clicking “Create a workspace” and uploading a repo manually to your created workspace or (2) importing a project from GitHub (like a cloned Udacity project repo) by clicking “GitHub Import” and linking your account:

The “GitHub Import” tab should populate with your available repositories almost instantly.

I’ll go ahead and click “Import” to the right of the project “mws-restaurant-stage-1” and this will open the repo and next steps in a new workspace.

Step 3: Clone the Repo to Your Workspace

Go ahead and click “Clone” to finish the process of importing the repo to your workspace.

Also, go ahead and X out the pull request log that opens up. You’ll see the repo file tree on the left, confirmation that you’ve joined the workspace in the chat thread down below, and a gravatar-like profile image on your right. As you invite new users to the workspace, more profiles will list in that right-side pane.

You can view the various collaboration options under the “Collaborate” menu:

And that’s it!

The Alternative Way (Part 1): Setting Up Floobits with Sublime

Note: most recently, when I tried to “Summon” someone, it didn’t work. For that reason, I’ll show you how to get this working locally in a more preferred/customized coding environment.

Floobits offers plugins for the following IDEs:

  • Sublime
  • Atom
  • Emacs
  • Neovim
  • IntelliJ IDEA

I’ll go through how to install for Sublime and Android Studio.

Step 1: Upgrade to the Latest Version of Sublime

Outdated versions will bring about security/SSL certificate complications further along in the process.

Step 2: Access Package Control

To access Package Control in Sublime, press “cmd +shift + p” on Mac (or “ctrl + shift + p” for Windows users). This brings up a small command palette search window, where you can type “Package” to bring up Package Control.

Clicking Package Control: Install Plugin will bring up another search window for available packages:

Click on the Floobits package to install. And that’s it! You’re ready to configure!

Note: if Package Control doesn’t come up, most likely it’s listed as an ignored package in your preference settings. Go to Preferences → Settings to bring up your Preferences.sublime file and remove “Package Control” from the array value. (You’ll see it on the right:)

Step 3: Link Your Floobits Account to Your Sublime Editor

Once installation is complete:

Sublime’s command palette will give you authorization options:

Clicking on either of the first two options should pull up a browser window that enables you to register for an account or authorize you as an existing user.

And there we have it. Our account is synced to Sublime.

Note: If for some reason, this isn’t working for you there may have been issues with installation. Visit the Floobits .floorc.json config file (Preferences → Package Settings → Floobits → Settings):

And make sure everything looks like it oughta:

#Example ~/.floorc.json file
{
"auth": {
"floobits.com": {
"username": "AnnMargaret",
"api_key": "<Your API Key>",
"secret": "<Your Secret>"
}
}
}

To find your Floobits API Key and Secret, visit your account online and go to Settings in the top nav menu:

Step 4: Create A New Workspace for Your Repo

Now, the fun begins.

Open a project in Sublime and right click on the root directory in the side panel:

This will bring up a command palette at the bottom of the editor asking you to name your workspace:

Tip for Mentors: It’s probably a good habit to prepend your Mentee’s name to a workspace to keep things organized, if you’re the one initializing the workspace.

And we’re good to go:

Step 5: Joining An Existing Workspace/Getting Back In to Your Workspace

Now that we have a workspace, you’ll notice that Floobits added two files for us: .floo and .flooignore. This signifies that a workspace exists.

If you need additional confirmation that the workspace has been created, we can check for it in our dashboard in the browser:

There it is.

Back in Sublime, if you right-click anywhere in the text editor, a menu should pop up with more collaboration options:

To join an existing workspace, you’ll need the workspace url and viewing/editing permissions extended from a workspace admin (if the workspace is private).

For example, the url for this demo workspace called “MENTEE-NAME_mws-restaurant-stage-1” is:

https://floobits.com/AnnMargaret/MENTEE-NAME_mws-restaurant-stage-1

Now, let’s try this out in Android Studio.

The Alternative Way (Part 2): Setting Up Floobits with Android Studio

The Mentor program for the Grow With Google community just rolled out to all the tracks, so it might be useful to provide steps for Android Developers.

The steps:

Step 1: Search for Plugins Action Menu

Open up a project in Android Studio, and click the search icon (magnifying glass) in the upper right hand corner to search for the Plugins Action Menu:

Click “Plugins” at the bottom of the search results list and then click “Browse repositories…” in the next window that pops up:

Search for the Floobits plugin and click install:

You’ll be asked to restart Android Studio to activate the plugin:

Go ahead and restart.

Step 2: Create a Project Workspace in Android Studio

Once Android Studio boots back up, you’ll be able to find the Floobits submenu to create a workspace by going to Tools → Floobits → Settings→Share Project Publicly.

A new window should surface with an SSL certificate warning requesting your confirmation. You can go ahead and click “Accept”:

Name your workspace and decide on the files to include:

At the bottom of your IDE, a window will pop up confirming the connection:

You’re good to go!


Pros and Cons of Floobits and Thought on Pair Programming

What makes Floobits a compelling pair programming solution is the ability for programmers to collaborate on files concurrently while working out of their respective preferred environments.

A Screen Share of me and my mentee testing out Floobits

You can even import your workspace to a Google Hangout!

Potential downsides occur mostly with the free plan, in that anyone could feasibly jump in and break something if they had the url. Syncing files can also bring challenges. Pushing changes to the origin incrementally to preserve the state of your project may be a good workflow. Using GitHub Desktop makes this seamless. It also doesn’t preview the code natively. A potential get around would be running the project locally and sharing your screen to show what appears in the browser.

From previous experiences with pair programming, it can also be helpful to pre-define the roles of the session (e.g., one person verbalizes pseudo code for a period of time, while the other composes the statements and syntax).


Over to You!

Grow With Google Udacity Mentors, I’d love to hear back in the comments or in Slack how this approach worked for you!