1
00:00:02,180 --> 00:00:04,830
Now let's apply what we learned

2
00:00:04,830 --> 00:00:08,300
over the last lectures in our shop project

3
00:00:08,300 --> 00:00:10,210
we built throughout this course.

4
00:00:10,210 --> 00:00:15,180
Here, I got that project with React Navigation 5 integrated.

5
00:00:15,180 --> 00:00:17,830
So after this other section where I show

6
00:00:17,830 --> 00:00:20,820
how to upgrade to React Navigation 5.

7
00:00:20,820 --> 00:00:23,700
And I haven't changed anything else.

8
00:00:23,700 --> 00:00:27,850
So this is the app as we know it, running on the simulators.

9
00:00:27,850 --> 00:00:32,420
And there we can, of course, create an account

10
00:00:32,420 --> 00:00:34,630
with some credentials here.

11
00:00:34,630 --> 00:00:37,330
First of all, I need to sign up.

12
00:00:37,330 --> 00:00:41,690
And now here, we can add products and so on.

13
00:00:41,690 --> 00:00:46,650
Now, my idea is that when we add a product here,

14
00:00:46,650 --> 00:00:49,870
we actually don't just store the product

15
00:00:49,870 --> 00:00:53,360
with all the data we're uploading thus far.

16
00:00:53,360 --> 00:00:55,490
At the moment, when we create a product,

17
00:00:55,490 --> 00:00:58,410
we are sharing title, description, imageUrl,

18
00:00:58,410 --> 00:01:00,680
price and ownerId.

19
00:01:00,680 --> 00:01:03,880
But instead, besides sharing all of that,

20
00:01:03,880 --> 00:01:07,870
I also want to add the push token of the device

21
00:01:07,870 --> 00:01:10,720
of the user who added this product.

22
00:01:10,720 --> 00:01:13,070
So the push token of the seller,

23
00:01:13,070 --> 00:01:16,110
I wanna add that to the product as well.

24
00:01:16,110 --> 00:01:17,050
Why?

25
00:01:17,050 --> 00:01:19,630
So that when we fetch the product data,

26
00:01:19,630 --> 00:01:22,210
we can also download the push token

27
00:01:22,210 --> 00:01:24,220
that belongs to a product.

28
00:01:24,220 --> 00:01:27,460
And whilst we won't show this to the other users,

29
00:01:27,460 --> 00:01:31,920
we'll use it in code to ensure that when an order is placed,

30
00:01:31,920 --> 00:01:36,920
when we add an order, we don't just store that order data

31
00:01:37,010 --> 00:01:41,430
in the database, but we also send a push notification

32
00:01:41,430 --> 00:01:45,880
to the owner of the product that was just ordered,

33
00:01:45,880 --> 00:01:50,050
letting him or her know that the product was ordered.

34
00:01:50,050 --> 00:01:51,733
That's my idea here.

35
00:01:53,030 --> 00:01:56,210
That of course means that we'll have to analyze the items

36
00:01:56,210 --> 00:01:57,660
that are in the cart.

37
00:01:57,660 --> 00:02:00,040
And then we'll send a push notification

38
00:02:00,040 --> 00:02:01,860
for every product, basically.

39
00:02:01,860 --> 00:02:02,933
That's my idea.

40
00:02:03,780 --> 00:02:07,080
So, for that to ensure this works,

41
00:02:07,080 --> 00:02:10,590
we first of all need to prepare this project

42
00:02:10,590 --> 00:02:12,263
for push notifications.

43
00:02:14,220 --> 00:02:17,830
That means that we first of all should go to app.json

44
00:02:17,830 --> 00:02:21,410
and add that android entry here

45
00:02:21,410 --> 00:02:25,290
where we set useNextNotificationsApi to true.

46
00:02:28,350 --> 00:02:29,830
That's what I showed you before

47
00:02:29,830 --> 00:02:32,010
in the other lectures as well.

48
00:02:32,010 --> 00:02:35,560
We also need to ask the user for permission.

49
00:02:35,560 --> 00:02:39,290
So, the question is where we wanna do that, of course.

50
00:02:39,290 --> 00:02:42,120
Since it's the creator of a product

51
00:02:42,120 --> 00:02:45,030
who should receive push notifications,

52
00:02:45,030 --> 00:02:49,400
I will ask for permission right before we create

53
00:02:49,400 --> 00:02:50,750
a new product.

54
00:02:50,750 --> 00:02:55,750
So, we have our user, our EditProductScreen,

55
00:02:55,760 --> 00:02:57,403
where we create a new product.

56
00:03:00,040 --> 00:03:03,050
And there, in the end, we trigger an action.

57
00:03:03,050 --> 00:03:05,020
In the products.js file here

58
00:03:05,020 --> 00:03:09,000
we'll trigger this createProduct action.

59
00:03:09,000 --> 00:03:12,850
And now my idea is that I ask for permission here,

60
00:03:12,850 --> 00:03:15,550
I then also fetch the token here

61
00:03:15,550 --> 00:03:18,730
and then we can add the token to the outgoing data

62
00:03:18,730 --> 00:03:20,643
that's being sent to the server.

