Introduction to Web
Applications & APIs: Tutorial
Presented by Julian Guo and Jonathan Jiang,
Department of MIS,
The University of Arizona
Course MIS 510, 2014 Spring
1
Agenda
 Architecture of Web Applications
 Web Server (Tomcat)
 Creating Web Application
 Database
 APIs
Architecture of Web Applications
3
Architecture of Web Applications

Three layer architecture
Users

Client Application

Client application provides interfaces to interact with users. For web
applications, client applications are browsers.

The contents displayed on the client application are obtained from the
application server.

After receiving inputs from users, the client application submits the
user inputs to the application server.
4
Architecture of Web Applications


Application Server

Application server is a container which allows server applications to run
within it.

Application server handles the requests from the client application and
pass them to the server application.

These requests are generally sent through HTTP (Hypertext Transfer
Protocol), which specifies a set of methods and headers that allow
clients and servers to interact and exchange information.

Server application then processes the requests and sends the
responses back to the client application.

Server application can also access database via JDBC, if database
operations are needed.
Database

Many software can be used to store and manage data (e.g., MS SQL
Server, Oracle, and MySql)
5
Web Server
6
Web Server

To build a web application, we need a server which is able to deal with


Http requests
Server applications

Therefore, web server is chosen based on the programming languages
by which the server application is coded.

Apache Tomcat

Apache Tomcat is an open source software implementation of the Java
Servlet and JavaServer Pages (JSP) technologies.

http://tomcat.apache.org/download-70.cgi

Prerequisite – JDK
Windows Service Installer (deploy .war file), Core (on Eclipse)


JDK 6 or 7(latest) download:
http://www.oracle.com/technetwork/java/javase/downloads/index.html
7
Apache Tomcat
 Installation

Setup the connection port, user name and password
 Installation complete
8
Apache Tomcat
 Test
 http://127.0.0.1:8080
9
Apache Tomcat

File Structure

TomcatRoot
 C:\Program Files\Apache Software Foundation\Tomcat 7.0 (default path)

TomcatRoot/bin
 Executable files

Tomcat7.exe – command line mode; Tomcat7w.exe – service mode

TomcatRoot/conf - Configuration files of Tomcat

TomcatRoot/lib
 Libraries/APIs required to run Tomcat

TomcatRoot/logs - Log files

