Quickstart: Run any Blockspring function with Javascript.

In this tutorial, we'll learn how a single line of Javascript gets you access to all of the powerful utilities, algorithms, API calls, visualizations (and more) in the Blockspring community library.

Installation


Make sure you have jQuery loaded in your app. If you don't have it, copy and paste the following snippet into your HTML.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Next, paste blockspring.js into your HTML:

<script src="https://cdn.blockspring.com/blockspring.js"></script>

Blockspring is now active in your app.


Your first run: personal assistant.


Let's chat with a personal assistant.

Copy and paste the code below into an HTML file and open it into your browser.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script src="https://cdn.blockspring.com/blockspring.js"></script>

<script>
  // our personal assistant function:
  blockspring.runParsed("personal-assistant-jeannie", {
    message: "What's the weather like in Antarctica today?"
  }, function(res) { console.log(res.params["answer"]); })
</script>

Unless it's the end of the world, Antarctica is probably pretty cold right now. You should see the following in your browser's developer's console:

It is currently clear, -3 Fahrenheit

You ran your first Blockspring function. Let's explain how that worked.


Blockspring functions in a nutshell


When you ran blockspring.runParsed, here's what happened:

  1. Blockspring used your function name to find Personal Assistant, a simple API call to the Jeannie personal assistant, written in Python, and submitted by user pkpp1233.

  2. Personal Assistant quickly executed in the cloud, with your message passed through as an input argument.

  3. You got back results and printed the definition, found in params["answer"].

That instant replay should raise some questions. Let's answer them.


A quick Q+A


Where do I find more Blockspring functions?
Browse the community library to find utilities, algorithms, API calls, visualizations, and more. You're now a quick search away from programming just about anything.


Great, I found a function. How do I run it?
Click "Integrations" on the function's homepage, choose jQuery, and copy and paste the given code snippet to wherever you need it. Try it yourself with Personal Assistant.


How do I know what inputs my function requires?
Again, click Personal Assistant, go to "Integrations", click jQuery, and you'll see in the given code snippet the only input required is message. The snippets are helpful for finding a function's required input arguments.


How do I know where to find the function output?
The output is found in res.params. Explore that variable to find the output you're looking for.


Your second run: interactive google map


Let's create an interactive Google map with Blockspring. Again, copy/paste this snippet into an html file and open it in your browser.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script src="https://cdn.blockspring.com/blockspring.js"></script>

<script>
  blockspring.runParsed("interactive-google-map", {
    locations: [
      ["Latitude", "Longitude", "Tooltip"],
      [37.4217542234, -122.100920271, "Somewhere"],
      [41.895964876906, -87.632716978217, "Out"],
      [28.58230778, 77.09399505, "There"]
    ]
  }, function(res){
    var map = blockspring.parseFile(res.params["map"]);
    $('body').append($("<iframe>").attr("srcdoc", map));
  })
</script>

You should see an interactive map open in your browser that looks like the image below:

Nodejs quickstart gmap

Blockspring returned the interactive map as a base64 encoded HTML file. You decoded the file using blockspring.parseFile and appended it to your page inside of an iframe. When you are receiving html files from Blockspring, this is a standard method.

Try changing the lat/lon inputs and refreshing the page! You should see the map update right away.


Your third run: a screenshot


Now let's take a screenshot of a website right from javascript, and display it as an image in our page.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script src="https://cdn.blockspring.com/blockspring.js"></script>

<script>
  blockspring.runParsed("screenshot-webpage", {
    url: "http://www.getsquare.com",
    width: 300
  }, function(res){
    var ss_file = res.params["screenshot"];
    var ssUri = blockspring.getDataUri(ss_file);
    var $img = $("<img>")
      .attr("src", ssUri);

    $("body").append($img);
  })
</script>

Note - you received the screenshot image from Blockspring as a base64-encoded string. Then we used the blockspring.getDataUri function to create a data-uri of the image, which then was placed inside an image tag.

This time let's follow a similar method to turn the screenshot into a link for users to download. We'll also enable caching. If the screenshot was taken within the last 3600 seconds, we'll receive it right away instead of re-running the function.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script src="https://cdn.blockspring.com/blockspring.js"></script>

<script>
  blockspring.runParsed("screenshot-webpage", {
    url: "http://www.getsquare.com",
    width: 300
  }, {
    cache: true,
    expiry: 3600
  }, function(res){
    var ss_file = res.params["screenshot"];
    var ssUri = blockspring.getDataUri(ss_file);
    var $a = $("<a>")
      .attr("href", ssUri)
      .attr("download", ss_file.filename)
      .text("my screenshot");

    $("body").append($a);
  })
</script>

Become a Blockspring pro


Blockspring lets you program just about anything with a single line of Javascript and you're well on your way. You now know how to:

Now that you're becoming a pro, get 100k function runs per month for free!


Discover new functions Work at Blockspring