Why Angular, React & Vue shouldn’t directly send Database Queries

00:00:02 hi everyone
00:00:03 welcome to this video there is one
00:00:05 question related to
00:00:06 web applications built with angular
00:00:08 react or vue
00:00:10 or anything like that how do i connect
00:00:12 such a
00:00:13 application to a database be that a
00:00:15 mysql
00:00:16 or a nosql mongodb whatever database
00:00:20 how do you connect your app to such a
00:00:22 database to store data to fetch data
00:00:24 and in this video i will answer exactly
00:00:26 this question
00:00:28 and as you will see you don't really
00:00:29 directly connect your app
00:00:31 to the database but instead there is
00:00:33 something in the middle and we'll have a
00:00:35 look at what this is
00:00:36 and how you make sure that your data
00:00:38 from these applications
00:00:39 ends up in the database we'll have a
00:00:41 look at all of that in this video
00:00:43 i'll show that the concrete example of
00:00:45 mongodb but what i show in this video
00:00:47 will apply it will be correct for any
00:00:50 type of database you're using
00:00:51 so let's dive right in
00:00:59 now for this video i prepared a little
00:01:01 project little
00:01:02 angular project which you find attached
00:01:05 to this
00:01:06 video of course below the video in the
00:01:07 video description you find a link
00:01:09 and in there we have a very simple
00:01:11 angular app with only one component only
00:01:13 the app component because it's not
00:01:15 really about
00:01:16 angle or building bigger apps there it's
00:01:18 about the part of connecting angular to
00:01:20 databases
00:01:21 so here we got the app component in
00:01:23 there we're rendering a form at the top
00:01:25 and below that
00:01:26 a list of to-do's so regarding that it's
00:01:28 a default boring to-do app and i know
00:01:31 everyone hates these to-do apps of
00:01:33 course
00:01:34 but it's not really about the to-do's or
00:01:35 about angular it's about saving that
00:01:37 stuff to the database
00:01:38 and for that of course any app will do
00:01:40 get some styles there a little bit of
00:01:42 logic in the app component typescript
00:01:43 file
00:01:44 this is what gets rendered here we can
00:01:46 enter a to do
00:01:47 like do groceries
00:01:50 or grocery shopping save that we can of
00:01:53 course also delete our to-do's here so
00:01:55 that's not too fancy of course now i got
00:01:58 these two buttons here
00:01:59 and i got another browser tab open
00:02:01 already and
00:02:02 that is mongodb but of course what i
00:02:05 show you here
00:02:06 would be valid for for any database not
00:02:09 just for mongodb would be true for
00:02:11 sql databases like mysql
00:02:14 would be true for for any other solution
00:02:17 any database you might want to connect
00:02:19 so my goal is to make these two buttons
00:02:20 work i want to be able to save
00:02:22 my data here the list of to-do's we have
00:02:24 to the database
00:02:25 and upon pressing this button the data
00:02:28 should be fetched from there
00:02:29 and the big question regarding that of
00:02:32 course is
00:02:33 how does that work how do we connect
00:02:36 angular to a database that's also a
00:02:40 question i get a lot in my courses in
00:02:42 the comments below videos
00:02:44 and the simple answer is you don't
00:02:47 directly connect your
00:02:48 angular app like this to a database so
00:02:51 even if you have a database let's say
00:02:53 we're using mongodb
00:02:54 here in the cloud but doesn't matter if
00:02:56 it's running locally on your machine if
00:02:58 it's running
00:02:59 in the cloud either on a service like
00:03:01 mongodb or if you're using aws
00:03:04 and you spun up a database there what
00:03:06 you don't do
00:03:07 is you don't put your code to connect to
00:03:10 a database
00:03:12 right here into your your typescript
00:03:15 files here right into your angular code

