1
00:00:02,250 --> 00:00:03,730
So let's start using stitch.

2
00:00:03,760 --> 00:00:09,090
Here we actually have a pretty helpful snippet that shows us how we can use stitch in our client side

3
00:00:09,090 --> 00:00:09,700
code

4
00:00:09,990 --> 00:00:15,160
but of course we'll walk through that step by step together. Now to get started,

5
00:00:15,160 --> 00:00:19,080
let's dive into the source folder in our code and there in the app.js

6
00:00:19,110 --> 00:00:19,610
.

7
00:00:19,660 --> 00:00:22,870
file. Make sure you set isAuth to true here

8
00:00:22,880 --> 00:00:24,880
so that we start in authenticated mode,

9
00:00:24,980 --> 00:00:27,910
we'll change this later. Now in authenticated mode,

10
00:00:28,100 --> 00:00:28,770
you'll see

11
00:00:28,940 --> 00:00:29,840
I want a products page

12
00:00:29,840 --> 00:00:34,820
but of course we can't load products because I deleted my entire backend and hence we get an error

13
00:00:35,060 --> 00:00:36,760
but we'll fix this.

14
00:00:36,770 --> 00:00:44,650
Now we know that there actually are products in our database because we created them in the last module

15
00:00:44,720 --> 00:00:45,640
and even if you didn't,

16
00:00:45,680 --> 00:00:46,210
no worries,

17
00:00:46,220 --> 00:00:50,280
we'll also add the code to add new products in this module.

18
00:00:50,300 --> 00:00:53,930
So how can we now fetch products with the help of stitch?

19
00:00:53,930 --> 00:00:59,120
Well first of all, we need to import stitch in the file where I want to use it,

20
00:00:59,120 --> 00:01:01,130
now where do I want to use stitch?

21
00:01:01,430 --> 00:01:06,280
Well for now let's go to the products page here in the pages folder, product products.js,

22
00:01:06,320 --> 00:01:12,440
that is where I have my fetch data method where I try to fetch data from my own API in the last

23
00:01:12,440 --> 00:01:13,280
lecture.

24
00:01:13,280 --> 00:01:14,900
Now this will now not work anymore,

25
00:01:14,930 --> 00:01:18,110
now I want to use stitch here. To use stitch,

26
00:01:18,200 --> 00:01:23,630
I'll go all the way to the top because first of all, I need to import some things. So I'll import some things

27
00:01:23,630 --> 00:01:26,930
from the mongodb stitch browser sdk package,

28
00:01:26,990 --> 00:01:28,670
so this is the name of the package

29
00:01:28,700 --> 00:01:32,300
and from there, I'll import stitch itself.

30
00:01:32,300 --> 00:01:36,860
This is an object that allows us to basically initialize everything and then work with stitch

31
00:01:37,220 --> 00:01:43,820
and I will also need to do some other things but these things like for example authenticating will not

32
00:01:43,820 --> 00:01:44,840
happen in here

33
00:01:45,020 --> 00:01:52,490
but in the app.js file. In the app.js file, there I'll also import stitch, by the way you can remove

34
00:01:52,490 --> 00:01:54,670
the axis import, we'll not use that anymore.

35
00:01:55,100 --> 00:02:03,380
You can import stitch here and the first thing I'll do with stitch is actually in my app here, I'll add

36
00:02:03,410 --> 00:02:08,000
a constructor, that is a default function that will be executed first by Javascript,

37
00:02:08,000 --> 00:02:14,430
so this is not related to stitch, this is pure javascript and I'll use stitch here and on stitch,

38
00:02:14,720 --> 00:02:21,850
I can call initialize default app client and now here I need to pass a client app ID.

39
00:02:22,400 --> 00:02:26,790
Now that client app ID is something I get from my stitch page and

40
00:02:26,860 --> 00:02:35,910
actually here, I already see exactly my ID. So we can use that ID here and copy it over and pass it as

