6 Best APP Builders For Beginners In 2024 (NO CODE)

what if I told you that this app this app and this app were all built without writing a single line of code that's right the founders of these apps use drag and drop Builders called No code tools to get their ideas into the IOS and Android store and so in today's video I'm going to be breaking down the six best no code app Builders and make sure to stick around to the end cuz I'm going to be helping you decide which one's the best for your project and because we have lots to cover let's jump right into the first tool which is called flutter flow the first tool we're going to be talking about today is tool that's been gaining a lot of momentum over the past 12 months it's a dragon drop Builder that allows you to build mobile apps desktop apps and also web apps so it's what we call crossplatform so as you can see here from their website you can create beautiful UI or designs you can generate clean code behind those designs you can launch your app in the app store and if you even want to get a little nerdier you can extend it with code meaning that this is also a low code platform in terms of features you can build out the visual elements from scratch with a dragon drop Builder where you basically grab components and you put them together so you could just place for example a button on a page it also has more than 80 widgets which are basically pre-created modules then it has integrated logic and connections meaning that you can actually use the API functionalities to tap into your database so you can get information or data from any place on the web and basically bring it into your app which adds power to it and as you can see here everything that you build is also responsive meaning that it'll look as nice on an iPhone as it would on a desktop computer it's incredibly customizable and of course that kind of comes with a downside it's a little bit more complex to learn the upside is more complex functionalities it also has features to create things like animations you can have push notifications inside of your app now flutter flow has been created in a way where you can collaborate with other people as well you can grab sharable project links you can give different project permissions for different individuals or members of your team and there's also Version Control now another feature is that you can export all of the code that you build it's not that useful if you ask me because anyway if you want to customize things you're going to want to stay within the Builder anyway but this is one of the few no code platforms where you can actually access all of that code so what kind of things can you build with flutter flow this is an app called tagalong it allows you to be matched with a one-on-one coach who's a professional athlete to have them as your trainer as you can see this app looks quite slick and it's nice it's userfriendly this is another app called track your talent which was actually built from one of our students at we are no code it's an app for actors to be able to book more auditions by staying on top of and nurturing their industry relationships or this cool app called natat Parks which essentially allows people to view different national parks in the United States as you can see really beautiful designs but let's take a quick look inside the editor itself okay so I'm inside the interface and as you can see when I create a new project I'm actually going to start with a Marketplace template that I found it's going to ask me to select the theme so I can select between the themes click next okay so on the left hand side here we can see the elements for example so these elements are basically all of the things that we can add inside um so as you can see here I can grab some text I can just you know add that anywhere I would like inside of this element boom and there we have hello world and there are plenty of elements that you can select from here so that's pretty straightforward underneath that we can see essentially how all of these different elements are laid out sort of the tree so we can see that inside of this we have several sub elements and we can see how they're nested into each other after that we can jump into the page selector so here we can check out all the different pages that are inside of our project this under here is going to be the storyboard so this is where we see basically all of the different screens inside our app how they connect to each other and we can go into each one of these and build within each one underneath we have the database right here now the cool thing to here is that flutter flow automatically integrates with Firebase so here you'll be able to to see your uh database and you don't have to keep going back into Firebase underneath here you're going to have the different data types when you make more complex API calls or connect external Services we're going to be using this little tab over here this is where we have all of the different media assets so if you import them you can use them throughout the project here on the left hand side we have the custom code tab underneath that we have the cloud functions then here's where we're going to be automating certain tests and this one at the bottom here is the themes tab so basically your entire build has a theme you can come in here and change some of the elements of your theme and those will change throughout the entire project so if we wanted to change the primary color we could easily do that here and it would reflect in the entire project now if we go back into the elements here on the right hand side we have another tab which is essentially uh for styling right so if we for example grab this image we're going to be able to adapt different things about it you can adapt the alignment M you can adapt the image itself uh the width the height now finally I'm going to quickly show you the uh export function for the code if you go here you can go to the developer menu and you can view the code so if you're on any given page you can basically check out export all the code which is just lying right here so super practical and that's pretty much it for the short tutorial inside of the interface okay but what about pricing so as you can see they have this free plan that you can start with you can start practicing learning the platform and it's only really when you want deeper functionalities that you jump into a $15 to $30 plan or if you want the Pro Plan it goes all the way up to $70 now of course if you want more than that and you're looking for a teams plan it's going to be more expensive but this is actually a very affordable no code platform so if you're an Enterprise definitely check out that tab as well so what is the downside of flutter flow well the first thing is that it is a little bit more complex to learn so sure you can build very complex functionalities but on the downside of that it takes a longer period of time to learn so if you're just getting started in no code this might not be the first platform that you want to get started with so let's now jump into the next platform we're going to be talking about which is called draftbit now draftbit is actually based on the framework called react and you can build powerful apps 10 times faster as you see here on the website you can build native mobile apps you can also build responsive web apps which are apps that live inside of a browser and this is another tool that you can actually use to export the code as well this platform as advertised here allows you to design to build to test and to publish all from the same place so it's what we call an all-in-one Builder they also have a nice number of templates that you can go ahead and check out but if that's not exactly what you're trying to build I would stay away from templates especially at the beginning now again you can build here leveraging pre-created components you can grab blocks bits or you can even add customized code so draft bit again is one of these low code platforms then on the design front you can create as you can see here themes fonts and icons save components then you're going to be able to connect your designs or user interface with the actual workflows behind them and you can access apis directly so you can connect it to outside sources of data or information and bring them into the app and again similarly to flutter flow it's created for collaborations so it's easy to do things like share your project comment etc etc so with this Builder you can build things like Montage which essentially allows you to shop from your favorite TV shows checking out all the items that people are wearing during those shows you could build platforms like Vault here which allows you to bet on ports or you can build apps like city as a school which is essentially a Marketplace to be able to learn online so let's quickly check out the app builder itself so you can see what it kind of looks like okay so once we've logged in we can create our first project here I'm going to work in a template so I can show you the interface we're going to choose a fast food app now as soon as we jump into this Builder what we realize is that it's quite a bit different than the flutter Flow app it's a little bit more complicated um basically the different Navigation Tabs are here at the top instead of on the left hand side another big difference is the to uh create components and to add components you're going to come inside the components here you're going to click plus here and as soon as you select to add a new component it's going to add it below so I've added several text ones and then as you can see I could basically drag these and I can go ahead and Nest them underneath anything I'd like so here there's a login uh Button as you can see and underneath I have some text you can name the element so I can call this hello and then um you can actually adapt the text here by just double clicking on on this so it's a little bit different in the fact that we're not just grabbing elements and putting them on the canvas what we're doing is that we're adding them we're putting them in uh the right order and we're coming here on the right hand panel and we are adapting things so for example if I wanted to adapt this image I can go in here I can check out these different stylesheet I can see the width I can see all of these different factors I can adapt any one of these and uh basically this is how we are adapting elements on the canvas now if we look at the main navigation up here this is for all of the API connections so if we want to integrate this with air table as a database we could do so backend list super base Etc if you want to add custom code this would be the place to do it you can only do that inside of a paid plan we're going to have the different screen variables over here we're going to see the themes and styles so if I click on this again uh kind of similar there are specific um elements to this entire project if we change one of these elements it will reflect throughout the entire project which makes it really useful uh when we're actually building cuz if not you can easily just change the color of one button and then all of the other buttons are different and last but not least here you can see all of the different assets that we're going to use uh inside of this project as well at the top we both have a design which is where we're going to be designing or navigate where we can actually go and check out functionally how this app works so if we switch to this one it's going to load and then we're going to be able to test out the functionality so if I want to sign up I can click on this button and we're going to come into the sign up field so this is how we test it functionally this is how we adapt the designs and last but not least if you're looking to extract the code this is where you're going to be able to get access to that code so just by clicking on this and since this is the pay feature and I'm in the free plan I will not be able to show you this right now so overall a little more complex than flutter flow I do like the interface of flutter flow a little bit better but this is what the interface of draft bit looks like okay so now let's talk about the pricing as you can see here and like many other no code tools you can usually start learning for free so you can start playing around in the Builder and easily learn this now here you have five screens per project meaning that uh very quickly you're going to have to upgrade to the basic plan and then once you have more than one live project you're going to have to go to Pro which is $59 a month it's actually a nice price point compared to hiring programmers and remember that with these platforms also comes the hosting cost meaning that you're not actually paying for servers you're paying for the subscription by the way if you're enjoying this video and you want me to continue creating videos then please subscribe to the channel it's literally the only thing I have that tells me Christian you're doing a good job keep working and if you're a person who has lots of ideas but has no idea how to get started because it requires Tech then check out a free course that we have below where we're going to teach you how to launch your startup with no code tools and now let's get back to it okay but flutter flow and draft bit are both more complex platforms as we can see now the downside is that if you're a beginner you're going to probably get quite lost and frustrated and we see a lot of people that do a similar thing they discover no code they go to complex platforms like these then they get discouraged because they play around and feel like this is just going to take too long or it's not made for them and then they give up if that's you then don't worry we got you we have two more tools that I'd like to talk to you about right now the first tool is called adalo now adalo is a mobile app builder as you can see here with no coding required one of the big advantages of this platform is that it is a lot simpler than the two ones we've just talked about and a lot of the design is already streamlined so you don't have to worry if you are a terrible designer as well so this is also an all-in-one Builder meaning that you can design your app you can then build the app you can then publish the app and of course once you've published you can also grow this app all within the adalo ecosystem you can also if you'd like attach it to an external database and bring in the information so you could use Google Sheets or air table for example now this Builder allows you to have a responsive design in your app it also allows you to integrate with inapp purchases so you can connect it to platforms like stripe including many other connections that you can make that are already Integrations that exist with the platform if anything doesn't connect with it you can actually use zapier or make to be able to connect directly with ad dollo which extends its functionalities significantly and yes you can even have functionalities like geolocation custom actions and many others they in fact have a marketplace where people build components and then you can use components that other people have already built they also have a number of templates that if you find exactly what you're trying to build you could just use one of of those and there are currently more than 2 million people using a dollo in a dollo you can build things like Community apps event apps uh customer support apps productivity tools crms so even though it's a simpler Builder you can actually build some very interesting things with this tool and yes all of them can be deployed to the iOS or Android store so this is charara for example it's an app for holistic health that was built in adalo this is Joy Blossom it's a meditation app these apps look relatively similar they're very functional they're way easier to create you only have to really select the basic color palettes you're looking for then you create the different screens you create the logic behind the screens and they look nice now the downside of a dollo is because it's a simpler app builder to learn it's also a little bit simpler in terms of the kind of functionalities that you can create so as soon as we're inside ad dollo we can very quickly notice that ad dollo is quite different from some of the other builders that we've looked at up until now it's a lot simpler and as you can see you can see the different screens you can add screens and you're actually working Within These screens creating functionality on these screens and so it's a lot easier to kind of build out inside a doo here in the top left we can add elements easily you can choose from components you can add additional screens so if we go inside of screens as you can see here we're going to be able to start with a blank one or we can choose to go with pre-existing ones so there's lots of different ones uh however you can also just start from a blank canvas because it's so easy to build so if I was to just build an additional one you just have to call it something and then I'm going to into the components here I'm going to add an image for example drag boom drop for example let's grab a button let's put it right here boom and as you can see it's really quite easy to do that um on the left hand side you're also going to be able to adapt the uh main things around that button so as you can see there's a little bit less of flexibility when it comes to the customization but honestly it's uh it's really good enough and it just works well especially when you are a beginner and you just want it to look clean and nice so underneath the elements tab we have The Branding tab you can see the primary color the secondary color of the app uh you can also check out the different fonts that you have so you can find the one for the headings you can find the one for the body and when you adapt them here they're going to adapt throughout your entire project which is really cool under here we can check out the screens themselves so you're going to be able to see okay we have this one I called hello there's home obviously you wouldn't call yours hello uh home login sign up um and you can add screens here so if I I could add it the other way a blank screen or a pre-created screen I could add them from that uh other View and if we go under screens here we then see the database which is all the information again adalo can be connected to different databases and then we can import that information here under here there are some general settings as you can see here that you can easily change so if you basically have your app icon you can just upload it right here mix panel is for tracking so if you have a token you can just put it right here uh and there's lots of other settings under here that I won't go too too far into API keys this is when you're trying to connect an external API and you will be able to do so inside of this tab and once you build out your app and you have functionalities you can go ahead and publish it underneath here you will also be able to see the analytics so there you go how many users daily active users uh Etc now once you've built it out and you want to actually visualize your app you can just click on view app and there is both the uh staging preview which is what you're Building inside of I click on this you can select from different phone sizes so if I want to look at the preview in a different size I could just check it out here and I'm going to exit before this thing loads but you got the picture and we jump here to the pricing as you can see again there is a free plan once you jump onto the starter plan it's $36 a month that's built annually you were to switch that over it would be be 45 a month very reasonable still for building out a first app the professional plan is at $52 usually most people are on the starter or professional plan so that should be plenty for you if you're just trying to build it out and that now if you're a person who already has a database and you're trying to transform that into an app specifically for internal tools there is this amazing tool that is called Glide it is also very very userfriendly and it allows you to build business software so it's very focused on internal tools and if you're someone who's always lost in your Excel spreadsheet well it's time to upgrade you can bring that into Google Sheets and you can use it as a database for Glide now Glide also connects to other databases so if you already have a database inside of something like air table it would be very easy to connect this is a tool that's great for inventory management it's great for tracking apps it's great for portals and they have a great track record releasing great features and also being super easy to build with you can either use their database or you can connect to Sheets you can connect to excel you you can connect to air table and you can connect to many other databases too once you build something you can deploy it on all devices so this is something that can look like a mobile app or it could be a web app now one little thing to pay attention to with glide is that you cannot actually publish the IOS and Android store and honestly most use cases don't really need to be published in the iOS or Android store despite being very easy to use you can also build out some pretty powerful workflows inside of it so you could integrate with thirdparty apps you can create multi-step actions based on okay if I click on this I want it to update the database and I'm going to want it to send me to this page they also have plenty of templates inside of Glide so for the most part you could just find a template that suits your needs also like many of these other app builders that we're talking about uh have integrated some AI features as well that allow you to build things quicker now let's quickly jump into the interface so you can see what it looks like excellent so this is glide's interface as you can see it's super super clean on the left hand side we have the navigation and here we can choose the different screens I can also add different screens so for example if I wanted to add a screen for chat I could just pretty much import that and create that you can also choose to for example just start with a custom screen which means that you really just start from scratch so if I wanted to add a component for example I can just come here add a component under things it could be for example an image and then here I would be able to you know drag and drop this wherever I really wanted to you know this would be at the bottom so maybe I want it to be right above uh the actual collection so we can see this image at the very very top when I click on any one of these elements I can actually adapt it here on the right hand side so I could make it uh you know a different type of element and inside this component I could change any of these so if for example I wanted these uh data options to be slightly different I could add an option uh etc etc and then what you do is that you essentially connect data behind them so if you go to the data tab here at the top you have all the data you can import data straight to here you can also connect to an external uh data source if you'd like on the left hand side you can see all the types of data then if we go up here into layout you can basically see the layout of the different elements that we are on and we can adapt those actions are actually uh to kind of supercharge your app so um first of all you can connect these as you can see I'm going to add a new action so here uh you can select what you want it to do if this specific user interaction happens I wanted to do that and you can basically add conditions so for example here if name is not empty then show a specific notification and here I can put the message uh etc etc so that's what actions really are and if we go back into actions we can actually see that uh you can start with an existing one so there are already a bunch of things that you can do here so if we come back here to the menu this is a very easy U navigation you can actually check out the navigation within this and then you can basically go go ahead and come to the settings over here you could adapt your settings like the icon you could also um do things like the name of the app um you can also all sorts of appearances so if you'd like to change the appearance of the overall app you could do that here and then once you're pretty much ready you can go ahead and publish your app so if I click on publish here and then I actually uh copy app link and I bring it into another browser I can check out the app I can search for a different thing if I wanted to I can click on these and it's going to open up the individual pages and so that's pretty much the short tutorial for what it looks like to work inside of Glide and finally I'd like to talk about the pricing here so let's Jump Right In you of course have a free plan where you can build simple things and use uh Glides actual database if you're trying to connect to an outside database for example or you want deeper Integrations then you're going to have to go to the maker plan which is $49 a month and then we jump into the team plan which is 99 a month now Glide is one of these platforms that it's like so easy to learn that it really makes it worth the bang for the buck kind of thing so if you're able to build the use case you're looking for with glide I would highly recommend this especially for beginners okay but what if you're a designer or maybe you have some more advanced skills and maybe you just use figma to already create designs well then this next tool is going to be perfect for you it's called Bravo studio and it literally is so proud to be able to go from figma to publishable mobile app in a Flash so this is a platform that's been gaining a lot of popularity as well especially among designers it has more than 100,000 users and it allows you to basically design inside of figma then push those designs into Bravo Studios then you can attach the database which is going to be your back end and you can build out user interfaces which are what the MVP looks like you push all of those then inside of the iOS or Android store so with this platform you have a lot of design flexibility you also have native features for lifelike prototypes and it actually speeds up the process of iteration they have different components that you can already use which speeds up the process of building dramatically actions which allows you to bring functionalities you can make different Integrations like payments have push notifications with Bravo Studio you can build things like e-commerce apps productivity apps event management apps you can see a huge number of the use cases here here's an app called cardboard nerd made by Jesse that's also quite slick and this is an app called Manila okay so let's quickly jump inside the editor so I can show you around and then we're going to jump to the pricing okay so the first thing you'll notice when you jump into Bravo studio is that it is completely different from some of these other builders in fact you're actually going to be building inside of figma first which is a design tool and then you're going to be pushing all the screens you've designed and creating all the logic and creating all of the functionalities behind your designs inside of Bravo Studio itself so there is a plugin for figma that you should be downloading because it's already going to use some UI presets which is going to make it easier to then bring it inside of your Bravo Studio project but if you start a new project over here it's going to basically say hey import your app right now for the sake of this I'm actually going to be using one of the projects that already exists it's a fitness app now one of the big things we realize is how beautiful the designs are because they come straight from figma so a lot of the apps that are created with Bravo Studio are just really really goodlooking but of course you need to have some more design skills to be able to manage this kind of app platform so on the left hand side here I have all of the different screens here I have the sign up I have the intro screen as you can see it looks very nice the home screen which is when you actually log into the app and what you start by doing is really adding the data that you have for example you might have it in a backend or database like xano you're going to start off by connecting that so that we can feed the information or the data to the app that it needs then we're going to create some Integrations as you can see here so notifications payments um all of these other other aspects of an app we're going to be able to create here and then finally we're going to be able to publish we're going to be able to see the analytics um so it's really a platform that works very differently than some of the other ones so if I'm in a specific screen like this I can see that these individual um elements over here I can also click on them here and we can see basically how they're connected so here you're going to be able to populate this for example with the actual data category ID and the actual ID of this little card so if we had several you would see many different cards here and then if someone clicks on this it's going to potentially have an action and so that's us creating the logic behind these designs now if you want to preview the app for example you can go here to the top right click on preview you can actually scan this QR code and you'll be able to preview it you can also just preview if you're looking to uh troubleshoot your app you can do it here so you can basically figure out where there might be some bugs inside your app and already debug it before you actually launch and as I mentioned earlier but went quickly over here you can go into publish you can basically choose how you would like to publish it and um and where you would like that to be published and now in terms of pricing as you can see here the starter plan again is free teams plan is $44 when you want more advanced collaboration within the teams and then it only jumps to $54 which is also very reasonable if you ask me Bravo Studio I would say is a medium tolearn platform and at the end of this video I'm actually going to be giving you a couple of criteria you should be considering when you're choosing which one of these Builders to use let's first jump into this no code Builder called thunkable this is thunkable you can build custom mobile apps no coding required I'm not going to go through too many of the features here but essentially it's quite similar you can use uh pre-created components you can essentially uh launch any one of your apps in the iOS or Android store you can build Apps for Education iot product teams pre-sales agencies you're building with dragon drop components which makes it quicker you can design your way uh essentially allowing you a little bit more Flex ability with the design functionalities now thunkable has some deeper functionalities than in some of the easier tools we've talked about less than some of the more complex ones we've talked about today they have plenty of Integrations as well with third parties and you can publish directly making it a lot easier to get your app on the App Store so now let's quickly jump into the editor to see what that looks like okay so when we jump into this interface it's very simple to use uh we could basically come here on the top left we're going to see the designer you have components and this is the component tree above underneath there's the different elements that I can add so add components here I could actually just grab for example go a bit further down an animation I could grab that put it here I could go to L files and find a cool animation to put here then what I could do is I could add for example a text input so grab someone's email address for example make this a little bit smaller over here because maybe I want to add a sign up button then I can do something like grab a button I can put that here and I could change things about this button so that's what we do here on the right hand uh side as you can see it's a very easy interface here so I can just add things um very quickly if I want to add a different screen the way I'm going to do that is here at the top so I could just create a new screen and uh each screen again I could just go through the same process then we're going to use these designs to then create the logic behind the designs um for example as soon as I connect a database that's going to be here on the left hand side so once again you can connect to a number of different databases here if I add a data source it's going to ask me to create a new one and then I can select I can actually do this within thunkable and create my own database in thunkable I can also attach it to a Google Sheets for example or an air table over here are all the assets within this project so basically you can import figma files you can also just have plenty of different media assets here like pictures videos Etc now once I'm ready to actually check out what what this looks like I can check out out in a web preview or on a mobile app preview once I'm looking to publish the app I'm going to be able to do it here on the right hand side and as you can see this is really a very simple Builder I think it's very easy to use and I think it's accessible for most people specifically if you're kind of a beginner or intermediate in no code in the block section over here we can click on this and this is where we start to actually go from creating the UI components that we're creating in the design Tab and start adding certain additional things so this is where we're going to create the logic behind our designs you also see below that you have some app features that you can check out so for example if we are doing logic it's like um you know if this then that kind of logic uh there's and or and then you can add these elements so if for example and then you can if something specific happens you can navigate to screen one so this is if a button is clicked for example navigate to screen one and so this might be a little bit complicated for people to learn at first but as soon as you get the hang of it it's relatively simple and that's pretty much it and in terms of pricing thunkable is actually a little bit cheaper than some of the other platforms of course it's free to get started then for 20 projects $13 a month which is quite a bit cheaper than other products we've talked about today and their uh most popular one which is the pro account is for $38 a month now if you go past that it actually is quite big of a jump you'll go straight to 160 or even 500 plus per month but for the most part most people stay within the $38 a month plan now if you feel overwhelmed and you don't know which one of these platforms to use let me help you out of it there are three criteria that will help you decide the first one is your level if you are completely non-technical and it's the first time you're going to be jumping into a no code tool and I would highly recommend that you stick to platforms that are slightly simpler why because you will basically be able to learn the fundamentals build the first version and you won't get discouraged along the way you'd be surprised how many beginners just choose choose complex platforms and then they feel discouraged and quit so if you're a total beginner check out Glide and then you can check out others like thunkable or draft bit if you're a designer you could choose Bravo studio if you're intermediate you could use thunkable and if you want to jump straight into the complex stuff then I'd recommend for you to jump inside of flut ORF flow now the second criteria is how far along are you in the process of building out this app if you're building a new startup and you're trying to test the market with it I would highly recommend using a simpler tool just cuz you'll get it out quicker now if you have 200 users like employees waiting to use this app already then you simply have to figure out which one is going to be best for your use case but at that point it will make more sense for you to invest more time in learning the platform potentially investing more money into building it and the third criteria is really what you're trying to build if it already needs to be right out of the gate incredibly complex very customizable incredibly scalable then you might want to go for some of the more complex platforms like flutter flow however if you're building something that's relatively simple then I would stick to the simpler tools and in building any of this stuff remember that people don't care about the technology they care about what the technology does for them so for example the only thing Airbnb users care about is booking at home the only thing Uber users care about is having a car come on time and the only thing that Tinder users are looking for is a date so figure out what it is your customer really wants as an outcome and find the simplest way to be able to deliver that outcome with minimal Tech and if you've been watching this video and you're now super excited about no code but you don't have an idea to build then check out this video because I'm going to be giving you five startup ideas that you can launch with no code so I guess I'll just wait here now and enjoy my time as you click on this next video thanks for watching see you guys in the next video Let's Go

Channel: WeAreNoCode - Learn No-Code!

Views: 96,060

Keywords:

Id: gyymY3cBzys

Length: 32min 39sec (1959 seconds)

Published: Sat Feb 17 2024