Как настроить приложение nativescript-vue для firebase? - PullRequest
Новая
       2

Как настроить приложение nativescript-vue для firebase?

0 голосов
/ 02 мая 2019

Я сделал свое первое приложение с nativescript-vue и удивился, как подключить firebase к моему приложению.Моя идея состояла в том, чтобы добавить и прочитать данные из базы данных Firebase в реальном времени.

Я следовал некоторым руководствам и сделал следующее:1) Я установил firebase с помощью команды: «tns plugin add nativescript-plugin-firebase».2) Затем я настроил и загрузил файл google-services.json из своего проекта firebase.

Это содержимое файла main.js. 

import Vue from 'nativescript-vue'
import App from './components/App'
import firebase from 'nativescript-plugin-firebase'

import VueDevtools from 'nativescript-vue-devtools'

if(TNS_ENV !== 'production') {
  Vue.use(VueDevtools)
}
// Prints Vue logs when --env.production is *NOT* set while building
Vue.config.silent = (TNS_ENV === 'production')

firebase
  .init()
  .then(() => console.log('Firebase initialised!'))
  .catch(error => console.log(`Error: ${error}`));

new Vue({

  render: h => h('frame', [h(App)])
}).$start()

Это содержимоефайл App.vue. 

<template>
    <Page>
        <ActionBar title="App demo"/>
        <GridLayout columns="*" rows="*">
            <Label class="message" :text="msg" col="0" row="0"/>
        </GridLayout>

        <button @tap="test()">Push</button>
    </Page>
</template>

<script>
import firebase from 'nativescript-plugin-firebase';

  export default {
    data() {
      return {
        msg: 'Hello World!'
      }
    },
    methods: {
      test(){
        alert("click");
        //FIREBASE PUSH 
    }
    }
  }
</script>

<style scoped>
    ActionBar {
        background-color: #1F2327;
        color: #ffffff;
    }

    .message {
        vertical-align: center;
        text-align: center;
        font-size: 20;
        color: #333333;
    }
</style>

Я пытался использовать этот код, но он не работает. 

 firebase.push(
      '/users',
      {
        'first': 'Eddy',
        'last': 'Verbruggen',
        'birthYear': 1977,
        'isMale': true,
        'address': {
          'street': 'foostreet',
          'number': 123
        }
      }
  ).then(
      function (result) {
        console.log("created key: " + result.key);
      }
  );
...