Introduction to Flows: Building a Travel App with Chat, AI, & Authentication

if you've ever wondered how you can simplify your app development journey and add powerful features like chat AI or authentication without Reinventing the wheel this video is for you let's add all of these features while building a new travel app in this video now the way we can build out these powerful features in a few minutes is by using flows by flutter flow flows allow you to add full functionalities with a few clicks they not only provide the UI building blocks but more importantly the actions logic and Firebase schema to build your app with these key features flows are changing the game for developers by automating powerful yet common functionalities of all top applications but instead of telling you let me show you how we can build a reimagined version of culture trip with chat Ai and authentication using flows so here I have a travel app that I've started to reimagine the culture Trip app now let's start with authentication now we need authentication for all applications we always need to create almost six different pages including a create account page a login page an edit profile page forget password page and more these are all tedious but necessary pages and they also need their own backend schema for user flow now if you wanted to add just a template Pages you can do that here but let's click on flows and take it one step further now we can see all the flows available to us currently I'm going to select account creation and profile editing as you can see flows lets me know all the pages and components that would be added to my application with the selection however once you add this to your project we can see the real power of the flows feature to start off not only have six core authentication Pages been added but you can also see the connected navigation and appropriate action flows added by using this user flow secondly a new users collection in Firebase has been automatically added with the appropriate fields and if I'm just getting started I just need to set up Firebase which I can also do in the background using flutter flow's new manage Firebase feature next up note that on the create account and login Pages the actions to add a new user to our Firebase collection and to authenticate a user to allow them to enter the app is already set up due to the flow that we imported secondly the various types of authentication have already been assigned to the appropriate UI on the pages for example the Google and apple authentication being the most common although this will require a little bit of setup on the back end lastly the create profile page and edit profile page are utilizing a component that has been preset up to edit our user collection this component will validate the form's information allow a user to update their profile in app showcase a successful edit and navigate back to the homepage you can easily adapt this forum to your own preferences finally we can now adapt this UI template to our own personal theme I'm going to go ahead and speed this up but adapt it to culture trips theme now that I've adapted our application to culture trips theme let's go ahead and do a quick test for authentication so first I'm going to go ahead and create a new account okay I'm going to go ahead and enter in my email and password and click create account nice it takes me to our create profile page where I can now upload my own profile image I'll choose as penguin I can select my role which is being validated by the form and I can put in a little bit of description about myself and it takes me into our profile page and logs me in however it looks like the login page is a profile page so I'm unable to navigate to my custom culture trip homepage so I'm going to go ahead and create a quick navbar to allow for easy navigation now let's go ahead and retest and we can actually check for authentication through our login using our initial user that we created in the previous setup and it looks like it's working and taking us us to our culture trip page and I can even navigate to my profile page and make edits as needed to my user collection okay so maybe you think that authentication is a little bit too easy let's go ahead and add in the chat feature to our application so that users can engage in the chat on the app in case they want to plan a trip together once again we have a flow for this so we navigate to flows and select the group plus chat flow that we can now utilize for this feature we're presented with a few different pages and components as well as new collection that will be added while using this flow note that you can add multiple flows easily and we take care of any conflicts by adding new fields to any existing Firebase collections so in this flow we have the chat Details page with an individual chat interface the chat invite users page the chat component and a few empty State components the impressive part of this flow is that the backend queries have been set up for you based on the new collections that were added to Firebase secondly the chat details page actually has conditional visibility elements based on the number of people in the chat so this flow actually includes the ability to group chat and the last thing to note is that the chat component has logic to showcase the correct messages based on who is the authenticated user now you can also use this by simply copy and pasting this chap component into the pages that you want now since we already have our color scheme setup let's go ahead and try out this chat feature so first off I'm going to go ahead and create a new account so that our user actually has another individual to chat with now I can view my main chat page that I've added to my navbar and I can also select the other users that are on the current platform let's go ahead and select and let's say hey now just to make sure it works I'll log back into our other account and let's make sure that we can send messages both ways great looks like this is working now I've added chat into trip planning in just a few clicks and I can also make it easy to send culture trip app links into our chat in our next step finally since it's 2023 let's go ahead and add in an AI chat feature that can help me plan my trip you can go ahead and add in the chat GPT component flow once you added in you can actually view the API Group that's been added directly to your project with all the headers variables and body set up for you the few changes that we need to adjust here are the following first make sure that your open AI profile has enough credits to call the API and that you have access to to GPT 4 however if you have access to another model you can always adjust this within the API Group next be sure to grab your API from open Ai and input it within this action chain this will allow our app to be able to actively call the API next be sure to set the scroll to field to list view within the action chain and finally make sure that you can actually access the chat GPT page from your app here I've set it up on my nav bar once again for easy access now let's go ahead and test it and we can access it directly from the Navar and let's say hey I need help booking a trip to Morocco sweet it looks like chat gbt is responding and now we can use it to help plan our trip now once again we can always make any design edits once we've added the flow so I'm going to go ahead and do that very quickly here and now we can take a look at our entire application we have fully integrated authentication we've added a chat gbt AI feature and we've added the ability for our users to group chat and talk to each other when planning a trip finally on top of these flows we have so many others that you can utilize for other applications for example with the KY and onboarding Pages you can allow your users to sign in with their phone number and validate that they have received the kyc code or with the support tickets flow you can allow your users to report issues within your application easily by implementing the components Pages schema and logic to obtain the user support tickets data and finally we hope to add so many more flows as well as to allow users to create their own as you can see we're excited about the possibility of allowing Builders to add powerful functionalities with logic and schema in a few clicks so go ahead and try it out at flutter flow.io and let us know in our community what other flows you'd like to see thanks for watching we'll see you in the next one

Channel: FlutterFlow

Views: 33,213

Keywords: Flutter, FlutterFlow, No Code, No Code Tools, How To use FlutterFlow, Google Flutter, Dart, No Code App, FlutterFlow App Builder, No Code App Builder

Id: UH0kFxncRgE

Length: 8min 27sec (507 seconds)

Published: Sat Dec 02 2023