Farcaster Onboarding

Transcript

Hello GM, you're muted, Seline. I don't know if you're speaking. Yeah, of course. Of course. I was speaking. Uh for nothing. Um so yeah, I just wait. Let's just wait a bit. Wow, that's going to be complicated decision. Oh, good. That's fine. So, I removing note take her as usual. No here. Uh, all right. Yes. And I will put a message

uh to say we are live. All right. Meet you guys. [Music] Hope you you enjoy the um the session yesterday. If you have any issue, don't hesitate to ping me. Um normally all people who who file in the on boarding form uh who are are actually into the notion but I will

just send again the notion in case of uh like this you have access to all alpha. Mhm. Um so like just in case of All right. Um so I put the message some people people will just arrive like I think we will be around yeah 35 50 something yeah 40 something like this and it's actually the first time they will experiment forecaster because they are totally new into web 3 but they already heard about forecaster because of you

I was a bit choked cheddar. Yeah, a few uh already got an account and I was like, "Oh, nice. What the That's amazing." Yeah. Ah, yes. Feel free to to put your your profile. So, on my side, I will do like a start starter pack so you will be able to follow everyone in one click. No worries. Right. Yes. Yeah.

All right. Um, so about the agenda, I uh I put something into our chat uh which is related to Yes. First of all, uh we we want to to show you that uh how you can create like an account. Uh, I don't remember if uh right now we need a link, a navigation link or whatever or like uh pay $5 or I I don't know what's because everything just changing.

Yeah. Uh I mean I think uh if you don't have an invite code I'm not sure if they are still running some um um how can I say like they used to run some like regional um free on boarding. Uh I'm not sure if there are any countries still in that process. Um they're working to have like the on boarding free for everybody but I know that it's not live yet. Uh, so either you got an invite code and I'm not sure Seline if you Ted sent shared some with you. Uh, so I asked her and I'm waiting for the reply because last time we we got we have done that. So I got some

code um free codes, free access code for the community. Um, but I also have like I pay myself I don't know $100 something like this uh to to provide some code for the community. Um, so I have like 20 invitation uh something like this. So uh feel free to ping me uh after the session uh or during the session to say yes I want um a forecaster account and I will provide you an avitation link just ping me on telegram my telegram send again Wait wait wait.

It's not Telegram. It's um just ping me on Telegram. I don't know what's my my link. All right. Um so yes, probably if uh you can share your screen or I can I can do it otherwise um is like more to showcasing the the platform itself. Um like actually as I mentioned a lot of people from Dup already have an account on forecaster because they are also experimenting some stuff like creating mini apps. Uh so we will we will talk about that right now like what is forecaster itself and um and you we will go into uh the social feed to explore

how to really navigate um into mini apps on forecaster. So yes, let's let's talk right now with what is forecaster. Amazing. Uh let me share my screen so that is it's also visual. I think it's better. Sure. I think I don't know. Can can you see my screen now? Yeah, sure. Amazing. So Parkcaster is a first of all I'm Lemonit Parkcaster builder web3 builder uh running a community in Rome. uh in the past 3 years we've been working and educating and on boarding ton of developers in the Ethereum space um and I'm also running a product studio with

which we are building consumer crypto application especially on forecaster and um uh let's let's talk about forecaster which is I mention something um actually uh just to let you know uh lemon one of the best um builder inside the ecosystem. Um so it is really I think it's one of the best um also educator um in the sense of being straightforward like abstract all complexity um so you can build like consumer application pretty fast um thanks to lemon lemon itself and on

palent protocol I think you are like two or third I don't remember but Yeah, it's pretty it's pretty cool to see that. I don't I've been not been checking. Oh, I need to sign in. Uh I'm not sure if Oh, I'm for it now. I'm Yeah. So, we have a top five builder inside the ecosystem here. So, don't hesitate to to ask any question. Yeah, 100%. Like you you have my forecaster account. I'm also in the telegram chat always by money. So for any question, doubts, uh ideas, feedbacks on your project like feel free to reach out. I'm I'm happy, super happy to help and and thank you for the nice words, uh Seline.

Uh I appreciate your your work as well a lot. Um yeah, I mean about forecaster, it's a decentralized social network, but why does this matter? Because on traditional social network you're like the relationship between a creator a user and their followers their connections on the platform is intermediated by a um centralized entity that that we trust you know we we are trusting uh x WhatsApp uh even telegram uh all these you know platform that we use on a daily basis to allow us being in touch with our friends our um co-workers uh our connections in general

uh online. Uh and of course that comes with the potential issues because it's up to them to allow us being in touch with them. Uh it happens it might happen that they ban you, they suspend you, uh and uh especially if you're you know uh building maybe a business uh on on these social networks. If you're using it like for work reason, it's it might impact you uh very very bad. And uh the main thing about forecaster in it is like they are trying uh to disintermediate these relationships between creators and uh uh their audience. Uh again when I say creator it's any kind of user in the

platform that is just you know sharing thoughts, reaching out to their friends, co-workers, whatever. And how are they doing it? like they are building this social network on top of uh Ethereum. So every account is an Ethereum uh wallet behind the scenes that is owning the profile. So in in my case on my wallet I am the owner of lemon.it. This is my handle my username and together with my username I also get an an FID. The FID is my ID in the network. So, as long as anybody can claim that same ID and username, I'm the only owner of uh this account and so I'm the only one that is

able to um you know publish content with this account, read uh content from other valid accounts. That's exactly like what they're trying to do. So there's no way in which the forecaster company Merkel is called Merkel manufacturing uh can uh you know stop uh me from accessing my profile my identity and and my followers. This because then even even the content the followers the reactions they are not really on chain. So they are not stored on the blockchain on um uh but they're stored on a distributed database. So there's not one single database. What's happening there?

uh oh nice that there's not one single database uh where miracle and forecaster is storing this data but it's it's a bunch of much like Ethereum as a a set of nodes that is uh you know syncing the network validating the transactions the same thing kind of happened with forecaster where there are multiple nodes storing the data about my content my followers who is replying lying to my uh content who is uh reposting that and for this reason like there's no single point of failure. there's nobody that can prevent me in accessing um my audience and my friends because even if

for caster XYZ this website which also has a mobile app even if they want to prevent me on accessing uh you know my own page and uh and going here and uh clicking like whatever because they ban me there there could be another client that is reading from the same decentralized and open data uh uh uh data structure such as Coinbase wallet. Coinbase wallet is one of the latest uh forecaster client. So on Coinbase wallet for example, you can access um you can link your forecaster account. And this means that if forecaster XYZ suspends me, bans me, I can still post on forecaster and read stuff on forecaster

even if um you know on on the actual client I I I cannot do it. uh and that's how they are disintermediating this relationship basically. Yeah. And in web three as you mentioned like in fact on my side I saw I saw a lot of uh brand accounts like company accounts that have been banned from X um for useless stuff and so actually Farcaster is a real real great option because you can never be banned. So it's pretty pretty a lot of companies are right now using forecaster into the ecosystem.

Exactly. And and you you can compare it to email. How does email work? It's built on an open protocol SMTP. Simple message uh simple message. Yeah. I don't remember the actual but it's the the protocol running uh you know all the email servers and u I can use multiple clients. I can use Gmail, I can use Outlook, I can use uh uh I don't know, Yahoo, like different interfaces. Uh but with these interfaces, I I can contact any of my friends regardless of where I'm contacting them from because like the protocol in which they are on which they are built is is open. Uh it's kind of like the same thing for for castering here. Uh how does it work? So forecaster

XYZ again is the main client. You have a a nom feed like very similar to to Twitter. Um you have your own notifications tab where people can you know mention you you can check like what's happening. You have direct cast which are private messages. Uh you can uh you know explore users channels. Uh channels are actually something different from Twitter because like Twitter doesn't have it. It's very close to um maybe like similar to the Reddit experience where you can have channels dedicated to specific topics. So there's one channel uh that is called founders.

So people in here can post I mean everything but usually they post content that is uh related to the founders topic there. There's one about base, there's one for product, there's one even from Italy. So whenever I'm posting something about my country, my city, stuff that organize, I'm using this channel because people can follow specific channels and according to what they follow um the home feed will be different because again uh on this feed I'm not only seeing people just casting without any channel like here uh Prosp uh but I can also see people casting about uh casting in specific channels And according to

which channel I'm interested in. What is casting? What what is ah casting? Sorry. Sorry. Uh casting is like tweeting. Yeah. Sorry. Uh and you know retweet it's recast. Uh because on on forecaster that's you know the caster part took over the the the tweet part. Um the the most interesting thing that we're also you know deep dabs and and why they're interesting because much like on Facebook we had um many applications and games on forecaster you have applications embedded in the feed in the

social graph and how does that work so there's this game that I build that is called far bill um and uh the cool thing about these mini apps is that whenever somebody shares uh a mini app link on the feed it renders as a a dynamic embed and this means that I'm simply scrolling the feed. I'm seeing an image. It's like a preview image and I can click on it and this is opening um the mini app. So I'm already in here ready to use it. If I can say something about it is like uh for example Onyx when you are posting like a link um you can't see any like uh you can't interact with it. I mean you can click on it and

then be redirected externally to like to an external link to play with with the page. But on FAR the thing is you can stay into the social feed and they play um apps application run application etc. um smoothly without having to um to quit kit the the the feed itself. So it's really really powerful and that's why a lot of um current application in web two or in web three or whatever are going to faster.

Yeah. Because uh first of all on on Twitter like the the Twitter company is not incentivized incentivized to uh having you going to another website. They're interested in having you on their website to capitalize on your attention. Right? And so any link that you post there not only is impacting negatively you in the in the algorithm for the feed but it's also like minimized. So they don't they really don't want you to click on a link and go on external website. But even if like some of your you know uh followers what whoever like is reading your tweet there h let's say you are posting about this new app or product that you just built or maybe like your latest YouTube video

