add 01_KVP sbm demo based on firebase

+{
+  "projects": {
+    "default": "sbm-demo-22904"
+  }
+}

+# Contributing to the Firebase FriendlyChat Codelab
+
+We'd love for you to contribute to our source code and to make the Firebase FriendlyChat Codelab even better than it is today! Here are the guidelines we'd like you to follow:
+
+ - [Code of Conduct](#coc)
+ - [Question or Problem?](#question)
+ - [Issues and Bugs](#issue)
+ - [Feature Requests](#feature)
+ - [Submission Guidelines](#submit)
+ - [Coding Rules](#rules)
+ - [Signing the CLA](#cla)
+
+## <a name="coc"></a> Code of Conduct
+
+As contributors and maintainers of the Firebase FriendlyChat Codelab project, we pledge to respect everyone who contributes by posting issues, updating documentation, submitting pull requests, providing feedback in comments, and any other activities.
+
+Communication through any of Firebase's channels (GitHub, StackOverflow, Google+, Twitter, etc.) must be constructive and never resort to personal attacks, trolling, public or private harassment, insults, or other unprofessional conduct.
+
+We promise to extend courtesy and respect to everyone involved in this project regardless of gender, gender identity, sexual orientation, disability, age, race, ethnicity, religion, or level of experience. We expect anyone contributing to the project to do the same.
+
+If any member of the community violates this code of conduct, the maintainers of the Firebase  Android Quickstarts project may take action, removing issues, comments, and PRs or blocking accounts as deemed appropriate.
+
+If you are subject to or witness unacceptable behavior, or have any other concerns, please drop us a line at nivco@google.com.
+
+## <a name="question"></a> Got a Question or Problem?
+
+If you have questions about how to use the Firebase FriendlyChat Codelab, please direct these to [StackOverflow][stackoverflow] and use the `firebase` tag. We are also available on GitHub issues.
+
+If you feel that we're missing an important bit of documentation, feel free to
+file an issue so we can help. Here's an example to get you started:
+
+```
+What are you trying to do or find out more about?
+
+Where have you looked?
+
+Where did you expect to find this information?
+```
+
+## <a name="issue"></a> Found an Issue?
+If you find a bug in the source code or a mistake in the documentation, you can help us by
+submitting an issue to our [GitHub Repository][github]. Even better you can submit a Pull Request
+with a fix.
+
+See [below](#submit) for some guidelines.
+
+## <a name="submit"></a> Submission Guidelines
+
+### Submitting an Issue
+Before you submit your issue search the archive, maybe your question was already answered.
+
+If your issue appears to be a bug, and hasn't been reported, open a new issue.
+Help us to maximize the effort we can spend fixing issues and adding new
+features, by not reporting duplicate issues.  Providing the following information will increase the
+chances of your issue being dealt with quickly:
+
+* **Overview of the Issue** - if an error is being thrown a non-minified stack trace helps
+* **Motivation for or Use Case** - explain why this is a bug for you
+* **Browsers and Operating System** - is this a problem with all browsers or only IE9?
+* **Reproduce the Error** - provide a live example (using JSBin) or a unambiguous set of steps.
+* **Related Issues** - has a similar issue been reported before?
+* **Suggest a Fix** - if you can't fix the bug yourself, perhaps you can point to what might be
+  causing the problem (line of code or commit)
+
+**If you get help, help others. Good karma rulez!**
+
+Here's a template to get you started:
+
+```
+Browser:
+Browser version:
+Operating system:
+Operating system version:
+
+What steps will reproduce the problem:
+1.
+2.
+3.
+
+What is the expected result?
+
+What happens instead of that?
+
+Please provide any other information below, and attach a screenshot if possible.
+```
+
+### Submitting a Pull Request
+Before you submit your pull request consider the following guidelines:
+
+* Search [GitHub](https://github.com/firebase/codelab-friendlychat/pulls) for an open or closed Pull Request
+  that relates to your submission. You don't want to duplicate effort.
+* Please sign our [Contributor License Agreement (CLA)](#cla) before sending pull
+  requests. We cannot accept code without this.
+* Make your changes in a new git branch:
+
+     ```shell
+     git checkout -b my-fix-branch master
+     ```
+
+* Create your patch, **including appropriate test cases**.
+* Follow our [Coding Rules](#rules).
+* Avoid checking in files that shouldn't be tracked (e.g `node_modules`, `gulp-cache`, `.tmp`, `.idea`). We recommend using a [global](#global-gitignore) gitignore for this.
+* Make sure **not** to include a recompiled version of the files found in `/css` and `/js` as part of your PR. We will generate these automatically.
+* Commit your changes using a descriptive commit message.
+
+     ```shell
+     git commit -a
+     ```
+  Note: the optional commit `-a` command line option will automatically "add" and "rm" edited files.
+
+* Build your changes locally to ensure all the tests pass:
+
+    ```shell
+   gulp
+    ```
+
+* Push your branch to GitHub:
+
+    ```shell
+    git push origin my-fix-branch
+    ```
+
+* In GitHub, send a pull request to `codelab-friendlychat:master`.
+* If we suggest changes then:
+  * Make the required updates.
+  * Rebase your branch and force push to your GitHub repository (this will update your Pull Request):
+
+    ```shell
+    git rebase master -i
+    git push origin my-fix-branch -f
+    ```
+
+That's it! Thank you for your contribution!
+
+#### After your pull request is merged
+
+After your pull request is merged, you can safely delete your branch and pull the changes
+from the main (upstream) repository:
+
+* Delete the remote branch on GitHub either through the GitHub Android UI or your local shell as follows:
+
+    ```shell
+    git push origin --delete my-fix-branch
+    ```
+
+* Check out the master branch:
+
+    ```shell
+    git checkout master -f
+    ```
+
+* Delete the local branch:
+
+    ```shell
+    git branch -D my-fix-branch
+    ```
+
+* Update your master with the latest upstream version:
+
+    ```shell
+    git pull --ff upstream master
+    ```
+
+## <a name="cla"></a> Signing the CLA
+
+Please sign our [Contributor License Agreement][google-cla] (CLA) before sending pull requests. For any code
+changes to be accepted, the CLA must be signed. It's a quick process, we promise!
+
+*This guide was inspired by the [AngularJS contribution guidelines](https://github.com/angular/angular.js/blob/master/CONTRIBUTING.md).*
+
+[github]: https://github.com/firebase/friendlychat
+[google-cla]: https://cla.developers.google.com
+[js-style-guide]: http://google.github.io/styleguide/javascriptguide.xml
+[py-style-guide]: http://google.github.io/styleguide/pyguide.html
+[jsbin]: http://jsbin.com/
+[stackoverflow]: http://stackoverflow.com/questions/tagged/firebase
+[global-gitignore]: https://help.github.com/articles/ignoring-files/#create-a-global-gitignore

+# Firebase Codelab: FriendlyChat
+
+This is the source code for the Firebase FriendlyChat codelab. It includes start and end versions of the
+code for Web and Cloud Functions. To get started open the codelab instructions:
+
+ - [Firebase Web Codelab](https://codelabs.developers.google.com/codelabs/firebase-web/).
+ - [Firebase SDK for Cloud Functions Codelab](https://codelabs.developers.google.com/codelabs/firebase-cloud-functions/).
+
+
+## How to make contributions?
+Please read and follow the steps in the [CONTRIBUTING.md](CONTRIBUTING.md)
+
+
+## License
+See [LICENSE](LICENSE)

+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "project": {
+    "name": "cloud-functions-angular-start"
+  },
+  "apps": [
+    {
+      "root": "src",
+      "outDir": "dist",
+      "assets": [
+        "assets",
+        "favicon.ico",
+        "firebase-messaging-sw.js"
+      ],
+      "index": "index.html",
+      "main": "main.ts",
+      "polyfills": "polyfills.ts",
+      "test": "test.ts",
+      "tsconfig": "tsconfig.app.json",
+      "testTsconfig": "tsconfig.spec.json",
+      "prefix": "app",
+      "styles": [
+        "styles.css"
+      ],
+      "scripts": [],
+      "environmentSource": "environments/environment.ts",
+      "environments": {
+        "dev": "environments/environment.ts",
+        "prod": "environments/environment.prod.ts"
+      }
+    }
+  ],
+  "e2e": {
+    "protractor": {
+      "config": "./protractor.conf.js"
+    }
+  },
+  "lint": [
+    {
+      "project": "src/tsconfig.app.json",
+      "exclude": "**/node_modules/**"
+    },
+    {
+      "project": "src/tsconfig.spec.json",
+      "exclude": "**/node_modules/**"
+    },
+    {
+      "project": "e2e/tsconfig.e2e.json",
+      "exclude": "**/node_modules/**"
+    }
+  ],
+  "test": {
+    "karma": {
+      "config": "./karma.conf.js"
+    }
+  },
+  "defaults": {
+    "styleExt": "css",
+    "component": {}
+  }
+}

+# Editor configuration, see http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

+{}
\ No newline at end of file

+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist
+/dist-server
+/tmp
+/out-tsc
+
+# dependencies
+/node_modules
+/functions/node_modules
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
+yarn-error.log
+testem.log
+/typings
+
+# e2e
+/e2e/*.js
+/e2e/*.map
+
+# System Files
+.DS_Store
+Thumbs.db

+# Firebase SDK for Cloud Functions (Angular) Codelab - Start code
+
+This folder contains the start code of the [Firebase SDK for Cloud Functions (Angular) Codelab](https://codelabs.developers.google.com/codelabs/firebase-cloud-functions-angular/).
+
+If you'd like to jump directly to the end and see the finished code head to the [cloud-functions-angular](../cloud-functions-angular) directory.
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.0.0.
+
+# Running locally
+
+## Development server
+
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
+
+# Deploying
+
+Run `firebase deploy` to deploy hosting, database, and functions. Run
+`firebase deploy --except` to only deploy hosting and database.

+{
+  "rules": {
+    "messages": {
+      ".read": "auth !== null",
+      ".write": "auth !== null"
+    },
+    "fcmTokens": {
+      "$token": {
+        ".read": "data.val() === auth.uid", // Users can only read their own device tokens
+        ".write": "!data.exists() || data.val() === auth.uid", // Users can only write to their own device tokens
+        ".validate": "newData.val() === auth.uid" // value has to be the UID of the user
+      }
+    }
+  }
+}

+import { CloudFunctionsAngularStartPage } from './app.po';
+
+describe('cloud-functions-angular-start App', () => {
+  let page: CloudFunctionsAngularStartPage;
+
+  beforeEach(() => {
+    page = new CloudFunctionsAngularStartPage();
+  });
+
+  it('should display welcome message', () => {
+    page.navigateTo();
+    expect(page.getParagraphText()).toEqual('Welcome to app!');
+  });
+});

+import { browser, element, by } from 'protractor';
+
+export class CloudFunctionsAngularStartPage {
+  navigateTo() {
+    return browser.get('/');
+  }
+
+  getParagraphText() {
+    return element(by.css('app-root h1')).getText();
+  }
+}

+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/e2e",
+    "baseUrl": "./",
+    "module": "commonjs",
+    "target": "es5",
+    "types":[
+      "jasmine",
+      "jasminewd2",
+      "node"
+    ]
+  }
+}

+{
+  "database": {
+    "rules": "database.rules.json"
+  },
+  "hosting": {
+    "public": "dist",
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**"
+    ],
+    "rewrites": [
+      {
+        "source": "**",
+        "destination": "/index.html"
+      }
+    ]
+  },
+  "storage": {
+    "rules": "storage.rules"
+  }
+}

+/**
+ * Copyright 2017 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// TODO(DEVELOPER): Import the Cloud Functions for Firebase and the Firebase Admin modules here.
+
+// TODO(DEVELOPER): Write the addWelcomeMessages Function here.
+
+// TODO(DEVELOPER): Write the blurOffensiveImages Function here.
+
+// TODO(DEVELOPER): Write the sendNotifications Function here.
+
+// (OPTIONAL) TODO(DEVELOPER): Write the annotateMessages Function here.

+{
+  "name": "functions",
+  "description": "Cloud Functions for Firebase",
+  "dependencies": {
+    "firebase-admin": "~5.12.0",
+    "firebase-functions": "^1.0.1"
+  },
+  "scripts": {
+    "serve": "firebase serve --only functions",
+    "shell": "firebase functions:shell",
+    "start": "npm run shell",
+    "deploy": "firebase deploy --only functions",
+    "logs": "firebase functions:log"
+  },
+  "private": true
+}

+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/0.13/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular/cli'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular/cli/plugins/karma')
+    ],
+    client:{
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      reports: [ 'html', 'lcovonly' ],
+      fixWebpackSourcePaths: true
+    },
+    angularCli: {
+      environment: 'dev'
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false
+  });
+};

+{
+  "name": "cloud-functions-angular-start",
+  "version": "0.0.0",
+  "license": "MIT",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build --prod",
+    "test": "ng test",
+    "lint": "ng lint",
+    "e2e": "ng e2e"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "^5.2.0",
+    "@angular/cdk": "^5.2.0",
+    "@angular/common": "^5.2.0",
+    "@angular/compiler": "^5.2.0",
+    "@angular/core": "^5.2.0",
+    "@angular/forms": "^5.2.0",
+    "@angular/http": "^5.2.0",
+    "@angular/material": "^5.2.0",
+    "@angular/platform-browser": "^5.2.0",
+    "@angular/platform-browser-dynamic": "^5.2.0",
+    "@angular/router": "^5.2.0",
+    "angularfire2": "^5.0.0-rc.6.0",
+    "core-js": "^2.4.1",
+    "firebase": "^4.12.1",
+    "rxjs": "^5.5.6",
+    "zone.js": "^0.8.19"
+  },
+  "devDependencies": {
+    "@angular/cli": "~1.7.4",
+    "@angular/compiler-cli": "^5.2.0",
+    "@angular/language-service": "^5.2.0",
+    "@types/jasmine": "~2.8.3",
+    "@types/jasminewd2": "~2.0.2",
+    "@types/node": "~6.0.60",
+    "codelyzer": "^4.0.1",
+    "jasmine-core": "~2.8.0",
+    "jasmine-spec-reporter": "~4.2.1",
+    "karma": "~2.0.0",
+    "karma-chrome-launcher": "~2.2.0",
+    "karma-coverage-istanbul-reporter": "^1.2.1",
+    "karma-jasmine": "~1.1.0",
+    "karma-jasmine-html-reporter": "^0.2.2",
+    "protractor": "~5.1.2",
+    "ts-node": "~4.1.0",
+    "tslint": "~5.9.1",
+    "typescript": "~2.5.3"
+  }
+}

+// Protractor configuration file, see link for more information
+// https://github.com/angular/protractor/blob/master/lib/config.ts
+
+const { SpecReporter } = require('jasmine-spec-reporter');
+
+exports.config = {
+  allScriptsTimeout: 11000,
+  specs: [
+    './e2e/**/*.e2e-spec.ts'
+  ],
+  capabilities: {
+    'browserName': 'chrome'
+  },
+  directConnect: true,
+  baseUrl: 'http://localhost:4200/',
+  framework: 'jasmine',
+  jasmineNodeOpts: {
+    showColors: true,
+    defaultTimeoutInterval: 30000,
+    print: function() {}
+  },
+  onPrepare() {
+    require('ts-node').register({
+      project: 'e2e/tsconfig.e2e.json'
+    });
+    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
+  }
+};

+/**
+ * Copyright 2017 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+main, #messages-card {
+  height: 100%;
+  padding-bottom: 0;
+}
+#messages-card-container {
+  height: calc(100% - 150px);
+  padding-bottom: 0;
+}
+#messages-card {
+  margin-top: 15px;
+}
+.mdl-layout__header-row span {
+  margin-left: 15px;
+  margin-top: 17px;
+}
+.mdl-grid {
+  max-width: 1024px;
+  margin: auto;
+}
+.material-icons {
+  font-size: 36px;
+  top: 8px;
+  position: relative;
+}
+.mdl-layout__header-row {
+  padding: 0;
+  margin: 0 auto;
+}
+.mdl-card__supporting-text {
+  width: auto;
+  height: 100%;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+#messages {
+  overflow-y: auto;
+  margin-bottom: 10px;
+  height: calc(100% - 80px);
+}
+#message-filler {
+  flex-grow: 1;
+}
+.message-container:first-of-type {
+  border-top-width: 0;
+}
+.message-container {
+  display: block;
+  margin-top: 10px;
+  border-top: 1px solid #f3f3f3;
+  padding-top: 10px;
+  /*opacity: 0;*/
+  transition: opacity 1s ease-in-out;
+}
+.message-container.visible {
+  opacity: 1;
+}
+.message-container .pic {
+  background-image: url('/assets/images/profile_placeholder.png');
+  background-repeat: no-repeat;
+  width: 30px;
+  height: 30px;
+  background-size: 30px;
+  border-radius: 20px;
+}
+.message-container .spacing {
+  display: table-cell;
+  vertical-align: top;
+}
+.message-container .message {
+  display: table-cell;
+  width: calc(100% - 40px);
+  padding: 5px 0 5px 10px;
+}
+.message-container .name {
+  display: inline-block;
+  width: 100%;
+  padding-left: 40px;
+  color: #bbb;
+  font-style: italic;
+  font-size: 12px;
+  box-sizing: border-box;
+}
+#message-form {
+  display: flex;
+  flex-direction: row;
+  width: calc(100% - 48px);
+  float: left;
+}
+#image-form {
+  display: flex;
+  flex-direction: row;
+  width: 48px;
+  float: right;
+}
+#message-form .mdl-textfield {
+  width: calc(100% - 100px);
+}
+#message-form button, #image-form button {
+  width: 100px;
+  margin: 15px 0 0 10px;
+}
+.mdl-card {
+  min-height: 0;
+}
+.mdl-card {
+  background: linear-gradient(white, #f9f9f9);
+  justify-content: space-between;
+}
+#user-container {
+  position: absolute;
+  display: flex;
+  flex-direction: row;
+  top: 22px;
+  width: 100%;
+  right: 0;
+  padding-left: 10px;
+  justify-content: flex-end;
+  padding-right: 10px;
+}
+#user-container #user-pic {
+  top: -3px;
+  position: relative;
+  display: inline-block;
+  background-image: url('/assets/images/profile_placeholder.png');
+  background-repeat: no-repeat;
+  width: 40px;
+  height: 40px;
+  background-size: 40px;
+  border-radius: 20px;
+}
+#user-container #user-name {
+  font-size: 16px;
+  line-height: 36px;
+  padding-right: 10px;
+  padding-left: 20px;
+}
+#image-form #submitImage {
+  width: auto;
+  padding: 0 6px 0 1px;
+  min-width: 0;
+}
+#image-form #submitImage .material-icons {
+  top: -1px;
+}
+.message img {
+  max-width: 300px;
+  max-height: 200px;
+}
+#mediaCapture {
+  display: none;
+}
+@media screen and (max-width: 610px) {
+  header {
+    height: 113px;
+    padding-bottom: 80px !important;
+  }
+  #user-container {
+    top: 72px;
+    background-color: rgb(3,155,229);
+    height: 38px;
+    padding-top: 3px;
+    padding-right: 2px;
+  }
+  #user-container #user-pic {
+    top: 2px;
+    width: 33px;
+    height: 33px;
+    background-size: 33px;
+  }
+}
+.mdl-textfield__label:after {
+  background-color: #0288D1;
+}
+.mdl-textfield--floating-label.is-focused .mdl-textfield__label {
+  color: #0288D1;
+}
+.mdl-button .material-icons {
+  top: -1px;
+  margin-right: 5px;
+}

