Connecting Web Applications to Blockchain Smart Contracts

Web3 connects front-end applications to blockchain smart contracts, enabling seamless transactions and interactions.

### Connecting Web Applications to Smart Contracts: A Step-by-Step Guide
* 💻 To begin, users can perform operations such as **deposit and withdrawal** through a user interface that connects to a **smart contract**.
* 🔗 By utilizing jQuery, users can create **interactive buttons** to facilitate these operations **effectively**.
* 🌐 The web3 library serves as an **essential API** that connects the web application to the Ethereum blockchain, enabling **seamless communication**.
* 📦 Users can install web3 via NPM or download it directly from GitHub, ensuring they have the **correct version for their application**.
* 🛠 The process involves initializing a **web3 object** and creating a **contract object** by providing the **ABI and contract address**, which are crucial for interaction with the smart contract.
* 📊 As the application is developed, it is important to **fetch and display the balance from the blockchain**, ensuring users can see their **current financial status**.
* 💰 The application allows for deposits and withdrawals, which will **update the balance in real-time**, reflecting changes on the blockchain.
* 🌍 Ultimately, this guide illustrates how **blockchain technology can replace traditional systems**, while maintaining a **consistent user experience across different platforms**.

[Music] Welcome back, everyone. My name is Evans Verde, and in this video, I will try to connect the smart contract, which we have done before, with the front-end. So, when you say front-end, it can be a normal web page or it can be an Android application, but as of now, just to keep it simple because it isn't supported that, let's stick to the webpage development. So, we will create a simple web page, and we'll try to connect that to a smart contract. But why nothing about this thing when you say blockchain will be replacing a lot of different technologies, right? Companies are moving from this centralized system to distributed systems, so yes, it is changing a lot in terms of enterprise networks, it is changing in terms of currency markets, but what about normal companies? So, let's talk about Facebook. So, if you think about Facebook, Facebook has a server, right? As a user, what we do, we access those pages. So, on our laptop, we see a screen which is maybe a login page or the messages page or the feeds, and then

those data is actually coming from the actual server. So what our processing is happening is on this server, right? But the amazing thing is, as a user, we don't even know what technology they are using in the backend. Are they using Node.js? We are not sure. Are they using PHP, Java, ASP? We don't care. What we care is, as a user, we are able to access a DITA now. Even if in the future Facebook is changing that technology, the centralized application to a distributed system, will it affect us? That's the question. Because the moment you change the servers, the moment you talk about, you know, all the first thing will be done on smart contracts on Dog Chain. So as a user, do we get the same page or the different page? And that's the question I was having in my mind for a long time. And the answer is, you will get the same page because the front end will not change. The only the back end part is changing. So in this example, I will try to prove that. So whatever we are doing here, so if you see this

cost-mart contract. What we are doing is we are trying to withdraw the money, we are trying to deposit the money, we are trying to get the balance, but then we are able to access those functionalities with these buttons. Why? But think about a normal application. As a user, you want to access a web page where you will do all this off, not on this above screen where you can see the cola as well. So, I want to be just a bit page where I can see this. Let's get started. So, the first thing you need is you have to understand certain terms. The first one is if you go to compile, we have a concept of API here, and if you click on details, you can see we have ABI, and this ABI has certain JSON codes. If you can see that, this is the basic JSON code. When you expand it, so we will lead this thing when you want to connect your webpage with the smart contract. So, we require two things. The first one we need is ABI, and the second thing we'll need

is if you go to run this address I have deployed in green B. So, if you have knots in the previous video, I would suggest doing that because we have created your smart contract. If we have connected with this during the test network, so we got decide to assign. So, this is important. So, we need two things: the ABI and this particular address. Now, once you have that, let's get started. But before that, we have we need one more thing. In fact, we need some certain things. We need a good IDE. So, you can use any HTML IDE you want. You can use Visual Studio Code. You can use Atom. You can use Sublime. That's your choice. I'll be using widgets to do here. So, let me open VS. So, that's my Visual Studio Code. So, if you don't have this ready in your machine, in fact, you can use any IDE you want. You can also use Eclipse, NetBeans if you have. You also in a server because we will be running the page like so we got a Visual Studio Code. If you don't have it, you can

simply go to Google and search for Visual Studio Code download, and this is where you will get the setup. This doesn't matter if it's Mac, Linux, or Windows; it has all the options, but it's not difficult. Just say next, next, next, and we'll work will return. So once this is done, the next thing you need is NPM because, see, this when you type the code, you also want to run it, right? So you want to run your HTML, which will be also having jQuery. So if you want to run that, you need a simple server where you can host it. You can also have a web server on the web server or the actual web server, or you can also have that on your local machine. So you can use different servers available. We have lights, or we have HTTP server. So you can install a shrivastava here, but then for that, I will be using NPM. So install NPM. So you can just go here and search for NPM download, and you can just go here. You can download it depending upon which OS you have again, and easy.

