Skip to content

Instantly share code, notes, and snippets.

@puf puf/index.html
Last active Nov 16, 2018

Embed
What would you like to do?
Zero to App: Develop with Firebase (for Web - Google I/O 2016)
<html>
<head>
<script src="https://www.gstatic.com/firebasejs/3.0.0/firebase.js"></script>
<title>ZeroToApp</title>
<style>
#messages { width: 40em; border: 1px solid grey; min-height: 20em; }
#messages img { max-width: 240px; max-height: 160px; display: block; }
#header { position: fixed; top: 0; background-color: white; }
.push { margin-bottom: 2em; }
@keyframes yellow-fade { 0% {background: #f2f2b8;} 100% {background: none;} }
.highlight { -webkit-animation: yellow-fade 2s ease-in 1; animation: yellow-fade 2s ease-in 1; }
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Step 0: HTML defined, variables for elements
var messagesList = document.getElementById('messages'),
textInput = document.getElementById('text'),
sendButton = document.getElementById('send'),
login = document.getElementById('login'),
googleLogin = document.getElementById('google'),
facebookLogin = document.getElementById('facebook'),
signedIn = document.getElementById('loggedin'),
logout = document.getElementById('logout'),
usernameElm = document.getElementById('username'),
password = document.getElementById('password'),
username = "Web";
var config = {
apiKey: "<copy from Firebase Console>",
databaseURL: "<copy from Firebase Console>",
storageBucket: "<copy from Firebase Console>",
authDomain: '<copy from Firebase Console>'
};
// Get the Firebase app and all primitives we'll use
var app = firebase.initializeApp(config),
database = app.database(),
auth = app.auth(),
storage = app.storage();
var databaseRef = database.ref().child('chat');
sendButton.addEventListener('click', function(evt) {
var chat = { name: username, message: textInput.value };
databaseRef.push().set(chat);
textInput.value = '';
});
// Listen for when child nodes get added to the collection
databaseRef.on('child_added', function(snapshot) {
// Get the chat message from the snapshot and add it to the UI
var chat = snapshot.val();
addMessage(chat);
});
// Show a popup when the user asks to sign in with Google
googleLogin.addEventListener('click', function(e) {
auth.signInWithPopup(new firebase.auth.GoogleAuthProvider());
});
// Allow the user to sign out
logout.addEventListener('click', function(e) {
auth.signOut();
});
// When the user signs in or out, update the username we keep for them
auth.onAuthStateChanged(function(user) {
if (user) {
setUsername(user.displayName);
}
else {
// User signed out, set a default username
setUsername("Web");
}
});
function handleFileSelect(e) {
var file = e.target.files[0];
// Get a reference to the location where we'll store our photos
var storageRef = storage.ref().child('chat_photos');
// Get a reference to store file at photos/<FILENAME>.jpg
var photoRef = storageRef.child(file.name);
// Upload file to Firebase Storage
var uploadTask = photoRef.put(file);
uploadTask.on('state_changed', null, null, function() {
// When the image has successfully uploaded, we get its download URL
var downloadUrl = uploadTask.snapshot.downloadURL;
// Set the download URL to the message box, so that the user can send it to the database
textInput.value = downloadUrl;
});
}
file.addEventListener('change', handleFileSelect, false);
function setUsername(newUsername) {
if (newUsername == null) {
newUsername = "Web";
}
console.log(newUsername);
username = newUsername;
var isLoggedIn = username != 'Web';
usernameElm.innerText = newUsername;
logout.style.display = isLoggedIn ? '' : 'none';
facebookLogin.style.display = isLoggedIn ? 'none' : '';
googleLogin.style.display = isLoggedIn ? 'none' : '';
}
function addMessage(chat) {
var li = document.createElement('li');
var nameElm = document.createElement('h4');
nameElm.innerText = chat.name;
li.appendChild(nameElm);
li.className = 'highlight';
if ( chat.message.indexOf("https://firebasestorage.googleapis.com/") == 0
|| chat.message.indexOf("https://lh3.googleusercontent.com/") == 0
|| chat.message.indexOf("http://pbs.twimg.com/") == 0
|| chat.message.indexOf("data:image/") == 0) {
var imgElm = document.createElement("img");
imgElm.src = chat.message;
li.appendChild(imgElm);
}
else {
var messageElm = document.createElement("span");
messageElm.innerText = chat.message;
li.appendChild(messageElm);
}
messagesList.appendChild(li);
li.scrollIntoView(false);
sendButton.scrollIntoView(false);
}
//window.app = app; // NOTE: just for debugging
//for (var i=0; i < 10; i++) addMessage({ name: "Web", message: ''+i });
setUsername('Web');
});
</script>
</head>
<body>
<div id='header'>
<label for='username'><img src="https://www.gstatic.com/images/icons/material/system/1x/account_box_black_24dp.png" width="24"/></label>
<span id='username'></span>
<span id='login'>
<button id='google' class='idp-button'>Sign in with Google</button>
<button id='facebook' class='idp-button'>Sign in with Facebook</button>
</span>
<button id='logout' class='idp-button'>Sign out</button>
</div>
<div class="push"></div>
<ul id='messages'></ul>
<div id='footer'>
<img src="https://www.gstatic.com/images/icons/material/system/1x/add_a_photo_black_24dp.png" width="24"/>
<input type="file" id="file" name="file" />
<input id='text'></input>
<button id='send'>Send</button>
</div>
</body>
</html>
@muescha

This comment has been minimized.

Copy link

commented May 28, 2016

@vickenliu

This comment has been minimized.

Copy link

commented Jun 7, 2016

this is awesome....

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.