![Daniel Habibi](/img/default-banner.jpg)
- Видео 13
- Просмотров 20 573
Daniel Habibi
Добавлен 21 янв 2023
How to build an app with multiple user types in FlutterFlow | Role-Based Access Control (RBAC)
Hey #flutterflow fam!
I made this quick video because I see this question asked all the time.
How do I create an app in FlutterFlow with multiple user types?
This is known as Role-Based Access Control (RBAC)
A very important note that I forgot to mention:
Best practice when handling roles is not managing them from UI, but every feature call or request should be checked for roles and permission on the server side. Also, UI role management is great for user experience!
This is a short and sweet video to help give you a mental model on how to approach this.
If you would like to see how it is done on the backend, please let me know in the comments!
I made this quick video because I see this question asked all the time.
How do I create an app in FlutterFlow with multiple user types?
This is known as Role-Based Access Control (RBAC)
A very important note that I forgot to mention:
Best practice when handling roles is not managing them from UI, but every feature call or request should be checked for roles and permission on the server side. Also, UI role management is great for user experience!
This is a short and sweet video to help give you a mental model on how to approach this.
If you would like to see how it is done on the backend, please let me know in the comments!
Просмотров: 1 020
Видео
FlutterFlow | API Best Practices using Data Types
Просмотров 2,6 тыс.7 месяцев назад
Let me know if you found the video helpful and what you want my next video to be on! Try out Xano as your backend for your next @FlutterFlow project! xano.io/tpk3qpcn
[FlutterFlow] Xano Firebase Dynamic Push Notification System
Просмотров 1,3 тыс.11 месяцев назад
Hey everyone! Sorry for not uploading in a while. I've been busy with client work, coaching, consulting, and my 2 jobs. I hope this video gives you a good mental model on how to implement this and helps you get started on your push notification system in Xano. I'll update y'all with the templates and snippets on Twitter/X so be sure to follow me there! Let me know what else you'd like to see an...
How to create hover states in FlutterFlow - Web Navigation
Просмотров 3,9 тыс.Год назад
Hey everyone! This one is on how to create web hover states in #flutterflow with the mouse region widget. Sorry again about the mic. I'm still traveling and this is the best I can do for now! So what are hover states? Also known as a "mouseover effect," they are commonly used in website navigation menus, buttons, and links to improve user experience and provide visual feedback. Let me know if y...
Map view cards with JSON and FlutterFlow's Google Map Widget
Просмотров 3,3 тыс.Год назад
Hey friends! So the audio is a little bad in this one because I'm traveling (this was the second time recording it too). Anyway, I wanted to show how you can use custom dialog boxes to display JSON data from an API (in my case it's form my Xano backend) over map markers displayed in the GoogleMaps FlutterFlow widget. Also, sorry for not uploading in a while! I've been extremely busy but I creat...
Designing for the User Experience - UI and UX in FlutterFlow [Part 1]
Просмотров 360Год назад
Hey everyone! This is a new series I'll be doing since people have requested it. Please note that this series will be showing different UX and UI functionalities and designs and how to implement them. These are not final designs so I don't recommend trying to copy them as is!
FlutterFlow and Xano Tips and Tricks
Просмотров 512Год назад
This video was requested by a user on the FlutterFlow community. It contains a bunch of tips and tricks to save time and increase your productivity. Let me know if anyone of these helped and happy building!
Calendly Style Booking System with Xano and FlutterFlow [Part 2]
Просмотров 847Год назад
This is part 2 of the Calendly style booking system where I show how I integrated it with Google workspace. This should help you create a booking system like the one I've created with Xano, Google, and FlutterFlow. I would like to show more but it would involve showing sensitive information so I can't. Let me know if you come up with something better! Xano Video for Google Service Account Setup...
How to integrate Xano + Firebase + FlutterFlow for Social Logins and Push Notifications [Part 1]
Просмотров 2,5 тыс.Год назад
Part 1 contains the token exchange process (login action flow and Xano API call) and how to avoid 401 Unauthorized due to Xano authentication token expiration. IMPORTANT: The google kids contains the key to decode our JWT identity token from from Firebase and through FlutterFlow I wasn't super clear about this in the video, I apologize! Also, you should do the Firebase setup according to Flutte...
How to get Empty List Widget working with Xano and FlutterFlow
Просмотров 413Год назад
I'm super happy to share how I got this functionality working!! I hope it helps someone! Also, if you want to learn more about the Empty List Widget I recommend this video from a FlutterFlow livestream: ruclips.net/video/zSDzmU1Vfvs/видео.html
Toggle Icon Update and quick fix for FlutterFlow and Xano
Просмотров 1,4 тыс.Год назад
This is a follow-up/update to this video: ruclips.net/video/uz2H7UBS4aQ/видео.html I didn't want to let this one go and I had to let y'all know that I found a better workaround because I discovered the root issue! I hope this helps someone out there!
Calendly Style Booking System with Xano and FlutterFlow [Part 1]
Просмотров 2,1 тыс.Год назад
This isn't complete yet but I wanted to share my progress so far and hope it helps someone with the model of how to build something like this!
Why it took me a week to get Toggle Icon working with Xano and FlutterFlow
Просмотров 417Год назад
UPDATE: I couldn't let this one go and found a better workaround that involves a custom function! Check it out here: ruclips.net/video/JTDAwYdaiU8/видео.html I have no idea what the title should be for this video but I go over a bunch of things having to do with Flutter, API Calls, JSON, Authentication, Toggle Icon, Xano, Firebase, and experimenting with different logic flows. For native Englis...
Hi, thanks for everything. can i get a discord invite please? Regards
@sgmxmx9008 My pleasure! Here you go discord.com/invite/uU8xXU3Z
I'm trying to build an app that has partners and clients, and obviously this needs to be separated. I'd love to see how to set this up in depth. I'm using firebase
Thanks was seeking to convert json to datatype for days and found your video... manage to make it working in 2 minutes. Thanks again.
The question is, how does one sign up and update each user document separately?
@Mwelwajr it depends on the type of app. For example, a 2-sided marketplace can have a single signup, and during onboarding, the user can select their roles. In my example, the admins are assigning user roles in the admin dashboard.
@@danielhabibi can you please do a full video for this role-based access
Would you know if FF has introduced features to be able to access the card without use of custom functions since your recording? Regardless, would love a peek at your code. Would appreciate a discord invite.
I don't believe they have, and just so you know, the app shown in the video is using this method in production. I've had a few ideas on how to improve it, but haven't had the time to explore them yet. I'll try to prioritize it and release an updated video if any of those ideas pan out. In the meantime, here's a link to my discord! discord.gg/7wkm5pEc
Hi Daniel, Can I please get access to the discord
@@E2dbro discord.com/invite/WhCxx8td
This is helpful! I would love to see a more in depth video on this
@XxCancerKid15xX you got it. I'm adding it to the list. Thanks for letting me know!
Looks great, would love to join the discord as well
Thanks, here you go! discord.com/invite/wWbQm7yU
Sorry if this is a silly question but could you maybe show what your get user data call is at the very end of the login action chain and also the get user data call you used for the 401 error, I just want to make sure I have set both up correctly.
There's no such thing as a silly question! The get user data call is a standard auth/me endpoint in Xano, which is used to grab stuff like their name and update the app state with those variables. Please let me know if that clears things up for you or if I need to clarify anything!
@@danielhabibi Thank you for clarifying, it is much appreciated. I was attempting to use the user endpoints which in hindsight was rather silly. This makes much more sense.
Hi, thanks for everything. can i get a discord invite please? Regards
My pleasure! Here you go discord.gg/WMfzqMMU
@@danielhabibiI appreciate it very much, thank you! Do you know why I can't close the cards when I tap on the map? The cursor on the map is a "hand" and does not recognize the click :S
@saruskas My pleasure! Thanks for posting on Discord. I replied to you there.
can I get a discord invite too
Here you go! discord.gg/pUsVStCU
Do you still have the discord channel?
Yup, here you go! discord.com/invite/ewCquAUd
nice. would love see all of this. can i get a discord invite?
Of course! Here it is: discord.com/invite/6vDJPevc
Hey friends! This method is unfortunately outdated, and I recommend following the steps here instead. I'll make a video on the new method soon! docs.flutterflow.io/data-and-backend/api-calls/api-calls-101
Hi Daniel! Can you please create a video showing this update? I don't think I am creating my Data Type correctly, as if doesn't seem like my page state is updating. Thanks again for the helpful videos!
@@becraveiro1 Hey! The FF team actually just added an auto-create Data Type from a JSON response because so many people were struggling with it and spending too much time trying to get it to work. 1. Test your API 2. Copy the JSON response 3. Go to Data Type Tab 4. Click the new button and paste your JSON in the box Hope this helps!
@@danielhabibi Hmmm Should I copy the entire Body JSON form the API Response test or should I copy the Raw Body? Also, im only interested in a few paths, does that make a difference? Just to give some context, my API Call is a google maps one that outputs a list of restaurants (lat, long, name, address). I am parsing my Data Type as a List, but the Data Type itself is not a list (each item form the API has only one lat, long, name, and address). Seem like my Page State (DataType List) is not being updated using the JSON to Data Type.. Weird.
hey Daniel thanks for the quick tuto. i follow the same tuto as you did however im returning an error. Would you be able to help me by any chance to figure out where is the blocking?
Hey, my pleasure! Here's an invite to my discord server where I'll be glad to help you out! discord.com/invite/8sXqh3eR
Can you please share the function google_service_account_access_token sir? I stuck at this step to get Authorization token.
You can get the snippet for the function from the description of this video and it shows you how to create the service account: ruclips.net/video/SJd-oC-OG_E/видео.html
Thanks for your support!@@danielhabibi
Hi Daniel, I clicked on the discord invite in the post below but it is no longer valid. Could you please resend the invite or share the sample app here? I need this function for my app and hope to hear from you soon. thanks and much appreciated!
Hey! Here's an invite. You'll find it under the custom-code channel. discord.gg/ZvY6pHad
@@danielhabibi Thank you so much Daniel, managed to access the discord. I just subscribed to your YT channel and looking forward to more amazing tutorials on FF. Cheers!
We want to build app can you help as contractor?
Hi! Please email me at danielhabibiofficial@gmail.com
Thanks!
Hi, how did you put the button to navigate back on the map? Mine stays outside
There are two ways to do it. Option #1 is how I did it using a stack. You can see it in the widget tree at 1:20 in the video. #2 Click on the scaffold and add a Floating Action Button (FAB). It's under Page Elements and can't be added as a child of another widget which is why we need to select the scaffold to see it show up when adding a widget. Hope this helps!
@@danielhabibi Thank you for your help! Just suscribed, I stay tuned whenever you post helpful videos like this
Hello, very good video. Which recorder and editor do you use for your videos?
Thanks! I use screen.studio/@oKP8q for both recording and editing. It's mac only though.
hey Daniel, do you think the JSON parsing issue is resolved now with the Data Types? I will give it a go!
Hey! Yes, exactly! You shouldn't have any issues by using Data Types.
Hi Daniel, thanks for this video! I'm just wondering, how does FF take the API 'parse as Data Type' and map it from the JSON path to the relevant field in 'Data Type', as per your video at 4:55? I'm trying to do that but I don't have the option 'Data Structure Field' underneath the 'course' option.
Hi! I think I left out that part by accident. We want to create our Data Types and build out the schema the way our API is structured. This image should help imgur.com/LzUzdrR Also, FF actually changed the documentation on this so I'm going to re-record it and upload it as soon as possible!
Hey@@danielhabibi TYSM, your image makes sense, and of course it now makes sense that the data type is mapped the way the API is structured! I went through the FF documentation and noticed that I had to update my FF app on my mac...that seemed to have the 'Data Structure' options. And it didn't need the 'Update App State' variable to map the API response to the data type. Hurray! Can I be cheeky...and ask for a next video request? Would it be possible to do something with Xano/API populating dynamic children that ISN'T a list view? e.g. some sort of stack? ❤
@@ksrath1 My pleasure! Yes, I need more requests but I'm not sure I understand this one... What do you mean exactly? Like one that is generating dynamic children of a PageView or Swipeable Stack? Feel free to send me a Loom or screenshot through a DM on twitter, on discord, or to my email.
Such a great video! (And teacher! #Subscribed) I’m still having issues though 😔 Is there somewhere I could send you an email or show you what I’m dealing with?
Haha thank you! Yes, of course, and I'm sorry to hear that. You can email at danielhabibiofficial@gmail.com
yeah free marketplace is a great idea please do it, also this video was amazing and informative, thank you so much
Great, will do! My pleasure!
Sorry about the weird aspect ratio on this video!
what do you do if there are multiple markers on the same location, how can you give the user an option on which marker to see more information about???
Great question! Unfortunately, I haven't had time to add that functionality. Right now, it returns the first object it finds. I'm not positive you can hack the FF GoogleMaps widget to do that. If you find a solution, please share it with the community!
Hi Daniel congrats!!! man you helped me a lot. I'm from Brazil and I have a low experience in code but i'm doing well with xano and FF and I was looking fo this solution for a long time because I think as you, xano is amazing but a native integration with firebase is also amazing. Man I have no way to tank you for that. Sucssess and send more amazinf videos like that!!!!!
I need a very strong coffee...
share this project link
You forgot please...
Great tutorial! Good luck
You are a lifesaver. Thank you so much. I had massive headaches getting the JSON object parsed
Great work! Keep on pushing! And good luck with your future, btw!
Thanks Dimitar ❤️ I really appreciate your support and encouragement 🙏
Amazing info mate, thank you!
My pleasure Alex!
Great tips mate, gona have to re-watch again as there is lots of tips!
I'm about to record another one because I've found even more ways to improve my workflows in FlutterFlow!
Can you make tutorials for notifications on foreground?
I'll add it to the list. Thanks for the suggestion! Is there a specific use case you have in mind?
@@danielhabibi Allow the user to see his notifications when he clicks on the notification icon
If you're using Firebase, check the official FF channel. They just showed how to build this on yesterday's livestream. If you're doing it in or another relational DB, I'll make a video on it!@@alydiallo4179
Hi Daniel, amazingly useful. Many thanks for the upload and your effort putting the video together. Just wondering when/if you'll be releasing Part 2 for notifications?
My pleasure, Steve! I'm a little slammed at the moment, but you're the second person to ask for it recently, so I'll try to do it asap! Also, I was thinking of creating a FF template and Xano snippet for all this to make people's lives easier and help jump-start projects quicker. Let me know if you're interested in that!
Hi Daniel! Thank you so much for your help, I would love to see Part 2. The snippet would make it super useful, I'm sure many people would use it. Keep up the good work!
Hello, thank you for this very interesting video. I would like to see the custom functions, can I have an invitation to the discord? thank you.
My pleasure! discord.gg/6dsrQCbK
Great Guide Video! Are you releasing the second part for the Push Notification soon? I'm really looking forward to that.
Thanks! Sorry, I never got around to recording part 2. I'll try to get it out asap!
I have another question @danielhabibi , when you make the : Create Authentification Token at 6:30, the return value (authToken) in a percist App State, but at 8:47, you make a first action : Backend Call to a get user Data with the current 'authToken App State' and i don't understand how your api call work * How can you know if the authToken is still valid or not ?
I actually changed the way I set up the homepage flow and will record a new video on it soon. The purpose of the Get User Data call is to know if the Xano authToken is still valid using the conditional (200 means it's still good). If it isn't, then make the Firebase Auth call again and reupdate the appstate with the new token (the same way we do on the login button). This way the user doesn't have to log back in since the Firebase Authentication refreshes on its own (the JWT will always be valid AFAIK, still not sure about the Firebase JWT TTL). The only difference is that we will use "rebuild current page" so it refreshes the homepage calls with the new valid Xano authToken.
Ok i understand the logic ! so is that what you do @@danielhabibi : ruclips.net/video/mShwpzv4bj0/видео.html
Hey daniel, can you show us the backend api call you made in flutterflow please, thanks a lot for this tuto!
Hey, my pleasure! are you talking about the call "Firebase Auth" shown at 1:00? It's just a post call with an id_token variable (string). Make sure to add the variable to the JSON body. If you're still having trouble, let me know and I'll try to help!
thanks !! I made it@@danielhabibi
Would love to see your custom function for generating the list of lat/lng values for the markers. I have an Algolia search via an api call where I return results and am trying to pull the values from the json results into the lat/lngs wanted by the Google Maps Widget.
For sure! It's posted in my discord server with instructions because I accidentally hard-coded the path name. Anyway, here's an invite discord.gg/ZGrM38pF
Hi Daniel, I'm facing the same issue however for expecting double but receiving dynamic. For your argument, how were you able to define jsonList as dynamic? I don't see any option for type dynamic.
Hey Steven! Everything set as JSON Type will show up as dynamic. In the custom code I show, jsonList is set to Type JSON and List is checked/enabled. I actually got a notification for your message on github and think you're right, might be the same bug for double as it was with int!
@@danielhabibi ah thank you! this definitely worked! I feel futterflow has a lot of issue interpreting JSON value type.
@@stevenyliu Awesome! Yeah it has quite a few issues with parsing JSON. Now that more people are using it and reporting bugs, it should be getting much better!
Hello, thank you very much for your publications, they are excellent, I would like to have access to Discord, but I can not send you messages on Twitter because I am not verified, is there any other way to get access, thanks....
My pleasure! Sorry you couldn't DM me on Twitter, I'll have to fix that. Here's an invite: discord.gg/2JGGWqqV
@@danielhabibi thank you very much, this is a great help. 😃😃
hey man i applied to y combinator with my idea and wanted to get your thoughts on if you think flutterflow would be a good place to build it
How to get Discord access?
DM me on Twitter or on the FlutterFlow Forums!
Wow... I'm looking for this function for a while and you seem to have it done but impossible for me to clone what you've done, i'm too novice. Do you think it is possible to create the same function with Firebase?
Yes, it's definitely possible. Look up James NoCode on RUclips. I think he has a video on how to do it with Firebase.
Great stuff! Avoiding 401 makes sense and I didn't consider that.
Thanks, man! Very helpful!
Hi! Nice job! Can you make a video about frontend (FF) part?
Thanks for the comment! I think there are other front-end videos, but I will make one since my approach seems a lot different than the rest. Anything in particular you would like me to focus on?
@@danielhabibi very interesting how you made disabled buttons and selection on click. Some chains of actions?