Finishing our Smart Contract and Using it on Ropsten

The following tutorial is a part of our 100% free course: Developing Ethereum Smart Contracts for Beginners

In the previous lesson, we deployed the contract to the Ropsten test network. In this lesson, we're going to make adjustments to our Web3 UI project so that it works with the updated smart contract, and then experiment with using it.

Let's get started.

If you prefer watching a video instead..

Be sure to Subscribe to the Official Coursetro Youtube Channel for more videos.

Updating the HTML Form

If you've been following along through this course, then you have access to the web project we've been creating for interacting with the smart contract through Web3.

We need to make some minor adjustments to the HTML form in index.html:

    <div class="container">

        <h1>Coursetro Instructor</h1>
        <span id="countIns"></span>

        <h2 id="instructor"></h2>
        <span id="insTrans"></span>
        <hr>

        <img id="loader" src="https://loading.io/spinners/double-ring/lg.double-ring-spinner.gif">

        <label for="fName" class="col-lg-2 control-label">First Name</label>
        <input id="fName" type="text">

        <label for="lName" class="col-lg-2 control-label">Last Name</label>
        <input id="lName" type="text">

        <label for="age" class="col-lg-2 control-label">Instructor Age</label>
        <input id="age" type="text">

        <button id="button">Update Instructor</button>

    </div>

If you compare to the code to the previous form, you will find that the changes are minimal. There's simple a first and last name field now, along with a few extra spans with unique ID's.

Updating the JavaScript

The first line that we have to update from the previous code is the following:

// Previous code
var instructorEvent = Coursetro.Instructor();

// Change ^-- that to:
var instructorEvent = Coursetro.instructorInfo({}, 'latest');

We're changing the name of the event, as that is the new event name that was changed in our smart contract, and we're also passing in an empty object for the first parameter, and 'latest' in the second. 

I found that adding these 2 parameters were necessary in order for it to work correctly on the Ropsten test network. 'latest' simply refers to the last block. In other words, only return successful for the lastest event block.

We also have to change the following which is beneath the above line:

       instructorEvent.watch(function(error, result) {
           if (result) {
               if (result.blockHash != $("#insTrans").html())
                    $("#loader").hide();

               $("#insTrans").html('Block hash: ' + result.blockHash);
               $("#instructor").html(web3.toAscii(result.args.fName) + ' ' + web3.toAscii(result.args.lName) + ' (' + result.args.age + ' years old)');
           } else {
                $("#loader").hide();
           }
       });

There's just a few minor changes here. First, we're adding the if statement for result.blockHash so that it only removes the loader if the returned result is an updated blockHash.

Next, we're using .toAscii to convert the bytes16 types that we changed from type string in the previous lesson. .toAscii will make the hex code readable.

Let's also add another function beneath this that gets the number of instructors:

       Coursetro.countInstructors((err, res) => {
           if (res)
            $("#countIns").html(res.c + ' Instructors');
       })

And then, finally, we will make a slight adjustment in our click event beneath it:

       $("#button").click(function() {
            $("#loader").show();
           Coursetro.setInstructor(web3.eth.defaultAccount, $("#age").val(), $("#fName").val(), $("#lName").val(), (err, res) => {
               if (err) {
                   $("#loader").hide();
               }
           });
       });

The only change here is within the arguments of .setInstructor. We're passing the transaction address, and adding the new fName and lName values.

Using the App

Now that the smart contract is deployined via MetaMask on the Ropsten Test Network, we can give our app a try in the browser.

First, we set a first name, last name and an age and click Update Instructor.

At this point, a MetaMask notification window shows up:

Once we hit Submit, the window disappears and our loading indicator starts waiting for a response from the event callback.

If you click on the MetaMask icon in the browser toolbar, you will see the recent pending transaction. This simply means that the transaction has not yet been verified, and can take anywhere from seconds to minutes:

Once the transaction has been confirmed, the loading indicator disappears and we're able to see the information based back from the event and displayed in the UI.

You've just created your first decentralized app! I would recommend extending this app further to display all of the instructor accounts, make them clickable, and display their information somewhere in the UI. 

All of the functions are there for you to use.

Conclusion

Hopefully, you were able to learn a lot about Ethereum Smart Contract Development throughout this course. 

Stay tuned for more blockchain/decentralized app content in the future.