This presentation gives an overview of how to write Gmail add-ons. In particular, we show how we integrated the issue tracking system "Phabricator" into Gmail for increased productivity.

1. Writing Gmail Add-ons
Integrating Gmail with Phabricator as an example
GDGLA DevFest 2018 Ayman Mahfouz

2. Bio
- VP of Engineering at Webalo (webalo.com)
- Los Angeles based
- UX4IIoT
- 20 years of software development
- BSc. Computer Science & PhD. in software engineering

4. 2017

5. The Problem
● Phabricator for issue tracking + Gmail for email
● Broken Workflow:
○ Teammate sends email referencing an issue.
○ Switch to Phabricator to gather info
○ Switch back to email to reply
● Loss of productivity!

6. ● Integrate Phabricator into Gmail with an Add-on
● Improved Workflow:
○ Teammate sends email referencing an issue.
○ See Phabricator info in-context.
○ Reply or comment within same browser tab.
● Increased productivity!
Solution Overview

7. Demo

8. ● Developer extensions for Gmail.
● Google Apps Script
○ JavaScript + APIs
○ Used across GSuite
Gmail Add-ons

9. ● Project on script.google.com
● Manifest file
● Script files
● Global scope
Basic Structure

10. Select Message
Trigger Add-on
Create Card UI
Add Widgets
Execution Flow

11. ● Handler functions
● Event object
● Navigation
● Composing email
Actions and Events

12. ● REST API
● UrlFetchApp
Connecting to Phabricator

13. ● Auth Scopes
○ Execute add-on
○ Read email
○ Make external calls
○ Compose
○ Access user locale
Security

14. ● Logger is your friend.
● Debugging requests (httpbin.org)
● Source control (github assistant)
Tips

15. ● Minimal - No libs
● Incomplete date handling
● Missing support for some form encoding
Some Quirks

16. Ayman Mahfouz
amahfouz@gmail.com
linkedin.com/in/amahfouz/
amahfouz.wordpress.com
github.com/amahfouz
amahfouz.com
Thanks!
}