00:03:17 you don't add your query statements your
00:03:20 sql or nosql query statements here
00:03:23 in that code and you might wonder why
00:03:26 why are you not doing that because it
00:03:29 would be
00:03:29 highly insecure you would have to add
00:03:33 two things to that code to really
00:03:35 interact with the database
00:03:37 for one that is the connection you need
00:03:39 to establish the connection for that you
00:03:41 need your credentials
00:03:42 so you would have to put your
00:03:44 credentials in here now let me show you
00:03:45 what the problem with putting your
00:03:47 credentials in there would be
00:03:49 let me open up the developer tools here
00:03:50 for this little application
00:03:53 and let me bring up that server again
00:03:56 that development server
00:03:57 so that we can actually inspect that
00:03:59 application
00:04:00 let's do a reload here and now here we
00:04:03 can of course debug our
00:04:04 application one thing we can also do is
00:04:06 here under the sources tab
00:04:08 is we can have a look at the code
00:04:11 somewhere in here
00:04:12 you will find your code mike has here
00:04:14 for example the webpack folder the dot
00:04:16 folder source
00:04:17 thanks to source maps i even find it in
00:04:20 typescript format here
00:04:22 that's a little feature provided by
00:04:24 angular for debugging
00:04:25 that gives us basically code with some
00:04:28 source map files added to it
00:04:30 which allows the browser to trace back
00:04:32 the compiled javascript code to our
00:04:34 typescript original code
00:04:36 so here i can even read it like that but
00:04:38 even if we would be running that
00:04:40 in production you would be able to find
00:04:43 your code as javascript somewhere
00:04:45 because it is of course downloaded this
00:04:47 is part of your application
00:04:49 if you view the page source you have
00:04:51 these imports here right you have all
00:04:53 these imports here these javascript
00:04:55 files
00:04:56 and you also find those here under
00:04:58 localhost in my case here in the sources
00:05:00 tab
00:05:01 there you also in the end find your
00:05:04 different code files and you can of
00:05:06 course look into these files
00:05:08 now what's the problem with being able
00:05:11 to look into these files here though
00:05:13 what's uh
00:05:14 what's the matter with that the big
00:05:17 problem of course is that
00:05:18 anyone can look into these files if your
00:05:20 application is deployed somewhere
00:05:22 anyone can inspect these javascript
00:05:24 files because these files are not
00:05:26 protected
00:05:27 and i got another video on protecting or
00:05:30 not protecting
00:05:31 your javascript code on this channel
00:05:34 so by default all the javascript code
00:05:37 you right here and that's no difference
00:05:39 for
00:05:40 react or for the view or for vanilla
00:05:42 javascript all this javascript code is
00:05:44 always exposed
00:05:45 that's how the web and how the browser
00:05:46 works this front-end
00:05:48 code which runs in your browser is fully
00:05:52 viewable by your users that means if you
00:05:55 put your
00:05:56 database connection code in your
00:05:57 credentials in here people
00:05:59 can see that code in addition to that
00:06:03 you would of course also have to put
00:06:04 your queries in there
00:06:06 so all your queries for interacting with
00:06:08 database
00:06:09 so your sql statements your nosql
00:06:12 queries
00:06:13 and even if your credentials were
00:06:15 somehow hidden
00:06:16 and you can't hide them but even if that
00:06:18 would be the case of course
00:06:20 people could start editing these queries
00:06:24 or could view your queries to maybe get
00:06:26 some insights in
00:06:28 how your database is structured which
00:06:30 might help them retrieve data with
00:06:31 queries they write
00:06:33 themselves which they can execute
00:06:35 because in reality of course they do

