22 Aug 2016

Basics of Basics of Web Application Development - Crash Course

1. Protocol - Protocol means,
    • same terms that are understood or agreed by two or more parties
    • a language (or call it sign language or code words) that is understood by two or more parties
2. HTTP - is a protocol/language of web. Web clients and web servers talk in this language with each others. For e.g.

Client says (in its code language i.e. HTTP Request) -

POST /v2/sessiontoken HTTP/1.1
Host: app.kashflow.com
Content-Type: application/json
Accept: application/json

{"username":"ismails", "password":"********"}
Interpretation of code language -
  • Firstly it is said by client which means it is a request - HTTP request.
  • POST - it's an HTTP method. This means it is a request to create a resource. More details here.
  • /v2/sessiontoken - it is a part of URL i.e. it will be appended to value of host header which is provided in 2nd line. So whole URL will form like http://app.kashflow.com/v2/sessiontoken
  • HTTP/1.1 - This request is created using HTTP/1.1 version of sign/code language. It's modern. It might contain modern slangs ;-)
  • From 2nd line starts all request headers and their values follow after colon sign i.e. `:`. Each header has a different meaning and the other party understands it's value accordingly. 
    • Host- request will go to this server address
    • Content-Type - It is a message for the server that the body of this request that follows (last line), is in JSON format. If you want to interpret it please make a note about this
    • Accept - means "As a client I will only understand if you return me a response body which is in JSON format" 
  • After an extra line break comes body of the request
So this is what client has told to the server. Now server gets the request. It understands/interprets/decodes the request. It processes i.e. takes action as per the request. (In this case, client expects the server to verify the username and password, create an authentication token  and respond with the same if username and password are valid. This part is creation/invention of a developer's mind. You as a developer will decide what you want the client to request and program the server to do as per the request.) Finally server informs back (HTTP Response) to the requester (client) about what action it took.

Server says (in it's code language i.e. HTTP Response)
HTTP/1.1 201 Created
Content-Length: 829
Content-Type: application/json; charset=utf-8

{"SessionToken":"f3f14a8b-d370-4318-a629-0a124e47c014"}

Interpretation of code language -
  • HTTP/1.1 - it specifies version of sign/code language this request in.
  • 201 Created - It's HTTP status code. This means as per your request authentication token has been created. Different status codes mean differently. Look for more details here, here or here.
  • Then starts HTTP response headers. Similar to request headers, each one has a meaning. 
    • Content-Length specifies how long the content of body is
    • Content-Type specifies format of response in the body
  • After an extra line break comes body of the response
If for example the username and passwords are invalid, the response would have been different

HTTP/1.1 400 Bad Request
Content-Length: 71
Content-Type: application/json; charset=utf-8

{"Message":"Invalid username or password", "Error":"InvalidCredentials"}

Look at HTTP status codes to decode this response.


3. Browser is an HTTP client.
So let's understand how browser talks HTTP.

  1. Fire up chrome 
  2. Hit F12 key to open up chrome dev tools.
  3. Select network tab on chrome dev tools
  4. Tick "Preserve log" checkbox
  5. Type google.com in address bar (in chrome main window)
  6. Hit enter.
  7. Select the first request from the list in chrome dev tools window. 
This is what I get to see. Let's decode it.



HTTP Request
  • GET request to `/` (it's a forward slash) i.e. root of the host google.com using HTTP 1.1 version of language
  • Browser `Accept`s or understands only one of these "text/html, application/xhtml+xml, application/xml" other certain image formats etc
HTTP Response
  • 302 Found . It means server is saying that "You have reached at correct address and with valid parcel (request), unfortunately, the information (resource) you are looking for has moved to other place (specified in location header)"
  • Look at the 2nd request in the list (chrome dev tools). Is it a request to same URL which is specified in location header? Yes it is. Browser has interpreted the response correctly and requested other URL as per the response it got from the server.
More walk-through
Basic concepts of web applications, how they work and the HTTP protocol
HTTP in depth

Basic HTTP codes for quick reference
  • 2xx - Success codes
    • 200 - Success - OK - this simply means whatever you have requested is served. Meaning differs as per the request method and content.
    • 201 - Created - this is generally a response of POST or PUT requests
    • 204 - No Content - The server has successfully fulfilled the request and that there is no additional content to send in the response payload body.
    • 3xx - Redirection codes
      • 301 - Redirction - the information you have requested is now available at some other URL which is provided in `location` header
      • 302 - Redirection  - same as above. But a newer version. Look for more details on HTTP specs
      • 4xx - Bad Request codes
        • 400 - Simple bad request i.e. something bad with the request body. Change it correct it and send whatever server expects. Detailed explaination should be provided in response body

      5 comments:

      1. Nice article!! Useful and easy to understand.

        ReplyDelete
      2. GOOD KNOWLEDEGE.

        ReplyDelete
      3. Wow!! it's a very nice and easy to understand article Ismail :)

        ReplyDelete
      4. Nice blog. ServerPoint Launches New Affiliate Program ! Utilizing our tools to create custom tracking links, you can refer clients to sign up to ServerPoint's services and then receive a very profitable commission upto $1000 per qualifying sale!

        ReplyDelete
      5. I like this blog posting. I got some useful information from this.

        Web Application Development

        ReplyDelete