How do I make my firebase database public - firebase

I have a database in firebase and I want to make it public like https://publicdata-transit.firebaseio.com/sf-muni
What I see here they have a prefix "pulicdata", How do I get it?

A publicly accessible read-only dashboard, like the one you're referring to, is only available for apps managed by Firebase themselves. You cannot enable it on your own applications.

This won't do any formatting (you can make it pretty if you want), but this will take your snapshot and just put it up on the screen for anyone to see as long as you have your settings for read as true.
<html>
<head>
<script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
</head>
<body>
<div id='displaySnapshotDiv'></div>
<script>
var myDataRef = new Firebase('https://MY-FIREBASE-NAME-GOES-HERE.firebaseio.com/');
myDataRef.on('value', function(snapshot) {
displaySnapshot(snapshot.val());
});
function displaySnapshot(snapshot) {
$('<div/>').text(JSON.stringify(snapshot)).appendTo($('#displaySnapshotDiv'));
$('#displaySnapshotDiv')[0].scrollTop = $('#displaySnapshotDiv')[0].scrollHeight;
};
</script>
</body>
</html>
If you want it to be a little more readable, you could do something like:
<!-- language: lang-html -->
<html>
<head>
<script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
</head>
<body>
<div id='displaySnapshotDiv'></div>
<script>
var myDataRef = new Firebase('https://MY-FIREBASE-NAME-GOES-HERE.firebaseio.com/');
myDataRef.on('child_added', function(snapshot) {
displaySnapshotNeatly(snapshot.val());
});
function displaySnapshotNeatly(snapshot) {
$('<div/>').text(JSON.stringify(snapshot)).appendTo($('#displaySnapshotDiv'));
};
</script>
</body>
</html>
Here is the second one working in JSFiddle: https://jsfiddle.net/lukeschlangen/rzfn45pz/
And here is the second one with your firebase data (please tell me the security settings for writing are set to something other than true?): https://jsfiddle.net/lukeschlangen/rzfn45pz/2/
It seems like you might want to do some formatting, but this is displaying all of the data.

The data can be available public if you change your database rules to true or use the auth token for authentication. But since you do not want to authenticate access, all you simply need to do is Make you access rules public
for more information check out: https://firebase.google.com/docs/reference/rest/database/
enter image description here

Related

Google sign-in sends multiple requests on redirect

I'm trying to implement Google sign-in on my web application, as an add-on to normal server-side authentication. The problem is,I'm not able to redirect the page to a Servlet to go to the user homepage. Instead, whenever I try to redirect ONCE,I get continuous requests to the next Servlet(I used print statements on the Servlet to check this).It seems as if the page reloads after every request sent to the Servlet. I also tried using form data to fix this, but that doesn't work either.
How do I stop this from happening? I'm a newbie, so any dumbing down will be much appreciated. In case this is a duplicate, please do send the link. I have tried to find a similar question, but have had no luck so far.
Note: I have removed all irrelevant lines of code.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
<script src="https://apis.google.com/js/platform.js" async defer></script>
<meta name="google-signin-scope" content="profile email">
<meta name="google-signin-client_id"
content="CLIENT_ID_HERE">
<script>
function onSignIn(googleUser) {
var profile = googleUser.getBasicProfile();
//document.cookie = "emailId=" + profile.getEmail();
redirectPost(profile.getEmail());
//window.location = "http://localhost:8080/auth/gmailhome";
}
function redirectPost(data) {
var inputElement = document.getElementById('emailId');
var form = document.getElementById("gmailLoginForm");
inputElement.value = data;
form.submit();
}
</script>
</head>
<body>
<form method="post" action="gmaillogin" id="gmailLoginForm">
<input type="hidden" id="emailId" name="emailId">
</form>
<div class="g-signin2" data-onsuccess="onSignIn"></div>
</body>
</html>
I figured out how to solve this issue, and it just occurred to me that I can leave this here in case someone needs it in the future.
The problem we have is that onSignin() gets called as long as the user is signed in, and the status of the user doesn't reflect that they are signed in. I'm not sure why the state isn't changed automatically-perhaps there is some other purpose to this, or this is just low-priority right now.
So, what we do is add a listener that monitors whether or not the user is signed-in.
Something like this
function onLoad() {
gapi.load('auth2', function () {
gapi.auth2.init();
gapi.auth2.isSignedIn.listen(function (isSignedIn) {
this.setState({ status: isSignedIn })
})
})
}

Pupeteer with very large PDF not waiting until loaded