41
00:02:35,910 --> 00:02:36,710
a string,

42
00:02:36,720 --> 00:02:41,160
this is the first thing you need to do with any application that uses stitch, you need to initialize

43
00:02:41,160 --> 00:02:43,260
stitch with this command.

44
00:02:43,350 --> 00:02:49,590
Now with stitch initialized, you can now start using it and we can start using it in the products.js

45
00:02:49,590 --> 00:02:51,720
file where I also import stitch,

46
00:02:51,900 --> 00:02:57,420
for example when we try to fetch data which is actually the first thing we do when this component mounts,

47
00:02:57,420 --> 00:02:59,350
so when this component is loaded.

48
00:02:59,610 --> 00:03:09,240
So here instead of using axis, I can simply use stitch and then get app client, we initialize it in app.js,

49
00:03:09,310 --> 00:03:16,270
here we can get the initialized app client and then you get a service client.

50
00:03:16,280 --> 00:03:17,700
Now what is a service client?

51
00:03:17,750 --> 00:03:22,510
That would be something like AWS S3 if you want to reach out to some functionalities exposed

52
00:03:22,550 --> 00:03:23,130
by that

53
00:03:23,330 --> 00:03:29,930
but another service client is also mongodb, so the database. And to use that service client, you need to

54
00:03:29,930 --> 00:03:35,750
import something else from the mongodb stitch browser sdk and that is the remote mongo client.

55
00:03:35,780 --> 00:03:39,600
So it's basically a mongo client built for usage in the browser,

56
00:03:39,590 --> 00:03:46,160
we're taking that different way of authentication and so on into account. You pass it here to get service

57
00:03:46,160 --> 00:03:52,370
client, you pass remotemongoclient.factory, that is essentially just a reference to a method that

58
00:03:52,370 --> 00:03:56,480
will be used internally by stitch to initialize that mongo client.

59
00:03:56,900 --> 00:04:00,890
Then you pass a second argument and that is the service name, the service name

60
00:04:00,890 --> 00:04:04,150
here in our case is mongodb-atlas

61
00:04:04,160 --> 00:04:05,750
and you must get that right,

62
00:04:05,750 --> 00:04:06,880
so this is not up to you,

63
00:04:06,890 --> 00:04:10,850
it has to be named like this, mongodb-atlas.

64
00:04:11,420 --> 00:04:15,840
This is something we can now use because this gives us access to mongodb,

65
00:04:16,080 --> 00:04:20,770
so I'll store the result of this operation in a constant named mongodb.

66
00:04:21,290 --> 00:04:26,880
And we can now use mongodb so this constant here to work with our database,

67
00:04:26,910 --> 00:04:32,460
so here I can now access a database, I can call a database function to which I pass the name of

68
00:04:32,460 --> 00:04:37,820
the database and here, the name of my database will be shop,

69
00:04:37,920 --> 00:04:40,820
that is the database I created in the last course module,

70
00:04:40,830 --> 00:04:43,570
if it doesn't exist yet, it will be created on the fly

71
00:04:44,040 --> 00:04:48,720
and then I access a collection in there and that will be the products collection.

72
00:04:48,720 --> 00:04:54,440
And now you can call the normal crud methods you know, find, insert one, update one, delete one, delete many

73
00:04:54,450 --> 00:04:55,280
and so on.

74
00:04:55,590 --> 00:05:02,240
So here I will now call find to find all products without arguments

75
00:05:02,610 --> 00:05:09,290
and now we have a cursor again but we get a bit of a more, a simpler to use option here

76
00:05:09,510 --> 00:05:16,080
and we can now simply use as array and let stitch do the fast step by step fetching for us, if we needed

77
00:05:16,080 --> 00:05:16,950
more control,

78
00:05:16,950 --> 00:05:22,570
we could get access to the iterator which basically allows us to write our own loop then.

79
00:05:22,890 --> 00:05:27,300
So here I'll use as array to get access to the results as an array

