Servi Step By Step

README.md

Networked Media Week 5 Assignment

Create a server in Servi to manage a simple web site. The site will have, at minimum, the following pages:

• Home page
• A static page, for example, "About" or "FAQ"
• A set of dynamically generated pages that all have the same structure but contain different data. For example, in an online store, each product has its own page and all of the product pages use the same template.

The focus of this assignment is process over product. You will build out the site using an iterative process, starting small and adding new features to your project as you go. Instead of turning in a URL to a live server, as we've done in previous assignments, you'll turn in a link to a gist project containing 3 files.

To complete this assignment, download this gist. It contains 3 files: server_v1.js, server_v2.js, and server_v3.js. Each file is a version of a project that builds off the previous one.

Build your project in 3 steps:

• Step 1 ( server_v1.js ) : Define at least 2 static routes in servi. One should be the route at the root level, with the path '/', aka the home page. The initial set-up code is written for you in server_v1.js. See that file for more information and examples.

• Step 2 (server_v2.js) : Building off step 1, define a dynamic route in Servi. The route will use a variable in the format, '/stuff/:something'. See the file server_v2.js for details. There is also a related example in the repo for this course: 01-servi-userprofiles

• Step 3 (server_v3.js) : Working from your previous version, set up some data in an object or an array, and use the route variable to pull a particular piece of the data. See the file server_v3.js for some examples of how to structure data in an object or an array. This file does not include starting code; use your code from version 2 as a base. See this related example in the repo: 02-servi-userprofiles-data.

• Optional Step 4 : If you like, you can use HTML templates to format your pages. See the instructions on how to use templates with Servi and the Servi template example in the repo

####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: Define some static routes

// a server that defines some static routes
// 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); 
// start the server
start();

// define the first route -- home page
route('/',showHome);

// define the showHome method
function showHome(request){
    request.respond("This is the home page."); 
    // Or, you could serve a static HTML file instead:
    //    request.serveFile("my_home_page.html");
}

// TO DO: 
// define 2+ more routes with corresponding functions

server_v2.js

// Version 2: Define one or more dynamic routes

var servi = require('servi');
var app = new servi(true);
port(3002); 
start();

/*
TO DO:
Start with the previous version, with static routes defined, and add dynamic routes

*/

// example dynamic route:
route('/vegetables/:vegname',myFunction); // variable names use ":" 

// inside the callback function, access the variable ":vegname" with request.params.vegname
// example callback function:
function myFunction(request){
    request.respond("Your vegetable is: " + request.params.vegname);  
}

// For another example of dynamic routing, see: 
//    https://github.com/robynitp/networkedmedia/blob/master/10-server-side/01-servi-userprofiles/server.js

/*
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.
*/

server_v3.js

// Version 3: Use dynamic data

// Fill in the necessary starting code for Servi

/*
TO DO: 
Working from your previous version, set up some data in an object or an array, 
and use the route variable to pull a particular piece of data from the object.

NOTICE that you'll need to write the Servi code yourself in this file. It is not started for you as in the previous versions. 
*/

// === DATA EXAMPLES === //

// You could store data in an ARRAY ... 
// example data array:
var toads = [];
toads[1] = "Yosemite Toad";
toads[2] = "Great Plains Toad";
toads[3] = "Green Toad";	 
toads[4] = "Black Toad"; 

// you could get the index number of the array from a route parameter variable
// for example:
var toad_id = 2; //instead of 2, use a value from request.params.NAME_OF_ROUTE_VARIABLE

// pull out the piece of data from the array, based on the index number like this:
toads[toad_id];

// -------- //
// Or for more complex data, store it in an OBJECT ...
// example data object:
myToadCollection = {
  yosemite: {
     common_name: 'Yosemite Toad',
     scientific_name: 'Anaxyrus canorus',
     description: 'A robust and stocky toad with dry, uniformly warty skin.',
     photo: 'http://www.californiaherps.com/frogs/images/acanorusac7116.jpg',
     sounds: 'http://www.californiaherps.com/sounds/bcanorus7.mp3'
  },
  boreal: {
     common_name: 'Boreal Toad',
     scientific_name: 'Anaxyrus boreas boreas',
     description: 'A large and robust toad with dry, warty skin.',
     photo: 'http://www.californiaherps.com/frogs/images/bbboreasrnphumboldt.jpg',
     sounds: 'http://www.californiaherps.com/sounds/bbboreasfl406solo.mp3'
  }
};

// access one data point (aka one toad) in this object:
console.log(myToadCollection.yosemite); // the whole Yosemite Toad object
// just like in JSON, drill down to the data you want:
console.log(myToadCollection.yosemite.scientificName); // the string 'Anaxyrus canorus'

// if the value "yosemite" was in a variable, instead of hard-coded, like above,
// you'd access it, like this:
var myToad = 'yosemite'; // this value could come from the route parameters. 
myToadCollection[myToad]; // gives you the object myToadCollection.yosemite

/*
Write your Servi code, using your previous version as a base.
As an example, your route might look like:
    route('/toads/:toadIdNumber',showToad);
or:
    route('/allmytoads/:toadName',viewMyToad);

For an example of using a data array with a Servi route and callback function, see: 
https://github.com/robynitp/networkedmedia/blob/master/10-server-side/02-servi-userprofiles-data/server.js

OPTIONALLY, you can use HTML templates to format your pages. 
- For instructions on how to use templates with Servi, see: https://github.com/robynitp/networkedmedia/wiki/Week-5-Notes#templating
- For an example using templates, see: https://github.com/robynitp/networkedmedia/tree/master/10-server-side/05-servi-template

*/

// =
// =
// === delete my ridic data examples from the project files you turn in! === //
// === your code should be toad-free! === //
// =
// =