ikismail / Angular-ShoppingCart

ShoppingCart (Ecommerce) 🛒 Application using Angular10, Firebase, PWA, Drag&Drop, Materialized Bootstrap and i18n 🚀🔥👨‍💻
https://angular-shoppingcart.firebaseapp.com/
MIT License
621 stars 387 forks source link

Firebase DB setup #59

Open kpriyadarshi opened 4 years ago

kpriyadarshi commented 4 years ago

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 4 years ago

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 4 years ago

@kpriyadarshi pull the current update and try...

kpriyadarshi commented 4 years ago

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 4 years ago

@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 4 years ago

e21c83cfaf22c1c138b22d71b109cc5d2c255ad5 - Updated Documentation.

kpriyadarshi commented 4 years ago

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 4 years ago

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 4 years ago

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 4 years ago

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 4 years ago

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 4 years ago

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, notifications@github.com 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 https://github.com/ikismail/Angular-ShoppingCart/issues/59#issuecomment-632855225, or unsubscribe https://github.com/notifications/unsubscribe-auth/ANANKOW2ZUYEORRGKRR2BKDRS3CHRANCNFSM4NDLLN3A .

ikismail commented 4 years ago

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 4 years ago

Roule already change and storing in storage also but I dont know how to retrieve it to my project

On Sat, 23 May 2020, 01:05 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 … <#m5143675317667425929> 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) https://github.com/ikismail/Angular-ShoppingCart/issues/59#issuecomment-632855225>, 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 https://github.com/ikismail/Angular-ShoppingCart/issues/59#issuecomment-632878474, or unsubscribe https://github.com/notifications/unsubscribe-auth/ANANKOWBYGAK2ZM53RCSKMLRS3HWLANCNFSM4NDLLN3A .

ikismail commented 4 years ago

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 4 years ago

index.html <form #f="ngForm" (ngSubmit)="addNewProduct(f)">

<input type='file' #image>

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) https://github.com/ikismail/Angular-ShoppingCart/issues/59#issuecomment-632855225>, 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 https://github.com/ikismail/Angular-ShoppingCart/issues/59#issuecomment-632878474, or unsubscribe https://github.com/notifications/unsubscribe-auth/ANANKOWBYGAK2ZM53RCSKMLRS3HWLANCNFSM4NDLLN3A .

kpriyadarshi commented 4 years ago

Will try tomorrow and let you know.

Regards, Kunal

On Sat, 23 May, 2020, 12:34 AM Aslam sk, 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

On Sat, 23 May 2020, 00:18 Mohammed Ismail, notifications@github.com 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 < https://github.com/ikismail/Angular-ShoppingCart/issues/59#issuecomment-632855225 , or unsubscribe < https://github.com/notifications/unsubscribe-auth/ANANKOW2ZUYEORRGKRR2BKDRS3CHRANCNFSM4NDLLN3A

.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/ikismail/Angular-ShoppingCart/issues/59#issuecomment-632862113, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEG5BFKECTNZQQZYAT33YI3RS3EC7ANCNFSM4NDLLN3A .

ikismail commented 4 years ago

index.html <form #f="ngForm" (ngSubmit)="addNewProduct(f)"> <input type='file' #image> 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 4 years ago

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

On Sat, 23 May 2020, 01:19 Mohammed Ismail, notifications@github.com wrote:

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

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

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/ikismail/Angular-ShoppingCart/issues/59#issuecomment-632886595, or unsubscribe https://github.com/notifications/unsubscribe-auth/ANANKOQFGMXCS5NWEB56LMDRS3JNZANCNFSM4NDLLN3A .

ikismail commented 4 years ago

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 4 years ago

thanq bro actually i followed mosh Hamedami tutorial and practiced there we have quantity as items but i want quantity as weight so i am stucked how to calculate 250 grams, 500 grams price and subtotal and grand total help me bro github : https://github.com/aslamsk/o-shop.git

when i click add to cart button showing 1 and 1quantity price but i need 250 or 500 grams and price how can i do that please help me

On Mon, Jun 1, 2020 at 10:57 AM Mohammed Ismail notifications@github.com wrote:

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) https://medium.com/@longboardcreator/deploying-angular-6-applications-to-firebase-hosting-b5dacde9c772
  2. Deploying Angular App to firebase (Alligator) https://alligator.io/angular/deploying-angular-app-to-firebase/

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/ikismail/Angular-ShoppingCart/issues/59#issuecomment-636620325, or unsubscribe https://github.com/notifications/unsubscribe-auth/ANANKOVYHWJNKKDO3ULNZTDRUM34FANCNFSM4NDLLN3A .

aslamsk commented 4 years ago

while hosting in firebase i am getting this ERROR in Cannot assign to a reference or variable! bro

On Mon, Jun 1, 2020 at 10:57 AM Mohammed Ismail notifications@github.com wrote:

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) https://medium.com/@longboardcreator/deploying-angular-6-applications-to-firebase-hosting-b5dacde9c772
  2. Deploying Angular App to firebase (Alligator) https://alligator.io/angular/deploying-angular-app-to-firebase/

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/ikismail/Angular-ShoppingCart/issues/59#issuecomment-636620325, or unsubscribe https://github.com/notifications/unsubscribe-auth/ANANKOVYHWJNKKDO3ULNZTDRUM34FANCNFSM4NDLLN3A .

aslamsk commented 4 years ago

hai bro

  1. i am trying to host my site in firebase hosting but getting this error 👇 help me bro
  2. if i want to host my site in reseller club domain (how to do that my data base is firebase so is it possible ?? and How ??

On Mon, Jun 1, 2020 at 10:57 AM Mohammed Ismail notifications@github.com wrote:

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) https://medium.com/@longboardcreator/deploying-angular-6-applications-to-firebase-hosting-b5dacde9c772
  2. Deploying Angular App to firebase (Alligator) https://alligator.io/angular/deploying-angular-app-to-firebase/

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/ikismail/Angular-ShoppingCart/issues/59#issuecomment-636620325, or unsubscribe https://github.com/notifications/unsubscribe-auth/ANANKOVYHWJNKKDO3ULNZTDRUM34FANCNFSM4NDLLN3A .

aslamsk commented 4 years ago

I want to send when placed the order I want to send email for both user and admin how its possible

On Wed, 27 May 2020, 22:22 Mohammed Ismail, notifications@github.com wrote:

index.html <form #f="ngForm" (ngSubmit)="addNewProduct(f)"> <input type='file' #image> upload component.ts @ViewChild https://github.com/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: … <#m-2253577156266315106> 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 https://github.com/ikismail/Angular-ShoppingCart/issues/59 (comment) <#59 (comment) https://github.com/ikismail/Angular-ShoppingCart/issues/59#issuecomment-632855225>>, 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

  1. 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) https://github.com/ikismail/Angular-ShoppingCart/issues/59#issuecomment-632878474>, or unsubscribe https://github.com/notifications/unsubscribe-auth/ANANKOWBYGAK2ZM53RCSKMLRS3HWLANCNFSM4NDLLN3A .

Please share some working prototype with StackBlitz...

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/ikismail/Angular-ShoppingCart/issues/59#issuecomment-634797505, or unsubscribe https://github.com/notifications/unsubscribe-auth/ANANKOQLFGYEN6X2K4DP2A3RTVAMLANCNFSM4NDLLN3A .