Building Mini Apps on Base: Preview Tool Walkthrough

Hello. Hello. Yo, how's it going?

Doing good, man. Welcome back.

Nice.

Yeah, dude. Happy to be here. Uh, happy to talk about more tooling that we've been working on for base builder and uh, yeah, show everybody what's new, what we've been cooking.

Yeah, man. So, last time uh, we had you here, you were presenting base builds during our vibe code week. It was actually the day we kind of went GA on base build. Um, and base build for those who don't know is a place for builders on base to earn rewards, get uh analytics around their app so that they can grow these apps, make more informed decisions. Uh, and you know, we're back two weeks later and you guys have a shipped a new feature called preview.

So, um, I brought Dan in to talk to us about it and I want to know a little bit more about it. Um, feel free to share your screen, Dan. But yeah, I'm excited for this one.

Yeah, I know. I'm excited to show it off. And yeah, let me just share my screen real quick. Um, I'm going to move some windows around as you always have to do.

Yes.

And let's see here. So, I'm going to share this base build. All right. So, yeah, I mean, you can see base build here, right? Um, yeah.

So, like this is where you can add your mini apps um and start to see analytics uh that are captured in the base app. Um, you might notice some new banners up here that are uh making some offers for like credits with like uh to get credits for pay master or talk about how to get featured on the base app. Uh, but what I want to show uh you and everybody else is this new preview tool that we've been working on. Um, and then if anybody's watching that was at the onchain summit hackathon, you might have seen like me and Dylan's deck and other folks on the team like huddled around a computer. Uh this is what we were like building uh during the hackathon and it's been uh it came together pretty quickly.

Uh and I'm excited to talk about it because I think it's going to be pretty useful to folks. So all right, you're building a mini app. Um one of the things that we have heard from so many people is that like the uh Farcaster JSON or or your manifest is confusing and it is you know like I I would agree like it took me a while to really understand how it works. So in preview, we kind of give you some tools to make sure that you have uh everything set up in your mini app so that it will display correctly in the base app, right? Um so what we give you here is uh three tabs, console, account association, and metadata.

And I want to make a note, you do not have to have like imported the app um to use these tools. you can actually just use them um like while in development before you import. Um so what essentially what you do right is you grab the URL of your mini app. You uh submit it here and yeah first let's talk about console also Pat like feel free to stop me at any point. Um but yeah we'll we'll talk about console first.

it will give you a preview of the social card that would render like in the base app in the feed, right? If somebody were to share that URL. Um, so if this displays like how you want it to, then you're good. Maybe if you're missing some required fields, it'll tell you like, hey, you need like a button title or so on. Um, and then what you can do from here is actually open that in a little iframe preview here.

So, um, I just opened this up. Uh this is like just a throwaway test mini app that I use. I like throw stuff in there when I'm trying to uh test new functionality out. Um and what you can see here is that we have this ready call um thing and this load time. Um that is basically telling you whether or not you called like the Farcaster SDK's like ready action um which you call to dismiss the splash screen uh once everything is like once the UI is all ready to go.

Um, so we loaded in uh 61 seconds. That's just to give you an idea like how quickly you're, you know, you actually called ready. Um, you know, you you want like a snappy feeling app. So you don't want that number to be too high. And then below that, you can see a bunch of logs.

So basically, one of the things that this tool does um is it lets you see uh those like console logs, console warns, console errors um from your mini app in in a really like easily accessible way. So, um, yeah, Pat, I know I know that you've built some mini apps. Uh, I don't know if you've tried like debugging, uh, from within like, you know, the actual apps themselves. It's difficult to get those logs. So, this is a way where you can just make sure that everything's working correctly.

So, like here, you know, click connect wallet and and it just pushes like the latest log.

Yeah, this is awesome. And are the logs coming from where, you know, in within my code, I would set up logs. Let's say for example that mint button I would you know log the transaction hash and maybe who I sent the uh NFT to. Um if I you know put this in in my system logs within my application I should be able to see it here. Is that the uh sort of idea here around this?

Yeah for sure. Yep. So we're basically just capturing those uh like in the iframe we're capturing those logs and just like uh routing them to the preview tool like the console uh section at least. Um, so you're you're seeing like all the information that's being logged from your app uh itself.

That's awesome. I I know um we were like pretty big advocates uh especially Sohi and even Dylan on using Aruda um which you know depending on your development skill that could that was easy or hard but it was a way for you to get these console logs uh on your mobile device and to to to see the logs there. But this is way easier because I can be on desktop. I have a larger screen uh to see it um and I can render my you know app here um and just see how it would perform uh in the base app. So this is this is really cool.

