- 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