Vibe Code your Smart Contract with ChainIDE AI editor by Xiao WuLing

Transcript

Hello everyone. So today I will do the vibe coding actually request by Patrick the organizer. So we will do some coding here. I do not have too much PBTs maybe just for Okay. Okay. So today I will do the VIP coding. So actually it is like the AI demo how to use AI to build the front end, back end and smart contract. And I will just show the process and hope you enjoy it. So let me have the first kind of the super vibe coding once. So I mean this kind of AI tools is built by chid and in this tools uh it is pretty simple. If you really want to do the superv coding

side we will just enter some kind of the features and parameters. Uh the the magic prompt is above is the contract API and address. Please use the pure HTML JS deliver CDN and Taiwing to create a simple and beautiful mink program. Make sure that use ether.js version five and use ethereum 40 for the minting. So this is kind of the one line prompt the all the rest are the prim parameters. I mean we just few in and we just put in the prompt then it will automatically generate a lot of code. I will just first to show you I mean what it can do then we will go through into details I mean step by step because

otherwise we will just see the AI do the coding and we see okay it makes sense but we don't know how it it is doing that. So now they are trying to create the abb.js Yes. And we see the AI is keep generating, keep writing code. Response generated. Okay.

And all these code are generated by AI. And let's try to play with it. Preview example generating a moment. Wait. Okay, let's wait a few more minutes because the screen is shining. Wait a little bit. Here's a falling.

So actually after the generation we will see the preview and we can use the AI to link uh to generate all the code and we can link with our metam mask and you are able to mint your NFTTS and I will see the uh I mean I will see the result and show you create HTML. Wait to run it.

Okay. A clean module design t CSS. Okay. This one is working. Let's see the terminals. So let's scratch from the basic ones. Let's first connect to our metam mask. So the first step we will do is we will

have the example of an NFT metadata and this is a backend service and we were able to use this code to set up the back end. Let's go to the terminal and we write the uh respontory back end and have server.j JS copy paste the codes inside and inside this kind of code we will have the constant planet. So this planet will have Mercury and Venus but actually we do not have the name and descriptions here. So one of my colleagues already stores the constant planets and with the

descriptions and the names inside. So we copy paste this code and we go back to server.js JS and we fill in this constant because this will help us to have a nice pictures of Earth and Mars. After we have this kind of code, what we will do is we will go to the back end CD back end and we will use npm to init to join to have some uh modules to help us to understand how we use the express. And then we y we use yarn add express. And now we can use node

server.js. So this I mean with just like three minutes we set up the back end. How we can verify if the back end is working or not. So what we will do is we will add a part. So this part should be 3,000 because this is actually the part we we we added inside the code and we double check with the server. Now this one is not working but we should add the planet slash one and magically we have already add the backend server already up. So it is very simple to use this kind of architecture.

You will see like as a user you need to connect with your metam mask which is the wallet and this kind of metam mask will help you to connect into the front end and with the front end it will call two data. The first data from the back end where the metadata and the pictures where are the listing and the second will go to the NFT smart contract and this kind of contract will stored in Ethereum. So now we have already have the back end to be I mean listed when whenever you call this kind of uh kind of URL you were able to get the JSON of the file and this kind of JSON will be called from the uh smart contract side.

So next next step we want to do is we want to use AI to help us to build up the smart contract. Let's go to here. We create a new repository called contract and then we create a new file called uh simple NFT simple NFT.solidity and we have another prompt. So this prompt is kind of interesting. is said provide an NFT contract written in solidity 0.8.23 23 and override some base UI functions and rename the private and to to some new parameters and let's try with our coage go there.

Mhm. Copy code. Okay. Now Metamas is connected and we have this kind of simple NFTts and we choose 0.8 8.23. We go compile. Okay still

working. Now we have our API and by code. So AI are the interface of the smart contract and we can deploy this smart contract in on Ethereum. We use test net saf. So for the name which should be solar system symbol is solar and the base UI should be this server and we click deploy. We could confirm and we wait for wait for the confirmation and now this kind of smart

contract already listed on Ethereum uh test net. The next step the final step we plan to do is for the front end we also want to use AI to build with the front end. So let's go back to the prompt. So this times we want to use a.js to use react and ether.js that first connect to the metam mask wallet and then we use the voided address I mean to connect into the the ethereum test net. So what we will do is we will go to code stage again and see the code stage is trying to create a lot of stuffs and we have a new server and in this kind of server we're going to host

for our front end. So first we go to this one the MPS create react a it is a framework it's very easy. So, we just let the download start. It will automatically have the framework for the NFT and a framework for the front end. And we need to substitute the AP.js JS actually the JS code to inside the front end uh framework and then we can have the the

code that can connect to the meta mask and also can call the uh for the code that can call the Ethereum test net. Wait a little bit. Hope the network is working. Install We'll wait a little bit.

Hope the network is working. Works installing use. Okay, finally there are 20 268 modules they are installed. Let's go back to the a.js. We substitute the code this one. Copy the code. Substitute inside and then we will be able to see there are two parameters we want to fix. The first one is for the contract address. So actually after we deployed on the simple

NFT.solidity solidity. We already have the uh contract address which is here and we copy paste the contract into the a.js. Here it is. And also we have the second one for the contract API. So after we compiled we already have the uh API here. So we copy copy paste the the smart contract API. So we put it inside this uh contract AI. Now everything is done. So we just want to host this server. Hopefully what we will do is we will go to front end and we add

ether 5.7.2 and we start the server. Then you can see the end of the whole demo. Wait a little bit. downloading.

So there are some download and auto generations but it's better than code by ourselves. I mean it's already a lot of modules. Usually what we want to build a back end build a front end we need to have a lot of modules and we need to code all everything by ourselves. But now with the AI we can just like the AI to be hardworking. It will be much easier for us. Wait a little

bit. Okay. And after we finish the final step will

be we start the server and we will I mean connect everything and you will be able to see how the users can m the NFTts through the whole application. Little bit. the

silver. Okay, now it's wrapping. And the last step, we start the server. Y start. Yes, we want this applications to be a new port. It should be 3001. Start development server. Wait a little bit. Okay, now it's compiled successfully and

this uh server is already open. I mean it's already up. Let's add the P 3001 and let's play with this step 301. Let's go. refresh a little bit. Okay, now it's up and forgive me that there are very few UI here, but the functionality should be working. So, we click connect to the metam mask. It already automatically connect to my metam mask and this is my wave address. And I want to send this uh kind of NFTTS into myself maybe or some any other address also good. I click

mint and then the metamax is jump out and we click confirm and the token mic successfully. Let's check with the test net on the open C. Not this one. Let's try. Oh yeah, 20 seconds go and it's already minted and we can double check all the information from Easter scan. So that's it what I want to demo today.

Thank you very much.