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

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.

Video: 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 new extension. DoubleDutch extensions can be written and tested locally in the iOS or Android simulator without any prior contact with DoubleDutch Engineering.

Prerequisites

• NodeJS
• Yarn
• XCode (to run in iOS simulator). If you have not used XCode before, be sure to open it once to accept the EULA and allow it to install the command line developer tools.

Getting Started

Install the doubledutch command line tools.

npm install -g @doubledutch/cli

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).

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.

Make edits to the code in your favorite editor.

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

Debugging React Native Projects

While your extension is running in the simulator, you can press  ⌘ D to open the debug menu.

This will allow you to start a variety of tools that can help you quickly work your way through any bugs in your code. The primary tool is the ability to run the actual Javascript code within a local Chrome browser.

Click “Debug JS Remotely”

This will launch a tab in your Chrome browser that now hosts all of the Javascript code being run in your React Native application. This lets you take full advantage of the Chrome developer tools, including printing data to the console and running the step by step debugger.

Interacting With the DoubleDutch Mobile App

The sample project that is created for you when you initialize a new DoubleDutch extension brings in the following library that 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 user that is logged in. The following two lines shows the location of these two properties:

client.currentEvent
client.currentUser

See @doubledutch/rn-client for more details.

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 of a DoubleDutch extension you will need to be provisioned for a DoubleDutch developer account before you can publish it and install it into an event app. To request your developer credentials, please submit a request here. 

Once you have received your developer credentials, you can authenticate locally by running the following command:

doubledutch login

After you have successfully logged in, you may publish your extension to DoubleDutch using the following command:

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

doubledutch install [event_id]