1
00:00:00,000 --> 00:00:02,000
Now, Code Racer is a very complex project,

2
00:00:02,000 --> 00:00:04,000
and that means we don't have time to do all of the different parts 

3
00:00:04,000 --> 00:00:06,000
of Code Racer in these videos.

4
00:00:06,000 --> 00:00:10,000
But what we will do is create a project that has the major components of Code Racer

5
00:00:10,000 --> 00:00:13,000
and see how to build it piece by piece with Node.js,

6
00:00:13,000 --> 00:00:15,000
Express, and Socket.io.

7
00:00:15,000 --> 00:00:17,000
Let's get started.

8
00:00:17,000 --> 00:00:22,000
[? Music ?]

9
00:00:22,000 --> 00:00:25,000
The first thing that we need to do on this project is create

10
00:00:25,000 --> 00:00:28,000
a basic skeleton application.

11
00:00:28,000 --> 00:00:31,000
This will be the application that we're going to get running

12
00:00:31,000 --> 00:00:34,000
as fast as possible so that

13
00:00:34,000 --> 00:00:36,000
the developers have something to work off of

14
00:00:36,000 --> 00:00:39,000
as well as having the designers be able to create the templates

15
00:00:39,000 --> 00:00:41,000
directly in the application.

16
00:00:41,000 --> 00:00:44,000
Now, it's going to be a little while before we actually need to integrate

17
00:00:44,000 --> 00:00:48,000
the designs from the designers into our real application.

18
00:00:48,000 --> 00:00:51,000
But the sooner we get the environment for them to actually code

19
00:00:51,000 --> 00:00:54,000
real-live templates in, the better, so that's what we want to do right now

20
00:00:54,000 --> 00:00:57,000
is get a basic Node server up and running

21
00:00:57,000 --> 00:01:00,000
and some basic templates that our designers can work with

22
00:01:00,000 --> 00:01:02,000
and experiment with.

23
00:01:02,000 --> 00:01:04,000
[nodejs.org]

24
00:01:04,000 --> 00:01:06,000
The main technologies we're going to be working with are Node.js,

25
00:01:06,000 --> 00:01:09,000
and to install this, we'll just go to nodejs.org,

26
00:01:09,000 --> 00:01:12,000
and we can use the Macintosh installer.

27
00:01:12,000 --> 00:01:14,000
I've actually installed it via Homebrew,

28
00:01:14,000 --> 00:01:18,000
which is the package manager, which you can read about down here.

29
00:01:18,000 --> 00:01:23,000
But any of these options will get a Node installation up and running fairly quickly.

30
00:01:23,000 --> 00:01:26,000
So, we can see that I've installed it, and we can actually check on our Node version

31
00:01:26,000 --> 00:01:28,000
by typing in "node -v."

32
00:01:28,000 --> 00:01:34,000
And we'll see we're running 0.6.7,  which is a fairly recent release for us.

33
00:01:34,000 --> 00:01:37,000
Now obviously, depending on when you download and install Node,

34
00:01:37,000 --> 00:01:41,000
you'll get a different version, but 0.6.7 is what we'll be using right now.

35
00:01:41,000 --> 00:01:44,000
So notice the programming environment we'll be using,

36
00:01:44,000 --> 00:01:47,000
but we'll also be using another tool called NPM,

37
00:01:47,000 --> 00:01:51,000
and as of now, NPM is actually installed alongside of Node,

38
00:01:51,000 --> 00:01:55,000
so if we type in "npm -v" we'll see we get

39
00:01:55,000 --> 00:01:58,000
an NPM version of 1.1.0-beta-10.

40
00:01:58,000 --> 00:02:01,000
NPM is the tool we'll be using to manage the dependencies in our projects

41
00:02:01,000 --> 00:02:06,000
to bring in outside libraries as well as to manage the version of those libraries

42
00:02:06,000 --> 00:02:10,000
and even just keep track of the meta information of our application.

43
00:02:10,000 --> 00:02:13,000
You can learn more at npmjs.org.

44
00:02:13,000 --> 00:02:16,000
We'll also be working in CoffeeScript, which is a small language

