Hey! In Firestore Web Codelab - Step 2, there's the command:
git clone sso://devrel/samples/firebase/fireeats/web fireeats -b codelab-beginning

This URI can't be understood by my git client:

So the URI should probably be updated to [email protected]:firebase/friendlyeats-web.git

Its not clear for someone who is new to using firebase cli and the firebase use --add if the project name created in the console should be specific or not. an example is needed!

for example I gave my app the name friendlyEatsWeb and and run firebase use --add > picked "friendlyEatsWeb" >alias "defualt"> run "firebase serve"
And I all I get blank web page with console error "Failed to load resource: the server responded with a status of 400 ()".

Somehow I was right and I was able to proceed and I realized it after enabling anonymous login on step 4, So it is not a bug just a suggestion for a more detail's and examples for step 2

In Step 8, Deploying indexes, it gives the following JSON:

{ "indexes": [ { "collectionId": "restaurants", "fields": [ { "fieldPath": "city", "direction": "ASCENDING" }, { "fieldPath": "avgRating", "direction": "DESCENDING" } ] }, ... ] }

This gives an error and the app will not deploy.

Error: All index fields must contain "mode": {"collectionId":"restaurants","fields":[{"fieldPath":"city","direction":"ASCENDING"},{"fieldPath":"avgRating","direction":"DESCENDING"}]}

Instead, the JSON should be:

{ "indexes": [ { "collectionId": "restaurants", "fields": [ { "fieldPath": "city", "mode": "ASCENDING" }, { "fieldPath": "avgRating", "mode": "DESCENDING" } ] } ] }

https://codelabs.developers.google.com/codelabs/firestore-web/#4

An error will occur if you execute the following command.

Run the following Firebase CLI command:
firebase serve

The errors that occur are as follows.

$ firebase serve

=== Serving from '・・・/friendlyeats-web'...

✔  firestore: started on http://localhost:8080

Error: HTTP Error: 400, Request contains an invalid argument.
⚠  firestore: Nov 16, 2018 3:43:44 AM io.gapi.emulators.netty.NettyUtil applyJava7LongHostnameWorkaround
INFO: Unable to apply Java 7 long hostname workaround.

$

Do you have any solutions?

P.S.

$ uname -a
Darwin local 17.4.0 Darwin Kernel Version 17.4.0: Sun Dec 17 09:19:54 PST 2017; root:xnu-4570.41.2~1/RELEASE_X86_64 x86_64

$ firebase --version
6.1.0

Downloaded the repo for the codelab this morning (Feb 22). https://codelabs.developers.google.com/codelabs/firestore-web

All functionality seems ok as I work through the codelab; it's the UI that's not as expected. I've run this codelab several times before, and it's not looked like this.

This means that the FriendlyEats.prototype.getDocumentsInQuery() function is wrong.

The function should be updated to reflect the change from a property to a method, like so:

FriendlyEats.prototype.getDocumentsInQuery = function(query, render) {
  query.onSnapshot(function(snapshot) {
    if (!snapshot.size){
      return render();
    }
    var changedDocs = snapshot.docChanges();
    changedDocs.forEach(function(change) {
      if (change.type === "added"){
        render(change.doc);
      }
    });
  });
};

I would love to take on a pull request, if that is okay?

firestore rules should be deployed at the beginning.
otherwise, at least for me, access doesn't work and I receiving an error "firestore: PERMISSION_DENIED: Missing or insufficient permissions" (visible by checking the developer console).

There seems to be a problem getting the filtered data.

As you can see I have the data in my firestore project, and I created the indexes.

but I still don't get any response, even if I I'm clearly calling the first item from the list

Thanks for the wonderful codelabs tutorial!

My friends mainly @isamu and others incl. myself have made React and Vue version of the codelabs tutorial (with English and Japanese) and are willing to contribute it back to the community. Could you kindly tell me what is the best way to move forward if it is ever possible?

