1
00:00:00,630 --> 00:00:04,890
In the last section I had mentioned that we would move onto the client side but before we do there's

2
00:00:04,890 --> 00:00:11,850
just one last little task that I think we need to take care of inside of our survey template file which

3
00:00:11,850 --> 00:00:15,030
is inside these services email templates directory.

4
00:00:15,060 --> 00:00:21,420
You'll recall that we are currently directing any users who click on the yes or no button to localhost

5
00:00:21,480 --> 00:00:22,750
3000.

6
00:00:22,770 --> 00:00:25,600
Now this approach is working out just fine with development.

7
00:00:25,830 --> 00:00:31,180
But obviously when we go to production sending a user to local 3000 is going to be pretty bad.

8
00:00:31,210 --> 00:00:34,040
And it's just going to show a user error on the screen.

9
00:00:34,050 --> 00:00:35,750
Definitely not ideal.

10
00:00:35,850 --> 00:00:40,510
So we need to make sure that whenever a user clicks on this link right here they are being sent to an

11
00:00:40,510 --> 00:00:45,480
appropriate domain based on whether or not we are in production or development.

12
00:00:45,480 --> 00:00:52,150
So in development you know maybe a local is 3000 is appropriate in production maybe email dot com or

13
00:00:52,150 --> 00:00:54,720
our production domain is appropriate.

14
00:00:54,750 --> 00:00:57,190
It's really up to us to decide what's best.

15
00:00:57,360 --> 00:01:04,950
Now in the past when we spoke about domains especially around links like this inside of the client side

16
00:01:04,950 --> 00:01:10,290
of our application we had said many times hey we don't want to specify the domain at all.

17
00:01:10,290 --> 00:01:14,820
We want to just put in like a relative path to something and say That's it.

18
00:01:14,820 --> 00:01:17,270
Let the browser figure out what's going on.

19
00:01:17,280 --> 00:01:24,190
However remember that this email right here is going to be rendered inside of a user's e-mail inbox.

20
00:01:24,300 --> 00:01:28,160
And so in an e-mail inbox we can't rely upon relative links.

21
00:01:28,350 --> 00:01:34,890
If we do something like you know slash surveys or whatever it might be if the user clicks on this link

22
00:01:35,220 --> 00:01:42,660
they will be sent to slash surveys on their current domain which might be Gmail or something like that

23
00:01:42,690 --> 00:01:44,760
or MSM email with Hotmail.

24
00:01:44,760 --> 00:01:45,590
People still use that.

25
00:01:45,600 --> 00:01:46,410
I don't know.

26
00:01:46,650 --> 00:01:48,630
So we can use relative links here.

27
00:01:48,630 --> 00:01:52,200
We have to use a very definite domain.

28
00:01:52,840 --> 00:01:53,240
OK.

29
00:01:53,250 --> 00:01:54,870
So there's really two ways we can do this.

30
00:01:54,990 --> 00:02:02,940
We can either add a key to our config file inside the Devyn prod J.S. files and say hey here's the domain

31
00:02:02,940 --> 00:02:09,330
that we should use or we can just specify the domain directly inside of our survey template file.

32
00:02:09,330 --> 00:02:13,860
I think that it's probably a little bit more elegant to place it inside of our keys file inside the

33
00:02:13,860 --> 00:02:18,630
config directory so that even though we're talking about this thing and referring to them as keys they're

34
00:02:18,630 --> 00:02:22,930
still specifying all of our high level of configuration inside of our app.

35
00:02:23,070 --> 00:02:29,550
So we're going to add a little bit configuration to Devon Prod. and we'll make sure that we correctly

36
00:02:29,550 --> 00:02:34,480
specify what domain the user should go to after clicking on yes or no.

37
00:02:34,860 --> 00:02:37,130
So let's first go over to dev.

38
00:02:37,230 --> 00:02:39,360
I'm going to add a new key onto this thing.

39
00:02:39,360 --> 00:02:46,150
Make sure you get to come on the line above it and we'll Abdus we'll call it out like domain.

40
00:02:46,200 --> 00:02:47,380
I think that works.

41
00:02:48,390 --> 00:02:50,110
RC Well let's call it redirect domain

