带有 Firebase 的 Starterkit，只读答案

【问题标题】：Starterkit with Firebase, readonly带有 Firebase 的 Starterkit，只读
【发布时间】：2017-02-05 23:02:32
【问题描述】：

我对使用 Firebase READONLY 做一个非常简单的 PolymerCLI StarterKit 应用很感兴趣。这是我的工作示例。我回答了问题：

最佳位置
身份验证。我查看的所有示例都从身份验证开始，包括添加标签。只要 RULES 包含 READ:nil，则不需要进行身份验证。

请原谅这样简单的例子，但我有几个不清楚的问题。很高兴得到反馈。将使用示例身份验证屏幕示例进行 Starterkit。

FIREBASE 数据：（样本数据）

{
  "BIN" : {
    "PF004" : {
      "BINTS01" : 1477921088227,
      "BINTS02" : "2016-10-31 09:38",
      "BinScanWeekNumber" : 45,
      "DriversInitials" : "lt",
      "MissionID" : "lt1477921031516",
      "Q10_FILL_LEVEL" : "01 - 010% -2",
      "Q20_BIN_STATUS" : "300 - ALL GOOD",
      "ValLat" : 27.0026283,
      "ValLong" : -82.1632471,
      "YearNumber" : 2016,
      "recorded" : false
    },
    "PF009" : {
      "BINTS01" : 1477938700818,
      "BINTS02" : "2016-10-31 14:31",
      "BinScanWeekNumber" : 45,
      "DriversInitials" : "lt",
      "MissionID" : "lt1477935967751",
      "Q10_FILL_LEVEL" : "09 - 090% -5",
      "Q20_BIN_STATUS" : "300 - ALL GOOD",
      "ValLat" : 27.4861796,
      "ValLong" : -82.4469888,
      "YearNumber" : 2016,
      "recorded" : false
    },
    "PF011" : {
      "BINTS01" : 1475525655142,
      "BINTS02" : "2016-10-03 16:14",
      "BinScanWeekNumber" : 41,
      "DriversInitials" : "lt",
      "MissionID" : "lt1475525025421",
      "Q10_FILL_LEVEL" : "01 - 010% -2",
      "Q20_BIN_STATUS" : "300 - ALL GOOD",
      "ValLat" : 27.5332609,
      "ValLong" : -82.5033191,
      "YearNumber" : 2016,
      "recorded" : false
    },

规则： 观察 .read:true。

    {
      "rules": {
        ".read": true,
        ".write": "auth != null"
      }
    }

代码：从 Polymer Starterkit 开始

index.html

库存...没有任何变化。但可能可以做

my-app.html 在此处添加了 polymerfire 元素。包括：

<!-- ***************      FIREBASE ITEMS HERE-->
<link rel="import" href="../bower_components/polymerfire/firebase-app.html">
<link rel="import" href="../bower_components/polymerfire/firebase-query.html">
<link rel="import" href="../bower_components/polymerfire/firebase-document.html">
<!--<link rel="import" href="../bower_components/polymerfire/firebase-auth.html">-->

Also added <firebase-app>

<link rel="import" href="../bower_components/polymer/polymer.html">

<!-- ***************     ADD FIREBASE ITEMS HERE-->
<link rel="import" href="../bower_components/polymerfire/firebase-app.html">
<link rel="import" href="../bower_components/polymerfire/firebase-query.html">
<link rel="import" href="../bower_components/polymerfire/firebase-document.html">
<!--<link rel="import" href="../bower_components/polymerfire/firebase-auth.html">-->


<link rel="import" href="../bower_components/app-layout/app-drawer/app-drawer.html">
<link rel="import" href="../bower_components/app-layout/app-drawer-layout/app-drawer-layout.html">
<link rel="import" href="../bower_components/app-layout/app-header/app-header.html">
<link rel="import" href="../bower_components/app-layout/app-header-layout/app-header-layout.html">
<link rel="import" href="../bower_components/app-layout/app-scroll-effects/app-scroll-effects.html">
<link rel="import" href="../bower_components/app-layout/app-toolbar/app-toolbar.html">
<link rel="import" href="../bower_components/app-route/app-location.html">
<link rel="import" href="../bower_components/app-route/app-route.html">
<link rel="import" href="../bower_components/iron-pages/iron-pages.html">
<link rel="import" href="../bower_components/iron-selector/iron-selector.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="my-icons.html">

<dom-module id="my-app">
  <template>
    <style>
      :host {
        --app-primary-color: #4285f4;
        --app-secondary-color: black;

        display: block;
      }

      app-header {
        color: #fff;
        background-color: var(--app-primary-color);
      }
      app-header paper-icon-button {
        --paper-icon-button-ink-color: white;
      }

      .drawer-list {
        margin: 0 20px;
      }

      .drawer-list a {
        display: block;
        padding: 0 16px;
        text-decoration: none;
        color: var(--app-secondary-color);
        line-height: 40px;
      }

      .drawer-list a.iron-selected {
        color: black;
        font-weight: bold;
      }
    </style>

 <!--vy adding FIREBASE here-->
<!--Connection to Firebase-->
    <firebase-app
        name="SHOE33"
        api-key="Put API KEY HERE"        
        auth-domain=" shoe33-672de.firebaseapp.com"
        database-url="https://shoe33-672de.firebaseio.com">
    </firebase-app>


    <app-location route="{{route}}"></app-location>
    <app-route
        route="{{route}}"
        pattern="/:page"
        data="{{routeData}}"
        tail="{{subroute}}"></app-route>

    <app-drawer-layout fullbleed>
      <!-- Drawer content -->
      <app-drawer id="drawer">
        <app-toolbar>Menu</app-toolbar>
        <iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
          <a name="view1" href="/view1">View One</a>
          <a name="view2" href="/view2">View Two</a>
          <a name="view3" href="/view3">3 - BIN LIST</a>
          <a name="view4" href="/view4">4 - SCANS</a>
          <a name="view5" href="/view5">5 - MISSIONS</a>
          <a name="view6" href="/view6">View 6</a>
          <a name="view7" href="/view7">View 7</a>
          <a name="view8" href="/view8">View 8</a>
          <a name="view9" href="/view9">View 9</a>                    
        </iron-selector>
      </app-drawer>

      <!-- Main content -->
      <app-header-layout has-scrolling-region>

        <app-header condenses reveals effects="waterfall">
          <app-toolbar>
            <paper-icon-button icon="my-icons:menu" drawer-toggle></paper-icon-button>
            <div main-title>My App</div>
          </app-toolbar>
        </app-header>

        <iron-pages
            selected="[[page]]"
            attr-for-selected="name"
            fallback-selection="view404"
            role="main">
          <my-view1 name="view1"></my-view1>
          <my-view2 name="view2"></my-view2>
          <my-view3 name="view3"></my-view3>
          <my-view4 name="view4"></my-view4>
          <my-view5 name="view5"></my-view5>
          <my-view6 name="view6"></my-view6>
          <my-view7 name="view7"></my-view7>
          <my-view8 name="view8"></my-view8>
          <my-view9 name="view9"></my-view9>                    
          <my-view404 name="view404"></my-view404>
        </iron-pages>
      </app-header-layout>
    </app-drawer-layout>
  </template>

  <script>
    Polymer({
      is: 'my-app',

      properties: {
        page: {
          type: String,
          reflectToAttribute: true,
          observer: '_pageChanged',
        },
      },

      observers: [
        '_routePageChanged(routeData.page)',
      ],

      _routePageChanged: function(page) {
        this.page = page || 'view1';

        if (!this.$.drawer.persistent) {
          this.$.drawer.close();
        }
      },

      _pageChanged: function(page) {
        // Load page import on demand. Show 404 page if fails
        var resolvedPageUrl = this.resolveUrl('my-' + page + '.html');
        this.importHref(resolvedPageUrl, null, this._showPage404, true);
      },

      _showPage404: function() {
        this.page = 'view404';
      },
    });
  </script>
</dom-module>

my-view2.html 观察：使用 $key]] 引用文档根名称。

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="shared-styles.html">

