See comments in PR45. TL;DR: What data should be we collecting from users per experiment? What questions should we be asking & recording answers for?

This will determine fields added to the data model, at least. A numerical rating is in there now. Do we want to add a text field for a single comment? If we want to run surveys, that implies new chunks of server functionality to add. Anything else?

• Port existing splash page template (but not using jade, let's use mustache and embrace html)
• Replace email input with addon install button
  • Detect if addon is installed
  • Detect if UA is Firefox
• Disable button while Idea Town addon install is happening

I think we used node-normalize-scss with success on a different project.

Plus it'd let us avoid the weird file rename steps to be able to @import the file into our other Sass files.

gulp.js Usage

Using the gulp-sass plugin.

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function () {
  gulp.src('path/to/input.scss')
    .pipe(sass({
      // includePaths: require('node-normalize-scss').with('other/path', 'another/path')
      // - or -
      includePaths: require('node-normalize-scss').includePaths
    }))
    .pipe(gulp.dest('path/to/output.css'));
});

— via https://github.com/ranjandatta/node-normalize-scss#gulpjs-usage

/cc @johngruen

It's ES6 all the way down!
We only need to rename the gulpfile.js to gulpfile.babel.js, and then all the ES6 magic should just work.

https://markgoodyear.com/2015/06/using-es6-with-gulp/

