ETMobile

A simple mobile interface for the Energy Transition Model.

Quick start guide

1. The development version of ETMobile requires that you have Node.js installed.

   • macOS users with Homebrew can install Node.js easily:

     brew update
     brew install node

     If you already have Node.js installed, please check the version by running node -v; version 6 or newer is required. Older versions may be updated by running:

     brew update
     brew upgrade node

   • Ubuntu users can use an install script using a ppa:

     sudo apt-get purge nodejs npm
     curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -
     sudo apt-get install -y nodejs

2. Install Yarn:

   npm install yarn -g

   On Ubuntu, a ppa can be used:

   curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
   echo "deb http://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list

3. Using Yarn, install the ETMobile dependencies:

   yarn

   You may re-run this command in the future to install any new or updated dependencies (which will show up as "Module not found: ...") error messages in the application.

4. Create a copy of the default environment file:

   cp .env.example .env

You may now run the development version of ETMobile with yarn start. The tests can be performed with yarn test and yarn coverage.

Developers may refer to the Create React App documentation.

Adding, updating, and removing questions

Questions are randomly generated from a list of possible choices. These choices can be found in src/data/choices.js.

ETMobile pre-calculates the outcome to each choice, storing the results in src/data/answers.js. This file is not meant to be directly edited, but is generated by running yarn build-answers.

The following actions require that answers.js be rebuilt:

• Adding or removing a choice
• Changing the order of choices in src/data/choices.js
• Changing the inputs, or inputs values for a choice

Adding a choice

Visitors are shown choices in a random order, so additions should be inserted at the bottom of the file. A choice is defined like so:

{
  name: 'Choice name; appears on the button',
  header: 'Text used in the page header; "name" is used if this is not defined',
  icon: 'imageName',
  description: `
    A description of the question; this text is shown under the icons on the
    question page, immediately preceding the two choice buttons.
  `,
  inputs: {
    input_key_one: 2.0,
    input_key_two: 4.0
  }
}

Once you have added your choice, run yarn build-answers to compute the answers for each choice.

Choice name, header, and description

name and description are texts shown to the visitor on the question page.

The name is displayed on the button which may be pressed by the visitor, and in the page header. You may set custom text for the page header by supplying an optional header value (this is advisable if the name is quite long).

description should provide the visitor with some information about the choice.

Choice icon

Each choice has an icon field defining which image will be used to represent the choice. These images can be found in src/images/choices. The value of the icon field should match the name of one of these images, without the ".svg" extension and changing under_score_names to camelCaseNames.

For example, if you wish to show "electric_vehicle.svg", the icon value should be "electricVehicle".

If you add a new icon, be sure to add its name to src/images/choices/index.js.

Choice inputs

A map of ETSource input keys and values which are applied to the scenario when the visitor makes their choice.