1
00:00:00,700 --> 00:00:05,260
In the last section we finished up our entire deployment deployment process so we know how to handle

2
00:00:05,260 --> 00:00:06,330
first time deployment.

3
00:00:06,340 --> 00:00:11,410
That is the very first time that we deploy our application and set up the Heroku environment and then

4
00:00:11,410 --> 00:00:16,170
we know how to do subsequent deploys in the future after we make some change to our application.

5
00:00:16,180 --> 00:00:20,530
Now one last thing I want to say about that process you might be looking at the you are right here and

6
00:00:20,530 --> 00:00:25,630
saying Stephen I really want to have a custom mural like I want to have my own domain name.

7
00:00:25,810 --> 00:00:28,020
That is something that we'll talk about later on in the course.

8
00:00:28,030 --> 00:00:33,190
But right now I wanted to see was this default domain rather than getting super off topic.

9
00:00:33,610 --> 00:00:37,240
So let's talk about the next feature we're going to be working on.

10
00:00:37,480 --> 00:00:41,910
I'm going to change back to one of the diagrams that we looked at much earlier in the course.

11
00:00:42,010 --> 00:00:46,370
So remember this was the flow that we had said that a user would go through when they first come to

12
00:00:46,370 --> 00:00:53,240
our application and step one right there at the top user signs up to our application via Google Earth.

13
00:00:53,290 --> 00:00:57,330
And so that's going to be the first feature that we work on in our application.

14
00:00:57,790 --> 00:01:00,790
Now this is going to be an entirely server side feature.

15
00:01:00,820 --> 00:01:03,760
So you will notice that we have not yet done anything with react.

16
00:01:03,760 --> 00:01:05,240
We haven't done anything with redox.

17
00:01:05,290 --> 00:01:10,840
We're going to stay on the server as long as possible just so we can kind of you know say okay we're

18
00:01:10,840 --> 00:01:15,310
kind of doing this one thing at a time rather than changing very quickly from the back end to the front

19
00:01:15,310 --> 00:01:18,030
end which would probably lead to a lot of confusion.

20
00:01:18,040 --> 00:01:23,650
And of course like this now before we actually start this feature I'm going to tell you right now we

21
00:01:23,650 --> 00:01:31,510
are really without a doubt no two ways about it diving headfirst into the most challenging feature of

22
00:01:31,510 --> 00:01:32,800
this application.

23
00:01:32,800 --> 00:01:34,430
This old stuff right here.

24
00:01:34,540 --> 00:01:38,280
This is going to be the hardest stuff in the course.

25
00:01:38,380 --> 00:01:39,400
No two ways about it.

26
00:01:39,400 --> 00:01:42,010
I completely guarantee it.

27
00:01:42,070 --> 00:01:45,670
Now that might sound well I imagine it does sound intimidating.

28
00:01:45,670 --> 00:01:50,500
I mean hey what can I say probably sounds intimidating but I can tell you that we're going to learn

29
00:01:50,560 --> 00:01:52,150
a ton during the process.

30
00:01:52,150 --> 00:01:55,720
It's going to be a lot of fun and we're going to learn a lot of skills that you're going to be able

31
00:01:55,720 --> 00:01:59,870
to translate directly over to your own personal projects.

32
00:01:59,890 --> 00:02:05,620
So everything that we do inside of this step right here is a 100 percent transferable to any project

33
00:02:05,650 --> 00:02:07,660
that you're going to work on yourself.

34
00:02:07,660 --> 00:02:12,940
Now later on in the course we're going to start doing some like very application specific logic around

35
00:02:12,970 --> 00:02:17,770
you know handling campaigns and whatnot and all that kind of stuff you know show and reports and stuff

36
00:02:18,100 --> 00:02:21,500
and all that stuff is very specific to this app that we're building.

37
00:02:21,580 --> 00:02:24,450
And so you're going to learn a lot during that phase.

38
00:02:24,580 --> 00:02:29,390
But it's all going to be kind of tailored around this app that I dreamed up Google.

39
00:02:29,410 --> 00:02:34,360
However again this is something you can use it anywhere you'll use it on your job you'll use it on personal

40
00:02:34,360 --> 00:02:35,700
projects everywhere.

41
00:02:35,770 --> 00:02:40,300
So it very much is worth kind of taking some of this up front difficulty because you're really going

42
00:02:40,300 --> 00:02:42,430
to pick up a lot during it.

43
00:02:42,430 --> 00:02:42,690
OK.

44
00:02:42,700 --> 00:02:45,910
So that's kind of my my pep talk so to speak.

45
00:02:45,910 --> 00:02:48,310
You know it's can be challenging but I have to say that we're going to learn a lot.

46
00:02:48,310 --> 00:02:52,240
That's a pep talk that's going to be you know it hopefully keeps you engaged and going along for a little

47
00:02:52,240 --> 00:02:53,070
bit here.