whatever um still they need to click on the link and go on a on an external website while the powerful thing about forecasted is that not only they are completely neutral to links actually they incentivize a lot like posting links links and these embeds. But if you build a mini app, so if you make your decentralized application, your web application compatible with their mini app standard, your your users can, you know, like you can easily find users that are scrolling the feed, find a post about your mini app, click on it, and start using it. Um, so it it really maximizes your chances in distribution and uh and users traffic because I don't

need to get on an external website, you know. Um, that's one of the probably like the most exciting thing about mini apps is that builders I think like the the greatest problem, the hardest problem uh that you'll find in your you know career as a builder in your experience and journey as a builder is finding users. you realize that it's it's not really about uh understanding how to build something, understanding solidity, how to write an interesting smart contract or how to implement a a feature on your new web app because like in the end you can get there especially with AI is getting like simpler and simpler. what it's difficult is finding users and distribution and

without that uh in the end like if you're building something and nobody is using it first of all it's it's not nice for you of course you want to build something that is useful but then like by having users straight away like one week after you shipped your first project you can also learn a lot with them because like having users on your product means that you get feedbacks you see how they are using it. Um, and so it's a very interesting playground. That's why I really recommend all of you to deep dive into into all of these. And if you don't have a forecaster account, make sure to to create one. Yeah, sure. Um, it's

super super important. I I mean like since a couple of months uh everyone is talking about forecaster inside the ecosystem because everyone want to have like user into application. So as Lemon mentioned um this the best way actually to get us there um without any uh marketing campaign and everything like it's kind of um natural because Faster has already like a big user base. Yeah. Yeah. Uh and getting back to uh I mean uh I mentioned in the beginning like these mini apps can can be can remind you of like the Facebook games or the

Twitter uh apps as well. So once upon a time on Facebook I'm sure like many of you have played with the Farmville pet society ep aquarium like all these awesome games within the social context of Facebook. So the cool thing was that you could play a game, an online game with your friends on Facebook and the same goes for Twitter like there were a bunch of applications that um not games in this case because Twitter is more around you know news and this stuff and all these applications were somehow enhancing and enriching the Twitter experience. What happened is that at some point these application were getting too much attention, distribution

and value out of the social networks that the platforms theirelves. So Facebook and Twitter now met Meta and NX they decided to kill them. So they stopped supporting these in uh embedded applications, embedded games, whatever. They started introducing limitations on the API uh raising cost for people that wanted to access the API. And so the the problem is that uh these companies and people that started building on their platform at some point they were kind of ragged.

So they they their service they were not able anymore to provide the service that they be they've been building for years and and that's bad. Of course, the cool thing about Farcaster again is that it in the end again it's decentralized. So nobody there's no platform risk. If you're building a mini app on forecaster, there's nobody that can shut you down, right? Um I already mentioned this. Why mini apps? Distribution is the hardest part of building. You you need to maximize your chance in finding users. So launching your app, your product, your idea, your project, whatever complex, simple, um, whatever

it is, launch it inside a platform with existing users. So you, it's more likely that people will find you. And in the end, if people find you, you will have faster feedback loops and faster progress. And the cool thing about mini apps is that in the end, they are mini apps. So you don't need to be like very sophisticated about it. like you need to ship like something quick, something simple, something lightweight because people like playing this or using like uh these casual experiences. Why on forecaster? So there are you know different mini platforms I can think of telegram I can think of word uh word app and a bunch of others. The cool thing

about forecaster is that first of all is open and permissionless by design. So you don't need API keys. There are no gatekeepers. You just need the wheel to start, you know, building inside Parkcastaster. And there are a bunch of service that can also help you. Parker has a reach and open social graph. So you can tap into the social feed and uh the identity layer that Farcaster brings in so that people joining your mini app, they are already logged in. They are they already have an identity. They already have connections on your mini app. Every user is on chain ready. So, especially if you're building um on chain on the blockchain, uh it's super interesting because all the users on

Farcaster have an Ethereum wallet and this means that onchain actions are really just a click away. You don't need to um ask them to connect a wallet whatever it's already there. And finally, like for caster as somebody defined it like the Singapore of crypto, what does it mean? The user base is actually not that big yet. Um to Solen's point, there are like around 50,000 daily active user which is nothing compared to Twitter or Facebook.

It's even like nothing compared to Telegram user base for example. But the cool thing about forecaster is that this core user base is very engaged, very influential. they have uh funded money in their wallet and so they are ready to you know experiment and try a lot. I think it's the best place where to ship something and get user feedback. Yeah, this is I I remember our first session we talk about how to get product feedback and you mentioned that it was is for is the best way to to got your one like 1,00 first user itself um and iterate with them to make sure your

application is great and everything. So that's pretty nice and I wanted just to mention something is like uh forecaster has been created by a really good team uh behind the project. So it's um with Dan uh Dan was like the VP of internization of um of combase. So right now I I I don't uh remember how much they raised uh to launch forecaster. Probably one 150 million I guess. Yeah, that's the last round. Yeah, this is the last round that they made. Yes, that's pretty huge.

