DoubleDutch Development Kit

The DoubleDutch development platform supports developing standalone extensions that can be hosted within the DoubleDutch mobile app. Extensions are written in Javascript using the React Native framework.

Examples

Bay Area satellite view Bay Area satellite view
Where in the World? Personal Leads

Developer Videos

This video quickly illustrate what is possible with the DoubleDutch development kit.

More will be added soon.

Getting started with the DoubleDutch Development Kit

Developer Environment

The developer environment is currently limited to run on a Mac, though you can perform React Native development on other platforms that can easily be moved into a DoubleDutch extension at a later point.

You do not need to have a DoubleDutch developer account in order to start developing a new extension. DoubleDutch extensions can be written and tested locally in the iOS or Android simulator without any prior contact with DoubleDutch Engineering.

Prerequisites

Getting Started

  1. Install the doubledutch command line tools
npm i -g @doubledutch/cli
  1. Create an empty folder for your project and initialize it.
cd ~/code/project
doubledutch init

This will populate that folder with a functioning React Native project setup to run as an extension within the DoubleDutch mobile app. By default the name of the extension will match the current folder name. In the example above, you can find the Javascript files for your project in ~/code/project/mobile/src/. The file home-view.js is the root of your extension and has been initialized with a simple “To do” style sample extension. This sample extension provides examples of using useful DoubleDutch libraries such as @doubledutch/rn-client (used by all DoubleDutch extensions built with React Native) and @doubledutch/firebase-connector (optional integration with Google Cloud Platform’s Firebase suite for easy backend development).

  1. Run the sample code in the simulator
cd ~/code/project/mobile
npm run ios

The Javascript packager will take a couple minutes to initialize the first time. After that, ⌘ R in the simulator will quickly hot reload your changes.

  1. Make edits to the code in your favorite editor. Visual Studio Code Atom Sublime Text

  2. Hit ⌘ R in the simulator to refresh. ⌘ D for debugging with Chrome developer tools.

Interacting with the DoubleDutch mobile app

The sample extension that is created for you when you run doubledutch init uses the @doubledutch/rn-client library, which serves as a bridge between your extension and the mobile app it is hosted within.

import client, { Avatar, TitleBar } from '@doubledutch/rn-client'

This bridge allows you to access key information about the current event in the mobile app as well as the attendee that is logged in:

console.log(client.currentUser)
console.log(client.currentEvent)

In the simulator, mock data is provided for local development.

Need a backend for your extension?

@doubledutch/firebase-connector provides optional integration with Google Cloud Platform’s Firebase suite for easy backend development. The default configuration provides access to realtime database references in an environment managed by DoubleDutch. Each event’s data is sandboxed, and @doubledutch/firebase-connector provides database references that have various combinations of access control for attendees and event managers. See @doubledutch/firebase-connector for more details.

Publishing your DoubleDutch extension

Once you have finished development, you will need to be provisioned for a DoubleDutch developer account before you can publish and install the extension in an event app. To request your developer credentials, please submit a request here.

Next, use your developer credentials to authenticate via the doubledutch command line tools:

doubledutch login

You may now publish your extension to DoubleDutch

doubledutch publish

To update an extension you have already published, first update the version number in the package.json file at the root folder of your project. Then, updating an extension is as simple as publishing again.

Upon publishing your extension, you will receive a URL to the extension bundle. This URL can be inserted into a DoubleDutch mobile app as a new menu section in the CMS or Studio by adding it as a Web View. Simply paste the mobile URL which will be of the form:

https://firebasestorage.googleapis.com/v0/b/bazaar-179323.appspot.com/o/extensions%2F{extension_name}%2F{extension_version}%2Fmobile%2Findex.__platform__.0.46.4.manifest.bundle?module={extension_name}&alt=media#plugin

Finally, install your extension to that event using the event ID from the URL in the CMS or Studio:

doubledutch install [event_id]

Reference

See documentation for various DoubleDutch platform components: