diff --git a/content/tutorials/images/react-app-01.png b/content/tutorials/images/react-app-01.png new file mode 100644 index 00000000..af583ed5 Binary files /dev/null and b/content/tutorials/images/react-app-01.png differ diff --git a/content/tutorials/images/react-app-02.png b/content/tutorials/images/react-app-02.png new file mode 100644 index 00000000..7547b5a1 Binary files /dev/null and b/content/tutorials/images/react-app-02.png differ diff --git a/content/tutorials/images/react-app-03.png b/content/tutorials/images/react-app-03.png new file mode 100644 index 00000000..255a0af0 Binary files /dev/null and b/content/tutorials/images/react-app-03.png differ diff --git a/content/tutorials/images/react-app-04.png b/content/tutorials/images/react-app-04.png new file mode 100644 index 00000000..869c9ac2 Binary files /dev/null and b/content/tutorials/images/react-app-04.png differ diff --git a/content/tutorials/react-publish-data-set.md b/content/tutorials/react-publish-data-set.md index 44e1b4dd..850943b1 100644 --- a/content/tutorials/react-publish-data-set.md +++ b/content/tutorials/react-publish-data-set.md @@ -5,80 +5,87 @@ description: Tutorial to add dataset publishing capabilities to a basic React ap ## 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. -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. +## Define Asset - ```javascript - 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' - } - } - ``` +First, let's add the asset that we want to publish. -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 - async submitAsset(){ - const accounts = await this.ocean.getAccounts() - const ddo = await this.ocean.registerAsset(asset, accounts[0]) - alert("Asset successfully submited:", JSON.stringify(ddo)) - } - ``` +```js +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' + } +} +``` -4. The last thing we need is a button to start our registration inside the render function just after `

Marketplace app

`: +## 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: -## 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 `

Marketplace app

`: + +```jsx + +``` + +## 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. 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 './App.css' import { Ocean } from '@oceanprotocol/squid' import * as Web3 from 'web3' + const web3 = new Web3(window.web3.currentProvider) window.ethereum.enable() + const asset = { base: { name: 'Office Humidity', @@ -113,6 +120,7 @@ const asset = { updateFrequency: 'yearly' } } + class App extends Component { async componentDidMount() { this.ocean = await new Ocean.getInstance({ @@ -128,19 +136,22 @@ class App extends Component { }) console.log('Finished loading contracts!') } + async submitAsset() { const accounts = await this.ocean.getAccounts() const ddo = await this.ocean.registerAsset(asset, accounts[0]) - alert('Asset successfully submited:', JSON.stringify(ddo)) + alert('Asset successfully submited: ', JSON.stringify(ddo)) } + render() { return ( -
+

Marketplace app

) } } + export default App ``` diff --git a/content/tutorials/react-setup.md b/content/tutorials/react-setup.md index 5946cef0..c7e9def3 100644 --- a/content/tutorials/react-setup.md +++ b/content/tutorials/react-setup.md @@ -1,83 +1,113 @@ --- 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 -- `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` -- 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: - 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. -- 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/). + - 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. -## 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. -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: +First, kick start your new React app by creating a boilerplate with Create React App: - ```javascript - import React, { Component } from 'react' - import './App.css' - class App extends Component { - render() { - return ( -
-

Marketplace app

-
- ) - } - } - export default App - ``` +```bash +npx create-react-app marketplace +``` -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 - import { Ocean } from '@oceanprotocol/squid' - import * as Web3 from 'web3' - const web3 = new Web3(window.web3.currentProvider) - window.ethereum.enable() - ``` +```bash +cd marketplace/ +npm install @oceanprotocol/squid web3 +``` -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 - 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!") - } - ``` +![React App 01](images/react-app-01.png) -## 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 ( +
+

Marketplace app

+
+ ) + } +} + +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: -```javascript +```jsx import React, { Component } from 'react' import './App.css' import { Ocean } from '@oceanprotocol/squid' import * as Web3 from 'web3' + const web3 = new Web3(window.web3.currentProvider) window.ethereum.enable() + class App extends Component { async componentDidMount() { this.ocean = await new Ocean.getInstance({ @@ -93,13 +123,17 @@ class App extends Component { }) console.log('Finished loading contracts!') } + render() { return ( -
+

Marketplace app

) } } + export default App ``` + +Move on to [Publish a Data Set](/tutorials/react-publish-data-set/).