So everyone is they are serious. Yeah, they they are serious about it. Um and the opportunity is real. So these analytics that you see here are from the game I I was just showing you. It's something that we built at Builder's Garden, our product studio. In the last month, we had more than 4 million people, more than 4 million opens. So with 12,000 um monthly active users. So it's huge. And I'm sure that if I shipped Farville as a standalone mobile application or a standalone web application outside Parkcastaster, it would be like super super hard reaching these numbers. And

so um I really like recommend you to start looking into this like don't underestimate the importance of having users over um complexity of your project because in the end like farville uh you can try it out on forecaster you'll see it's a simple game it's nothing like too fancy or complex you know uh but users are making it special. Um there are a bunch of mini apps and I can like showcase to you some others. Um where is it? Mini apps. There's a mini app tab both on web and uh mobile.

Mini word is a fun one is is one that is going viral lately. It's a cross word puzzle. So you you get like this uh guess and you need to type in the words of course. Um you have uh Farcade is another cool game actually an arcade endless scroller somehow. Um so you see like these experiences are are very nice like you you can play the daily game you can Yes. Um so actually because on myself I'm just using uh parker wallet on parker like can you for example use privy and just set up another uh another

wallet there you can you can use an external wallet yeah here I'm not sure why it's not asking me maybe because I'm not connected but in here we this is my wallet on forecaster you can switch to your external wallet not prev but you can use uh I don't know coinbase wallet metam mask uh I'm using rabi you can use rainbow so you can also connect an external wallet uh both on mobile and uh and web so if you go in here on the settings you'll see that I have a bunch of verified addresses right yeah and so actually uh I just to to let

you know about on forecaster you are incent incentivized like there's like a leaderboard on forecaster of user that's um just posting uh some content and so basically they can be rewarded um so I don't remember how many like probably 1,000 by by so they they reward I think uh 30,000 there two rewards program and this is another good incentive for you to start uh being on forecaster. The first one is for content creators. So they have a an algorithm and and you can check it out on on this mini app. It's called rewards

and you can see people being scored according to their engagement. So everyone has a score according to how much they are driving engagement and reactions on the protocol. And uh there are $30,000 distributed every every week. So every Tuesday, the top three in the leaderboard will win $600. Uh the next seven winners 350 and and so on and so forth. So if you cast, if you create interesting content, you're also you can also be paid a lot in here compared to other social networks.

question the other leaderboard. Yeah. If no one get get banned uh or does the community regulate uh bad actors like there probably consensus or and everything like this? What do you mean? Sorry. Can you repeat Seline? H sorry how they can ban bad actors. Yeah I mean the they can nobody can be banned on the protocol level. So nobody can be banned from the forecaster protocol. What could happen is that the

Farcastaster client or Coinbase wallet client or another client they can suspend you they can ban you but uh it's only happening on the application. So if you cannot use Coinbase wallet on for with Farcastaster for some reasons, you can still use your same account on this other one because they didn't you can use it here. They didn't ban you or whatever. So there's moderation at the application level much like um let's say uh let's talk about email clients again, Gmail, Yahoo, Outlook.

Every client has their own spam mechanism, right? So if I'm on Gmail, they're using their own spam algorithm. So they decide or try to help me um you know uh filtering out spam and they are opinionated in the way they do it. If I go on Yahoo, maybe instead of having that all those email is spam, maybe because Yahoo isn't better or they have a different algorithm to to recognize spam. um I can see those emails, right? So, it's up to the client uh moderating the content and deciding what to show.

You know what I mean? It's it's it's more clear now. Yeah. I actually people asking how to build mini apps. There's no reason we will talk about it just in like couple of minutes. uh like how to from scratch uh run like create and run a mini app. That's the last the last thing before moving into the actual workshop. There's a developer rewards leaderboard. So if you build cool mini apps, that's also a leaderboard for the top trending mini apps um based on transactions, users, and stuff. And they actually reward $5,000 every uh week for the best mini apps uh as well.

Okay, cool. Um, I think uh Sen confir me but should be enough for an introduction around faster. I I think the the introduction to focuser was complete. Um but no is I think it's just the first time you you we talk about it but um with with time you will be used to to use it. So that's I I will provide your invitation at the end of the the meeting.

Perfect. Then let's let's get into it. So first of all, um I have a bunch of Yes. Um friends, how do do I find channel on forecaster? Do I where do I find um on in here on the left on the sidebar? If you're on mobile, uh it's uh let me see. It's still on the sidebar. So, uh let me show you. No, this one.

If you're on mobile, you click on your profile picture top left. Uh and these are like my favorite channels. Um otherwise, you can also go in here on search. I don't know where actually I don't know. On explore. I found it on explore. There's a tab for channels. Oh, not not on mobile. I h suggested channels. Yeah. Or load more channel. I think they've been changing it a while. Uh, cool.

