toUpperCase

A plain web example of using distributed computing to capitalize a string:

First, sign up for a DCP account at https://portal.distributed.computer and download your id.keystore and default.keystore associated with your account. For more information on how to do that, refer to this tutorial.

In this example, the DCP app takes a string, splits it into characters, sends each character to a worker who capitalizes it, and reports the results. You wouldn’t distribute such a small task often, but it helps this example show DCP-specific code, without worrying about app details.

Setup

First, set up an HTML file. Requiring the dcp-client library in the first script tag allows the app to distribute work. Some pre-written HTML displays the output, but the rest of the tutorial is in JavaScript within the second script tag.

<!DOCTYPE html>
<html>
  <head>
    <script src="https://scheduler.distributed.computer/dcp-client/dcp-client.js"></script>
    <script>
      // The rest of our code will go here!
    </script>
  </head>
  <body>
    <p>Input string: <input type="text" id="input-string" value="yelling" /></p>
    <input type="button" id="deploy" value="Deploy" onclick="deploy()" />
    <p>Output: <span id="output"></span></p>
  </body>
</html>

Input data

In this example, the input set is an array of characters, taken from the input string "yelling!".

/* INPUT SET */
function generateInputSet(string) {
  return Array.from(string);
}

Work function

The work function is what each worker runs. In this case, each worker takes one input character, and turn it to upper case.

/* WORK FUNCTION */
function workFunction(datum) {
  progress();
  return datum.toUpperCase();
}

Compute for

Now set up the DCP job. The function deploy() launches the job using the compute.for() statement. DCP sends each value from the inputSet to a sandbox. The work function capitalizes that input.

async function deploy() {
  // Some application-specific, HTML set up.  Not super important to DCP
  const inputString = document.getElementById('input-string').value;
  const inputSet = generateInputSet(inputString);

  /* COMPUTE FOR */
  const { compute } = dcp;
  const job = compute.for(inputSet, workFunction);
  job.public.name = 'toUpperCompute - Web';
}

Compute group

If you don’t need a compute group, skip this section. If you do, enter this line with the key information to join that group.

// SKIP IF: you do not need a compute group
job.computeGroups = [{ joinKey: 'Your Key', joinSecret: 'Your Key' }];

Process results

Next, await the results. This is an array of capitalized characters. Put them back into one string and print them.

/* PROCESS RESULTS */
const resultSet = await job.exec();
const output = Array.from(resultSet).join('');
document.getElementById('output').appendChild(document.createTextNode(output));

Run it

Open your HTML file in a web browser, and press deploy.

Full code

Click to see full code
<!DOCTYPE html>
<html>
  <head>
    <script src="https://scheduler.distributed.computer/dcp-client/dcp-client.js"></script>
    <script>
      /* INPUT SET */
      function generateInputSet(string) {
        return Array.from(string);
      }

      /* WORK FUNCTION */
      function workFunction(datum) {
        progress();
        return datum.toUpperCase();
      }

      async function deploy() {
        const inputString = document.getElementById('input-string').value;
        const inputSet = generateInputSet(inputString);

        /* COMPUTE FOR */
        const { compute } = dcp;
        const job = compute.for(inputSet, workFunction);
        job.public.name = 'toUpperCompute - Web';

        // SKIP IF: you do not need a compute group
        job.computeGroups = [{ joinKey: 'sethacks', joinSecret: 'dcp' }];

        job.on('result', (ev) => {
          console.log('received result', ev);
        });

        /* PROCESS RESULTS */
        const resultSet = await job.exec();
        const output = Array.from(resultSet).join('');
        document
          .getElementById('output')
          .appendChild(document.createTextNode(output));
      }
    </script>
  </head>
  <body>
    <p>Input string: <input type="text" id="input-string" value="yelling" /></p>
    <input type="button" id="deploy" value="Deploy" onclick="deploy()" />
    <p>Output: <span id="output"></span></p>
  </body>
</html>