ikismail/Angular-ShoppingCart

Firebase DB setup

kpriyadarshi opened this issue · 23 comments

kpriyadarshi commented

Hi Sir,

I have downloaded this project for learning purpose. wanted to know if we need to create the tables in Firebase explicitly or it will get created automatically once we setup the firebase and run the application. i have created the clients table though as mentioned in the readme file. But I am still facing issue in loading the application and seeing below error.

image

Let me know.

Thanks and regards,
Kunal

ikismail commented

I think this error is happening in @agm/core package. Since I didn't used any map's in this project. Can u try removing @agm/core dependency in package.json and try ?

ikismail commented

@kpriyadarshi pull the current update and try...

kpriyadarshi commented

Thanks a lot. this issue is fixed. I am not able to connect to firebase database. can u send me the firebase db structure. i am getting error as below. I am not able to apply the firebase rule provided in he readme file. though i have applied my own rules and tested in the firebase console but still seeing the below error.

image

image

i can test using the rules test tool
image

Thanks and regards,
Kunal

ikismail commented

@kpriyadarshi try to use RealtimeDatabase. I think your'e pointing the Cloud Firestore. Sorry for the confusion. 👍 Thanks for pointing, I need to update the README file, so others don't face the same issue.

ikismail commented

e21c83c - Updated Documentation.

kpriyadarshi commented

Thanks for the update.
Now i am seeing the below error, when navigating to products page. Should i create the products table too? Let me know.
image
Thanks,
Kunal

kpriyadarshi commented

I have question which is bothering me, you have not mentioned about the db creation and the structure of the database to be used. Would the db in firebase gets created as soon as we run the application or we have to construct it manually.

Thanks,
Kunal

kpriyadarshi commented

Hi,

I was able to fix all the issues, which i have posted above. The last problem i m facing is in deployment. It is telling "unexpected rules format" error.
i have added a database.rules.json in project and added the below code.
{
"rules": {
".read": true,
".write": true
}
}
Still it is throwing the same error while deploying. Let me know if you have any input on that.

Thanks and regards,
Kunal

ikismail commented

I have question which is bothering me, you have not mentioned about the db creation and the structure of the database to be used. Would the db in firebase gets created as soon as we run the application or we have to construct it manually.

Thanks,
Kunal

Firebase Database stores data in JSON format, the structure is maintained by the client Entities. ex: Product, User, etc., the db in firebase don't get created as soon as we run the application. It will create its instance whenever we post some data to its reference.
to know more about firebase realtime db kindly follow the documentation. Firebase Realtime Database

ikismail commented

Hi,

I was able to fix all the issues, which i have posted above. The last problem i m facing is in deployment. It is telling "unexpected rules format" error.
i have added a database.rules.json in project and added the below code.
{
"rules": {
".read": true,
".write": true
}
}
Still it is throwing the same error while deploying. Let me know if you have any input on that.

Thanks and regards,
Kunal

Need more details., Can u send some error screenshots.

aslamsk commented
ikismail commented

I need small help I am trying to store image in firebase storage and retrieve to my project but it storing but not getting in my project help me I strucked here
…
On Sat, 23 May 2020, 00:18 Mohammed Ismail, @.***> wrote: Hi, I was able to fix all the issues, which i have posted above. The last problem i m facing is in deployment. It is telling "unexpected rules format" error. i have added a database.rules.json in project and added the below code. { "rules": { ".read": true, ".write": true } } Still it is throwing the same error while deploying. Let me know if you have any input on that. Thanks and regards, Kunal Need more details., Can u send some error screenshots. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#59 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/ANANKOW2ZUYEORRGKRR2BKDRS3CHRANCNFSM4NDLLN3A .

Check your Firebase Storage rules, you need to allow users to read and write data's from the storage

image

Here is some Reference:

  1. Firebase Cloud Storage with Angular
  2. Retrieve Images from firebase storage using Angular 7
aslamsk commented
ikismail commented

Check your Firebase Storage rules, you need to allow users to read and write data's from the storage

image

Here is some Reference:

  1. Firebase Cloud Storage with Angular

  2. Retrieve Images from firebase storage using Angular 7

Checkout the reference mentioned, this will help you how to retrieve data from Firebase cloud storage.

aslamsk commented
kpriyadarshi commented
ikismail commented

index.html <form #f="ngForm" (ngSubmit)="addNewProduct(f)"> <input type='file' #image> upload component.ts @ViewChild('image') image : ElementRef addNewProduct(f : NgForm) { let image = (this.image.nativeElement as HTMLInputElement).files[0] this.ps.addNewProductImage(image) // console.log(f.value); console.log((this.image.nativeElement as HTMLInputElement).files[0]) } component.service.ts addNewProductImage(image: File) { const ref = firebase.storage().ref('productImages/' + image.name) ref.put(image).then (() => { ref.getDownloadURL().then((url) => { this.image = url }); ----> here i am getting error : Property 'image' does not exist on type 'ProductsService'. ts(2339) console.log('IREF IS ' + ref) console.log('IMAGEURL IS ' + this.image) ----> here i am getting error : Property 'image' does not exist on type 'ProductsService'.ts(2339) }); } this is the problem how can i fix it and retrive my data successfully storing fiebase storage but not ading to realmtime database and retrive back to project template On Sat, May 23, 2020 at 1:05 AM Mohammed Ismail notifications@github.com wrote:
…
I need small help I am trying to store image in firebase storage and retrieve to my project but it storing but not getting in my project help me I strucked here … <#m_-273977295035603592_> On Sat, 23 May 2020, 00:18 Mohammed Ismail, @.***> wrote: Hi, I was able to fix all the issues, which i have posted above. The last problem i m facing is in deployment. It is telling "unexpected rules format" error. i have added a database.rules.json in project and added the below code. { "rules": { ".read": true, ".write": true } } Still it is throwing the same error while deploying. Let me know if you have any input on that. Thanks and regards, Kunal Need more details., Can u send some error screenshots. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#59 (comment) <#59 (comment)>>, or unsubscribe https://github.com/notifications/unsubscribe-auth/ANANKOW2ZUYEORRGKRR2BKDRS3CHRANCNFSM4NDLLN3A . Check your Firebase Storage rules, you need to allow users to read and write data's from the storage [image: image] https://user-images.githubusercontent.com/17190913/82703146-036eb780-9c91-11ea-95e9-8bb3ffc42576.png Here is some Reference: 1. Firebase Cloud Storage with Angular https://medium.com/codingthesmartway-com-blog/firebase-cloud-storage-with-angular-394566fd529 2. Retrieve Images from firebase storage using Angular 7 https://stackoverflow.com/a/56357834/9640128 — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#59 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/ANANKOWBYGAK2ZM53RCSKMLRS3HWLANCNFSM4NDLLN3A .

Please share some working prototype with StackBlitz...

aslamsk commented
ikismail commented

Yes thanq bro it's working fine and I am getting another problem while hosting my website on firebase hosting Actually I was downloaded github code and it was already hosted but I edited what I need code after editing I am trying to host it but getting this error Help me what I want to do now this situation

I hope this Articles will help you to deploy Angular Apps to firebase hosting.. check whether you did any mistakes..

Firebase Hosting Reference:

  1. Deploying Angular to firebase-hosting (Medium)
  2. Deploying Angular App to firebase (Alligator)
aslamsk commented
aslamsk commented
aslamsk commented
aslamsk commented