IFD:WApplications/Vortraege/APIs JSON: Difference between revisions

From Medien Wiki
 
(20 intermediate revisions by 2 users not shown)
Line 1: Line 1:
=API – Application Programming Interface=
=API – Application Programming Interface=
[http://www.slideshare.net/augentier/api-vortrag Präsentation auf slideshare.net]
==Übersicht==
==Übersicht==
* Facebook – Graph API
* Facebook – Graph API
Line 5: Line 6:
* YouTube – Data API
* YouTube – Data API
==[[JSON]]==
==[[JSON]]==
===Struktur vonJSON===
===Struktur von JSON===
<source lang="javascript" >
<source lang="javascript" >
{
{
Line 19: Line 20:
}
}
</source>
</source>
''Größe: 169 Bytes''
''Size: 169 Bytes''
 
===Vergleich zu XML===
===Vergleich zu XML===
<source lang="xml">
<source lang="xml">
Line 34: Line 36:
</object>
</object>
</source>
</source>
''Größe: 226 Bytes''
''Size: 226 Bytes''
===Vorteile gegenüber XML===
Kleinere Datei, verschiedene Daten-Typen (string, number, object, array, boolean, empty), einfaches Parsing in JavaScript, PHP, Objective-C usw.


Eine mögliche XML-Schreibweise, andere Schreibweisen sind möglich.
==Parsing JSON==
==Parsing JSON==
===jQuery===
===jQuery===
Line 76: Line 79:
}
}
</source>
</source>
''Dateigröße: 1,16 KB''
''Size: 1.16 KB''
===Albums===
===Albums===
[http://graph.facebook.com/mercedesbenzdeutschland/albums graph.facebook.com/mercedesbenzdeutschland/albums]
[http://graph.facebook.com/mercedesbenzdeutschland/albums graph.facebook.com/mercedesbenzdeutschland/albums]
<source lang="javascript">
<source lang="javascript">
{
{
  "data": [
"data": [
      {
{
        "id": "251092158272082",
"id": "251092158272082",
        "from": {
"from": {
            "name": "Mercedes-Benz Deutschland",
"name": "Mercedes-Benz Deutschland",
            "category": "Cars",
"category": "Cars",
            "id": "145689658812333"
"id": "145689658812333"
        },
},
        "name": "DTM 2011 - Rennen, Finale und Showprogramm",
"name": "DTM 2011 - Rennen, Finale und Showprogramm",
        "location": "Hockenheimring Baden-W\u00fcrttemberg",
"location": "Hockenheimring Baden-W\u00fcrttemberg",
        "link": "https://www.facebook.com/album.php?fbid=251092158272082&id=145689658812333&aid=54543",
"link": "https://www.facebook.com/album.php?fbid=251092158272082&id=145689658812333&aid=54543",
        "cover_photo": "251092214938743",
"cover_photo": "251092214938743",
        "count": 10,
"count": 10,
        "type": "normal",
"type": "normal",
        "created_time": "2011-10-27T08:08:23+0000",
"created_time": "2011-10-27T08:08:23+0000",
        "updated_time": "2011-10-27T08:10:30+0000",
"updated_time": "2011-10-27T08:10:30+0000",
        "can_upload": false
"can_upload": false
      },
},
      {
{
        "id": "249480695099895",
"id": "249480695099895",
        "from": {
"from": {
            "name": "Mercedes-Benz Deutschland",
"name": "Mercedes-Benz Deutschland",
            "category": "Cars",
"category": "Cars",
            "id": "145689658812333"
"id": "145689658812333"
        },
},
        "name": "DTM Finale 2011 - Mercedes-Benz",
"name": "DTM Finale 2011 - Mercedes-Benz",
        "location": "Hockenheim",
"location": "Hockenheim",
        "link": "https://www.facebook.com/album.php?fbid=249480695099895&id=145689658812333&aid=54185",
"link": "https://www.facebook.com/album.php?fbid=249480695099895&id=145689658812333&aid=54185",
        "cover_photo": "249480751766556",
"cover_photo": "249480751766556",
        "count": 7,
"count": 7,
        "type": "normal",
"type": "normal",
        "created_time": "2011-10-23T14:45:52+0000",
"created_time": "2011-10-23T14:45:52+0000",
        "updated_time": "2011-10-24T13:33:17+0000",
"updated_time": "2011-10-24T13:33:17+0000",
        "can_upload": false
"can_upload": false
      },
},
      […]
[…]
  ]
]
}
}
</source>
</source>
''Dateigröße: 1,16 KB''
''Size: 1.16 KB''


===Album Photos===
===Album Photos===
Line 126: Line 129:
<source lang="javascript">
<source lang="javascript">
{
{
  "data": [
"data": [
      {
{
        "id": "251092214938743",
"id": "251092214938743",
        "from": {
"from": {
            "name": "Mercedes-Benz Deutschland",
"name": "Mercedes-Benz Deutschland",
            "category": "Cars",
"category": "Cars",
            "id": "145689658812333"
"id": "145689658812333"
        },
},
        "tags": {
"tags": {
            "data": [
"data": [
              {
{
                  "id": "100000441323195",
"id": "100000441323195",
                  "name": "Denis H\u00f6rner",
"name": "Denis H\u00f6rner",
                  "x": 50.1042,
"x": 50.1042,
                  "y": 83.6795,
"y": 83.6795,
                  "created_time": "2011-10-27T10:40:08+0000"
"created_time": "2011-10-27T10:40:08+0000"
              }
}
            ]
]
        },
},
        "name": "DTM 2011\r\n\r\nMotorsports / DTM: german touring cars championship 2011, 07 […]",
"name": "DTM 2011\r\n\r\nMotorsports / DTM: german touring cars championship 2011, 07 […]",
        "picture": "http://photos-f.ak.fbcdn.net/hphotos-ak-snc7/299511_251092214938743_145689658812333_64…",
"picture": "http://photos-f.ak.fbcdn.net/hphotos-ak-snc7/299511_251092214938743_145689658812333_64…",
        "source": "http://a6.sphotos.ak.fbcdn.net/hphotos-ak-snc7/s720x720/299511_251092214938743_14568965…",
"source": "http://a6.sphotos.ak.fbcdn.net/hphotos-ak-snc7/s720x720/299511_251092214938743_14568965…",
        "height": 505,
"height": 505,
        "width": 720,
"width": 720,
        "images": [
"images": [
            {
{
              "height": 505,
"height": 505,
              "width": 720,
"width": 720,
              "source": "http://a6.sphotos.ak.fbcdn.net/hphotos-ak-snc7/s720x720/299511_251092214938743_145689658812333_642955_1055534473_n.jpg"
"source": "http://a6.sphotos.ak.fbcdn.net/hphotos-ak-snc7/s720x720/299511_2510922149…"
            },
},
            {
{
              "height": 126,
"height": 126,
              "width": 180,
"width": 180,
              "source": "http://photos-f.ak.fbcdn.net/hphotos-ak-snc7/299511_251092214938743_145689658812333_642955_1055534473_a.jpg"
"source": "http://photos-f.ak.fbcdn.net/hphotos-ak-snc7/299511_251092214938743_14568965…"
            },
},
            {
[…]
              "height": 91,
],
              "width": 130,
"link": "http://www.facebook.com/photo.php?pid=642955&id=145689658812333",
              "source": "http://photos-f.ak.fbcdn.net/hphotos-ak-snc7/299511_251092214938743_145689658812333_642955_1055534473_s.jpg"
"icon": "http://static.ak.fbcdn.net/rsrc.php/v1/yz/r/StEh3RhPvjk.gif",
            },
[…]
            {
}
              "height": 52,
]
              "width": 75,
              "source": "http://photos-f.ak.fbcdn.net/hphotos-ak-snc7/299511_251092214938743_145689658812333_642955_1055534473_t.jpg"
            }
        ],
        "link": "http://www.facebook.com/photo.php?pid=642955&id=145689658812333",
        "icon": "http://static.ak.fbcdn.net/rsrc.php/v1/yz/r/StEh3RhPvjk.gif",
        […]
      }
  ]
}
}
</source>
</source>
Line 183: Line 177:
[http://graph.facebook.com/251092214938743 graph.facebook.com/251092214938743]
[http://graph.facebook.com/251092214938743 graph.facebook.com/251092214938743]
<source lang="javascript">
<source lang="javascript">
{
{
  "id": "251092214938743",
"id": "251092214938743",
  "from": {
"from": {
      "name": "Mercedes-Benz Deutschland",
"name": "Mercedes-Benz Deutschland",
      "category": "Cars",
"category": "Cars",
      "id": "145689658812333"
"id": "145689658812333"
  },
},
  "tags": {
"tags": {
[…]
},
"name": "DTM 2011\r\n\r\nMotorsports / DTM: german touring cars championship 2011, 07 Jamie Green (GBR, AMG […]",
"picture": "http://photos-f.ak.fbcdn.net/hphotos-ak-snc7/299511_251092214938743_145689658812333_642955_1055534…",
"source": "http://a6.sphotos.ak.fbcdn.net/hphotos-ak-snc7/s720x720/299511_251092214938743_145689658812333_6429…",
"height": 505,
"width": 720,
"images": [
{
"height": 505,
"width": 720,
"source": "http://a6.sphotos.ak.fbcdn.net/hphotos-ak-snc7/s720x720/299511_251092214938743_145689658812333…"
},
{
"height": 126,
"width": 180,
"source": "http://photos-f.ak.fbcdn.net/hphotos-ak-snc7/299511_251092214938743_145689658812333_642955…"
},
[…]
[…]
  },
],
  "name": "DTM 2011\r\n\r\nMotorsports / DTM: german touring cars championship 2011, 07 Jamie Green (GBR, AMG […]",
[…]
  "picture": "http://photos-f.ak.fbcdn.net/hphotos-ak-snc7/299511_251092214938743_145689658812333_642955_1055534…",
  "source": "http://a6.sphotos.ak.fbcdn.net/hphotos-ak-snc7/s720x720/299511_251092214938743_145689658812333_6429…",
  "height": 505,
  "width": 720,
  "images": [
      {
        "height": 505,
        "width": 720,
        "source": "http://a6.sphotos.ak.fbcdn.net/hphotos-ak-snc7/s720x720/299511_251092214938743_145689658812333…"
      },
      {
        "height": 126,
        "width": 180,
        "source": "http://photos-f.ak.fbcdn.net/hphotos-ak-snc7/299511_251092214938743_145689658812333_642955_1055534473_a.jpg"
      },
      […]
  ]
  […]
}
}
</source>
</source>
Line 218: Line 211:
===Reference===
===Reference===
[http://developers.facebook.com/docs/reference/api/ developers.facebook.com/docs/reference/api/]
[http://developers.facebook.com/docs/reference/api/ developers.facebook.com/docs/reference/api/]
===Example===
[[File:Example_facebook_api.zip|Download Example]]
==Twitter==
==Twitter==
[http://api.twitter.com/1/statuses/user_timeline.json?screen_name=saschalobo api.twitter.com/1/statuses/user_timeline.json?screen_name=saschalobo]
[http://api.twitter.com/1/statuses/user_timeline.json?screen_name=saschalobo api.twitter.com/1/statuses/user_timeline.json?screen_name=saschalobo]
Line 224: Line 220:
{
{
"id": 134979869225402368,
"id": 134979869225402368,
"text": "Keine Ahnung, was das f\u00fcr die Finanzkrise hiesse, aber mein Leben w\u00e4re besser, wenn der Begriff \"Rating-Riese\" verboten w\u00fcrde",
"text": "Keine Ahnung, was das f\u00fcr die Finanzkrise hiesse, aber mein Leben w\u00e4re besser, wenn der […]",
"created_at": "Fri Nov 11 13:04:43 +0000 2011",
"created_at": "Fri Nov 11 13:04:43 +0000 2011",
"user": {
"user": {
Line 235: Line 231:
{
{
"id": 134944048069869569,
"id": 134944048069869569,
"text": "\u00dcberall liest man 11.11.11 \u2013\u00a0liebe Nerds, bitte achtet auch im Internet auf Eure Schriftsprache und schreibt: !!.!!.!!",
"text": "\u00dcberall liest man 11.11.11 \u2013\u00a0liebe Nerds, bitte achtet auch im Internet auf Eure […]",
"created_at": "Thu Nov 10 22:31:56 +0000 2011",
"created_at": "Thu Nov 10 22:31:56 +0000 2011",
"user": {
"user": {
Line 248: Line 244:
===Reference===
===Reference===
[http://dev.twitter.com/docs/api dev.twitter.com/docs/api]
[http://dev.twitter.com/docs/api dev.twitter.com/docs/api]
==YouTube==
==YouTube==
[http://gdata.youtube.com/feeds/api/users/NationalGeographic/uploads?v=2&alt=json&max-results=50 gdata.youtube.com/feeds/api/users/NationalGeographic/uploads?v=2&alt=json&max-results=50]
[http://gdata.youtube.com/feeds/api/users/NationalGeographic/uploads?v=2&alt=json&max-results=50 gdata.youtube.com/feeds/api/users/NationalGeographic/uploads?v=2&alt=json&max-results=50]
Line 282: Line 279:
===Reference===
===Reference===
[http://code.google.com/intl/en-UK/apis/youtube/2.0/reference.html code.google.com/intl/en-UK/apis/youtube/2.0/reference.html]
[http://code.google.com/intl/en-UK/apis/youtube/2.0/reference.html code.google.com/intl/en-UK/apis/youtube/2.0/reference.html]
===Example===
[[File:Example_youtube_api.zip|Download Example]]

Latest revision as of 12:06, 13 December 2011

API – Application Programming Interface

Präsentation auf slideshare.net

Übersicht

  • Facebook – Graph API
  • Twitter – REST API
  • YouTube – Data API

JSON

Struktur von JSON

{
	"key": "vaule",
	"string": "Lorem ipsum dolor sit",
	"number": -123.456,
	"object":{
		"key": "value"
	},
	"array": ["foo","bar"],
	"boolean": true,
	"empty": null
}

Size: 169 Bytes

Vergleich zu XML

<object>
	<key>vaule</key>
	<string>Lorem ipsum dolor sit</string>
	<number>-123.456</number>
	<object>
		<key>value</key>
	</object>
	<array>foo</array><array>bar</array>
	<bolean>true</bolean>
	<empty>null</empty>
</object>

Size: 226 Bytes

Vorteile gegenüber XML

Kleinere Datei, verschiedene Daten-Typen (string, number, object, array, boolean, empty), einfaches Parsing in JavaScript, PHP, Objective-C usw.

Parsing JSON

jQuery

$.ajax({
	url: "example.json",
	success: function(data){
		alert(data.string);
	}
});

PHP

$url = "example.json";
$file_content = file_get_contents($url);
$data = json_decode($file_content);
echo $data->string;

Facebook

graph.facebook.com/cocacola 

{
	"id": "40796308305",
	"name": "Coca-Cola",
	"picture": "http://profile.ak.fbcdn.net/hprofile-ak-snc4/276879_40796308305_1578420141_s.jpg",
	"link": "https://www.facebook.com/coca-cola",
	"likes": 35648837,
	"category": "Food/beverages",
	"website": "http://www.coca-cola.com",
	"username": "coca-cola",
	"founded": "1886",
	"products": "Coca-Cola is the most popular and biggest-selling soft drink in history […]",
	"location":{
		"latitude": 42.00736,
		"longitude": -72.521224
	},
	"can_post": true,
	"checkins": 73
}

Size: 1.16 KB

Albums

graph.facebook.com/mercedesbenzdeutschland/albums 

{
	"data": [
		{
			"id": "251092158272082",
			"from": {
			"name": "Mercedes-Benz Deutschland",
			"category": "Cars",
			"id": "145689658812333"
		},
		"name": "DTM 2011 - Rennen, Finale und Showprogramm",
		"location": "Hockenheimring Baden-W\u00fcrttemberg",
		"link": "https://www.facebook.com/album.php?fbid=251092158272082&id=145689658812333&aid=54543",
		"cover_photo": "251092214938743",
		"count": 10,
		"type": "normal",
		"created_time": "2011-10-27T08:08:23+0000",
		"updated_time": "2011-10-27T08:10:30+0000",
		"can_upload": false
		},
		{
			"id": "249480695099895",
			"from": {
			"name": "Mercedes-Benz Deutschland",
			"category": "Cars",
			"id": "145689658812333"
		},
		"name": "DTM Finale 2011 - Mercedes-Benz",
		"location": "Hockenheim",
		"link": "https://www.facebook.com/album.php?fbid=249480695099895&id=145689658812333&aid=54185",
		"cover_photo": "249480751766556",
		"count": 7,
		"type": "normal",
		"created_time": "2011-10-23T14:45:52+0000",
		"updated_time": "2011-10-24T13:33:17+0000",
		"can_upload": false
		},
		[…]
	]
}

Size: 1.16 KB

Album Photos

graph.facebook.com/251092158272082/photos 

{
	"data": [
		{
			"id": "251092214938743",
			"from": {
				"name": "Mercedes-Benz Deutschland",
				"category": "Cars",
				"id": "145689658812333"
			},
			"tags": {
				"data": [
					{
						"id": "100000441323195",
						"name": "Denis H\u00f6rner",
						"x": 50.1042,
						"y": 83.6795,
						"created_time": "2011-10-27T10:40:08+0000"
					}
				]
			},
			"name": "DTM 2011\r\n\r\nMotorsports / DTM: german touring cars championship 2011, 07 […]",
			"picture": "http://photos-f.ak.fbcdn.net/hphotos-ak-snc7/299511_251092214938743_145689658812333_64…",
			"source": "http://a6.sphotos.ak.fbcdn.net/hphotos-ak-snc7/s720x720/299511_251092214938743_14568965…",
			"height": 505,
			"width": 720,
			"images": [
				{
					"height": 505,
					"width": 720,
					"source": "http://a6.sphotos.ak.fbcdn.net/hphotos-ak-snc7/s720x720/299511_2510922149…"
				},
				{
					"height": 126,
					"width": 180,
					"source": "http://photos-f.ak.fbcdn.net/hphotos-ak-snc7/299511_251092214938743_14568965…"
				},
				[…]
			],
			"link": "http://www.facebook.com/photo.php?pid=642955&id=145689658812333",
			"icon": "http://static.ak.fbcdn.net/rsrc.php/v1/yz/r/StEh3RhPvjk.gif",
			[…]
		}
	]
}

Picture

graph.facebook.com/251092214938743 

{
	"id": "251092214938743",
	"from": {
		"name": "Mercedes-Benz Deutschland",
		"category": "Cars",
		"id": "145689658812333"
	},
	"tags": {
		[…]
	},
	"name": "DTM 2011\r\n\r\nMotorsports / DTM: german touring cars championship 2011, 07 Jamie Green (GBR, AMG […]",
	"picture": "http://photos-f.ak.fbcdn.net/hphotos-ak-snc7/299511_251092214938743_145689658812333_642955_1055534…",
	"source": "http://a6.sphotos.ak.fbcdn.net/hphotos-ak-snc7/s720x720/299511_251092214938743_145689658812333_6429…",
	"height": 505,
	"width": 720,
	"images": [
		{
			"height": 505,
			"width": 720,
			"source": "http://a6.sphotos.ak.fbcdn.net/hphotos-ak-snc7/s720x720/299511_251092214938743_145689658812333…"
		},
		{
			"height": 126,
			"width": 180,
			"source": "http://photos-f.ak.fbcdn.net/hphotos-ak-snc7/299511_251092214938743_145689658812333_642955…"
		},
		[…]
	],
	[…]
}

Reference

developers.facebook.com/docs/reference/api/

Example

File:Example facebook api.zip

Twitter

api.twitter.com/1/statuses/user_timeline.json?screen_name=saschalobo 

[
	{
		"id": 134979869225402368,
		"text": "Keine Ahnung, was das f\u00fcr die Finanzkrise hiesse, aber mein Leben w\u00e4re besser, wenn der […]",
		"created_at": "Fri Nov 11 13:04:43 +0000 2011",
		"user": {
			"id": 5876652,
			"name": "Sascha Lobo",
			"screen_name": "saschalobo"
		},
		"retweet_count": 9
	},
	{
		"id": 134944048069869569,
		"text": "\u00dcberall liest man 11.11.11 \u2013\u00a0liebe Nerds, bitte achtet auch im Internet auf Eure […]",
		"created_at": "Thu Nov 10 22:31:56 +0000 2011",
		"user": {
			"id": 5876652,
			"name": "Sascha Lobo",
			"screen_name": "saschalobo"
		},
		"retweet_count": 9
	}
]

Reference

dev.twitter.com/docs/api

YouTube

gdata.youtube.com/feeds/api/users/NationalGeographic/uploads?v=2&alt=json&max-results=50 

{
	[…]
	"entry": [
		{
			"published": {
				"$t": "2011-11-11T20:59:35.000Z"
			},
			"updated": {
				"$t": "2011-11-13T18:00:48.000Z"
			},
			"title": {
				"$t": "Thrive: How to be Happy Tip #1"
			},
			"media$group": {
				"media$thumbnail": [
					{
						"url": "http://i.ytimg.com/vi/gYm0tDcQMI0/default.jpg",
						"time": "00:00:37.500"
					},
					{
						"url": "http://i.ytimg.com/vi/gYm0tDcQMI0/3.jpg",
						"time": "00:00:56.250"
					}
				]
			}
		}
	]
}

Reference

code.google.com/intl/en-UK/apis/youtube/2.0/reference.html

Example

File:Example youtube api.zip

Retrieved from "https://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=IFD:WApplications/Vortraege/APIs_JSON&oldid=35734"