Lecture 3 - Comm Lab: Web @ ITP


Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Lecture 3 - Comm Lab: Web @ ITP

  1. 1. Communications Lab :: Web Lecture 3: Sinatra
  2. 2. Announcements <ul><ul><li>Late assignments policy : A total of three (3) free late days are allowed over the course of the semester ; you may distribute these free late days however you like among the assignments. Once these 3 days are exhausted, 10 points will be taken off each late day. </li></ul></ul><ul><ul><li>New group where you can post questions about assignments : web@itp.nyu. </li></ul></ul><ul><ul><li>Office hours will now be moved to Thursdays 7pm-9pm. </li></ul></ul><ul><ul><li>Assignment #2 is due today . Make sure you've sent the links to your files by email.   </li></ul></ul>
  3. 3. Today <ul><ul><li>Sinatra, server-side programming </li></ul></ul><ul><ul><li>Web Services </li></ul></ul><ul><ul><li>Your Sinatra FTP folder </li></ul></ul><ul><ul><li>Routes </li></ul></ul><ul><ul><li>Parameters </li></ul></ul><ul><ul><li>Strings, Integers, If statements </li></ul></ul>
  4. 4. Server-side language
  5. 5. What is Sinatra? <ul><ul><li>Sinatra is a DSL (Domain Specific Language) that is used to create web applications </li></ul></ul><ul><ul><li>Named after Frank Sinatra, apparently for having </li></ul></ul><ul><ul><li>&quot;so much class he deserves a web-framework named after him&quot;. </li></ul></ul><ul><ul><li>Simple - create a fully functional web app in just one file . No complicated set up procedures or configuration. </li></ul></ul><ul><ul><li>Flexible - can be used to build anything from the smallest of microsites to a full-scale web application. </li></ul></ul><ul><ul><li>Lightweight </li></ul></ul>
  6. 6. What's a web service? <ul><ul><li>Small units of code designed to handle a limited set of tasks .   </li></ul></ul><ul><ul><li>It's an easy way to distribute information to a large number of users </li></ul></ul><ul><ul><li>Listens to requests , and based on different parameters it provides a response  </li></ul></ul><ul><ul><li>Makes remote information available </li></ul></ul>
  7. 7. Forms Remember these?
  8. 8. How does a web service work? <ul><ul><li>The web service provider defines a format for requests for its service and the response the service will generate -- we do this in app.rb </li></ul></ul><ul><ul><li>A computer makes a request for the web services across the network </li></ul></ul><ul><ul><li>The web service performs some action, and sends the response back </li></ul></ul>
  9. 9. Examples <ul><ul><li>translating text from one language to another </li></ul></ul><ul><ul><li>finding the best price for a product online </li></ul></ul><ul><li>  </li></ul><ul><ul><li>retrieving a stock quote </li></ul></ul><ul><ul><li>saving a new item on a to do list  </li></ul></ul><ul><li>  </li></ul><ul><ul><li>putting up a new post on Twitter </li></ul></ul>
  10. 10. More Examples <ul><li>Google Maps </li></ul><ul><li>     http://maps.googleapis.com/maps/api/ service / output ? parameters </li></ul><ul><li>...where service indicates the particular service requested and output indicates the response format. </li></ul><ul><li>  </li></ul><ul><li>  </li></ul>
  11. 11. Your Sinatra Folder <ul><li>  Open Cyberduck, let's take a look at the structure of your Sinatra folder. </li></ul><ul><li>  </li></ul><ul><li>app.rb </li></ul><ul><li>config.ru </li></ul><ul><li>/public </li></ul><ul><li>/tmp </li></ul><ul><li>    /always_restart.txt </li></ul>
  12. 12. Config.ru <ul><ul><li>Configurations to run your service </li></ul></ul><ul><ul><li>You don't need to ever change this </li></ul></ul><ul><li>require File.dirname(__FILE__) + '/app.rb' before do  s = request.path_info  s[/^/~(w)+(d)+/sinatra/[^/|?]+/i] = &quot;&quot;  request.path_info = s end run Sinatra::Application </li></ul>
  13. 13. tmp/always_restart.txt <ul><ul><li>Makes sure your service is always re-started after making a change </li></ul></ul><ul><ul><li>You don't need to change this </li></ul></ul>
  14. 14. /public <ul><ul><li>Keep any public facing assets, such as images, stylesheets and javascript files </li></ul></ul><ul><li>  </li></ul><ul><ul><li>Static files </li></ul></ul>
  15. 15. App.rb <ul><ul><li>Main application </li></ul></ul><ul><ul><li>This is the file we'll be working in and changing </li></ul></ul><ul><li>  </li></ul><ul><li>require 'rubygems' require 'sinatra' </li></ul>
  16. 16. Routes <ul><li>app.rb:    </li></ul><ul><li>     get ' / ' do </li></ul><ul><li>     get ' /get_rectangle ' do </li></ul><ul><ul><li>Routes are the backbone of your application </li></ul></ul><ul><li>  </li></ul><ul><ul><li>They are like a guide-map to how users will navigate the actions you define for your application.  </li></ul></ul>
  17. 17. Routes <ul><li>The paths Sinatra is listening to: </li></ul><ul><li>  </li></ul><ul><ul><li>  /  </li></ul></ul><ul><ul><ul><li>This is the main path, the root url of the application </li></ul></ul></ul><ul><ul><li>  /get_rectangle </li></ul></ul><ul><ul><ul><li>The route we used in our rectangle example </li></ul></ul></ul><ul><ul><ul><li>The name can be whatever we want </li></ul></ul></ul><ul><li>  </li></ul>
  18. 18. Routes <ul><ul><li>Routes are matched in the order they are defined . The first route that matches the request is invoked.     </li></ul></ul><ul><li>    get '/' do </li></ul><ul><li>       &quot;do this&quot;    </li></ul><ul><li>     end  </li></ul><ul><li>  get '/' do     &quot;do that&quot;   end </li></ul><ul><ul><li>In this case, you would see &quot; do this &quot;. </li></ul></ul>
  19. 19. Redirect to route <ul><li>get '/foo' do </li></ul><ul><li>     redirect to('/bar') </li></ul><ul><li>end </li></ul><ul><ul><li>Use this to redirect from one route to another. </li></ul></ul>
  20. 20. The Handler <ul><li>get '/' do   &quot;Hello World!&quot; end  </li></ul><ul><li>What happens when the user visits the root url? </li></ul><ul><ul><li>In this case, the user sees the message &quot;Hello world!&quot; </li></ul></ul>
  21. 21. Blocks <ul><li>get '/' do   &quot;Hello World!&quot; end  </li></ul><ul><li>All together, this is called a block . </li></ul>
  22. 22. HTTP Methods <ul><ul><li>HTTP stands for &quot;Hyper Text Transfer Protocol&quot; </li></ul></ul><ul><ul><li>Takes the following main four requests: </li></ul></ul><ul><ul><ul><li>GET </li></ul></ul></ul><ul><ul><ul><li>POST </li></ul></ul></ul><ul><ul><ul><li>PUT </li></ul></ul></ul><ul><ul><ul><li>DELETE </li></ul></ul></ul>
  23. 23. GET <ul><li>get '/' do   &quot;Hello World!&quot; end </li></ul><ul><li>  </li></ul><ul><ul><li>&quot;getting&quot; a page </li></ul></ul><ul><ul><li>  Get some information that was requested </li></ul></ul>
  24. 24. POST <ul><li>post '/' do   &quot;Hello World!&quot; end </li></ul><ul><ul><li>&quot;posting&quot; TO a page </li></ul></ul><ul><ul><li>  Create a new entry </li></ul></ul>
  25. 25. PUT <ul><li>put '/:id' do   &quot;Hello World!&quot; end </li></ul><ul><ul><li>update an existing entry </li></ul></ul>
  26. 26. DELETE <ul><li>delete '/:id' do   &quot;Hello World!&quot; end </li></ul><ul><ul><li>deleting an existing entry </li></ul></ul>
  27. 27. Method Examples <ul><li>get '/animals' do  </li></ul><ul><li>     # get a listing of all the animals at a farm  </li></ul><ul><li>end  </li></ul><ul><li>get '/animal/:id' do  </li></ul><ul><li>     # just get one animal  </li></ul><ul><li>end  </li></ul><ul><li>post '/animal' do  </li></ul><ul><li>     # create a new animal listing  </li></ul><ul><li>end  </li></ul>
  28. 28. Method Examples <ul><li>put '/animal/:id' do  </li></ul><ul><li>     # HTTP PUT request method to update an existing animal entry  </li></ul><ul><li>end  </li></ul><ul><li>delete '/animal/:id' do  </li></ul><ul><li>     # HTTP DELETE request method to remove an animal who's been sold  </li></ul><ul><li>end </li></ul>
  29. 29. Remember <ul><li>get '/' do </li></ul><ul><li>  &quot;Hello World&quot; end </li></ul><ul><li>post '/' do </li></ul><ul><li>   &quot;Hello world&quot; </li></ul><ul><li>end </li></ul><ul><li>  </li></ul><ul><li>    We can define two or more handlers for the same route (here ‘/’) – but give different blocks of code based on the method of the request. </li></ul>
  30. 30. Comments <ul><li>     All lines that start with a hash (#) are comments and doesn't get read as code. </li></ul><ul><li>     Example: </li></ul><ul><li>get '/animals' do  </li></ul><ul><li>     # get a listing of all the animals at a farm  </li></ul><ul><li>end  </li></ul>
  31. 31. Variables <ul><li>     form = &quot;&quot; </li></ul><ul><li>  </li></ul><ul><li>    This defines a variable named &quot;form&quot; and sets its value to an empty string . </li></ul><ul><li>     By using a variable, you can remember a value and reuse it later. </li></ul>
  32. 32. Strings <ul><li>&quot;Hello World!&quot; </li></ul><ul><li>  </li></ul><ul><ul><li>Strings are a series of text between double quotes or single quotes . </li></ul></ul><ul><li>  </li></ul><ul><ul><li>Strings are a type of variable </li></ul></ul><ul><li>  </li></ul><ul><ul><li>Strings can be empty:     form = &quot;&quot; </li></ul></ul>
  33. 33. Strings <ul><li>&quot;Hello&quot; + &quot; world&quot; = &quot;Hello world&quot; </li></ul><ul><ul><li>You can add strings together. </li></ul></ul><ul><li>  </li></ul><ul><li>form  = form +  '<form action=&quot;get_rectangle&quot; method=&quot;GET&quot;>'  </li></ul><ul><li>This is the same as: </li></ul><ul><li>  </li></ul><ul><li>form  +=  '<form action=&quot;get_rectangle&quot; method=&quot;GET&quot;>'  </li></ul>
  34. 34. Strings <ul><li>    form += '<form action=&quot;get_rectangle&quot; method=&quot;GET&quot;>' </li></ul><ul><li>     form += '<p><label>text:</label> <input type=&quot;text&quot; name=&quot;text&quot; /></p>'     form += '<p><label>x:</label> <input type=&quot;text&quot; name=&quot;x&quot; /></p>'     form += '<p><label>y:</label> <input type=&quot;text&quot; name=&quot;y&quot; /></p>'     form += '<p><label>color:</label> <input type=&quot;text&quot; name=&quot;color&quot; /></p>' </li></ul><ul><li>     form += '<p><input type=&quot;submit&quot; value=&quot;create&quot; /></p>'     form += '</form>' </li></ul><ul><li>This adds the form HTML to the first String. </li></ul>
  35. 35. Strings <ul><li><form action=&quot;/~irs221/sinatra/example1/get_rectangle&quot; method=&quot;GET&quot;> </li></ul><ul><li>  <p><label>text:</label> <input type=&quot;text&quot; name=&quot;text&quot; /></p> </li></ul><ul><li>  <p><label>x:</label> <input type=&quot;text&quot; name=&quot;x&quot; /></p> </li></ul><ul><li>  <p><label>y:</label> <input type=&quot;text&quot; name=&quot;y&quot; /></p> </li></ul><ul><li>  <p><label>color:</label> <input type=&quot;text&quot; name=&quot;color&quot; /></p> </li></ul><ul><li>  <p><input type=&quot;submit&quot; value=&quot;create&quot; /></p> </li></ul><ul><li></form> </li></ul>
  36. 36. HTML snippet <ul><li><<-HTML </li></ul><ul><li><form action=&quot;/~irs221/sinatra/example1/get_rectangle&quot; method=&quot;GET&quot;> </li></ul><ul><li>  <p><label>text:</label> <input type=&quot;text&quot; name=&quot;text&quot; /></p> </li></ul><ul><li>  <p><label>x:</label> <input type=&quot;text&quot; name=&quot;x&quot; /></p> </li></ul><ul><li>  <p><label>y:</label> <input type=&quot;text&quot; name=&quot;y&quot; /></p> </li></ul><ul><li>  <p><label>color:</label> <input type=&quot;text&quot; name=&quot;color&quot; /></p> </li></ul><ul><li>  <p><input type=&quot;submit&quot; value=&quot;create&quot; /></p> </li></ul><ul><li></form> </li></ul><ul><li>HTML </li></ul><ul><li>   Everything between <<-HTML and HTML will get printed as HTML </li></ul>
  37. 37. Remember <ul><ul><li>The last line in a block always get returned! </li></ul></ul><ul><ul><li>Since the last line is the variable form , and form contains all the Strings with HTML added together, they will get returned. </li></ul></ul>
  38. 38. Parameters and variables <ul><li>get '/:task' do   task_variable = params[:task] end </li></ul><ul><ul><li>‘ :task’ – this is a named parameter , identifiable by the leading colon(‘:’). </li></ul></ul><ul><ul><li>Named parameters are values taken from the url that are accessible through the ‘params’ hash </li></ul></ul><ul><ul><li>set a   variable called ‘task_variable’ equal to the value of params[:task], </li></ul></ul>
  39. 39. Parameters <ul><li>     Params  contains all of the information that has been sent as parameters - either through a form or via the url </li></ul><ul><li>     Route patterns may include named parameters , accessible via the params hash: </li></ul><ul><li>     get '/cars/:name' do  </li></ul><ul><li>         # matches &quot;GET /cars/ford&quot; and &quot;GET /cars/volvo&quot;  </li></ul><ul><li>        # params[:name] is 'ford' or 'volvo'  </li></ul><ul><li>        &quot;I want a #{params[:name]}!&quot;  </li></ul><ul><li>     end   </li></ul><ul><li>  </li></ul>
  40. 40. Parameters <ul><li>Including a parameter in a string and returning it to the page: </li></ul><ul><li>get '/cars/:name' do  </li></ul><ul><li>        &quot;I want a #{ params[:name] } !&quot;  </li></ul><ul><li>end   </li></ul>
  41. 41. Parameters <ul><li>get '/get_rectangle' do     rectangle = &quot;&quot;     # This will create a rectangle using in-line CSS     # Each of the values submitted in the form can be accessed by params[:name]     rectangle += '<p style=&quot;width: ' + params[:x] + '; '     rectangle += 'height: ' + params[:y] + '; '     rectangle += 'background-color: ' + params[:color] + '&quot;>'     rectangle += params[:text] + '</p>';     # The last line always gets returned     rectangle end </li></ul>
  42. 42. Parameters <ul><li>    rectangle += '<p style=&quot;width: ' + params[:x] + '; '     rectangle += 'height: ' + params[:y] + '; '     rectangle += 'background-color: ' + params[:color] + '&quot;>'     rectangle += params[:text] + '</p>';     Will look like... </li></ul><ul><li>     </li></ul><ul><li>    <p style=&quot;width: 123; height: 123; background-color: red&quot;>red</p> </li></ul>
  43. 43. params.inspect <ul><li>get '/' do </li></ul><ul><li>    params.inspect </li></ul><ul><li>end  </li></ul><ul><li>  </li></ul><ul><ul><li>params.inspect shows the key/value pairs of all the parameters  </li></ul></ul><ul><ul><li>params[:key]=value </li></ul></ul>
  44. 44. Integers <ul><ul><li>Type of variables that represents whole numbers (no decimal points or fractions) </li></ul></ul><ul><li>get '/' do </li></ul><ul><li>     integer_variable = 30 </li></ul><ul><li>end  </li></ul>
  45. 45. If statements <ul><li>if EXPRESSION </li></ul><ul><li>   # code that gets run if EXPRESSION is TRUE </li></ul><ul><li>else </li></ul><ul><li>    # code that gets run if EXPRESSION is FALSE </li></ul><ul><li>end </li></ul>
  46. 46. If statements <ul><li>html = &quot;40 is less than 50. &quot; </li></ul><ul><li>  </li></ul><ul><li>if (40 < 50) </li></ul><ul><li>     html = html + &quot;That's true!&quot; </li></ul><ul><li>else </li></ul><ul><li>     html = html + &quot;That's false!&quot; </li></ul><ul><li>end </li></ul><ul><ul><li>What is getting returned to our page? </li></ul></ul><ul><ul><li>Answer: 40 is less than 50. That's true! </li></ul></ul>
  47. 47. If statements <ul><li>You don't need to always include the &quot;else&quot; block. </li></ul><ul><li>if (40 < 50) </li></ul><ul><li>     html = html + &quot;That's true!&quot; </li></ul><ul><li>end </li></ul>
  48. 48. Comparing Strings <ul><li>if (params[:text] == 'red') </li></ul><ul><li>     &quot;You wrote red in the text input box.&quot; </li></ul><ul><li>end </li></ul>
  49. 49. Arrays <ul><li>     main_courses = [ 'pancakes', 'waffles' ] </li></ul><ul><li>     sides = [ 'potatoes', 'eggs', 'fruit salad' ] </li></ul><ul><li>     beverages = [ 'orange juice', 'grapefruit juice', 'coffee'] </li></ul><ul><li>To access these: </li></ul><ul><li>     sides[0]       # this will return &quot;potatoes&quot; </li></ul><ul><li>     beverages[1]       #this will return &quot;grapefruit juice&quot; </li></ul>
  50. 50. HTTP Status Codes <ul><ul><li>100-101 - Informational Status Codes </li></ul></ul><ul><ul><li>200-206 - Successful Status Codes </li></ul></ul><ul><ul><li>300-307 - Redirection Status Codes </li></ul></ul><ul><ul><li>400-416 - Client Error Status Codes </li></ul></ul><ul><ul><li>500-505 - Server Error Status Codes </li></ul></ul><ul><li>  </li></ul>
  51. 51. 404 Not Found Status Code <ul><li>    It means the file was not found on the server. </li></ul><ul><li>  </li></ul><ul><ul><li>bit.ly  </li></ul></ul><ul><ul><li>github.com </li></ul></ul><ul><ul><li>http://brightkite.com/404 </li></ul></ul><ul><ul><li>http://www.lightpostcreative.com/404 </li></ul></ul>
  52. 52. Add a stylesheet <ul><ul><li>You can put static files in sinatra/example1/public </li></ul></ul><ul><ul><li>So, add your file to that folder on FTP </li></ul></ul><ul><li>  </li></ul><ul><ul><li>Link to the entire stylesheet like so: </li></ul></ul><ul><ul><li><link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot; /~irs221/sinatra/example1/public/styles.css &quot;/> </li></ul></ul>
  53. 53. Add a stylesheet <ul><li><<-HTML <!DOCTYPE html> <html>   <head>         <meta charset=utf-8 />         <title>HTML Snippet</title>         <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;/~irs221/sinatra/example1/public/styles.css&quot;/>   </head>   <body> <form action=&quot;/~irs221/sinatra/example1/get_rectangle&quot; method=&quot;GET&quot;>   <p><label>text:</label> <input type=&quot;text&quot; name=&quot;text&quot; /></p> </form> </body> </html> HTML </li></ul>
  54. 54. Requests in Developer Inspector
  55. 55. Arduino and Sinatra
  56. 56. Exercises <ul><li>1.Create a calculator for your food. Choose how many items you want to buy, and calculate the total price based on that. </li></ul><ul><li>2. Create a poll for your classmates. Display a different answer (message, image, etc) depending on what they pick. </li></ul><ul><li>3. The Monty Hall Exercise: </li></ul><ul><ul><li>Make your own route in app.rb which displays a form.  </li></ul></ul><ul><ul><li>Hide a prize behind one of the choices in the form. </li></ul></ul><ul><ul><li>Depending on what the user picks in the form, display whether they won or lost the prize. </li></ul></ul>
  57. 57. Next week <ul><ul><li>How to create more applications in Sinatra </li></ul></ul><ul><ul><li>Datamapper and Sinatra - we'll take a look at how to store and retrieve data </li></ul></ul><ul><ul><li>Assignment #3 is due at the beginning of next class. Get the assignment on ruxystaicut.com/itp </li></ul></ul>