Publish a Algorithm

Tutorial to add Algorithm dataset publishing capabilities to a basic React app.

Requirements

This is a continuation of the React App Setup tutorial, so make sure you have done all the steps described in there.

  1. React App Setup

Open src/Compute.js from your marketplace/ folder.

Define Asset

First, let’s add the asset that we want to publish.

To do that, we need to define the Algorithm asset based on the OEP-08 metadata structure. An algorithm asset can have multiple files attached to it and each file’s url value will be encrypted during the publish process.

Let’s create a new file src/asset-compute.js and fill it with:

/**
 * https://github.com/oceanprotocol/react-tutorial/blob/107d1fa7d0c583cc8042339f1f5090ff9ee0920b/src/asset-compute.js
 */
export const assetAlgo = {
  main: {
    name: 'My great algo',
    dateCreated: '2012-02-01T10:55:11Z',
    author: 'Alex',
    type: 'algorithm',
    algorithm: {
      format: 'docker-image',
      version: '0.1',
      container: {
        entrypoint: 'node $ALGO',
        image: 'node',
        tag: '10'
      }
    },
    license: 'CC0: Public Domain',
    price: '0',
    files: [
      {
        index: 0,
        contentType: 'application/text',
        contentLength: '12057507',
        compression: 'zip',
        encoding: 'UTF-8',
        url:
          'https://raw.githubusercontent.com/oceanprotocol/test-algorithm/master/javascript/algo.js'
      }
    ]
  },
  additionalInformation: {
    description: 'My super algo'
  }
}

** Notice the “ALGO” macro in the entrypoint attribute, this is replaced with the downloaded executable algorithm inside the pod

Then import this asset definition at the top of src/Compute.js:

/**
 * https://github.com/oceanprotocol/react-tutorial/blob/107d1fa7d0c583cc8042339f1f5090ff9ee0920b/src/Compute.js
 */
import { assetAlgo, rawAlgoMeta } from './asset-compute'

Handle Asset Publishing

Now that we have an asset to submit, we need a function to handle it. Just before render() { let’s add this publishalgo function:

/**
 * https://github.com/oceanprotocol/react-tutorial/blob/107d1fa7d0c583cc8042339f1f5090ff9ee0920b/src/Compute.js
 */
  async function publishalgo() {
    try {
      const accounts = await ocean.accounts.list()
      console.log('Publishing algo.')

      const ddoAlgorithmNew = await ocean.assets.create(assetAlgo, accounts[0])
      console.log(ddoAlgorithmNew)
      console.log('Algo asset successfully submitted.')
      // keep track of this registered asset for consumption later on
      setDdoAlgorithmId(ddoAlgorithmNew.id)
      alert('Algorithm successfully submitted.')
    } catch (error) {
      console.error(error.message)
    }
  }

The last thing we need is a button to start our registration inside the render() function:

/**
 * https://github.com/oceanprotocol/react-tutorial/blob/107d1fa7d0c583cc8042339f1f5090ff9ee0920b/src/Compute.js
 */
        <button onClick={publishalgo}>Publish algorithm</button>

Move on to Compute using a published algorithm on a Data Set.