oceanprotocol/docs
1
0
Fork 0
mirror of https://github.com/oceanprotocol/docs.git synced 2024-11-26 19:49:26 +01:00
Code Releases Activity

little tutorial tweaks

Browse Source
This commit is contained in:
Matthias Kretschmann 2018-12-06 14:43:27 +01:00
parent 654159741e
commit b4e6d395c7
Signed by: m
GPG Key ID: 606EEEF3C479A91F
2 changed files with 46 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
content/tutorials/react-publish-data-set.md
View File

@ -5,12 +5,12 @@ 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
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.
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
const asset = {
@ -52,13 +52,13 @@ This is a continuation of the [React App Setup](/tutorials/react-setup) tutorial
3. Now that we have an asset to submit, we need function to handle it. Just before `render() {` let's add:
```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))
}
```
```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))
}
```
4. The last thing we need is a button to start our registration inside the render function just after `<h1>Marketplace app</h1>`:
@ -66,19 +66,21 @@ This is a continuation of the [React App Setup](/tutorials/react-setup) tutorial
<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.
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 +115,7 @@ const asset = {
updateFrequency: 'yearly'
}
}
class App extends Component {
async componentDidMount() {
this.ocean = await new Ocean.getInstance({
@ -128,11 +131,13 @@ 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))
}
render() {
return (
<div className="App">
@ -142,5 +147,6 @@ class App extends Component {
)
}
}
export default App
```

55
content/tutorials/react-setup.md
View File

@ -1,19 +1,17 @@
---
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-pond-node`. This runs all services locally, including a local Parity Ethereum node.
## Tutorial Steps
@ -22,9 +20,10 @@ This tutorial shows how you can build a basic [React](https://reactjs.org/) 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
```jsx
import React, { Component } from 'react'
import './App.css'
class App extends Component {
render() {
return (
@ -34,6 +33,7 @@ This tutorial shows how you can build a basic [React](https://reactjs.org/) app
)
}
}
export default App
```
@ -42,36 +42,37 @@ This tutorial shows how you can build a basic [React](https://reactjs.org/) app
```javascript
import { Ocean } from '@oceanprotocol/squid'
import * as Web3 from 'web3'
const web3 = new Web3(window.web3.currentProvider)
window.ethereum.enable()
```
6. 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.
```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!")
}
```
```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!")
}
```
## 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.
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'
@ -95,6 +96,7 @@ class App extends Component {
})
console.log('Finished loading contracts!')
}
render() {
return (
<div className="App">
@ -103,5 +105,6 @@ class App extends Component {
)
}
}
export default App
```