1
00:00:00,480 --> 00:00:03,150
I'm super excited to
introduce you to the web

2
00:00:03,150 --> 00:00:06,680
application framework that we're gonna be
using for the rest of this course, Spark.

3
00:00:07,770 --> 00:00:12,920
Now Spark is unfortunately in a bit of
name space collision in the Java world.

4
00:00:12,920 --> 00:00:18,630
The Spark framework is not to be confused
with the database called Apache Spark.

5
00:00:18,630 --> 00:00:20,700
It's unfortunate that they
share the same name and

6
00:00:20,700 --> 00:00:23,640
it makes searching around
a little confusing at times.

7
00:00:23,640 --> 00:00:26,090
So, keep this in mind as you
start navigating these parts.

8
00:00:27,280 --> 00:00:31,490
The idea behind a microframework is
to keep things small, simple, and

9
00:00:31,490 --> 00:00:33,740
clear and Spark does just that.

10
00:00:33,740 --> 00:00:37,710
It is built for productivity and
design to get you up and running and

11
00:00:37,710 --> 00:00:40,820
ready for
rapid application development in no time.

12
00:00:42,310 --> 00:00:44,520
Part of the complaint of
Web frameworks in general,

13
00:00:44,520 --> 00:00:48,240
is that the more sophisticated they get,
the more they bloat and swell.

14
00:00:48,240 --> 00:00:50,460
There's usually tons of configuration, and

15
00:00:50,460 --> 00:00:54,210
you have to learn a whole new environment
before you can even write a simple page.

16
00:00:54,210 --> 00:00:56,550
Well microframeworks are not like that.

17
00:00:56,550 --> 00:00:58,040
In the Ruby programming world,

18
00:00:58,040 --> 00:01:00,940
a super tiny and
easy to use framework was created.

19
00:01:00,940 --> 00:01:02,410
It's called Sinatra.

20
00:01:02,410 --> 00:01:06,660
Now Spark and many other microframeworks
got its inspiration from Sinatra so

21
00:01:06,660 --> 00:01:09,500
you might hear it being
called Sinatra based.

22
00:01:09,500 --> 00:01:13,540
So get ready to start spreading
the news because this is awesome.

23
00:01:14,600 --> 00:01:17,280
Okay, so
before we get this framework installed,

24
00:01:17,280 --> 00:01:20,190
let's talk a bit about the project for
this course.

25
00:01:20,190 --> 00:01:21,240
So the actual idea for

26
00:01:21,240 --> 00:01:24,560
the creation of this course came
from one of your fellow classmates.

27
00:01:24,560 --> 00:01:29,240
As you probably know, we always ask you
for feedback and ideas for future courses.

28
00:01:29,240 --> 00:01:32,830
I usually get a direct message on Twitter,
something over email, and

29
00:01:32,830 --> 00:01:35,310
we put these suggestions out for
you to vote on.

30
00:01:35,310 --> 00:01:38,950
So one of your classmates shot me an email
saying, I'd love to learn Spark so

31
00:01:38,950 --> 00:01:40,370
I can get a site up and running quickly.

32
00:01:40,370 --> 00:01:42,500
And I thought that
sounded like a good idea.

33
00:01:42,500 --> 00:01:45,950
And I turned that into a request, and
into something you could vote on.

34
00:01:45,950 --> 00:01:49,020
So, check the teacher's notes for
more on the current voting system.

35
00:01:49,020 --> 00:01:50,140
And you all voted it up and

36
00:01:50,140 --> 00:01:54,910
we agreed that it made great sense to
have in our library, so here it is.

37
00:01:54,910 --> 00:01:59,110
Well that got me thinking, why don't
we remove me, as the middle man and

38
00:01:59,110 --> 00:02:02,240
just have a place where you
students can submit ideas yourself.

39
00:02:02,240 --> 00:02:03,200
Why don't we just build an app?

40
00:02:03,200 --> 00:02:05,720
And I thought,
that's a pretty simple web app.

41
00:02:05,720 --> 00:02:09,600
And then I was like, why not just
use one of those microframeworks.

42
00:02:09,600 --> 00:02:15,450
And then I was like, I'm writing a course
on Spark and I need a project and then.

43
00:02:15,450 --> 00:02:17,650
I was like, wow sparkception.

44
00:02:18,970 --> 00:02:23,570
So the project for this course, let's make
a site that takes ideas from students and

45
00:02:23,570 --> 00:02:24,730
then allows voting.

46
00:02:24,730 --> 00:02:25,820
Sound good?

