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:
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:
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
External javascript 'Hello World' using Firebase
DecSoft App Builder include a convenient Command Line Compiler, so you can compile your apps from the console.
DecSoft App Builder integrates an Open AI assistant in order to assist you while developing your apps. 
DecSoft HTML Compiler is easy to use: set your project's options and compile your apps and games in a nutshell.
Save time, resources and money creating apps for Android, iOS and more with the same base of code. 
Save money by purchasing our NeoPlugins bundles. Five, Ten and even the complete NeoPlugins collection at an incredible price! 
Take a look at our YouTube channel and subscribe to be notified about new videos!
Design for small screen devices but deploy also (without changes) in larger devices like tablets.
Create multiplatform apps with DecSoft App Builder, including Android and iOS with the same base of code.
Create apps and expand their capabilities by using the world's popular programming language: Javascript.
Take a look at some frequently asked questions about us and our products!
DecSoft NeoPlugins put your VisualNeo projects into another level with +1,000 new actions for your apps.
DecSoft HTML Compiler include a convenient Command Line Compiler, so you can compile your apps from the console.
Create modern HTML apps and games at another level making things impossible to do even by modern HTML apps and games.
Apache Cordova's official plugins are supported out of the box and there are hundreds of plugins ready to use.
DecSoft NeoPlugins are available in both runtime and designtime flavours to keep your apps as small as possible.
Compile, convert your modern HTML apps and games into Microsoft Windows executable programs without dependencies. 
Hello Peter,
You don't mention the error that you get... even in the AB debugger: because we are talking about a syntax error. The problem is caused by the syntax used in the below line:
On the other hand, maybe other changes are also needed, for example, how you want to shown or use the value get from the database. If you place an "Input1" control in the app view, and, the below code in the app view Show event, you can see the things working as expected, that is, once the value is retrieved from the database, it's placed in the "Input1" control:
You can also copy the below code in a file and save it as "MyApp.ab", for example, then open it with DecSoft App Builder and run the app:
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 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.
Hello Peter,
The problem is, of course, the time... I am busy with some customer's projects, also with my own ones... I have no time, for sure, to start to read about Firebase in a deep way right now, Peter. Maybe in the future, but for now maybe we can go ahead in a step by step way...
In principle, whatever thing that you can see working in an HTML file... must work in AB, because our AB apps are also HTML... of course we need what happen in the HTML file, what we do in that, in order to maybe "translate" and do the same thing in AB.
You mention that the database that you want to use don't provide JSON, but, you don't mention what is the format that the database provide... maybe you can use that format directly in AB (again, if the HTML file do it... in principle we can also do it...).
Another possible solution is to use a "bridge" between the database and our app. That is, we can prepare an app's server script, who deal with the database, and finally provide to the app the right data, maybe already converted to JSON, if we wanted that.
So please, try the above, and, of course, if you find any specific error or problem (this is important, that is, to be specific), don't hesitate to post it here, and we will try to help you as bes as possible.
P.S. I want to try your provided app XML, but, can't open it properly... please, take a look... and, if once you be sure that the code is correct, post it here: if then don't work... maybe you need to send me this specific XML (app) using my E-Mail address...
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
Hello Peter,
I am curious anyway... what kind of output provide the "non JSON" one? But it's ok... maybe this is not important (right now...), so yes, go ahead, start with what you think that you must to do, and, of course, on any problem, specific error, unexpected result, etc., post it here and we will try to help!
Hi David, here is a link to a page that compares the two Firebase database choices: Click Here
I will take a look... but I start by search for "output" and no results found... :-(
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:
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, 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.
I will take a couple of screencaps of the two databases and post them here in a few minutes.
Hello Peter,
If I am not wrong, the "console.info" don't work.... in the internal debugger... but for sure work if you try the app in a browser like Firefox with the developer console opened... so look if you can see something there... because at a first view the "Promise is undefined" error message don't say too much...
Databases:
firestore:
realtime:
Okay, so that is the first answer. It worked fine in Firefox and wrote the data to the database and is visible in the firebase console. I will now connect the script to the input fields and create several records and then we can see if we can get the records displaying in a report object.
Hello Peter,
So maybe what happen is that the Firebase related Javascript is not compatible with Internet Explorer 11 (which is the internal debugger browser)? About the output... are you sure that we are not talking about JSON too? Maybe with a different format, to say like that... but finally some JSON objects?
Hi, Here is a good explanation of the data model for firestore: https://firebase.google.com/docs/firestore/data-model
I think we are talking about Javascript objects variables with their properties and values, because, what else? Maybe some defined data structure provided by the Firebase Javascript? We must talk about objects... but maybe "masked" by that structure...
Anyway... what is the problem, Peter? Sorry but I start to miss around (maybe we are mixing various things at the same time, and it's better to be more specific I think) can you output in the console the values that you get from the database? If so, what you can see? Is that the problem now?
P.S. If I am not wrong, the Firebase Javascript related code have some problem to run in Internet Explorer 11... you need to search around this too... and see if, in case that that code can't work in Internet Explorer 11... asume that the app can't work in Internet Explorer 11...
Hi, I am just adding a few more records then I will start on pulling the data in and report back with what I am dealing with and any errors received.
Okay things are going much more smoothly now that I know not to test in the internal browser. On view load of the notes view I have placed the following code:
Here is a screencap of the browser console:
I will email you the ab file.
Hi again,
In looking at the returned data, I believe that I should just be able to treat it as an array using ArrayConcat? If so, presumably I would need to modify console.log(doc.id, " => ", doc.data()); in the code above and replace it with something that sets Notes_Report.data?
Hello Peter,
If I am not wrong, you can modify your code in order to do something like this:
"querySnapshot" is already an Array of objects, which is what the Report.Data must be.
Hi, I modified the code as follows:
When the view loads it doesn't show any errors in the Firefox console but nothing is showing in the Notes_Report report. This makes me wonder whether I have used the wrong html in the report object?:
[Record.Title]'br'[Record.Note]
Hello Peter,
I am wrong... we can't assign the variable directly to the Report's Data... we must do something like the below:
You can try that code "as is" in the app sample that you sent to me before. Right now I am not sure if the above code cause that the stuff don't work in IE 11... or if is the core code of the library... maybe the above code can be changed to work in IE 11 too...
David, thank you very much, it works like a charm. Now on to updating and deleting, hopefully I won't need to bother you again for a bit.
Cheers,
Pete
Hello Peter,
Please, don't worry at all! I am happy to help when possible! So don't hesitate to ask what you need, but, please, try to be specific, so we can focus on certain specific error, unexpected behaviour, etc. For example, Firebase appear very interesting, but, my god, I have no time right now to study Firebase properly... (and unfortunately I don't know it already) but as you can see I can help anyway... by feed the Report, for example, etc.
Maybe in other situations I can deep into certain API, etc., but, right now I am really busy... and I am sorry for that.
P.S. About the IE 11 problem... I try this way:
But then I fall from my horse, because the error which appear in the console is related with the "firebase.js" script... so I am not sure (right now) what happen... but to me is strange to avoid IE 11... maybe at least this must me documented in some where... at least one thing can be added here: testing the app in Microsoft Edge works as expected...
P.S.2. My modified code don't work even in Edge... so don't think on use it, but use the code that works like expected. :-/
Hi,
Quick question. When adding a record to the database I use the following code
In order to use user data rather than hard coded data I want to push the input field values into the js function but am having a problem because they need to be inside quotation marks in order for the script to access them but being inside the quotation marks makes it use whatever I put in there as a string. Is there a trick to this?
Hello Peter,
If I am not wrong (and am I thinking in the same quotes), the quotes are placed in your code because is required, that is, "Title 1" is a string value, therefore must be placed inside single or double quotes in Javascript.
However, talking about variables, we no need the quotes, in fact, if we use the quotes, what is used is the name of the variable, to say like that, so the below code must work:
I guess that yesterday must have been too long a day, I could have sworn that this was the first thing that I tried. It is working properly now so maybe I had a syntax error.
Anyway, thanks once again.
Pete
Anyway, thanks once again.
Pete
No problem, Peter, I perfectly understand it! :-)
Hi,
When syncing and displaying the list of notes in the Notes view I have the following code on view show:
What I am trying to do is to block the app while the data is being retrieved and unblock it as soon as it is displayed. Depending on where I place UnblockApp it will either instantly unblock it as soon as it blocks it or it won't unblock it at all. Could you please let me know how I need to handle this to get it to unblock it at the right time?
Hello
You must unblock the app in the "then" function, maybe at the beginning or just before "$scope.$apply()". On the other hand, you are trying to use "window.App.RootScope.UnblockApp", but, if I am not wrong, what you wanted is the Javascript code of the AB function... in this case is "blockUI.stop();" (without the quotes).
P.S. Please, Peter, consider to open another thread, maybe a "volume II" if you wanted.
Thanks, that worked perfectly. I haven't seen blockUI.stop(); before. Is this in the documentation somewhere and are there other js equivalents of AB functions or do I need to just Google angular js functions? I will start a new thread for the next challenge.
Pete
Hello Peter,
The way to know what Javascript produces certain action, is to take a look at the "app.js" file: we can do it from the program's menu too.
Everybody can read the DecSoft support forum for learning purposes, however only DecSoft customers can post new threads. Purchase one or more licenses of some DecSoft products in order to give this and other benefits.
DecSoft Feeds