Firebase Functions Tutorial #18 - Firestore Triggers

Net Ninja · Beginner ·🌐 Frontend Engineering ·6y ago

Key Takeaways

Creates a Firestore trigger using Firebase Functions

Full Transcript

okay then gang so I'd like to show you just one more type of cloud function trigger because we've seen now an earth trigger a callable function and also the on request function so I'm going to show you one more and that is a fire store trigger so when something happens in a fire store database for example when we create a new document so let's create one more function and by the way I don't think I'm going to link this up fully to the project I think this is pretty much done I'm just showing you this now to demo this extra kind of trigger so I'll do a little comment right here and say fire store trigger for tracking activity so say we just want to track what people do so if they sign up then we're going to track that and we'll put that in an activities collection or if they make any request down here we'll track that activity and put that in the activities collection something like that so then let us now set up this fire store trigger so first of all exports and then we'll call this log activities and we'll set this equal to functions and this time we say dots fire store because it's going to be a fire store trigger and we say dot documents to give a path as to what we want to listen to so for example if we wanted to listen for documents being added to the requests collection would say forward slash requests and then forward slash and then ID in curly braces this is basically a wild-card meaning it could be anything because when we make a new document it's also assigned an ID so that's kind of like a variable in the path right here so if we attach to that now something like dots on creates that means it's going to fire a callback function whenever a document is created inside this path so inside the requests collection now if we wanted to listen for documents being created inside the users collection we just replace that with users like so okay now what if we wanted to listen for every kind of document being added in every collection well we could do something like this put collection in curly braces now we don't have to call this collection by the way you can call it a if you want but it makes sense because it is going to be a collection oops we want the collection like so so now what we can do is say okay anytime a document is created in any collection with any ID then we want to find this function now inside this function we get a couple of different arguments we get the snap argument which is basically a snapshot of the document which was created so we can get data off that document and also the context now this is important because this context right here this includes information about the path so for example if we added a new documents to the requests collection this function is going to fire right because it doesn't matter what collection that we add the document in it's gonna fire them now if we want to find out what collection it was added to that document then we can find out from the context because we could say that the collection if I say context collection is equal to the context then we have a property called params for parameters and we want the collection parameter that's what we called this thing right here if we call that ABC then this would be ABC you get the idea right so we can grab any of these wild cards up here from the context dot params so let's change that back now to collection and we'll do the same thing for the ID so we can get the reference to the idea as well to be honest we don't really need that but just in case we do want it we'll grab it so const ID is equal to and then it's context dot params and then it's going to be the ID that we want okay so we have those two values now now if we wanted to we could also do something with the data we don't really need to but just so you can see how to do this I'm going to consult that log the snap dot data remember this is how we get data from a document and that's all this is at the end of the day this is basically a snapshot of data or the document that we're creating here so if we created a document inside the request collection then we get that document right here and we can retrieve the data off it and that's all the logging to the console right here which we'll see in the firebase functions logs later on okay so we've done that now what I'd like to do is every time someone adds a new document to either the users or the requests collection I would like to create a new document inside and activities collection and that activities collection is basically tracking the activity of this website and then in the future if you wanted to subscribe to that activities collection from the front end to showing notifications whenever something happens for example you can say you know someone new just signed up or another request was added to the list every time something happens you could do that by subscribing to this activity's collection because every time something happens we're going to add to that activities collection so then let us now get a handle to the activity's collection doesn't exist yet but that doesn't matter remember because firebase automatically creates it whenever we want to create our first document inside that collection so we'll say Const activities and set that equal to admin dots firestore and then we want to say Doc's collection and the collection we want is the activity's collection again doesn't exist yet but it will create it for us okay so now we want to check what kind of activity has happened as someone added something to the request collection or has a new user document been added to the users collection so we need to check that because our activity is going to be different dependent on that action so let's do a simple ill check right here I'm going to say if and then in parentheses I'm going to say collection is triple equal to requests so if this thing right here that we grabbed from the path if that is requests that means that someone's added something to the requests collection so in that case I want to return activities which is this reference right here for the activities collection and then I want to add a document to that so I'll say dr. add and then inside all I'm going to do is one parameter and the parameter is text and it's going to be a new tutorial request was added okay so that's all there is to it we're just adding a single document to the activity's collection to say that a new request has been added because that's what's happened write a new document has been added to the requests collection okay so that's that one done I want to do something similar but this time I want to do it for the users so let me paste that right down here change this to users and we'll say a new user signed up so I saw we really need to do at the end though we still need another return statement because if there's other collections in the future which we're not really tracking in this way we still need to return something if none of these pass right here so we'll just return null right here because we don't really need a return value so I'm going to save that now and then I'll come over here and I'm going to deploy them by saying firebase deploy only functions and then wait for this to deploy okay looks like it's all done over here but let me scoot over to our functions on firebase and just a refresh just to make sure that it has been accepted over here and there is one more user create we can see that right here so it is up there and now we can try to use it now the way we use it is just by adding a new document to the database in either the user's collection or into the requests collection because that's what's triggering the function right here so let's just add a new request first of all so let me go over here add a request and what can this request be view 3 submit requests and let's wait for this to happen first of all okay so that's worked and if we go over to the database if we refresh now we should see a new collection called activities and it should have added one item to that collection which it has a new tutorial request was added so it's tracked that and it's added it to this collection now let's try adding a new user so if we go over here sign out and then register I'm going to say Bowser that's the net Ninja at UK and then test123 and I'm going to register and then this should hopefully add a new document to this collection might just have to refresh for this to pick up oops I did see it just before refreshed right there and we can see now a new user signed up so there we go my friends that is how we can react to fire store activity specifically the creation of new documents