<dom-module id="my-view2">
  <template>
    <style include="shared-styles">
      :host {
        display: block;

        padding: 10px;
      }
    </style>


    <div class="card">
      <div class="circle">2</div>
      <h1>View Two</h1>
      <p>SHOE 01.</p>
      <p>Will attempt to read Shoe Data</p>
      <p>Added the Firebase-auth tag</p>
      <p>Screwing with dom-repeat</p>
      <!--<p>Will attempt to read Shoe Data</p>
      <p>Will attempt to read Shoe Data</p>
      <p>Will attempt to read Shoe Data</p>
      <p>Will attempt to read Shoe Data</p>
      <p>Will attempt to read Shoe Data</p>
      <p>Will attempt to read Shoe Data</p>                        -->
    </div>

<!--Start adding things Polyfire here-->
    <firebase-query
        id="query"
        log
        app-name="SHOE33"
        path="/BIN"
        data="{{bindata}}">
    </firebase-query>


    <!--<firebase-document
        app-name="SHOE33"
        path="/bin"
        data="{{bindata}}">
    </firebase-document>-->


    <div class="card">
      <div class="circle">Bin</div>
      <h1>Count of Bins</h1>
      <p> [[bindata.length]] .length  </p>
      <p> [[bindata.BINTS01]] .BINTS01 </p>

    </div>


    <div class="card">
      <div class="circle">Bin2</div>
      <h1>Bin List</h1>
      <p>SHOE 01. BIN data</p>

      <p>Put data here....  </p>
      <p> [[bindata.length]] .length  </p>
      <p> [[bindata.BINTS01]] .BINTS01 </p>

    
    </div>
               <p>ccc</p>
        <template is="dom-repeat" items="[[bindata]]" as="bin">
                <p>ccc</p>
                <div class="card-content"> length = [[bin.length]] </div>
                <span>[[bin]]</span>
                <paper-card heading="[[bin]]">
                  <div class="card-content">BIN1 = [[bin.$key]] </div>
                  <div class="card-content">BIN2 = [[bin.id]] </div>
                  <div class="card-content">BIN3 = [[bin.child_added]] </div>  
                  <div class="card-content">BIN4 = [[bin.name]] </div>
                  <div class="card-content">BIN5 = [[bin.child]] </div>                                   
                  <div class="card-content">BIN6 = [[bin.Child]] </div>
                  <div class="card-content">BINTS01 = [[bin.BINTS01]] </div>
                </paper-card>
        </template>


  </template>

  <script>
    Polymer({
      is: 'my-view2',
      properties: {
        uid: String,
        branddata: {
          type: Object,
          observer: 'dataChanged'
        }
      },
      dataChanged: function (newData, oldData) {
        // do something when the query returns values
          console.log("NewData: " + newData);
      }
    });
  </script>
