CS 10: Problem solving via Object Oriented Programming. Web Services

Transcription

1 CS 10: Problem solving via Object Oriented Programming Web Services

2 Big picture: query online photo database Flickr and display results Overview Give me pictures of cats Your computer Flickr photo database Flickr is an online photo database Internet Click next Ok, here you go Click next 2

3 DEMO: FlickrSearch.java Ask Flickr for photos matching search term Get back XML stream with data on all photos in Flickr database matching search term Fetch each photo described in XML data and display one of them 3

4 Agenda 1. Graphical user interface 2. GeSng stuff from the web 3. Web services 4. Processing XML 5. Finished product 4

5 CreaVng Graphical User Interfaces (GUIs) involves graphical elements and listeners 1. Graphical elements are items on the screen the user can interact with Found in Abstract Window Toolkit (AWT) and Swing libraries Provide a wide variety of items such as bu\ons, text fields, combo boxes Pla^orm (e.g., Windows, Mac) and device independent 2. Listeners respond to user input such as clicking or entering text on graphical elements 5

6 Java graphical elements consists of Containers and Components Containers JFrame Components JTextField JComboBox JBu\on JPanel Containers can hold other containers or components JComponent May be nested Adding these elements manually is tedious Graphic design tools make life easier Today we do it the old fashioned way 6

7 As with Blobs, a GUI program will start running and wait for events to occur FlickrSearchCore.java Like Blob GUI programs, this one will start a program running, then wait for events Steps to take: 1. Create graphical elements (e.g., buions, combo box) 2. Add event listeners that look for events such as mouse presses to occur on graphical elements and provide handling code 7

8 Step 1: Create graphical elements FlickrSearchCore.java Extends JFrame Set JComponent size Create JComponent container hold images JFrame Content Pane holds Containers Common boilerplate Will add code here to display images in JComponent Create a panel to hold buions (setupgui() is our method on next slides) Add JPanel (buion panel) and JComponent (images) to Content Pane JFrame creates a blank window with a Otle 8

9 Step 2: Add event listeners that wait for events on graphical elements // create button control JButton search = new JButton("search"); //add listener if action taken on button (e.g., clicked) search.addactionlistener(new AbstractAction() { public void actionperformed(actionevent e) { // this will run if action taken on button System.out.println("search button ); } }); Listeners are called back when event fires Located in awt.event.* (import this) Create search JBuIon graphical element Add a listener that will fire when the buion is clicked Here just print that buion was clicked AcOonEvent is an Object that gives details about the event that just occurred (e.g., buion click) 9

10 Set up JPanel that holds bu\ons, text and drop down box FlickrSearchCore.java Creates JPanel to hold buions and dropdown control Create prev JbuIon and listener that fires when buion clicked Create drop down list Create JTextField Will search for photos with keywords entered here Finally add all elements to JPanel and return Create search JBuIon and listener Will search for photos with keywords from JTextField

11 Agenda 1. Graphical user interface 2. GeSng stuff from the web 3. Web services 4. Processing XML 5. Finished product 11

12 To transfer data between computers we use pre- defined protocols Network protocols Protocols define up front how data will be exchanged so everyone knows the rules There are dozens of protocols used for different purposes: TCP/IP, FTP Wi- Fi, Bluetooth HyperText Transfer Protocol (HTTP) is the protocol commonly used by the World Wide Web to get HyperText Markup Language (HTML) documents that describe how to render a web page We use a Uniform Resource LocaVon (URL) to specify what page we want to get: h\p:// Protocol: how we will talk (hip) Computer that has data Directory where data located File (assume index.html or index.php if not provided) 12

13 Client makes a request to a Server for a resource; Server responds to request Process Give me this file: h\p:// Your browser Web server Browser interprets HTML text and renders page Sure, I have that file, here you go: <!DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Strict//EN" "h\p:// strict.dtd"> <html xmlns="h\p:// xml:lang="en" lang="en"> <head> <meta h\p- equiv="content- type" content="text/html;charset=u^- 8" /> <Vtle>CS 10 Problem solving Winter 2018</Vtle> </head> <body> <div id="page"> <div id="header"> <div id="vtle">cs 10, Winter 2018</div> <div id="subvtle">problem Solving via Object Oriented Programming</div> </div> A web page is simply a text document with a descripoon of what to display on the screen (maybe some Javascript for user interacoon) in a format called HTML 13