45
00:02:16,000 --> 00:02:20,000
built on top of JavaScript that compiles to JavaScript.

46
00:02:20,000 --> 00:02:24,000
It has much of the same semantics but a slightly different syntax.

47
00:02:24,000 --> 00:02:28,000
Typically, CoffeeScript tends to be a little bit smaller

48
00:02:28,000 --> 00:02:32,000
in the amount of characters used to express certain objects.

49
00:02:32,000 --> 00:02:35,000
If you want to learn more about CoffeeScript and the type of  JavaScript it creates,

50
00:02:35,000 --> 00:02:38,000
you can learn more at coffeescript.org.

51
00:02:38,000 --> 00:02:41,000
We'll be using a couple of libraries as we go along.

52
00:02:41,000 --> 00:02:43,000
The first one we're going to encounter is called Express,

53
00:02:43,000 --> 00:02:46,000
and this is a small web application framework for Node.js

54
00:02:46,000 --> 00:02:49,000
that allows us to easily create different pages 

55
00:02:49,000 --> 00:02:51,000
and some different interactions on our site.

56
00:02:51,000 --> 00:02:56,000
A little bit later on we'll be learning about Socket.io or Socket IO,

57
00:02:56,000 --> 00:02:59,000
which is a library for using web sockets.

58
00:02:59,000 --> 00:03:01,000
And this will allow us to create an application 

59
00:03:01,000 --> 00:03:04,000
that runs in sort of real time, 

60
00:03:04,000 --> 00:03:08,000
meaning that the server can actually push data down to each of the players

61
00:03:08,000 --> 00:03:10,000
so all of them can keep their state in sync.

62
00:03:10,000 --> 00:03:13,000
 As one player does one thing, it will be communicated instantly

63
00:03:13,000 --> 00:03:16,000
to all of the other players, which is what we want for our game.

64
00:03:16,000 --> 00:03:20,000
This is the main reason we're choosing Node.js for our game application

65
00:03:20,000 --> 00:03:25,000
because the support for sockets in Socket.io is pretty good.

66
00:03:25,000 --> 00:03:28,000
The architecture of Node lends itself well to using sockets,

67
00:03:28,000 --> 00:03:32,000
which require a lot of connections to be left open at once,

68
00:03:32,000 --> 00:03:34,000
even though they're going to be mostly idle.

69
00:03:34,000 --> 00:03:37,000
This is where the event-based Node.js is the strongest.

70
00:03:37,000 --> 00:03:41,000
What I have right now is an empty folder called Code Racer,

71
00:03:41,000 --> 00:03:44,000
and this is where all of our code will be, and I have a terminal window open

72
00:03:44,000 --> 00:03:46,000
to that directory.

73
00:03:46,000 --> 00:03:49,000
I also have my editor looking at this directory right here.

74
00:03:49,000 --> 00:03:52,000
This is our Code Racer directory, and right now there is nothing in it.

75
00:03:52,000 --> 00:03:54,000
The first thing I want to do is set up our project.

76
00:03:54,000 --> 00:03:57,000
Now, there's actually a couple of dependencies I want to install

77
00:03:57,000 --> 00:03:59,000
globally on my system via NPM.

78
00:03:59,000 --> 00:04:02,000
These 2 packages are CoffeeScript, which obviously allows us 

79
00:04:02,000 --> 00:04:06,000
to run CoffeeScript files directly, and Supervisor,

80
00:04:06,000 --> 00:04:08,000
which is a way for us to run our application,

81
00:04:08,000 --> 00:04:12,000
but any time the application crashes, Supervisor will restart it.

82
00:04:12,000 --> 00:04:17,000
Also, any time we save a file, Supervisor will again restart our application.

83
00:04:17,000 --> 00:04:20,000
This is great for development since you can simply save a file

84
00:04:20,000 --> 00:04:24,000
and immediately go to your server without having to stop and start your server

85
00:04:24,000 --> 00:04:26,000
to reload your code changes.

86
00:04:26,000 --> 00:04:30,000
We're going to install Supervisor and CoffeeScript via NPM.