This is helpful.

Yeah, for sure. And like you know there there's definitely it's almost like I look at it as like levels of uh tooling. like if you really need to catch those logs from within the app itself, maybe you still use a Ruda, but then this is just like um you know something that's available to you that you can use well uh to do like quicker iteration since it's uh in my opinion at least a little bit easier to work on a computer than a you know on a mobile device. Um but yeah, one other thing I want to call out is that like so you can connect your wallet into your mini app. Like so you can see here that I'm you know connected with like uh ox 305.

Ox 305 is what I'm logged in to the base build tool or base build app um with. So yeah, you get wall connection as well. Um yeah, so that is that is this one tool of the three.

Um yeah, any other questions about the the console tool?

Uh no, I I just I'm I'm really impressed because again you can test the functionality of your app. You mentioned connect wallet. Authentication is like a big thing that you know uh you know challenge when it comes to you know what wallet should I use. Um the base app itself is a wallet. Um and so you can really just like test that user login experience here as well.

Base build allows you you know you connect with a smart wallet. So obviously you can see if your smart wallet functionality is working in your app as well. So um no man this is this is awesome. What other uh things do we have here?

Yeah, so I'll I'll show account association metadata. Uh one thing that I want to say is, you know, like this is the initial release of this tool. Um if you're looking at this or working with it and you're like, "Oh, I wish I had some other feature." Like please talk to us, tell us, give us your feedback. We're building stuff for you guys uh first and foremost, like all the builders out there.

Um, so yeah, like uh if there's anything that you think that would be like helpful for mini app builders, you know, come to Discord, uh, hit us up on the base app, uh, on other social channels, uh, cuz yeah, we we love user feedback and if we hear that something's a painoint, we'll try to fix it. Um, yeah, so moving on, like you might be familiar with, uh, Farcaster JSON, uh, probably implemented a few times and there's a ton of fields there, right? So these two other tabs um are more around like verifying that your Farcaster.json file is correct. So for instance, you know, continuing with the the the test app that we just showed, um here I can see whether or not my account association is correct.

So the Farcaster JSON has two top level fields. Uh well, three if you're using the base builder allowed addresses to import your app. Um but two of the far caster spec fields are your account association and like the frame metadata or mini app metadata. Account association basically tells um you know Farcaster and the base app uh and other Farcaster clients who owns this mini app. So it's something that you have to generate with an account that you own and then add it to your Farcaster JSON file.

Um this account association tab is where you would test that. So for instance here um we can see that the that this mini app um I've signed with my type of ETH uh Farcaster user. So it's associated with type of ETH. It's valid. You get the green check mark.

The domain matches. So that's another thing that has to be uh valid. You you essentially sign uh you sign a message that includes the domain of the mini app. So that has to match what's uh you know up here in the URL. Um, and you can see that my signature is valid.

So basically like a Farcaster client that is rendering a mini app would know that this mini app belongs to me or was created by me. Um, and this is just to show you uh what it would look like if it wasn't valid. Uh, this is just like some project that I'm working on with a friend. Uh, but I deleted the account association stuff. So here you can see that um, let's see.

Yeah, it's uh my account association is missing. Um although I do have the domain, but since my account association is missing, you get this banner. And if you click that banner, you can verify sign with your currently logged in wallet. Um, so quick side note, the in order to use this feature, the the wallet that you're using for uh base build has to have an associated fire caster user otherwise this won't work. If that's the case, we'll tell you like, hey, here's how you associate those things.

Um, but yeah, so I just created a, you know, the header, payload, and signature for um, this website that I have up here. And now in order to uh make this account association valid, all I would have to do is take this stuff and then copy and paste it into my Farcaster JSON file. And then I should get green check marks and everything should work.

Nice. So account association lets Farcaster know who owns the app, who's the publisher of the app. Um, the account that publishes the app uh should it should be a Farcaster account is what it sounds like. Uh, and if you don't have this account association, maybe it's missing, maybe it's your first time building a mini app and you put your domain or your URL in the uh account association tool, the preview tool, um, and you don't have it, you can go ahead and like fix it on kind of like on the fly, it sounds like, you know. Um and then and and and the only thing to make sure is that the account that you have logged in to uh base build is the same.

That's you know it has a link to Farcaster as well. Am I missing anything on that one?

Yeah. Okay.

Yeah. No, you you nailed it. I would say um so if you're a a base app user, you know, you have a like that account is connected to a Farcaster account already. So, you know, thinking about like is this account associated with a Farcaster account or not? Um, if you're logging into base build with your uh base app account, um, you have one.

