Creating Your Cordova App

How to create your Cordova app using Command Line Interface

First you should create your app using the Cordova Command Line Interface (CLI).
To access CLI, launch Terminal (on Macs) or Command Prompt under Accessories (on PCs).
For more information, see the official Cordova documentation.
For instructions on how to install Cordova and SDKs on OS X, see our wiki page.
For instructions on how to install Cordova and the Android SDK on Windows, see this page.
If you are having problems installing Git, check out this page for instructions regarding different ways of installing Git.

Creating the App

First, you should specify where you would like the app folders and files to be stored by specifying the location using the change directory command:
$ cd PATH
where
PATH is the directory path for the location where the app should be stored. On Macs, you can drag and drop the path into Terminal.

You can then create the app using the following command:
$ cordova create directoryName com.example.name "App Display Name"
where
directoryName is the name of the folder that Cordova will generate for the project in the location specificied by PATH in the previous command. This folder should not already exist.
com.example.name provides the name of the project with a reverse domain-style identifier.
appDisplayName provides the app's display title. It can later be changed by editting the app's config.xml file, which will be generated by Cordova.

Adding Platforms

To add platforms to the app, you first need to change the directory to the folder that contains your Cordova project:
     $ cd directoryName
Then you can specify which platforms to install using these two commands:
     $ cordova platform add ios
     $ cordova platform add android
Cordova also allows for apps to be built for most of the other smartphone platforms currently available (such as Blackberry and Windows); however, we limited ExperienceSampler to just Android and iOS because these two systems offer the best local notifications systems and documentation about their notification systems. See here for more information about the Cordova CLI.

We would also advise you to create two separate apps - an Android version and an iOS version. There is one major difference between the two versions (in terms of how the local notifications are scheduled). Thus, we found it easier to simply create two separate apps, and then copy the customized code from the first one we made into the other. Then we adjusted the code to the platform. Furthermore, the local notifications plugin for the iOS version and Android version currently differ.

If you have added both platforms to one app and would like to remove one, you can use this command
$ cordova platform rm ios
$ cordova platform rm android

Adding Plugins

Finally, you should install the necessary plugins for Experience Sampler by typing the following commands in the CLI:
     $ cordova plugin add cordova-plugin-dialogs
     $ cordova plugin add cordova-plugin-splashscreen
     $ cordova plugin add cordova-plugin-vibration
     $ cordova plugin add cordova-plugin-device
     $ cordova plugin add https://github.com/katzer/cordova-plugin-local-notifications
     for iOS10 $ cordova plugin add https://github.com/katzer/cordova-plugin-local-notifications#ios10
     for Android $ cordova plugin add cordova-android-support-gradle-release
          This plugin resolves the error message you receive when building your Android app.

Adding ExperienceSampler Template Files

Open up your newly created Cordova app folder. You should see the following file structure (| means that the file is nested within the folder listed above it that does not have a |, and / at the end of a file name indicates that the file is a folder):
     directoryName/
     | -- config.xml
     | -- hooks/
     | -- platforms/
     | -- plugins/
     | -- www/
Open the www folder. Then copy and paste all the ExperienceSampler template files for the specific platform into this folder. Be sure to select Replace and Apply to All when you do this. You can find the template files from our our Github repository.

Once you have copied all the files into the www folder, open up the index.js file in the js folder in your favourite Text Editor.

Now you're ready to customize your app with your own questions and signalling schedule!