Cordova plugins​

Stéphen bellanger
ysée monnier

WHAT is it?

what is it?

  • Device and platform functionality
    • Health Kit, Google Maps, Calendar, Camera, ...
  • ​Interface an External Library

HOW does IT work?

HOW DOES IT WORK?

import org.apache.cordova.CordovaPlugin;

public class CustomAlertPlugin extends CordovaPlugin {
  private static final String TAG = "CustomAlertPlugin";

  public void initialize(CordovaInterface cordova, 
                         CordovaWebView webView) {
    super.initialize(cordova, webView);

    Log.d(TAG, "Initializing MyCordovaPlugin");
  }
  ...
}
@objc(ModusEchoSwift) class CustomAlertPlugin : CDVPlugin {
  func superFunction(command: CDVInvokedUrlCommand) {

    let superArg = command.arguments[0] as? String ?? ""

    if msg.characters.count > 0 {
      let alertController: UIAlertController = 
        UIAlertController(
          title: "", 
          message: msg, 
          preferredStyle: .Alert
        )

HOW DOES IT WORK?

Structure

HOW DOES IT WORK?



.
├── package.json
├── plugin.xml
├── src
│   └── android
│       └── com
│           └── example
│               └── CustomAlertPlugin.java
└── www
    └── plugin.js

plugin.xml

HOW DOES IT WORK?

<?xml version="1.0" encoding="UTF-8"?>
<plugin xmlns="http://apache.org/cordova/ns/plugins/1.0" id="my-cordova-plugin" version="1.0.0">
 <name>Cordova Plugin Template</name>
 <description></description>
 <repo>https://github.com/driftyco/cordova-plugin-template.git</repo>

 <!-- android -->
 <platform name="android">
  <js-module src="www/plugin.js" name="plugin">
   <runs/>

   <!-- This is the window variable name you want, like window.MyCordovaPlugin -->
   <clobbers target="CustomAlertPlugin"/>
  </js-module>
  <config-file target="res/xml/config.xml" parent="/*">
   <feature name="CustomAlertPlugin">
    <param name="android-package" value="com.example.CustomAlertPlugin"/>
    <param name="onload" value="true"/>
   </feature>
  </config-file>

  <source-file src="src/android/com/example/CustomAlertPlugin.java" target-dir="src/com/example/"/>
 </platform>
</plugin>

plugin . js

HOW DOES IT WORK?

var exec = require('cordova/exec');

// Plugin name defined in `plugin.xml`
const PLUGIN_NAME = 'DatePlugin'

// Export a public function.
exports.getDate = function(success, error) {
 exec(success, error, PLUGIN_NAME, 'getDate', []);
};

myplugin . java

HOW DOES IT WORK?

public class CustomAlertPlugin extends CordovaPlugin {
  private static final String TAG = "CustomAlertPlugin";

  public void initialize(CordovaInterface cordova, CordovaWebView webView) {
    super.initialize(cordova, webView);

    Log.d(TAG, "Initializing MyCordovaPlugin");
  }

  @Override
  public boolean execute(String action, JSONArray args, final CallbackContext callbackContext) 
        throws JSONException {

    if(action.equals("getDate")) {
      final PluginResult result = new PluginResult(PluginResult.Status.OK, (new Date().toString());
      callbackContext.sendPluginResult(result)
      return true;
    } else {
      callbackContext.error(action + " not found !");
      return false;
    }
  }
}

GOOGLE MAPS

WHAT is it?

what is it?

  • Interactive map
  • Web-based service
  • Geometrics layers (maker, polygon, polyline ...)
  • Unofficial Cordova plugin

Why Google maps

Cordova plugins?

HOW DOES IT WORK?

HOW DOES IT WORK?

cordova plugin add cordova-plugin-googlemaps \
    --variable API_KEY_FOR_ANDROID="API_KEY_VALUE" \
    --variable API_KEY_FOR_IOS="API_KEY_VALUE"

Features​

MAP

features

var options = {
  camera: {
    target: {lat: ..., lng: ...},
    zoom: 19
  }
};
var map = plugin.google.maps
    .Map.getMap(mapDiv, options)

MARKER

features

map.addMarker({
  position: {lat: ..., lng: ...},
  title: "Hello Cordova Google Maps for iOS and Android",
  snippet: "This plugin is awesome!"
}, function(marker) { ... })

Html InfoWindow

features

var options = {
  camera: {
    target: {lat: ..., lng: ...},
    zoom: 19
  }
};
var map = plugin.google.maps
    .Map.getMap(mapDiv, options)

CIRCLE

features

map.addCircle({
  'center': {lat: ..., lng: ...},
  'radius': 300,
  'strokeColor' : '#AA00FF',
  'strokeWidth': 5,
  'fillColor' : '#880000'
}, function(circle) { ... });

POLYLINE

features

map.addPolyline({
  points: AIR_PORTS,
  'color' : '#AA00FF',
  'width': 10,
  'geodesic': true
}, function(polyline) { ... });

POLYGON

features

map.addPolygon({
  'points': GORYOKAKU_POINTS,
  'strokeColor' : '#AA00FF',
  'strokeWidth': 5,
  'fillColor' : '#880000'
}, function(polygon) { ... });

Questions?​

Made with Slides.com