62 |
109 | )
110 | }
111 | }
112 |
113 | export default Create
114 |
--------------------------------------------------------------------------------
/src/app/components/Footer.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | class Footer extends React.Component {
4 | render() {
5 | return (
6 |
9 | )
10 | }
11 | }
12 |
13 | export default Footer
14 |
--------------------------------------------------------------------------------
/src/app/components/Home.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Link } from 'react-router-dom'
3 | import { GithubLogo } from './Icons'
4 |
5 | import Code from './Code'
6 |
7 | const Home = () => (
8 |
63 |
108 |
64 |
65 |
80 |
81 | Create
66 |
67 | Say you wanted to create an asset of crabModel,
68 | simply invoke the .create() function for your model. You can add
69 | some specific data related to the instance you created.
70 | This could be useful to track the state or any attribute of your asset.
71 | Of course, you will also need to provide the keypair for signing the transaction.
72 |
74 | Once the create is triggered, a transaction is sent to the network and returns
75 | a promise that resolves into an OrmObject once the transaction is approved.
76 | This object contains some useful attributes and functions that we'll explore in the
77 | next steps.
78 |
82 |
107 |
83 |
91 |
92 |
105 |
106 |
9 |
128 | )
129 |
130 | export default Home
131 |
--------------------------------------------------------------------------------
/src/app/components/Icons.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | export const Logo = () => {
4 | return (
5 |
13 | )
14 | }
15 |
16 |
17 | export const GithubLogo = () => (
18 |
24 | )
25 |
--------------------------------------------------------------------------------
/src/app/components/Output.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import classnames from 'classnames'
3 |
4 | import Crab from '../img/tumblr_m9wlwqH8Xf1rfjowdo1_500.gif'
5 | import Flame from '../img/flame-gif-6.gif'
6 |
7 | class Output extends React.Component {
8 | getCrabReward() {
9 | if (this.props.append) {
10 | return (
11 |
10 |
89 |
11 |
15 |
87 |
88 | The CRAB tutorial
12 | Create, Retrieve, Append and Burn: 13 | Basic operations for a blockchain database. 14 |Introduction
16 |17 | This tutorial illustrates how BigchainDB is used 18 | as a database that is accessible from the browser. 19 | The basic operations covered are much like 20 | your standard database operations, but with a blockchain tweak: 21 |
22 |23 | The following table gives a sneak preview of what to expect 24 | from this tutorial and the difference between regular databases and 25 | blockchain databases, such as BigchainDB: 26 |
27 |
28 |
29 |
30 |
68 |
69 | | Database: CRUD | 32 |BigchainDB: CRAB | 33 |
| 37 | CREATE 38 | | 39 |40 | CREATE 41 | | 42 |
| 45 | READ 46 | | 47 |48 | RETRIEVE 49 | | 50 |
| 53 | UPDATE* 54 | | 55 |56 | APPEND* 57 | | 58 |
| 61 | DELETE* 62 | | 63 |64 | BURN* 65 | | 66 |
70 | The differences are marked with an asterix (*). 71 | Since Blockchains are immutable and append-only, operations such as 72 | UPDATE and DELETE are not directly supported. 73 | Instead, they are represented by state changes: APPEND and BURN. 74 | Think of it as a fully versioned database, 75 | where all actions on records are immutably recorded. 76 |
77 |78 | Oh crab, that sounds a bit weird?! 79 | No worries, we got you covered... 80 | In the following, we'll explore the CRAB approach to blockchain 81 | databases with an hands-on interactive example. 82 |
83 |
84 | All code can be found by clicking the github button
90 |
123 | 124 | First step: Create an asset 125 | 126 |
127 |
91 |
92 |
120 |
121 | Install and Setup
93 |94 | First things first, we need to set you up. 95 | The BigchainDB-ORM module 96 | we're going to install is supported for NodeJS (version >= 6) as well as the browser. 97 | You can simply install the ORM using: 98 |
99 |
100 |
102 | npm install bigchaindb-orm
101 | 103 | Next, we need to import the ORM module and connect to a BigchainDB node. 104 | In the example given below, we connect to 105 | the BigchainDB Test network where we already created account and received credentials. 106 |
107 |
108 | Finally, we need to define our model with a schema that
109 | will be used for each instance of the model. In BigchainDB terms, this means
110 | that each instance of that model is an asset.
111 | The schema URI is set in the asset field
112 | of the CREATE transaction.
113 | For this tutorial, our model happens to be a crabModel.
114 |
116 | Also, we create a keypair for our user Alice.
117 | Below is a snippet of how we set things up in this tutorial.
118 |
123 | 124 | First step: Create an asset 125 | 126 |
16 | 
17 |
18 |
19 | )
20 | } else if (this.props.burn) {
21 | return (
22 |
27 | 
28 |
29 |
30 |
31 | )
32 | }
33 | return (
34 |
39 |
40 |
41 | )
42 | }
43 |
44 | render() {
45 | return (
46 |
48 |
90 | )
91 | }
92 | }
93 |
94 | export default Read
95 |
--------------------------------------------------------------------------------
/src/app/components/ScrollToTop.jsx:
--------------------------------------------------------------------------------
1 | import { Component } from 'react'
2 | import { withRouter } from 'react-router-dom'
3 |
4 | class ScrollToTop extends Component {
5 | componentDidUpdate(prevProps) {
6 | if (this.props.location !== prevProps.location) {
7 | window.scrollTo(0, 0)
8 | }
9 | }
10 |
11 | render() {
12 | return this.props.children
13 | }
14 | }
15 |
16 | export default withRouter(ScrollToTop)
17 |
--------------------------------------------------------------------------------
/src/app/components/Steps.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { NavLink } from 'react-router-dom'
3 |
4 | import { GithubLogo } from './Icons'
5 | import Logo from '../img/BDB@2ds.png'
6 |
7 | class Steps extends React.Component {
8 | render() {
9 | return (
10 |
49 |
89 |
50 |
51 |
61 |
62 | Retrieve
52 |
53 | The .retrieve(query) function is useful when we want
54 | to fetch existing assets from the network. When no query is provided, you will
55 | retrieve all assets as OrmObject of the model.
56 | If you don't want to retrieve all assets, you can filter your request by using the
57 | query language
58 | in BigchainDB.
59 |
63 |
88 |
64 |
72 |
73 |
86 |
87 |
12 |
13 | 
14 |
15 |
41 |
16 |
18 | {(menuChecked(0) ? '✓' : '0')} Start
19 |
20 |
22 | {(menuChecked(1) ? '✓' : '1')} Create
23 |
24 |
26 | {(menuChecked(2) ? '✓' : '2')} Retrieve
27 |
28 |
30 | {(menuChecked(3) ? '✓' : '3')} Append
31 |
32 |
34 | {(menuChecked(4) ? '✓' : '4')} Burn
35 |
36 |
37 |
38 |