47
00:02:25,820 --> 00:02:26,900
Let's go get Spark installed.

48
00:02:27,940 --> 00:02:28,810
Alright, so

49
00:02:28,810 --> 00:02:33,090
let's create a new project in IntelliJ
IDEA and we'll make a great old project.

50
00:02:33,090 --> 00:02:38,650
So do create new project and we'll
choose Gradle over here on the left, and

51
00:02:38,650 --> 00:02:41,800
if Gradle's new to you, check the
teacher's notes for a quick intro to it.

52
00:02:41,800 --> 00:02:44,750
Now we're going to use it because we're
going to use Spark as a dependency.

53
00:02:46,240 --> 00:02:52,650
So if we were going to publish this, we'd
want something like this for the Groupid.

54
00:02:52,650 --> 00:03:00,196
We'd want com Team Treehouse the reverse,
and we'll just call this Courses.

55
00:03:00,196 --> 00:03:05,556
And for the artifact ID we want
something like Course Ideas.

56
00:03:05,556 --> 00:03:07,720
Remember, this is what
the published jar would be named.

57
00:03:08,780 --> 00:03:10,240
Let's go ahead and choose Next.

58
00:03:11,240 --> 00:03:13,480
And let's choose create directories for

59
00:03:13,480 --> 00:03:16,900
the empty content roots automatically
that way it gonna be there.

60
00:03:18,837 --> 00:03:19,337
Awesome.

61
00:03:23,467 --> 00:03:24,127
Okay.

62
00:03:24,127 --> 00:03:28,060
So now the file, directories all there,
let's open up the source.

63
00:03:28,060 --> 00:03:33,455
Main, Java and let's add a new class here.

64
00:03:33,455 --> 00:03:37,118
New java class, and the class name is,

65
00:03:37,118 --> 00:03:43,891
let's do com.team
treehouse.courses and for

66
00:03:43,891 --> 00:03:46,000
simplicity's sake let's just call it Main.

67
00:03:47,820 --> 00:03:48,800
Okay.

68
00:03:48,800 --> 00:03:53,340
And in this file we'll make
our standard main call.

69
00:03:53,340 --> 00:03:56,150
I want you to see how
simple Spark actually is

70
00:03:56,150 --> 00:03:57,400
to get the prototype up and running.

71
00:03:57,400 --> 00:04:02,440
So we'll do the public static void main
and press tab, it builds it out for us.

72
00:04:02,440 --> 00:04:04,080
Okay, so now we're ready.

73
00:04:04,080 --> 00:04:06,830
So first let's add our dependency.

74
00:04:06,830 --> 00:04:10,500
So the site's called sparkjava.com,
I have it open over here.

75
00:04:10,500 --> 00:04:14,070
So sparkjava.com, and
up here there's this Download tab.

76
00:04:14,070 --> 00:04:16,266
So over here it tells us how to get it.

77
00:04:16,266 --> 00:04:22,376
So the group ID is com.sparkjava,
and then it's spark-core and 2.3.

78
00:04:22,376 --> 00:04:27,002
So let's go to build.gradle and
in the dependencies section here,

79
00:04:27,002 --> 00:04:28,446
we'll say compile.

80
00:04:28,446 --> 00:04:32,343
And we'll use the shorthand, we'll say,

81
00:04:32,343 --> 00:04:37,729
com.sparkjava, and
then spark-core, and then 2.3.

82
00:04:43,148 --> 00:04:48,121
Let's go ahead and click apply
the suggestion there that way when we ship

83
00:04:48,121 --> 00:04:53,210
this project, if we ever do,
Gradle will be shipped with it.

84
00:04:53,210 --> 00:04:56,845
Okay, so let's flip over to
the Gradle tool window, and

85
00:04:56,845 --> 00:05:00,417
in here we'll press this
refresh all Gradle projects.

86
00:05:04,656 --> 00:05:09,910
And bam, just like that, we have Spark and
all of its dependencies.

87
00:05:09,910 --> 00:05:12,010
So here's Spark and here's Jetty.

88
00:05:12,010 --> 00:05:15,050
And Jetty is the embedded
web server that's used.

89
00:05:15,050 --> 00:05:18,240
So, what do you say we flip
back to the documentation and

90
00:05:18,240 --> 00:05:20,660
take a quick look at the demo
under the documentation?

91
00:05:20,660 --> 00:05:22,270
So let's switch back.

92
00:05:22,270 --> 00:05:23,700
Let's go over here to documentation.

