stuff

ajax/ajax_example/server.js

@@ -11,7 +11,7 @@ app.get('/json/instructors', function(req, res) {
 		{ name: 'Thom', exists: false },
 		{ name: 'Matt', exists: false },
 		{ name: 'Colin', exists: false },
-		{ name: 'Colin', exists: false }
+		{ name: 'Kristyn', exists: false }
 	];
 	res.send(json);
 });

ajax/ajax_homework.md

@@ -0,0 +1,178 @@
+# AJAX and JSON
+
+![ajax](https://i.ytimg.com/vi/Ga_vm0t4a9s/hqdefault.jpg)
+
+
+AJAX is a way to use Javacript to make a request to a server. So far you have seen GET requests made from the browser (url bar) and from cURL, but we can make any kind of request in our Javascript by using AJAX. 
+
+AJAX is an acronym for Asynchronous JSON and XML. 
+
+We will be using AJAX to get JSON data either from a remote server route that serves JSON and/or from our own routes that server JSON. With AJAX we can grab that JSON, then, you can do whatever you like with that data, including rendering it on a page.
+
+
+## 1. AJAX REQUESTS
+
+####1. Go to NYC Open Data
+
+Go to NYC Open Data and query the server for all the subway stations in the network (remember I showed this on Tuesday). 
+
+From here: (https://data.cityofnewyork.us/Transportation/Subway-Stations/arq3-7z49) , click on Export and ask for JSON. Copy the url from the url bar but remove the `?accessType=DOWNLOAD` query from your url copy.
+
+Your url should look like this:
+`https://data.cityofnewyork.us/api/views/kk4q-3rt2/rows.json`
+
+Set up your basic javascript environment-- *not in Node* -- just a basic **index** and **app.js**
+
+In your app.js, make an ajax request to your NYC Open Data url and just console.log the data you get back.
+
+Look at Akira's lesson for the complete version of an ajax request. You will need jQuery to make the request from your app.js. The simplest version of a request will look like this:
+
+```
+$.ajax({ 
+	url: 'some_url' 
+}). done(function (result) {
+	// do something with result
+})
+       
+```
+
+You can iterate through that data (result) and just take the pieces you want.
+
+####2. Iterate through the data and console.log just the name of each station and the trains that serve it.
+
+...
+
+####3. Make a webpage with a button. When you click that button, your program will make an ajax request and then show you a random subway station on the page(the name of station and the trains that serve it).
+
+
+...
+
+
+## 2. SERVING JSON FROM EXPRESS
+
+
+#### 1. Initialize a new Express app 
+
+We will require express in our `server.js` slightly differently this time:
+
+```
+var express = require('express'),
+	app = express();
+```
+
+Here we use the varible `express` to grab the express module, and we declare `app` to grab an executed version of the express module. 
+
+Remember to add a listener.
+
+
+#### 2. Define some JSON data.
+
+In your `server.js`, you can define some JSON data of your own. You don't need to put it inside a route-- it's just javascript.
+
+Make some json data of your favorite films. You will want an array of objects for your films. Your data structure should look something like this, with a title, director, and year for your films:
+
+```
+data = {
+	films: [
+		{
+			title: "Eraserhead",
+			director: "David Lynch",
+			year: 1977
+		},
+		{
+			title: "La Notte",
+			director: "Michelangelo Antonioni",
+			year: 1961
+		},
+		{
+			title: "Sanma no Aji",
+			director: "Ozu Yasujiro",
+			year: 1962
+		}
+	]
+}
+```
+
+#### 3. Make a GET route for `'/api/films'`
+
+Put your data outside of your route. Make a GET route for `'/api/films'`. Within your `'/api/films'` route, you can send all of your JSON data to the page with `res.send(data)`, or if you're feeling fancy, you can use `res.json(data)`. (It's worth looking at the docs to see what the difference is between `res.send` and `res.json`).
+
+Start your server and go to the `localhhost:3000/api/films` route and make sure that your server is putting all your JSON to the page. 
+
+Congratulations, you have made your first API.
+
+In **RESTful** terms, this is your **index** route that serves all films. Now, we will make a **show** route.
+
+#### 4. Make a GET route for `'api/films/:id'`
+
+This route will display only a single film from your data JSON object. You will need to access `req.params.id` and match that to the index + 1 of the array of films, and `res.send` just that single object from the array.
+
+Go to the route in the browser and make sure it displays only the object for that particular film.
+
+
+## 3. ACCESSING YOUR OWN API
+
+Before, when you accessed the NYC Open Data API, you were just using **static** files (index.html, app.js, etc), and not **server** files to do so. Now, we will make a section of our server that handles only **static** files. These are separate from **server** files. With our **static** files we can make a webpage that can pull from our own API.
+
+#### 1. Setting up static files
+
+Make a folder in the root of your project called 'public'. This is where all your static files will live. This is similar to the assets folder in Rails.
+
+You don't need an npm package to serve static files, you can just include the snippet in your server.js:
+
+```
+app.use(express.static('public'));
+```
+
+This tell Express that there is a folder called 'public' where all your static files are stored. In the public folder, make an: `index.html`, `app.js` and link them together with a `script` tag. You can also put a `style.css` in here. You don't need anything in them just now. First, we want to tell express which route to go to send us the static assets. 
+
+When you now go to your **root** route in the browser, Express will serve index.html. It just knows to look in the public folder for your static assets and make them available to the root.
+
+##### NOTE:
+
+**If** your app cannot GET from the root in your browser (if your html file is not called 'index.html' it might not like it), make a GET root route and res.send your html file. Example:
+
+```
+app.get('/', function(req, res) {
+	res.send('somefile.html')
+})
+```
+
+#### 2. Make a webpage that accesses your own API
+
+Now you can access your own API through a static webpage. In fact, if your server were connected to the internet, anyone could access your API and build their own webpage with your JSON data, just like you made your own webpage using the data from Open Data NYC. This is a little different because you are doing it with your own data. But ... interesting note: This is the premise behind front-end frameworks like Angular, Backbone, etc. They are just static assets that request data from a server. Here, we are not using Angular or Backbone, we are making AJAX requests to our server with jQuery.
+
+Using jQuery in your static javascript file in your public folder (app.js), write an ajax request that grabs your own data from `'/api/films'` and console.log that data for testing purposes.
+
+Write in javascript code in `app.js` that will display the title, director, and year of each film on your webpage: this will not be JSON, you were taking the JSON and turning it into a nicely presented webpage.
+
+Make it so that this film info is displayed only when you press a button.
+
+Next, make it so that if you press another button, you will get back only a single film from `'/api/films/:id'`, depending on which id you send. For example, you could make an ajax request:
+
+```
+$.ajax({ 
+	url: '/api/films/3' 
+}). done(function(result) {
+	// do stuff with result	
+});
+```
+And get back only film 3 after you have pressed a button.
+
+
+...
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

ajax/ajax_quick.md

@@ -0,0 +1,57 @@
+![ga](http://mobbook.generalassemb.ly/ga_cog.png)
+
+# WDI-PANTHALASSA
+
+
+---
+Title: AJAX in 25 mins <br>
+Type: Afternoon Exercise<br>
+Duration: 25 mins <br>
+Creator: Thom Page <br>
+Course: WDIr-Panthalassa<br>
+
+---
+
+## AJAX in 20 mins
+
+AJAX is a way to use Javacript to make a request to a server. So far you have seen GET requests made from the browser (url bar) and from cURL, but we can make requests using Javascript with AJAX. 
+
+AJAX is an acronym for Asynchronous JSON and XML. 
+
+#### Syntax
+
+```
+$.ajax( 'url' ).done(function(data) {
+	
+	console.log(data);
+
+});
+```
+
+#### Exercises
+
+* Set up `index.html` and `app.js`
+* Get jQuery in there
+
+<hr>
+* Perform an ajax request to omdbapi:
+
+`http://www.omdbapi.com/?t=Eraserhead&y=1977&plot=short&r=json`
+
+* Console.log the data
+
+<hr>
+
+* Perform an ajax request to nyc open data subways:
+
+`https://data.cityofnewyork.us/api/views/kk4q-3rt2/rows.json`
+
+* Console.log the data
+
+<hr>
+
+* Open up the ajax_example app
+* Run `npm install`
+* Look in `server.js` and `app.js` to see how the server interacts with the static file to load JSON into the static file.
+* Make your own json route in `server.js` (remember, in a full app, your JSON can come straight from your (Mongo) database), and send some json data, it can be anything.
+* In `app.js`, write an AJAX command that will grab the data from the route you made.

unit_02/w06d02/afternoon_exercise/ajax_example/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "ajax_example",
+  "version": "1.0.0",
+  "description": "",
+  "main": "server.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "node server.js"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "express": "^4.13.4"
+  }
+}