00:06:37 have access to your credentials too
00:06:38 so it would be highly insecure if you
00:06:41 would
00:06:42 reach out to a database directly from
00:06:44 inside your angular code here
00:06:46 that's why you don't do that you don't
00:06:48 directly connect to a database from
00:06:49 inside your angular code because it
00:06:51 would be highly insecure
00:06:53 for that reason we also have no
00:06:55 technical solutions for that so if you
00:06:57 ever searched for
00:06:58 a angle or package that helps you
00:07:00 connect to your
00:07:02 sql database or your to your nosql
00:07:04 database
00:07:05 you'll not find packages that packages
00:07:08 that really do that
00:07:10 in the direct connection form you find
00:07:13 for the server side
00:07:15 now what you will find though and what
00:07:17 can be really confusing for newcomers
00:07:19 is things like mongodb stitch
00:07:23 if you go to mongodb and then under
00:07:25 products go to mongodb
00:07:27 stitch you'll actually find a solution
00:07:30 which allows you to run queries from
00:07:32 inside your browser so here we can
00:07:34 import the mongodb stitch browser sdk
00:07:37 and we'll use that in a second actually
00:07:39 and there we can establish a connection
00:07:40 to a database and then run our queries
00:07:42 against that database
00:07:44 so now we have these in browser queries
00:07:47 and something similarly confusing is
00:07:49 firebase for example
00:07:51 whenever i use firebase as an example in
00:07:53 my courses i
00:07:54 often get the question if i can also
00:07:56 show people how to connect
00:07:58 to a backend instead of just to a
00:08:00 database and the thing is
00:08:01 firebase actually is a backup it's not
00:08:03 just a database
00:08:04 it's a backend with an attached database
00:08:07 that's the thing
00:08:08 but when you connect to firebase through
00:08:10 the firebase
00:08:11 sdk the javascript sdk for example
00:08:14 whenever you're doing that
00:08:15 you actually are connecting to a web
00:08:18 service
00:08:19 and on that web service the actual
00:08:21 database connection the actual database
00:08:23 queries
00:08:24 are executed what you use
00:08:27 in both cases so both here for firebase
00:08:30 and the firebase sdk for the web
00:08:32 as well as for solutions like mongodb
00:08:35 stitch what you're using here
00:08:37 is a browser side sdk which yes
00:08:40 allows you to basically run queries
00:08:43 against your database but it has one
00:08:44 important extra step
00:08:46 that part of the code where you connect
00:08:49 to database
00:08:50 is not in here instead sdks like
00:08:54 these give you ways of authenticating
00:08:57 users
00:08:57 and you can also authenticate
00:08:59 anonymously which means you get some
00:09:01 some dummy token so to say which works
00:09:03 for every user of your application which
00:09:05 is of course insecure and you don't want
00:09:07 to use that
00:09:08 for your entire database
00:09:11 but these apps give you ways of
00:09:13 authenticating users and then only these
00:09:15 authenticated users
00:09:16 can actually run queries and all that is
00:09:20 funneled
00:09:20 through a web service provided by
00:09:22 mongodb by firebase
00:09:24 which does the user authentication
00:09:26 validation and which then
00:09:27 actually does the real database
00:09:30 connection
00:09:31 and the important building block in that
00:09:33 picture are the access rules which you
00:09:35 find both on mongodb stitch
00:09:37 as well as on firebase in both cases
00:09:40 you also learn about the rules you can
00:09:42 set up which you set up
00:09:44 on the web so in the firebase or in the
00:09:46 mongodb
00:09:47 web console so not in your browser site
00:09:50 code which people could read or
00:09:51 edit but in the code only you can add it
00:09:53 on the server
00:09:54 and there for example for firebase rules

