clarify consumption process

content/tutorials/react-get-use-data-set.md

@@ -21,7 +21,7 @@ async retrieveAssets() {
 }
 ```
 
-The last thing we need is a button to start our search inside the render function just after `<button onClick={() => this.submitAsset()}>Register asset</button>`:
+Now we need a button to start our search inside the render function just after `<button onClick={() => this.submitAsset()}>Register asset</button>`:
 
 ```jsx
 // src/App.js
@@ -30,7 +30,9 @@ The last thing we need is a button to start our search inside the render functio
 
 ## Consume Assets
 
-The retrieved assets can now be consumed so in this tutorial we consume the first one. The following code goes after the `async retrieveAssets()` function.
+Consuming means downloading one or multiple files attached to an asset. During that process the initial `url` value we added during the publish process for each file will be decrpyted and the file can be downloaded.
+
+With the following code we start the consume process with the first search result, then go on to download its first attached file. Put it after the `retrieveAssets()` function:
 
 ```js
 // src/App.js
@@ -74,7 +76,7 @@ Tip: Before clicking the `Retrieve assets` button, it might help to reload the p
 
 Go ahead and click the `Retrieve assets` button, and then the `Consume asset` button. Approve all the MetaMask dialog boxes.
 
-If you have no errors in your `console.log` and can see your asset files listed, you have a working marketplace.
+Have a look into `console.log` to see the various steps of the search and consume process. If you have no errors in your `console.log` and can see your asset files listed, you have a working marketplace.
 
 ## Final Result
 
@@ -152,6 +154,7 @@ class App extends Component {
       <div className="App App-header">
         <h1>Marketplace app</h1>
         <button onClick={() => this.submitAsset()}>Register asset</button>
+        <hr />
         <button onClick={() => this.retrieveAssets()}>Retrieve assets</button>
         <button onClick={() => this.consumeAsset()}>Consume asset</button>
       </div>

content/tutorials/react-publish-data-set.md

@@ -13,7 +13,9 @@ Open `src/App.js` in your marketplace app from the [React App Setup](/tutorials/
 
 First, let's add the [asset](/concepts/terminology/#asset-or-data-asset) that we want to publish.
 
-To do that, we need to define the asset based on the [OEP-08](https://github.com/oceanprotocol/OEPs/tree/master/8) metadata structure. Let's create a new file `src/asset.js` and fill it with:
+To do that, we need to define the asset based on the [OEP-08](https://github.com/oceanprotocol/OEPs/tree/master/8) metadata structure. An asset can have multiple `files` attached to it and each file's `url` value will be encrypted during the publish process. To download that file later on, this value will be decrypted during the consume process.
+
+Let's create a new file `src/asset.js` and fill it with:
 
 ```js
 // src/asset.js
