Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
A tech writer,
a map, and
an app
Sarah Maddox
Image: Dragon Feet refixed by Lazur URH on OpenClipArt.org @sarahmaddox #stc...
@sarahmaddox #stc17
What
and why
Maps
Data
Web app
Open
source
Mobile
app
Lessons
@sarahmaddox #stc17
What
and why
Maps
Data
Web app
Open
source
Mobile
app
Lessons
@sarahmaddox #stc17Tech Comm on a Map
@sarahmaddox #stc17Demo: http://sarahmaddox.github.io/techcomm-map/
@sarahmaddox #stc17
Extending the model
Web app and native mobile app
Tech comm and other SIGs
● Footie
● Quilting
● Any o...
@sarahmaddox #stc17
Why develop an app?
Understand my audience
Learn the tech
Gain the edge
Create a useful map for the te...
@sarahmaddox #stc17
What
and why
Maps
Data
Web app
Open
source
Mobile
app
Lessons
@sarahmaddox #stc17
Maps are beautiful
The Arctic Ocean Floor (A Map a Day)
River Maps (Geoawesomeness)
Iceland (Mike Lowe...
@sarahmaddox #stc17Images and data
@sarahmaddox #stc17Data and images
@sarahmaddox #stc17Data and images
@sarahmaddox #stc17Data and images
@sarahmaddox #stc17
Maps
Data
Web app
Open
source
Mobile
app
Lessons
What
and why
@sarahmaddox #stc17
Data source
Collaboration with the tech comm community
Scalability
Development of user interface
Data ...
@sarahmaddox #stc17
Apps Script
Lives in the spreadsheet
Insert spreadsheet ID
Insert sheet name
Call from your web page
D...
@sarahmaddox #stc17
Crowd sourcing the data
Permissions in the spreadsheet (May 2014)
Data moderation
Online form (May 201...
@sarahmaddox #stc17https://goo.gl/muBD9q
Input forms - web and Android
https://goo.gl/twfOKO
@sarahmaddox #stc17
Maps
Data
Web app
Open
source
Mobile
app
Lessons
What
and why
@sarahmaddox #stc17
Nuts and bolts
Platform: Web browser
Code: HTML, JavaScript, jQuery, CSS
Map: Google Maps JavaScript A...
@sarahmaddox #stc17
Code is beautiful too
Web page: index.html
JavaScript: techcomm-map.js
CSS: techcomm-map-styles.css
Ap...
@sarahmaddox #stc17
Code is beautiful too
Web page: index.html
JavaScript: techcomm-map.js
CSS: techcomm-map-styles.css
Ap...
@sarahmaddox #stc17
Web page - HTML
Page title
CSS
jQuery library
<!DOCTYPE html>
<html>
<head>
<title>Tech Comm on a Map<...
@sarahmaddox #stc17
Web page - HTML
Create a div for the map
Load my JavaScript
Load the API
Call initializeMap
<body>
<!-...
@sarahmaddox #stc17
Web page - HTML
Create a div for the map
Load my JavaScript
Load the API
Call initializeMap
<body>
<!-...
@sarahmaddox #stc17
Application Programming Interface (API)
Communication between apps
Data and services
API types
API typ...
@sarahmaddox #stc17
Interaction - JavaScript
Set up the map
Use the Map class
provided by the API
var map;
var infoWindow;...
@sarahmaddox #stc17
Interaction - JavaScript
Get event data from
spreadsheet
jQuery for brevity
$.ajax({
url: DATA_SERVICE...
@sarahmaddox #stc17
Interaction - JavaScript
Define an info window for
later use
// Define an info window to show event da...
@sarahmaddox #stc17
Interaction - JavaScript
When the user clicks an
event marker,
add event data to the info
window
// Cr...
@sarahmaddox #stc17
Maps
Data
Web app
Open
source
Mobile
app
Lessons
What
and why
@sarahmaddox #stc17
Development process and information sources
Outline the HTML page
Add a map
Plug in the other bits
Pub...
@sarahmaddox #stc17
GitHub
Code repository:
● Git, and web-based UI
● Version control
● Open sourcing
Website hosting on G...
@sarahmaddox #stc17
Open sourcing a project
What “open source” means
● Open to updates by public
● Code, docs, ...
● Caref...
@sarahmaddox #stc17
Open sourcing a project
How:
● Pick a repo
● Add a licence (choosealicense.com)
● Configure permission...
@sarahmaddox #stc17
Check the issue tracker
● Add issues
● Assign an issue to yourself
Make a change
● If simple, edit on ...
@sarahmaddox #stc17
Maps
Data
Web app
Open
source
Mobile
app
Lessons
What
and why
@sarahmaddox #stc17Native app versus web app
Platform technology
All platform features
App store
Web technology
Browser on...
@sarahmaddox #stc17
APIs, SDKs, and such, for the Android app
https://github.com/sarahmaddox/techcomm-map-android
Platform...
@sarahmaddox #stc17
A Java class in Android
Java language
Android SDK
Class
Variable
Callbacks
public class MapsActivity e...
@sarahmaddox #stc17
Connection callback
Implement callback from
Play services SDK
Ask permission to get
location
Get curre...
@sarahmaddox #stc17
Map callback
Implement callback from
Google Maps Android API
Move centre of map to
current location
@O...
@sarahmaddox #stc17
Information sources
Google Maps Android API docs
Android docs
Stack Overflow (a lot!!!) via web search...
@sarahmaddox #stc17
Hackathon
People
Idea
Learn as you go
Thanks to the hackathoneers!
@sarahmaddox #stc17
Hackathon
People
Idea
Learn as you go
Thanks to the hackathoneers!
Image: Green Dragon by GDJ on OpenC...
@sarahmaddox #stc17
Hackathon tips
Be sure of yourself
Have a clear purpose, and a spec
Provide a plan
Run a brainstorming...
@sarahmaddox #stc17
Release the app
Finalise code
Get artwork for icon and screenshots
Publish code on GitHub
Launch app o...
@sarahmaddox #stc17
Maps
Data
Web app
Open
source
Mobile
app
Lessons
What
and why
@sarahmaddox #stc17
IANAE but Technical confidence
Understanding of audience
Mutual respect of colleagues
Community
@sarahmaddox #stc17
Audience
Various skill levels
Various platforms
Just want to GTD
Code samples rule
JavaScript tutorial...
@sarahmaddox #stc17
Colleagues
Love ideas
Think creatively
Welcome various skill levels
Want to learn
@sarahmaddox #stc17
Tech comm community
Contributors to the data
Connecting with peers
Lots happening in our world!
@sarahmaddox #stc17
Sarah Maddox
Tech writer on the Google Maps APIs
Blog: ffeathers.wordpress.com
Twitter: @sarahmaddox
T...
Próxima SlideShare
Cargando en…5
×

A tech writer, a map, and an app

416 visualizaciones

Publicado el

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

Publicado en: Tecnología
  • Sé el primero en comentar

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

×