setup nothing to do, nothing to worry about. The only thing is, once you have downloaded it, just go to Program Files, go to that software, NPM or Node, copy the path, and go back to environment variables and set the path. I hope you know how to do that. It's very simple, actually. You can just Google it. Now, once you have your Visual Studio and NPM ready, let's install the HTTP server. So, go back to Visual Studio. Now, how do we install this server? So, we can use NPM, right? And then, I have also set the path. Make sure that after setting the path, restart your Visual Studio. To do so, just click on Terminal, click on New Terminal, and this is where you will see the terminal area. Now, based on what OS you are using, if you're using Mac or Linux, you will see the terminal, actual terminal. This is a command prompt, which we are calling terminal. Doesn't matter. In fact, before I ping terminal, make sure you create a folder. So, in your desktop or in documents, make

sure you have a folder where you will put this file. So, I do have a folder. I've created a folder which is Bank web app, a blank folder, empty folder. So, you can see I have a folder which is web, a Bank web app, just like that. You can see it's empty now. Once I got this folder, in this folder, I want to create a page, right? So, we'll do that. But then, you can see we got a terminal. So, I wanted that path here. So, I don't want to go there, go there manually. So, if we cut a path, we're gonna folder. This is where you will write a code, right? This is where I want to install HTTP server. So, I will say nvm install. So, I want to make it globally, and the software name is Ashley piss server. Let's say click. Now, the amazing thing is I do have this setup, so it will take less time for you. It might take more time, but once you go out here and actually PC server, the next step is you have to start it. So, the way you do

that is by saying HTTP server. The moment you say enter, it will take some time, and you can see your server has started, and it is started on this URL, which is localhost colon 8080. So, in order to access that, just go to your browser. I will say localhost colon 8080. Okay, you can see the server is running, that your Notes server, but I want to replace this with my page. So, let's go back here, and let's create a simple file. Click on this, and I want to find them to be index dot HTML. You can have any phylum, doesn't matter actually, and let's get started. The first thing you need is HTML tags. The type of UI we need is we need a text field where you can enter the amount, and then you will be getting weapons like withdraw or deposit. I had this code with me, so just paste it here just to save time. So, you can see we got an input text field, and then we got three tank where where you can show the balance, and then we got two buttons.

deposit and withdraw now. Once you have this body with you, it's time to perform operations. So let's see, this is coming as normal text. So if you're refreshed now, you can see we got a different UI. If in fact the balance is empty, that's where you can't see anything, but you can enter some values and you can click on deposit. Nothing will happen because we have not put it right. So we will click deposit. It should be deposited in the actual smart contract which we are running, this one, and then we can withdraw from that. So let's do that. But then we will be performing operations on the buttons, right? So that's why we need to work with jQuery. So that's one thing. Second thing is how will you connect your web application or your web page with the API of blockchain, and that's where we got this amazing library named as web3. So if you can just go to Google and search for web3, so this is the web3 GitHub link, and they have the notes as

Well, so you can see it's an API between the Atheneum blockchain and your application. So we can use it. In fact, you can also install this on your machine using NPM. Odd, we can use it as your JavaScript library. So in this example, I will use the JavaScript library which they provide. In order to do that, what you can do is you can say download web 3.0. When you click on download, it will take you to the link. You can download it from there. Or in fact, there's also an issue with the proper version. You know, if you have to go for 1.0 or we will be going for developer version. So that's one thing. Otherwise, what you can do is I will provide you the link Sirian for the web 3. You can use that because that is working. I don't know. This was not working when I tried it, the download. Maybe there were some bugs. You have to, you know, maybe when you are trying it, it will work because they are always doing some updates and there.

might be some bug when I tried it. You can try mining, which is so. Let me add those to the script, one for jQuery and one for web 3. So that's done. I have to add it to the script here, one for, you can see, one is for web three and second is for the jQuery. Now, once we have done that, we need to perform certain operations. Now, the first one we need is the moment can load this page. I want to show the balance, whatever balance is there in the blockchain, right? In fact, it gives check once what is the balance I have there. So if you can go here and if I say get balance of the current balance is 200. I want to fetch this. So how do we do it? The first thing you need is a script tag. So I will say script and inside this script. Now, if you want to connect with a contract, the smart contract, let's create an object which will hold it. So I will say contract and then I want to fetch the contract details only when the page is loaded. And the way you do that is by

saying dollar document ready. So anyway, it is ready. Let's perform the function. Let's perform the operations here. So what we need whenever the function, whenever your page is ready. I want to first create the object. All I have to initialize the object of web click OK. But then from where you will get this. So in the insert, the syntax is way simple. It's where 3 is equal to we have to say new web 3 because that's how you instantiate the objects. And in Blackgate, we have to specify the current provider because we are using my Tomas, which is connected with the Ring B. So that's how I provided. All right, so let's use that. So I will say web 3.1 provider. It depends what you are using here. So if you are using injected provider, you can use this. In fact, if you see, we have other options as well. So if you click on this, you can see we have one more option of web 3 provider. That's where you can use Ganesh as a CLI. But as of now

