Flutter & Firebase App Tutorial #17 - Firestore User Records
Skills:
AI Workflow Automation60%
Key Takeaways
Creates a custom user record in Firestore database using Flutter and Firebase to store brew preferences
Full Transcript
or rather than so we now have our fire store database set up and we have a reference to that fire store database in our app now and we can use that reference to do things like add new documents now what do we want to do with this fire store database well we want to store data in it which is going to represent the brew preferences of each user so I think the way this should work is that a new user comes to the app and first of all they register they're getting new accounts and at that point once they've successfully registered behind the scenes what we should do is communicate with the fire store database to add a new document into the brews collection which represents that uses date and their brew preferences now to begin with we'll start with some dummy data for them so we'll just enter things like I don't know they want the zero sugars or the zero of strength and they can update that data later the point here is is that we make them a user documents inside the brews collection so each new user that signs up is going to have their own documents inside that collection and each of those documents could have three properties for example the name of that person whatever they choose to go by the Sugar's how many sugars they want in their brew and the strength how strong do they want their brew so we could have those three properties inside document which is created for each new user when they first sign up and that document is going to store the data and the preferences for that user and then they can update them later on if they want to okay now we also have the problem of linking the firebase user to the firestore document how do we know that a particular firebase user should have a particular firestore document how do we know that two things are linked well when a new user registers firebase automatically creates a unique ID for that user we've seen that in the past when we've printed it to the console when they sign in okay so firebase automatically creates a long unique ID for that new user now that ID doesn't change after that it always remains the same for that user that is their unique identifier now when we create a new document inside the brewery's collection for that user each document can also have an ID and we can specify what that ID should be so it makes sense that if we sign up and we get a unique ID back from firebase off then we can take that ID and create a new document for that user in the Bruce collection with that same ID and we can specify that and that way we're linking the two together because we're now sync okay where the user has this ID we'll go out in the future and get the document which represents that ID as well so now we know which data belongs to which user okay so in this video what we're going to do is after a user signs up we're going to take that ID from that user that is generated by firebase and creates a new document with that ID inside the Bruce collection for that user and just add some dummy data to begin with for that user okay then so we know now that when you use a signs up for the first time we want to create a new document for that user inside the bruise collection now we have a reference to that collection stored right here so we can reference that when we need to add something to it now we're going to create a function inside this database service to do just this and it's going to be a future because this is gonna be a synchronous and it's gonna be called update user data right so we're going to use this function twice in our application once when they first sign up to create their data initially and secondly in the future when they go to their settings panel and update their data but each time around is going to do exactly the same thing it's just going to get a reference to their document and update the data so anyway inside this function we're going to take three parameters a string for the sugars so how many sugars they want a string for the name and an integer for the strength so let's do that string sugars and the reason I'm using a string for sugars is that it's just going to be easier to render to the screen later on than using an INT whereas with strength that is going to be an integer because we're going to use that in conjunction with colors to show a dark or lighter color so we're not going to be directly outputting the number of the strengths so that's why I'm using a string for sugars and an integer for strength but anyway string for name and then also int sugars Oh nut sugars strength okay so inside this function what do we want to do first of all we need to declare it as asynchronous and then inside we want to return a weight and then we want to get the brute collection that is a reference to the bruise collection and then we want to find a particular documents now the document we want to find is going to be a document with a specific ID so I'm going to pass in the UID right here now you might be thinking well we don't have that UID yet well no we don't but what we're going to do up here is declare a property final string UID and then in a constructor we're going to say database oops data based service and then take in that UID and assign it to this value okay so we have this final property called UID which is applying a value right here now when we create an instance of this in the future we're going to pass in a UID okay so we have that UID stored in so we'll see this in action later on but we're going to pass that UID into the documents method right here and what that is going to do is get a reference to that document in the collection now if this document doesn't exist yet with this UID firestore it's going to say hey no problem I'll create that document for you so when you use a first signs orb and we call this function and we pass in a UID of that user then that document is not going to exist yet it's going to create that document with that UID thereby linking the firestore document for that user with their firebase user ok does that make sense kinda links the two together right so now we have a reference to that particular document what we want to do is say set data to update the data and we need to pass through a map into him so key value pairs so this map is gonna represent the different properties and the values inside the firestore document that we're creating here or updating so first of all we want to set the sugars and that is going to be the sugars that we take in so this thing right here and the second key is going to be named and that is gonna be equal to the name we take in and finally it's going to be the strength and that is going to be equal to the strength parameter that we take in okay so that's pretty much all there is to it so now what we need to do is call this function and we need to call this function when a new user signs up so let's open this and go to the auth service over here because this is where we register with an email and a password so once we've actually successfully created a new user and we get that user back before we return that what we're going to do is create a new document for that user with the ID that comes back with that user that's auto generated by firebase so let me just paste in a comment first of all to say what we're doing here and then under that I'm going to say a weight and we want to create an instance of the database service to do this and it's Auto imported that for me up here when I did that C database and alright now I want to pass in the UID to this database service because remember in here the constructor it says we take a UID now if we think about it we could have just passed in the UID to this function and yeah that's an option but we are going to be using this UID in different functions inside this database service so instead of passing it into every function where we need it we're just going to have it stored up here in the instance itself so down here we need to pass in a UID and that is stored on the user right here so we can say that the UID property is going to be the user that we get back from a firebase dot u ID so we're passing that in now and then we want to use the function update user data so that we're going to create a record for that you and we want to class in the different values now the values we need our first of all a string for sugars a string for name and an integer for the strength so first of all the sugars a string and that is going to be zero so this is just some dummy content that is gonna flesh out their document when they first sign up and it can be edited in the future by that user so we have zero for the sugars and of the string for the name we'll just say new crew member and spell that correctly and then final it we need an integer for the strength and that is going to be 100 now we'll see why it's 100 later it's because we're going to use this in conjunction with colors and the strength of the colors and it's going to run from 100 to 900 we'll see exactly why later on but for now let's start off with an initial value of 100 so what we're doing now is awaiting this first of all we're trying to create a new record for that user so from the starts when we register we're creating a new user with an email and password using this method then we get that user back and with that user comes a UID property created by firebase then we want to create a user document inside the Bruce collection for that user to store their data in so we create an instance of the database service and we pass in the UID from that user that comes back to us so what we're doing then is calling this function update user data and passing in some dummy data for that new user so over here when we do that we can see we have this data coming through now and we also have the UID set so we're saying okay we'll go to the brew collection and get this document with this UID that we passed in to this database service instance that UID represents the new user that just signed up now it's not going to exist at this moment in time but that doesn't matter because fire still will look at this and say it doesn't exist this document therefore our Creator document with that UID and inside that document we're now going to set some data and we're going to set these three properties with the values you passed in the dummy values so now when we sign up we also get now a fire stored inside the Bruce collection for that user or their user data so who let me now save this file and what I'm gonna try to do is see if this works so let me log out first of all and then let me go to register and I'm going to register with a new user and I'm gonna call this toad the net ninja co dot uk' and we'll say test one two three four let me register with that user it loads and then hopefully it should come to the home page in a second yep it does but now we need to see if a new record has been set up for that user inside the bruise collection so inside the firebase consult for the project go to database and hopefully when this loads you should see a bruise collection so it's created this forest there wasn't one there before but we now see it here and we can see inside that collection we have a document and it has this unique ID and then the properties inside that document are right here the name the strength and the sugars for that new crew member so pay attention to this ID this should be equal to the unique ID for that firebase user so that the two can kind of be linked together and we know which document belongs to which user so it starts with two I why and ends in 8p1 remember that because now I'm going to go to authentication and I'm gonna check out toad at the net ninja code at UK and it starts in two I why and ends in eight p1 so it's exactly the same as of this thing right here all right so now we've done that we've signed up with a new user and now we have a firestorm record in the Bruce collection for that new user and now in the future we can start to edit that that user can log in and change their data by referencing the documents based on their user ID and we'll do that in later videos
Original Description
Hey gang, in this Flutter & Firebase tutorial we'll see how we can create a custom user record in our Firestore database for each new user. That record will store the brew preferences of that user.
----------------------------------------
🐱💻 🐱💻 Course Links:
Course files - https://github.com/iamshaunjp/flutter-firebase
🐱💻 🐱💻 Other Related Courses:
+ Flutter Tutorial for Beginners - https://www.youtube.com/playlist?list=PL4cUxeGkcC9jLYyp2Aoh6hcWuxFDX6PBJ
+ Firebase Auth Tutorial - https://www.youtube.com/playlist?list=PL4cUxeGkcC9jUPIes_B8vRjn1_GaplOPQ
+ Firebase Firestore Tutorial - https://www.youtube.com/playlist?list=PL4cUxeGkcC9itfjle0ji1xOZ2cjRGY_WB
Watch on YouTube ↗
(saves to browser)
Sign in to unlock AI tutor explanation · ⚡30
Playlist
Uploads from Net Ninja · Net Ninja · 0 of 60
← Previous
Next →
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
Regular Expressions (RegEx) Tutorial #14 - Matching a Username
Net Ninja
Regular Expressions (RegEx) Tutorial #15 - Email RegEx Pattern
Net Ninja
Regular Expressions (RegEx) Tutorial #16 - Finishing Touches
Net Ninja
GraphQL Tutorial #1 - Introduction to GraphQL
Net Ninja
GraphQL Tutorial #2 - A Birdseye View of GraphQL
Net Ninja
GraphQL Tutorial #3 - Project (stack) Overview
Net Ninja
GraphQL Tutorial #4 - Making Queries (front-end preview)
Net Ninja
GraphQL Tutorial #5 - Express App Setup
Net Ninja
GraphQL Tutorial #6 - Setting up GraphQL
Net Ninja
GraphQL Tutorial #7 - GraphQL Schema
Net Ninja
GraphQL Tutorial #8 - Root Query
Net Ninja
GraphQL Tutorial #9 - The Resolve Function
Net Ninja
GraphQL Tutorial #10 - Testing Queries in Graphiql
Net Ninja
GraphQL Tutorial #11 - GraphQL ID Type
Net Ninja
GraphQL Tutorial #12 - Author Type
Net Ninja
GraphQL Tutorial #13 - Type Relations
Net Ninja
GraphQL Tutorial #14 - GraphQL Lists
Net Ninja
GraphQL Tutorial #15 - More on Root Queries
Net Ninja
GraphQL Tutorial #16 - Connecting to mLab
Net Ninja
GraphQL Tutorial #17 - Mongoose Models
Net Ninja
GraphQL Tutorial #18 - Mutations
Net Ninja
GraphQL Tutorial #19 - More on Mutations
Net Ninja
GraphQL Tutorial #20 - Updating the Resolve Functions
Net Ninja
GraphQL Tutorial #21 - GraphQL NonNull
Net Ninja
GraphQL Tutorial #22 - Adding a Front-end
Net Ninja
GraphQL Tutorial #23 - Create React App
Net Ninja
GraphQL Tutorial #24 - Book List Component
Net Ninja
GraphQL Tutorial #25 - Apollo Client Setup
Net Ninja
GraphQL Tutorial #26 - Making Queries from React
Net Ninja
GraphQL Tutorial #27 - Rendering Data in a Component
Net Ninja
GraphQL Tutorial #28 - Add Book Component
Net Ninja
GraphQL Tutorial #29 - External Query File
Net Ninja
GraphQL Tutorial #30 - Updating Component State
Net Ninja
GraphQL Tutorial #31 - Composing Queries
Net Ninja
GraphQL Tutorial #32 - query variables
Net Ninja
GraphQL Tutorial #33 - Re-fetching Queries
Net Ninja
GraphQL Tutorial #34 - Book Details Component
Net Ninja
GraphQL Tutorial #36 - Styling the App
Net Ninja
GraphQL Tutorial #35 - Making a Single Query
Net Ninja
Build Apps with Vue & Firebase - Udemy Course
Net Ninja
Updated Vue & Firebase Course (Udemy)
Net Ninja
Vue & Firebase Real-time Chat (Preview) #1 - Intro
Net Ninja
Vue & Firebase Real-time Chat (Preview) #2 - Project Structure
Net Ninja
Vue & Firebase Real-time Chat (Preview) #3 - Firestore Setup
Net Ninja
Vue & Firebase Real-time Chat (Preview) #4 - Welcome Screen
Net Ninja
Vue & Firebase Real-time Chat (Preview) #5 - Props in Routes
Net Ninja
Vue & Firebase Real-time Chat (Preview) #6 - Route Guards
Net Ninja
Vue & Firebase Real-time Chat (Preview) #7 - Chat Window
Net Ninja
Vue & Firebase Real-time Chat (Preview) #8 - New Message Component
Net Ninja
Object Oriented JavaScript Tutorial #1 - Introduction
Net Ninja
Object Oriented JavaScript Tutorial #2 - Object Literals
Net Ninja
Object Oriented JavaScript Tutorial #3 - Updating Properties
Net Ninja
Object Oriented JavaScript Tutorial #4 - Classes
Net Ninja
Object Oriented JavaScript Tutorial #5 - Class Constructors
Net Ninja
Object Oriented JavaScript Tutorial #6 - Class Methods
Net Ninja
Object Oriented JavaScript Tutorial #7 - Method Chaining
Net Ninja
Object Oriented JavaScript Tutorial #8 - Class Inheritance
Net Ninja
Object Oriented JavaScript Tutorial #9 - Constructors (under the hood)
Net Ninja
Object Oriented JavaScript Tutorial #10 - Prototype
Net Ninja
Object Oriented JavaScript Tutorial #11 - Prototype Inheritance
Net Ninja
More on: AI Workflow Automation
View skill →Related Reads
📰
📰
📰
📰
Convert PDFs and Office files without leaving Claude or Cursor
Dev.to · Convertica
🚀 I Built an AI-Powered Expense Tracker for Android — Meet Kortex
Dev.to AI
Every AI platform wants to become your workspace — but strategy needs visible reasoning
Dev.to AI
How to Get AI Meeting Notes Without Inviting a Bot
Dev.to AI
🎓
Tutor Explanation
DeepCamp AI