1
0
mirror of https://github.com/oceanprotocol/docs.git synced 2024-11-26 19:49:26 +01:00
This reverts commit 797009a58a.
This commit is contained in:
trentmc 2020-11-11 10:30:35 +01:00
parent 797009a58a
commit fdfaa9b7ca
12 changed files with 566 additions and 8 deletions

View 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

View File

@ -3,12 +3,11 @@ title: Overview of Tutorials
description: description:
--- ---
These tutorials go beyond the Quickstarts to cover: These tutorials cover:
- Using Web3 wallets with Ocean - Using Web3 wallets with Ocean
- Getting ETH and OCEAN on Ethereum mainnet, and Rinkeby testnet - Getting ETH and OCEAN on Ethereum mainnet, and Rinkeby testnet
- Set up a marketplace - Storage setup - Azure, AWS or local
- Run a compute-to-data environment - Building a React app with Ocean. This is a great way to understand Ocean end-to-end.
- Storage setup - Azure, AWS or local

View File

@ -14,10 +14,9 @@ In Ocean, marketplaces and publishers are different roles. A common setup is for
## Develop a First Cut of the App ## Develop a First Cut of the App
Here are some approaches: Here are some approaches:
-Fork [Ocean Market](/references/market/) code
- 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 from [Ocean React hooks](/references/react/). -Build up from [ocean.js](/references/ocean.js/) or [ocean.py](/references/ocean.py/) drivers
- Build up from [ocean.js](/references/ocean.js/) or [ocean.py](/references/ocean.py/) drivers
## Prepare Some Initial Data Assets ## Prepare Some Initial Data Assets

View 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).**

View 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).**

View 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.

View 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:
![React app with all actions in place](images/react-app-06.png)
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:
[![Edit react-tutorial](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/oceanprotocol/react-tutorial/tree/master/?fontsize=14)

View 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/).**

View 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/).**

View 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:
![React app with publish button](images/react-app-04.png)
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.
![Successful asset publishing](images/react-app-05.png)
## 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/).**

View 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:
[![Edit react-tutorial](https://codesandbox.io/static/img/play-codesandbox.svg)](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:
![Initial React App](images/react-app-01.png)
## 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:
![MetaMask confirmation](images/react-app-02.png)
> 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/).
![Initial React App with Ocean initiated](images/react-app-03.png)
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/).**

View File

@ -19,6 +19,25 @@
- title: Set Up a Marketplace - title: Set Up a Marketplace
link: /tutorials/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 - group: Compute-to-Data
items: items:
- title: Run a Compute-to-Data Environment - title: Run a Compute-to-Data Environment