A tech writer, a map, and an app

A tech writer,
a map, and
an app
Sarah Maddox
Image: Dragon Feet refixed by Lazur URH on OpenClipArt.org @sarahmaddox #stc17

@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 other ideas?
https://goo.gl/twfOKO

@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

@sarahmaddox #stc17
Maps are beautiful
The Arctic Ocean Floor (A Map a Day)
River Maps (Geoawesomeness)
Iceland (Mike Lowery, via They Draw and Travel)

@sarahmaddox #stc17Images and data

@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 integrity
Familiarity Google Sheets

@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

@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!

@sarahmaddox #stc17https://goo.gl/muBD9q
Input forms - web and Android

@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

@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

@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/

@sarahmaddox #stc17
Web page - HTML
Create a div for the map
Load my JavaScript
Load the API
Call initializeMap
<body>


<div id="map-canvas"></div>

<script src="resources/techcomm-map.js"
charset="utf-8"></script>

<script src="https://maps.googleapis.com/maps/api/js
?key=MY-API-KEY
&libraries=places
&callback=initializeMap"
async defer></script>
</body>

@sarahmaddox #stc17
Web page - HTML
Create a div for the map
Load my JavaScript
Load the API
Call initializeMap
<body>


<div id="map-canvas"></div>

<script src="resources/techcomm-map.js"
charset="utf-8"></script>

<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

@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>

@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.
}

@sarahmaddox #stc17
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

@sarahmaddox #stc17
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
})

@sarahmaddox #stc17
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());
}

@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

@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/

@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

@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

@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

@sarahmaddox #stc17Native app versus web app
Platform technology
All platform features
App store
Web technology
Browser on device
Fewer mobile platform features

@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

@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) {
// ...
}
}

@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);
}

@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));
}
}

@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

@sarahmaddox #stc17
Hackathon
People
Idea
Learn as you go
Thanks to the hackathoneers!

@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

@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

@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
Android 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
Tech Comm on a Map
Web app: http://sarahmaddox.github.io/techcomm-map/
Android app: https://goo.gl/twfOKO

A tech writer, a map, and an app

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to A tech writer, a map, and an app

Similar to A tech writer, a map, and an app (20)

More from Sarah Maddox

More from Sarah Maddox (16)

Recently uploaded

Recently uploaded (20)

A tech writer, a map, and an app