Software Archive
Read-only legacy content
17061 Discussions

Firebase + XDK

João_Carlos_B_
Beginner
391 Views

 

Hello, how are you? sorry for my English , I'm using google translator , well my problem is this , I want to display on screen the result of a search on the firebase.google my database , I could make it work with the code below , but copying and pasting the index does not work and displays ( which should display the data of database ) {{ msg.name }} {{ msg.text }} and the scripts are on the www.js folder

Thanks a lot for the help

the code in html are:

<html ng-app="myApp">

  <head>

    <script src="angular.min.js"></script>

    <script src="firebase.js"></script>

    <script src="angularfire.min.js"></script>

    <!--<link rel="stylesheet" href="/resources/tutorial/css/example.css"/>-->

    <style>

    body {

    font-size: 22;

    }

    </style>

  </head>

 

  <body ng-controller="MyController">

 

    <!-- CHAT MARKUP -->

    <div class="example-chat l-demo-container">

      <header>Firebase Chat Demo</header>

 

      <div class="example-chat-toolbar">

        <label for="nameInput">Username:</label>

        <input ng-model="name" type="text" id="nameInput" placeholder="enter a username...">

      </div>

 

      <ul id="example-messages" class="example-chat-messages">

        <li ng-repeat="msg in messages">

          {{ msg.name }}<!-- aqui ele exibe a mensagem.nome <3 --> 

          {{ msg.text }}<!-- aqui ele exibe a mensagem.texto <3 --> 

        </li>

      </ul>

      <ul id="example-messages" class="example-chat-messages">

        <li ng-repeat="msg in messages">

          <strong class="example-chat-username">{{ msg.name }}</strong>

          {{ msg.text }}

        </li>

      </ul>

 

      <footer>

        <input ng-model="msg" ng-keydown="addMessage($event)" type="text" id="messageInput"  placeholder="Type a message...">

      </footer>

    </div>

 

    <script>

      var myApp = angular.module("myApp", ["firebase"]);

 

      myApp.controller("MyController", ["$scope", "$firebaseArray",

        function($scope, $firebaseArray) {

          var ref = new Firebase('https://scorching-heat-1073.firebaseio.com/');

          //

 

         

          //-------------------------------------------------pesquisa na coluna nome o resultado aa

          var query = ref.orderByChild("name");//.equalTo('aa');

 

 

 

          //-------------------------------------------------dados na variavel $scope.messages pega todo o banco

          $scope.messages = $firebaseArray(query);

 

          //-------------------------------------------------função que adiciona a mensagem no banco

          $scope.addMessage = function(e) {

 

            if (e.keyCode === 13 && $scope.msg) {

              var name = $scope.name || "anonymous";

 

              //-------------------------------------------------adiciona cioisa banco nas mensagem no banco

              $scope.messages.$add({

                name: name,

                text: $scope.msg

              });

 

 

              $scope.msg = "";

            }

          }

        }

      ]);

    </script>

  </body>

 

</html>

 

 

Hello, how are you? sorry for my English , I'm using google translator , well my problem is this , I want to display on screen the result of a search on the firebase.google my database , I could make it work with the code below , but copying and pasting the index does not work and displays ( which should display the downloaded database )

 

0 Kudos
4 Replies
Zhen_Z_Intel
Employee
391 Views

Hi, I have tested above code. It is correct and I might can give you some advice:

1. If it displays "{{ msg.name }} {{ msg.text }}" in browser without showing proper data, please notice you might do not have a appropriate reference of "angularfire.min.js". Thus, when you define "angular.module", the program cannot recognize the specified requires "['firebase']". Please use following code: 

<script src="https://cdn.firebase.com/libs/angularfire/1.2.0/angularfire.min.js"></script>

2. Make sure that your domain is already presented in "OAth redirect domains". The domain of emulator should be "127.0.0.1"

3. If the data of list still cannot be displayed, please notice the data structure of your Realtime Database.

Hope it could help you.

0 Kudos
João_Carlos_B_
Beginner
391 Views

hello , first thanks for the reply , I tried to call this script as shown below , in my index all quiet , attachment and use without problems but in this role I am not managing to use .js that supplies the dependencies

0 Kudos
PaulF_IntelCorp
Employee
391 Views

Try updating the jQuery library in your app to jQuery 2, see this FAQ > https://software.intel.com/en-us/xdk/faqs/app-designer#ajax-jquery-one-fail

0 Kudos
Zhen_Z_Intel
Employee
391 Views

Hi, I could not understand why you write HTML tag directly in Js file...

Here is the source file that I can run the program successfully, the content of this file is the code you provided. hope it could help you.

P.S. Do not connect to my firebase DB directly, I have already deleted, use yourselves.

1. Add "127.0.0.1" to OAuth redirect domain.

2. Set your security rules of realtime database as public like below:

And the emulator should display the content like following image

0 Kudos
Reply