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.