+<div class="demo-layout mdl-layout mdl-js-layout mdl-layout--fixed-header">
+  <!-- Header section containing logo -->
+  <header class="mdl-layout__header mdl-color-text--white mdl-color--light-blue-700">
+    <div class="mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-grid">
+      <div class="mdl-layout__header-row mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-cell--12-col-desktop">
+        <h3><i class="material-icons">chat_bubble_outline</i> Friendly Chat</h3>
+      </div>
+      <div id="user-container">
+        <div *ngIf="currentUser" id="user-pic" [ngStyle]="profilePicStyles"></div>
+        <div *ngIf="currentUser" id="user-name">{{ (user | async)?.displayName }}</div>
+        <button *ngIf="currentUser" id="sign-out" (click)="logout()" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-color-text--white">
+          Sign-out
+        </button>
+        <button *ngIf="!currentUser" id="sign-in" (click)="login()" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-color-text--white">
+          <i class="material-icons">account_circle</i>Sign-in with Google
+        </button>
+      </div>
+    </div>
+  </header>
+
+  <main class="mdl-layout__content mdl-color--grey-100">
+    <div id="messages-card-container" class="mdl-cell mdl-cell--12-col mdl-grid">
+
+      <!-- Messages container -->
+      <div id="messages-card" class="mdl-card mdl-shadow--2dp mdl-cell mdl-cell--12-col mdl-cell--6-col-tablet mdl-cell--6-col-desktop">
+        <div class="mdl-card__supporting-text mdl-color-text--grey-600">
+          <div id="messages">
+            <span id="message-filler"></span>
+            <div class="message-container" *ngFor="let message of messages | async">
+              <div class="spacing">
+                <div class="pic" [style.background-image]="'url(' + message.photoUrl + ')'"></div>
+              </div>
+              <div class="message">
+                <span *ngIf="message.text" [style]="message.sentiment | stylize">{{ message.text }}</span>
+                <img *ngIf="message.imageUrl" [src]="message.imageUrl + (message.moderated ? '&amp;moderated=1' : '')">
+              </div>
+              <div class="name">{{ message.name }}</div>
+            </div>
+          </div>
+          <div *ngIf="topics"><em>Recent topics: {{ topics }}</em></div>
+          <form id="message-form" (submit)="saveMessage($event, box)">
+            <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+              <input #box class="mdl-textfield__input" type="text" id="message"
+                (keyup)="update(box.value)" (blur)="update(box.value)"
+                placeholder="Message...">
+            </div>
+            <button id="submit" [disabled]="!value" type="submit" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
+              Send
+            </button>
+          </form>
+          <form id="image-form" action="#">
+            <input id="mediaCapture" type="file" accept="image/*,capture=camera" (change)="saveImageMessage($event)">
+            <button id="submitImage" title="Add an image" (click)="onImageClick($event)"
+              class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-color--amber-400 mdl-color-text--white">
+              <i class="material-icons">image</i>
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  </main>
+</div>