• if idea town not installed, show an install button
• if it is installed, show a placeholder list of experiments (we've already got this)

STR:

• clone repo
• docker-compose up
• see this in stdout, perhaps a gulp race condition or some other thing happening

client_build_1 | [18:24:29] Using gulpfile /app/gulpfile.js
client_build_1 | [18:24:29] Starting 'build'...
client_build_1 | [18:24:29] Starting 'clean'...
client_build_1 | [18:24:29] Starting 'connect'...
client_build_1 | [18:24:29] Finished 'connect' after 9.72 ms
client_build_1 | [18:24:29] Server started http://localhost:9988
client_build_1 | [18:24:29] Finished 'clean' after 66 ms
client_build_1 | [18:24:29] Starting 'vendor'...
client_build_1 | [18:24:29] Starting 'npm:tabzilla:img'...
client_build_1 | [18:24:29] Starting 'npm:tabzilla:css'...
client_build_1 | [18:24:29] Starting 'npm:normalize'...
client_build_1 | [18:24:29] Finished 'npm:tabzilla:img' after 22 ms
client_build_1 | [18:24:29] Finished 'npm:tabzilla:css' after 24 ms
client_build_1 | [18:24:29] Finished 'npm:normalize' after 20 ms
client_build_1 | [18:24:29] Finished 'vendor' after 35 ms
client_build_1 | [18:24:29] Starting 'scripts'...
client_build_1 | [18:24:30] Finished 'scripts' after 1.71 s
client_build_1 | [18:24:30] Starting 'styles'...
client_build_1 | Error in plugin 'sass'
client_build_1 | Message:
client_build_1 |     static-src/styles/main.scss
client_build_1 |   4:9  file to import not found or unreadable: ../vendor/normalize.css/normalize
client_build_1 | Current dir: 
client_build_1 | [18:24:30] Finished 'styles' after 17 ms
client_build_1 | [18:24:30] Starting 'images'...
client_build_1 | [18:24:30] Finished 'images' after 17 ms
client_build_1 | [18:24:30] Finished 'build' after 1.86 s
client_build_1 | [18:24:30] Starting 'watch'...
client_build_1 | [18:24:30] Finished 'watch' after 43 ms
client_build_1 | [18:24:30] Starting 'server'...
client_build_1 | [18:24:30] Finished 'server' after 2.97 μs
client_build_1 | [18:24:30] Starting 'default'...
client_build_1 | [18:24:30] Finished 'default' after 4.13 μs

fxa flow already works, just need to bounce to /home (or similar) endpoint if authed

The wires show an interruptive doorhanger, which is probably not the final UI we want to use.

Opening this bug as a placeholder for future discussion / exploration.

Some kind of generic form to use until we have discourse integration

Figure out the minimum viable admin site to let non-devs CRUD experiments (and possibly users)

• addon UI is unclear - doorhanger? more subtle changes in the toolbar button appearance?
• server and addon need to work out a plan to push or pull these updates

Let's explore using an individual idea page (/ideas/name-of-idea?) instead of a modal to show off available Idea Town things:

• make it visible when logged-out (shows potential users the value of the site)
• provides expanded area for product tour (and potentially, someday, user ratings / feedback)
• "I understand data usage" checkbox enables the install button

I think FxA now supports the implicit grant flow (no server needed) as well as the auth code flow (server-server secrets exchange). Auth code flow has been used longer, is probably fine as a starting point.

The client-side gulp shenanigans have moved. Remove them from this repo.

shoutout to @pdehaan

We need to land the Giant Blob before we can use https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb, but let's do this soon!

experiments & user info in a nice form for the main page, experiment detail page, settings page

Let's make the API versionable - e.g. /api/0.2.3/experiments/1

• Django REST Framework has lots of options for versioning, could support the above.
• Use semver - there's a Python module to help compare versions
• We can use version ranges to switch behaviors / serializers / etc over time, keeping older stuff around until / unless deprecation happens.
• Model changes could be tricky, but let's burn that bridge when we cross it

• sign in / sign up button (Firefox Accounts integration)
• rough layout for static page (don't yet implement a carousel for the hero image area)

I was testing the Docker flow (worked well!) and noticed this one bit of confusion:

bash-3.2$ docker-compose up
Pulling db (postgres:9.3)...
9.3: Pulling from library/postgres
...
server_1 | Django version 1.8.4, using settings 'idea_town.settings'
server_1 | Starting development server at http://0.0.0.0:8000/
server_1 | Quit the server with CONTROL-C.

I wasn't able to get the server to respond on http://0.0.0.0:8000/ or http://localhost:8000/, but it did respond on http://ideatown.dev:8000/ with the following piece of HTML wizardry:

FWIW, I'm currently sporting Docker 1.8.1.

bash-3.2$ docker images
REPOSITORY               TAG                 IMAGE ID            CREATED             VIRTUAL SIZE
ideatownserver_server    latest              6bf9322c97fa        11 minutes ago      623.1 MB

bash-3.2$ docker version
Client:
 Version:      1.8.1
 API version:  1.20
 Go version:   go1.4.2
 Git commit:   d12ea79
 Built:        Thu Aug 13 02:49:29 UTC 2015
 OS/Arch:      darwin/amd64

Server:
 Version:      1.8.1
 API version:  1.20
 Go version:   go1.4.2
 Git commit:   d12ea79
 Built:        Thu Aug 13 02:49:29 UTC 2015
 OS/Arch:      linux/amd64

https://github.com/mozilla/sugardough/

Also we should think about generating/serving the client through node or something, Just to keep the client as simple/decoupled as possible.

When the idea town addon is installed/uninstalled, or when individual experiments are installed/uninstalled, we want the addon to ping our server, to update user state.

Need to add a URL for addon XPI, assuming they'll be uploaded to AMO and signed there.

We might want to consider supporting local uploads of XPIs in the future?

Set up a basic pipeline to ship our server logs and server-side KPI data somewhere

Again, implemented as a modal in the initial wireframes. We can explore a full-page version in #16.

• on 'uninstall' button click, open a modal
• two steps, again:
  • step one: some kind of feedback form
  • step two: "thx u!" gratitude communication interface
• uninstall the idea-addon
• toggle idea view from installed to uninstalled
• ping the server to update user state

• RDS or EC2 for postgres in AWS?
• Do we want to continue trying to use Elastic Beanstalk?

• Remove templated APIs / views

Some ideas collected here:

• https://etherpad.mozilla.org/idea-town-draft-readme

• use FxA redirect flow, it's simplest
• use the server-server resource grant (FxA provides this by default)
• store whatever data FxA exposes on the server
• redirect should bounce the user back to the logged-in view of /home
• explicitly do not worry about the case where verification occurs later / in a different tab / on a different device

Let's figure out sooner than later how users can help each other and build a beta-tester community.

• we could have some kind of persistent product tour page for each idea
• periodic "homework assignments" for users could be synchronous, so everyone experiences them together
  • the existing doorhanger at end of v1 wireframes alludes to ongoing feedback gathering

users, experiments, per-user experiment data

Placeholder for whatever images we want to slice out of the PSD

https://www.dropbox.com/s/13h9r7johqx2u5w/idea-town-walkthrough.pdf?dl=0

we can submit PRs to add additional versions later

this'll help contributors

Sugardough gives this to us for free; document getting-started steps nicely in the README

Install an experiment, possibly triggering FxA signup, possibly triggering Idea Town addon install

• if user's logged in, provide email address, whether the user has the main addon, and a list of any installed experiments
• if user's not logged in, return empty object / null / TBD

Note: we have no wireframes for this screen

• show user info (email, display name?, avatar?)
• edit user info (how does fxa handle email changes? if it's hard, ignore for now & file a bug)
• delete account (for now, don't tie this together with uninstalling Idea Town addon)
• list "ideas" the user is currently participating in

Google Analytics seems simplest?

• add gear icon (or avatar?) in the usual top-right header spot
• row UI displaying list of active experiments
  • data needed for each: name, description, addon URL, screenshots, count of active users (maybe)
• install button for each experiment, for now, just links to an .xpi file (let FF handle the install process)

when I moved the repos etc.

This is currently spec'd as a two-step modal flow. It might be lower friction to implement as a page for a single idea, but we'll figure out the alternate UI later (captured in #16).

• implement or borrow simple lightbox
• first step: how the idea alters Firefox (some crude product tour)
• second step: what data is used (bulleted list?)
• on modal success,
  • trigger idea-addon installation
  • ping server when idea-addon installation is complete
  • disable button during install process & re-enable when done (icing, skippable)

This is an issue already when running Gulp straight on OS X host. But, when it's in a Docker container things are worse: you have to restart the container. So, it might be handy to wrap gulp in nodemon or something and make it restart itself when gulpfile.js changes

This already sorta works in the first big bang commit; placeholder for any additional niceness that might be needed

There are a few options like sorl-thumbnail. Look into it, pick one, try using it.