Attach a GUI to your Ethereum Smart Contract
hey everyone
Gary Simon of course etro and welcome to
this lesson where we're going to
continue on with % free course
developing aetherium smart contracts for best web development companies in bhubaneswar
beginners so in this lesson we're going
to install the etherium test RPC along
with web gs to create a simple user
interface that will allow us to interact
with our actual aetherium smart Kratt
contract so if you don't know what the
test RPC is and the web Jas don't
worry I'm going to describe it very
shortly alright so the first thing that
we want to do is you need to install and
run at the etherion test RPC so what is
that well it's a node jas etherium
client for the testing and development
of your smart contracts so it's all
based on nodejs which means yes we have
to have no js' installed so to check
whether or not it's installed open up
your command line or console and simply
type in node - V and NPM - V now if
either of these commands go unrecognized
simply visit nodejs or click on the
Downloads button and then download the
appropriate installer for your OS and
install it through all of the default
options all the way up to the end and it
will include that node package that new
package or manager which you know that's
what you need to install the theater new
test RPC along with web so once it's
installed just reload your console here
and then you can rerun these commands
and they will be there ok so now what we
need to do is install the actual
aetherium j/s test
PC so it doesn't really matter what
folder we install this in because we're
going to install it globally which means
we can access it from anywhere so NPM
install - g for global aetherium j/s
test RPC alright so this will install
momentarily I didn't actually mean to
hit enter when I ran that command
because I already have installed
I want to see here you know wasting time
so I may end up speeding this up and
going back here okay so once finished we
simply type in test RPC okay and now
this provides you with ten different
accounts and their associated private
keys along with the local server at
localhost eight five four five all right
so now what we want to do is actually
install web gs but first I'm going to
open up a new console window and by the
way a lot of people ask me you know what
console emulator are you using I'm using
commander CMD er it's free and you could
download your self so at the bottom in
the tasks area we can just spray click
new console hit start and there we go
so I'm going to hop into my code folder
that's where I store my projects I'm
going to make a new folder called course
set ro ETH you can name yours whatever
you want we're gonna hop into it alright
and then we're gonna run MPN in it and
this will create a package.json file
which will store the project
dependencies so just hit enter through
all the different questions alright so
now we can install
aetherium slash web j s and then save
it with our save flag to the
dependencies and package a JSON okay so
now what we want to do is if you recall
if you've been following along we've
been working within the remix IDE the
online-based editor i we have an
environment dropdown where we've been
using the JavaScript vm this is where we
want to change that now so let's switch
over go ahead to our smart contract here
and this is that remix aetherium org and
this is a smart contract that we created
in the previous lesson and if you're
watching this on for instance
you can click on the link that will show
you the actual written titurius and
paste it in so you don't have to sit
here and
basically typing it a lot from scratch
alright and what we want to do now is
we'll go ahead and take this from
environment and change it to web three
provider we'll hit OK and we put in our
local host eight five four five and hit
OK alright great so now what we want to
do is hit create and we're gonna come
back to this layer to copy this address
all right so now let's go ahead and
focus and start working in a code editor
so our code editor I'm going to use
Visual Studio code I'm going to open up
the folder that we created right here
okay so we have our node modules folder
and this contains our web i and also
just these two package JSON files let's
go ahead and create a new file I'm just
going to make sure that doesn't create
it in there we'll create it in here
called index.html
alright so also if you're watching this
on or udemy I will try to
provide the basic scaffolding that I'm
about to put in here and this is going
to be a regular HTML file and now I'm
going to increase my editor size so just
to make sure everybody can see what is
going on alright so all that's happening
here is we have our basic head tags and
here the only thing we're referencing is
a main CSS file which doesn't yet exist
and also the script source for a web
aetherium client right here so this is
of course located in our node modules
folder let's go ahead before I continue
describing what else is happening and
create that main CSS file make sure this
is down here drag it and I've also just
created some roll sets that will just
make it not look absolutely like garbage
and so I'm pasting this in here as well
and again I will provide the resource
files for you so you can just quickly
and paste this in and again it's just a
very basic CSS just to structure this
very simple user interface so going back
to the index.html just to show you
what's happening here in the body tag we
have just a container we have a corset
your instructor yada yada we have just
two form inputs one is going to be for
our age and name right here and then the
button ID of button and when they that's
clicked we're gonna have stuff happen
down here all right so we're also using
jQuery down here so we don't have to use
straight up JavaScript make our life a
little bit easier okay so now what we
want to do is use web j s to connect
and interact with the actual smart
contract all right so what we want to do
is right here we're going to put in if
typeof web is not equal to undefined
then we'll say web equals a new web
and current provider we'll say else web
is new web a new web three providers
dot HTTP providers and this is where we
put in our local host because we're
running the test RPC ok so what is
happening here well basically it's
saying that if web is undefined or not
undefined
then we'll use that as our provider
right here on line so if it's
undefined or else then we can manually
specify the provider in our case it's
our localhost so you may be
wondering how would this up here web
be defined well if you're using a Chrome
extension like made a mask which we will
be using later in this course or if
you're using like an aetherium browser
like
then the provider is automatically
injected into the JavaScript context
that we can use so again this still may
be a little bit confusing and that's
expected you'll understand how this
works as we go on okay so next we need
to specify a default
aetherium account to use through the web
e th or f a dot default account method
so this goes underneath here and we'll
put in web . eh dot default account
equals web eth accounts and we'll put
in zero as this is an array so remember
when we ran that test our PC command in
the console well that provides us with
the ten accounts and we're simply
choosing the first one to use all right
so next we need to use the ETH contract
method to initialize or create the
contract on an address so it accepts one
parameter which is referred to as an ABI
or application binary interface so this
ABI it allows you to call functions and
receive data from your smart contract so
it is an interface now if we switch back
here to our remix IDE and we go ahead to
compile and then click on details
we'll see down here if we scroll down we
have our interface ABI
right here says copy value to clipboard
all right so that is our ABI that we
need so we're going to go back here and
underneath the last line that we defined
we'll put in var course set row contract
equals web three ETH contract method and
then we paste that entire ABI in there
and it's not too long but you know
obviously it's a fair amount of data
okay now that we have the interface for
interacting with our contract through
the core set row contract variable the
last thing to do is define the actual
contract address so what we'll do to do
that is we'll put in another variable of
course set row equals we reference the
one from above corset row contract at
and then this is where we paste in the
contract address from the remix IDE so
we'll go back here to our remix we'll
get out of here go to run and when we
hit create this provides us with that
address so if I'm just move this over
quite a bit
we'll see this little copy to clipboard
because that is the address that the
contract is at and we put it right in
here in quotes all right great
so let's real quickly console.log course
set row all right so let's save this and
let's go ahead and I'm gonna right-click
this reveal and Explorer on index dot
HTML it showed up off the side on my
screen and I'm going to bring this over
here we're gonna hit control shift I to
bring out the inspector and of course I
by accident added a made me this plural
is supposed to be HTTP provider and what
we'll do just go back here real quickly
fix that sorry about that
save go back and refresh this and there
we go alright so basically this is what
we console.log and look right here we
have our get instructor and our set
instructor functions that we define in
the remix IDE all right so let's go
ahead back to Visual Studio code and
we're gonna go right down here and now
that we know we can access this let's
actually give it some context in terms
of our form so that we can actually get
the instructor name and age and set it
all right so the first thing we want to
do is we're put in
corsets row and we'll get the instructor
first so get instructor now the success
accepts a callback function error result
and then we'll say if there's no error
then we'll put this is jQuery here
instructor will set the HTML to the
result and remember because I we are
returning let me show you real quick
here in the IDE we're returning two
values here so they come back to us as https://www.evernote.com/shard/s699/sh/f5462202-7523-4864-a6d8-be03f1d2b0d9/e48d6f35c934ff29db46595d20c5ce2cwww.evernote.com/shard/s699/sh/f5462202-7523-4864-a6d8-be03f1d2b0d9/e48d6f35c934ff29db46595d20c5ce2c
an array so we're going to take the
first one which is the name all right
and this will be we're gonna hit plus
here to come cat and then we'll put in a
parenthesis which will pulled the age so
we put result which is the array index
of years old
and let me there we go ok great
and then we'll simply say else
console.log the error all right and then
we'll say on our button click which has
an ID of button on click alright inside
of here
we'll call course set row set instructor
and we'll pass in the name val for value
and then also it accepts a second
argument from as an integer which is
coming from age all right excellent
so if everything was typed out correctly
God willing we'll go ahead and go back
to right here I'm gonna refresh it
now of course we didn't yet set it so
what we have to do is set it and we'll
put in for instructor name I'll just put
I don't want to put my own name because
we've been seeing that all the time
we'll put it in Brutus and then we'll
put an age of seventy five years old
he's a really old instructor so we're
gonna hit update nothing's gonna happen
at this point however if we refresh
there we go
and you can see how these two things are
combined we go back to the remix IDE
oops right here and if we hit get
instructor Brutus of down here all
right so we covered a lot of ground
right there so you may be a little bit
confused on some of the aspects but we
are going to be jumping back into this
sort of environment and we're also going
to be connecting later on in the course
to a different test network which will
really simulate the full experience when
it comes to you know setting the
receptor the course set your instructor
name because it's not instantaneous in
the live environment
it actually takes you know either a
minute or two for the the network to
confirm the transactions so your you'll
begin to understand more and more as we
go as you actually start doing more and
more alright so in the next lesson we're
gonna hop back here into remix in which
is the solidity IDE to learn more
because there's a lot more to learn in
terms of what it takes to create smart
contracts I'll see you then