93
00:05:25,520 --> 00:05:27,410
And it says right here
this is what we wanna do.

94
00:05:27,410 --> 00:05:30,720
Let's just grab this line because
basically we have that same thing in our

95
00:05:30,720 --> 00:05:31,330
file, right.

96
00:05:31,330 --> 00:05:35,880
So I'm just gonna grab this and
I'm gonna flip back over and

97
00:05:35,880 --> 00:05:37,600
in our main Java we'll add that line.

98
00:05:37,600 --> 00:05:40,210
And let's see what happens.

99
00:05:40,210 --> 00:05:43,737
Let's close this Gradle project,
get it out of the way.

100
00:05:46,822 --> 00:05:47,782
Okay.

101
00:05:50,576 --> 00:05:52,680
So what does it say here?

102
00:05:52,680 --> 00:05:56,200
It says, we need to do
the static import of Spark.get.

103
00:05:56,200 --> 00:05:58,200
See it saw that.

104
00:05:58,200 --> 00:05:59,900
So again it's statically importing,

105
00:05:59,900 --> 00:06:05,280
there is a get method here and
it's off of the spark class.

106
00:06:05,280 --> 00:06:10,170
Cool, if it doesn't like your
lambda syntax, by default,

107
00:06:10,170 --> 00:06:13,240
some of the IDEs are set to 6 by default.

108
00:06:13,240 --> 00:06:15,290
But go ahead and set it to 8.

109
00:06:15,290 --> 00:06:18,130
Spark really shines when we're
using the lambda syntax.

110
00:06:18,130 --> 00:06:21,380
And if lambda syntax is new to you,
check the teacher's notes.

111
00:06:21,380 --> 00:06:23,960
But basically what it's saying here is

112
00:06:26,230 --> 00:06:29,920
called the static method get
with the path name /hello.

113
00:06:29,920 --> 00:06:34,040
Anything that's matching /hello,
and then it takes a lambda.

114
00:06:34,040 --> 00:06:37,290
In the lambda here,
there's two parameters that are taken.

115
00:06:37,290 --> 00:06:42,980
It's the req which is request and
res which is response.

116
00:06:42,980 --> 00:06:44,440
And then it returns,

117
00:06:44,440 --> 00:06:49,050
remember the [INAUDIBLE] the first
thing here returns hello world.

118
00:06:49,050 --> 00:06:51,420
So, this is a function that
will return hello world and

119
00:06:51,420 --> 00:06:53,380
it's passed a request and a response.

120
00:06:54,900 --> 00:06:57,910
This is,
what this lambda here is know as a route.

121
00:06:57,910 --> 00:07:01,140
It's actually a functional interface for
the route object.

122
00:07:01,140 --> 00:07:07,120
So what this means is that when an http
get request is made to our web server

123
00:07:07,120 --> 00:07:14,530
that is looking for the uri or the uniform
resource identifier of slash hello.

124
00:07:14,530 --> 00:07:17,830
Our function will be called and
hello world will be returned.

125
00:07:17,830 --> 00:07:20,210
Now we'll touch a bit more
on these requests and

126
00:07:20,210 --> 00:07:23,880
response variables in upcoming videos,
but for now let's just return that text.

127
00:07:24,990 --> 00:07:28,290
Could that really be all it took
to get things up and running?

128
00:07:28,290 --> 00:07:30,400
Well, let's give it a go, what do you say?

129
00:07:30,400 --> 00:07:35,906
So, let's choose run and we'll choose Run
for the menu here, we will choose Main.

130
00:07:40,206 --> 00:07:43,796
Okay, so
it says that Spark has ignited and

131
00:07:43,796 --> 00:07:48,987
it says that it's listening
on port 0.0.0:4567,

132
00:07:48,987 --> 00:07:55,800
so 0.0.0 is a code name for
all IP addresses on your current machine.

133
00:07:55,800 --> 00:08:00,010
So you can access that URL in
the URL bar of your browser,

134
00:08:00,010 --> 00:08:02,770
or you could just use another nickname,
which is localhost.

135
00:08:02,770 --> 00:08:03,850
So let's do that.

136
00:08:03,850 --> 00:08:08,230
So let's switch over to a new window here,
and we'll say localhost.

137
00:08:09,420 --> 00:08:14,170
Well, actually, first let's say that
we're gonna talk HTTP to localhost

138
00:08:16,190 --> 00:08:22,350
and I'm going to do a colon and
that's for the port which was port 4567.

139
00:08:22,350 --> 00:08:25,690
Now by default it listens on a different
port but we're specifically saying this.

