sinatra

# Welcome

---

## Sinatra

---

### After this you will be able to:
  - make an instance of a web server and have it serve content to a user
  - use ngrok to get your server outside to the internet and have it respond to requests
  - make an http request over the internet using your browser

---

## Intro / Framing
  - **Intro**:
    - we are now beggining the unit on "server-side" web development. the library / framework Sinatra is the first tool we will be using that will allow us to code our servers. Today we'll learn about what a server is and what it does and how we will use a server to build our apps. We'll also learn about making requests over the internet and what that means.
  - **Context**:
    - Until now we've been doing what is reffered to as front-end programming. There are many synonyms for this, including client, browser, front-end, etc., etc. Until now we've really only seen one way to run our programs- in the context of the chrome browser. But we can also run our javascript and other language programs in other places- namely directly on our computers and not through the browser.
  - **Specific**:
    - We'll be looking at the sinatra library for web applications, and seeing how it can recieve and respond to requests from the internet.
  - **How**:
    - we'll hook all of our computers to the internet to demonstrate how a server can be used and then get into some specifics about how we might use Sinatra to build applications.

---

### The Internet:

#### What happens when you type a url into the browser and hit enter?

1. Your browser resolves the domain name to an IP address.

2. The browser uses the IP address to make a request to the computer located at that IP address. Because you are on the public internet the default port will always be 80. If the IP address is the street address of the computer, the port number is the apartment number of the program waiting for a request.

2a. The underlying network mechanism routes your reuest through the network. There is normally no direct connection between your computer and another on the internet ( literally a cable from one point to another ) the internet has to get your request to the computer, routing it through a bunch of internet routing points.

3. The computer program at the IP at the port (most likely 80) recieves the request and gives back a response.

4. The browser recieves the response and renders it to the user.

#### Exercise: Let's see this at work:
http://www.monitis.com/traceroute/
- http://yahoo.com
- http://www.google.com
- http://amazon.com

- now we're going to look at how requests get routed as they traverse the internet: 
- companies that are sure to have local internet presences: beer companies:
- russia: http://www.baltika.ru/
- namibia: http://www.namibiabreweries.com/
- south korea: http://www.hite.com/
- venezuela: http://empresaspolar.com/
- iceland: http://www.olgerdin.is/
- bosnia: http://www.banjaluckapivara.com/

- note that the DNS lookup happens before we start our routing journey

###### Now we're going to look at what a server is.
- a server is a computer (that's it)
- a server "serves" information
- the cloud is made up of servers
- the computer setup that we're going to look at is a series of programs that can server information to the internet
- this includes a webserver and a way for our ruby program to interact with the netowrking functionality of the computer. (and thus the internet)
- `ifconfig`
- localhost is your own computer, but accesed through the network. It is a loop back into your own computer.



#### Exercise: My first sinatra server

- look at what your network looks like from inside your computer:
- `ifconfig`

- make an app.rb file

```ruby
require 'sinatra'

get '/' do
  response.body = 'Hello world!'
end
```

- run this file: `ruby app.rb`
- get to your new server through `localhost`
- change the `hello world` string to something else

##### Network Tab
- turn off the timeline thing
- look at headers and body and request timing

##### Exercise: Network Tab
- look in the browser dev console netowrk tab
- go to `localhost`
- look at what appears for that request for your browser
- hit the clear button for the network tab
- go to `facebook.com`
- look at what appears in the network tab

#### HTTP
- hyper text transfer protocol
- make a request and get a response
- can split up your request as it travels to your destination (don't worry about this, but it's cool)
- has headers that contain meta-information: URI, port, request method, status code
- the representaion of this in our sinatra server:
 - `request` object
 - `response` object
 - `params` hash
 - they have properties and methods

##### servers!
- we now have a server, but for now it's only available on your own computer to access through it's own network
- ”I want to expose a local server behind a NAT or firewall to the internet.”
- https://ngrok.com/download
- ngrok allows your own computer to be accessible over the public internet
- any computer can be a "server"

#### Exercise: Install ngrok. ( Secure tunnels to localhost )

- pair up and send eachother requests
- change your app.rb file: change the `get '/' do` line to: `get '/*' do`
- when making a request to your partner, change the url after the `/`, so that `http://ngrok.io/83hd7dj/` becomes `http://ngrok.io/83hd7dj/bannannas`
- print out `request` to the console
- what is different? what do you see?
- what is different about `request` now?

##### Sinatra Server Part 2:
- run your sinatra server

###### Part 1: ( binding.pry )
- `pry`
- `require 'pry'`
- similar to debugger, freezes time in your program
- `binding.pry`

###### Part 2: request ( and requests )
- `request` object is everything that is incoming to your server
- using `binding.pry` match up each parameter in request in sinatra that is in the request in your chrome browser
- does your chrome console have any info that's not in `request`?
- does `request` have any info that's not in the chrome console?

###### Part 3: request ( and requests ) - param variables in your route
- change your sinatra file: add another route method
```ruby
get '/apple' do
  response.body = 'red'
end
```
- how do you get your server to print out `BASEBAAAALLL!`
- add another route method to your file:
```ruby
get '/bannanna/:price' do
  response.body = 'FOOOOOOOOOT'
end
```
- make a request to this route and look at the `params` hash
- now print out the param that was in the request:
```ruby
get '/bannanna/:price' do
  response.body = params.price
end
```
- make a `kiwi` route with a `price` param, respond with the string: `this is: [...] dollars` ( respond with a string including the price of the kiwi )
- make an `orange` route with a `price` param, respond as above
- make a `pear` route with a `ripe` param, respond with a string that includes the `ripe` param
- make a `coconut` route with a `name` param, respond with a string that includes the `name` param

###### Part 4: response
- `response` object is everything you're responding with
- using `binding.pry` match up each parameter in response in sinatra that is in the response in your chrome browser
- does your chrome console have any info that's not in `response`?
- does `response` have any info that's not in the chrome console?

###### Part 5: status codes ( changing the response you send back )
- look up common http status codes: http://www.smartlabsoftware.com/ref/http-status-codes.htm
- work with your partner- change the status code in the header of the response to something other than 200 ( you assign it like this: `response.status=200` )
- what do you see now, for each time a different status is returned?
- change it to 5 different status codes and see what happens
- BONUS: return status code 418: https://en.wikipedia.org/wiki/List_of_HTTP_status_codes