63
00:03:21,500 --> 00:03:25,510
So therefore, let's first of all expo install

64
00:03:25,510 --> 00:03:30,510
the expo-notifications package and also expo-permissions.

65
00:03:32,130 --> 00:03:34,360
And then let's use both just as we learned it

66
00:03:34,360 --> 00:03:36,583
over the lectures in this module.

67
00:03:38,860 --> 00:03:42,140
So with that installed, here in create product,

68
00:03:42,140 --> 00:03:44,283
before we do anything else,

69
00:03:45,140 --> 00:03:48,290
we wanna use the notifications API.

70
00:03:48,290 --> 00:03:53,290
And for that we have to import everything as notifications

71
00:03:54,670 --> 00:03:58,770
from expo-notifications.

72
00:03:58,770 --> 00:04:02,810
And let's also already import everything as permissions

73
00:04:02,810 --> 00:04:05,400
from expo-permissions.

74
00:04:05,400 --> 00:04:08,200
And with these two APIs imported,

75
00:04:08,200 --> 00:04:11,920
in createProduct we can use notifications

76
00:04:11,920 --> 00:04:14,720
to get our ExpoPushToken.

77
00:04:15,750 --> 00:04:18,920
However, as you know, we don't directly wanna do that.

78
00:04:18,920 --> 00:04:23,210
Instead we first of all wanna check the permission status.

79
00:04:23,210 --> 00:04:27,890
So we should use permissions and get the information

80
00:04:27,890 --> 00:04:31,100
about the notifications permission.

81
00:04:31,100 --> 00:04:32,370
This returns a promise,

82
00:04:32,370 --> 00:04:34,690
and since we're in the async function here,

83
00:04:34,690 --> 00:04:36,820
we can simply await it.

84
00:04:36,820 --> 00:04:39,393
Now what we'll get back is that statusObj

85
00:04:40,450 --> 00:04:42,620
which has that status property

86
00:04:42,620 --> 00:04:46,770
that tells us whether a permission was granted or not.

87
00:04:46,770 --> 00:04:51,770
So we can check if statusObj.status is maybe not granted,

88
00:04:53,620 --> 00:04:56,720
which means we are not having permissions yet,

89
00:04:56,720 --> 00:04:59,340
then we wanna use the permissions API again

90
00:04:59,340 --> 00:05:04,340
to ask for the notifications permission with this code.

91
00:05:04,740 --> 00:05:06,750
And that's all just what we had before,

92
00:05:06,750 --> 00:05:09,960
now just with asyn await, instead of then.

93
00:05:09,960 --> 00:05:12,500
But other than that, it's the same.

94
00:05:12,500 --> 00:05:15,697
And here we'll again get our statusObj.

95
00:05:18,740 --> 00:05:21,000
Now, since we would have a name clash here,

96
00:05:21,000 --> 00:05:23,753
I'll name this here: updatedStatusObj.

97
00:05:25,846 --> 00:05:27,480
And of course, here we should also await,

98
00:05:27,480 --> 00:05:31,820
because that is asynchronous and it returns a promise.

99
00:05:31,820 --> 00:05:33,720
So, at this point of time here,

100
00:05:33,720 --> 00:05:37,097
we can now check if updatedStatusObj

101
00:05:38,920 --> 00:05:42,860
has a status that's not equal to granted.

102
00:05:42,860 --> 00:05:45,780
And if that's the case, we know we won't be able to

103
00:05:45,780 --> 00:05:48,083
send push notifications.

104
00:05:50,140 --> 00:05:52,350
And that is absolutely fine.

105
00:05:52,350 --> 00:05:56,830
I will simply create a token variable here,

106
00:05:56,830 --> 00:06:01,240
and set token equal to null here to make it very clear

107
00:06:01,240 --> 00:06:03,330
that we simply don't have a token here.

108
00:06:03,330 --> 00:06:05,170
Actually, let's not name it token,

109
00:06:05,170 --> 00:06:06,940
because we already used that name.

110
00:06:06,940 --> 00:06:10,060
Let's name it pushToken, because that is what

111
00:06:10,060 --> 00:06:12,040
we wanna retrieve in the end.

112
00:06:12,040 --> 00:06:13,270
So, we set this to null here.

113
00:06:13,270 --> 00:06:15,930
If we absolutely didn't get permission,

114
00:06:15,930 --> 00:06:18,350
because there is nothing we can do in that case,

115
00:06:18,350 --> 00:06:20,320
because we then just don't have permission

116
00:06:20,320 --> 00:06:22,030
to send push notifications.

117
00:06:22,030 --> 00:06:23,233
It is what it is.

118
00:06:24,200 --> 00:06:27,950
But in the else case, that this is granted,

119
00:06:27,950 --> 00:06:32,070
in that case we can set our pushToken equal to

120
00:06:32,070 --> 00:06:36,800
notifications.getExpoPushTokenAsync.

121
00:06:36,800 --> 00:06:38,780
And of course, that's a promise.

122
00:06:38,780 --> 00:06:40,710
So we should await this.

123
00:06:40,710 --> 00:06:44,540
And of course, we don't directly get the token,

