1
0
mirror of https://github.com/oceanprotocol/docs.git synced 2024-11-02 00:05:35 +01:00

add final screenshot, code style fixes

This commit is contained in:
Matthias Kretschmann 2019-01-30 11:45:59 +01:00
parent f07ded1e1f
commit c73f9bce0f
Signed by: m
GPG Key ID: 606EEEF3C479A91F
3 changed files with 29 additions and 21 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 172 KiB

View File

@ -5,7 +5,7 @@ description: Tutorial to get and use a data set in a basic React app.
## Requirements
This is a continuation of the [React App Setup](/tutorials/react-setup) and [React Publish Data-set](/tutorials/react-publish-data-set) tutorial, so make sure you have done all the steps described in there.
This is a continuation of the [React App Setup](/tutorials/react-setup/) and [React Publish Data-set](/tutorials/react-publish-data-set/) tutorial, so make sure you have done all the steps described in there.
Open `src/App.js` in your marketplace app from previous tutorials.
@ -14,7 +14,7 @@ Open `src/App.js` in your marketplace app from previous tutorials.
From previous tutorial we added asset publishing so we can now search for it so we can consume it later. Just after `submitAsset()` function we can add new function that will handle search:
```js
async retrieveAssets(){
async retrieveAssets() {
this.dbAssets = await this.ocean.searchAssetsByText("Office Humidity")
console.log(this.dbAssets)
}
@ -23,7 +23,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>`:
```jsx
<button onClick={()=>this.retrieveAssets()}>Retrieve assets</button>
<button onClick={() => this.retrieveAssets()}>Retrieve assets</button>
```
## Consume Asset
@ -31,7 +31,7 @@ The last thing we need is a button to start our search inside the render functio
The retrieved assets can now be consumed so in this tutorial we consume the first one. The following code goes after `async retrieveAssets()` function.
```js
async consumeAsset(){
async consumeAsset() {
// get all accounts
const accounts = await this.ocean.getAccounts()
// get first asset
@ -58,9 +58,13 @@ async consumeAsset(){
We still need button in render function just after `<button onClick={()=>this.retrieveAssets()}>Retrieve assets</button>` to start consumption:
```jsx
<button onClick={()=>this.consumeAsset()}>Consume asset</button>
<button onClick={() => this.consumeAsset()}>Consume asset</button>
```
With all these buttons in place, you should see this:
![React App 05](images/react-app-05.png)
## Final Result
That's it. If you have no errors in your `console.log` and your asset files listed you have working marketplace.
@ -133,12 +137,12 @@ class App extends Component {
alert('Asset successfully submited: ', JSON.stringify(ddo))
}
async retrieveAssets(){
this.dbAssets = await this.ocean.searchAssetsByText("Office Humidity")
async retrieveAssets() {
this.dbAssets = await this.ocean.searchAssetsByText('Office Humidity')
console.log(this.dbAssets)
}
async consumeAsset(){
async consumeAsset() {
// get all accounts
const accounts = await this.ocean.getAccounts()
// get first asset
@ -149,7 +153,8 @@ class App extends Component {
const serviceAgreementSignatureResult = await this.ocean.signServiceAgreement(
consumeAsset.id,
service.serviceDefinitionId,
accounts[0])
accounts[0]
)
// run it
await this.ocean.initializeServiceAgreement(
consumeAsset.id,
@ -157,8 +162,11 @@ class App extends Component {
serviceAgreementSignatureResult.serviceAgreementId,
serviceAgreementSignatureResult.serviceAgreementSignature,
// callback to handle the files we get
(files) => { console.log('Asset files', files) },
accounts[0])
files => {
console.log('Asset files', files)
},
accounts[0]
)
}
render() {

View File

@ -5,9 +5,9 @@ description: Tutorial to add dataset publishing capabilities to a basic React ap
## 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.
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.
Open `src/App.js` in your marketplace app from the [React App Setup](/tutorials/react-setup/) tutorial.
## Define Asset