1
00:00:00,025 --> 00:00:06,851
[SOUND] Hello, I'm Craig,
and I'm a developer.

2
00:00:06,851 --> 00:00:10,436
Did you know that we developers, on
average, spend more than half of our time

3
00:00:10,436 --> 00:00:14,106
maintaining existing products,
as opposed to writing new ones?

4
00:00:14,106 --> 00:00:18,090
If we're going to take up more than 50%
of our precious work time in maintenance

5
00:00:18,090 --> 00:00:21,140
mode, don't you think it's a good idea
to get some hands on practice on how

6
00:00:21,140 --> 00:00:22,610
that might feel?

7
00:00:22,610 --> 00:00:26,345
In addition to gaining that experience,
I'd love to have you sharpen

8
00:00:26,345 --> 00:00:30,225
your debugging skills so that you can
make better usage of all that time.

9
00:00:30,225 --> 00:00:31,896
So that's what we're going to do for
this workshop.

10
00:00:31,896 --> 00:00:34,360
We're going to drop into
a very common scenario.

11
00:00:34,360 --> 00:00:37,570
We're going to simulate a common
development pattern that happens to both

12
00:00:37,570 --> 00:00:41,200
workers at agencies,
as well as self-employed contractors.

13
00:00:41,200 --> 00:00:44,690
But before we get started, remember
that there are video speed controls,

14
00:00:44,690 --> 00:00:47,560
should you need to speed me up or
slow me down.

15
00:00:47,560 --> 00:00:50,090
Don't forget,
check the teacher's notes on each video.

16
00:00:50,090 --> 00:00:52,430
I'll link to places where you can
learn even more information, and

17
00:00:52,430 --> 00:00:54,670
I'll expound on things
presented in the video.

18
00:00:54,670 --> 00:00:57,500
For instance, right now,
please check the prerequisites so

19
00:00:57,500 --> 00:00:59,750
we can make sure that
we're on the same page.

20
00:00:59,750 --> 00:01:03,570
Finally, please ask questions, your
community of fellow students is friendly,

21
00:01:03,570 --> 00:01:05,150
inviting, and ready to help.

22
00:01:05,150 --> 00:01:08,670
Also, if you feel like you can
answer a question, give it a spin.

23
00:01:08,670 --> 00:01:11,200
Everyone wins, and
you'll learn a ton from providing answers.

24
00:01:12,860 --> 00:01:15,130
Okay, so here's the typical scenario.

25
00:01:15,130 --> 00:01:18,340
A client comes to you and says,
hey, I got this app developed for

26
00:01:18,340 --> 00:01:19,750
me from another group of developers, and

27
00:01:19,750 --> 00:01:23,000
it's pretty much working, but
it keeps doing this weird thing.

28
00:01:23,000 --> 00:01:24,490
Can you fix it?

29
00:01:24,490 --> 00:01:29,680
You, of course, say something cautious
like, sure, probably, let me take a look.

30
00:01:29,680 --> 00:01:32,100
And sometimes you get super lucky,
and the app's well documented and

31
00:01:32,100 --> 00:01:33,470
thoroughly tested.

32
00:01:33,470 --> 00:01:35,175
But most of the time it's just not.

33
00:01:35,175 --> 00:01:38,205
In fact, it most certainly is not
how you would have programmed it.

34
00:01:38,205 --> 00:01:40,805
It's written in a totally different coding
style than you normally use on your

35
00:01:40,805 --> 00:01:44,715
projects, and there's usually,
literally zero tests.

36
00:01:44,715 --> 00:01:49,245
And on top of it all, it has this
monstrous, undocumented, poorly named

37
00:01:49,245 --> 00:01:53,770
methods, and it's sort of confusing
branches and looping and, yuck, right?

38
00:01:53,770 --> 00:01:56,050
But you got to pay the bills,
so you take it on.

39
00:01:57,110 --> 00:02:01,710
Now, this is such a common story that I
thought we should play it out together.

40
00:02:01,710 --> 00:02:02,730
So what do you say?

41
00:02:02,730 --> 00:02:04,270
Let's imagine that we, me and

42
00:02:04,270 --> 00:02:07,690
you, we're running this little
web consulting business together.

43
00:02:07,690 --> 00:02:09,460
So we're out networking
at a meet-up as we do,

44
00:02:09,460 --> 00:02:12,490
and we start chatting with
an owner of a little startup.

