Ionic 3 - Firebase Custom User Profiles
HTML-код
- Опубликовано: 5 авг 2024
- Ionic 3 - Firebase Custom User Profiles
In this video, we continue our Firebase and Ionic series with the ability to add custom user profiles to our authenticated users. If you haven't seen part one of this video, check it out here: • Ionic 3 - Firebase Ema...
Paulhalliday.io:
Learn Ionic 3 From Scratch
paulhalliday.io/p/learn-ionic...
Master Ionic 3 with Ionic Native and Cordova Integrations
www.udemy.com/master-ionic-3-...
Master App Prototyping with Adobe Experience Design (XD) www.udemy.com/master-app-prot...
Support the content with at least $1 for EXCLUSIVE early access to the next video(s), as well as other benefits! / paulhalliday
You can also support the content by keeping me caffeinated (much appreciated!): paypal.me/PWHSoftware
The extra epic content always comes via email first. Sign up so you're not left behind: eepurl.com/cBCqO9
You can also find me:
/ paulhalliday.io
/ pwhsoftware
/ paulhal Наука
Want to put this to use in your Ionic applications? Get Learn Ionic 3 From Scratch with our real-time chat application. paulhalliday.io/p/learn-ionic-3-from-scratch
Course content is still being added with more projects coming soon!
I love your videos, tell me is it possible to create an user profile at the time of the user creation ?
I bought this course, I totally recommend it to anyone looking to learn Ionic 3.
I already got my first Client and they paid well, i'd say the course has already paid for itself with change. LOL
My next project is for a travel agency, using a lot of APIs for Hotels, car rentals and flights, would be a tricky project but if i get stuck, i will "buzz".
Keep up the good job.
Mahmoud Tokura That's awesome! I'm so glad to have been part of your journey.
Thanks for letting me know your progress. :)
Do you have one for ionic 2?
hi Paul Your Course is soooo great,but i didn't know how to check if the user first log in.how can i do that ?
I love those firebase integration videos, keep it up!
Just best tutorials for Ionic and firebase ! Great Job...
Thanks for this fantastic tutorials Paul!
I like the way you tech, easy to understand thank you so much keep up the good work.
Thanks a lot for your content Paul. Really apreciate it. I'm planning to buy your full content as soon as I can.
+George Ciprian Nedelcu Glad you're enjoying it! :)
As I said, I bought the full content of the course. I suggest to everybody is looking to create an Ionic app to do the same because it is full of interestring lessons. Thanks again Paul. Love the way you explain the best coding practices.
Hi Paul, can you help me? What condition do you give to check whether profile has already been created?
thank you very much Paul, you are the best!
thank you 💟
Hi Paul, thanks for the video.
My app seems to work right up until the end when the user information is displayed on the profile page.
I think the problem may be related to the import of the 'FirebaseObjectObservable' on the home.ts page.
Is this line outdated or have I done something wrong?
Thanks for the help.
Brian
wanted a help .... I am capturing a length and length of firebasae and I want to put a marker in google maps but it does not leave me and when I put with static data if it puts marker
Profile creation page should come only one time after first login , how can i do that???
Hello Paul.. I have a question , If the user has not create iits profile then the Home page will show empty data .. so what should be done to enter data in Profile incoming New Users :)..
Great video! However, I'm currently using ionic v4 and can't make the take operator from rxjs work. Any tips?
What if I had to display the information on multiple pages? Do I have to query the database everytime? Or is it possible to store the data somewhere?
nice video! i have a question i was hoping you could help me with. Im making an app and using FirebaseListObservable (associated with the user) so each time i make a new message it is associated with the user who made it, and the app retrieves the users messages (each one has an id under the users id) is this a good way to do things, or should i be using FirebaseObjectObservable. Also a side question is it bad that each message has its own id? ty hoss
THANK YOU
i have error Type 'FirebaseObjectObservable' is not assignable to type 'FirebaseListObservable'.
this.profileData = this.afDatabase.object('profile/'+data.uid)
.
import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database-deprecated';
hey, i watched a lot of your ionic video, its really help me and my friends a lot,
thank you so much :D
but, i can't implement this custom profile tutorial with the AngularFire2 v5 :(
I am are trying to make an app in ionic 3. Profile page of the user is created and data is stored in the Firebase. But not able to display those information in the app. Can you help me with an example code?
I followed angularfire docs to setup firebase and its configuration in app.modulte.ts in my ionic 3 project and it works !
But since I have 2 firebase databases for the same app and therefore 2 different configurations, setting it up in app.module is not an option. I have 2 config files (frbaseconfig.ts and frbaseconfig2.ts). How can I make it happen?
okay , the way you fix the invalid pipe error is
in your userprofile.ts
change : profileData : AngularFireObject to profileData : Observable
and this.profileData = this.afDatabase.object(`user/${data.uid}`).valueChanges();
This works perfectly.
i have tried this ,it returns no error but it displays nothing
@@carljet77 for me the error is gone but no data is being displayed
Sorry bro I dont know how I can help u. Maybe your variables doesn't work
@@muthuicris2030
THANK U VERYMUCH BRO!
Hello Paul i need to display Username in my sideMenu using AppComponent.ts need some Help Here
Hi Paul, could you give us some advice on letting users to upload their profile picture? please
Thanks in advance!
when did he import the AngulatFireAuthModule and when ?
how about new user login and existing ?
is this the same in ionic mobileApp??
Can't we just use the User interface created earlier instead of building a new Profile interface?
Great. How to store image with custom profile into firebase db in Ionic 5.
Hey Paul, may I know what plugin you are using to have that color scheme? It looks so pleasant! And that arrow thing when you type in "=>" is awesome too.
Been a follower of your tutorials for quite a while now. Just started to learn Ionic 3 months ago and I think I'm getting the hang of it. Cheers from the Philippines!
I think the theme is called One Dark Pro and the text is Fira Code if I remember rightly! :)
How to create role-based login using ionic 3/ionic 4 and firebase ??
Just wondering: I read that angularFire2 does not support image uploads. How would we get around this issue?
It does support images?
hi how fix problem please
Firebase Permission Denied firestore
ionic 4
Hello Paul, thank you for the videos, I'm trying to log out, but I'm not trying to succeed, when I redirect to login screen, I get the following error: permission_denied at / profiles / : Client does not have permission to access the desired date.
logout() {
this.afAuth.auth.signOut().then(() => {
this.app.getRootNav().setRoot("LoginPage"); // I'm using tabs
})
};
could you help me please?
thank you so much!
hi Paul I have personal question about ionic development is there a way I could contact you please it really important....
thanks.
Nice video for beginners.
How can we make the app check if data is available in firebase and if the data is available, skip the page asking for firstname, lastname and username?
Thanks
Hey, if you have found a way to do it, I will be very grateful to share it with us ;-)
how i use data of database in loginpage to make only once redirect to profilepage??? for example: if(database.uid.username !=null) setroot(homepage) else setroot(profilepage). My problem is i dont know how to call data of database to use in conditional. Sorry for my english and thanks.
Hola!
The same for me, if you have found a way for doing it, I'm not against a little help. ;-)
Hi.
I have the same problem, could you please help me if you found any solution?
hola.
Tengo el mismo problema, por favor me podrian ayudar si encontraron alguna solucion?
I'm having this error : Error: Uncaught (in promise): Error: StaticInjectorError[AngularFireDatabase]:
StaticInjectorError[AngularFireDatabase]:
NullInjectorError: No provider for AngularFireDatabase!
Error: StaticInjectorError[AngularFireDatabase]:
StaticInjectorError[AngularFireDatabase]:
NullInjectorError: No provider for AngularFireDatabase!
How can I fix this?
This is after all the code is done, when I run it at the final of the tutorial.
how to make rbac with this tutorial ? thanks
Good tuto, one question plz, on this video u use multi emulator, so what is extension use for test multi emulator ??
If you use 'ionic cordova run' on the cli it will launch the multi emulator by default.
hi thank you so much
i have this error
./src/main.ts
Module not found: Error: Can't resolve 'rxjs/add/operator/take' in 'C:\Users\..
npm install --save rxjs-compat
Hey Paul, thanks for your incredibles videos ! Just fantastic
But I'm in a bind : with the new version of AngularFire 5.0 the FireBaseObjectObservable must be replace by the AngularFireObject but when I do that I have the error : "InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe'"and when I try to remove the Async Pipe like this : Username : {{ profileData?.username }}, I have no more mistakes but nothing appears....
Eu estou com o mesmo erro.
você consegui resolver????????
I have the same error.
You solved ????????
Eu estou com o mesmo erro.
você consegui resolver????????
I have the same error.
You solved ????????
I have got the exact error , please can anyone give solution to this problem
Did you guys solve this issue?
i have same problem.... anyone solved it?
Hello,
i get this problem can you help ??
> Type 'AngularFireObject' is not assignable to type 'FirebaseObjectObservable'.
Plz
import {AngularFireDatabase} from "angularfire2/database";
import {FirebaseObjectObservable} from "angularfire2/database-deprecated";
FirebaseObjectObservable is not in "angularfire2/database";
Try:
import { AngularFireObject } from "angularfire2/database";
and try this:
this.profileData = this.afDatabase.object('profile/'+data.uid).valueChanges();
After following this, I get the error: "Typescript Error
Module '"Documents/sites/Profile/node_modules/angularfire2/database/index"' has no exported member 'FirebaseObjectObservable'."
The error is on this line in home.ts:
import { AngularFireDatabase, FirebaseObjectObservable } from 'angularfire2/database';
it's solved?? i need help with that to... regards
Paul, there is a problem 10:19
InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe'
Please help
did you solve it? had the same problem
Michael John Isip yeah kind of.... by using something like valueschanged()
yes, it´s works
where did you exactly use this? kind of stuck on this
I tried the "valueschange();" thing and it's not showing me my data. Did it work completely for you?
Additionally Paul, it would be nice if you had a github repository where the finished code exists so we can compare our code to yours should we run into mistakes.
How do I make each user have a profile picture? thank
Check out my Firebase image upload video for more info! :)
thank you man, you are great!
Data not showing in the final page though showimg in the console
I have the same issues. Please anyone know how to solve this.
thx hoss
How to check whether the user has logged in for the first time?
make counter in database if it is first that set as 1 otherwise increament by one this way you can solve two problem : How many times the user use your app as well as it first logged or not
constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen, private afAuth : AngularFireAuth) {
this.afAuth.authState.take(1).subscribe(auth => {
if(!auth.uid){
this.rootPage = 'LoginPage'
}
else{this.rootPage = 'HomePage'
}
}) }
// import {AngularFireAuth} from 'angularfire2/auth';
Hi Paul, it seems like this function is not working for me. When I click on the create profile, it's doing nothing. It did not take me to the Homepage and did not create any entry in the firebase database. What am I missing here. Thanks a lot.
createProfile() {
this.afAuth.authState.take(1).subscribe(auth => {
this.afDatabase.list('profile/${auth.uid}').push(this.profile).then(() => this.navCtrl.push(HomePage));
})
this.afDatabase.list(`profile/${auth.uid}`).push(this.profile).then(() => this.navCtrl.push(HomePage));
hello paul, got and error at profile.ts ('profile/${auth.uid}')) while running App, Error: "Reference.child Failed: first argument was an invalid path..."
Hi Taim, If I can assist. Note that in order to use this ('profile/${auth.uid}')) method of data binding you cannot use single quotes. You have to use the backtick character. This is the character that's typically on a US layout keyboard below the tilde (~).
No help... tengo el mismo problema y he tratado con todo tipo de comilla
Where you using auth.uid? auth, can't be referencied without 'this.' outside of constructor
Good Video. Also can you make a tutorial for getting and manipulating data from firebase?(I mean like, get data and do some calculations and update again). Using callback functions over firebase data... etc. I have seen many uses asking that kind of questions on STACKOVERFLOW. So that would be really helpful.
Hi. I see yours tutorials and i have can developer app advances. now i have one problem, do you can pass your email?
please update to angularfire2 v5 thanks!
Working on it! :)
thank you!
when it will be ready?
is it there yet?
Wow
alguien pudo solucionar este error? por favor ayuda
This is a problem with this line:
Username: {{(profileData | async)?.username}}
results in this:
Error: InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe'
I get the same error
I have the same error atm because I've done an import of AngularFireObject, did you find the solution ? Regards
Same problem for me, did you find the solution ? thank you
Same error,any fix??
InvalidPipeArgument: 'function observeOnOperatorFunction(source) {
return source.lift(new ObserveOnOperator(scheduler, delay));
}' for pipe 'AsyncPipe'|
Please fix this mr.hurrying train!
this.profileData = this.afDatabase.object(`profile/${data.uid}`).valueChanges();
BROOOO
can you please put the code in github, thanks before
how can we do this with php and mysql instead of firebase?
Did anybody work out why the account page returns Error: PERMISSION_DENIED: Permission denied when you use the back accent in this.afDatabase.list(`profile/${auth.uid}`).push(this.profile) i use ' ' around the auth.uid and it returns polyfills.js:3 Unhandled Promise rejection: Reference.child failed: First argument was an invalid path = "profile/${auth.uid}". Paths must be non-empty strings and can't contain ".", "#", "$", "[", or "]" ; Zone: ; good tutorial till the account part a git resource would be quite helpful for learning
ples check realtime database permission rules ; "rules": {
".read": true,
".write": true
}
I don't see that :
service cloud.firestore {
match /databases/{database}/documents {
match /{document=**} {
allow read, write: if true;
}
}
}
@@yiinsskibare5526 try to copy this:
service cloud.firestore {
match /databases/{database}/documents {
match /{document=**} {
allow read: if true;
allow write: if true;
}
}
}
Hope it helps
Here's the first video in this section: ruclips.net/video/aNW444SpFNs/видео.html
This will solve the issue on 10:26 - stackoverflow.com/questions/48032291/property-query-is-missing-in-type-observable-ionic-firebase?rq=1
Hello! This is a great video but I'm having problems with the Profile page.
My code is exactly like yours but when I try to create the profile i get:
Runtime Error:
Uncaught (in promise): Error: Reference.child failed:
First argument was an invalid path = 'profile/${auth.uid}'/ Paths must be non-empty strings and can't contain ".", "#", "$", "[", or "]" validatePathString@localhost:8100/build/vendor.js:35668:31
==== JUST FOR REFERENCE, HERE IS MY CODE FOR THE PROFILE.TS ====
import { Profile } from '../../models/profile';
import { AngularFireAuth } from 'angularfire2/auth';
import { AngularFireDatabase } from 'angularfire2/database';
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
@IonicPage()
@Component({
selector: 'page-profile',
templateUrl: 'profile.html',
})
export class ProfilePage {
profile = {} as Profile;
constructor(private afAuth: AngularFireAuth, private afDatabase: AngularFireDatabase,
public navCtrl: NavController, public navParams: NavParams) {
}
ionViewWillLoad() {
this.afAuth.authState.subscribe(data => console.log(data.uid));
}
createProfile() {
this.afAuth.authState.take(1).subscribe(auth => {
this.afDatabase.object("profile/${auth.uid}").set(this.profile)
.then(() => this.navCtrl.setRoot('MainPage'));
})
}
}
Help please!!!
try with ` and not " (in the path)
Thails SirGugul hey! Thank you sooo much!
This tutorial is doing well until you arrive at ruclips.net/video/uESqBwFVf1Q/видео.html which is the most important thing in this tutorial, and that moment you'll know, You fucked up! LOL
Hi Paul, can you help me? What condition do you give to check whether profile has already been created?
What if I had to display the information on multiple pages? Do I have to query the database everytime? Or is it possible to store the data somewhere?