Instructor: Now let's apply what we learned 2 2
over the last lectures in our shop project 3 3
we built throughout this course. 4 4
Here, I got that project with React Navigation 5 integrated. 5 5
So after this other section where I show 6 6
how to upgrade to React Navigation 5. 7 7
And I haven't changed anything else. 8 8
So this is the app as we know it, running on the simulators. 9 9
And there we can, of course, create an account 10 10
with some credentials here. 11 11
First of all, I need to sign up. 12 12
And now here, we can add products and so on. 13 13
Now, my idea is that when we add a product here, 14 14
we actually don't just store the product 15 15
with all the data we're uploading thus far. 16 16
At the moment, when we create a product, 17 17
we are sharing title, description, imageUrl, 18 18
price and ownerId. 19 19
But instead, besides sharing all of that, 20 20
I also want to add the push token of the device 21 21
of the user who added this product. 22 22
So the push token of the seller, 23 23
I wanna add that to the product as well. 24 24
Why? 25 25
So that when we fetch the product data, 26 26
we can also download the push token 27 27
that belongs to a product. 28 28
And whilst we won't show this to the other users, 29 29
we'll use it in code to ensure that when an order is placed, 30 30
when we add an order, we don't just store that order data 31 31
in the database, but we also send a push notification 32 32
to the owner of the product that was just ordered, 33 33
letting him or her know that the product was ordered. 34 34
That's my idea here. 35 35
That of course means that we'll have to analyze the items 36 36
that are in the cart. 37 37
And then we'll send a push notification 38 38
for every product, basically. 39 39
That's my idea. 40 40
So, for that to ensure this works, 41 41
we first of all need to prepare this project 42 42
for push notifications. 43 43
That means that we first of all should go to app.json 44 44
and add that android entry here 45 45
where we set useNextNotificationsApi to true. 46 46
That's what I showed you before 47 47
in the other lectures as well. 48 48
We also need to ask the user for permission. 49 49
So, the question is where we wanna do that, of course. 50 50
Since it's the creator of a product 51 51
who should receive push notifications, 52 52
I will ask for permission right before we create 53 53
a new product. 54 54
So, we have our user, our EditProductScreen, 55 55
where we create a new product. 56 56
And there, in the end, we trigger an action. 57 57
In the products.js file here 58 58
we'll trigger this createProduct action. 59 59
And now my idea is that I ask for permission here, 60 60
I then also fetch the token here 61 61
and then we can add the token to the outgoing data 62 62
that's being sent to the server. 63 63
So therefore, let's first of all expo install 64 64
the expo-notifications package and also expo-permissions. 65 65
And then let's use both just as we learned it 66 66
over the lectures in this module. 67 67
So with that installed, here in create product, 68 68
before we do anything else, 69 69
we wanna use the notifications API. 70 70
And for that we have to import everything as notifications 71 71
from expo-notifications. 72 72
And let's also already import everything as permissions 73 73
from expo-permissions. 74 74
And with these two APIs imported, 75 75
in createProduct we can use notifications 76 76
to get our ExpoPushToken. 77 77
However, as you know, we don't directly wanna do that. 78 78
Instead we first of all wanna check the permission status. 79 79
So we should use permissions and get the information 80 80
about the notifications permission. 81 81
This returns a promise, 82 82
and since we're in the async function here, 83 83
we can simply await it. 84 84
Now what we'll get back is that statusObj 85 85
which has that status property 86 86
that tells us whether a permission was granted or not. 87 87
So we can check if statusObj.status is maybe not granted, 88 88
which means we are not having permissions yet, 89 89
then we wanna use the permissions API again 90 90
to ask for the notifications permission with this code. 91 91
And that's all just what we had before, 92 92
now just with asyn await, instead of then. 93 93
But other than that, it's the same. 94 94
And here we'll again get our statusObj. 95 95
Now, since we would have a name clash here, 96 96
I'll name this here: updatedStatusObj. 97 97
And of course, here we should also await, 98 98
because that is asynchronous and it returns a promise. 99 99
So, at this point of time here, 100 100
we can now check if updatedStatusObj 101 101
has a status that's not equal to granted. 102 102
And if that's the case, we know we won't be able to 103 103
send push notifications. 104 104
And that is absolutely fine. 105 105
I will simply create a token variable here, 106 106
and set token equal to null here to make it very clear 107 107
that we simply don't have a token here. 108 108
Actually, let's not name it token, 109 109
because we already used that name. 110 110
Let's name it pushToken, because that is what 111 111
we wanna retrieve in the end. 112 112
So, we set this to null here. 113 113
If we absolutely didn't get permission, 114 114
because there is nothing we can do in that case, 115 115
because we then just don't have permission 116 116
to send push notifications. 117 117
It is what it is. 118 118
But in the else case, that this is granted, 119 119
in that case we can set our pushToken equal to 120 120
notifications.getExpoPushTokenAsync. 121 121
And of course, that's a promise. 122 122
So we should await this. 123 123
And of course, we don't directly get the token, 124 124
instead we get an object which has a data field, 125 125
if you recall, and so we could wrap this here into brackets 126 126
and call data on that. 127 127
That simply means that first of all 128 128
this promise is resolved, 129 129
then we call data on the resolved object 130 130
after we awaited the promise, hence the value in data, 131 131
which we then store in the pushToken variable. 132 132
So here we'll have our pushToken, which we need. 133 133
Now, when we have that, we can continue. 134 134
And since we use await, this code will only execute 135 135
once that all finished. 136 136
This line, of course, should be removed now. 137 137
And now, with the data we sent to the server, 138 138
we don't just send the title, description, the ownerId, 139 139
but also the ownerPushToken. 140 140
And that will be our pushToken here. 141 141
And that's either null, or it is our token we got from expo. 142 142
So now, whenever we create a new product, 143 143
ideally we're able to send our pushToken along. 144 144
Now getting that token and all of that 145 145
won't work on simulators, as you learned. 146 146
So therefore, I'll save this and again test this 147 147
on my real iPhone. 148 148
So again, I got my app booting up here, 149 149
and I just logged in with the user we created. 150 150
And now, under Admin, I will create a new product. 151 151
A Push Token Test. 152 152
Now we need a Image Url. 153 153
And I just grabbed some random image. 154 154
And I'll enter a price here and a description. 155 155
And confirm this. 156 156
And I'm getting an error that updatedStatusObj wasn't found. 157 157
And that makes sense, because actually I'm setting this here 158 158
in this if check, but then I'm using it outside 159 159
of this if check, so of course this has the wrong scope. 160 160
Little oversight from my side. 161 161
We can fix this by actually reusing statusObj 162 162
up here instead by turning it into a variable with let. 163 163
Then here we simply set our statusObj to a new value 164 164
and then we use statusObj again here in this if check. 165 165
Now the scope is right and this will work. 166 166
So let's try this again. 167 167
A push test. 168 168
Insert that image which I picked. 169 169
Insert a price and a description. 170 170
This is a test. 171 171
Then close this, confirm this. 172 172
And now this seems to work. 173 173
I added my product. 174 174
And what will be interesting now is our database. 175 175
Here's my Firebase database, so the backend we're using. 176 176
And a new product was added here. 177 177
And indeed, here we see our PushToken. 178 178
Again, I added an overlay over my actual device token, 179 179
but this is now a push token which allows us 180 180
to send a notification to the user who created this product. 181 181
So now, let's work on that other part 182 182
and let's make sure that we indeed do send a notification 183 183
once we actually order a product.