Question

我有兴趣用Firebase READONLY做一个非常简单的PolymerCLI StarterKit应用程序。这是我的工作范例。我回答了问题：

最佳位置
认证。我查看的所有示例都以身份验证开始，包括添加标记。只要RULES包含READ：nil。

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

FIREBASE DATA :(样本数据）

＆＃13;

{
  "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
    },

＆＃13;

规则： 观察.read：true。

＆＃13;

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

＆＃13;

代码：开始使用Polymer Starterkit

的index.html

股票......没有任何变化。但可能会这样做

我-app.html 在这里添加了polymerfire元素。包括：

＆＃13;

<!-- ***************      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>

＆＃13;

<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>

＆＃13;

我-view2.html 注意：使用$ key]]引用文档根名称。

＆＃13;

<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>

＆＃13;

如果这看起来像极其基本的Polymer / Firebase ......那就是。但我还是想记录它。

Answer 1

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

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

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

我很惊讶地检查浏览器中的javascript控制台并没有突出显示缺少的导入。也许做一个polymer build也会选择它。就个人而言，我会编写单元测试，而且通常可以很快地完成选择

Answer 2

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

使用Firebase的Starterkit，只读

2 个答案: