1
00:00:00,180 --> 00:00:04,730
During this project we'll employ a problem
solving methodology known as The 4 P's

2
00:00:04,730 --> 00:00:06,170
of Problem Solving.

3
00:00:06,170 --> 00:00:09,580
First, Preparation, where we understand
the problem and

4
00:00:09,580 --> 00:00:11,050
think of a high level solution.

5
00:00:12,110 --> 00:00:15,190
Second, Plan, where we plan out the
solution.

6
00:00:15,190 --> 00:00:18,650
Third, Perform, where we perform the
actions required for

7
00:00:18,650 --> 00:00:20,360
our proposed solution.

8
00:00:20,360 --> 00:00:23,170
And finally, fourth, we Perfect the
solution.

9
00:00:23,170 --> 00:00:26,980
Perfecting doesn't mean that the projects
will be perfect when we get to the end of

10
00:00:26,980 --> 00:00:31,000
the perfecting stage, but we'll be
incrementally improving the project

11
00:00:31,000 --> 00:00:33,530
with more Preparation, Planning and
Performing.

12
00:00:34,550 --> 00:00:37,430
Once we're done you may want to improve
the project and

13
00:00:37,430 --> 00:00:39,760
perform some of your own perfections.

14
00:00:39,760 --> 00:00:42,840
Let's jump into some preparation and
planning.

15
00:00:42,840 --> 00:00:46,700
Hit the launch work space button
accompanying the video and follow along.

16
00:00:46,700 --> 00:00:48,440
So when you launch a work space,

17
00:00:48,440 --> 00:00:52,820
you should see a panel like this where you
can edit files in here,

18
00:00:52,820 --> 00:00:56,880
you've got your console down here and your
files on the left hand side.

19
00:00:56,880 --> 00:01:01,330
You can even download the files to your
local machine if you would prefer

20
00:01:01,330 --> 00:01:02,550
doing it that way.

21
00:01:02,550 --> 00:01:04,970
But for this course we're gonna be using
work spaces.

22
00:01:04,970 --> 00:01:07,490
We don't need to worry about installing
anything on our machine.

23
00:01:07,490 --> 00:01:10,140
We can just code and get to work.

24
00:01:10,140 --> 00:01:13,555
So we're gonna combine the preparation and
planning phases.

25
00:01:13,555 --> 00:01:18,710
The preparation phase is just taking a
look at all the files and

26
00:01:18,710 --> 00:01:21,340
the tools at our disposal and

27
00:01:21,340 --> 00:01:25,800
seeing if we can figure out what the
problem is and what the solution is.

28
00:01:25,800 --> 00:01:29,080
So let's take a look in our app.js file,
and it's empty, so

29
00:01:29,080 --> 00:01:34,000
this is where we're gonna put the bulk of
our code, I'm gonna just write

30
00:01:34,000 --> 00:01:39,410
a comment saying the problem, and let's do
another comment for solution.

31
00:01:43,620 --> 00:01:44,850
Cool.

32
00:01:44,850 --> 00:01:47,050
And we've got some design files here.

33
00:01:47,050 --> 00:01:52,550
I've actually downloaded these to my local
machine so I can preview them, and

34
00:01:52,550 --> 00:01:57,380
let's take a look in the HTML, index.html,

35
00:01:57,380 --> 00:02:00,590
and as you can see we can type in a
username.

36
00:02:00,590 --> 00:02:02,480
So we can type in waldo.

37
00:02:02,480 --> 00:02:06,070
And click on search, this wouldn't do
anything right now because it's not

38
00:02:06,070 --> 00:02:12,020
a dynamic site, but if we view the page's
source

39
00:02:12,020 --> 00:02:18,121
you can see we've got a form at the bottom
posting to the home location.

40
00:02:20,690 --> 00:02:25,250
And this is what the profile would look
like, we've got a avatar.

41
00:02:25,250 --> 00:02:27,020
We've got the username.

42
00:02:27,020 --> 00:02:31,400
We've got the badges earned, and we've got
the JavaScript points.

43
00:02:31,400 --> 00:02:36,730
So, we would need to somehow populate this
information ourselves dynamically.

44
00:02:40,150 --> 00:02:45,310
And there's an error.HTML file which shows
this error at the top here.

45
00:02:45,310 --> 00:02:49,400
But it, it's got the same contents down
here as the home.

46
00:02:49,400 --> 00:02:53,890
Or the search, so we should bear that in
mind in the future.

47
00:02:53,890 --> 00:02:57,110
So lets take a look back at our files.

48
00:02:57,110 --> 00:03:00,270
We've got an index profile, an example
profile,

49
00:03:00,270 --> 00:03:05,230
sorry, and we can click on the X here just
to get some more space.

50
00:03:05,230 --> 00:03:09,250
We can always show our console again by
clicking on View show.

51
00:03:09,250 --> 00:03:14,240
Console, or hide console to hide it again,
and in here we've got

52
00:03:15,300 --> 00:03:20,775
the var Profile which requires the profile
JS file which is this,

