-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathintro-embark.html
More file actions
306 lines (288 loc) · 22.5 KB
/
Copy pathintro-embark.html
File metadata and controls
306 lines (288 loc) · 22.5 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
<!DOCTYPE html>
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en-US"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en-US"> <![endif]-->
<!--[if gt IE 8]><!-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="description" content="An ethereum blockchain development tutorial that introduces the Embark framework and walks through how to get started with deploying smart contracts on ethereum with Embark ...">
<meta name="author" content="MLG Blockchain Consulting">
<!-- for Sharing -->
<meta property="og:title" content="How to Get Started with the Embark Framework | MLG Blockchain"/>
<meta property="og:type" content="article" />
<meta property="og:image" content="https://scontent.fyzd1-1.fna.fbcdn.net/v/t31.0-8/16113461_1203468529740802_8298128364201048788_o.jpg?oh=083f3a5ded0d20ca003f040dc24fd27c&oe=5959F050" />
<meta property="og:image:width" content="960"/>
<meta property="og:image:height" content="590"/>
<meta property="og:url" content="https://mlgblockchain.com/intro-embark.html">
<meta property="og:description" content="An ethereum blockchain development tutorial that introduces the Embark framework and walks through how to get started with deploying smart contracts on ethereum with Embark ..." />
<link rel="shortcut icon" href="img/favicon.png">
<title>How to Get Started with the Embark Framework | MLG Blockchain</title>
<!-- Bootstrap Core CSS -->
<link href="assets/css/bootstrap/bootstrap.min.css" rel="stylesheet" type="text/css">
<!-- Retina.js - Load first for faster HQ mobile images. -->
<script src="assets/js/plugins/retina/retina.min.js"></script>
<!-- Font Awesome -->
<link href="assets/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- Default Fonts -->
<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Raleway:400,100,200,300,600,500,700,800,900' rel='stylesheet' type='text/css'>
<!-- Modern Style Fonts (Include these is you are using body.modern!) -->
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Cardo:400,400italic,700' rel='stylesheet' type='text/css'>
<!-- Vintage Style Fonts (Include these if you are using body.vintage!) -->
<link href='https://fonts.googleapis.com/css?family=Sanchez:400italic,400' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Cardo:400,400italic,700' rel='stylesheet' type='text/css'>
<!-- Plugin CSS -->
<link href="assets/css/plugins/owl-carousel/owl.carousel.css" rel="stylesheet" type="text/css">
<link href="assets/css/plugins/owl-carousel/owl.theme.css" rel="stylesheet" type="text/css">
<link href="assets/css/plugins/owl-carousel/owl.transitions.css" rel="stylesheet" type="text/css">
<link href="assets/css/plugins/magnific-popup.css" rel="stylesheet" type="text/css">
<link href="assets/css/plugins/background.css" rel="stylesheet" type="text/css">
<link href="assets/css/plugins/animate.css" rel="stylesheet" type="text/css">
<!-- Vitality Theme CSS -->
<!-- Uncomment the color scheme you want to use. -->
<link href="assets/css/vitality-red.css" rel="stylesheet" type="text/css">
<link href="assets/css/mlg.css" rel="stylesheet" type="text/css">
<!-- <link href="assets/css/vitality-aqua.css" rel="stylesheet" type="text/css"> -->
<!-- <link href="assets/css/vitality-blue.css" rel="stylesheet" type="text/css"> -->
<!-- <link href="assets/css/vitality-green.css" rel="stylesheet" type="text/css"> -->
<!-- <link href="assets/css/vitality-orange.css" rel="stylesheet" type="text/css"> -->
<!-- <link href="assets/css/vitality-pink.css" rel="stylesheet" type="text/css"> -->
<!-- <link href="assets/css/vitality-purple.css" rel="stylesheet" type="text/css"> -->
<!-- <link href="assets/css/vitality-tan.css" rel="stylesheet" type="text/css"> -->
<!-- <link href="assets/css/vitality-turquoise.css" rel="stylesheet" type="text/css"> -->
<!-- <link href="assets/css/vitality-yellow.css" rel="stylesheet" type="text/css"> -->
<!-- IE8 support for HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="httpss://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="httpss://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body id="page-top">
<!-- Start: Header Area
================================-->
<header class="header-background header header-2" id="header" data-stellar-background-ratio="0.5">
<div class="fix overlay-color">
<!-- Start: Navbar Area -->
<div class="header-navbar" id="header-navbar">
<!-- Navbar Option -->
<nav class="navbar navbar-inverse navbar-expanded" id="myNavbar" style="padding:10px 0px;">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- TEMPLATE LOGO -->
<a class="navbar-brand" href="index.html"><span><img src="assets/img/logo.png" alt="MLG Blockchain Consulting" class="img-responsive" style="width:100px"></span></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right" id="navbar-nav-2">
<li class="section-selector-2"><a class="btn page-scroll" href="index.html">Home</a></li>
<li class="section-selector-2"><a class="btn page-scroll" href="about.html">About</a></li>
<li class="section-selector-2"><a class="btn page-scroll" href="services.html">Services</a></li>
<li class="section-selector-2"><a class="btn page-scroll" href="clients.html">Clients</a></li>
<li class="section-selector-2 dropdown">
<a class="btn page-scroll dropdown-toggle" data-toggle="dropdown" href="news.html">News
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="press.html">Press</a></li>
<li><a href="announcements.html">Announcements</a></li>
</ul>
</li>
<li class="section-selector-2 dropdown">
<a class="btn page-scroll dropdown-toggle" data-toggle="dropdown" href="learn.html">Learn
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="bitcoin-tutorials.html">Bitcoin</a></li>
<li><a href="ethereum-tutorials.html">Ethereum</a></li>
<li><a href="hyperledger-tutorials.html">Hyperledger</a></li>
<li><a href="eris-tutorials.html">Eris</a></li>
<li><a href="blockchain-framework-tutorials.html">Other</a></li>
</ul>
</li>
<li class="section-selector-2"><a class="btn page-scroll" href="contact.html">Contact</a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
</div>
<!-- End: Navbar Area -->
<!-- Begin Content -->
<section class="post-content">
<div class="container">
<div class="row">
<br><br><br>
<!-- Begin page content -->
<div class="col-xs-12 col-md-9 col-md-push-3">
<div class="content-box">
<p class="blog-date"><span>12</span><br>Feb<br>2017</p>
<img src="assets/img/blog/intro-embark.jpg" alt="How to Get Started using Smart Contracts with Embark">
</div>
<div class="post-info">
<span>Michael Gord | embark, ethereum, blockchain, solidity, smart contracts, blockchain development</span>
</div>
<h2 class="section-title">How to Get Started with the Embark Framework</h2>
<div class="divider-light"></div>
<div class="page-content">
<p>This tutorial will walk through how to use <a href="https://media.readthedocs.org/pdf/embark/latest/embark.pdf" target="_blank">Embark</a>, which is a framework to help developers easily build and deploy serverless decentralized applications. A Decentralized Application (Dapp) is a serverless application that uses decentralized technologies, such as blockchain and smart contract technology, and has no single point of failure. Embark is currently integrated with the Ethereum EVM blockchain, IPFS decentralized storage and decentralized communication platforms called Whisper and Orbit.</p>
<p>
Embark is a tool to automatically deploy smart contracts to the Ethereum EVM blockchain and make them easily accessible with traditional Javascript code. Embark handles the contract migration if there are multiple contracts, automatically redeploys contracts as needed and watched for changes. It supports test driven development of contracts with Javascript and allows developers to easily manage their contracts on different blockchains, such as a testnet, a private net and the live network.
</p>
<p>
You can use any traditional web development language with Embark including Angular, React, Meteor, etc. You are also able to use any build pipeline you want, including grunt or gulp.
</p>
<p>
To begin you need to install the Embark package manager with NPM.
</p>
<code>
$ npm -g install embark
</code>
<p>
If you would like to deploy your smart contract to the Ethereum test network rather than a real ethereum node use this command.
</p>
<code>
$ npm -g install ethereumjs-testrpc
</code>
<p>You can create a sample working DApp with one command with many dependencies downloaded automatically such as web3, cryptojs, bignumber, lodash, grunt, mocha, yargs, etc. When you create a new embark app it should complete by returning “init complete” and by confirming that the embark app is ready.
</p>
<code>
$ embark new demo
</code>
<img src="assets/img/embark-new-demo.jpg" class="img-responsive" alt="Create a new application with Embark">
<p>You can now change directory into the embark_demo and connect your demo to an ethereum node with this command. After you run the command embark should automatically run geth, initialize a genesis block, return the address of the genesis block, give you an IPC and https endpoints, and start to download the DAG. Downloading the DAG will take a couple minutes.
</p>
<code>
$ embark blockchain
</code>
<img src="assets/img/embark-blockchain.jpg" class="img-responsive" alt="Create a new blockchain instance with Embark">
<p>
Once the DAG is fully generated the blockchain will begin to mine and a message will be returned to confirm that your account has been funded.
</p>
<img src="assets/img/embark-account-funded.jpg" class="img-responsive" alt="Your Embark account has been funded">
<p>
Next we can run our app locally by running this command in a new terminal window from the embark demo dapp file directory. This will run our embark dapp in the same way as a traditional application running on localhost and we should be able to view our dapp locally. When we do, a window shows up to show the contracts that are deployed and a log of events.
</p>
<code>
$ embark run
</code>
<img src="assets/img/embark-run.jpg" class="img-responsive" alt="Run your Embark application to see event logs">
<p>
Your fully functional dapp should now be live on whatever port is specified in your code (localhost:8545 is default). If you look at your folder directory you can see that you have an app folder for your dapp files, including contracts for your smart contract files, css for your styles, js for your javascript files and an index.html for your layout. The config folder is for custom configuration of your blockchain, contracts, etc. The blockchain.json is to configure your blockchain environment and the contracts.json is to configure your smart contracts. The dist folder is for your production code.
</p>
<p>
In the next Embark tutorial we will walk through how to handle smart contracts using Solidity and Embark. To get a feel for how smart contracts work check out our <a href="intro-sol-contracts.html" target="_blank">Introduction to Solidity Smart Contracts</a> tutorial and our <a href="sol-wallet.html" target="_blank">How to Setup a Wallet Smart Contract using Solidity</a> tutorial.
</p>
<p>
<a href="index.html">MLG Blockchain</a> is a blockchain development and consulting firm based in Toronto that is focused on building next generation applications using blockchain and smart contract technology. View all our <a href="learn.html">blockchain development tutorials</a> at <a href="learn.html">www.mlgblockchain.com/learn.html</a>.
</p>
</div> <!-- End row -->
</div> <!-- End page content -->
<!-- Begin Sidebar -->
<div class="col-xs-12 col-md-3 col-md-pull-9">
<aside class="sidebar-nav">
<h3 class="sidebar-heading">Latest Posts</h3>
<ul>
<li><a href="setup-ethereum-on-aws-1.html">Use Go-Ethereum to Setup an Ethereum Blockchain on AWS</a></li>
<li><a href="setup-hyperledger-fabric.html">How to Setup the Hyperledger Fabric on Ubuntu</a></li>
<li><a href="intro-ipfs.html">How to Get Started with IPFS Decentralized Storage</a></li>
<li><a href="hyperledger-pre.html">How to Install Hyperledger Fabric v1.0 on Ubuntu 16.04 and execute Deploy, Invoke and Query - Part I</a></li>
<li><a href="intro-blockchain.html">A Simple Introduction to Understand the Blockchain</a></li>
<li><a href="meteor-wallet.html">How to Use Meteor to Create an Ethereum Wallet</a></li>
<li><a href="intro-embark.html">How to Get Started with the Embark Framework</a></li>
<li><a href="crypto-signature.html">How to Use Go to Create a Crypto Signature</a></li>
<li><a href="setup-bitcoind.html">How to Connect to the Bitcoin Blockchain with Bitcoind</a></li>
<li><a href="eris-chain.html">How to Setup a Private Blockchain with Eris</a></li>
<li><a href="sol-wallet.html">How to Setup a Wallet Smart Contract with Solidity</a></li>
<li><a href="ethereum-private-network.html">Use Go-Ethereum to Setup your own Private Ethereum Blockchain</a></li>
<li><a href="intro-sol-contracts.html">Get started with solidity and ethereum smart contracts</a></li>
<li><a href="ethereumjs-sign.html">Use Ethereumjs-tx and Web3 to Send an Ether Transaction using your Terminal</a></li>
<li><a href="bitcoinjs-address.html">Use Bitcoinjs to generate a new Bitcoin address and private key</a></li>
</ul>
</aside>
</div> <!-- End Sidebar -->
</div> <!-- End row -->
</div> <!-- End container -->
</section> <!-- End Content section -->
<section class="cta-form" id="contact" style="background-image: url('assets/img/homepage/plexus.jpg')">
<div class="container text-center">
<h4 style="color:white">Be the first to hear about the newest advancements in blockchain technology!</h3>
<hr class>
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<!-- MailChimp Signup Form -->
<div id="mc_embed_signup">
<!-- Replace the form action in the line below with your MailChimp embed action! For more informatin on how to do this please visit the Docs! -->
<form role="form" action="//mlgblockchain.us15.list-manage.com/subscribe/post?u=aed601a0f8af2bb3c70ffe3ac&id=1b4e498474" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" target="_blank" novalidate>
<div class="input-group input-group-lg">
<input type="email" name="EMAIL" class="form-control" id="mce-EMAIL" placeholder="Email address...">
<span class="input-group-btn">
<button type="submit" name="subscribe" id="mc-embedded-subscribe" class="btn btn-primary">Subscribe!</button>
</span>
</div>
<div id="mce-responses">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div>
</form>
</div>
<!-- End MailChimp Signup Form -->
</div>
</div>
</div>
</section>
<footer id="footer" class="footer">
<div class="container text-center">
<div class="row" style="color:black">
<div class="col-md-4 contact-details">
<h4><i class="fa fa-phone"></i> Call</h4>
<p>647-377-3489</p>
</div>
<div class="col-md-4 contact-details">
<h4><i class="fa fa-map-marker"></i> Visit</h4>
<p>Toronto, Canada</p>
</div>
<div class="col-md-4 contact-details">
<h4><i class="fa fa-envelope"></i> Email</h4>
<p style="color:black">hello@mlgblockchain.com</p>
</div>
</div>
<div class="row copyright">
<div class="col-lg-12">
<center><a href="index.html"><img src="assets/img/mlg.png" alt="MLG Blockchain Consulting" class="img-responsive" style="width:100px"></a></center>
<br>
<p class="small" style="color:black">© 2017 MLG Blockchain Consulting</p>
</div>
</div>
</div>
</footer>
<!-- SCRIPTS
========================================-->
<!-- Core Scripts -->
<script src="assets/js/jquery.js"></script>
<script src="assets/js/bootstrap/bootstrap.min.js"></script>
<!-- Plugin Scripts -->
<script src="assets/js/plugins/google-analytics.js"></script>
<script src="assets/js/plugins/jquery.easing.min.js"></script>
<script src="assets/js/plugins/classie.js"></script>
<script src="assets/js/plugins/cbpAnimatedHeader.js"></script>
<script src="assets/js/plugins/owl-carousel/owl.carousel.js"></script>
<script src="assets/js/plugins/jquery.magnific-popup/jquery.magnific-popup.min.js"></script>
<script src="assets/js/plugins/background/core.js"></script>
<script src="assets/js/plugins/background/transition.js"></script>
<script src="assets/js/plugins/background/background.js"></script>
<script src="assets/js/plugins/jquery.mixitup.js"></script>
<script src="assets/js/plugins/wow/wow.min.js"></script>
<script src="assets/js/contact_me.js"></script>
<script src="assets/js/plugins/jqBootstrapValidation.js"></script>
<!-- Vitality Theme Scripts -->
<script src="assets/js/vitality.js"></script>
</body>
</html>