Thank you so much. So, yeah, if you go on explore as well, channels, you can find them here as well. There's a bunch of them. Any other question before moving on with the with the workshop? Um, no that's fine. Like for the workshop uh if you can showcase um like the repo you you use like how to clone it and everything should be nice. Yeah. Yes. Uh there's this repository uh maybe Selen you can uh you can link it in the in the chat for caster mini app starter under builder's garden is open and

public feel free to clone it here. Um it's it's very basic but it gives you a head start when building. It's also all documented. So there's a readme that will summarize all the steps that I will be doing here during the workshop. Okay, perfect. Another interesting um resource that uh Selen you can share in the chat is the official mini apps uh documentation. So if you go on miniapps.farcastaster.xyz XYZ.

You have all the detailed documentation around the SDK, how it works, um specifications, uh API references, uh how about notifications, how about publishing your app on forecaster, um everything that you might need, you can find it also here. Then um what is a mini app first of all? Oh, can can I say something just before starting? Um, so um we we're starting with Farcaster because it's a great way uh to as a web two developer to go into web three smoothly. What I mean by that

is because actually you don't need to master uh web three development uh to create application on fcaster. So but with the with time you will be able to create uh like I mean you can create web two or web three application. So actually we are doing the process with web two just to let you know. Yes. Yeah. Yeah. Yeah. No. I mean it's um totally correct because in the end a faster mini app as you will see is a web application and this web application you can build in any possible framework you want. It can be React and Nex.js. JS, that's my go-to framework, but you can also use plain HTML and JavaScript. You can use Angular

as long as it's a web application in the end. Like what you're seeing in here when you open a mini app, this is a web view. So what's happening here is like Ponder has built a web app that is mobile responsive and it's being rendered inside the forecaster context. So nothing nothing fancy. So if you're familiar with web development, it's even like super uh uh super easy and actually there are even a bunch of clients uh sorry documentation that you can check. Let me see if I find it to simply convert your website uh to um yeah convert web app to mini app. So if

you have an existing website that is a mobile responsive you can follow this guide on the nar website. I can share it later on the chat. And and this is all that you need to have a forecaster mini app. So it's simply about loading a special SDK from the forecaster team and that will make your mini app ready uh for forecaster. For example, I can do one with dev to pack where I can allow um like to have the mini app uh into forecaster with something like join weight list for example a button join list and then people can join the weight list of the packager.

Yeah. Yeah. You you you don't need uh any onchain interaction like you can simply have API calls and start web development. The only different thing is that you needed to instantiate the forecaster SDK. So it's not even needed to connect a wallet and interact with the blockchain, you know. So that's why I think you're right, Selen. It's one of the best way to start building in the space. So in let me walk you through the template that I just shared. It's a Nex.js application. So it has um an app folder, components folder where start a bunch of components. context is setting up the context for the mini app. It also has a a frame wallet context, mini app

wallet context. So, it's already in this case connecting you to the blockchain in case you need any interaction. There's an UK folder where I developed a bunch of uh react to interact with my API and then there's a lib folder with a bunch of utility functions. No, no worries. You don't have to follow like the coding session in the same time. It's better every time to keep focus uh on the session and then after that you can so like see the recording session no reason. Yeah, good good uh good point, good suggestion.

So there are two SD two packages that you need to care about. The frame SDK, this is the main one for caster frame SDK and then for frame wagi connector. This is needed only if you want your mini app to be interacting with the wallets and the blockchain. So how does it work on the app? I have a layout with defining a metadata and setting up some providers. Like the providers, if you're not familiar with React and Next.js, they are simply um setting up some context that all my pages and components will uh will inherit. Um there's a ruda provider which I'm using to debugging and I can

also show you what's that about. So I will also explain you about all this tooling. Could you could you um because um where you can enable um this developer section if you can showcase it on city? Um yes uh good call. So if you go in here settings, you go in advanced and you have developer mode here. Okay.

Then you have a developer tab also here. So the cool thing is that I can launch the same mini app I was showing you. I can launch it here. So this is the simple um this is exposing my local loss. So the one of the thing about working and testing forecaster mini apps is that you either you deploy them on a remote service like Versel or railway for example or you create a tunnel and expose your local host um it's all described in the readme. You can use ngro uh or you can set up one with cloud. So basically you see here tunnel lemon.l this is pointing to my local host. So please don't uh deduce me. But

anyways, so I wanted to show you about Aruda is this little button here that I use for debugging. So it allows me to open up the browser console and network even on mobile. So this is very come might come like very very handy um in some cases. So let me stop mirroring. If you never used any um oops any uh tune tunneling service, you can install ngro and then you simply type ngro http 3000 and this URL here that they generate this is accessing your local host. Let me see if this

works. Yes. So this is accessing my local host uh my local host code. Let's go back to this. And ngro is has a free tier nro install. You can download it on Mac, Windows, any any type of um operating system. So let's get back to it. This is the mini app. Um I have Aruda also here. I'm not sure why it's uh it's not loading correctly, but then there's a mini app provider and the mini app provider is setting up everything for you. So as long as you have your this mini app