+/**
+ * Copyright 2017 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { TestBed, async } from '@angular/core/testing';
+
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        AppComponent
+      ],
+    }).compileComponents();
+  }));
+
+  it('should create the app', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app).toBeTruthy();
+  }));
+
+  it(`should have as title 'app works!'`, async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app.title).toEqual('app works!');
+  }));
+
+  it('should render title in a h1 tag', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.debugElement.nativeElement;
+    expect(compiled.querySelector('h1').textContent).toContain('app works!');
+  }));
+});

+/**
+ * Copyright 2017 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { Component, Inject } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';
+import { AngularFireAuth } from 'angularfire2/auth';
+import { MatSnackBar } from '@angular/material';
+import * as firebase from 'firebase';
+
+const LOADING_IMAGE_URL = 'https://www.google.com/images/spin-32.gif';
+const PROFILE_PLACEHOLDER_IMAGE_URL = '/assets/images/profile_placeholder.png';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+  user: Observable<firebase.User>;
+  currentUser: firebase.User;
+  messages: Observable<any[]>;
+  profilePicStyles: {};
+  topics = '';
+  value = '';
+
+  constructor(public db: AngularFireDatabase, public afAuth: AngularFireAuth, public snackBar: MatSnackBar) {
+    this.user = afAuth.authState;
+    this.user.subscribe((user: firebase.User) => {
+      console.log(user);
+      this.currentUser = user;
+
+      if (user) { // User is signed in!
+        this.profilePicStyles = {
+          'background-image':  `url(${this.currentUser.photoURL})`
+        };
+
+        // We load currently existing chat messages.
+        this.messages = this.db.list<any>('/messages', ref => ref.limitToLast(12)).valueChanges();
+        this.messages.subscribe((messages) => {
+          // Calculate list of recently discussed topics
+          const topicsMap = {};
+          const topics = [];
+          let hasEntities = false;
+          messages.forEach((message) => {
+            if (message.entities) {
+              for (let entity of message.entities) {
+                if (!topicsMap.hasOwnProperty(entity.name)) {
+                  topicsMap[entity.name] = 0
+                }
+                topicsMap[entity.name] += entity.salience;
+                hasEntities = true;
+              }
+            }
+          });
+          if (hasEntities) {
+            for (let name in topicsMap) {
+              topics.push({ name, score: topicsMap[name] });
+            }
+            topics.sort((a, b) => b.score - a.score);
+            this.topics = topics.map((topic) => topic.name).join(', ');
+          }
+
+          // Make sure new message scroll into view
+          setTimeout(() => {
+            const messageList = document.getElementById('messages');
+            messageList.scrollTop = messageList.scrollHeight;
+            document.getElementById('message').focus();
+          }, 500);
+        });
+
+        // We save the Firebase Messaging Device token and enable notifications.
+        this.saveMessagingDeviceToken();
+      } else { // User is signed out!
+        this.profilePicStyles = {
+          'background-image':  PROFILE_PLACEHOLDER_IMAGE_URL
+        };
+        this.topics = '';
+      }
+    });
+  }
+
+  login() {
+    this.afAuth.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider());
+  }
+
+  logout() {
+    this.afAuth.auth.signOut();
+  }
+
+  // TODO: Refactor into text message form component
+  update(value: string) {
+    this.value = value;
+  }
+
+  // Returns true if user is signed-in. Otherwise false and displays a message.
+  checkSignedInWithMessage() {
+    // Return true if the user is signed in Firebase
+    if (this.currentUser) {
+      return true;
+    }
+
+    this.snackBar
+      .open('You must sign-in first', 'Sign in', {
+        duration: 5000
+      })
+      .onAction()
+      .subscribe(() => this.login());
+
+    return false;
+  };
+
+  // TODO: Refactor into text message form component
+  saveMessage(event: any, el: HTMLInputElement) {
+    event.preventDefault();
+
+    if (this.value && this.checkSignedInWithMessage()) {
+      // Add a new message entry to the Firebase Database.
+      const messages = this.db.list('/messages');
+      messages.push({
+        name: this.currentUser.displayName,
+        text: this.value,
+        photoUrl: this.currentUser.photoURL || PROFILE_PLACEHOLDER_IMAGE_URL
+      }).then(() => {
+        // Clear message text field and SEND button state.
+        el.value = '';
+      }, (err) => {
+        this.snackBar.open('Error writing new message to Firebase Database.', null, {
+          duration: 5000
+        });
+        console.error(err);
+      });
+    }
+  }
+
+  // TODO: Refactor into image message form component
+  saveImageMessage(event: any) {
+    event.preventDefault();
+    const file = event.target.files[0];
+
+    // Clear the selection in the file picker input.
+    const imageForm = <HTMLFormElement>document.getElementById('image-form');
+    imageForm.reset();
+
+    // Check if the file is an image.
+    if (!file.type.match('image.*')) {
+      this.snackBar.open('You can only share images', null, {
+        duration: 5000
+      });
+      return;
+    }
+
+    // Check if the user is signed-in
+    if (this.checkSignedInWithMessage()) {
+
+      // We add a message with a loading icon that will get updated with the shared image.
+      const messages = this.db.list('/messages');
+      messages.push({
+        name: this.currentUser.displayName,
+        imageUrl: LOADING_IMAGE_URL,
+        photoUrl: this.currentUser.photoURL || PROFILE_PLACEHOLDER_IMAGE_URL
+      }).then((data) => {
+        // Upload the image to Cloud Storage.
+        const filePath = `${this.currentUser.uid}/${data.key}/${file.name}`;
+        return firebase.storage().ref(filePath).put(file)
+          .then((snapshot) => {
+            // Get the file's Storage URI and update the chat message placeholder.
+            const fullPath = snapshot.metadata.fullPath;
+            const imageUrl = firebase.storage().ref(fullPath).toString();
+            return firebase.storage().refFromURL(imageUrl).getMetadata();
+          }).then((metadata) => {
+            // TODO: Instead of saving the download URL, save the GCS URI and
+            //       dynamically load the download URL when displaying the image
+            //       message.
+            return data.update({
+              imageUrl: metadata.downloadURLs[0]
+            });
+          });
+      }).then(console.log, (err) => {
+        this.snackBar.open('There was an error uploading a file to Cloud Storage.', null, {
+          duration: 5000
+        });
+        console.error(err);
+      });
+    }
+  }
+
+  // TODO: Refactor into image message form component
+  onImageClick(event: any) {
+    event.preventDefault();
+    document.getElementById('mediaCapture').click();
+  }
+
+  // Saves the messaging device token to the datastore.
+  saveMessagingDeviceToken() {
+    return firebase.messaging().getToken()
+      .then((currentToken) => {
+        if (currentToken) {
+          console.log('Got FCM device token:', currentToken);
+          // Save the Device Token to the datastore.
+          firebase.database()
+            .ref('/fcmTokens')
+            .child(currentToken)
+            .set(this.currentUser.uid);
+        } else {
+          // Need to request permissions to show notifications.
+          return this.requestNotificationsPermissions();
+        }
+      }).catch((err) => {
+        this.snackBar.open('Unable to get messaging token.', null, {
+          duration: 5000
+        });
+        console.error(err);
+      });
+  };
+
+  // Requests permissions to show notifications.
+  requestNotificationsPermissions() {
+    console.log('Requesting notifications permission...');
+    return firebase.messaging().requestPermission()
+      // Notification permission granted.
+      .then(() => this.saveMessagingDeviceToken())
+      .catch((err) => {
+        this.snackBar.open('Unable to get permission to notify.', null, {
+          duration: 5000
+        });
+        console.error(err);
+      });
+  };
+}

+/**
+ * Copyright 2017 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { HttpModule } from '@angular/http';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
+import { AngularFireModule } from 'angularfire2';
+import { AngularFireDatabaseModule } from 'angularfire2/database';
+import { AngularFireAuthModule } from 'angularfire2/auth';
+import { MatSnackBarModule } from '@angular/material';
+
+import { AppComponent } from './app.component';
+import { StylizePipe } from './stylize.pipe';
+import { environment } from '../environments/environment';
+
+const configErrMsg = `You have not configured and imported the Firebase SDK.
+Make sure you go through the codelab setup instructions.`;
+
+const bucketErrMsg = `Your Firebase Storage bucket has not been enabled. Sorry
+about that. This is actually a Firebase bug that occurs rarely. Please go and
+re-generate the Firebase initialization snippet (step 4 of the codelab) and make
+sure the storageBucket attribute is not empty. You may also need to visit the
+Storage tab and paste the name of your bucket which is displayed there.`;
+
+if (!environment.firebase) {
+  if (!environment.firebase.apiKey) {
+    window.alert(configErrMsg);
+  } else if (environment.firebase.storageBucket === '') {
+    window.alert(bucketErrMsg);
+  }
+}
+
+@NgModule({
+  declarations: [
+    AppComponent,
+    StylizePipe
+  ],
+  imports: [
+    BrowserModule,
+    FormsModule,
+    HttpModule,
+    BrowserAnimationsModule,
+    MatSnackBarModule,
+    AngularFireModule.initializeApp(environment.firebase),
+    AngularFireDatabaseModule,
+    AngularFireAuthModule
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }

+import { Pipe, PipeTransform } from '@angular/core';
+import { DomSanitizer, SafeStyle } from '@angular/platform-browser';
+
+interface Sentiment {
+  score: number,
+  magnitude: number
+}
+
+/*
+ * Styles a message based on its sentiment.
+ */
+@Pipe({name: 'stylize'})
+export class StylizePipe implements PipeTransform {
+  constructor(private sanitizer: DomSanitizer) {}
+
+  transform(sentiment: Sentiment): string|SafeStyle {
+    if (!sentiment) {
+      return '';
+    }
+
+    let style = '';
+
+    // Change font based on positive/negative score.
+    if (sentiment.score >= 0.9) {
+      style += `font-family: 'Bonbon', 'Roboto', 'Helvetica', sans-serif;`;
+    } else if (sentiment.score >= 0.5) {
+      style += `font-family: 'Crafty Girls', 'Roboto', 'Helvetica', sans-serif;`;
+    } else if (sentiment.score <= -0.9) {
+      style += `font-family: 'Creepster', 'Roboto', 'Helvetica', sans-serif;`;
+    } else if (sentiment.score <= -0.5) {
+      style += `font-family: 'Julee', 'Roboto', 'Helvetica', sans-serif;`;
+    }
+
+    // Make bold if the magnitude is greater than 1.
+    if (sentiment.magnitude >= 1) {
+      style += `font-weight: bold;`;
+    }
+
+    return style ? this.sanitizer.bypassSecurityTrustStyle(style) : '';
+  }
+}

+{
+  "name": "Friendly Chat",
+  "short_name": "Friendly Chat",
+  "start_url": "/index.html",
+  "display": "standalone",
+  "orientation": "portrait"
+}

+{
+  "version": "1.0.0",
+  "name": "Friendly Chat",
+  "launch_path": "/index.html",
+  "description": "Chat with friends using Firebase 2.0",
+  "developer": {
+    "name": "Google inc.",
+    "url": "https://firebase.google.com"
+  },
+  "installs_allowed_from": [
+    "*"
+  ],
+  "default_locale": "en",
+  "permissions": {
+  },
+  "locales": {
+    "en": {
+      "name": "Friendly Chat",
+      "description": "Chat with friends using Firebase 2.0"
+    }
+  }
+}