14 Java makes it easy to get HyperText Markup Language (HTML) from the web WWWGetTry.java public class WWWGetTry { public static void main(string[] args) { try { // Create the URL; can throw MalformedURL URL url = new URL(" System.out.println("*** getting " + url); Create BufferedReader to read from URL like reading from file Close reader in finally block // Create the reader for the stream; can throw IO BufferedReader in = new BufferedReader(new InputStreamReader(url.openStream())); // Read the lines; can throw IO try { String line; while ((line = in.readline())!= null) { System.out.println(line); } } // Be sure to close the reader, whether or not reading was successful finally { in.close(); } } catch (MalformedURLException e) { System.err.println("bad URL"); Catch bad URL } catch (IOException e) { System.err.println("problem opening/reading/closing"); } Tell Java where to look for HTML LocaOon called URL Uniform Resource LocaOon Read HTML line by line URL: Protocol hip Server cs.dartmouth.edu LocaOon /~tjp/cs10/index.php Catch network errors } } System.out.println("*** done"); 14

15 DEMO: WWWGetTry.java Read data from CS web server Get HTML at: h\p:// Write HTML to console line by line 15

16 Agenda 1. Graphical user interface 2. GeSng stuff from the web 3. Web services 4. Processing XML 5. Finished product 16

17 We can use web services to get data (as opposed to HTML) from a server Web service process Give me this data: h\p:// LocaOon Web service end point Parameters in query string provided to server Web server Sure, I have that data, here you go: XML OR JSON <Person> <name>tim</name> <class>2021</class> </Person> Your computer { Person : { name : Tim, class :2021} } REST (RepresentaVonal State Transfer) uses HTTP to transfer data 17

18 Server- side REST web service can return data that does not have to be HTML Enter the following addresses in web browser h\p://cs.dartmouth.edu/~tjp/cs10/hello.php?name=vm h\p://cs.dartmouth.edu/~tjp/cs10/hello.php?name=vm&color=blue Causes this code to run on server <?php $name = $_GET['name']; $color = $_GET['color']; if (isset($color)) {?> } else { PHP can extract query string parameters Here $name = Om and $color = null or blue echo 'Hello there '.$name.', thanks for stopping by. My favorite color is '.$color. ' too! '; Echo sends string back to client Different string returned if color provided (or not) echo 'Hello there '.$name.', thanks for stopping by!'; } There are several standard formats for data (e.g., XML, JSON) (This doesn t use one of those, next secoon does) PHP is a server- side programming language (e.g., code runs on a server) Previous Java was client- side code (e.g., code run on our laptops) Java provides query string parameters and asks PHP for data based on 18 those parameters

19 DEMO: Use browser to get non- HTML message from CS web server Start web browser (e.g., Chrome, Firefox) Enter url: h\p:// name=vm h\p:// name=vm&color=blue 19

20 Agenda 1. Graphical user interface 2. GeSng stuff from the web 3. Web services 4. Processing XML 5. Finished product 20

21 extensible Markup Language (XML) is a popular way of represenvng data Sample XML for course enrollment <enrollment> <course department="cs" number="1" term= 18W"> <student name="alice" year="20" /> <student name="bob" year="19" /> <student name="charlie" year="18" /> </course> <course department="cs" number="10" term= 18W"> <student name="delilah" year="19" /> <student name="elvis" year="00" /> <student name="flora" year="20" /> </course> </enrollment> Start of enrollment tag begins with < End of enrollment tag begins with </ XML XML groups data with an opening and closing tag 21

22 extensible Markup Language (XML) is a popular way of represenvng data Sample XML for course enrollment <enrollment> <course department="cs" number="1" term= 18W"> <student name="alice" year="20" /> <student name="bob" year="19" /> <student name="charlie" year="18" /> </course> <course department="cs" number="10" term= 18W"> <student name="delilah" year="19" /> <student name="elvis" year="00" /> <student name="flora" year="20" /> </course> </enrollment> XML XML groups data with an opening and closing tag Tags can be nested Start of enrollment tag begins with < End of enrollment tag begins with </ Nested tag called course for CS 1 22

23 extensible Markup Language (XML) is a popular way of represenvng data Sample XML for course enrollment <enrollment> <course department="cs" number="1" term= 18W"> <student name="alice" year="20" /> <student name="bob" year="19" /> <student name="charlie" year="18" /> </course> <course department="cs" number="10" term= 18W"> <student name="delilah" year="19" /> <student name="elvis" year="00" /> <student name="flora" year="20" /> </course> </enrollment> XML XML groups data with an opening and closing tag Tags can be nested Start of enrollment tag begins with < End of enrollment tag begins with </ Nested tag called course for CS 1 Another nested tag called course for CS 10 23

24 extensible Markup Language (XML) is a popular way of represenvng data Sample XML for course enrollment Course tag aiributes: department = CS, number = 1, term = 18W <enrollment> <course department="cs" number="1" term= 18W"> <student name="alice" year="20" /> <student name="bob" year="19" /> <student name="charlie" year="18" /> </course> <course department="cs" number="10" term= 18W"> <student name="delilah" year="19" /> <student name="elvis" year="00" /> <student name="flora" year="20" /> </course> </enrollment> XML XML groups data with an opening and closing tag Tags can be nested Tags can have aiributes 24

25 extensible Markup Language (XML) is a popular way of represenvng data Sample XML for course enrollment Course tag aiributes: department = CS, number = 1, term = 18W <enrollment> <course department="cs" number="1" term= 18W"> <student name="alice" year="20" /> <student name="bob" year="19" /> <student name="charlie" year="18" /> </course> <course department="cs" number="10" term= 18W"> <student name="delilah" year="19" /> <student name="elvis" year="00" /> <student name="flora" year="20" /> </course> </enrollment> Student tags aiributes: name= Flora, year= 20 XML XML groups data with an opening and closing tag Tags can be nested Tags can have aiributes 25

26 extensible Markup Language (XML) is a popular way of represenvng data Sample XML for course enrollment <enrollment> <course department="cs" number="1" term= 18W"> <student name="alice" year="20" /> <student name="bob" year="19" /> <student name="charlie" year="18" /> </course> <course department="cs" number="10" term= 18W"> <student name="delilah" year="19" /> <student name="elvis" year="00" /> <student name="flora" year="20" /> </course> </enrollment> XML XML groups data with an opening and closing tag Tags can be nested Tags can have a\ributes Typically web services provide documentaoon to help you interpret the aiributes

27 Flickr uses XML to return informavon about photos it stores Simplified Flickr XML data from search Querying Flickr for dartmouth URL (protocol, server, locaoon) h\ps://api.flickr.com/services/rest/? method=flickr.photos.search&api_key=keyhere&text=dartmouth&sort=relevance&per_page=10 Query string: method = search photos (flickr.photos.search) api_key = find on Canvas under Pages text = find photos matching this text (dartmouth) sort = by relevance, by date, etc (relevance) per_page = how many photos to return (10) 27

28 Flickr uses XML to return informavon about photos it stores Simplified Flickr XML data from search Querying Flickr for dartmouth h\ps://api.flickr.com/services/rest/? method=flickr.photos.search&api_key=keyhere&text=dartmouth&sort=relevance&per_page=10 Returns XML with informaoon about photos of Dartmouth <rsp stat="ok"> <photos page="1" pages="1111" perpage="10" total="11106"> <photo id=" " secret=" " server="3245" farm="4" /> <photo id=" " secret="c9428b8fb3" server="3434" farm="4" />... </photos> </rsp> 28

29 Flickr uses XML to return informavon about photos it stores Simplified Flickr XML data from search Querying Flickr for dartmouth h\ps://api.flickr.com/services/rest/? method=flickr.photos.search&api_key=keyhere&text=dartmouth&sort=relevance&per_page=10 Returns XML with informaoon about photos of Dartmouth Response status is ok <rsp stat="ok"> <photos page="1" pages="1111" perpage="10" total="11106"> <photo id=" " secret=" " server="3245" farm="4" /> <photo id=" " secret="c9428b8fb3" server="3434" farm="4" />... </photos> </rsp> Each photo (singular) in its own photo tag with informaoon describing that photo and where to find it All matching photos (plural) grouped into photos tag 29

30 Flickr uses XML to return informavon about photos it stores Simplified Flickr XML data from search Querying Flickr for dartmouth h\ps://api.flickr.com/services/rest/? method=flickr.photos.search&api_key=keyhere&text=dartmouth&sort=relevance&per_page=10 Returns XML with informaoon about photos of Dartmouth <rsp stat="ok"> <photos page="1" pages="1111" perpage="10" total="11106"> <photo id=" " secret=" " server="3245" farm="4" /> <photo id=" " secret="c9428b8fb3" server="3434" farm="4" />... </photos> </rsp> Flickr documentaoon says that photos can be retrieved with: h\p://farm{farm- id}.stavcflickr.com/{server- id}/{id}_{secret}.jpg h\p://farm4.stavcflickr.com/3245/ _ jpg 30

31 Agenda 1. Graphical user interface 2. GeSng stuff from the web 3. Web services 4. Processing XML 5. Finished product 31

32 FlickrSearch.java: finished product expands upon FlickrSearchCore.java FlickrSearch.java Get API key from Canvas (don t abuse it!) Will load all Flickr images into ArrayList of BufferedImages called images curr will hold the index of image currently displayed If we have some images (images.size > 0) draw the image at index curr in the canvas JComponent paintcomponent() fires on repaint() Just like with WanderingImage Blobs 32

33 FlickrSearch.java: finished product expands upon FlickrSearchCore.java FlickrSearch.java Setup previous graphical buion as before, but now add program logic If prev buion pressed, go to prior image (loop to last if at image 0) repaint() causes canvas to redraw and display the image in ArrayList images at index curr Next buion similar to previous buion 33

34 FlickrSearch.java: finished product expands upon FlickrSearchCore.java FlickrSearch.java Setup drop down combo box to track how Flickr should sort photos Each Ome drop down changes, sort instance variable updates When search buion clicked, get search text in queryf JTextField Then call loadimages method passing query text from queryf to get images from Flickr (next slide) Set current image to 0 and repaint() 34

35 FlickrSearch.java: finished product expands upon FlickrSearchCore.java FlickrSearch.java Start with search query entered by user Build request URL with query string parameters Use URLEncoder to handle spaces in String query Create new BufferedReader and read Flickr s response to request Clean up non- standard XML in collectstring() this is a hack! Loop over all photo returned Follow Oracle s example to set up XML parser Extract farm, server, and secret data elements about each photo Fetch photo and add to images ArrayList 35

36 36

37 37