Miniapps in Scaffold-ETH - BuidlGuidl's Builder Bootcamp

Transcript

[Music] Hello everybody. Can you hear me?  Okay. Um, thank you for equipping me. This process reminded me of uh getting prepared  for a dive when your mate checks your equipment before you go into the water. So let's  dive into it. We are coming now to the I think to the to the most exciting part  of this like you heard about the scaffold, you heard about the mini apps and I'm going to  show you how what is the fastest way to build and deploy a mini app using scaffold diff and the  extension I've developed the miniapp extension.

And uh yeah, before we start, raise your hand  if you have deployed the mini app already. Okay, good. Raise your hand if you deploy the smart  contract. That's better. And raise your hand if you want to deploy a mini app. I want to  deploy one, too. Great. Okay, let's do it. Uh if you've been here yesterday,  uh there was a great talk by Oops, just a second. Let me figure this  out. Okay, got it. Great talk by uh Jeffrey Schultz from Rare Skills and he  said you have to memorize the main things

to be an effective developer. And the one  thing I want you to memorize today is this comment, how to launch a new uh mini app uh  deployment. So let's try to do it. Hopefully uh we have good enough net to do it. So that's just a standard uh scaffolded  deployment with the mini app.

Okay, that's how I go back to this. And while  it deploys, I I want to tell you a little bit about myself. I started building uh frames  on Farcaster a bit more than a year ago, maybe a year and a half in March last year.  And some of them became quite quite popular. As you can see, my mini apps or my frames were  used 13 million times by 87,000 unique users. Um and that's what Farcaster provides you  like a direct access to the audience. And if something what you build is resonate with  the people you can get results like this.

But uh about a year ago I realized that my biggest  constraint is that I know nothing about smart contracts. I never developed a in solidity and uh  yeah I have to sync this one. Yeah. So a year ago, I walked into the uh beetlegiddle uh belegidd  what is it called boot camp at the def uh defcon in Bangkok and uh it was amazing like it was so  easy to to learn the things with the scaffold with speedrun Ethereum. So I want to thank like uh all  the beg team and especially Austin for building all these tools, all this stuff which helps  a lot in in learning how to code in solidity

and here I am one year later standing  in front of you on the stage trying to tell you how to develop mini apps.  Okay. Uh, I don't know. Have you have you tried to install the the mini app  on your computers with the comment? Okay. So, if you if you want to follow  what I'm going to do here on the stage, please try to do it. Here is the comment. Yeah, this one. It will be easier. And  in about like 20 minutes probably you will have your first mini app  deployed if you never done so.

Okay. Can go. Okay. So, what is what is inside? It's  uh yeah, thanks to Chris for coming up with this title for this slide. Yeah, we  were doing a test run in the morning and uh so basically it uh gives you a full access to  scaffold what you I hope already familiar with it uh helps you it creates the forecaster manifest  for you that's what horsefax was showing here before it also gener it also generates all  the required metatex for for the mini app it

uh gives you like a very basic uh open graph image  generator So you can like uh develop it further. And what is very important it also adds a ponder  indexer to it to the whole setup because what I realized like my first mini app with the smart  contract I I was trying just to use the calls to the smart contract to read from it but when you  build like interactive uh app what works with many users it's it's really problematic to to fetch all  the data from the contract directly all the time. Then I started to use the graph and uh well  it's easy to set up. It's easy to connect to the mini app but sometimes you get like huge  delays from the graph like sometimes you get

it like right away but sometimes it can be like  15 minutes delay. So if you are doing something what you want to display to the user right away  it will not work. And then I discovered ponder and and ponder is a great tool. Uh anybody  familiar with ponder? Yeah of Okay, good. So, it it it runs on your local machine or on on  your server or where you deploy it. It's totally your deployment and it provides results right  away. So, it's like a fractions of the second from the right to the contract till you get it  into your SQL and it's accessible by SQL. Um, okay. So hopefully it's installed on your  machine already too. Can you read the text?