87
00:04:30,000 --> 00:04:36,000
I'm going to type "npm install coffee-script"

88
00:04:36,000 --> 00:04:40,000
as well as "supervisor."

89
00:04:40,000 --> 00:04:43,000
And I'm going to pass it the -g flag for global.

90
00:04:43,000 --> 00:04:46,000
This will install it to our global environment 

91
00:04:46,000 --> 00:04:53,000
instead of installing it as a dependency of this particular application.

92
00:04:53,000 --> 00:04:55,000
We got a little bit of an error here, and that's because 

93
00:04:55,000 --> 00:04:58,000
the way this computer is set up, we don't have the permissions

94
00:04:58,000 --> 00:05:01,000
in the right place for us to simply run this command,

95
00:05:01,000 --> 00:05:05,000
so instead I'll have to write "sudo,"

96
00:05:05,000 --> 00:05:11,000
and I'm going to use ! ! to run sudo on the last application.

97
00:05:11,000 --> 00:05:14,000
And when I hit Enter here, you can see that my shell has brought up

98
00:05:14,000 --> 00:05:19,000
"sudo npm install coffee-script supervisor -g."

99
00:05:19,000 --> 00:05:21,000
When I hit Enter, we'll now run it with sudo, 

100
00:05:21,000 --> 00:05:24,000
which will actually run it as a privileged user,

101
00:05:24,000 --> 00:05:27,000
which means we should be able to install into the directories

102
00:05:27,000 --> 00:05:31,000
that we didn't have access to as our normal user.

103
00:05:31,000 --> 00:05:36,000
I'll just type in my password, 

104
00:05:36,000 --> 00:05:39,000
and everything is running just fine.

105
00:05:39,000 --> 00:05:44,000
If I type in "coffee -v," you can see we have a CoffeeScript version,

106
00:05:44,000 --> 00:05:46,000
so that means we have installed it properly.

107
00:05:46,000 --> 00:05:51,000
The next step for us is to initialize a new NPM package.

108
00:05:51,000 --> 00:05:55,000
This will allow us to declare the dependencies for our application

109
00:05:55,000 --> 00:05:58,000
and manage its version through NPM.

110
00:05:58,000 --> 00:06:00,000
This is very easy to do.

111
00:06:00,000 --> 00:06:03,000
We'll type in "npm init,"

112
00:06:03,000 --> 00:06:06,000
and now it's going to interactively prompt us for some information.

113
00:06:06,000 --> 00:06:09,000
Right now we'll call our package name Code Racer.

114
00:06:09,000 --> 00:06:13,000
We'll say its description is "An awesome game."

115
00:06:13,000 --> 00:06:16,000
And all of this stuff besides the package name is optional

116
00:06:16,000 --> 00:06:21,000
and not really necessary for us to worry about right now.

117
00:06:21,000 --> 00:06:23,000
We'll just enter through it.

118
00:06:23,000 --> 00:06:25,000
It confirms  "Is this okay?"

119
00:06:25,000 --> 00:06:27,000
We'll say yes.

120
00:06:27,000 --> 00:06:30,000
And now if we go to our editor here,

121
00:06:30,000 --> 00:06:33,000
we'll see there is now a package.json file,

122
00:06:33,000 --> 00:06:35,000
and our package.json file includes the information

123
00:06:35,000 --> 00:06:38,000
that we just put in through the interactive prompt.

124
00:06:38,000 --> 00:06:40,000
But what we're going to be worrying about here is

125
00:06:40,000 --> 00:06:43,000
the dependencies object here, and this is where we'll be defining

126
00:06:43,000 --> 00:06:47,000
the dependencies that we're going to be using in our application.

127
00:06:47,000 --> 00:06:49,000
For instance, things like Express.

128
00:06:49,000 --> 00:06:51,000
The way we define our dependencies is

129
00:06:51,000 --> 00:06:53,000
we will give it key value pairs where a key

130
00:06:53,000 --> 00:06:56,000
is the name of the package we want to use

131
00:06:56,000 --> 00:06:59,000
and the value is going to be a version string.