00:09:56 you can
00:09:57 determine in detail who
00:10:01 would be able to edit which part or
00:10:04 which
00:10:04 data in your database and with who i
00:10:07 mean
00:10:08 unauthenticated users authenticated
00:10:10 users
00:10:11 authenticated users with a certain id
00:10:14 things like that
00:10:15 and that means that whilst you can for
00:10:17 both firebase as well as for mongodb
00:10:20 also work with so-called anonymous
00:10:22 unauthenticated users
00:10:23 you can control on the server side so in
00:10:25 the mongodb
00:10:26 web setup or in the firebase web setup
00:10:30 what these anonymous users will actually
00:10:33 be able to do and of course there
00:10:34 you should normally lock that down and
00:10:37 only restrict it to being able to write
00:10:39 or to read from one specific part of
00:10:42 your database instead of your entire
00:10:43 database
00:10:44 and people would be able to work with
00:10:46 your entire database
00:10:47 if you would theoretically add your full
00:10:50 credentials and your full
00:10:52 eye work with my database code to your
00:10:54 front-end code
00:10:55 instead these sdks abstract that away
00:10:59 from you
00:11:00 give you a full web service behind the
00:11:02 scenes to which they talk
00:11:03 add user authentication and then give
00:11:06 you detailed control on the server what
00:11:08 these users they authenticate for you
00:11:11 are able to do and that's an important
00:11:13 part now let's actually have a look at
00:11:15 that here with mongodb
00:11:17 because it's really important to
00:11:18 understand that so here i logged into my
00:11:20 mongodb cluster and that's really just
00:11:22 one example here
00:11:23 of course not every database might give
00:11:25 you a cloud service with an sdk like
00:11:27 mongodb
00:11:28 stitch or firebase and in such a case
00:11:30 you simply have to create your own
00:11:32 backend service which then talks to that
00:11:34 database and exposes
00:11:36 rest api endpoints to which your front
00:11:38 end can talk because that is how it
00:11:39 always works
00:11:40 you're end just talks to a web service
00:11:43 which then does the database connection
00:11:45 and that ever can be done with the help
00:11:47 of services and sdks like firebase
00:11:49 or mongodb stitch or you build your own
00:11:52 backend api to which you talk and of
00:11:54 course i also got tutorials on that
00:11:56 you never directly talk to a database in
00:11:58 your angular app
00:12:00 so here for mongodb for example i can go
00:12:02 down
00:12:03 to the services which already is an
00:12:05 important hint to the services part here
00:12:07 and click on stitch
00:12:08 to basically learn how to or to set up a
00:12:11 new connection and learn how to connect
00:12:13 my front end here
00:12:14 and therefore i click on create new
00:12:16 application give it a name
00:12:18 ng database demo whatever you want to
00:12:21 name it
00:12:22 link to a cluster i already created a
00:12:24 cluster and this is
00:12:25 the cluster to which i'll connect this
00:12:27 leave the remaining setup here
00:12:29 as it is and click create
00:12:32 and now what this does is it does some
00:12:33 back-end setup here on mongodb's servers
00:12:37 to basically set up that web service to
00:12:38 which i can then talk from my front end
00:12:40 i just don't talk to it through the
00:12:43 angular http service and by manually
00:12:45 sending requests to endpoints but i can
00:12:48 also use the sdk
00:12:49 which in the end does that for me so
00:12:51 that browser site sdk and it's the same
00:12:53 for firebase
00:12:54 in the end just sends ajax requests to
00:12:56 some apis behind the scenes
00:12:58 and gives you a more convenient api to
00:13:00 work with that's all that's happening
00:13:01 it's exactly the same as if you had your
00:13:03 own backend web service your own
00:13:06 rest api and you use the angular http
00:13:08 client for sending requests
00:13:10 and that's absolutely normal too by the

00:13:12 way
00:13:13 that's also why in my courses like in my
00:13:15 angular course on
00:13:16 udemy i actually do use the angular http
00:13:19 client
00:13:20 and i do use the firebase rest api so
00:13:22 that you really
00:13:23 see that there is no magic involved and
00:13:25 that you don't directly talk to a
00:13:26 database
00:13:27 but that you instead talk to a backend
00:13:30 api
00:13:31 now with stitch setup here though i'll
00:13:32 show you the sdk
00:13:34 example go to the clients here
00:13:38 and you learn how to add this to your
00:13:41 browser side application now
00:13:44 i'll use the npm approach here and
00:13:46 simply run this command
00:13:48 here so here i'll quit
00:13:51 that dev server temporarily copied in
00:13:53 npm install dash dash save mongodb
00:13:55 stitch browser sdk
00:13:57 that installs the wall sdk we can use on
00:13:59 the browser
00:14:00 and then here we actually got a demo
00:14:02 snippet which
00:14:03 we can start with to connect to our
00:14:06 backend here
00:14:07 and work with it let me actually grab
00:14:11 this code snippet here and now in here
00:14:13 in this application i'll add a simple
00:14:15 service
00:14:16 my db service
00:14:21 and here exporter class db service and
00:14:23 of course you can name this whatever you
00:14:25 want
00:14:26 and give this the add injectable
00:14:28 decorator here
00:14:30 and i'll add this object where i said
00:14:31 provided into root to automatically set
00:14:34 up
00:14:35 um dependency injection here in my
00:14:36 angular app
00:14:38 and in here
00:14:41 i'll copy in that code snippet with that
00:14:44 import
00:14:45 not with the required syntax though but
00:14:47 with
00:14:48 import
00:14:52 from
00:14:55 then use that code here or take that
00:14:57 code and actually add a new
00:14:59 method in here init db
00:15:03 and in that method i want to execute
00:15:05 that code now give that
00:15:08 database here a name like ng db
00:15:13 and actually store that in a variable
00:15:18 which will be of type remote mongo
00:15:21 database which i also import from up
00:15:23 there
00:15:24 and then here i'll actually store
00:15:28 this connection which i'm setting up
00:15:29 here or this database access here
00:15:31 in this property of the service now we
00:15:35 can just call in a db
00:15:36 when the app starts so here in the app
00:15:38 component
00:15:39 i'll actually implement
00:15:43 my on init interface here on and it is
00:15:46 imported from ant angular core
00:15:50 and of course all the ad injection of
00:15:54 the db service
00:15:57 with by pointing at db service here
00:16:01 which is imported from the
00:16:03 well db service file i just added stored
00:16:06 in a private property and then here in
00:16:08 engion in it of my component i can call
00:16:11 dbservicenhdb to initialize that
00:16:13 database here right when the app starts
00:16:15 so now we can add methods to add a to do
00:16:17 for example
00:16:18 so here the service i'll add the
00:16:22 to do function or method
00:16:25 and now we want to interact with that
00:16:27 client here so i'll store this in a
00:16:29 property of the service too actually
00:16:31 and that will be a stitch app client
00:16:36 so that's another import we have to add
00:16:38 from the mongodb stitch browser sdk
00:16:40 so store that client here as well and
00:16:43 now here
00:16:44 we of course also have to use this
00:16:45 client and in add to do we can now
00:16:48 use this client
00:16:51 off login with credential and now we
00:16:55 create a new anonymous credential
00:16:57 you could also and for that you should
00:16:59 check out the docs of mongodb stitch if
00:17:01 you want to use that solution