provider on the um uh on the code what what this is doing is uh integrating the frame SDK which comes with a context uh yeah here SDK context and the context is the forecaster context. So let me show you what's what's in here. Uh Um let me refresh. Yes context. In the context what I have I have the client data. So the client FID is the forecaster client ID. I can

um yeah another thing that I missed about mini apps is that users can sort of install them much like you do on the Apple store. you add a mini app to your collection and so I can check if a user added it and then there are notification details. So notification details as soon as a user adds your mini app. You also get some notification details that you can use to send them inapp notifications. Um there's a location features. This is less relevant. But then there's a user um object and in the user object I have their display name, their FID, the location. So it gets that I'm in Rome, um my PFP and my username. So I have all

the information that I need for the user and then it's calling the SDK actions ready. This action is is crucial because if I remove it, the mini app doesn't load. It's blank. You see it's not loading because the client is expecting the ready event and we if he doesn't see the the ready event, it's not loading. So what we're doing here is setting it ready as soon as we load the web app. So refresh. And this is working. As you can see, yeah, there's a use effect. So as soon as the mini app uh is as soon as the web app is loaded, if the mini app is not ready, we set it as ready. Very simple.

There's also an endler asking the user to add the mini app. And you have an action called add frame. Um this is adding the mini app uh for the user. Um and we're also instantiating the frame wallet provider. Frame wallet provider if you're familiar with Wagmei and query client this is simply connecting you in this case to the cello blockchain but you can connect here to any most of like the AVM chains like Bum optimis polygon. This is the standard setup. Okay, we have some question. Yes, some question of the chat if you can see it. Let me see. Uh [Music]

chat uh how can we get the user? What is in us? What is in Grock? Where should Okay, next. Yes. Is this cursor? Yes, this is cursor but you can use VS code or copilot or anything that you like. Ngro is a tunneling service. Uh so can you share the link to install ngro in the in the chat for Yeah, we do it now. Oh thank you. How can we get the user wallet? Um it's it's through Wagmei. So as I was showing you in frame wallet you have a WagMi setup. So if I go in the in the main page which is here home

I'm using use account. Use account is a standard Wagmei um wallet. Let's say uh standard wallet connection. So address you can see here this is fetching my connected address on percaster. Yeah, you can switch wallet. You can use an external one but in this case is fetching through Wagmei. So nothing fancy. It's like uh super supported. Uh I'm sure like you will I mean like wag me is crucial when building decentralized applications on the blockchain. Um is it possible to embed an AI agent? Yes, because this is a a standard web app. So you can do anything that you can do on a web app. If you can

have a you want to build I don't know an AI agent where the user types like GPT for example uh an assistant for something you can have APIs interaction you can have an interface where you type a question for the assistant the the question goes to the I agent and the I agent replies and that reply is rendered in the mini app. So you can totally do that. Uh the URL you pass on the URL input field is automatically generated and given to you. Okay, I'm going too fast.

Sorry. Um, nro ngrock. As soon as you style nrock, you want to expose your local host to um to the internet otherwise you cannot test your mini app. So, it's as simple as local host. If I go on here on local host 3000, this URL is not valid. I cannot reach the mini app from local host. So what we are doing is we install ngro is a tunneling service and by saying ngro http 3000 this is

uh exposing my local host 3000 to the public. Okay. So this URL is autogenerated by uh ngrock. If I go on it, I go here. This is calling my local host. It's it's contacting my local host through the internet. Okay. And as you can see here, there are a bunch of API calls that are going to that. Is this part clear enough now? I think so. Yeah. Okay. Very good. Thank you for the clarification for everyone.

Public URL. Yeah, I think I answered all the all the question. Uh certainly based on RS build. Um I don't know what's RS build. Uh but I I built it uh from from scratch. It's nextJS starter template. I send I send it but but I will resend it now. Perfect. So I'll try to go I'll try to go slower on this part. Um another crucial thing. So just a recap before moving forward. You have the mini app provider and this is setting this is doing one important thing setting the mini app as ready.

This is the most important thing otherwise your web app will not load. Okay. So super important frame wallet provider frame wallet context actually here. What's what is this doing? This is instantiating the WagMi connection. So if we want to interact with the wallet, we need Wagmi inside our application. If you don't know about Wagmi, you can go on Wagmei.sh. It's all documented. It's the main uh library to interact with wallets in React applications. You can use Vue, you can, you know, there are bunch of libraries that you can use Wagmei with.

Um, but it's is the standard. It's the gold standard of Ethereum application at least and this is for the initial context another important step. So um it's about um maybe we can get to this later. So uh how to how to sign in uh within a mini app. So how to authenticate a user. Okay, if we go on the homepage, this is the main page that you are seeing. Uh, where am I? Sorry. Here. Okay, this is not working because I'm on tunnel.

Oops. Okay, I'm logged in. How How is this even possible? So, I didn't sign anything. I um but the application knows that I'm lemon. And this is my wallet. Okay. How is this even possible? So there's this hook that I built. It's called use sign in. Use sign in is use it to authenticate the user. Um there's a bunch of checks. So we want to see before signing in a user if their address is connected. So if their wallet is connected, we want to see that the mini app context is there. If there's no context, it means that we are not in a

