Posts by Peter Bradstreet

Databases:

Hi, with respect to the output format, here is another link: https://medium.com/@beingrahul/firebase-cloud-firestore-v-s-firebase-realtime-database-931d4265d4b0
I will take a couple of screencaps of the two databases and post them here in a few minutes.

Okay, so here is the first challenge. I have a button that will add a new record to the Notes database, right now I am just hard coding some test data but will connect it to a couple of input fields one I have it working. Here is the current code on the button: StartJS var db = firebase.firestore(); // Add a new document with a generated id. db.collection("notes").add({ Title: "Note 1 Title", Note: "Note 1 Content" }) .then(function(docRef) { console.log("Document written with ID: ", docRef.id); }) .catch(function(error) { console.error("Error adding document: ", error); }); EndJS When clicking the button I get the error "Promise is undefined". This seems pretty logical to me as console.log and console.error are not going to work in AB. Do I just need to replace 'console.log("Document written with ID: ", docRef.id);' and 'console.error("Error adding document: ", error);' with something else?

Hi David, here is a link to a page that compares the two Firebase database choices: Click Here

Hi David, Thanks for your fast response, I appreciate that it was a little bit of an unrealistic request. I will go ahead and create a simple notes app as far as I can and then reach out at each step as I hit a roadblock. Let's not worry about the ab project that I tried to include in this thread, I will provide a new one when I get more done on it. I am sure that it should all work in AB, it is just a case of figuring out the right syntax for parsing and displaying the database results and also I keep running up against missing promise errors but we can cross that bridge when I get to it. I will get back to you in a day or so. Cheers, Pete

Hi David,

I have spent quite a bit of time getting the hang of AB and have circled through various technologies such as pouchdb/couchdb and various other solutions but have settled on Firebase as the back-end that I would like to use.

I think that Firebase will be a great solution because it already has functionality in place to handle user authentication, realtime database, offline first functionality, cloud messaging, in-app messaging etc, it is also free to get started. have also spent quite a bit of time playing and learning Firebase/Firestore and feel that I have a pretty good handle on it.

Firebase offers two types of databases (Real time and the newer Firestore), They recommend Firestore as it is newer, easier to work with and more powerful. However the output of Firstore is not pure json, whereas it is with the RealTime database). I would prefer to work with Firestore but am unclear as to whether the output format is going to make it a lot harder to work with in AB?

The problem that I continue to struggle with is taking working html samples and converting them over to the AB structure rather than working directly with the dom. I was wondering whether you had any experience with Firebase/Firestore and would be able to point me in the right direction. I am looking to create a very simple test application where I can write data to the database and retrieve it in a report object, preferably with the ability to edit and delete records.

I appreciate that you are busy and I certainly appreciate all of the assistance that you have given me to date but I was wondering if you could give me a hand getting out of the gate on this as I am keen to really get going on this project. The main documentation can be found at https://firebase.google.com/docs/web/setup and https://firebase.google.com/docs/firestore/quickstart.  There is also a codelab that can be found at https://codelabs.developers.google.com/codelabs/firestore-web/#0.

The three questions that I have at this point are:

1.From what you can see at this point,would I be able to move forward with Firestore or will I need to work with the RealtimeDatabase due to the fact that the output is pure JSON?

2.Would you be able to edit the following project to get it writing and reading the data back? I have setup a test project in the Firebase console with anonymous user access and have put the config/credentials into the AB project.