00:17:02 setup authentication with email and
00:17:04 password to have real authenticated
00:17:06 users
00:17:06 here we're basically creating a dummy
00:17:08 token for the current anonymous user of
00:17:10 our app
00:17:12 and once that authenticated connection
00:17:14 is established
00:17:15 we have a function here
00:17:19 which will execute and in there we can
00:17:22 reach out to our database
00:17:24 handle and then there to your collection
00:17:26 for example and that collection can now
00:17:28 have any name you want to do this
00:17:30 and in there i can insert one to do
00:17:33 and for that i can now enter empty any
00:17:36 document any javascript object i want
00:17:38 here i expect to get my to do
00:17:42 and that will in the end just be an
00:17:43 object with a title
00:17:46 which is a string it's as simple as that
00:17:48 so here i'll get
00:17:49 such an object and therefore here i'll
00:17:51 just add that to do here to the database
00:17:55 and if we now save this we can try using
00:17:57 that here and on add to do so besides
00:17:59 storing it here locally in that
00:18:01 array we're also outputting in the
00:18:03 component we can use this dbservice ad
00:18:06 to do
00:18:06 and forward this to do here which i'm in
00:18:09 the end creating so here
00:18:11 i have my new to do it's this object
00:18:14 i add it to my local array here and then
00:18:17 also i have forwarded
00:18:18 to add to do in the service
00:18:21 if we do that and we restarted service
00:18:23 at that web server we should now have a
00:18:25 setup where we can actually store our
00:18:28 data here also on the mongodb servers
00:18:31 but again by using that sdk which talks
00:18:34 to that
00:18:34 mongodb web service we set up with
00:18:36 creating that application
00:18:38 and which then therefore manages all the
00:18:40 direct database access for you
00:18:42 and allows us to lock down access as
00:18:44 i'll also show you in a second
00:18:46 so now here let's give that a try let's
00:18:49 reload the application
00:18:51 and we're now getting an error that
00:18:53 global is not
00:18:54 defined this is now a mongodb
00:18:57 specific error here from that package
00:19:00 we're using the polyfills ts file
00:19:02 you can go to the bottom to application
00:19:04 imports there at
00:19:06 window as any global
00:19:11 and pointed window so we have to add a
00:19:13 global variable to our script
00:19:15 which points at our window that's all we
00:19:18 have to do here in the application
00:19:19 imports
00:19:20 with that the app restarts now it works
00:19:22 and now if i add
00:19:24 some to do here and i click save i get
00:19:28 an error
00:19:28 authentication why anon user is
00:19:30 unsupported that's the part i meant with
00:19:32 locking it down now if we go to the
00:19:34 mongodb
00:19:35 stitch clients here we actually have to
00:19:38 control
00:19:39 who is able to read and write to our
00:19:41 database
00:19:43 so here on the back end you have to go
00:19:45 to the users part here
00:19:47 and then here under providers you have
00:19:49 to allow users to log in anonymously so
00:19:52 that's already the first important thing
00:19:54 you have to enable this otherwise no
00:19:56 access is possible
00:19:57 so the first security measure in place
00:20:00 here
00:20:01 you could also of course restrict this
00:20:03 to email password users so that you need
00:20:05 real users
00:20:06 who sign up with email and password so
00:20:08 now if this changed
00:20:10 let's try that again let's try adding
00:20:12 some to do
00:20:14 now we're getting only that service not
00:20:17 found mongodb one error
00:20:20 and yeah my service name which i can
00:20:22 find here under clusters
00:20:24 is mongodb atlas actually
00:20:27 a little mistake on my side let's make
00:20:29 sure you use that here
00:20:32 and now with that however if i add some
00:20:35 to do