Original Description

Hey gang, in this firebase functions tutorial we'll have a look at firestore triggers. 🐱‍👤🐱‍👤 JOIN THE GANG - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg/join ---------------------------------------- 🐱‍💻 🐱‍💻 My Udemy Courses: + Modern JavaScript - https://www.thenetninja.co.uk/udemy/modern-javascript + Vue JS & Firebase - http://www.thenetninja.co.uk/udemy/vue-and-firebase + D3.js & Firebase - https://www.thenetninja.co.uk/udemy/d3-and-firebase 🐱‍💻 🐱‍💻 Course Files: https://github.com/iamshaunjp/firebase-functions/tree/lesson-2 🐱‍💻 🐱‍💻 Other Related Free Courses: + Firebase Firestore - https://www.youtube.com/playlist?list=PL4cUxeGkcC9itfjle0ji1xOZ2cjRGY_WB + Firebase Authentication - https://www.youtube.com/playlist?list=PL4cUxeGkcC9jUPIes_B8vRjn1_GaplOPQ + Firebase Hosting - https://www.youtube.com/playlist?list=PL4cUxeGkcC9he0kHAyiyr3dDO2xw0NWoP 🐱‍💻 🐱‍💻 The Net Ninja Community Boards: https://community.thenetninja.co.uk/
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 Regular Expressions (RegEx) Tutorial #14 - Matching a Username
Regular Expressions (RegEx) Tutorial #14 - Matching a Username
Net Ninja
2 Regular Expressions (RegEx) Tutorial #15 - Email RegEx Pattern
Regular Expressions (RegEx) Tutorial #15 - Email RegEx Pattern
Net Ninja
3 Regular Expressions (RegEx) Tutorial #16 - Finishing Touches
Regular Expressions (RegEx) Tutorial #16 - Finishing Touches
Net Ninja
4 GraphQL Tutorial #1 - Introduction to GraphQL
GraphQL Tutorial #1 - Introduction to GraphQL
Net Ninja
5 GraphQL Tutorial #2 - A Birdseye View of GraphQL
GraphQL Tutorial #2 - A Birdseye View of GraphQL
Net Ninja
6 GraphQL Tutorial #3 - Project (stack) Overview
GraphQL Tutorial #3 - Project (stack) Overview
Net Ninja
7 GraphQL Tutorial #4 - Making Queries (front-end preview)
GraphQL Tutorial #4 - Making Queries (front-end preview)
Net Ninja
8 GraphQL Tutorial #5 - Express App Setup
GraphQL Tutorial #5 - Express App Setup
Net Ninja
9 GraphQL Tutorial #6 - Setting up GraphQL
GraphQL Tutorial #6 - Setting up GraphQL
Net Ninja
10 GraphQL Tutorial #7 - GraphQL Schema
GraphQL Tutorial #7 - GraphQL Schema
Net Ninja
11 GraphQL Tutorial #8 - Root Query
GraphQL Tutorial #8 - Root Query
Net Ninja
12 GraphQL Tutorial #9 - The Resolve Function
GraphQL Tutorial #9 - The Resolve Function
Net Ninja
13 GraphQL Tutorial #10 - Testing Queries in Graphiql
GraphQL Tutorial #10 - Testing Queries in Graphiql
Net Ninja
14 GraphQL Tutorial #11 - GraphQL ID Type
GraphQL Tutorial #11 - GraphQL ID Type
Net Ninja
15 GraphQL Tutorial #12 - Author Type
GraphQL Tutorial #12 - Author Type
Net Ninja
16 GraphQL Tutorial #13 - Type Relations
GraphQL Tutorial #13 - Type Relations
Net Ninja
17 GraphQL Tutorial #14 - GraphQL Lists
GraphQL Tutorial #14 - GraphQL Lists
Net Ninja
18 GraphQL Tutorial #15 - More on Root Queries
GraphQL Tutorial #15 - More on Root Queries
Net Ninja
19 GraphQL Tutorial #16 - Connecting to mLab
GraphQL Tutorial #16 - Connecting to mLab
Net Ninja
20 GraphQL Tutorial #17 - Mongoose Models
GraphQL Tutorial #17 - Mongoose Models
Net Ninja
21 GraphQL Tutorial #18 - Mutations
GraphQL Tutorial #18 - Mutations
Net Ninja
22 GraphQL Tutorial #19 - More on Mutations
GraphQL Tutorial #19 - More on Mutations
Net Ninja
23 GraphQL Tutorial #20 - Updating the Resolve Functions
GraphQL Tutorial #20 - Updating the Resolve Functions
Net Ninja
24 GraphQL Tutorial #21 - GraphQL NonNull
GraphQL Tutorial #21 - GraphQL NonNull
Net Ninja
25 GraphQL Tutorial #22 - Adding a Front-end
GraphQL Tutorial #22 - Adding a Front-end
Net Ninja
26 GraphQL Tutorial #23 - Create React App
GraphQL Tutorial #23 - Create React App
Net Ninja
27 GraphQL Tutorial #24 - Book List Component
GraphQL Tutorial #24 - Book List Component
Net Ninja
28 GraphQL Tutorial #25 - Apollo Client Setup
GraphQL Tutorial #25 - Apollo Client Setup
Net Ninja
29 GraphQL Tutorial #26 - Making Queries from React
GraphQL Tutorial #26 - Making Queries from React
Net Ninja
30 GraphQL Tutorial #27 - Rendering Data in a Component
GraphQL Tutorial #27 - Rendering Data in a Component
Net Ninja
31 GraphQL Tutorial #28 - Add Book Component
GraphQL Tutorial #28 - Add Book Component
Net Ninja
32 GraphQL Tutorial #29 - External Query File
GraphQL Tutorial #29 - External Query File
Net Ninja
33 GraphQL Tutorial #30 - Updating Component State
GraphQL Tutorial #30 - Updating Component State
Net Ninja
34 GraphQL Tutorial #31 - Composing Queries
GraphQL Tutorial #31 - Composing Queries
Net Ninja
35 GraphQL Tutorial #32 - query variables
GraphQL Tutorial #32 - query variables
Net Ninja
36 GraphQL Tutorial #33 - Re-fetching Queries
GraphQL Tutorial #33 - Re-fetching Queries
Net Ninja
37 GraphQL Tutorial #34 - Book Details Component
GraphQL Tutorial #34 - Book Details Component
Net Ninja
38 GraphQL Tutorial #36 - Styling the App
GraphQL Tutorial #36 - Styling the App
Net Ninja
39 GraphQL Tutorial #35 - Making a Single Query
GraphQL Tutorial #35 - Making a Single Query
Net Ninja
40 Build Apps with Vue & Firebase - Udemy Course
Build Apps with Vue & Firebase - Udemy Course
Net Ninja
41 Updated Vue & Firebase Course (Udemy)
Updated Vue & Firebase Course (Udemy)
Net Ninja
42 Vue & Firebase Real-time Chat (Preview) #1 - Intro
Vue & Firebase Real-time Chat (Preview) #1 - Intro
Net Ninja
43 Vue & Firebase Real-time Chat (Preview) #2 - Project Structure
Vue & Firebase Real-time Chat (Preview) #2 - Project Structure
Net Ninja
44 Vue & Firebase Real-time Chat (Preview) #3 - Firestore Setup
Vue & Firebase Real-time Chat (Preview) #3 - Firestore Setup
Net Ninja
45 Vue & Firebase Real-time Chat (Preview) #4 - Welcome Screen
Vue & Firebase Real-time Chat (Preview) #4 - Welcome Screen
Net Ninja
46 Vue & Firebase Real-time Chat (Preview) #5 - Props in Routes
Vue & Firebase Real-time Chat (Preview) #5 - Props in Routes
Net Ninja
47 Vue & Firebase Real-time Chat (Preview) #6 - Route Guards
Vue & Firebase Real-time Chat (Preview) #6 - Route Guards
Net Ninja
48 Vue & Firebase Real-time Chat (Preview) #7 - Chat Window
Vue & Firebase Real-time Chat (Preview) #7 - Chat Window
Net Ninja
49 Vue & Firebase Real-time Chat (Preview) #8 - New Message Component
Vue & Firebase Real-time Chat (Preview) #8 - New Message Component
Net Ninja
50 Object Oriented JavaScript Tutorial #1 - Introduction
Object Oriented JavaScript Tutorial #1 - Introduction
Net Ninja
51 Object Oriented JavaScript Tutorial #2 - Object Literals
Object Oriented JavaScript Tutorial #2 - Object Literals
Net Ninja
52 Object Oriented JavaScript Tutorial #3 - Updating Properties
Object Oriented JavaScript Tutorial #3 - Updating Properties
Net Ninja
53 Object Oriented JavaScript Tutorial #4 - Classes
Object Oriented JavaScript Tutorial #4 - Classes
Net Ninja
54 Object Oriented JavaScript Tutorial #5  - Class Constructors
Object Oriented JavaScript Tutorial #5 - Class Constructors
Net Ninja
55 Object Oriented JavaScript Tutorial #6 - Class Methods
Object Oriented JavaScript Tutorial #6 - Class Methods
Net Ninja
56 Object Oriented JavaScript Tutorial #7 - Method Chaining
Object Oriented JavaScript Tutorial #7 - Method Chaining
Net Ninja
57 Object Oriented JavaScript Tutorial #8 - Class Inheritance
Object Oriented JavaScript Tutorial #8 - Class Inheritance
Net Ninja
58 Object Oriented JavaScript Tutorial #9 - Constructors (under the hood)
Object Oriented JavaScript Tutorial #9 - Constructors (under the hood)
Net Ninja
59 Object Oriented JavaScript Tutorial #10 - Prototype
Object Oriented JavaScript Tutorial #10 - Prototype
Net Ninja
60 Object Oriented JavaScript Tutorial #11 - Prototype Inheritance
Object Oriented JavaScript Tutorial #11 - Prototype Inheritance
Net Ninja

Related Reads

Up next
Elementor Angie Ai Plugin Tutorial
Quick Tips - Web Desiign & Ai Tools
Watch →