45
00:02:12,490 --> 00:02:16,170
Now, their business model is to assist
people in passing certification exams.

46
00:02:16,170 --> 00:02:18,990
So they have these different study tools
that help their students prepare for

47
00:02:18,990 --> 00:02:19,930
those exams.

48
00:02:19,930 --> 00:02:21,910
It seems like a pretty cool idea, right?

49
00:02:21,910 --> 00:02:24,760
Well, they have this flashcard
web prototype that they have

50
00:02:24,760 --> 00:02:27,150
some other firm built for them,
and they're pretty happy with it.

51
00:02:28,292 --> 00:02:30,270
If flashcards are a new concept to you,

52
00:02:30,270 --> 00:02:33,620
they're a pretty common studying
technique for terms and definitions.

53
00:02:33,620 --> 00:02:34,290
Now typically,

54
00:02:34,290 --> 00:02:38,030
one side of an index card, like this
one here, has a term like this, JVM.

55
00:02:38,030 --> 00:02:39,760
So, what does that mean?

56
00:02:39,760 --> 00:02:43,670
The idea is you look at this and
try to remember the definition.

57
00:02:43,670 --> 00:02:45,250
So, what does JVM stand for?

58
00:02:45,250 --> 00:02:47,000
Come on partner, you know this one.

59
00:02:47,000 --> 00:02:49,540
So on the back side, here's the answer.

60
00:02:49,540 --> 00:02:50,340
Java Virtual Machine.

61
00:02:51,340 --> 00:02:54,780
So the owner tells us they're pretty happy
with the digital version of the flash card

62
00:02:54,780 --> 00:02:57,850
concept that the firm delivered,
but the contract's up, and

63
00:02:57,850 --> 00:03:00,550
the other consulting firm
had gone way over budget.

64
00:03:00,550 --> 00:03:03,310
Now, since you seem so
knowledgeable and friendly, good job,

65
00:03:03,310 --> 00:03:07,030
by the way, they were wondering if we were
interested in taking on the project and

66
00:03:07,030 --> 00:03:08,950
making some tweaks and bug fixes.

67
00:03:08,950 --> 00:03:10,430
Think we should take it?

68
00:03:10,430 --> 00:03:11,000
Yeah, me too.

69
00:03:11,000 --> 00:03:12,190
Let's do this.

70
00:03:12,190 --> 00:03:14,990
Okay, so the code itself is
a Spring Boot application,

71
00:03:14,990 --> 00:03:16,890
which we have some experience with.

72
00:03:16,890 --> 00:03:19,120
And I'm sure as a team,
we can figure this stuff out.

73
00:03:19,120 --> 00:03:20,550
Let's download it and
get it up and running.

74
00:03:22,010 --> 00:03:27,430
All right, so to begin the simulation, I'm
going to need you to fork this repository.

75
00:03:27,430 --> 00:03:30,190
Now, that way we can both kind
of make changes to the repo.

76
00:03:30,190 --> 00:03:32,760
So here I am, I'm at the repository.

77
00:03:32,760 --> 00:03:34,280
It's linked in the teacher's notes,

78
00:03:34,280 --> 00:03:36,700
along with some more information
about GitHub in general.

79
00:03:36,700 --> 00:03:38,790
So what I'm going to do
is I'm going to fork it.

80
00:03:38,790 --> 00:03:41,740
So I'm going to click fork, and
I'm going to choose my personal account.

81
00:03:43,480 --> 00:03:47,640
And there, now it exists in my personal
account as a Java-debugging-flashy.

82
00:03:48,950 --> 00:03:52,470
Now, unfortunately, since issues
don't come across when you fork,

83
00:03:52,470 --> 00:03:55,410
we're going to have to do
a few more steps later.

84
00:03:55,410 --> 00:03:58,748
So, the first thing that I want to
do is I want to grab the clone URL.

85
00:03:58,748 --> 00:04:02,240
I'm going to come over here, and
notice that mine says Clone with SSH.

86
00:04:02,240 --> 00:04:05,290
I'm going to switch between these two,
I'm going to do that one.

87
00:04:05,290 --> 00:04:08,830
Choose the git, and
I'm going to flip over to my IntelliJ.

88
00:04:08,830 --> 00:04:11,697
And notice that I'm using 2016.2.

89
00:04:11,697 --> 00:04:15,080
That's the current version, and my version
might look a little bit different.