80
00:05:28,380 --> 00:05:31,720
and we execute that function and we get back a promise here,

81
00:05:31,780 --> 00:05:40,270
hence we again have then and catch here. So now in then, we should be getting our products and in catch

82
00:05:40,270 --> 00:05:42,470
we'll have an error.

83
00:05:42,580 --> 00:05:48,350
Now if we have an error, well then I'll just copy my error handling code from up here,

84
00:05:49,320 --> 00:05:57,040
this will essentially just throw an error message where I can say fetching the product failed

85
00:06:00,620 --> 00:06:05,520
and we can also log the error so that we can see it, what exactly went wrong.

86
00:06:05,590 --> 00:06:12,780
And here if I do have the products, well then I of course want to set my products here equal to the products

87
00:06:12,790 --> 00:06:13,730
I fetched,

88
00:06:13,740 --> 00:06:17,940
so I can use this set state and this is now react code, not stitch code

89
00:06:17,940 --> 00:06:22,140
and I can set products equal to the product I get here,

90
00:06:22,140 --> 00:06:27,310
so this is the product in my state, that's a react thing, that the right side of the colon that are the

91
00:06:27,340 --> 00:06:28,670
products I fetched.

92
00:06:29,210 --> 00:06:29,550
Ok

93
00:06:29,580 --> 00:06:32,730
so this is the logic that allows me to fetch data,

94
00:06:33,060 --> 00:06:36,070
now I also need to go back to app.js real quick.

95
00:06:36,180 --> 00:06:36,720
I deleted

96
00:06:36,730 --> 00:06:42,050
the axios import and therefore all the places where I use axios would now throw errors.

97
00:06:42,090 --> 00:06:49,440
So what I'll do for now is I will simply take that entire code here in the auth handler and comment it

98
00:06:49,440 --> 00:06:52,130
out because it would lead to issues.

99
00:06:52,320 --> 00:06:53,780
If you now save everything,

100
00:06:54,030 --> 00:06:58,620
I got an error here, that I must call super.

101
00:06:58,620 --> 00:07:04,070
If you do add a constructor as I did here, you have to call super in there,

102
00:07:04,160 --> 00:07:05,830
so let's do that.

103
00:07:05,950 --> 00:07:08,590
Now I have another issue here and that issue is that

104
00:07:08,590 --> 00:07:11,510
I failed to get my service client here,

105
00:07:12,160 --> 00:07:13,700
the issue is here in fetch data,

106
00:07:13,900 --> 00:07:18,150
get app client is the issue here, I should access stitch.default app client,

107
00:07:18,320 --> 00:07:23,960
sorry this property, you should access this property not get app client, a little mistake on my side.

108
00:07:25,400 --> 00:07:30,530
And now we get an error but this error is expected, we must authenticate first and that is related to what

109
00:07:30,530 --> 00:07:32,180
I explained on the slides.

110
00:07:32,180 --> 00:07:38,180
You have to have authenticated users in your application because each user then receives a set of things

111
00:07:38,180 --> 00:07:39,510
this user may do

112
00:07:39,620 --> 00:07:42,620
and then only that interaction may happen with the database

113
00:07:42,650 --> 00:07:47,780
and this is then your way of protecting your database against unwanted access because you probably are

114
00:07:47,780 --> 00:07:51,990
fine with users creating products, that is what they would do through your app anyways,

115
00:07:52,100 --> 00:07:55,530
you just want to make sure they can't start deleting

116
00:07:55,550 --> 00:08:02,270
let's say your orders and you can control that, a logged in user may create products but not delete

117
00:08:02,300 --> 00:08:02,980
orders,

118
00:08:02,990 --> 00:08:05,440
so these are things you can all control.

119
00:08:05,570 --> 00:08:07,180
So now we need to authenticate,

120
00:08:07,250 --> 00:08:08,730
let's do that in the next lecture.