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
© Copyright 2024