1. MCS 270 Spring 2014 Object-Oriented Software Development

2. GUSTAVUS ADOLPHUS COLLEGEgustavus.edu Today’s schedule GWT – Google API Interaction Deploying App on Google App Store Team Planning - Project 3 MCS 270 Object-Oriented Software Development

3. GUSTAVUS ADOLPHUS COLLEGEgustavus.edu 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/ MCS 270 Object-Oriented Software Development

4. GUSTAVUS ADOLPHUS COLLEGEgustavus.edu 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 MCS 270 Object-Oriented Software Development

5. GUSTAVUS ADOLPHUS COLLEGEgustavus.edu 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 MCS 270 Object-Oriented Software Development

6. GUSTAVUS ADOLPHUS COLLEGEgustavus.edu 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 to project’s.gwt.xml file (e.g. GusList.gwt.xml) MCS 270 Object-Oriented Software Development

7. GUSTAVUS ADOLPHUS COLLEGEgustavus.edu 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"> MCS 270 Object-Oriented Software Development

8. GUSTAVUS ADOLPHUS COLLEGEgustavus.edu 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); MCS 270 Object-Oriented Software Development

9. GUSTAVUS ADOLPHUS COLLEGEgustavus.edu 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); MCS 270 Object-Oriented Software Development

10. GUSTAVUS ADOLPHUS COLLEGEgustavus.edu Google Maps API for GWT – Address Service geocoder.geocode(request, new Callback() { public void handle(JsArray 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); }); MCS 270 Object-Oriented Software Development

11. GUSTAVUS ADOLPHUS COLLEGEgustavus.edu Google Maps - GusList Demo MCS 270 Object-Oriented Software Development

12. GUSTAVUS ADOLPHUS COLLEGEgustavus.edu Deploying Google Apps MCS 270 Object-Oriented Software Development To deploy our app on the web, we upload it to Google’s App Engine web site: https://appengine.google.com/

13. GUSTAVUS ADOLPHUS COLLEGEgustavus.edu Deploying Google Apps Application Identifier – the application ID must be unique across all App Engine applications just like a Google account username. MCS 270 Object-Oriented Software Development

14. GUSTAVUS ADOLPHUS COLLEGEgustavus.edu MCS 270 Object-Oriented Software Development

15. GUSTAVUS ADOLPHUS COLLEGEgustavus.edu Deploying Google Apps If app is created successfully: MCS 270 Object-Oriented Software Development

16. GUSTAVUS ADOLPHUS COLLEGEgustavus.edu 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. MCS 270 Object-Oriented Software Development

17. GUSTAVUS ADOLPHUS COLLEGEgustavus.edu 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 MCS 270 Object-Oriented Software Development

18. GUSTAVUS ADOLPHUS COLLEGEgustavus.edu 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. MCS 270 Object-Oriented Software Development

19. GUSTAVUS ADOLPHUS COLLEGEgustavus.edu MCS 270 Object-Oriented Software Development

20. GUSTAVUS ADOLPHUS COLLEGEgustavus.edu 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 MCS 270 Object-Oriented Software Development

21. GUSTAVUS ADOLPHUS COLLEGEgustavus.edu Google App Administrative Console Go to https://appengine.google.com/https://appengine.google.com/ Click on application-id to manage app: MCS 270 Object-Oriented Software Development

22. GUSTAVUS ADOLPHUS COLLEGEgustavus.edu MCS 270 Object-Oriented Software Development

23. GUSTAVUS ADOLPHUS COLLEGEgustavus.edu 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. MCS 270 Object-Oriented Software Development

24. GUSTAVUS ADOLPHUS COLLEGEgustavus.edu Google App Administrative Console MCS 270 Object-Oriented Software Development Demo:

25. GUSTAVUS ADOLPHUS COLLEGEgustavus.edu Other Web App Development Systems MCS 270 Object-Oriented Software Development PHP – server Javascript – client side GUI and control

26. GUSTAVUS ADOLPHUS COLLEGEgustavus.edu PHP vs GWT MCS 270 Object-Oriented Software Development 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

27. GUSTAVUS ADOLPHUS COLLEGEgustavus.edu 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 MCS 270 Object-Oriented Software Development