Intro To MongoDB Realm with VueJS, Ionic Framework And ViteJS

hello and welcome back to the channel today is going to be something a little bit different than what i've done in the past um it is going to be showing how to use uh realm realm which was something that i stumbled across um kind of two ways a i saw this blog post that uh mike did at ionic showing how to use ionic react in realm to build an application but then also i am currently working on a another project not an ionic but in react native and in that project i need to connect to database in the back end there's currently a express api that supports integrating with on the back end but i was just trying to test some things pretty quickly and i just wanted to go straight to the database and read some data and things and in my hunt for solution i ran into mongodb realm and so it just seemed like it was meant to be that i should probably write something up or do a little video about it i didn't find a lot of content on a view and since most of you know that i create a lot of ionic and view content i figured that that's what i would do here so this is going to be a video it's probably going to be a long one about using vjs ionic view realm user authentication create account read some data write some data and maybe i'll throw in a show you how to use the functions that are provided through realm and so that's a good transition to two things a please make sure you like it subscribe share the video share my other content if you like it and b let's kind of talk about what realm is what mongodb realm is the tagline says build build better apps faster with edge to cloud sync fully manage backend services including trigger function and graphql the first big thing to note is that when using ionic since there currently is not a native plug-in to support the mongodb realm you do not get access to sync so you can't sync to a local data store also in the solution that i'm building i am not saving any data in a local data store i'm writing directly to a mongodb database that i will be creating and we'll walk through and show you how to get one set up on a free cloud tier that also is provided by mongodb so the big thing to remember here is that you do not have the sync we will be writing from the mobile client directly to the database we will have access to triggers to functions also they have full text search integrated i don't think i'll get that far but that's what we're trying to accomplish in this first video so hopefully you guys find this interesting like i said please make sure you like subscribe it will be a long one you can see down in the description below i'm going to break it up into chapters so you can just hop to the sections that are important to you and so let's get to the setup of our environment okay so now in this video we are going to sign up for um mongodb realm and we're going to try to create a project and create a database here if you've already got your project and database set up if you're all familiar with this stuff you can skip to the next section where we start to integrate it with the app i've done this before for the products but i'm going to kind of walk through it with you all and you'll see kind of some places where i might fumble through it that'll help you understand when you try to get it set up yourself by the way there is a project setup link which is here which kind of walks you through an approach that they use for a i think it's a sample react application that they have in the back end we're going to follow these steps of creating the atlas account creating a free cluster we're not going to install the realm cli for not doing anything local we're going to add the program uh the programmatic api key which we need we're not going to do this cli to create the back end because we're just going to do it all manually so these are kind of the steps that we're going to do in this section of the video like i said if you have this set up already you can just hop to the next section so let's get this going let's see if i can sign up and i'm going to sign up with google and i'll use my personal account i'm going to accept accept the terms and submit uh what's my goal today build a new application [Music] i don't think this really matters much but let's just fill it out anyway my preferred language is javascript let me see if i can zoom this in a bit make that clear for everyone uh we're gonna just start with the free one for now free free we'll select our region i'm in new york so we'll just we'll just kind of let's close this we're just going to kind of ride along with everything that uh you get with the free just accept all these options and create my cluster we're deploying my changes let's hop over here to realm and we are going to build our own app and i'm just going to call this application view it's application view 1. use my existing data source which is the cluster that i just created this is for doing looks like it's doing for some deployment and other things i'm not touching same with advanced configuration i'm not messing with any of this stuff i'm certain you can read the documentation and get additional information on it so let's create my realm application we are going to be using this the web sdk we'll install that in a minute but let's just close the guide then make sure this gets all done and it looks like i am set up let's go back so there's my application id let's go back to atlas c is my database set and they're still deploying the changes so we got to wait for them to finish deploying the changes while they're deploying the changes here let's take a look back at realm and see what we got so here's the information on my application and i can click right in here and like i said here's all the guides for setup we're not going to use any of them but what we can do while we're in here is we can set up our authentication which is something we're going to use in our application so you kind of go over here and we're going to enable so let's edit this we're going to enable email and password we are going to automatically confirm users we are i don't know if i'm going to get the password reset but to since i do i know i'm not going to do functions yet i'm not going to select this run pass on a reset we're going to send an email to password reset we're just going to use a simple local host for my application so i'll just say local host i believe runs on 3000 so i'll fix that later if it's not and just reset so basically what it's saying is that this is the url that it will redirect the person back to the app on reset the password and there's more information here if you click this link i will just leave this as the message that gets sent and let's save draft and i'm using this approach where you save the draft and then you deploy so i click next just to get through this and then here it says review to make sure i'm certain and then now actually deploy the changes i don't understand any of this deployment language here that's happening so i'm just going to accept it and trust that it works and deploy and so now it's deploying changes for my authentication provider the other thing that we want to do is we want to store some additional information with the user when i save the user and that's what you do here which is custom custom user data what you do is you need to select the cluster and the database i haven't created my database yet so let me go let's see if my database is set up yet now let's discard these changes and go back so just so everyone knows what i'm doing right now i want i want to have the ability so that after i create a user i can store additional attributes with the user and that's what this user custom data is but it's looking for a database and a collection to associate it with so i need to go back to my database and make sure that i have a database set up and a place to store it so let's go back to my databases and see if they're all set up already so it looks like they're all set up let's browse collections i don't have any so it should give me an opportunity so i'm going to add my own data and now it's looking for database name i'll use view db1 we will call we'll just call my collection name profile and we're going to create that so now in this database in my profile collection is where i'm going to store the additional data on the user so now i will use this database and this collection when i go back to configure my user so now i go back into realm and let's open up my application again and then let's go back to authentication and custom user data and let's enable it select my cluster select my database and select my profile and then this is the this is kind of how they're going to map it and so what they're going to do is the id that's associated with the user that gets created how it'll be mapped to the profile information or this custom data is through this field user id so let's say i create a user and its id is one two three four the user id field for its custom user data will be one two three four so let's save this as a draft uh review draft and deploy deploy and then there's one last thing you need to do okay we need to go over here to rules we're going to go to our profile and what we want to do is we want we're going to select a template here and what we're going to say is that the user can only read and write their own data so for this user profile table no one else can modify or read your profile information other than the existing user and so let's save this and the field name is this user id and so let's configure this collection and now it basically says only the owner can do the read and writes on this and now once again let's review draft and deploy deploy and so it's deploying the change now i think that i've done all the things i needed to do i set up email password user auth i set the change password url i enabled the provider i did the automatic confirm for user i deployed my changes to apps i set the more info that i wanted to save and i think we are good to go let's hop back over to our mobile application i mean sorry to our application which we haven't really touched on yet but the point here is at this point our project should be set up and good to go what we will do is we'll probably jump back and forth between some realm configuration and clearly our database as we work through the app to kind of show how it all fits together the critical thing here the critical thing here right now for us is that we now have a database deployed that we can have access to and run full queries on and then the other thing is that with realm we have our application set up and we will be using a specific specific um app id to kind of connect everything together so that's the end of the setup part of the video let's start to get to some code and see how we're going to integrate all this stuff together okay now this next section of the video for those who follow me i'm going to kind of do what i normally do i'm going to use ionic i think ionic's awesome framework you can use it in vue you can use it in react and you can use it in angular when you couple it with capacitor you can leverage your web experience to deploy your solution to mobile devices and so we're going to be using ionic components not going to go too deep in the ionic components here i have tons of videos on those which i'll link to using ionic with you that you can check out but really just think of it as i'm using for this specific video i'm just using the user interface components that are provided the other thing that i'm doing is i'm using veet it's just fast it's easy to use and so i've just been really using it for a lot of these type of projects right now that's also the other awesome thing about ionic and capacitor it can basically work with whatever kind of web tooling that you want to use so that's great so now let's get to the app let me kind of close this so what i've done right now is to kind of save us all some time i have a basic application framework setup which i'm going to incorporate realm and do i didn't want to spend a lot of time just putting the basic app together because like i said i have some other videos on that and you can read that other places so let me first of all zoom this in get these fonts a little bit bigger let's move this out of the way for now so right now this is a basic view application let's clear this out of the way this is the basic view application as you can see i've loaded all of the ionic related styles the ionic views ionic these specific components and themes we set up our app as you normally do you create the app here we are adding ionic view we're adding a router let's take a look at what we have in our router i have set up a couple of basic paths we have our default path which redirects to home we have our home component which will be the page you'll see after you're logged in we have a login page and we have a create account page and then if we go and we look at the views right now they're all just empty they're set up with the basic configuration for just the header but we'll start to add content to each one of these pages as necessary also i've typed up a lot of the the code snippets to get the input in all of the fields and so we'll just drop that in because really the focus here is to show you how to use and realm in your application so let's get started with that and the first place that we are going to start i'm not going to focus on protected routes yet let's just focus on how to create a user first and then after we show how to create a user then we will protect some routes and show how to log in the user to see the actual routes so let's get started with just pasting some code in the first thing we want to do is we want to be let me let's give give us all some room here so we want to be here in our login page so we need to add some log some ui to get our login going other than the ionic specific stuff this should be straightforward we have a label we have an input field we're capturing an email address we're capturing a password we'll have a function for logging in the user and then we'll render specific error codes actually let's switch this let's switch the way we're going to do it we're going to create the login page first that just seems to be easier and i've already pasted the code in so let's kind of move forward with the rest of the things that we need to do here so let's go down into our setup so we know it's looking for a couple of things so it's looking for let's start here it's looking for a method to log in a user it's looking for some properties email password and error email and password are pretty self-explanatory error is going to display any error messages that we get back when we attempt to log in so let's add the code for these functions this should be a sync and we'll add in the appropriate code that's associated with realm and then up at the top we need some refs to hold our values so we're going to say email equals ref we'll plug the string copy email word and then error okay and error.error code oh this last one shouldn't be a string and since i'm running typescript we're going to run it through a couple of these issues here and so for now i'm just going to take the bail out and just do an any and that will resolve those errors and let's take a look at our ui we're just going to force us to our login page and we can see we have our sign in our create account and we're really just focusing to sign in for now so and actually let's zoom this in a bit so we all can see what's going on there this is not going to be much else on these pages okay so now let's start to hop into integrating the realm sdk so let's go back over here let's take a look at our project and i got it so sdks so let's look at this install sdk we are using the web sdk and as i stated it talks about the differences here between the sdks and this is for the browser-based applications which is what we're doing here with i'm using lead this interacts with the functions and authentication it does not as it says down here or is it the web sdk does not support realm database sync web apps built with realm can use graphql or mongodb query language meaning you're only talking to the server in the cloud you're not writing locally so that's we're going to do here let's hop down to quick start let's install the library i'm going to go down here i've got my terminal window actually let me open up another one and we're going to install it and while that's installing we need to import well so let's go over here let's import it oh this is wrong sorry all leftover code so we're going to come down into here we're going to import it and so that's how we're going to get access to the functions and everything that we need from realm um and then you have to initialize the app with an app id and so let's do that first part of the video series i'm not going to be very efficient in the use i'm not going to create a separate hook to kind of manage the realm and manage the database calls so i'm unfortunately well unfortunately i'm going to be just kind of importing this this app all over my application for now later on i'll clean it up so what i want to do is i'm going to go to my right at the start of my app i'm going to go into main ts and right here at main ts before i start anything up i'm going to bring my app in and let me get that import statement back we'll put our import statement right here and we're going to initialize realm right here right at the beginning and as for your app id your app id is coming from where is realm if i go back the realm this value right here is your app id so i'm going to copy this app id for now and where is my code for now i'm just going to hard code it in here i'm clearly going to delete this app id by the time this thing is live so please don't try and use my app id so now my app is initialized and then what will happen is that inside of my login view i'm just going to get the app id when i need it so i mean the app the sorry the app when i need it so here i can just say const app equals realm and get app calling this function multiple times with the same id will return the same instance and so what will happen is that this will allow us to basically get the app instance wherever we need it inside the application like i said i'm not creating a global hook to manage all this so this is my hacky solution for now get app instance all right and then everything kind of hangs off the app instance so we need to log in and as you can see i have uh it set up with my model so as i enter values in they'll show up inside of this ref password and so i'll be able to get the email and password that are required for this login function and that login function is so this is how we're going to log in we're going to use realm credentials email password we're going to pass in the email value that we got we're going to pass in the password value that we got and then we're going to get some credentials back and then the credentials that we get back we're going to wrap this in a try catch block so if there's any arrows we want to catch them and then in here is where we're going to actually log in we should get a user if everything is successful otherwise it'll throw our error and we're going to catch the arrow down here at the bottom and so error failed to log in and as a console log the error but also we're going to pass it back to our reference and since we're passing it back to our reference let's get some more room here so we can see what's going on if you scroll back up and you look at the bottom here this is where we're displaying error codes and any error information that comes back so let's give it a go and see if we got this thing working on our first shot okay so let's just put some junk in now and see what happens so i'm getting my appropriate error messages back invalid username i haven't added any users to the system so my function's doing what it's supposed to do okay so that's the login process since we're on a roll on the ui is going in pretty quickly let's let's just hop straight to the create account also and let's see if we can kind of create our account and then log in with that account that we created so where is so let's kind of redirect to the root so here we have our create account button which is here and then it redirects us to this create account route router route what we'll do is since a lot of the ui is very similar we're just adding a couple of more fields we're just going to copy all of this content that we already have here and we're going to pop this into our let's copy this i'm going to cop this pop this into create account let's i started this project off using a elite slides uh demo that i did before so that's why you see slides everywhere so let's go up here let's replace this content let's show our create account page so this is our create account page we know we need to change some things here so what we're going to do this will get changed to sign up this will get changed to cancel and what we're going to do here is instead of using router link we're going to actually do a click we will get the router the old school way and then we will go back so that'll take us back and then we want to change this instead of login email and password we're going to say create account email password that's a long one and then we'll go down we'll start to add the functions that we know we need to add in this response and so clearly we need our function then we need email password first because this is the extra data we're going to see with our user first and last and let's add our function so now we have our function set up and let's put in we need our refs for our values that we're getting from the f page let's see what do we have oh it's still complaining because i need to add these fields so let's get them so let's copy these guys over let's go to our create account drop the refs in we email password error let's add our first last and so those are our values this is our function what is it complaining about we have a red mark error i didn't return error all right let's return our error okay and this is create account so see we have the sign up in our cancel but let's add our first name field and our last name field and we will just actually we'll put them right at the top so now we let's change these headings let's change these down here this one too first name last name and we're gonna first blast let's change this to email type so that we can be a little special there i'm using this autocomplete new password to make sure that the fields start out empty and clear and so now we can enter a first name and a last name and then on sign up we'll call a function to create account and let's do that so to create an account it's remember there's a couple extra steps because not only are we creating the account in realm we're also storing that additional use of data so we have to we have to do this in kind of two different steps the we've already let's see we now let's go back to our login because i need to get my app instance so let's get my app instance bring this over into create account and then also let's make sure we bring our bring our import over so we have our import over so what do we want to do next we have to kind of fill out this function create email account and password the way that you do that and also i'll include links to the to the references in the documentation on how all this stuff is done i'm just going to just go straight to and code it up for you the first thing you need to do is actually create the user because remember i said this is a multiple step process and let's just to be safe let's follow the same patterns before we're going to wrap this whole thing to try catch and the first thing that you want to do is you want to actually create the user and so we're going to use on the app there's a method called email and password auth register user you pass an email and password sorry you pass in the email and password and that will actually create the user remember the next step that i said is after you create the user next thing is we we're going to need to update the additional information about the user and to do that you need to actually be logged in so then the next step is we're going to actually log in and so we are going to do like we did on the login page we're going to create some credentials using email and password then i'm going to pass it to the login function remember if any errors happen here we'll catch it down here at the bottom so let's go back and copy that data over too any errors happen we'll catch them here at the bottom and then sorry this should be err and then they get set on error and then what will happen is if you come back up to our ui you'll see our error message our error messages will show here at the bottom okay why is this i'm sure we still have our code okay everything's looking good so we create the user then we authenticate the user and then the last thing that we want to do is we want to save some additional profile information on the user specifically the first and last name right so save profile information also i'm typing a lot of code without running anything so let's all have our fingers crossed that this is going to work appropriately and so to get that to happen we need to connect to our database instance and so here's how you do that once again i will provide links to give you more detail on where i'm actually getting these co these functions from inside the documentation so so we're going to get our current user that we got back from our app and then we're going to use that user to get access to the client and the client client that we want is the mongodb atlas and then once we get the database the mongodb then we're going to use our specific database the collection that we set up for additional user information is called profile and now i have access to the collection and then this is the cool thing now we're just making regular database calls here so now that i have access to the collection i can just add the data just add the docket by doing it it's a normal insert one that you would do in and so what i'm doing is i'm taking a user id that i got from this authentic sorry i hate how sometimes this um this this becomes kind of annoying popping up all the time so what i'm doing is once again i'm getting access to the database client then i'm using that client to get the database my view db1 and then get the collection then in the collection i'm inserting one document remember the way that they stay connected is through this user id property that we created and then i'm setting that to the current user i'm taking the value from first that i'm saving i'm taking the values from last and i'm saving it and then i'm inserting this document and if everything works correctly and i get no errors then the last thing that i want to do is just go to our home page and so what i can do is i need my router to get to my home page so let's import our use router let's go up to the top and we'll get the router we need to can i auto import this guy yes so now i get the router and then if there's no errors then i'm here and then we can just say router dot replace and then we'll just go home not just in this home otherwise we're going to go down here and do we'll do with our errors and so let's save this and let's just kind of wing it and see if we get lucky our first time out so password must be between six eight and no interesting that's more than okay so what am i doing wrong it looks like i don't think my refs are coming through properly let's see oh i didn't import all of the ionic imports that needed to be imported so my values aren't coming through my bad so i need to do a bunch of ionic imports for all of those values that i added so let me just grab all them so i've added the components now i need to actually import them let's remove the ones that i'm not using buttons twice so let's remove that since i'm here in the create account page let's update them on logging so i'm certain i missed them on login also yeah i didn't include them so let's add them here and then let's add them here on the import and then let's remove the button okay so let's reload this that's better no errors okay now let's try and log bob wiring again so bob and sign up and it looks like everything worked fine let's not save that now let's go to our database and let's look at our app users see so our barbed wire user got added now but the important thing let's see if our additional data got added so let's go back to our database and let's look at our collections and we have profile and there's our user that got added so we created our user we have the additional information associated with the user and we actually have an account what we're going to do in the next section is we're going to log in the user and then we're going to pull back in all of the additional data that was associated to the user okay so now we're back we just finished up creating a user and the user is logged in and we are on the home page and that's what's happened after we logged in we redirected the home page but how do we actually get access to the user session and where would we do that so a couple of things what we want to do is we want to go to our router because what we want to do is in our routes is if the user is authenticated we want to take them to the home page if they're not authenticated we want to take them to the login page and so the way we're going to do that is we're going to add a hook a a router before each hook onto the bottom and like i said before i'll just kind of drop in some code and then kind of explain what's what's going on so we have this router object here and then what we want to do is off this router object we want to be able to run this hook before we kind of redirect and we'll get past this to this from and the next one of the first things that we need is we need to get access to our app so let's go where do i have it we'll just the same process i need to copy the import so let's bring the import over and then here in the bottom and then i need my realm object and i'm going to do the git app again because when i do a git app i'm getting i'm getting an instance of an existing app so let's go down here we're going to copy this code to get the app instance as i said before maybe in a later video i'll refactor this to clean it up a bit but i think i can do it up here so now i have my app instance and on my app instance i can find out if i actually have a current user so we have a bunch of things that we want to do and so let's just drop this in also so inside my routes here so let's just kind of walk through this used to protect grouts all right so what we're going to do here is if the path i'm trying to go to is the home path and if i don't have a current user then go to the login page if the full path i'm trying to go to is the login page and i have a current user then go to the home page so what this will do is this will basically protect the home page so the only way to get to the home page like you see is if you have a current user so let's save this and you can see right now we're at the home page and now if i try to go to login it should redirect me to the home page let's see see it redirected me to the home page because i have a user but we can't see the user object so let's pull some user let's pull the user information out kind of the same way that we we're getting this app object here we get the current user we can now get the actual information on the current user we can just render some of it on the screen so let's go to our home page where's my home and once again we're going to follow that same process let's go where do i just it's easiest to just go over here and we're gonna come to the top here and we'll just take these two lines and let's go to our home page and we're gonna go up here to the top let's change this and we'll get our app instance and we know we have our app current user and what we'll do here is uh since app is defined up there do i have access to it let's bring it down in here just to be safe all right and then what we can do is just um current user equals ref let's make it any to kind of save us some typing and set it to null and then what we'll do here is we'll just say current user dot value equals app current user and it will return the current user here which will give me access to it to the template and then let's go up to the template and let's display some of this current user information and because i saved a bunch of that data in my remember we saved extra user information we can display all that extra user information here to confirm that we actually have someone logged in and where is that so and another thing is we want to be able to log out so what we'll do is we'll drop this code in here and we'll say if i have a current user and as you can see the current user information already popped up here that's a user id and that's the user email address and what also what i want to do is here we have the custom data right so let's show the first name and last name too so let's drop in here we can say current user custom data first custom data last okay and why am i not getting this let's refresh this let's just check down here on this object that i get back app but current user that custom data dot i believe that's right and we're just going to console log this app current user custom data okay and let's see if this will work for me and it's saying that my current user custom data is empty there's a call you can use to make it refresh the data and let's see if we can give that a call and see if that'll address the issue so we let's just copy this whole thing so we'll come down here we'll refresh it and then let's move this to afterwards okay so we want to attempt to refresh the data and then after the date is refreshed then assign it and let's move this into an unmounted so we'll set all this up when the component gets mounted let's set this to async so we can run this uh and now let's see if we get any different results all right yeah that's what it is we just needed to refresh the token so you can see now that i've refreshed it i'm getting my user information back and it's being displayed there so that's what this this refresh custom data call will do for you all right so let's let's put this back down to normal size let's add some padding around this where is this content gonna move that out and then we need to add our log out because this doesn't make sense to test log unless i can actually log out so let me come down here and we have where is it we have this user logout function needs to be filled out so let's go down and create our user logout function const and we're going to need a router because what we want to do is after we log out we want to redirect back to the login page so let's say const router we're going to do a use router like we did before and we're going to magically import this guy and we're going to keep this simple just a little wait i don't know if i can type then i need to get my logout function and my logout function goes a little something like this as they say it's pretty straightforward we get our app our current user and it is log out and let's clean some of this up because it's going to complain i think i could just elvis my way out of this so that does that and so now i have my logout function but i did say after this happens we want to actually use our router router dot replace and send them back to login okay so let's see if we get this to work so i'm logged in let's lock oh let's refresh this let's make sure i'm passing my log user log out and let's just check again because i saw some errors that were popping up sure there's no errors here um no that seems to be addressed now all right so i'm good with my errors i'm just back to the side and let's try to log out now so let's try this again and that was i already forgot my username it was bob wire at mail dot com i didn't do i didn't set my redirect on login so let's go do that so let's go back to my login see here i did if my login was successful we need to do router replace home and let's add our import for our router and so now on successful login we'll just go home let's get this out of here let's see if we can log in again bob wire.combobwired.mail.com and then password let's try oh this should be at mail okay so now bob wire's logged in why is my logout not working see if we're throwing any errors here but i bet if i re oh it's interesting it see the route has changed but the page hasn't changed that's interesting uncaught error can i read custom data without access token oh i know what's happening so what's happening is now i've logged out and so there's no more user but it's still trying to render this information up here so let's put some elvis on here and i think actually also what it is is where's my console custom data let's get rid of that guy because we don't need that anymore okay let's refresh everything let's log in bob again sign in let's see oh i know what's going on i'm not setting my current user to null so after i log out here i need to set my current user so the log out will clear out the app current user but i'm using my current user which i assigned and i need to null that out so now let's refresh everything it's login bob wire password bob wire is logged in bob wire is logged out so that's what it was okay so we did the login we did the log out and then the last thing that we need to do is is address the session so like watch when i log in as bob byer again bob and i sign in so now bob signed in if i refresh this let's go back and i do a hard that should empty the cache and refresh my page and you see how it's redirecting back into my login page well that's because if i look at my indexed ts inside my router what i'm saying is that if you're trying to go to login page and i have a current user then just take to the home page that's because um realm is keeping track of my user session and it's kind of reconstituting it for lack of a better word and bringing me back to the home page and so i think that as a wrap that's kind of what we wanted to cover in this kind of first video it's been kind of long i think it's almost an hour of content what we'll do in the next video is we will use more of the queries to save data to the database and retrieve data from the database and maybe we'll also integrate a realm function so you can see how you can leverage the back end to have serverless functions using realm hopefully you found this helpful please make sure you like subscribe share the video with your friends or someone else you think might be interested in it and take care bye now

Channel: Aaron Saunders

Views: 2,884

Keywords: mongodb, mongodb realm tutorial, mongodb realm web app, mongodb realm websdk setup, mongodb realm ionic, realm mongodb, realm websdk, realm vuejs, realm ionic vue, mongodb cloud, realm login tutorial, realm create account web sdk, realm mongodb create account, cloud database, mongodb atlas, mongodb vuejs, mongodb realm web, mongodb realm vue js, mongodb realm websdk

Id: HIIqSWB_4G8

Length: 51min 42sec (3102 seconds)

Published: Thu Oct 07 2021