mini app. We are in a standard web app. Okay. So, if I go here, tunnel lemon lo could you explain what the context um like because in fasa we are talking a lot about context and everything but yeah it's it's the same object that I was showing you earlier here. Uh so let me go back uh to the mini app context. We are logging it uh still logging it here. So if I go back uh near context is this object containing the

client uh information and the user information. Okay. If there is no context if context is undefined it means that we are on web. So if I load this there's no context. So you will see that uh where is it console error failure to load forecaster context. Okay. And this is a again like the same web app the same URL it says failure to load for caster context because we are not inside for caster. Okay. So whenever we are signing in the user in the mini app, we want to check if the context is

instantiated. And then how do we authenticate the user? How do they know that I'm lemonit? There's an SDK function called SDK quick get token. They are generating a token JSON web token that authenticates myself. I get this token. I send it to an API endpoint in my application as you can see token and FID because again in context you have the user and the FID of the user. So once I get this token through quick code I'm sending it to the API to the sign in API. The signin API is doing a bunch of

checks. So it's getting the forecaster token right is verifying it. So we want to verify on our back end if the token is valid. Okay. And once it's valid from the payload that we decode here there's a a record called sub. In the sub we will have the fit. To understand this better um you can check this uh quick code documentation. You can see how they um implement kind of like the same flow. Get the token, start the token, and use the token to uh authenticate the user. And then there's

also description how to validate the token. Um you can follow it all here. You can use the readym made version on on my um template. Again, what we're doing here is decoding the token, decoding the user information from the FID that from the from the token, sorry. We got the FID, which is my user ID on forecaster. And then what we do to fetch the user data, we call this function fetch user. We pass the FID.

Fetch user is calling an API. This API is narr is the easiest way to start and it's this documentation here. They have an API reference, a bunch of tutorials and they have all the APIs that you need as well as a free tire that you can start using straight away to fetch the user information. So I can search for usernames. I can search uh by FID. I can read the detail of a cast. I can post a cast. So, nar is abstracting away the way in which you can read and write content to forecaster. So, I can use it to update

my profile on forecaster. I can use it to read a list of channels, a list of posts, you know, it's all well documented here. What I'm using for in our template is simply fetching the user. I pass them the FID lemon and actually 4461. So I can show you um what happens here. An API inner API docs. This is a simple API key. I pass them my uh FID. So again if you go on profile about this is my FID right 4461.

I click send and this is the data that they are retarding me. It's all the data about me. They can they they tell me about um all my channels, the addresses that I verified, how many users are following me, uh a bunch of other data. I can also check for example number three, this is Dan Romero. So you can use Nar to fetch user data and much more. So getting back to it with and and stop me if I'm going too fast please. Um we are fetching the user data and we are generating a token. This token for them is um an authentication token. We need to pay this API later,

right? It's a free tire to start. Then according to how many API calls you have, of course, you you might need to to pay. Okay. Yeah. Uh is there any other fees for caster ID? So we need to pay later. Yes. But to start it's you can use ner. You can even avoid using ner but you it's it's much easier I think to to get started. Um let's get back to it. So for the user we generate a JSON web token. The JSON web token is a standard uh used to authenticate API calls. And so we set

this token in for subsequent API calls. So what happens here is that if we go on the web app when I call test authentication this is contacting another API endpoint just to test that everything is fine. So it's it's calling this um route called test and uh funny thing about this is that I can get the user FID in the code. So in every call I know who is the FI forecaster ID calling the the API endpoint and as you can see it's my um it's my ID 4461. How is this done?

There's a middleware. So Nex.js JS implements some can allows you to declare a middleware that is between the client making a call and the you know the actual application responding and so on every API code coming I fetch the out token that I set here and from the out token I decode the user FID payload FID Right. This is how I'm I'm handling authentication. You don't you you can like look into it, but it's already built in. So you you don't need to bother much. You can start like building

first the other parts and then if you need custom things, you can expand it. All good so far. I think we're also on time, but I want to cover a bunch couple other details that are relevant before leaving. Let me see any question. Uh ah yes yes we again. Yes. Okay. Finally another important thing how to have your mini app being deployed or visible on forecaster. So how can you be indexed um in here? So how how the forecaster client is fetching the information about

my name, my logo and whatever. There's a thing called manifest. So in standard web application we have the open graph standard to declare the web app title the web app description. Here we can also add images for example um that are shown in the chat or on Twitter if you share a link for forecaster you need to embed a special metadata it's called FC frame and this metadata comes with an image URL so just to to show you if you go on developers there's an embed tool

if I go panel pneumon.l L you can see the image that I declared here. Okay. You can see the button title launch up on sale in this case but it could be launch uh app with dev threeack. So if I refetch it's launch up with the the three pack right? Yeah, it's what I I was saying for example uh with the weight list like instead of having launch hub with def pack we can have like join weight list or something like this. Yeah. Yeah. Uh you can have join weight list and here