140
00:08:25,690 --> 00:08:28,042
By default,
you don't need to specify the port.

141
00:08:28,042 --> 00:08:33,960
The port is 80 but we're specifying here
4567 and that's how you specify the port.

142
00:08:33,960 --> 00:08:37,830
Okay.
So then, let's look for /hello.

143
00:08:37,830 --> 00:08:38,480
Sound good, right?

144
00:08:40,060 --> 00:08:41,760
Whoa, look at that.

145
00:08:41,760 --> 00:08:42,290
A website.

146
00:08:43,640 --> 00:08:45,390
So, wait a second.

147
00:08:45,390 --> 00:08:49,260
All I need to do if I want another
page is just add a new route, right?

148
00:08:49,260 --> 00:08:51,840
So I know that we want a page when
someone just comes to our site.

149
00:08:51,840 --> 00:08:54,450
So that path is just /, right?

150
00:08:54,450 --> 00:08:55,800
So let's do that.

151
00:08:55,800 --> 00:08:58,990
Let's add Over here we'll just come in and
say get.

152
00:08:58,990 --> 00:09:04,260
If anybody comes to
just slash then we add,

153
00:09:04,260 --> 00:09:06,820
again, we'll add a request and a response.

154
00:09:10,630 --> 00:09:14,277
And let's make it say welcome students.

155
00:09:17,976 --> 00:09:18,880
Cool, awesome.

156
00:09:18,880 --> 00:09:25,090
And I save it, and if I come back over
here and I just do the slash, that should.

157
00:09:25,090 --> 00:09:25,590
What?

158
00:09:27,920 --> 00:09:28,850
You know what?

159
00:09:29,880 --> 00:09:33,210
I forgot to restart the server.

160
00:09:33,210 --> 00:09:34,130
The server is running.

161
00:09:34,130 --> 00:09:35,160
So there's this button here.

162
00:09:35,160 --> 00:09:35,970
This restarts.

163
00:09:35,970 --> 00:09:37,690
This will stop and re-run main.

164
00:09:37,690 --> 00:09:39,190
So notice that main is still running.

165
00:09:39,190 --> 00:09:43,890
So let's stop it and re-run it and
now let's go see if the slash is there.

166
00:09:47,140 --> 00:09:48,020
Welcome students.

167
00:09:48,020 --> 00:09:48,920
There it is.

168
00:09:48,920 --> 00:09:50,020
Woah.

169
00:09:50,020 --> 00:09:50,870
Bam.

170
00:09:50,870 --> 00:09:52,890
You just built a web application.

171
00:09:52,890 --> 00:09:54,850
It's for
sure gonna get more challenging, but

172
00:09:54,850 --> 00:09:57,570
you just tackled that in like
five minutes or something.

173
00:09:57,570 --> 00:09:58,715
That's pretty amazing right?

174
00:09:58,715 --> 00:10:00,830
Micro-frameworks for the win.

175
00:10:00,830 --> 00:10:03,520
Also, did you see how
clear that syntax was?

176
00:10:03,520 --> 00:10:04,950
Doesn't get much more clearer than that,
does it?

177
00:10:06,360 --> 00:10:10,310
But forgetting to restart the server is
going to bite you, I promise it will.

178
00:10:10,310 --> 00:10:13,420
You'll make a change and you won't see
it and you change it some more and

179
00:10:13,420 --> 00:10:16,450
you'll still not see it and
then do a facepalm like this.

180
00:10:16,450 --> 00:10:19,110
And you'll realize that it's because
you forgot to reset the server.

181
00:10:19,110 --> 00:10:23,060
It's actually a good thing to remember
that the server's constantly running,

182
00:10:23,060 --> 00:10:26,090
just waiting for any number of
requests to come in from wherever.

183
00:10:26,090 --> 00:10:29,960
Even though our request response loop for
that one request was finished,

184
00:10:29,960 --> 00:10:33,750
the server's still just sitting there
waiting to respond to the next request.

185
00:10:33,750 --> 00:10:36,740
Well, let's see if we can make
this app a little more dynamic.

186
00:10:36,740 --> 00:10:39,350
Why don't we make a site
that's more personal.

187
00:10:39,350 --> 00:10:43,040
Welcome, students isn't exactly
as personable as we can make it.

188
00:10:43,040 --> 00:10:45,470
Why don't we prompt for the user's name?

189
00:10:45,470 --> 00:10:48,590
Actually I think we have a little work on
making things look a little bit prettier.