WebFund 2015W: Tutorial 1: Difference between revisions

From Soma-notes
No edit summary
Afry (talk | contribs)
 
(11 intermediate revisions by 2 users not shown)
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.


Line 11: Line 7:
==Running the VM==
==Running the VM==


In the SCS labs you should be able to run the VM by starting Virtualbox (listed in the Applications menu) and selecting the COMP 2406 virtual machine.  After the VM has fully booted up you can login to the student account using the password "tneduts!".  This account has administrative privileges; in addition, there is the admin account in case your student account gets corrupted for any reason.  The password for it is "nimda!".
In the SCS labs you should be able to run the VM by starting Virtualbox (listed in the Applications menu) and selecting the COMP 2406 virtual machine.  After the VM has fully booted up you should be logged in automatically as the user "student".  If the screen locks or you need administrative access (via sudo) you'll need the password for the student account, however.  This password is "tneduts!" (students backwards followed by an !)There is also an admin account in case your student account gets corrupted for any reason.  The password for it is "nimda!".


We highly recommend running your VM in full-screen mode.  (Don't maximize the window; instead select full screen from the view menu.)  Do all of your work inside of the VM; it should be fast enough and you won't have any issues with sharing files or with host firewalls.
We highly recommend running your VM in full-screen mode.  (Don't maximize the window; instead select full screen from the view menu.)  Do all of your work inside of the VM; it should be fast enough and you won't have any issues with sharing files or with host firewalls.


If you want to run the appliance on your own system (running essentially any desktop operating system you want), just download the
If you want to run the appliance on your own system (running essentially any desktop operating system you want), just [http://homeostasis.scs.carleton.ca/~soma/VMs/COMP%202406%20Winter%202015.ova download the
[https://onedrive.live.com/redir?resid=E6AC3A7CA1F6A174!1729&authkey=!AELr0qhKpw6qOsI&ithint=file%2cova COMP 2406.ova] virtual appliance file and import.  The SHA1 hash of this file is:
virtual appliance file] and import.  The SHA1 hash of this file is:


   3c0ad1c89d58b5b9b1225a3a7c876a500e0621a8 COMP 2406.ova
   47849f3c5a4b11e1c701bd95ba4bb8f88062d8ba COMP 2406 Winter 2015.ova


On Windows you can compute this hash for your downloaded file using the command [http://support.microsoft.com/kb/889768 <tt>FCIV -sha1 COMP 2406.ova</tt>].  If the hash is different from above, your download has been corrupted.
On Windows you can compute this hash for your downloaded file using the command [http://support.microsoft.com/kb/889768 <tt>FCIV -sha1 COMP 2406 Winter 2015.ova</tt>].  If the hash is different from above, your download has been corrupted.




Line 26: Line 22:
* Have the VM platform ignore any errors in the structure of the appliance when importing;
* Have the VM platform ignore any errors in the structure of the appliance when importing;
* Uninstall the VirtualBox guest additions by typing starting a terminal application and running
* Uninstall the VirtualBox guest additions by typing starting a terminal application and running
   sudo /opt/VBoxGuestAdditions-4.2.16/uninstall.sh
   sudo /opt/VBoxGuestAdditions-4.3.10/uninstall.sh
* Install your platform's own Linux guest additions, if available.
* Install your platform's own Linux guest additions, if available.


Line 32: Line 28:


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!==


To create your first node application, start [http://www.geany.org/ geany], [http://brackets.io/ brackets], or [http://www.gnu.org/software/emacs/ emacs] code editors by clicking on their quick launch icons at the bottom left of the screen (beside the LXDE start menu button).
To create your first node application, start [http://www.geany.org/ geany], [http://brackets.io/ brackets], [http://www.vim.org/ vim], or [http://www.gnu.org/software/emacs/ emacs] code editors by clicking on their quick launch icons at the bottom left of the screen (beside the LXDE start menu button).


(While vi is also installed in the VM, you may wish to run emacs and type Alt-X [http://www.gnu.org/software/emacs/manual/html_mono/viper.html viper-mode].  You're welcome.)
(If you are a fan of vi but want to try emacs, you should type Alt-X [http://www.gnu.org/software/emacs/manual/html_mono/viper.html viper-mode].  You're welcome.)


In your editor of choice, create a file <tt>hello.js</tt> in your Documents folder with the following contents:
In your editor of choice, create a file <tt>hello.js</tt> in your Documents folder with the following contents:
Line 53: Line 50:


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 58: Line 56:
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 70:
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:
 
  wget http://homeostasis.scs.carleton.ca/~soma/webfund-2015w/code/myapp.zip
  unzip myapp
  cd myapp
  DEBUG=myapp ./bin/www
 
 
==Observing/Debugging the Web App==


  # simulate "express first" (create application skeleton)
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.
  wget https://homeostasis.scs.carleton.ca/~soma/webfund-2014w/T1/first.zip
 
  unzip first.zip
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:
  rm first.zip
* 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.
  cd first
* 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.
  wget https://homeostasis.scs.carleton.ca/~soma/webfund-2014w/T1/node_modules.zip
 
  unzip node_modules.zip
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.
  rm node_modules.zip
 
  # make sure dependencies are fulfilled; should return quickly
  npm install
 
  node app.js


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


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>)
* 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==


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 111: Line 118:


   compare2406 <SCS username>
   compare2406 <SCS username>
=== 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!!)


==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]
* [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 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).

Latest revision as of 17:59, 13 January 2015

For this class you will be using a Lubuntu virtual machine appliance. We will be using 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 node.js-based development environment provided by this appliance.

To get credit for this lab, show a TA or the instructor that you have gotten the class VM running, made simple changes to your first web app, and that you have started lessons on CodeAcademy (or convince them you don't need to).

If you finish early (which you are likely to do), try exploring node and the Lubuntu environment. You will be using them a lot this semester!

Running the VM

In the SCS labs you should be able to run the VM by starting Virtualbox (listed in the Applications menu) and selecting the COMP 2406 virtual machine. After the VM has fully booted up you should be logged in automatically as the user "student". If the screen locks or you need administrative access (via sudo) you'll need the password for the student account, however. This password is "tneduts!" (students backwards followed by an !). There is also an admin account in case your student account gets corrupted for any reason. The password for it is "nimda!".

We highly recommend running your VM in full-screen mode. (Don't maximize the window; instead select full screen from the view menu.) Do all of your work inside of the VM; it should be fast enough and you won't have any issues with sharing files or with host firewalls.

If you want to run the appliance on your own system (running essentially any desktop operating system you want), just [http://homeostasis.scs.carleton.ca/~soma/VMs/COMP%202406%20Winter%202015.ova download the virtual appliance file] and import. The SHA1 hash of this file is:

 47849f3c5a4b11e1c701bd95ba4bb8f88062d8ba  COMP 2406 Winter 2015.ova

On Windows you can compute this hash for your downloaded file using the command FCIV -sha1 COMP 2406 Winter 2015.ova. If the hash is different from above, your download has been corrupted.


If your virtualization application is not VirtualBox, you'll need to:

  • Have the VM platform ignore any errors in the structure of the appliance when importing;
  • Uninstall the VirtualBox guest additions by typing starting a terminal application and running
  sudo /opt/VBoxGuestAdditions-4.3.10/uninstall.sh
  • Install your platform's own Linux guest additions, if available.

Note as we will explain, you will have the ability to easily save the work you do from any VM to your SCS account and restore it to any other copy of the class VM. Thus feel free to play around with VMs; if you break anything, you can always revert. Remember though that in the labs you must save and restore your work, as all of your changes to the VM will be lost when you logout!

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!

To create your first node application, start geany, brackets, vim, or emacs code editors by clicking on their quick launch icons at the bottom left of the screen (beside the LXDE start menu button).

(If you are a fan of vi but want to try emacs, you should type Alt-X viper-mode. You're welcome.)

In your editor of choice, create a file hello.js in your Documents folder with the following contents:

  console.log("Hello World!");

You can now run this file by opening an LXTerminal (under Accessories) and typing:

  cd Documents
  node hello.js

And you should see Hello, World! output to your terminal.

You can also run node interactively by simply running node with no arguments. You'll then get a prompt where you can enter any code that you like and see what it does. To exit this environment, type Control-D.

Note that when run interactively, we say that node is running a 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

Web applications, even simple ones, are a bit more complex than our "Hello, world!" example. Fortunately in node we have the express web application framework to make getting up and running quite easy.

Follow the directions for the express application generator in a terminal window. In short form, you should run the following commands to make "myapp":

 sudo npm install express-generator -g
 express myapp
 cd myapp
 npm install
 DEBUG=myapp ./bin/www

To see what your app is doing, start up a web browser in your VM and visit the following URL:

 http://localhost:3000

You should see a message from your first web application!

If you have any problems, particularly with network connections, you can get and run the basic app by instead doing the following:

 wget http://homeostasis.scs.carleton.ca/~soma/webfund-2015w/code/myapp.zip
 unzip myapp
 cd myapp
 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 typing 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

Now that you have an app up and running, make the following simple changes:

  • Change the default port to 2000 (by editing bin/www)
  • Change the title to "My First Web App" (routes/index.js)
  • Prevent the default stylesheet style.css from being loaded (views/layout.jade)
  • 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 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

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>

This will rsync /home/student to the COMP2406 directory in your SCS account by connecting to access.scs.carleton.ca.

When you wish to restore your student account, run

 restore2406 <SCS username>

Note that both of these commands are destructive - they will wipe out all the files in the COMP2406 folder on SCS or /home/student in your VM. If you want to see what the differences are between the two versions, run

 compare2406 <SCS username>

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 here, click on Tech Support (top right corner), then click on accounts, Linux accounts and click the link 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

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:

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).