mirror of
https://github.com/oceanprotocol/docs.git
synced 2024-11-26 19:49:26 +01:00
Revert "Complete issue: update react for v3. https://github.com/oceanprotocol/multi-repo-issue/issues/16"
This reverts commit 797009a58a.
This commit is contained in:
trentmc
parent
797009a58a
commit
fdfaa9b7ca
26
content/tutorials/example-code.md
Normal file
26
content/tutorials/example-code.md
Normal file
@ -0,0 +1,26 @@
|
||||
---
|
||||
title: Example Code Using Squid
|
||||
description: Examples of code using the Squid libraries.
|
||||
---
|
||||
|
||||
## squid-py Examples
|
||||
|
||||
- [The squid-py tutorials in Jupyter notebooks](/tutorials/jupyter-notebooks/)
|
||||
- [The squid_py/examples/ directory of the squid-py repository](https://github.com/oceanprotocol/squid-py/tree/develop/examples)
|
||||
- [The squid-py tests](https://github.com/oceanprotocol/squid-py/tree/develop/tests)
|
||||
- [ocean-cli-py](https://github.com/bigchaindb-gmbh/ocean-cli-py) is an Ocean Protocol command-line interface built using squid-py
|
||||
|
||||
## squid-js Examples
|
||||
|
||||
- [The React App Tutorial](/tutorials/react-setup/)
|
||||
- [The Commons Marketplace source code](https://github.com/oceanprotocol/commons)
|
||||
- [The Pleuston source code](https://github.com/oceanprotocol/pleuston)
|
||||
- The squid-js tests:
|
||||
- [Unit tests](https://github.com/oceanprotocol/squid-js/tree/develop/test)
|
||||
- [Integration tests](https://github.com/oceanprotocol/squid-js/tree/develop/integration/ocean)
|
||||
|
||||
## squid-java Examples
|
||||
|
||||
- [The squid-java README.md file](https://github.com/oceanprotocol/squid-java/blob/develop/README.md)
|
||||
- [The squid-java tests](https://github.com/oceanprotocol/squid-java/tree/develop/src/test)
|
||||
- [ocean-cli](https://github.com/bigchaindb-gmbh/ocean-cli) is an Ocean Protocol command-line interface built using squid-java
|
||||
@ -3,12 +3,11 @@ title: Overview of Tutorials
|
||||
description:
|
||||
---
|
||||
|
||||
These tutorials go beyond the Quickstarts to cover:
|
||||
These tutorials cover:
|
||||
|
||||
- Using Web3 wallets with Ocean
|
||||
- Getting ETH and OCEAN on Ethereum mainnet, and Rinkeby testnet
|
||||
- Set up a marketplace
|
||||
- Run a compute-to-data environment
|
||||
- Storage setup - Azure, AWS or local
|
||||
- Storage setup - Azure, AWS or local
|
||||
- Building a React app with Ocean. This is a great way to understand Ocean end-to-end.
|
||||
|
||||
|
||||
|
||||
@ -14,10 +14,9 @@ In Ocean, marketplaces and publishers are different roles. A common setup is for
|
||||
## Develop a First Cut of the App
|
||||
|
||||
Here are some approaches:
|
||||
|
||||
- Fork [Ocean Market](/references/market/) code
|
||||
- Build from [Ocean React hooks](/references/react/).
|
||||
- Build up from [ocean.js](/references/ocean.js/) or [ocean.py](/references/ocean.py/) drivers
|
||||
-Fork [Ocean Market](/references/market/) code
|
||||
-Do the [React App Tutorial](/tutorials/react-setup/) then grow your app from there. It uses [Ocean React hooks](/references/react/).
|
||||
-Build up from [ocean.js](/references/ocean.js/) or [ocean.py](/references/ocean.py/) drivers
|
||||
|
||||
## Prepare Some Initial Data Assets
|
||||
|
||||
|
||||
48
content/tutorials/react-compute-published-algorithm.md
Normal file
48
content/tutorials/react-compute-published-algorithm.md
Normal file
@ -0,0 +1,48 @@
|
||||
---
|
||||
title: Compute using a published algorithm on a Data Set
|
||||
description: Compute using a published algorithm on a Data Set
|
||||
---
|
||||
|
||||
## 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.
|
||||
|
||||
1. [React App Setup](/tutorials/react-setup/)
|
||||
|
||||
Open `src/Compute.js` from your `marketplace/` folder.
|
||||
|
||||
## Define Compute Output
|
||||
|
||||
First, let's define some options for our upcoming job:
|
||||
|
||||
GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/107d1fa7d0c583cc8042339f1f5090ff9ee0920b/src/Compute.js jsx 163-182 GITHUB-EMBED
|
||||
|
||||
and use them
|
||||
|
||||
GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/107d1fa7d0c583cc8042339f1f5090ff9ee0920b/src/Compute.js jsx 61-70 GITHUB-EMBED
|
||||
|
||||
## Order the dataset
|
||||
|
||||
Next, we have to order the dataset that we are going to compute upon. We are going to use the ddoAssetId, which was set during publishing of the asset.
|
||||
|
||||
GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/107d1fa7d0c583cc8042339f1f5090ff9ee0920b/src/Compute.js jsx 73 GITHUB-EMBED
|
||||
|
||||
## Start the compute job
|
||||
|
||||
And finally, start the job:
|
||||
|
||||
GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/107d1fa7d0c583cc8042339f1f5090ff9ee0920b/src/Compute.js jsx 76-82 GITHUB-EMBED
|
||||
|
||||
## Final Result
|
||||
|
||||
Now that we have all the requirements, we need a function to handle it.
|
||||
|
||||
GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/107d1fa7d0c583cc8042339f1f5090ff9ee0920b/src/Compute.js jsx 58-89,92-94 GITHUB-EMBED
|
||||
|
||||
The last thing we need is a button to start our compute job:
|
||||
|
||||
GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/107d1fa7d0c583cc8042339f1f5090ff9ee0920b/src/Compute.js jsx 202-207 GITHUB-EMBED
|
||||
|
||||
\*\* Notice that the button will be disabled if there were no previous published Datasets and Algorithms.
|
||||
|
||||
**Move on to [Get Status of a Compute Job](react-compute-status).**
|
||||
64
content/tutorials/react-compute-raw.md
Normal file
64
content/tutorials/react-compute-raw.md
Normal file
@ -0,0 +1,64 @@
|
||||
---
|
||||
title: Compute using a raw algorithm on a Data Set
|
||||
description: Compute using a raw algorithm on a Data Set
|
||||
---
|
||||
|
||||
## 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.
|
||||
|
||||
1. [React App Setup](/tutorials/react-setup/)
|
||||
|
||||
Open `src/Compute.js` from your `marketplace/` folder.
|
||||
|
||||
## Define Raw Code
|
||||
|
||||
Sometime, you just need to quickly run an test algorithm. Instead of publishing it as an asset, you can use the code directly.
|
||||
|
||||
To do that, we are going to use a textbox for copy/paste and a button to show/hide it.
|
||||
|
||||
GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/107d1fa7d0c583cc8042339f1f5090ff9ee0920b/src/Compute.js jsx 184-195 GITHUB-EMBED
|
||||
|
||||
## Define Algorithm MetaData
|
||||
|
||||
We need to define all the requirments for the algorithm:
|
||||
|
||||
GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/107d1fa7d0c583cc8042339f1f5090ff9ee0920b/src/asset-compute.js jsx 35-44 GITHUB-EMBED
|
||||
|
||||
and them import it to our Compute.js:
|
||||
|
||||
GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/107d1fa7d0c583cc8042339f1f5090ff9ee0920b/src/Compute.js jsx 4 GITHUB-EMBED
|
||||
|
||||
## Define Compute Output
|
||||
|
||||
Let's define some options for our upcoming job:
|
||||
|
||||
GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/107d1fa7d0c583cc8042339f1f5090ff9ee0920b/src/Compute.js jsx 163-182 GITHUB-EMBED
|
||||
|
||||
and use them
|
||||
|
||||
GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/107d1fa7d0c583cc8042339f1f5090ff9ee0920b/src/Compute.js jsx 61-70 GITHUB-EMBED
|
||||
|
||||
## Order the dataset
|
||||
|
||||
Next, we have to order the dataset that we are going to compute upon. We are going to use the ddoAssetId, which was set during publishing of the asset.
|
||||
|
||||
GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/107d1fa7d0c583cc8042339f1f5090ff9ee0920b/src/Compute.js jsx 73 GITHUB-EMBED
|
||||
|
||||
## Start the compute job
|
||||
|
||||
We need a function to start the job:
|
||||
|
||||
GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/107d1fa7d0c583cc8042339f1f5090ff9ee0920b/src/Compute.js jsx 58-89 GITHUB-EMBED
|
||||
|
||||
Get the pasted code:
|
||||
|
||||
GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/107d1fa7d0c583cc8042339f1f5090ff9ee0920b/src/Compute.js jsx 96-100 GITHUB-EMBED
|
||||
|
||||
The last thing we need is a button inside the `render()` function:
|
||||
|
||||
GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/107d1fa7d0c583cc8042339f1f5090ff9ee0920b/src/Compute.js jsx 208-211 GITHUB-EMBED
|
||||
|
||||
\*\* Notice that the button will be disabled if there were no previous published Datasets.
|
||||
|
||||
**Move on to [Get Status of a Compute Job](react-compute-status).**
|
||||
32
content/tutorials/react-compute-status.md
Normal file
32
content/tutorials/react-compute-status.md
Normal file
@ -0,0 +1,32 @@
|
||||
---
|
||||
title: Get Status of a Compute Job
|
||||
description: Get Status of a Compute Job
|
||||
---
|
||||
|
||||
## Requirements
|
||||
|
||||
For this setup, we need a compute job that has been started from [Compute using a published algorithm on a Data Set](/tutorials/react-compute-published-algorithm/) or [Compute using a raw algorithm on a Data Set](/tutorials/react-compute-raw/)
|
||||
|
||||
## Create an Area to display the status
|
||||
|
||||
First, let's define an area to display status:
|
||||
|
||||
GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/107d1fa7d0c583cc8042339f1f5090ff9ee0920b/src/Compute.js jsx 213-226 GITHUB-EMBED
|
||||
|
||||
## Get Job Status
|
||||
|
||||
Since we have the agreementId and jobId, we can get status from a compute job:
|
||||
|
||||
GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/107d1fa7d0c583cc8042339f1f5090ff9ee0920b/src/Compute.js jsx 106 GITHUB-EMBED
|
||||
|
||||
## Final Result
|
||||
|
||||
Let's wrap that into a function:
|
||||
|
||||
GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/107d1fa7d0c583cc8042339f1f5090ff9ee0920b/src/Compute.js jsx 102-112 GITHUB-EMBED
|
||||
|
||||
and have a button for it:
|
||||
|
||||
GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/107d1fa7d0c583cc8042339f1f5090ff9ee0920b/src/Compute.js jsx 223 GITHUB-EMBED
|
||||
|
||||
\*\* Notice that the button will be disabled if jobId is missing.
|
||||
65
content/tutorials/react-get-use-data-set.md
Normal file
65
content/tutorials/react-get-use-data-set.md
Normal file
@ -0,0 +1,65 @@
|
||||
---
|
||||
title: Search & Consume a Data Set
|
||||
description: Tutorial to get and use a data set in a basic React app.
|
||||
---
|
||||
|
||||
## Requirements
|
||||
|
||||
This is a continuation of the React App Tutorial. Make sure you already did the previous steps:
|
||||
|
||||
1. [React App Setup](/tutorials/react-setup/)
|
||||
2. [Publish a Data Set](/tutorials/react-publish-data-set/)
|
||||
|
||||
Open `src/index.js` from your `marketplace/` folder.
|
||||
|
||||
## Search Assets
|
||||
|
||||
In the previous tutorial we added asset publishing. We can now search for published assets for consumption.
|
||||
|
||||
We will store the search results in the local component state so we have to set its initial state first:
|
||||
|
||||
GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/e639e9ed4432e8b72ca453d50ed7bdaa36f1efb4/src/index.js jsx 15-19 GITHUB-EMBED
|
||||
|
||||
Just after the `registerAsset()` function we add a new `searchAssets` function that will handle search:
|
||||
|
||||
GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/2765a7e6ae9a948d311d3949636cf832d2664900/src/index.js jsx 54-67 GITHUB-EMBED
|
||||
|
||||
Now we need a button to start our search inside the `render()` function, just after the _Register asset_ button:
|
||||
|
||||
GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/2765a7e6ae9a948d311d3949636cf832d2664900/src/index.js jsx 115 GITHUB-EMBED
|
||||
|
||||
## Consume Asset
|
||||
|
||||
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 `searchAssets()` function:
|
||||
|
||||
GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/107d1fa7d0c583cc8042339f1f5090ff9ee0920b/src/index.js jsx 73-95 GITHUB-EMBED
|
||||
|
||||
We still need a button to start consumption. In the render function, just after the _Search assets_ button, add:
|
||||
|
||||
GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/2765a7e6ae9a948d311d3949636cf832d2664900/src/index.js jsx 116-118 GITHUB-EMBED
|
||||
|
||||
With all these buttons in place, you should see this:
|
||||
|
||||
|
||||
|
||||
Go ahead and click the _Search assets_ button, and then the _Consume asset_ button. Approve all the MetaMask dialog boxes.
|
||||
|
||||
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
|
||||
|
||||
Here is the full source of `src/index.js` that you should have if you followed this tutorial:
|
||||
|
||||
GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/master/src/index.js jsx GITHUB-EMBED
|
||||
|
||||
## Git repository and CodeSandbox
|
||||
|
||||
All code snippets in this tutorial are sourced from the [oceanprotocol/react-tutorial](https://github.com/oceanprotocol/react-tutorial) GitHub repository:
|
||||
|
||||
<repo name="react-tutorial"></repo>
|
||||
|
||||
The final source of this tutorial is also available as a CodeSandbox:
|
||||
|
||||
[](https://codesandbox.io/s/github/oceanprotocol/react-tutorial/tree/master/?fontsize=14)
|
||||
40
content/tutorials/react-publish-algorithm.md
Normal file
40
content/tutorials/react-publish-algorithm.md
Normal file
@ -0,0 +1,40 @@
|
||||
---
|
||||
title: Publish a Algorithm
|
||||
description: Tutorial to add Algorithm 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.
|
||||
|
||||
1. [React App Setup](/tutorials/react-setup/)
|
||||
|
||||
Open `src/Compute.js` from your `marketplace/` folder.
|
||||
|
||||
## Define Asset
|
||||
|
||||
First, let's add the data asset that we want to publish.
|
||||
|
||||
To do that, we need to define the Algorithm asset based on the [OEP-08](https://github.com/oceanprotocol/OEPs/tree/master/8) metadata structure. An algorithm asset can have multiple `files` attached to it and each file's `url` value will be encrypted during the publish process.
|
||||
|
||||
Let's create a new file `src/asset-compute.js` and fill it with:
|
||||
|
||||
GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/107d1fa7d0c583cc8042339f1f5090ff9ee0920b/src/asset-compute.js jsx 1-33 GITHUB-EMBED
|
||||
|
||||
\*\* Notice the “ALGO” macro in the entrypoint attribute, this is replaced with the downloaded executable algorithm inside the pod
|
||||
|
||||
Then import this asset definition at the top of `src/Compute.js`:
|
||||
|
||||
GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/107d1fa7d0c583cc8042339f1f5090ff9ee0920b/src/Compute.js jsx 4 GITHUB-EMBED
|
||||
|
||||
## 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 `publishalgo` function:
|
||||
|
||||
GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/107d1fa7d0c583cc8042339f1f5090ff9ee0920b/src/Compute.js jsx 42-56 GITHUB-EMBED
|
||||
|
||||
The last thing we need is a button to start our registration inside the `render()` function:
|
||||
|
||||
GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/107d1fa7d0c583cc8042339f1f5090ff9ee0920b/src/Compute.js jsx 153 GITHUB-EMBED
|
||||
|
||||
**Move on to [Compute using a published algorithm on a Data Set](/tutorials/react-compute-published-algorithm/).**
|
||||
32
content/tutorials/react-publish-data-set-compute.md
Normal file
32
content/tutorials/react-publish-data-set-compute.md
Normal file
@ -0,0 +1,32 @@
|
||||
---
|
||||
title: Publish a Data Set with Compute features
|
||||
description: Tutorial to add a dataset with compute 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.
|
||||
|
||||
1. [React App Setup](/tutorials/react-setup/)
|
||||
|
||||
Open `src/Compute.js` from your `marketplace/` folder.
|
||||
|
||||
## Define Asset
|
||||
|
||||
We will use the same asset as in [Publish a Data Set](/tutorials/react-publish-data-set), but we are going to allow only compute features, without the ability to download the asset.
|
||||
|
||||
This is achiveable by adding a 'compute' service to the DDO:
|
||||
|
||||
GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/107d1fa7d0c583cc8042339f1f5090ff9ee0920b/src/Compute.js jsx 23-27 GITHUB-EMBED
|
||||
|
||||
## Handle Asset Publishing
|
||||
|
||||
Note that ocean.assets.create will define an 'access' service if the services list is missing. Since we are providing this attribute, our asset will have only a 'compute' service and no 'access' service.
|
||||
|
||||
GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/107d1fa7d0c583cc8042339f1f5090ff9ee0920b/src/Compute.js jsx 18-40 GITHUB-EMBED
|
||||
|
||||
The last thing we need is a button to start our registration inside the `render()` function:
|
||||
|
||||
GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/107d1fa7d0c583cc8042339f1f5090ff9ee0920b/src/Compute.js jsx 143 GITHUB-EMBED
|
||||
|
||||
**Move on to [Publish a Algorithm](/tutorials/react-publish-algorithm/).**
|
||||
56
content/tutorials/react-publish-data-set.md
Normal file
56
content/tutorials/react-publish-data-set.md
Normal file
@ -0,0 +1,56 @@
|
||||
---
|
||||
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.
|
||||
|
||||
1. [React App Setup](/tutorials/react-setup/)
|
||||
|
||||
Open `src/index.js` from your `marketplace/` folder.
|
||||
|
||||
## Define Asset
|
||||
|
||||
First, let's add the 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. 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:
|
||||
|
||||
GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/e639e9ed4432e8b72ca453d50ed7bdaa36f1efb4/src/asset.js js GITHUB-EMBED
|
||||
|
||||
Then import this asset definition at the top of `src/index.js`:
|
||||
|
||||
GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/e639e9ed4432e8b72ca453d50ed7bdaa36f1efb4/src/index.js jsx 5 GITHUB-EMBED
|
||||
|
||||
## 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 `registerAsset` function:
|
||||
|
||||
GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/e639e9ed4432e8b72ca453d50ed7bdaa36f1efb4/src/index.js jsx 15,16,18-20,41-55 GITHUB-EMBED
|
||||
|
||||
The last thing we need is a button to start our registration inside the `render()` function:
|
||||
|
||||
GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/e639e9ed4432e8b72ca453d50ed7bdaa36f1efb4/src/index.js jsx 114-116 GITHUB-EMBED
|
||||
|
||||
Note how we disable the button when Web3 is not available to reduce user confusion. Within the Ocean Protocol flow of registering, searching, and consuming, only searching is possible without Web3.
|
||||
|
||||
In your browser, you should now end up like this:
|
||||
|
||||
|
||||
|
||||
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.
|
||||
|
||||
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
|
||||
|
||||
Here is the full source of `src/index.js` that you should have if you followed this tutorial:
|
||||
|
||||
GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/e639e9ed4432e8b72ca453d50ed7bdaa36f1efb4/src/index.js jsx 1-5,6-16,18-28,35-52,96-116,122-127 GITHUB-EMBED
|
||||
|
||||
**Move on to [Get & Use a Data Set](/tutorials/react-get-use-data-set/).**
|
||||
178
content/tutorials/react-setup.md
Normal file
178
content/tutorials/react-setup.md
Normal file
@ -0,0 +1,178 @@
|
||||
---
|
||||
title: React App Setup
|
||||
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 Ocean [JavaScript driver](https://github.com/oceanprotocol/ocean.js) to publish a data set, get a data set, and more. *WARNING this has not been updated yet for Ocean V3.*
|
||||
---
|
||||
|
||||
## Git repository and CodeSandbox
|
||||
|
||||
All code snippets in this tutorial are sourced from the [oceanprotocol/react-tutorial](https://github.com/oceanprotocol/react-tutorial) GitHub repository:
|
||||
|
||||
<repo name="react-tutorial"></repo>
|
||||
|
||||
The final source of this tutorial is also available as a CodeSandbox:
|
||||
|
||||
[](https://codesandbox.io/s/github/oceanprotocol/react-tutorial/tree/master/?fontsize=14)
|
||||
|
||||
## Requirements
|
||||
|
||||
- `Node.js` >= 10 is installed. You can check using `node -v`
|
||||
- `npm` >= 5.2 is installed. You can check using `npm -v`
|
||||
- A Web3 capable browser, like Firefox/Chrome with [MetaMask](https://metamask.io) installed, [connected to Rinkeby testnet](https://docs.oceanprotocol.com/tutorials/connect-to-networks/)
|
||||
- Some ETH from the Rinkeby Faucet. [Here](tutorials/get-ether-and-ocean-tokens/) are instructions.
|
||||
|
||||
## New Create React App
|
||||
|
||||
We are going to use Create React App to bootstrap our React app. You could use `npx create-react-app marketplace` but it creates more files than needed for the scope of this tutorial.
|
||||
|
||||
So let's go minimal and build up our app from scratch with this structure:
|
||||
|
||||
```text
|
||||
marketplace/
|
||||
├── package.json
|
||||
├── public/
|
||||
├──── index.html
|
||||
├── src/
|
||||
├──── index.js
|
||||
```
|
||||
|
||||
First, create a new project folder for your new app, e.g. `marketplace`. Within that, add a new file `package.json` with the following content:
|
||||
|
||||
GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/master/package.json json GITHUB-EMBED
|
||||
|
||||
Notice the `@oceanprotocol/ocean.js` dependency, which is the [Ocean Protocol JavaScript library](https://github.com/oceanprotocol/ocean.js). Save that file, and in your terminal install the dependencies we have just defined in `package.json`:
|
||||
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
Then create the HTML file used to render the React app into. For that, create a folder `public/` and in it a file `index.html` with the following content:
|
||||
|
||||
GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/master/public/index.html html GITHUB-EMBED
|
||||
|
||||
## Add Basic Markup
|
||||
|
||||
Create a new folder `src/` and within that a `index.js` file with the following content as our base, where we already import ocean.js and web3.js:
|
||||
|
||||
GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/e639e9ed4432e8b72ca453d50ed7bdaa36f1efb4/src/index.js jsx 1-4,6,14,100-110,122-127 GITHUB-EMBED
|
||||
|
||||
At this point you can start up the app and see the result in your browser:
|
||||
|
||||
```bash
|
||||
npm start
|
||||
```
|
||||
|
||||
Go to [localhost:3000](http://localhost:3000) to inspect your newly created app:
|
||||
|
||||
|
||||
|
||||
## Setup Web3
|
||||
|
||||
We already are importing web3.js but we still need to enable account access for the browsers supporting it, and make sure nothing breaks in browsers which are not Web3-capable.
|
||||
|
||||
To do that we add a simple check at top of `src/index.js` and then enable account access with:
|
||||
|
||||
GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/e639e9ed4432e8b72ca453d50ed7bdaa36f1efb4/src/index.js jsx 7-12 GITHUB-EMBED
|
||||
|
||||
And let's also output some warning for non-Web3 browsers within our `render()` function:
|
||||
|
||||
GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/e639e9ed4432e8b72ca453d50ed7bdaa36f1efb4/src/index.js jsx 112 GITHUB-EMBED
|
||||
|
||||
This should give you the following markup:
|
||||
|
||||
GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/e639e9ed4432e8b72ca453d50ed7bdaa36f1efb4/src/index.js jsx 1-4,6-14,100-112,122-127 GITHUB-EMBED
|
||||
|
||||
After those steps go to your browser. You should see MetaMask asking you to allow access to your account:
|
||||
|
||||
|
||||
|
||||
> Note: If you see an error like `inpage.js:1 MetaMask - RPC Error: Internal JSON-RPC error.` in your browser console, don't worry about it. It's a MetaMask thing and won't affect functionality.
|
||||
|
||||
## Create 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 required endpoint configurations within the `componentDidMount` lifecycle method. All Ocean Protocol operations can be executed from this Ocean instance.
|
||||
|
||||
GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/e639e9ed4432e8b72ca453d50ed7bdaa36f1efb4/src/index.js jsx 15-16,19-28,35-39 GITHUB-EMBED
|
||||
|
||||
This will initiate a connection to all Ocean components in Rinkeby, load the contracts, and finally store the Ocean object in the local component state for reuse.
|
||||
|
||||
We also set the `verbose` option of ocean.js so we better see what's going on.
|
||||
|
||||
## 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/).
|
||||
|
||||
|
||||
|
||||
Here is the full source of `src/index.js` that you should have if you followed this tutorial:
|
||||
|
||||
GITHUB-EMBED https://github.com/oceanprotocol/react-tutorial/blob/2765a7e6ae9a948d311d3949636cf832d2664900/src/index.js jsx 1-4,6-16,18-27,34-38,96-109,119-124 GITHUB-EMBED
|
||||
|
||||
**Move on to [Publish a Data Set](/tutorials/react-publish-data-set/).**
|
||||
|
||||
## Bonus: Connect against local network
|
||||
|
||||
Instead of remotely connecting to Rinkeby, you can connect to your own [local network](concepts/network-local). It uses Ethereum Ganache plus Ocean Barge.
|
||||
|
||||
```bash
|
||||
git clone https://github.com/oceanprotocol/barge.git
|
||||
cd barge/
|
||||
|
||||
./start_ocean.sh --no-commons
|
||||
```
|
||||
|
||||
Compiling and deploying the contracts in your local network may take a few minutes.
|
||||
|
||||
### Copy Contract Artifacts
|
||||
|
||||
At the end of the contract compiling and deploying you need to copy the resulting contract artifacts from the Docker container to your local `@oceanprotocol/keeper-contracts` dependency folder. The _keeper-contracts_ Docker container will output all artifacts in a hidden folder in your home folder so you can copy from there:
|
||||
|
||||
```bash
|
||||
cp ~/.ocean/keeper-contracts/artifacts/* ./node_modules/@oceanprotocol/keeper-contracts/artifacts/
|
||||
```
|
||||
|
||||
### Get ETH for the local network
|
||||
|
||||
You will also need some ETH for your local network. [This tutorial](/tutorials/get-ETH-and-OCEAN-tokens) describes how to get it into your MetaMask account.
|
||||
|
||||
You can execute this, replacing `<YOUR ADDRESS>` with your MetaMask account address:
|
||||
|
||||
```bash
|
||||
curl --data '{"address": "<YOUR ADDRESS>", "agent": "curl"}' -H "Content-Type: application/json" -X POST http://localhost:3001/faucet
|
||||
```
|
||||
|
||||
### Adjust App Config
|
||||
|
||||
Finally, move back to your marketplace React app and modify the Ocean instance config in `src/index.js` to use the local network's endpoints:
|
||||
|
||||
```jsx
|
||||
const ocean = await new Ocean.getInstance({
|
||||
web3Provider: web3,
|
||||
nodeUri: 'http://localhost:8545',
|
||||
aquariusUri: 'http://aquarius:5000',
|
||||
brizoUri: 'http://localhost:8030',
|
||||
brizoAddress: '0x00bd138abd70e2f00903268f3db08f2d25677c9e',
|
||||
secretStoreUri: 'http://localhost:12001',
|
||||
verbose: true
|
||||
})
|
||||
```
|
||||
|
||||
> If you are on macOS, you need to additionally tweak your `/etc/hosts` file so Brizo can connect to Aquarius within Docker. This is only required on macOS and is a [known limitation of Docker for Mac](https://docs.docker.com/docker-for-mac/networking/#known-limitations-use-cases-and-workarounds):
|
||||
>
|
||||
> ```bash
|
||||
> sudo vi /etc/hosts
|
||||
>
|
||||
> # add this line, and save
|
||||
> 127.0.0.1 aquarius
|
||||
> ```
|
||||
>
|
||||
> And then use `aquariusUri: 'http://aquarius:5000'` in your Ocean instance config.
|
||||
|
||||
Then start up the app as usual:
|
||||
|
||||
```bash
|
||||
npm start
|
||||
```
|
||||
|
||||
**Move on to [Publish a Data Set](/tutorials/react-publish-data-set/).**
|
||||
@ -19,6 +19,25 @@
|
||||
- title: Set Up a Marketplace
|
||||
link: /tutorials/marketplace/
|
||||
|
||||
- group: React App Tutorial
|
||||
items:
|
||||
- title: Setup
|
||||
link: /tutorials/react-setup/
|
||||
- title: Publish a Data Set
|
||||
link: /tutorials/react-publish-data-set/
|
||||
- title: Search & Consume a Data Set
|
||||
link: /tutorials/react-get-use-data-set/
|
||||
- title: Publish a Data Set with Compute features
|
||||
link: /tutorials/react-publish-data-set-compute/
|
||||
- title: Publish a Algorithm
|
||||
link: /tutorials/react-publish-algorithm/
|
||||
- title: Compute using a published algorithm on a Data Set
|
||||
link: /tutorials/react-compute-published-algorithm/
|
||||
- title: Compute using a raw algorithm on a Data Set
|
||||
link: /tutorials/react-compute-raw/
|
||||
- title: Get Status of a Compute Job
|
||||
link: /tutorials/react-compute-status/
|
||||
|
||||
- group: Compute-to-Data
|
||||
items:
|
||||
- title: Run a Compute-to-Data Environment
|
||||
|
||||
Loading…
Reference in New Issue
Block a user