+/**
+ * Copyright 2017 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export const environment = {
+  production: true,
+  firebase: {
+    // ***********************************************************************************************************************
+    // * TODO(DEVELOPER): Update values according to: Firebase Console > Overview > Add Firebase to your web app. *
+    // ***********************************************************************************************************************
+    apiKey: '',
+    authDomain: '',
+    databaseURL: '',
+    projectId: '',
+    storageBucket: '',
+    messagingSenderId: ''
+  }
+};

+/**
+ * Copyright 2017 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+// The file contents for the current environment will overwrite these during build.
+// The build system defaults to the dev environment which uses `environment.ts`, but if you do
+// `ng build --env=prod` then `environment.prod.ts` will be used instead.
+// The list of which env maps to which file can be found in `.angular-cli.json`.
+
+export const environment = {
+  production: false,
+  firebase: {
+    // ***********************************************************************************************************************
+    // * TODO(DEVELOPER): Update values according to: Firebase Console > Overview > Add Firebase to your web app. *
+    // ***********************************************************************************************************************
+    apiKey: '',
+    authDomain: '',
+    databaseURL: '',
+    projectId: '',
+    storageBucket: '',
+    messagingSenderId: ''
+  }
+};

+importScripts('https://www.gstatic.com/firebasejs/3.6.6/firebase-app.js');
+importScripts('https://www.gstatic.com/firebasejs/3.6.6/firebase-messaging.js');
+
+// Initialize the Firebase app in the service worker by passing in the
+// messagingSenderId.
+firebase.initializeApp({
+  // TODO add your messagingSenderId
+  messagingSenderId: ''
+});
+var messaging = firebase.messaging();

+<!doctype html>
+<!--
+  Copyright 2017 Google Inc. All rights reserved.
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+      https://www.apache.org/licenses/LICENSE-2.0
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License
+-->
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="description" content="Learn how to use the Firebase platform on the Web">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Friendly Chat</title>
+
+  <!-- Disable tap highlight on IE -->
+  <meta name="msapplication-tap-highlight" content="no">
+
+  <!-- Web Application Manifest -->
+  <link rel="manifest" href="assets/manifest.json">
+
+  <!-- Add to homescreen for Chrome on Android -->
+  <meta name="mobile-web-app-capable" content="yes">
+  <meta name="application-name" content="Friendly Chat">
+  <meta name="theme-color" content="#303F9F">
+
+  <!-- Add to homescreen for Safari on iOS -->
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+  <meta name="apple-mobile-web-app-title" content="Friendly Chat">
+  <meta name="apple-mobile-web-app-status-bar-style" content="#303F9F">
+
+  <!-- Tile icon for Win8 -->
+  <meta name="msapplication-TileColor" content="#3372DF">
+  <meta name="msapplication-navbutton-color" content="#303F9F">
+
+  <!-- Material Design Lite -->
+  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+  <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.orange-indigo.min.css">
+
+  <!-- App Styling -->
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Creepster:regular,bold|Julee:regular,bold|Crafty+Girls:regular,bold|Bonbon:regular,bold|Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en">
+
+  <base href="/">
+
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root>Loading...</app-root>
+</body>
+</html>

+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule)
+  .catch(err => console.log(err));

+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
+ * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/** IE9, IE10 and IE11 requires all of the following polyfills. **/
+// import 'core-js/es6/symbol';
+// import 'core-js/es6/object';
+// import 'core-js/es6/function';
+// import 'core-js/es6/parse-int';
+// import 'core-js/es6/parse-float';
+// import 'core-js/es6/number';
+// import 'core-js/es6/math';
+// import 'core-js/es6/string';
+// import 'core-js/es6/date';
+// import 'core-js/es6/array';
+// import 'core-js/es6/regexp';
+// import 'core-js/es6/map';
+// import 'core-js/es6/weak-map';
+// import 'core-js/es6/set';
+
+/** IE10 and IE11 requires the following for NgClass support on SVG elements */
+// import 'classlist.js';  // Run `npm install --save classlist.js`.
+
+/** IE10 and IE11 requires the following for the Reflect API. */
+// import 'core-js/es6/reflect';
+
+
+/** Evergreen browsers require these. **/
+// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
+import 'core-js/es7/reflect';
+
+
+/**
+ * Required to support Web Animations `@angular/platform-browser/animations`.
+ * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
+ **/
+// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
+
+/**
+ * By default, zone.js will patch all possible macroTask and DomEvents
+ * user can disable parts of macroTask/DomEvents patch by setting following flags
+ */
+
+ // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+ // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+ // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+
+ /*
+ * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
+ * with the following flag, it will bypass `zone.js` patch for IE/Edge
+ */
+// (window as any).__Zone_enable_cross_context_check = true;
+
+/***************************************************************************************************
+ * Zone JS is required by default for Angular itself.
+ */
+import 'zone.js/dist/zone';  // Included with Angular CLI.
+
+
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */

+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+html, body {
+  font-family: 'Roboto', 'Helvetica', sans-serif;
+}
+.cdk-visually-hidden {
+  display: none;
+}

+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: any;
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);

+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/app",
+    "baseUrl": "./",
+    "module": "es2015",
+    "types": []
+  },
+  "exclude": [
+    "test.ts",
+    "**/*.spec.ts"
+  ]
+}

+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/spec",
+    "baseUrl": "./",
+    "module": "commonjs",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}

+/* SystemJS module definition */
+declare var module: NodeModule;
+interface NodeModule {
+  id: string;
+}

+service firebase.storage {
+  match /b/{bucket}/o {
+    match /{userId}/{postId}/{fileName} {
+      allow write: if request.auth.uid == userId;
+      allow read;
+    }
+  }
+}

+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "outDir": "./dist/out-tsc",
+    "sourceMap": true,
+    "declaration": false,
+    "moduleResolution": "node",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "target": "es5",
+    "typeRoots": [
+      "node_modules/@types"
+    ],
+    "lib": [
+      "es2017",
+      "dom"
+    ]
+  }
+}

+{
+  "rulesDirectory": [
+    "node_modules/codelyzer"
+  ],
+  "rules": {
+    "arrow-return-shorthand": true,
+    "callable-types": true,
+    "class-name": true,
+    "comment-format": [
+      true,
+      "check-space"
+    ],
+    "curly": true,
+    "deprecation": {
+      "severity": "warn"
+    },
+    "eofline": true,
+    "forin": true,
+    "import-blacklist": [
+      true,
+      "rxjs",
+      "rxjs/Rx"
+    ],
+    "import-spacing": true,
+    "indent": [
+      true,
+      "spaces"
+    ],
+    "interface-over-type-literal": true,
+    "label-position": true,
+    "max-line-length": [
+      true,
+      140
+    ],
+    "member-access": false,
+    "member-ordering": [
+      true,
+      {
+        "order": [
+          "static-field",
+          "instance-field",
+          "static-method",
+          "instance-method"
+        ]
+      }
+    ],
+    "no-arg": true,
+    "no-bitwise": true,
+    "no-console": [
+      true,
+      "debug",
+      "info",
+      "time",
+      "timeEnd",
+      "trace"
+    ],
+    "no-construct": true,
+    "no-debugger": true,
+    "no-duplicate-super": true,
+    "no-empty": false,
+    "no-empty-interface": true,
+    "no-eval": true,
+    "no-inferrable-types": [
+      true,
+      "ignore-params"
+    ],
+    "no-misused-new": true,
+    "no-non-null-assertion": true,
+    "no-shadowed-variable": true,
+    "no-string-literal": false,
+    "no-string-throw": true,
+    "no-switch-case-fall-through": true,
+    "no-trailing-whitespace": true,
+    "no-unnecessary-initializer": true,
+    "no-unused-expression": true,
+    "no-use-before-declare": true,
+    "no-var-keyword": true,
+    "object-literal-sort-keys": false,
+    "one-line": [
+      true,
+      "check-open-brace",
+      "check-catch",
+      "check-else",
+      "check-whitespace"
+    ],
+    "prefer-const": true,
+    "quotemark": [
+      true,
+      "single"
+    ],
+    "radix": true,
+    "semicolon": [
+      true,
+      "always"
+    ],
+    "triple-equals": [
+      true,
+      "allow-null-check"
+    ],
+    "typedef-whitespace": [
+      true,
+      {
+        "call-signature": "nospace",
+        "index-signature": "nospace",
+        "parameter": "nospace",
+        "property-declaration": "nospace",
+        "variable-declaration": "nospace"
+      }
+    ],
+    "unified-signatures": true,
+    "variable-name": false,
+    "whitespace": [
+      true,
+      "check-branch",
+      "check-decl",
+      "check-operator",
+      "check-separator",
+      "check-type"
+    ],
+    "directive-selector": [
+      true,
+      "attribute",
+      "app",
+      "camelCase"
+    ],
+    "component-selector": [
+      true,
+      "element",
+      "app",
+      "kebab-case"
+    ],
+    "no-output-on-prefix": true,
+    "use-input-property-decorator": true,
+    "use-output-property-decorator": true,
+    "use-host-property-decorator": true,
+    "no-input-rename": true,
+    "no-output-rename": true,
+    "use-life-cycle-interface": true,
+    "use-pipe-transform-interface": true,
+    "component-class-suffix": true,
+    "directive-class-suffix": true
+  }
+}

+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "project": {
+    "name": "cloud-functions-angular-start"
+  },
+  "apps": [
+    {
+      "root": "src",
+      "outDir": "dist",
+      "assets": [
+        "assets",
+        "favicon.ico",
+        "firebase-messaging-sw.js"
+      ],
+      "index": "index.html",
+      "main": "main.ts",
+      "polyfills": "polyfills.ts",
+      "test": "test.ts",
+      "tsconfig": "tsconfig.app.json",
+      "testTsconfig": "tsconfig.spec.json",
+      "prefix": "app",
+      "styles": [
+        "styles.css"
+      ],
+      "scripts": [],
+      "environmentSource": "environments/environment.ts",
+      "environments": {
+        "dev": "environments/environment.ts",
+        "prod": "environments/environment.prod.ts"
+      }
+    }
+  ],
+  "e2e": {
+    "protractor": {
+      "config": "./protractor.conf.js"
+    }
+  },
+  "lint": [
+    {
+      "project": "src/tsconfig.app.json",
+      "exclude": "**/node_modules/**"
+    },
+    {
+      "project": "src/tsconfig.spec.json",
+      "exclude": "**/node_modules/**"
+    },
+    {
+      "project": "e2e/tsconfig.e2e.json",
+      "exclude": "**/node_modules/**"
+    }
+  ],
+  "test": {
+    "karma": {
+      "config": "./karma.conf.js"
+    }
+  },
+  "defaults": {
+    "styleExt": "css",
+    "component": {}
+  }
+}

+# Editor configuration, see http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

+{}
\ No newline at end of file