00:20:37 now we get that error i actually want to
00:20:39 see no rule exist for namespace ng
00:20:41 db to do's and i'm showing these errors
00:20:43 except for the one with the service name
00:20:45 on purpose because that's the rule part
00:20:48 i mentioned
00:20:49 here under rules on the back end you now
00:20:51 see that you can set up
00:20:52 rules for your collections and in
00:20:54 mongodb collections are just your
00:20:55 database table so to say
00:20:57 that allow or prevent access and now
00:21:00 here we indeed have to set up a rule
00:21:03 for example for ngdb which is our
00:21:05 database we're connecting to
00:21:07 and then for the collection which we
00:21:08 want to write
00:21:10 so here let's create ngdb and then there
00:21:13 there's a collection to do's
00:21:14 that's the collection to which i want to
00:21:16 talk here and
00:21:18 for the to-do's collection
00:21:21 which i'll hear create in the rules
00:21:22 setup we can now set a
00:21:24 template for example allow users to only
00:21:27 read and write their own data
00:21:28 boom that's already some security we can
00:21:30 put into place here and that's the part
00:21:32 i meant
00:21:32 we control access here because there's a
00:21:35 web service in between which we don't
00:21:37 write ourselves
00:21:38 which you could write on your own of
00:21:39 course if you want to write your own
00:21:40 rest api
00:21:41 but with here or also in the case of
00:21:43 firebase you get out of the box and
00:21:45 therefore there is no direct access to
00:21:47 your database
00:21:49 here i'll create no template and add a
00:21:52 collection
00:21:56 and now give read and write access by
00:21:59 adding or by setting these two check
00:22:00 marks here to everything in that
00:22:02 collection which is of course highly
00:22:04 insecure but as you saw you could have
00:22:05 locked that down to a per user basis
00:22:09 and now with that if i add another to do
00:22:13 here
00:22:14 and i hit save now this actually gets
00:22:16 stored we get no more errors because now
00:22:18 i added rules that allow anonymous users
00:22:20 to read and write data
00:22:22 and at the moment we are writing now
00:22:26 to validate that this really happens if
00:22:28 i go back here
00:22:32 to my clusters and i have a look at my
00:22:35 collections here
00:22:40 to look into my database essentially
00:22:44 i can go to ngdb to do's here and i see
00:22:47 that element that was added so now we
00:22:50 are talking to our database
00:22:52 but always through the funnel of having
00:22:54 a web service in between
00:22:56 and now just for a completeness sake let
00:22:59 me also add a get to do's method here
00:23:01 which does also talk to stitch here
00:23:05 to the same collection but there instead
00:23:07 of insert one i use find
00:23:11 and find like this finds me all entries
00:23:14 i
00:23:14 return this promise here overall and in
00:23:17 there
00:23:18 i return the result of
00:23:21 find here and also call as array here on
00:23:25 the end
00:23:26 so that this will give me a promise
00:23:28 which in the end returns an array
00:23:31 and i'll also let typescript know what's
00:23:33 in my collection here because collection
00:23:34 actually is a generic method
00:23:37 in my collection we have javascript
00:23:39 objects which have a title property and
00:23:40 a string property
00:23:42 and since that's added automatically by
00:23:45 mongodb
00:23:45 they also have a underscore id property
00:23:48 but i only care about this i'll only add
00:23:50 this here
00:23:51 so now this is getting returned here
00:23:52 wrapped in a promise of course because
00:23:54 it will take some time
00:23:56 so now to actually make these buttons
00:23:59 work here let me remove
00:24:01 save to database because we're already
00:24:03 saving whenever i add something but with
00:24:04 fetch from database i want to fetch the
00:24:07 data here with on
00:24:09 fetch data new method that should be
00:24:12 added to our

