How to Make a Frame on Farcaster

hey everyone my name is Steve and today I'm going to show you how to create a frame on foraster now if you're not sure what those two things are let me lay it out real quick foraster is a decentralized social media network if you haven't checked it out I would highly recommend doing that at farcaster doxyz or go ahead signing up at warp cast.com now frames are a new way to interact with content in a social media feed it was implemented by the forecaster team and essentially it takes advantage of the open graph standard you know when you usually post like a link to a blog or a website it's going to show like a little preview wherever you post it could be Twitter could be your iMessages or whatever and that preview is basically metadata tags in the HTML that describe the name of the website the title description and maybe an image so forecaster was basically like what if we took this standard and implemented our own little logic in here and Implement buttons and post URLs and actually make these frames interactive that's exactly what they are so here's an example frame that myself Justin and Mar from the piñata team built and it's basically like an emoji chat you just click Start Emoji chatting and very much like T9 when you had to press all those buttons on a flip phone it's like this but you basically press emojis so I can basically click this it's going to put an emoji in the chat did a football let's do another one football and wine that sounds cool and then just send it and it's going to show us like a cool little ad that we're able to put in there and then click see messages and what's really unique about this is that it's implementing a lot of the information that is available on the forecast or network such as my username and my profile picture just basically my identity this is like an open data system for social media and makes this whole concept really powerful and so today I'm going to show you how to build this one it's really simple and it's just going to be a series of images the purpose is just to show you the basic structure of a frame how they work exactly and how to get started and from there you can do way more creative things with them so for instance uh this is just our little open graph image you can paste in your Ro hit begin and it's basically going to do kind of like a comic book style flip through of some pages very cool and then it's going to have a little outgoing link so we can click on visit Cosmic cowboys. cloud and it's going to take us that website pretty sweet now in order to get started on this tutorial you're going to need a few things uh you are going to probably need a little bit of Dev experience with front end like nextjs apps that's probably the easiest way to do this but there are other ways to go about it you're probably going to need you know your standard code editor at least node version 18 installed in your machine it also helps to have any kind of client to test API calls so that could be Postman or my personal favorite HTT Pi another thing that you'll find helpful in this tutorial is a piñata account all those images you just saw and all that media it's great use of Pata and ipfs and so once you sign into your pinata account all you really have to do is just click on the upload button I'm going to click upload folder I'm going to upload this folder with all my images there we go and once it's uploaded I'll have the CID which I'll copy later and the other thing I'm going to need is my Gateway I can click on this gateways page here I'm going to have this gateways domain go ahead and copy and save that we're going to use that later in the tutorial all right so we've got all of our tools set up now it's actually time to start building this project so to do that go ahead and go to your terminal and we're going to run MPX create next app at latest and we'll call this Frame tutorial really call it whatever you want and we're going to basically select all the defaults here we're going to use typescript Tailwind app router all that stuff it's going to go ahead and install all our dependencies now we're going to go ahead and go into frame tutorial make sure you spell it right there we go and we're also going to install a couple things so we're going to in just do mpm install just to install all the dependencies the other thing we're going to install is coinbase's onchain kit which is a great little library for handling far cast frames let's just do npm install coinbase onchain Kit all right so everything's ready now we can go ahead and open this with our code editor of choice that could be vs code or whatever you want to use we're in the project and you go ahead and see the structure of this we go ahead and have a app folder with a layout and a page TSX so first thing we want to do is go ahead and actually a env. looc file and in here we're going to put in a couple variables first one is going to be our next public Gateway URL this is going to be the domain of that Gateway that you saw earlier so it's going to be https followed by the domain so in my case it's plum peculiar Fox 986 then we want to do the next public base URL this is going to be your actual versel domain when you publish the website for now we can just use Local Host so HTTP localhost 3000 there we go now we want to go ahead and go to the page. TSX file and just go ahead and wipe everything out of the file and instead we're going to put this in here and just a quick explanation of what's Happening Here we have the getframe metadata from the onchain kit this is really helpful for just getting our project started and getting the frame started and it's going to create a button called begin and it's going to have a image URL and you can see here that it's going to be the Gateway URL that we have followed by the CID and the 0.png which is the first file in that folder next we're going to have a endpoint that is called the post URL inside of frames whenever you click on something the next thing is going to do is send a post request to that URL and you want to basically send information back to the frame with the new screen and Etc so in this case we go ahead and do we're going to have a API route called frame and we're going to also have a query of ID equals 1 and we're also going to add just some basic metadata here and this is some information about it so if we post this link link somewhere else we'll still get like a nice little open graph image of it next thing we're to do is go ahead and go to our layout. TSX and we're just going to put in something a little bit simpler nothing too crazy all of our main stuff regards to our metadata is in our page file and this is all we really need in these two Fallout files now the next thing we need to do is actually go ahead and make that API route that I described earlier so to do that we're going to go into the app folder and we're going to make a new folder called API and we're going to make a new directory called frame and inside of there we're going to do a route. TS so it should look something like that go ahead and go in here and we're go ahead and paste this code in and let me explain a little bit what's going on here just so you're not too confused What's Happening Here is we're basically creating a API endpoint inside of next and it's going to basically return a response uh so if it gets a post request it's going to take the request and then send something else in response and in here we're going to grab the search params so you realize that we did the question mark ID equals 1 that's what we're grabbing we're going to grab the ID and with that we're going to turn it into a number and we can basically do like a next ID and what that's going to do is allow us to kind of iterate through that folder really easily so you can see here in this response here this is the initial response this is frame ID right the number one that we have and these are the special foraster Frame metad data tag properties so we can see here we have the type of frame and this is going to be vne next we have an image which we're basically going to process that image we had earlier from the C we're also going to have the button so button number one is going to do have the content of next page and we're also going to have the post URL and this is basically going to go to the next API route and what's really cool with this is that we can essentially just use the next ID where we increment that ID query parameter and just kind of feed it into itself but we're still basically feeding it new images which is is really cool and finally we're going to have you know a conditional statement here if it equals s which is the very last image we have we're going to basically have something different we're going to have two buttons button one button two and in button one we're going to say visit Cosmic cowboys. cloud and that's going to be an action of postore redirect and that's going to basically redirect the user to a new website and we're also going to have another one for how to do this tutorial we have a link to the blog post by the way if you want to follow along on a written format blog post down below check it out now one last thing you'll see here that the post URL of our end is called API slend so let's go ahead and make that route now go into API do end and we'll do route. TS there we go now in this .ts endpoint we're going to do something very similar where we're going to return some information based on a post request and it's going to be pretty simple we're going to take the data inbound and something that's really cool about this whole forecaster frame business business is that whenever you're clicking on a button and it's sending a post request from forecaster to your server forecaster is sending a payload of Json that has information about the user and what buttons they clicked and so what we're doing here is we're taking the data we're parsing it and we're saying data. untrusted data. button index is our button ID and this is how we tell if they press button one or button two on that very last slide very helpful and so we do a little bit of conditional based on whether they did a button ID one or button ID 2 we're basically going to declare a path and with this path we're going to do a redirect and set the location the headers as well so we're taking our based URL doing a next response. redirect B and then we'll do a path now you realize that we have you know home which is just slash and then P Cosmic Cowboys that's a page we haven't made yet so let's go make that real quick it's really simple inside inside our app folder we have to do is just do a new folder called Cosmic Cowboys and then inside there we'll do a page. TSX it do the same thing for Pata Cloud there we go and inside of these we don't really actually need anything but just in case someone does happen to see the page we're going to put something that says redirecting dot dot dot they shouldn't actually see it because it's going to be much much faster than that so I'll just paste that in there let's do that for this one too and you can see you're just a default page redirecting it's all we need now you'll notice what we didn't do is in that redirect file we didn't redirect them to an external URL and that is because forecaster requires that the redirect has to be the same host as what as your frame so kind of an easy way around that is to basically redirect the person to a different page on your app and then have your app redirect them from that page to the external website and we're going to do that inside of the nextjs config so we're going to go in here to next. config.js and we're just go ahead and paste in the following so you can see here we have a function called async redirects with a return and basically we'll say if the source is/ Cosmic Cowboys we're going to shoot them to Cosmic cowboys. Cloud if their source is pinata Cloud then we're going to send them to pat. cloud/ blog and then the link to this blog post really cool now everything's up and running what's really helpful and what you may want to do is spin up your local server and try hitting some of these end points do a post to your base URL Local Host colon 3000 Port 3000 SL API slf frame question mark ID equals 1 and just see what you get back make sure you're getting those header tags back and once you have that up and running you can basically take this project upload it to verell put in your EnV variables and also just make sure to update your base URL because that's going to be based on the domain that you're given by buy ver cell now to actually test this Frame definitely go to warcast docomo for a developers portal that allows you to test frames and it's really really nice because we can basically paste in our link here load it up and it's going to give us what we're rendering right now what the next frame is going to be and it gives us all the metadata information that we put into our meta tags and gives us a green light if it's actually being loaded so we can hit begin go next page you can see it's updating everything here we get to probably that last page is going to see we have frame cter button one framec button two we can have up to four buttons so it's really nice and we'll just go ahead and make sure it's working click on the link here there we go well that wraps it up for this tutorial I hope you all enjoyed it if you have any thoughts comments or questions feel free to leave down in the comments below I always try to respond and get in touch with people and we're really excited about frames we want to see what you're building if you've built a frame go ahead and post it down below in the comments we want to see that too so until next time happy pitting [Music] can't

Channel: Pinata

Views: 8,976

Keywords:

Id: wUt5NjXHSO4

Length: 13min 5sec (785 seconds)

Published: Fri Feb 02 2024