you declare the title of your app. This is the action. Don't don't change it. This is the this distinguishing like what the button should do. This is the app URL and it's tunnel.l in this case. Uh and then uh you also can configure a splash image URL and a splash black background URL. So and and this is happening when uh so let's say uh set it to blue. Okay. So this is blue now.

Uh refresh. Uh no it's not. Uh yeah, it didn't refresh. Like this should show. Oh, I need to refresh. Sorry. That's why you see now this is blue. Question. How could we cast notification especially private notification? That's another thing. Yes. Yes. Uh let me finish up on the manifest and then I'll get to it. So how to declare this information? It's important that you have a forecaster JSON in your web app. This forecaster JSON should declare a bunch of information. So you go in here as you can see we have this function get manifest. What does it do?

It declares a bunch of uh two two main objects account association. So we want to know who created the mini app. If I go on uh on far bill for example preview you can see created by um lemon it in this case. Um this is what account association is for and then you have the frame metadata and this comes with the icon URL the home URL the button title a bunch of stuff that you can customize to have a better preview of your mini app.

And how how can you generate it? You go in here developers manifests. You set uh a new manifest. So what's your domain? It's tunnel.l. What's the name? It's the three pack example. Uh subtitle um who educating builders description we educate I don't know Laurum. So you set all this information here. You click a category productivity splash background white. Okay. And down here you get oh let me see what's submit. When you submit it creates your

manifest. You have the frame and you have the account association. Okay. So you you get this and you embed it all in here. It can be static, it can be dynamic as long as you're exporting all this information. Is it all clear about the manifest? So that I I'll move on with the last topic that are notifications. Uh yeah, someone asked like um because he was he was saying he was thinking that it will be better to use sky for it. But I just replied that it's better to use a mini app template rather than a application template. uh for that.

Yeah. Yeah. Uh I think that this is the minimum starter that you need and uh again you don't need to touch anything on authentication. you can just build on top. It doesn't then you can you can import components from scaffold it of course. Um scaffold it template it's much more complicated than this I believe as a starter uh as a lot more components of course about notifications last topic and then we we can drop off. So whenever somebody adds your mini app, the client will call a webbook URL and and as you can see in the manifest, there's also a webbook URL um path. So this webbook URL is important because as

soon as something happens, the frame the mini app has been added or is removed or the user enables the notifications or disables them, you can receive these events. So as soon as somebody adds the mini app in the event information you have the notification details. Notification details are important to send notification to the user. So you save them somewhere on a database on radies it can be posgress it can be MongoDB as long as you store it uh somewhere you're fine. And then there's a function called send frame notification.

This is abstracting you know I want to send a notification to FID with a title body and these notification details. Um so it's calling a a URL that is coming from the notification details that forecaster is giving you. It's calling an API basically passing uh your your title your body and targeting a specific user. the user is targeted with a token and so um you can you can call this programmatically meaning that you can have I don't know schedule a job to send uh multiple notification calling this

function multiple times for different FIDs or you can trigger this function let's say um after the user logged in so whenever they log in they they they receive a notification and as you You can see here there's a bunch of uh um mini app notification I'm receiving. So talking about rewards, they sent a notification that rewards are going out in 4 days or this mini app is saying in 30 minutes the mint will be closed. Um this other one is sending me 22 people already checked in today. With Farville we notify people about request or about crops that needs to be

harvested. So it's a it's a bunch of things. Uh [Music] I think uh that's pretty much it. I know that it's been a lot especially since we also did an introduction on forecaster but yeah that's right. Um if you have any other question like feel free to reach out to me. You also have a mini apps documentation where you have if you want to know how to send notification you can check also this. It's all well detailed. If you don't know how to authenticate your users, you can check this um how to publish your mini app, how to interact with Ethereum wallets.

Anything you you need is also descri well described here. Uh I will just share my screen. Um uh yes it's like I mean this one I will push here is it's just uh I send it um like I mean it's um it's for uh mini app ID uh like if you want to build mini apps there is like in this document more than 100 miniaps ID that you can um create uh if you want on your own uh to to experiment stuff and you have to know that uh also by creating

many apps you are um you you have some way to be rewarded uh through through different ecosystem. Um, so yeah, just just um you experiment um for fun on your side whenever you have time because we're going to do uh a lot of mini mini mini apps probably uh during the upcoming months especially with B um and so yeah feel free to to take the lead uh on your side too. Um and uh we're going to have like ideiation session to make sure you can uh you can create apps that are great. Um and and yeah,

thank you Lemon for this complete session about caster. Um hope everyone enjoy it and I will send you like don't don't forget to send me a message and I will send you an invitation. Um so or free invitation but you have to know that def is covering uh your account. Um so yeah um explore explore far caster and uh I will add you into a start startup pack where everyone from the community will be able to follow you uh in one click. So yeah, all good. Thanks again Lemon for everything and yeah, don't hesitate to ask any question on

Deac Club because Lemon is also on the Deac Club with another expert um on Minas. All right, cool. Thanks again and happy happy day or good night and whatever. Yeah, bye-bye everyone. Thank you. Bye everyone.