+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist
+/dist-server
+/tmp
+/out-tsc
+
+# dependencies
+/node_modules
+/functions/node_modules
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
+yarn-error.log
+testem.log
+/typings
+
+# e2e
+/e2e/*.js
+/e2e/*.map
+
+# System Files
+.DS_Store
+Thumbs.db

+# Firebase SDK for Cloud Functions (Angular) Codelab - Start code
+
+This folder contains the start code of the [Firebase SDK for Cloud Functions (Angular) Codelab](https://codelabs.developers.google.com/codelabs/firebase-cloud-functions-angular/).
+
+If you'd like to jump directly to the end and see the finished code head to the [cloud-functions-angular](../cloud-functions-angular) directory.
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.0.0.
+
+# Running locally
+
+## Development server
+
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
+
+# Deploying
+
+Run `firebase deploy` to deploy hosting, database, and functions. Run
+`firebase deploy --except` to only deploy hosting and database.

+{
+  "rules": {
+    "messages": {
+      ".read": "auth !== null",
+      ".write": "auth !== null"
+    },
+    "fcmTokens": {
+      "$token": {
+        ".read": "data.val() === auth.uid", // Users can only read their own device tokens
+        ".write": "!data.exists() || data.val() === auth.uid", // Users can only write to their own device tokens
+        ".validate": "newData.val() === auth.uid" // value has to be the UID of the user
+      }
+    }
+  }
+}

+import { CloudFunctionsAngularStartPage } from './app.po';
+
+describe('cloud-functions-angular-start App', () => {
+  let page: CloudFunctionsAngularStartPage;
+
+  beforeEach(() => {
+    page = new CloudFunctionsAngularStartPage();
+  });
+
+  it('should display welcome message', () => {
+    page.navigateTo();
+    expect(page.getParagraphText()).toEqual('Welcome to app!');
+  });
+});

+import { browser, element, by } from 'protractor';
+
+export class CloudFunctionsAngularStartPage {
+  navigateTo() {
+    return browser.get('/');
+  }
+
+  getParagraphText() {
+    return element(by.css('app-root h1')).getText();
+  }
+}

+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/e2e",
+    "baseUrl": "./",
+    "module": "commonjs",
+    "target": "es5",
+    "types":[
+      "jasmine",
+      "jasminewd2",
+      "node"
+    ]
+  }
+}

+{
+  "database": {
+    "rules": "database.rules.json"
+  },
+  "hosting": {
+    "public": "dist",
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**"
+    ],
+    "rewrites": [
+      {
+        "source": "**",
+        "destination": "/index.html"
+      }
+    ]
+  },
+  "storage": {
+    "rules": "storage.rules"
+  }
+}

+/**
+ * Copyright 2017 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// Import the Firebase SDK for Google Cloud Functions.
+const functions = require('firebase-functions');
+// Import and initialize the Firebase Admin SDK.
+const admin = require('firebase-admin');
+admin.initializeApp(functions.config().firebase);
+
+const Storage = require('@google-cloud/storage');
+const vision = require('@google-cloud/vision');
+const exec = require('child-process-promise').exec;
+
+const visionClient = new vision.ImageAnnotatorClient();
+const storageClient = new Storage();
+
+const language = require('@google-cloud/language');
+const languageClient = new language.LanguageServiceClient();
+
+
+// Adds a message that welcomes new users into the chat.
+exports.addWelcomeMessages = functions.auth.user().onCreate((user) => {
+  console.log('A new user signed in for the first time.');
+  const fullName = user.displayName || 'Anonymous';
+
+  // Saves the new welcome message into the database
+  // which then displays it in the FriendlyChat clients.
+  return admin.database().ref('messages').push({
+    name: 'Firebase Bot',
+    photoUrl: '/assets/images/firebase-logo.png', // Firebase logo
+    text: `${fullName} signed in for the first time! Welcome!`
+  });
+});
+
+
+// Blurs the given image located in the given bucket using ImageMagick.
+function blurImage(object) {
+  const filePath = object.name;
+  const bucket = storageClient.bucket(object.bucket);
+  const fileName = filePath.split('/').pop();
+  const tempLocalFile = `/tmp/${fileName}`;
+  const messageId = filePath.split('/')[1];
+
+  // Download file from bucket.
+  return bucket
+    .file(filePath)
+    .download({ destination: tempLocalFile })
+    .then(() => {
+      console.log('Image has been downloaded to', tempLocalFile);
+      // Blur the image using ImageMagick.
+      return exec(`convert ${tempLocalFile} -channel RGBA -blur 0x24 ${tempLocalFile}`);
+    })
+    .then(() => {
+      console.log('Image has been blurred');
+      // Uploading the Blurred image back into the bucket.
+      return bucket.upload(tempLocalFile, { destination: filePath });
+    })
+    .then(() => {
+      console.log('Blurred image has been uploaded to', filePath);
+      // Indicate that the message has been moderated.
+      return admin.database().ref(`/messages/${messageId}`).update({ moderated: true });
+    })
+    .then(() => {
+      console.log('Marked the image as moderated in the database.');
+    });
+}
+
+// Blurs uploaded images that are flagged as Adult or Violence.
+exports.blurOffensiveImages = functions.storage.object().onFinalize((object) => {
+  // Exit if this is a deletion or a deploy event.
+  if (object.resourceState === 'not_exists') {
+    return console.log('This is a deletion event.');
+  } else if (!object.name) {
+    return console.log('This is a deploy event.');
+  }
+
+  const messageId = object.name.split('/')[1];
+
+  return admin.database().ref(`/messages/${messageId}/moderated`).once('value')
+    .then((snapshot) => {
+      // The image has already been moderated.
+      if (snapshot.val()) {
+        return;
+      }
+
+      // Check the image content using the Cloud Vision API.
+      return visionClient.safeSearchDetection(`gs://${object.bucket}/${object.name}`);
+    })
+    .then((results) => {
+      if (!results) {
+        return;
+      }
+      const detections = results[0].safeSearchAnnotation;
+      if (detections.adult || detections.violence) {
+        console.log('The image', object.name, 'has been detected as inappropriate.');
+        return blurImage(object);
+      } else {
+        console.log('The image', object.name, ' has been detected as OK.');
+      }
+    });
+});
+
+
+// Sends a notifications to all users when a new message is posted.
+exports.sendNotifications = functions.database.ref('/messages/{messageId}').onWrite((change, context) => {
+  // Only send a notification when a message has been created.
+  if (change.before.val()) {
+    return;
+  }
+
+  // Notification details.
+  const original = change.after.val();
+  const text = original.text;
+  const payload = {
+    notification: {
+      title: `${original.name} posted ${text ? 'a message' : 'an image'}`,
+      body: text ? (text.length <= 100 ? text : text.substring(0, 97) + '...') : '',
+      icon: original.photoUrl || '/assets/images/profile_placeholder.png',
+      click_action: `https://${functions.config().firebase.authDomain}`
+    }
+  };
+
+  // Get the list of device tokens.
+  return admin.database().ref('fcmTokens').once('value').then(allTokens => {
+    if (allTokens.val()) {
+      // Listing all tokens.
+      const tokens = Object.keys(allTokens.val());
+
+      // Send notifications to all tokens.
+      return admin.messaging().sendToDevice(tokens, payload).then(response => {
+        // For each message check if there was an error.
+        const tokensToRemove = [];
+        response.results.forEach((result, index) => {
+          const error = result.error;
+          if (error) {
+            console.error('Failure sending notification to', tokens[index], error);
+            // Cleanup the tokens who are not registered anymore.
+            if (error.code === 'messaging/invalid-registration-token' ||
+                error.code === 'messaging/registration-token-not-registered') {
+              tokensToRemove.push(allTokens.ref.child(tokens[index]).remove());
+            }
+          }
+        });
+        return Promise.all(tokensToRemove);
+      });
+    }
+  });
+});
+
+// Annotates messages using the Cloud Natural Language API
+exports.annotateMessages = functions.database.ref('/messages/{messageId}').onWrite((change, context) => {
+  const messageId = context.params.messageId;
+
+  // Only annotate new messages.
+  if (change.before.exists()) {
+    return null;
+  }
+
+  // Annotation arguments.
+  const original = change.after.val();
+  const request = {
+    document: {
+      content: original.text,
+      type: 'PLAIN_TEXT'
+    },
+    features: {
+      extractDocumentSentiment: true,
+      extractEntities: true
+    }
+  };
+
+  console.log('Annotating new message.');
+
+  // Detect the sentiment and entities of the new message.
+  return languageClient.annotateText(request)
+    .then((result) => {
+      console.log('Saving annotations.');
+
+      // Update the message with the results.
+      return admin.database().ref(`/messages/${messageId}`).update({
+        sentiment: result[0].documentSentiment,
+        entities: result[0].entities.map((entity) => {
+          return {
+            name: entity.name,
+            salience: entity.salience
+          };
+        })
+      });
+    });
+});
+

+{
+  "name": "functions",
+  "description": "Cloud Functions for Firebase",
+  "dependencies": {
+    "@google-cloud/language": "^1.2.0",
+    "@google-cloud/storage": "^1.6.0",
+    "@google-cloud/vision": "^0.19.0",
+    "child-process-promise": "^2.2.1",
+    "firebase-admin": "~5.12.0",
+    "firebase-functions": "^1.0.1"
+  },
+  "scripts": {
+    "serve": "firebase serve --only functions",
+    "shell": "firebase functions:shell",
+    "start": "npm run shell",
+    "deploy": "firebase deploy --only functions",
+    "logs": "firebase functions:log"
+  },
+  "private": true
+}

+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/0.13/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular/cli'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular/cli/plugins/karma')
+    ],
+    client:{
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      reports: [ 'html', 'lcovonly' ],
+      fixWebpackSourcePaths: true
+    },
+    angularCli: {
+      environment: 'dev'
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false
+  });
+};

+{
+  "name": "cloud-functions-angular-start",
+  "version": "0.0.0",
+  "license": "MIT",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build --prod",
+    "test": "ng test",
+    "lint": "ng lint",
+    "e2e": "ng e2e"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "^5.2.0",
+    "@angular/cdk": "^5.2.0",
+    "@angular/common": "^5.2.0",
+    "@angular/compiler": "^5.2.0",
+    "@angular/core": "^5.2.0",
+    "@angular/forms": "^5.2.0",
+    "@angular/http": "^5.2.0",
+    "@angular/material": "^5.2.0",
+    "@angular/platform-browser": "^5.2.0",
+    "@angular/platform-browser-dynamic": "^5.2.0",
+    "@angular/router": "^5.2.0",
+    "angularfire2": "^5.0.0-rc.6.0",
+    "core-js": "^2.4.1",
+    "firebase": "^4.12.1",
+    "rxjs": "^5.5.6",
+    "zone.js": "^0.8.19"
+  },
+  "devDependencies": {
+    "@angular/cli": "~1.7.4",
+    "@angular/compiler-cli": "^5.2.0",
+    "@angular/language-service": "^5.2.0",
+    "@types/jasmine": "~2.8.3",
+    "@types/jasminewd2": "~2.0.2",
+    "@types/node": "~6.0.60",
+    "codelyzer": "^4.0.1",
+    "jasmine-core": "~2.8.0",
+    "jasmine-spec-reporter": "~4.2.1",
+    "karma": "~2.0.0",
+    "karma-chrome-launcher": "~2.2.0",
+    "karma-coverage-istanbul-reporter": "^1.2.1",
+    "karma-jasmine": "~1.1.0",
+    "karma-jasmine-html-reporter": "^0.2.2",
+    "protractor": "~5.1.2",
+    "ts-node": "~4.1.0",
+    "tslint": "~5.9.1",
+    "typescript": "~2.5.3"
+  }
+}

+// Protractor configuration file, see link for more information
+// https://github.com/angular/protractor/blob/master/lib/config.ts
+
+const { SpecReporter } = require('jasmine-spec-reporter');
+
+exports.config = {
+  allScriptsTimeout: 11000,
+  specs: [
+    './e2e/**/*.e2e-spec.ts'
+  ],
+  capabilities: {
+    'browserName': 'chrome'
+  },
+  directConnect: true,
+  baseUrl: 'http://localhost:4200/',
+  framework: 'jasmine',
+  jasmineNodeOpts: {
+    showColors: true,
+    defaultTimeoutInterval: 30000,
+    print: function() {}
+  },
+  onPrepare() {
+    require('ts-node').register({
+      project: 'e2e/tsconfig.e2e.json'
+    });
+    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
+  }
+};

+/**
+ * Copyright 2017 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+main, #messages-card {
+  height: 100%;
+  padding-bottom: 0;
+}
+#messages-card-container {
+  height: calc(100% - 150px);
+  padding-bottom: 0;
+}
+#messages-card {
+  margin-top: 15px;
+}
+.mdl-layout__header-row span {
+  margin-left: 15px;
+  margin-top: 17px;
+}
+.mdl-grid {
+  max-width: 1024px;
+  margin: auto;
+}
+.material-icons {
+  font-size: 36px;
+  top: 8px;
+  position: relative;
+}
+.mdl-layout__header-row {
+  padding: 0;
+  margin: 0 auto;
+}
+.mdl-card__supporting-text {
+  width: auto;
+  height: 100%;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+#messages {
+  overflow-y: auto;
+  margin-bottom: 10px;
+  height: calc(100% - 80px);
+}
+#message-filler {
+  flex-grow: 1;
+}
+.message-container:first-of-type {
+  border-top-width: 0;
+}
+.message-container {
+  display: block;
+  margin-top: 10px;
+  border-top: 1px solid #f3f3f3;
+  padding-top: 10px;
+  /*opacity: 0;*/
+  transition: opacity 1s ease-in-out;
+}
+.message-container.visible {
+  opacity: 1;
+}
+.message-container .pic {
+  background-image: url('/assets/images/profile_placeholder.png');
+  background-repeat: no-repeat;
+  width: 30px;
+  height: 30px;
+  background-size: 30px;
+  border-radius: 20px;
+}
+.message-container .spacing {
+  display: table-cell;
+  vertical-align: top;
+}
+.message-container .message {
+  display: table-cell;
+  width: calc(100% - 40px);
+  padding: 5px 0 5px 10px;
+}
+.message-container .name {
+  display: inline-block;
+  width: 100%;
+  padding-left: 40px;
+  color: #bbb;
+  font-style: italic;
+  font-size: 12px;
+  box-sizing: border-box;
+}
+#message-form {
+  display: flex;
+  flex-direction: row;
+  width: calc(100% - 48px);
+  float: left;
+}
+#image-form {
+  display: flex;
+  flex-direction: row;
+  width: 48px;
+  float: right;
+}
+#message-form .mdl-textfield {
+  width: calc(100% - 100px);
+}
+#message-form button, #image-form button {
+  width: 100px;
+  margin: 15px 0 0 10px;
+}
+.mdl-card {
+  min-height: 0;
+}
+.mdl-card {
+  background: linear-gradient(white, #f9f9f9);
+  justify-content: space-between;
+}
+#user-container {
+  position: absolute;
+  display: flex;
+  flex-direction: row;
+  top: 22px;
+  width: 100%;
+  right: 0;
+  padding-left: 10px;
+  justify-content: flex-end;
+  padding-right: 10px;
+}
+#user-container #user-pic {
+  top: -3px;
+  position: relative;
+  display: inline-block;
+  background-image: url('/assets/images/profile_placeholder.png');
+  background-repeat: no-repeat;
+  width: 40px;
+  height: 40px;
+  background-size: 40px;
+  border-radius: 20px;
+}
+#user-container #user-name {
+  font-size: 16px;
+  line-height: 36px;
+  padding-right: 10px;
+  padding-left: 20px;
+}
+#image-form #submitImage {
+  width: auto;
+  padding: 0 6px 0 1px;
+  min-width: 0;
+}
+#image-form #submitImage .material-icons {
+  top: -1px;
+}
+.message img {
+  max-width: 300px;
+  max-height: 200px;
+}
+#mediaCapture {
+  display: none;
+}
+@media screen and (max-width: 610px) {
+  header {
+    height: 113px;
+    padding-bottom: 80px !important;
+  }
+  #user-container {
+    top: 72px;
+    background-color: rgb(3,155,229);
+    height: 38px;
+    padding-top: 3px;
+    padding-right: 2px;
+  }
+  #user-container #user-pic {
+    top: 2px;
+    width: 33px;
+    height: 33px;
+    background-size: 33px;
+  }
+}
+.mdl-textfield__label:after {
+  background-color: #0288D1;
+}
+.mdl-textfield--floating-label.is-focused .mdl-textfield__label {
+  color: #0288D1;
+}
+.mdl-button .material-icons {
+  top: -1px;
+  margin-right: 5px;
+}

+<div class="demo-layout mdl-layout mdl-js-layout mdl-layout--fixed-header">
+  <!-- Header section containing logo -->
+  <header class="mdl-layout__header mdl-color-text--white mdl-color--light-blue-700">
+    <div class="mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-grid">
+      <div class="mdl-layout__header-row mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-cell--12-col-desktop">
+        <h3><i class="material-icons">chat_bubble_outline</i> Friendly Chat</h3>
+      </div>
+      <div id="user-container">
+        <div *ngIf="currentUser" id="user-pic" [ngStyle]="profilePicStyles"></div>
+        <div *ngIf="currentUser" id="user-name">{{ (user | async)?.displayName }}</div>
+        <button *ngIf="currentUser" id="sign-out" (click)="logout()" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-color-text--white">
+          Sign-out
+        </button>
+        <button *ngIf="!currentUser" id="sign-in" (click)="login()" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-color-text--white">
+          <i class="material-icons">account_circle</i>Sign-in with Google
+        </button>
+      </div>
+    </div>
+  </header>
+
+  <main class="mdl-layout__content mdl-color--grey-100">
+    <div id="messages-card-container" class="mdl-cell mdl-cell--12-col mdl-grid">
+
+      <!-- Messages container -->
+      <div id="messages-card" class="mdl-card mdl-shadow--2dp mdl-cell mdl-cell--12-col mdl-cell--6-col-tablet mdl-cell--6-col-desktop">
+        <div class="mdl-card__supporting-text mdl-color-text--grey-600">
+          <div id="messages">
+            <span id="message-filler"></span>
+            <div class="message-container" *ngFor="let message of messages | async">
+              <div class="spacing">
+                <div class="pic" [style.background-image]="'url(' + message.photoUrl + ')'"></div>
+              </div>
+              <div class="message">
+                <span *ngIf="message.text" [style]="message.sentiment | stylize">{{ message.text }}</span>
+                <img *ngIf="message.imageUrl" [src]="message.imageUrl + (message.moderated ? '&amp;moderated=1' : '')">
+              </div>
+              <div class="name">{{ message.name }}</div>
+            </div>
+          </div>
+          <div *ngIf="topics"><em>Recent topics: {{ topics }}</em></div>
+          <form id="message-form" (submit)="saveMessage($event, box)">
+            <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+              <input #box class="mdl-textfield__input" type="text" id="message"
+                (keyup)="update(box.value)" (blur)="update(box.value)"
+                placeholder="Message...">
+            </div>
+            <button id="submit" [disabled]="!value" type="submit" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
+              Send
+            </button>
+          </form>
+          <form id="image-form" action="#">
+            <input id="mediaCapture" type="file" accept="image/*,capture=camera" (change)="saveImageMessage($event)">
+            <button id="submitImage" title="Add an image" (click)="onImageClick($event)"
+              class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-color--amber-400 mdl-color-text--white">
+              <i class="material-icons">image</i>
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  </main>
+</div>

+/**
+ * Copyright 2017 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { TestBed, async } from '@angular/core/testing';
+
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        AppComponent
+      ],
+    }).compileComponents();
+  }));
+
+  it('should create the app', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app).toBeTruthy();
+  }));
+
+  it(`should have as title 'app works!'`, async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app.title).toEqual('app works!');
+  }));
+
+  it('should render title in a h1 tag', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.debugElement.nativeElement;
+    expect(compiled.querySelector('h1').textContent).toContain('app works!');
+  }));
+});

+/**
+ * Copyright 2017 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { Component, Inject } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';
+import { AngularFireAuth } from 'angularfire2/auth';
+import { MatSnackBar } from '@angular/material';
+import * as firebase from 'firebase';
+
+const LOADING_IMAGE_URL = 'https://www.google.com/images/spin-32.gif';
+const PROFILE_PLACEHOLDER_IMAGE_URL = '/assets/images/profile_placeholder.png';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+  user: Observable<firebase.User>;
+  currentUser: firebase.User;
+  messages: Observable<any[]>;
+  profilePicStyles: {};
+  topics = '';
+  value = '';
+
+  constructor(public db: AngularFireDatabase, public afAuth: AngularFireAuth, public snackBar: MatSnackBar) {
+    this.user = afAuth.authState;
+    this.user.subscribe((user: firebase.User) => {
+      console.log(user);
+      this.currentUser = user;
+
+      if (user) { // User is signed in!
+        this.profilePicStyles = {
+          'background-image':  `url(${this.currentUser.photoURL})`
+        };
+
+        // We load currently existing chat messages.
+        this.messages = this.db.list<any>('/messages', ref => ref.limitToLast(12)).valueChanges();
+        this.messages.subscribe((messages) => {
+          // Calculate list of recently discussed topics
+          const topicsMap = {};
+          const topics = [];
+          let hasEntities = false;
+          messages.forEach((message) => {
+            if (message.entities) {
+              for (let entity of message.entities) {
+                if (!topicsMap.hasOwnProperty(entity.name)) {
+                  topicsMap[entity.name] = 0
+                }
+                topicsMap[entity.name] += entity.salience;
+                hasEntities = true;
+              }
+            }
+          });
+          if (hasEntities) {
+            for (let name in topicsMap) {
+              topics.push({ name, score: topicsMap[name] });
+            }
+            topics.sort((a, b) => b.score - a.score);
+            this.topics = topics.map((topic) => topic.name).join(', ');
+          }
+
+          // Make sure new message scroll into view
+          setTimeout(() => {
+            const messageList = document.getElementById('messages');
+            messageList.scrollTop = messageList.scrollHeight;
+            document.getElementById('message').focus();
+          }, 500);
+        });
+
+        // We save the Firebase Messaging Device token and enable notifications.
+        this.saveMessagingDeviceToken();
+      } else { // User is signed out!
+        this.profilePicStyles = {
+          'background-image':  PROFILE_PLACEHOLDER_IMAGE_URL
+        };
+        this.topics = '';
+      }
+    });
+  }
+
+  login() {
+    this.afAuth.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider());
+  }
+
+  logout() {
+    this.afAuth.auth.signOut();
+  }
+
+  // TODO: Refactor into text message form component
+  update(value: string) {
+    this.value = value;
+  }
+
+  // Returns true if user is signed-in. Otherwise false and displays a message.
+  checkSignedInWithMessage() {
+    // Return true if the user is signed in Firebase
+    if (this.currentUser) {
+      return true;
+    }
+
+    this.snackBar
+      .open('You must sign-in first', 'Sign in', {
+        duration: 5000
+      })
+      .onAction()
+      .subscribe(() => this.login());
+
+    return false;
+  };
+
+  // TODO: Refactor into text message form component
+  saveMessage(event: any, el: HTMLInputElement) {
+    event.preventDefault();
+
+    if (this.value && this.checkSignedInWithMessage()) {
+      // Add a new message entry to the Firebase Database.
+      const messages = this.db.list('/messages');
+      messages.push({
+        name: this.currentUser.displayName,
+        text: this.value,
+        photoUrl: this.currentUser.photoURL || PROFILE_PLACEHOLDER_IMAGE_URL
+      }).then(() => {
+        // Clear message text field and SEND button state.
+        el.value = '';
+      }, (err) => {
+        this.snackBar.open('Error writing new message to Firebase Database.', null, {
+          duration: 5000
+        });
+        console.error(err);
+      });
+    }
+  }
+
+  // TODO: Refactor into image message form component
+  saveImageMessage(event: any) {
+    event.preventDefault();
+    const file = event.target.files[0];
+
+    // Clear the selection in the file picker input.
+    const imageForm = <HTMLFormElement>document.getElementById('image-form');
+    imageForm.reset();
+
+    // Check if the file is an image.
+    if (!file.type.match('image.*')) {
+      this.snackBar.open('You can only share images', null, {
+        duration: 5000
+      });
+      return;
+    }
+
+    // Check if the user is signed-in
+    if (this.checkSignedInWithMessage()) {
+
+      // We add a message with a loading icon that will get updated with the shared image.
+      const messages = this.db.list('/messages');
+      messages.push({
+        name: this.currentUser.displayName,
+        imageUrl: LOADING_IMAGE_URL,
+        photoUrl: this.currentUser.photoURL || PROFILE_PLACEHOLDER_IMAGE_URL
+      }).then((data) => {
+        // Upload the image to Cloud Storage.
+        const filePath = `${this.currentUser.uid}/${data.key}/${file.name}`;
+        return firebase.storage().ref(filePath).put(file)
+          .then((snapshot) => {
+            // Get the file's Storage URI and update the chat message placeholder.
+            const fullPath = snapshot.metadata.fullPath;
+            const imageUrl = firebase.storage().ref(fullPath).toString();
+            return firebase.storage().refFromURL(imageUrl).getMetadata();
+          }).then((metadata) => {
+            // TODO: Instead of saving the download URL, save the GCS URI and
+            //       dynamically load the download URL when displaying the image
+            //       message.
+            return data.update({
+              imageUrl: metadata.downloadURLs[0]
+            });
+          });
+      }).then(console.log, (err) => {
+        this.snackBar.open('There was an error uploading a file to Cloud Storage.', null, {
+          duration: 5000
+        });
+        console.error(err);
+      });
+    }
+  }
+
+  // TODO: Refactor into image message form component
+  onImageClick(event: any) {
+    event.preventDefault();
+    document.getElementById('mediaCapture').click();
+  }
+
+  // Saves the messaging device token to the datastore.
+  saveMessagingDeviceToken() {
+    return firebase.messaging().getToken()
+      .then((currentToken) => {
+        if (currentToken) {
+          console.log('Got FCM device token:', currentToken);
+          // Save the Device Token to the datastore.
+          firebase.database()
+            .ref('/fcmTokens')
+            .child(currentToken)
+            .set(this.currentUser.uid);
+        } else {
+          // Need to request permissions to show notifications.
+          return this.requestNotificationsPermissions();
+        }
+      }).catch((err) => {
+        this.snackBar.open('Unable to get messaging token.', null, {
+          duration: 5000
+        });
+        console.error(err);
+      });
+  };
+
+  // Requests permissions to show notifications.
+  requestNotificationsPermissions() {
+    console.log('Requesting notifications permission...');
+    return firebase.messaging().requestPermission()
+      // Notification permission granted.
+      .then(() => this.saveMessagingDeviceToken())
+      .catch((err) => {
+        this.snackBar.open('Unable to get permission to notify.', null, {
+          duration: 5000
+        });
+        console.error(err);
+      });
+  };
+}

+/**
+ * Copyright 2017 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { HttpModule } from '@angular/http';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
+import { AngularFireModule } from 'angularfire2';
+import { AngularFireDatabaseModule } from 'angularfire2/database';
+import { AngularFireAuthModule } from 'angularfire2/auth';
+import { MatSnackBarModule } from '@angular/material';
+
+import { AppComponent } from './app.component';
+import { StylizePipe } from './stylize.pipe';
+import { environment } from '../environments/environment';
+
+const configErrMsg = `You have not configured and imported the Firebase SDK.
+Make sure you go through the codelab setup instructions.`;
+
+const bucketErrMsg = `Your Firebase Storage bucket has not been enabled. Sorry
+about that. This is actually a Firebase bug that occurs rarely. Please go and
+re-generate the Firebase initialization snippet (step 4 of the codelab) and make
+sure the storageBucket attribute is not empty. You may also need to visit the
+Storage tab and paste the name of your bucket which is displayed there.`;
+
+if (!environment.firebase) {
+  if (!environment.firebase.apiKey) {
+    window.alert(configErrMsg);
+  } else if (environment.firebase.storageBucket === '') {
+    window.alert(bucketErrMsg);
+  }
+}
+
+@NgModule({
+  declarations: [
+    AppComponent,
+    StylizePipe
+  ],
+  imports: [
+    BrowserModule,
+    FormsModule,
+    HttpModule,
+    BrowserAnimationsModule,
+    MatSnackBarModule,
+    AngularFireModule.initializeApp(environment.firebase),
+    AngularFireDatabaseModule,
+    AngularFireAuthModule
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }

+import { Pipe, PipeTransform } from '@angular/core';
+import { DomSanitizer, SafeStyle } from '@angular/platform-browser';
+
+interface Sentiment {
+  score: number,
+  magnitude: number
+}
+
+/*
+ * Styles a message based on its sentiment.
+ */
+@Pipe({name: 'stylize'})
+export class StylizePipe implements PipeTransform {
+  constructor(private sanitizer: DomSanitizer) {}
+
+  transform(sentiment: Sentiment): string|SafeStyle {
+    if (!sentiment) {
+      return '';
+    }
+
+    let style = '';
+
+    // Change font based on positive/negative score.
+    if (sentiment.score >= 0.9) {
+      style += `font-family: 'Bonbon', 'Roboto', 'Helvetica', sans-serif;`;
+    } else if (sentiment.score >= 0.5) {
+      style += `font-family: 'Crafty Girls', 'Roboto', 'Helvetica', sans-serif;`;
+    } else if (sentiment.score <= -0.9) {
+      style += `font-family: 'Creepster', 'Roboto', 'Helvetica', sans-serif;`;
+    } else if (sentiment.score <= -0.5) {
+      style += `font-family: 'Julee', 'Roboto', 'Helvetica', sans-serif;`;
+    }
+
+    // Make bold if the magnitude is greater than 1.
+    if (sentiment.magnitude >= 1) {
+      style += `font-weight: bold;`;
+    }
+
+    return style ? this.sanitizer.bypassSecurityTrustStyle(style) : '';
+  }
+}

