Skip to content

Instantly share code, notes, and snippets.

@mhbeals
Last active March 21, 2016 10:20
Show Gist options
  • Save mhbeals/70e475aeeb8d20c80a3c to your computer and use it in GitHub Desktop.
Save mhbeals/70e475aeeb8d20c80a3c to your computer and use it in GitHub Desktop.
Instructions (more or less) on One-Man Crowd-Sourcing, as presented at #Collabw16

Introduction

There are many ways you can create a crowd-sourcing platform; the following, although only one of many, allows for a significant degree of flexability and customisation for precisely zero cost. The only requirement is that your initial data be formatted as an XML.

Sign up for services

In order to develop your crowdsourcing site, you will need accounts for the following services:

  • Google: A Free E-Mailand Cloud Storage Provider
  • x10host.com: A Free Hosting Service, allowing full installations of Wordpress
  • IFTTT: A Free Automation Service

The first step is to set up a dedicated email account. This method of crowdsourcing involves emailing (hopefully thousands of) results from a website to an email and then converting these emails to rows on a Google Spreadsheet. For this reason, I suggest you use a Google account that is separate from any others you might have. The account can named something relevant to your project, to allow for easy G+ integration, or a random string.

After setting up your email, visit X10Host and set up a free site. Once you have the server running, use the X10Host install software option to install the latest version of Wordpress on your site. Unlike Wordpress.com, this is a full function version of the software, allowing the installation of any plugin—something vital to this workflow.

Set up your website

Now that you have your website up and running, go into the plugins tab and install and activate the following Wordpress plugins:

  • WP All Import (by Soflyy): Allows you to import XML records into individual posts or pages
  • Contact Form 7 (by Takayuki Miyoshi): Allows you to create highly customisable web forms
  • FTP-Free Theme File Creator (by P.G. McCullough): Allows you to create page templates on-the-fly (without FTP access)

You will need to choose (or create) and install a theme before your site goes live. While setting up the back-end to your site, I suggest using Twenty Fifteen, a clean minimalist theme.

Creating Record Templates

Once you've set up your plugins, you'll now need to set up your crowd-sourcing environment. To make the site as straightforward for your visitors as possible, you will probably want:

  • A single url for visitors to access your crowd-sourcing page
  • A mechanism for that page to display a random record from your database with each visit
  • A mechanism for that page to reload to a new random record after completing their tagging or transcription

This can all be done with a Wordpress template and little bit of PHP. The first thing you will need to do is create a category for your records. Under pages choose categories and create a new category. It can be named anything you want; no one will see it but you.

After saving and returning to the list of categories, click on the edit link under your newly created catagoey. In your address bar, look for the folllowing

category&tag_ID=

and note down the numeral after ID=. This is your category number; you will need this in a moment.

Next, go to editor underneath the appearance tab. If you successfully activated your FTP-FRee Theme File Creator you should see a list of templates, each with a a red x. At the bottom of the list you will have the option to create a new template. Do so, naming it anything you like.

Now go to your archive template and copy the code there exluding the commmented (*//) desctiption at the top. This should have the proper structure for your theme, and some variant of <?php if ( have_posts() ) : ?>. Open your new template and paste this under the commented descrpition. Next, replace your header (everything above get_header(); ?>) with the following:

<?php
/*
Template Name: NAME
*/ ?>

<?php
query_posts(array
    (
    'cat' 	    => '1',
    'orderby'   => 'rand',
    'showposts' => '1'
    )
); get_header(); ?>

Remember to replace your template's NAME with something memorable and the numeral 1 after 'cat' with your category number.

Save and then create a new page (rather than post) using the menu on the lefthand-side of the screen. Title this page something appropriate (your visitors will see this) and then, on the righthand-side of your screen, choose your newly made template. Save your page. Now when you visit this page, it will show a random post from your new category.

Setting up your webform

The next thing you'll need to do is decide on what information you want your visitors to provide you. On the lefthan-side of your dashboard, click on Contact and then Add New. Using the buttons provided, create the questions you would like to ask your vistors. The form uses standard HTML tags as well as Wordpress line breaks (a carriage return automatically translates into a <br/>). Make sure you include a Submit button at the end!

Once you've done this, go to the mail tab and enter your Gmail address and a simple (ideally one-word) subject heading. In the message body, create a single line of all the fields you've asked your visitors for, omitting all other text. If your responses cannot possibly have a comma in them, separate the fields with a comma. If they might (even a remote possibility) have a comma in them, use an unusual symbol to separate them. I suggest ¬, for example, [colour]¬[shape]

Finally, in the Additional Settings tab, add the following

on_sent_ok: "location.replace('http://subdomain.x10host.com/page?thankyou');"

replacing subdomain with your subdomain and page with the blank page you created previously. This will ensure the page refreshes, showing a new record, after your visitor has entered a response. If you do not want the page to refresh automatically, simply omit this step. Save your webform and note down the shortcode for your form.

Now it's time to populate those records!

Importing your data

On the lefthand-side of your dashboard, click on All Import and then new import. You will then go through a set-up wizard in which you

  • Upload your XML data
  • Choose the top-level for each of your records
  • Create and HTML template, dragging and dropping fields from your database to be populated
  • Running your import and creating your posts

The wizard is very straightforward, but remember the following

  • It doesn't matter what you use for each post's title, as your vistors will not see these
  • You must include the Category name for the category you created earlier
  • Your HTML template must include your shortcode for your webform. You can do this underneath the displayed data, or by creating a two-column table, your data on one side and your form on the other example.

Once your import is complete, go to your website to the 'blank' page you set up earlier. One of your entries and your webform should appear!

Collecting your data

One you fill in your form and hit send, an email will be sent to your Gmail address. The next step is to automate the process of taking those lines of information and populating a Google Spreadsheet. Go to if this, then that automation service.

Set up an account. To make your life simplier, I suggest using your new Google email for your account. When asked to select three channels, choose gmail, Google Drive and a third of your choosing. Ignore the suggestions offered and go to Create on the top menu (under your username).

The recipe you'll need is as follows:

  • If GMail
  • New email in inbox from search
  • subject:webform
    • (replace webform with the subject you chose for your webform above)
  • Then Google Drive
  • Add row to spreadsheet
  • {{ReceivedAt}} ||| {{BodyPlain}}
  • Crowdsourcingdata

Create the action. This will now run periodically on its own, or you can trigger it manually on your My Recipes page.

Test it out

Go back to your website and fill in a few forms. Go to your gmail account and see if your inbox is starting to fill up. Go to IFTTT and run your recipe to see if it triggers properly. Go to your Google Drive and see if your spreadsheet is populating

Separating values

As you can see on your spreadsheet, you really only have two columns, a received at and a long strong filled with 's or ¬s. You will now need to install a small add-on to your Google drive called CSV Converter (by www.zirrus.eu). Once installed, simply select your second column and convert (choosing your delimiter symbol) and presto!

If you have any questions, feel free to tweet to @mhbeals or poke my on the Collabw16 Slack Channel.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment