FlutterFlow x BuildShip + Lemon Squeezy

welcome and good morning all you future viewers of this live stream herni and her team uh from build chip are joining in a few they're getting off another uh live stream right now so they are prepping for it and looking forward to diving into one thing that I've been looking forward to sort of using utilizing more now that I'm away from uh flutter flow and I have a little more time to my myself or building my own products which is build ship we're going to dive into the world of build ship today which is going to be super fun because build ship allows you to add that that layer that flutter flow doesn't provide right flutter flow provides the front end the visual building the the UI um all of the things that you need logic wise to interact with Firebase superbase or any other backend where you can interact with a database but the back end right like sending Crown jobs or uh notifications on a on a Time basis or doing things securely like managing payments not something you want to do in the front end so we're going to talk about how to implement lemon squeezy into your flutter flow apps utilizing build ships new lemon squeezy trigger so they are um coming in a few I'm going to just give you guys a small update on the no code UI learning platform so so I am in the process of both building the platform but also like coming up with content for the platform and I'm getting some feedback from some early beta users which is really fun and I'm sending invites out to both of you Joseph and Kareem so thanks for joining um you guys will get them I'm just trying to finish like one more uh content piece before I send it but one of the things I'm building is just like an app from scratch I feel like so many people come to flutter flow and they don't know how to actually get started uh flutter flow is an incredibly complicated tool I'm not going to say complicated I'm going to say complex it's a it's an extremely complex tool complexity does not have to be confusing uh complicated is but complexity does not have to be confused and you can provide some Simplicity in the complexity and I think flutter FL does a decent job of that but for people new to no code or new to uh yeah visual development development in general it can be a little overwhelming so I'm going to cover all the basics like setting up off connecting Firebase um creating UI connecting UI uh creating documents in flutter flow and then seeing them in flutter in in your app um all sorts of fun stuff so I'm really looking forward to that and we also had like a ton of updates from Google IO this week uh and chat TBT uh 40 I guess so I think if we have some extra time at the end uh hery will hopefully walk us through some of that stuff because Bill ship has already integrated the new chatu BT uh Integrations which is pretty cool so I'm gonna do just a short run through of uh what is possible and actually just you know what I'm going to share what I have so far and you guys can give me feedback in the comments on this on this platform because I want to know what kind of content is beneficial to y'all who have built you know you guys are sort of advanced users of flutter flow so talk to me about what you want to know in a more uh tutorial based system okay so we're going to log in here all right oh so I have some I do have Google hooked up but not uh Apple for some reason apple is just giving me some TR trouble so but on the homepage so we have the we have platform updates I'm thinking about doing some sort of community engagement here where you can get updates of new courses um yeah new courses or lessons published um you're able to subscribe to courses or sort of enroll in courses here so we have a few coming soon I'm trying to get this getting started and flutter flow 101 to a point that uh makes sense that that they're basically complete so these things are you know you're able to sort of walk through these courses track your progress you can rate the course at the end um I'm able to edit the course and everything uh you can also submit feedback to me so I just utilized sort of flutter flows uh flow for support tickets which was fun um but this these courses right each courses consists of a number of lessons and each lesson is just essentially for now YouTube video uh because I'm the free ones I'm going to publish on YouTube as well uh so that I can get some better SEO that's my plan but the platform itself provides you with the ability to sort of gamify it a little bit and keep track of um any I don't know medals or certificates that we give out at some point because one thing that we run into so often even in the experts program at flutter flow is capabilities there's so much and so many people are new to flutter flow they um we don't have proven capabilities of delivering products to clients so part of this learning platform will be an accreditation something in and of itself um so the boot camp that I run and some of the courses so they will have uh areas where you can actually test your knowledge um objectively test your knowledge and then also creatively test your knowledge right because creating UI and design uh there are things that are scientific and that are objective like alignment spacing information hierarchy but you know design aesthetic is sort of it's It's a niche that is not that cannot always be taught it can be learned though it can be learned so I learned design over a five five to six year period just looking at at really good design and then practicing that so uh yeah when I say it can't be taught I mean it it can be but it's just a little harder than uh teaching you how to drag and drop uh you know elements onto a page and then hooking those elements up to the back end and viewing the data so that's objective design is not so uh you can have 10 people do it and two of them can do it great and eight of them can do it pretty ugly so but we have lessons we have the ability to sort of navigate the lessons and we also have quizzes so you have the ability to sort of test your knowledge um and then review results um I'm also creating some assignments so I think I have an assignment on the let's see intro to design thinking I think this one's an assignment so let's see if this one yeah so you're going to get you will get um any examples right that I attach right this is going to be a figma link where you have access to hopefully this will work yeah you have access to the figma file that you can duplicate then and you can utilize for the project itself and then you can well I'll have a little more uh explainer to help you know tell you what the assignment should be um and then you can sort of upload it hey that's not what I have here oh yeah that's why because this is complete but when it's not complete um you will have the ability to actually uh submit the assignment via a link and then I will be able to grade it and leave notes for you so giveing feedback so again some of that uh sometimes when we're Freelancers or we're agencies you know we're trying to learn a new skill we do it in a dark play you know not a dark place but you do it so right if you don't join a boot camp or you don't join a community you just do it all by yourself and you just hope things work right and I think that there there needs to be a uh in between where you can you can do things and get feedback um either from yeah a community or from someone like myself uh that can help you learn and grow so so many people reach out for coaching or help um on personal projects that I don't have time for um so I'm hoping that this platform will Empower more users to become talented equipped and with and have the ability to give the feedback give the coaching expertise um and have the basis for knowledge so a lot of these uh tutorials are longer than I thought right like I was thinking like oh I could just do like a quick you know a quick o overview of flutter flow and building and I find myself explaining a lot of Concepts in them um so getting down into uh longer explanations of why I do certain things so I hope that that is helpful and harini just joined so um I will turn her on and then turn off my my screen share thank you so much sorry I was uh showing off the no Codi platform which I will Implement what we learned today into that platform so that I can actually uh sell some courses eventually so that is my goal um but yeah fun great thanks for having me here and super excited to actually see the course I could definitely use the design based learning course for sure it's all good um I love teaching design it it is like one of my favorite things because it brings so much value like we don't we don't think of design like that like I I I mean it's amazing to me I'm Blown Away by uh how much success some of the clients that we work with have because of just I mean maybe it's more than design right flutter flow it's more than design it's not like flutter flow is maybe beautiful functional but there's a lot of power behind it like the developers did such an amazing job implementing everything building it out build ships the same way it's like you have a lot of functionality there but if if it's not presented in a beautiful way nobody really wants to stick around I mean we live in 2024 like tools right so but it's not only like product design but like even some of the e-commerce stores we've redesigned dude they just go off after a redesign I'm like what in the world like I don't get this but I do get it because I'm the user that will leave a sight if it's ugly um or not functional or dated so yeah I think yeah totally agree that the user experience is what matters for like people to stick around so yeah y y all right cool so so we are building a bunch of cool things today so you know I don't know how many of you are familiar with Bill ship would it be useful if I give a quick intro that would be awesome I would love that great so you know Bill ship some of you might be familiar with it's a great platform that is taking care of back end and it works really well with flutter flow so it's a visual low code backend building platform that lets you build AI workflows backend tasks Cloud jobs you know anything that you typically want to take care of in the back end uh we'll go through some of the use cases and things like that shortly uh and specifically I think for the course you're building Andrew uh what will be useful is to discuss about the subscription right like how you going to handle that especially um with flut of flows subscription using lemon squeezy something people uh you know typically people use stripe or we also support that and lemon squeezy is another alternative that is to be quite popular yes yeah I agree I mean a lot of creatives on the design side you know they're not building flutter flow but they are using lemon squeezy and when I saw that I was like you know what I mean flutter flow doesn't really have stripe subscriptions yet either so I'd have to do a custom something so I was like What if I just tried I don't know what if I just tried Limon squeezy and they they tailor their e-commerce solution to course material stuff like that or creative materials like this so okay yeah I'll I'll try it out all right cool so yeah I mean I could give a quick background of what we're going to build today right so you know obviously feel free to jump in we can build this collaboratively uh but we prepare like a small uh you know not so welld designed you know quick app that has on flut Flow side a bunch of buttons where you can click imagine like someone is having an app where you can subscribe and look at paid content and then on leers ship side we have a few template workflows for lemon squeezy with in terms of like subscription created cancellation so you can build your flows of what you want to do uh we'll start with the base template and obviously you know on both sides you can expand it as you want um so yeah that's kind of what we're going to do today um do you want to um share anything before we kick it off no I'm I'm really excited because yeah it's like I was I gave sort of an intro to build ship earlier where just like you know it's the back end so there's multiple things that happen that need to happen securely that flutter flow just doesn't handle like it just it's just not that's not what they're trying to solve so this like interacting with Firebase as well is something every flutter flow builder needs right either super base or Firebase so interacting with a third party Limon squeezy and then bringing that back into the native database that we're utilizing and feeding that information it's always a pain even with Revenue cat it's a pain you know that's integrated into flutter flow but like sort of a pain still I still have developers take care of it for me because I just I don't get it um so this your walkthrough is going to be really beneficial for that how do you make those two things connect and then sort of come to fruition in the flutter Flow app itself so yes awesome let's do it so you know flf flow also works really well with backend like you know uh Firebase super base and Bill ship also kind of helps you integrate deeply with Firebase so essentially you can think of what you do on Bill ship is logic blocks that you're kind of connecting together to build your entire backend workflow um so very quickly before we dive into the app side of things on Bill ship you effectively get like this playground where you can tell what is the starting point of your workflow and then effectively add step by step a bunch of things so we have a lot of nodes that connect to popular databases superbase Firebase postgress and whatnot uh you know very you know popular tools AI models so it can essentially connect to everything that we have here or you can actually generate a logic block yourself so if some new AI model launches you can essentially say hey given this uh input I want to do this here is a sample code generate a node for me and it'll do that for you so that what we feel is exciting where obviously we will be expanding the um ecosystem of nodes and we also have Community contributions coming but more effectively you know anything that is new and you want to do yourself you're able to do it and every node Logic for example here is like a simple log to console log uh but every nodes logic you can look into it um I think similar e ecosystem as flut oflow where it's all low code code is accessible if you want or if you want to use just the no code style you can do that um so yeah that's kind of basics of what Bill ship is uh but before we start let's kind of start from scratch right on um so here on flut oflow I have a very simple app as I said it has this uh authentication and sign up page um it has um page where you can look at subscription it just has a few buttons that show up based on the uh users subscription status so I have this button which will show up if the subscription active on that users collection is false and then we have a manage subscription which is comes up which if the sub person has paid for the subscription and then they can enter the prozone or like you can think of like the course content only if they are able to see that subscription is active so um this part of the you know demo I guess most people are familiar with adding a subscription sign up right so this automatically I like I like the fact that FL automatically creates the uh collection and the you know everything on the fire store side um so that part is easy I think what will be useful is if we go step by step into these flows right so um so yeah stop me anytime you know if you feel like we need to go deeper into some topic I love that so the subscription active you know equals false so we have that that sort of trigger that condition that subscription active is coming from the user's collection right so that's a field we create in the user collection okay cool exactly yeah so here for example this one um it has a sign up for course but as soon as someone signs up for this there's a simple action flow where it launches a URL in this case it's essentially launching the um um lemon squeezy product sign up URL so here if I go in you'll see that it's a URL with a sample store I created so if I go to lemon squeezy um here I have created like a simple product a test product and uh you know this is a sample test store but you know it's super easy to set up I literally signed up only a for this and I was able to create a product and then you can decide what is the payment every month and then um you can essentially do a couple of things like what um your portal needs to look like and so on um and then once you decide all of that it gives you this uh simple store ID right so if I go inside this product um let me actually go back um I believe it's inside stores yeah so here you get this store with an ID and you need to copy this URL and this is where you are essentially sending your users to for payment so in your app if you click it's just like redirecting to that right um and then you copy this URL over back here and I have this URL and then what you can do is um let me expand this a bit so you have the expand text field in flutter flow oh they're working on that we're working on this new set from variable we have a really fun design I don't know if it's when it's going to implement but we have a lot of designs in the back look I guess oh yeah yeah um but yeah I think what is happening here is uh let me just paste this here so that you can see it clearly so here you have this complete store URL which you are getting from uh from lemon squeezy side but then it also allows you to like append all this information that is already available because you have authenticated the user and you already know their email and name right so you can give this URL as it is people can fill their email if they want want but it's more efficient if we pass in these things right so it's just a combination text of this and then the email is coming from the users collection yep and then you have this one which is the name and then you have the display name that the user has selected yeah I love that cool so this one basically just launches right so um and then let's actually try this out so if I go back here log out and I um you know I might have to start a new session I guess um yeah that's good okay well yeah that's such a that's such an Easy Flow that's really cool so yeah so yeah I think there are few things that's completely handled from flut oflow to lemon squeezy and then we'll see how from lemon squeezy to Bill ship it starts to make right so imagine this like when someone click this that API is called it it opens up this uh kind of a page where you are able to uh fill these information and make payment so this is test mode so I can just add like you know all these kind of numbers and then um let's wait for this to load but you'll see what I mean when I say that once this payment is complete it triggers a bunch of flows of how you want to handle this so um if I go to Bill ship now we have this subscription created workflow love that you are simply passing the API key from lemon squeezy so if you don't know how to get some information you can click this information panel it takes you directly to the API settings and you can grab that information yeah um and then you can essentially store it here and it's storing it securely in your back end in Google Cloud U secret manager so it's not in your prend and then um you're picking one of the events so if you want this flow to start with subscription created you pick that and you give your store ID so store ID was what we saw earlier uh here so this is the store ID cool and then you can pretty much now do whatever you want so now that your payment has completed you want to update the users collection and say that the subscription status of this person is active right so that's what we are doing here so this is my lemon squeezy project which I've connected to flutter flow uh and then this is the collection and then in this filter I'm doing some basic things like if the email equals the incoming value so what's good here is that in this trigger when the when it's activated all the information about the user also is passed in and then you can use that in this filter so you can say uh income data and attributes and users email right um and if you're not sure how to do this you can actually use ai's help you can say U match the email from this Json or some like you plain English and also if you clone this template right like if you started with the template you don't even need to do that so if you started with this template all you need to do um is just plug in this project ID very cool okay and so it's very so to note very important to pass that email right from flutter flow in the link to liit squeezy because that's how we're connecting it right exactly yeah so if we don't do that if the user say uses some other email it's hard to link that person to this person right maybe you know if you want to allow that flexibility say suppose you're putting the link in a newsletter or Twitter or somewhere else then it's okay and then that person's link account gets linked to that email that they paid with um but yeah in the app experience you want it to be you know smooth and without having to go back and forth yep okay very nice so yeah so at this point it's basically what's doing is uh updating the users collection right so it's first trying to get the information from email and then it when it gets this information it's updating the document same project uh it's updating this document which was retrieved from this collection okay and then it's updating a few things so it's updating the subscription ID because now it has that information because this user has paid it it's updating the subscription active uh to true we also we are also storing the customer portal URL because it's later useful for when you want to manage the subscription because now you want to add a button in your app saying U manage you don't want to you know manually be doing this for that user as well if they want to like change the credit card or you know upgrade or downgrade those kind of things they can easily do that themselves I love that that's amazing okay so yeah yeah so essentially this is a very simple workflow which if the subscription happens update the document right now obviously this is one core thing which you need to have at the bare minimum in your subscription but um you can actually do more things here as well like for example if you want to also parallely send an email to that person or you know you want to based on this email do some research about this user or send it to your slack as a message saying hey new payment reach out to them so those kind of things are possible um I would essentially like you can do Branch or you can do parallel and you can move things around so essentially you can move Mo this like this and then say parallely um you know on slack just get a notification that new sign user sign up it's always nice to see that yeah this is great so I would yeah I think I think every almost every um good checkout experience is sending an email after you subscribed as well like I think that's just necessary my wife does marketing it's amazing to me how important uh customer life cycle management is through email like whether it's campaigns flows like she makes millions of dollars for her clients just by setting up like a you know abandoned cart flow or something like it's it's crazy to me how much money those things bring in so when you are building a product implementing those things although complicated and annoying are very beneficial to the success to the success of your product so that's something I want to do with no codei is set up emails when somebody subscribed when we have new courses you know maybe some uh some email reminder well I'm gonna it's going to be an app as well so I'll send push notifications so they'll get all of those you know notifications as well you've subscribed and all this stuff so I'm I'm excited I'm looking forward to it but this is helpful because for any successful SAS you need these things set up it's like yeah you know if you want to be successful these are things you need so very cool yeah and I think it's also useful right like to understand your user better uh say suppose it's coming from some email that is not a Gmail domain you can also do like simple uh perplexity you know we have like perplexity chat or like a Google search or like a Bing search you can figure out what that company does and you know can reach out to them in a better way so that's also idea that's interesting wow I like that reminds me of the like beginning days of flutter flow we had slack notifications turned on for like new subscribers you know and then then it got too many but you know it was it was cool to to sort of research I would just do it by email I would scan it myself be like oh what company is this you know and and go and search for it so yeah do that for us now yeah and I think that that's kind of the idea here right like you have this base template that you got right from cloning you plugged in your API Keys um and you plugged in your project ID but then you can expand it to any other use case because starting point is your subscription created it can lead to so many ideas right so that's the thing here and when you're ready you basically ship it and what it does is actually it creates uh these web hooks on uh lemon squeezy directly so as you can see this one um is a subscription created web hook we I actually didn't come here and manually add it automatically adds it here and then you can also you know click and see that it was a subscription created um so you can also look at the values and so on so this is one flow and then coming back here um so once this is done so as I said like this uh triggers and makes the subscription active true on your users collection and then on Flow side you have the same value being read here and it becomes if it's true this shows up and then you're also seeing this section and then in inside this section you have um you know whatever you want to display only for that user um and you can also make the visibility inside this more uh you know yeah yeah they can get act act active or sorry they can get um the ability to activate that course view the content all that stuff it's very nice yeah and that small Boolean in the user collection is just so that's great you know it's so easy to then uh showcase stuff to the user in flutter flow uh or not show it to them so yeah exactly and then inside your uh manage subscription that is where you the you want to show the customer portal right y so that's where this second flow comes in where you on click of this you're launching the other URL and this URL is just the customer portal URL that we saved when we were creating the subscription so um it kind of looks like this let me try to find another good example uh that was trying out earlier yeah so here is one so the portal creates this it has the token signature everything right so you are then able to use it uh on this side to manage the subscription um very nice and if they do go and manage and cancel it then the second workflow gets triggered which is this one um which is a very basic one here which says if the event is cancelled same concept as before the API key the store ID the secret is this this secret key is something you can additionally pass to make sure you're the only one who can call the web hook right so that's kind of the reason roson was just asking about uh secret keys in the comments so right yeah so if you're not sure about anything usually we have all the information in this I icon um so you can learn about it so this is a concept from lemon squeezy and generally signed uh web hook calls typically uh so you can basically put anything here and the same thing will show up up here on the web hook side right so yeah very nice right cool so let me go back here so here what we're doing is very simply if someone is cancel the subscription we are setting their user document again right so we are again searching for the users email document and then this filter so the filters one is just is that it's just Json sorry I'm not a code person but yeah so this is just similar this is basically the fire store way of filtering and getting to your it's like querying SQL in that kind of concept so if you're not sure what you can do is use this and say um fill with email uh find email field uh with value and pass that Json so if you have like an incoming sample Json right like how your cancellation looks like so I think you can get like the sample response here and then you can basically pop that in Ai and get it the response but as I said like this if you clone the template this values already there you literally don't need to do anything unless you are saying that uh you want to change the email fields to something else right what it's doing is this field this operator so equal to this value and the value is basically coming from the incoming trigger which is the lemon squeezy payload the attribute and the email um so yeah so it's essentially like a expression editor okay yeah yeah that's that's perfect that always confuses me when I get to that part I'm like ah yeah how do I get what do I want again yeah I think what you can do is uh we like have some examples right I think always some of these developer friendly nodes are can be challenging for no coders that's why we try to provide examples of what filter is and detailed setup blog if you're not sure so it's like more handholding and we also yeah um so that's one thing so again like we are just simply updating that document to say subscription live is false love that yeah and then effectively on this you um now are back to the sign up and then this disappears so yeah that's kind of the very basic concept here um and then that can be expanded right like you can expand it to say okay when this person is cancelling you can send them an email saying okay we would love to learn more about what it is and then so you can add like a email uh based uh thing so we have like send grid we have recent um yeah those that's kind of the core idea after you check out so on the limit squeezy page right we are we are creating the payment we're associating that payment from Limon squeezy to Firebase right we can do a bunch of other things but then is there a way to sort of like what is that post purchase experience do they get navigated back to the application the flutter flow application or I think in Limon squeezy there's like a post purchase screen or something exactly so when you do this you can essentially have this link here in the settings right like they have this customer portal experience they have product experience so those kind of things you can easily do directly on Lemon Squeezy so I think it's uh um yeah it's should all be under this settings with General Stores um and when you create the product as well there's some options there yeah I think I think in product creation there's like a postp purchase like success page or something so what you could do is you could just uh do a deep link to your flutter Flow app or to you know um the URL right of your if you're doing a web app it's it's really easy because it's just URL whatever so yeah yep dashboard you know very nice yeah let's try it out I think it takes of yeah I keep missing the thing is there like a trick to this to keep it up and running when you're away I utilize the local run now I I build everything in my desktop app and I use local run and I love it so yeah yeah it keeps things like active for the most part there are some nuances like recently it's been resetting um you know every now and then I don't know like the flutter Flow app reloads or something but beyond that little caveat um I've been testing stuff all week in local run so okay it is it is uh yeah very nice and it just really easy to uh always go back to you can also test in the emulator on your device so I'm not much of a developer I hate setting up Dev environments um and so just being able to do it almost visually uh there's some terminal stuff you have to do but to be able to do that just without much uh xcode or terminal experience is really really beneficial so yeah yeah 100% I think yeah I really love the way to you know also test quickly and this flows and um yeah essentially in this flows we were also trying a few thing before this demo but um we didn't get to it but essentially you can um when you do navigate to something you can also fetch content from somewhere else if you want um so you can do API calls if say all your data is not on fire store or if you want to um render some kind of additional thing based on the user right like if you want to show something based on what the user asks you can do like API call and then call Bill ship workflow to do things because we have like um ability for you to call any AI model uh any kind of other uh places as well so we have tons of templates for you to check out and we recently did one um uh flood of flow Marketplace app as well for AI assistant so if I go to w yeah we have been uh inspired by your you guys been you guys have been moving and working I love it yeah we have like a few cool things lined up as well but right now we have these two and one more coming re you know literally today or tomorrow um the AI assistant this one is originally inspired by your uh template so this one is uh upgraded version with assistant AI assistant API from openi I'm gonna use it that's great I have a coffee app that I want to have like a assistant Barista you know an AI assistant Barista like hey I my coffee tastes terrible today this is what it tastes like and it gives you feedback like oh we'll grind finer or you know like try a different dose um but it would give you hopefully educated responses not just hey yeah try a different dose like okay that's pretty obvious but I'm a pretty Advanced coffee uh connoisseur so I want something to bounce ideas off of um that can help me figure out the problems so yeah yeah yeah so you can do that I think this basically these uh templates are complete apps right this has flut oflow template and backend template on Bill ship so it's a combo template same for this notion one uh which is like voice notes you can take from you know the simple app and then it saves it to notion with transcription and like summary and classification and so on so you can change things okay this is awesome like that that that's awesome Koo has been wondering like okay how do we like you know process proze certain things you know like establish processes for our agency and our workflows and that right there man that would be so beneficial I'm using it I'm gonna use that as well I'm gonna create this beautiful UI and flutter flow and then I can just make voice notes and notion and tag Chase tag people uh yeah so yeah watch out for like the a assistant but with streaming response I think that's yeah that's a good one because it uses uh where there two ways to do it actually there's one which uh the that was published in the by the digital Pro it has the um streaming with custom code but we have one with fire store directly um you know streaming with real time and we're thinking about doing it with one with super base as well that is awesome literally awesome because that's the thing like I had a client reach out to me they're they're trying to do sort of a AI assistant like that and he was like dude why don't why doesn't flutter flow provide streaming like blah blah blah BL blah and he was like you know it's it's not that hard but it is beneficial to have that just out of the box like it's so much it's such a better user experience than the current weight you know maybe do some conditional I had an AI chatbot uh for a little proposal generation tool that I was building last year and it was just like okay if longer than 10 seconds you know show this text if longer than 15 seconds show this text and I would just animate in different like you know things on the front end which is not been not the way to do it um yeah but having it streaming is just beautiful yeah I think streaming just makes it appear faster right that experience even though I think the end like full answer is in the same time frame I guess but yeah I think that everybody so used to that experience that uh it's normal to have um yeah so those templates are going to be super cool uh but going back to our idea here I think I keep missing the timeline for this but yeah as I think people get the idea right like here are a few ways maybe it may be live now so that test mode it does say yeah you may just have to click click that screen to try to get it uh to sometimes I just click in the middle of the screen you know just sort of Let It update so yeah sometimes takes a while oh there it is is there it is cool so let me try again [Music] now I was using this earlier so let me just use the same account yeah oops you may need to log in oh maybe I forgot the maybe I'll just try again with something else I don't know if that I'm able to go and check this but yeah oh it keeps so I need to turn off this plugin sometimes they're helpful and sometimes they're not but yeah I think uh it kind of the reason this shows up like this is because I'm sign into lemon squeezy as an account and if it does then it actually automatically fills this that is kind of the problem I was trying to avoid but if you don't like like a typical user would not have this because they are just logging in they don't have like a lemon squeezy open and then also another thing they're probably not yeah they're probably not logged in the same it may have something to do with the same store as well you know something like that yeah and then the other thing is something to watch out for which you know we we got tripped when we trained to do this is like lemon squeezy um in the custom portal that you want to show it doesn't work in the test mode you have to have your store published only then it shows up that custom portal because um there's some legal legality or like you know only then you can cancel a subscription or something like that because we in test mode you know you might see some issues around that but uh no let me just nice yeah this is great this is exactly I mean this walkth through um has been very beneficial to me so I'm I'm looking forward to sort of rewatching this and and diving in to coming up with some some actual payments you know maybe I'll get a first sale yeah I'm mean happy to chat more because we have we are also active on Discord you might have noticed so if someone wants any help you can they can definitely post there and we can answer questions uh and you know your experience should be fair much EAS faster than because I'm trying to explain step by step all you would have done is clone the template plug in your details and it starts working hopefully uh but yeah as you can see if I did this uh it should have created a new document somewhere um but if I actually go back here yeah you got to remember what email you yeah but I think this the problem here is with the test store uh and also having that login but effectively what happens here is that your payment comes through you sign up for the course and you can come back and then you'll see those two other buttons because your uh thing would have signed up yeah and you may just need to update it right like it may it may just be uh this isn't processing the update I don't know we had that problem with uh Revenue cat just just recently we just launched an app an AI app for uh oh let's see it was an AI app for jewelry creation and we only wanted Pro users to uh you know initiate an estimate and so it was like okay push them to revenue capat then push them back and it was like okay it it needed to um it needs some time to reset the the user collection so okay you had to do some additional logic to just sort of reset that P AG with the ability to yeah course so yeah what we have noticed is like earlier I was trying to test this but with the logged off and then also using the sign up here then it works fine um but yeah I think I noticed that where the button shows up after like a slight delay maybe it's because it's in this kind of a test mode or something um yeah that's true as well yeah well that's that's super cool I'm I'm gonna try it out test it hopefully today I have a bunch of meetings I'm going to do a I'm actually gonna do another live stream with a Polish flutter flow Meetup so uh that'll be interesting but hopefully I can find some time to dive into this but yeah okay let's see yeah you have back to back you're like a popular YouTuber now looks like no I don't know about that I don't I don't know about popular um but I do do this stuff so we'll see I'm just coming up I yesterday I recorded like a build from scratch you know uh event creation app you know and I'm gonna try to launch that as the first video so that'll be that'll be fun it'll just be like hey these are all the basic things you need to know in flutter flow you dive in you I think the most powerful thing in flutter flow is being able to see live Dynamic data you know from a designer standpoint like it's cool to build the UI 100% but to see live data is something you can't do in figma you can't do in any of these other you know design tools so yeah I'm trying to be like okay and I'm getting great feedback from beta users about oh maybe the course content could be like this so it's always prolongs my recording and you know oh I can't launch this until this is done so we'll see but this was great this was awesome uh rosson was wondering um where the Deep link is for the redirect and I'm pretty sure it's in the product page in the limit squeezy account if you maybe if you just want to uh show one of those let's see yeah yeah the redirect is always challenging we had a um we had a stripe uh yeah basically we had a stripe checkout in web before web was offered by flutter flow we had to do custom work on and it was so there so much work um that let's see yeah it's here so you can change the text on the nice yeah after and then you can change the link as well perfect yeah see that's amazing so you could just you could deep link them back to the dashboard of your app right or you could deep link them to if you have a web app as well deeply come back to you know your domain.com dasboard or whatever um and I'm sure you you could uh so like I'm going to sell courses right so it will be a course ID that I could attach on there you can actually grab that um yeah you can because you're going to be passing a parameter into the course details right or you're going query that I would pass the parameters so you could just copy and paste that uh direct URL back into there so yeah so here you can essentially um pass in whatever combination uh you want to pass in I guess um your you'll have different products here right I think um you can change the product ID in the store and so on yeah I think there's also like ability for you to have specifically just like payment links but this is for the subscription and also you can yep that's perfect because uh I feel like the payment subscriptions are harder yeah you know like I feel like subscriptions are harder payment one time links is like okay do this but do it with you know just a single time purchase you always have access to it so yeah and then you can if you want to have like the license based things as well we have options here so if it's not the subscription if you want to do orders the I think this is the payments in there lemon squeezy World payment links you can do that or if you want to workflow for okay now this person has done the thing and you want a license key to be created and you give it to them and then they put it in the app and then they are opening up specifically things so that's another approach yeah cool now I have a dozen questions about managing subscriptions you know I saw refund in there I was like dude I know that that's going to be a pain in the rear you know I'm sure you can just do it from lemon squeezy though so maybe that makes it a little easier but if you wanted like a custom admin panel because I'm gonna have you know customer facing or the the user facing portal for no codei and then I'm gonna have a admin portal for myself it's gonna be an instructor portal for an LMS so I'll be able to view you know everybody taking the classes or courses um their progress in those courses I'm going to be able to see their quiz quiz results you know give them feedback communicate with them view their assignments grade their assignments you know all of this stuff but also like if I could uh have a list of users and their subscriptions and then be able to say okay this person asked for a refund whatever you know they had a bad user experience or whatever that's a totally fictitious uh scenario it's going to happen K uh but I could like refund it from there so yeah and I think you can also like if payment fails you can like you know send them a couple of emails in automation right those kind of things um yeah I think most people also like forget their credit card expired and you know they just waiting to be reactivated I guess yeah yeah any other questions anything else you want to address not from okay I don't think from my end I'll open it up to the audience um I love how restream just sort of pads our numbers here I mean we're up to 217 um on on restream mostly from Twitter um I don't know how many of them are still active but I hope they are um but yeah if you guys have any questions please ask in the chat um we'd love to answer them again I think this is superb right because one of the annoying things in flutter flow is just payments in general and because what you're going to do Revenue cat Revenue cat is not a good uh model for most applications especially SAS applications it has its it you know if you're doing sort of um an only IOS app or only you know native app where you need to manage subscriptions that way um and it's in accordance with Apple's guidelines like that makes sense yes but for any SAS like I mean slack you know like restream like flutter flow like they're all sass they're not tied to a specific app therefore they don't need to go through that App Store subscription model they don't want to tie it to an Apple ID I want to be able to manage my my subscription on multiple platforms log in on the web Etc so this does that we just covered it like you could now run a SAS through Limon squeezy for any app you build in flutter flow which is amazing uh this is something has never been available to flutter flow users sorry I mean like you know without a bunch of custom code um like this without this explanation and you could do it in build ship or you could do it with u stripe you know stripe subscriptions but still it's like a custom it's a bunch of custom stuff you'd have to do and you have to go through it so you walking us through this I think is extremely beneficial for a lot of users looking to build products on flutter flow that are more like SAS rather than you know consumer based apps that are trying to get ad Revenue so I think is the best use case for building anything I think SAS is the best way so yeah I think that subscription is General hard to set up right I think we gave an example now of how to do it but essentially we can you can basically do the same thing same concept but with the stripe web hook as well same things we have here when a subscription is created deleted so same uh we also have like similar you know templates for you to start um I think the stripe templates you might have even more templates right like yeah so you have save subscription um you can summary check out and so on so yeah essentially same concept some things under uh you know subscription only users you can have like a preview where some things are available to free tier and then paid tier has more things all based on Firebase authentication or authentication um any authentication actually use and then uh it's at the users's collection level so it's not like a superficial UI level thing it's more like a backend driven uh check I love that and thank you for that as well that Assurance right because I was wondering about that I was like oh it's in the user collection like we're just sort of taking this field and then like you know we're doing a lot of toggling of visibility in the UI from this one field in the user collection so I was like oh I wonder how secure or how much like I don't know I don't know much about hacking I wish I did but like you know how much can it be abused so like this seems like a very good um sort of outline of how to set something up to be secure and efficient so yeah and I think one thing I I can also like say that if you want some kind of things that are not based on UI level things as well what you can do is you can I think uh do a a APA call to check the users uh some kind of level of things and then also show that based on that that's another option but yeah I think uh this way you were effectively looking at the users collection and then that data is being manipulated only by the uh back end yeah awesome amazing that is all the questions I have uh I'm excited if you want to I mean we have like three minutes I saw you post a video about chat TBT for o I think is what it's called right if you want to just showcase that because I think I mean build ship is utilized for just everything I think the assistance in the marketplace are amazing but I was impressed by how fast you guys got a sample out of the new Chachi BT model so yeah I think that's because you know we basically use AI to generate these nodes and anytime some new model launches within like you know like Lally like few minutes after it's available we can publish a node for it I think the generation creation of the video takes longer for us than the um actual you know node creation so uh if I go here uh let me show some examples right let me just simple Hello World um think there is some uh let me just open some other workflow this some slight delay okay so let me open this um open AI right there are a bunch of nodes here the text generator one for example and this is the one we just added the support for with the 40 and what's happening is um my browser suddenly got slow all good you have a bunch of tabs open I have too many tabs let me get rid yeah I tend to have this tend to happen to me where I have just too many things it's not only you it happens to of people I'm OCD about it so I keep them all shut off I'm like no I can't have that many yeah uh so as I said like you know you can store Secrets securely in the secret manager we have a bunch of things already here so let me add that we have some prompts that you can pass in from either from the API call so here I have a rest API call it g gives you this unique URL that you can use um and you can also like test every node so if I say uh um you are a poet or like write a poem about Bill ship and FL of flow let's see if it what it does um and say you are a poet and then you can Define all these things but mainly this model we just added literally as you know few days back yeah and then if you run it I I'm think it's supposed to be super fast the first call I think one thing people ask a question like hey you know it's slow it's actually because uh the first call sometimes it has that cold start issues but then onwards it should be fairly fast um so as you can see it came up with something uh oh yeah this is that's the that's the greatest one that's the greatest prompt as well just write a poem I when I was testing out like turbo 3.5 turbo when it came out just write a poem about flutter flow it was just like okay cool it's working yeah and I think the interesting thing here is like everything as I said the code is accessible right you can see what's happening behind the hoods you can change the inputs outputs if you want to add something make this your own like you can customize it and you can use the help of AI to generate stuff so that it's not like you're typing in code um and then you can pass value from one thing to another so if I were to add like um you know stability so we have like a replicate for example right like uh image generation yeah um and then if you want to pass one thing to another you can essentially do this where um previous node can be the prompt for this or something like that I love that yeah literally that's that's absolutely amazing yeah yeah and you can also like test the entire workflow so what we are building here is a ability for you to use any AI model and then you know experiment test and build the way a developer would but in the no code visual way and then when you ship you get things deployed somewhere so you don't have to take care of how do I go and deploy where it is deployed which Cloud console I need to go and do what that kind of question so uh it's definitely useful for a lot of folks who can think like developer or you know know coders who can you know Savvy enough to learn how visually they can build but then uh they have that power to make things you know customize it because I feel like lot of lot of times if you start with some you know typical NOCO tools you get stuck and you cannot expand it and then uh what do you do you have to like go back to code or uh try something else whereas here we want to give ability to just um start from this kind of a no code experience but you can continue to tweak and make things your own amazing absolutely amazing well thank you so much for being on here and for walking us through that I think it was fabulous um I think a lot of people will find Value in this and I'm looking forward to impl implementing it my myself so thank you for just taking the time I know that yeah sometimes these things are I don't know they're a little less boring than or they're a little more boring than AI stuff like pay and you know but it's like necessary it's like oh that's like the thing we need you know people need to understand this and there's not a lot of good documentation out there around uh how to set this stuff up uh in flutter flow or you know other no code apps so thank you yeah I think that definitely this is something every app needs like subscription payments figuring that out AI is obviously cool and nice to show but uh the core mey things are the you know the operational things that you need to take care of uh and yeah thanks for having me here you know enjoyed the chat and I'm actually looking forward to the course when it's live and I'll probably take it because definitely can use design based approach to building apps yes yeah I think it's I think it's highly beneficial there's definitely like a niche there I think there's a lot of really great design teach out there so it's like oh I mean I don't know I don't know if I can teach it better than those guys but design related to flutter flow it's like oh okay yeah I can do that that sort of right up my alley um so I'm hoping to provide a lot of value but thank you all so much for joining everybody that joined even all the Twitter people that maybe just viewed it um but we get their numbers so thank you so much hope you all have a wonderful week and a good weekend coming up may it come quickly to you all

Channel: Kaleo Design x NoCodeUI

Views: 416

Keywords:

Id: 5tS9zaPRC0E

Length: 64min 24sec (3864 seconds)

Published: Fri May 17 2024