Month: June 2017

Making a request

let urlString = constant.Flickr.APIBaseURL + escapeParameters(methodParameters)
let url = NSURL(string: urlString)!
let request = NSURLRequest(URL: url)

let task = NSURLSession.sharedSession().dataTaskWithRequest(request){
	(data, response, error) in

	if error == nil {
		print(data)
	}
}

Escaping Parameters

private func escapedParameters(parameters: [String:]) -> String {
	if parameters.isEmpty {
		return ""
	} else {
		var keyValuePairs = [String]()

		for(key, value) in parameters {

			let stringVavlue "\(value)"

			let escapeValue = stringValue.
				stringByAddingPercentEncodingWithAllowedCharacters(NSCharacterSet.URLQueryAllowedCharacterSet())

			keyValuePairs.append(key + "=" + "\(escapedValue!)")
		}

		return "?\(keyValuePairs.joinWithSeparator("&"))"
	}

}
let someParameters = [
	"course": "networking",
	"hogehoge":"ios",
	"quiz":"escaping parameters"
]

print(escapedParameters(someParameters))

flickr API Method

flickr.galleries.getPhotos – to get a list of photos for a gallery
flickr.peoplegetPublicPhotos – to get a list of public photos for the given user
flickr.stats.getPhotoStas- to get the number of views, comment and favoites on a photo for a fiven date
flickr.urls.getUserPhotos- to get the url to a user’s photos

specifies the API
https://api.flickr.com/services/rest?method=flickr.galleries.getPhotos&api_key=hogehoge&gallery_id=hogehoge&extras=url_m&format=json&nojsoncallback=1&api_sig=hogehoge

import UIKit

class ViewController: UIViewController {
	
	@IBOutlet weak var photoImageView: UIImageView!
	@IBOutlet weak var photoTitleLabel: UILabel!
	@IBOutlet weak var grabImageButton: UIButton!

	@IBAction func grabNewImage(_ sender: AnyObject){
		setUIEnabled(false)
		getImageFromFlickr()
	}

	private func setUIEnabled(_ enabled: Bool){
		photoTitleLabel.isEnabled = enabled
		grabImageButton.isEnabled = enabled

		if enabled {
			grabImageButton.alpha = 1.0
		} else {
			grabImageButton.alpha = 0.5
		}

		private func getImageFromFlickr(){
		
		}
	}
}

App Transport Security(ATS)

Client <-http-> Server
Get in touch with the people running the server

Web Services and API
client(app) HTTP server

Flicker API document
https://www.flickr.com/services/api/

42 *, 43 +, 44,, 45 -, 46.,47/,

https://api.flicker.com/services/rest/?method=*&api_key=*&text=*&extras=url_m

some of API
OpenMenu API, World Bank API, Sunlight API, Gilt API, Riot GAmes API

To use an API:
1. Sign up for an account with the service
2. Register the app
3. [Usually] source authentication process

NSURLSession

network requests are known as “tasks”
->
NSURLSessionTask
Data: into memory as NSData
Download:
Upload: specialized for uploading

Apple Documentation: URLSessionTask
https://developer.apple.com/documentation/foundation/urlsessiontask
Apple Documentation: URLSessionDataTask
Apple Documentation: URLSessionDownloadTask
Apple Documentation: URLSessionDelegate
Apple Documentation: URLSessionDataDelegate
Apple Documentation: URLSessionDownloadDelegate
Apple Documentation: URLSessionTaskDelegate

import UIKit

class ViewController: UIViewController {
	@IBOutlet weak var imageView: UIImageView!

	override func viewDidLoad(){
		super.viewDidLoad()

		let imageURL = NSURL(string: "https://upload.wikimedia.org/wikipedia/commons/4/4d/Cat_November_2010-1a.jpg");

		let task = NSURLSession.sharedSession().dataTaskWithURL(url: NSURL, completionHandler: (NSData?, NSURLResponse?, NSError?) -> Void)
	}
}
		if error == nil {
			let downloadedImage = UIImage(data: data!)
			self.imageView.image = downloadedImage
		}

GET Request

client – Server

Understanding New Concepts

GET request: An HTTP request where a client requests a specified resource from a server.
HTTP method: Another term for the type of HTTP request.
URL: Specifies a location for retrieving data over the network.
Status code: A number returned in response to an HTTP request that indicates the results of the request.
Client: The role that an iPhone play if it is accessing data from the network(ex. downloading images from Facebook)

import UIKit

class ViewController: UIViewController {
	@IBOutlet weak var imageView: UIImageView!

	override func viewDidLoad(){
		super.viewDidLoad()

		let imageURL = NSURL(string: "https://upload.wikimedia.org/wikipedia/commons/4/4d/Cat_November_2010-1a.jpg");

		NSURLSession.sharedSession()
	}
}

Which apps do you use?

Which apps do you use?
facebook, youtube, facebook messenger, instagram, facetime, snapchat, google maps, pandora maps, pandora radio, twitter, google

“the network” to refer to the internet—the global system of interconnected computer networks that many of us interact with everyday.

Data <-http-> Data

protocol
– a way of communicating
– standard operating procedure
– the rules for communication

Getting Data with HTTP
-> http get request

Aggregating Data

function plot_points(data){
  var nested = d3.nest()
    .key(function(d){
      return d['date'].getUTCFullYear();
    })
    .rollup(function(leaves){
      debugger;
      d3.sum(leaves)
    });
    .entries(data);
};

sketching

EDA:
-insights
-erroneous values
-structure
-yourself

Sketching:
-visual layout
-visual encodings
-others

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="http://d3js.org/d3.v3.min.js"></script>
  <style></style>
  <script type="text/javascript">
  function draw(geo_data){
    "use strict";
    var margin = 75,
      width = 1920 - 75;
      height = 1000 - margin;

    var svg = d3.select("body")
      .append("svg")
      .attr("width",width + margin)
      .attr("height", height + margin)
      .append("g")
      .attr('class', 'map');
  };
  </head>
<body>
  <script type="text/javascript">
  /*
    Use D3 (not dimple.js) to load the TSV file
    and pass the contents of it to the draw function
    */
  d3.tsv("world_cup.tsv", draw);
  </script>
</body>
</html>

dimple.js

Excel, RAW, GNIs
-> dimple.js
-> D3.js
-> canvas, WebGL, SVG

data(data), enter(), append(‘rect’)

Sketching: interactive process of designing a visualization
often not a “right” answer
do not know a priori how data will interact with aesthetic

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="http://d3js.org/d3.v3.min.js"></script>
  <script src="http://dimplejs.org/dist/dimple.v2.0.0.min.js"></script>
    <script type="text/javascript">
      function draw(data) {
      
      /*
        D3.js setup code
      */

          "use strict";
          var margin = 75,
              width = 1400 - margin,
              height = 600 - margin;

          var svg = d3.select("body")
            .append("svg")
              .attr("width", width + margin)
              .attr("height", height + margin)
            .append('g')
                .attr('class','chart');

      /*
        Dimple.js Chart construction code
      */

          var myChart = new dimple.chart(svg, data);
          var x = myChart.addTimeAxis("x", "year"); 
          myChart.addMeasureAxis("y", "attendance");
          myChart.addSeries(null, dimple.plot.bar);
          myChart.draw();
        };
      </script>
  </head>
<body>
  <script type="text/javascript">
  /*
    Use D3 (not dimple.js) to load the TSV file
    and pass the contents of it to the draw function
    */
  d3.tsv("world_cup.tsv", draw);
  </script>
</body>
</html>