90
00:04:16,170 --> 00:04:18,950
So here, what I'm going to do is choose
Check out from Version Control, and

91
00:04:18,950 --> 00:04:20,190
I'm going to choose GitHub.

92
00:04:20,190 --> 00:04:21,590
Now if you haven't set this up before,

93
00:04:21,590 --> 00:04:25,130
you might see a little bit
different of a interaction.

94
00:04:25,130 --> 00:04:27,609
I have two factor
authentication installed, so

95
00:04:27,609 --> 00:04:31,909
I need to put in a special code, don't
worry, it expires, so you can't copy this.

96
00:04:34,034 --> 00:04:36,850
Cool, and
now I'm going to paste my repo there, and

97
00:04:36,850 --> 00:04:40,500
I'm going to leave all those defaults
just as is, and click Clone.

98
00:04:42,620 --> 00:04:46,240
And it says you've checked out an IDEA
project because we cloned it locally, and

99
00:04:46,240 --> 00:04:47,150
yeah, we want to open it.

100
00:04:47,150 --> 00:04:47,810
We want to take a look.

101
00:04:47,810 --> 00:04:49,430
So we'll click Yes.

102
00:04:49,430 --> 00:04:51,620
We definitely want to
import the Gradle project.

103
00:04:51,620 --> 00:04:54,790
It really wants us to click that twice.

104
00:04:54,790 --> 00:04:58,500
And then I wanna choose create directories
for empty content roots automatically,

105
00:04:58,500 --> 00:05:00,720
just in case something's
missing that Gradle wants.

106
00:05:00,720 --> 00:05:01,787
So I'm going to click OK.

107
00:05:04,446 --> 00:05:07,047
Okay, so now everything's installed, and

108
00:05:07,047 --> 00:05:11,420
we should have a nice slew of external
dependencies, look at all these.

109
00:05:11,420 --> 00:05:15,160
All right, that's looking good, and
I'm going to open up the project here.

110
00:05:15,160 --> 00:05:21,823
And one thing that I noticed is these
are going to be using a different style.

111
00:05:21,823 --> 00:05:25,030
I saw it, I was looking down here
at the repo, it says contributing.

112
00:05:26,440 --> 00:05:29,680
The original authors of this code
use the Google Java style guide.

113
00:05:29,680 --> 00:05:32,240
So I'm going to click the link here,
and just take a look really quick.

114
00:05:32,240 --> 00:05:35,900
So, Google has their own style because
they have so many projects out there,

115
00:05:35,900 --> 00:05:40,030
and they publish the Style Guide, which
is awesome so that people can use it.

116
00:05:40,030 --> 00:05:42,780
And they do things a little bit
differently than the defaults of what your

117
00:05:42,780 --> 00:05:46,280
editor might be, so for instance,
block indentation is two spaces.

118
00:05:46,280 --> 00:05:48,500
Normally, the editor's at four.

119
00:05:48,500 --> 00:05:51,700
So, one main thing that you're going to
notice as soon as we open this is that

120
00:05:51,700 --> 00:05:53,240
the code is all it two spaces.

121
00:05:53,240 --> 00:05:57,070
So I think we should switch to
use that Google style guide.

122
00:05:57,070 --> 00:05:59,660
That doesn't mean we have to go switch all
these settings because there's actually

123
00:05:59,660 --> 00:06:03,340
a really nice implementation which
has very nicely been linked here

124
00:06:03,340 --> 00:06:05,856
in the readme by
the creators of this repo.

125
00:06:05,856 --> 00:06:06,800
So I'm going to click that and

126
00:06:06,800 --> 00:06:11,760
open this up, and this is a fork from
the Google Style Guide, and like I said,

127
00:06:11,760 --> 00:06:17,160
there's a new release currently of
IntelliJ, and so, there's a branch here.

128
00:06:17,160 --> 00:06:18,590
That's the IntelliJ2016 branch.

129
00:06:19,910 --> 00:06:21,560
I'm going to go ahead and click that.

130
00:06:21,560 --> 00:06:23,830
This might be a little bit
different if you're watching this.

131
00:06:23,830 --> 00:06:26,560
I'll try to update that link so
you can go to the right place.

132
00:06:26,560 --> 00:06:31,360
So what you want to do here you want
to find your file, so this looks good.