53
00:03:20,775 --> 00:03:28,050
and it gets a studentProfile with the
username of "chalkers", which is me.

54
00:03:28,050 --> 00:03:29,580
Let's read this here.

55
00:03:29,580 --> 00:03:34,930
When the JSON body is fully received the
end event is triggered and

56
00:03:34,930 --> 00:03:40,670
the full body is given to the handler or
callback, so what that

57
00:03:40,670 --> 00:03:46,410
basically is saying is that when we've
downloaded the JSON from the treehouse API

58
00:03:46,410 --> 00:03:51,890
an end event gets triggered, and the full
body is returned to a callback, so.

59
00:03:51,890 --> 00:03:55,930
This is the console dir method so

60
00:03:55,930 --> 00:04:01,720
the JSON body will get given to that and
it will print out to the console

61
00:04:01,720 --> 00:04:07,220
in the pretty format you know where the
object looks fancy.

62
00:04:07,220 --> 00:04:12,216
And then if this a parsing, network, or
HTTP error.

63
00:04:12,216 --> 00:04:14,788
An object is passed to the handler or call
back.

64
00:04:14,788 --> 00:04:20,624
So let's just see if this actually

65
00:04:20,624 --> 00:04:28,486
works by typing node example_profile.js.

66
00:04:28,486 --> 00:04:33,220
Hit enter and it spits out that.

67
00:04:33,220 --> 00:04:35,320
Lovely JSON.

68
00:04:35,320 --> 00:04:38,520
If you want to see what the JSON looks
like yourself,

69
00:04:38,520 --> 00:04:43,860
you can go to
teamtreehouse.com\username.json.

70
00:04:43,860 --> 00:04:49,530
Now if a user has got privacy settings,
you may not be able to see all the users.

71
00:04:49,530 --> 00:04:54,170
You can only just see the ones that
publicly share the badge information.

72
00:04:54,170 --> 00:04:58,140
So I've got a Chrome extension and I can
click on this minus sign for example, and

73
00:04:58,140 --> 00:05:02,690
I can just make things shorter so I can
see things a lot clearer.

74
00:05:02,690 --> 00:05:06,690
I can see that the badges is an array so I
can get the length of that for

75
00:05:06,690 --> 00:05:08,180
the total count of badges.

76
00:05:08,180 --> 00:05:13,260
And we've got here the points with the
JavaScript topic with

77
00:05:13,260 --> 00:05:15,450
the amount of JavaScript points I've got.

78
00:05:15,450 --> 00:05:20,250
So I can access this JSON by that
profile.js file.

79
00:05:22,960 --> 00:05:27,460
And then finally let's take a look at
Node.JS just to make sure that we can

80
00:05:27,460 --> 00:05:29,330
do the things that we want to do.

81
00:05:29,330 --> 00:05:33,320
So if we go to the docs and API DOCS.

82
00:05:33,320 --> 00:05:38,210
And HTTP, we can create a server, so
that's we wanna do.

83
00:05:38,210 --> 00:05:42,540
And we want to read files from a file
system,

84
00:05:42,540 --> 00:05:49,020
which I'm sure we can find some methods in
here for accessing the file system.

85
00:05:49,020 --> 00:05:52,970
So, so going back to our code now, we can.

86
00:05:53,970 --> 00:05:57,880
Try and give a stab at what the problem
is, what the solution is, and

87
00:05:57,880 --> 00:05:59,298
plan out that solution.

88
00:05:59,298 --> 00:06:04,680
So, we need a simple way

89
00:06:04,680 --> 00:06:12,238
to look at a user's badge count.

90
00:06:12,238 --> 00:06:17,610
And JavaScript

91
00:06:17,610 --> 00:06:21,750
points from a web browser.

92
00:06:23,870 --> 00:06:28,090
We could easily do this in a console but
judging by the designs we want to actually

93
00:06:28,090 --> 00:06:32,420
do this as an HTML page in the server on
the internet.

94
00:06:33,740 --> 00:06:38,815
And the solution would be use

95
00:06:38,815 --> 00:06:46,640
Node.JS to perform the profile look ups
and

96
00:06:46,640 --> 00:06:54,900
serve our templates via HTML HTTP sorry.

97
00:06:56,030 --> 00:07:01,460
So we're gonna use node to go out and

98
00:07:01,460 --> 00:07:05,180
get all the profile information used in
the profile.js file, and

99
00:07:05,180 --> 00:07:12,390
we're gonna create a server and serve out
all of our index profile with error pages.

100
00:07:12,390 --> 00:07:13,550
So yeah, that's cool.

101
00:07:16,000 --> 00:07:18,080
Now let's plan out the solution.

102
00:07:18,080 --> 00:07:21,260
Let's break this down into digestible
chunks.

103
00:07:21,260 --> 00:07:26,141
I'm gonna close the console again and say
1.

104
00:07:26,141 --> 00:07:29,715
create a web server.

105
00:07:29,715 --> 00:07:33,430
2.