let's stick to the current provider now. This object, which is web 3 here, that's the confusion part, right? We have object initialization here, and then we are creating the object. So, this Web is actually coming from the library which we have used about, okay? Now, once we have done this, the next thing we need to ensure is the contract, right? We have also been able to do using contract here, so we have to initialize this particular object. And the way you do that is by saying new. We have the object which is web 3 in this. You can simply say it, which is a theorem, and then dot. You have to say contract. That's how you create the object. So, contract is a class of which you are getting an object here. But unfortunately or D fortunately, this contract will ask you for two parameters, like we have talked about this before. You need a bi, and you need the address, of course, I'd which smart Quantic we are talking about. So, this particular application will work with our Smart Plan flight. So, if they specify two

things the ABI and the address. So, what I will do here is I will create two variables. First variable, I will say address, but from ready, we get this address. So, I will be getting this address from here. So, go back to a smart contract, just pop it. You can see we have an option of copy. Go back here and say paste. So, that's your address. The next thing we need is ABI, and from where you will get the ABI. So, you will get it from here. So, go back to compile details, and you can simply click on copy here. You don't have to exactly expand this and copy. Say copy, go back here, and paste before the semicolon. And I guess our job is done. You know, I should be minimizing it so that it will not waste one of lines. So, yeah, you can see we have address, and we got ABI, and we just have to pass it here. So, the first thing you have to pass is ABI, and the second thing have to pass is address. Done. So, we have done two things, though ABI is done.

address is done. Now what next? See, once we got the contact object, now we have to fetch the balance in the contract. How will you do that? So, in order to do that, we will be saying contract dot. Now this contract will have such methods, right? We have three methods actually. So, let's say methods dot. So, if you want to fetch data, the method which we have used here, if I go back to code, so if the method name is get balance, where you have to call this method. So, I will go back to methods. I will say get balance. Now this get balance, if you want to call it, there's a method which is named as call because you're calling it, right? And you're expecting a value. So, you will say call. And then here actually, this call will return you a promise. And if you want to fetch the value, if you have to set then, and then whatever value it is returning, it will go into a function. This is basically a JavaScript code, so I'm not here to explain it out. So, if you

want to know more about JavaScript? Just go to this channel. We have a JavaScript ladies just watch that. But here the idea is this will give you a promise, and if you want to face data, you have to set then, and in this function, you have to say you can use any variable. I will say balance, whatever variable name you can use, okay? So in this, I'll be fetching the balance, right? So once we got the bag, we will assign that to this particular idea, which is balanced, right? So if you want to do that, you will just come here and say dollar, let's face that particular ID, and the way to do that is by saying hash balance dot html, and in this, you will pass the balance. That's it. That's the only thing you have to do. Once your page is loaded, you just want to face the balance, right? That's what we wanted. Just save this. I hope this will work. Otherwise, we have to debug the application. That's what we do always. Let's refresh this page, and something is

happening okay so that we got 200 right, but that's an amazing thing, right? Let's say inspect element, let's go to console, and let's see what is happening there. So, we'll go back here, I will say refresh. You can see there is no error, and you got your 200, so that's great. This value is actually coming from the blob chain or the smart point, right? So, this is working, but what about depositing and withdrawing? So, let's see. If I say 300, if I click on deposit, I want this 20 to go to the smart contract, save the data, add a block in the blockchain, and then the value here, it should be 500. How will you do that? That you will say in the next video. I hope you are enjoying all the videos and not seeing your comments in the comment section. So, if you are enjoying, like many of the conversations, so that I will get motivated to make more videos. So, that's it everyone, bye.

Smart Contract with Front End | Blockchain

Telusko

The process involves using API and ABI JSON codes to connect the webpage with the smart contract.

JavaScript is used to fetch the balance and update the webpage with the retrieved value.

The video also hints at implementing deposit and withdrawal functionalities in the next part.

Setting Up for Smart Contract Development

To get started, you'll need the ABI and the deployed address of your smart contract.

A good IDE is essential, and you can choose from options like Visual Studio Code, Atom, or Sublime.

Additionally, you'll need to install NPM to run your code and set up a local server for hosting your HTML and jQuery.

Setting Up a Simple HTTP Server and Web Page

An HTTP server is started on localhost:8080, and the server's URL is accessed through a browser.

html file is created with HTML tags, a text field for entering an amount, and buttons for withdraw and deposit.

js is used to instantiate an object and connect to the blockchain, with the goal of fetching the current balance and displaying it on the web page.

Connecting Web Applications to Smart Contracts

The web application interface allows users to perform deposit and withdraw operations, with jQuery used for button functionality.

The web3 library provides the API connection between the blockchain and the application, with options for installation via NPM or JavaScript.

The tutorial focuses on creating a simple web page to connect with the smart contract, highlighting the shift from centralized to distributed systems in technology.

The Web3 object is initialized from a library, and the contract is created using the Web3 object.

Two parameters, ABI and address, are required to initialize the contract.

The address is copied from the smart contract, and the ABI is obtained from the compile details, both of which are then passed to the contract initialization.

To fetch the balance from a contract, you will use the method `getBalance` and call it with `contract.

This call returns a promise, and you can use .

The backend technology used to process the data is irrelevant to the user, as the front end remains the same even if the backend changes.