<?xml version="1.0" encoding="utf-8"?> <appbuilder version="2019.44"> <app> <id>com.appbuilder</id> <name>Firebase</name> <shortname>New App 1</shortname> <version>1.0.0</version> <width>320</width> <height>480</height> <description>Another App Builder app</description> <authorname>App Builder</authorname> <authorurl>https://www.decsoftutils.com/</authorurl> <authoremail>info@decsoftutils.com</authoremail> <created>2019-08-07T12:19:33.145</created> <modified>2019-08-08T11:28:17.118</modified> <readyevent> <!--[CDATA[StartJS // Your web app's Firebase configuration var firebaseConfig = { apiKey: "AIzaSyA5YHgrwzsh8jKVzlJMxLofEN1ClTy6rZc", authDomain: "test-52615.firebaseapp.com", databaseURL: "https://test-52615.firebaseio.com", projectId: "test-52615", storageBucket: "", messagingSenderId: "65585634900", appId: "1:65585634900:web:47c6524bcbc8d332" }; // Initialize Firebase firebase.initializeApp(firebaseConfig); EndJS]]--> </readyevent> <metadata> <webapp> <prowebapp> <webextension> <cordova> <general> <plugins> <electron> <android> <ios> <windows> <phonegap> <platforms> <splash> <config> <paths> </paths></config></splash></platforms></phonegap></windows></ios></android></electron></plugins></general></cordova> </webextension></prowebapp></webapp></metadata></app> <views> <view> <name>Master</name> <ismaster>1</ismaster> <controls> </controls></view> <view> <name>Notes</name> <controls> <control role="7001"> <name>Notes_Report</name> <top>40</top> <left>16</left> <width>286</width> <height>360</height> <loading>Loading...</loading> </control> <control role="6002"> <name>Label1</name> <top>424</top> <left>216</left> <width>80</width> <height>20</height> <text>Add A Note</text> <clickevent> <!--[CDATA[ShowView "Note_Add" ]]--> </clickevent> </control> <control role="6002"> <name>Label2</name> <top>8</top> <left>120</left> <width>79</width> <height>20</height> <text>NOTES</text> </control> </controls> </view> <view> <name>Note_Add</name> <controls> <control role="3001"> <name>Input_Title</name> <top>40</top> <left>40</left> <width>178</width> <height>21</height> <tabindex>0</tabindex> <value>Input1</value> </control> <control role="9001"> <name>Input_Note</name> <top>88</top> <left>40</left> <width>200</width> <height>200</height> <tabindex>0</tabindex> <value>Textarea1</value> </control> <control role="2001"> <name>Button_Add</name> <top>304</top> <left>40</left> <width>141</width> <height>31</height> <text> <!--[CDATA[Add Note]]--> </text> <kind>primary</kind> <tabindex>0</tabindex> <clickevent> <!--[CDATA[StartJS var db = firebase.firestore();//db.collection("notes").add({ //Title: "Note Title", //Note: "Note Body"}); db.collection("Notes").doc("1").set({ Title: "Note Title", Note: "Note Body"}) ;EndJS]]--> </clickevent> </control> <control role="2001"> <name>Button1</name> <top>400</top> <left>40</left> <width>205</width> <height>39</height> <text> <!--[CDATA[Add cities example code]]--> </text> <kind>primary</kind> <tabindex>0</tabindex> <clickevent> <!--[CDATA[StartJS var db = firebase.firestore();var citiesRef = db.collection("cities"); citiesRef.doc("SF").set({ name: "San Francisco", state: "CA", country: "USA", capital: false, population: 860000, regions: ["west_coast", "norcal"] });citiesRef.doc("LA").set({ name: "Los Angeles", state: "CA", country: "USA", capital: false, population: 3900000, regions: ["west_coast", "socal"] });citiesRef.doc("DC").set({ name: "Washington, D.C.", state: null, country: "USA", capital: true, population: 680000, regions: ["east_coast"] });citiesRef.doc("TOK").set({ name: "Tokyo", state: null, country: "Japan", capital: true, population: 9000000, regions: ["kanto", "honshu"] });citiesRef.doc("BJ").set({ name: "Beijing", state: null, country: "China", capital: true, population: 21500000, regions: ["jingjinji", "hebei"] });EndJS]]--> </clickevent> </control> </controls> </view> </views> <functions> <files> <styles> <scripts> <path query="">https://www.gstatic.com/firebasejs/6.3.4/firebase-app.js</path> <path query="">https://www.gstatic.com/firebasejs/6.3.3/firebase-firestore.js</path> </scripts> <folders> <images> <others> </others></images></folders></styles></files> <generator> <name>App Builder</name> <version>2019.44 (6/24/2019)</version> <email>mailto:info@decsoftutils.com</email> <website>https://www.decsoftutils.com/</website> <copyright>©2019 App Builder by DecSoft</copyright> </generator> </functions></appbuilder>

