FlutterFlow Overview & Tutorial 2023 (Watch Me Build A Fun Quiz App)

in today's video we're going to be doing a beginner's overview and tutorial of flutter flow and then a little bit later in the video we're going to be building a fun app just to give you an idea what kind of apps that you can build with flutter flow now before we get started as always all the apps that I build and or demonstrate on this channel are available to view and or clone from my patreon community and you're gonna see a link to it in the description below also this video is brought to you by mastering Florida flow which is my comprehensive training that teaches you anything and everything that you need in order to build pretty much any kind of app with flutter flow from very very simple to very very Advanced you're gonna see a link to it in the description below as well now before we get started it's important to internalize the overall architecture of how web apps desktop apps as well as mobile apps or after you understand down this and internalize this everything else is going to be a lot easier alright so here we have a general diagram of how a lot of these apps are structured and how they work under the hood okay so here we have a user and this is a person that's interacting with the app okay so we have the UI which is the only thing that the user sees okay the user does not know how the app is built they don't know data nothing like that they only really see the UI and really that's the only thing they really need to see okay so they see the UI but you can have an app just with the UI because if you had an app just with the UI that would be called a website or a web apps are Dynamic apps do something in response to what the users seek in response to what their requirements are so the next thing we have here is this logic uh subsystem okay and this is the part that's trying to figure out what the user wants in order to kind of give them the data do a bunch of calculations basically it's a way to give what the user wants okay and so a lot of these things here have to do with the screen have to do with interacting with the screen have to do with getting the data in many ways this is the heart of the app this logic part is what makes your app essentially an app okay if you didn't have this uh you wouldn't really have an app okay and last but not least we have the storage subsystem and this is the part where you're gonna be storing data you're going to be reading data you're going to be writing data you're going to be deleting data you're going to be creating data things like that and typically when it comes to app Builders such as flutter flow you have a bunch of options at your disposal the first thing is local state okay this is the simplest way to store data and this is where you can store just a bunch of values maybe like a string maybe a number things like that very very simple values uh the next thing that we have here is a more comprehensive storage subsystem and typically with Florida flow you're going to be using firebases firestore DB and we're all going to talk about that in just a minute but essentially this is a more comprehensive system this is a more involved system you can store lots of different data types there you can organize it the way you want and it's very very scalable it's very very fast it works really really well another way of storing data or getting data or kind of manipulating data is by using an API an API stands for application programming interface and unlike these two data types which you're essentially doing is you're connecting to a third party and interacting with them right so you're connecting to another server somewhere are out there and you may ask them okay I want this piece of data or I want to store this piece of data where I want you to do some some logic okay typically with apis uh you might have apis that only store data so you're going to be you know storing data and retrieving data but you also have apis that do logic okay so things like AI stuff right you basically tell it uh do this for me or generate this image or you know generate this piece of text and it returns with whatever you asked for so this is basically a way to connect to another computer and get them to do something that we either don't want to do ourselves or can't really do ourselves again we'll talk more about that in just a little bit so the most important thing here is to understand this diagram here is that everything flows through the UI right it doesn't start at the data it doesn't start the logic it starts with the user that that's kind of what web apps are right web mobile desktop apps they start with the user right they're interacting apps the user you know asks for something they wanna they click somewhere and then it fires up this flow to the back it doesn't start from the back it always starts with the user okay so now that you kind of have an idea of the general you know app flow the general kind of app architecture let's go ahead and log in into Florida formula and I'm going to briefly show you how all the pieces fit in uh from this kind of architecture how they fit in when it comes to a no code app builder such as flutter flow okay so here I am on Florida flow's home page I'm gonna go ahead and log in and so I'm just logged in and as you can see I have lots and lots of apps and that is because I've been building apps with flutter flow for quite a while now and as a result I understand what you can do and what you can do with flutter flow okay all right so let's go ahead and create a blank app here and we're just going to call it I don't know test that we're going to say create blank and we're gonna skip all this for now all right so we've just created a blank app screen and there's lots of things going on so let me kind of make sense what's happening here so the first thing that you want to understand is you want to work your way from left to right okay you want to start at the UI you want to start mapping uh the functionality that the no code Builder offers you to what you're seeing here okay so if we go back to our app this part here these elements are they're actually called widgets are the UI elements okay and this these are the things that the user is going to be interacting with now if you come over here to this uh widget tree you can see all the elements all the stuff that's happening on the screen arranged in this kind of tree hierarchical structure and this is really nice because if you look at this page age here right you're not going to have elements all over the place you might have uh you might have maybe a container and that container is going to have something inside of it okay it's not just going to be a container and then text and then this this you're gonna have stuff inside of other things and uh when you're talking about stuff that's inside that's typically called children so you may have a container that has a child uh being another element or it has multiple children stuff like that and so if you look over here we can see that right now we don't have many things going on we have a home page we have a column app bar text but we have a column and what that means is that the elements inside of a column are going to be arranged in kind of this vertical fashion so if I click this and I type text I have this text but if I add another text it's going to be one below the other okay because that's a column okay um on the other hand if I create a row let's say I create a row inside the column and I add the text and I add an another text now they're going to be arranged in kind of this horizontal fashion and that is because stuff inside of row creates a role right so if you have a role and you put stuff inside of it the rose job is to position those elements horizontally whereas a columns job is to position those elements vertically okay and you can obviously have a row inside of a column which means that you know the row is the row itself is going to be this this horizontal piece made up of other children but the row itself is going to be just you know just another element inside of a column so I can create another row and those two rows that are inside the column are going to be arranged in a vertical fashion because they're inside of a column okay so there's lots of things that you can arrange and obviously you have lots and lots of widgets right we have these commonly used elements layout elements we have all of this thing but the biggest takeaway here is these are your UI elements which is kind of what we want to do we want to kind of work from left to right we want to see where everything Maps together so we covered the UI briefly let's talk about the logic just a little bit right so the logic really begins when the user is interacting with the app right right now we have the UI so nothing is really happening but if you want to have something something happening you need to head over here and you can create an action so now uh if if the user you know maybe clicks on an element or clicks on a button something is going to happen your app is going to become interactive right so now instead of just having a static a static piece of app or Stat static pixels essentially uh you're going to have a situation where now it's responding to what you're doing right so for instance I cannot come over here and I can add a button here and I can add a button and typically buttons are interactive right text may not be interactive right most of the time it's not going to be interacting but buttons are for the most part interactive right so I can come over here I can open this flow editor and I can create a bunch of action that will happen in response to this top event we can also have a double tab we can respond on a double tab or on a long press but you know typically you're going to be responding on the tab that's kind of what the user expects when it comes to a button so we can add an action and we can you know we can do all kinds of things right we can write to the database we can um you know call a number send email lots and lots of things that we can do we can play sound alert dialogue a show a snack bar so depending on what you're trying to do you have lots and lots of options and if these are not enough you can create a new action yourself okay and so when it comes to this logic area right it all begins with this um action flow editor right so the user is looking at an app and they want to do something with that they want to maybe enter their name or they want to refresh the app and you know put some new data in all of that is going to be again when you click on whichever element that you want to respond to and you create you attach an action to right so when you click on let's say a button and you click on open and then you can add an action and you can create uh some kind of a some kind of an event some kind of over a response and obviously you know depending on the widget that you're using right you can click on the widget you can come to this action that and you can open that up and you can see you can even attach an action to a text when it's tapped when it's double tap or a long press so basically the same actions as a button depending on the widget you might have different actions as you're going to see in just a little bit but for the most part you have a button that has you know a tab double tap or long press but the other thing that you can do is you can just create an action when this page is loaded right so if you want something to happen without the user actually clicking on something you want to load some data or you want to do something while you know before the user is actually you know talking to the app uh you can click on home page and you can come over here and you can open and as you can see you have different ways of of attaching actions so this is a way to to get your app to do something without having the user click on anything right so as soon as the the app loads we can have an action so we can display a message we can you know send a request to another server we can do all kinds of interesting things another thing that you can do is you can attach an action when the user shakes their phone because I believe like with iOS uh when you shake your phone it's like an undo okay and so you can attach uh some kind of an action when the user shakes their phone but granted this is not something that you're going to be doing often but on page load action event is something that uh definitely has a place because you can do some very very useful things uh when it comes to doing something when the user just loads the app the next thing I want to talk about about is the storage okay so you need to get your data somewhere and you may also need to save data that the user inputs and so how do you do it well and so like I mentioned in this architectural diagram there are several ways of storing your data of retrieving your data and so let's talk about them one by one so the first thing I want to cover is when it comes to storing very very simple values so if you come over here you have App State and so what you can do is you can add a state variable and what's that going to do is that's going to allow you to store a piece of data so for instance we can add a string as a state variable and I can say well string VAR right for variable I can create it and now inside of my app I can access this variable and I can store all kinds of data in there and I can retrieve but the problem with app state is that you can only store very very simple types so I can add an integer right so I can integer VAR here and I can say well this is going to be an integer and it's the same problem right they can only install store a number I can store a string the other thing that I can do and I can also store these variables on a page level so app state is across the entire app meaning that you can access that variable uh in on any page because you can have multiple Pages not just one page but this local page State variable is basically the same thing except it's only going to be accessible on that page so it's it's a way of kind of to kind of organize your state it's it's a way to kind of organize uh which variables store what kind of data I mean do you need to store data that's going to be available and accessible across the entire app or do you just want to store data that's only going to be accessible on this page okay that's what that's the difference between App State and page now if you want to store more complex types something more complex than just like a string or an integer or a DOT double something you know more involved maybe documents with many many fields or collections of documents and things like that then what you're typically going to be using is you're going to be using Firebase as far store DB and the first thing that you need to do is you need to connect your Firebase account so if you go into settings and Integrations here you're going to go into Firebase you need to enter your Firebase project ID and so if you head over to firebase.google.com you can create a so-called Firebase project a Firebase project gives you a lot more than just a place to store data so as you can see we have here firestore database but we also have a lot of other things a lot of other interesting features that we can use with our app and so once you create your project as you can see I'm in this project already you're gonna head over to this gear icon here you're going to go into settings and you're going to copy your project ID you're going to go back to your app and you're gonna paste it you're gonna say connect you're gonna say I want to generate config files right here you're going to wait a little bit and now as you can see it's this Firebase setup complete and what you've just done is connected your database to your app which means that now you can directly talk to the database that I showed you here inside of this Firebase console now after you connected Firebase to your app you can head over to this Firebase console here go to firestore database and you can create data here that's going to be available uh inside of your app and your app will be able to read that data it'll be able to modify it and things like that so I have a bunch of different collections here probably if you log in and you have a brand new account you're not going to have all of this uh it's not important really but one collection I want to show you and this is going to be something that we're going to be making an app around is this words collection right so if I click on this words I have this collection inside this collection I have 10 documents okay and so on each document I have F4 Fields so we have English version of the word we have the Spanish we have the French and we have the Portuguese so I essentially generated 10 words 10 random words and I also for each word I listed uh their translations in three other languages okay so here we have another one house Casa etc etc we have apple and then we have the various translations and the reason I did that was to show you how this organizational structure works but also to show you how you can build an app using this functional and so if you head back to flutter flow you can click here to firestore setting and you can configure the schema which essentially tells flutter flow about the data that you have in your firestore DB so I'm going to say add a new collection and I'm going to say words and then I'm going to create the schema meaning the fields remember we had those four fields for each word we're going to start from scrap and then you want to copy exactly how you have it so I have enes FR p t and so I'm going to say e n I'm going to say this is a string I'm going to say es this is a string I'm going to say FR and PT string okay and so now we have a schema inside flutter flow which it means that it can essentially access that data in your firestore DB and you'll be able to kind of manipulate this data inside of flutter flow because we've defined a schema for it and that's going to make it easier to kind of work with this data okay all right so now that I've given you an overview of flood of flow the different pieces the different subsystems the UI logic as well as the back end let's quickly build a fun learning app and that way you can see how you can build a quick app from beginning to end the app that I had in mind for this video is an app that allows a user to learn foreign words in a very unique and interesting kind of Tinder style format so the user is gonna see a foreign word and then they're gonna have an option to swipe left or swipe right on the English version of that word and to guess if this is the same word that they're seeing so they're gonna see maybe a Spanish version of house and then they're gonna see the English words as cars that they can swipe left and right and they need to decide if the word that they're seeing in the foreign language is the same word that they're seeing in the card below and so they need to swipe right if they believe so if they swipe right and it's not the correct word uh they're gonna see a message that says wrong if they swipe right and it is the correct word they're gonna see another message that tells them congrats you pick the right word all right so let's begin let's let's build this up from beginning to end so the first thing I want to do is I want to delete all of these little things because we're not gonna need that let's go ahead and change the uh the title of this uh window here we're gonna call the word font and the next thing that we want to do is we want to build this eui we want to kind of Envision how the UI is going to look so the first thing we want to do is we're going to go into column and we're going to add this swipeable stack okay and this is that Tinder Style swipeable stock you give it some data and then you can swipe left and right with the data that you kind of fed in the next thing that we want to do is we want to give the swipeable stack a car that's going to display the content because right now it's just a widget but we need to give it a card that's going to present the contents in the inside of the swipeable stack in a certain way so we can select the swipeable stock click here uh we can pick uh you know just a generic widget but if we click here we can see some of the widgets that have been built and we can take a look so we can type car in order to find some kind of a car that we can use lots of interesting cards here and let's see so maybe how about this one okay so here we have a card it kind of looks like what we want but there's a lot of things that we don't want so what we're gonna do is we can we can expand this to see the whole thing here but we can come back here and we can delete all this because we don't need any images uh we don't need the rating we don't really need the script and all we need is this uh to have the the actual word and there's probably something else we might need so we have a column let me go ahead and wrap this text inside of a row so we can nicely Center it I'm going to Center and that's going to be the word let's make it a little bit bigger okay so now this is going to be the word that's going to display uh in English because initially the person is going to see a foreign language word and then they need to match it up to the English level word okay so let's go ahead and give it a little bit of spacing from the top something like this and let's go ahead and add a image okay so we're not going to add an image on the row level we're going to add it on the column left so I'm going to say I want to name it and this image is going to be below and now we have an image below now I want to Center this image so I'm going to wrap it inside overall right we're going to say wrap widget row and then we're going to Center the row and actually I want this image to be above and so what we're going to do is we're going to take this row image we're going to drag it above and now we have this image and this image is gonna displayed the flag of the words that were matching so the idea here is we're looking at the English level word so maybe this is going to display a U.S flag uh just to show the user that they're matching English level words okay so maybe make it a little bit bigger okay something like this and now we have a swipeable stack we haven't given the data yet but we're gonna do that in a second but first I want to create another little widget above this that's going to display a foreign language word that the person needs to match uh to their respective uh English level word okay English language word okay so we have the swipeable stack inside of a column what I'm going to do is I'm going to add another container here I'm going to drag and drop it right there and I'm also going to Pat it a little bit from the top and let's go ahead and fix it up let's give it up let's make it wider and height of 100 that's fine and let's go ahead and make it rounded Corners really really nice let's go ahead and do maybe 10 okay a little bit round that we can also do some other styling we can do box Shadow okay that's nice kind of like what we have here let's stay let's go inside this container and add a text and now we have a text and let's go ahead and Center this text now it's also centered inside this widget okay that's fine okay and so this is going to be the foreign language word and then they're gonna see you know all the words that they need to match it up with okay and the idea here is I want this foreign language word to be picked randomly I don't want you know to pick the first word all the time or the second I wanted to pick uh P pick randomly and if you come over here we have 10 words and so I want this foreign language word on each invocation to be picked at a random fashion okay so if the person loads the app maybe it's gonna display flower or you know Spanish floor or maybe it's gonna display manzan right so if we come back over here what we need to do is we need to pick a random word we need to pick something at around and for that how are we going to do that well first of all we need to load the the data right we don't have any data it doesn't matter if you have a random integer we don't have any data okay so what we're going to do first is we're going to attach an action the home page uh to do something when the user loads the app and what we're going to do here is we're going to generate a random number to pick a random word out of our collection okay so I'm going to add an action on this home page level okay we're going to add an action and we're going to do on-page load and I'm going to say custom action I'm going to create a new action and the only thing this action is going to be doing is going to be returning a value it's not going to be taking anything in so we're going to be returning an integer okay and we're going to click here we're going to generate this action I'm going to call it uh gen random integer integer is a number we're going to regenerate this and now we need to add custom code here and we can simply go to open AI codecs we can type uh generate number from 0 to 9 okay in computer science counts start from zero okay so zero to nine is the same thing as one to ten when it comes to you know the English language right when it comes to explaining uh different counts to humans zero to nine zero is the first element in the list nine is the tenth element right so one to ten okay so we're gonna generate a random number from zero to nine because we have ten documents ten words so that's kind of what we need and it went ahead and generate it we're gonna do copy action yes and now we created a custom action that's essentially generating a random number from zero to nine and then it returns right we have a return value we're gonna say save action and now when the user first loads the app we're gonna generate a random number from zero to nine alright so now that we have a random number from zero to nine let's go ahead and load the data let's go ahead and load the words okay so what we can do is we can click on home page as we had before we can come over here and we can add a backend query and we're going to do a query collection we're going to pick words remember we defined the schema for this so that is why it knows about it and we're gonna do list of documents and we're going to do confirm okay so now when the user loads the app we generate the random number and we also get a list of those words that we have stored in the database now before we can display a random word here we need to make sure that that random integer that we generated is available throughout the app okay and so if you click on home page and you click on this and you open this flow editor we need to make sure that we have this action output variable name and we're going to call it random number okay now that we have it that random number is going to be available everywhere and that means we can pick a random word out of our collection so we're going to click here we're going to click here to set up a a word we're going to pick words document we're gonna pick item at index we're going to say specific index and for Value we want that random in integer Valley we're going to click here we're going to go to action outputs remember that's the action that was loaded and we're going to click on random number we're going to say confirm and for the document properties remember we're we're pulling a whole document but which uh version but which uh translation text that we want to display well here we want to display let's say the Spanish version so we're going to come here we're going to say yes we're going to say confirm okay so now when the app is loaded it picks a random number then it displays a random word linked to that a random index and in this case we're displaying es obviously you can change it display maybe the French word or Portuguese word but I just have es here okay so let's go ahead and see if this works we're going to come here we're gonna uh compile and check our custom widgets so we do have an error the reason we have an error is because we're using a random function but we did not import the uh the math library right so we need to do Dart math here and now we don't we should not have a narrow so I'm gonna I'm gonna say say and we're gonna recompile this and in the second file call alright so now it compile them we don't have any errors right now okay so that's great the other thing you want to pay attention to is this number right here it says project issues this is not an error this is actually a warning so it's as Firestone rules are not deployed we can click here and we can deselect this because this is this is not private data and then you can click deploy you can click on deploy right here and now we've set up our permissions we don't have to worry about it too much in this case because this is not private data okay this is just general data so let's go ahead and run this out just to see if we are seeing a random word from our list and then we can finish this app all right so here's the app and as you can see we are seeing a random word here so if I reload this we should see another word here being displayed a different world okay now we're seeing a different word pick that random and displayed here this is all this part is still static we still need to fix it up which we're gonna do next but at least this part is working so we're going to close this we're going to come back and now we need to work on the swiping from functionality okay so let's go ahead and look at our swiping functionality and what's going to happen here well what's going to happen is we're going to load the swipeable stack with our words and then the user will need to swipe and depending on if they're swiping with the correct translation or not we're going to display a mess the next thing that we need to do is we need to load up our swipeable stack with the words okay so we can click here and we can load it up with the backend query just like how we did it before but we already loaded the words right so another way of doing it is we can click here and we can generate Dynamic children from the existing awards that we already loaded right so we can click here pick this word and then we can just call it items okay that way we don't have to do another query for the same data which is uh wasteful okay so now the swipeable stack is loaded up with the words with the items okay and now we need to make sure we're displaying the right words we're going to be displaying the English version and we also need to make sure that we have the right right logic so I'm going to delete this image for now we may add it later I'm going to click on this I'm going to click here to replace it with a dynamic value we have this items item we're going to click this and I'm going to display the English version okay so now we have these cards and the only thing we're displaying is the English version of a word that we picked out from the list right this is going to be an order because we're just getting the list okay so now if we run the sub let's go ahead and run that test environment we should have one already let's go ahead and open it up we're going to reload it so it sees the new changes that we've implemented okay so now we have a random word called guitara and we have guitar and that's actually it's the same one so let's say we can swipe right as you can see we see the cards behind it so let's say we swipe then we see the next word we swipe we can swipe left we can swipe right we see that we can reload this and we should see another random one okay here we see another random word and we can do the same thing so the only thing that's left to do is to have the logic that's going to tell the user whether they got it right or not so let's go ahead and do that right now and the way we're going to do it is if you click on swipeable style and you click here this actions open this up you're gonna see there's so many events that the swipeable stack is sending your way and that makes sense because you know you can swipe left and then swipe right you can up swipe down swipe or just any kind of swipe now when it comes to dating apps and stuff like Tinder you have left swipe and right swipe mainly you have those two main events but for this app I'm only going to be working on right swipe okay because the idea is if they do left swipe okay it doesn't really matter but if they do our rights why that means they're saying that the word that they're seeing is the same word um in a foreign language that they're seeing on top and that is where we need to tell the user whether they're right or not so that is why I'm going to be focusing only on the right swipe and what I'm going to do is I'm going to add a conditional action okay uh because when they swipe right we need to compare the words and to make sure that you know there are actually you know they're actually the same word and so the first thing that we need to do is we need to pull that random word okay we have that random word display but we need to recreate it okay because we don't have access to that to that you know that text field over there well thankfully we have this action inputs we have this random number so with the random number we can get the word uh from the list right so the way you do it is you're going to click on this condition right here you're going to click here conditions a single condition so we need to ask the system are the words equal okay are they the same document so for the first value we're gonna pick the word that's supposed to be random that word on top and right that word that's high so we're going to come here we're going to pick our words we're gonna say item with index specific index action outputs remember we have this random number that's available across the entire app very very useful now once we pick the list item at index we do not want to return the word as a document we want to return the actual string and remember a document has a bunch of fields with different translations okay so we're going to be comparing the English translation to the English translation that way we can see right away if they're equal so if you click here we don't want this um we don't want the whole document right what we need is this available options and we want to do get document property and we want to select the English version you can do Spanish to Spanish French the French doesn't really matter which one you pick I just picked English the next thing that you want to do is you want to compare if that word that random word is really the same word that the user swiped on so you're going to come to equal to and here you're going to scroll down you're going to pick swipeable card current element because this is the card that the user swipe which resulted in this whole action being triggered this is the most important thing we're going to pick this document properties and we're going to pick English as well confirm okay so now it's checking whether you know that value that's being displayed that word is being displayed a random word is the same that the users just swiped on or swipe right on if it's true if it's the same word we're gonna say congratulations we're gonna do maybe a snack bar something simple if it's false we're gonna do a snack bar we're gonna say okay and that's it we're gonna close this we're gonna reload our app we still have the test environment and now let's see if it works all right so here's the app and as you can see the word that was picked at random is manzan and you need to decide if this word is the same as this word right here so I'm gonna say no I'm gonna say no and I'm gonna say yes because this is the same word I'm gonna say yes and we see correct now you can reload this and play it again now I've just reloaded it and now we're seeing a different word here okay so I can say yes wrong uh maybe it's this one okay it's not this one it's not this it's not this okay maybe it's this one I think it's this one and obviously you can customize this app you can change the language maybe you want to see a Portuguese version of the word or a French or another language you can do that as well you can add some other custom optimizations and the point of showing you guys the sub is just to give you an idea what kind of apps that you can build with flutter flow and granted this is on the simpler side right you can build a lot more complex apps you can have an app with tons and tons of different widgets doing all kinds of things so it's really up to you how far you want to take it how complex you want to you want to build it or how simple you want to build it the choice is really yours now if you are interested in really mastering flutter flow really really learning it and understanding it at a deeper level in order to build the kind of apps that you really want to build whether that's to clone an existing app or build a brand new app that nobody has built before you really want to check out my training called mastering flutter flow mastering flutter flow is my comprehensive training that takes you from A to Z when it comes to building apps with flutter flow and along with high quality video training modules you'll also get access to a support area within the community where you can ask questions and get clarifications to various things you're not sure about plus you'll also get access to our exclusive Discord server where you can discuss various things with the community as well as get help with various things that you're struggling with so if you want to master flutter flow and build the apps of your dreams definitely check out my training which you're gonna see in the link below this video I look very much forward to seeing you in our mastering flutterflow Community now if you guys want to see more videos where I show you how to use flutter flow and some of the functionality check out the video you're seeing in the corner of your screen that video is going to show you some amazing tips and tricks when it comes to using flutterfly

Channel: James NoCode

Views: 10,821

Keywords: flutterflow tutorial, flutterflow app example, how to build a nocode app quickly

Id: ZTAsqirj7Mw

Length: 37min 9sec (2229 seconds)

Published: Tue Mar 28 2023