Code Monkey home page Code Monkey logo

experts-app-web's Introduction

App Screenshot Google Experts tracking app

built with <3 by the GE Tracking App Team

Preview

The GDE App aims to help Google Experts track their activities and give Googlers a way to analyze the impact of the program and it's members. It's a progressive web app built with Polymer 1.0 toolbox, please refer to oficial documentation if you require more information.

Requirements

All requirements were done in a collaboration between Googlers and volunteers from the Google Experts program.

Version 2.0.0 Requirements

Setup

Prerequisites

You need NodeJS and NPM installed.

https://nodejs.org/en/download/

Run the following commands from you console.

npm install -g polymer-cli
bower install
New to Polymer progressive web apps?

This software uses the Polymer App Toolbox introduced in Google I/O 2016.

This tutorial will familiarize you with the core frontend technology on this project.

https://www.polymer-project.org/1.0/start/toolbox/set-up

Start the development server

This command serves the app at http://localhost:8080 and provides basic URL routing for the app:

polymer serve

Build for production

This command performs HTML, CSS, and JS minification on the application dependencies, and generates a service-worker.js file with code to pre-cache the dependencies based on the entrypoint and fragments specified in polymer.json.

polymer build

Deploy for staging

Before deploying to production, changes must be tested in our staging server hosted on firebase. Once you have built your changes for production, deploy using to firebase using:

firebase deploy

You can request staging deployment to @reicek .

Production deployment can only be done by @patt0 .

experts-app-web's People

Contributors

abraham avatar justinribeiro avatar lostinbrittany avatar reicek avatar scarygami avatar smokybob avatar splaktar avatar vikramtiwari avatar webmaxru avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

experts-app-web's Issues

Upgrade to PSK 1.3

Upgrade the app to use the paper-scroll-header-panel as done in the polymer starter kit 1.0.3 to improve scroll performance

App renaming/Rebranding

The GDE Program have a bigger scope now and it's called Google Experts.

Soon we'll have Experts from other Area of expertise, not only Tech/Developer, make sense to rename the App to "Experts Tracking"

Other related things to change:

  • Use the new logo
  • Change the app url (expertstraking.appspot.com ?)
  • Change GDEAccess, Title, etc to Google Experts

Small Nice to have thingys (might be worth creating separated issues, but adding here for centered discussion):

  • rename the element gde-signin to expert-signin
  • rename property isGde to isExpert

Activity Add/Edit element

Implementation of the Create/Edit element for the single activity.