42
00:02:53,860 --> 00:02:55,450
Yeah it's appropriate.

43
00:02:55,630 --> 00:03:00,250
So we'll say that whenever a user clicks on the link while in development mode we're going to send them

44
00:03:00,250 --> 00:03:03,700
to local host Colin 3000.

45
00:03:05,410 --> 00:03:08,880
We will then specify the same thing over on the prod file as well.

46
00:03:09,090 --> 00:03:14,790
So here's my project file and we'll call this one redirect domain.

47
00:03:14,820 --> 00:03:19,830
Make sure you to come on the line right above it and then in this case it would definitely be nice to

48
00:03:19,830 --> 00:03:25,290
have it on Heroku as well because Heroku really is what really knows our current domain.

49
00:03:25,290 --> 00:03:29,920
So I think that makes a reasonable amount of sense to put the environment variable up there as well.

50
00:03:29,940 --> 00:03:32,720
Specifying what the redirect domain should be.

51
00:03:32,760 --> 00:03:37,830
Even though it's not really a protected key or anything like that around our application.

52
00:03:37,830 --> 00:03:40,160
So let's open up our Heroku dashboard.

53
00:03:40,160 --> 00:03:45,970
One more time we'll go to Heroku dot com.

54
00:03:45,980 --> 00:03:47,340
We'll open up our application

55
00:03:51,850 --> 00:03:58,480
plough pull open settings so your settings right here reveal config variables and we just call this

56
00:03:58,480 --> 00:04:00,080
property redirect domain.

57
00:04:00,080 --> 00:04:08,200
So we'll say redirect domain and then we're going to specify the domain that we want to send a user

58
00:04:08,200 --> 00:04:08,980
to.

59
00:04:08,980 --> 00:04:14,890
So the domain is going to be slightly different for you versus me because obviously inside of my production

60
00:04:14,890 --> 00:04:19,840
environment I want to send the user to adj I'll buy you Roku app dot com.

61
00:04:19,840 --> 00:04:21,470
Remember that's the name of my app.

62
00:04:21,610 --> 00:04:24,960
So you're going to want to use whatever your application name is.

63
00:04:25,330 --> 00:04:27,250
But you do definitely want to get a link to it.

64
00:04:27,250 --> 00:04:33,100
So inside a new tab I'm going to just manually navigate over to you and I'll buy you a copy of this

65
00:04:33,100 --> 00:04:35,730
thing and put it in as my value.

66
00:04:35,860 --> 00:04:42,850
So again for this value right here you really just want to use the root domain of your particular Heroku

67
00:04:42,850 --> 00:04:43,670
app.

68
00:04:44,140 --> 00:04:44,410
OK.

69
00:04:44,410 --> 00:04:45,180
So here it is.

70
00:04:45,200 --> 00:04:48,430
Look at it and we're good to go.

71
00:04:48,640 --> 00:04:53,980
Now the last step is to make sure that we wire that up inside of our actual loops.

72
00:04:53,980 --> 00:04:58,040
Let's take care of specifying the environment variable in the project file.

73
00:04:58,330 --> 00:05:04,530
So will say process EMV dot redirect domain

74
00:05:07,370 --> 00:05:13,040
then we can go over to our survey template file will import the keys file at the top so will say Consta

75
00:05:13,040 --> 00:05:18,700
keys is require up one directory up another directory because remember we're nested.

76
00:05:18,700 --> 00:05:21,160
Now we're inside of email templates.

77
00:05:21,170 --> 00:05:29,480
We'll then go into config slash keys and now rather than just redirecting the user to local hosta 2000

78
00:05:30,080 --> 00:05:34,170
we are going to delete that link or delete that domain.

79
00:05:34,580 --> 00:05:39,560
I'm going to leave behind the double quotes because we still want to double quotes but we will use a

80
00:05:39,560 --> 00:05:43,360
little bit of E.S. six string interpellation syntax.

81
00:05:43,490 --> 00:05:52,040
So put down the dollar sign and the curly braces and say keys dot redirect Domingue keys dot redirect

82
00:05:52,490 --> 00:06:00,630
Domingue and it will do the same thing for no as well so keys dot redirect dummy.