48
00:02:53,110 --> 00:02:57,480
So let's start diving into this feature in talking about what it's really going to take and how are

49
00:02:57,480 --> 00:02:59,610
we going to tackle it.

50
00:02:59,620 --> 00:03:04,370
So the first thing I want to do when we're talking about Google last year is what is off.

51
00:03:04,390 --> 00:03:06,520
Right like what is this really doing for us.

52
00:03:06,520 --> 00:03:12,100
Well just to be clear at the end of the day what we want to have is essentially a button that looks

53
00:03:12,100 --> 00:03:12,870
like this.

54
00:03:13,030 --> 00:03:14,980
So right now I'm just on Google Images.

55
00:03:15,250 --> 00:03:19,010
I just looked up a random signing with Google but I'm positive.

56
00:03:19,030 --> 00:03:23,470
Without a doubt you've seen a button like this in the past on some other Web sites something and says

57
00:03:23,800 --> 00:03:28,210
signing with Google or sign up with Google something and says you know just you don't have to make your

58
00:03:28,210 --> 00:03:32,650
own e-mail and password on this Web site just use your Google account to sign in.

59
00:03:32,650 --> 00:03:38,590
You've probably also seen something very similar like this that says log in with Facebook or maybe you

60
00:03:38,590 --> 00:03:44,830
know log in with Twitter logon with just about anything log in with get log in with Linked In.

61
00:03:44,830 --> 00:03:49,090
These are all log in or off authentication systems.

62
00:03:49,090 --> 00:03:55,590
So they are all systems that use the O off protocol under the hood or the auth authentication standard.

63
00:03:55,660 --> 00:03:59,280
And so that's what we're going to be using inside of our application.

64
00:03:59,380 --> 00:04:05,410
Now I don't necessarily have a great reason for using a cloth over e-mail and password combinations.

65
00:04:05,410 --> 00:04:10,090
Really I just wanted I figure that chances are if you're taking the course you probably want to hear

66
00:04:10,090 --> 00:04:15,880
about a lot as opposed to email and password stuff which is you know at this point kind of legacy and

67
00:04:15,880 --> 00:04:17,800
not tremendously popular anymore.

68
00:04:17,830 --> 00:04:21,820
If anything it kind of provides friction to your users to sign up to you're out.

69
00:04:21,820 --> 00:04:27,990
So in general I do kind of recommend you use cloth in general for your own personal applications.

70
00:04:28,020 --> 00:04:33,050
There's just a much better chance your users are actually going to sign in and enjoy your service.

71
00:04:33,050 --> 00:04:34,620
Let's be honest.

72
00:04:34,650 --> 00:04:35,180
OK.

73
00:04:35,680 --> 00:04:37,000
So sign with Google.

74
00:04:37,000 --> 00:04:38,870
That's the end result that's we want to get to.

75
00:04:38,890 --> 00:04:44,520
Now the problem is that the flow or the path to get there and make this thing a reality is madness.

76
00:04:44,590 --> 00:04:46,200
So I'm going to show you a diagram.

77
00:04:46,360 --> 00:04:48,430
You're going to hate me when I show it to you.

78
00:04:48,430 --> 00:04:50,680
You're not going to like me.

79
00:04:51,430 --> 00:04:53,430
So here it is.

80
00:04:53,830 --> 00:04:55,520
So here's the diagram.

81
00:04:55,540 --> 00:04:58,270
This is the entire flow.

82
00:04:58,330 --> 00:04:59,790
Let me get the right zoom level here.

83
00:04:59,890 --> 00:05:00,420
There we go.

84
00:05:00,520 --> 00:05:06,340
So this is the entire flow that we are going to implement to get Google off to work with our application

85
00:05:08,010 --> 00:05:10,340
many steps a lot of stuff going on.

86
00:05:10,740 --> 00:05:15,060
Yes it is confusing like I said this is not going to be a walk in the park but we're going to do it

87
00:05:15,090 --> 00:05:17,680
all from scratch as much as possible.

88
00:05:17,820 --> 00:05:23,010
And you're going to learn a ton about how Express works you're going to learn about how Mongo works.

89
00:05:23,010 --> 00:05:28,950
Mongo D.B and a lot of associated technologies around the way so we're not going to go through this

90
00:05:28,950 --> 00:05:30,500
flow right now.

91
00:05:30,510 --> 00:05:32,840
We'll take a pause right now in the next section.

92
00:05:32,850 --> 00:05:36,680
We're going to start working through this flow a little bit and then we're just going to tackle like

93
00:05:36,690 --> 00:05:39,130
the first couple of steps in general.

94
00:05:39,150 --> 00:05:43,860
Maybe we'll go through the first thing we'll see and then continue after that we'll start to actually

95
00:05:44,190 --> 00:05:46,470
implement this thing on our server side code base.

96
00:05:46,470 --> 00:05:50,530
So let's take a quick break and we'll start to dive into this flow in the next section.