</dom-module>

如果这看起来像非常基本的 Polymer / Firebase... 它是。但我还是想记录下来。

【问题讨论】：

标签： firebase firebase-realtime-database polymer-1.0

【解决方案1】：

在您的 index.html 中，我看到您有一个 firebase-app 元素，但您尚未导入 firebase-app。会不会是这个问题？

我还发现firebasee-app 元素的名称与my-view2 中的firebase-document 中的名称不匹配。我也没有看到firebase-document 的导入。

此外，api 密钥显然无效，但我假设您只是为问题替换了该密钥 - 不要认为您需要这样做，在已发布的应用程序中它无论如何都是公开的。

我很惊讶在您的浏览器中检查 javascript 控制台并没有突出显示丢失的导入。也许做一个polymer build 也会把它捡起来。就我个人而言，我编写单元测试，这通常很快就能解决问题

【讨论】：

我进行了更改...您是正确的，但仍有问题。
您是否更新了上面的代码 sn-ps，它们看起来仍然非常错误。 - 需要在 index.html 中导入 firebase-app（将其放在 my-app 导入之前） - 我认为根本不需要 firebase-auth（您没有进行身份验证） - firebase-query 需要在 my-view2.html 中导入（不是 firebase-auth 或 firebase-document，您没有使用它们） - firebase-query 元素中的 app-name 需要匹配 firebase-app 元素中的 app-name
你应该做这个关于聚合物火的教程，它将带你了解需要配置的内容和位置。 codelabs.developers.google.com/codelabs/polymer-firebase-pwa/…

【解决方案2】：

无论您在哪个文件中定义了 firebase-app 元素，您还必须导入您想要使用的每个 firebase 元素，即使您没有在该文件中使用它。因此，从上面的源代码中，您需要在 my-app.html 文件中导入 firebase-app 和 firebase-query。此外，您在 index.html 和 my-app.html 中都定义了 firebase-app，它只需要在 my-app.html 文件中即可。

【讨论】：

虽然您可以在那里导入所有组件，但我很确定您不必这样做，最佳做法是将它们导入到使用它们的任何地方，而不是不使用它们的地方。这样，它们可以仅在需要时有效地加载（即使它们被导入多个文件，也不会被多次加载）。另外，他在 index.html 中使用 firebase-app，因此至少必须将其导入那里，并且将其导入 my-app.html 无济于事（尽管我可能会将 firebase-app 元素移动到 my-app )
在您定义 firebase-app 元素的文件中专门使用 firebase 元素，您可以导入您计划在整个应用程序中使用的所有 firebase 元素，因为它只会构建 firebase-app 的一部分您导入的元素的数据。因此，要使用 firebase-query，您必须在定义 firebase-app 元素的文件以及实际使用 firebase-query 元素的文件中导入它。