Many thanks David!

Yes, I knew that the line: dbRef.on('value', snap => bigOne.innerText = snap.val()); was causing the issue but wasn't sure how to deal with it. Using an input field is a preferred method and I can see how you code is working so thanks very much.

I still have to deal with firebase authentication, messaging, chat, etc... but you have got me started and I appreciate it.

Cheers, Pete

Hi, I have decided to utilize some Firebase functionality inside the app and am struggling as always with how to convert a working html page over to AB. I have a simple html page with the following code: <body> <p>Getting started with Firebase</p> <h1 id="bigOne"></h1> <script src="https://www.gstatic.com/firebasejs/3.7.4/firebase.js"></script> <script> // Your web app's Firebase configuration var firebaseConfig = { apiKey: "AIzaSyCvuKydnau4_fdGMJCjdpK_osbQdt38ckE", authDomain: "helloworld-f1db3.firebaseapp.com", databaseURL: "https://helloworld-f1db3.firebaseio.com", projectId: "helloworld-f1db3", storageBucket: "", messagingSenderId: "35884024964", appId: "1:35884024964:web:45649bd0039b86e0" }; // Initialize Firebase firebase.initializeApp(firebaseConfig); // getting the text value from the database var bigOne = document.getElementById('bigOne'); var dbRef = firebase.database().ref().child('text'); dbRef.on('value', snap => bigOne.innerText = snap.val()); </script> </body> This just initializes the firebase js, finds the database value and dumps it into element. If you run this html, it will present:
Getting started with Firebase

Hello Firebase

Could you please giving me a hand in converting this over to AB. I have tried the following: 1. Add the js url in the app file manager (https://www.gstatic.com/firebasejs/3.7.4/firebase.js) 2. Add an html content object to view 3. Add following code to view show: StartJS // Initialize Firebase var config = { apiKey: "AIzaSyCvuKydnau4_fdGMJCjdpK_osbQdt38ckE", authDomain: "helloworld-f1db3.firebaseapp.com", databaseURL: "https://helloworld-f1db3.firebaseio.com", projectId: "helloworld-f1db3", storageBucket: "", messagingSenderId: "35884024964", appId: "1:35884024964:web:45649bd0039b86e0" }; firebase.initializeApp(config); // getting the text value from the database var bigOne = document.getElementById('bigOne'); var dbRef = firebase.database().ref().child('text'); // getting the text value from the database window.App.RootScope.bigOne = document.getElementById('bigOne'); window.App.RootScope.dbRef = firebase.database().ref().child('text'); dbRef.on('value', snap => bigOne.innerText = snap.val()); EndJS Any chance you could point me in the right direction? If I can get this working then I am confident that I can run with the rest of the firebase stuff inside AB. Thanks, Pete

Thanks, sorry I missed that in the help file, it is just what I need. Pete

Hi, What is the correct syntax for having more than one condition in an if statement? i.e. If "1" "==" "1" && "2" "==" "2" AlertBox "Look at me, I am an AlertBox!" "primary" EndIf

Looks like I need to read The Hitchhiker's Guide to the Galaxy. Cheers, Pete

Thanks Sam, I didn't notice the new version so I am thrilled that once again David has gone above and beyond. Thanks to both of you. Pete

Sorry, I don't understand your answer. Is there a way to prevent the typeahead control from firing the dropdown list until at least 3 characters have been typed? Cheers, Pete

Just a quick question. If you start typing in your example and type 'b' or 'br', then the dropdown list shows the br / in the dropdown list otherwise, it parses it properly. I was wondering whether there was a way to limit the dropdown list to not show any returns until the user has entered 3 or more characters? That way, they would never see this issue, also, the returned list would be smaller and more useable. Pete

Hi, Actually, I was a little quick to assume that was the issue as I found the same thing. I now see the script that you added to strip out the br / and replace it with a dash after the user selects the item as the typeahead control does not parse html tags but the dropdown list does. Cheers, Pete