1
0
mirror of https://github.com/oceanprotocol/docs.git synced 2024-11-26 19:49:26 +01:00

Merge pull request #95 from oceanprotocol/react-tutorial-fixes

fixes from #92
This commit is contained in:
Troy McConaghy 2018-12-07 12:17:58 +01:00 committed by GitHub
commit 843b7fe4fc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 156 additions and 111 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 456 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 399 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 420 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 553 KiB

View File

@ -5,80 +5,87 @@ description: Tutorial to add dataset publishing capabilities to a basic React ap
## Requirements ## Requirements
This is a continuation of the [React App Setup](/tutorials/react-setup) tutorial, so make sure you have all the steps running. 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.
## Adding Publishing Open `src/App.js` in your marketplace app from the [React App Setup](/tutorials/react-setup) tutorial.
1. Open `src/App.js` in your marketplace app from the [React App Setup](/tutorials/react-setup) tutorial. ## Define Asset
2. First let's add the asset that we want to publish. To do that, we need to add the following code after `window.ethereum.enable()` line.
```javascript First, let's add the asset that we want to publish.
const asset = {
base: {
name: 'Office Humidity',
description:
'Weather information of UK including temperature and humidity',
dateCreated: '2012-02-01T10:55:11+00:00',
author: 'Met Office',
size: '3.1bg',
license: 'Public Domain',
copyrightHolder: 'Met Office',
contentUrls: [
'https://testocnfiles.blob.core.windows.net/testfiles/testzkp.zip'
],
contentType: 'text/csv',
links: [
{
name: 'Dataset sample',
type: 'sample',
url:
'http://data.ceda.ac.uk/badc/ukcp09/data/gridded-land-obs/gridded-land-obs-daily/'
}
],
tags: 'weather, uk, 2011, temperature, humidity',
price: 5,
type: 'dataset'
},
curation: {
rating: 0,
numVotes: 0,
schema: 'Binary Voting'
},
additionalInformation: {
updateFrequency: 'yearly'
}
}
```
3. Now that we have an asset to submit, we need function to handle it. Just before `render() {` let's add: To do that, we need to add the following code after `window.ethereum.enable()` line, defining our asset based on the [OEP-08](https://github.com/oceanprotocol/OEPs/tree/master/8) metadata structure:
```javascript ```js
async submitAsset(){ const asset = {
const accounts = await this.ocean.getAccounts() base: {
const ddo = await this.ocean.registerAsset(asset, accounts[0]) name: 'Office Humidity',
alert("Asset successfully submited:", JSON.stringify(ddo)) description:
} 'Weather information of UK including temperature and humidity',
``` dateCreated: '2012-02-01T10:55:11+00:00',
author: 'Met Office',
size: '3.1bg',
license: 'Public Domain',
copyrightHolder: 'Met Office',
contentUrls: [
'https://testocnfiles.blob.core.windows.net/testfiles/testzkp.zip'
],
contentType: 'text/csv',
links: [
{
name: 'Dataset sample',
type: 'sample',
url:
'http://data.ceda.ac.uk/badc/ukcp09/data/gridded-land-obs/gridded-land-obs-daily/'
}
],
tags: 'weather, uk, 2011, temperature, humidity',
price: 5,
type: 'dataset'
},
curation: {
rating: 0,
numVotes: 0,
schema: 'Binary Voting'
},
additionalInformation: {
updateFrequency: 'yearly'
}
}
```
4. The last thing we need is a button to start our registration inside the render function just after `<h1>Marketplace app</h1>`: ## Handle Asset Publishing
```jsx Now that we have an asset to submit, we need a function to handle it. Just before `render() {` let's add this function:
<button onClick={() => this.submitAsset()}>Register asset</button>
```
## Finished ```js
async submitAsset() {
const accounts = await this.ocean.getAccounts()
const ddo = await this.ocean.registerAsset(asset, accounts[0])
alert('Asset successfully submited: ', JSON.stringify(ddo))
}
```
The last thing we need is a button to start our registration inside the render function just after `<h1>Marketplace app</h1>`:
```jsx
<button onClick={() => this.submitAsset()}>Register asset</button>
```
## Final Result
That's it. If you have no errors in your `console.log` and you receive an alert after you click `Register asset` then you have successfully registered an asset. That's it. If you have no errors in your `console.log` and you receive an alert after you click `Register asset` then you have successfully registered an asset.
Here is the full source of `src/App.js` that you should have if you followed this tutorial: Here is the full source of `src/App.js` that you should have if you followed this tutorial:
```javascript ```jsx
import React, { Component } from 'react' import React, { Component } from 'react'
import './App.css' import './App.css'
import { Ocean } from '@oceanprotocol/squid' import { Ocean } from '@oceanprotocol/squid'
import * as Web3 from 'web3' import * as Web3 from 'web3'
const web3 = new Web3(window.web3.currentProvider) const web3 = new Web3(window.web3.currentProvider)
window.ethereum.enable() window.ethereum.enable()
const asset = { const asset = {
base: { base: {
name: 'Office Humidity', name: 'Office Humidity',
@ -113,6 +120,7 @@ const asset = {
updateFrequency: 'yearly' updateFrequency: 'yearly'
} }
} }
class App extends Component { class App extends Component {
async componentDidMount() { async componentDidMount() {
this.ocean = await new Ocean.getInstance({ this.ocean = await new Ocean.getInstance({
@ -128,19 +136,22 @@ class App extends Component {
}) })
console.log('Finished loading contracts!') console.log('Finished loading contracts!')
} }
async submitAsset() { async submitAsset() {
const accounts = await this.ocean.getAccounts() const accounts = await this.ocean.getAccounts()
const ddo = await this.ocean.registerAsset(asset, accounts[0]) const ddo = await this.ocean.registerAsset(asset, accounts[0])
alert('Asset successfully submited:', JSON.stringify(ddo)) alert('Asset successfully submited: ', JSON.stringify(ddo))
} }
render() { render() {
return ( return (
<div className="App"> <div className="App App-header">
<h1>Marketplace app</h1> <h1>Marketplace app</h1>
<button onClick={() => this.submitAsset()}>Register asset</button> <button onClick={() => this.submitAsset()}>Register asset</button>
</div> </div>
) )
} }
} }
export default App export default App
``` ```

View File

@ -1,83 +1,113 @@
--- ---
title: React App Setup title: React App Setup
description: Tutorial to set up a basic React app that uses squid-js. description: This tutorial shows how you can build a basic [React](https://reactjs.org/) app with [Create React App](https://github.com/facebook/create-react-app) that uses the squid-js JavaScript package to publish a data set, get a data set, and more.
--- ---
This tutorial shows how you can build a basic [React](https://reactjs.org/) app with [Create React App](https://github.com/facebook/create-react-app) that uses the squid-js JavaScript package to publish a data set, get a data set, and more.
## Requirements ## Requirements
- `nodejs` >= 10 is installed. You can check using `node -v` - `Node.js` >= 10 is installed. You can check using `node -v`
- `npm` >= 5.2 is installed. You can check using `npm -v` - `npm` >= 5.2 is installed. You can check using `npm -v`
- Do [the tutorial to Set Up Azure Storage](/tutorials/azure-for-brizo/). - Do the tutorial to [Set Up Azure Storage](/tutorials/azure-for-brizo/).
- Use a browser with [MetaMask](https://metamask.io/) and some Ether in your account. See the tutorial about [getting Ether and Ocean Tokens for testnets](/tutorials/get-ether-and-ocean-tokens/).
- Git clone the [oceanprotocol/docker-images](https://github.com/oceanprotocol/docker-images) repository, then in that directory: - Git clone the [oceanprotocol/docker-images](https://github.com/oceanprotocol/docker-images) repository, then in that directory:
- Edit the `brizo.env` file and set all `AZURE_`... values. - Edit the `brizo.env` file and set all `AZURE_`... values.
- Run `./start_ocean.sh --no-pleuston --local-pond-node` in [oceanprotocol/docker-images](https://github.com/oceanprotocol/docker-images). This runs all services locally, including a local Parity Ethereum node. - Run `./start_ocean.sh --no-pleuston --local-kovan-node`. This runs several Ocean services locally, including a local Parity Ethereum node connected to the Kovan Testnet.
- Use a browser with [MetaMask](https://metamask.io/) and some Ether in your account. See [the tutorial about getting Ether and Ocean Tokens for testnets](/tutorials/get-ether-and-ocean-tokens/).
## Tutorial Steps ## New Create React App
1. Run `npx create-react-app marketplace` in you terminal. This will create a folder named `marketplace` with a boilerplate React app. First, kick start your new React app by creating a boilerplate with Create React App:
2. Move to your app directory with `cd marketplace` and run `npm install @oceanprotocol/squid web3`. This adds the Ocean Protocol JavaScript library and Web3 packages to the app.
3. At this point you can already run `npm start` which starts the app in your browser at [localhost:3000](http://localhost:3000).
4. To clear the React spinning icon, open `src/App.js` and modify the source to:
```javascript ```bash
import React, { Component } from 'react' npx create-react-app marketplace
import './App.css' ```
class App extends Component {
render() {
return (
<div className="App">
<h1>Marketplace app</h1>
</div>
)
}
}
export default App
```
5. Below the `import './App.css'` line, let's import the packages we installed, set up web3 and unlock MetaMask accounts (if locked): This will create a folder named `marketplace` with a boilerplate React app. Go into that new folder and add the Ocean Protocol JavaScript library and Web3 packages to the app's dependencies:
```javascript ```bash
import { Ocean } from '@oceanprotocol/squid' cd marketplace/
import * as Web3 from 'web3' npm install @oceanprotocol/squid web3
const web3 = new Web3(window.web3.currentProvider) ```
window.ethereum.enable()
```
6. After the line `class App extends Component {` add the following Ocean initialization with all configuration. All OceanProtocol operations can be executed from this Ocean instance. At this point you can already run `npm start` which starts the app in your browser at [localhost:3000](http://localhost:3000):
```javascript ![React App 01](images/react-app-01.png)
async componentDidMount() {
this.ocean = await new Ocean.getInstance({
web3Provider: web3,
nodeUri: "http://localhost:8545",
aquariusUri: "http://localhost:5000",
brizoUri: "http://localhost:8030",
parityUri: "http://localhost:8545",
secretStoreUri: "http://localhost:12001",
threshold: 0,
password: "secret",
address: "0x068ed00cf0441e4829d9784fcbe7b9e26d4bd8d0",
})
console.log("Finished loading contracts!")
}
```
## Finished ## Add Markup & Web3
That's it, if you have no errors in your `console.log` then you have successfully initialized an Ocean instance in you brand new React app and you are ready for the next steps in this tutorial. Let's make it ours, open `src/App.js` and replace the whole source with:
```jsx
import React, { Component } from 'react'
import './App.css'
class App extends Component {
render() {
return (
<div className="App App-header">
<h1>Marketplace app</h1>
</div>
)
}
}
export default App
```
Below the `import './App.css'` line, let's import the packages we installed, set up web3 and unlock MetaMask accounts (if locked):
```js
import { Ocean } from '@oceanprotocol/squid'
import * as Web3 from 'web3'
const web3 = new Web3(window.web3.currentProvider)
window.ethereum.enable()
```
After those steps you should see this, and MetaMask should have asked you to allow access to your account:
![React App 02](images/react-app-02.png)
![React App 03](images/react-app-03.png)
## Create Ocean instance
Now that we are successfully connected with Web3, we can setup our Ocean instance.
At the beginning of your component, create a new Ocean instance with all configuration within the `componentDidMount` lifecycle method. All Ocean Protocol operations can be executed from this Ocean instance.
```js
async componentDidMount() {
this.ocean = await new Ocean.getInstance({
web3Provider: web3,
nodeUri: "http://localhost:8545",
aquariusUri: "http://localhost:5000",
brizoUri: "http://localhost:8030",
parityUri: "http://localhost:8545",
secretStoreUri: "http://localhost:12001",
threshold: 0,
password: "secret",
address: "0x068ed00cf0441e4829d9784fcbe7b9e26d4bd8d0",
})
console.log("Finished loading contracts!")
}
```
## Final Result
That's it, if you have no errors in your `console.log` then you have successfully initialized an Ocean instance in your brand new React app and you are ready for the [next part of this tutorial](/tutorials/react-publish-data-set/).
![React App 04](images/react-app-04.png)
Here is the full source of `src/App.js` that you should have if you followed this tutorial: Here is the full source of `src/App.js` that you should have if you followed this tutorial:
```javascript ```jsx
import React, { Component } from 'react' import React, { Component } from 'react'
import './App.css' import './App.css'
import { Ocean } from '@oceanprotocol/squid' import { Ocean } from '@oceanprotocol/squid'
import * as Web3 from 'web3' import * as Web3 from 'web3'
const web3 = new Web3(window.web3.currentProvider) const web3 = new Web3(window.web3.currentProvider)
window.ethereum.enable() window.ethereum.enable()
class App extends Component { class App extends Component {
async componentDidMount() { async componentDidMount() {
this.ocean = await new Ocean.getInstance({ this.ocean = await new Ocean.getInstance({
@ -93,13 +123,17 @@ class App extends Component {
}) })
console.log('Finished loading contracts!') console.log('Finished loading contracts!')
} }
render() { render() {
return ( return (
<div className="App"> <div className="App App-header">
<h1>Marketplace app</h1> <h1>Marketplace app</h1>
</div> </div>
) )
} }
} }
export default App export default App
``` ```
Move on to [Publish a Data Set](/tutorials/react-publish-data-set/).