So, uh, yeah, just something to keep in mind. Um, yeah.

Awesome. All right, cool. So, that's console. We got association. What is metadata?

What's going on there?

Yep. So metadata essentially is uh it's a bunch of fields in that varcaster JSON that um you know describe things about your app. So like you know things like its name, its icons cuz you know those things show up in a different in a few different places. Um yeah, I'm not going to go through all of them, but it's they tend to be more like visual things or like categorical things. It's just it's metadata about your app.

Um some fields are required, some fields are optional. Um, so as you can see here, I loaded this up and I'm getting that a couple required fields are missing. So if I want my mini app to work 100%. Um, I just have to fix these things. So here it shows, you know, that primary category is missing uh, and tags are missing as well.

What's super nice about this is I can I can just expand these um, you know, uh, I don't know, expandable sections and it tells me exactly what I need to do, right? So like uh primary category is missing and it has to be one of games, social, finance and so on, right? So I just have to go well I have to figure out what um category my app is. Uh for this I would probably say utility and then I just have to add that to my far caster JSON. And then tags are also missing.

Um and here you know again it says like descriptive tags for filtering and search up to five max uh 20 characters each. So like you have um really really clear like error messaging around like what's wrong and what you need to fix with like these really descriptive um solutions to to help you out. Um so yeah and then you know everything else basically has uh valid data. you can expand them if you want to learn more about them and then what you're going for right and uh this is going to be a little bit meta but um because base build is a mini app I know that if I uh submit that we get all green so if you see all green things should work um you know 100% in the base app and um on fire caster as well right so uh any really any fire caster client since uh it's an open protocol

this is sick um I love how clear the uh instructions are if you don't you know if you have a field missing or something like that I love that everything is in one screen it's collapsible and like this sort of like accordion view um just speaking from like personally helping people build mini apps like this is one of the things that you know comes up of hey my mini app isn't showing up in the uh base app um you know my images aren't rendering right like come here it sounds like I can just come here paste the URL here and see what's going on this is going to give me sort of like a little pulse check of my app I can see one from the console hey is my splash image the the one that I you know intended on being there does my button uh is the text on my button correct if not I can go over to the metadata tab and see everything that is because because that's the information that's sort of like populating all of that, right? And so I can see, okay, well my my my button uh text is incorrect or my splash image is pointing to the wrong image. Um and then I can also see um but do you mind going to metadata real quick? Um yeah. So and I can also see right uh if it's not being searchable well is you know what name did I put in there like did I leave like a default name in um I can see the the category if it's not you know populated in the right category within the base app you know I can go here and say ah man you know instead of utility I put you know productivity or news media.

Um, and if I just put a completely random category that isn't part of this list, that's also a red flag. And I love that it's like very clear like green check mark for valid x for what's wrong. And then if there is something wrong, it explains clearly what I need to do uh in order to do that. Um, and then also outline what's optional. This is this is awesome.

Yeah. Know, I'm I'm super excited about this because like I I forget what's required, right? It's just so it's so nice to just be able to be like, "Okay, here's what I have. Tell me what I'm missing if if anything, you know."

Um, so yeah, like you know what I said earlier too kind of extends to really really everything. If if folks have feedback about like uh how we can improve this at all, please let us know cuz um yeah, I think like builders on base are definitely our best resource for uh getting these ideas for like you know what should we be working on, right?

Absolutely. Uh Dan, thank you. It looks like it's uh going to be a great tool. I love that I can just go in here and use it. I don't need to like register or, you know, import my app.

I can do it while I'm still figuring out uh my app. I'm building on the fly. I'm, you know, I'm testing it. Uh and when I'm ready to go, that's when I can import it in um share it on the feed, start seeing how my users, uh are growing. Uh base build has really turned into a very comprehensive tool.

we're seeing like the baby steps. We're, you know, you guys are shipping uh real fast and like you guys are, you know, bringing real value. So, uh I want to say thank you for coming here today and like explaining that. Um any last minute words for for the audience?

Um no, I mean, yeah, I hopefully I'll be back soon with even more updates because yeah, dude, I feel like we're on a roll with uh a lot of stuff that we're working on and it feels it feels great to be building like uh better tools for builders. Yes.

Um.

All right.

Awesome, dude. Well, as always, awesome chatting. Hope we talk soon. Well, I mean, we'll be chatting on Slack, but hopefully we'll be doing this again soon.

Yeah, man. And I And I'll see you soon.

Yep. Peace.

Peace.