the FULL stack:

working on our

back-end!

videos:  https://github.com/ycoady/CSC-101-UVic-Untangling-the-Web/wiki​

browser or "client"

 

 

 

running a browser, rendering web content!

 

That content is the FRONT-END!

connect with "servers"

 

 

 

 

 

servers often manage data & perform work!

That data/work is the BACK-END!

connect with "servers"

 

 

 

 

 

HTTP requests to GET (and PUT!)

http://blog.udacity.com/2014/12/front-end-vs-back-end-vs-full-stack-web-developers.html

TONIGHT!!!!!

• a little review
  • ​front end, back end, server...
  • plumbing and FUN(erals!)
  • SCRUM for YOUR APPS!!!
• more on the FULL STACK 
  • some the "in betweens"!
  • what you will need for your projects

EVENTS!

• Nov 26th 
  • ​networking, contracts?
• Dec 2nd
  • ​city hall!
• Dec 10th
  • 6 - 8  hour(!) of code

Front-end

• the part that users interact with
• HTML, CSS, and JavaScript cooked up in your computer’s browser
• But wait... There's SOME data management in your browser too! (stay tuned)

 

 Back-end

• consists of a server, an application, and a database

• typically if you enter data into a website and it can be retrieved when you login, there is some kind of "back-end" application/data management system involved!

• But wait... there are more APIs available for squirting data around all the time, and different plumbing to get it!  (stay tuned)

 

THE FULL STACK!!!!

THE FULL STACK!!!!

 

full stack developers are jacks-of-all-trades!

 a full stack developer can work on the full “stack” of technology, i.e. both the front-end and back-end and everything in between! 

 

"in between"!!!!

 

Network

• Doman Name System
  • ​Name => IP (Internet Protocol) Address!
  • typically using an ISP DNS server, can change that!
  • what if the DNS is "bad"!?!? 
• Virtual Private Networks (VPNs)
  • ​Using a protocol within a protocol, typically encryption!
    • ​IPSec, Secure Socket Layer, Tunnelling 
  • Danish friends on facebook!  

caching DNS entries

 

chrome://dns

chrome://about

chrome://local-state

 

www.myipaddress.com/

 

VPNs!

Cookies and Storage

Cookies

files created by websites that you've visited that store browsing information, such as your site preferences or profile information.

 

Local Store 

    key : value   more room than cookies

 

Session Store

    deleted when tab is closed!

 

try view -> developer tools -> "Resources" tab!

 mileage varies!!!   https://github.com/mozilla/localForage

"Browser" Storage

realtime requests... T.O.!

https://secure.toronto.ca/webwizard/ws/requests.json?start_date=2015-11-06T00:00:00Z&end_date=2015-11-07T00:00:00Z&jurisdiction_id=toronto.ca

 

make sense of them...

https://jsonformatter.curiousconcept.com/

realtime requests... T.O.!

https://secure.toronto.ca/webwizard/ws/requests.json?start_date=2015-11-06T00:00:00Z&end_date=2015-11-07T00:00:00Z&jurisdiction_id=toronto.ca

 

make sense of them...

https://jsonformatter.curiousconcept.com/

data format!

{

    key : value, 

    key : value,

    ...

}

{  
         "service_request_id":101003676897,
         "status":null,
         "status_notes":null,
         "service_name":"Road - Pot hole",
         "service_code":"CSROWR-12",
         "description":null,
         "agency_responsible":"311 Toronto",
         "service_notice":null,
         "requested_datetime":"2015-11-06T18:04:00-05:00",
         "updated_datetime":"2015-11-16T14:02:00-05:00",
         "expected_datetime":"2016-02-04T18:04:00-05:00",
         "address":"Ellesmere Rd / Victoria Park Ave / Parkwoods Village Dr, North York",
         "address_id":13449013,
         "zipcode":null,
         "long":-79.315248662,
         "lat":43.75787803,
         "media_url":null
      },

can you map them all with their "issue" and time?

RESTful APIs!!!!

RESTful APIs!!!!

• Representational State Transfer (REST) 
  • an architectural style used by the Web!
  • client-server organization
  • client knows API, caching is interesting!
• HTTP verbs (GET, POST, PUT, DELETE) 
• Uniform Resource Identifier (URI) 
  • can be either a Uniform Resource Locator (URL), or a Uniform Resource Name (URN), or both.

RESTful APIs!!!!

• Representational State Transfer (REST) 
  • "Representations" of a resource (often in JSON!)
    • an architectural style used by the Web!
    • client-server organization
      • squirting JSON around!!!
      • client knows API, data (resources!) accessed caching is interesting!
• HTTP verbs (GET, POST, PUT, DELETE) work on the API
• Can do it all through your browser!
  • query and update data!
  • back-end application (on server) needs to be set up to deal with this!

KML files and Bike Routes

 

leveraging built-in functionality in Google Maps!

LOADING a KML file (not the one on the city web page!)

 

Displayed and "interactive"!

Try it yourself!

In our REPO

https://github.com/ycoady/CSC-101-UVic-Untangling-the-Web/blob/master/littleBinder/googleMapofBikeRoutes.html

 

KML files and Bike Routes

 

Add a button to put a marker on the map!

 

Try it yourself!

In our REPO

https://github.com/ycoady/CSC-101-UVic-Untangling-the-Web/blob/master/littleBinder/userButtontoAddMarker.html​

 

Plot "restaurants"

 

when a user clicks on a list...

 

Try it yourself!

In our REPO

https://github.com/ycoady/CSC-101-UVic-Untangling-the-Web/blob/master/littleTaps/plottingRestaurantMarkers.html​

 

GOOD VIBES!!!

 

when a user clicks on a marker...

 

Try it yourself!

In our REPO

https://github.com/ycoady/CSC-101-UVic-Untangling-the-Web/blob/master/littleVibes/plotWithVibeIncrements.html