unit_02/w06d02/afternoon_exercise/ajax_example/public/app.js

@@ -0,0 +1,9 @@
+
+// ajax request to this app's /json route
+// gets data and loads it into callback
+// you can do whatever you want with the data
+// inside the callback
+
+$.ajax('/json').done(function(result) {
+	console.log(result);
+});

unit_02/w06d02/afternoon_exercise/ajax_example/public/index.html

@@ -0,0 +1,14 @@
+<html>
+<head>
+	<title></title>
+	<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
+	<script type="text/javascript" src="app.js"></script>
+</head>
+<body>
+	AJAX EXAMPLE
+	<br/>
+	<br/>
+
+	- Result in console
+</body>
+</html>

unit_02/w06d02/afternoon_exercise/ajax_example/server.js

@@ -0,0 +1,19 @@
+// Simple AJAX example
+
+var express = require('express'),
+    app     = express();
+
+app.use(express.static('public'));
+
+// serves up json data
+app.get('/json/instructors', function(req, res) {
+	var json = [
+		{ name: 'Thom', exists: false },
+		{ name: 'Matt', exists: false },
+		{ name: 'Colin', exists: false },
+		{ name: 'Kristyn', exists: false }
+	];
+	res.send(json);
+});
+
+app.listen(3000);

unit_02/w06d02/afternoon_exercise/ajax_quick.md

