MCS 270 Spring 2014
Object-Oriented Software Development
MCS 270 Object-Oriented Software Development
Today’s schedule
GWT – Google API Interaction
Deploying App on Google App Store
Team Planning - Project 3
GUSTAVUS ADOLPHUS COLLEGE
gustavus.edu
MCS 270 Object-Oriented Software Development
Google API Libraries for Google Web Toolkit
From the project web page:
“The Google API Libraries for Google Web Toolkit is
a collection of libraries that provide Java language
bindings for popular Google JavaScript APIs.
The libraries are supported by the Google Web Toolkit
team. “
https://code.google.com/p/gwt-google-apis/
GUSTAVUS ADOLPHUS COLLEGE
gustavus.edu
MCS 270 Object-Oriented Software Development
Google API Libraries for GWT
Google+ API
Google Books API
Google Calendar API
Google Charts API
Google Gadgets API
Google Maps API
Google Tasks API
Google URL Shortener (goo.gl) API
GUSTAVUS ADOLPHUS COLLEGE
gustavus.edu
MCS 270 Object-Oriented Software Development
Google Maps API for GWT
To use the Maps API code:
1. Add the jar file “gwt-maps.jar” to war/lib
2. Add this jar file to the buildpath:
Click on Project->Properties->Java Build Path
Under Libraries tab, click Add Jars…
Browse to war/lib and choose gwt-maps.jar
Note: gwt-maps.jar is accessible from Development Environment
page of class web site.
http://homepages.gac.edu/~hvidsten/courses/MC270/development-environment.html
GUSTAVUS ADOLPHUS COLLEGE
gustavus.edu
MCS 270 Object-Oriented Software Development
Google Maps API for GWT
To use the Maps API code:
3. Make sure the gwt-maps “module” of Javscript code
is loaded at runtime: Add the line
<inherits name="com.google.maps.gwt.GoogleMaps" />
to project’s .gwt.xml file (e.g. GusList.gwt.xml)
GUSTAVUS ADOLPHUS COLLEGE
gustavus.edu
MCS 270 Object-Oriented Software Development
Google Maps API for GWT
To use the Maps API code:
4. Add the following line to the project’s entry web page
(Just after the nocache.js line):
<script type="text/javascript" language="javascript“
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
GUSTAVUS ADOLPHUS COLLEGE
gustavus.edu
MCS 270 Object-Oriented Software Development
Google Maps API for GWT – How to Use?
HorizontalPanel mapPanel = new HorizontalPanel();
mapPanel.setSize("400px", "400px");
// Create the Google Map object, with set options
MapOptions myOptions = MapOptions.create();
myOptions.setZoom(8.0);
myOptions.setCenter(LatLng.create(-34.397, 150.644));
myOptions.setMapTypeId(MapTypeId.ROADMAP);
final GoogleMap map= GoogleMap.create(mapPanel.getElement(),
myOptions);
GUSTAVUS ADOLPHUS COLLEGE
gustavus.edu
MCS 270 Object-Oriented Software Development
Google Maps API for GWT – Address Service
// GeoCoder is Google Maps API for taking an address and finding
//
latitude-longitude.
Geocoder geocoder = Geocoder.create();
GeocoderRequest request = GeocoderRequest.create();
final String address = post.getAddress();
request.setAddress(address);
GUSTAVUS ADOLPHUS COLLEGE
gustavus.edu
MCS 270 Object-Oriented Software Development
Google Maps API for GWT – Address Service
geocoder.geocode(request,
new Callback() {
public void handle(JsArray<GeocoderResult> results, GeocoderStatus status) {
if (status == GeocoderStatus.OK) {
GeocoderResult location = results.get(0);
map.triggerResize();
map.setCenter(location.getGeometry().getLocation());
// Create Marker (red) to show location
MarkerOptions markerOpts = MarkerOptions.create();
markerOpts.setMap(map);
markerOpts.setTitle(address);
markerOpts.setPosition(location.getGeometry().getLocation());
Marker.create(markerOpts);
});
GUSTAVUS ADOLPHUS COLLEGE
gustavus.edu
MCS 270 Object-Oriented Software Development
Google Maps - GusList
Demo
GUSTAVUS ADOLPHUS COLLEGE
gustavus.edu
MCS 270 Object-Oriented Software Development
Deploying Google Apps
To deploy our app on the web, we upload it to Google’s App
Engine web site: https://appengine.google.com/
GUSTAVUS ADOLPHUS COLLEGE
gustavus.edu
MCS 270 Object-Oriented Software Development
Deploying Google Apps
Application Identifier – the application ID must be unique
across all App Engine applications just like a Google
account username.
GUSTAVUS ADOLPHUS COLLEGE
gustavus.edu
MCS 270 Object-Oriented Software Development
GUSTAVUS ADOLPHUS COLLEGE
gustavus.edu
MCS 270 Object-Oriented Software Development
Deploying Google Apps
If app is created successfully:
GUSTAVUS ADOLPHUS COLLEGE
gustavus.edu
MCS 270 Object-Oriented Software Development
Deploying Google Apps – Eclipse
Once you have an application ID, in Eclipse right-click on your project,
and select Google > App Engine Settings...
Enter your application ID into the Application ID text box. Click OK.
GUSTAVUS ADOLPHUS COLLEGE
gustavus.edu
MCS 270 Object-Oriented Software Development
Deploying Google Apps – Eclipse
Next: Right-click on your project and select Google > Deploy to App
Engine. If you haven't already
signed in using your Google
account, you will be prompted to
do so.
Click Deploy
GUSTAVUS ADOLPHUS COLLEGE
gustavus.edu
MCS 270 Object-Oriented Software Development
Deploying Google Apps – Eclipse
Eclipse will compile all of the modules (client Java -> Javascript)
needed by the program and then transfer the app code to its appspot
home address.
Go to http://application-id.appspot.com/ to see your application.
GUSTAVUS ADOLPHUS COLLEGE
gustavus.edu
MCS 270 Object-Oriented Software Development
GUSTAVUS ADOLPHUS COLLEGE
gustavus.edu
MCS 270 Object-Oriented Software Development
Deploying Google Apps – Login Accounts
Note: Your browser might have stored the previous “test”
logins from Eclipse Development server. If you get an error
message, try deleting Google cookies.
Demo
GUSTAVUS ADOLPHUS COLLEGE
gustavus.edu
MCS 270 Object-Oriented Software Development
Google App Administrative Console
Go to https://appengine.google.com/
Click on application-id to manage app:
GUSTAVUS ADOLPHUS COLLEGE
gustavus.edu
MCS 270 Object-Oriented Software Development
GUSTAVUS ADOLPHUS COLLEGE
gustavus.edu
MCS 270 Object-Oriented Software Development
Google App Administrative Console
Perform basic configuration (application title, authentication options, etc.)
Set application performance options to manage cost and performance
View configured services
Disable or delete your application
Administer your datastore, backup/restore, copy and delete data
Split traffic between different versions of your application
View resource utilization and performance statistics
Report problems via the Report Production Issue button.
Change user roles, invite other people to be developers for your application
Create a new application
View request and error logs, and analyze traffic.
Test new versions of your application, and switch the version that your users see.
GUSTAVUS ADOLPHUS COLLEGE
gustavus.edu
MCS 270 Object-Oriented Software Development
Google App Administrative Console
Demo:
GUSTAVUS ADOLPHUS COLLEGE
gustavus.edu
MCS 270 Object-Oriented Software Development
Other Web App Development Systems
PHP – server
Javascript – client side GUI and control
GUSTAVUS ADOLPHUS COLLEGE
gustavus.edu
MCS 270 Object-Oriented Software Development
PHP vs GWT
PHP
good for quick development of dynamic apps
tied more directly to HTML
simple development cycle – save file, click reload
scripting language - not well-typed or OO
GWT
good for “Internet - Rich” web apps (Google Maps, Mail)
development cycle is fairly complex
(although Eclipse handles many details)
based on Java
http://vschart.com/compare/google-web-toolkit/vs/php
GUSTAVUS ADOLPHUS COLLEGE
gustavus.edu
MCS 270 Object-Oriented Software Development
Project 3
Team project – groups of three.
Teams: Must work with at least one new person.
Goal: Gain experience with teamwork in prep
for major project.
Task: Design an app from ground up.
App: Address Book
GUSTAVUS ADOLPHUS COLLEGE
gustavus.edu