This last Friday, the Farcaster team released something cool: frames.
Frames are just "little" web apps that you can build if you know how to code a bit of HTML and JS and generate some images (on the fly or with your preferred tool).
These apps' magic comes from hacking the open graph from Meta (aka Facebook). What they have done is really smart: they've added a few custom meta-tags that allow you to add functionality to any URL posted into the Farcaster ecosystem.
If you want to know all the details, just read the full documentation, but basically, you add 3 new tags into your HTML head:
"fc:frame": specifies which version of the frames you are using
"fc:frame:image": the image that will be shown to the users in their apps.
"fc:frame:button:N": the Button (or buttons, up to 4) to be created by the Farcaster client so people can interact with your web app.
"fc:frame:post_url": and a link where you will get a payload with the button that the user clicked.
And this is magical. Why? You can create web apps really quickly, but let's go over something else: what if you get not only the button that the user clicked but also real proof that you can validate against any of the nodes of Farcaster to validate the real user and not a fake bot? That's even better, and it allows you to do things like minting NFTs directly in the Farcaster ecosystem.
As this was released on Friday, I couldn't resist, and instead of watching some new Netflix shows, I decided to try it and build something.
Rock, paper, scissors game
Friday night was about finding my way with the requisites and building something to work. I created a proof of concept that showed only one button and that when you click it, you get another image. Nothing useful, but it worked.
When I was satisfied and going to bed, it occurred to me that I could do better, and suddenly, the game rock, paper, scissors looked like a nice project to publish.
The idea is to show a welcome image, just the rock, paper, and scissors. Then, three buttons with the names of rock, paper, and scissors. If you click one of them, the chosen option is sent to my API. The API will randomly pick one of the three options and see who wins. Based on that, the API returns the new image to show the user so she can know if she won.
Technologies that I used to create it
For creating the images, I've used Inkscape and some SVGs from Openmoji
Then, for the API and the website, I chose NuxtJS. The reason is that I love Vue, and it is one of those tools that can help you build a site in minutes easily. The best part is that it has SSR, so you can write your own APIs directly, managing the back and the front in only one place.
The web app has only two elements: the web page with its farcaster meta tags and the callback post API endpoint, where I will get the buttons that the user has clicked.
With all this up and running, I deployed it to Vercel and got it running. At this point, I wanted to test something else: saving the number of times a farcaster user wins, loses, and gets a tie with the machine. To do this, I have used the Vercel kv Redis solution.
After publishing the game, Farcaster's users started to play, and in a matter of minutes, I ran out of queries against Redis because I'm using the free plan :-) 3000 queries were done in a matter of minutes, so the game got some really good traction. Luckily, this limit is reset every day, so today you can play it until I run out again of queries 😋
https://warpcast.com/teleyinex.eth/0x3eb254ce
Choose your own adventure
With the previous game already finished, I started to see a pattern: generating images on the fly will be a problem in general because the server takes time to connect to other services like Redis or another DB, so adding on top of that generating images will make people think that your app is not working. The solution is simple: pregenerate all the images at once.
To do that, I created a Choose Your Own Adventure game. The idea was to user AI to create the story, so I jumped into chatGPT and asked a story for an elf, crawling a dungeon. The AI returned a JSON that had all the options, so all that was left to me was to create a Python script that would generate images with the written text from that JSON file.
Technologies I used for Choose Your Own Adventure
For the images, my beloved Python was the choice. I used Pillow, and after figuring out how to split the lines of text to fit the size of the frame, I got something up and running easily.
Now it was time to write a new frame with NuxtJS. Re-using part of the rock, paper, scissors frame, I was able to create this game quickly. All I had to do was use the Redis KV solution from Vercel to save the last step chosen by the user to present the next image and which option she has to advance on her adventure.
Now go and play it: https://warpcast.com/teleyinex.eth/0xb36887c2
Lessons learned
I think the Farcaster team has done something really unique and smart here. These apps could bring lots of devs into the Farcaster ecosystem because it's damn easy to create a frame. Moreover, the possibilities are endless with all the web3 stuff you can do. However, there are some issues they will need to address for future versions:
Loading states: if your API is slow, you get the impression that nothing is happening. The clients usually blur the image, but you don't know if it is loading. It will be cool to have something like that in new versions.
Getting a first POST as soon as the user visualizes the frame: why? For example, my Choose Your Own Adventure game will allow me to show the user her last step. This will allow users to resume any frame where they left it, which I think is pretty nice.
My next steps involve using the web3 aspect of it. I've not used it because it involves connecting through a hub, and the prices for hobbyists like me are too high. Hopefully, more hub runners will soon offer APIs with a free plan.
- Loading comments...