+{
+  "name": "Friendly Chat",
+  "short_name": "Friendly Chat",
+  "start_url": "/index.html",
+  "display": "standalone",
+  "orientation": "portrait"
+}

+{
+  "version": "1.0.0",
+  "name": "Friendly Chat",
+  "launch_path": "/index.html",
+  "description": "Chat with friends using Firebase 2.0",
+  "developer": {
+    "name": "Google inc.",
+    "url": "https://firebase.google.com"
+  },
+  "installs_allowed_from": [
+    "*"
+  ],
+  "default_locale": "en",
+  "permissions": {
+  },
+  "locales": {
+    "en": {
+      "name": "Friendly Chat",
+      "description": "Chat with friends using Firebase 2.0"
+    }
+  }
+}

+/**
+ * Copyright 2017 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export const environment = {
+  production: true,
+  firebase: {
+    // ***********************************************************************************************************************
+    // * TODO(DEVELOPER): Update values according to: Firebase Console > Overview > Add Firebase to your web app. *
+    // ***********************************************************************************************************************
+    apiKey: '',
+    authDomain: '',
+    databaseURL: '',
+    projectId: '',
+    storageBucket: '',
+    messagingSenderId: ''
+  }
+};

+/**
+ * Copyright 2017 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+// The file contents for the current environment will overwrite these during build.
+// The build system defaults to the dev environment which uses `environment.ts`, but if you do
+// `ng build --env=prod` then `environment.prod.ts` will be used instead.
+// The list of which env maps to which file can be found in `.angular-cli.json`.
+
+export const environment = {
+  production: false,
+  firebase: {
+    // ***********************************************************************************************************************
+    // * TODO(DEVELOPER): Update values according to: Firebase Console > Overview > Add Firebase to your web app. *
+    // ***********************************************************************************************************************
+    apiKey: '',
+    authDomain: '',
+    databaseURL: '',
+    projectId: '',
+    storageBucket: '',
+    messagingSenderId: ''
+  }
+};

+importScripts('https://www.gstatic.com/firebasejs/3.6.6/firebase-app.js');
+importScripts('https://www.gstatic.com/firebasejs/3.6.6/firebase-messaging.js');
+
+// Initialize the Firebase app in the service worker by passing in the
+// messagingSenderId.
+firebase.initializeApp({
+  // TODO add your messagingSenderId
+  messagingSenderId: '662518903527'
+});
+var messaging = firebase.messaging();

+<!doctype html>
+<!--
+  Copyright 2017 Google Inc. All rights reserved.
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+      https://www.apache.org/licenses/LICENSE-2.0
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License
+-->
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="description" content="Learn how to use the Firebase platform on the Web">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Friendly Chat</title>
+
+  <!-- Disable tap highlight on IE -->
+  <meta name="msapplication-tap-highlight" content="no">
+
+  <!-- Web Application Manifest -->
+  <link rel="manifest" href="assets/manifest.json">
+
+  <!-- Add to homescreen for Chrome on Android -->
+  <meta name="mobile-web-app-capable" content="yes">
+  <meta name="application-name" content="Friendly Chat">
+  <meta name="theme-color" content="#303F9F">
+
+  <!-- Add to homescreen for Safari on iOS -->
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+  <meta name="apple-mobile-web-app-title" content="Friendly Chat">
+  <meta name="apple-mobile-web-app-status-bar-style" content="#303F9F">
+
+  <!-- Tile icon for Win8 -->
+  <meta name="msapplication-TileColor" content="#3372DF">
+  <meta name="msapplication-navbutton-color" content="#303F9F">
+
+  <!-- Material Design Lite -->
+  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+  <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.orange-indigo.min.css">
+
+  <!-- App Styling -->
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Creepster:regular,bold|Julee:regular,bold|Crafty+Girls:regular,bold|Bonbon:regular,bold|Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en">
+
+  <base href="/">
+
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root>Loading...</app-root>
+</body>
+</html>

+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule)
+  .catch(err => console.log(err));

+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
+ * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/** IE9, IE10 and IE11 requires all of the following polyfills. **/
+// import 'core-js/es6/symbol';
+// import 'core-js/es6/object';
+// import 'core-js/es6/function';
+// import 'core-js/es6/parse-int';
+// import 'core-js/es6/parse-float';
+// import 'core-js/es6/number';
+// import 'core-js/es6/math';
+// import 'core-js/es6/string';
+// import 'core-js/es6/date';
+// import 'core-js/es6/array';
+// import 'core-js/es6/regexp';
+// import 'core-js/es6/map';
+// import 'core-js/es6/weak-map';
+// import 'core-js/es6/set';
+
+/** IE10 and IE11 requires the following for NgClass support on SVG elements */
+// import 'classlist.js';  // Run `npm install --save classlist.js`.
+
+/** IE10 and IE11 requires the following for the Reflect API. */
+// import 'core-js/es6/reflect';
+
+
+/** Evergreen browsers require these. **/
+// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
+import 'core-js/es7/reflect';
+
+
+/**
+ * Required to support Web Animations `@angular/platform-browser/animations`.
+ * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
+ **/
+// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
+
+/**
+ * By default, zone.js will patch all possible macroTask and DomEvents
+ * user can disable parts of macroTask/DomEvents patch by setting following flags
+ */
+
+ // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+ // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+ // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+
+ /*
+ * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
+ * with the following flag, it will bypass `zone.js` patch for IE/Edge
+ */
+// (window as any).__Zone_enable_cross_context_check = true;
+
+/***************************************************************************************************
+ * Zone JS is required by default for Angular itself.
+ */
+import 'zone.js/dist/zone';  // Included with Angular CLI.
+
+
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */

+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+html, body {
+  font-family: 'Roboto', 'Helvetica', sans-serif;
+}
+.cdk-visually-hidden {
+  display: none;
+}

+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: any;
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);

+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/app",
+    "baseUrl": "./",
+    "module": "es2015",
+    "types": []
+  },
+  "exclude": [
+    "test.ts",
+    "**/*.spec.ts"
+  ]
+}

+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/spec",
+    "baseUrl": "./",
+    "module": "commonjs",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}

+/* SystemJS module definition */
+declare var module: NodeModule;
+interface NodeModule {
+  id: string;
+}

+service firebase.storage {
+  match /b/{bucket}/o {
+    match /{userId}/{postId}/{fileName} {
+      allow write: if request.auth.uid == userId;
+      allow read;
+    }
+  }
+}

+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "outDir": "./dist/out-tsc",
+    "sourceMap": true,
+    "declaration": false,
+    "moduleResolution": "node",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "target": "es5",
+    "typeRoots": [
+      "node_modules/@types"
+    ],
+    "lib": [
+      "es2017",
+      "dom"
+    ]
+  }
+}

+{
+  "rulesDirectory": [
+    "node_modules/codelyzer"
+  ],
+  "rules": {
+    "arrow-return-shorthand": true,
+    "callable-types": true,
+    "class-name": true,
+    "comment-format": [
+      true,
+      "check-space"
+    ],
+    "curly": true,
+    "deprecation": {
+      "severity": "warn"
+    },
+    "eofline": true,
+    "forin": true,
+    "import-blacklist": [
+      true,
+      "rxjs",
+      "rxjs/Rx"
+    ],
+    "import-spacing": true,
+    "indent": [
+      true,
+      "spaces"
+    ],
+    "interface-over-type-literal": true,
+    "label-position": true,
+    "max-line-length": [
+      true,
+      140
+    ],
+    "member-access": false,
+    "member-ordering": [
+      true,
+      {
+        "order": [
+          "static-field",
+          "instance-field",
+          "static-method",
+          "instance-method"
+        ]
+      }
+    ],
+    "no-arg": true,
+    "no-bitwise": true,
+    "no-console": [
+      true,
+      "debug",
+      "info",
+      "time",
+      "timeEnd",
+      "trace"
+    ],
+    "no-construct": true,
+    "no-debugger": true,
+    "no-duplicate-super": true,
+    "no-empty": false,
+    "no-empty-interface": true,
+    "no-eval": true,
+    "no-inferrable-types": [
+      true,
+      "ignore-params"
+    ],
+    "no-misused-new": true,
+    "no-non-null-assertion": true,
+    "no-shadowed-variable": true,
+    "no-string-literal": false,
+    "no-string-throw": true,
+    "no-switch-case-fall-through": true,
+    "no-trailing-whitespace": true,
+    "no-unnecessary-initializer": true,
+    "no-unused-expression": true,
+    "no-use-before-declare": true,
+    "no-var-keyword": true,
+    "object-literal-sort-keys": false,
+    "one-line": [
+      true,
+      "check-open-brace",
+      "check-catch",
+      "check-else",
+      "check-whitespace"
+    ],
+    "prefer-const": true,
+    "quotemark": [
+      true,
+      "single"
+    ],
+    "radix": true,
+    "semicolon": [
+      true,
+      "always"
+    ],
+    "triple-equals": [
+      true,
+      "allow-null-check"
+    ],
+    "typedef-whitespace": [
+      true,
+      {
+        "call-signature": "nospace",
+        "index-signature": "nospace",
+        "parameter": "nospace",
+        "property-declaration": "nospace",
+        "variable-declaration": "nospace"
+      }
+    ],
+    "unified-signatures": true,
+    "variable-name": false,
+    "whitespace": [
+      true,
+      "check-branch",
+      "check-decl",
+      "check-operator",
+      "check-separator",
+      "check-type"
+    ],
+    "directive-selector": [
+      true,
+      "attribute",
+      "app",
+      "camelCase"
+    ],
+    "component-selector": [
+      true,
+      "element",
+      "app",
+      "kebab-case"
+    ],
+    "no-output-on-prefix": true,
+    "use-input-property-decorator": true,
+    "use-output-property-decorator": true,
+    "use-host-property-decorator": true,
+    "no-input-rename": true,
+    "no-output-rename": true,
+    "use-life-cycle-interface": true,
+    "use-pipe-transform-interface": true,
+    "component-class-suffix": true,
+    "directive-class-suffix": true
+  }
+}