Make it bigger like this. Is it good? Okay. So um  the basic install is uh same as with the scaffold. You will need a little bit more screens because  we have additional stuff like ponder. So on the first screen we will do yarn chain that  will deploy our local hardhead chain. Then on the second one we will do yarn deploy.

And basically the extension reuses the same  smart contract which is available in the scaffold ETH by default. Very simple contract  with one uh write comment to set a greeting. On the third screen we're going to do yarn start. That will start u the nextjs server. Now we will need the fourth screen  where we do yarn ponder defaf and that will start the ponder server.

Now we need a fifth screen where we will make uh  the ponder available externally that we will need I mean we will uh we can still develop and test  things locally without using enro and making it available externally. This thing we will need  to make it uh visible from the forecaster. And one more angro to make the  um the mini map itself available. Okay. So now if we go to the Okay, probably  I will need to move this screen here. Yeah.

So that's like the basic screen of the  mini app. It just set has um very simple interface to set a greeting. We will grab some  fonts from the faucet and uh do hello world. As as you can see, ponder already indexed this uh call to the contract and uh rendered it  into the client. Uh so next thing we want to do is to make it available make it visible  on the forecaster itself as the mini app.

And to do that, we will have to  go to the uh Farcaster developer tools. So you go to the make it bigger  like this. Farcaster developers. If you don't see it on your Farcaster  screen, you go to settings. Oops. Okay, we are back. You go to settings here.  Click on developer tools and turn them on. So if you turn them off, this thing from the menu  disappears. You turn them on again, it comes back.

So you go here and you can go to embed tool and here we will enter the URL of the of  the mini app which is that will be the uh the URL you deployed to Grog. Is it me touching something or Okay. Okay.  And as you can see now the embed is not valid because we still need to do one thing. Oh, is  it? So we're getting the uh the values but we

are not getting the images because the URL  is still set to local host. So at this stage I'll just reuse this window  to launch the the editor. And uh okay, make it big like this. We don't  need this right now. We go to packages next.js.

GS and we have an example here. We save  it as um why don't I see the menu here. So it should be command shift s I believe.  No. Okay. Cancel. We save it as end local for our local development. [Music] And what  we do here, we add the uh domain of the of the uh minab and also the domain of the ponder.

[Music] So basically once you do these  settings and you go back to the u uh embed tool in forecaster refetatch it okay and as you can see we already have the uh image which already rendered with  the with the greeting we set [Music] and all the other settings.

[Music] And if we click here on this button,  we should see the preview of the mini app. with everything rendered except it will not  have access to the uh to the chain because it's the local chain I'm running on my my  machine right now. So and if we uh deploy it with the base or or any other chain it will be  accessible as inside the mini app and this is now uh can be used by anybody on the forecaster and u  so it has like mini app demo page in the menu and this one will load all the content context  information what horsefax was talking out.

It takes a while to to build this pages  because they're not pre-built here, but like if you Yeah. So, it has all the context, all the user information. Let's make it a bit  bigger. So, you see it says FID, username, launch context. if it was launched from within  a post, it will show you where it was like the the ID of the post it was launched from. And also  if uh uh all the associated information with the post. So for example, if you want to display  some statistical information about the user uh who is the author of the post, you can  fetch this information right away when the uh mini app is launched. It would also show  you what the uh client is. In this case,

it's warpcast. If it was opened from the  base app, it will be a different FID and you can use it also. So for example, I'm  using it in one of the mini apps where uh I have the share button. So if the user opened  this mini app from the Farcaster, I would say share on forecaster. But if he opened it from  the base, the button would say share on base. And here I also added some uh demo to  test what is available the functions what are available from the farcaster.  In this case already the haptics are not available because it's running on the  on the desktop. But on the mobile like if I open it from my phone you will  be able to test the haptic buttons.