83
00:06:01,000 --> 00:06:02,040
OK.

84
00:06:02,870 --> 00:06:08,390
Now the last thing I want to mention here very last thing we can test this out inside the browser at

85
00:06:08,390 --> 00:06:10,660
this point if we sent ourselves a new e-mail.

86
00:06:10,700 --> 00:06:11,130
Right.

87
00:06:11,240 --> 00:06:15,560
But I think you know as well as I it's probably going to work just fine and it's probably going to kick

88
00:06:15,560 --> 00:06:19,450
us back to the re-act application depending upon the environment that we're in.

89
00:06:19,490 --> 00:06:22,000
So we can kind of just assume that's going to do the right thing.

90
00:06:22,310 --> 00:06:23,980
But here's the thing.

91
00:06:24,080 --> 00:06:31,040
When a user gets get kicked back to the re-act application that's kind of a weird flow for our users

92
00:06:31,520 --> 00:06:35,840
like the end user or the person receiving these survey emails.

93
00:06:35,840 --> 00:06:40,820
Imagine if some company that you just were working with sends you one of these feedback emails and they

94
00:06:40,820 --> 00:06:46,010
say hey give us some input and then you click on one of these buttons and then it kicks you over to

95
00:06:46,280 --> 00:06:46,820
e-mail.

96
00:06:46,870 --> 00:06:48,180
Dotcom Why.

97
00:06:48,190 --> 00:06:50,180
Why am I here like this doesn't make any sense.

98
00:06:50,180 --> 00:06:50,690
Why am I here.

99
00:06:50,690 --> 00:06:52,940
I thought I was just trying to get some feedback.

100
00:06:52,930 --> 00:06:54,380
I clicked on yes.

101
00:06:54,500 --> 00:07:01,610
And so in reality rather than sending a user back to the root of our application and showing them the

102
00:07:01,670 --> 00:07:07,310
landing page of our app I think that it might be a lot more appropriate to put together some type of

103
00:07:07,340 --> 00:07:13,370
custom route handler and just give the user a very quick message that says Hey thanks so much for giving

104
00:07:13,370 --> 00:07:14,170
us your feedback.

105
00:07:14,170 --> 00:07:19,730
You know or whatever we might want to say so we can take care of that really really quickly.

106
00:07:19,730 --> 00:07:24,720
Very straightforward inside of the template right here.

107
00:07:24,830 --> 00:07:32,630
Let's say that we're going to put together a new route inside of our routes survey routes file.

108
00:07:32,630 --> 00:07:33,860
Let's do that right now.

109
00:07:34,010 --> 00:07:39,700
Inside of the survey routes file above our existing one for opt out post API surveys.

110
00:07:39,710 --> 00:07:44,270
Let's just add an account called something like apt get on our own.

111
00:07:44,270 --> 00:07:48,820
We can still call it API surveys even though it's not quite a survey thing.

112
00:07:48,980 --> 00:07:54,740
We'll take the incoming request and the response and then we'll just send back our message to the user

113
00:07:54,740 --> 00:07:58,790
that says Hey thanks so much for voting so we'll say redstart sent.

114
00:07:58,880 --> 00:07:59,690
Thanks for

115
00:08:02,340 --> 00:08:06,160
for voting.

116
00:08:06,330 --> 00:08:10,460
So right now it's got still a get request to API slash surveys.

117
00:08:10,560 --> 00:08:14,900
We might want to use this route for when we fetched a list of all of our surveys in the future.

118
00:08:14,940 --> 00:08:21,510
So rather than saying just API slash surveys I think that we could probably do something like API surveys.

119
00:08:21,540 --> 00:08:22,520
Thanks.

120
00:08:22,590 --> 00:08:24,710
I mean that'll work out just fine.

121
00:08:24,720 --> 00:08:31,350
So now back inside of our template file when we create this H.F. right here we'll take the redirect

122
00:08:31,350 --> 00:08:33,650
domain and then immediately after it.

123
00:08:33,720 --> 00:08:42,420
So now outside of the curly braces we'll say slash API surveys things like so and we'll update both

