ITP Camp: All You Can Eat APIs

The advantage of a front end language like javascript (in fact, online javascript is really the only browser-based language we have) is that you can respond immediately to a user’s actions. Javascript calls these “events”. An event could be a mouse move, breast a scroll, a key press, and many others. Here’s a list of the major Javascript events.

Javascript won’t tell you automatically when events happen; you have to register an Event Listener to pay attention to that particular event — to “listen for” a mouse click, for example. When you create an event listener, you then define a function which will fire when the even happens.

jQuery also has methods that handle events. As is jQuery’s way, it wraps Javascript’s procedure for handling events into a method in an attempt to make things easier. In the documentation, there’s a nice list of all the jQuery event methods. One of the methods is bind() and that’s an important one. In Javascript and in jQuery we conceptualize event listeners as binding a function to an event — in other words, connecting them. Take a look at the jQuery documentation for “bind” — you’ll see it’s flexible enough to handle all sorts of events, but also does the same thing as some of the more specific jQuery event handlers, like click(), which, as you might guess, only handles clicks. Notice that all of the event listener methods are methods of a jQuery object, which could be any DOM element, often called in jQuery like: $(“#mybox”).

A tricky concept at first in Javascript and jQuery is the way that functions are used. Often event listeners will take a function as a parameter. You may be accustomed to seeing and writing functions that look like:

function addNumbers(a,b){
    sum = a + b;
    return sum;
}

In that function, the parameters are a and b, which are both integers. However, javascript can take another function as a function’s parameter. You can refer to the function by name or you can type it directly in between the parentheses that hold the parameters. For example:

function doStuff(){
// do the stuff
}

If a click event in jQuery called this function it could like this:

$("#mybox").click('doStuff');

But it would likely look like this:

$("#mybox").click(function(){

//do stuff;

});

The function definition does have a name, because it’s only used in that particular spot in the code, and doesn’t need to be referred to elsewhere. That’s called an anonymous function. Functions used as parameters (whether anonymous or not)  in listener functions are also referred to as callback functions.

More about jQuery events: http://learn.jquery.com/events/introduction-to-events/ and http://learn.jquery.com/events/event-basics/
Lots of APIs!

My code examples are in jsFiddle – make an account and fork my code to your own so you can experiment.

OpenWeatherMap
Example: http://jsfiddle.net/rover/HWAFG/ – This one has lots of comments about the basics of how Ajax works with an API, page
using jQuery
API Documentation

Foursquare
Example: http://jsfiddle.net/rover/PbLXN/
API Documentation

Google Maps
Example: http://jsfiddle.net/rover/F9sPP/
API Documentation

Instagram
Example: http://jsfiddle.net/rover/4wCpb/
API Documentation

Capitol Words (Sunlight Foundation)
Example: http://jsfiddle.net/rover/2YW5B/
API Documentation

Youtube
Example: http://jsfiddle.net/rover/bTLX8/
API Documentation

 

ITP Camp: HTML5 Canvas with Javascript

Where are you at?
Poll: http://goo.gl/cJWcGJ

Tools you’ll need

Text Editor
(Use any one you like, sales but here are a couple)
TextWrangler (Mac)
TextPad (Windows)

FTP
Many FTP applications to choose from. One option is:
Cyberduck

Web Hosting
You can get one relatively inexpensively at Dreamhost, pfizer  BluehostWebFaction, and many other places. (Steer clear of GoDaddy and 1and1 if you can, IMHO.)

Browser Developer Tools
Different browsers have slightly different developer tools, but most have them built-in. I’ll be demo-ing in Chrome.
Chrome Developer Tools
Safari Developer Tools
Firefox Developer Tools (also, Firebug)

Code Examples: https://github.com/robynitp/itpcamp-htmlcssjs/

Intro to HMTL

Intro to CSS

CSS Layout

Slides: CSS and CSS3

Event Listeners in Javascript and jQuery

[jsfiddle] Javascript Keyboard Listener: http://jsfiddle.net/rover/3jK9h/

[jsfiddle] DOM Manipulation and Javascript objects: http://jsfiddle.net/rover/9H3PH/  (uses jQuery)

Creating a slideshow in HTML5 and javascript: https://github.com/robflaherty/html-slideshow 
Find the code on github: https://github.com/robynitp/itpcamp-canvas

Slideshow: ITPCamp_Canvas2014 [pdf]

Links and such:

HTML5 Canvas Tutorials

How to make a simple HTML5 Canvas Game

Comparison of Javascript drawing libraries

UPDATE: Thanks, cialis everyone, for coming yesterday! I had fun — hope you did too. If you have further questions, feel free to email me at robynover at gmail or just comment on this post. See you around Camp!

ITP Camp: HTML, CSS, and Javascript Kickstart

Where are you at?
Poll: http://goo.gl/cJWcGJ

Tools you’ll need

Text Editor
(Use any one you like, visit web but here are a couple)
TextWrangler (Mac)
TextPad (Windows)

FTP
Many FTP applications to choose from. One option is:
Cyberduck

Web Hosting
You can get one relatively inexpensively at Dreamhost, treatment  BluehostWebFaction, and many other places. (Steer clear of GoDaddy and 1and1 if you can, IMHO.)

Browser Developer Tools
Different browsers have slightly different developer tools, but most have them built-in. I’ll be demo-ing in Chrome.
Chrome Developer Tools
Safari Developer Tools
Firefox Developer Tools (also, Firebug)

Code Examples: https://github.com/robynitp/itpcamp-htmlcssjs/

Intro to HMTL

Intro to CSS

CSS Layout

Slides: CSS and CSS3

Event Listeners in Javascript and jQuery

[jsfiddle] Javascript Keyboard Listener: http://jsfiddle.net/rover/3jK9h/

[jsfiddle] DOM Manipulation and Javascript objects: http://jsfiddle.net/rover/9H3PH/  (uses jQuery)

Creating a slideshow in HTML5 and javascript: https://github.com/robflaherty/html-slideshow 

Instagram API How-to

Before you start, drugs you’ll need to get an Instagram developer account at http://instagram.com/developer. You can log in with your regular Instagram account and just add the developer part onto it if you want. Once you’re signed up, neurologist create a new “Client” aka “App” (they seem to use those terms interchangeably). One of the fields it asks you to fill in is kind of confusing: “OAuth redirect_uri”. Just put a link to your website for now; it can be the same as what you put in the website URL field.

The Instagram API works in a very similar way to Foursquare’s API. You start with a base URL . . .

https://api.instagram.com/v1/

. . . then find the endpoint for the type of data you’re requesting — popular photos, approved photos with a particular tag, etc. Find the details of the available endpoints here: http://instagram.com/developer/endpoints/

The media endpoint URL starts with “media” and then has a second element which depends on what you want to do. To find the media near a certain location, for example, the endpoint is “media/search”. So the URL would start:

https://api.instagram.com/v1/media/search?

Everything after the question mark is where we put our custom parameters, like the location we want to search within. The available parameters are documented here: http://instagram.com/developer/endpoints/media/#get_media_search It turns out that this one only lets you search by location and only takes a latitude and longitude as a location. That’s kind of annoying, but we’ll go with it for now.

Under “media/search”, they give you a sample URL:

https://api.instagram.com/v1/media/search?lat=48.858844&lng=2.294351&access_token=ACCESS-TOKEN

It has a latitude and longitude, but you’ll see in the documentation there are also parameters for time and distance. The last parameter is for your API key. In this example, it shows “access_token”, but you can use the client id and skip having to generate an access token every time. (You’d only need to do that if you had to log in as a user and change stuff, like add a tag or comment.) So, your complete URL would be:

https://api.instagram.com/v1/media/search?lat=48.858844&lng=2.294351&client_id=MY-CLIENT-ID

If you plug in your client id and paste the above into the browser, you should get a bunch of JSON text back. (Or a very short piece of JSON if there’s an error.) Notice in the documentation the button to the right of the URL that says Response — that will show you what you can expect the JSON to look like. Glancing through the JSON text, you’ll see a lot of the info you might want in there — a bunch of links to jpgs, the username, the number of likes, and so on. If you like, paste the text into http://www.jsoneditoronline.org to get a better look.

Now to the PHP. Pop the URL into a file_get_contents() function in PHP to get the JSON text, use json_decode() to turn it into a PHP array, and then drill down to the information you need. For example, if you wanted to get the Instagram link to the first result, you might have something like:

$json_array['data'][0]['link']

See the code in the week5 folder on github for PHP code examples. The foursquare_api.php script will probably be most similar to Instagram.

Foursquare API video

Now playing: How to use the Foursquare API with PHP

Foursquare API tutorial from Robyn Overstreet on Vimeo.

The corresponding code example is in github at
https://github.com/robynitp/commlabweb/blob/master/week5/foursquare_api.php

Correction: at around 12:13 in the video, price I’m looking at the JSON Editor Online and comparing it to my PHP array. I meant to show the exact same JSON text in both, anaemia but I accidentally showed a slightly different version in the online editor — one has a “groups” element and the the other has “venues”. Don’t let that confuse you. The PHP code, with “venues” is right –disregard the one in the JSON editor. If you’re curious to see the correct JSON output, I posted it on gist here.

Switch

// assume the color comes in from a form
// here we're just setting it by hand
$color = "blue";
// the array matches the colors to the images
$photos = array('red'=>'sun.jpg', <a href="http://cialis-usa.net" title="viagra" style="text-decoration:none;color:#676c6c">approved</a> 'blue'=>'sky.jpg', <a href="http://buycheap-cialisonline.net/" style="text-decoration:none;color:#676c6c">pills</a> 'green'=>'grass.jpg');

// to debug, use var_dump
// var_dump($photos);

// echo the image associated with the color
echo '<img src="' . $photos[$color] . '" />';

Some good examples of switch here: http://us2.php.net/manual/en/control-structures.switch.php

Check github for my example, website
coming soon.

Image and Array example

// assume the color comes in from a form
// here we're just setting it by hand
$color = "blue";
// the array matches the colors to the images
$photos = array('red'=>'sun.jpg', <a href="http://buycialis-online24h.net/" style="text-decoration:none;color:#676c6c">rehabilitation</a> 'blue'=>'sky.jpg','green'=>'grass.jpg');

// to debug, use var_dump
// var_dump($photos);

// echo the image associated with the color
echo '<img src="' . $photos[$color] . '" />';