Key features:

  • Accessible by URL, ex. /activity/123123
  • Fully accessible on small Screens
  • Read Only when Offline (offline Edit/create covered later with #20 )

Area of Expertise

After issue 16 is implemented in the BackEnd

Update the app to use the Area of Expertise on the account and display it in the GDE list.

Add the Area of expertise to the activity objects in the generalStatistics, this way activities can be filtered and we can provide a chart by Area of Expertise

Log out button

I have 2 Google accounts that I use. If I log in with the wrong one I am unable to log out. Having a log out button would be really useful.

I'd love to try to create this feature, but I'm not entirely sure where to start in the app. Is there a guide on how to get the application up and running?

Products tags don't shows up if not an Experts

Guess why?

Because I've filtered the PGs by Category, but if the user is not logged in the code to decide the visible PGs.

Set the visible list with the full PG list and filter it after login if needed

Batch Edit

Previously we discussed about Batch edit/creation of activities from a Google Spreadsheet and some concerns/ doubts were raised.

Another option, that could fix some of the concerns, would be a "spreadsheet" like edit/creation of activities from the web app.

Following some table/grid custom elements compatible with Polymer 1.0:

  • v-grid : pretty cool looking and Material design stile, table/grid, inline edit needs to be handled manually
  • aha-table : seems like line editors are already available, might need intensive styling to make it material design

Do we want to implement Spreadsheet based batch edit/creation, Web App batch edit/creation, both?

Should we make a poll and ask current GDEs what would they prefer?

Other concerns?

Allow for time-bounded reports

From old repo

Allow the activities and report to be filtered with a date range
Provide "quick rage selection" for, last 30 days, current quarter, previous quarter, year to date

Implement Welcome Screen / Dashboard

Composes of requirements 7, 8:

  1. The application shall show a rollup of three defined metrics for the current operating year based on an Experts activities:
    1. Reach - the amount of users/developers directly reached by an activity.
    2. Indirect Reach - the amount of users/developer indirectly reached by a given activity.
    3. Trained - the number of developers directly trained by a given activity.
  2. The application shall define a call to action for the two most requested actions:
    1. Add new activity
    2. List of existing activities

UI / UX:
https://app.zeplin.io/project.html#pid=56f2d4d5c0ec67301dd83d12&sid=570d5de2e257428a4675b6c9
image

Implement Google Sign-In flow

Composes of requirements 1 and 2:

  1. The application shall allow only whitelisted users to log into the system.
  2. The application shall use Google Sign-In as the authentication mechanism.

New charts elements

Current implementation of the charts uses the Google Charts library, we could use the google-chart elements, but some features (ex. filters) are missing and should be implemented manually.

Before start using the google-chart element, check if other chart elements are not better suited considering mobile and offline use of the application

Vulcanize is failing

When running the gulp command to bundle the app. The vulcanize task fails because of some missing css file. See screenshot:

image

I'm looking at it...

Expert Area element

Previously known as GDE Access / My General Statistics / Activity list

Implementation and redesign of the element/page to show:

  • "glanceable" activities recap
  • activities list/table
  • "Add New" FAB
  • Merge activities
  • Trash/Untrash activities
  • Save scroll position (Nice to Have, to avoid scrolling when getting back to the list after an edit)

To make the list and operations works, I think we could "steal" the layouts and feature placements of applications like Inbox or Gmail, especially for the mobile side of the view.

Material Design guidelines for data tables are available, but there is no element for that (yet) and no details for "small screens".
I personally really like the interactions but might be wiser to start using other premade elements instead of investing a lot of time implementing one (at least for p1)

Wrong event date

About my problem:

  1. I am talking about the activity date in the main UI.
  2. When I create or edit an activity, the date goes to 1 day before.

I tried from Brazil (GMT -3) and SFO (GMT -8).

Activity "draft"

as we are most likely to have a activity detail element/page instead of a dialog, implement a "draft" strategy (ex. like emails on mobile) to avoid losing partially created activities (especially accidental back button)

This feature requires:

  • proper caching with SW (for local only drafts)
  • Optionally a flag to store the drafts on the backend (maybe like the deleted flag) this way we could share drafts on multiple devices (ex. quick activity creation on mobile, complete on a bigger screen)

Latest GDE badges

Change the Badges in the map and the Experts list to the latest version

Experts Account "Options"

From Old Repo
Add to the Web App an "options" section for GDEs so that they can edit/add userIds/URL/api_keys, etc... needed as we add more sources we harvest statistics/activities from.

Currently only for the SO Id (account.so_id).

This is way we can:

  • Limit the effort maintaining the GDEs MasterList
  • Let the GDEs choose if they want to use a source or not (if they don't want to they can remove the Id/URL/key)

Unable to enter the date for an activity

Hello!

When I go to add an activity, and want to change the date, I try to do so by selecting the date input box and trying to type the new date in.

However, I am able to delete the existing date but then unable to change it or type anything in. Whenever I try to type a number in, nothing appears in the input box. It feels like there's a pop up that should be appearing to help pick the date but that's not happening.

Cheers,

Jack

Update avatar builder

Follow up from the old repo
The avatar builder is based on Polymer 0.5 needs upgrade to 1.0 to work properly with the new Web FE.

While upgrading the element:

  • Remove desaturation
  • Add the ability to download the resulting image (I think it's possible but not sure how)

App icons for different sizes

I recently tried App Toolbox by Polymer team which has prefered icon sizes for manifest.json as these:

  • 32x32 png
  • 128x128 svg
  • 144x144 png
  • 192x192 svg
  • 384x384 svg

We should update app with these.

GDE User Guide - Doc

From old repo
Create a Guide for new GDEs on How to Use the app at it's fullest.

Draft list of features to explain:

How to tag Posts to be recognized by the app
Why edit the activities
Explain Impact formula and why
How to Edit activities
Explain Merge, Trash and Delete
Common Problems/ Report issues
"Only GDEs and Admin can edit data" -> Google + account email <> account.email
Open GitHub issue with debug info from the Chrome Dev Tools

Charts for All!

One of the requests lost in the mists of time, was to show general statistics to Experts too.

We might want to discuss if this section needs to be "filtered" by category if an Expert access it (ex. I can see only Activities from Tech Experts) and/or other kind of pre filters (ex. the charts are already filtered for my area of expertise/PG).

Global Experts Program Team Activity Input Spreasheet

The Global Experts Program Team needs a way to input activities in the Tracking app from various events.

The idea is to create a sheet like the one for #36, but with an additional column for you to select the Expert you are creating the activity for, directly calculate the AG and Expected Impact Value from the selected AT (combo), and assume that each activity will only have 1 activity type.

Implement profile field update

Composes of requirements 3, 4, 5, 6:
(3). The application shall require a user to define their profile on first run.
(4). The application shall define the following fields for a profile for user input:

Field Type Validate Description
display_name ndb.StringProperty() required Display Name for user
email ndb.StringProperty() required Email for user; read only field.
type ndb.StringProperty() required User expertise area, list from XYZ; read only field.
city ndb.StringProperty() required City
country ndb.StringProperty() required Country
social_twitter ndb.StringProperty() optional Twitter profile name
social_googleplus ndb.StringProperty() optional Google+ handle
social_facebook ndb.StringProperty() optional Facebook handle
social_stackoverflow ndb.StringProperty() optional Stack Overflow profile

(5). The application shall redirect to the dashboard when all information required profile information is defined.
(6). The application shall allow a user to update their profile information after first run.

UI / UX mockup:
https://app.zeplin.io/project.html#pid=56f2d4d5c0ec67301dd83d12&sid=56f2d6aad310111659f3f15c
image

Aggregate some PGs under #android

diagnostics, #appindexing, #deeplinking, and #androidm are Android only activities.

In the charts/aggregated tables, they need to be aggregated with the total of #android activities.

Dev in 3 steps:

  1. hardcoded group on the html5 as the tags are already being used
  2. configurable behavior using the area column on the PGs to specify which "reporting tag" to use (if specified, otherwise use the original tag)
  3. implement in the Polymer version

Menu button's renaming/new sections

  • Googler's Access
  • Expert Access
  • How does the App Work?
  • How can I see my recorded activities?
  • How do I updated missing data?
  • Who are the Google Experts?

App menus

Port the old informational menus:

  • How is it used
  • How does it work

The old "Who are the experts" should be moved to Home.

Filter PGs by Expert's category

Filter the PGs with the Expert's category.

If the user has no category (ex. Googlers, normal users watching the app) show all the PGs and show the category in the How To Use

Charts by Category of Expertise

Add a Chart with data aggregated by Category of Expertise

Add a top filter to filter activities and charts by Category of Expertise.

Activity Edit via Spreadsheet

Create a Google Sheet to provide a way to batch edit a limited set of fields of activities already recorded via the Web App or via Google+ posts.

A proposed set of fields displayed in the sheet is:

  • Title
  • Date (ReadOnly)
  • Link (ReadOnly)
  • AGType (ReadOnly)
  • Metadata Impact
  • MetadataImpact description (ex. N° of Download) (ReadOnly)
  • ActivityId (hidden for update reference)

To support activities with multiple AGType, a single activity might need more that a record.

The sheets must enable to fetch and push updates only on activities from the Expert that is opening the Sheet.
In the top a filter to fetch data only from a range of dates.

Implement Add Activity workflow

Composes of requirements 9, 10, 11, 12, 13, 14:

  1. The application shall define the following fields for an activity for user input:
Field Type Validate Description
title ndb.StringProperty() required Title of the activity
description ndb.StringProperty() required Overview of activity
type ndb.StringProperty() required General activity type, list from XYZ
city ndb.StringProperty() required City
country ndb.StringProperty() required Country
date ndb.DateProperty() required Activity date profile name
  1. The application shall allow a user to delete a master activity record.
    1. The application shall cascade to delete any associated supporting child records for an activity.
  2. The application shall allow a user to update a master activity record’s data.
  3. The application shall define the following fields for a supporting child record for user input:
Field Type Validate Description
type ndb.StringProperty() required General support record type, list from XYZ, allow only one per type.
url ndb.StringProperty() required URL where exists for this type
metric_reached ndb.IntegerProperty() required Direct people reached, think number of attendees in a talk.
metric_indirect ndb.IntegerProperty() required Indirect people reached, think the travel of your social posts.
metric_trained ndb.IntegerProperty() required Trained people, think number of hits for a tutorial, people at a design sprint.
  1. The application shall allow a user to remove a support record from a parent activity.
  2. The application shall allow a user to update a support record on a parent activity.

UI / UX Flow:
Step 1: https://app.zeplin.io/project.html#pid=56f2d4d5c0ec67301dd83d12&sid=570dc50eac6c028b1b202f7e

Step 2: https://app.zeplin.io/project.html#pid=56f2d4d5c0ec67301dd83d12&sid=570dc50d5177cd8c1bf4a1e9

Step 3: https://app.zeplin.io/project.html#pid=56f2d4d5c0ec67301dd83d12&sid=577c61de58720b523d32b199

Step 4: https://app.zeplin.io/project.html#pid=56f2d4d5c0ec67301dd83d12&sid=577c6581d8fa9d2f3c6e7444

Edit/Create activity checks

While re implementing the activity edit/create pay attention to the following:

  1. prevent saving if no activity tile is provided (and other key fields) (ref)
  2. show save confirmation if the activity is saved correctly

Area of Expertise

After issue 16 is implemented in the BackEnd

Update the app to use the Area of Expertise on the account and display it in the GDE list.

Add the Area of expertise to the activity objects in the generalStatistics, this way activities can be filtered and we can provide a chart by Area of Expertise (which needs to be implemented).

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.