YouTube APIs + AppEngine workshop

1. Building Video Apps
with YouTube APIs : Workshop
Jarek Wilkiewicz
twitter.com/wjarek
Mexico City, 03/31/2011

2. Agenda
AppEngine - setup dev env
Player API
Exercise 1 : Run API example
Exercise 2 : Modify API example
Google YouTube Data API
Exercise 3 : Run API example
Google YouTube Data API + AppEngine
Exercise 4 : Integrate YouTube API into
AppEngine app
Exercise 5 : Deploy

3. AppEngine - setup
Download and install AppEngine SDK : http:
//code.google.com/appengine/downloads.html#Google_App_Engine_SDK_for_Java
Install Eclipse and Google Plugin as
documented here https://sites.google.
com/site/gdevelopercodelabs/app-engine/java-codelab
Create and Run the "Guestbook" app
You should see "Hello App Engine"
Mac JDK issues ? See : http://code.google.
com/p/googleappengine/issues/detail?id=4712#c39

4. Add a file : player.html
Create player.
html file under
war/ directory

5. Player API : Exercise 1
Read http://goo.gl/D30jK
http://apiblog.youtube.com/2011/01/introducing-javascript-player-api-for.html
Copy the code to player.html
Run it and point your browser at http:
//localhost:8888/player.html
The playback should stop after 6000ms
Modify the code to use different videoId
and a timeout other than 6000ms

6. Player API : Exercise 2
Continue with code from Exercise 1
Modify the code to skip to second 20
rather than stopping at second 6, and
continue playing
API info :
http://code.google.com/apis/youtube/iframe_api_reference.html
http://code.google.com/apis/youtube/js_api_reference.html

7. Player API : Exercise 2 Solution
function stopVideo() {
player.seekTo(20, true);
}

8. Using YouTube Google Data APIs
Exercise 3
Objective : Run sample API code
Steps :
1. Download Java Google Data Client Library and Samples
JARs
2. Add Java Client Library JARs and dependencies to your
project
3. Copy YouTubeReadonlyClient.java sample into your project
and adjust package name
4. Run YouTubeReadonlyClient from Eclipse

9. Google Data API : setup
Exercise 3
Download the Java Client Library (1.43.0 source and
1.43.0 samples) : http://code.google.com/p/gdata-java-
client/downloads/list

10. Google Data API : setup libs
Exercise 3
Unzip the gdata-src.java-1.43.0.zip
Copy gdata jars (gdata/java/lib)to
GuestbookwarWEB-INFlib
Copy gdata dep jars (gdata/java/deps)to
GuestbookwarWEB-INFlib
gdata/java/lib$ cp * ~/projects/workspace/Guestbook/war/WEB-INF/lib/
gdata/java/deps$ cp * ~/projects/workspace/Guestbook/war/WEB-INF/lib/

11. Google Data API : Add JARs
Exercise 3
Update build path (Project/Properties/Java Build Path/Libraries/Add JARs)
to include the jar
Refresh

12. Google Data API : Add Sample
Exercise 3
Add YouTubeReadOnly.java from gdata-samples.java-1.43.0.
zip to your project src directory
Modify package to package guestbook
gdata-samples/java/sample/youtube$ cp YouTubeReadonlyClient.java ~/projects/workspace/Guestbook/src/guestbook

13. Google Data API : Run Sample
Exercise 3
Run YouTubeReadOnly ( option 2 Print Search Feed)

14. Google Data API : Example Output

15. Integrate YouTube API invocation into an
AppEngine app
Exercise 4
Objective : include YouTube search results
in GuestbookServlet.java output
Steps : reuse implementation of private static void
searchFeed(YouTubeService service) in your servlet
Modify the printVideoEntry implementation to print using
PrintWriter

16. Exercise 4 : move searchFeed to
GuestBookServlet

17. Exercise 4 : move searchFeed to
GuestBookServlet

18. Exercise 4 : modify doGet
Now modify doGet to use searchFeed in your servlet, replace System.
out references with HttpServletResponse.getWriter()

19. Google Data API : Dev Key
Exercise 4
Register for YouTube developer key : http://code.google.
com/apis/youtube/dashboard
Use it in your app YouTubeService myService = new YouTubeService
("gdataSample-YouTube-1", "AI39...")

20. Exercise 4 : run your code

21. Exercise 5 : Create AppEngine App
Follow the instructions here to create AppEngine application : https://sites.
google.com/site/gdevelopercodelabs/app-engine/creating-your-app-
engine-account
Modify appengine-web.xml and specify the application name

22. Exercise 5 : Deploy to AppEngine
Deploy to AppEngine
Try http://your-application-name.appspot.com