00:24:13 app component of course so here on fetch
00:24:16 data
00:24:16 and in there i'll reach out to the db
00:24:18 service and call
00:24:19 get to do's that will give me a promise
00:24:22 so we can add then here
00:24:24 in the end here i get my to-do's array
00:24:26 and i can then set
00:24:27 this to-do's equal to the to-do's i'm
00:24:30 fetching here
00:24:33 and hopefully that should do the trick
00:24:35 so if this restarts and click fetch from
00:24:37 database
00:24:38 yeah here the to do appears now one
00:24:41 thing we
00:24:42 can't do here you could of course
00:24:43 implement it but it's not really the
00:24:44 focus of this video
00:24:46 deleting here only works locally if i
00:24:48 fetch it it's there again
00:24:49 if you wanted to delete it on the
00:24:51 database too you would have to use that
00:24:53 id which is automatically added for
00:24:55 every item use that in the end here
00:24:58 um add a remove to do's method to the
00:25:00 service
00:25:01 manage that id in the front end and use
00:25:04 that for then deleting a to do
00:25:06 with the help of the delete one
00:25:09 method here on your collection but this
00:25:11 video is not really about mongodb stitch
00:25:13 i hope the
00:25:14 addition of mongodb stitch wasn't too
00:25:16 confusing the key takeaway
00:25:19 i really want you to take away from this
00:25:21 video is that you don't directly connect
00:25:22 and talk to databases from inside your
00:25:24 angular app
00:25:25 instead you always talk to web services
00:25:28 so to apis like rest apis
00:25:30 which either are written by you or by
00:25:32 other people like in this case by the
00:25:34 mongodb
00:25:35 team or firebase case by the firebase
00:25:37 team
00:25:38 these apis can be abstracted away
00:25:42 when you're working with sdks like we're
00:25:45 using it here
00:25:46 then it might look like you're directly
00:25:48 talking to databases but you actually
00:25:50 are not
00:25:51 in the end you're just using a browser
00:25:52 site sdk which does
00:25:54 send http requests behind the scenes you
00:25:57 just don't see
00:25:58 these requests they're hidden away from
00:25:59 you
00:26:01 nonetheless these requests do happen no
00:26:03 direct database access is happening here
00:26:06 instead requests are sent in this case
00:26:08 here and all the firebase cases on
00:26:11 two dedicated web services here our
00:26:13 stitch service which we set up
00:26:15 when we clicked that create app thing
00:26:18 here
00:26:18 under the stitch part of my mongodb
00:26:21 backend and there in this application
00:26:25 we had to enable authentication of
00:26:27 anonymous users
00:26:28 and we had to set up rules for our
00:26:31 different collections
00:26:32 regarding who may read or write from
00:26:34 there and you can set up granular
00:26:36 rules there you can force users to log
00:26:39 in with email and password and that's
00:26:41 exactly the part i meant
00:26:42 you don't have your database credentials
00:26:44 in your code instead these credentials
00:26:46 are stored in the stitch web service
00:26:49 here so to say
00:26:50 they're not exposed to your front-end
00:26:52 users and your front-end users
00:26:54 can only send queries you enable here
00:26:56 through your rules
00:26:58 that's really important and that's why
00:27:00 you don't directly connect to databases
00:27:02 from inside your angular app
00:27:06 you

You may also like