@@ -89,6 +91,12 @@ const asset = {
 export default asset
 ```
 
+Then import this asset definition at the top of `src/App.js`:
+
+```js
+import asset from './asset'
+```
+
 ## 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 function:
@@ -117,7 +125,7 @@ Tip: Before clicking the `Register asset` button, it might help to reload the pa
 
 When you click on the `Register asset` button, you should get four separate dialog boxes from MetaMask, in a series, i.e. the second one only appears after you accept/approve the first one, and so on.
 
-If you have no errors in your `console.log`, then you have successfully registered an asset.
+Have a look into `console.log` to see the various steps of the register process. If you have no errors in your `console.log`, then you have successfully registered an asset.
 
 ## Final Result
 

content/tutorials/react/publish-data-set.md

@@ -0,0 +1,180 @@
+---
+title: Publish a Data Set
+description: Tutorial to add dataset publishing capabilities to a basic React app.
+---
+
+## Requirements
+
+This is a continuation of the [React App Setup](/tutorials/react-setup/) tutorial, so make sure you have done all the steps described in there.
+
+Open `src/App.js` in your marketplace app from the [React App Setup](/tutorials/react-setup/) tutorial.
+
+## Define Asset
+
+First, let's add the [asset](/concepts/terminology/#asset-or-data-asset) that we want to publish.
+
+To do that, we need to define the asset based on the [OEP-08](https://github.com/oceanprotocol/OEPs/tree/master/8) metadata structure. Let's create a new file `src/asset.js` and fill it with:
+
+```js
+// src/asset.js
+const asset = {
+  base: {
+    name: '10 Monkey Species Small',
+    dateCreated: '2012-02-01T10:55:11Z',
+    author: 'Mario',
+    license: 'CC0: Public Domain',
+    contentType: 'jpg/txt',
+    price: 10,
+    files: [
+      {
+        index: 0,
+        contentType: 'application/zip',
+        checksum: '2bf9d229d110d1976cdf85e9f3256c7f',
+        checksumType: 'MD5',
+        contentLength: 12057507,
+        compression: 'zip',
+        encoding: 'UTF-8',
+        url:
+          'https://s3.amazonaws.com/datacommons-seeding-us-east/10_Monkey_Species_Small/assets/training.zip'
+      },
+      {
+        index: 1,
+        contentType: 'text/txt',
+        checksum: '354d19c0733c47ef3a6cce5b633116b0',
+        checksumType: 'MD5',
+        contentLength: 928,
+        url:
+          'https://s3.amazonaws.com/datacommons-seeding-us-east/10_Monkey_Species_Small/assets/monkey_labels.txt',
+        resourceId: 'test'
+      },
+      {
+        index: 2
+      }
+    ],
+    checksum: '',
+    categories: ['image'],
+    tags: ['image data', 'classification', 'animals'],
+    type: 'dataset',
+    description: 'EXAMPLE ONLY ',
+    copyrightHolder: 'Unknown',
+    workExample: 'image path, id, label',
+    links: [
+      {
+        name: 'example model',
+        url:
+          'https://drive.google.com/open?id=1uuz50RGiAW8YxRcWeQVgQglZpyAebgSM'
+      },
+      {
+        name: 'example code',
+        type: 'example code',
+        url: 'https://github.com/slothkong/CNN_classification_10_monkey_species'
+      },
+      {
+        url:
+          'https://s3.amazonaws.com/datacommons-seeding-us-east/10_Monkey_Species_Small/links/discovery/n5151.jpg',
+        name: 'n5151.jpg',
+        type: 'discovery'
+      },
+      {
+        url:
+          'https://s3.amazonaws.com/datacommons-seeding-us-east/10_Monkey_Species_Small/links/sample/sample.zip',
+        name: 'sample.zip',
+        type: 'sample'
+      }
+    ],
+    inLanguage: 'en'
+  }
+}
+
+export default asset
+```
+
+Then import this asset from the top of `src/App.js`:
+
+```js
+import asset from './asset'
+```
+
+## 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 function:
+
+```js
+// src/App.js
+async submitAsset() {
+    const accounts = await this.ocean.accounts.list()
+    const ddo = await this.ocean.assets.create(asset, accounts[0])
+    console.log('Asset successfully submitted.')
+    console.log(ddo)
+    alert(
+      'Asset successfully submitted. Look into your console to see the response DDO object.'
+    )
+  }
+```
+
+The last thing we need is a button to start our registration inside the render function just after `<h1>Marketplace app</h1>`:
+
+```jsx
+// src/App.js
+<button onClick={() => this.submitAsset()}>Register asset</button>
+```
+
+Tip: Before clicking the `Register asset` button, it might help to reload the page.
+
+When you click on the `Register asset` button, you should get four separate dialog boxes from MetaMask, in a series, i.e. the second one only appears after you accept/approve the first one, and so on.
+
+If you have no errors in your `console.log`, then you have successfully registered an asset.
+
+## Final Result
+
+Here is the full source of `src/App.js` that you should have if you followed this tutorial:
+
+```jsx
+// src/App.js
+import React, { Component } from 'react'
+import './App.css'
+import { Ocean } from '@oceanprotocol/squid'
+import * as Web3 from 'web3'
+import asset from './asset'
+
+const web3 = new Web3(window.web3.currentProvider)
+window.ethereum.enable()
+
+class App extends Component {
+  async componentDidMount() {
+    this.ocean = await new Ocean.getInstance({
+      web3Provider: web3,
+      nodeUri: 'http://localhost:8545',
+      aquariusUri: 'http://localhost:5000',
+      brizoUri: 'http://localhost:8030',
+      brizoAddress: '0x00bd138abd70e2f00903268f3db08f2d25677c9e',
+      parityUri: 'http://localhost:8545',
+      secretStoreUri: 'http://localhost:12001'
+    })
+    console.log('Finished loading contracts.')
+  }
+
+  async submitAsset() {
+    const accounts = await this.ocean.accounts.list()
+    const ddo = await this.ocean.assets.create(asset, accounts[0])
+    console.log('Asset successfully submitted.')
+    console.log(ddo)
+    alert(
+      'Asset successfully submitted. Look into your console to see the response DDO object.'
+    )
+  }
+
+  render() {
+    return (
+      <div className="App App-header">
+        <h1>Marketplace app</h1>
+        <button onClick={() => this.submitAsset()}>Register asset</button>
+      </div>
+    )
+  }
+}
+
+export default App
+```
+
+Move on to [Get & Use a Data Set](/tutorials/react-get-use-data-set/).