+# Firebase SDK for Cloud Functions Codelab - Start code
+
+This folder contains the start code of the [Firebase SDK for Cloud Functions Codelab](https://codelabs.developers.google.com/codelabs/firebase-cloud-functions/).
+
+If you'd like to jump directly to the end and see the finished code head to the [cloud-functions](../cloud-functions) directory.

+{
+  "rules": {
+    "messages": {
+      ".read": true,
+      // Users can only write messages if they are authenticated.
+      ".write": "auth !== null",
+      "$messageId": {
+        // The name has to be the real display name.
+        ".validate": "newData.child('name').val() === auth.token.name",
+        "text": {
+          // The text has to be less than 300 char.
+          ".validate": "newData.isString() && newData.val().length < 300"
+        }
+      }
+    },
+    "fcmTokens": {
+      // User can write their tokens to the database but not read the list of tokens.
+      ".read": false,
+      ".write": true
+    }
+  }
+}

+// Import and configure the Firebase SDK
+// These scripts are made available when the app is served or deployed on Firebase Hosting
+// If you do not want to serve/host your project using Firebase Hosting see https://firebase.google.com/docs/web/setup
+importScripts('/__/firebase/5.1.0/firebase-app.js');
+importScripts('/__/firebase/5.1.0/firebase-messaging.js');
+importScripts('/__/firebase/init.js');
+
+firebase.messaging();

+{
+  "database": {
+    "rules": "database-rules.json"
+  },
+  "storage": {
+    "rules": "storage.rules"
+  },
+  "hosting": {
+    "public": "./",
+    "ignore": [
+      "firebase.json",
+      "database-rules.json",
+      "storage.rules",
+      "functions"
+    ],
+    "headers": [{
+      "source" : "**/*.@(js|html)",
+      "headers" : [ {
+        "key" : "Cache-Control",
+        "value" : "max-age=0"
+      } ]
+    }]
+  }
+}

+{
+  "parserOptions": {
+    // Required for certain syntax usages
+    "ecmaVersion": 6
+  },
+  "plugins": [
+    "promise"
+  ],
+  "extends": "eslint:recommended",
+  "rules": {
+    // Removed rule "disallow the use of console" from recommended eslint rules
+    "no-console": "off",
+
+    // Removed rule "disallow multiple spaces in regular expressions" from recommended eslint rules
+    "no-regex-spaces": "off",
+
+    // Removed rule "disallow the use of debugger" from recommended eslint rules
+    "no-debugger": "off",
+
+    // Removed rule "disallow unused variables" from recommended eslint rules
+    "no-unused-vars": "off",
+
+    // Removed rule "disallow mixed spaces and tabs for indentation" from recommended eslint rules
+    "no-mixed-spaces-and-tabs": "off",
+
+    // Removed rule "disallow the use of undeclared variables unless mentioned in /*global */ comments" from recommended eslint rules
+    "no-undef": "off",
+
+    // Warn against template literal placeholder syntax in regular strings
+    "no-template-curly-in-string": 1,
+
+    // Warn if return statements do not either always or never specify values
+    "consistent-return": 1,
+
+    // Warn if no return statements in callbacks of array methods
+    "array-callback-return": 1,
+
+    // Require the use of === and !==
+    "eqeqeq": 2,
+
+    // Disallow the use of alert, confirm, and prompt
+    "no-alert": 2,
+
+    // Disallow the use of arguments.caller or arguments.callee
+    "no-caller": 2,
+
+    // Disallow null comparisons without type-checking operators
+    "no-eq-null": 2,
+
+    // Disallow the use of eval()
+    "no-eval": 2,
+
+    // Warn against extending native types
+    "no-extend-native": 1,
+
+    // Warn against unnecessary calls to .bind()
+    "no-extra-bind": 1,
+
+    // Warn against unnecessary labels
+    "no-extra-label": 1,
+
+    // Disallow leading or trailing decimal points in numeric literals
+    "no-floating-decimal": 2,
+
+    // Warn against shorthand type conversions
+    "no-implicit-coercion": 1,
+
+    // Warn against function declarations and expressions inside loop statements
+    "no-loop-func": 1,
+
+    // Disallow new operators with the Function object
+    "no-new-func": 2,
+
+    // Warn against new operators with the String, Number, and Boolean objects
+    "no-new-wrappers": 1,
+
+    // Disallow throwing literals as exceptions
+    "no-throw-literal": 2,
+
+    // Require using Error objects as Promise rejection reasons
+    "prefer-promise-reject-errors": 2,
+
+    // Enforce “for” loop update clause moving the counter in the right direction
+    "for-direction": 2,
+
+    // Enforce return statements in getters
+    "getter-return": 2,
+
+    // Disallow await inside of loops
+    "no-await-in-loop": 2,
+
+    // Disallow comparing against -0
+    "no-compare-neg-zero": 2,
+
+    // Warn against catch clause parameters from shadowing variables in the outer scope
+    "no-catch-shadow": 1,
+
+    // Disallow identifiers from shadowing restricted names
+    "no-shadow-restricted-names": 2,
+
+    // Enforce return statements in callbacks of array methods
+    "callback-return": 2,
+
+    // Require error handling in callbacks
+    "handle-callback-err": 2,
+
+    // Warn against string concatenation with __dirname and __filename
+    "no-path-concat": 1,
+
+    // Prefer using arrow functions for callbacks
+    "prefer-arrow-callback": 1,
+
+    // Return inside each then() to create readable and reusable Promise chains.
+    // Forces developers to return console logs and http calls in promises.
+    "promise/always-return": 2,
+
+    //Enforces the use of catch() on un-returned promises
+    "promise/catch-or-return": 2,
+
+    // Warn against nested then() or catch() statements
+    "promise/no-nesting": 1
+  }
+}

+/**
+ * Copyright 2017 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// TODO(DEVELOPER): Import the Cloud Functions for Firebase and the Firebase Admin modules here.
+
+// TODO(DEVELOPER): Write the addWelcomeMessages Function here.
+
+// TODO(DEVELOPER): Write the blurOffensiveImages Function here.
+
+// TODO(DEVELOPER): Write the sendNotifications Function here.

+{
+  "name": "friendlychat-codelab",
+  "description": "Firebase SDK for Cloud Functions codelab",
+  "dependencies": {
+    "firebase-admin": "~5.12.1",
+    "firebase-functions": "^1.1.0"
+  },
+  "devDependencies": {
+    "eslint": "^4.12.0",
+    "eslint-plugin-promise": "^3.6.0"
+  }
+}

+<!doctype html>
+<!--
+  Copyright 2015 Google Inc. All rights reserved.
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+      https://www.apache.org/licenses/LICENSE-2.0
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License
+-->
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="description" content="Learn how to use the Firebase platform on the Web">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Friendly Chat</title>
+
+  <!-- Disable tap highlight on IE -->
+  <meta name="msapplication-tap-highlight" content="no">
+
+  <!-- Web Application Manifest -->
+  <link rel="manifest" href="manifest.json">
+
+  <!-- Add to homescreen for Chrome on Android -->
+  <meta name="mobile-web-app-capable" content="yes">
+  <meta name="application-name" content="Friendly Chat">
+  <meta name="theme-color" content="#303F9F">
+
+  <!-- Add to homescreen for Safari on iOS -->
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+  <meta name="apple-mobile-web-app-title" content="Friendly Chat">
+  <meta name="apple-mobile-web-app-status-bar-style" content="#303F9F">
+
+  <!-- Tile icon for Win8 -->
+  <meta name="msapplication-TileColor" content="#3372DF">
+  <meta name="msapplication-navbutton-color" content="#303F9F">
+
+  <!-- Material Design Lite -->
+  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+  <link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.orange-indigo.min.css">
+  <script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script>
+
+  <!-- App Styling -->
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en">
+  <link rel="stylesheet" href="styles/main.css">
+</head>
+<body>
+<div class="demo-layout mdl-layout mdl-js-layout mdl-layout--fixed-header">
+
+  <!-- Header section containing logo -->
+  <header class="mdl-layout__header mdl-color-text--white mdl-color--light-blue-700">
+    <div class="mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-grid">
+      <div class="mdl-layout__header-row mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-cell--12-col-desktop">
+        <h3><i class="material-icons">chat_bubble_outline</i> Friendly Chat</h3>
+      </div>
+      <div id="user-container">
+        <div hidden id="user-pic"></div>
+        <div hidden id="user-name"></div>
+        <button hidden id="sign-out" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-color-text--white">
+          Sign-out
+        </button>
+        <button hidden id="sign-in" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-color-text--white">
+          <i class="material-icons">account_circle</i>Sign-in with Google
+        </button>
+      </div>
+    </div>
+  </header>
+
+  <main class="mdl-layout__content mdl-color--grey-100">
+    <div id="messages-card-container" class="mdl-cell mdl-cell--12-col mdl-grid">
+
+      <!-- Messages container -->
+      <div id="messages-card" class="mdl-card mdl-shadow--2dp mdl-cell mdl-cell--12-col mdl-cell--6-col-tablet mdl-cell--6-col-desktop">
+        <div class="mdl-card__supporting-text mdl-color-text--grey-600">
+          <div id="messages">
+            <span id="message-filler"></span>
+          </div>
+          <form id="message-form" action="#">
+            <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+              <input class="mdl-textfield__input" type="text" id="message">
+              <label class="mdl-textfield__label" for="message">Message...</label>
+            </div>
+            <button id="submit" disabled type="submit" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
+              Send
+            </button>
+          </form>
+          <form id="image-form" action="#">
+            <input id="mediaCapture" type="file" accept="image/*" capture="camera">
+            <button id="submitImage" title="Add an image" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-color--amber-400 mdl-color-text--white">
+              <i class="material-icons">image</i>
+            </button>
+          </form>
+        </div>
+      </div>
+
+      <div id="must-signin-snackbar" class="mdl-js-snackbar mdl-snackbar">
+        <div class="mdl-snackbar__text"></div>
+        <button class="mdl-snackbar__action" type="button"></button>
+      </div>
+
+    </div>
+  </main>
+</div>
+
+<!-- Import and configure the Firebase SDK -->
+<!-- These scripts are made available when the app is served or deployed on Firebase Hosting -->
+<!-- If you do not want to serve/host your project using Firebase Hosting see https://firebase.google.com/docs/web/setup -->
+<script src="/__/firebase/5.1.0/firebase-app.js"></script>
+<script src="/__/firebase/5.1.0/firebase-auth.js"></script>
+<script src="/__/firebase/5.1.0/firebase-database.js"></script>
+<script src="/__/firebase/5.1.0/firebase-storage.js"></script>
+<script src="/__/firebase/5.1.0/firebase-messaging.js"></script>
+<script src="/__/firebase/init.js"></script>
+
+<script src="scripts/main.js"></script>
+</body>
+</html>

+{
+  "name": "Friendly Chat",
+  "short_name": "Friendly Chat",
+  "start_url": "/index.html",
+  "display": "standalone",
+  "orientation": "portrait",
+  "gcm_sender_id": "103953800507"
+}

+service firebase.storage {
+  match /b/{bucket}/o {
+    match /{userId}/{messageId}/{fileName} {
+      allow write: if request.auth.uid == userId;
+      allow read;
+    }
+  }
+}