124
00:08:42,420 --> 00:08:45,000
of them with that API surveys.

125
00:08:45,270 --> 00:08:46,650
Thanks.

126
00:08:46,650 --> 00:08:48,460
OK time to test this out.

127
00:08:48,600 --> 00:08:51,840
So make sure that we don't have any typos by checking my server.

128
00:08:51,840 --> 00:08:53,360
Everything looks good.

129
00:08:53,550 --> 00:08:56,640
Now flip on over to my re-act application.

130
00:08:56,640 --> 00:09:03,480
I should be able to just do another up arrow and send it like so that should give me a second survey

131
00:09:03,480 --> 00:09:04,280
request.

132
00:09:04,500 --> 00:09:05,230
OK looks good.

133
00:09:05,230 --> 00:09:07,110
I'm now down to eight credits here.

134
00:09:07,400 --> 00:09:12,090
And if I go back over to my e-mail here's the new message I'll show it.

135
00:09:12,090 --> 00:09:14,810
It gets collapsed because it's identical to my other ones.

136
00:09:14,860 --> 00:09:18,510
And now if I click on one of the buttons I see the nice message.

137
00:09:18,510 --> 00:09:19,630
Thanks for voting.

138
00:09:19,620 --> 00:09:26,340
And so obviously you know yeah we should really probably like polished this page up a lot more than

139
00:09:26,340 --> 00:09:27,270
it is right now.

140
00:09:27,390 --> 00:09:32,940
But you can very easily imagine that you could really add in a tremendous amount of markup to the request

141
00:09:32,940 --> 00:09:37,680
handler handler that we just added to make sure that the user feels a little bit more appreciated and

142
00:09:37,740 --> 00:09:40,590
just say to them Hey thanks this really means a lot to us.

143
00:09:40,590 --> 00:09:44,250
Whatever else you might want to say as a toll side topic.

144
00:09:44,250 --> 00:09:50,220
Just in the context of the course still one other way that you could go with this is to say that whenever

145
00:09:50,580 --> 00:09:52,440
someone creates a new survey.

146
00:09:52,500 --> 00:09:56,460
So one of our direct users like the startup owner creates a survey.

147
00:09:56,460 --> 00:10:04,110
Maybe they should also have to provide a route or a link or a u r l to send the user to after they have

148
00:10:04,110 --> 00:10:04,760
voted.

149
00:10:05,010 --> 00:10:10,920
So maybe we would say that whenever you create a new survey we should also take an additional property

150
00:10:10,950 --> 00:10:17,280
called like redirect you are l and so every single individual survey can say hey if someone votes that

151
00:10:17,280 --> 00:10:19,990
they liked us or they didn't like us go send them.

152
00:10:20,070 --> 00:10:26,340
Send them over to some custom you are l that says you know maybe it's just customized for a very particular

153
00:10:26,430 --> 00:10:32,160
user who is using our application and make sure that if someone says hey I like your application and

154
00:10:32,160 --> 00:10:34,090
they click on yes or no I don't.

155
00:10:34,200 --> 00:10:38,780
They get sent to some appropriate page that says hey sorry you didn't like our stuff.

156
00:10:38,970 --> 00:10:42,010
Here's how we can make it better or you know whatever else.

157
00:10:42,030 --> 00:10:46,290
So this would be a great place where if you want to come back and do a little bit of extra work to really

158
00:10:46,350 --> 00:10:49,390
amp up this product that would be a great place to get started.

159
00:10:49,590 --> 00:10:50,850
So a side topic.

160
00:10:51,330 --> 00:10:51,930
OK.

161
00:10:52,170 --> 00:10:55,900
So I think that's about it for creating surveys on the back end.

162
00:10:55,920 --> 00:11:00,300
I can't imagine a single other thing that we need to do right now at this point.

163
00:11:00,300 --> 00:11:01,110
We'll take a break.

164
00:11:01,110 --> 00:11:05,760
We'll then continue in the next section and start working on the front end of our application where

165
00:11:05,760 --> 00:11:10,180
we need to make sure that users have the ability to create a new survey.

166
00:11:10,230 --> 00:11:12,470
So I'll see you in just a minute.