Firebase firestore working on emulator but not on real device

firebase

#1

Hi I have trouble testing the Firebase plugin.

When I test on the computer using the Android Simulator (image Motorola G3 Android 6.0) it works perfectly. But on a real device (Motorola G3 Android 6.0) It can’t get any collections.

It does not throws any errors. It’s like is not data on the database but you can clearly see all the data on the web and on the simulator.


#2

Did you get any error while performing the authentication call on real device (assuming your Firestore DB data is not public)?


#3

Hi @manojdcoder thanks for your reply.

I did not receive any error during the init call

var firebase = require("nativescript-plugin-firebase");

firebase.init({
  // Optionally pass in properties for database, authentication and cloud messaging,
  // see their respective docs.
}).then(
    function (instance) {
      console.log("firebase.init done");
    },
    function (error) {
      console.log("firebase.init error: " + error);
    }
);

This is the init code that works ok on both sides. But later on the app when I call a collection, it only works on the simulator.


#4

I didn’t mean the init call. I was referring to authenticate call until your data in the tables are public.


#5

Hi, my data for now is public.


#6

Quick update.

I created an empty project using the Vue CLI Template Then installed the NativeScript-Plugin-Firebase following the instructions:

  1. Download the google-services.json
  2. Using npm install nativescript-plugin-firebase instead of tns, because I am using NS-Vue.
  3. Running npm run clean to erase any cache.
  4. Create a copy of the file firebase.nativescript.json to the template folder.
  5. Add the multiDexEnabled true on the app.gradle in the template/app/App_Resources/Android folder.

Then run a simple query in HelloWorld.vue like this:
Template:

<template>
  <Page>
    <ActionBar title="Hello world">
    </ActionBar>
    <StackLayout>
      <Label v-for="(item, index) in collection" :key="index">
        {{item.title}}
      </Label>
    </StackLayout>
  </Page>
</template>

Script:

<script>
const firebase = require("nativescript-plugin-firebase/app");

export default {
  data() {
    return {
      collection: [],
      surprise: false
    };
  },
  mounted() {
    firebase
      .firestore()
      .collection("stores")
      .doc("carmaos")
      .collection("menu")
      .get()
      .then(querySnapshot => {
        querySnapshot.forEach(doc => {
          console.log(`${doc.id} => ${JSON.stringify(doc.data())}`);
          this.collection.push(doc.data());
        });
      });
  }
};
</script>

On the device this works displaying a food menu but it does not work on the device.

I am using the Firebase plugin on version 6.4.0.


#7

Sorry I’m quite confused, what you mean by that?


#8

Hi, sorry for the confussion.

What I meant is that I created a quick test array in FireStore with a route like this:

Stores(collection)/StoreName(document)/FoodMenu(collection)/

We’re I put some documents representing items in a food menu.

But it does not show in the device.


#9


This is what I meant. Same code and same database running from the simulator and the device.

The database is public.


#10

Did you try running the demo app from the plugin repo on your device, did that work as expected?


#11

Hi I will try that and report back.


#12

Hi, the firebase demo app works. That app is using pure Nativescript and NS-Angular.
Does NS-Vue have a recent problem with Firebase because I was able to use NS-Vue with Firebase just fine a few weeks ago.


#13

NativeScript Core or Angular or Vue, end of the day everything is just JavaScript. Vue alone should not cause any trouble with services like Firebase.

You may be missing something in your local or firebase setup, try to double check. Try replacing your firebase app config in the demo app, see whether you get expected output.


#14

Just right now I am trying to debug it. I will try your idea and report back.
Thanks