Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

A tech writer, a map, and an app

358 views

Published on

A tech writer's odyssey into app development, with a dragon or two thrown in.

Published in: Technology
  • Be the first to comment

A tech writer, a map, and an app

  1. 1. A tech writer, a map, and an app Sarah Maddox Image: Dragon Feet refixed by Lazur URH on OpenClipArt.org @sarahmaddox #stc17
  2. 2. @sarahmaddox #stc17 What and why Maps Data Web app Open source Mobile app Lessons
  3. 3. @sarahmaddox #stc17 What and why Maps Data Web app Open source Mobile app Lessons
  4. 4. @sarahmaddox #stc17Tech Comm on a Map
  5. 5. @sarahmaddox #stc17Demo: http://sarahmaddox.github.io/techcomm-map/
  6. 6. @sarahmaddox #stc17 Extending the model Web app and native mobile app Tech comm and other SIGs ● Footie ● Quilting ● Any other ideas? https://goo.gl/twfOKO
  7. 7. @sarahmaddox #stc17 Why develop an app? Understand my audience Learn the tech Gain the edge Create a useful map for the tech comm community Have fun Image: Green Dragon by GDJ on OpenClipArt.org
  8. 8. @sarahmaddox #stc17 What and why Maps Data Web app Open source Mobile app Lessons
  9. 9. @sarahmaddox #stc17 Maps are beautiful The Arctic Ocean Floor (A Map a Day) River Maps (Geoawesomeness) Iceland (Mike Lowery, via They Draw and Travel)
  10. 10. @sarahmaddox #stc17Images and data
  11. 11. @sarahmaddox #stc17Data and images
  12. 12. @sarahmaddox #stc17Data and images
  13. 13. @sarahmaddox #stc17Data and images
  14. 14. @sarahmaddox #stc17 Maps Data Web app Open source Mobile app Lessons What and why
  15. 15. @sarahmaddox #stc17 Data source Collaboration with the tech comm community Scalability Development of user interface Data integrity Familiarity Google Sheets Image: Green Dragon by GDJ on OpenClipArt.org
  16. 16. @sarahmaddox #stc17 Apps Script Lives in the spreadsheet Insert spreadsheet ID Insert sheet name Call from your web page Details: var SPREADSHEET_ID = 'MY-SPREADSHEET-ID'; var SHEET_NAME = 'Data'; function doGet(request) { var callback = request.parameters.jsonp; var range = SpreadsheetApp.openById(SPREADSHEET_ID) .getSheetByName(SHEET_NAME).getDataRange(); var json = callback + '(' + Utilities.jsonStringify(range.getValues()) + ')'; return ContentService.createTextOutput(json) .setMimeType(ContentService.MimeType.JAVASCRIPT); }https://goo.gl/Riu4yo
  17. 17. @sarahmaddox #stc17 Crowd sourcing the data Permissions in the spreadsheet (May 2014) Data moderation Online form (May 2015) Android app (February 2016) 100+ contributions since June 2015 Thanks to all contributors! Image: Green Dragon by GDJ on OpenClipArt.org
  18. 18. @sarahmaddox #stc17https://goo.gl/muBD9q Input forms - web and Android https://goo.gl/twfOKO
  19. 19. @sarahmaddox #stc17 Maps Data Web app Open source Mobile app Lessons What and why
  20. 20. @sarahmaddox #stc17 Nuts and bolts Platform: Web browser Code: HTML, JavaScript, jQuery, CSS Map: Google Maps JavaScript API Search box: Place Autocomplete widget from Google Places API Code repository: GitHub Website hosting: GitHub Pages Data hosting: Google Sheets, Apps Script
  21. 21. @sarahmaddox #stc17 Code is beautiful too Web page: index.html JavaScript: techcomm-map.js CSS: techcomm-map-styles.css Apps Script: Code.gs https://github.com/sarahmaddox/techcomm-map
  22. 22. @sarahmaddox #stc17 Code is beautiful too Web page: index.html JavaScript: techcomm-map.js CSS: techcomm-map-styles.css Apps Script: Code.gs https://github.com/sarahmaddox/techcomm-map Image: Green Dragon by GDJ on OpenClipArt.org
  23. 23. @sarahmaddox #stc17 Web page - HTML Page title CSS jQuery library <!DOCTYPE html> <html> <head> <title>Tech Comm on a Map</title> <link href="resources/techcomm-map-styles.css" rel="stylesheet" type="text/css" /> <script src="https://.../jquery.min.js"></script> </head> <body>...</body> </html> https://jquery.com/
  24. 24. @sarahmaddox #stc17 Web page - HTML Create a div for the map Load my JavaScript Load the API Call initializeMap <body> <!-- SNIPPED: Input fields for branding, search box and event types. --> <!-- Map --> <div id="map-canvas"></div> <!-- JavaScript that sets up the map and UI controls --> <script src="resources/techcomm-map.js" charset="utf-8"></script> <!-- Google Maps JavaScript API --> <script src="https://maps.googleapis.com/maps/api/js ?key=MY-API-KEY &libraries=places &callback=initializeMap" async defer></script> </body>
  25. 25. @sarahmaddox #stc17 Web page - HTML Create a div for the map Load my JavaScript Load the API Call initializeMap <body> <!-- SNIPPED: Input fields for branding, search box and event types. --> <!-- Map --> <div id="map-canvas"></div> <!-- JavaScript that sets up the map and UI controls --> <script src="resources/techcomm-map.js" charset="utf-8"></script> <!-- Google Maps JavaScript API --> <script src="https://maps.googleapis.com/maps/api/js ?key=MY-API-KEY &libraries=places &callback=initializeMap" async defer></script> </body> Image: Baby Dragon Concept by talekids on OpenClipArt.org
  26. 26. @sarahmaddox #stc17 Application Programming Interface (API) Communication between apps Data and services API types API types: https://goo.gl/tTqyne API tech writing: https://goo.gl/0dOUuP <?xml version="1.0" encoding="utf-8" ?> <GreyCloudAppResponse> <status>OK</status> <result> <type>greeting</type> <text>hello back</text> </result> </GreyCloudAppResponse>
  27. 27. @sarahmaddox #stc17 Interaction - JavaScript Set up the map Use the Map class provided by the API var map; var infoWindow; function initializeMap() { // Set up the map. map = new google.maps.Map( document.getElementById("map-canvas"), { center: {lat: -34.397, lng: 150.644}, zoom: 2, mapTypeControlOptions: { position: google.maps.ControlPosition.TOP_RIGHT } }); // A lot more happens here. }
  28. 28. @sarahmaddox #stc17 Interaction - JavaScript Get event data from spreadsheet jQuery for brevity $.ajax({ url: DATA_SERVICE_URL, dataType: 'jsonp', success: function(data) { // Get the spreadsheet rows one by one. for (var i = 1; i < data.length; i++) { map.data.add({ properties: { type: data[i][0], name: data[i][1], description: data[i][2] // SNIPPED rest of data } }); } } }); https://jquery.com/ https://goo.gl/Riu4yo
  29. 29. @sarahmaddox #stc17 Interaction - JavaScript Define an info window for later use // Define an info window to show event data. infoWindow = new google.maps.InfoWindow({ pixelOffset: new google.maps.Size(0, -10), disableAutoPan: true })
  30. 30. @sarahmaddox #stc17 Interaction - JavaScript When the user clicks an event marker, add event data to the info window // Create a popup window containing the tech comm info. function createInfoWindow(feature) { infoWindow.setPosition(feature.getGeometry().get()); infoWindow.setContent('No information found'); var content = $('<div id="infowindow" class="infowindow">'); // Append the bits of event data to the content, // starting with the event name. content.append($('<h2>').text(feature.getProperty('name'))); // SNIPPED all the other bits of data. // Add the content to the info window. infoWindow.setContent(content.html()); }
  31. 31. @sarahmaddox #stc17 Maps Data Web app Open source Mobile app Lessons What and why
  32. 32. @sarahmaddox #stc17 Development process and information sources Outline the HTML page Add a map Plug in the other bits Publish first version Convert to new data layer Convert to jQuery Keep on improving Google Maps JavaScript API docs jQuery guide MDN JavaScript programming guide Stack Overflow (a lot!!!) via web search Help from developers - open source
  33. 33. @sarahmaddox #stc17 GitHub Code repository: ● Git, and web-based UI ● Version control ● Open sourcing Website hosting on GitHub Pages: ● HTML page served from GitHub repo ● Static site hosting https://github.com/ https://pages.github.com/
  34. 34. @sarahmaddox #stc17 Open sourcing a project What “open source” means ● Open to updates by public ● Code, docs, ... ● Carefully managed ● Pull requests Why you’d want to do it ● Harness skill of community ● Help other people give back to community
  35. 35. @sarahmaddox #stc17 Open sourcing a project How: ● Pick a repo ● Add a licence (choosealicense.com) ● Configure permissions ● Let people know ● Monitor the pull requests ● Check the changes and merge if you want them ● Release Tech Comm on a Map 6 pull requests from 3 contributors so far
  36. 36. @sarahmaddox #stc17 Check the issue tracker ● Add issues ● Assign an issue to yourself Make a change ● If simple, edit on GitHub UI ● Else fork the code and hack away at it Create a pull request Contributing to Tech Comm on a Map It’s open source! https://goo.gl/uFjEXP Git for Writers Mysti Berry, tomorrow
  37. 37. @sarahmaddox #stc17 Maps Data Web app Open source Mobile app Lessons What and why
  38. 38. @sarahmaddox #stc17Native app versus web app Platform technology All platform features App store Web technology Browser on device Fewer mobile platform features
  39. 39. @sarahmaddox #stc17 APIs, SDKs, and such, for the Android app https://github.com/sarahmaddox/techcomm-map-android Platform: Android SDK, Java Map: Google Maps Android API Search box: Google Places API for Android Location: Google Location Services Data hosting: Google Sheets, Apps Script Database: Realm.io UI element: Android Sliding Up Panel Validation: Android Saripaar Code repository: GitHub
  40. 40. @sarahmaddox #stc17 A Java class in Android Java language Android SDK Class Variable Callbacks public class MapsActivity extends AppCompatActivity implements OnMapReadyCallback, ConnectionCallbacks, OnConnectionFailedListener { protected Location mCurrentLocation; @Override public void onConnected(Bundle connectionHint) { // ... } @Override public void onMapReady(GoogleMap map) { // ... } }
  41. 41. @sarahmaddox #stc17 Connection callback Implement callback from Play services SDK Ask permission to get location Get current location from Fused Location Provider Prepare the map UI Ask for a map @Override public void onConnected(Bundle connectionHint) { // SNIPPED: Request location permissions. if (locationPermissionGranted) { mCurrentLocation = LocationServices .FusedLocationApi .getLastLocation(mGoogleApiClient); } SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager() .findFragmentById(R.id.map); mapFragment.getMapAsync(this); }
  42. 42. @sarahmaddox #stc17 Map callback Implement callback from Google Maps Android API Move centre of map to current location @Override public void onMapReady(GoogleMap map) { this.map = map; if (mCurrentLocation != null) { map.moveCamera(CameraUpdateFactory .newLatLngZoom( new LatLng(mCurrentLocation.getLatitude(), mCurrentLocation.getLongitude()), 10)); } else { map.moveCamera(CameraUpdateFactory .newLatLngZoom(new LatLng(-34, 150), 10)); } }
  43. 43. @sarahmaddox #stc17 Information sources Google Maps Android API docs Android docs Stack Overflow (a lot!!!) via web search Java programming guides ● Head First Java ● https://docs.oracle.com/javase/tutorial/ Help from developers - hackathon https://goo.gl/twfOKO
  44. 44. @sarahmaddox #stc17 Hackathon People Idea Learn as you go Thanks to the hackathoneers!
  45. 45. @sarahmaddox #stc17 Hackathon People Idea Learn as you go Thanks to the hackathoneers! Image: Green Dragon by GDJ on OpenClipArt.org
  46. 46. @sarahmaddox #stc17 Hackathon tips Be sure of yourself Have a clear purpose, and a spec Provide a plan Run a brainstorming session Be ready to change Provide direction My original plan Phase 1 Match capabilities of web app Phase 2 Add a data entry capability Phase 3 Safeguard against bad data
  47. 47. @sarahmaddox #stc17 Release the app Finalise code Get artwork for icon and screenshots Publish code on GitHub Launch app on Google Play https://developer.android.com/distribute/tools/launch-checklist.html
  48. 48. @sarahmaddox #stc17 Maps Data Web app Open source Mobile app Lessons What and why
  49. 49. @sarahmaddox #stc17 IANAE but Technical confidence Understanding of audience Mutual respect of colleagues Community
  50. 50. @sarahmaddox #stc17 Audience Various skill levels Various platforms Just want to GTD Code samples rule JavaScript tutorial Android tutorial
  51. 51. @sarahmaddox #stc17 Colleagues Love ideas Think creatively Welcome various skill levels Want to learn
  52. 52. @sarahmaddox #stc17 Tech comm community Contributors to the data Connecting with peers Lots happening in our world!
  53. 53. @sarahmaddox #stc17 Sarah Maddox Tech writer on the Google Maps APIs Blog: ffeathers.wordpress.com Twitter: @sarahmaddox Tech Comm on a Map Web app: http://sarahmaddox.github.io/techcomm-map/ Android app: https://goo.gl/twfOKO

×