Followings are the repos (currently the tutorial texts are defaulted to Japanese but English ones are also included):

• React Version: https://github.com/isamu/FriendlyEats-vue
• Vue Version: https://github.com/isamu/FriendlyEats-React

Thank you in advance!

I got to step 4 of the Friendly Eats Codelab, and served my app on localhost, but just got a blank grey screen.

I viewed the source and the code is there, but the "add mock data" button is not visible. It also has no event listeners other than load and storage.

When I ran the firebase serve command in the CLI, it seemed to hang partway through the process.

Also getting a "Failed to load resource" error on the Google auth API (I enabled Google Authentication in Step 3).

There seems to be a bug lines 119 and 120 of FriendlyEats.View.js that prevents the program generating mock data.
Comment out the lines if you want addMockRestaurants() to execute.
//this.style.opacity = '0.4';
//this.innerText = 'Please wait...';

Failed to load resource: the server responded with a status of 400 ()

Steps to Reproduce:

• Set the FirestoreAdapter to a query capable of reaching two documents
• Attach adapter to a fully-implemented recyclerview capable of displaying data
• Update one document's data such that its position changes

Problem:
Though the document is moved to the correct position, the data that was changed will not be updated in the recyclerView.

Current Solution:
Added the line
notifyItemChanged(change.getNewIndex());
at the end of the case in onDocumentModified to update data on modified document.

index.esm.js:356 Uncaught
{code: "app/no-app", message: "Firebase: No Firebase App '[DEFAULT]' has been cre…- call Firebase App.initializeApp() (app/no-app).", name: "[DEFAULT]", stack: "[DEFAULT]: Firebase: No Firebase App '[DEFAULT]' h…s.firebaseapp.com/scripts/FriendlyEats.js:196:16)"}
code
:
"app/no-app"
message
:
"Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app)."
name
:
"[DEFAULT]"
stack
:
"[DEFAULT]: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app).↵ at cr (https://fs3friendlyeats.firebaseapp.com/__/firebase/5.1.0/firebase-app.js:1:32616)↵ at i (https://fs3friendlyeats.firebaseapp.com/__/firebase/5.1.0/firebase-app.js:1:34457)↵ at Object.f [as auth] (https://fs3friendlyeats.firebaseapp.com/__/firebase/5.1.0/firebase-app.js:1:33959)↵ at new FriendlyEats (https://fs3friendlyeats.firebaseapp.com/scripts/FriendlyEats.js:32:12)↵ at window.onload (https://fs3friendlyeats.firebaseapp.com/scripts/FriendlyEats.js:196:16)"
proto
:
Error

The image guy_fireats.png used in various parts of index.html seems to not be available in this repository.

I've been modifying the example and in the process of changing some of the dialogs I now get the following error. This was all working a couple days ago and I don't think any of my changes should have effected this.

Uncaught TypeError: that.dialogs.filter.show is not a function
at HTMLDivElement. (FriendlyEats.View.js:53)
(anonymous) @ FriendlyEats.View.js:53

Device: PC
Operating system version: Win10/1909
Firebase SDK version: 7.8.1

What steps will reproduce the problem:

1. Start the lab
2. Go until step 6

What is the expected result? The estimated time should go until the end

What happens instead of that? The timer runs out on step 6

Please provide any other information below, and attach a screenshot if possible.

Thanks for the wonderful codelabs tutorial!