133
00:06:31,360 --> 00:06:33,350
This is what we want,
you want the IntelliJ Google style.

134
00:06:33,350 --> 00:06:34,400
So here it is.

135
00:06:34,400 --> 00:06:37,880
These are all the settings, and basically
you can import this into the editor.

136
00:06:37,880 --> 00:06:40,420
So the way that you do that
is you download this file.

137
00:06:40,420 --> 00:06:43,160
And to download in GitHub,
there's a little trick.

138
00:06:43,160 --> 00:06:44,050
If you click this raw,

139
00:06:44,050 --> 00:06:47,210
it will just show the raw page
without the GitHub stuff around it.

140
00:06:47,210 --> 00:06:48,870
So if we come back.

141
00:06:48,870 --> 00:06:54,330
If we right click here, and we choose
Save Link As, it will allow us to save.

142
00:06:54,330 --> 00:06:56,120
And I'm just going to save it
in my downloads directory.

143
00:06:57,700 --> 00:07:00,333
And I'm going to flip back
now to the project, and

144
00:07:00,333 --> 00:07:02,850
I'm going to choose
IntelliJ > Preferences.

145
00:07:04,120 --> 00:07:06,940
And here under Editor > Code Style,

146
00:07:06,940 --> 00:07:11,690
if I choose Java,
I can choose Manage and Import.

147
00:07:13,250 --> 00:07:16,510
And again, so that scheme,
we're going to manage the scheme,

148
00:07:16,510 --> 00:07:20,430
and we're going to import
IntelliJ IDEA code style.

149
00:07:20,430 --> 00:07:24,156
And in my downloads directory,
I'm going to find that file I downloaded.

150
00:07:24,156 --> 00:07:28,980
I'm going to click OK, and I'm going
to call it Google Style, that's great.

151
00:07:28,980 --> 00:07:30,568
And now and I go ahead and
click Close, and

152
00:07:30,568 --> 00:07:32,439
what that does that imports
the settings for us.

153
00:07:32,439 --> 00:07:36,983
So, see, here's the indents at 2,
as opposed to 4 where it normally is, so

154
00:07:36,983 --> 00:07:41,710
I'm gonna click Apply, and
I'm going to click OK, awesome.

155
00:07:41,710 --> 00:07:45,100
And so, because we are using Git,
it's going to ask if we want to add this.

156
00:07:45,100 --> 00:07:46,320
Let's go ahead and say Yes.

157
00:07:47,680 --> 00:07:49,662
All right, and
now that we've got that all set up,

158
00:07:49,662 --> 00:07:51,532
I'm going to blow us up to full screen.

159
00:07:51,532 --> 00:07:53,142
Let's navigate around in here and

160
00:07:53,142 --> 00:07:55,780
let's see if we can't find
a common starting point.

161
00:07:55,780 --> 00:07:59,190
So, in Java > App,
let's see what's in here.

162
00:07:59,190 --> 00:08:02,510
Let's open this up.

163
00:08:02,510 --> 00:08:04,611
And this is a Spring Boot application,
okay.

164
00:08:04,611 --> 00:08:10,857
So if we click this play here,
let's do this Run > Run.

165
00:08:10,857 --> 00:08:11,983
And we'll choose App.

166
00:08:20,365 --> 00:08:25,776
Okay, so we are up and running,
and it started on port 8080.

167
00:08:25,776 --> 00:08:30,010
So I'm going to go ahead and
open up localhost:8080 here.

168
00:08:32,410 --> 00:08:33,980
Well, this is our app here.

169
00:08:33,980 --> 00:08:37,100
All right, so let's click around,
so refresh your memory.

170
00:08:37,100 --> 00:08:39,040
Let's say, let's get started.

171
00:08:39,040 --> 00:08:40,820
So, nice, there's a card here.

172
00:08:40,820 --> 00:08:42,152
I'll click this.

173
00:08:42,152 --> 00:08:44,936
And it flips, cool, and
then we can choose next.

174
00:08:44,936 --> 00:08:46,344
There's the next term.

175
00:08:46,344 --> 00:08:50,319
And it looks like it says how
many times it's been viewed, and

176
00:08:50,319 --> 00:08:53,635
you just keep on clicking next, awesome.

177
00:08:53,635 --> 00:08:57,547
And then the times change there.

178
00:08:57,547 --> 00:08:58,910
Cool, pretty nice application.

