Zero to App: Develop with Firebase - Google I/O 2016

Firebase · 200K views · 2016 · 33:55

Open on YouTube

Web developmentSoftware (other)Distributed systemstalkdated

Why Stack Overflow recommends it

Stack Overflow users, often Firebase team members themselves, link it as the canonical example of pairing Firebase Storage with the Realtime Database to sync and display uploaded images.

Recommended by 5 people across 13 different months, 2016 to 2021.

What it is

A Google I/O 2016 session in which Firebase team members build a real-time chat app live on stage for Android, iOS and web. It covers Firebase Auth, the Realtime Database and Firebase Storage, with full source code published as gists.

What people said

Recommends Mike McDonald · 2016-05 · Stack Overflow · on “How to observe Firebase Storage Upload event”

Firebase Storage doesn't provide the same "sync" functionality as the Realtime Database (imagine what it would be like trying to sync 1GB objects...). You'll want to use the database to synchronize the metadata (such as download URLs, etc.) on file uploads like so: // Upload file to Firebase Storage storageRef.putData(imageData).observeStatus(.Success) { (snapshot) in // When the image has successfully uploaded, get it's download URL let url = snapshot.metadata?.downloadURL()?.absoluteString // Write data to the realtime database dbRef.child("photos").childByAutoId().setValue(["name": snapshot.metadata?.name, "url": url]) } ... dbRef.child("photos").observeEventType(.ChildAdded, withBlock: {

Recommends Mike McDonald · 2016-05 · Stack Overflow · on “How to populate Firebase storage images with recyclerview in android databinding”

Here's an example where we store a URL pointing to Storage, then download it using Glide into a recycler view. // Chat message text can contain a download URL or text public class ChatMessage { public String name; public String message; public ChatMessage() { } public ChatMessage(String name, String message) { this.name = name; this.message = message; } } // Use a custom ViewHolder populated from the chat message public class ChatMessageViewHolder extends RecyclerView.ViewHolder { private static final String TAG = "ChatMessageViewHolder"; private final Activity activity; TextView name, message; ImageView image; public ChatMessageViewHolder(Activity activity, View itemView) { super(itemView);

Recommends Frank van Puffelen · 2016-06 · Stack Overflow · on “getItemCount() on Adapter is returning 0”

The FirebaseRecyclerAdapter asynchronously synchronizes data from the database to your app. When you print the number of items, none of the data has been synchronized yet. To know whenever the data in an adapter changes, you can register an AdapterDataObserver . For example in our Zero to App talk at I/O [this video] , we used this snippet [LINK] to ensure the newest chat message would always be visible: adapter.registerAdapterDataObserver(new RecyclerView.AdapterDataObserver() { public void onItemRangeInserted(int positionStart, int itemCount) { messagesList.smoothScrollToPosition(adapter.getItemCount()); } }); I highly recommend you check out the full code for that minimal app [LINK] .

Recommends Frank van Puffelen · 2016-06 · Stack Overflow · on “Firebase retrieve image from URL save with Firebase database”

Here's one way of doing it, by downloading the data and then creating a UIImage for it: self.storage.referenceForURL(url).dataWithMaxSize(25 * 1024 * 1024, completion: { (data, error) -> Void in let image = UIImage(data: data!) chatMessage.image = image! self.messages.append(chatMessage) self.tableView.reloadData() self.scrollToBottom() }) This code comes from the Zero To App talk at Google I/O [this video] . Complete code is available in this gist [LINK]

Recommends Mike McDonald · 2016-06 · Stack Overflow · on “Retrieve multiple photos under a node from Firebase Storage”

Currently there's no bulk or batched upload/download to/from Firebase Storage--I think there are too many question here: would we zip the files up and store them that way, would we returned a zipped bundle, etc. Would we just return an array of download URLs, or appropriate data? Our solution to the problem of listing and downloading multiple files is to upload them individually and store the URLs in another database (say the Firebase Realtime Database), which you can then sync and use to download each file individually (or you store the download files and use a tool like SDWebImage to download or cache the appropriate URLs). See [this video] for an example of how we did this.

Recommends Frank van Puffelen · 2016-06 · Stack Overflow · on “how can i get the local image url to store in firebase”

The user will have to select the photo, so you need a file selector in your HTML: <input type="file" id="file" name="file" /> Then you can handle it in JavaScript with: 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; //

Recommends Tanishq Sharma · 2016-07 · Stack Overflow · on “Firebase Scalability”

Though its a pretty broad question but I will catch one of your specificity of scalability. Firebase is a NoSQL Database which imports and exports database in JSON format. One of the key factors to it being a perfect BAAS is its ability to handle transactions or in-built commands to save and retrieve data in almost hassle free way. Not only these, but features such as easy-integration of AdMob, Push Notifications, Remote Config add to its perfect DNA Structure. Not to forget that its Storage uses Google Cloud Bucket. So, yes pretty trust-able in terms of infrastructure. Check out all features here. [LINK] Firebase has grown to be a big name. If we think about the scale in terms of popularity

Recommends Frank van Puffelen · 2016-07 · Stack Overflow · on “Unable to Show Image In ImageView From Firebase Storage”

If you've already tried something that didn't work, edit your question to include the minimum code to reproduce your problem. See MCVE [LINK] . For a minimal example that uses Glide and *does* work, see the code of the Zero to App talk at I/O [this video] : [LINK]

Recommends Mike McDonald · 2016-08 · Stack Overflow · on “Storing multiple images into firebase and getting urls”

I highly recommend using Firebase Storage and the Firebase Realtime Database together to accomplish this. Some code to show how these pieces interact is below (Swift): Shared: // Firebase services var database: FIRDatabase! var storage: FIRStorage! ... // Initialize Database, Auth, Storage database = FIRDatabase.database() storage = FIRStorage.storage() Upload: let fileData = NSData() // get data... let storageRef = storage.reference().child("myFiles/myFile") storageRef.putData(fileData).observeStatus(.Success) { (snapshot) in // When the image has successfully uploaded, we get it's download URL // This "extracts" the URL, which you can then save to the RT DB let downloadURL = snapshot.metad

Recommends Mike McDonald · 2016-09 · Stack Overflow · on “Retrieving image from Firebase Storage using Swift”

We highly recommend using Firebase Storage and the Firebase Realtime Database together to accomplish this. Here's a full example: Shared: // Firebase services var database: FIRDatabase! var storage: FIRStorage! ... // Initialize Database, Auth, Storage database = FIRDatabase.database() storage = FIRStorage.storage() ... // Initialize an array for your pictures var picArray: [UIImage]() Upload: let fileData = NSData() // get data... let storageRef = storage.reference().child("myFiles/myFile") storageRef.putData(fileData).observeStatus(.Success) { (snapshot) in // When the image has successfully uploaded, we get it's download URL let downloadURL = snapshot.metadata?.downloadURL()?.absoluteStri