Farcaster Frames Beginner's Guide - Next.js & Local Testing

in this video we're going to take a look at forecaster frames and how you can develop your own frames locally on your machine using nextjs well first what are frames frames are little interactive apps if you will and they're kind of built into warp cast and farcaster farcaster is a lower level like a social media platform and warcast is kind of like a Twitter social media application built on top of foraster so this is what warp cast looks like you can see that it looks a lot like like Twitter you can kind of tweet or cast little messages but what's interesting is the team behind it they've developed a thing called a frame and this is what a frame looks like it's kind of like a image and then you can have little buttons on it like this so you can have a gallery uh you can also join little organizations or newsletters you can follow people through the frames and you can even play little games so this is like a flag game right here if you start the game It'll say who have the flag and you can yint the flag from them and then I'm going to Y the flag and then now says I have the flag and I hold it for a certain amount of times so this is all built using a forecaster frame so you can do a lot with these frames but let's actually take a look at what they really are and before we look into the frame code we're going to explore what a open graph image is first because frames are very much like open graph images now if you take any link for any website and you paste into a chat or anywhere it's going to give you the title the description and it's going to give you this little image this image is called an open graph image or OG image it's like a protocol developed by Facebook back in the day and you can specify on your website that whenever someone pastes the link you want this image to show up now what a frame is it's basically taking these metadata tags and they're adding new metadata tags to it so you can have like a little interactive open graph image so if you can see it looks very similar right this is actually an image right here and you can add little buttons to it and little interactive bits to your open graph image so let's look at a example of a frame it starts with like an open graph image and then you can add a forecaster frame button to it and once you click on that button it hits a back end and the back end can kind of live anywhere you want it to live and the back end will redirect you to another frame or another open graph image and another set of foraster frame buttons and so forth and you can kind of chain and Link all these frames together to make little application so if you click on the fu button it'll go to this Frame if you click on bar it'll give you this one right here and let's take a look at what the initial frame is all a frame is is just some metadata tags that's it so we can take a look at an example in a code so I'm going to open up the repo so for this example I've built it in nextjs but the first frame you can kind of just use a straightup HTML file it doesn't need to be anything special so this is all that is required for an initial frame you have the HTML tag you need a title tag you need a initial metadata tag for the OG image right here so this is the image that shows up in your slack so this is that image that shows up there now these are where the new forecaster metadata tags come up from you'll need a meta tag for FC frame and then you'll need one for the image and then you can do cool things like add a button and when you click on that button it goes and hits an endpoint this endpoint right here actually lives within my nextjs application under the API so it's going to hit the endpoint it's going to hit a server but this can be whatever server you want remember you can have it anywhere else all all you need to do is respond with another frame and we can kind of test this out so if we go to the website so I've deployed that basic HTML file that's this file right here right as you can tell it's very basic but that is all you need for the initial frame warp cast has a little frame validator which is actually really nice you can paste in the page and then when you load it this is what the frame looks like and it'll tell you all the check marks that you have on all the required metadata tags and I've added a button so when I click the button it's going to go and hit my endpoint under my API folder and it's going to return another frame when in this case it's just like another image and then the button changes and I can click on next page again it's going to hit that endpoint again come back going to return a different image going to hit that endpoint again come back going to come back with a different image at the end of the slide you can have a button that redirects you to a different page in this case I'm going to redirect direct to the GitHub repo or you can do a restart and it restarts that little uh little image slider so let's take a look in the code on how we did that so this is the initial frame as we've seen right now it's like a index HTML file and I've put it under the public folder cuz in nextjs anything in the public folder is like a static file so this can be completely static it doesn't need to be anything fancy what you can also do is since you're working with nextjs anyways you can make a basic folder I'm using a new nextjs app router for this example so you make a folder called basic and you put the page. TSX in there and this is what it looks like if you you know nextjs ify that HTML file it's the same thing you just have a metadata tag up here this is that open graph image and under the other object here this is where you put those frame meta tags and the body is basically very simple but this is what you needed to do to translate this HTML file into a nextjs page what's important is this post URL it still needs to go to API basic so if we go into API basic there's a route in here and this is sort of the back end for our little application what happens when you click the button it's going to do a post request to this endpoint which is right here in the post request we're going to get to we're going to see what id is being sent along for the initial frame we're going to send the ID of one and it's going to take that ID of one from the search params and it's going to add a number to it and it's going to return basically just some simple HTML as well you get the HTML tags you get the title tag you get the metadata tags you get this pretty much the same frame information but we just changed the image right here so the frame image changes to park- ID and this ID is just being incremented every time we click the button and when it reaches the last slide or the last ID which is number four it's going to give us a few different buttons it's going to give us one button here and you can have two buttons so for a frame you can have up to four buttons and they can all kind of do different things this one is going to be a link out to the GitHub Rebo and this one is going to start over the little slideshow thing so this is like a very basic example of how to get a frame working now let's take a look at a more advanced example so under the advanced page we have another page here we're using something from coinbase called the onchain kit and it's going to give you some little helpers to make your meta tags so this giit Frame metadata you can put your buttons in here you can specify the image it's going to help you cut down down on the code that you have to write but the important part is this post URL is going to hit a new endpoint called API Advanced and it's another different API that lives in the advanced folder so in this example we're going to enter in an email so let's actually take a look at what it looks like so if we do Advanced this is already live I'm going to reload it so this is the initial slide and this is what it's going to do you can kind of enter in your email I'm not really sure if this is a legit use of a frame but it's something you could theoretically do you can show them an input the user can input an email and the nice part is it's going to show up right on their feed so you don't have to go to another website to enter an email or to gather interactions from the user it happens right here in your feed right you can like mint an nft if you wanted to you can get their engagement right then and there there's no redirecting to anywhere else so let's pretend that this is a good idea and that you can enter your email so what happens if you enter a bad email and you hit sign up well I'm going to hit that endpoint and it's going to say a valid email as required and since we're using nextjs we can kind of generate these little OG images CU nextjs onver cell they have like a little image generation helper called image resp response so let's take a look at the advanced API and see what's happening here it's going to be the post request sale we can get the input text off of this body now in foraster there's untrusted data and there's trusted data because down in the weeds of forecaster it's built on top of ethereum so there's crypto involved and there's cryptographic signatures and what you actually want to do is get trusted data from the body but that requires you to run like a hub and all this other stuff that kind of is out of the scope for this example the right way to do it is to use the trusted data to get this information since this is just a basic example I'm going to use the untrusted data and I'm going to get the input text from it so this is that text box we fill in and here's where we do some simple rejects to see if it's a valid email and if it's a valid email then we go on if it's not a valid email we're going to say valid email required ired and what that is going to do that's going to hit this other route under OG and this code is basically copied from nextjs and it's kind of how you can on the Fly generate these OG images so on the fly I can take in this title text and generate an OG image on verell and it's going to give me this valid email required and if I type in a valid email so test email.com we try again it's going to say sign up successful and it just prints out your email you can kind of make it do whatever you want and if it's successful I'll say sign up successful and I'll put in their email address here it's going to hit the OG image generation and it's going to return with this image here and that's all there is to this little frame this warcast Frame validator it only works on sites that have been published so it needs to be a live site but what if you want to Tinker around with a frame that you're working on locally well you can do that pretty easily as well I'm going to show you how right now this is my nextjs folder and we're going to do a mpm run Dev on it and it's going to open up the nextjs app on Local Host 3000 all right so now this is running locally on my machine but if I try to put this URL into this validator it's not going to work CU I'm on Local Host and if I go to let's say the the basic this is the basic frame with the HTML tags in it and you can kind of take a look at the tags by viewing the page Source if you look for like the OG image here is where those meta tags are at and you can see here are the faster frame tags right here all right so how can we test this locally we're going to need to clone a repo called onchain kit and I've already done that onchain kit right here this is the repo you're going to need to clone down locally and you're going to be using what's called frame gear so once you have clone down onchain kit you want to CD into frame gear you'll do mpm install which I've already done and then you do an mpm run Dev inside of the frame gear folder and it's going to spin up like another little nextjs local server but this time it'll be Local Host 1337 all right so this is this is frame gear it's very much similar to this validator but you can use your local host on here so if I take copy this and paste it into the frame gear and it fetch you can see that it does the same thing let me hide myself real quick you can see all the meta tags that are being available and you want them to be all green then when you go through the different end points it'll tell you which image is being used and what the button is and what the A and what the endpoint is associated with that button so if we want to do the advanced example and let's say we want to change something right let's say we want to change this button from sign up to something else we're going to go to the metadata for the advanced example and you can say sign up now and add a few more explanation points and then if you go back here you just have to do fetch again and you see real time you get a little cool local environment to test all these out on and you can even test out those apis that you work on so if you do if you want to change the text on there you can say invalid email for example right it's going to hit this local route it's going to generate that OG image and you can see what happens so we're going to do fetch again and put a bad email you can say now that that message has changed to invalid email and this is how you locally develop your little frames and since it's all based on a social network you can do things like do giveaways or something right you can make a frame that says if you are a follower of mine I can give you something special if you want to enter this giveaway follow me and then you can check because it's kind of on a decentralized Network where you can everybody can access that data you can check are they actually a follower of mine if they are enter them into your special contest or whatever if you would like to join warcast and check all this out I'll leave a little Link in the description so you can sign up if this video was helpful to you give it a like And subscribe to the channel thanks

Channel: Code Bushi

Views: 1,638

Keywords:

Id: g_pkATT8pYU

Length: 15min 19sec (919 seconds)

Published: Sat Mar 02 2024