124
00:06:44,540 --> 00:06:47,080
instead we get an object which has a data field,

125
00:06:47,080 --> 00:06:51,040
if you recall, and so we could wrap this here into brackets

126
00:06:51,040 --> 00:06:53,000
and call data on that.

127
00:06:53,000 --> 00:06:54,690
That simply means that first of all

128
00:06:54,690 --> 00:06:56,170
this promise is resolved,

129
00:06:56,170 --> 00:06:58,800
then we call data on the resolved object

130
00:06:58,800 --> 00:07:02,450
after we awaited the promise, hence the value in data,

131
00:07:02,450 --> 00:07:05,670
which we then store in the pushToken variable.

132
00:07:05,670 --> 00:07:09,320
So here we'll have our pushToken, which we need.

133
00:07:09,320 --> 00:07:12,350
Now, when we have that, we can continue.

134
00:07:12,350 --> 00:07:15,290
And since we use await, this code will only execute

135
00:07:15,290 --> 00:07:17,130
once that all finished.

136
00:07:17,130 --> 00:07:19,570
This line, of course, should be removed now.

137
00:07:19,570 --> 00:07:22,730
And now, with the data we sent to the server,

138
00:07:22,730 --> 00:07:26,700
we don't just send the title, description, the ownerId,

139
00:07:26,700 --> 00:07:28,763
but also the ownerPushToken.

140
00:07:29,750 --> 00:07:32,033
And that will be our pushToken here.

141
00:07:34,430 --> 00:07:39,173
And that's either null, or it is our token we got from expo.

142
00:07:40,830 --> 00:07:43,180
So now, whenever we create a new product,

143
00:07:43,180 --> 00:07:48,150
ideally we're able to send our pushToken along.

144
00:07:48,150 --> 00:07:50,490
Now getting that token and all of that

145
00:07:50,490 --> 00:07:53,430
won't work on simulators, as you learned.

146
00:07:53,430 --> 00:07:56,020
So therefore, I'll save this and again test this

147
00:07:56,020 --> 00:07:57,870
on my real iPhone.

148
00:07:57,870 --> 00:08:00,750
So again, I got my app booting up here,

149
00:08:00,750 --> 00:08:03,470
and I just logged in with the user we created.

150
00:08:03,470 --> 00:08:07,440
And now, under Admin, I will create a new product.

151
00:08:07,440 --> 00:08:11,500
A Push Token Test.

152
00:08:17,520 --> 00:08:19,723
Now we need a Image Url.

153
00:08:21,370 --> 00:08:24,500
And I just grabbed some random image.

154
00:08:24,500 --> 00:08:28,493
And I'll enter a price here and a description.

155
00:08:30,500 --> 00:08:31,560
And confirm this.

156
00:08:31,560 --> 00:08:36,030
And I'm getting an error that updatedStatusObj wasn't found.

157
00:08:36,030 --> 00:08:39,910
And that makes sense, because actually I'm setting this here

158
00:08:39,910 --> 00:08:42,690
in this if check, but then I'm using it outside

159
00:08:42,690 --> 00:08:45,640
of this if check, so of course this has the wrong scope.

160
00:08:45,640 --> 00:08:47,800
Little oversight from my side.

161
00:08:47,800 --> 00:08:50,640
We can fix this by actually reusing statusObj

162
00:08:50,640 --> 00:08:54,830
up here instead by turning it into a variable with let.

163
00:08:54,830 --> 00:08:59,470
Then here we simply set our statusObj to a new value

164
00:08:59,470 --> 00:09:03,340
and then we use statusObj again here in this if check.

165
00:09:03,340 --> 00:09:05,713
Now the scope is right and this will work.

166
00:09:07,930 --> 00:09:09,253
So let's try this again.

167
00:09:10,860 --> 00:09:15,300
A push test.

168
00:09:15,300 --> 00:09:17,590
Insert that image which I picked.

169
00:09:17,590 --> 00:09:21,330
Insert a price and a description.

170
00:09:21,330 --> 00:09:24,420
This is a test.

171
00:09:24,420 --> 00:09:26,810
Then close this, confirm this.

172
00:09:26,810 --> 00:09:28,470
And now this seems to work.

173
00:09:28,470 --> 00:09:29,923
I added my product.

174
00:09:30,760 --> 00:09:34,980
And what will be interesting now is our database.

175
00:09:34,980 --> 00:09:38,840
Here's my Firebase database, so the backend we're using.

176
00:09:38,840 --> 00:09:41,120
And a new product was added here.

177
00:09:41,120 --> 00:09:44,120
And indeed, here we see our PushToken.

178
00:09:44,120 --> 00:09:47,910
Again, I added an overlay over my actual device token,

179
00:09:47,910 --> 00:09:50,340
but this is now a push token which allows us

180
00:09:50,340 --> 00:09:55,340
to send a notification to the user who created this product.

181
00:09:55,490 --> 00:09:58,170
So now, let's work on that other part

182
00:09:58,170 --> 00:10:01,840
and let's make sure that we indeed do send a notification

183
00:10:01,840 --> 00:10:04,623
once we actually order a product.