@@ -0,0 +1,57 @@
+![ga](http://mobbook.generalassemb.ly/ga_cog.png)
+
+# WDI-PANTHALASSA
+
+
+---
+Title: AJAX in 25 mins <br>
+Type: Afternoon Exercise<br>
+Duration: 25 mins <br>
+Creator: Thom Page <br>
+Course: WDIr-Panthalassa<br>
+
+---
+
+## AJAX in 20 mins
+
+AJAX is a way to use Javacript to make a request to a server. So far you have seen GET requests made from the browser (url bar) and from cURL, but we can make requests using Javascript with AJAX. 
+
+AJAX is an acronym for Asynchronous JSON and XML. 
+
+#### Syntax
+
+```
+$.ajax( 'url' ).done(function(data) {
+	
+	console.log(data);
+
+});
+```
+
+#### Exercises
+
+* Set up `index.html` and `app.js`
+* Get jQuery in there
+
+<hr>
+* Perform an ajax request to omdbapi:
+
+`http://www.omdbapi.com/?t=Eraserhead&y=1977&plot=short&r=json`
+
+* Console.log the data
+
+<hr>
+
+* Perform an ajax request to nyc open data subways:
+
+`https://data.cityofnewyork.us/api/views/kk4q-3rt2/rows.json`
+
+* Console.log the data
+
+<hr>
+
+* Open up the ajax_example app
+* Run `npm install`
+* Look in `server.js` and `app.js` to see how the server interacts with the static file to load JSON into the static file.
+* Make your own json route in `server.js` (remember, in a full app, your JSON can come straight from your (Mongo) database), and send some json data, it can be anything.
+* In `app.js`, write an AJAX command that will grab the data from the route you made.