179
00:08:58,910 --> 00:09:02,671
Let's flip back here and
let's navigate around a little bit.

180
00:09:02,671 --> 00:09:10,270
Let's take a look at the tests, and
uh-oh, there aren't any at all, yikes.

181
00:09:10,270 --> 00:09:15,726
So, because this project is from GitHub,
you can use open on GitHub.

182
00:09:15,726 --> 00:09:19,316
If you right-click and
choose open on GitHub, and

183
00:09:19,316 --> 00:09:23,906
what it will do is it will open
a window for you, and this is handy,

184
00:09:23,906 --> 00:09:27,680
because this is where our
issues are going to to be at.

185
00:09:29,120 --> 00:09:34,090
Which reminds me,
we need to run the Bootstrap program.

186
00:09:34,090 --> 00:09:38,986
So, the Bootstrap program is, if we
go to local host, then we go to 8080,

187
00:09:38,986 --> 00:09:41,968
then we and go to bootstrap/GitHub,

188
00:09:41,968 --> 00:09:46,970
this is what we're going to use to copy our
issues across so that we can have them.

189
00:09:48,410 --> 00:09:50,920
So, I wrote some instructions here for
you.

190
00:09:50,920 --> 00:09:54,050
In order to copy issues across, you need
to create a GitHub personal access token.

191
00:09:54,050 --> 00:09:55,860
So go ahead and click that.

192
00:09:55,860 --> 00:09:59,950
And if you come in here, you can
click generate new token, and we'll

193
00:09:59,950 --> 00:10:04,870
do something like treehouse-issue-copier
is what the token description can be.

194
00:10:04,870 --> 00:10:06,990
And I just want you to click repo.

195
00:10:06,990 --> 00:10:09,647
And we're going to create this, and then
we're going to delete it right away, so

196
00:10:09,647 --> 00:10:10,750
don't worry.

197
00:10:10,750 --> 00:10:15,510
I'm going to generate the token, and
this token is going to be a one use only.

198
00:10:15,510 --> 00:10:19,580
So you can copy this token, and I'm going
to delete this token when we're done,

199
00:10:19,580 --> 00:10:23,200
so you can't hack my account.

200
00:10:23,200 --> 00:10:26,049
So I'm going to click over to Flashy,
and so

201
00:10:26,049 --> 00:10:30,370
I am going to paste it in here, and
then I'm going to click Submit.

202
00:10:32,320 --> 00:10:34,260
And it's going to just make sure
that this is the right place,

203
00:10:34,260 --> 00:10:37,840
make sure that this is the repo that you
want, and that this is your name here.

204
00:10:37,840 --> 00:10:39,250
And I'm going to click fork it.

205
00:10:40,910 --> 00:10:43,400
Cool, and it went ahead and
it added all of those issues.

206
00:10:43,400 --> 00:10:46,990
So if we come back over here and
we refresh, now, see,

207
00:10:46,990 --> 00:10:49,800
that there's issues in there,
there's six issues in here.

208
00:10:49,800 --> 00:10:53,450
I'm gonna flip back to my personal access
tokens, and I'm going to click Delete.

209
00:10:53,450 --> 00:10:55,780
And I understand, delete this token.

210
00:10:55,780 --> 00:10:56,280
Awesome.

211
00:10:57,410 --> 00:11:00,760
And with that,
I think we're ready to get started.

212
00:11:00,760 --> 00:11:04,230
Okay, so the app looks pretty great,
and it seems pretty functional.

213
00:11:04,230 --> 00:11:06,490
It is a little alarming that
there aren't any tests, but

214
00:11:06,490 --> 00:11:07,780
it's not the end of the world.

215
00:11:07,780 --> 00:11:10,460
It just means we'll need to lean
a little bit harder on our old

216
00:11:10,460 --> 00:11:11,590
friend, the debugger.

217
00:11:11,590 --> 00:11:12,720
So we can pause the code and

218
00:11:12,720 --> 00:11:16,220
check its state, just to get a handle
of what's going on line by line.

219
00:11:16,220 --> 00:11:18,610
If you don't have too much experience
using the debugger, don't worry,

220
00:11:18,610 --> 00:11:21,480
we'll walk through its
power here in just a few.

221
00:11:21,480 --> 00:11:23,360
Let's take a quick break,
fill up your beverages, and

222
00:11:23,360 --> 00:11:24,910
let's take a crack at our first issue.