• View
• Edit
• History
• Print

CordovaHost

Cordova is a cross-platform mobile development framework based on HTML, CSS, and JS. It provides interfaces to access functionality like the camera, geolocation, and accelerometer, through plugins that provide plaform-specific bindings.

Prerequisites

• Nodejs: Cordova and its plugins are available using npm (Node Package Manager).
• In order to develop for a specific platform, you need to install the corresponding Software Development Kit.

Installation

1. Install Apache Cordova framework. Follow instructions at Apache Cordova for downloading and installing the framework, or just run:

Android

Install the following packages:

• Java JDK
• Android SDK

Make sure that the following environment variables are set and point to the root directory of the respective SDK:

• $JAVA_HOME
• $ANDROID_HOME

Android Studio provides tools like adb which are necessary to connect to a phone or emulator and deploy and app. Make sure that the /bin directory of your Android Studio installation is added to your $PATH.

iOS

Install the following packages:

• Xcode
• Xcode Command Line Tools (can be installed during Xcode installation)

Using the Cordova Host

From the accessors repository trunk, change directory:

The main functionality of the host is implemented in cordovaHost.js. Modules are located in modules/.

To create a new Cordova app with name $MY_APP:

This will create a new directory $MY_APP with a subdirectory src/, which will contain a skeleton for a simple "HelloWorld" app after running the following command:

This will populate the directory $MY_APP with all the files needed to run the app. You can now issue the Cordova run command.

• To run the app in your browser, execute:

• To run the app on your plugged-in Android phone, execute:

• To run the app on your Android emulator (you have to create one in Android Studio first AND launch it), execute:

• To run the app on your plugged-in iPhone, execute:

IMPORTANT: Do not edit the generated source files, only edit the files in src/. All generated code can be easily removed by issuing the command:

Always run this command before checking anything into repository.

To refresh the generated code after having edited any of the source files, run:

Troubleshooting

Issues w/Linux

• libGL error: unable to load driver: i965_dri.so. Problem: mismatch between system library and the one provided by Android Studio. Solution: use the system library:

Issues w/iOS

When I try to ant build; cordova run ios, I get an error even if my iOS device is connected.

• It can be a code signing issue of the app (error 65). In this case, use open platforms/ios/<name of your app>.xcworkspace to open the generated Xcode project. Select your project at the top of the left Project navigator panel. Then select your target in the Targes list and go to the General tab. Finally, in the Signing part of the window, choose a Team that will be used to sign the app you want to install on your iOS device. You can now try to run ant build; cordova run ios again.
• The maximum number of apps for free development profiles may have been reached (error 253). You might want to delete one of the app signed with the development profile used for the project.

Building Cordova Plugins

Plugins are packages that export JavaScript code that can have bindings to native Android or iOS code (like everyone else, we'll pretend that Windows Phone does not exists). Depending of the target Cordova builds against, it will select the proper native implementation. If you want a plugin that works on multiple platforms, unless it is written in pure JavaScript, you will have to (re)implement it for each of those platforms.

Scaffolding

Plugins require quite a bit of scaffolding. To avoid the onerous task of setting it up, it is recommendable to use a tool called plugman.

To create the required directory stucture for a new plugin, say myPlugin, cd to web/hosts/cordova/plugins, and run the following command:

Finally, you'll need to create a package.json:

If you omit this last step, cordova will complain when you try to load the plugin.

The next step is to add a platform. To start working on the Android platform, add it:

This will create an android subdirectory in src and make changes to plugin.xml. The latter file is also where you will have to specify permissions for the plugin.

Access to Java Land

TODO.

Access to Objective-C Land

TODO.

Plugin Permissions

TODO.

Dependencies on External Libraries

Plugins are not precompiled and dynamically linked. Cordova collects all source code and does the compilation for you. In order make Cordova aware of the libraries that your plugin code depends on, you must, for each platform, declare these dependencies. For instance, if your application uses the Lyft scissors library, include the following XML to your plugin.xml:

Also see: https://cordova.apache.org/docs/en/latest/guide/platforms/android/plugin.html.

Debugging

The easiest way to debug a swarmlet is to run on the browser and then inspect the page. However, some plugins might only work on Android or iOS and in this case there is no other way to debug the swarmlet than debugging it on a device or a simulator.

Debugging on iOS

On a Mac, you can debug the app containing your swarmlet using Safari web inspector. If the app is running on a device (as opposed to the Simulator), be sure it is plugged in.

Set up iOS debugging environment

Before debugging, you need to set up your debugging environment on iOS and macOS. First, enable Web Inspector on your iOS device by going to Settings app and turn on "Web Inspector" in Safari > Advanced (Valid path for iOS 10). Then, open Safari on your Mac and go to Safari's preferences (Safari > Preferences... or 'CMD + ,') where you will be able to check "Show Develop menu in menu bar" in the 'Advanced' tab.

After running the app on your iOS device, open Safari on your Mac and choose 'Develop' menu bar. You can then select the device you want to debug and the app to inspect.

Presentations

• "Running Accessors On Mobile Devices Using Cordova," Chadlia Jerad, Hokeun Kim, Marten Lohstroh, Victor Nouvellet, Matt Weber, Ptolemy Group Lunch, May 17, 2017.

See also Publications And Presentations

Future work

• Create a GUI module for on-screen interactions with the user.
• Create modules for native mobile function (i.e. camera, media, motion...).
• The build script currently copies all available accessors and modules into the app. Ideally, it would only copy the ones that are needed.