Best Backend for FlutterFlow - Complete Beginner Friendly BuildShip and FlutterFlow tutorial

hey Builders ever dreamt of building apps that sing with data without drowning in code apps that dance between front end Beauty and backend brwn well in this video we're discussing the ultimate low code power couple build ship and flutter flow when you think about what goes into building an app think mancy UI buttons that dance and visuals that pop that's what's known as the front end but what about the data who stores it connects it makes it all work that's the back end the unsung hero quietly storing your data and keeping everything ticking without a solid back end there's no magic on the front end but in loow COD land things can get a little blurry flutter flow can handle some backend tasks but its focus is very much on the front end so what about the back end and a build ship a powerful low code backend Builder that lets you create complex workflows without writing a single line of code imagine hundreds of pre-built nodes at your fingertips ready to send emails generate reports or connect to databases just drag drop and watch the magic happen and if you can't find the node you're looking for build ship's incredible inbuilt AI can build a custom node just for you you can even tweak it in low code so you're always in control now the million dollar question where do you start front end or back end first the answer depends on your app St appetite if you're already rocking flutter flow or need Firebase features like authetication start with the front end but if you're wrangling massive data sets complex calculations or non-f Firebase databases build ship's backend playground is your perfect starting point to Showcase this dynamic duo in action let's build a barcode scanning app imagine scanning a product and instantly unlocking its Secrets nutritional info reviews even suggested recipes this example perfectly highlights the front end backend combo let's kick off in build ship and create a workflow that captures the barcode gathers all the GC details and sends them back to flutter flow ready to wow your users so here we are in build chip with a blank new workflow flow there are lots of ways you can trigger a workflow to start in build ship from having it start when data changes in your Firebase or superbase database to a striped web Hulk or a Firebase authenticated us on but the most common is a rest API call let's call this scan now let's have a think what build ship magic do we want to happen behind the scenes to make this really pop firstly since we're going to be getting the barcode from flutter flow why don't we hook into the open food fax API they'll take a barcode and send back all of the details about a product that we can then use further on in our workflow now we could look through all the documentation study up on open food fax API calls or we could use the magic or build chips generate with AI and just tell it what we want all set let's just quickly check the code to make sure it's doing what we want it's using the open FFA API taking the barcode and returning the name name of the product and the image looks good to me so what else could we do well now that we have the name of the product why don't we use chat gbt to return some interesting facts about the product we can use the pre-built node here in build ship bring in our API key which you can securely store our system prompts can be you are a fact delivery AI your goal is to provide interesting facts about a product all right now user request will be the name of the product that comes back from open food fact okay good the model we use is GPT for Turbo now before we move on we need to make sure that Bild Chip's expecting the parameters that we're going to send it so we need to come in here and edit this initial API call because the query is going to include a barcode so we change this to barod now once we're happy with everything we're producing we want to format it so so let's return it back to flutter flow now the value we're returning needs to be adjacent object so we're going to need to write this but it's really easy for example we've asked open food facts to return the name of a product and the image well we can simply write that in here so we're returning the name of a product and the image but we're also asking open AI to return some facts about the product well let's go in here and see what it's returning at the moment it's just returning the object as a complete string and probably that's fine let's have a look at how it looks all right hit ship and then we can start building this out in flutter flow let's create a new project and we'll create something blank and we'll just do something simple we'll call it barcode for now so this project is going to have two pages the first that lets us scan our barcode and the second which returns all the useful information that we've had build ship gather for us let's let's start with the main page this is just a simple blank page we're going to call barcode scan now we want a big button in the middle of the page let's add an icon button let's make it really big with a big bar code so the idea is when the user clicks our barcode flutter flow will open the camera scan the barcode and then use build ship's API to send everything over now build ship provides an incredible export tool that lets you ort your API and have it directly imported into flutter flow so here we go let's export the yaml and then back in flutter flow we can import that in as a brand new API call using this button here so it's created our own group called build ship and underneath here's our barcode scanning API it even brought in the query parameters that we need to send it like barcode so immediately if we have a barcode we can test this out now let's test our API great we've got back ajacent object that contains our name the image and the facts that's great so down here flood flow has helpfully recommended the Json paths that we might want to include and be able to access in our project let's definitely add all three of those in we'll call that name image and facts now let's set up our second page the page that's going to show all the information about our product there are a few good templates that flutter flow provide this one's not bad we'll call it details so here's where we might want to feed in the name of our product here's where we might want to display our product and here's where we might want to display our fact let's just remove everything else now on this page we know we're going to have three variables returned from our API call so let's set those up as page parameters so we can send them through when they arrive their name which is is a string image an image URL and fact another string now let's bind those to these elements on the page and just for consistency let's rename this F and in case we might have a lot of facts let's give it a lot of lines to work through great now back on our original page we need to make our call to our build chip API on tap we're going to make a backend call to our API blood flow is helpfully included here we need to send through a barcode now we haven't scanned for our barcode yet so let's do that now that's a new action that happens first but we scan for barcode in barcode mode we're going to call this output variable barcode scanned great so now when we come here to send our barcode we have an action output called barcode scan we can send right through now if that API call is successful that's great we can navigate directly to our page and pass through the variables that have come through from our API call and we've set these up as Json paths predefined paths name image and facts that's great but if our API call isn't successful well we should tell the user so let's send them a little snack bar barcode scan unsuccessful and I think we're ready to test with our flut app loaded on mobile we scan our barcode we see the loading indicator that shows our API call has been made and then all of our results returned so there you have it the dynamic duo build chip and flutter flow together they're the low code Dream Team what will you build with this Unstoppable combo happy building n

Channel: BuildShip + Rowy

Views: 6,584

Keywords: no-code backend, visual backend, backend builder, low code google cloud, no code AI workflows, no code app builder, flutterflow, buildship flutterflow, buildship tutorial, no code mobile app builder, best no code tools, best no code, flutterflow crashcourse, flutterflow training, flutterflow tutorial, flutterflow tutorial for beginners, flutterflow tutorial playlist, flutterflow backend, flutterflow advanced techniques, best backend for flutterflow, flutterflow database

Id: 2OzgeHxpMs4

Length: 9min 33sec (573 seconds)

Published: Fri Jan 19 2024