TomcatRoot/webapps (http://localhost:8080/)
 Application root – Put your web applications under this folder

TomcatRoot/work
 Used to store compiled JSP files (cache).
10
Web Application
Using JSP on Eclipse as an example
11
Create A Web Application Project
 Install Tomcat
 Eclipse -> File -> New> Server
 Create A Web Application
 Eclipse -> File -> New > Dynamic Web Project
 Put in the project name
(ex. WebApp1) -> Next
 http://localhost:8080/
WebApp1/
Create A Web Application Project
 src
 The source code folder
 build\classes
 The folder for compiled
class files
 Click Next
13
Create A Web Application Project

Tick on ‘Generate wb.xml’ and click
Finish.
14
Web Application Project – File Structure

Deployment Description


Java Resource:



Built-in JavaScript libraries
Build


Src: the folder for java source codes (such as .java files)
Libraries: the folder for java libraries (such as .jar files)
JavaScript Resources


Summarizes current status and setting of the project
The folder of compiled class files (*.class) and imported APIs
WebContent (Root Folder of the application)



Try to create an index.jsp under this folder.
All application contents should be put under this folder.
WEB-INF (the system folder of a web application) contains



Configuration files (WEB-INF/web.xml)
Compiled java codes (WEB-INF/classes)
Third-party libraries/APIs (WEB-INF/lib)
15
Deploy A Web Application Project
 To deploy a web
application, we first
package the web
application into a
WAR file.
 Deploy
 Right-click on the
project -> Export
 Choose “WAR file” > click next
16
Deploy A Web Application Project
 Specify the output location and click Finish.


Deploy

Copy the “WAR file” to the AppRoot of the TomCat Server
 C:\Program Files\Apache Software Foundation\Tomcat 7.0 \webapps

Restart Tomcat
Now you can visit your web app via web browser:


http://localhost:8080/WebApp1/
(From your local machine)
http://yourIPAddress:8080/WebApp1/ (From other machines)
17
Database
18
Database
 A database is an organized collection of
data.
 There are many different strategies for
organizing data to facilitate easy access
and manipulation.
 A database management system (DBMS)
provides mechanisms for storing,
organizing, retrieving and modifying data
for many users.
19
JDBC (Java Database Connectivity)
 Java programs communicate with databases and
manipulate their data using the JDBC API.
 A JDBC driver enables Java applications to connect
to a database in a particular DBMS and allows you to
manipulate that database using the JDBC API.
 Using the JDBC API enables developers to change the
underlying DBMS without modifying the Java code
that accesses the database.
 Most popular database management systems now
provide JDBC drivers. There are also many third-party
JDBC drivers available.
20
21
JDBC API
 Java APIs




Java APIs are jar files which can be unzipped by
compression software.
Java API jar files contain compiled java codes (.class)
organized by following their packaged names.
Some Java APIs also contain source codes.
jTDS (http://jtds.sourceforge.net/)
 jTDS is an open source 100% pure Java (type 4) JDBC 3.0
driver for Microsoft SQL Server (6.5, 7, 2000, 2005 and
2008, and 2012) and Sybase (10, 11, 12, and 15).
 Download:

http://sourceforge.net/projects/jtds/files/latest/download?source=f
iles
 Connection String
 jdbc:jtds:<server_type>://<server>[:<port>][/<database
>][;<property>=<value>[;...]]
22
Import APIs Into A Web Application

To use third-party APIs, we have to import these
APIs into our project.
1.
Put third-party APIs under the lib folder


2.
Copy your API (jar) files into the folder WEB-INF/lib
If “Referenced Libraries” contains APIs just copied, we
are all set. Otherwise, go to step 2.
Import APIs into your project





Right click on the project -> “properties”
In the properties window, choose “Java Build Path” ->
“Libraries” tab
Click “Add JARs” -> select the APIs you want to import
in the pop-up window -> Click “OK”
Now, we can see the selected APIs displayed in the
properties window. Click “OK” on the properties window.
“Referenced Libraries” should contains APIs imported.
23
Step 2: import APIs into project
24
Step 3
25
Sample Code
 Showing how to connect to a database,
retrieve data based on a given SQL, and
display the results on a JSP.
 To try the demo:
 Import the MIS510Demo project into Eclipse
 File->Import->Existing Projects into Workspace, then
select the root directory of sample code.
 Right Click the project->Debug As->Debug
on Server
26
Command Types
 boolean execute()
Executes the SQL statement in this
PreparedStatement object, which may be any kind of
SQL statement.
 ResultSet executeQuery()
Executes the SQL query in this PreparedStatement
object and returns the ResultSet object generated by
the query.
 int executeUpdate()
Executes the SQL statement in this
PreparedStatement object, which must be an SQL
INSERT, UPDATE or DELETE statement; or an SQL
statement that returns nothing, such as a DDL
statement.
27
Web API
28
Web APIs
 Application Programming Interface (API)
 a particular set of rules and specifications that a
software program can follow to access and make
use of the services and resources provided by
another particular software program that
implements that API.
 serves as an interface between different
software programs and facilitates their
interaction
 Web API
 typically a defined set of HTTP request messages
expressed in SOAP or REST along with a
definition of the structure of response messages,
typically expressed in JSON or XML.
29
SOAP
 Simple Object Access Protocol (SOAP)
 SOAP Introduction:

http://msdn.microsoft.com/en-us/library/ms995800.aspx
 A SOAP message is an ordinary XML document
containing the following elements:


An Envelope element that identifies the XML document as
a SOAP message
A Header element that contains header information





contains application-specific information about the SOAP
message
optional
must be the first child element of the Envelope element
A Body element that contains call and response
information
A Fault element containing errors and status information
30
REST
 Representational State Transfer (REST)
 Use HTTP method to invoke remote services
(not XML)
 The response of remote service can be in
XML/JSON or any textual format
 Benefits:
 Easy to develop
 Easy to debug (with standard browser)
 Leverage existing web application infrastructure
 We will focus on REST services
programming for the rest of the slides.
31
Server Responses
 Really Simple Syndication (RSS, Atom)
 XML-based standard
 Designed for news-oriented websites to
“Push” content to readers
 Excellent to monitor new content from
websites
 XML or JavaScript Object Notation (JSON)
 Lightweight data-interchange format
 Human readable and writable and also
machine friendly
 Wide support from most languages (Java, C,
32
C#, PHP, Ruby, Python…)
XML Processing
 A variety of APIs for accessing XML have been developed
and used, and some have been standardized. Existing
APIs for XML processing tend to fall into these
categories:




Stream-oriented APIs accessible from a programming
language
 E.g., Simple API for XML (SAX)
Tree-traversal APIs accessible from a programming
language.
 E.g., Document Object Model (DOM)
XML data binding, which provides an automated translation
between an XML document and programming-language objects
 E.g., Java Architecture for XML Binding (JAXB)
Declarative transformation languages
 E.g., XSLT, XPath and XQuery.
 XPath Tutorial: http://www.w3schools.com/xpath/default.asp
33
DOM
 Pros of DOM:
 Easy to manipulate the document
 Can traverse the document back and forth
 Good for small XML files
 Cons of DOM:
 Consumes lots of memory
 JDK provides two packages related to DOM:
 org.w3c.dom
 javax.xml.parsers
 Some popular JAVA xml parsers:
 Xerces
 JDOM
 DOM4j
34
JSON
Find JSON parsers: http://www.json.org/
Web APIs
 In MIS510 project, you will use Web APIs in
your applications
 I will introduce you how to use:





Facebook Social Plug-ins
YouTube Video Player
Photo Search from Flickr
Product Reviews from Amazon
Product Offers from eBay
 ……
36
Facebook Social Plug-in
 http://developers.facebook.com/docs/
37
Example of Like Button (Click “Get Code”)
You will see this:
38
YouTube APIs and Tools
 https://developers.google.com/youtube/
39
Player APIs and Data API
 Start with the embedded player if you want to add a player
to your website to show individual videos or a playlist.
 If you're comfortable with JavaScript or Flash, you may
want to use the Player APIs to customize a chromeless
player.
 If you are programming a device or server-side logic for a
website, look at the Data API. The table below attempts to
describe the experience level of a developer for each
option:
https://developers.google.com/youtube/getting_started
40
Embedded Player




The embedded player is the simplest way to place a YouTube
video on a webpage.
Once the embedded player has been added to a webpage, it can
be controlled using JavaScript.
HTML Code Generation (insert this to your webpage)
https://developers.google.com/youtube/youtube_player_demo
<object width="193" height="159">
<param name="movie"
value="http://www.youtube.com/v/CL8GjenvyKM?version=3?f=videos&amp;
app=youtube_gdata"></param>
<param name="allowScriptAccess" value="always"></param>
<embed src="http://www.youtube.com/v/CL8GjenvyKM?version=3f=videos&amp;
app=youtube_gdata"
type="application/x-shockwave-flash"
allowscriptaccess="always"
width="425" height="355"></embed>
</object></a><br/>
41
YouTube Data API V2 (old)

Advanced functions of the data API requires its java client library
 http://code.google.com/apis/youtube/2.0/developers_guide_java.
html#Getting_Started

You will need to apply for a developer key and client id to execute
authenticated functions.
 http://code.google.com/apis/youtube/2.0/developers_guide_java.
html#Authentication

Two important class (exactly playlist and video in v3):
 VideoFeed: represent lists of videos, such as standard feeds,
uploads, subscriptions, and favorite videos
 VideoEntry: Each video entry corresponds to exactly one
YouTube video and contains information about that video.
42
YouTube Video Search Example: V2
 Description of the YouTube video search function

http://code.google.com/intl/en/apis/youtube/2.0/developers_guide_jav
a.html#Searching_for_Videos
 Query parameter definition

http://code.google.com/intl/en/apis/youtube/2.0/reference.html#Quer
y_parameter_definitions
 A search query example for videos that match the search
term “puppy”.

http://gdata.youtube.com/feeds/api/videos?q=puppy&orde
rby=viewCount
 The query can be generated using the following Java
code:

YouTubeQuery query =
new YouTubeQuery(new
URL("http://gdata.youtube.com/feeds/api/videos"));
query.setOrderBy(YouTubeQuery.OrderBy.VIEW_COUNT);
query.setFullTextQuery("puppy");
//print result
43
VideoFeed videoFeed = service.query(query, VideoFeed.class);
printVideoFeed (videoFeed, true);
YouTube Data API V3
 With Data API, it is possible to search for videos, retrieve
standard feeds, and see related content. A program can
also authenticate as a user to upload videos, modify user
playlists, and more.
 https://developers.google.com/youtube/v3/
 Register your application with Google
 Response in JSON
 2 important recourse types: playlist, video
 4 operations: list, insert, update, and delete
44
Flickr API
 Flickr API Main Page:
 http://www.flickr.com/services/api/
 API Key Application
 http://www.flickr.com/services/api/keys/
 Request Format
 Rest, XML_RPC, SOAP
 Response Format
 Rest, XML_RPC, SOAP, JSON, PHP
45
Photo Search


Flickr Photo Search Method
 Description:
http://www.flickr.com/services/api/flickr.photos.search.html
 Explorer:
http://www.flickr.com/services/api/explore/?method=flickr.photos.
search
Steps:
 Apply for a Flickr API Key
 Send a search request to Flickr Server in your preferred format
 Receive the response in your preferred format
 Parse the result and get the photo URLs
 To construct photo URLs:
http://www.flickr.com/services/api/misc.urls.html
46
Photo Search Example – REST format


Request Format:
 http://api.flickr.com/services/rest/?method=flickr.photos.search
&api_key=yourkey&argument=value
Example:
 Request (to search photos that have “tucson” in its description):
http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=e7c88ea4
3041aff2df564188d4609849&text=tucson
 Response:

Extracted Image URL and Web Page URL:
 http://farm6.staticflickr.com/5288/5368668124_d216292c15.j
pg
 http://farm6.staticflickr.com/8109/8568179136_daa8f790f7.jp
g
47
 http://www.flickr.com/photos/48553200@N04/5368668124
Amazon APIs
 Amazon Web Services (AWS)
 http://aws.amazon.com/
 Amazon SDK for Java
 http://aws.amazon.com/sdkforjava/
 We introduce Amazon Product Advertising API
 Access Amazon Product Selection
 gives you access to Amazon’s collection of millions
of products in categories such as books, music …
 Leverage Amazon Product Discovery capabilities
 lets you leverage Amazon’s customer-centric
features such as Product Search, Customer
Reviews, Similar Products...
 Monetize your website
48
Product Advertising API
 General Info
 Main page of Amazon Product Advertising API
 https://affiliateprogram.amazon.com/gp/advertising/api/detail/m
ain.html
 Documentation for Product Advertising API
 http://docs.aws.amazon.com/AWSECommerceSer
vice/latest/DG/RG_Offers.html
 Sign up for Product Advertising API
 https://affiliateprogram.amazon.com/gp/flex/advertising/api/sign
-in.html
 Java Developer Center
 https://aws.amazon.com/java/
49
REST Format

http://ecs.amazonaws.com/onca/xml?Service=AWSECommerceSe
rvice&Operation=ItemSearch& AWSAccessKeyId=[Access Key
ID]&AssociateTag=[ID]&SearchIndex=Apparel&
Keywords=Shirt&Timestamp=[YYYY-MM-DDThh:mm:ssZ]
&Signature=[Request Signature]
50
Search for sample code
Make programming easier by learning from sample code
http://aws.amazon.com/code/Product-Advertising-API
We use Java Programming and REST:
Product Advertising API Signed Requests Sample Code Java REST/QUERY
 This API requires a program to deal with signature
 Learn from Java Sample Code (Page 58-60):
http://awsdocs.s3.amazonaws.com/Associates/latest/pro
d-adv-api-dg.pdf
 You can deploy sample code on your machine and run it




51
From sample code
 We know that we need other things:
The “AWS Access Key ID,” for
private String awsAccessKeyId = "AKIAJBYONHJZOPJ2B2CA";
The “AWS Secret Key,” for
private String awsSecretKey =
"f2qzaLqNEGD5A5KPL7lPgiDCMJQQYid9OkEpIGUe";
 Download and import an external JAR:
http://commons.apache.org/proper/commons-codec/
because we use “import
org.apache.commons.codec.binary.Base64;”
 Search for these things and fix them. Also, you can refer to
documentation.




52
Sign up Amazon Associate Account
Login using your Amazon Associate Account.
53
Product Advertising API
AssociateTag
54
Go to IAM (AWS Identity and Access
Management) Console


More information:
http://docs.aws.amazon.com/AWSSimpleQueueService/latest/SQSGettin
gStartedGuide/AWSCredentials.html
IAM Console: https://console.aws.amazon.com/iam/home?#home
55
Get Access Key and Secret Access Key
 You can get an Access key ID and an secret access key
by creating a user. Finally you will get them:
56
Try “ItemLookUp” operation
……
Map<String, String> params = new HashMap<String, String>();
params.put("Service", "AWSECommerceService");
params.put("Version", "2010-10-01");
params.put("Operation", "ItemLookup");
params.put("ItemId", ITEM_ID);
params.put("ResponseGroup", "EditorialReview");
params.put("AssociateTag", "i0484-20");
requestUrl = helper.sign(params);
System.out.println("Signed Request is \"" + requestUrl + "\"");
……
57
Generate a URL for Requesting REST
resource
 Type this URL on
your browser, then
you will get a XML
file.
 Parse this XML file
using Java DOM
(Using URL string as
input of DOM).
 Use fetched
information on your
website.
58
Amazon Product Advertising API Summary
 Steps to search Amazon








Sign up Amazon Associate
Apply for a API key
Generate search conditions
Generate a parameter string
Generate a query URL
Send a search request to Amazon server
Receive the query result (XML format)
Parse the result and display products on JSP
 Have to handle namespace issue
59
eBay API
 Main page:
 http://developer.ebay.com/common/api/
 eBay Web Services Overview
 https://go.developer.ebay.com/developers/ebay/pro
ducts/
 Available APIs include:
 Finding API, Best Match API (not available now),
Merchandising API, Shopping API, Feedback API,
Trading API, Client Alerts API , Platform
Notifications API, Research API for eBay, etc.
 Which API to use with your application?
 https://go.developer.ebay.com/developers/ebay/d
ocumentation-tools/api-products-feature
60
eBay Finding API
 eBay Finding API: to search for eBay items:








https://go.developer.ebay.com/developers/ebay/products/findingapi
Search for items based on a keyword query
Search for items associated with a specific product
Browse for items in a specific category or in an eBay store
Filter search results by item listing details, such as price,
condition, etc.
Refine searches by the characteristics of an item (i.e., aspects),
such as brand, style, etc.
Retrieve category and aspect metadata
Get keyword recommendations to improve search results
 Formats: Name-Value Syntax, XML, SOAP, JSON
 Protocols: HTTP GET and POST
 Need to apply for a API key
61
Example of method findItemsByKeywords

http://svcs.ebay.com/services/search/FindingService/v1?
OPERATION-NAME=findItemsByKeywords&
SERVICE-VERSION=1.0.0&
SECURITY-APPNAME=YourAppID&
RESPONSE-DATA-FORMAT=XML&
REST-PAYLOAD&
keywords=harry%20potter%20phoenix&
itemFilter(0).name=MaxPrice&
itemFilter(0).value=10.00&
itemFilter(0).paramName=Currency&
itemFilter(0).paramValue=USD&
itemFilter(1).name=FreeShippingOnly&
itemFilter(1).value=true&
paginationInput.entriesPerPage=2
 The query URL has its own syntax called “name-value
syntax.” In this way, eBay doesn’t provide Java program
that helps generate queries.
62
The End
 Thank you!
63