My friends @isamu, @mikkegt, others and I made a Japanese translation of the codelabs tutorial and are willing to contribute it back to the community. As we don't see the tutorial text in this github repo, we're wondering what is the best way for us to contribute it... (if there were the English version in this repo, we'll submit a PR with the Japanese version put in parallel...)

Here is the Japanese version in a github repo: https://github.com/isamu/friendlyeats-web-docs/blob/master/TUTORIAL.md

And this is its codelabs version: https://isamu.github.io/friendlyeats-web-docs/dist/#0

Could you please give us some suggestions?
Thank you in advance!

Bottom of this page talks about seeing errors in logs:

https://codelabs.developers.google.com/codelabs/firestore-web/#8

Where do we go to see such logs? - please add a quick note to that effect. Thanks!

There seems to be some kind of problem with the version of Firestore used in the codelab, whenever I post the mock data i get this errors.

I just pulled latest master commit (cb4f9a0) and used firebase use --add to connect app to an existing firebase project I'm developing. I only pulled FriendlyEats to explore the local Firestore Emulator. I then tried to run locally with both firebase serve and firebase emulators:start. In both cases, I visit http://localhost:5000/ then click ADD MOCK DATA, at which point I get a popup alert with "addRestaurant() is not implemented yet"

I expected it to add data to the local Firestore emulator, then let me play with the site.

Not sure what went wrong, I had only just git cloned the project and attempted to run the firebase serve command to run but encountered nothing(a blank page) on the localhost and these errors. Seems to have to do with some of these links. I'm a complete novice I was just trying to learn how to use firebase, so any help on how to fix this would be great to continue forward on the codelab.

Error:

Clicking on Add Mock Ratings shows 400 error responses

Response:
{ "error": { "code": 400, "message": "the stored version (1531347069149658) does not match the required base version (1531346493121653)", "status": "FAILED_PRECONDITION" } }

Image:

Steps to reproduce:

1. Complete codelab
2. Click on a restaurant
3. Click on Mock Review

EDIT: It only happens when more than 1 review is mocked

*Note: While this isn't really an issue, I figured I might as well post it here as this would be the best place to get my questions answered... (see: https://stackoverflow.com/questions/55246795/what-do-data-fir-if-html-tags-reference)

I was recently looking over the code found in Google Firebase's quickstart-js/firestore/ repo, when I came across the following html in index.html:

 63       <header id="site-header" class="mdc-toolbar mdc-toolbar--fixed">          
 64         <div id="title" class="mdc-toolbar__row mdc-layout-grid">               
 65           <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
 66             <span class="material-icons mdc-toolbar__icon--menu">restaurant</span>
 67             <span class="mdc-toolbar__title">FriendlyEats</span>                
 68           </section>                                                            
 69         </div>                                                                  
 70         <div id="section-header" data-fir-if="hasSectionHeader"></div>          
 71       </header>                                                                 
 72   </div>                                                                        

This element is then referenced in firestore/scripts/FriendlyEats.View.js/ in the FriendlyEats.prototype.render() function:

407     'data-fir-if': function(tel) {                                              
408       var field = tel.getAttribute('data-fir-if');                              
409       if (!that.getDeepItem(data, field)) {                                     
410         tel.style.display = 'none';                                             
411       }                                                                         
412     },                                                                          

My question here: what does the data-fir-if tag mean, and is that some sort of naming convention? If so, what is that naming convention and where might I find a reference for it?

Warning: When a transaction fails on the server, the callback is also re-executed repeatedly. Never place logic that modifies app state inside the transaction callback.

It is not totally clear to me what this warning means. What is referred to as app state?

the number should be string instead right?

Typo in: https://github.com/firebase/friendlyeats-web/blob/master/firestore.rules

Missing the :

Seems like the code has to be updated to account for the breaking change:

firebase.js:1 [2018-09-17T13:07:12.836Z]  @firebase/firestore: Firestore (5.5.0): 
The behavior for Date objects stored in Firestore is going to change
AND YOUR APP MAY BREAK.
To hide this warning and ensure your app does not break, you need to add the
following code to your app before calling any other Cloud Firestore methods:

  const firestore = firebase.firestore();
  const settings = {/* your settings... */ timestampsInSnapshots: true};
  firestore.settings(settings);

With this change, timestamps stored in Cloud Firestore will be read back as
Firebase Timestamp objects instead of as system Date objects. So you will also
need to update code expecting a Date to instead expect a Timestamp. For example:

  // Old:
  const date = snapshot.get('created_at');
  // New:
  const timestamp = snapshot.get('created_at');
  const date = timestamp.toDate();

Please audit all existing usages of Date when you enable the new behavior. In a
future release, the behavior will change to the new behavior, so if you do not
follow these steps, YOUR APP MAY BREAK.

https://codelabs.developers.google.com/codelabs/firestore-web/#10
ratingCount has to changed to numRatings

In the codelab:
https://codelabs.developers.google.com/codelabs/firestore-web/#1
When you set up Firestore, if you choose the Databases option "locked", the codelab screen shown here:
https://codelabs.developers.google.com/codelabs/firestore-web/#3
Does not appear (and gives console errors), until changing the security rules in the following step:
https://codelabs.developers.google.com/codelabs/firestore-web/#4
Could be avoided either by advising to create the database not locked, or put the rule change step before the first serve.

Hello,

I have an issue in the section 6 (write data to cloud Firestore.

When I click Add Mock Data and I navigate to the Cloud Firebase tab, there are no collection available.

I have checked the console on Google Chrome bowser and send me the following error:

[2019-06-18T09:05:07.698Z] @firebase/firestore: Firestore (5.10.0): Could not reach Cloud Firestore backend. Connection failed 1 times. Most recent error: FirebaseError: [code=failed-precondition]: The Cloud Firestore API is not available for Cloud Datastore projects.
This typically indicates that your device does not have a healthy Internet connection at the moment. The client will operate in offline mode until it is able to successfully connect to the backend.

I don't know if Im doing something wrong or if you need more information about mi code or what Im doing

In "12 Secure your data", below description is not match to example firestore.rules.

Updates to a restaurant document can only change the ratings, not the name or any other immutable data.

firestore.rules restrict to update only name.

      allow update: if request.auth != null
                    && request.resource.data.name == resource.data.name

Either description or firestore.rules is incorrect.
I think firestore.rules is incorrect. Probably this is correct rule.

      allow update: if request.auth != null
                    && request.resource.data.name == resource.data.name
                    && request.resource.data.city == resource.data.city
                    && request.resource.data.price == resource.data.price
                    && request.resource.data.category == resource.data.category
                    && request.resource.data.photo == resource.data.photo;

Hi,

I follow CodeLab - Firestore Web. I found an error below

Uncaught TypeError: renderer.display is not a function
at FriendlyEats.Data.js:40
at Array.forEach ()
at Object.next (FriendlyEats.Data.js:36)
at next (index.esm.js:20461)
at index.esm.js:18425

As a result friendlyeats-web cannot display all item in Firestore.

I'm not sure, Firestore has any update so friendlyeats-web is not compatible.

Regards,

So, while doing the Codelab I've found some issues:

• Naming: In CodeLab the project name is FireEats, while here it's FriendlyEats. Not a big issue, but some code snippets are failing due to wrong object prototype name.

• Missing getRestaurant() implementation: the Codelab does not guide on how to implement getRestaurant().

• Missing full solution: the step 11 tells that we can find the full solution in master branch, but the master branch here has the initial app state.

• Broken styles: the real app does not look like the pictures in the CodeLab. The "Guy Fireats" is not well sized, when getAllRestaurants() is not implemented it displays 2 useless stars at the bottom and when we implement it, it displays the restaurants but without their pictures.

in Firestore Web Codelab - Step 2 there's a broken link to the documentation to create a new Firestore project.

Since we are working locally most of the codelab the security rules that allow to read/write data as an anonymous user have not yet been deployed and the Cloud Firestore is likely configured with the default security rules which prevent all read/writes.

We need to add a step early on telling developers to push the security rules using firebase deploy --only firestore or copy-paste them manually.

Please, i have the next issue:
"Click Add Mock Data." it's never appears after editing "scripts/FriendlyEats.Data.js"

This commit seems to break the URLS to the Firebase SDK. The quotes should be removed.

On page 4 it says you must do "firebase use --add" but I think you actually need to use firebase init.

I know this is not the focus of the exercise, but I still believe we should strive to produce valid HTML.

In https://codelabs.developers.google.com/codelabs/firestore-web/index.html#1
You wrote

The app uses Cloud Firestore to save the chat messages and receive new chat messages.

But this sample app is not chat app.
For example,

The app uses Cloud Firestore to save restaurant info and receive updated restaurant's rating.

Windows 10, modern Chrome.
After selecting Start in test mode, a blue button Next is shown on the form (Instead of the button Enable shown in the tutorial). Clicking the Next button shows the form for selecting Cloud Firestore location, with num5(us-central) being selected by default. That location is appropriate in my case. The blue button Done is shown in the right bottom of the form. Clicking the button cause a spinning cursor for about a minute, and then causes an error:

"Cannot enable Firestore for this project
An unknown error occurred"

(Attempt to follow the tutorial farther shows that the mock data is not added to the DB).

e.g.:

git clone https://github.com/firebase/friendlyeats-web.git

In Step 7 of the Firestore Code Lab the student is advised:

Once you've implemented this you'll be able to view pages for each location and leave reviews which will be reflected in the main list.

But writing a review calls addRating() which is not implemented in the skeletal project. I see no instructions for adding an implementation for addRating() in the Code Lab.

Uncaught TypeError: Cannot read property 'then' of undefined
    at HTMLElement.<anonymous> (FriendlyEats.View.js:164)
    at MDCDialog.emit (material-components-web.js:347)
    at Object.notifyAccept (material-components-web.js:7652)
    at MDCDialogFoundation.accept (material-components-web.js:7848)
    at MDCDialogFoundation.handleDialogClick_ (material-components-web.js:7868)
    at HTMLDivElement.MDCDialogFoundation._this.dialogClickHandler_ (material-components-web.js:7786)

FriendlyEats.prototype.initReviewDialog = function() {
  var dialog = document.querySelector('#dialog-add-review');
  this.dialogs.add_review = new mdc.dialog.MDCDialog(dialog);

  var that = this;
  this.dialogs.add_review.listen('MDCDialog:accept', function() {
    var pathname = that.getCleanPath(document.location.pathname);
    var id = pathname.split('/')[2];

    that.addRating(id, {
      rating: rating,
      text: dialog.querySelector('#text').value,
      userName: 'Anonymous (Web)',
      timestamp: new Date(),
      userId: firebase.auth().currentUser.uid
    }).then(function() {
      that.rerender();
    });
  });

But at this point in the Code Lab addRating() is not implemented

FriendlyEats.prototype.addRating = function(restaurantID, rating) {
  /*
    TODO: Retrieve add a rating to a restaurant
  */
};

If I missed the step for adding this implementation I apologize in advance. Any help would be greatly appreciated.

The app registers an empty service workers. it seems unsused. In FriendlyEats.Data.js:

  if (navigator.serviceWorker) {
    navigator.serviceWorker
      .register("/sw.js")
      .then(function(registration) {
        console.log(
          "ServiceWorker registration successful with scope:",
          registration.scope
        );
      })
      .catch(function(error) {
        console.log("ServiceWorker registration failed:", errror);
      });
  }

Can I remove @AbeHaskins ?

The assets/demos folder is missing
In friendlyeats-web/images there is no assets/demos folder.

There's a part in the codelab that reads:

Add the following code in the FriendlyEats.prototype.addReview() method.

There is no method named addReview. However, there is one, named addRating, at line 23 of FriendlyEats.Data.js. At that point of the codelab, that is the only function that is left to be filled, and the variables used in the codelab matches the signature of the function.

After firebase serve at https://codelabs.developers.google.com/codelabs/firestore-web/#4 ,

$ firebase serve

=== Serving from '/foobar'...

⚠  Setup required, please run: firebase setup:emulators:firestore

Error: An unexpected error has occurred.

We should change the command into firebase serve --only hosting to avoid confusion.