The source for the Firebase codelab for building a cross-platform chat app
Home Page: https://firebase.google.com
License: Apache License 2.0
This is the source code for the Firebase FriendlyChat codelab. It includes start and end versions of the code for Web, Cloud Functions, Performance Monitoring. To get started, open the codelab instructions:
Please read and follow the steps in the CONTRIBUTING.md
See LICENSE
getphotourl is getting nullpointerexception in android.
not sure if this is the correct way to provide this feedback...
but when following instruction from:
https://codelabs.developers.google.com/codelabs/firebase-web/index.html
Section 11 and following along editing web-start project.
setImageUrl snippet fails to create correct URL.
in console getting:
firebase.js:362 Uncaught ReferenceError: imageStorageUri is not defined
reference to imageStorageUri should be imageUri
code is correct in completed web project here
Test Message Sync section, When I add a message from console, it doesn't update the application UI. Also, it's not clear as to necessary steps for performing this action.
I have deployed the completed web app to firebase, however when I go there, I get a message saying 'Site not Found'. Is there any way to fix this?
I am trying to deploy the completed app, however it is not working. Here are my logs:
egaumbp:web gg$ firebase deploy
=== Deploying to 'friendlychat-6e4c3'...
i deploying database, storage, hosting
i storage: checking rules for compilation errors...Error: Compilation error in storage.rules:
[E] 3:12 - Unexpected '<'.
Having trouble? Try firebase deploy --help
When I delete all the messages from console, it doesn't update the application UI by removing all the messages.
Followed the tutorial For Android and after implementing the sign in/sign out, Firebase threw an exception like
com.google.firebase.FirebaseApiNotAvailableException: API: InternalFirebaseAuth.FIREBASE_AUTH_API is not available on this device.
When a record is loaded from Firebase, the photoURL isn't being populated in the model. This is because the photoURL db property doesn't match the Camel Case attribute referenced in the model.
Please change photoUrl to photoURL, setPhotoUrl to setPhotoURL and getPhotoUrl to getPhotoURL.
This is not an issue when a message is sent because the model's constructor is called and sets the right property. I'm not sure if that value is carried through to the DB but the client UI looks correct.
The version of Firebase CLI installed on the Codelab Computers (firebase 2.2.x) are older that the version used for the Codelab examples (firebase 3.x.x). It should be indicated in the Codelab documentation that users have to use the updated version of firebase CLI.
Whilst working through you Web Chat App Javascript tutorial I hit an error when executing firebase serve.
From, firebase-debug.log:
[debug] TypeError: Cannot read property 'public' of undefined at Server.<anonymous> (/usr/local/lib/node_modules/firebase-tools/commands/serve.js:25:15)
I was able to prevent this error by commenting out the following lines in serve.js (obviously not ideal):
if (config.public && config.public !== '.') { logger.info(chalk.bold('Public Directory:'), config.public); }
In the Initialize Firebase Auth section, the Firebase SDK features, this.auth(); etc return an error saying this.auth() is not a function:
// Shortcuts to Firebase SDK features.
this.auth = this.auth();
this.database = this.database();
this.storage = this.storage();
main.js:59 Uncaught TypeError: this.auth is not a function
Changing these to firebase or more explicitly window.firebase solves this:
// Shortcuts to Firebase SDK features.
this.auth = firebase.auth();
this.database = firebase.database();
this.storage = firebase.storage();
Workaround is to replace the line
performSegueWithIdentifier(Constants.Segues.FpToSignIn, sender: nil)
with
dismissViewControllerAnimated(true, completion: nil)
in the signOut function in FCViewController.swift
2016-05-20 14:37:10.156 FriendlyChatSwift[32573:72997859] *** Assertion failure in -[UITableView _endCellAnimationsWithContext:], /BuildRoot/Library/Caches/com.apple.xbs/Sources/UIKit_Sim/UIKit-3512.60.7/UITableView.m:1716 2016-05-20 14:37:10.162 FriendlyChatSwift[32573:72997859] *** Terminating app due to uncaught exception 'NSInternalInconsistencyException', reason: 'Invalid update: invalid number of rows in section 0. The number of rows contained in an existing section after the update (1) must be equal to the number of rows contained in that section before the update (7), plus or minus the number of rows inserted or deleted from that section (1 inserted, 0 deleted) and plus or minus the number of rows moved into or out of that section (0 moved in, 0 moved out).' *** First throw call stack: ( 0 CoreFoundation 0x0000000108852d85 __exceptionPreprocess + 165 1 libobjc.A.dylib 0x000000010a9bddeb objc_exception_throw + 48 2 CoreFoundation 0x0000000108852bea +[NSException raise:format:arguments:] + 106 3 Foundation 0x0000000108ca3d5a -[NSAssertionHandler handleFailureInMethod:object:file:lineNumber:description:] + 198 4 UIKit 0x00000001095394ca -[UITableView _endCellAnimationsWithContext:] + 15146 5 UIKit 0x000000010954fcf0 -[UITableView _updateRowsAtIndexPaths:updateAction:withRowAnimation:] + 303 6 FriendlyChatSwift 0x0000000105a13f16 _TFFC17FriendlyChatSwift16FCViewController14viewWillAppearFSbT_U_FCSo15FIRDataSnapshotT_ + 774 7 FriendlyChatSwift 0x0000000105adf419 __63-[FIRDatabaseQuery observeEventType:withBlock:withCancelBlock:]_block_invoke + 37 8 FriendlyChatSwift 0x0000000105b064bc __43-[FChildEventRegistration fireEvent:queue:]_block_invoke64 + 88 9 libdispatch.dylib 0x000000010b467d9d _dispatch_call_block_and_release + 12 10 libdispatch.dylib 0x000000010b4883eb _dispatch_client_callout + 8 11 libdispatch.dylib 0x000000010b4701ef _dispatch_main_queue_callback_4CF + 1738 12 CoreFoundation 0x00000001087ac0f9 __CFRUNLOOP_IS_SERVICING_THE_MAIN_DISPATCH_QUEUE__ + 9 13 CoreFoundation 0x000000010876db99 __CFRunLoopRun + 2073 14 CoreFoundation 0x000000010876d0f8 CFRunLoopRunSpecific + 488 15 GraphicsServices 0x000000010c8bcad2 GSEventRunModal + 161 16 UIKit 0x0000000109409f09 UIApplicationMain + 171 17 FriendlyChatSwift 0x0000000105a1974d main + 125 18 libdyld.dylib 0x000000010b4bc92d start + 1 ) libc++abi.dylib: terminating with uncaught exception of type NSException
In step 12 (Storage Security Rules), the last section header is "Deploy Database Security Rules", while it should be "Deploy _Storage_ Security Rules"
The replacement code for FCViewController.swift at https://codelabs.developers.google.com/codelabs/firebase-ios-swift/#9 does not build.
A workaround is to use the code from ios/swift/FriendlyChatSwift/FCViewController.swift
google signin JSON returning photoURL NULL value .
see ... https://codelabs.developers.google.com/codelabs/firebase-web/#10
Is there a missing ">" in this path?
Upload the file to Firebase Storage to the path: /<uid>/<timestamp/<file_name>
After following the steps in codelabs, I get this... Undeclared types...
implemented this sample code, it works in test device, however google sign in stucks in real device downloaded from playstore. is there any changes to be made for final app. implemented as per tutorial given though.
While trying to sign-in, I keep getting the following error.
E/SignInActivity: Google Sign In failed. Status{statusCode=unknown status code: 12501, resolution=null}, null
I suspect it's the GoogleSignInOptions requestIdToken() method causing the issue. I changed the string passed as the default_web_client_id to the credentials of server key auto generated in Google APIs credentials. That doesn't seem to work either.
Am I missing something, or doing something wrong?
The second code block that shows how to do the setImageUrl.
The "imageStorageUri" parameter should be "imageUri".
It is correct in the full web solution.
The code is bugging out on this line:
self.profileImageStorage.child(imagePath).putData(imageData!, metadata: metadata) { (metadata, error) in
because the line:
let imageData = UIImageJPEGRepresentation(image, 1)
is returning nil and then failing when putting the data.
Currently I am just trying to get the upload to work before implementing further code relavant to my project. Here is my picker delegate code:
func imagePickerController(picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [String : AnyObject]) {
let image : UIImage = info[UIImagePickerControllerOriginalImage] as! UIImage
self.profileImage.image = image
let imageData = UIImageJPEGRepresentation(image, 1)
let imagePath = FIRAuth.auth()!.currentUser!.uid +
"/\(Int(NSDate.timeIntervalSinceReferenceDate() * 1000)).jpg"
let metadata = FIRStorageMetadata()
metadata.contentType = "image/jpeg"
self.profileImageStorage.child(imagePath).putData(imageData!, metadata: metadata) { (metadata, error) in
if let error = error {
print("Error uploading: \(error)")
return
}
}
picker.dismissViewControllerAnimated(true, completion:nil)
}
After typing firebase use --add at the end of step 5, what should one type because it's not clear from the provided documentation.
this paragraph is wrong or not updated.
https://codelabs.developers.google.com/codelabs/firebase-ios-objc/index.html?index=..%2F..%2Findex#4
FCViewController.m
- (IBAction)signOut:(UIButton *)sender {
FIRAuth *firebaseAuth = [FIRAuth auth];
NSError *signOutError;
BOOL status = [firebaseAuth signOut:&signOutError];
if (!status) {
NSLog(@"Error signing out: %@", signOutError);
return;
}
[AppState sharedInstance].signedIn = false;
[self performSegueWithIdentifier:SeguesFpToSignIn sender:nil];
}
[self performSegueWithIdentifier:SeguesFpToSignIn sender:nil];
↓
[self dismissViewControllerAnimated:YES completion:NULL];
Hi,
I'm following the docs precisely (https://codelabs.developers.google.com/codelabs/firebase-web/#) but I keep arriving at the error:
I am not able to see a "Sign-in" button (despite it being in the HTML).
Here is the parts I added to main.js in case there were any errors there (seeing as parts of the document snippets of code ended in ... somewhat confusing...):
FriendlyChat.prototype.initFirebase = function() {
// Shortcuts to Firebase SDK features.
this.auth = firebase.auth();
this.database = firebase.database();
this.storage = firebase.storage();
// Initiates Firebase auth and listen to auth state changes.
this.auth.onAuthStateChanged(this.onAuthStateChanged.bind(this));
};
FriendlyChat.prototype.signIn = function() {
// Sign in Firebase using popup auth and Google as the identity provider.
var provider = new firebase.auth.GoogleAuthProvider();
this.auth.signInWithPopup(provider);
};
FriendlyChat.prototype.signOut = function() {
// Sign out of Firebase.
this.auth.signOut();
};
FriendlyChat.prototype.onAuthStateChanged = function(user) {
if (user) { // User is signed in!
// Get profile pic and user's name from the Firebase user object.
var profilePicUrl = user.photoURL;
var userName = user.displayName;
}};
FriendlyChat.prototype.checkSignedInWithMessage = function() {
// Return true if the user is signed in Firebase
if (this.auth.currentUser) {
return true;
}};]
SEPERATE ISSUE/NOTE:
Initially I kept getting the error:
You have not enabled Firebase Storage prior to importing the firebase SDK
I looked at my script, and it seems there is no value for "storageBucket"
The FIX If I go to the firebase console>Auth>Web Setup (at the top), it generates a snippet of code which includes a storageBucket.
This storageBucket code was only generated once I enabled a sign-in method on Auth.
You should update the docs to this affect.
Using iOS Simulator, I'm limited 10 characters when I type and send a message from the application UI.
in saveImageMessage this:
imageUrl: FriendlyChat.LOADING_IMAGE,
Should be:
imageUrl: FriendlyChat.LOADING_IMAGE_URL,
As earlier in main.js this is set:
FriendlyChat.LOADING_IMAGE_URL = 'https://www.google.com/images/spin-32.gif';
Also there are a few variable name changes required in setImageUrl as the variables passed in are different:
// Sets the URL of the given img element with the URL of the image stored in Firebase Storage.
FriendlyChat.prototype.setImageUrl = function(imageStorageUri, imgElement) {
// If the image is a Firebase Storage URI we fetch the URL.
if (imageUri.startsWith('gs://')) {
image.src = FriendlyChat.LOADING_IMAGE; // Display a loading image first.
this.storage.refFromURL(imageStorageUri).getMetadata().then(function(metadata) {
imgElement.src = metadata.downloadURLs[0];
});
} else {
image.src = imageUri;
}
};
Working version:
// Sets the URL of the given img element with the URL of the image stored in Firebase Storage.
FriendlyChat.prototype.setImageUrl = function(imageStorageUri, imgElement) {
// If the image is a Firebase Storage URI we fetch the URL.
if (imageStorageUri.startsWith('gs://')) {
imgElement.src = FriendlyChat.LOADING_IMAGE_URL; // Display a loading image first.
this.storage.refFromURL(imageStorageUri).getMetadata().then(function(metadata) {
imgElement.src = metadata.downloadURLs[0];
});
} else {
imgElement.src = imageUri;
}
};
Changed imageUri to imageStorageUri, image.src to imgElement.src and LOADING_IMAGE to LOADING_IMAGE_URL.
The CSS .message-container .name { width: 100%; padding-left: 40px; } is causing an undesired x-scroll on the messages list; due to box-sizing adding the 40px padding to the total width.
Could modify the rule above or add box-sixing: border-box.
In your project in Firebase console visit the Database section on the left navigation bar. In the overflow menu of the Database select Import JSON.
could not find import button
There is a bug in a code
// Sets the URL of the given img element with the URL of the image stored in Firebase Storage. FriendlyChat.prototype.setImageUrl = function(imageUri, imgElement) { // If the image is a Firebase Storage URI we fetch the URL. if (imageUri.startsWith('gs://')) { imgElement.src = FriendlyChat.LOADING_IMAGE; // Display a loading image first. this.storage.refFromURL(imageStorageUri).getMetadata().then(function(metadata) { imgElement.src = metadata.downloadURLs[0]; }); } else { imgElement.src = imageUri; } };
In line
this.storage.refFromURL(imageStorageUri).getMetadata().then(function(metadata) {
imageStorageUri should be replaced with imageUri
page: https://codelabs.developers.google.com/codelabs/firebase-web/#4
under step 5 the instruction;
Setup the Firebase CLI to use your Firebase Project:
$~> firebase use --add
returns:
Error: firebase use must be run from a Firebase project directory.
Syntax error when first building Swift tutorial https://codelabs.developers.google.com/codelabs/firebase-ios-swift/#2
I've found that when pulling an uploaded image from storage, main.js' setImageUrl() uses imageStorageUri instead of imageUri. This results in an undefined error for me. This line works though:
this.storage.refFromURL(imageUri).getMetadata().then(function(metadata) {
There is a missing step in "5. Install the Firebase Command Line Interface." One must firebase init and enter "." for the public directory. Please update the tutorial.
Without doing this firebase serve will fail as it is looking for "public." See #4
On page 5 of the tutorial, https://codelabs.developers.google.com/codelabs/firebase-ios-swift/#4, I get an Internal Error when clicking "Create Account".
Here is the tail of the log from the Xcode console:
<FIRAnalytics/DEBUG> Uploading data. Host: https://play.googleapis.com/log
2016-06-07 16:52:47.281 FriendlyChatSwift[90258:] <FIRAnalytics/DEBUG> Received SSL challenge for host. Host: https://play.googleapis.com/log
An internal error has occurred, print and inspect the error details for more information.
https://firebase.google.com/docs/samples/
mentions friendlychat is supposed to have FCM.
Currently reads:
FriendlyChat.prototype.saveImageMessage = function(e) {
var file = event.target.files[0];
Should read:
FriendlyChat.prototype.saveImageMessage = function(event) {
var file = event.target.files[0];
It is correct in the web directory.
when following the instructions here: https://console.firebase.google.com/project/friendlychat-740b9/hosting
on step 1: Install Firebase tools
it says to install using the command: "npm install -g firebase-tools"
yet on this page: https://codelabs.developers.google.com/codelabs/firebase-web/#4
it says after installing, check the version using: "firebase version" and that the version should be "3..."
However it reports version 2.2.
using the instructions here: https://www.npmjs.com/package/firebase-cli
by running the commands:
npm install firebase-cli
and then
npm install -g firebase-tools
it reports version 3.0.
see ... https://codelabs.developers.google.com/codelabs/firebase-web/#10
should this be
gs://<bucket>/<uid>/<timestamp>/<file_name>.
instead of
gs://<bucket>/<uid>/<timestamp/<file_name>.
here ...
In the chat messages we saved the Firebase Storage reference of the images. These are of the form
gs://<bucket>/<uid>/<timestamp/<file_name>. To display these images we need to query Firebase Storage for a URL.
Image upload does not work. when I pick an image the spinner goes on forever without uploading.. he is the console output:
Failed to load resource: https://friendlychat-7f0bc.firebaseapp.com/null
server responded with a status of 404 (Not Found)
If I sign out and sign in again the spinner keeps loading..
Also in order to upload the image, the image name has to start with "image", it would be better to check common extensions like .png, .jpg,..
When I try add an image on both iPhone/Simulator, the application crashes with the following message:
'NSInternalInconsistencyException', reason: 'Invalid update: invalid number of rows in section 0. The number of rows contained in an existing section after the update (1) must be equal to the number of rows contained in that section before the update (4), plus or minus the number of rows inserted or deleted from that section (1 inserted, 0 deleted) and plus or minus the number of rows moved into or out of that section (0 moved in, 0 moved out).'
I am following the instructions exactly but I'm getting this error.
[debug] ----------------------------------------------------------------------
[debug] Command: C:\Program Files\nodejs\node.exe C:\Users\kuokkit.chan\AppData\Roaming\npm\node_modules\firebase-tools\bin\firebase serve
[debug] CLI Version: 3.0.0
[debug] Platform: win32
[debug] Node Version: v4.4.4
[debug] Time: Tue May 24 2016 09:53:03 GMT+0800 (Malay Peninsula Standard Time)
[debug] ----------------------------------------------------------------------
[debug]
[info] Starting Firebase development server...
[info]
[info] Project Directory: C:\Users\kuokkit.chan\Desktop\Firebase\friendlychat\web-start
[debug] TypeError: Cannot read property 'public' of undefined
at Server. (C:\Users\kuokkit.chan\AppData\Roaming\npm\node_modules\firebase-tools\commands\serve.js:24:15)
at Server.g (events.js:260:16)
at emitNone (events.js:67:13)
at Server.emit (events.js:166:7)
at emitListeningNT (net.js:1260:10)
at nextTickCallbackWith1Arg (node.js:431:9)
at process._tickCallback (node.js:353:17)
[error]
[error] Error: An unexpected error has occurred.
Please help
// Sets the URL of the given img element with the URL of the image stored in Firebase Storage.
FriendlyChat.prototype.setImageUrl = function(imageUri, imgElement) {
// If the image is a Firebase Storage URI we fetch the URL.
if (imageUri.startsWith('gs://')) {
imgElement.src = FriendlyChat.LOADING_IMAGE; // Display a loading image first.
this.storage.refFromURL(imageStorageUri).getMetadata().then(function(metadata) {
imgElement.src = metadata.downloadURLs[0];
});
} else {
imgElement.src = imageUri;
}
};
The line this.storage.refFromURL(imageStorageUri).getMetadata().then(function(metadata) {
should have imageUri in parenthesis instead of imageStorageUri.
Secondly, and unrelated to the title, image upload doesn't seem to work for my and my friend. We've tried everything.
I navigated to the web-start subdirectory, then tried to run
firebase init
but am getting warnings like:
is this expected? I tried to skip the init command but if I try to run
firebase use --add
firebase serve
an error results after trying to start the server: Error: An unexpected error has occurred.
On method onActivityResult of mi MainActivity.java show this
} else { // Google Sign In failed Log.e(TAG, "Google Sign In failed.");
in FCViewController.swift (FriendlyChatSwift)
The line
if let imageUrl = message[Constants.MessageFields.imageURL] should be
if let imageUrl = message[Constants.MessageFields.photoUrl]
There is no constant imageUrl
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
// Dequeue cell
let cell: UITableViewCell! = self.clientTable .dequeueReusableCellWithIdentifier("tableViewCell", forIndexPath: indexPath)
// Unpack message from Firebase DataSnapshot
let messageSnapshot: FIRDataSnapshot! = self.messages[indexPath.row]
let message = messageSnapshot.value as! Dictionary<String, String>
let name = message[Constants.MessageFields.name] as String!
if let imageUrl = message[Constants.MessageFields.**photoUrl**] {
if imageUrl.hasPrefix("gs://")
https://codelabs.developers.google.com/codelabs/firebase-web/index.html#10
In section
Display images from Firebase Storage
imgElement.src = FriendlyChat.LOADING_IMAGE; // Display a loading image first.
should be
imgElement.src = FriendlyChat.LOADING_IMAGE_URL; // Display a loading image first.
signInWithCredential:onComplete:false
signInWithCredential com.google.firebase.FirebaseException: An internal error has occured. [ Invalid id_token in IdP response: ...]
at com.google.android.gms.internal.zzacq.zzbN(Unknown Source)
at com.google.android.gms.internal.zzacn$zzg.zza(Unknown Source)
at com.google.android.gms.internal.zzacy.zzbO(Unknown Source)
at com.google.android.gms.internal.zzacy$zza.onFailure(Unknown Source)
at com.google.android.gms.internal.zzact$zza.onTransact(Unknown Source)
at android.os.Binder.execTransact(Binder.java:453)
Using emulator to get this error, is that the cause of this?
Following the instructions for the tutorial, when I attempt to log in, the pop-up windows flashes on the screen for a fraction of a second and disappears, and never logs me into the app. I copied the main.js from the "web" dir into "web-start" and it still doesn't work.
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.