132
00:06:59,000 --> 00:07:01,000
Right now, I want to include CoffeeScript 

133
00:07:01,000 --> 00:07:04,000
since we'll be writing our project in CoffeeScript.

134
00:07:04,000 --> 00:07:07,000
So write "coffee-script,"

135
00:07:07,000 --> 00:07:10,000
and for its version string, I'm just going to use * for right now

136
00:07:10,000 --> 00:07:13,000
because I don't know what the latest version of CoffeeScript is.

137
00:07:13,000 --> 00:07:15,000
However, later on we'll put a more specific version number in here

138
00:07:15,000 --> 00:07:19,000
to lock it down so we have a little bit more control

139
00:07:19,000 --> 00:07:22,000
over what version of each package is compatible

140
00:07:22,000 --> 00:07:24,000
with our Code Racer package.

141
00:07:24,000 --> 00:07:29,000
And the next one I'm going to want to do is to install Express.

142
00:07:29,000 --> 00:07:32,000
And that's just using Express, and again, 

143
00:07:32,000 --> 00:07:34,000
we'll use the wild card version here.

144
00:07:34,000 --> 00:07:37,000
We'll be coming back to this file every time we need a new dependency

145
00:07:37,000 --> 00:07:41,000
for our application, but let's just save this right now.

146
00:07:41,000 --> 00:07:45,000
So, our NPM command will always be working off of this package.json file.

147
00:07:45,000 --> 00:07:48,000
We saw how to use the npm init command to

148
00:07:48,000 --> 00:07:51,000
create our package.json, but we'll see another command

149
00:07:51,000 --> 00:07:53,000
called install.

150
00:07:53,000 --> 00:07:55,000
We'll type in "npm install."

151
00:07:55,000 --> 00:07:58,000
And what this will do is it will read the package.json file,

152
00:07:58,000 --> 00:08:00,000
grab all the packages and install them

153
00:08:00,000 --> 00:08:02,000
into a local directory called "node modules."

154
00:08:02,000 --> 00:08:06,000
So, if we hit Enter, we can see it's going out to get some information,

155
00:08:06,000 --> 00:08:09,000
grab our packages, and this will include

156
00:08:09,000 --> 00:08:12,000
all of the sub dependencies of our packages.

157
00:08:12,000 --> 00:08:18,000
For instance, Express itself depends on qs, mime,  mkdirp and connect.

158
00:08:18,000 --> 00:08:20,000
NPM manages all those dependencies for us

159
00:08:20,000 --> 00:08:23,000
and makes them available in our project.

160
00:08:23,000 --> 00:08:27,000
So, if we were to go into our editor here,

161
00:08:27,000 --> 00:08:30,000
we'll see we have a new directory called "node_modules."

162
00:08:30,000 --> 00:08:34,000
And this is where all of our modules have been installed.

163
00:08:34,000 --> 00:08:36,000
The way Node works when looking for dependencies

164
00:08:36,000 --> 00:08:39,000
when we use the require statement is it will try to find

165
00:08:39,000 --> 00:08:43,000
Node modules folders in the directory that it's executing in.

166
00:08:43,000 --> 00:08:46,000
Otherwise it will try to find any globally installed modules,

167
00:08:46,000 --> 00:08:48,000
like we had globally installed CoffeeScript,

168
00:08:48,000 --> 00:08:52,000
and then it will fail if it can't find those packages in any of those directories.

169
00:08:52,000 --> 00:08:54,000
Let's create what will be our server file.

170
00:08:54,000 --> 00:08:58,000
We'll create a new file, and I'm going to save it

171
00:08:58,000 --> 00:09:05,000
as server.coffee.

172
00:09:05,000 --> 00:09:10,000
And I'm going to just change our indentation here to 2 spaces.

173
00:09:10,000 --> 00:09:14,000
Let's just do a very simple file, and let's just create a Hello world file 

174
00:09:14,000 --> 00:09:16,000
for our server.coffee right now.

175
00:09:16,000 --> 00:09:22,000
What we'll do is console.log "Hello."

176
00:09:22,000 --> 00:09:25,000
And let's go to our terminal and see if we can run this file.