WebFund 2015W: Tutorial 1 - Revision history

Afry: /* ASIDE: if you are unsure of your account information */

2015-01-13T17:59:22Z

ASIDE: if you are unsure of your account information

← Older revision		Revision as of 17:59, 13 January 2015
Line 119:		Line 119:
	compare2406 <SCS username>		compare2406 <SCS username>

	=== ASIDE: if you are unsure of your account information ===		=== ASIDE: If you are unsure of your account information (Please read this) ===

	The SCS account would be your access.scs.carleton.ca account (which is your unix/linux account) if you do not have one or do not remember your password, please go to the main scs page [http://www.scs.carleton.ca here], click on Tech Support (top right corner), then click on accounts, Linux accounts and click the link [http://www.scs.carleton.ca/webacct/ http://www.scs.carleton.ca/webacct/], read the policy, accept, and proceed to retrieve your account information / setup your account. You will then use this password for all future save and restore operations!!)		The SCS account would be your access.scs.carleton.ca account (which is your unix/linux account) if you do not have one or do not remember your password, please go to the main scs page [http://www.scs.carleton.ca here], click on Tech Support (top right corner), then click on accounts, Linux accounts and click the link [http://www.scs.carleton.ca/webacct/ http://www.scs.carleton.ca/webacct/], read the policy, accept, and proceed to retrieve your account information / setup your account. You will then use this password for all future save and restore operations!!)

Afry: /* Saving your work */

2015-01-13T17:58:19Z

Saving your work

← Older revision		Revision as of 17:58, 13 January 2015
Line 105:		Line 105:
	==Saving your work==		==Saving your work==

	You can save your work to your SCS account by running		You can save your work to your SCS account by running (where it says <SCS username> it should just be your username no <>brackets)

	save2406 <SCS username>		save2406 <SCS username>
Line 119:		Line 119:
	compare2406 <SCS username>		compare2406 <SCS username>

			=== ASIDE: if you are unsure of your account information ===

			The SCS account would be your access.scs.carleton.ca account (which is your unix/linux account) if you do not have one or do not remember your password, please go to the main scs page [http://www.scs.carleton.ca here], click on Tech Support (top right corner), then click on accounts, Linux accounts and click the link [http://www.scs.carleton.ca/webacct/ http://www.scs.carleton.ca/webacct/], read the policy, accept, and proceed to retrieve your account information / setup your account. You will then use this password for all future save and restore operations!!)

	==CodeAcademy==		==CodeAcademy==

Soma: /* CodeAcademy */

2015-01-12T01:58:56Z

CodeAcademy

← Older revision		Revision as of 01:58, 12 January 2015
Line 126:		Line 126:
	* [http://www.codecademy.com/tracks/javascript/ Javascript]		* [http://www.codecademy.com/tracks/javascript/ Javascript]
	* [http://www.codecademy.com/tracks/jquery jQuery]		* [http://www.codecademy.com/tracks/jquery jQuery]
	* [http://www.codecademy.com/tracks/projects Web Projects]		* [http://www.codecademy.com/tracks/projects Web Projects] (just the basic projects)

	Feel free to skip around; these should be very simple for you, at least at the beginning. Try to do the last parts of each lesson to see if need to bother going through it. You'll be expected to be familiar with most of this material starting in next week's tutorial (and Assignment 2).		Feel free to skip around; these should be very simple for you, at least at the beginning. Try to do the last parts of each lesson to see if need to bother going through it. You'll be expected to be familiar with most of this material starting in next week's tutorial (and Assignment 2).

Soma at 01:57, 12 January 2015

2015-01-12T01:57:01Z

← Older revision		Revision as of 01:57, 12 January 2015
Line 1:		Line 1:
	~~'''This tutorial is not yet finalized.'''~~

	~~'''ADD: web developer tools, JavaScript console, HTTP/Networking basics.'''~~

	For this class you will be using a [http://www.lubuntu.net/ Lubuntu] virtual machine appliance. We will be using [https://www.virtualbox.org/ VirtualBox] as our preferred virtualization platform; however, VMware Workstation/Fusion and other virtualization platforms should be able to run the appliance as well. In this first tutorial you will be becoming familiar with [http://nodejs.org/ node.js]-based development environment provided by this appliance.		For this class you will be using a [http://www.lubuntu.net/ Lubuntu] virtual machine appliance. We will be using [https://www.virtualbox.org/ VirtualBox] as our preferred virtualization platform; however, VMware Workstation/Fusion and other virtualization platforms should be able to run the appliance as well. In this first tutorial you will be becoming familiar with [http://nodejs.org/ node.js]-based development environment provided by this appliance.

Soma: /* Observing/Debugging the Web App */

2015-01-12T01:49:50Z

Observing/Debugging the Web App

← Older revision		Revision as of 01:49, 12 January 2015
Line 86:		Line 86:
	When you attempt to observe or debug a web application, you have to keep an eye on what happens on the server, what happens on the client (web browser), and what happens on the network in between.		When you attempt to observe or debug a web application, you have to keep an eye on what happens on the server, what happens on the client (web browser), and what happens on the network in between.

	You can use the browser's built-in developer tools to look at the network activity (as seen by the browser of course) and what happens with the actual rendering of the web page. In either Firefox or Chromium (the open source version of Chrome) you can get access to the developer tools by ~~typi~~		You can use the browser's built-in developer tools to look at the network activity (as seen by the browser of course) and what happens with the actual rendering of the web page. In either Firefox or Chromium (the open source version of Chrome) you can get access to the developer tools by typing the key sequence Shift-Control-I or by selecting the developer tools from the menu. Pay particular attention to these tabs:
	ng the key sequence Shift-Control-I or by selecting the developer tools from the menu. Pay particular attention to these tabs:
	* The Network tab tells you about what has been sent and received.		* The Network tab tells you about what has been sent and received.
	* The Inspector or Elements tab lets you examine the DOM (document object model), i.e., the parsed version of the web page.		* The Inspector or Elements tab lets you examine the DOM (document object model), i.e., the parsed version of the web page.
Line 94:		Line 93:

	To find out what is happening on the server side, for now you'll have to either add console.log() or console.error() statements to print things out. Later we will learn how to use the node debugger.		To find out what is happening on the server side, for now you'll have to either add console.log() or console.error() statements to print things out. Later we will learn how to use the node debugger.


	==Simple Changes==		==Simple Changes==

Soma at 01:44, 12 January 2015

2015-01-12T01:44:10Z

← Older revision		Revision as of 01:44, 12 January 2015
Line 32:		Line 32:

	While you may update the software in the VM, those updates will be lost when you next login to the lab machines; thus, you probably only want to update a VM installed on your own system.		While you may update the software in the VM, those updates will be lost when you next login to the lab machines; thus, you probably only want to update a VM installed on your own system.


	==Hello, World!==		==Hello, World!==
Line 53:		Line 54:

	Note that when run interactively, we say that node is running a [http://en.wikipedia.org/wiki/Read%E2%80%93eval%E2%80%93print_loop read-eval-print loop] (REPL). It reads input, evaluates it, and then prints the results. This structure is very old in computer science, going back to the first LISP interpreters from the early 1960's.		Note that when run interactively, we say that node is running a [http://en.wikipedia.org/wiki/Read%E2%80%93eval%E2%80%93print_loop read-eval-print loop] (REPL). It reads input, evaluates it, and then prints the results. This structure is very old in computer science, going back to the first LISP interpreters from the early 1960's.


	==Your First Web App==		==Your First Web App==
Line 78:		Line 80:
	cd myapp		cd myapp
	DEBUG=myapp ./bin/www		DEBUG=myapp ./bin/www


			==Observing/Debugging the Web App==

			When you attempt to observe or debug a web application, you have to keep an eye on what happens on the server, what happens on the client (web browser), and what happens on the network in between.

			You can use the browser's built-in developer tools to look at the network activity (as seen by the browser of course) and what happens with the actual rendering of the web page. In either Firefox or Chromium (the open source version of Chrome) you can get access to the developer tools by typi
			ng the key sequence Shift-Control-I or by selecting the developer tools from the menu. Pay particular attention to these tabs:
			* The Network tab tells you about what has been sent and received.
			* The Inspector or Elements tab lets you examine the DOM (document object model), i.e., the parsed version of the web page.
			* The Console tab gives you a JavaScript prompt in the context of the web page.
			For example, to find out the user agent string of the current browser type "navigator.userAgent" in the Console tab.

			To find out what is happening on the server side, for now you'll have to either add console.log() or console.error() statements to print things out. Later we will learn how to use the node debugger.


	==Simple Changes==		==Simple Changes==
Line 85:		Line 102:
	* Change the title to "My First Web App" (<tt>routes/index.js</tt>)		* Change the title to "My First Web App" (<tt>routes/index.js</tt>)
	* Prevent the default stylesheet <tt>style.css</tt> from being loaded (<tt>views/layout.jade</tt>)		* Prevent the default stylesheet <tt>style.css</tt> from being loaded (<tt>views/layout.jade</tt>)
			* Add a paragraph to the initial page saying "This page is pretty boring."

			Note that the Jade files (ending in .jade) are used to generate HTML files. Compare the source of the page as seen by the web browser to the original .jade files to see how they connect. Also, you can look at the [http://jade-lang.com/reference/ Jade documentation].

			We don't expect you to understand everything that you are doing in this tutorial; these exercises are more designed to get your feet wet tos you can start asking the right kinds of questions.


	==Saving your work==		==Saving your work==
Line 101:		Line 124:

	compare2406 <SCS username>		compare2406 <SCS username>


	==CodeAcademy==		==CodeAcademy==

Soma: /* CodeAcademy */

2015-01-12T01:08:27Z

CodeAcademy

← Older revision		Revision as of 01:08, 12 January 2015
Line 104:		Line 104:
	==CodeAcademy==		==CodeAcademy==

	Now that you've got your virtual machine running, it is time to start learning about web technologies. ~~In tutorial (if~~ you ~~have time) or on your own~~, you should either go through or make sure you know the material in all of the following CodeAcademy modules:		Now that you've got your virtual machine running, it is time to start learning about web technologies. If you haven't already, you should either go through or make sure you know the material in all of the following CodeAcademy modules:
	* [http://www.codecademy.com/tracks/web Web Fundamentals]		* [http://www.codecademy.com/tracks/web Web Fundamentals]
	* [http://www.codecademy.com/tracks/javascript/ Javascript]		* [http://www.codecademy.com/tracks/javascript/ Javascript]

Soma: /* CodeAcademy */

2015-01-12T01:07:56Z

CodeAcademy

← Older revision		Revision as of 01:07, 12 January 2015
Line 110:		Line 110:
	* [http://www.codecademy.com/tracks/projects Web Projects]		* [http://www.codecademy.com/tracks/projects Web Projects]

	Feel free to skip around; these should be very simple for you, at least at the beginning. Try to do the last parts of each lesson to see if need to bother going through it. You'll be expected to ~~know~~ most of this material in ~~order to successfully complete the first assignment~~.		Feel free to skip around; these should be very simple for you, at least at the beginning. Try to do the last parts of each lesson to see if need to bother going through it. You'll be expected to be familiar with most of this material starting in next week's tutorial (and Assignment 2).

Soma: /* Simple Changes */

2015-01-12T01:05:52Z

Simple Changes

← Older revision		Revision as of 01:05, 12 January 2015
Line 82:		Line 82:

	Now that you have an app up and running, make the following simple changes:		Now that you have an app up and running, make the following simple changes:
	* Change the default port to 2000 (~~<tt>app.js<~~/~~tt>~~)		* Change the default port to 2000 (by editing bin/www)
	* Change the title to "My First Web App" (<tt>routes/index.js</tt>)		* Change the title to "My First Web App" (<tt>routes/index.js</tt>)
	* Prevent the default stylesheet <tt>style.css</tt> from being loaded (<tt>views/layout.jade</tt>)		* Prevent the default stylesheet <tt>style.css</tt> from being loaded (<tt>views/layout.jade</tt>)

Soma: /* Your First Web App */

2015-01-11T22:45:55Z

Your First Web App

← Older revision		Revision as of 22:45, 11 January 2015
Line 58:		Line 58:
	Web applications, even simple ones, are a bit more complex than our "Hello, world!" example. Fortunately in node we have the [http://expressjs.com/ express] web application framework to make getting up and running quite easy.		Web applications, even simple ones, are a bit more complex than our "Hello, world!" example. Fortunately in node we have the [http://expressjs.com/ express] web application framework to make getting up and running quite easy.

	In a terminal window, run the following commands:		Follow the directions for the [http://expressjs.com/starter/generator.html express application generator] in a terminal window. In short form, you should run the following commands to make "myapp":

	express ~~first~~		sudo npm install express-generator -g
	cd ~~first~~		express myapp
			cd myapp
	npm install		npm install
	~~node app~~.js		DEBUG=myapp ./bin/www

	~~You should get a message at the end saying that your app is listening on port 3000.~~ To see what your app is doing, start up a web browser in your VM and visit the following URL:		To see what your app is doing, start up a web browser in your VM and visit the following URL:

	http://localhost:3000		http://localhost:3000
Line 71:		Line 72:
	You should see a message from your first web application!		You should see a message from your first web application!

	~~'''Note:''' It seems that doing the above~~ can ~~generate errors due to recent changes in~~ the ~~Jade template engine. Also, npm may run very slowly due to networking issues. So alternately, do~~ the following:		If you have any problems, particularly with network connections, you can get and run the basic app by instead doing the following:

	~~# simulate "express first" (create application skeleton)~~		wget http://homeostasis.scs.carleton.ca/~soma/webfund-2015w/code/myapp.zip
	wget ~~https~~://homeostasis.scs.carleton.ca/~soma/webfund-~~2014w~~/T1/~~first~~.zip		unzip myapp
	unzip ~~first.zip~~		cd myapp
	~~rm first.zip~~		DEBUG=myapp ./bin/www

	cd ~~first~~

	~~wget https://homeostasis.scs.carleton~~.~~ca/~soma/webfund-2014w~~/T1/~~node_modules.zip~~
	~~unzip node_modules.zip~~
	~~rm node_modules.zip~~

	~~# make sure dependencies are fulfilled; should return quickly~~
	~~npm install~~

	~~node app.js~~

	==Simple Changes==		==Simple Changes==