Nativescript Vue：Firebase/Firestore混淆，带有Nativescript插件Firebase

Question

我知道这只是我在这一点上缺乏理解，但我不知道还能去哪里，我觉得我现在需要一个ELI5。现在我没有得到任何错误，但我也不确定要朝哪个方向去完成我的下一个问题/任务。

这是我第一次用Firebase开发Nativescript应用程序。我能看懂这篇有用的文章(https://hub.packtpub.com/firebase-nativescript-cross-platform-app-development/)让我通过Firebase的身份验证，但现在我正在尝试使用Firestore访问我的集合，以便显示其中的数据文档。家vue是一种选项卡式布局（后面有一些额外的代码），在这些选项卡式视图中，我正试图添加功能来CRUD firestore数据。

我目前正在处理两个页面，用于nativescript-plugin-fire base（https://github.com/EddyVerbruggen/nativescript-plugin-firebase/blob/master/docs/FIRESTORE.md）和Google Firebase文档（https://firebase.google.com/docs/firestore/quickstart）的Cloud FiRecovery页面。

我觉得我现在没有正确初始化Firebase/Firestore，为什么这对我来说很难理解，我只是不知道。此时，任何指导或帮助都将不胜感激。

• 我想知道的一件事是，即使我使用了nativescript插件firebase插件，我是否仍必须添加唯一的初始化代码。如果是这样，我觉得我应该有一个单独的*。js文件，满足我所有的Firebase需求。任何建议都将不胜感激

应用程序。js公司

import VueDevtools from 'nativescript-vue-devtools';
import Vue from "nativescript-vue";
import LoginPage from './components/LoginPage';

//import DashboardPage from "./components/DashboardPage.vue";

import FloatLabel from './components/FloatLabel';

Vue.component('FloatLabel', FloatLabel);

Vue.use(VueDevtools)

// Initialize Firebase
var firebase = require("nativescript-plugin-firebase");

//Addig the code on the line below makes the debugger crrash (unaccepted app.js)
var db = require("nativescript-plugin-firebase/app/firestore");

firebase.init({}).then((instance) => {
    console.log("[*] Firebase was successfully initialised");
}, (error) => {
console.log("[*] Huston we've an initialization error: " + error);
});

//var db = require("firebase/firestore"); 
// Integrate Firestore
//var bulkyCollection = firebase.firestore().collection("bulktrash")

//const backendService = new BackendService();
//Vue.prototype.$backendService = backendService;

new Vue({
    render: h => h('frame', [h(LoginPage)])
  }).$start()

登录页面。vue

<template>
  <Page>
    <FlexboxLayout class="page">
      <StackLayout class="form">
        <Image class="logo" src="~/images/logo.png" />
        <Label class="header" text="BULKY" />

        <StackLayout class="input-field" marginBottom="25">
          <TextField class="input" hint="Email" keyboardType="email" autocorrect="false" autocapitalizationType="none" v-model="user.email"
           returnKeyType="next" @returnPress="focusPassword" fontSize="18" />
          <StackLayout class="hr-light" />
        </StackLayout>

        <StackLayout class="input-field" marginBottom="25">
          <TextField ref="password" class="input" hint="Password" secure="true" v-model="user.password" :returnKeyType="isLoggingIn ? 'done' : 'next'"
           @returnPress="focusConfirmPassword" fontSize="18" />
          <StackLayout class="hr-light" />
        </StackLayout>

        <StackLayout v-show="!isLoggingIn" class="input-field">
          <TextField ref="confirmPassword" class="input" hint="Confirm password" secure="true" v-model="user.confirmPassword" returnKeyType="done"
           fontSize="18" />
          <StackLayout class="hr-light" />
        </StackLayout>

        <Button :text="isLoggingIn ? 'Log In' : 'Sign Up'" @tap="submit" class="btn btn-primary m-t-20" />
        <Label v-show="isLoggingIn" text="Forgot your password?" class="login-label" @tap="forgotPassword" />
      </StackLayout>

      <Label class="login-label sign-up-label" @tap="toggleForm">
            <FormattedString>
              <Span :text="isLoggingIn ? 'Don’t have an account? ' : 'Back to Login'" />
              <Span :text="isLoggingIn ? 'Sign up' : ''" class="bold" />
            </FormattedString>
          </Label>
    </FlexboxLayout>
  </Page>
</template>
<script>
// Firebase authenticates users.
import firebase from "nativescript-plugin-firebase";
import Home from "./Home";

// App did not ccrash, but it didnnt seem right either
// const db = firebase.firestore;

//App crahses with line belows...iunno
//const bulkyCollection = firebase.firestore().collection("bulktrash");

const userService = {
  async register(user) {
    return await firebase.createUser({
      email: user.email,
      password: user.password
    });
  },
  async login(user) {
    return await firebase.login({
      type: firebase.LoginType.PASSWORD,
      passwordOptions: {
        email: user.email,
        password: user.password
      }
    });
  },
  async resetPassword(email) {
    return await firebase.resetPassword({
      email: email
    });
  }
};
// A stub for the main page of your app. In a real app you’d put this page in its own .vue file.
const HomePage = {
  template: `
  <Page>
        <Label class="m-20" textWrap="true" text="You have successfully authenticated. This is where you build your core application functionality."></Label>
  </Page>
  `
};

var LoadingIndicator = require("nativescript-loading-indicator")
  .LoadingIndicator;
var loader = new LoadingIndicator();

export default {
  data() {
    return {
      isLoggingIn: true,
      user: {
        email: "[e-mail]",
        password: "basbhat01",
        confirmPassword: "basbhat01"
      }
    };
  },
  methods: {
    toggleForm() {
      this.isLoggingIn = !this.isLoggingIn;
    },
    submit() {
      if (!this.user.email || !this.user.password) {
        this.alert("Please provide both an email address and password.");
        return;
      }
      loader.show();
      if (this.isLoggingIn) {
        this.login();
      } else {
        this.register();
      }
    },
    login() {
      userService
        .login(this.user)
        .then(() => {
      loader.hide();
      this.$navigateTo(Home);          
        })
        .catch(err => {
          console.error(err);
          loader.hide();          
          this.alert(err);
        });
    },
    register() {
      var validator = require("email-validator");
      if (!validator.validate(this.user.email)) {
        loader.hide();
        this.alert("Please enter a valid email address.");
        return;
      }
      if (this.user.password != this.user.confirmPassword) {
        loader.hide();
        this.alert("Your passwords do not match.");
        return;
      }
      if (this.user.password.length < 6) {
        loader.hide();
        this.alert("Your password must at least 6 characters.");
        return;
      }
      userService
        .register(this.user)
        .then(() => {
          loader.hide();
          this.alert("You may now login.");
          this.isLoggingIn = true;
        })
        .catch(err => {
          console.error(err);
          loader.hide();
          this.alert(err);
        });
    },
    forgotPassword() {
      prompt({
        title: "Forgot Password",
        message:
          "Enter the email address you used to register for APP NAME to reset your password.",
        inputType: "email",
        defaultText: "",
        okButtonText: "Ok",
        cancelButtonText: "Cancel"
      }).then(data => {
        if (data.result) {
          loader.show();
          userService
            .resetPassword(data.text.trim())
            .then(() => {
              loader.hide();
              this.alert(
                "Your password was successfully reset. Please check your email for instructions on choosing a new password."
              );
            })
            .catch(() => {
              loader.hide();
              this.alert(err);
            });
        }
      });
    },
    focusPassword() {
      this.$refs.password.nativeView.focus();
    },
    focusConfirmPassword() {
      if (!this.isLoggingIn) {
        this.$refs.confirmPassword.nativeView.focus();
      }
    },
    alert(message) {
      return alert({
        title: "Account Created!",
        okButtonText: "OK",
        message: message
      });
    }
  }
};
</script>

<style scoped>
  .page {
    align-items: center;
    flex-direction: column;
  }

  .form {
    margin-left: 30;
    margin-right: 30;
    flex-grow: 2;
    vertical-align: middle;
  }

  .logo {
    margin-bottom: 12;
    height: 90;
    font-weight: bold;
  }

  .header {
    horizontal-align: center;
    font-size: 25;
    font-weight: 600;
    margin-bottom: 70;
    text-align: center;
    color: #D51A1A;
  }

  .input-field {
    margin-bottom: 25;
  }

  .input {
    font-size: 18;
    placeholder-color: #A8A8A8;
  }

  .input-field .input {
    font-size: 54;
  }

  .btn-primary {
    height: 50;
    margin: 30 5 15 5;
    background-color: #D51A1A;
    border-radius: 5;
    font-size: 20;
    font-weight: 600;
    color: #FFFFFF;
  }

  .login-label {
    horizontal-align: center;
    color: #A8A8A8;
    font-size: 16;
  }

  .sign-up-label {
    margin-bottom: 20;
  }

  .bold {
    color: #000000;
  }
</style>

Home.vue

<template>
    <Page class="page">

        <ActionBar 
            title=" " flat="true" v-bind:class="{ completed: activeTabIndex == 1 }">
        </ActionBar>

        <TabView :selectedIndex="activeTabIndex" @selectedIndexChange="onTabChange">
            <TabViewItem title="Requests">
                <GridLayout rows="auto, auto, *">
                    <Label row="0" text="Requests" class="header" />

                    <TextField row="1" ref="taskInput" v-model="textFieldValue"
                        hint="Enter text..." returnKeyType="done" @returnPress="onReturnPress" />

                    <ListView row="2" class="list-group" for="todo in todos">
                        <v-template>
                            <GridLayout columns="auto, *">
                                <Label col="0" v-on:tap="onTodoCircleTap(todo)"
                                    text=" " />
                                <Label col="1" v-on:tap="onTodoItemTap(todo)"
                                    :text="todo.name" textWrap="true" />
                            </GridLayout>
                        </v-template>
                    </ListView>

                </GridLayout>
            </TabViewItem>
            <TabViewItem title="History">
                <GridLayout rows="auto, *">
                    <Label row="0" text="History" class="header" />

                    <ListView row="1" class="list-group" for="done in dones"
                        @itemTap="onItemTap">
                        <v-template>
                            <GridLayout columns="auto, *">
                                <Label col="0" text="✓" />
                                <Label col="1" :text="done.name" textWrap="true" />
                            </GridLayout>
                        </v-template>
                    </ListView>
                </GridLayout>
            </TabViewItem>
            <TabViewItem title="Profile">
                <GridLayout rows="auto, auto, *">
                    <Label row="0" text="Profile" class="header" />

                    <TextField row="1" ref="taskInput" v-model="textFieldValue"
                        hint="+ New request" returnKeyType="done" @returnPress="onReturnPress" />

                    <ListView row="2" class="list-group" for="todo in todos">
                       <v-template>

                            <GridLayout columns="auto, *, auto, *"
                                rows="auto, auto" class="list-entry">
                                <!-- Circle Icon 
                                <Label col="0" row="0" v-on:tap="onTodoCircleTap(todo)" class="circle" text=" " />             -->

                                <!-- Formated Requested Date -->
                                <Label col="0" row="0"
                                    v-on:tap="onTodoItemTap(todo)"
                                    textWrap="true">
                                    <FormattedString ios.fontFamily="system">
                                        <Span class="fas t-18"></Span>
                                        <Span text=" Requested: "
                                            color="gray">
                                        </Span>
                                        <Span :text=" todo.requested"> </Span>
                                    </FormattedString>
                                </Label>
                                <!-- Formated Pickup Date -->
                                <Label col="0" row="1"
                                    v-on:tap="onTodoItemTap(todo)"
                                    textWrap="true">
                                    <FormattedString ios.fontFamily="system">
                                        <Span class="fas t-18"></Span>
                                        <Span text=" Pickup: " color="gray">
                                        </Span>
                                        <Span :text=" todo.pickup"> </Span>
                                    </FormattedString>
                                </Label>
                                <!-- Formated Bulk Type -->
                                <Label col="2" row="0"
                                    v-on:tap="onTodoItemTap(todo)"
                                    textWrap="true">
                                    <FormattedString ios.fontFamily="system">
                                        <Span class="fas t-18"></Span>
                                        <Span text=" Type: " color="gray">
                                        </Span>
                                        <Span :text=" todo.type"> </Span>
                                    </FormattedString>
                                </Label>

                                <!-- Formated Bulk Status -->
                                <Label col="2" row="1"
                                    v-on:tap="onTodoItemTap(todo)"
                                    textWrap="true">

                                    <FormattedString ios.fontFamily="system">
                                        <Span class="fas t-18"></Span>
                                        <Span text=" Status: " color="gray">
                                        </Span>
                                        <Span :text=" todo.status"> </Span>
                                    </FormattedString>

                                </Label>
                                <!-- Extra Label -->


                            </GridLayout>

                        </v-template>
                    </ListView>

                </GridLayout>
            </TabViewItem>

            <TabViewItem title="Add Requests">
                <!-- CREATE a Grid Layout with 5 (0, 1, 2, 3, 4) rows -->
                <GridLayout rows="auto, auto, auto, auto, auto">
                    <!-- ROW 0: Add Label "Add Request" -->
                    <Label row="0" text="New Request" class="header" />
                    <!-- ROW 1: Add Text Field "Request Type" -->
                    <TextField row="1" ref="taskInput" v-model="bulk.bulk_type"
                        hint="Request Type" returnKeyType="done" @returnPress="onReturnPress" />
                    <!-- ROW 2: Add Text Field "Request Name" -->
                    <TextField row="2" ref="taskInput" v-model="bulk.bulk_requestor"
                        hint="Pickup Date" returnKeyType="done" @returnPress="onReturnPress" />
                    <!-- ROW 3: Add Text Field "Description" -->
                    <TextField row="3" ref="taskInput" v-model="bulk.bulk_description"
                        hint="Description" returnKeyType="done" @returnPress="onReturnPress" />
                    <!-- ROW 4: Add Button "save" -->
                    <Button row="4" text="save" @tap="saveData" backgroundColor="green" class="btn btn-primary m-t-20" />

                </GridLayout>

            </TabViewItem>


        </TabView>
    </Page>
</template>

<script>
import firebase from "nativescript-plugin-firebase";
import LoginPage from "./LoginPage";



    export default {
        methods: {
            saveData() {
                db.collection("bulktrash").add(this.bulk)
                .then((docRef) => {
                    console.log("Document written with ID: ", docRef.id);
                })
                .catch(function(error) {
                    console.error("Error adding document: ", error);
                });
            },
            onTodoItemTap(item) {
                const index = this.todos.indexOf(item);
                action("What do you want to do with this task?", "Cancel", ["Mark completed", "Delete forever"]).then(result => {
                    console.log(result);
                    switch (result) {
                        case "Mark completed":
                            this.dones.unshift(item);
                            this.todos.splice(index, 1);
                            this.activeTabIndex = 1;
                            break;
                        case "Delete forever":
                            this.todos.splice(index, 1);
                            break;
                        case "Cancel" || undefined:
                            break;
                    }
                });
            },

            onTodoCircleTap(item) { 
                const index = this.todos.indexOf(item); 
                this.dones.unshift(item);
                this.todos.splice(index, 1);
                this.activeTabIndex = 1;
            },

            onReturnPress() {
                if (this.textFieldValue.trim() === "") {
                    this.$refs.taskInput.nativeView.focus();
                    return;
                }
                console.log("New task added: " + this.textFieldValue + ".");
                this.todos.unshift({
                    name: this.textFieldValue
                });
                this.textFieldValue = "";
            },

            onTabChange(tab) {
                this.activeTabIndex = tab.value;
            }
        },
/*         created() {
            db.collection("bulktrash").get().then(function(querySnapshot) {
            querySnapshot.forEach(function(doc) {
                // doc.data() is never undefined for query doc snapshots
                console.log(doc.id, " => ", doc.data());
            });
        });
        }, */

        data() {
            return {
                bulks: [],
                bulk: {
                    bulk_id:null,
                    bulk_type:null,
                    bulk_location:null,
                    bulk_zone: null,
                    bulk_description: null,
                    bulk_dnotes: null,
                    bulk_requestor: null,
                    bulk_phone: null,
                    bulk_email: null,
                    //bulk_requested: null,
                },
                todos: [{
                        name: "John Smith",
                        type: "Aluminum",
                        requested: "10/04/19",
                        pickup: "10/23/19",
                        status: "Pending"
                    },
                    {
                        name: "Christine Tarbone",
                        type: "Cardboard",
                        requested: "10/07/19",
                        pickup: "10/23/19",
                        status: "Pending"
                    },
                    {
                        name: "Jamie Trotter",
                        type: "Aluminum",
                        requested: "10/02/19",
                        pickup: "10/12/19",
                        status: "Pending"
                    },
                    {
                        name: "Chris Evans",
                        type: "Electronics",
                        requested: "10/04/19",
                        pickup: "10/23/19",
                        status: "Pending"
                    }
                ],
                dones: [],
                bulkRequestType: "",
                textFieldValue2: "",
                textFieldValue3: "",
                activeTabIndex: 0
            };
        }
    };
</script>
<style scoped>
    ActionBar {
        background-color: #35495e;
    }

    .header {
        background-color: #35495E;
        color: white;
        font-size: 34;
        font-weight: 600;
        padding: 0 15 15 15;
        margin: 0;
    }

    .completed {
        background-color: #42B883;
    }

    .reminder {
        background-color: #42B883;
    }

    .logo {
        margin-bottom: 12;
        height: 90;
        font-weight: bold;
        background-color: #35495e;
    }

    TextField {
        width: 100%;
        font-size: 17;
        color: black;
        placeholder-color: #C1C1C1;
        padding: 17;
        border-width: 0 0 1 0;
        border-color: #E0E0E0;
    }

    .list-entry {
        padding: 0 15;
        color: #42B883;
    }

    .circle {
        width: 30;
        height: 30;
        padding: 0;
        color: #42B883;
        font-size: 25;
        border-color: #42B883;
        border-width: 2;
        border-radius: 50;
    }

    .list-entry .circle {
        margin: 0 10 0 0;
    }

    .list-entry Label {
        font-weight: bold;
        font-size: 17;
        vertical-align: middle;
        padding: 17 0;
        margin: 0;
    }

    .list-entry-completed .circle {
        color: white;
        background-color: #42B883;
        text-align: center;
        padding: 0;
    }
</style>

请让我知道，如果有任何其他我应该包括，可能会有所帮助。非常感谢大家。

Answer 1

在主页中添加/替换。vue：

import firebase from "nativescript-plugin-firebase";
import LoginPage from "./LoginPage";

import firestore from "nativescript-plugin-firebase/app/firestore";

const db = firebase.firestore;