mirror of
https://github.com/oceanprotocol/docs.git
synced 2024-11-26 19:49:26 +01:00
Minor fixes in the React App Tutorial
This commit is contained in:
parent
fb86e854aa
commit
2192a49827
@ -3,13 +3,11 @@ title: Get & Use a Data Set
|
|||||||
description: Tutorial to get and use a data set in a basic React app.
|
description: Tutorial to get and use a data set in a basic React app.
|
||||||
---
|
---
|
||||||
|
|
||||||
**NOTICE: This section of the React App Tutorial is not currently working because it hasn't been updated to work with the latest squid-js. There is [an open issue to update it](https://github.com/oceanprotocol/docs/issues/181).**
|
|
||||||
|
|
||||||
## Requirements
|
## 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 Tutorial. Make sure you already did the [React App Setup](/tutorials/react-setup/) and the [Publish a Data Set](/tutorials/react-publish-data-set/) steps.
|
||||||
|
|
||||||
Open `src/App.js` in your marketplace app from previous tutorials.
|
Open `src/App.js` in your marketplace app.
|
||||||
|
|
||||||
## Retrieve Assets
|
## Retrieve Assets
|
||||||
|
|
||||||
@ -30,7 +28,7 @@ The last thing we need is a button to start our search inside the render functio
|
|||||||
|
|
||||||
## Consume Assets
|
## Consume Assets
|
||||||
|
|
||||||
The retrieved assets can now be consumed so in this tutorial we consume the first one. The following code goes after `async retrieveAssets()` function.
|
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.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
async consumeAsset() {
|
async consumeAsset() {
|
||||||
@ -57,7 +55,7 @@ async consumeAsset() {
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
We still need button in render function just after `<button onClick={()=>this.retrieveAssets()}>Retrieve assets</button>` to start consumption:
|
We still need a button to start consumption. In the render function, just after the `<button onClick={()=>this.retrieveAssets()}>Retrieve assets</button>` line, add:
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
<button onClick={() => this.consumeAsset()}>Consume asset</button>
|
<button onClick={() => this.consumeAsset()}>Consume asset</button>
|
||||||
@ -171,7 +169,7 @@ class App extends Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
async retrieveAssets() {
|
async retrieveAssets() {
|
||||||
this.dbAssets = await ocean.assets.search("10 Monkey Species Small")
|
this.dbAssets = await this.ocean.assets.search("10 Monkey Species Small")
|
||||||
console.log(this.dbAssets)
|
console.log(this.dbAssets)
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -183,13 +181,13 @@ class App extends Component {
|
|||||||
// get service we want to execute
|
// get service we want to execute
|
||||||
const service = consumeAsset.findServiceByType('Access')
|
const service = consumeAsset.findServiceByType('Access')
|
||||||
// order service agreement
|
// order service agreement
|
||||||
const agreement = await ocean.assets.order(
|
const agreement = await this.ocean.assets.order(
|
||||||
consumeAsset.id,
|
consumeAsset.id,
|
||||||
service.serviceDefinitionId,
|
service.serviceDefinitionId,
|
||||||
accounts[0]
|
accounts[0]
|
||||||
)
|
)
|
||||||
// consume it
|
// consume it
|
||||||
await ocean.assets.consume(
|
await this.ocean.assets.consume(
|
||||||
agreement,
|
agreement,
|
||||||
consumeAsset.id,
|
consumeAsset.id,
|
||||||
service.serviceDefinitionId,
|
service.serviceDefinitionId,
|
||||||
|
@ -216,3 +216,5 @@ class App extends Component {
|
|||||||
|
|
||||||
export default App
|
export default App
|
||||||
```
|
```
|
||||||
|
|
||||||
|
Move on to [Get & Use a Data Set](/tutorials/react-get-use-data-set/).
|
||||||
|
@ -9,6 +9,7 @@ description: This tutorial shows how you can build a basic [React](https://react
|
|||||||
- `npm` >= 5.2 is installed. You can check using `npm -v`
|
- `npm` >= 5.2 is installed. You can check using `npm -v`
|
||||||
- Git clone the [oceanprotocol/barge](https://github.com/oceanprotocol/barge) repository, then in that directory:
|
- Git clone the [oceanprotocol/barge](https://github.com/oceanprotocol/barge) repository, then in that directory:
|
||||||
- (Optional) If you want to use Azure Storage or Amazon S3 storage, then go through the tutorials to set those up: [Azure](/tutorials/azure-for-brizo/) or [Amazon](/tutorials/amazon-s3-for-brizo/). Note that if you're using Azure Storage, you must edit the `barge/brizo.env` file and set all `AZURE_`... values.
|
- (Optional) If you want to use Azure Storage or Amazon S3 storage, then go through the tutorials to set those up: [Azure](/tutorials/azure-for-brizo/) or [Amazon](/tutorials/amazon-s3-for-brizo/). Note that if you're using Azure Storage, you must edit the `barge/brizo.env` file and set all `AZURE_`... values.
|
||||||
|
- (Optional but recommended) Clean out all your old Docker stuff using `docker system prune --all --volumes`
|
||||||
- Use Barge to run a local Spree Testnet:
|
- Use Barge to run a local Spree Testnet:
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
@ -18,7 +19,7 @@ description: This tutorial shows how you can build a basic [React](https://react
|
|||||||
./start_ocean.sh --latest --no-pleuston --local-spree-node
|
./start_ocean.sh --latest --no-pleuston --local-spree-node
|
||||||
```
|
```
|
||||||
|
|
||||||
- [Get some Spree Ether](/tutorials/get-ether-and-ocean-tokens/#get-ether-for-a-local-spree-testnet) in a local account managed by MetaMask.
|
- Once your local Spree network is running, [get some Spree Ether](/tutorials/get-ether-and-ocean-tokens/#get-ether-for-a-local-spree-testnet) in a local account managed by MetaMask.
|
||||||
|
|
||||||
## New Create React App
|
## New Create React App
|
||||||
|
|
||||||
@ -77,11 +78,11 @@ After those steps you should see this, and MetaMask should have asked you to all
|
|||||||
|
|
||||||
Note: If you see an error like `inpage.js:1 MetaMask - RPC Error: Internal JSON-RPC error.` in your `console.log`, don't worry about it. It's a MetaMask thing.
|
Note: If you see an error like `inpage.js:1 MetaMask - RPC Error: Internal JSON-RPC error.` in your `console.log`, don't worry about it. It's a MetaMask thing.
|
||||||
|
|
||||||
## Create Ocean instance
|
## Create Ocean Instance
|
||||||
|
|
||||||
Now that we are successfully connected with Web3, we can set up our Ocean instance.
|
Now that we are successfully connected with Web3, we can set up 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.
|
At the beginning of your component (i.e. right after the `class App extends Component {` line), 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
|
```js
|
||||||
async componentDidMount() {
|
async componentDidMount() {
|
||||||
|
Loading…
Reference in New Issue
Block a user