Problem: Pupeteer generates a PDF when only about 5% of my data is there.
I'm using puppeteer to pass about 3000 lines of text to a handlebars HTML template I'm then trying to use puppeteer to print a PDF from. Had this working earlier today but a Git fiasco made me roll back and now I cant seem to generate a pdf longer than 3.5 pages (earlier this week it was up to about 90).
I'm thinking this has to do with the following:
const browser = await puppeteer.launch({
args: ['--no-sandbox'],
headless: true
});
var page = await browser.newPage();
await page.goto(`data:text/html;charset=UTF-8,${html}`, {
waitUntil:'load'. <------ (i've also tried networkidle0 and networkidle2)
});
await page.pdf(options);
await browser.close()
Heres the template.html
<!DOCTYPE html>
<html>
<head>
<title>PDF</title>
<head>
<style type="text/css">
</style>
<meta charset="utf-8">
</head>
<body>
<ul id="script">
{{#each this}}
<li class={{category}}>{{text}}</li>
{{/each}}
</ul>
</body>
</html>
My data is an array of 3300 objects and I know it's getting where it needs to. Is there anyway to set a static timeout for Puppeteer? I realize this is a lot of data but am I doing something wrong here?
The waitUntil:'load' goto parameter is the default, you don't need to set it, while the networkidle0 and networkidle2 options are waiting for network connections to be finished: as you don't have any of these as it is a plain HTML markup it neither helps to wait until it is populated with your desired data. I would rather suggest you to use domcontentloaded if you want to use waitUntil. You can check what are the exact differences between them in the docs.
I.) Your problem can be solved with a static timeout, it is called page.waitFor. If you are sure all data will be in the pdf in a certain time then you can set a static timeout, e.g. 3000 milliseconds (3 seconds) before the pdf generation.
await page.waitFor(3000);
await page.pdf(options);
II.) If you can access the very last text value of each object, you could also wait for the content to be appeared. But it will only work if you have unique content for each <li> element.
const veryLastItemText = options[options.length - 1].text // if "options" is an array with "category" and "text" property names inside
await page.waitForXPath(`//li[contains(text(), "${veryLastItemText}")]`);
await page.pdf(options);

Google App Script include css from another file

I'm trying out Google app scripts for the first time and I'm having a nightmare trying to get it to read my Stylesheet.
I've read dozens of pages and they all say the same thing, but it just doesn't work.
This is my code.gs :-
return HtmlService.createHtmlOutputFromFile('index');
}
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.getContent();
}
This is my index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<?!= include('Stylesheet'); ?>
</head>
<body>
Hello!!!!<br>
This is a test to see how Google scripts work<br>
</body>
</html>
This is my Stylesheet
<style>
html{
min-height:100%;
background-color:blue;
}
</style>
If I put the style tags inside the index file, it works fine, but when I try to include it, the include script just gets added to my page. I've tried using createTemplateFromFile as well, but it has the same result. It seems like index.html is ignoring the script identifier <?!
Please could someone tell me what I'm doing wrong as every page I've looked at says to do it this way!!!!!
Thanks
I assume it could be because your are not calling .evaluate()
return HtmlService.createTemplateFromFile('index').evaluate();
https://developers.google.com/apps-script/guides/html/best-practices#code.gs
Seems like it's been missed to add evaluate() function.
As per the HTML Service: Templated HTML , one should be using particular scriptlet as per the requirement.
I'd recommend a generalized solution like below:
function include(fileName, params) {
return render(fileName, params).getContent();
}
function render(path, params) {
let htmlBody = HtmlService.createTemplateFromFile(path);
// for prop drilling
htmlBody.allParams = {};
if (params) {
htmlBody.allParams = params;
Object.keys(params).forEach(key => {
htmlBody[key] = params[key];
});
}
return htmlBody.evaluate();
}

google blogger: how to replace old analytics snippet with new asynchronous snippet?

I have a Google Analytics account and I need to use the new asynchronous snippet in my blogger blog. According to documentation, I should insert GA <script> tag to the bottom of the <head> section.
In my blogger html template, the <body> section ends with this:
</div>
</div>
<script type='text/javascript'>
window.setTimeout(function() {
document.body.className = document.body.className.replace('loading', '');
}, 10);
</script>
<b:include data='blog' name='google-analytics'/>
</body>
So this is the old snippet and should be disabled, yes?
Well, I commented the line <b:include data='blog' name='google-analytics'/> and scrolled up to the <head> section. It ends like this:
#layout .region-inner {
min-width: 0;
width: auto;
}
]]>
</b:template-skin>
</head>
So I inserted the Google Analytics <script> tag just before the </head>. But it doesn't upload and it says that I have an error.
So, how to do it?
Well, the answer to my question is that the error I was getting yesterday has not occurred today, when I made a test one more time. So basically there is no issue at all: either deleting or commenting the old GA snippet should work.

Using the Facebook API after JavaScript Login

This is something I have been trying to figure out, but I am not sure exactly how to do it. I have a flex application that logs into facebook, but after that I can't access any of the facebook api. Right now I am using this HTML to log in:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<!-- Include support librarys first -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
//This example uses the javascript sdk to login before embedding the swf
var APP_ID = "[My App ID Here]";
var REDIRECT_URI = "http://apps.facebook.com/isotesthoskins/";
var PERMS = "publish_stream,offline_access"; //comma separated list of extended permissions
function init() {
FB.init({appId:APP_ID, status: true, cookie: true});
FB.getLoginStatus(handleLoginStatus);
}
function handleLoginStatus(response) {
if (response.session) { //Show the SWF
//A 'name' attribute with the same value as the 'id' is REQUIRED for Chrome/Mozilla browsers
swfobject.embedSWF("isotest.swf", "flashContent", "760", "500", "9.0", null, null, null, {name:"flashContent"});
} else { //ask the user to login
var params = window.location.toString().slice(window.location.toString().indexOf('?'));
top.location = 'https://graph.facebook.com/oauth/authorize?client_id='+APP_ID+'&scope='+PERMS+'&redirect_uri='+REDIRECT_URI+params;
}
}
$(init);
</script>
And everything logs in fine, but when I try this in the application after I am logged in, nothing happens.
Facebook.api("/me", function(response){
changeText.text = response.name;
});
I don't need to init because it was done by the javascript login, right? I might be wrong about that though.
Looks like you are calling the API using the Flex SDK.
That is not going to work, as the token is not shared between JS and Flex.
You should login on the Flex side or thunk into the JS to make the call.

Resources