Building a Real-Time Web App with MongoDB Atlas App Services
Rate this video
00:00:00Introduction
The video begins with an introduction to the session, outlining the goal to create a real-time web application using MongoDB Atlas and Atlas App Services.00:02:18Setting Up MongoDB Atlas
The presenter walks through setting up a MongoDB Atlas cluster, linking it to Atlas App Services, and configuring data access and authentication.00:14:06Implementing Business Logic
The session continues with the implementation of business logic in the web application, including fetching and displaying auction data from the database.00:27:34Real-Time Functionality with Change Streams
The focus shifts to adding real-time functionality using MongoDB change streams, which push updates to the client without the need for page refreshes.00:39:17Closing HTTP Connections
The importance of closing HTTP connections when navigating away from pages is discussed, and the presenter demonstrates how to properly handle this in the application.00:44:06Q&A and Conclusion
The session concludes with a Q&A segment, where the presenter answers questions from the audience and provides additional insights into the application's development process. The final section wraps up the discussion and highlights the next steps for viewers interested in learning more about MongoDB and real-time applications.The primary focus of the video is to demonstrate how to build a real-time web application using MongoDB Atlas and Atlas App Services, emphasizing cost efficiency and real-time data updates.
🔑 Key Points
- The application is built using MongoDB Atlas, Atlas App Services, and Realm Web library.
- The backend is set up to be cost-effective, using MongoDB's free tiers for cloud services.
- Real-time functionality is achieved through MongoDB change streams, allowing updates without page refreshes.
- The session covers setting up authentication, data access rules, and connecting the frontend to the backend.
- The importance of closing HTTP connections when navigating away from pages is highlighted.
Full Video Transcript
[Music] thank you [Music] [Music] foreign [Music] thank you [Music] foreign [Music] [Music] hello everybody Welcome in to this session of learning with loose it is Friday the 21st of July God that's this year's going quickly how how is everybody where is everyone watching from so I am in Manchester in the UK and I am pleased to say that on today's learning to lose I am joined by my work bestie travel buddy and all-round Tech expert uh Mira so mirajax introduce yourself to everybody that's watching sure Hi listen thank you for having me today my name is or for short Mira I'm from Bulgaria currently I am in the on the Bulgarian Seaside but I don't tell my manager that because I'm still working or supposed to be working so I'm proving that I'm working today with this live stream uh Lucy and I joined mongodb about two years ago or like almost like almost two years ago for me and two years ago and one month for her and we were both on the same team we are now still working for developer relations in slightly different teams but yeah she has been my work bestie ever since I joined so I'm very very excited about this yeah me me too it's always always fun when we get together whether it's in person or in a live stream I see we've got people from all over we've got uh wow we've got India Peru Austria Kenya Malawi uh different places in the US especially New York Tanzania wow we've got really good um good mix Sri Lanka Panama amazing it's really great to see people from so many different uh parts parts of the world we are you know we're Global people we like to travel so it's always fun when uh our friends join us from around the world so do you want to tell everyone a little bit about what we're doing today I saw there's a couple of questions in chat about the tech stack we're using because the title isn't a giveaway yep uh so today we're building a real-time web app and more specifically we are building an angular app we won't be building DUI sadly but we will be building the business logic of the application the database and also the back end for the backend we'll be using um a low code backend which is mongodb atlas app services and you will see how all that works uh I will start sharing so that we can yeah so yeah we will be using mongodb and mongodb Atlas clearly for the database and the back ends and for the user interface we'll be using angular um so generic typescript JavaScript so you don't have to have knowledge about JavaScript and typescript to follow along though we'll be also using the mongodb query API and the aggregation framework to make some um yeah some requests to our database and fetch the data that we need and to open change streams which are quite important for for what we're building today the real time functionality and it's good yeah yeah I said sorry I was just going to say it's a good job that you don't need to know angular because well I mean you and I joke about this we have done for years if you've watched this street live streams before you might know I always joke about JavaScript because it's just the thing that you can't live without but I don't understand a bit like CSS um I've done a bit of react um and we keep talking about names do angular so maybe at some point we should we should just do like angular 101 together on a live stream and add Atlas into it but uh yeah there's not too much knowledge needed uh yeah so it's exciting and I like that we're using such a breadth of of like mongodb Atlas like products and stuff today that's always good indeed yeah I always jog the thing your worry is more um close to C sharp than it is to JavaScript so um yeah we'll be right at home here if you are coming from java background yeah so uh so of interest it's real real-time bidding app what do you mean by real time uh that is a really good question I don't know how you knew to ask that question maybe because I showed you the slides before but yeah the first yeah the first question that we need to answer today is what is real time uh and real time can mean many different things because it's a very like non-descriptive term honestly uh so I stole this slides from our amazing co-worker here at mongodb Kenny Gorman uh yeah and so he explains it really well on this slide so uh for some people in the development world real time might mean microseconds so if you are building a system for car brakes for the automobile industry um activating the brakes uh before impact means that it's this is something that should happen in less than a second in in a hundred microseconds or even less it's a very time sensitive for this operation to be to be as quick as possible and here it's even it even this even means that in order for the um for the operation to for the function to be um with a successful outcome to be working uh it should meet this specific threshold so anything outside of the threshold makes the function not working properly means that it's running again correctly and when we're talking about web apps we are actually talking more about relaxed real-time uh not the strict real time we're talking about uh having um receiving the data and it is available without needing to do page refresh uh and in this case the threshold can be milliseconds or even seconds so we have a much lower sensitivity to latency and again today in our web app scenario we'll be talking about relaxed real-time however you can use mongodb and you can use Atlas to implement a strict real-time event delivery as well in fact we recently announced a very interesting or very important functionality related to streaming we're all going to discuss it today about stream processing but if you're interested in strict real-time make sure to check out the latest announcements that we made at our annual New York conference mongodb dot local NY see oh yeah so back to web apps uh what is what is what does it mean to have a real-time data delivery in a web app well what people understand by by real time is the server pushing data to the client which means that we don't need to refresh the browser page to receive new information and examples for that are text chat a stocks tracker in-app notifications and also online auctions in all of these examples we are not expecting the application to to need a page refresh in order to um to receive the new information uh coming from the server right so when we are chatting with someone we see the text messages as they come in we don't need to refresh the whole application uh if we are using a stocks tracker application we see the price as it changes over time in maybe every second or even um whatever an interval we said we don't need to refresh the page to see the updates in-app notifications clearly we don't need to refresh the app to receive a notification it arrives from the server using different mechanisms online options uh so at this point I'm going to show the application that we're building today because not every person is familiar with online auctions I personally never used one to be fair but it is a good and like kind of a more non-traditional example to build I don't want to build a text chat or a stocks tracker for this because it's it's kind of mainstream to do it so we are going to be building on the auctions a bidding system auction system or bidding system so what do we have here we are going to be bidding for cars uh because why not and for no particular reason at all I'm gonna go to the Tesla Model 3. and the bidding what happens here so I'm gonna click this button plus 10 and um we are gonna see this price update so we see the price update in real time if there are other people on the page uh we will see them bidding as well this is a live application um yeah we can send you the link to this in the chat you can play with it throughout the stream uh you can look at it here or we're also gonna share it in the chat uh but yeah you can play with it try to break it I'm sure you're smart smart people you can break it yeah people started connecting and updating the price uh this is basically real time uh delivery in our application in our web app let's go back to the apps list to the cars list so if people update something here let's simulate that by switching Off full screen opening a second browser and going to let's go to this car all right again for no particular reason at all I'm opening this car maybe it's because I drive one of these and you see here that it doesn't matter on which page I am this is the cars list and this is the cars Details page we see the updates everywhere oh that's cool yeah so we are connected everywhere to the underlying connection collection and we receive the uh the changes to the price as they as they happen that's really quick as well which I don't know why it always surprises me how quick these things can be yeah and this cluster is deployed in Europe so uh if we want to make it quicker for everyone around the globe we can use also Global deployments in app services or um yeah we will need to use the global performance for our backends in-app services but even even I I presented this um this demo as a talk in India and my cluster was still in Europe and the delay was super minimal it was like under 100 milliseconds um and yeah you can you can play with all that um you have the the link in the chat uh and the final functionality that we're going to implement today as well so we're going to implement all that uh the final functionality is full text search so here if I look for Tesla I have a full text search with autocomplete and I can look for Ferrari and I have all these cars if I look for spider I see again um yeah all these cars we can also Implement fuzzy search so if I make a mistake here mistype something we should see the results but I haven't implemented full text search if we have some time we can do it it's just a single parameter that they can use to implement that using catwa search which is another service available in mongodb Atlas nice yep it's pretty cool so this is the app that we're going to be building today uh let's go do we have the link for the folks in can we send it again I see that some people yeah so this is the link to the app itself I was going to share the link to the uh GitHub repo shortly someone's asked about that um we can either share it now where we can share it later I wasn't doing yeah straight away if you didn't want to share it now all right I have it over here in my favorites here I can send it to you and you can share it with everyone okay um but yeah this is a repository it's public you can play with it uh in fact if you have an Atmos cluster it will be easier to follow along but uh there is still time to create one and follow along so if you follow want to follow along go to the live coding branch and clone the repo um and yeah I've actually made some changes today to make it easier and quicker for us to finish this in an hour so yeah the live coding branch and the main branches the production version that I have deployed the app is deployed on Firebase it doesn't really matter where you deploy it though so you can you can deploy it all right um let's go back to our slides where are my slides okay they're here okay so these are the examples of real-time apps we're building the last one the online option everyone good everyone clear you can't answer so yeah if anyone's got any questions as we go along please feel free to ask them all we do request is that questions are relevant to the topic if you've got any non-relevant mongodb questions or Community forums are the perfect place to ask them because then everyone can answer and benefit from the answer publicly um obviously we've only got a certain amount of time today so as much as we love a good ask me anything we don't have time for that but of course if you've got any questions about this topic as we go along in the code and the app and you know real-time apps by by all means ask away and we'll cover them awesome that's great all right so let's make this a little bit more interactive in web apps there are four main strategies to implement real-time server pro events these are short polling long polling web sockets and servers and events in the next four slides I'm going to show you a diagram for each of these without telling you which technique I'm using and you will have to guess which technique I'm using all right first one so we have the client on the left the server on the right the client sends a request the client in this case is our browser the client sends a request the server Waits until there is new data available and when there is new data available the server responds then the client does whatever it needs to do with that data probably display it in the UI or whatever it needs to do and it sends a request again or almost immediately the server again waits for new data and when it's available it responds which technique is that is it short polling long polling server sent events or websockets you can write your your guesses in the chat in LinkedIn or we are also streaming on YouTube I know there is like a slight delay with the stream and what you guys see if you're watching so we're gonna wait for 10 to 15 seconds to see your answers yeah get your answer soon I could cheat because I know the answer but I'm not going to it's we're we're here to learn together and since I know the answer it's time for others to chime in what do we think what is Diego saying I can't read the whole comment the full comment uh he's he's having a discussion with somebody about Ai and programming hahaha but uh what how obviously hi to everybody but uh hi Diego Diego is one of our uh Gabrielle colleagues so it's always very exciting when we see our colleagues in trap everyone knows Diego you don't need to understand that's true sorry all right so this is a technique called long falling because we are waiting for new data before we uh respond before the server responds uh the second Technique we have a request the server responds immediately it doesn't matter if there is new data available or not if there is no data the server sends the new data if there is no new data the server sends no new data says no Then the client waits for a certain threshold maybe 500 milliseconds usually it's um it's less than that and the client sends another request the server responds immediately the client Waits again and this is repeated over time multiple times every second as you can see here there is some some problems where overloading the network with a lot of traffic and I'm gonna wait for your answers again uh yeah I actually see the answer is coming coming up uh which of the three techniques that are left is this is it short polling websockets or server sent events people are already replying yeah we've had lots of different answers so far which is always good means it's good to be and I see that Diego is leading his side side quests discussion you've got quite a few for short polling some for long polling a couple of web sockets all right so this is short polling uh because we are not waiting for any new data we're always responding that's why it's called short polling the next technique is quite different we are working with a TCP connection uh that is open all the time first we start with the handshake over HTTP so we do the handshake the client sends a request for a handshake the server response the connection is established and the tsp connection is actually um running the whole time as I said and it's a full duplex collection this means that the client can send events to the server and the server the server can also send events to the client uh both both sides can communicate with each other and finally any of the sides can close the connection so this is either websockets or server sent events and yeah people say web sockets and they're correct these are web sockets again TCP connection the most important angle the answers yeah a lot of smart people here finally uh this as you may have guessed This Server sent events because it's the only one left but how does it work so the client opens an event stream uh which is basically a simple long-lived HTTP connection so we don't need a separate protocol a TCP connection or something more sophisticated to work with server sent events it is a simple HTTP connection and so the other big differences here that is that the server can only send um send events to the client it's a Simplex communication it's not full duplex and finally the client can close the HTTP connection and this is server sentence server sentence is slightly older than websockets actually and they both have their applications so this is a comparison of the two We're Not Gonna discuss short pouring and long polling uh they're super easy to implement but they're not very practical nowadays I mean of course if you're building like a simple demo or just a proof of concept you can you can do it with short polling uh it there is not a problem but in real world production applications maybe it's better to use one of these too all right just uh just in the comment someone's saying that I don't uh they're saying that the video is not live looks like it keeps restarting some chunks not sure if it's uh buffering for them but no it's absolutely live yeah sorry guys if uh if it's buffering for you it's probably the streaming platform uh either LinkedIn or YouTube or um the connection but don't worry uh the recording will be available afterwards so you can always watch this um afterwards as well uh also you can play back certain moments all right back to to the topic so web sockets for the play servers and events Simplex only the server can send events websockets use the websocket protocol that opens the TCP connection servers and events use a simple long-lift HTTP connection websockets can send binary and utf-8 data and service and events can can send only utf-8 the problem with websockets sometimes is that certain firewalls block the port where you need to open TCP connections on so websockets can be blocked by some corporate firewalls um or firewalls in general doesn't need to be corporate uh and server sent events there is no such problem because it's a simple HTTP connection you can't I mean if you're blocking any website then your blocking servers and events as well but that's not what firewalls typically do uh and yeah again they have their benefits and um and disadvantages as well in terms of support websockets are supported pretty much everywhere uh not in IE 69 and not in Opera Mini but nobody cares about this anyway the global support meaning the support of every single browser that is being used today is 98.36 so you can use them server sent events are also not supported in IE 11 and if you still care about i11 I'm terribly sorry um for you but the global Sports is again over 95 so uh yeah you can use both both of them a quick spoiler Awards uh the the library that we're going to be using is called rayon web which is a library maintained by the mongodb team here we have a whole engineering team maintaining this Library this Library uses server sent events so we can only receive data from the server and you will see why it makes a lot of sense to be using server sent events in this Library all right I showed you the application uh this is again a QR code and the URL for the application if you still don't have it if or if you're joining right now uh you can get it uh Diego also share the link in the comments so you can visit it there as well and I can pop the link into YouTube as well yep all right it's a very simple application as you saw so we're gonna set some restrictions some objectives that we need to meet in order to to make it more interesting so first we want it to be cost effective effective in fact I don't want to be spending any money on these applications today I want to take advantage of all the free cloud services out there free is the best yeah second I want to have real time uh delivery of events so I don't need a page refresh I want to see everything as it's as it happens and finally we want to have autocomplete search and we're going to implement all these three things today let's get started so how do we make it cost effective uh we're going to be using Mong DB Atlas uh if you register for modib Atlas which is mongodbase developer data platform you will get one free Cloud cluster that you can deploy in one of the three major Cloud providers Google Cloud AWS or Azure and you get half a gigabyte of storage so it's more than enough for our simple application it's more than enough for any options app honestly unless you're storing like I don't know videos of the options which you shouldn't be storing in your database anyway um half a gigabyte of storage is quite quite fine honestly I mean if you have millions of auctions maybe don't store them in our operational database maybe archive them you're not using all of them so uh yeah it's kind of enough and that's what we're using today so the database is handled it will be for free if you register for Atlas and deploy a free course store it will be free for you as well for the backend we'll be using atos App Services which are again a low code backend solution you get one million free requests per month and 10 000 concurrent requests as well so I don't think we have 10 000 people on the stream so we are safe uh you can all connect and use the app all right let's go to the demo yep all right so this is our database cluster I already deployed it uh just to quickly show you if you want to deploy a new one and if you want it to be free I need to go here to shared and select m0 so this is the cluster Theory it should be m0 and you can use whichever cloud provider you want in order yeah the best one I was just gonna say Normal reviews who is a Microsoft MVP I'm using uh Microsoft Azure today um and yeah it's fine Azure is fine great all right so for sure however you want to say it yeah so this is our database cluster it's using mongodb6 um or eight it's deployed in Azure in the Netherlands because we're both based in Europe we're using cam0 the free coaster tier and what else yeah we're gonna link app services and we're gonna create an apple search index but first let's take a look at the data that they have here so we have a single database called auctions I'm going to zoom in a little bit and a single collection called cars and in this collection we have only 14 records these are our cars auctions and this is how a document looks like so we have the name of the car an image URL I'm using a CDN so you'll see just the final bit of the of the image we have the current bidder which is a node generated username every time you refresh the app you get a random username and the current bit and also the end date for the auction so that we know where the bidding stops and again we have a bunch of these cars uh if we take a look at the particular one we have different eight dates we can change this if we wanted to if to update the database in line uh but don't do that in production all right so this is our database free nice awesome next is our backends for the backend I need to go to the app Services tab here at the top and I will be using again a library a client library to connect from from my web app to this um to this backend so how do we create this backend here I'm going to start from scratch uh you have different templates that you can use I always start from scratch honestly it's super simple to set up so we might as well do it we have some application guides if you want to learn how to set up graphql or triggers or use the web SDK which is something that we'll be using here you can you can take a look at the application guides as well again it's free to deploy this app service there is a generous free tier per month as well so make sure to utilize it so the first thing that they want to show you here is the do you guys see the screen okay yeah I think it's it's fine it's zoomed in enough I want to show you the linked data sources under under manage so by default because we have just a single database cluster in our project it is linked so you can see here this is the name of my project learning with lose real-time web apps and this is the name of the database cluster auctionary and it is linked to the data source and the name the default name is mongodb atlas we will be referring to our database cluster with this name from now on mongodb so when we need to communicate to the database we'll be saying mongodb Atlas you can change this name if you want to it's it's just the default and I'm Gonna Keep It next thing we want to set up is Authentication so I'm going to go to data access and Authentication Atmos offers a bunch of different providers we have email passwords we have social login API Keys Json web tokens or you can even execute your own custom logic to authenticate users because I want the website to be available to everyone and I don't need your credentials I'm going to enable Anonymous login and when I enable this and save the draft I'm going to zoom out so you can see what's going on when I save the draft I I get um kind of on state unstaged changes in my application so we are not directly modifying uh the production application if we're if someone is actually using this in production we're not modifying it immediately we are creating a new draft and now I can go to this Banner here review the draft uh you can see that this is actually a Json file with our configuration so we have secrets providers we enabled Anonymous user and yeah we have some other settings so you can actually keep all of these files under Source control app Services also has an integration with GitHub so you can sync your GitHub repository with your application State here in the user interface it's it works very well so check it out um if you actually want to use this in your day-to-day development so I'm gonna know so I've got a quick question from somebody if you've got a second yeah sure uh so we're being asked is there any monitoring like dynatories to check the latency so I think that was referring to uh yes the actual app itself yeah so you can go to logs if I see logs okay the locks are over here at the bottom again under manage and I still haven't used the app but here you can see the latency and um also like the request and everything the person who's requesting it I think you can do forwarding stuff like that uh we're we're gonna go back to this page when we start using the application and I'm gonna show you actually I can also show you my production app Services application I have it somewhere over here so just so we don't have to go back again I'm gonna show you my production application for auctions so here I have a function open because I want to show you something later but if I go to logs I see all the logs and how much every request took nice so spoiler Awards because we open a change stream which is an open request an open long lived HTTP connection this takes 15 seconds so it kind of takes until I refresh the page and then it's it's closed um all of these chain streams these connections are multiplexed on the back ends automatically by app services so we're not actually opening 100 connections um with every refresh of the page for every user we have only one chain stream open pair collection in the database and in our example we only have a single database for the cars um sorry the a single collection the cars collection so we are on the backend app Services is opening just a single change stream but we'll get to that later again if you expand the details here you can see a lot more details about the actual connection the IP address of someone um what's what happens how many documents are matching and and so on but yeah you can check the latency if you if you want and yeah if I were to deploy this to the I don't know us West one I would see a much bigger runtime yes just because we're further away just to clarify it's not because Us East one is any slower it's just uh yeah we're further away yeah and you're gonna see that in any cloud provider it's just the distance unless you have a globally distributed CDN or a globally distributed application you're gonna see that latency in any cloud provider all right um back to our application I have set up Anonymous authentication and then I'm gonna set up some rules so these are data access rules I am going to pretend I know what I'm talking about and close the helper window and I'm gonna go straight to my cluster this is the service uh the auctions Database The Cars collection and here I can set up the rows so we have some popular presets uh deny all access so no one can do anything with the collection then we also have read oh everyone can read everything in the collection they can also use Alpha search with it but no one can update or insert new documents oh well I mean I can do it from the database but not from the backend and finally we have read and write also everyone can read and rewrite all Fields I don't know why these are popular presets because I wouldn't use any of these in a production application so I'm going to start from scratch I'm sorry I'm being a little bit um incorrect here yes okay you're being security conscious it's okay security conscious uh that's what John Page taught me to do um uh let's let's create a new row I'm gonna call this row reads oh everyone can read all the fields I don't have anything Secret in my collection and write bits so I want people to be able to update only the bits fields and the current bitter fields and I'm gonna enable auto search because we're gonna use it later and I'm gonna specify field level permissions so helpful yep for these specific Fields current bit and currents bidder I will enable read and write and for everything else I'm going to enable read and this is yeah this is fine I mean they're like certain issues with that because anyone can write whatever they want in current bit and current bidder but we will fix that later or if we don't have time for that I will tell you how you can fix it all right we're gonna save the draft uh deploy again you see again we modified something called rules.json and this is everything this is our backend it's everything we need for now again there there are a lot of things that you can restrict here and fix um but this is good for now here yep yep um zoom in a little bit more I'm gonna go back to the home page and I'm gonna copy the A app ID I'm going to use this app ID to connect from my application from my web application so this is my web application running in localhost you can see that all the user interface is implemented but the business logic is not there so we're gonna implement the business logic if I search for anything I'm going to see just fake data if I go over here I'm gonna see again just placeholders so we're going to implement all that by connecting to this back end that we just created people are still updating the real application go for it it's it must be fun uh let's get this one all right so this is the application Jaguar application that I have running locally I'm gonna go over here and I have some of the logic implemented but let's go through it so I have a special service which is just a typescript class really that's angular takes care of connecting to the actual application but this service is going to connect to my backends again I'm using a library called realm web a library maintained by the mongodb team and this is the library that can connect to AdWords app services to our backends um I have a static um member fields I I always forget what's the right one in typescript and compared to c-sharp and other uh we have a studying Fields here in the class and we are instantiating this has a Singleton so if we don't already have this app we are gonna call new realm app and we need to provide the app ID right this is the app ID I'm going to save this and then after we creates we instantiate the app we also create Anonymous credentials and finally we call app.login using disk credentials and if the app is already instantiated we are just gonna return it that's that's everything that happens in this class all right so now I'm gonna move to the auctions service which is the business Logic for our application for the auctions so the details page the list the bidding everything and we're going to start implementing some stuff the first thing I need to implement is get collection I'm gonna get the collection from this realm app service the real map service is injected using dependency injection into the class into the this service uh so let's grab the local variable Rail map service and I need to call GitHub instance which is the method that we just implemented this is an async method so I need to await it and I'm going to assign this to a local variable code app now within this app I can get the mongodb client so I need to get the current user and then I need to get the [ __ ] client again the service name mongdb Dash Atlas now from the client I can get access to the collection I need to go to clients.database the databases auctions and the collection is called cars all right I used find that I'm going to return the collection but you see that I'm using this question marks everywhere if you're not familiar with like this syntax it's a relatively new syntax in Echo script in JavaScript and if this thingy is not an object or it's undefined or it's no the whole expression instead of throwing an error the whole expression will evaluate to no and because I'm using this question marks everywhere collection can might be no so I need to check that do some error handling here in the responsible way yeah so I'm going to throw a new error and just say uh fails to connect to server and something generic like that I don't really want the like the user to say the reason why the app is not working um I'm gonna change this because I don't know all right so we have our we have our collection and the first thing we are going to implement that is actually real is loading um options so where am I using this on this page here oh this is the live application I don't need it anymore uh where is the local host all right so loading um auctions is it's here it's it's this page the page with audio auctions so when I implement the function it should be linked to the angular components that displays the user interface uh the angular component will get the data from the business logic from the service and it will display all the options all right so let's go here we have loads I'm gonna remove that fake implementation I'm gonna grab the collection um I need to await this get collection and then we're gonna use collection dot Aggregate and here I can provide an aggregation pipeline the aggregation pipeline can have multiple stages and each of these stages can transform the data so it's a it's a pipeline for Transformations and I'm going to do just a couple of Transformations here I want to sort the data by the end state so I can see the options that end first at the top and the second stage I will use is lower limit so I'm going to limit to I'm going to use this arguments past to the method I'm going to limit to 10 by default let's save this go to the app refresh is it working yeah it's working and we see all the cars to prove that this is real I'm gonna set this to four let's go back refresh [Music] and we have just four cars so after that we need a uh like a confetti or a celebration sound effect I know yeah yeah you can you can play that so we've had a question about which language is these so this is typescript right yeah yeah uh because it's angular it looks a lot like c-sharp but yeah it is typescript um I I hope you're able to follow along there is not nothing typescript specific so typescripts basically allows you to add um type definitions for the the things that you're defining so here we have any so this can be anything we have an option of type auction we have um defined this type ourselves we also have the built-in JavaScript types like string number and this defaults to one uh yeah this is typescript also something that typescript gives us we can also use it in JavaScript but with polyfio is um decorators which again if you're coming from c-sharp Java or you're probably familiar with decorators and this is an angular decorator and injectable means that this this is a service that will be provided in The Roots module of angular all right so we Implement limits a load sorry um just gonna set this back to to limit just so we don't see this um this warning here and let's Implement find one find one uh basically gets a single a single auction so if I go to this page you can see here in the URL that we are passing the object ID so we're going to use this object ID to resolve the document from the database and display it um in mongodb you need to have one primary key and it should be the underscore ID field but of course you can have other identifiers as well so you can have your own identifiers you don't need to pass object IDs in the URL it could be a bit of an launch pattern as well to do it in like many cases so just yeah take this as a like maybe think about it before doing it in your application it's not always a great idea uh but we in this case we're going to use it it's super simple so we're gonna get uh this from the URL the angular component will will pass it to the service and we are gonna use it to connect the database and find the document that we're looking for and this is the ID here all right so I need the collection again I'm gonna copy the collection so we have the collection and this time I will call collection dot find one and I'm gonna look for underscore ID the primary key should match this ID but kind of explicitly here I have written this could be any again like any using any in typescript is not something that you should do in general but they wanted to make it explicit here that you don't you don't you shouldn't trust your users so anyone can call this method from the components uh basically they can modify it and call call the method and ID can be anything so we need to try and convert it to an object ID which is a special mongodb type well bson type but mongodb uses bison to store documents and object ID is what we use for storing primary keys so let's convert or try to convert this ID to an object ID so ID should be new object ID and if we get an error um actually not going to do anything here we can Implement some like error handling and we can draw a new error just to see something in the cell to convert Comfort ID something like non-specific but yeah it shouldn't really be showing this to your users yeah be careful with this error message I wouldn't wouldn't really throw an error in this case but yeah just if we have a problem with our with our implementation I want to see this in the console all right and finally yeah we're just passing the ID which is now an object ID hopefully I'm going to save this go back to the app and refresh and we have the Lamborghini Aventador I have no idea how to pronounce uh you you did a Lamborghini Aventador yeah Aventador okay fair enough all right the next thing we want to implement is bidding so when I click bidding and refresh the page I want to see this price changing so let's go ahead and do this I'm not gonna bore you with any more live coding for now so oh we're running quite fast here we're at 50 minutes so what I'm doing here I have the username the username is basically this here if I refresh the page I'm going to see a different one Arsenal our snow is good so let's keep our snow here so the username is in a specific list of usernames that I have enabled so I don't want to see random data coming in my like production websites with swear words and stuff like that so I'm checking this if it's a swear word I refuse to do anything then I get the collection and I use update one to increase the bit so I find the option with this ID this current bidder and this current bit and I increment the current bits with the specific number that people used I set the username to the current username and that's it that's everything I'm going to save that go back here to the application refresh just in case and I'm going to increase with 100 we don't see the real time update yet but when I update you see it's 360. so Post 10 should be 370. all right fair enough so uh let's talk about the real-time stuff though so right now we don't have real-time stuff I'll go back to my slides and talk briefly about real time and how we implement it in this case I don't want to show this video right so we implemented cost effective but what about real time we need to use a managed cloud service but we don't have to but in this case we're going to use like manage cloud service the most popular choice would be AWS upsync uh second popular choice would be confluent clouds and in this case we're going to be using mongodb Atlas because everything we're doing right now is in Atlas it doesn't make sense to go to another platform more specifically we're going to be using mongodb change streams you can use chain streams outside of Atlas they are in the core database they are events coming right from the database operations log and they allow us to track real-time data changes as they happen real-time as in kind of more relaxed real time let's go ahead and start using them uh chain streams can be opened uh through this library that we're using realm web and this will our backend will make sure the correct Watcher the correct chain stream is opened on the collection so how do we do that we have a list of ideas because I don't want to open the chain screen for all of the items in my collection I want to use Justice IDs I'm going to convert the itis to object IDs so object ID is just a special mongodb data type isn't it for the good looking underscore ID field yeah it's a bson type um yeah um on the collection and finally I'm gonna get um a generator not gonna go in depth about generators right now but basically if I call collection.watch the back end will open and change stream it will also open um a server sent event like it's gonna open a long-lived HTTP connection which will allow us to get events from the server and for watching this should be an object not an array for watching I want to watch only these ideas over here uh the async generator will yield a result every time data arrives from the network so I can convert this a sync generator to an observable an rxjs observable and I have subscribed to this observable in my component I'm gonna apply a few transformations to the observable first I'm gonna filter and get only the update events is update events um and then I'm gonna extract only the data that they need so I'm gonna get only the underscore ID which is an event I think it was document key underscore ID and I'm gonna get the update description which is in events.update description we see that we have nice order complete here coming from typescript and from the typings that the ram web library has so let's save this and see if we have real-time stuff the app is refreshing see do we that's a question yeah it works spoiler words that works I'm not surprised I had everything the spoiler award is that we have problems with this implementation um I'm gonna go over the problems really quickly and maybe we will leave the full text search for another time because we have only a couple of minutes left but this this problem is important to mention actually so let's refresh the page and what let's see what happens here in the network tab so when I update the price I perform an htypical updating the price and this is the long-lived HTTP connection we see request is not finished yet which is to be expected but when I go back from this page I want this request to to finish and how do I close this all right and here we have we open that actually another Watcher connection because we're watching for changes on this page as well this is the Watcher connection and if I look at the previous one it's also not finished yet which is really bad we are not closing the connections as we navigate away from the pages and we should be closing closing the connections for multiple reasons first of all we have limited number of connections that we can open um I think 100 for HTTP 2 but still like it's wasteful to keep them open so how do we fix that I have implemented a special rxjs operator from change event I'm going to go to its definition and when we unsubscribe from the observable we call Source dot return the source is the async generator and when we say a sync generator dot return realm web will close the HTTP connection this is for everyone watching and wanting to use this in production you should make sure you close the connection now if I go here again and maybe go to the auction and then maybe go back uh you see that this is closed we don't see the quotient request is still running it's closed excellent useful tip yes uh yeah you should be aware of that if you want to use it we're going to skip the autocomplete search but you can go to the mongodb atmos search documentation look for autocomplete and see how to implement that I really want to keep this under an hour uh so um we're gonna be using cattle search and it's important to see this gif as well perfect and we are done amazing that's cool with like the fact that you could so easily make a a real-time application all for free which is always helpful it's uh it's amazing and and you know you you piqued my interest in angular I know anger is awesome like it's even more awesome now that more people are using it um again if you're a little bit bad about not showing cartoon search but it's super easy to use and we have a couple of workshops that are online that you can go and um check out I'm gonna send the links to them in the chat and so yeah if you are want to learn about full text search definitely go ahead and check them out yeah and then there's a good one yep my favorite atlasearchworkshop.com so you can take the workshop yourself yes yes that's good yeah this has been awesome I think I sent the wrong link you send the right one and that's thank you what is the price of the application it's completely free I have deployed to Firebase um Firebase hosting which has a very generous free tier uh the back end is free we have one million three requests per month the database is free we have a free cluster that you can deploy you don't even need to provide your credit cards when you register for Atlas and start using it uh and yeah I hope I answered this question maintenance and updates you can deploy as many I mean there's like a certain limitation of diplomas that you can do in uh Firebase hosting but it's a pretty high high number I've deployed the application 10 times today and I mean yeah and this isn't sort of tied to Firebase is it in the sense that you could choose another hosting platform and it'll still be fine yeah yeah you can use any other hosting platform um I might try deploying it to uh uh app surfacing Azure and see how it works I'm sure it will work it's a simple web application uh nothing really special about it and anyone that's badass enough to write their code in Vim in the middle of a live stream I cross their code yeah uh someone is asking which one is better most more cost efficient for startups Firebase or mongodb so there is not a definitive answer first of all uh Firebase is using firestore under the hood mongodb Atlas is using mongodb both are document databases in my opinion mongodb is more sophisticated more capable as a database Firebase as a service has a few additional capabilities that are pretty awesome but it depends on like what you what you need in your application and if you're a startup both companies Google cloud and mongodb have great startup programs we actually have a joint startup program with Google Cloud so you can apply for the joint program and you get free credits for Atlas free credits for Google cloud and join support like technical sessions customer service sessions as well uh definitely you can use both yeah and we have yeah and obviously you're talking about Firebase in that question but did we have the same startup Partnerships with Microsoft and um and Amazon as well so if you know if you want to do it with AWS or Azure instead I don't know the details in terms of the you know allowance per se and the quote criteria but absolutely you know you can pick whichever one works uh someone will send this question a few times someone else also asked can we get recording this will be available instantly on YouTube uh since as soon as this is over and I'm pretty sure that I'm LinkedIn it appears just on our feed on the mongodb profile so yeah absolutely recording is just available there and then we we like to share knowledge obviously this has been done as part of mongodb TV so we strongly encourage people to uh go to mongodb.tv uh you can watch on whichever platform you prefer but YouTube is better because you can like And subscribe to the channel which is always good yep uh so then that's got any questions we'll uh we'll end the live stream shortly um but yeah I just want to make sure no one's got any questions before we end if people have got any follow-up questions mirror after the stream or if they're watching this as a recorded uh where can people reach you if they've got any questions obviously we always encourage the uh forums as the first point of call for any questions but in the event it's something only you could possibly answer um yeah I'm sure there's no answer only I can answer I'm sorry uh yeah I'm on Twitter LinkedIn Instagram Facebook preferably contact me on Twitter or LinkedIn though cartoon on Twitter pretty sure I'm the same on LinkedIn um you would have seen my name pop up a couple of times in the chat because I was answering some questions from my LinkedIn page um but yeah we always encourage people to go to the forums because we lots of in there's lots of smart people in there who can answer your questions and of course we're big fans of sharing knowledge that's why this is learning with loose so good thing with the forums is that if people ask and answer a question other people can benefit awesome awesome sounds great cool so that is it for this month's learning the loose I will be back on the 30th of August to do a stream believe it or not my guest is myself um I recently wrote a article on Ruby on Rails uh I don't really know Ruby or rails but I learned it as I went and so we're going to follow the tutorial I wrote uh for that and then we're going to start actually fun enough Implement at the search if we can nice so yes I will see everyone I think it's my pleasure thank you for coming it's always so it's good to hang out and you always just demo such cool stuff so I always learn a lot from you you do too looking forward for your next show thank you yeah and um yeah it said mongodb dot TV where we have a schedule so you can see all the upcoming podcasts and live streams we've got and videos coming up because it's always time for uh for learning all the time right I will see you everyone on the 31st of August happy weekend everybody bye