Beginner Guide to Flutterflow for Mobile App Part 2: Database, Backend Query and Document Reference

how's it going welcome back to part two of our reflector flow fundamentals for the non-techies in today's video it is all about setting up your database displaying data on flight to flow and also how you can create new data documents into your database if you have not set up your Firebase connection follow flutterflow's official tutorial to get it set up first I will link that down below in the description now let's head to our database Tab and get our database collection set up a collection is essentially a table in spreadsheet terms and within each collection you will have documents which are essentially rows of data records created in your collection that can store information to each field which are the columns that you need to Define when configuring your collection and this set of fields can be referred to as schema which is the predetermined structure of your collections when you define Fields into your collection you will need to choose a field type which is a predefined type of data a field can contain by defining the types you can then present the data records in the right format such as dates URLs and locations and you can use them in specific widgets properly for example if you want to present your data in a map you will need to store your coordinates in latitude and longitude format if you define the field as a string of text the map widget will not be able to recognize your data and display them properly I have a video covering different data types so check it out for more details but I will cover the reference type here it is such an important concept for you to grasp in order to create any type of complex apps on flat to flow it is also a transferable knowledge that will work on any other no code tools they might be abstracted differently but under the hood the Logics work the same I would argue that once you understand how document reference work you will find that working with other tools would be way easier because you will recognize the pattern you'll recognize the underlying logic it will be easier for you to pick up a different local tool with a different database setup a reference field type is used when you want to create a relationship between a document and another document in your database for example on this photo sharing app we have users and post collections these two collections with our reference typed field when all your users make their social post into your collection there is no way for you to tell which post belongs to which user hence we want to set up this user document reference type field to identify the creator of this row of data in your post collection a reference does not hold all the information of the document that's being referenced for example if we just look at the user reference field for a post document it really is just the user reference ID which is automatically generated by Firebase when a new document is created so for each post they also have their own reference ID essentially Firebase will create a unique ID for each document created in the database that can be used as a document reference ID and you can find it in the First Column of your database collections by looking at this IDE we can't really tell the user's name or see the user's profile picture and such it is like an address that is pointing to that particular user so we can then further request the information contained by the particular user document now we have gone through the basic setup of a database let's cover how we can display those data on the front end of your app and you'll also see how document reference works in an action on flight to flow you have two types of content static and dynamic static content include the text that you insert in the text element or any text input box on the on the right hand property panel or an image that you upload straight into image element these contents do not change regardless who the user is and also what type of interaction the user is performing on your app and all users will see the same content these are great for landing pages or page titles basically anything that will stay the same throughout the entire app experience on the other hand Dynamic contents are usually data stored in your database or stored locally as page state or app state that could change based on who the user is and also the actions that user has performed on your app for example say we have all the social posts in our database there your users have submitted into the collection and we want to list them out here the way we want to set it up is to make the first item of the list to make the structure of the list and place it in the column or role or a list element then we need to create a backend query from this tab to populate this list back-end queries are requests to the database to provide the documents you need from the database based on your query configurations let's request the entire post collection here you can add more filtering options here and also sort the list in a specific order once you confirm this back-end query you will see that the first item of the list is now duplicated a bunch of times because we have now requested a list of documents to be populated into this list however we can't really stop here we need to properly map the fields into the elements in this first item because flutterflow does not know how you want your your data to be displayed so we need to give them an example which is the first item and then flutter flow will know how to populate the rest of the list with the exact same structure let's click on this image as an example select use network type and then click on this orange icon this icon allows you to select Dynamic variables and for us we can see the backend query result here the post document we can choose a field from that document to map into here and we will select photo URL without backend query we won't be able to access this information we won't even see the document here because we have not asked the database to provide it for us and for caption we can do the same thing use the orange icon get the document map it to the post documents description field now we want to display user's name here but when we do the same thing we can't see a username field all we see is the user reference which we know it's just an ID of that user's document so it's not really the username that we want to display so this is where this user document reference comes into play we can't really map it straight away into it but we can use it to further request the information so we need to add another backend query and this time we will do document from reference and select the user reference here this is what we mentioned previously where these reference ID essentially is an address to find that user document and then requests more information from that user document and once we have done that and come back to the previous tab and select the orange icon now we can see the user document that we requested and we can map this user's username into the field accordingly same for the circle image where we need the user's photo URL so we need to do the same for this image element to request it with another document from reference query you can do it this way but a bonus tip here is to actually place these two elements in the same pattern as we mentioned previously in part one we can now run the backend query on that parent container this way we only need to request it once but the document result will be shared by all the children within that parent element so for us this time we run it on the parent container but the results can be shared by both the image and also the text element cool now we have covered all the basics of displaying data on the front end let's quickly run through how we create data in our case search reports here I already have a page set up I won't be going into the details on like how you'd set up the page but the basic workflow I will be covering right here so you will have a lot of input elements where the user can input the values that you want they want to put into the database so for example I have a place picker for the location data I have a text input for captions and I have an image picker for uploading image or video and users will be putting their captions in uploading their image and then pick a location for the post with the UI we have set up here but the information won't be in your database automatically so you need a submit button this submit button wouldn't just work magically on its own right so we need to now add an action to it we will select when the element is clicked and we want to do a create document action and now all we need to do is to add the fields and then map the fields with the values that the users inputted on the front end we will find the values of that image picker we'll find the value of that place picker we will find the value of that text input field and now once the user click this button the values in the inputs or the image picker or the location picker will be added as a new post document in our collection and this is it all the basics about working with database displaying a data with back-end queries how to use document reference in action and also how you can create new data in your collection for most beginners these are actually all the essential Concepts that you need to know about as you get started the most important thing is to get your reps in to start building with flutter flow the rest of the features would definitely make their way very naturally very organically into your workflow as you want to extend the features you want to build more features on top of these fundamentals so let's get started first and stress less about learning everything from the get-go until next time ciao cool

Channel: Nomo Codes - Build apps with no-code & AI

Views: 5,215

Keywords: nocode, softr, airtable, design, ux, ui, web design, web development, frontend, backend, lowcode, 3d, spline, product, saas, framer, webflow, googlesheet, zapier, make, integromat, bubble, figma, adobe, plugin, ios, android, pwa, sparkar, lensstudio, chatgpt, gpt4, openai, flutterflow, aigen, generativeai, generativedesign, nocodedesign, nocodeai, automation, MVP, startup, entrepreneur, ai, agi, artificial intelligence, generative ai, gpt

Id: xXKbTJeRH2g

Length: 11min 1sec (661 seconds)

Published: Wed Sep 20 2023