Okay, let's start uh let's try to  deploy the smart contract on base uh and see if that works and we can use the  mini app inside the forecaster fully. Oops. Okay. In order to do that, we need to do two  things. We have to find scaffold config file. Change the chain to base and hard head config.

and change this to base two. So now if you do yarn deploy it will say I have no account.  So we do yarn account generate [Music] set some very secure password. Oops. Okay. I will need to send  some funds to this address.

Please [Music] [Music] Okay. So, we should be good now. [Music]

Oops. Okay. [Music] Let's do yarn verify. We still have five minutes. Okay. Um after that one thing we need to do we  have to go to the ponder setup in the uh mini app.

and add uh RPC endpoint for  the base for the base chain. And if we did everything  correctly, we should be able to Okay. Where is the ponder?

Okay. What did I did wrong? on the target networks. You're missing a bracket at the end of scaffold config. You  need scaffold config. Thank you. Okay, got it.

Okay, you see? And once you fix it, thank  you very much. Everything starts to work. So, now as you can see, so it loaded up and  it's already loads the wallet from the Farcaster. So that's the uh the the Farcaster  wallet. And uh if we go back to the main page, [Music] hello world.

And yeah, so ponder index it. It's  on a real chain and that's already a working mini app. So we can see  it uh shows up. Uh if if you want to share it like if you want to  make it available for everybody. [Music] We just go to far caster and cast it because it runs from the local machine. It's  a bit slower but yeah here. So the image is

rendered and if I cast it, everybody on the far  custer can interact with it. Hopefully for some people it will work with this slow connection. So  guys here it is within 30 minutes we deployed a fully working mini app. Uh like the next  step is to deploy the uh the nextjs and the ponder to the server not to run it from  the local machine. It will be run reliably. [Music] Okay. And it's rendered in my fit.

So I think that's it what I have. If you uh want  to register on Farcaster, you can use the QR code on the left. If you want to follow me, you can use  this one on the right. Thank you very much. Any questions? In your opinion, you've had a few mini  apps that have achieved a little bit of uh virality and you've gotten some users. What  do you think the secret is to to get users? To

get users, that's a good one. Do something what  they need. Like my most successful mini apps uh and frames actually came as ideas from the  users themselves. They said, "Oh, you know what? We need something what would show us this and  this and this in a very easy to consume form, easy to understand form." I was like,  "Who would need that?" And that frame had like 6 million users. So that's uh that  was the idea like you you and like the reason why I built this stuff it makes you deploy a  new mini app like super easy like as you can see like in 30 minutes you do some changes to  the smart contract you change a little bit the uh the uh the front end and it flies like and  you can uh test very quick if it resonates

with the users or not. So like answer your  question you fail fast build a lot. Yeah, one really great presentation, Nick. One of the  things that happens with many apps is that there's uh like very simple uh demo apps, but then your  scaffolding provides functionality above and beyond those demo apps. uh what is some of the  functionality that you think is uh underutilized but that exists in your scaffolding right now?  So what is the what what is some functionality that's in your scaffolded app that you think  is underutilized or more mini app developers could use in the scaffold mini app? Yeah, in your  scaffold. Yeah, I think like there is a great job

was done to develop the UI components.  So for example, if you if you look at Oops. Yeah. Where is it? No,  not this one. Sorry guys. Just want to show you this uh component here.  Yeah. So, this one is in the feed. If I click on it, it should open up here. Yeah. Oh,  somebody already said it. You see? Hello, amazing builder. Okay, cool. So for example  this component here is uh provided by scaffold UI and uh yeah you can easily use it to to set a  value to the transaction or something like that.

Also scaffold this has has very welldeveloped  functions to write to the contract and read to the contract makes your life really really easy.  So these are the things what you get right away you don't need to worry about them. So basically  like if you use it, you can only concentrate on your stuff. Yeah. With all of this taken care of.  Yeah. Thanks so much. Okay. Thank you very much. [Music]