106
00:07:33,430 --> 00:07:39,925
We want a handle, the HTTP route,

107
00:07:39,925 --> 00:07:47,030
or if you're British root.

108
00:07:47,030 --> 00:07:51,810
So the home route where, when it's open a
domain name or what, what have you,

109
00:07:51,810 --> 00:07:54,980
this will show the search, field, for
example.

110
00:07:56,890 --> 00:08:00,891
So, we've got this form at the bottom here
and it uses the post method and

111
00:08:00,891 --> 00:08:04,580
it goes to the home route as well, so we
need to handle that as well.

112
00:08:04,580 --> 00:08:10,893
[BLANK_AUDIO]

113
00:08:10,893 --> 00:08:14,050
So, that handles the searching side of
things.

114
00:08:15,120 --> 00:08:20,820
And now we want to handle the HTTP

115
00:08:20,820 --> 00:08:25,615
route for get/username.

116
00:08:25,615 --> 00:08:30,500
So, we would like a nice clean URL

117
00:08:30,500 --> 00:08:35,080
when we type in whatever this domain name
is, slash.

118
00:08:35,080 --> 00:08:38,260
The username so like slash chalkers.

119
00:08:40,170 --> 00:08:43,118
Or slash Dave McFarland or something like
that.

120
00:08:43,118 --> 00:08:48,790
So number 4.

121
00:08:48,790 --> 00:08:55,270
And finally we want to function that
handles the reading..

122
00:08:58,790 --> 00:09:02,286
Of files so the, the templates that we
have.

123
00:09:02,286 --> 00:09:10,510
And merge in values.

124
00:09:10,510 --> 00:09:13,840
So when we go out to the internet, get the
information,

125
00:09:13,840 --> 00:09:17,850
we want to populate that into our
profile.html.

126
00:09:17,850 --> 00:09:20,150
Right now it's started with all those
information but

127
00:09:20,150 --> 00:09:22,700
we want it to be everybody's information.

128
00:09:22,700 --> 00:09:26,730
So I think those are the 4 main components
of our application.

129
00:09:26,730 --> 00:09:29,610
Let's just try and break down each one
into.

130
00:09:29,610 --> 00:09:31,650
More digestible chunks.

131
00:09:31,650 --> 00:09:35,220
So, we create the web server and

132
00:09:35,220 --> 00:09:39,630
then I'm gonna write some pseudo code.

133
00:09:39,630 --> 00:09:43,090
So, pseudo code means that it's not
exactly code but

134
00:09:43,090 --> 00:09:46,050
you should be able to get the jist of what
it is.

135
00:09:46,050 --> 00:09:53,090
So, if the URL is equal to slash and GET.

136
00:09:55,700 --> 00:10:02,761
We want to show the search field.

137
00:10:02,761 --> 00:10:04,750
Cool.

138
00:10:04,750 --> 00:10:06,280
So if the URL.

139
00:10:08,550 --> 00:10:10,240
Is equal to slash.

140
00:10:13,370 --> 00:10:14,330
And it's a Post.

141
00:10:16,990 --> 00:10:22,429
We want to redirect to the username.

142
00:10:22,429 --> 00:10:27,623
[BLANK_AUDIO]

143
00:10:27,623 --> 00:10:36,306
So if the URL is equal to slash anything.

144
00:10:36,306 --> 00:10:41,298
[BLANK_AUDIO]

145
00:10:41,298 --> 00:10:43,516
We want to get the.

146
00:10:43,516 --> 00:10:44,988
JSON from treehouse.

147
00:10:44,988 --> 00:10:50,555
[BLANK_AUDIO]

148
00:10:50,555 --> 00:10:56,237
and then on the end that's when all the
dates come back.

149
00:10:56,237 --> 00:11:00,724
We want to show the profile and

150
00:11:00,724 --> 00:11:04,140
if there's an error.

151
00:11:04,140 --> 00:11:12,752
[BLANK_AUDIO]

152
00:11:12,752 --> 00:11:14,130
We want to show the error.

153
00:11:18,800 --> 00:11:22,060
So I think that covers handling the user
route.

154
00:11:22,060 --> 00:11:26,300
So if I type in chalkers, it will show my
chalkers information.

155
00:11:26,300 --> 00:11:30,230
If I do chalkers 1 2 3, that doesn't exist
so it should show an error.

156
00:11:32,860 --> 00:11:39,430
And finally, we need to read from file and
get a string.

157
00:11:43,740 --> 00:11:45,440
And then we want to merge.

158
00:11:47,170 --> 00:11:48,750
Values into string.

159
00:11:50,830 --> 00:11:56,140
So we do a quick search of the, the
template file and we just

160
00:11:56,140 --> 00:12:01,530
populate the information that we get from
the, from the JSON from treehouse.

161
00:12:01,530 --> 00:12:02,590
Cool.

162
00:12:02,590 --> 00:12:06,200
Now our planning doesn't go into every
single detail but it's enough for

163
00:12:06,200 --> 00:12:09,040
us to get going, we can always add more to
it later.