Creating a Modern PhoneGap Plugin

Creating a PhoneGap plugin doesn’t have to be scary, and it isn’t all that difficult! In this workshop you’ll learn how to create a simple plugin, how to structure your plugin for multi-platform support, how to add it to your projects, and how to test it thoroughly using Cordova’s plugin testing framework.

Note: Presentation and Workshop based in part on PGDay EU 2016 plugin workshop by Jesse

Presenters

About Kerri

Used PhoneGap for six+ years
Author of five books about PhoneGap
IT Consultant for eight years
Apache Cordova committer
One of several moderators:
- Adobe PhoneGap Forums
- Google Cordova Group
@kerrishotts

About Jesse

PhoneGap Developer since 2008
Apache Cordova committer
At Adobe for nearly 6 years now
@purplecabbage

Prerequisites

The following prerequisites are required. Versions used for testing follow.

General Prerequisites
- Git
- Node and npm installed
  - Tested with node 6.4.0 and 7.9.0
  - Tested with npm 3.10.8 and 4.2.0
- Cordova or PhoneGap CLI installed
- Native SDKs installed as needed
- Comfortable with terminal and CLI
- Enough knowledge of the native SDKs to be dangerous
Browser Plugin Development:
- Chrome 58 or better (tested 58.0.3029.81)
iOS Plugin Development:
- Mac (Macbook, Macbook Pro, iMac, etc.)
- macOS Sierra (10.12+, tested with 10.12.4)
- Xcode 8.3.2
Android Plugin Development:
- Java 8 JDK (tested with JDK 1.8.0.102 and 1.8.0.131)
- Android Studio 2.3.1
- Properly configured AVD
  - Tested on Android 7.1.1 Nougat (API level 25)
  - Prefer x86 + Intel HAXM; otherwise your emulator will take forever to launch.
- Update-to-date Android SDK
  - Tested with
    - SDK Tools 26.0.1
    - Platform tools 25.0.5
    - Build tools 25
Windows 10 Plugin Development:
- Windows 10 Pro (tested with v1703, build 15063.138)
- Visual Studio 2017 (Community version is fine)
  - Tested with 15.1 (26403.7)

Let’s get started!

What is a plugin? — What a plugin is; what plugins can do; plugin categories
Managing plugins — Installing from npm, git, local file system; finding plugins
Plugin X-Ray — What’s inside a plugin (metadata, documentation, structure, etc.)
Know your bridges — iOS, Android, Browser & Windows
Creating a plugin (four parts) — Creating a plugin scaffold; JS API; native code; class mapping
Testing — Testing your plugin with cordova-paramedic, Jasmine; tips
Debugging and Iterating — Linking your plugin; using the native SDK’s IDEs
Publishing — Publishing to npm
Hooks — What a hook is, what hooks can do, and ideas
Tips — Useful tips to remember
Homework — Using what you’ve learned; ideas

Our Final Plugin

You can see code for the final plugin created for this workshop at https://github.com/kerrishotts/cordova-plugin-example-isprime.

Sources

Navigation:

Start
Slides