Beginning Servi, Step by Step

README.md

Networked Media Week 1 Assignment

Spring 2015

The focus of this assignment is process over product. Each example script builds on the previous one. We're starting small and working iteratively. Download this gist and work off of my examples to build your own scripts. You should run the code on your local machine using Node and Servi. See below for how to submit the completed exercise.

TASK: Create a server in Servi to manage a barebones, text-based website. The site will have the following elements:

1. A home page
2. Two or more additional static pages, such as "About", "Jokes", "Cat Photos", "Resume", etc. etc.
3. A set of dynamically generated pages that all have the same basic structure, but change content based on information provided by the user in the URL. For example, on Facebook, each person's profile page looks basically the same, it just has their particular name, posts, photos, etc. Of course, your task is much more simple. For example you might have a page that says "Hello Jack" vs. "Hello Jill".

More details about how to acheive this technically are in the comments of the code files themselves. Also read the Routing section of my wiki article about Using Servi. You can also refer to the Official Servi Documentation.

###To Submit the Assigment When you are ready to submit the assignment, fork this gist project and edit each of the files to contain your code instead of mine. Overwrite the README.md document to describe your project and your process.

server_v1.js

/*
----
Version 1: Defining Static Routes
----
This code contains line-by-line comments to help you understand what each piece of the script is doing. Read through it carefully.
*/

// Every servi application must have these 2 lines
var servi = require('servi');
var app = new servi(true);

// Set the port (defaults to 3000 if you leave out this line)
port(3001);  // Choose most any 4-digit number you like

/* 
## Define the first route ##
A route is a URL path. It's anything that comes after your domain name or IP address.
Setting a route called '/photos' determines what happens when someone goes to http://localhost:3001/photos

In Servi, *route()* takes two parameters: 
    1. the path 
    2. the function to call when someone visits the path (aka the URL)

Here, we're defining a home page, so the route is simply '/' --
    this determines what happens when someone hits http://localhost:3001/

Then we tell the route to call our function "showHome" whenever someone hits that URL.

In Javascript, this type of function is often called a *CALLBACK FUNCTION* 
-- in other words, it doesn't fire right away; it waits for an action to happen first, ie, it waits to get the "call" before proceeding. 
*/

route('/',showHome); 


/* 
## Declare the callback function used in route() ## 
Now define the showHome() method that we referenced in route()
Any function used in route() must take one parameter
You don't need to define that parameter yourself -- the route() function handles it -- 
    but you do need to include it. 
    The parameter is an object that holds info about the client request, so we'll name it 'request'

*/
function showHome(request){ 
    // 'request' is an object with a method called *respond()*
    // Use the *respond()* method to send back something to the client, aka the browser.
    request.respond("This is the home page."); 
}
/* 
----------------------

 #### TO DO: #### 
 define 2+ more routes with corresponding functions
 example: route('/monkeys',goBananas);
 
---------------------- 
*/

// VERY IMPORTANT! start the server!
start();

server_v2.js

/*
----
Version 2: Define one or more dynamic routes
----
*/

// Every servi application must have these 2 lines
var servi = require('servi');
var app = new servi(true);
// Set the port number
port(3111); 

/* 
----------------------

This version will build off version 1.
You may want to paste in your static routes from your previous version here.

---------------------- 
*/

// ### Using variables in a route. ###
// Example:
route('/vegetables/:vegname',myFunction); 
/* 
You can define variables in routes by using the ":" (colon)
In this example, this route would correspond not just to one path, but any number of variations, such as
http://localhost:3000/vegetables/squash
http://localhost:3000/vegetables/kale
http://localhost:3000/vegetables/spaceship

*/

// ## GET the values of the variables out of the URL
// This is the function that corresponds to the route '/vegetables/:vegname' from above
function myFunction(request){
    // Access the value of the variable ":vegname" with the syntax 'request.params.vegname'
    // 'request.params' will always be the same. The third part depends on what you called it when you defined the route
    // For example, it could be requests.params.username or requests.params.score or requests.params.city
    request.respond("Your vegetable is: " + request.params.vegname);  
    // If using the example URLs above, this might output:
    // Your vegetable is: squash
    // Your vegetable is: kale
    // Your vegetable is: spaceship
}

/*
Note: 
In your version, the function should not be called "myFunction". Modify it and name it something meaningful.
Function names are often verbs, like "getVegetable", "showProfilePage", "processForm", etc.
*/

/* 
----------------------

 #### TO DO: #### 
 Define at least one dynamic route, where you use a variable from the URL to display something to on the page.
 (Remove my vegetables example.)
 
 You are encouraged to take this as far as you like. Have fun with it. If you know a some HTML, feel free to sprinkle it in. 
 If you're feeling enthuastic, read ahead about Servi and see what else you can get to work. 
 
 On the other hand, if you're struggling with the basics, then just the basics are fine too.
---------------------- 
*/

// DON'T FORGET TO start the server!
start();