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:
commit
843b7fe4fc
BIN
content/tutorials/images/react-app-01.png
Normal file
BIN
content/tutorials/images/react-app-01.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 456 KiB |
BIN
content/tutorials/images/react-app-02.png
Normal file
BIN
content/tutorials/images/react-app-02.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 399 KiB |
BIN
content/tutorials/images/react-app-03.png
Normal file
BIN
content/tutorials/images/react-app-03.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 420 KiB |
BIN
content/tutorials/images/react-app-04.png
Normal file
BIN
content/tutorials/images/react-app-04.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 553 KiB |
@ -5,15 +5,18 @@ 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 = {
|
|
||||||
|
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:
|
||||||
|
|
||||||
|
```js
|
||||||
|
const asset = {
|
||||||
base: {
|
base: {
|
||||||
name: 'Office Humidity',
|
name: 'Office Humidity',
|
||||||
description:
|
description:
|
||||||
@ -47,38 +50,42 @@ This is a continuation of the [React App Setup](/tutorials/react-setup) tutorial
|
|||||||
additionalInformation: {
|
additionalInformation: {
|
||||||
updateFrequency: 'yearly'
|
updateFrequency: 'yearly'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
3. Now that we have an asset to submit, we need function to handle it. Just before `render() {` let's add:
|
## Handle Asset Publishing
|
||||||
|
|
||||||
```javascript
|
Now that we have an asset to submit, we need a function to handle it. Just before `render() {` let's add this function:
|
||||||
async submitAsset(){
|
|
||||||
|
```js
|
||||||
|
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))
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
4. The last thing we need is a button to start our registration inside the render function just after `<h1>Marketplace app</h1>`:
|
The last thing we need is a button to start our registration inside the render function just after `<h1>Marketplace app</h1>`:
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
<button onClick={() => this.submitAsset()}>Register asset</button>
|
<button onClick={() => this.submitAsset()}>Register asset</button>
|
||||||
```
|
```
|
||||||
|
|
||||||
## Finished
|
## 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
|
||||||
```
|
```
|
||||||
|
@ -1,55 +1,81 @@
|
|||||||
---
|
---
|
||||||
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 {
|
|
||||||
|
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:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cd marketplace/
|
||||||
|
npm install @oceanprotocol/squid web3
|
||||||
|
```
|
||||||
|
|
||||||
|
At this point you can already run `npm start` which starts the app in your browser at [localhost:3000](http://localhost:3000):
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
|
## Add Markup & Web3
|
||||||
|
|
||||||
|
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() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<div className="App">
|
<div className="App App-header">
|
||||||
<h1>Marketplace app</h1>
|
<h1>Marketplace app</h1>
|
||||||
</div>
|
</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):
|
export default App
|
||||||
|
```
|
||||||
|
|
||||||
```javascript
|
Below the `import './App.css'` line, let's import the packages we installed, set up web3 and unlock MetaMask accounts (if locked):
|
||||||
import { Ocean } from '@oceanprotocol/squid'
|
|
||||||
import * as Web3 from '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.
|
```js
|
||||||
|
import { Ocean } from '@oceanprotocol/squid'
|
||||||
|
import * as Web3 from 'web3'
|
||||||
|
|
||||||
```javascript
|
const web3 = new Web3(window.web3.currentProvider)
|
||||||
async componentDidMount() {
|
window.ethereum.enable()
|
||||||
|
```
|
||||||
|
|
||||||
|
After those steps you should see this, and MetaMask should have asked you to allow access to your account:
|
||||||
|
|
||||||
|

|
||||||
|

|
||||||
|
|
||||||
|
## 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({
|
this.ocean = await new Ocean.getInstance({
|
||||||
web3Provider: web3,
|
web3Provider: web3,
|
||||||
nodeUri: "http://localhost:8545",
|
nodeUri: "http://localhost:8545",
|
||||||
@ -62,22 +88,26 @@ This tutorial shows how you can build a basic [React](https://reactjs.org/) app
|
|||||||
address: "0x068ed00cf0441e4829d9784fcbe7b9e26d4bd8d0",
|
address: "0x068ed00cf0441e4829d9784fcbe7b9e26d4bd8d0",
|
||||||
})
|
})
|
||||||
console.log("Finished loading contracts!")
|
console.log("Finished loading contracts!")
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
## Finished
|
## Final Result
|
||||||
|
|
||||||
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.
|
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/).
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
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/).
|
||||||
|
Loading…
x
Reference in New Issue
Block a user